@invergent/agent-chat-react 1.5.3 → 1.5.4

package/dist/index.js

@@ -1,8 +1,7 @@
+import { cn } from './chunk-QSC4UIVT.js';
 import { createContext, memo, useRef, useState, useEffect, useCallback, useMemo, lazy, useContext, Suspense, Children } from 'react';
 import { cva } from 'class-variance-authority';
 import { Collapsible as Collapsible$1, Slot, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Tooltip as Tooltip$1, Tabs as Tabs$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, Progress as Progress$1 } from 'radix-ui';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, ChevronRightIcon, GitBranchIcon, XIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, Loader2Icon, GlobeIcon, SearchIcon, ListTodoIcon, XCircleIcon, CheckCircle2Icon, Code, CheckIcon, CopyIcon, TerminalIcon, Trash2Icon, CircleDotIcon, CircleCheckIcon, CircleXIcon, SkullIcon, ClockIcon, CheckCircleIcon, CircleIcon, UsersIcon, MessageSquareIcon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, SquareIcon, ArrowDownIcon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, Maximize2Icon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, PlusIcon, CornerDownLeftIcon } from 'lucide-react';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
@@ -21,7 +20,6 @@ import { nanoid } from 'nanoid';
 import 'pdfjs-dist/web/pdf_viewer.css';
 import { formatDistanceToNow } from 'date-fns';
 
