@invergent/agent-chat-react 1.6.1 → 1.6.3

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn } from './chunk-QSC4UIVT.js';
 import { createContext, memo, useRef, useState, useEffect, useCallback, useMemo, lazy, useContext, Suspense, Children } from 'react';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, ChevronRightIcon, GitBranchIcon, XIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, Loader2Icon, GlobeIcon, SearchIcon, ListTodoIcon, XCircleIcon, CheckCircle2Icon, Code, CheckIcon, CopyIcon, TerminalIcon, Trash2Icon, CircleDotIcon, CircleCheckIcon, CircleXIcon, SkullIcon, ClockIcon, CheckCircleIcon, CircleIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, PlayIcon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, PlusIcon, CornerDownLeftIcon } from 'lucide-react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, ChevronRightIcon, GitBranchIcon, XIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, Loader2Icon, EyeIcon, GlobeIcon, SearchIcon, ListTodoIcon, XCircleIcon, CheckCircle2Icon, Code, CheckIcon, CopyIcon, TerminalIcon, Trash2Icon, CircleDotIcon, CircleCheckIcon, CircleXIcon, SkullIcon, ClockIcon, CheckCircleIcon, CircleIcon, InboxIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, PlusIcon, CornerDownLeftIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Collapsible as Collapsible$1, Slot, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Tooltip as Tooltip$1, Tabs as Tabs$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, Progress as Progress$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -82,7 +82,9 @@ function Button({
 function BrowserControlBar({
   sessionId,
   hasControl,
-  adapter
+  adapter,
+  onControlAcquired,
+  onControlReleased
 }) {
   const [pending, setPending] = useState(false);
   const [error, setError] = useState(null);
@@ -93,8 +95,10 @@ function BrowserControlBar({
     try {
       if (hasControl) {
         await adapter.releaseBrowserControl(sessionId);
+        onControlReleased?.();
       } else {
         await adapter.acquireBrowserControl(sessionId);
+        onControlAcquired?.();
       }
     } catch (nextError) {
       setError(nextError.message);
@@ -333,19 +337,95 @@ function TooltipContent({
 }
 function BrowserPane({ sessionId, state, adapter }) {
   const [fullscreenOpen, setFullscreenOpen] = useState(false);
-  const [inlinePreviewOpen, setInlinePreviewOpen] = useState(false);
+  const [openFullscreenOnControl, setOpenFullscreenOnControl] = useState(false);
+  const [localControlActive, setLocalControlActive] = useState(false);
+  const [previewSnapshot, setPreviewSnapshot] = useState(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [previewError, setPreviewError] = useState(null);
   const hasLiveViewAdapter = typeof adapter.browserLiveViewUrl === "function";
+  const hasPreviewAdapter = typeof adapter.getBrowserPreviewSnapshot === "function";
   const hasControlAdapter = typeof adapter.acquireBrowserControl === "function" && typeof adapter.releaseBrowserControl === "function";
   const liveViewUrl = useMemo(() => {
     if (!hasLiveViewAdapter) return "";
     return adapter.browserLiveViewUrl(sessionId);
   }, [adapter, hasLiveViewAdapter, sessionId]);
   const hasLiveView = state.status !== "provisioning" && state.status !== "closed";
-  const canOpenFullscreen = hasLiveView && Boolean(liveViewUrl);
+  const hasUserControl = localControlActive;
+  const canUseLiveView = hasLiveView && hasUserControl && Boolean(liveViewUrl);
+  const canOpenPreview = hasLiveView && (hasPreviewAdapter || canUseLiveView);
+  const canOpenFullscreen = canOpenPreview;
+  const refreshPreview = useCallback(
+    async (signal) => {
+      if (!hasPreviewAdapter || canUseLiveView) return;
+      setPreviewLoading(true);
+      setPreviewError(null);
+      try {
+        const snapshot = await adapter.getBrowserPreviewSnapshot?.(sessionId);
+        if (signal?.aborted) return;
+        setPreviewSnapshot(snapshot ?? null);
+        if (!snapshot) {
+          setPreviewError("Browser preview is unavailable.");
+        }
+      } catch (error) {
+        if (signal?.aborted) return;
+        setPreviewSnapshot(null);
+        setPreviewError(
+          error instanceof Error ? error.message : "Browser preview failed."
+        );
+      } finally {
+        if (!signal?.aborted) setPreviewLoading(false);
+      }
+    },
+    [adapter, canUseLiveView, hasPreviewAdapter, sessionId]
+  );
   useEffect(() => {
     setFullscreenOpen(false);
-    setInlinePreviewOpen(false);
+    setOpenFullscreenOnControl(false);
+    setLocalControlActive(false);
+    setPreviewSnapshot(null);
+    setPreviewLoading(false);
+    setPreviewError(null);
   }, [sessionId]);
+  useEffect(() => {
+    if (!openFullscreenOnControl) return;
+    if (!canUseLiveView) return;
+    setFullscreenOpen(true);
+    setOpenFullscreenOnControl(false);
+  }, [canUseLiveView, openFullscreenOnControl]);
+  const handleFullscreenOpenChange = useCallback(
+    (open) => {
+      setFullscreenOpen(open);
+      if (open || !hasUserControl || !hasControlAdapter) return;
+      setLocalControlActive(false);
+      void adapter.releaseBrowserControl(sessionId).catch((error) => {
+        console.error("Failed to release browser control", error);
+      });
+    },
+    [adapter, hasControlAdapter, hasUserControl, sessionId]
+  );
+  useEffect(() => {
+    if (!hasLiveView || canUseLiveView) {
+      setPreviewLoading(false);
+      setPreviewError(null);
+      return;
+    }
+    if (!hasPreviewAdapter) return;
+    const abort = new AbortController();
+    void refreshPreview(abort.signal);
+    const timer = window.setInterval(() => {
+      void refreshPreview(abort.signal);
+    }, 5e3);
+    return () => {
+      abort.abort();
+      window.clearInterval(timer);
+    };
+  }, [
+    canUseLiveView,
+    fullscreenOpen,
+    hasLiveView,
+    hasPreviewAdapter,
+    refreshPreview
+  ]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -375,31 +455,31 @@ function BrowserPane({ sessionId, state, adapter }) {
               /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Full screen" })
             ] }) }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-black", children: state.status === "provisioning" ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Starting browser..." }) : state.status === "closed" ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser closed." }) : liveViewUrl && inlinePreviewOpen ? /* @__PURE__ */ jsx(BrowserLiveView, { src: liveViewUrl }) : liveViewUrl ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs(
-            "button",
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-black", children: state.status === "provisioning" ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Starting browser..." }) : state.status === "closed" ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser closed." }) : canUseLiveView ? /* @__PURE__ */ jsx(BrowserLiveView, { src: liveViewUrl }) : previewSnapshot ? /* @__PURE__ */ jsx(
+            BrowserPreviewImage,
             {
-              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__ */ jsx(PlayIcon, { className: "size-3.5", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { children: "Open live preview" })
-              ]
+              src: previewSnapshot.src,
+              fit: "contain",
+              testId: "browser-preview-image"
             }
-          ) }) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser live view is unavailable." }) }),
+          ) : previewLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Loading browser preview..." }) : previewError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: previewError }) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser preview is unavailable." }) }),
           hasLiveView && hasControlAdapter && /* @__PURE__ */ jsx(
             BrowserControlBar,
             {
               sessionId,
-              hasControl: state.status === "user-control",
-              adapter
+              hasControl: localControlActive,
+              adapter,
+              onControlAcquired: () => {
+                setLocalControlActive(true);
+                setOpenFullscreenOnControl(true);
+              },
+              onControlReleased: () => setLocalControlActive(false)
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Dialog, { open: fullscreenOpen, onOpenChange: setFullscreenOpen, children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Dialog, { open: fullscreenOpen, onOpenChange: handleFullscreenOpenChange, children: /* @__PURE__ */ jsxs(
       DialogContent,
       {
         "aria-describedby": void 0,
@@ -414,18 +494,41 @@ function BrowserPane({ sessionId, state, adapter }) {
               " has control"
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-black", children: liveViewUrl ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-black", children: canUseLiveView ? /* @__PURE__ */ jsx(
             BrowserLiveView,
             {
               src: liveViewUrl,
               testId: "browser-fullscreen-iframe"
             }
-          ) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser live view is unavailable." }) })
+          ) : previewSnapshot ? /* @__PURE__ */ jsx(
+            BrowserPreviewImage,
+            {
+              src: previewSnapshot.src,
+              fit: "contain",
+              testId: "browser-fullscreen-preview-image"
+            }
+          ) : previewLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Loading browser preview..." }) : previewError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: previewError }) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser preview is unavailable." }) })
         ]
       }
     ) })
   ] });
 }
