@invergent/agent-chat-react 1.5.10 → 1.6.0

package/dist/index.cjs

@@ -6,9 +6,9 @@ var react = require('react');
 var auto = require('chart.js/auto');
 var nextThemes = require('next-themes');
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 var classVarianceAuthority = require('class-variance-authority');
 var radixUi = require('radix-ui');
-var lucideReact = require('lucide-react');
 var useStickToBottom = require('use-stick-to-bottom');
 var cjk = require('@streamdown/cjk');
 var code = require('@streamdown/code');
@@ -263,6 +263,117 @@ function Button({
     }
   );
 }
+function BrowserControlBar({
+  sessionId,
+  hasControl,
+  adapter
+}) {
+  const [pending, setPending] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  async function toggleControl() {
+    if (!sessionId || pending) return;
+    setPending(true);
+    setError(null);
+    try {
+      if (hasControl) {
+        await adapter.releaseBrowserControl(sessionId);
+      } else {
+        await adapter.acquireBrowserControl(sessionId);
+      }
+    } catch (nextError) {
+      setError(nextError.message);
+    } finally {
+      setPending(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-11 items-center gap-2 border-t border-line bg-card px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        type: "button",
+        size: "xs",
+        variant: hasControl ? "secondary" : "default",
+        disabled: !sessionId || pending,
+        onClick: () => void toggleControl(),
+        children: [
+          hasControl ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcwIcon, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer2Icon, { className: "size-3", "aria-hidden": "true" }),
+          hasControl ? "Return control" : "Take control"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 rounded-full bg-red-500", "aria-hidden": "true" }),
+      "Live"
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-40 truncate text-[11px] text-destructive", children: error })
+  ] });
+}
+function BrowserLiveView({ src }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      "data-testid": "browser-iframe",
+      title: "Browser live view",
+      src,
+      className: "h-full w-full border-0 bg-black",
+      allow: "clipboard-read; clipboard-write"
+    }
+  );
+}
+
+// src/components/browser/browser-status-dot.tsx
+init_utils();
+function BrowserStatusDot({
+  status
+}) {
+  return /* @__PURE__ */ jsxRuntime.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 BrowserPane({ sessionId, state, adapter }) {
+  const liveViewUrl = react.useMemo(
+    () => adapter.browserLiveViewUrl(sessionId),
+    [adapter, sessionId]
+  );
+  const hasLiveView = state.status !== "provisioning" && state.status !== "closed";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "browser-pane",
+      className: "flex h-full min-h-0 flex-col bg-background",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex min-h-10 items-center gap-2 border-b border-line bg-card px-3 text-xs text-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZapIcon, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Browser" }),
+          /* @__PURE__ */ jsxRuntime.jsx(BrowserStatusDot, { status: state.status }),
+          state.controlOwner && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 truncate text-amber-500", children: [
+            state.controlOwner,
+            " has control"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 bg-black", children: state.status === "provisioning" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Starting browser..." }) : state.status === "closed" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser closed." }) : /* @__PURE__ */ jsxRuntime.jsx(BrowserLiveView, { src: liveViewUrl }) }),
+        hasLiveView && /* @__PURE__ */ jsxRuntime.jsx(
+          BrowserControlBar,
+          {
+            sessionId,
+            hasControl: state.status === "user-control",
+            adapter
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/components/ai-elements/conversation.tsx
 init_utils();
@@ -767,6 +878,80 @@ function TimelineSeparator({
     }
   );
 }
+function BrowserActivityGroup({ calls }) {
+  const [open, setOpen] = react.useState(false);
+  const latest = calls[calls.length - 1];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-none border border-line bg-card text-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((current) => !current),
+        className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-muted/40",
+        children: [
+          open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-3 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZapIcon, { className: "size-3 shrink-0 text-amber-500", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: "browser" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 truncate text-muted-foreground", children: [
+            "(",
+            calls.length,
+            " ",
+            calls.length === 1 ? "action" : "actions",
+            " - latest:",
+            " ",
+            latest ? summarise(latest) : "none",
+            ")"
+          ] })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "border-t border-line py-1", children: calls.map((call) => {
+      const error = stringValue(parseJson(call.result).error);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: "flex items-center gap-2 px-6 py-1 font-mono text-[11px]",
+          children: [
+            error && /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.AlertCircleIcon,
+              {
+                "data-testid": `activity-error-${call.id}`,
+                className: "size-3 shrink-0 text-destructive",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: summarise(call) }),
+            error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto max-w-40 truncate text-destructive", children: error })
+          ]
+        },
+        call.id
+      );
+    }) })
+  ] });
+}
+function summarise(call) {
+  const verb = call.toolName.replace(/^browser_/, "");
+  const args = parseJson(call.args);
+  const ref = stringValue(args.ref);
+  const url = stringValue(args.url);
+  const text = stringValue(args.text);
+  if (url) return `${verb} ${url}`;
+  if (ref) return `${verb} ${ref}`;
+  if (text) return `${verb} "${text.slice(0, 24)}"`;
+  return verb;
+}
+function parseJson(raw) {
+  if (!raw) return {};
+  try {
+    const parsed = JSON.parse(raw);
+    return typeof parsed === "object" && parsed !== null && !Array.isArray(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function stringValue(value) {
+  return typeof value === "string" ? value : "";
+}
 init_utils();
 
 // src/components/chat/tools/shared.ts
@@ -6178,6 +6363,32 @@ function messageToEntries(msg, isLast, artifactFallbacks) {
   }
   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_");
+}
 function groupMessages(messages) {
   const groups = [];
   let pendingSystem = [];
@@ -6334,6 +6545,15 @@ function TimelineEntryItem({
       ] }) })
     ] });
   }