-// src/agent-chat.tsx
 var AgentChatAdapterContext = createContext(null);
 var AgentChatAdapterProvider = AgentChatAdapterContext.Provider;
 function useAgentChatAdapterContext() {
@@ -33,9 +31,6 @@ function useAgentChatAdapterContext() {
   }
   return value;
 }
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
@@ -87,7 +82,7 @@ function Button({
 var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsx(
   StickToBottom,
   {
-    className: cn("relative flex-1 overflow-y-auto", className),
+    className: cn("relative flex-1", className),
     initial: "smooth",
     resize: "smooth",
     role: "log",
@@ -570,6 +565,61 @@ function TimelineSeparator({
     }
   );
 }
+
+// src/components/chat/tools/shared.ts
+function statusColorClass(status) {
+  if (status === "running") return "bg-primary animate-pulse";
+  if (status === "error") return "bg-red-500";
+  if (status === "cancelled") return "bg-muted-foreground/40";
+  return "bg-emerald-500";
+}
+function effectiveStatus(tc) {
+  if (tc.cancelled) return "cancelled";
+  if (tc.status !== "complete" || !tc.result) return tc.status;
+  try {
+    const parsed = JSON.parse(tc.result);
+    if (parsed?.exit_code !== void 0 && parsed.exit_code !== 0) return "error";
+    if (parsed?.error) return "error";
+    if (parsed?.status === "blocked" || parsed?.status === "error") return "error";
+    if (parsed?.success === false) return "error";
+  } catch {
+  }
+  return "complete";
+}
+function formatArgs(args) {
+  try {
+    return JSON.stringify(JSON.parse(args), null, 2);
+  } catch {
+    return args;
+  }
+}
+function parseArgs(args) {
+  try {
+    return JSON.parse(args);
+  } catch {
+    return null;
+  }
+}
+function truncate(s, max) {
+  return s.length > max ? s.slice(0, max) + "\n... (truncated)" : s;
+}
+function toolErrorSummary(result, max = 180) {
+  if (!result) return "";
+  try {
+    const parsed = JSON.parse(result);
+    const error = typeof parsed?.error === "string" ? parsed.error : "";
+    if (error === "sandbox_unavailable") {
+      return "Sandbox is unavailable. Workspace commands cannot run right now.";
+    }
+    const reason = typeof parsed?.reason === "string" ? parsed.reason : "";
+    const message = typeof parsed?.message === "string" ? parsed.message : "";
+    const detail = reason || message;
+    const summary = error && detail && detail !== error ? `${error}: ${detail}` : error || detail;
+    return summary ? summary.replace(/\s+/g, " ").slice(0, max) : "";
+  } catch {
+    return "";
+  }
+}
 function CopyButton({ text }) {
   const [copied, setCopied] = useState(false);
   return /* @__PURE__ */ jsx(
@@ -605,7 +655,8 @@ function parseTerminalResult(result, args) {
     const hasOutput = typeof parsed?.output === "string";
     const hasStdout = typeof parsed?.stdout === "string";
     const hasExitCode = typeof parsed?.exit_code === "number";
-    if (!hasOutput && !hasStdout && !hasExitCode) {
+    const errorSummary = toolErrorSummary(result, 400);
+    if (!hasOutput && !hasStdout && !hasExitCode && !errorSummary) {
       return null;
     }
     let command = "";
@@ -615,20 +666,20 @@ function parseTerminalResult(result, args) {
     } catch {
     }
     const output = parsed.output ?? parsed.stdout ?? "";
-    const stderr = parsed.stderr ?? parsed.error ?? "";
+    const stderr = parsed.stderr ?? errorSummary;
     const combined = stderr ? `${output}
 ${stderr}`.trim() : output;
     return {
       output: combined,
-      exit_code: parsed.exit_code ?? 0,
-      error: parsed.error ?? null,
+      exit_code: parsed.exit_code ?? (errorSummary ? 1 : 0),
+      error: errorSummary || null,
       command
     };
   } catch {
     return null;
   }
 }
-function TerminalCollapsible({ command, output, isRunning }) {
+function TerminalCollapsible({ command, output, isRunning, hasError }) {
   const [isOpen, setIsOpen] = useState(false);
   return /* @__PURE__ */ jsxs(
     Collapsible,
@@ -638,7 +689,7 @@ function TerminalCollapsible({ command, output, isRunning }) {
       className: "not-prose w-full",
       children: [
         /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group/trigger flex w-fit items-center gap-2 text-sm transition-colors", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-left", children: isRunning ? /* @__PURE__ */ jsx(Shimmer, { as: "span", duration: 1, children: "Running command..." }) : /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Command result" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-left", children: isRunning ? /* @__PURE__ */ jsx(Shimmer, { as: "span", duration: 1, children: "Running command..." }) : hasError ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-destructive", children: "Command failed" }) : /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Command result" }) }),
           /* @__PURE__ */ jsx(
             ChevronDownIcon,
             {
@@ -695,7 +746,8 @@ function TerminalToolBlock({ tc }) {
       {
         command: result.command,
         output,
-        isRunning
+        isRunning,
+        hasError: result.exit_code !== 0 || Boolean(result.error)
       }
     );
   }
@@ -2340,7 +2392,7 @@ var Terminal = ({
     }
   ) });
 };
-function parseArgs(args) {
+function parseArgs2(args) {
   try {
     return JSON.parse(args);
   } catch {
@@ -2564,7 +2616,7 @@ function OutputPreview({ output }) {
 }
 function ProcessToolBlock({ tc }) {
   const isRunning = tc.status === "running";
-  const args = parseArgs(tc.args);
+  const args = parseArgs2(tc.args);
   const result = parseResult(tc.result);
   const action = args.action || "unknown";
   const actionLabel = {
@@ -2647,44 +2699,6 @@ function Textarea({ className, ...props }) {
     }
   );
 }
-
-// src/components/chat/tools/shared.ts
-function statusColorClass(status) {
-  if (status === "running") return "bg-primary animate-pulse";
-  if (status === "error") return "bg-red-500";
-  if (status === "cancelled") return "bg-muted-foreground/40";
-  return "bg-emerald-500";
-}
-function effectiveStatus(tc) {
-  if (tc.cancelled) return "cancelled";
-  if (tc.status !== "complete" || !tc.result) return tc.status;
-  try {
-    const parsed = JSON.parse(tc.result);
-    if (parsed?.exit_code !== void 0 && parsed.exit_code !== 0) return "error";
-    if (parsed?.error) return "error";
-    if (parsed?.status === "blocked" || parsed?.status === "error") return "error";
-    if (parsed?.success === false) return "error";
-  } catch {
-  }
-  return "complete";
-}
-function formatArgs(args) {
-  try {
-    return JSON.stringify(JSON.parse(args), null, 2);
-  } catch {
-    return args;
-  }
-}
-function parseArgs2(args) {
-  try {
-    return JSON.parse(args);
-  } catch {
-    return null;
-  }
-}
-function truncate(s, max) {
-  return s.length > max ? s.slice(0, max) + "\n... (truncated)" : s;
-}
 var MAX_REASON_LENGTH = 500;
 function ExpertToolBlock({ tc }) {
   const [expanded, setExpanded] = useState(false);
@@ -2720,7 +2734,7 @@ function ExpertToolBlock({ tc }) {
     }
     void submit("up");
   };
-  const args = parseArgs2(tc.args) ?? {};
+  const args = parseArgs(tc.args) ?? {};
   const expertName = args.expert ?? null;
   const question = args.question ?? args.prompt ?? "";
   const result = parseExpertResult(tc.result);
@@ -2832,7 +2846,7 @@ function ExpertToolBlock({ tc }) {
 }
 function parseExpertResult(result) {
   if (!result) return null;
-  const parsed = parseArgs2(result);
+  const parsed = parseArgs(result);
   if (parsed) {
     return {
       ...parsed,
@@ -2939,11 +2953,11 @@ function ReasonForm({
   ] });
 }
 function SkillsListBlock({ tc }) {
-  const args = parseArgs2(tc.args) ?? {};
+  const args = parseArgs(tc.args) ?? {};
   const filter = args.category ? `category: ${args.category}` : "all";
   let summary = "";
   if (tc.result) {
-    const parsed = parseArgs2(tc.result);
+    const parsed = parseArgs(tc.result);
     if (parsed?.count !== void 0) {
       summary = `${parsed.count} skill${parsed.count === 1 ? "" : "s"}`;
     }
@@ -2958,11 +2972,11 @@ function SkillsListBlock({ tc }) {
   ] });
 }
 function SkillViewBlock({ tc }) {
-  const args = parseArgs2(tc.args) ?? {};
+  const args = parseArgs(tc.args) ?? {};
   const target = args.file_path ? `${args.name ?? "?"}/${args.file_path}` : args.name ?? "?";
   let summary = "";
   if (tc.result) {
-    const parsed = parseArgs2(tc.result);
+    const parsed = parseArgs(tc.result);
     if (parsed?.staged_at) {
       summary = `staged at ${parsed.staged_at}`;
     } else if (parsed?.token_estimate) {
@@ -3009,7 +3023,7 @@ function buildAnswer(q, sel) {
 }
 function ClarifyToolBlock({ tc }) {
   const { adapter, sessionId } = useAgentChatAdapterContext();
-  const args = useMemo(() => parseArgs2(tc.args), [tc.args]);
+  const args = useMemo(() => parseArgs(tc.args), [tc.args]);
   const questions = args?.questions ?? [];
   const [active, setActive] = useState(0);
   const [selections, setSelections] = useState(
@@ -3291,7 +3305,7 @@ function ClarifyLocked({
   ] });
 }
 function ArtifactToolBlock({ tc }) {
-  const args = parseArgs2(tc.args) ?? {};
+  const args = parseArgs(tc.args) ?? {};
   const status = effectiveStatus(tc);
   const label = status === "running" ? "Creating artifact\u2026" : status === "error" ? "Tried to create" : "Created";
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm ", children: [
@@ -3305,7 +3319,7 @@ function firstLine(s) {
 }
 function DelegateToolBlock({ tc }) {
   const [expanded, setExpanded] = useState(false);
-  const args = parseArgs2(tc.args);
+  const args = parseArgs(tc.args);
   const goal = args?.goal ?? "";
   const context = args?.context ?? "";
   const agentType = args?.agent_type;
@@ -3415,8 +3429,8 @@ var TARGET_LABEL = {
 };
 function MemoryToolBlock({ tc }) {
   const [isOpen, setIsOpen] = useState(false);
-  const args = parseArgs2(tc.args) ?? {};
-  const result = tc.result ? parseArgs2(tc.result) : null;
+  const args = parseArgs(tc.args) ?? {};
+  const result = tc.result ? parseArgs(tc.result) : null;
   const action = args.action ?? "add";
   const target = args.target ?? "memory";
   const verb = ACTION_VERB[action] ?? action;
@@ -3494,8 +3508,8 @@ var ACTION_LABEL = {
   remove_file: "Remove skill file"
 };
 function SkillManageToolBlock({ tc }) {
-  const args = parseArgs2(tc.args) ?? {};
-  const result = tc.result ? parseArgs2(tc.result) : null;
+  const args = parseArgs(tc.args) ?? {};
+  const result = tc.result ? parseArgs(tc.result) : null;
   const action = args.action ?? "manage";
   const label = ACTION_LABEL[action] ?? "Manage skill";
   const target = args.file_path ? `${args.name ?? "?"}/${args.file_path}` : args.name ?? "?";
@@ -3516,8 +3530,8 @@ function firstLine2(value) {
   return (index === -1 ? value : value.slice(0, index)).trim();
 }
 function CoordinatorToolBlock({ tc }) {
-  const args = parseArgs2(tc.args) ?? {};
-  const result = tc.result ? parseArgs2(tc.result) : null;
+  const args = parseArgs(tc.args) ?? {};
+  const result = tc.result ? parseArgs(tc.result) : null;
   const failed = Boolean(result?.error);
   let label = "Worker";
   let target = "";
@@ -5468,7 +5482,7 @@ function exportArtifact(payload) {
       };
     case "chart":
       return {
-        text: JSON.stringify(payload.spec.vega_lite, null, 2),
+        text: JSON.stringify(payload.spec.chart_js, null, 2),
         mime: "application/json",
         extension: "json"
       };
@@ -5529,7 +5543,7 @@ async function copyText(text) {
   }
 }
 var ArtifactChart = lazy(
-  () => import('./artifact-chart-7J6GOR4M.js').then((m) => ({ default: m.ArtifactChart }))
+  () => import('./artifact-chart-X53FKRDZ.js').then((m) => ({ default: m.ArtifactChart }))
 );
 var KIND_LABEL = {
   markdown: "Markdown document",
@@ -5654,7 +5668,7 @@ function ArtifactBody({
         Suspense,
         {
           fallback: /* @__PURE__ */ jsx(Shimmer, { duration: 5, className: "text-sm text-muted-foreground", children: "Loading chart\u2026" }),
-          children: /* @__PURE__ */ jsx(ArtifactChart, { spec: payload.spec })
+          children: /* @__PURE__ */ jsx(ArtifactChart, { spec: payload.spec, fill })
         }
       );
     case "html":
@@ -5874,7 +5888,7 @@ function OrphanSystemMarker({
     );
   }
   if (message.systemKind === "error" && message.errorInfo) {
-    return /* @__PURE__ */ jsx("div", { className: "mx-auto my-2 w-full max-w-4xl px-4", children: /* @__PURE__ */ jsx(ErrorMessage, { errorInfo: message.errorInfo, onRetry }) });
+    return /* @__PURE__ */ jsx("div", { className: "mx-auto my-2 w-full max-w-4xl", children: /* @__PURE__ */ jsx(ErrorMessage, { errorInfo: message.errorInfo, onRetry }) });
   }
   return null;
 }
@@ -5928,6 +5942,7 @@ function TimelineEntryItem({
     ] });
   }
   if (entry.kind === "tool") {
+    const failureSummary = effectiveStatus(entry.tc) === "error" ? toolErrorSummary(entry.tc.result) : "";
     return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
       /* @__PURE__ */ jsxs(TimelineHeader, { children: [
         /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
@@ -5938,7 +5953,10 @@ function TimelineEntryItem({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(TimelineContent, { children: entry.tc.cancelled ? /* @__PURE__ */ jsx(CancelledToolRow, { tc: entry.tc }) : /* @__PURE__ */ jsx(ToolCallBlock, { tc: entry.tc, onFileSelect }) })
+      /* @__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, onFileSelect }),
+        failureSummary ? /* @__PURE__ */ jsx("div", { className: "max-w-full truncate text-xs text-destructive", title: failureSummary, children: failureSummary }) : null
+      ] }) })
     ] });
   }
   if (entry.kind === "text") {
@@ -6056,6 +6074,7 @@ function ChatThread({
   sessionId,
   messages,
   isRunning,
+  isLoadingHistory = false,
   onSend,
   onStop,
   onFileSelect,
@@ -6078,7 +6097,14 @@ function ChatThread({
   }, [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-3xl", children: messages.length === 0 && !disabled ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(ConversationContent, { className: "mx-auto w-full max-w-4xl", children: messages.length === 0 && isLoadingHistory ? /* @__PURE__ */ jsx(
+        ConversationEmptyState,
+        {
+          icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-8 opacity-40" }),
+          title: "Loading conversation",
+          description: "Fetching the session history."
+        }
+      ) : messages.length === 0 && !disabled ? /* @__PURE__ */ jsx(
         ConversationEmptyState,
         {
           icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-8 opacity-40" }),
@@ -6131,7 +6157,7 @@ function ChatThread({
       ] }) }),
       /* @__PURE__ */ jsx(ConversationScrollButton, {})
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl px-6 pb-5 pt-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-6 pb-5 pt-3", children: [
       retryIndicator && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(RetryBanner, { indicator: retryIndicator }) }),
       /* @__PURE__ */ jsx(
         ChatComposer,
@@ -6732,7 +6758,7 @@ function formatPdfPreviewError(error) {
   return error instanceof Error ? error.message : "Failed to render PDF preview.";
 }
 var SKELETON_WIDTHS2 = [75, 60, 90, 65, 80, 70, 85, 55];
-var DEFAULT_WIDTH = 500;
+var DEFAULT_WIDTH = 400;
 var MIN_WIDTH = 300;
 var MAX_WIDTH = 900;
 function collectExpandedPaths(entries, depth = 0) {
@@ -6814,6 +6840,8 @@ function WorkspacePanel({
   sessionId,
   selectedPath,
   onSelectedPathChange,
+  collapsed = false,
+  onCollapsedChange,
   disabled = false
 }) {
   const fileInputRef = useRef(null);
@@ -7008,6 +7036,25 @@ function WorkspacePanel({
       window.removeEventListener("mouseup", onMouseUp);
     };
   }, []);
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        role: "button",
+        tabIndex: 0,
+        className: "relative z-10 flex min-h-0 w-10 shrink-0 cursor-pointer items-center justify-center border-l border-muted-foreground/20 bg-card text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+        "aria-label": "Expand workspace",
+        onClick: () => onCollapsedChange?.(false),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onCollapsedChange?.(false);
+          }
+        },
+        children: /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4 text-amber-500" })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -7040,6 +7087,19 @@ function WorkspacePanel({
             /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: rootName }),
             /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-faint", children: "Workspace" })
           ] }),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                onClick: () => onCollapsedChange?.(true),
+                "aria-label": "Collapse workspace",
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Collapse" })
+          ] }),
           /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
               Button,
@@ -7239,10 +7299,11 @@ var EMPTY_TOKEN_USAGE = {
   contextWindow: 0,
   model: ""
 };
-function createInitialAgentChatState() {
+function createInitialAgentChatState(options = {}) {
   return {
     messages: [],
     isRunning: false,
+    isLoadingHistory: options.isLoadingHistory ?? false,
     tokenUsage: EMPTY_TOKEN_USAGE,
     retryIndicator: null,
     lastEventId: 0,
@@ -7254,6 +7315,7 @@ function createInitialAgentChatState() {
 function applyAgentChatEvent(state, event) {
   let nextState = {
     ...state,
+    isLoadingHistory: false,
     lastEventId: Math.max(state.lastEventId, event.eventId),
     sessionDone: state.sessionDone || event.type === "session.done"
   };
@@ -7787,11 +7849,12 @@ function useAgentChatRuntime({
   onSessionChange
 }) {
   const [state, setState] = useState(
-    () => createInitialAgentChatState()
+    () => createInitialAgentChatState({ isLoadingHistory: Boolean(sessionId) })
   );
   const stateRef = useRef(state);
   const streamRef = useRef(null);
   const reconnectTimerRef = useRef(null);
+  const previousSessionIdRef = useRef(sessionId);
   useEffect(() => {
     stateRef.current = state;
   }, [state]);
@@ -7807,6 +7870,8 @@ function useAgentChatRuntime({
     stream?.close();
   }, []);
   useEffect(() => {
+    const previousSessionId = previousSessionIdRef.current;
+    previousSessionIdRef.current = sessionId;
     clearReconnectTimer();
     closeStream();
     if (!sessionId) {
@@ -7814,11 +7879,11 @@ function useAgentChatRuntime({
       return;
     }
     let cancelled = false;
-    const connect = () => {
+    const connect = (after) => {
       if (cancelled) return;
       const stream = adapter.openEventStream({
         sessionId,
-        after: stateRef.current.lastEventId
+        after: after ?? stateRef.current.lastEventId
       });
       streamRef.current = stream;
       for (const eventType of AGENT_CHAT_LISTENED_EVENTS) {
@@ -7841,14 +7906,32 @@ function useAgentChatRuntime({
           streamRef.current = null;
         }
         if (!stateRef.current.sessionDone && !cancelled) {
-          reconnectTimerRef.current = setTimeout(connect, 3e3);
+          reconnectTimerRef.current = setTimeout(() => connect(), 3e3);
         }
       };
     };
-    setState(createInitialAgentChatState());
-    connect();
+    const currentState = stateRef.current;
+    const preservePendingFirstMessage = previousSessionId === null && currentState.isRunning && currentState.messages.some(
+      (message) => message.role === "user" && message.id.startsWith("local-")
+    );
+    const initialState = preservePendingFirstMessage ? {
+      ...createInitialAgentChatState({ isLoadingHistory: false }),
+      messages: currentState.messages,
+      isRunning: true
+    } : createInitialAgentChatState({
+      isLoadingHistory: true
+    });
+    stateRef.current = initialState;
+    setState(initialState);
+    connect(0);
     adapter.getSession({ sessionId }).then((session) => {
       if (cancelled) return;
+      if (session.messageCount === 0) {
+        setState((prev) => ({
+          ...prev,
+          isLoadingHistory: false
+        }));
+      }
       if (isTerminalStatus(session.status)) {
         setState((prev) => ({
           ...prev,
@@ -7931,13 +8014,18 @@ function useAgentChatRuntime({
   }, []);
   const send = useCallback(
     async (content) => {
+      markSending(content);
       if (!sessionId) {
-        const session = await adapter.createSession({ agentId });
-        await adapter.sendMessage({ sessionId: session.id, content });
-        onSessionChange?.(session.id);
+        try {
+          const session = await adapter.createSession({ agentId });
+          onSessionChange?.(session.id);
+          await adapter.sendMessage({ sessionId: session.id, content });
+        } catch (error) {
+          markSendError(error instanceof Error ? error.message : "send failed");
+          throw error;
+        }
         return;
       }
-      markSending(content);
       try {
         await adapter.sendMessage({ sessionId, content });
       } catch (error) {
@@ -7974,6 +8062,7 @@ function useAgentChatRuntime({
   return {
     messages: state.messages,
     isRunning: state.isRunning,
+    isLoadingHistory: state.isLoadingHistory,
     tokenUsage: state.tokenUsage,
     retryIndicator: state.retryIndicator,
     send,
@@ -8010,6 +8099,7 @@ function AgentChat({
   disabled
 }) {
   const [workspacePath, setWorkspacePath] = useState(null);
+  const [workspaceCollapsed, setWorkspaceCollapsed] = useState(false);
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -8041,6 +8131,7 @@ function AgentChat({
             sessionId,
             messages: runtime.messages,
             isRunning: runtime.isRunning,
+            isLoadingHistory: runtime.isLoadingHistory,
             onSend: (content) => void runtime.send(content),
             onStop: () => void runtime.stop(),
             onRetry: runtime.retry,
@@ -8057,6 +8148,8 @@ function AgentChat({
             sessionId,
             selectedPath: workspacePath,
             onSelectedPathChange: setWorkspacePath,
+            collapsed: workspaceCollapsed,
+            onCollapsedChange: setWorkspaceCollapsed,
             disabled
           }
         )
@@ -8127,6 +8220,20 @@ function mergeTreeNodes(groups) {
   }
   return Array.from(byId.values());
 }
+function pruneDeletedSessionNodes(nodes, deletedSessionId) {
+  const deletedIds = /* @__PURE__ */ new Set([deletedSessionId]);
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const node of nodes) {
+      if (node.parentId && deletedIds.has(node.parentId) && !deletedIds.has(node.id)) {
+        deletedIds.add(node.id);
+        changed = true;
+      }
+    }
+  }
+  return nodes.filter((node) => !deletedIds.has(node.id));
+}
 function formatSessionTime(value) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return "";
@@ -8243,11 +8350,12 @@ function SessionTreePanel({
   title = "Running",
   sessionListLimit = DEFAULT_SESSION_LIST_LIMIT,
   hideRoot = false,
+  hideHeader = false,
+  loadList = false,
   onSessionSelect,
   onSessionDelete
 }) {
   const [nodes, setNodes] = useState([]);
-  const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [hasEverLoaded, setHasEverLoaded] = useState(false);
   const [deletingSessionId, setDeletingSessionId] = useState(
@@ -8259,18 +8367,16 @@ function SessionTreePanel({
   const resetContext = useRef(null);
   const refetch = useCallback(
     async (opts) => {
-      const canLoadSessionList = Boolean(agentId && adapter.listSessions);
+      const canLoadSessionList = Boolean(loadList && adapter.listSessions);
       const canLoadSessionTree = Boolean(sessionId && adapter.getSessionTree);
       if (!canLoadSessionList && !canLoadSessionTree) {
         setNodes([]);
         setHasEverLoaded(true);
-        setLoading(false);
         return;
       }
       const currentRequestId = ++requestId.current;
-      if (!opts?.silent) setLoading(true);
       try {
-        const sessionListPromise = agentId && adapter.listSessions ? adapter.listSessions({
+        const sessionListPromise = loadList && adapter.listSessions ? adapter.listSessions({
           agentId,
           limit: sessionListLimit
         }) : Promise.resolve(null);
@@ -8296,13 +8402,9 @@ function SessionTreePanel({
         if (!opts?.silent) {
           setError(e instanceof Error ? e.message : "Failed to load tree");
         }
-      } finally {
-        if (mounted.current && currentRequestId === requestId.current && !opts?.silent) {
-          setLoading(false);
-        }
       }
     },
-    [adapter, agentId, sessionId, sessionListLimit]
+    [adapter, agentId, loadList, sessionId, sessionListLimit]
   );
   useEffect(() => {
     mounted.current = true;
@@ -8312,8 +8414,8 @@ function SessionTreePanel({
   }, []);
   useEffect(() => {
     const previous = resetContext.current;
-    const shouldReset = !previous || previous.adapter !== adapter || previous.agentId !== agentId || previous.sessionListLimit !== sessionListLimit;
-    resetContext.current = { adapter, agentId, sessionListLimit };
+    const shouldReset = !previous || previous.loadList !== loadList || previous.agentId !== agentId || previous.sessionListLimit !== sessionListLimit;
+    resetContext.current = { loadList, agentId, sessionListLimit };
     if (shouldReset) {
       setNodes([]);
       setHasEverLoaded(false);
@@ -8321,7 +8423,7 @@ function SessionTreePanel({
     }
     setError(null);
     void refetch();
-  }, [adapter, agentId, refetch, sessionListLimit]);
+  }, [adapter, agentId, loadList, refetch, sessionListLimit]);
   const runningCount = useMemo(
     () => nodes.filter((n) => n.status === "active").length,
     [nodes]
@@ -8358,6 +8460,11 @@ function SessionTreePanel({
       setDeletingSessionId(id);
       try {
         await adapter.deleteSession({ sessionId: id });
+        setNodes((current) => {
+          const next = pruneDeletedSessionNodes(current, id);
+          lastFingerprint.current = treeFingerprint(next);
+          return next;
+        });
         onSessionDelete?.(id);
         await refetch({ silent: true });
       } catch (e) {
@@ -8372,24 +8479,12 @@ function SessionTreePanel({
   if (nodes.length === 0) return null;
   const topLevel = hideRoot ? roots.flatMap((r) => r.children) : roots;
   if (topLevel.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "border-t border-line", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideHeader && /* @__PURE__ */ jsxs("div", { className: "border-t border-line flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide", children: [
       /* @__PURE__ */ jsx(UsersIcon, { className: "w-3.5 h-3.5" }),
       /* @__PURE__ */ jsx("span", { children: title }),
       runningCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "h-4 px-1.5 text-[10px] ml-auto", children: runningCount })
     ] }),
-    loading && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "px-3 py-2",
-        role: "status",
-        "aria-label": "Loading sessions",
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-28" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
-        ] })
-      }
-    ),
     error && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-destructive", children: error }),
     !error && /* @__PURE__ */ jsx("div", { className: "px-1 pb-2", children: topLevel.map((entry) => /* @__PURE__ */ jsx(
       TreeNodeRow,