@invergent/agent-chat-react 2.0.9 → 2.1.4

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn } from './chunk-QSC4UIVT.js';
 import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, lazy, useContext, Fragment as Fragment$1, Suspense, Children } from 'react';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, ChevronRightIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, Loader2Icon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, CopyIcon, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, GlobeIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, ListTodoIcon, ArrowUpIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, ChevronRightIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, Loader2Icon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, CopyIcon, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, GlobeIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, ThumbsUpIcon, ThumbsDownIcon, CircleCheckIcon, GitBranchIcon, ActivityIcon, EyeIcon, ListTodoIcon, ArrowUpIcon, ListIcon, PenLineIcon, ArrowRight, BookOpenIcon, FileEditIcon, WrenchIcon, FileCodeIcon, CodeIcon, FileArchiveIcon, FileVideoIcon, FileAudioIcon, FileImageIcon, FileChartLineIcon, FileSpreadsheetIcon, XCircleIcon, CheckCircle2Icon, Code, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Progress as Progress$1, Tabs as Tabs$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -79,87 +79,6 @@ function Button({
     }
   );
 }
-function BrowserControlBar({
-  sessionId,
-  hasControl,
-  adapter,
-  onControlAcquired,
-  onControlReleased
-}) {
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState(null);
-  async function toggleControl() {
-    if (!sessionId || pending) return;
-    setPending(true);
-    setError(null);
-    try {
-      if (hasControl) {
-        await adapter.releaseBrowserControl(sessionId);
-        onControlReleased?.();
-      } else {
-        await adapter.acquireBrowserControl(sessionId);
-        onControlAcquired?.();
-      }
-    } catch (nextError) {
-      setError(nextError.message);
-    } finally {
-      setPending(false);
-    }
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-11 items-center gap-2 border-t border-line bg-card px-3 py-2", children: [
-    /* @__PURE__ */ jsxs(
-      Button,
-      {
-        type: "button",
-        size: "xs",
-        variant: hasControl ? "secondary" : "default",
-        disabled: !sessionId || pending,
-        onClick: () => void toggleControl(),
-        children: [
-          hasControl ? /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MousePointer2Icon, { className: "size-3", "aria-hidden": "true" }),
-          hasControl ? "Return control" : "Take control"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-red-500", "aria-hidden": "true" }),
-      "Live"
-    ] }),
-    error && /* @__PURE__ */ jsx("span", { className: "max-w-40 truncate text-[11px] text-destructive", children: error })
-  ] });
-}
-function BrowserLiveView({
-  src,
-  testId = "browser-iframe"
-}) {
-  return /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      "data-testid": testId,
-      title: "Browser live view",
-      src,
-      className: "h-full w-full border-0 bg-black",
-      allow: "clipboard-read; clipboard-write"
-    }
-  );
-}
-function BrowserStatusDot({
-  status
-}) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: cn(
-        "inline-block size-2 shrink-0 rounded-full",
-        status === "live" && "bg-emerald-500",
-        status === "user-control" && "bg-amber-500",
-        status === "provisioning" && "animate-pulse bg-sky-500",
-        status === "closed" && "bg-muted-foreground"
-      )
-    }
-  );
-}
 function Dialog({
   ...props
 }) {
@@ -289,6 +208,194 @@ function DialogDescription({
     }
   );
 }
+function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  confirmIcon,
+  variant = "destructive",
+  confirmDisabled = false,
+  onConfirm,
+  onCancel
+}) {
+  const [loading, setLoading] = useState(false);
+  const handleConfirm = async () => {
+    setLoading(true);
+    try {
+      await onConfirm();
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!next && !loading) onCancel();
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: loading, onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant,
+              disabled: loading || confirmDisabled,
+              onClick: () => void handleConfirm(),
+              children: [
+                loading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 size-3.5 animate-spin", "aria-hidden": "true" }) : confirmIcon,
+                confirmLabel
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function BrowserControlBar({
+  sessionId,
+  hasControl,
+  adapter,
+  onControlAcquired,
+  onControlReleased,
+  onClose
+}) {
+  const [pending, setPending] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [error, setError] = useState(null);
+  async function toggleControl() {
+    if (!sessionId || pending) return;
+    setPending(true);
+    setError(null);
+    try {
+      if (hasControl) {
+        await adapter.releaseBrowserControl(sessionId);
+        onControlReleased?.();
+      } else {
+        await adapter.acquireBrowserControl(sessionId);
+        onControlAcquired?.();
+      }
+    } catch (nextError) {
+      setError(nextError.message);
+    } finally {
+      setPending(false);
+    }
+  }
+  async function handleConfirmClose() {
+    setError(null);
+    try {
+      if (hasControl) {
+        try {
+          await adapter.releaseBrowserControl(sessionId);
+          onControlReleased?.();
+        } catch (releaseError) {
+          console.error(
+            "Failed to release browser control before close",
+            releaseError
+          );
+        }
+      }
+      if (adapter.closeBrowserSession) {
+        await adapter.closeBrowserSession(sessionId);
+      }
+      setConfirmOpen(false);
+      onClose?.();
+    } catch (nextError) {
+      setError(nextError.message);
+      throw nextError;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-11 items-center gap-2 border-t border-line bg-card px-3 py-2", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "xs",
+        variant: hasControl ? "secondary" : "default",
+        disabled: !sessionId || pending,
+        onClick: () => void toggleControl(),
+        children: [
+          hasControl ? /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MousePointer2Icon, { className: "size-3", "aria-hidden": "true" }),
+          hasControl ? "Return control" : "Take control"
+        ]
+      }
+    ),
+    onClose && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "xs",
+        variant: "secondary",
+        disabled: !sessionId,
+        onClick: () => {
+          setError(null);
+          setConfirmOpen(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx(XIcon, { className: "size-3", "aria-hidden": "true" }),
+          "Close"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-red-500", "aria-hidden": "true" }),
+      "Live"
+    ] }),
+    error && /* @__PURE__ */ jsx("span", { className: "max-w-40 truncate text-[11px] text-destructive", children: error }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: confirmOpen,
+        title: "Close browser session?",
+        description: adapter.closeBrowserSession ? "This permanently shuts down the browser sandbox for this session. The agent will lose access to the page until it re-opens a browser. This cannot be undone." : "This hides the browser panel. The sandbox stays running so the agent can keep using it.",
+        confirmLabel: "Close browser",
+        variant: "destructive",
+        confirmIcon: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" }),
+        onConfirm: handleConfirmClose,
+        onCancel: () => setConfirmOpen(false)
+      }
+    )
+  ] });
+}
+function BrowserLiveView({
+  src,
+  testId = "browser-iframe"
+}) {
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      "data-testid": testId,
+      title: "Browser live view",
+      src,
+      className: "h-full w-full border-0 bg-black",
+      allow: "clipboard-read; clipboard-write"
+    }
+  );
+}
+function BrowserStatusDot({
+  status
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "inline-block size-2 shrink-0 rounded-full",
+        status === "live" && "bg-emerald-500",
+        status === "user-control" && "bg-amber-500",
+        status === "provisioning" && "animate-pulse bg-sky-500",
+        status === "closed" && "bg-muted-foreground"
+      )
+    }
+  );
+}
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -335,7 +442,12 @@ function TooltipContent({
     }
   ) });
 }