+function BrowserPreviewImage({
+  src,
+  fit,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      "data-testid": testId,
+      src,
+      alt: "Browser preview",
+      className: `h-full w-full bg-black ${fit === "cover" ? "object-cover object-top" : "object-contain"}`,
+      draggable: false
+    }
+  );
+}
 var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsx(
   StickToBottom,
   {
@@ -867,66 +970,82 @@ function TimelineSeparator({
   );
 }
 function BrowserActivityGroup({ calls }) {
-  const [open, setOpen] = useState(false);
-  const latest = calls[calls.length - 1];
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-none border border-line bg-card text-xs", children: [
-    /* @__PURE__ */ 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__ */ jsx(ChevronDownIcon, { className: "size-3 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx(ZapIcon, { className: "size-3 shrink-0 text-amber-500", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "browser" }),
-          /* @__PURE__ */ 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__ */ jsx("ul", { className: "border-t border-line py-1", children: calls.map((call) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-line bg-card px-3 py-2 text-xs", children: [
+    /* @__PURE__ */ jsx(ZapIcon, { className: "size-3 shrink-0 text-amber-500", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold text-foreground", children: "Browser:" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: calls.map((call, index) => {
       const error = stringValue(parseJson(call.result).error);
-      return /* @__PURE__ */ jsxs(
-        "li",
-        {
-          className: "flex items-center gap-2 px-6 py-1 font-mono text-[11px]",
-          children: [
-            error && /* @__PURE__ */ jsx(
-              AlertCircleIcon,
-              {
-                "data-testid": `activity-error-${call.id}`,
-                className: "size-3 shrink-0 text-destructive",
-                "aria-hidden": "true"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: summarise(call) }),
-            error && /* @__PURE__ */ jsx("span", { className: "ml-auto max-w-40 truncate text-destructive", children: error })
-          ]
-        },
-        call.id
-      );
+      return /* @__PURE__ */ jsxs("span", { children: [
+        index > 0 && ", ",
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: error ? "text-destructive" : void 0,
+            "data-testid": error ? `activity-error-${call.id}` : void 0,
+            title: error || void 0,
+            children: summarize(call)
+          }
+        )
+      ] }, call.id);
     }) })
   ] });
 }
