@invergent/agent-chat-react 1.5.10 → 1.6.1

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,77 +263,218 @@ 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,
+  testId = "browser-iframe"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      "data-testid": testId,
+      title: "Browser live view",
+      src,
+      className: "h-full w-full border-0 bg-black",
+      allow: "clipboard-read; clipboard-write"
+    }
+  );
+}
 
-// src/components/ai-elements/conversation.tsx
+// src/components/browser/browser-status-dot.tsx
 init_utils();
-var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  useStickToBottom.StickToBottom,
-  {
-    className: cn("relative flex-1", className),
-    initial: "smooth",
-    resize: "smooth",
-    role: "log",
-    ...props
-  }
-);
-var ConversationContent = ({
+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"
+      )
+    }
+  );
+}
+
+// src/components/ui/dialog.tsx
+init_utils();
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  useStickToBottom.StickToBottom.Content,
-  {
-    className: cn("flex flex-col gap-6 py-6 px-6", className),
-    ...props
-  }
-);
-var ConversationEmptyState = ({
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
   className,
-  title = "No messages yet",
-  description = "Start a conversation to see messages here",
-  icon,
   children,
+  showCloseButton = true,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "flex size-full flex-col items-center justify-center gap-4 p-8 text-center",
-      className
-    ),
-    ...props,
-    children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center size-14 rounded-2xl bg-muted/60 text-muted-foreground/60", children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-base text-foreground/80", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground/60 text-sm max-w-sm", children: description })
-      ] })
-    ] })
-  }
-);
-var ConversationScrollButton = ({
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      radixUi.Dialog.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "absolute top-5 right-5 bg-secondary",
+              size: "icon-sm",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.XIcon,
+                  {}
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
   className,
+  showCloseButton = false,
+  children,
   ...props
-}) => {
-  const { isAtBottom, scrollToBottom } = useStickToBottom.useStickToBottomContext();
-  const handleScrollToBottom = react.useCallback(() => {
-    scrollToBottom();
-  }, [scrollToBottom]);
-  return !isAtBottom && /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
+      "data-slot": "dialog-footer",
       className: cn(
-        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full shadow-lg border-border/50 dark:bg-background dark:hover:bg-muted",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className
       ),
-      onClick: handleScrollToBottom,
-      size: "icon",
-      type: "button",
-      variant: "outline",
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, { className: "size-4" })
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Close" }) })
+      ]
     }
   );