-function BrowserPane({ sessionId, state, adapter }) {
+function BrowserPane({
+  sessionId,
+  state,
+  adapter,
+  onClose
+}) {
   const [fullscreenOpen, setFullscreenOpen] = useState(false);
   const [openFullscreenOnControl, setOpenFullscreenOnControl] = useState(false);
   const [localControlActive, setLocalControlActive] = useState(false);
@@ -395,14 +507,19 @@ function BrowserPane({ sessionId, state, adapter }) {
   const handleFullscreenOpenChange = useCallback(
     (open) => {
       setFullscreenOpen(open);
-      if (open || !hasUserControl || !hasControlAdapter) return;
-      setLocalControlActive(false);
-      void adapter.releaseBrowserControl(sessionId).catch((error) => {
-        console.error("Failed to release browser control", error);
-      });
     },
-    [adapter, hasControlAdapter, hasUserControl, sessionId]
+    []
   );
+  useEffect(() => {
+    if (!canUseLiveView || !hasControlAdapter) return;
+    const handle = window.setInterval(() => {
+      void adapter.acquireBrowserControl(sessionId).catch((error) => {
+        console.error("Failed to refresh browser control", error);
+        setLocalControlActive(false);
+      });
+    }, 25e3);
+    return () => window.clearInterval(handle);
+  }, [adapter, canUseLiveView, hasControlAdapter, sessionId]);
   useEffect(() => {
     if (!hasLiveView || canUseLiveView) {
       setPreviewLoading(false);
@@ -473,7 +590,8 @@ function BrowserPane({ sessionId, state, adapter }) {
                 setLocalControlActive(true);
                 setOpenFullscreenOnControl(true);
               },
-              onControlReleased: () => setLocalControlActive(false)
+              onControlReleased: () => setLocalControlActive(false),
+              onClose
             }
           )
         ]
@@ -685,7 +803,7 @@ var ShimmerComponent = ({
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: cn("shimmer text-muted-foreground", className),
+      className: cn("shimmer text-foreground/70", className),
       style: {
         "--shimmer-duration": duration * 1e3,
         "--shimmer-spread": `${dynamicSpread}px`
@@ -787,12 +905,12 @@ var ReasoningTrigger = memo(
       CollapsibleTrigger,
       {
         className: cn(
-          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          "flex w-full items-center gap-2 text-foreground/70 text-sm transition-colors hover:text-foreground",
           className
         ),
         ...props,
         children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foregound text-sm", children: getThinkingMessage(isStreaming, duration) }),
+          /* @__PURE__ */ jsx("span", { className: "text-foregound/70 text-sm", children: getThinkingMessage(isStreaming, duration) }),
           /* @__PURE__ */ jsx(
             ChevronDownIcon,
             {
@@ -814,7 +932,7 @@ var ReasoningContent = memo(
     {
       className: cn(
         "mt-4 text-sm",
-        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-foreground/60 italic outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-foreground/70 italic outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
         className
       ),
       ...props,
@@ -3480,7 +3598,7 @@ function buildAnswer(q, sel) {
   if (!choice) return null;
   return { question: q.prompt, answer: choice.label, is_other: false };
 }
-function ClarifyToolBlock({ tc }) {
+function AskUserQuestionToolBlock({ tc }) {
   const { adapter, sessionId } = useAgentChatAdapterContext();
   const args = useMemo(() => parseArgs(tc.args), [tc.args]);
   const questions = args?.questions ?? [];
@@ -3490,7 +3608,7 @@ function ClarifyToolBlock({ tc }) {
   );
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState(null);
-  const locked = tc.clarifyAnswers !== void 0 || tc.status !== "running";
+  const locked = tc.askUserQuestionAnswers !== void 0 || tc.status !== "running";
   useEffect(() => {
     if (active >= questions.length && questions.length > 0) setActive(0);
   }, [active, questions.length]);
@@ -3518,7 +3636,7 @@ function ClarifyToolBlock({ tc }) {
     setError(null);
     setSubmitting(true);
     try {
-      await adapter.submitClarifyResponse({
+      await adapter.submitAskUserQuestionResponse({
         sessionId,
         toolCallId: tc.id,
         responses: answers
@@ -3551,10 +3669,10 @@ function ClarifyToolBlock({ tc }) {
     return () => window.removeEventListener("keydown", handler);
   }, [handleCancel, handleSubmit, locked]);
   if (questions.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/50 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: "clarify: no questions provided" });
+    return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/50 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: "ask_user_question: no questions provided" });
   }
   if (locked) {
-    return /* @__PURE__ */ jsx(ClarifyLocked, { tc, questions });
+    return /* @__PURE__ */ jsx(AskUserQuestionLocked, { tc, questions });
   }
   const current = questions[active];
   const currentSel = selections[active] ?? emptySelection();
@@ -3566,7 +3684,7 @@ function ClarifyToolBlock({ tc }) {
         "max-w-2xl"
       ),
       role: "group",
-      "aria-label": "Clarifying questions",
+      "aria-label": "Questions for the user",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 pt-2", children: [
           /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 overflow-x-auto text-sm", children: questions.map((_, i) => {
@@ -3730,11 +3848,11 @@ function Radio({ selected }) {
     }
   );
 }
-function ClarifyLocked({
+function AskUserQuestionLocked({
   tc,
   questions
 }) {
-  const answers = tc.clarifyAnswers;
+  const answers = tc.askUserQuestionAnswers;
   const byPrompt = new Map(
     answers?.map((a) => [a.question, a]) ?? []
   );
@@ -4142,8 +4260,8 @@ function ToolCallBlock({
       return /* @__PURE__ */ jsx(SkillViewBlock, { tc });
     case "skill_manage":
       return /* @__PURE__ */ jsx(SkillManageToolBlock, { tc });
-    case "clarify":
-      return /* @__PURE__ */ jsx(ClarifyToolBlock, { tc });
+    case "ask_user_question":
+      return /* @__PURE__ */ jsx(AskUserQuestionToolBlock, { tc });
     case "create_artifact":
       return /* @__PURE__ */ jsx(ArtifactToolBlock, { tc, resolvedName: resolvedArtifactName });
     case "delegate_task":
@@ -5684,7 +5802,9 @@ function ChatComposerInner({
   showWorkspace = false,
   onToggleWorkspace,
   canShowBrowser = false,
-  canShowWorkspace = false
+  canShowWorkspace = false,
+  viewMode = "simple",
+  onViewModeChange
 }) {
   const { adapter } = useAgentChatAdapterContext();
   const { textInput, attachments } = usePromptInputController();
@@ -5991,6 +6111,36 @@ function ChatComposerInner({
                       }
                     )
                   ] }),
+                  onViewModeChange && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      role: "group",
+                      "aria-label": "Chat view mode",
+                      className: "inline-flex overflow-hidden rounded-md border border-border",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-pressed": viewMode === "simple",
+                            onClick: () => onViewModeChange("simple"),
+                            className: viewMode === "simple" ? "bg-accent px-2 py-1 text-xs text-foreground" : "px-2 py-1 text-xs text-muted-foreground hover:text-foreground",
+                            children: "Simple"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-pressed": viewMode === "expert",
+                            onClick: () => onViewModeChange("expert"),
+                            className: viewMode === "expert" ? "bg-accent px-2 py-1 text-xs text-foreground" : "px-2 py-1 text-xs text-muted-foreground hover:text-foreground",
+                            children: "Expert"
+                          }
+                        )
+                      ]
+                    }
+                  ),
                   canShowBrowser && onToggleBrowser && /* @__PURE__ */ jsx(
                     PromptInputButton,
                     {
@@ -6157,16 +6307,26 @@ function ChatComposerInner({
                   CommandItem,
                   {
                     value: cmd.value,
-                    keywords: [cmd.description],
+                    keywords: cmd.isExpert ? [cmd.description, "expert"] : [cmd.description],
                     onSelect: () => handleCommandSelect(cmd.value),
                     className: "grid grid-cols-[12rem_1fr] items-baseline gap-3 [&_svg]:hidden",
                     children: [
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsxs(
                         "span",
                         {
-                          className: "font-mono font-semibold text-foreground truncate",
+                          className: "inline-flex items-center gap-1.5 min-w-0 max-w-full",
                           title: cmd.label,
-                          children: cmd.label
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-foreground truncate", children: cmd.label }),
+                            cmd.isExpert && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "shrink-0 rounded-sm bg-primary/10 px-1 text-[9px] font-semibold uppercase tracking-wider text-primary",
+                                "aria-label": "Expert specialist",
+                                children: "expert"
+                              }
+                            )
+                          ]
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -6958,1194 +7118,1976 @@ var ErrorMessage = memo(function ErrorMessage2({
     }
   );
 });
-function messageToEntries(msg, isLast, artifactFallbacks) {
-  if (msg.role === "system") {
-    if (msg.systemKind === "skill_invoked") {
-      return [{
-        kind: "skill_invoked",
-        key: msg.id,
-        skill: msg.systemMeta?.skill ?? msg.content,
-        stagedAt: msg.systemMeta?.staged_at ?? null
-      }];
-    }
-    if (msg.systemKind === "artifact") {
-      const { artifactId, name, kind, version } = unpackArtifactMeta(
-        msg.systemMeta,
-        msg.content
-      );
-      return [{
-        kind: "artifact",
-        key: msg.id,
-        artifactId,
-        name,
-        artifactKind: kind,
-        version
-      }];
-    }
-    return [];
-  }
-  const entries = [];
-  const hasToolCalls = !!(msg.toolCalls && msg.toolCalls.length > 0);
-  const hasContent = !!(msg.content && msg.content !== msg.reasoning);
-  const isStreaming = msg.status === "streaming" && isLast;
-  const effectiveReasoning = hasToolCalls && hasContent ? msg.reasoning ? msg.reasoning + "\n" + msg.content : msg.content : msg.reasoning;
-  const effectiveHasContent = hasContent && !hasToolCalls;
-  if (effectiveReasoning) {
-    entries.push({
-      kind: "reasoning",
-      key: `${msg.id}-reasoning`,
-      reasoning: effectiveReasoning,
-      isStreaming: isStreaming && !effectiveHasContent && !hasToolCalls
-    });
-  }
-  if (hasToolCalls) {
-    for (const tc of msg.toolCalls) {
-      if (tc.toolName === "create_artifact") {
-        const resolvedName = parseArgs(tc.args)?.name ?? artifactFallbacks[tc.id];
-        const status = effectiveStatus(tc);
-        if (!resolvedName && status !== "error") continue;
-        entries.push({
-          kind: "tool",
-          key: tc.id,
-          tc,
-          resolvedArtifactName: resolvedName
-        });
-        continue;
-      }
-      if (tc.toolName === "terminal" && tc.status !== "running") {
-        const parsed = parseTerminalResult(tc.result, tc.args);
-        if (parsed && (parsed.exit_code !== 0 || parsed.error)) continue;
-      }
-      entries.push({ kind: "tool", key: tc.id, tc });
-    }
-  }
-  if (effectiveHasContent) {
-    entries.push({
-      kind: "text",
-      key: `${msg.id}-text`,
-      content: msg.content,
-      isStreaming,
-      msg
-    });
-  }
-  const hasRunningTool = hasToolCalls && msg.toolCalls.some(
-    (tc) => tc.status === "running"
-  );
-  if (isStreaming && !effectiveHasContent && !hasRunningTool) {
-    entries.push({ kind: "thinking", key: `${msg.id}-thinking` });
-  }
-  return entries;
-}
-function groupBrowserActivityEntries(entries) {
-  const grouped = [];
-  let buffer = [];
-  const flush = () => {
-    if (buffer.length === 0) return;
-    grouped.push({
-      kind: "browser_activity",
-      key: `browser-activity-${buffer[0]?.id}-${buffer[buffer.length - 1]?.id}`,
-      calls: buffer
-    });
-    buffer = [];
-  };
-  for (const entry of entries) {
-    if (entry.kind === "tool" && isBrowserToolCall(entry.tc)) {
-      buffer.push(entry.tc);
-      continue;
-    }
-    flush();
-    grouped.push(entry);
-  }
-  flush();
-  return grouped;
-}
-function isBrowserToolCall(call) {
-  return call.toolName.startsWith("browser_");
+
+// src/lib/format.ts
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function groupWebSearchEntries(entries) {
-  const grouped = [];
-  let buffer = [];
-  const flush = () => {
-    if (buffer.length === 0) return;
-    if (buffer.length === 1) {
-      grouped.push({ kind: "tool", key: buffer[0].id, tc: buffer[0] });
-    } else {
-      grouped.push({
-        kind: "web_search_group",
-        key: `web-search-${buffer[0].id}-${buffer[buffer.length - 1].id}`,
-        calls: buffer
-      });
-    }
-    buffer = [];
+function getLanguageHint(path) {
+  const name = path.split("/").pop() ?? path;
+  const dot = name.lastIndexOf(".");
+  if (dot < 0) return "plaintext";
+  const ext = name.slice(dot).toLowerCase();
+  const map = {
+    ".py": "python",
+    ".js": "javascript",
+    ".ts": "typescript",
+    ".tsx": "tsx",
+    ".jsx": "jsx",
+    ".json": "json",
+    ".yaml": "yaml",
+    ".yml": "yaml",
+    ".toml": "toml",
+    ".sql": "sql",
+    ".sh": "bash",
+    ".css": "css",
+    ".html": "html",
+    ".md": "markdown",
+    ".rs": "rust",
+    ".go": "go",
+    ".java": "java",
+    ".rb": "ruby",
+    ".php": "php",
+    ".c": "c",
+    ".cpp": "cpp",
+    ".h": "c",
+    ".hpp": "cpp"
   };
-  for (const entry of entries) {
-    if (entry.kind === "tool" && entry.tc.toolName === "web_search") {
-      buffer.push(entry.tc);
-      continue;
-    }
-    flush();
-    grouped.push(entry);
-  }
-  flush();
-  return grouped;
+  return map[ext] ?? "plaintext";
 }
-function groupMessages(messages) {
-  const groups = [];
-  let pendingSystem = [];
-  const drainPendingAsOrphans = () => {
-    for (const { msg, index } of pendingSystem) {
-      groups.push({ role: "system", messages: [msg], lastGlobalIndex: index });
-    }
-    pendingSystem = [];
-  };
-  for (let i = 0; i < messages.length; i++) {
-    const msg = messages[i];
-    if (msg.role === "system") {
-      pendingSystem.push({ msg, index: i });
-      continue;
-    }
-    if (msg.role === "assistant") {
-      const prev = groups[groups.length - 1];
-      if (prev && prev.role === "assistant" && pendingSystem.length === 0) {
-        prev.messages.push(msg);
-        prev.lastGlobalIndex = i;
-      } else {
-        const folded = pendingSystem.map((p) => p.msg);
-        pendingSystem = [];
-        groups.push({
-          role: "assistant",
-          messages: [...folded, msg],
-          lastGlobalIndex: i
-        });
-      }
-      continue;
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
     }
-    drainPendingAsOrphans();
-    groups.push({ role: "user", messages: [msg], lastGlobalIndex: i });
-  }
-  drainPendingAsOrphans();
-  return groups;
-}
-function unpackArtifactMeta(systemMeta, fallbackName) {
-  const meta = systemMeta ?? {};
-  return {
-    artifactId: meta.artifact_id ?? "",
-    name: meta.name ?? fallbackName,
-    kind: meta.kind ?? "markdown",
-    version: meta.version ?? 1
-  };
+  );
 }
-function OrphanSystemMarker({
-  message,
-  sessionId,
-  onRetry
+var SKELETON_WIDTHS = [70, 85, 55, 90, 60, 78, 45, 82, 65, 72];
+var PDF_WORKER_SRC = new URL(
+  "pdfjs-dist/legacy/build/pdf.worker.mjs",
+  import.meta.url
+).toString();
+function FileViewer({
+  file,
+  loading,
+  error,
+  downloadUrl,
+  onDelete,
+  onClose
 }) {
-  if (message.systemKind === "skill_invoked") {
-    const skill = message.systemMeta?.skill ?? message.content;
-    return /* @__PURE__ */ jsxs("div", { className: "my-2 flex items-center gap-2 px-4 text-xs text-muted-foreground ", children: [
-      /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-emerald-500" }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Skill" }),
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate", children: skill })
-      ] })
-    ] });
-  }
-  if (message.systemKind === "artifact" && sessionId) {
-    const unpacked = unpackArtifactMeta(message.systemMeta, message.content);
-    return /* @__PURE__ */ jsx(
-      ArtifactBlock,
-      {
-        sessionId,
-        artifactId: unpacked.artifactId,
-        name: unpacked.name,
-        kind: unpacked.kind,
-        version: unpacked.version
-      }
-    );
-  }
-  if (message.systemKind === "error" && message.errorInfo) {
-    return /* @__PURE__ */ jsx("div", { className: "mx-auto my-2 w-full max-w-4xl", children: /* @__PURE__ */ jsx(ErrorMessage, { errorInfo: message.errorInfo, onRetry }) });
-  }
-  return null;
-}
-function cancelledToolLabel(toolName) {
-  const map = {
-    terminal: "Command",
-    execute_code: "Execute Code",
-    read_file: "Read",
-    write_file: "Write",
-    patch: "Patch",
-    search_files: "Search Files",
-    list_files: "List Files",
-    web_search: "Web Search",
-    web_extract: "Web Fetch",
-    web_crawl: "Web Crawl",
-    session_search: "Session Search",
-    memory: "Memory",
-    todo: "Todo",
-    skills_list: "Skills",
-    skill_view: "Skill",
-    consult_expert: "Expert",
-    delegate_task: "Delegate",
-    clarify: "Clarify",
-    process: "Process",
-    create_artifact: "Artifact"
-  };
-  return map[toolName] ?? toolName;
-}
-function CancelledToolRow({ tc }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [
-    /* @__PURE__ */ jsx("span", { className: "font-semibold text-muted-foreground", children: cancelledToolLabel(tc.toolName) }),
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70", children: "Cancelled" })
-  ] });
-}
-function TimelineEntryItem({
-  entry,
-  step,
-  sessionId,
-  onFileSelect
-}) {
-  if (entry.kind === "reasoning") {
-    return /* @__PURE__ */ jsx(ReasoningEntry, { entry, step });
-  }
-  if (entry.kind === "tool") {
-    const rawStatus = effectiveStatus(entry.tc);
-    const hideArtifactFailure = rawStatus === "error" && entry.tc.toolName === "create_artifact";
-    const indicatorStatus = hideArtifactFailure ? "running" : rawStatus;
-    const failureSummary = rawStatus === "error" && !hideArtifactFailure ? toolErrorSummary(entry.tc.result) : "";
-    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
-      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
-        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-        /* @__PURE__ */ jsx(
-          TimelineIndicator,
-          {
-            className: cn("size-2 border-none", statusColorClass(indicatorStatus))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(TimelineContent, { children: entry.tc.cancelled ? /* @__PURE__ */ jsx(CancelledToolRow, { tc: entry.tc }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx(
-          ToolCallBlock,
-          {
-            tc: entry.tc,
-            resolvedArtifactName: entry.resolvedArtifactName,
-            onFileSelect
-          }
-        ),
-        failureSummary ? /* @__PURE__ */ jsx("div", { className: "max-w-full truncate text-xs text-destructive", title: failureSummary, children: failureSummary }) : null
-      ] }) })
-    ] });
-  }
-  if (entry.kind === "browser_activity") {
-    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
-      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
-        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-        /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-amber-500" })
-      ] }),
-      /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(BrowserActivityGroup, { calls: entry.calls }) })
-    ] });
-  }
-  if (entry.kind === "web_search_group") {
-    const allComplete = entry.calls.every((tc) => tc.status === "complete");
-    const anyRunning = entry.calls.some((tc) => tc.status === "running");
-    const indicatorClass = anyRunning ? "bg-emerald-500 animate-pulse" : allComplete ? "bg-emerald-500" : "bg-red-500";
-    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
-      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
-        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-        /* @__PURE__ */ jsx(TimelineIndicator, { className: cn("size-2 border-none", indicatorClass) })
-      ] }),
-      /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(WebSearchGroupBlock, { tcs: entry.calls }) })
-    ] });
-  }
-  if (entry.kind === "text") {
-    return /* @__PURE__ */ jsx(TextEntry, { entry, step });
-  }
-  if (entry.kind === "skill_invoked") {
-    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
-      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
-        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-        /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-emerald-500" })
-      ] }),
-      /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 py-1 text-sm ", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Skill" }),
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate", children: entry.skill }),
-        entry.stagedAt && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground/70 ", children: [
-          "staged at ",
-          entry.stagedAt
+  const visible = loading || file !== null || error !== null;
+  if (!visible) return null;
+  const fileName2 = file?.path.split("/").pop() ?? "File";
+  const lang = file ? getLanguageHint(file.path) : "";
+  const isPdf = file?.mime_type === "application/pdf" || file?.path.toLowerCase().endsWith(".pdf") || false;
+  const isImage = file?.encoding === "base64" && !isPdf;
+  const HeaderIcon = isImage ? ImageIcon : FileTextIcon;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col border-t border-line", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-line px-3 py-2", children: [
+      /* @__PURE__ */ jsx(HeaderIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-medium", children: fileName2 }),
+        /* @__PURE__ */ jsxs("div", { className: "truncate text-[10px] text-muted-foreground", children: [
+          file?.path ?? "Loading...",
+          file && /* @__PURE__ */ jsxs("span", { className: "ml-1.5", children: [
+            formatFileSize(file.size),
+            file.truncated && " (truncated)"
+          ] })
         ] })
-      ] }) })
-    ] });
-  }
-  if (entry.kind === "artifact") {
-    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
-      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
-        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-        /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-sky-500" })
       ] }),
-      /* @__PURE__ */ jsx(TimelineContent, { children: sessionId ? /* @__PURE__ */ jsx(
-        ArtifactBlock,
+      downloadUrl && /* @__PURE__ */ jsx(
+        "a",
         {
-          sessionId,
-          artifactId: entry.artifactId,
-          name: entry.name,
-          kind: entry.artifactKind,
-          version: entry.version
+          href: downloadUrl,
+          download: fileName2,
+          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          "aria-label": `Download ${fileName2}`,
+          title: "Download",
+          children: /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5" })
         }
-      ) : null })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
-    /* @__PURE__ */ jsxs(TimelineHeader, { children: [
-      /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-primary animate-pulse" })
-    ] }),
-    /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) })
-  ] });
-}
-function ReasoningEntry({
-  entry,
-  step
-}) {
-  const reasoning = useSmoothStream(entry.reasoning, entry.isStreaming);
-  return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
-    /* @__PURE__ */ jsxs(TimelineHeader, { children: [
-      /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2" })
+      ),
+      onDelete && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onDelete,
+          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
+          "aria-label": `Delete ${fileName2}`,
+          title: "Delete",
+          children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          "aria-label": "Close file",
+          children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsxs(Reasoning, { isStreaming: entry.isStreaming, children: [
-      /* @__PURE__ */ jsx(ReasoningTrigger, {}),
-      /* @__PURE__ */ jsx(ReasoningContent, { children: reasoning })
-    ] }) })
+    /* @__PURE__ */ jsxs(ScrollArea, { className: "min-h-0 flex-1", children: [
+      loading && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 p-3", children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: "h-3.5 rounded",
+          style: {
+            width: `${SKELETON_WIDTHS[index % SKELETON_WIDTHS.length]}%`
+          }
+        },
+        index
+      )) }),
+      error && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
+        /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: error })
+      ] }),
+      file && isPdf && file.encoding !== "base64" && /* @__PURE__ */ jsx(FileViewerError, { message: "PDF preview requires base64 file content." }),
+      file && isPdf && file.encoding === "base64" && /* @__PURE__ */ jsx(PdfPreview, { file, fileName: fileName2 }),
+      file && isImage && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: `data:${file.mime_type ?? "image/png"};base64,${file.content}`,
+          alt: fileName2,
+          className: "max-h-[60vh] max-w-full rounded object-contain"
+        }
+      ) }),
+      file && !isImage && !isPdf && /* @__PURE__ */ jsx("pre", { className: "wrap-break-word whitespace-pre-wrap p-3 text-[11px] leading-relaxed text-foreground", children: /* @__PURE__ */ jsx("code", { "data-language": lang, children: file.content }) })
+    ] })
   ] });
 }
-function TextEntry({
-  entry,
-  step
-}) {
-  const content = useSmoothStream(entry.content, entry.isStreaming);
-  return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
-    /* @__PURE__ */ jsxs(TimelineHeader, { children: [
-      /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
-      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-foreground/40" })
-    ] }),
-    /* @__PURE__ */ jsxs(TimelineContent, { children: [
-      /* @__PURE__ */ jsx(MessageResponse, { children: content }),
-      entry.isFinalTurnText && entry.msg.status === "complete" && /* @__PURE__ */ jsx(TurnFeedback, { msg: entry.msg })
-    ] })
+function FileViewerError({ message }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
+    /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
+    /* @__PURE__ */ jsx("span", { children: message })
   ] });
 }