-function summarise(call) {
-  const verb = call.toolName.replace(/^browser_/, "");
+function summarize(call) {
   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;
+  const handler = ACTION_SUMMARIES[call.toolName];
+  return handler ? handler(args) : call.toolName.replace(/^browser_/, "");
+}
+var ACTION_SUMMARIES = {
+  browser_navigate: (args) => `navigate to ${stringValue(args.url) || "?"}`,
+  browser_get_state: () => "get state",
+  browser_close: () => "close",
+  browser_click: (args) => {
+    const ref = stringValue(args.ref);
+    if (ref) return `click ${ref}`;
+    const x = asNumber(args.x);
+    const y = asNumber(args.y);
+    if (x !== null && y !== null) return `click (${x}, ${y})`;
+    return "click";
+  },
+  browser_type: (args) => {
+    const text = stringValue(args.text);
+    const ref = stringValue(args.ref);
+    const quoted = text ? `"${truncateText(text)}"` : "";
+    if (!quoted) return ref ? `type into ${ref}` : "type";
+    return ref ? `type ${quoted} into ${ref}` : `type ${quoted}`;
+  },
+  browser_press_key: (args) => {
+    const keys = Array.isArray(args.keys) ? args.keys.map(String) : [];
+    return keys.length ? `press ${keys.join("+")}` : "press key";
+  },
+  browser_scroll: (args) => {
+    const x = asNumber(args.x);
+    const y = asNumber(args.y);
+    const dx = asNumber(args.delta_x) ?? 0;
+    const dy = asNumber(args.delta_y) ?? 0;
+    const delta = dx || dy ? `\u0394(${dx}, ${dy})` : "";
+    const origin = x !== null && y !== null ? `at (${x}, ${y})` : "";
+    return ["scroll", delta, origin].filter(Boolean).join(" ");
+  },
+  browser_drag: (args) => {
+    const path = Array.isArray(args.path) ? args.path : [];
+    if (path.length < 2) return "drag";
+    const first = path[0];
+    const last = path[path.length - 1];
+    const point = (p) => `(${asNumber(p[0]) ?? "?"}, ${asNumber(p[1]) ?? "?"})`;
+    return `drag ${point(first)} \u2192 ${point(last)}`;
+  },
+  browser_wait: (args) => {
+    const ms = asNumber(args.ms);
+    return ms === null ? "wait" : `wait ${ms}ms`;
+  },
+  browser_screenshot: (args) => args.annotate === true ? "screenshot (annotated)" : "screenshot"
+};
+function truncateText(text, max = 32) {
+  return text.length > max ? `${text.slice(0, max - 1)}\u2026` : text;
+}
+function asNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
 function parseJson(raw) {
   if (!raw) return {};
@@ -1966,6 +2085,20 @@ function WebToolBlock({ tc }) {
     displayText && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 truncate text-xs", children: displayText })
   ] });
 }
