feat: expand intelligent investigation workspace

src/features/workbench/components/investigation-expand-card.tsx

@@ -1,9 +1,10 @@
-import { useCallback, useId, useRef, useState, type ReactNode, type Ref } from "react";
+import { useCallback, useRef, useState, type ReactNode, type Ref } from "react";
 import { createPortal } from "react-dom";
-import * as Dialog from "@radix-ui/react-dialog";
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motion, useReducedMotion } from "motion/react";
 import { Maximize2, X } from "lucide-react";
 import { Button } from "@/shared/ui/button";
+import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from "@/shared/ui/dialog";
+import { createReadingPreview } from "@/shared/ui/reading-preview";
 import { cn } from "@/shared/ui/cn";
 
 /** Report-specific progressive disclosure. The source stays mounted while reading. */
@@ -27,7 +28,6 @@ export function InvestigationExpandCard({
   reuseContent?: boolean;
   headingAccessory?: ReactNode;
 }) {
-  const id = useId();
   const triggerRef = useRef<HTMLButtonElement>(null);
   const restoreFocusRef = useRef(true);
   const [open, setOpen] = useState(false);
@@ -35,6 +35,7 @@ export function InvestigationExpandCard({
   const [reading, setReading] = useState<{ revision: string; content: typeof children } | null>(null);
   const [contentHost] = useState(() => reuseContent ? document.createElement("div") : null);
   const previewSlot = useRef<HTMLDivElement | null>(null);
+  const snapshot = useRef<HTMLElement | null>(null);
   const attachPreview = useCallback((slot: HTMLDivElement | null) => {
     previewSlot.current = slot;
     if (slot && contentHost && !contentHost.isConnected) slot.appendChild(contentHost);
@@ -43,24 +44,22 @@ export function InvestigationExpandCard({
     const preview = previewSlot.current;
     if (!preview || !contentHost) return;
     if (slot) {
-      // Reserve only the vacated inline space while expanded. The graph itself
-      // keeps its natural height, including after content updates or resizing.
-      // Use the layout height, not a bounding box scaled by the card animation.
-      preview.style.height = getComputedStyle(preview).height;
+      snapshot.current?.remove();
+      snapshot.current = createReadingPreview(contentHost);
+      preview.append(snapshot.current);
       slot.appendChild(contentHost);
     } else {
+      snapshot.current?.remove();
+      snapshot.current = null;
       preview.appendChild(contentHost);
-      preview.style.removeProperty("height");
     }
   }, [contentHost]);
   const reduced = useReducedMotion();
-  const duration = reduced || keyboard ? 0 : 0.24;
-  const transition = { duration, ease: [0.22, 1, 0.36, 1] as const };
   const close = (restoreFocus = true) => { restoreFocusRef.current = restoreFocus; setOpen(false); };
   const content = reading?.content ?? children;
 
   return (
-    <Dialog.Root open={open} onOpenChange={(next) => {
+    <Dialog open={open} onOpenChange={(next) => {
       setOpen(next);
       if (next) {
         restoreFocusRef.current = true;
@@ -68,69 +67,52 @@ export function InvestigationExpandCard({
         onOpen?.();
       }
     }}>
-      <motion.section
+      <section
         ref={contentRef}
         aria-label={label}
         className={cn("investigation-report-section investigation-expand-card", className)}
-        layoutId={reduced || keyboard ? undefined : id}
-        layoutDependency={open}
-        transition={transition}
-        style={{ borderRadius: 12 }}
       >
         <div className="investigation-card-heading">
           <div className="flex min-w-0 flex-wrap items-center gap-2">
             <h3 className="text-sm font-semibold text-[var(--ink)]">{title}</h3>
             {headingAccessory}
           </div>
-          <Dialog.Trigger asChild>
+          <DialogTrigger asChild>
             <Button ref={triggerRef} variant="ghost" size="icon-sm" aria-label={triggerLabel} disabled={disabled}
               title={triggerLabel} onClick={(event) => setKeyboard(event.detail === 0)}>
               <Maximize2 size={15} aria-hidden />
             </Button>
-          </Dialog.Trigger>
+          </DialogTrigger>
         </div>
         {/* Contain child margins so the occupied and vacated slots measure alike. */}
         {contentHost ? <div ref={attachPreview} className="flow-root" /> : preview}
-      </motion.section>
+      </section>
       {contentHost ? createPortal(typeof children === "function" ? children(close) : children, contentHost) : null}
-      <Dialog.Portal forceMount>
-        <AnimatePresence initial={false}>
-          {open ? (
-            <Dialog.Overlay forceMount asChild key="backdrop">
-              <motion.div className="investigation-detail-backdrop"
-                initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={transition} />
-            </Dialog.Overlay>
-          ) : null}
-          {open ? (
-            <div className="investigation-detail-positioner" key="detail">
-              <Dialog.Content forceMount asChild aria-describedby={undefined}
-                onEscapeKeyDown={(event) => { event.stopPropagation(); setKeyboard(true); }}
-                onCloseAutoFocus={(event) => { event.preventDefault(); if (restoreFocusRef.current) triggerRef.current?.focus({ preventScroll: true }); }}>
-                <motion.section className={cn("investigation-detail-panel", wide && "investigation-detail-panel-wide")}
-                  layoutId={reduced || keyboard ? undefined : id} layoutDependency={open}
-                  initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
-                  transition={transition} style={{ borderRadius: 12 }}>
-                  <header className="investigation-detail-heading">
-                    <Dialog.Title className="text-base font-semibold text-[var(--ink)]">{title}</Dialog.Title>
-                    <Dialog.Close asChild>
-                      <Button variant="ghost" size="icon-sm" aria-label="关闭详情"><X size={17} aria-hidden /></Button>
-                    </Dialog.Close>
-                  </header>
-                  <div className="investigation-detail-scroll">
-                    {contentHost ? <div ref={attachDetail} /> : typeof content === "function" ? content(close) : content}
-                  </div>
-                  {reading && revision !== undefined && reading.revision !== revision ? (
-                    <div className="investigation-report-update" role="status">
-                      <span>已有更新，当前保留正在阅读的版本。</span>
-                      <Button variant="outline" size="sm" onClick={() => setReading({ revision, content: children })}>查看最新内容</Button>
-                    </div>
-                  ) : null}
-                </motion.section>
-              </Dialog.Content>
-            </div>
-          ) : null}
-        </AnimatePresence>
-      </Dialog.Portal>
-    </Dialog.Root>
+      <DialogContent
+        className={cn("investigation-detail-panel bg-card", wide && "investigation-detail-panel-wide", keyboard && "investigation-detail-no-motion")}
+        overlayClassName={cn("investigation-detail-backdrop", keyboard && "investigation-detail-no-motion")}
+        data-agent-theme="chat" aria-describedby={undefined} showCloseButton={false}
+        onEscapeKeyDown={(event) => { event.stopPropagation(); setKeyboard(true); }}
+        onCloseAutoFocus={(event) => { event.preventDefault(); if (restoreFocusRef.current) triggerRef.current?.focus({ preventScroll: true }); }}>
+        <header className="investigation-detail-heading border-b border-border">
+          <DialogTitle className="text-base leading-6 tracking-normal">{title}</DialogTitle>
+          <DialogClose asChild>
+            <Button variant="ghost" size="icon-sm" aria-label="关闭详情"><X size={17} aria-hidden /></Button>
+          </DialogClose>
+        </header>
+        <div className="investigation-detail-scroll">
+          <motion.div initial={reduced || keyboard ? false : { opacity: 0, y: 4 }} animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}>
+            {contentHost ? <div ref={attachDetail} /> : typeof content === "function" ? content(close) : content}
+          </motion.div>
+        </div>
+        {reading && revision !== undefined && reading.revision !== revision ? (
+          <div className="investigation-report-update" role="status">
+            <span>已有更新，当前保留正在阅读的版本。</span>
+            <Button variant="outline" size="sm" onClick={() => setReading({ revision, content: children })}>查看最新内容</Button>
+          </div>
+        ) : null}
+      </DialogContent>
+    </Dialog>
   );
 }