-function AssistantGroup({
-  messages,
-  lastGlobalIndex,
-  totalMessages,
-  isRunning,
-  sessionId,
-  artifactFallbacks,
-  onFileSelect,
-  onRetry
+function PdfPreview({
+  file,
+  fileName: fileName2
 }) {
-  let entries = [];
-  for (let i = 0; i < messages.length; i++) {
-    const isLast = i === messages.length - 1 && lastGlobalIndex === totalMessages - 1;
-    entries.push(...messageToEntries(messages[i], isLast, artifactFallbacks));
-  }
-  entries = groupBrowserActivityEntries(entries);
-  entries = groupWebSearchEntries(entries);
-  for (let i = entries.length - 1; i >= 0; i--) {
-    const entry = entries[i];
-    if (entry?.kind === "text") {
-      entries[i] = { ...entry, isFinalTurnText: true };
-      break;
-    }
-  }
-  const isTailGroup = lastGlobalIndex === totalMessages - 1;
-  const lastEntry = entries[entries.length - 1];
-  const hasRunningTool = entries.some(
-    (e) => e.kind === "tool" && e.tc.status === "running"
-  );
-  const tailMsg = messages[messages.length - 1];
-  if (isTailGroup && isRunning && !hasRunningTool && lastEntry?.kind !== "thinking") {
-    entries.push({ kind: "thinking", key: `${tailMsg.id}-tail-thinking` });
-  }
-  const tail = messages[messages.length - 1];
-  const showErrorInfo = tail && tail.role === "assistant" && tail.status === "error" && !!tail.errorInfo;
-  return /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsxs(MessageContent, { children: [
-    /* @__PURE__ */ jsx(Timeline, { defaultValue: 999, className: "gap-0", children: entries.map((entry, i) => /* @__PURE__ */ jsx(
-      TimelineEntryItem,
-      {
-        entry,
-        step: i + 1,
-        sessionId,
-        onFileSelect
-      },
-      entry.key
-    )) }),
-    showErrorInfo && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(ErrorMessage, { errorInfo: tail.errorInfo, onRetry }) })
-  ] }) });
-}
-function RetryBanner({ indicator }) {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "status",
-      className: "flex flex-col gap-1 border-l-2 border-amber-500 bg-amber-500/5 px-3 py-2 text-xs",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setOpen((prev) => !prev),
-            className: "flex items-center gap-2 text-left text-amber-600 hover:text-amber-700",
-            "aria-expanded": open,
-            children: [
-              /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-medium", children: indicator.title }),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
-                "attempt ",
-                indicator.attempt
-              ] }),
-              indicator.detail && (open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }))
-            ]
-          }
-        ),
-        open && indicator.detail && /* @__PURE__ */ jsx("pre", { className: "mt-1 overflow-x-auto rounded-none bg-background p-2 font-mono text-[11px] whitespace-pre-wrap wrap-break-word text-muted-foreground", children: indicator.detail })
-      ]
-    }
-  );
-}
-function ChatThread({
-  sessionId,
-  messages,
-  isRunning,
-  isLoadingHistory = false,
-  onSend,
-  onStop,
-  onFileSelect,
-  disabled = false,
-  disabledReason,
-  tokenUsage,
-  retryIndicator,
-  onRetry,
-  onComposerError,
-  showBrowser = false,
-  onToggleBrowser,
-  showWorkspace = false,
-  onToggleWorkspace,
-  canShowBrowser = false,
-  canShowWorkspace = false
-}) {
-  const groups = useMemo(() => groupMessages(messages), [messages]);
-  const artifactFallbacks = useMemo(() => {
-    const fallbacks = {};
-    const createArtifactToolCallIds = [];
-    let artifactIdx = 0;
-    for (const msg of messages) {
-      if (msg.role === "assistant" && msg.toolCalls) {
-        for (const tc of msg.toolCalls) {
-          if (tc.toolName === "create_artifact" && !tc.cancelled && tc.status !== "error") {
-            createArtifactToolCallIds.push(tc.id);
-          }
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const pdfViewerRef = useRef(null);
+  const eventBusRef = useRef(null);
+  const findControllerRef = useRef(null);
+  const [error, setError] = useState(null);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [pagesCount, setPagesCount] = useState(0);
+  const [scale, setScale] = useState(1);
+  const [query, setQuery] = useState("");
+  useEffect(() => {
+    let cancelled = false;
+    let loadingTask = null;
+    let pdfDocument = null;
+    const renderPdf = async () => {
+      setError(null);
+      const container = containerRef.current;
+      const viewerElement = viewerRef.current;
+      if (!container || !viewerElement) return;
+      const pdfBytes = decodeBase64(file.content);
+      const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
+      pdfjs.GlobalWorkerOptions.workerSrc = PDF_WORKER_SRC;
+      globalThis.pdfjsLib = pdfjs;
+      const pdfViewerModule = await import('pdfjs-dist/web/pdf_viewer.mjs');
+      loadingTask = pdfjs.getDocument({ data: pdfBytes });
+      const pdf = await loadingTask.promise;
+      pdfDocument = pdf;
+      if (cancelled) return;
+      const eventBus = new pdfViewerModule.EventBus();
+      const linkService = new pdfViewerModule.PDFLinkService({ eventBus });
+      const findController = new pdfViewerModule.PDFFindController({
+        eventBus,
+        linkService
+      });
+      const pdfViewer = new pdfViewerModule.PDFViewer({
+        container,
+        viewer: viewerElement,
+        eventBus,
+        linkService,
+        findController,
+        removePageBorders: true
+      });
+      linkService.setViewer(pdfViewer);
+      linkService.setDocument(pdf);
+      findController.setDocument(pdf);
+      const onPagesInit = () => {
+        pdfViewer.currentScaleValue = "page-width";
+        setScale(pdfViewer.currentScale || 1);
+        setPagesCount(pdfViewer.pagesCount);
+        setPageNumber(pdfViewer.currentPageNumber);
+      };
+      const onPageChanging = (event) => {
+        if (typeof event.pageNumber === "number") {
+          setPageNumber(event.pageNumber);
         }
-      } else if (msg.role === "system" && msg.systemKind === "artifact") {
-        const tcId = createArtifactToolCallIds[artifactIdx];
-        if (tcId) {
-          const { name } = unpackArtifactMeta(msg.systemMeta, msg.content);
-          if (name) fallbacks[tcId] = name;
+      };
+      const onScaleChanging = (event) => {
+        if (typeof event.scale === "number") {
+          setScale(event.scale);
         }
-        artifactIdx += 1;
+      };
+      eventBus.on("pagesinit", onPagesInit);
+      eventBus.on("pagechanging", onPageChanging);
+      eventBus.on("scalechanging", onScaleChanging);
+      pdfViewerRef.current = pdfViewer;
+      eventBusRef.current = eventBus;
+      findControllerRef.current = findController;
+      setPagesCount(pdf.numPages);
+      pdfViewer.setDocument(pdf);
+    };
+    void renderPdf().catch((nextError) => {
+      if (cancelled) return;
+      if (nextError instanceof Error && nextError.name === "RenderingCancelledException") {
+        return;
       }
-    }
-    return fallbacks;
-  }, [messages]);
-  const activeFailureId = useMemo(() => {
-    if (messages.length === 0) return null;
-    const tail = messages[messages.length - 1];
-    if (tail.role === "system" && tail.systemKind === "error" && tail.errorInfo) {
-      return tail.id;
-    }
-    if (tail.role === "assistant" && tail.status === "error" && tail.errorInfo) {
-      return tail.id;
-    }
-    return null;
-  }, [messages]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-sm", children: [
-    /* @__PURE__ */ jsxs(Conversation, { className: "relative flex-1 min-h-0", children: [
-      /* @__PURE__ */ jsx(ConversationContent, { className: "mx-auto w-full max-w-4xl", children: messages.length === 0 && isLoadingHistory ? /* @__PURE__ */ jsx(
-        ConversationEmptyState,
+      setError(formatPdfPreviewError(nextError));
+    });
+    return () => {
+      cancelled = true;
+      loadingTask?.destroy();
+      pdfDocument?.destroy();
+      pdfViewerRef.current?.cleanup();
+      pdfViewerRef.current = null;
+      eventBusRef.current = null;
+      findControllerRef.current = null;
+    };
+  }, [file.content]);
+  const setViewerPage = (nextPage) => {
+    const viewer = pdfViewerRef.current;
+    if (!viewer) return;
+    const clampedPage = Math.min(
+      Math.max(1, nextPage),
+      Math.max(1, viewer.pagesCount)
+    );
+    viewer.currentPageNumber = clampedPage;
+    setPageNumber(clampedPage);
+  };
+  const setViewerScale = (nextScale) => {
+    const viewer = pdfViewerRef.current;
+    if (!viewer) return;
+    const clampedScale = Math.min(3, Math.max(0.5, nextScale));
+    viewer.currentScale = clampedScale;
+    setScale(clampedScale);
+  };
+  const runFind = (findPrevious = false) => {
+    const eventBus = eventBusRef.current;
+    if (!eventBus || !query.trim()) return;
+    eventBus.dispatch("find", {
+      source: eventBus,
+      type: "again",
+      query,
+      phraseSearch: true,
+      caseSensitive: false,
+      entireWord: false,
+      highlightAll: true,
+      findPrevious,
+      matchDiacritics: true
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-1.5 border-b border-line px-2 py-1.5", children: [
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-8 opacity-40" }),
-          title: "Loading conversation",
-          description: "Fetching the session history."
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => setViewerPage(pageNumber - 1),
+          disabled: pageNumber <= 1,
+          "aria-label": "Previous PDF page",
+          title: "Previous page",
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3.5" })
         }
-      ) : messages.length === 0 && !disabled ? /* @__PURE__ */ jsx(
-        ConversationEmptyState,
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
         {
-          icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-8 opacity-40" }),
-          title: "Start a conversation",
-          description: "Ask me anything \u2014 I can search, analyze, write code, and more."
+          type: "number",
+          min: 1,
+          max: pagesCount || 1,
+          value: pageNumber,
+          onChange: (event) => setViewerPage(Number(event.target.value)),
+          "aria-label": "PDF page number",
+          className: "h-7 w-12 border-input px-1 text-center text-xs"
         }
-      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        groups.map((group) => {
-          if (group.role === "user") {
-            const msg = group.messages[0];
-            return /* @__PURE__ */ jsx(
-              ChatMessage,
-              {
-                message: msg,
-                onFileSelect
-              },
-              msg.id
-            );
-          }
-          if (group.role === "system") {
-            const msg = group.messages[0];
-            const groupRetry2 = msg.id === activeFailureId ? onRetry : void 0;
-            return /* @__PURE__ */ jsx(
-              OrphanSystemMarker,
-              {
-                message: msg,
-                sessionId,
-                onRetry: groupRetry2
-              },
-              msg.id
-            );
-          }
-          const groupTail = group.messages[group.messages.length - 1];
-          const groupRetry = groupTail.id === activeFailureId ? onRetry : void 0;
-          return /* @__PURE__ */ jsx(
-            AssistantGroup,
-            {
-              messages: group.messages,
-              lastGlobalIndex: group.lastGlobalIndex,
-              totalMessages: messages.length,
-              isRunning,
-              sessionId,
-              artifactFallbacks,
-              onFileSelect,
-              onRetry: groupRetry
-            },
-            group.messages[0].id
-          );
-        }),
-        isRunning && messages.length > 0 && messages[messages.length - 1].role === "user" && /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(ConversationScrollButton, {})
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-3 sm:px-6 pb-3 sm:pb-5 pt-3", children: [
-      retryIndicator && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(RetryBanner, { indicator: retryIndicator }) }),
-      disabled && disabledReason ? /* @__PURE__ */ jsx(
-        "div",
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        "/ ",
+        pagesCount || "-"
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          className: "rounded border border-line bg-muted/40 px-3 py-2 text-sm text-muted-foreground",
-          role: "status",
-          children: disabledReason
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => setViewerPage(pageNumber + 1),
+          disabled: pagesCount > 0 && pageNumber >= pagesCount,
+          "aria-label": "Next PDF page",
+          title: "Next page",
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
         }
-      ) : /* @__PURE__ */ jsx(
-        ChatComposer,
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mx-1 h-5 w-px bg-line" }),
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          onSend,
-          onStop,
-          isRunning,
-          disabled,
-          disabledReason,
-          tokenUsage,
-          onComposerError,
-          showBrowser,
-          onToggleBrowser,
-          showWorkspace,
-          onToggleWorkspace,
-          canShowBrowser,
-          canShowWorkspace
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => setViewerScale(scale - 0.1),
+          disabled: scale <= 0.5,
+          "aria-label": "Zoom out PDF",
+          title: "Zoom out",
+          children: /* @__PURE__ */ jsx(MinusIcon, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "h-7 min-w-12 px-1 text-xs text-muted-foreground hover:text-foreground",
+          onClick: () => {
+            const viewer = pdfViewerRef.current;
+            if (!viewer) return;
+            viewer.currentScaleValue = "page-width";
+            setScale(viewer.currentScale || 1);
+          },
+          "aria-label": "Fit PDF to width",
+          title: "Fit width",
+          children: [
+            Math.round(scale * 100),
+            "%"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => setViewerScale(scale + 0.1),
+          disabled: scale >= 3,
+          "aria-label": "Zoom in PDF",
+          title: "Zoom in",
+          children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mx-1 h-5 w-px bg-line" }),
+      /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "search",
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") runFind(event.shiftKey);
+          },
+          placeholder: "Find",
+          "aria-label": "Find in PDF",
+          className: "h-7 w-28 border-input px-1 text-xs"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "xs",
+          onClick: () => runFind(false),
+          disabled: !query.trim(),
+          children: "Find"
         }
       )
-    ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-2 p-3 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: error })
+    ] }),
+    !error && /* @__PURE__ */ jsx("div", { className: "relative h-[70vh] min-h-[420px] flex-1 bg-muted/20", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        "aria-label": `PDF viewer for ${fileName2}`,
+        className: "absolute inset-0 overflow-auto",
+        children: /* @__PURE__ */ jsx("div", { ref: viewerRef, className: "pdfViewer" })
+      }
+    ) })
   ] });
 }
-var noop = () => {
+function decodeBase64(content) {
+  const binary = globalThis.atob(content);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return bytes;
+}
+function formatPdfPreviewError(error) {
+  if (error instanceof Error && (error.name === "InvalidCharacterError" || error.message === "Invalid character")) {
+    return "PDF preview data is not valid base64.";
+  }
+  return error instanceof Error ? error.message : "Failed to render PDF preview.";
+}
+var _EXTENSION_KIND = {
+  // Documents
+  pdf: { icon: FileTextIcon, typeLabel: "PDF" },
+  doc: { icon: FileTextIcon, typeLabel: "Word document" },
+  docx: { icon: FileTextIcon, typeLabel: "Word document" },
+  odt: { icon: FileTextIcon, typeLabel: "OpenDocument text" },
+  rtf: { icon: FileTextIcon, typeLabel: "Rich text" },
+  txt: { icon: FileTextIcon, typeLabel: "Text" },
+  md: { icon: FileTextIcon, typeLabel: "Markdown" },
+  // Spreadsheets
+  xls: { icon: FileSpreadsheetIcon, typeLabel: "Spreadsheet" },
+  xlsx: { icon: FileSpreadsheetIcon, typeLabel: "Spreadsheet" },
+  ods: { icon: FileSpreadsheetIcon, typeLabel: "OpenDocument spreadsheet" },
+  csv: { icon: FileSpreadsheetIcon, typeLabel: "CSV" },
+  tsv: { icon: FileSpreadsheetIcon, typeLabel: "TSV" },
+  // Presentations / charts
+  ppt: { icon: FileChartLineIcon, typeLabel: "Presentation" },
+  pptx: { icon: FileChartLineIcon, typeLabel: "Presentation" },
+  // Images
+  png: { icon: FileImageIcon, typeLabel: "Image" },
+  jpg: { icon: FileImageIcon, typeLabel: "Image" },
+  jpeg: { icon: FileImageIcon, typeLabel: "Image" },
+  gif: { icon: FileImageIcon, typeLabel: "Image" },
+  svg: { icon: FileImageIcon, typeLabel: "SVG image" },
+  webp: { icon: FileImageIcon, typeLabel: "Image" },
+  bmp: { icon: FileImageIcon, typeLabel: "Image" },
+  // Audio / video
+  mp3: { icon: FileAudioIcon, typeLabel: "Audio" },
+  wav: { icon: FileAudioIcon, typeLabel: "Audio" },
+  ogg: { icon: FileAudioIcon, typeLabel: "Audio" },
+  mp4: { icon: FileVideoIcon, typeLabel: "Video" },
+  mov: { icon: FileVideoIcon, typeLabel: "Video" },
+  webm: { icon: FileVideoIcon, typeLabel: "Video" },
+  // Archives
+  zip: { icon: FileArchiveIcon, typeLabel: "Archive" },
+  tar: { icon: FileArchiveIcon, typeLabel: "Archive" },
+  gz: { icon: FileArchiveIcon, typeLabel: "Archive" },
+  bz2: { icon: FileArchiveIcon, typeLabel: "Archive" },
+  "7z": { icon: FileArchiveIcon, typeLabel: "Archive" },
+  // Code
+  py: { icon: FileCodeIcon, typeLabel: "Python" },
+  js: { icon: FileCodeIcon, typeLabel: "JavaScript" },
+  ts: { icon: FileCodeIcon, typeLabel: "TypeScript" },
+  tsx: { icon: FileCodeIcon, typeLabel: "TypeScript" },
+  jsx: { icon: FileCodeIcon, typeLabel: "JavaScript" },
+  json: { icon: FileCodeIcon, typeLabel: "JSON" },
+  yaml: { icon: FileCodeIcon, typeLabel: "YAML" },
+  yml: { icon: FileCodeIcon, typeLabel: "YAML" },
+  toml: { icon: FileCodeIcon, typeLabel: "TOML" },
+  sh: { icon: CodeIcon, typeLabel: "Shell" },
+  rs: { icon: FileCodeIcon, typeLabel: "Rust" },
+  go: { icon: FileCodeIcon, typeLabel: "Go" },
+  rb: { icon: FileCodeIcon, typeLabel: "Ruby" },
+  java: { icon: FileCodeIcon, typeLabel: "Java" },
+  cpp: { icon: FileCodeIcon, typeLabel: "C++" },
+  c: { icon: FileCodeIcon, typeLabel: "C" },
+  html: { icon: FileCodeIcon, typeLabel: "HTML" },
+  css: { icon: FileCodeIcon, typeLabel: "CSS" },
+  scss: { icon: FileCodeIcon, typeLabel: "Sass" },
+  sql: { icon: FileCodeIcon, typeLabel: "SQL" }
 };
-var FileTreeContext = createContext({
-  expandedPaths: /* @__PURE__ */ new Set(),
-  togglePath: noop
-});
-function FileTree({
-  expanded: controlledExpanded,
-  defaultExpanded = /* @__PURE__ */ new Set(),
-  selectedPath,
-  onSelect,
-  onExpandedChange,
-  className,
-  children,
-  ...props
-}) {
-  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
-  const expandedPaths = controlledExpanded ?? internalExpanded;
-  const togglePath = useCallback(
-    (path) => {
-      const next = new Set(expandedPaths);
-      if (next.has(path)) {
-        next.delete(path);
-      } else {
-        next.add(path);
-      }
-      setInternalExpanded(next);
-      onExpandedChange?.(next);
-    },
-    [expandedPaths, onExpandedChange]
-  );
-  const contextValue = useMemo(
-    () => ({
-      expandedPaths,
-      onSelect,
-      selectedPath: selectedPath ?? void 0,
-      togglePath
-    }),
-    [expandedPaths, onSelect, selectedPath, togglePath]
-  );
-  return /* @__PURE__ */ jsx(FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("rounded-lg border bg-background text-sm", className),
-      role: "tree",
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "p-2", children })
-    }
-  ) });
+function _extension(path) {
+  const idx = path.lastIndexOf(".");
+  if (idx < 0 || idx === path.length - 1) return "";
+  return path.slice(idx + 1).toLowerCase();
 }