+function VisionAnalyzeBlock({ tc }) {
+  let image = "";
+  try {
+    const args = JSON.parse(tc.args);
+    const ref = String(args.image ?? args.image_url ?? args.image_path ?? "");
+    image = ref.split("/").pop() ?? ref;
+  } catch {
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm py-0.5", children: [
+    /* @__PURE__ */ jsx(EyeIcon, { className: "size-3.5 text-muted-foreground/60 shrink-0" }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Vision Analyze" }),
+    image && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 truncate text-xs", children: image })
+  ] });
+}
 function splitChangeLines(change) {
   const v = change.value;
   if (v === "") return [];
@@ -3903,6 +4036,8 @@ function ToolCallBlock({
     case "web_search":
     case "web_crawl":
       return /* @__PURE__ */ jsx(WebToolBlock, { tc });
+    case "vision_analyze":
+      return /* @__PURE__ */ jsx(VisionAnalyzeBlock, { tc });
     case "read_file":
       return /* @__PURE__ */ jsx(ReadFileBlock, { tc, onFileSelect });
     case "write_file":
@@ -5396,18 +5531,21 @@ function ChatComposerInner({
     [menuOpen, filteredCommands, selectedIndex, handleCommandSelect, textInput]
   );
   const handleSubmit = useCallback(
-    (message) => {
+    async (message) => {
       const text = message.text.trim();
-      if (!text || isRunning || disabled) return;
+      if (!text || disabled) return;
       const images = [];
       for (const file of message.files) {
         if (file.mediaType?.startsWith("image/") && file.url) {
           images.push({ data: file.url, mimeType: file.mediaType });
         }
       }
-      onSend(text, images.length > 0 ? images : void 0);
+      if (isRunning) {
+        await onStop();
+      }
+      await onSend(text, images.length > 0 ? images : void 0);
     },
-    [onSend, isRunning, disabled]
+    [onSend, onStop, isRunning, disabled]
   );
   return /* @__PURE__ */ jsxs(Popover, { open: menuOpen, onOpenChange: (open) => {
     if (!open) {
@@ -7249,10 +7387,9 @@ function WorkspacePanel({
   sessionId,
   selectedPath,
   onSelectedPathChange,
-  collapsed = false,
-  onCollapsedChange,
   refreshSignal = 0,
-  disabled = false
+  disabled = false,
+  fillParent = false
 }) {
   const fileInputRef = useRef(null);
   const [entries, setEntries] = useState([]);
@@ -7453,34 +7590,17 @@ function WorkspacePanel({
       window.removeEventListener("mouseup", onMouseUp);
     };
   }, []);
-  if (collapsed) {
-    return /* @__PURE__ */ 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",
-        "aria-label": "Expand workspace",
-        onClick: () => onCollapsedChange?.(false),
-        onKeyDown: (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            onCollapsedChange?.(false);
-          }
-        },
-        children: /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4 text-amber-500" })
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs(
     "aside",
     {
       "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 },
+      className: cn(
+        "relative z-10 flex h-full min-h-0 flex-col overflow-hidden border-l border-muted-foreground/20 bg-card",
+        fillParent && "w-full"
+      ),
+      style: fillParent ? void 0 : { width, minWidth: MIN_WIDTH, maxWidth: MAX_WIDTH },
       children: [
-        /* @__PURE__ */ jsx(
+        !fillParent && /* @__PURE__ */ jsx(
           "div",
           {
             className: "absolute inset-y-0 left-0 z-20 w-1.5 cursor-col-resize transition-colors hover:bg-primary/20 active:bg-primary/30",
@@ -7506,19 +7626,6 @@ function WorkspacePanel({
             /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: rootName }),
             /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-faint", children: disabled ? "Workspace - Read-only" : "Workspace" })
           ] }),
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-sm",
-                onClick: () => onCollapsedChange?.(true),
-                "aria-label": "Collapse workspace",
-                children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Collapse" })
-          ] }),
           /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
               Button,
@@ -7691,7 +7798,8 @@ var WORKSPACE_MUTATING_TOOLS = /* @__PURE__ */ new Set([
   "terminal",
   "write_file",
   "patch",
-  "execute_code"
+  "execute_code",
+  "browser_screenshot"
 ]);
 var AGENT_CHAT_LISTENED_EVENTS = [
   "user.message",
@@ -8617,7 +8725,6 @@ function AgentChat({
   disabled
 }) {
   const [workspacePath, setWorkspacePath] = useState(null);
-  const [workspaceCollapsed, setWorkspaceCollapsed] = useState(false);
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -8628,6 +8735,7 @@ 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;
   useEffect(() => {
     onMessagesChange?.(runtime.messages);
   }, [onMessagesChange, runtime.messages]);
@@ -8646,52 +8754,767 @@ function AgentChat({
         sessionId,
         onFileSelect: handleFileSelect
       },
-      children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("section", { className: "flex flex-1 min-h-0 overflow-hidden bg-background text-sm text-foreground", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx(
-          ChatThread,
+      children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "data-testid": "agent-chat-layout",
+          className: hasBrowserPanel ? "relative min-h-0 flex-1 overflow-hidden bg-background text-sm text-foreground" : "flex min-h-0 flex-1 overflow-hidden bg-background text-sm text-foreground",
+          style: { direction: "ltr" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-testid": "chat-panel",
+                className: hasBrowserPanel ? "absolute inset-y-0 left-0 flex min-h-0 min-w-0 flex-col overflow-hidden" : "flex min-w-0 flex-1 flex-col overflow-hidden",
+                style: hasBrowserPanel ? { right: 440 } : void 0,
+                children: /* @__PURE__ */ jsx(
+                  ChatThread,
+                  {
+                    sessionId,
+                    messages: runtime.messages,
+                    isRunning: runtime.isRunning,
+                    isLoadingHistory: runtime.isLoadingHistory,
+                    onSend: (content, images) => runtime.send(content, images),
+                    onStop: () => runtime.stop(),
+                    onRetry: runtime.retry,
+                    onFileSelect: handleFileSelect,
+                    disabled: effectiveDisabled,
+                    disabledReason,
+                    tokenUsage: runtime.tokenUsage,
+                    retryIndicator: runtime.retryIndicator
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-testid": "right-stack",
+                className: hasBrowserPanel ? "absolute inset-y-0 flex min-h-0 flex-col overflow-hidden" : "flex min-h-0 shrink-0 flex-col",
+                style: hasBrowserPanel ? { right: 0, width: 440 } : void 0,
+                children: [
+                  hasBrowserPanel && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-testid": "browser-panel",
+                      className: "h-1/2 min-h-0 w-full overflow-hidden border-b border-line",
+                      children: /* @__PURE__ */ jsx(
+                        BrowserPane,
+                        {
+                          sessionId,
+                          state: browserState,
+                          adapter
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-testid": "workspace-panel-frame",
+                      className: hasBrowserPanel ? "h-1/2 min-h-0 w-full overflow-hidden" : "min-h-0",
+                      children: /* @__PURE__ */ jsx(
+                        WorkspacePanel,
+                        {
+                          adapter,
+                          sessionId,
+                          selectedPath: workspacePath,
+                          onSelectedPathChange: setWorkspacePath,
+                          refreshSignal: runtime.workspaceRefreshKey,
+                          disabled: effectiveDisabled,
+                          fillParent: Boolean(hasBrowserPanel)
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+var DEFAULT_LIMIT = 50;
+function requireInboxAdapter(adapter) {
+  if (!adapter.listInbox || !adapter.getInboxItem || !adapter.markInboxItemRead || !adapter.acknowledgeInboxItem || !adapter.respondGovernanceInboxItem || !adapter.openInboxStream) {
+    throw new Error("Inbox is not supported by this adapter.");
+  }
+  return adapter;
+}
+var KIND_LABEL2 = {
+  input_required: "Input needed",
+  action_required: "Action needed",
+  task_complete: "Task complete",
+  governance_gate: "Approval",
+  progress_checkin: "Progress"
+};
+function kindLabel(kind) {
+  return KIND_LABEL2[kind] ?? kind.replace(/[_-]+/g, " ");
+}
+function statusLabel(status) {
+  return status.split(/[_-]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function formatRelative(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return formatDistanceToNow(date, { addSuffix: true });
+}
+function kindIcon(kind) {
+  if (kind === "input_required") return MessageSquareIcon;
+  if (kind === "action_required") return ExternalLinkIcon;
+  if (kind === "task_complete") return ClipboardCheckIcon;
+  if (kind === "governance_gate") return ShieldAlertIcon;
+  if (kind === "progress_checkin") return TimerIcon;
+  return CircleDotIcon;
+}
+function sortItems(items) {
+  return [...items].sort((a, b) => {
+    if (a.createdAt !== b.createdAt) return a.createdAt > b.createdAt ? -1 : 1;
+    return b.id - a.id;
+  });
+}
+function QuestionInput({
+  prompt,
+  choices,
+  disabled,
+  value,
+  onChange
+}) {
+  if (choices && choices.length > 0) {
+    return /* @__PURE__ */ jsxs(
+      "select",
+      {
+        "aria-label": prompt,
+        className: "h-9 w-full border border-line bg-background px-2 text-sm text-foreground outline-none focus:border-primary disabled:opacity-50",
+        disabled,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Select" }),
+          choices.map((choice) => /* @__PURE__ */ jsx("option", { value: choice.label, children: choice.label }, choice.label))
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-label": prompt,
+      className: "h-9 w-full border border-line bg-background px-2 text-sm text-foreground outline-none focus:border-primary disabled:opacity-50",
+      disabled,
+      value,
+      onChange: (event) => onChange(event.target.value)
+    }
+  );
+}
+function InboxDetailActions({
+  item,
+  adapter,
+  onDeleted,
+  onSessionSelect,
+  children
+}) {
+  const [deleting, setDeleting] = useState(false);
+  async function deleteItem() {
+    if (!adapter.deleteInboxItem) return;
+    setDeleting(true);
+    try {
+      await onDeleted(item.id);
+    } finally {
+      setDeleting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        onClick: () => onSessionSelect?.(item.sessionId),
+        "aria-label": "Open session",
+        children: [
+          /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3.5" }),
+          "Open session"
+        ]
+      }
+    ),
+    children,
+    adapter.deleteInboxItem && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: "ghost",
+        onClick: () => void deleteItem(),
+        disabled: deleting,
+        "aria-label": "Delete inbox item",
+        title: "Delete inbox item",
+        children: [
+          /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3.5" }),
+          deleting ? "Deleting" : "Delete"
+        ]
+      }
+    )
+  ] });
+}
+function InputRequiredDetail({
+  item,
+  adapter,
+  onUpdated,
+  onDeleted,
+  onSessionSelect
+}) {
+  const questions = Array.isArray(item.payload.questions) ? item.payload.questions.map((question) => ({
+    prompt: typeof question.prompt === "string" ? question.prompt : "",
+    choices: Array.isArray(question.choices) ? question.choices.map((choice) => ({
+      label: typeof choice.label === "string" ? choice.label : "",
+      description: typeof choice.description === "string" ? choice.description : void 0
+    })).filter((choice) => choice.label) : void 0
+  })).filter((question) => question.prompt) : [];
+  const [answers, setAnswers] = useState({});
+  const [submitting, setSubmitting] = useState(false);
+  const disabled = item.status !== "pending" || submitting;
+  const canSubmit = questions.every((question) => answers[question.prompt]?.trim());
+  async function submit() {
+    const toolCallId = typeof item.payload.tool_call_id === "string" ? item.payload.tool_call_id : "";
+    if (!toolCallId || !canSubmit) return;
+    setSubmitting(true);
+    try {
+      const responses = questions.map((question) => ({
+        question: question.prompt,
+        answer: answers[question.prompt]?.trim() ?? "",
+        is_other: false
+      }));
+      await adapter.submitClarifyResponse({
+        sessionId: item.sessionId,
+        toolCallId,
+        responses
+      });
+      onUpdated(await adapter.getInboxItem({ itemId: item.id }));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    item.body && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: item.body }),
+    questions.map((question) => /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: question.prompt }),
+      /* @__PURE__ */ jsx(
+        QuestionInput,
+        {
+          prompt: question.prompt,
+          choices: question.choices,
+          disabled,
+          value: answers[question.prompt] ?? "",
+          onChange: (value) => setAnswers((current) => ({
+            ...current,
+            [question.prompt]: value
+          }))
+        }
+      )
+    ] }, question.prompt)),
+    /* @__PURE__ */ jsx(
+      InboxDetailActions,
+      {
+        item,
+        adapter,
+        onDeleted,
+        onSessionSelect,
+        children: /* @__PURE__ */ jsx(
+          Button,
           {
-            sessionId,
-            messages: runtime.messages,
-            isRunning: runtime.isRunning,
-            isLoadingHistory: runtime.isLoadingHistory,
-            onSend: (content, images) => void runtime.send(content, images),
-            onStop: () => void runtime.stop(),
-            onRetry: runtime.retry,
-            onFileSelect: handleFileSelect,
-            disabled: effectiveDisabled,
-            disabledReason,
-            tokenUsage: runtime.tokenUsage,
-            retryIndicator: runtime.retryIndicator
+            type: "button",
+            size: "sm",
+            onClick: () => void submit(),
+            disabled: disabled || !canSubmit,
+            "aria-label": "Submit inbox response",
+            children: submitting ? "Submitting" : "Submit"
+          }
+        )
+      }
+    )
+  ] });
+}
+function AckDetail({
+  item,
+  adapter,
+  onUpdated,
+  onDeleted,
+  onSessionSelect
+}) {
+  async function acknowledge() {
+    onUpdated(await adapter.acknowledgeInboxItem({ itemId: item.id }));
+  }
+  const outcome = typeof item.payload.outcome === "string" ? item.payload.outcome : "";
+  const duration = typeof item.payload.duration_seconds === "number" ? item.payload.duration_seconds : null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    outcome && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: outcome }),
+    item.body && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm", children: item.body }),
+    typeof item.payload.error === "string" && /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto bg-destructive/10 p-3 text-xs text-destructive", children: item.payload.error }),
+    duration !== null && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      "Duration: ",
+      Math.round(duration / 60),
+      " min (",
+      duration,
+      " s)"
+    ] }),
+    /* @__PURE__ */ jsx(
+      InboxDetailActions,
+      {
+        item,
+        adapter,
+        onDeleted,
+        onSessionSelect,
+        children: item.status === "pending" && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            onClick: () => void acknowledge(),
+            "aria-label": "Acknowledge inbox item",
+            children: [
+              /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }),
+              "Acknowledge"
+            ]
           }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { "data-testid": "right-stack", className: "flex min-h-0 shrink-0 flex-col", children: [
-          browserState !== null && sessionId && /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 border-b border-line", children: /* @__PURE__ */ jsx(
-            BrowserPane,
+        )
+      }
+    )
+  ] });
+}
+function GovernanceDetail({
+  item,
+  adapter,
+  onUpdated,
+  onDeleted,
+  onSessionSelect
+}) {
+  async function decide(decision) {
+    onUpdated(
+      await adapter.respondGovernanceInboxItem({ itemId: item.id, decision })
+    );
+  }
+  const toolName = typeof item.payload.tool_name === "string" ? item.payload.tool_name : "tool";
+  const args = typeof item.payload.arguments_excerpt === "string" ? item.payload.arguments_excerpt : "";
+  const reason = typeof item.payload.deny_reason === "string" ? item.payload.deny_reason : "";
+  const disabled = item.status !== "pending";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-base font-semibold text-foreground", children: [
+        "Approve ",
+        toolName,
+        "?"
+      ] }),
+      reason && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: reason })
+    ] }),
+    args && /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto border border-line bg-muted p-3 text-xs", children: args }),
+    /* @__PURE__ */ jsxs(
+      InboxDetailActions,
+      {
+        item,
+        adapter,
+        onDeleted,
+        onSessionSelect,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
             {
-              sessionId,
-              state: browserState,
-              adapter
+              type: "button",
+              size: "sm",
+              disabled,
+              onClick: () => void decide("approve"),
+              children: "Approve"
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsx(
-            WorkspacePanel,
+            Button,
             {
-              adapter,
-              sessionId,
-              selectedPath: workspacePath,
-              onSelectedPathChange: setWorkspacePath,
-              collapsed: workspaceCollapsed,
-              onCollapsedChange: setWorkspaceCollapsed,
-              refreshSignal: runtime.workspaceRefreshKey,
-              disabled: effectiveDisabled
+              type: "button",
+              size: "sm",
+              variant: "destructive",
+              disabled,
+              onClick: () => void decide("reject"),
+              children: "Reject"
             }
           )
-        ] })
-      ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function ActionRequiredDetail({
+  item,
+  adapter,
+  onUpdated,
+  onDeleted,
+  onSessionSelect
+}) {
+  const [submitting, setSubmitting] = useState(false);
+  const actionType = typeof item.payload.action_type === "string" ? item.payload.action_type : "";
+  const context = typeof item.payload.context === "string" ? item.payload.context : "";
+  const disabled = item.status !== "pending" || submitting || !adapter.respondActionRequiredInboxItem;
+  async function complete() {
+    if (!adapter.respondActionRequiredInboxItem) return;
+    setSubmitting(true);
+    try {
+      onUpdated(await adapter.respondActionRequiredInboxItem({ itemId: item.id }));
+    } finally {
+      setSubmitting(false);
     }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    item.body && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm", children: item.body }),
+    context && context !== item.body && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: context }),
+    actionType && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: actionType }),
+    /* @__PURE__ */ jsx(
+      InboxDetailActions,
+      {
+        item,
+        adapter,
+        onDeleted,
+        onSessionSelect,
+        children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            onClick: () => void complete(),
+            disabled,
+            "aria-label": "Mark action complete",
+            children: [
+              /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }),
+              submitting ? "Marking" : "I completed this"
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function ProgressDetail({
+  item,
+  adapter,
+  onUpdated,
+  onDeleted,
+  onSessionSelect
+}) {
+  async function acknowledge() {
+    onUpdated(await adapter.acknowledgeInboxItem({ itemId: item.id }));
+  }
+  const rows = [];
+  for (const row of [
+    ["Iterations", item.payload.iterations],
+    ["Last tool", item.payload.last_tool],
+    ["Elapsed", item.payload.elapsed_seconds]
+  ]) {
+    if (row[1] !== void 0 && row[1] !== null && row[1] !== "") {
+      rows.push(row);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    item.body && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm", children: item.body }),
+    rows.length > 0 && /* @__PURE__ */ jsx("dl", { className: "space-y-1 text-xs text-muted-foreground", children: rows.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx("dt", { className: "w-20 shrink-0", children: String(label) }),
+      /* @__PURE__ */ jsx("dd", { className: "min-w-0", children: String(value) })
+    ] }, String(label))) }),
+    /* @__PURE__ */ jsx(
+      InboxDetailActions,
+      {
+        item,
+        adapter,
+        onDeleted,
+        onSessionSelect,
+        children: item.status === "pending" && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            onClick: () => void acknowledge(),
+            "aria-label": "Acknowledge inbox item",
+            children: [
+              /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }),
+              "Acknowledge"
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function InboxDetail({
+  item,
+  adapter,
+  onUpdated,
+  onDeleted,
+  onSessionSelect
+}) {
+  const Icon = kindIcon(item.kind);
+  return /* @__PURE__ */ jsxs("section", { className: "min-w-0 flex-1 overflow-y-auto p-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-5 flex min-w-0 items-start gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex size-8 shrink-0 items-center justify-center border border-line text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: kindLabel(item.kind) }),
+          /* @__PURE__ */ jsx(Badge, { variant: item.status === "pending" ? "default" : "secondary", children: statusLabel(item.status) })
+        ] }),
+        /* @__PURE__ */ jsx("h2", { className: "mt-2 text-lg font-semibold leading-snug text-foreground", children: item.title })
+      ] })
+    ] }),
+    item.kind === "input_required" ? /* @__PURE__ */ jsx(
+      InputRequiredDetail,
+      {
+        item,
+        adapter,
+        onUpdated,
+        onDeleted,
+        onSessionSelect
+      }
+    ) : item.kind === "action_required" ? /* @__PURE__ */ jsx(
+      ActionRequiredDetail,
+      {
+        item,
+        adapter,
+        onUpdated,
+        onDeleted,
+        onSessionSelect
+      }
+    ) : item.kind === "governance_gate" ? /* @__PURE__ */ jsx(
+      GovernanceDetail,
+      {
+        item,
+        adapter,
+        onUpdated,
+        onDeleted,
+        onSessionSelect
+      }
+    ) : item.kind === "progress_checkin" ? /* @__PURE__ */ jsx(
+      ProgressDetail,
+      {
+        item,
+        adapter,
+        onUpdated,
+        onDeleted,
+        onSessionSelect
+      }
+    ) : /* @__PURE__ */ jsx(
+      AckDetail,
+      {
+        item,
+        adapter,
+        onUpdated,
+        onDeleted,
+        onSessionSelect
+      }
+    )
+  ] });
+}
+function InboxPanel({
+  adapter,
+  title = "Inbox",
+  selectedId,
+  onSelectedIdChange,
+  onSessionSelect,
+  hideHeader = false,
+  limit = DEFAULT_LIMIT
+}) {
+  const inboxAdapter = useMemo(() => requireInboxAdapter(adapter), [adapter]);
+  const [items, setItems] = useState([]);
+  const [nextCursor, setNextCursor] = useState(null);
+  const [internalSelectedId, setInternalSelectedId] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const requestId = useRef(0);
+  const selectedItemId = selectedId ?? internalSelectedId;
+  const selectedItem = useMemo(
+    () => items.find((item) => item.id === selectedItemId) ?? null,
+    [items, selectedItemId]
+  );
+  const applyItem = useCallback((nextItem) => {
+    setItems(
+      (current) => sortItems(
+        current.map((item) => item.id === nextItem.id ? nextItem : item)
+      )
+    );
+  }, []);
+  const selectItem = useCallback(
+    async (itemId) => {
+      if (selectedId === void 0) setInternalSelectedId(itemId);
+      onSelectedIdChange?.(itemId);
+      const item = await inboxAdapter.getInboxItem({ itemId });
+      applyItem(item);
+      if (!item.readAt) {
+        applyItem(await inboxAdapter.markInboxItemRead({ itemId }));
+      }
+    },
+    [applyItem, inboxAdapter, onSelectedIdChange, selectedId]
+  );
+  const load = useCallback(
+    async (cursor) => {
+      const id = ++requestId.current;
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await inboxAdapter.listInbox({
+          cursor: cursor ?? void 0,
+          limit
+        });
+        if (id !== requestId.current) return;
+        setItems(
+          (current) => sortItems(cursor ? [...current, ...response.items] : response.items)
+        );
+        setNextCursor(response.nextCursor);
+      } catch (err) {
+        if (id === requestId.current) {
+          setError(err instanceof Error ? err.message : "Failed to load inbox");
+        }
+      } finally {
+        if (id === requestId.current) setLoading(false);
+      }
+    },
+    [inboxAdapter, limit]
   );
