@invergent/agent-chat-react 2.0.0 → 2.0.2

package/dist/index.d.cts

@@ -209,11 +209,23 @@ interface AgentChatMissionTask {
     createdAt: string | null;
     completedAt: string | null;
 }
+type AgentChatMissionWorkerKind = "task" | "worker" | "delegation";
 interface AgentChatMissionWorker {
-    taskId: string;
+    /**
+     * Which delegation primitive produced this child:
+     *
+     * - "task"       — `spawn_task` (durable Task row, retried by dispatcher)
+     * - "worker"     — `spawn_worker` (async one-shot, durable session)
+     * - "delegation" — `delegate_task` (sync fork-join, ephemeral session)
+     *
+     * `taskId` / `taskStatus` are non-null only for `kind === "task"` —
+     * the other two primitives don't create Task rows.
+     */
+    kind: AgentChatMissionWorkerKind;
+    taskId: string | null;
     workerSessionId: string;
     agentDefName: string | null;
-    taskStatus: string;
+    taskStatus: string | null;
     sessionStatus: string;
     latestEventId: number | null;
     latestEventKind: string | null;

package/dist/index.d.ts

@@ -209,11 +209,23 @@ interface AgentChatMissionTask {
     createdAt: string | null;
     completedAt: string | null;
 }
+type AgentChatMissionWorkerKind = "task" | "worker" | "delegation";
 interface AgentChatMissionWorker {
-    taskId: string;
+    /**
+     * Which delegation primitive produced this child:
+     *
+     * - "task"       — `spawn_task` (durable Task row, retried by dispatcher)
+     * - "worker"     — `spawn_worker` (async one-shot, durable session)
+     * - "delegation" — `delegate_task` (sync fork-join, ephemeral session)
+     *
+     * `taskId` / `taskStatus` are non-null only for `kind === "task"` —
+     * the other two primitives don't create Task rows.
+     */
+    kind: AgentChatMissionWorkerKind;
+    taskId: string | null;
     workerSessionId: string;
     agentDefName: string | null;
-    taskStatus: string;
+    taskStatus: string | null;
     sessionStatus: string;
     latestEventId: number | null;
     latestEventKind: string | null;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn } from './chunk-QSC4UIVT.js';
 import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, lazy, useContext, 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, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, GlobeIcon, 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, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, ListTodoIcon, ArrowUpIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Separator as Separator$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1, Progress as Progress$1, Tabs as Tabs$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -5698,7 +5698,13 @@ function ChatComposerInner({
   disabled = false,
   disabledReason,
   tokenUsage,
-  onComposerError
+  onComposerError,
+  showBrowser = false,
+  onToggleBrowser,
+  showWorkspace = false,
+  onToggleWorkspace,
+  canShowBrowser = false,
+  canShowWorkspace = false
 }) {
   const { adapter } = useAgentChatAdapterContext();
   const { textInput, attachments } = usePromptInputController();
@@ -6005,6 +6011,28 @@ function ChatComposerInner({
                       }
                     )
                   ] }),
+                  canShowBrowser && onToggleBrowser && /* @__PURE__ */ jsx(
+                    PromptInputButton,
+                    {
+                      "aria-label": showBrowser ? "Hide browser pane" : "Show browser pane",
+                      "aria-pressed": showBrowser,
+                      onClick: onToggleBrowser,
+                      tooltip: showBrowser ? "Hide browser pane" : "Show browser pane",
+                      className: showBrowser ? "bg-accent text-foreground" : void 0,
+                      children: /* @__PURE__ */ jsx(GlobeIcon, { className: "size-4" })
+                    }
+                  ),
+                  canShowWorkspace && onToggleWorkspace && /* @__PURE__ */ jsx(
+                    PromptInputButton,
+                    {
+                      "aria-label": showWorkspace ? "Hide workspace pane" : "Show workspace pane",
+                      "aria-pressed": showWorkspace,
+                      onClick: onToggleWorkspace,
+                      tooltip: showWorkspace ? "Hide workspace pane" : "Show workspace pane",
+                      className: showWorkspace ? "bg-accent text-foreground" : void 0,
+                      children: /* @__PURE__ */ jsx(FolderIcon, { className: "size-4" })
+                    }
+                  ),
                   tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxs(
                     Context,
                     {
@@ -7223,7 +7251,13 @@ function ChatThread({
   tokenUsage,
   retryIndicator,
   onRetry,
-  onComposerError
+  onComposerError,
+  showBrowser = false,
+  onToggleBrowser,
+  showWorkspace = false,
+  onToggleWorkspace,
+  canShowBrowser = false,
+  canShowWorkspace = false
 }) {
   const groups = useMemo(() => groupMessages(messages), [messages]);
   const artifactFallbacks = useMemo(() => {
@@ -7340,7 +7374,13 @@ function ChatThread({
           disabled,
           disabledReason,
           tokenUsage,
-          onComposerError
+          onComposerError,
+          showBrowser,
+          onToggleBrowser,
+          showWorkspace,
+          onToggleWorkspace,
+          canShowBrowser,
+          canShowWorkspace
         }
       )
     ] })
@@ -9274,6 +9314,16 @@ function useAgentChatRuntime({
         }));
       }
     }).catch(() => void 0);