-function FileTreeIcon({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("span", { className: cn("shrink-0", className), ...props, children });
+function _fileKindFor(path) {
+  const ext = _extension(path);
+  return _EXTENSION_KIND[ext] ?? { icon: FileIcon, typeLabel: "File" };
 }
-function FileTreeName({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("span", { className: cn("truncate", className), ...props, children });
+function _basename(path) {
+  const idx = path.lastIndexOf("/");
+  return idx >= 0 ? path.slice(idx + 1) : path;
 }
-function FileTreeFolder({
+function WorkspaceFileCard({
+  sessionId,
   path,
-  name,
-  className,
-  children,
-  ...props
+  label
 }) {
-  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
-  const isExpanded = expandedPaths.has(path);
-  const isSelected = selectedPath === path;
-  const handleOpenChange = useCallback(() => {
-    togglePath(path);
-  }, [togglePath, path]);
-  const handleSelect = useCallback(() => {
-    onSelect?.(path);
-  }, [onSelect, path]);
-  return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("", className), role: "treeitem", tabIndex: 0, ...props, children: [
+  const { adapter } = useAgentChatAdapterContext();
+  const kind = _fileKindFor(path);
+  const Icon = kind.icon;
+  const downloadUrl = adapter.getWorkspaceDownloadUrl({ sessionId, path });
+  const downloadName = _basename(path) || label;
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const handleCardClick = useCallback(() => {
+    setPreviewOpen(true);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
+        role: "button",
+        tabIndex: 0,
+        onClick: handleCardClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleCardClick();
+          }
+        },
         className: cn(
-          "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
-          isSelected && "bg-muted"
+          "group/file flex items-center gap-3 rounded-lg border border-border",
+          "bg-muted/20 px-3 py-2 text-left transition-colors",
+          "cursor-pointer hover:bg-muted/40"
         ),
         children: [
-          /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0",
-              type: "button",
-              "aria-label": isExpanded ? `Collapse ${name}` : `Expand ${name}`,
-              children: /* @__PURE__ */ jsx(
-                ChevronRightIcon,
-                {
-                  className: cn(
-                    "size-4 shrink-0 text-muted-foreground transition-transform",
-                    isExpanded && "rotate-90"
-                  )
-                }
-              )
-            }
-          ) }),
+          /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(Icon, { className: "size-5 text-muted-foreground", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: label }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: kind.typeLabel })
+          ] }),
           /* @__PURE__ */ jsxs(
-            "button",
+            "a",
             {
-              className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left",
-              onClick: handleSelect,
-              type: "button",
+              href: downloadUrl,
+              download: downloadName,
+              onClick: (e) => e.stopPropagation(),
+              className: cn(
+                "shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border",
+                "bg-background px-2.5 py-1.5 text-xs font-medium text-foreground",
+                "transition-colors hover:bg-muted"
+              ),
+              "aria-label": `Download ${downloadName}`,
               children: [
-                /* @__PURE__ */ jsx(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4 text-blue-500" }) : /* @__PURE__ */ jsx(FolderIcon, { className: "size-4 text-blue-500" }) }),
-                /* @__PURE__ */ jsx(FileTreeName, { children: name })
+                /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5", "aria-hidden": true }),
+                "Download"
               ]
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-4 border-l border-muted-foreground/50 pl-2", children }) })
-  ] }) });
+    /* @__PURE__ */ jsx(
+      WorkspaceFilePreviewDialog,
+      {
+        open: previewOpen,
+        onOpenChange: setPreviewOpen,
+        sessionId,
+        path,
+        downloadUrl
+      }
+    )
+  ] });
 }
-function FileTreeFile({
+function WorkspaceFilePreviewDialog({
+  open,
+  onOpenChange,
+  sessionId,
   path,
-  name,
-  icon,
-  className,
-  children,
-  ...props
+  downloadUrl
 }) {
-  const { selectedPath, onSelect } = useContext(FileTreeContext);
-  const isSelected = selectedPath === path;
-  const handleClick = useCallback(() => {
-    onSelect?.(path);
-  }, [onSelect, path]);
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        onSelect?.(path);
+  const { adapter } = useAgentChatAdapterContext();
+  const [file, setFile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setFile(null);
+    adapter.getWorkspaceFile({ sessionId, path }).then((result) => {
+      if (cancelled) return;
+      setFile(result);
+      setLoading(false);
+    }).catch((err) => {
+      if (cancelled) return;
+      const message = err instanceof Error ? err.message : "Failed to load file";
+      setError(message);
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [adapter, sessionId, path, open]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex h-[80vh] w-full max-w-5xl flex-col gap-0 overflow-hidden p-0", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-line px-4 py-3", children: /* @__PURE__ */ jsx(DialogTitle, { className: "truncate text-sm", children: _basename(path) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(
+      FileViewer,
+      {
+        file,
+        loading,
+        error,
+        downloadUrl,
+        onDelete: null,
+        onClose: () => onOpenChange(false)
       }
-    },
-    [onSelect, path]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "group flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
-        isSelected && "bg-muted",
-        className
-      ),
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      role: "treeitem",
-      tabIndex: 0,
-      ...props,
-      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
-        /* @__PURE__ */ jsx(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }),
-        /* @__PURE__ */ jsx(FileTreeName, { children: name })
-      ] })
-    }
-  );
-}
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("animate-pulse rounded-md bg-muted", className),
-      ...props
-    }
-  );
-}
-
-// src/lib/format.ts
-function formatFileSize(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    ) })
+  ] }) });
 }
-function getLanguageHint(path) {
-  const name = path.split("/").pop() ?? path;
-  const dot = name.lastIndexOf(".");
-  if (dot < 0) return "plaintext";
-  const ext = name.slice(dot).toLowerCase();
-  const map = {
-    ".py": "python",
-    ".js": "javascript",
-    ".ts": "typescript",
-    ".tsx": "tsx",
-    ".jsx": "jsx",
-    ".json": "json",
-    ".yaml": "yaml",
-    ".yml": "yaml",
-    ".toml": "toml",
-    ".sql": "sql",
-    ".sh": "bash",
-    ".css": "css",
-    ".html": "html",
-    ".md": "markdown",
-    ".rs": "rust",
-    ".go": "go",
-    ".java": "java",
-    ".rb": "ruby",
-    ".php": "php",
-    ".c": "c",
-    ".cpp": "cpp",
-    ".h": "c",
-    ".hpp": "cpp"
-  };
-  return map[ext] ?? "plaintext";
+function resolveArtifactRef(ref, messages) {
+  for (const msg of messages) {
+    if (msg.role !== "system" || msg.systemKind !== "artifact") continue;
+    const meta = msg.systemMeta ?? {};
+    if (meta.artifact_id !== ref) continue;
+    const kind = meta.kind ?? "markdown";
+    const version = typeof meta.version === "number" ? meta.version : 1;
+    const name = typeof meta.name === "string" ? meta.name : "";
+    return { artifactId: ref, name, kind, version };
+  }
+  return null;
 }
-var SKELETON_WIDTHS = [70, 85, 55, 90, 60, 78, 45, 82, 65, 72];
-var PDF_WORKER_SRC = new URL(
-  "pdfjs-dist/legacy/build/pdf.worker.mjs",
-  import.meta.url
-).toString();
-function FileViewer({
-  file,
-  loading,
-  error,
-  downloadUrl,
-  onDelete,
-  onClose
+function TurnSummaryCard({
+  summary,
+  sessionId,
+  messages,
+  onFileSelect,
+  onCommandSelect
 }) {
-  const visible = loading || file !== null || error !== null;
-  if (!visible) return null;
-  const fileName2 = file?.path.split("/").pop() ?? "File";
-  const lang = file ? getLanguageHint(file.path) : "";
-  const isPdf = file?.mime_type === "application/pdf" || file?.path.toLowerCase().endsWith(".pdf") || false;
-  const isImage = file?.encoding === "base64" && !isPdf;
-  const HeaderIcon = isImage ? ImageIcon : FileTextIcon;
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col border-t border-line", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-line px-3 py-2", children: [
-      /* @__PURE__ */ jsx(HeaderIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-medium", children: fileName2 }),
-        /* @__PURE__ */ jsxs("div", { className: "truncate text-[10px] text-muted-foreground", children: [
-          file?.path ?? "Loading...",
-          file && /* @__PURE__ */ jsxs("span", { className: "ml-1.5", children: [
-            formatFileSize(file.size),
-            file.truncated && " (truncated)"
-          ] })
-        ] })
-      ] }),
-      downloadUrl && /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: downloadUrl,
-          download: fileName2,
-          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-          "aria-label": `Download ${fileName2}`,
-          title: "Download",
-          children: /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5" })
-        }
-      ),
-      onDelete && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onDelete,
-          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
-          "aria-label": `Delete ${fileName2}`,
-          title: "Delete",
-          children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-3.5" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-          "aria-label": "Close file",
-          children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+  const hasRecap = summary.recap.trim().length > 0;
+  const hasArtifacts = summary.artifacts.length > 0;
+  if (!hasRecap && !hasArtifacts) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded border border-border bg-muted/20 px-3 py-2 text-sm", children: [
+    hasRecap && /* @__PURE__ */ jsx("p", { className: "mb-2 whitespace-pre-wrap text-foreground", children: summary.recap }),
+    hasArtifacts && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: summary.artifacts.map((artifact, i) => {
+      const key = `${artifact.kind}:${artifact.ref}:${i}`;
+      if (artifact.kind === "file" && sessionId) {
+        return /* @__PURE__ */ jsx(
+          WorkspaceFileCard,
+          {
+            sessionId,
+            path: artifact.ref,
+            label: artifact.label
+          },
+          key
+        );
+      }
+      if (artifact.kind === "artifact") {
+        const resolved = sessionId ? resolveArtifactRef(artifact.ref, messages) : null;
+        if (resolved && sessionId) {
+          return /* @__PURE__ */ jsx(
+            ArtifactBlock,
+            {
+              sessionId,
+              artifactId: resolved.artifactId,
+              name: resolved.name || artifact.label,
+              kind: resolved.kind,
+              version: resolved.version
+            },
+            key
+          );
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(ScrollArea, { className: "min-h-0 flex-1", children: [
-      loading && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 p-3", children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx(
-        Skeleton,
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
         {
-          className: "h-3.5 rounded",
-          style: {
-            width: `${SKELETON_WIDTHS[index % SKELETON_WIDTHS.length]}%`
-          }
+          className: "flex items-baseline gap-2 text-sm",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2022" }),
+            /* @__PURE__ */ jsx(
+              ArtifactRow,
+              {
+                artifact,
+                sessionId,
+                messages,
+                onFileSelect,
+                onCommandSelect
+              }
+            )
+          ]
         },
-        index
-      )) }),
-      error && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
-        /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
-        /* @__PURE__ */ jsx("span", { children: error })
-      ] }),
-      file && isPdf && file.encoding !== "base64" && /* @__PURE__ */ jsx(FileViewerError, { message: "PDF preview requires base64 file content." }),
-      file && isPdf && file.encoding === "base64" && /* @__PURE__ */ jsx(PdfPreview, { file, fileName: fileName2 }),
-      file && isImage && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: `data:${file.mime_type ?? "image/png"};base64,${file.content}`,
-          alt: fileName2,
-          className: "max-h-[60vh] max-w-full rounded object-contain"
-        }
-      ) }),
-      file && !isImage && !isPdf && /* @__PURE__ */ jsx("pre", { className: "wrap-break-word whitespace-pre-wrap p-3 text-[11px] leading-relaxed text-foreground", children: /* @__PURE__ */ jsx("code", { "data-language": lang, children: file.content }) })
-    ] })
-  ] });
-}
-function FileViewerError({ message }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
-    /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
-    /* @__PURE__ */ jsx("span", { children: message })
+        key
+      );
+    }) })
   ] });
 }
