@invergent/agent-chat-react 2.0.0 → 2.0.2

package/dist/index.cjs

@@ -5982,7 +5982,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();
@@ -6289,6 +6295,28 @@ function ChatComposerInner({
                       }
                     )
                   ] }),
+                  canShowBrowser && onToggleBrowser && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.GlobeIcon, { className: "size-4" })
+                    }
+                  ),
+                  canShowWorkspace && onToggleWorkspace && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.FolderIcon, { className: "size-4" })
+                    }
+                  ),
                   tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
                     Context,
                     {
@@ -7517,7 +7545,13 @@ function ChatThread({
   tokenUsage,
   retryIndicator,
   onRetry,
-  onComposerError
+  onComposerError,
+  showBrowser = false,
+  onToggleBrowser,
+  showWorkspace = false,
+  onToggleWorkspace,
+  canShowBrowser = false,
+  canShowWorkspace = false
 }) {
   const groups = react.useMemo(() => groupMessages(messages), [messages]);
   const artifactFallbacks = react.useMemo(() => {
@@ -7634,7 +7668,13 @@ function ChatThread({
           disabled,
           disabledReason,
           tokenUsage,
-          onComposerError
+          onComposerError,
+          showBrowser,
+          onToggleBrowser,
+          showWorkspace,
+          onToggleWorkspace,
+          canShowBrowser,
+          canShowWorkspace
         }
       )
     ] })
@@ -9580,6 +9620,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();
@@ -9824,6 +9874,8 @@ function AgentChat({
 }) {
   const [workspacePath, setWorkspacePath] = react.useState(null);
   const [mobileView, setMobileView] = react.useState("chat");
+  const [showBrowser, setShowBrowser] = react.useState(true);
+  const [showWorkspace, setShowWorkspace] = react.useState(true);
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -9834,7 +9886,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;
   react.useEffect(() => {
     onMessagesChange?.(runtime.messages);
   }, [onMessagesChange, runtime.messages]);
@@ -9842,11 +9899,18 @@ function AgentChat({
     (path) => {
       setWorkspacePath(path);
       setMobileView("workspace");
+      setShowWorkspace(true);
       onFileSelect?.(path);
     },
     [onFileSelect]
   );
-  const showMobileToggle = Boolean(sessionId);
+  const handleToggleBrowser = react.useCallback(() => {
+    setShowBrowser((prev) => !prev);
+  }, []);
+  const handleToggleWorkspace = react.useCallback(() => {
+    setShowWorkspace((prev) => !prev);
+  }, []);
+  const showMobileToggle = rightStackVisible;
   return /* @__PURE__ */ jsxRuntime.jsx(
     AgentChatAdapterProvider,
     {
@@ -9864,8 +9928,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: [
@@ -9906,8 +9973,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__ */ jsxRuntime.jsx(
                   ChatThread,
@@ -9924,12 +9996,18 @@ function AgentChat({
                     disabledReason,
                     tokenUsage: runtime.tokenUsage,
                     retryIndicator: runtime.retryIndicator,
-                    onComposerError
+                    onComposerError,
+                    showBrowser,
+                    onToggleBrowser: handleToggleBrowser,
+                    showWorkspace,
+                    onToggleWorkspace: handleToggleWorkspace,
+                    canShowBrowser: browserAvailable,
+                    canShowWorkspace: workspaceAvailable
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            rightStackVisible && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 "data-testid": "right-stack",
@@ -9938,17 +10016,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__ */ jsxRuntime.jsx(
+                  browserVisible && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                         BrowserPane,
                         {
@@ -9959,11 +10043,11 @@ function AgentChat({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                  workspaceVisible && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                         WorkspacePanel,
                         {
@@ -9973,7 +10057,7 @@ function AgentChat({
                           onSelectedPathChange: setWorkspacePath,
                           refreshSignal: runtime.workspaceRefreshKey,
                           disabled: effectiveDisabled,
-                          fillParent: Boolean(hasBrowserPanel)
+                          fillParent: bothPanesVisible
                         }
                       )
                     }
@@ -10780,6 +10864,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: [],
@@ -10866,7 +10960,11 @@ function MissionDashboard({
     [state.tasks]
   );
   const runningWorkerCount = react.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) {
@@ -10929,7 +11027,7 @@ function MissionDashboard({
     }
   };
   const statusVariant = mission.status === "satisfied" ? "default" : mission.status === "failed" || mission.status === "cancelled" ? "destructive" : "secondary";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6 max-w-6xl mx-auto", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-stretch gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 min-w-0 flex-1", children: [
@@ -11077,7 +11175,16 @@ function MissionDashboard({
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "text-foreground/70", children: w.taskStatus }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Badge,
+                    {
+                      variant: "outline",
+                      className: MISSION_WORKER_KIND_BADGE_CLASS[w.kind],
+                      title: MISSION_WORKER_KIND_TOOLTIP[w.kind],
+                      children: w.kind
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "text-foreground/70", children: w.kind === "task" ? w.taskStatus ?? "\u2014" : w.sessionStatus }),
                   w.agentDefName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground/70", children: w.agentDefName }) : null
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm wrap-break-word", children: deriveMissionWorkerActivityLabel(w) }),