+    void adapter.getBrowserState(sessionId).then((browserState) => {
+      if (sessionIdRef.current !== sessionId) return;
+      setState((prev) => ({
+        ...prev,
+        browser: browserState ? {
+          status: browserState.status,
+          controlOwner: browserState.controlOwner ?? null
+        } : null
+      }));
+    }).catch(() => void 0);
     return () => {
       clearReconnectTimer();
       closeStream();
@@ -9518,6 +9568,8 @@ function AgentChat({
 }) {
   const [workspacePath, setWorkspacePath] = useState(null);
   const [mobileView, setMobileView] = useState("chat");
+  const [showBrowser, setShowBrowser] = useState(true);
+  const [showWorkspace, setShowWorkspace] = useState(true);
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -9528,7 +9580,12 @@ function AgentChat({
   const effectiveDisabled = disabled || isReadOnlySession;
   const disabledReason = isReadOnlySession ? "Scheduled run is read-only" : void 0;
   const browserState = runtime.state.browser;
-  const hasBrowserPanel = browserState !== null && sessionId;
+  const browserAvailable = browserState !== null && browserState.status !== "closed" && !!sessionId;
+  const browserVisible = browserAvailable && showBrowser;
+  const workspaceAvailable = !!sessionId;
+  const workspaceVisible = workspaceAvailable && showWorkspace;
+  const rightStackVisible = browserVisible || workspaceVisible;
+  const bothPanesVisible = browserVisible && workspaceVisible;
   useEffect(() => {
     onMessagesChange?.(runtime.messages);
   }, [onMessagesChange, runtime.messages]);
@@ -9536,11 +9593,18 @@ function AgentChat({
     (path) => {
       setWorkspacePath(path);
       setMobileView("workspace");
+      setShowWorkspace(true);
       onFileSelect?.(path);
     },
     [onFileSelect]
   );
-  const showMobileToggle = Boolean(sessionId);
+  const handleToggleBrowser = useCallback(() => {
+    setShowBrowser((prev) => !prev);
+  }, []);
+  const handleToggleWorkspace = useCallback(() => {
+    setShowWorkspace((prev) => !prev);
+  }, []);
+  const showMobileToggle = rightStackVisible;
   return /* @__PURE__ */ jsx(
     AgentChatAdapterProvider,
     {
@@ -9558,8 +9622,11 @@ function AgentChat({
             // Phone: flex column, tab toggle on top, then either chat or
             // right stack visible based on `data-mobile-view`.
             "flex min-h-0 flex-1 flex-col overflow-hidden bg-background text-sm text-foreground",
-            // md+: restore desktop two-pane layout.
-            hasBrowserPanel ? "md:relative md:flex-row" : "md:flex-row"
+            // md+: restore desktop two-pane layout when the right stack
+            // is visible. With both panes, absolute positioning lets the
+            // browser/workspace split occupy a fixed width. Without the
+            // right stack, the chat takes the full width.
+            browserVisible ? "md:relative md:flex-row" : "md:flex-row"
           ),
           style: { direction: "ltr", ...RIGHT_STACK_STYLE },
           children: [
@@ -9600,8 +9667,13 @@ function AgentChat({
                   // Phone: full width column, hidden when workspace tab active.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
                   showMobileToggle && "data-[mobile-view=workspace]:hidden md:flex!",
-                  // md+: restore desktop positioning.
-                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
+                  // md+: positioning depends on whether the browser/workspace
+                  // right stack is laid out. When the browser pane is shown
+                  // we pin a fixed-width column on the right and absolutely
+                  // position the chat panel beside it. Otherwise the chat
+                  // panel just flexes alongside the workspace (or fills the
+                  // space when nothing else is visible).
+                  browserVisible ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
                 ),
                 children: /* @__PURE__ */ jsx(
                   ChatThread,
@@ -9618,12 +9690,18 @@ function AgentChat({
                     disabledReason,
                     tokenUsage: runtime.tokenUsage,
                     retryIndicator: runtime.retryIndicator,
-                    onComposerError
+                    onComposerError,
+                    showBrowser,
+                    onToggleBrowser: handleToggleBrowser,
+                    showWorkspace,
+                    onToggleWorkspace: handleToggleWorkspace,
+                    canShowBrowser: browserAvailable,
+                    canShowWorkspace: workspaceAvailable
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsxs(
+            rightStackVisible && /* @__PURE__ */ jsxs(
               "div",
               {
                 "data-testid": "right-stack",
@@ -9632,17 +9710,23 @@ function AgentChat({
                   // Phone: full width column, hidden when chat tab active.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
                   showMobileToggle && "data-[mobile-view=chat]:hidden md:flex!",
-                  // md+: restore desktop positioning. With browser panel the
-                  // right stack is absolutely positioned at the configured
-                  // width; without it the stack flows in the row.
-                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-(--right-stack-w,440px)"
+                  // md+: positioning differs depending on what is inside.
+                  // - browser visible (with or without workspace): absolute
+                  //   right column at the configured width.
+                  // - workspace only: relative shrink-0 column letting
+                  //   WorkspacePanel manage its own width via the resize
+                  //   handle.
+                  browserVisible ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-auto"
                 ),
                 children: [
-                  hasBrowserPanel && /* @__PURE__ */ jsx(
+                  browserVisible && /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-testid": "browser-panel",
-                      className: "h-1/2 min-h-0 w-full overflow-hidden border-b border-line",
+                      className: cn(
+                        "min-h-0 w-full overflow-hidden",
+                        bothPanesVisible ? "h-1/2 border-b border-line" : "h-full"
+                      ),
                       children: /* @__PURE__ */ jsx(
                         BrowserPane,
                         {
@@ -9653,11 +9737,11 @@ function AgentChat({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  workspaceVisible && /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-testid": "workspace-panel-frame",
-                      className: hasBrowserPanel ? "h-1/2 min-h-0 w-full overflow-hidden" : "min-h-0 h-full",
+                      className: bothPanesVisible ? "h-1/2 min-h-0 w-full overflow-hidden" : "min-h-0 h-full",
                       children: /* @__PURE__ */ jsx(
                         WorkspacePanel,
                         {
@@ -9667,7 +9751,7 @@ function AgentChat({
                           onSelectedPathChange: setWorkspacePath,
                           refreshSignal: runtime.workspaceRefreshKey,
                           disabled: effectiveDisabled,
-                          fillParent: Boolean(hasBrowserPanel)
+                          fillParent: bothPanesVisible
                         }
                       )
                     }
@@ -10470,6 +10554,16 @@ function truncate2(s, max) {
   return `${s.slice(0, max - 1)}\u2026`;
 }
 var DEFAULT_POLL_INTERVAL_MS = 5e3;
+var MISSION_WORKER_KIND_BADGE_CLASS = {
+  task: "border-primary/40 bg-primary/10 text-primary uppercase tracking-wide text-[10px]",
+  worker: "border-foreground/30 bg-foreground/5 text-foreground/80 uppercase tracking-wide text-[10px]",
+  delegation: "border-foreground/20 bg-foreground/[0.03] text-foreground/60 uppercase tracking-wide text-[10px]"
+};
+var MISSION_WORKER_KIND_TOOLTIP = {
+  task: "Durable Task row created by spawn_task. Retried by the dispatcher; survives across coordinator wakes.",
+  worker: "Async one-shot session spawned by spawn_worker. Durable session, no retry/DAG.",
+  delegation: "Sync fork-join child spawned by delegate_task. Coordinator's wake blocked until it finished."
+};
 var INITIAL_STATE = {
   mission: null,
   tasks: [],
@@ -10556,7 +10650,11 @@ function MissionDashboard({
     [state.tasks]
   );
   const runningWorkerCount = useMemo(
-    () => state.workers.filter((w) => w.taskStatus === "running").length,
+    // "running" means the child is still consuming compute right now.
+    // For task-backed children that's ``taskStatus === "running"``; for
+    // spawn_worker / delegate_task direct children the Task row doesn't
+    // exist, so fall back to the session-level signal.
+    () => state.workers.filter((w) => w.kind === "task" ? w.taskStatus === "running" : w.sessionStatus === "active").length,
     [state.workers]
   );
   if (state.loading && !state.mission) {
@@ -10619,7 +10717,7 @@ function MissionDashboard({
     }
   };
   const statusVariant = mission.status === "satisfied" ? "default" : mission.status === "failed" || mission.status === "cancelled" ? "destructive" : "secondary";
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6 max-w-6xl mx-auto", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6", children: [
     /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1 min-w-0 flex-1", children: [
@@ -10767,7 +10865,16 @@ function MissionDashboard({
             children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(Badge, { className: "text-foreground/70", children: w.taskStatus }),
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: "outline",
+                      className: MISSION_WORKER_KIND_BADGE_CLASS[w.kind],
+                      title: MISSION_WORKER_KIND_TOOLTIP[w.kind],
+                      children: w.kind
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Badge, { className: "text-foreground/70", children: w.kind === "task" ? w.taskStatus ?? "\u2014" : w.sessionStatus }),
                   w.agentDefName ? /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground/70", children: w.agentDefName }) : null
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "text-sm wrap-break-word", children: deriveMissionWorkerActivityLabel(w) }),