-function PdfPreview({
-  file,
-  fileName: fileName2
+function ArtifactRow({
+  artifact,
+  sessionId,
+  messages,
+  onFileSelect,
+  onCommandSelect
 }) {
-  const containerRef = useRef(null);
-  const viewerRef = useRef(null);
-  const pdfViewerRef = useRef(null);
-  const eventBusRef = useRef(null);
-  const findControllerRef = useRef(null);
-  const [error, setError] = useState(null);
-  const [pageNumber, setPageNumber] = useState(1);
-  const [pagesCount, setPagesCount] = useState(0);
-  const [scale, setScale] = useState(1);
-  const [query, setQuery] = useState("");
-  useEffect(() => {
-    let cancelled = false;
-    let loadingTask = null;
-    let pdfDocument = null;
-    const renderPdf = async () => {
-      setError(null);
-      const container = containerRef.current;
-      const viewerElement = viewerRef.current;
-      if (!container || !viewerElement) return;
-      const pdfBytes = decodeBase64(file.content);
-      const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
-      pdfjs.GlobalWorkerOptions.workerSrc = PDF_WORKER_SRC;
-      globalThis.pdfjsLib = pdfjs;
-      const pdfViewerModule = await import('pdfjs-dist/web/pdf_viewer.mjs');
-      loadingTask = pdfjs.getDocument({ data: pdfBytes });
-      const pdf = await loadingTask.promise;
-      pdfDocument = pdf;
-      if (cancelled) return;
-      const eventBus = new pdfViewerModule.EventBus();
-      const linkService = new pdfViewerModule.PDFLinkService({ eventBus });
-      const findController = new pdfViewerModule.PDFFindController({
-        eventBus,
-        linkService
-      });
-      const pdfViewer = new pdfViewerModule.PDFViewer({
-        container,
-        viewer: viewerElement,
-        eventBus,
-        linkService,
-        findController,
-        removePageBorders: true
-      });
-      linkService.setViewer(pdfViewer);
-      linkService.setDocument(pdf);
-      findController.setDocument(pdf);
-      const onPagesInit = () => {
-        pdfViewer.currentScaleValue = "page-width";
-        setScale(pdfViewer.currentScale || 1);
-        setPagesCount(pdfViewer.pagesCount);
-        setPageNumber(pdfViewer.currentPageNumber);
-      };
-      const onPageChanging = (event) => {
-        if (typeof event.pageNumber === "number") {
-          setPageNumber(event.pageNumber);
-        }
-      };
-      const onScaleChanging = (event) => {
-        if (typeof event.scale === "number") {
-          setScale(event.scale);
-        }
-      };
-      eventBus.on("pagesinit", onPagesInit);
-      eventBus.on("pagechanging", onPageChanging);
-      eventBus.on("scalechanging", onScaleChanging);
-      pdfViewerRef.current = pdfViewer;
-      eventBusRef.current = eventBus;
-      findControllerRef.current = findController;
-      setPagesCount(pdf.numPages);
-      pdfViewer.setDocument(pdf);
-    };
-    void renderPdf().catch((nextError) => {
-      if (cancelled) return;
-      if (nextError instanceof Error && nextError.name === "RenderingCancelledException") {
-        return;
+  if (artifact.kind === "file") {
+    if (!onFileSelect) {
+      return /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onFileSelect(artifact.ref),
+        className: "truncate cursor-pointer text-primary hover:underline",
+        children: artifact.label
       }
-      setError(formatPdfPreviewError(nextError));
-    });
-    return () => {
-      cancelled = true;
-      loadingTask?.destroy();
-      pdfDocument?.destroy();
-      pdfViewerRef.current?.cleanup();
-      pdfViewerRef.current = null;
-      eventBusRef.current = null;
-      findControllerRef.current = null;
-    };
-  }, [file.content]);
-  const setViewerPage = (nextPage) => {
-    const viewer = pdfViewerRef.current;
-    if (!viewer) return;
-    const clampedPage = Math.min(
-      Math.max(1, nextPage),
-      Math.max(1, viewer.pagesCount)
     );
-    viewer.currentPageNumber = clampedPage;
-    setPageNumber(clampedPage);
-  };
-  const setViewerScale = (nextScale) => {
-    const viewer = pdfViewerRef.current;
-    if (!viewer) return;
-    const clampedScale = Math.min(3, Math.max(0.5, nextScale));
-    viewer.currentScale = clampedScale;
-    setScale(clampedScale);
-  };
-  const runFind = (findPrevious = false) => {
-    const eventBus = eventBusRef.current;
-    if (!eventBus || !query.trim()) return;
-    eventBus.dispatch("find", {
-      source: eventBus,
-      type: "again",
-      query,
-      phraseSearch: true,
-      caseSensitive: false,
-      entireWord: false,
-      highlightAll: true,
-      findPrevious,
-      matchDiacritics: true
+  }
+  if (artifact.kind === "url") {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: artifact.ref,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "truncate text-primary hover:underline",
+        children: artifact.label
+      }
+    );
+  }
+  if (artifact.kind === "command") {
+    if (!onCommandSelect) {
+      return /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onCommandSelect(artifact.ref),
+        className: "truncate text-left cursor-pointer text-primary hover:underline",
+        children: artifact.label
+      }
+    );
+  }
+  const resolved = sessionId ? resolveArtifactRef(artifact.ref, messages) : null;
+  if (!resolved) {
+    return /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+    ArtifactBlock,
+    {
+      sessionId,
+      artifactId: resolved.artifactId,
+      name: resolved.name || artifact.label,
+      kind: resolved.kind,
+      version: resolved.version
+    }
+  ) });
+}
+function messageToEntries(msg, isLast, artifactFallbacks) {
+  if (msg.role === "system") {
+    if (msg.systemKind === "skill_invoked") {
+      return [{
+        kind: "skill_invoked",
+        key: msg.id,
+        skill: msg.systemMeta?.skill ?? msg.content,
+        stagedAt: msg.systemMeta?.staged_at ?? null
+      }];
+    }
+    if (msg.systemKind === "artifact") {
+      const { artifactId, name, kind, version } = unpackArtifactMeta(
+        msg.systemMeta,
+        msg.content
+      );
+      return [{
+        kind: "artifact",
+        key: msg.id,
+        artifactId,
+        name,
+        artifactKind: kind,
+        version
+      }];
+    }
+    return [];
+  }
+  const entries = [];
+  const hasToolCalls = !!(msg.toolCalls && msg.toolCalls.length > 0);
+  const hasContent = !!(msg.content && msg.content !== msg.reasoning);
+  const isStreaming = msg.status === "streaming" && isLast;
+  const effectiveReasoning = hasToolCalls && hasContent ? msg.reasoning ? msg.reasoning + "\n" + msg.content : msg.content : msg.reasoning;
+  const effectiveHasContent = hasContent && !hasToolCalls;
+  if (effectiveReasoning) {
+    entries.push({
+      kind: "reasoning",
+      key: `${msg.id}-reasoning`,
+      reasoning: effectiveReasoning,
+      isStreaming: isStreaming && !effectiveHasContent && !hasToolCalls
+    });
+  }
+  if (hasToolCalls) {
+    for (const tc of msg.toolCalls) {
+      if (tc.toolName === "create_artifact") {
+        const resolvedName = parseArgs(tc.args)?.name ?? artifactFallbacks[tc.id];
+        const status = effectiveStatus(tc);
+        if (!resolvedName && status !== "error") continue;
+        entries.push({
+          kind: "tool",
+          key: tc.id,
+          tc,
+          resolvedArtifactName: resolvedName
+        });
+        continue;
+      }
+      if (tc.toolName === "terminal" && tc.status !== "running") {
+        const parsed = parseTerminalResult(tc.result, tc.args);
+        if (parsed && (parsed.exit_code !== 0 || parsed.error)) continue;
+      }
+      entries.push({ kind: "tool", key: tc.id, tc });
+    }
+  }
+  if (effectiveHasContent) {
+    entries.push({
+      kind: "text",
+      key: `${msg.id}-text`,
+      content: msg.content,
+      isStreaming,
+      msg
+    });
+  }
+  const hasRunningTool = hasToolCalls && msg.toolCalls.some(
+    (tc) => tc.status === "running"
+  );
+  if (isStreaming && !effectiveHasContent && !hasRunningTool) {
+    entries.push({ kind: "thinking", key: `${msg.id}-thinking` });
+  }
+  return entries;
+}
+function groupBrowserActivityEntries(entries) {
+  const grouped = [];
+  let buffer = [];
+  const flush = () => {
+    if (buffer.length === 0) return;
+    grouped.push({
+      kind: "browser_activity",
+      key: `browser-activity-${buffer[0]?.id}-${buffer[buffer.length - 1]?.id}`,
+      calls: buffer
     });
+    buffer = [];
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-1.5 border-b border-line px-2 py-1.5", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          onClick: () => setViewerPage(pageNumber - 1),
-          disabled: pageNumber <= 1,
-          "aria-label": "Previous PDF page",
-          title: "Previous page",
-          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3.5" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "number",
-          min: 1,
-          max: pagesCount || 1,
-          value: pageNumber,
-          onChange: (event) => setViewerPage(Number(event.target.value)),
-          "aria-label": "PDF page number",
-          className: "h-7 w-12 border-input px-1 text-center text-xs"
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-        "/ ",
-        pagesCount || "-"
+  for (const entry of entries) {
+    if (entry.kind === "tool" && isBrowserToolCall(entry.tc)) {
+      buffer.push(entry.tc);
+      continue;
+    }
+    flush();
+    grouped.push(entry);
+  }
+  flush();
+  return grouped;
+}
+function isBrowserToolCall(call) {
+  return call.toolName.startsWith("browser_");
+}
+function groupWebSearchEntries(entries) {
+  const grouped = [];
+  let buffer = [];
+  const flush = () => {
+    if (buffer.length === 0) return;
+    if (buffer.length === 1) {
+      grouped.push({ kind: "tool", key: buffer[0].id, tc: buffer[0] });
+    } else {
+      grouped.push({
+        kind: "web_search_group",
+        key: `web-search-${buffer[0].id}-${buffer[buffer.length - 1].id}`,
+        calls: buffer
+      });
+    }
+    buffer = [];
+  };
+  for (const entry of entries) {
+    if (entry.kind === "tool" && entry.tc.toolName === "web_search") {
+      buffer.push(entry.tc);
+      continue;
+    }
+    flush();
+    grouped.push(entry);
+  }
+  flush();
+  return grouped;
+}
+function groupMessages(messages) {
+  const groups = [];
+  let pendingSystem = [];
+  const drainPendingAsOrphans = () => {
+    for (const { msg, index } of pendingSystem) {
+      groups.push({ role: "system", messages: [msg], lastGlobalIndex: index });
+    }
+    pendingSystem = [];
+  };
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i];
+    if (msg.role === "system") {
+      pendingSystem.push({ msg, index: i });
+      continue;
+    }
+    if (msg.role === "assistant") {
+      const prev = groups[groups.length - 1];
+      if (prev && prev.role === "assistant" && pendingSystem.length === 0) {
+        prev.messages.push(msg);
+        prev.lastGlobalIndex = i;
+      } else {
+        const folded = pendingSystem.map((p) => p.msg);
+        pendingSystem = [];
+        groups.push({
+          role: "assistant",
+          messages: [...folded, msg],
+          lastGlobalIndex: i
+        });
+      }
+      continue;
+    }
+    drainPendingAsOrphans();
+    groups.push({ role: "user", messages: [msg], lastGlobalIndex: i });
+  }
+  drainPendingAsOrphans();
+  return groups;
+}
+function unpackArtifactMeta(systemMeta, fallbackName) {
+  const meta = systemMeta ?? {};
+  return {
+    artifactId: meta.artifact_id ?? "",
+    name: meta.name ?? fallbackName,
+    kind: meta.kind ?? "markdown",
+    version: meta.version ?? 1
+  };
+}
+function OrphanSystemMarker({
+  message,
+  sessionId,
+  onRetry
+}) {
+  if (message.systemKind === "skill_invoked") {
+    const skill = message.systemMeta?.skill ?? message.content;
+    return /* @__PURE__ */ jsxs("div", { className: "my-2 flex items-center gap-2 px-4 text-xs text-foreground/60 ", children: [
+      /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-emerald-500" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Skill" }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground/60 truncate", children: skill })
+      ] })
+    ] });
+  }
+  if (message.systemKind === "artifact" && sessionId) {
+    const unpacked = unpackArtifactMeta(message.systemMeta, message.content);
+    return /* @__PURE__ */ jsx(
+      ArtifactBlock,
+      {
+        sessionId,
+        artifactId: unpacked.artifactId,
+        name: unpacked.name,
+        kind: unpacked.kind,
+        version: unpacked.version
+      }
+    );
+  }
+  if (message.systemKind === "error" && message.errorInfo) {
+    return /* @__PURE__ */ jsx("div", { className: "mx-auto my-2 w-full max-w-4xl", children: /* @__PURE__ */ jsx(ErrorMessage, { errorInfo: message.errorInfo, onRetry }) });
+  }
+  return null;
+}
+function cancelledToolLabel(toolName) {
+  const map = {
+    terminal: "Command",
+    execute_code: "Execute Code",
+    read_file: "Read",
+    write_file: "Write",
+    patch: "Patch",
+    search_files: "Search Files",
+    list_files: "List Files",
+    web_search: "Web Search",
+    web_extract: "Web Fetch",
+    web_crawl: "Web Crawl",
+    session_search: "Session Search",
+    memory: "Memory",
+    todo: "Todo",
+    skills_list: "Skills",
+    skill_view: "Skill",
+    consult_expert: "Expert",
+    delegate_task: "Delegate",
+    ask_user_question: "Ask User Question",
+    process: "Process",
+    create_artifact: "Artifact"
+  };
+  return map[toolName] ?? toolName;
+}
+function CancelledToolRow({ tc }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground/60", children: cancelledToolLabel(tc.toolName) }),
+    /* @__PURE__ */ jsx("span", { className: "text-foreground/60/70", children: "Cancelled" })
+  ] });
+}
+function TimelineEntryItem({
+  entry,
+  step,
+  sessionId,
+  onFileSelect
+}) {
+  if (entry.kind === "reasoning") {
+    return /* @__PURE__ */ jsx(ReasoningEntry, { entry, step });
+  }
+  if (entry.kind === "tool") {
+    const rawStatus = effectiveStatus(entry.tc);
+    const hideArtifactFailure = rawStatus === "error" && entry.tc.toolName === "create_artifact";
+    const indicatorStatus = hideArtifactFailure ? "running" : rawStatus;
+    const failureSummary = rawStatus === "error" && !hideArtifactFailure ? toolErrorSummary(entry.tc.result) : "";
+    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+        /* @__PURE__ */ jsx(
+          TimelineIndicator,
+          {
+            className: cn("size-2 border-none", statusColorClass(indicatorStatus))
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx(
-        Button,
+      /* @__PURE__ */ jsx(TimelineContent, { children: entry.tc.cancelled ? /* @__PURE__ */ jsx(CancelledToolRow, { tc: entry.tc }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          ToolCallBlock,
+          {
+            tc: entry.tc,
+            resolvedArtifactName: entry.resolvedArtifactName,
+            onFileSelect
+          }
+        ),
+        failureSummary ? /* @__PURE__ */ jsx("div", { className: "max-w-full truncate text-xs text-destructive", title: failureSummary, children: failureSummary }) : null
+      ] }) })
+    ] });
+  }
+  if (entry.kind === "browser_activity") {
+    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+        /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-amber-500" })
+      ] }),
+      /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(BrowserActivityGroup, { calls: entry.calls }) })
+    ] });
+  }
+  if (entry.kind === "web_search_group") {
+    const allComplete = entry.calls.every((tc) => tc.status === "complete");
+    const anyRunning = entry.calls.some((tc) => tc.status === "running");
+    const indicatorClass = anyRunning ? "bg-emerald-500 animate-pulse" : allComplete ? "bg-emerald-500" : "bg-red-500";
+    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+        /* @__PURE__ */ jsx(TimelineIndicator, { className: cn("size-2 border-none", indicatorClass) })
+      ] }),
+      /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(WebSearchGroupBlock, { tcs: entry.calls }) })
+    ] });
+  }
+  if (entry.kind === "text") {
+    return /* @__PURE__ */ jsx(TextEntry, { entry, step });
+  }
+  if (entry.kind === "skill_invoked") {
+    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+        /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-emerald-500" })
+      ] }),
+      /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 py-1 text-sm ", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Skill" }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground/60 truncate", children: entry.skill }),
+        entry.stagedAt && /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground/60/70 ", children: [
+          "staged at ",
+          entry.stagedAt
+        ] })
+      ] }) })
+    ] });
+  }
+  if (entry.kind === "artifact") {
+    return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+      /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+        /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+        /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-sky-500" })
+      ] }),
+      /* @__PURE__ */ jsx(TimelineContent, { children: sessionId ? /* @__PURE__ */ jsx(
+        ArtifactBlock,
         {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          onClick: () => setViewerPage(pageNumber + 1),
-          disabled: pagesCount > 0 && pageNumber >= pagesCount,
-          "aria-label": "Next PDF page",
-          title: "Next page",
-          children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
+          sessionId,
+          artifactId: entry.artifactId,
+          name: entry.name,
+          kind: entry.artifactKind,
+          version: entry.version
+        }
+      ) : null })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+    /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+      /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-primary animate-pulse" })
+    ] }),
+    /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) })
+  ] });
+}
+function ReasoningEntry({
+  entry,
+  step
+}) {
+  const reasoning = useSmoothStream(entry.reasoning, entry.isStreaming);
+  return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+    /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+      /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2" })
+    ] }),
+    /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsxs(Reasoning, { isStreaming: entry.isStreaming, children: [
+      /* @__PURE__ */ jsx(ReasoningTrigger, {}),
+      /* @__PURE__ */ jsx(ReasoningContent, { children: reasoning })
+    ] }) })
+  ] });
+}
+function TextEntry({
+  entry,
+  step
+}) {
+  const content = useSmoothStream(entry.content, entry.isStreaming);
+  return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+    /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+      /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-foreground/40" })
+    ] }),
+    /* @__PURE__ */ jsxs(TimelineContent, { children: [
+      /* @__PURE__ */ jsx(MessageResponse, { children: content }),
+      entry.isFinalTurnText && entry.msg.status === "complete" && /* @__PURE__ */ jsx(TurnFeedback, { msg: entry.msg })
+    ] })
+  ] });
+}
+function deriveIterationLabel(message) {
+  const calls = visibleToolCalls(message);
+  if (calls.length === 0) {
+    return message.reasoning ? "Thought through the problem" : null;
+  }
+  if (calls.length === 1) {
+    const tc = calls[0];
+    return deriveSingleToolLabel(tc);
+  }
+  const firstName = calls[0].toolName;
+  const allSame = calls.every((tc) => tc.toolName === firstName);
+  if (allSame) {
+    const human = cancelledToolLabel(firstName);
+    return `${human} \xD7 ${calls.length}`;
+  }
+  return `Used ${calls.length} tools`;
+}
+function deriveSingleToolLabel(tc) {
+  const name = cancelledToolLabel(tc.toolName);
+  if (_HEADER_HIDES_DETAIL.has(tc.toolName)) {
+    return _HEADER_GENERIC_VERB[tc.toolName] ?? name;
+  }
+  const detail = extractToolDetail(tc);
+  return detail ? `${name} \xB7 ${detail}` : name;
+}
+var _HEADER_HIDES_DETAIL = /* @__PURE__ */ new Set([
+  "terminal",
+  "execute_code",
+  "memory"
+]);
+var _HEADER_GENERIC_VERB = {
+  terminal: "Ran a command",
+  execute_code: "Executed code",
+  memory: "Updated memory"
+};
+function extractToolDetail(tc) {
+  const args = parseArgs(tc.args);
+  if (!args) return null;
+  const stringArg = (key) => {
+    const v = args[key];
+    return typeof v === "string" && v.length > 0 ? v : null;
+  };
+  switch (tc.toolName) {
+    case "read_file":
+    case "write_file":
+    case "patch":
+    case "list_files":
+    case "search_files": {
+      const path = stringArg("path") ?? stringArg("file_path");
+      return path ? lastPathSegment(path) : null;
+    }
+    case "terminal": {
+      const cmd = stringArg("command");
+      return cmd ? truncate2(cmd, 40) : null;
+    }
+    case "execute_code": {
+      const code3 = stringArg("code");
+      return code3 ? truncate2(code3.split("\n")[0] ?? "", 40) : null;
+    }
+    case "web_search":
+    case "web_crawl":
+      return stringArg("query");
+    case "web_extract":
+      return stringArg("url");
+    case "skill_view":
+    case "skill_manage":
+      return stringArg("name") ?? stringArg("skill");
+    case "create_artifact":
+    case "consult_expert":
+    case "delegate_task":
+      return stringArg("name") ?? stringArg("task") ?? stringArg("title");
+    case "memory":
+      return stringArg("action") ?? stringArg("key");
+    default:
+      return null;
+  }
+}
+function lastPathSegment(path) {
+  const cleaned = path.replace(/\/+$/, "");
+  const idx = cleaned.lastIndexOf("/");
+  return idx >= 0 ? cleaned.slice(idx + 1) : cleaned;
+}
+function truncate2(s, max) {
+  return s.length > max ? `${s.slice(0, max - 1)}\u2026` : s;
+}
+var _SIMPLE_MODE_HIDDEN_TOOLS = /* @__PURE__ */ new Set([
+  "list_files",
+  "search_files",
+  "session_search",
+  "skills_list",
+  "process",
+  "memory",
+  // Shell commands and code execution are infrastructure plumbing the
+  // user doesn't need to see when the goal is to know *what* the
+  // agent accomplished, not *how*. Expert mode still has the full
+  // command + output block.
+  "terminal",
+  "execute_code"
+]);
+function _isHiddenSimpleTool(tc) {
+  if (_SIMPLE_MODE_HIDDEN_TOOLS.has(tc.toolName)) return true;
+  if (tc.toolName.startsWith("browser_")) return true;
+  return false;
+}
+function visibleToolCalls(message) {
+  return (message.toolCalls ?? []).filter((tc) => {
+    if (_isHiddenSimpleTool(tc)) return false;
+    const status = effectiveStatus(tc);
+    if (status === "error" || status === "cancelled") return false;
+    return true;
+  });
+}
+function isIterationLive(message) {
+  const calls = message.toolCalls ?? [];
+  if (calls.length > 0) {
+    return calls.some((tc) => tc.status === "running");
+  }
+  return message.status === "streaming";
+}
+function liveIterationLabel(message) {
+  const running = (message.toolCalls ?? []).filter(
+    (tc) => tc.status === "running" && !_isHiddenSimpleTool(tc)
+  );
+  if (running.length === 0) return "Thinking\u2026";
+  if (running.length === 1) {
+    const tc = running[0];
+    const name = cancelledToolLabel(tc.toolName);
+    const detail = extractToolDetail(tc);
+    return detail ? `Running ${name} \xB7 ${detail}\u2026` : `Running ${name}\u2026`;
+  }
+  const firstName = running[0].toolName;
+  const allSame = running.every((tc) => tc.toolName === firstName);
+  if (allSame) {
+    return `Running ${cancelledToolLabel(firstName)} \xD7 ${running.length}\u2026`;
+  }
+  return `Running ${running.length} tools\u2026`;
+}
+var _TOOL_ROW_ICON = {
+  read_file: FileTextIcon,
+  write_file: FileTextIcon,
+  patch: FileEditIcon,
+  list_files: ListIcon,
+  search_files: SearchIcon,
+  terminal: TerminalIcon,
+  execute_code: TerminalIcon,
+  web_search: GlobeIcon,
+  web_extract: GlobeIcon,
+  web_crawl: GlobeIcon,
+  session_search: SearchIcon,
+  skill_view: BookOpenIcon,
+  skills_list: BookOpenIcon,
+  skill_manage: PenLineIcon,
+  consult_expert: SparklesIcon,
+  delegate_task: ArrowRight,
+  create_artifact: FileTextIcon,
+  memory: PenLineIcon,
+  todo: ListIcon
+};
+function _toolRowIcon(toolName) {
+  return _TOOL_ROW_ICON[toolName] ?? WrenchIcon;
+}
+function _toolRowLabel(tc) {
+  const detail = extractToolDetail(tc);
+  switch (tc.toolName) {
+    case "read_file":
+      return detail ? `Read ${detail}` : "Read a file";
+    case "write_file":
+      return detail ? `Wrote ${detail}` : "Wrote a file";
+    case "patch":
+      return detail ? `Edited ${detail}` : "Edited a file";
+    case "list_files":
+      return detail ? `Listed ${detail}` : "Listed files";
+    case "search_files":
+      return detail ? `Searched files for "${detail}"` : "Searched files";
+    case "terminal":
+      return "Ran a command";
+    case "execute_code":
+      return "Executed code";
+    case "web_search":
+      return detail ? `Searched the web for "${detail}"` : "Searched the web";
+    case "web_crawl":
+      return detail ? `Crawled "${detail}"` : "Crawled the web";
+    case "web_extract":
+      return detail ? `Fetched ${detail}` : "Fetched a page";
+    case "session_search":
+      return detail ? `Searched session for "${detail}"` : "Searched session";
+    case "skill_view":
+      return detail ? `Read the ${detail} skill` : "Read a skill";
+    case "skills_list":
+      return "Listed available skills";
+    case "skill_manage":
+      return detail ? `Updated skill ${detail}` : "Managed skills";
+    case "consult_expert":
+      return detail ? `Consulted ${detail} expert` : "Consulted an expert";
+    case "delegate_task":
+      return detail ? `Delegated: ${detail}` : "Delegated a task";
+    case "create_artifact":
+      return detail ? `Created artifact "${detail}"` : "Created an artifact";
+    case "memory":
+      return detail ? `Memory ${detail}` : "Updated memory";
+    case "todo":
+      return detail ? `Todo ${detail}` : "Updated todo list";
+    default:
+      return cancelledToolLabel(tc.toolName);
+  }
+}
+function SimpleDetailRow({ icon: Icon, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 text-sm", children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: "mt-0.5 size-4 shrink-0 text-foreground/60",
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 leading-relaxed text-foreground/60", children })
+  ] });
+}
+function ClampedReasoning({
+  text,
+  previewParagraphs = 2
+}) {
+  const paragraphs = splitReasoningParagraphs(text);
+  const [expanded, setExpanded] = useState(false);
+  const hasMore = paragraphs.length > previewParagraphs;
+  const visible = expanded || !hasMore ? paragraphs : paragraphs.slice(0, previewParagraphs);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    visible.map((paragraph, i) => /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: paragraph }, i)),
+    hasMore && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded((prev) => !prev),
+        className: "text-xs font-medium text-foreground hover:text-foreground/70 cursor-pointer",
+        children: expanded ? "Show less" : "Show more..."
+      }
+    )
+  ] });
+}
+function splitReasoningParagraphs(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return [];
+  const blankSplit = trimmed.split(/\n\s*\n+/).map((p) => p.trim()).filter((p) => p.length > 0);
+  if (blankSplit.length > 1) return blankSplit;
+  return trimmed.split(/\n+/).map((p) => p.trim()).filter((p) => p.length > 0);
+}
+function IterationExpanded({
+  message
+}) {
+  const calls = visibleToolCalls(message);
+  const reasoning = (message.reasoning ?? "").trim();
+  const anyVisibleRunning = calls.some((tc) => tc.status === "running");
+  const showDone = !anyVisibleRunning && (calls.length > 0 || !!reasoning);
+  if (!reasoning && calls.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "ml-2 space-y-3 border-l border-border/40 pl-4 py-1", children: [
+    reasoning && /* @__PURE__ */ jsx(SimpleDetailRow, { icon: ClockIcon, children: /* @__PURE__ */ jsx(ClampedReasoning, { text: reasoning }) }),
+    calls.map((tc) => {
+      if (tc.toolName === "todo") {
+        return /* @__PURE__ */ jsx("div", { className: "pr-1", children: /* @__PURE__ */ jsx(TodoToolBlock, { tc }) }, tc.id);
+      }
+      return /* @__PURE__ */ jsx(SimpleDetailRow, { icon: _toolRowIcon(tc.toolName), children: /* @__PURE__ */ jsx("span", { children: _toolRowLabel(tc) }) }, tc.id);
+    }),
+    showDone && /* @__PURE__ */ jsx(SimpleDetailRow, { icon: CircleCheckIcon, children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Done" }) })
+  ] });
+}
+function IterationGroup({
+  message,
+  sessionId,
+  artifactFallbacks,
+  onFileSelect
+}) {
+  const summary = message.iterationSummary?.summary;
+  const [open, setOpen] = useState(false);
+  if (isIterationLive(message)) {
+    const askCall = (message.toolCalls ?? []).find(
+      (tc) => tc.toolName === "ask_user_question" && tc.status === "running"
+    );
+    if (askCall) {
+      return /* @__PURE__ */ jsx("div", { className: "px-1 py-0.5", children: /* @__PURE__ */ jsx(AskUserQuestionToolBlock, { tc: askCall }) });
+    }
+    const label2 = liveIterationLabel(message);
+    return /* @__PURE__ */ jsx("div", { className: "px-1 py-0.5 text-sm", children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: label2 }) });
+  }
+  const label = summary ?? deriveIterationLabel(message);
+  if (!label) {
+    return null;
+  }
+  const labelTone = summary ? "text-foreground/80" : "text-foreground/50";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        "aria-expanded": open,
+        className: "flex w-full items-center gap-2 rounded px-1 py-0.5 text-left text-sm hover:bg-muted/40",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate", labelTone), children: label }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "size-3 shrink-0 text-foreground/60 transition-transform",
+                open && "rotate-180"
+              ),
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      IterationExpanded,
+      {
+        message,
+        sessionId,
+        artifactFallbacks,
+        onFileSelect
+      }
+    )
+  ] });
+}
+function deriveFileArtifactsFromMessages(messages) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const msg of messages) {
+    if (msg.role !== "assistant" || !msg.toolCalls) continue;
+    for (const tc of msg.toolCalls) {
+      const status = effectiveStatus(tc);
+      if (status === "error" || status === "cancelled") continue;
+      const args = parseArgs(tc.args);
+      if (!args) continue;
+      if (tc.toolName === "write_file" || tc.toolName === "patch") {
+        const path = typeof args.path === "string" ? args.path : typeof args.file_path === "string" ? args.file_path : "";
+        if (!path || seen.has(`file:${path}`)) continue;
+        seen.add(`file:${path}`);
+        out.push({
+          kind: "file",
+          label: path.split("/").pop() || path,
+          ref: path
+        });
+        continue;
+      }
+      if (tc.toolName === "create_artifact") {
+        const name = typeof args.name === "string" ? args.name : "";
+        if (!name || seen.has(`artifact:${name}`)) continue;
+        seen.add(`artifact:${name}`);
+        out.push({
+          kind: "artifact",
+          label: name,
+          ref: name
+        });
+      }
+    }
+  }
+  return out;
+}
+function SimpleAssistantGroup({
+  messages,
+  lastGlobalIndex,
+  totalMessages,
+  isRunning,
+  sessionId,
+  artifactFallbacks,
+  onFileSelect,
+  onRetry
+}) {
+  const assistantMessages = messages.filter((m) => m.role === "assistant");
+  const tail = assistantMessages[assistantMessages.length - 1];
+  const tailHasTools = !!(tail?.toolCalls && tail.toolCalls.length > 0);
+  const tailIsTextOnly = !!tail && !tailHasTools;
+  const finalText = tailIsTextOnly && tail.content ? tail.content : "";
+  const isTailGroup = lastGlobalIndex === totalMessages - 1;
+  const showThinkingShim = isTailGroup && isRunning && (!tail && messages.some((m) => m.role !== "assistant") || tailIsTextOnly && tail.status === "streaming" && !tail.content);
+  const showErrorInfo = !!tail && tail.status === "error" && !!tail.errorInfo;
+  const effectiveTurnSummary = (() => {
+    const fromHarness = tail?.turnSummary;
+    if (fromHarness && fromHarness.artifacts.length > 0) {
+      return fromHarness;
+    }
+    const derived = deriveFileArtifactsFromMessages(messages);
+    if (derived.length === 0) return fromHarness;
+    return {
+      turnId: fromHarness?.turnId ?? "",
+      recap: fromHarness?.recap ?? "",
+      artifacts: derived
+    };
+  })();
+  return /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsxs(MessageContent, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      messages.map((message) => {
+        if (message.role === "system") {
+          return /* @__PURE__ */ jsx(
+            OrphanSystemMarker,
+            {
+              message,
+              sessionId,
+              onRetry: void 0
+            },
+            message.id
+          );
+        }
+        if (message === tail && tailIsTextOnly) return null;
+        return /* @__PURE__ */ jsx(
+          IterationGroup,
+          {
+            message,
+            sessionId,
+            artifactFallbacks,
+            onFileSelect
+          },
+          message.id
+        );
+      }),
+      showThinkingShim && /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." })
+    ] }),
+    finalText && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+      /* @__PURE__ */ jsx(MessageResponse, { children: finalText }),
+      tail?.status === "complete" && /* @__PURE__ */ jsx(TurnFeedback, { msg: tail })
+    ] }),
+    effectiveTurnSummary && /* @__PURE__ */ jsx(
+      TurnSummaryCard,
+      {
+        summary: effectiveTurnSummary,
+        sessionId,
+        messages,
+        onFileSelect
+      }
+    ),
+    showErrorInfo && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(ErrorMessage, { errorInfo: tail.errorInfo, onRetry }) })
+  ] }) });
+}
+function AssistantGroup({
+  messages,
+  lastGlobalIndex,
+  totalMessages,
+  isRunning,
+  sessionId,
+  artifactFallbacks,
+  onFileSelect,
+  onRetry,
+  viewMode = "simple"
+}) {
+  if (viewMode === "simple") {
+    return /* @__PURE__ */ jsx(
+      SimpleAssistantGroup,
+      {
+        messages,
+        lastGlobalIndex,
+        totalMessages,
+        isRunning,
+        sessionId,
+        artifactFallbacks,
+        onFileSelect,
+        onRetry
+      }
+    );
+  }
+  let entries = [];
+  for (let i = 0; i < messages.length; i++) {
+    const isLast = i === messages.length - 1 && lastGlobalIndex === totalMessages - 1;
+    entries.push(...messageToEntries(messages[i], isLast, artifactFallbacks));
+  }
+  entries = groupBrowserActivityEntries(entries);
+  entries = groupWebSearchEntries(entries);
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const entry = entries[i];
+    if (entry?.kind === "text") {
+      entries[i] = { ...entry, isFinalTurnText: true };
+      break;
+    }
+  }
+  const isTailGroup = lastGlobalIndex === totalMessages - 1;
+  const lastEntry = entries[entries.length - 1];
+  const hasRunningTool = entries.some(
+    (e) => e.kind === "tool" && e.tc.status === "running"
+  );
+  const tailMsg = messages[messages.length - 1];
+  if (isTailGroup && isRunning && !hasRunningTool && lastEntry?.kind !== "thinking") {
+    entries.push({ kind: "thinking", key: `${tailMsg.id}-tail-thinking` });
+  }
+  const tail = messages[messages.length - 1];
+  const showErrorInfo = tail && tail.role === "assistant" && tail.status === "error" && !!tail.errorInfo;
+  return /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsxs(MessageContent, { children: [
+    /* @__PURE__ */ jsx(Timeline, { defaultValue: 999, className: "gap-0", children: entries.map((entry, i) => /* @__PURE__ */ jsx(
+      TimelineEntryItem,
+      {
+        entry,
+        step: i + 1,
+        sessionId,
+        onFileSelect
+      },
+      entry.key
+    )) }),
+    showErrorInfo && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(ErrorMessage, { errorInfo: tail.errorInfo, onRetry }) })
+  ] }) });
+}
+function RetryBanner({ indicator }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: "flex flex-col gap-1 border-l-2 border-amber-500 bg-amber-500/5 px-3 py-2 text-xs",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((prev) => !prev),
+            className: "flex items-center gap-2 text-left text-amber-600 hover:text-amber-700",
+            "aria-expanded": open,
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-medium", children: indicator.title }),
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-foreground/60", children: [
+                "attempt ",
+                indicator.attempt
+              ] }),
+              indicator.detail && (open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }))
+            ]
+          }
+        ),
+        open && indicator.detail && /* @__PURE__ */ jsx("pre", { className: "mt-1 overflow-x-auto rounded-none bg-background p-2 font-mono text-[11px] whitespace-pre-wrap wrap-break-word text-foreground/60", children: indicator.detail })
+      ]
+    }
+  );
+}
+function ChatThread({
+  sessionId,
+  messages,
+  isRunning,
+  isLoadingHistory = false,
+  onSend,
+  onStop,
+  onFileSelect,
+  disabled = false,
+  disabledReason,
+  tokenUsage,
+  retryIndicator,
+  onRetry,
+  onComposerError,
+  showBrowser = false,
+  onToggleBrowser,
+  showWorkspace = false,
+  onToggleWorkspace,
+  canShowBrowser = false,
+  canShowWorkspace = false,
+  viewMode = "simple",
+  onViewModeChange
+}) {
+  const groups = useMemo(() => groupMessages(messages), [messages]);
+  const artifactFallbacks = useMemo(() => {
+    const fallbacks = {};
+    const createArtifactToolCallIds = [];
+    let artifactIdx = 0;
+    for (const msg of messages) {
+      if (msg.role === "assistant" && msg.toolCalls) {
+        for (const tc of msg.toolCalls) {
+          if (tc.toolName === "create_artifact" && !tc.cancelled && tc.status !== "error") {
+            createArtifactToolCallIds.push(tc.id);
+          }
         }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "mx-1 h-5 w-px bg-line" }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          onClick: () => setViewerScale(scale - 0.1),
-          disabled: scale <= 0.5,
-          "aria-label": "Zoom out PDF",
-          title: "Zoom out",
-          children: /* @__PURE__ */ jsx(MinusIcon, { className: "size-3.5" })
+      } else if (msg.role === "system" && msg.systemKind === "artifact") {
+        const tcId = createArtifactToolCallIds[artifactIdx];
+        if (tcId) {
+          const { name } = unpackArtifactMeta(msg.systemMeta, msg.content);
+          if (name) fallbacks[tcId] = name;
         }
-      ),
-      /* @__PURE__ */ jsxs(
-        "button",
+        artifactIdx += 1;
+      }
+    }
+    return fallbacks;
+  }, [messages]);
+  const activeFailureId = useMemo(() => {
+    if (messages.length === 0) return null;
+    const tail = messages[messages.length - 1];
+    if (tail.role === "system" && tail.systemKind === "error" && tail.errorInfo) {
+      return tail.id;
+    }
+    if (tail.role === "assistant" && tail.status === "error" && tail.errorInfo) {
+      return tail.id;
+    }
+    return null;
+  }, [messages]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-sm", children: [
+    /* @__PURE__ */ jsxs(Conversation, { className: "relative flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsx(ConversationContent, { className: "mx-auto w-full max-w-4xl", children: messages.length === 0 && isLoadingHistory ? /* @__PURE__ */ jsx(
+        ConversationEmptyState,
         {
-          type: "button",
-          className: "h-7 min-w-12 px-1 text-xs text-muted-foreground hover:text-foreground",
-          onClick: () => {
-            const viewer = pdfViewerRef.current;
-            if (!viewer) return;
-            viewer.currentScaleValue = "page-width";
-            setScale(viewer.currentScale || 1);
-          },
-          "aria-label": "Fit PDF to width",
-          title: "Fit width",
-          children: [
-            Math.round(scale * 100),
-            "%"
-          ]
+          icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-8 opacity-40" }),
+          title: "Loading conversation",
+          description: "Fetching the session history."
         }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
+      ) : messages.length === 0 && !disabled ? /* @__PURE__ */ jsx(
+        ConversationEmptyState,
         {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          onClick: () => setViewerScale(scale + 0.1),
-          disabled: scale >= 3,
-          "aria-label": "Zoom in PDF",
-          title: "Zoom in",
-          children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+          icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-8 opacity-40" }),
+          title: "Start a conversation",
+          description: "Ask me anything \u2014 I can search, analyze, write code, and more."
         }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "mx-1 h-5 w-px bg-line" }),
-      /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5 text-muted-foreground" }),
-      /* @__PURE__ */ jsx(
-        Input,
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        groups.map((group) => {
+          if (group.role === "user") {
+            const msg = group.messages[0];
+            return /* @__PURE__ */ jsx(
+              ChatMessage,
+              {
+                message: msg,
+                onFileSelect
+              },
+              msg.id
+            );
+          }
+          if (group.role === "system") {
+            const msg = group.messages[0];
+            const groupRetry2 = msg.id === activeFailureId ? onRetry : void 0;
+            return /* @__PURE__ */ jsx(
+              OrphanSystemMarker,
+              {
+                message: msg,
+                sessionId,
+                onRetry: groupRetry2
+              },
+              msg.id
+            );
+          }
+          const groupTail = group.messages[group.messages.length - 1];
+          const groupRetry = groupTail.id === activeFailureId ? onRetry : void 0;
+          return /* @__PURE__ */ jsx(
+            AssistantGroup,
+            {
+              messages: group.messages,
+              lastGlobalIndex: group.lastGlobalIndex,
+              totalMessages: messages.length,
+              isRunning,
+              sessionId,
+              artifactFallbacks,
+              onFileSelect,
+              onRetry: groupRetry,
+              viewMode
+            },
+            group.messages[0].id
+          );
+        }),
+        isRunning && messages.length > 0 && messages[messages.length - 1].role === "user" && /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(ConversationScrollButton, {})
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-3 sm:px-6 pb-3 sm:pb-5 pt-3", children: [
+      retryIndicator && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(RetryBanner, { indicator: retryIndicator }) }),
+      disabled && disabledReason ? /* @__PURE__ */ jsx(
+        "div",
         {
-          type: "search",
-          value: query,
-          onChange: (event) => setQuery(event.target.value),
-          onKeyDown: (event) => {
-            if (event.key === "Enter") runFind(event.shiftKey);
-          },
-          placeholder: "Find",
-          "aria-label": "Find in PDF",
-          className: "h-7 w-28 border-input px-1 text-xs"
+          className: "rounded border border-line bg-muted/40 px-3 py-2 text-sm text-foreground/60",
+          role: "status",
+          children: disabledReason
         }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
+      ) : /* @__PURE__ */ jsx(
+        ChatComposer,
         {
-          type: "button",
-          variant: "ghost",
-          size: "xs",
-          onClick: () => runFind(false),
-          disabled: !query.trim(),
-          children: "Find"
+          onSend,
+          onStop,
+          isRunning,
+          disabled,
+          disabledReason,
+          tokenUsage,
+          onComposerError,
+          showBrowser,
+          onToggleBrowser,
+          showWorkspace,
+          onToggleWorkspace,
+          canShowBrowser,
+          canShowWorkspace,
+          viewMode,
+          onViewModeChange
         }
       )