-};
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn(
+        "font-heading text-lg leading-none font-semibold tracking-wider uppercase",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/components/ui/tooltip.tsx
 init_utils();
@@ -365,24 +506,190 @@ function TooltipContent({
   sideOffset = 0,
   children,
   ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    radixUi.Tooltip.Content,
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+function BrowserPane({ sessionId, state, adapter }) {
+  const [fullscreenOpen, setFullscreenOpen] = react.useState(false);
+  const [inlinePreviewOpen, setInlinePreviewOpen] = react.useState(false);
+  const hasLiveViewAdapter = typeof adapter.browserLiveViewUrl === "function";
+  const hasControlAdapter = typeof adapter.acquireBrowserControl === "function" && typeof adapter.releaseBrowserControl === "function";
+  const liveViewUrl = react.useMemo(() => {
+    if (!hasLiveViewAdapter) return "";
+    return adapter.browserLiveViewUrl(sessionId);
+  }, [adapter, hasLiveViewAdapter, sessionId]);
+  const hasLiveView = state.status !== "provisioning" && state.status !== "closed";
+  const canOpenFullscreen = hasLiveView && Boolean(liveViewUrl);
+  react.useEffect(() => {
+    setFullscreenOpen(false);
+    setInlinePreviewOpen(false);
+  }, [sessionId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__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"
+            ] }),
+            canOpenFullscreen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Maximize browser",
+                  className: "inline-flex size-7 items-center justify-center text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  onClick: () => setFullscreenOpen(true),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2Icon, { className: "size-3.5", "aria-hidden": "true" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: "Full screen" })
+            ] }) }) })
+          ] }),
+          /* @__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." }) : liveViewUrl && inlinePreviewOpen ? /* @__PURE__ */ jsxRuntime.jsx(BrowserLiveView, { src: liveViewUrl }) : liveViewUrl ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Open browser live preview",
+              className: "inline-flex items-center gap-2 border border-line bg-card px-3 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              onClick: () => setInlinePreviewOpen(true),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayIcon, { className: "size-3.5", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Open live preview" })
+              ]
+            }
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser live view is unavailable." }) }),
+          hasLiveView && hasControlAdapter && /* @__PURE__ */ jsxRuntime.jsx(
+            BrowserControlBar,
+            {
+              sessionId,
+              hasControl: state.status === "user-control",
+              adapter
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: fullscreenOpen, onOpenChange: setFullscreenOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogContent,
+      {
+        "aria-describedby": void 0,
+        className: "flex h-screen w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-none ring-0 sm:max-w-none",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "h-10 shrink-0 flex-row items-center gap-2 border-b border-line bg-card px-4 py-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZapIcon, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-xs normal-case tracking-normal", children: "Browser" }),
+            /* @__PURE__ */ jsxRuntime.jsx(BrowserStatusDot, { status: state.status }),
+            state.controlOwner && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 truncate text-xs text-amber-500", children: [
+              state.controlOwner,
+              " has control"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 bg-black", children: liveViewUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            BrowserLiveView,
+            {
+              src: liveViewUrl,
+              testId: "browser-fullscreen-iframe"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser live view is unavailable." }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/ai-elements/conversation.tsx
+init_utils();
+var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  useStickToBottom.StickToBottom,
+  {
+    className: cn("relative flex-1", className),
+    initial: "smooth",
+    resize: "smooth",
+    role: "log",
+    ...props
+  }
+);
+var ConversationContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  useStickToBottom.StickToBottom.Content,
+  {
+    className: cn("flex flex-col gap-6 py-6 px-6", className),
+    ...props
+  }
+);
+var ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn(
+      "flex size-full flex-col items-center justify-center gap-4 p-8 text-center",
+      className
+    ),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center size-14 rounded-2xl bg-muted/60 text-muted-foreground/60", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-base text-foreground/80", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground/60 text-sm max-w-sm", children: description })
+      ] })
+    ] })
+  }
+);
+var ConversationScrollButton = ({
+  className,
+  ...props
+}) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottom.useStickToBottomContext();
+  const handleScrollToBottom = react.useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+  return !isAtBottom && /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
     {
-      "data-slot": "tooltip-content",
-      sideOffset,
       className: cn(
-        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full shadow-lg border-border/50 dark:bg-background dark:hover:bg-muted",
         className
       ),
+      onClick: handleScrollToBottom,
+      size: "icon",
+      type: "button",
+      variant: "outline",
       ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground" })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, { className: "size-4" })
     }
-  ) });
-}
+  );
+};
 
 // src/components/ai-elements/message.tsx
 init_utils();
@@ -767,6 +1074,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
@@ -1812,140 +2193,6 @@ function WebToolBlock({ tc }) {
     displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/70 truncate text-xs", children: displayText })
   ] });
 }
-
-// src/components/ui/dialog.tsx
-init_utils();
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "dialog", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Dialog.Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      radixUi.Dialog.Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              variant: "ghost",
-              className: "absolute top-5 right-5 bg-secondary",
-              size: "icon-sm",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.XIcon,
-                  {}
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2", className),
-      ...props
-    }
-  );
-}
-function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-slot": "dialog-footer",
-      className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Close" }) })
-      ]
-    }
-  );
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Dialog.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn(
-        "font-heading text-lg leading-none font-semibold tracking-wider uppercase",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Dialog.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn(
-        "mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/chat/tools/file-tools.tsx
 init_utils();
 
 // src/components/chat/diff-viewer.tsx
@@ -6178,6 +6425,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 +6607,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 +6677,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 +7759,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 +7778,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 +8020,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 +8048,8 @@ function createInitialAgentChatState(options = {}) {
     sessionDone: false,
     hadDeltas: false,
     terminal: false,
-    workspaceRefreshKey: 0
+    workspaceRefreshKey: 0,
+    browser: null
   };
 }
 function applyAgentChatEvent(state, event) {
@@ -7783,7 +8073,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 +8090,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 +8103,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 +8129,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 +8199,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 +8215,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 +8233,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 +8310,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 +8368,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 +8421,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 +8441,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 +8510,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 +8555,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 +8570,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 +8591,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 +8643,7 @@ function objectValue(value) {
   }
   return void 0;
 }
-function stringValue(value) {
+function stringValue2(value) {
   return typeof value === "string" ? value : "";
 }
 function numberValue(value) {
@@ -8532,6 +8877,7 @@ function useAgentChatRuntime({
     }
   }, [adapter, sessionId]);
   return {
+    state,
     session,
     messages: state.messages,
     isRunning: state.isRunning,
@@ -8583,6 +8929,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 +8966,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
+            }
+          )
+        ] })
       ] }) })
     }
   );