+  if (entry.kind === "browser_activity") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(TimelineItem, { step, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TimelineHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(TimelineIndicator, { className: "size-2 border-none bg-amber-500" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TimelineContent, { children: /* @__PURE__ */ jsxRuntime.jsx(BrowserActivityGroup, { calls: entry.calls }) })
+    ] });
+  }
   if (entry.kind === "text") {
     return /* @__PURE__ */ jsxRuntime.jsxs(TimelineItem, { step, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TimelineHeader, { children: [
@@ -6395,11 +6615,12 @@ function AssistantGroup({
   onFileSelect,
   onRetry
 }) {
-  const entries = [];
+  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);
   const isTailGroup = lastGlobalIndex === totalMessages - 1;
   const lastEntry = entries[entries.length - 1];
   const hasRunningTool = entries.some(
@@ -7476,6 +7697,7 @@ function WorkspacePanel({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "aside",
       {
+        "data-testid": "workspace-panel",
         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",
@@ -7494,6 +7716,7 @@ function WorkspacePanel({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
+      "data-testid": "workspace-panel",
       className: "relative z-10 flex min-h-0 flex-col overflow-hidden border-l border-muted-foreground/20 bg-card",
       style: { width, minWidth: MIN_WIDTH, maxWidth: MAX_WIDTH },
       children: [
@@ -7735,6 +7958,10 @@ var AGENT_CHAT_LISTENED_EVENTS = [
   "expert.override",
   "artifact.created",
   "artifact.updated",
+  "browser.provisioned",
+  "browser.destroyed",
+  "browser.control_granted",
+  "browser.control_returned",
   "clarify.response"
 ];
 
@@ -7759,7 +7986,8 @@ function createInitialAgentChatState(options = {}) {
     sessionDone: false,
     hadDeltas: false,
     terminal: false,
-    workspaceRefreshKey: 0
+    workspaceRefreshKey: 0,
+    browser: null
   };
 }
 function applyAgentChatEvent(state, event) {
@@ -7783,7 +8011,7 @@ function applyAgentChatEvent(state, event) {
         {
           id: `evt-${event.eventId}`,
           role: "system",
-          content: stringValue(event.data.skill),
+          content: stringValue2(event.data.skill),
           createdAt: /* @__PURE__ */ new Date(),
           status: "complete",
           systemKind: "skill_invoked",
@@ -7800,7 +8028,7 @@ function applyAgentChatEvent(state, event) {
         {
           id: `evt-${event.eventId}`,
           role: "system",
-          content: stringValue(event.data.name),
+          content: stringValue2(event.data.name),
           createdAt: /* @__PURE__ */ new Date(),
           status: "complete",
           systemKind: "artifact",
@@ -7813,6 +8041,23 @@ function applyAgentChatEvent(state, event) {
           }
         }
       ]);
+    case "browser.provisioned":
+      return applyBrowserEvent(nextState, event, {
+        status: "live",
+        controlOwner: null
+      });
+    case "browser.control_granted":
+      return applyBrowserEvent(nextState, event, {
+        status: "user-control",
+        controlOwner: stringValue2(event.data.owner_user_id) || null
+      });
+    case "browser.control_returned":
+      return applyBrowserEvent(nextState, event, {
+        status: "live",
+        controlOwner: null
+      });
+    case "browser.destroyed":
+      return applyBrowserEvent(nextState, event, null);
     case "llm.delta":
       return applyLlmDelta(nextState, event);
     case "llm.response":
@@ -7822,7 +8067,7 @@ function applyAgentChatEvent(state, event) {
     case "tool.call":
       return applyToolCall(nextState, event);
     case "tool.result": {
-      const toolCallId = stringValue(event.data.tool_call_id);
+      const toolCallId = stringValue2(event.data.tool_call_id);
       const toolName = findToolNameById(nextState.messages, toolCallId);
       const messages = applyToolResult(nextState.messages, event.data);
       const mutatesWorkspace = toolName !== null && WORKSPACE_MUTATING_TOOLS.has(toolName);
@@ -7892,8 +8137,8 @@ function applyRetryIndicator(state, event) {
     case "session.done":
       return { ...state, retryIndicator: null };
     case "harness.crash": {
-      const title = stringValue(event.data.error_title) || "A transient error occurred, retrying...";
-      const detail = stringValue(event.data.error_detail) || stringValue(event.data.error);
+      const title = stringValue2(event.data.error_title) || "A transient error occurred, retrying...";
+      const detail = stringValue2(event.data.error_detail) || stringValue2(event.data.error);
       return {
         ...state,
         retryIndicator: {
@@ -7908,7 +8153,7 @@ function applyRetryIndicator(state, event) {
   }
 }
 function applyUserMessage(messages, eventId, data) {
-  const content = stringValue(data.content);
+  const content = stringValue2(data.content);
   const next = [...messages];
   const localIdx = next.findIndex(
     (m) => m.role === "user" && m.id.startsWith("local-") && m.content === content
@@ -7926,9 +8171,47 @@ function applyUserMessage(messages, eventId, data) {
   });
   return next;
 }
+function applyBrowserEvent(state, event, browser) {
+  return withMessages(
+    { ...state, browser },
+    [...state.messages, browserMarker(event)]
+  );
+}
+function browserMarker(event) {
+  const labels = {
+    "browser.provisioned": {
+      content: "Browser ready.",
+      warning: false
+    },
+    "browser.control_granted": {
+      content: "A user took control of the browser.",
+      warning: true
+    },
+    "browser.control_returned": {
+      content: "Browser control returned to the agent.",
+      warning: false
+    },
+    "browser.destroyed": {
+      content: "Browser closed.",
+      warning: false
+    }
+  };
+  const label = labels[event.type] ?? {
+    content: "Browser updated.",
+    warning: false
+  };
+  return {
+    id: `browser-marker-${event.eventId}`,
+    role: "system",
+    content: label.content,
+    createdAt: /* @__PURE__ */ new Date(),
+    status: "complete",
+    systemKind: label.warning ? "browser_marker_warning" : "browser_marker"
+  };
+}
 function applyLlmDelta(state, event) {
-  const deltaContent = stringValue(event.data.content);
-  const deltaReasoning = stringValue(event.data.reasoning);
+  const deltaContent = stringValue2(event.data.content);
+  const deltaReasoning = stringValue2(event.data.reasoning);
   const messages = [...state.messages];
   const lastIdx = findLastAssistantIndex(messages);
   const lastMsg = lastIdx >= 0 ? messages[lastIdx] : null;
@@ -7965,7 +8248,7 @@ function applyLlmDelta(state, event) {
 function applyLlmResponse(state, event) {
   const messages = [...state.messages];
   const message = objectValue(event.data.message);
-  const responseContent = stringValue(message?.content) || stringValue(event.data.content);
+  const responseContent = stringValue2(message?.content) || stringValue2(event.data.content);
   const toolCalls = Array.isArray(message?.tool_calls) ? message?.tool_calls : [];
   const hasToolCalls = toolCalls.length > 0;
   const idx = findLastAssistantIndex(messages);
@@ -8023,12 +8306,12 @@ function applyLlmResponse(state, event) {
       cachedInputTokens: numberValue(event.data.cache_read_tokens),
       totalTokens: inputTokens + outputTokens,
       contextWindow: numberValue(event.data.context_window),
-      model: stringValue(event.data.model)
+      model: stringValue2(event.data.model)
     }
   };
 }
 function applyLlmThinking(state, event) {
-  const reasoningText = stringValue(event.data.reasoning) || stringValue(event.data.content);
+  const reasoningText = stringValue2(event.data.reasoning) || stringValue2(event.data.content);
   const messages = [...state.messages];
   const idx = findLastAssistantIndex(messages);
   const prev = idx >= 0 ? messages[idx] : null;
@@ -8076,11 +8359,11 @@ function applyToolCall(state, event) {
     messages[assistantIdx] = assistant;
   }
   const existingCalls = assistant.toolCalls ?? [];
-  const toolCallId = stringValue(event.data.tool_call_id) || `tc-${event.eventId}`;
+  const toolCallId = stringValue2(event.data.tool_call_id) || `tc-${event.eventId}`;
   if (!existingCalls.some((tc) => tc.id === toolCallId)) {
     const entry = {
       id: toolCallId,
-      toolName: stringValue(event.data.name) || stringValue(event.data.tool_name) || "unknown",
+      toolName: stringValue2(event.data.name) || stringValue2(event.data.tool_name) || "unknown",
       args: typeof event.data.arguments === "string" ? event.data.arguments : JSON.stringify(event.data.arguments ?? {}),
       status: "running"
     };
@@ -8096,7 +8379,7 @@ function applyToolCall(state, event) {
   };
 }
 function applyToolResult(messages, data) {
-  const targetId = stringValue(data.tool_call_id);
+  const targetId = stringValue2(data.tool_call_id);
   let matchIdx = -1;
   for (let i = messages.length - 1; i >= 0; i--) {
     if (messages[i]?.role === "assistant" && messages[i]?.toolCalls?.some((tc) => tc.id === targetId)) {
@@ -8165,8 +8448,8 @@ function buildErrorInfo(event) {
   }
   return {
     category: event.data.error_category,
-    title: stringValue(event.data.error_title) || "The session failed due to an internal error.",
-    detail: stringValue(event.data.error_detail) || stringValue(event.data.error),
+    title: stringValue2(event.data.error_title) || "The session failed due to an internal error.",
+    detail: stringValue2(event.data.error_detail) || stringValue2(event.data.error),
     retryable: Boolean(event.data.retryable)
   };
 }
@@ -8210,7 +8493,7 @@ function applyExpertFeedback(messages, type, data) {
   return messages;
 }
 function applyClarifyResponse(messages, data) {
-  const targetToolId = stringValue(data.tool_call_id);
+  const targetToolId = stringValue2(data.tool_call_id);
   const responses = Array.isArray(data.responses) ? data.responses : void 0;
   if (!targetToolId || !responses) return messages;
   const next = [...messages];
@@ -8225,8 +8508,8 @@ function applyClarifyResponse(messages, data) {
           clarifyAnswers: responses.map((response) => {
             const row = objectValue(response) ?? {};
             return {
-              question: stringValue(row.question),
-              answer: stringValue(row.answer),
+              question: stringValue2(row.question),
+              answer: stringValue2(row.answer),
               is_other: Boolean(row.is_other)
             };
           })
@@ -8246,7 +8529,7 @@ function applyPolicyDenied(state, data) {
       ...policyMsg,
       content: `${policyMsg.content}
 
-**Policy denied**: ${stringValue(data.reason) || "Action blocked by governance policy."}`,
+**Policy denied**: ${stringValue2(data.reason) || "Action blocked by governance policy."}`,
       status: "error"
     };
   }
@@ -8298,7 +8581,7 @@ function objectValue(value) {
   }
   return void 0;
 }
-function stringValue(value) {
+function stringValue2(value) {
   return typeof value === "string" ? value : "";
 }
 function numberValue(value) {
@@ -8532,6 +8815,7 @@ function useAgentChatRuntime({
     }
   }, [adapter, sessionId]);
   return {
+    state,
     session,
     messages: state.messages,
     isRunning: state.isRunning,
@@ -8583,6 +8867,7 @@ function AgentChat({
   const isReadOnlySession = isScheduledRunSession(runtime.session);
   const effectiveDisabled = disabled || isReadOnlySession;
   const disabledReason = isReadOnlySession ? "Scheduled run is read-only" : void 0;
+  const browserState = runtime.state.browser;
   react.useEffect(() => {
     onMessagesChange?.(runtime.messages);
   }, [onMessagesChange, runtime.messages]);
@@ -8619,19 +8904,29 @@ function AgentChat({
             retryIndicator: runtime.retryIndicator
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          WorkspacePanel,
-          {
-            adapter,
-            sessionId,
-            selectedPath: workspacePath,
-            onSelectedPathChange: setWorkspacePath,
-            collapsed: workspaceCollapsed,
-            onCollapsedChange: setWorkspaceCollapsed,
-            refreshSignal: runtime.workspaceRefreshKey,
-            disabled: effectiveDisabled
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "right-stack", className: "flex min-h-0 shrink-0 flex-col", children: [
+          browserState !== null && sessionId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 border-b border-line", children: /* @__PURE__ */ jsxRuntime.jsx(
+            BrowserPane,
+            {
+              sessionId,
+              state: browserState,
+              adapter
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            WorkspacePanel,
+            {
+              adapter,
+              sessionId,
+              selectedPath: workspacePath,
+              onSelectedPathChange: setWorkspacePath,
+              collapsed: workspaceCollapsed,
+              onCollapsedChange: setWorkspaceCollapsed,
+              refreshSignal: runtime.workspaceRefreshKey,
+              disabled: effectiveDisabled
+            }
+          )
+        ] })
       ] }) })
     }
   );