-    ] }),
-    error && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-2 p-3 text-xs text-destructive", children: [
-      /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
-      /* @__PURE__ */ jsx("span", { children: error })
-    ] }),
-    !error && /* @__PURE__ */ jsx("div", { className: "relative h-[70vh] min-h-[420px] flex-1 bg-muted/20", children: /* @__PURE__ */ jsx(
+    ] })
+  ] });
+}
+var noop = () => {
+};
+var FileTreeContext = createContext({
+  expandedPaths: /* @__PURE__ */ new Set(),
+  togglePath: noop
+});
+function FileTree({
+  expanded: controlledExpanded,
+  defaultExpanded = /* @__PURE__ */ new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}) {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+  const togglePath = useCallback(
+    (path) => {
+      const next = new Set(expandedPaths);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+  const contextValue = useMemo(
+    () => ({
+      expandedPaths,
+      onSelect,
+      selectedPath: selectedPath ?? void 0,
+      togglePath
+    }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+  return /* @__PURE__ */ jsx(FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("rounded-lg border bg-background text-sm", className),
+      role: "tree",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "p-2", children })
+    }
+  ) });
+}
+function FileTreeIcon({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("shrink-0", className), ...props, children });
+}
+function FileTreeName({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("truncate", className), ...props, children });
+}
+function FileTreeFolder({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}) {
+  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("", className), role: "treeitem", tabIndex: 0, ...props, children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: containerRef,
-        "aria-label": `PDF viewer for ${fileName2}`,
-        className: "absolute inset-0 overflow-auto",
-        children: /* @__PURE__ */ jsx("div", { ref: viewerRef, className: "pdfViewer" })
+        className: cn(
+          "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+          isSelected && "bg-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0",
+              type: "button",
+              "aria-label": isExpanded ? `Collapse ${name}` : `Expand ${name}`,
+              children: /* @__PURE__ */ jsx(
+                ChevronRightIcon,
+                {
+                  className: cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left",
+              onClick: handleSelect,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4 text-blue-500" }) : /* @__PURE__ */ jsx(FolderIcon, { className: "size-4 text-blue-500" }) }),
+                /* @__PURE__ */ jsx(FileTreeName, { children: name })
+              ]
+            }
+          )
+        ]
       }