+  useEffect(() => {
+    void load(null);
+  }, [load]);
+  useEffect(() => {
+    const stream = inboxAdapter.openInboxStream();
+    stream.addEventListener("item", (event) => {
+      const payload = JSON.parse(event.data);
+      if (typeof payload.item_id !== "number") return;
+      void inboxAdapter.getInboxItem({ itemId: payload.item_id }).then(applyItem);
+    });
+    return () => stream.close();
+  }, [applyItem, inboxAdapter]);
+  function updateSelectedItem(item) {
+    applyItem(item);
+  }
+  const deleteItem = useCallback(
+    async (itemId) => {
+      if (!inboxAdapter.deleteInboxItem) return;
+      await inboxAdapter.deleteInboxItem({ itemId });
+      setItems((current) => current.filter((item) => item.id !== itemId));
+      if (selectedItemId === itemId) {
+        if (selectedId === void 0) setInternalSelectedId(null);
+        onSelectedIdChange?.(null);
+      }
+    },
+    [inboxAdapter, onSelectedIdChange, selectedId, selectedItemId]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 min-w-0 bg-background text-foreground", children: [
+    /* @__PURE__ */ jsxs("aside", { className: "flex w-80 min-w-72 max-w-sm shrink-0 flex-col border-r border-line", children: [
+      !hideHeader && /* @__PURE__ */ jsxs("div", { className: "flex min-h-14 items-center gap-2 border-b border-line px-4", children: [
+        /* @__PURE__ */ jsx(InboxIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("h1", { className: "font-semibold", children: title })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+        error && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-sm text-destructive", children: error }),
+        !error && items.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "px-4 py-8 text-sm text-muted-foreground", children: "No inbox items" }),
+        items.map((item) => {
+          const Icon = kindIcon(item.kind);
+          const selected = item.id === selectedItemId;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Open inbox item ${item.title}`,
+              className: cn(
+                "flex w-full min-w-0 gap-3 border-l-2 px-3 py-3 text-left transition-colors hover:bg-input",
+                selected ? "border-l-primary bg-line text-foreground" : "border-l-transparent text-subtle",
+                !item.readAt && "font-medium text-foreground"
+              ),
+              onClick: () => void selectItem(item.id),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-xs uppercase tracking-wide text-muted-foreground", children: kindLabel(item.kind) }),
+                    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatRelative(item.createdAt) })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "mt-1 block truncate text-sm", children: item.title }),
+                  /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: statusLabel(item.status) })
+                ] })
+              ]
+            },
+            item.id
+          );
+        }),
+        nextCursor && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "w-full px-3 py-3 text-sm text-muted-foreground hover:bg-input",
+            onClick: () => void load(nextCursor),
+            disabled: loading,
+            children: loading ? "Loading" : "Load more"
+          }
+        )
+      ] })
+    ] }),
+    selectedItem ? /* @__PURE__ */ jsx(
+      InboxDetail,
+      {
+        item: selectedItem,
+        adapter: inboxAdapter,
+        onUpdated: updateSelectedItem,
+        onDeleted: deleteItem,
+        onSessionSelect
+      }
+    ) : /* @__PURE__ */ jsx("main", { className: "flex min-w-0 flex-1 items-center justify-center px-4 text-sm text-muted-foreground", children: "Select an item" })
+  ] });
 }
-var DEFAULT_LIMIT = 50;
+function useInboxUnreadCount(adapter) {
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    let stream = null;
+    if (!adapter.listInbox || !adapter.openInboxStream) {
+      setError("Inbox is not supported by this adapter.");
+      setHasLoaded(true);
+      return () => {
+        cancelled = true;
+      };
+    }
+    adapter.listInbox({ status: "pending", limit: 200 }).then((response) => {
+      if (cancelled) return;
+      setUnreadCount(response.items.filter((item) => !item.readAt).length);
+      setHasLoaded(true);
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(err instanceof Error ? err.message : "Failed to load inbox");
+      setHasLoaded(true);
+    });
+    try {
+      stream = adapter.openInboxStream();
+      stream.addEventListener("snapshot", (event) => {
+        if (cancelled) return;
+        const payload = JSON.parse(event.data);
+        const ids = Array.isArray(payload.unread_ids) ? payload.unread_ids : [];
+        setUnreadCount(ids.length);
+        setHasLoaded(true);
+      });
+      stream.addEventListener("item", () => {
+        if (cancelled) return;
+        setUnreadCount((count) => count + 1);
+        setHasLoaded(true);
+      });
+      stream.onerror = () => {
+        if (!cancelled) setError("Inbox stream disconnected.");
+      };
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to open inbox stream");
+    }
+    return () => {
+      cancelled = true;
+      stream?.close();
+    };
+  }, [adapter]);
+  return { unreadCount, hasLoaded, error };
+}
+var DEFAULT_LIMIT2 = 50;
 var DEFAULT_POLL_INTERVAL_MS = 3e4;
 function fingerprint(items) {
   return items.map(
@@ -8706,7 +9529,7 @@ function formatKind(value) {
   if (!value) return "Scheduled";
   return value.split(/[_-]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
 }
-function formatRelative(value, label) {
+function formatRelative2(value, label) {
   if (!value) return null;
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return null;
@@ -8756,10 +9579,10 @@ function ScheduledWorkRow({
   const lastSessionId = item.lastSessionId ?? null;
   const meta = [
     scheduleDisplay(item),
-    formatRelative(item.nextRunAt, "Next"),
-    formatRelative(item.lastRunAt, "Last"),
+    formatRelative2(item.nextRunAt, "Next"),
+    formatRelative2(item.lastRunAt, "Last"),
     formatRuns(item.runCount),
-    item.expiresAt ? formatRelative(item.expiresAt, "Expires") : null
+    item.expiresAt ? formatRelative2(item.expiresAt, "Expires") : null
   ].filter(Boolean);
   const openLastRun = () => {
     if (lastSessionId) onOpenLastRun(lastSessionId);
@@ -8839,7 +9662,7 @@ function ScheduledWorkPanel({
   adapter,
   agentId,
   title = "Scheduled Work",
-  limit = DEFAULT_LIMIT,
+  limit = DEFAULT_LIMIT2,
   status = "active",
   hideHeader = false,
   pollIntervalMs = DEFAULT_POLL_INTERVAL_MS,
@@ -9359,6 +10182,6 @@ function SessionTreePanel({
   ] });
 }
 
-export { AgentChat, AgentChatAdapterProvider, MessageResponse, ScheduledWorkPanel, SessionTreePanel, useAgentChatAdapterContext, useAgentChatRuntime };
+export { AgentChat, AgentChatAdapterProvider, InboxPanel, MessageResponse, ScheduledWorkPanel, SessionTreePanel, useAgentChatAdapterContext, useAgentChatRuntime, useInboxUnreadCount };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map