-    ) })
-  ] });
-}
-function decodeBase64(content) {
-  const binary = globalThis.atob(content);
-  const bytes = new Uint8Array(binary.length);
-  for (let index = 0; index < binary.length; index += 1) {
-    bytes[index] = binary.charCodeAt(index);
-  }
-  return bytes;
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-4 border-l border-muted-foreground/50 pl-2", children }) })
+  ] }) });
 }
-function formatPdfPreviewError(error) {
-  if (error instanceof Error && (error.name === "InvalidCharacterError" || error.message === "Invalid character")) {
-    return "PDF preview data is not valid base64.";
-  }
-  return error instanceof Error ? error.message : "Failed to render PDF preview.";
+function FileTreeFile({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}) {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+        isSelected && "bg-muted",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx(FileTreeName, { children: name })
+      ] })
+    }
+  );
 }
 var SKELETON_WIDTHS2 = [75, 60, 90, 65, 80, 70, 85, 55];
 var DEFAULT_WIDTH = 400;
@@ -8574,7 +9516,7 @@ function WorkspacePanel({
           }
         ),
         /* @__PURE__ */ jsx(
-          ConfirmDialog,
+          ConfirmDialog2,
           {
             open: deleteTarget !== null,
             title: "Delete file?",
@@ -8588,7 +9530,7 @@ function WorkspacePanel({
     }
   );
 }
-function ConfirmDialog({
+function ConfirmDialog2({
   open,
   title,
   description,
@@ -8664,7 +9606,9 @@ var AGENT_CHAT_LISTENED_EVENTS = [
   "skill.invoked",
   "policy.denied",
   "stream.timeout",
+  "expert.delegation",
   "expert.result",
+  "expert.failure",
   "expert.endorse",
   "expert.override",
   "user.feedback",
@@ -8674,7 +9618,9 @@ var AGENT_CHAT_LISTENED_EVENTS = [
   "browser.destroyed",
   "browser.control_granted",
   "browser.control_returned",
-  "clarify.response"
+  "ask_user_question.response",
+  "iteration.summary",
+  "turn.summary"
 ];
 
 // src/runtime/reducer.ts
@@ -8699,7 +9645,8 @@ function createInitialAgentChatState(options = {}) {
     hadDeltas: false,
     terminal: false,
     workspaceRefreshKey: 0,
-    browser: null
+    browser: null,
+    viewMode: options.viewMode ?? "simple"
   };
 }
 function applyAgentChatEvent(state, event) {
@@ -8712,11 +9659,10 @@ function applyAgentChatEvent(state, event) {
   nextState = applyRetryIndicator(nextState, event);
   switch (event.type) {
     case "user.message":
-      return withMessages(nextState, applyUserMessage(
-        nextState.messages,
-        event.eventId,
-        event.data
-      ));
+      return withMessages(
+        { ...nextState, terminal: false, isRunning: true },
+        applyUserMessage(nextState.messages, event.eventId, event.data)
+      );
     case "skill.invoked":
       return withMessages(nextState, [
         ...nextState.messages,
@@ -8791,7 +9737,7 @@ function applyAgentChatEvent(state, event) {
     }
     case "harness.wake":
     case "llm.request":
-      return nextState.terminal ? nextState : { ...nextState, isRunning: true };
+      return { ...nextState, terminal: false, isRunning: true };
     case "harness.crash":
     case "stream.timeout":
       return nextState;
@@ -8815,10 +9761,17 @@ function applyAgentChatEvent(state, event) {
         };
       }
       return nextState;
+    case "expert.delegation":
+      return applyExpertDelegation(nextState, event);
     case "expert.result":
       return withMessages(
         nextState,
-        applyExpertResult(nextState.messages, event.eventId)
+        applyExpertResult(nextState.messages, event.eventId, event.data)
+      );
+    case "expert.failure":
+      return withMessages(
+        nextState,
+        applyExpertFailure(nextState.messages, event.eventId, event.data)
       );
     case "expert.endorse":
     case "expert.override":
@@ -8831,15 +9784,19 @@ function applyAgentChatEvent(state, event) {
         nextState,
         applyUserFeedback(nextState.messages, event.data)
       );
-    case "clarify.response":
+    case "ask_user_question.response":
       return withMessages(
         nextState,
-        applyClarifyResponse(nextState.messages, event.data)
+        applyAskUserQuestionResponse(nextState.messages, event.data)
       );
     case "policy.denied":
       return applyPolicyDenied(nextState, event.data);
     case "session.start":
       return nextState;
+    case "iteration.summary":
+      return applyIterationSummary(nextState, event);
+    case "turn.summary":
+      return applyTurnSummary(nextState, event);
   }
 }
 function applyRetryIndicator(state, event) {
@@ -8972,6 +9929,7 @@ function browserMarker(event) {
 function applyLlmDelta(state, event) {
   const deltaContent = stringValue2(event.data.content);
   const deltaReasoning = stringValue2(event.data.reasoning);
+  const { turnId, iterationIndex } = readTurnMeta(event.data);
   const messages = [...state.messages];
   const lastIdx = findLastAssistantIndex(messages);
   const lastMsg = lastIdx >= 0 ? messages[lastIdx] : null;
@@ -8986,7 +9944,9 @@ function applyLlmDelta(state, event) {
     messages[lastIdx] = {
       ...lastMsg,
       content: deltaContent ? lastMsg.content + deltaContent : lastMsg.content,
-      reasoning: deltaReasoning ? (lastMsg.reasoning ?? "") + deltaReasoning : lastMsg.reasoning
+      reasoning: deltaReasoning ? (lastMsg.reasoning ?? "") + deltaReasoning : lastMsg.reasoning,
+      turnId: turnId ?? lastMsg.turnId,
+      iterationIndex: iterationIndex ?? lastMsg.iterationIndex
     };
   } else {
     messages.push({
@@ -8995,14 +9955,17 @@ function applyLlmDelta(state, event) {
       content: deltaContent,
       reasoning: deltaReasoning || void 0,
       createdAt: /* @__PURE__ */ new Date(),
-      status: "streaming"
+      status: "streaming",
+      turnId,
+      iterationIndex
     });
   }
   return {
     ...state,
     messages,
     hadDeltas: state.hadDeltas || Boolean(deltaContent),
-    isRunning: state.terminal ? state.isRunning : true
+    terminal: false,
+    isRunning: true
   };
 }
 function applyLlmResponse(state, event) {
@@ -9012,6 +9975,7 @@ function applyLlmResponse(state, event) {
   const toolCalls = Array.isArray(message?.tool_calls) ? message?.tool_calls : [];
   const hasToolCalls = toolCalls.length > 0;
   const responseToolCallIds = toolCallIdsFromResponse(toolCalls);
+  const { turnId, iterationIndex } = readTurnMeta(event.data);
   const idx = findLastAssistantIndex(messages);
   const prevAssistant = idx >= 0 ? messages[idx] : void 0;
   const prevHasTools = Boolean(prevAssistant?.toolCalls?.length);
@@ -9029,13 +9993,17 @@ function applyLlmResponse(state, event) {
         reasoning: (current.reasoning ?? "") + current.content,
         content: "",
         status: "streaming",
-        llmResponseEventId: event.eventId
+        llmResponseEventId: event.eventId,
+        turnId: turnId ?? current.turnId,
+        iterationIndex: iterationIndex ?? current.iterationIndex
       };
     } else {
       messages[idx] = {
         ...current,
         status: "complete",
-        llmResponseEventId: event.eventId
+        llmResponseEventId: event.eventId,
+        turnId: turnId ?? current.turnId,
+        iterationIndex: iterationIndex ?? current.iterationIndex
       };
     }
   } else if (matchesExistingToolTurn && idx >= 0) {
@@ -9044,7 +10012,9 @@ function applyLlmResponse(state, event) {
       ...current,
       reasoning: responseContent ? appendText(current.reasoning, responseContent) : current.reasoning,
       status: "streaming",
-      llmResponseEventId: event.eventId
+      llmResponseEventId: event.eventId,
+      turnId: turnId ?? current.turnId,
+      iterationIndex: iterationIndex ?? current.iterationIndex
     };
   } else if (prevHasTools || !prevAssistant || hasUserAfter) {
     messages.push({
@@ -9054,7 +10024,9 @@ function applyLlmResponse(state, event) {
       reasoning: hasToolCalls && responseContent ? responseContent : void 0,
       createdAt: /* @__PURE__ */ new Date(),
       status: hasToolCalls ? "streaming" : "complete",
-      llmResponseEventId: event.eventId
+      llmResponseEventId: event.eventId,
+      turnId,
+      iterationIndex
     });
   } else {
     const current = messages[idx];
@@ -9063,14 +10035,18 @@ function applyLlmResponse(state, event) {
         ...current,
         reasoning: (current.reasoning ?? "") + responseContent,
         status: "streaming",
-        llmResponseEventId: event.eventId
+        llmResponseEventId: event.eventId,
+        turnId: turnId ?? current.turnId,
+        iterationIndex: iterationIndex ?? current.iterationIndex
       };
     } else {
       messages[idx] = {
         ...current,
         content: responseContent || current.content,
         status: hasToolCalls ? "streaming" : "complete",
-        llmResponseEventId: event.eventId
+        llmResponseEventId: event.eventId,
+        turnId: turnId ?? current.turnId,
+        iterationIndex: iterationIndex ?? current.iterationIndex
       };
     }
   }
@@ -9103,6 +10079,7 @@ ${addition}`;
 }
 function applyLlmThinking(state, event) {
   const reasoningText = stringValue2(event.data.reasoning) || stringValue2(event.data.content);
+  const { turnId, iterationIndex } = readTurnMeta(event.data);
   const messages = [...state.messages];
   const idx = findLastAssistantIndex(messages);
   const prev = idx >= 0 ? messages[idx] : null;
@@ -9117,19 +10094,85 @@ function applyLlmThinking(state, event) {
       content: "",
       reasoning: reasoningText,
       createdAt: /* @__PURE__ */ new Date(),
-      status: "streaming"
+      status: "streaming",
+      turnId,
+      iterationIndex
     });
   } else {
     messages[idx] = {
       ...prev,
-      reasoning: (prev.reasoning ?? "") + reasoningText
+      reasoning: (prev.reasoning ?? "") + reasoningText,
+      turnId: turnId ?? prev.turnId,
+      iterationIndex: iterationIndex ?? prev.iterationIndex
     };
   }
   return {
     ...state,
     messages,
-    isRunning: state.terminal ? state.isRunning : true
+    terminal: false,
+    isRunning: true
+  };
+}
+function applyIterationSummary(state, event) {
+  const turnId = optionalStringValue(event.data.turn_id);
+  const iterationIndex = optionalNumberValue(event.data.iteration_index);
+  const summary = optionalStringValue(event.data.summary);
+  if (!turnId || iterationIndex === null || !summary) return state;
+  const idx = state.messages.findIndex(
+    (m) => m.role === "assistant" && m.turnId === turnId && m.iterationIndex === iterationIndex
+  );
+  if (idx < 0) return state;
+  const toolCallIds = Array.isArray(event.data.tool_call_ids) ? event.data.tool_call_ids.map((x) => String(x)) : [];
+  const messages = [...state.messages];
+  messages[idx] = {
+    ...messages[idx],
+    iterationSummary: {
+      iterationIndex,
+      summary,
+      toolCallIds,
+      startedAt: stringValue2(event.data.started_at),
+      endedAt: stringValue2(event.data.ended_at)
+    }
+  };
+  return { ...state, messages };
+}
+function applyTurnSummary(state, event) {
+  const turnId = optionalStringValue(event.data.turn_id);
+  if (!turnId) return state;
+  const recap = stringValue2(event.data.recap);
+  const artifacts = parseTurnArtifacts(event.data.artifacts);
+  let idx = -1;
+  for (let i = state.messages.length - 1; i >= 0; i--) {
+    const message = state.messages[i];
+    if (message.role === "assistant" && message.turnId === turnId) {
+      idx = i;
+      break;
+    }
+  }
+  if (idx < 0) return state;
+  const messages = [...state.messages];
+  messages[idx] = {
+    ...messages[idx],
+    turnSummary: { turnId, recap, artifacts }
   };
+  return { ...state, messages };
+}
+function parseTurnArtifacts(raw) {
+  if (!Array.isArray(raw)) return [];
+  const out = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const obj = item;
+    const kind = obj.kind;
+    if (kind !== "file" && kind !== "artifact" && kind !== "url" && kind !== "command") {
+      continue;
+    }
+    const label = typeof obj.label === "string" ? obj.label : "";
+    const ref = typeof obj.ref === "string" ? obj.ref : "";
+    if (!label || !ref) continue;
+    out.push({ kind, label, ref });
+  }
+  return out;
 }
 function applyToolCall(state, event) {
   const messages = [...state.messages];
@@ -9166,7 +10209,8 @@ function applyToolCall(state, event) {
   return {
     ...state,
     messages,
-    isRunning: state.terminal ? state.isRunning : true
+    terminal: false,
+    isRunning: true
   };
 }
 function applyToolResult(messages, data) {
@@ -9244,16 +10288,84 @@ function buildErrorInfo(event) {
     retryable: Boolean(event.data.retryable)
   };
 }
-function applyExpertResult(messages, eventId) {
+function applyExpertResult(messages, eventId, data) {
   const match = findLatestConsultExpertCall(messages);
   if (!match) return messages;
+  const content = stringValue2(data.content);
   const next = [...messages];
   const msg = next[match.msgIdx];
   next[match.msgIdx] = {
     ...msg,
-    toolCalls: msg.toolCalls?.map(
-      (tc) => tc.id === match.toolId ? { ...tc, expertResultEventId: eventId } : tc
-    )
+    toolCalls: msg.toolCalls?.map((tc) => {
+      if (tc.id !== match.toolId) return tc;
+      const updated = {
+        ...tc,
+        expertResultEventId: eventId,
+        status: "complete"
+      };
+      if (tc.result === void 0 && content) {
+        updated.result = JSON.stringify({ content });
+      }
+      return updated;
+    })
+  };
+  return next;
+}
+function applyExpertDelegation(state, event) {
+  if (findLatestConsultExpertCall(state.messages) !== null) {
+    return state;
+  }
+  const expertName = stringValue2(event.data.expert);
+  const task = stringValue2(event.data.task);
+  if (!expertName) return state;
+  const messages = [...state.messages];
+  const assistantIdx = findLastAssistantIndex(messages);
+  let assistant = assistantIdx >= 0 ? messages[assistantIdx] : null;
+  const userAfterAssistant = assistantIdx >= 0 && hasUserAfterIndex(messages, assistantIdx);
+  if (!assistant || assistant.status === "complete" || userAfterAssistant) {
+    assistant = {
+      id: `evt-${event.eventId}-expert-delegation`,
+      role: "assistant",
+      content: "",
+      createdAt: /* @__PURE__ */ new Date(),
+      status: "streaming"
+    };
+    messages.push(assistant);
+  } else {
+    assistant = { ...assistant };
+    messages[assistantIdx] = assistant;
+  }
+  const toolCall = {
+    id: `expert-delegation-${event.eventId}`,
+    toolName: "consult_expert",
+    args: JSON.stringify({ expert: expertName, question: task }),
+    status: "running"
+  };
+  assistant.toolCalls = [...assistant.toolCalls ?? [], toolCall];
+  return {
+    ...state,
+    messages,
+    terminal: false,
+    isRunning: true
+  };
+}
+function applyExpertFailure(messages, eventId, data) {
+  const match = findLatestConsultExpertCall(messages);
+  if (!match) return messages;
+  const errorMsg = stringValue2(data.error) || "Expert consultation failed.";
+  const next = [...messages];
+  const msg = next[match.msgIdx];
+  next[match.msgIdx] = {
+    ...msg,
+    toolCalls: msg.toolCalls?.map((tc) => {
+      if (tc.id !== match.toolId) return tc;
+      return {
+        ...tc,
+        expertResultEventId: eventId,
+        status: "error",
+        result: tc.result ?? JSON.stringify({ error: errorMsg })
+      };
+    })
   };
   return next;
 }
@@ -9303,7 +10415,7 @@ function applyUserFeedback(messages, data) {
   }
   return messages;
 }
-function applyClarifyResponse(messages, data) {
+function applyAskUserQuestionResponse(messages, data) {
   const targetToolId = stringValue2(data.tool_call_id);
   const responses = Array.isArray(data.responses) ? data.responses : void 0;
   if (!targetToolId || !responses) return messages;
@@ -9316,7 +10428,7 @@ function applyClarifyResponse(messages, data) {
       toolCalls: msg.toolCalls.map(
         (tc) => tc.id === targetToolId ? {
           ...tc,
-          clarifyAnswers: responses.map((response) => {
+          askUserQuestionAnswers: responses.map((response) => {
             const row = objectValue(response) ?? {};
             return {
               question: stringValue2(row.question),
@@ -9398,8 +10510,39 @@ function stringValue2(value) {
 function numberValue(value) {
   return typeof value === "number" ? value : 0;
 }
+function optionalNumberValue(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function optionalStringValue(value) {
+  return typeof value === "string" && value.length > 0 ? value : void 0;
+}
+function readTurnMeta(data) {
+  const turnId = optionalStringValue(data.turn_id);
+  const iterationIndex = optionalNumberValue(data.iteration_index);
+  return {
+    turnId,
+    iterationIndex: iterationIndex === null ? void 0 : iterationIndex
+  };
+}
 
 // src/runtime/use-agent-chat-runtime.ts
+var VIEW_MODE_KEY = "@invergent/agent-chat-react:viewMode";
+function readPersistedViewMode() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(VIEW_MODE_KEY);
+    if (raw === "simple" || raw === "expert") return raw;
+  } catch {
+  }
+  return null;
+}
+function writePersistedViewMode(mode) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(VIEW_MODE_KEY, mode);
+  } catch {
+  }
+}
 function useAgentChatRuntime({
   adapter,
   agentId,
@@ -9407,7 +10550,13 @@ function useAgentChatRuntime({
   onSessionChange
 }) {
   const [state, setState] = useState(
-    () => createInitialAgentChatState({ isLoadingHistory: Boolean(sessionId) })
+    () => createInitialAgentChatState({
+      isLoadingHistory: Boolean(sessionId),
+      // Seed from localStorage so the first paint matches the user's
+      // last choice without flashing the default. The async adapter
+      // load can still upgrade this later.
+      viewMode: readPersistedViewMode() ?? "simple"
+    })
   );
   const [session, setSession] = useState(null);
   const stateRef = useRef(state);
@@ -9703,6 +10852,41 @@ function useAgentChatRuntime({
       throw error;
     }
   }, [adapter, sessionId]);
+  useEffect(() => {
+    if (!adapter.getChatViewMode) {
+      const cached = readPersistedViewMode();
+      if (cached !== null) {
+        setState(
+          (prev) => prev.viewMode === cached ? prev : { ...prev, viewMode: cached }
+        );
+      }
+      return;
+    }
+    let cancelled = false;
+    void adapter.getChatViewMode().then((persisted) => {
+      if (cancelled) return;
+      if (persisted === "simple" || persisted === "expert") {
+        setState(
+          (prev) => prev.viewMode === persisted ? prev : { ...prev, viewMode: persisted }
+        );
+      }
+    }).catch(() => void 0);
+    return () => {
+      cancelled = true;
+    };
+  }, [adapter]);
+  const setViewMode = useCallback(
+    (mode) => {
+      setState(
+        (prev) => prev.viewMode === mode ? prev : { ...prev, viewMode: mode }
+      );
+      writePersistedViewMode(mode);
+      if (adapter.setChatViewMode) {
+        void adapter.setChatViewMode(mode).catch(() => void 0);
+      }
+    },
+    [adapter]
+  );
   return {
     state,
     session,
@@ -9716,7 +10900,9 @@ function useAgentChatRuntime({
     stop,
     retry,
     markSending,
-    markSendError
+    markSendError,
+    viewMode: state.viewMode,
+    setViewMode
   };
 }
 function parseEventData(data) {
@@ -9787,6 +10973,9 @@ function AgentChat({
     sessionId,
     onSessionChange
   });
+  useEffect(() => {
+    setShowWorkspace(runtime.viewMode === "expert");
+  }, [runtime.viewMode]);
   const isReadOnlySession = isScheduledRunSession(runtime.session);
   const effectiveDisabled = disabled || isReadOnlySession;
   const disabledReason = isReadOnlySession ? "Scheduled run is read-only" : void 0;
@@ -9907,7 +11096,9 @@ function AgentChat({
                     showWorkspace,
                     onToggleWorkspace: handleToggleWorkspace,
                     canShowBrowser: browserAvailable,
-                    canShowWorkspace: workspaceAvailable
+                    canShowWorkspace: workspaceAvailable,
+                    viewMode: runtime.viewMode,
+                    onViewModeChange: runtime.setViewMode
                   }
                 )
               }
@@ -9943,7 +11134,8 @@ function AgentChat({
                         {
                           sessionId,
                           state: browserState,
-                          adapter
+                          adapter,
+                          onClose: () => setShowBrowser(false)
                         }
                       )
                     }
@@ -10127,7 +11319,7 @@ function InputRequiredDetail({
         answer: answers[question.prompt]?.trim() ?? "",
         is_other: false
       }));
-      await adapter.submitClarifyResponse({
+      await adapter.submitAskUserQuestionResponse({
         sessionId: item.sessionId,
         toolCallId,
         responses
@@ -10711,7 +11903,7 @@ function groupMissionTasksByBucket(tasks) {
 function deriveMissionWorkerActivityLabel(worker) {
   const kind = worker.latestEventKind;
   if (kind === "tool.call" && worker.latestEventSummary) {
-    return `tool: ${truncate2(worker.latestEventSummary, 80)}`;
+    return `tool: ${truncate3(worker.latestEventSummary, 80)}`;
   }
   if (kind === "llm.response") {
     return "thinking";
@@ -10720,11 +11912,11 @@ function deriveMissionWorkerActivityLabel(worker) {
     return "received tool result";
   }
   if (kind && worker.latestEventSummary) {
-    return `${kind}: ${truncate2(worker.latestEventSummary, 60)}`;
+    return `${kind}: ${truncate3(worker.latestEventSummary, 60)}`;
   }
   return worker.sessionStatus || "active";
 }
-function truncate2(s, max) {
+function truncate3(s, max) {
   if (s.length <= max) return s;
   return `${s.slice(0, max - 1)}\u2026`;
 }
@@ -12092,7 +13284,8 @@ function pruneDeletedSessionNodes(nodes, deletedSessionId) {
   return nodes.filter((node) => !deletedIds.has(node.id));
 }
 function formatSessionTime(value) {
-  const date = new Date(value);
+  const normalized = /[zZ]|[+-]\d{2}:?\d{2}$/.test(value) ? value : `${value}Z`;
+  const date = new Date(normalized);
   if (Number.isNaN(date.getTime())) return "";
   return formatDistanceToNow(date, { addSuffix: true });
 }
@@ -12132,7 +13325,6 @@ function TreeNodeRow({
   const title = entry.title ?? fallbackSessionTitle(entry);
   const subtitle = [
     formatRunKind(entry.runKind),
-    entry.model ?? entry.agentType,
     formatSessionTime(entry.updatedAt)
   ].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -12148,7 +13340,7 @@ function TreeNodeRow({
         className: cn(
           "group flex items-center gap-2 w-full py-2 pr-2 text-left cursor-pointer transition-colors border-l-2",
           "min-h-11 md:min-h-0",
-          isActive ? "bg-line text-foreground border-l-primary" : "bg-transparent text-subtle hover:bg-input hover:text-foreground border-l-transparent"
+          isActive ? "bg-line text-foreground border-l-primary" : "bg-transparent text-foreground/80 hover:bg-input hover:text-foreground border-l-transparent"
         ),
         style: { paddingLeft: `${depth * 12 + 12}px` },
         children: [