@invergent/agent-chat-react 2.15.2 → 2.15.6

package/dist/index.cjs

@@ -215,6 +215,481 @@ function useAgentChatAdapterContext() {
   }
   return value;
 }
+var NAMED_KEYS = /* @__PURE__ */ new Set([
+  "Enter",
+  "Tab",
+  "Escape",
+  "Backspace",
+  "Delete",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+]);
+function toWsUrl(src) {
+  const url = new URL(src, window.location.href);
+  if (url.protocol === "http:") url.protocol = "ws:";
+  else if (url.protocol === "https:") url.protocol = "wss:";
+  return url.toString();
+}
+function normalizePoint(clientX, clientY, rect, naturalWidth, naturalHeight) {
+  let { width, height } = rect;
+  let offsetX = 0;
+  let offsetY = 0;
+  if (naturalWidth > 0 && naturalHeight > 0) {
+    const scale = Math.min(rect.width / naturalWidth, rect.height / naturalHeight);
+    width = naturalWidth * scale;
+    height = naturalHeight * scale;
+    offsetX = (rect.width - width) / 2;
+    offsetY = (rect.height - height) / 2;
+  }
+  if (width <= 0 || height <= 0) return null;
+  const x = (clientX - rect.left - offsetX) / width;
+  const y = (clientY - rect.top - offsetY) / height;
+  if (x < 0 || x > 1 || y < 0 || y > 1) return null;
+  return { x, y };
+}
+function hostOf(url) {
+  try {
+    const parsed = new URL(url);
+    return { origin: parsed.host, rest: `${parsed.pathname}${parsed.search}` };
+  } catch {
+    return { origin: url, rest: "" };
+  }
+}
+var ICON = "flex size-[26px] shrink-0 items-center justify-center rounded-[5px] text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground disabled:pointer-events-none disabled:opacity-40";
+function BrowserShell({
+  src,
+  hasControl,
+  onToggleControl,
+  onClose,
+  onMaximize,
+  onDisconnect,
+  testId = "browser-shell"
+}) {
+  const socketRef = react.useRef(null);
+  const frameRef = react.useRef(null);
+  const onDisconnectRef = react.useRef(onDisconnect);
+  onDisconnectRef.current = onDisconnect;
+  const objectUrlRef = react.useRef(null);
+  const [state, setState] = react.useState("connecting");
+  const [frame2, setFrame] = react.useState(null);
+  const [tabs, setTabs] = react.useState([]);
+  const [nav, setNav] = react.useState({ url: "", title: "" });
+  const [menuOpen, setMenuOpen] = react.useState(false);
+  react.useEffect(() => {
+    setState("connecting");
+    let disposed = false;
+    const socket = new WebSocket(toWsUrl(src));
+    socketRef.current = socket;
+    socket.onopen = () => {
+      if (!disposed) setState("connected");
+    };
+    socket.onerror = () => {
+      if (!disposed) setState("disconnected");
+    };
+    socket.onclose = (event) => {
+      if (disposed) return;
+      setState("disconnected");
+      onDisconnectRef.current?.(event?.wasClean ?? false);
+    };
+    socket.onmessage = (event) => {
+      if (disposed) return;
+      const data = event.data;
+      if (typeof data !== "string") {
+        const next = URL.createObjectURL(
+          data instanceof Blob ? data : new Blob([data])
+        );
+        if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+        objectUrlRef.current = next;
+        setFrame(next);
+        return;
+      }
+      let message;
+      try {
+        message = JSON.parse(data);
+      } catch {
+        return;
+      }
+      if (message.t === "tabs") {
+        const next = message.tabs ?? [];
+        setTabs(next);
+        const active = next.find((tab) => tab.active);
+        if (active) setNav({ url: active.url, title: active.title });
+      } else if (message.t === "nav") {
+        setNav({
+          url: String(message.url ?? ""),
+          title: String(message.title ?? "")
+        });
+      }
+    };
+    return () => {
+      disposed = true;
+      socket.onopen = null;
+      socket.onmessage = null;
+      socket.onclose = null;
+      socket.onerror = null;
+      socket.close();
+      if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+      objectUrlRef.current = null;
+      socketRef.current = null;
+    };
+  }, [src]);
+  const send = react.useCallback((message) => {
+    const socket = socketRef.current;
+    if (!socket || socket.readyState !== WebSocket.OPEN) return;
+    socket.send(JSON.stringify(message));
+  }, []);
+  const command = react.useCallback(
+    (message) => {
+      if (!hasControl) return;
+      send(message);
+    },
+    [hasControl, send]
+  );
+  const pointerToPage = (event) => {
+    const image = frameRef.current;
+    if (!image) return null;
+    return normalizePoint(
+      event.clientX,
+      event.clientY,
+      image.getBoundingClientRect(),
+      image.naturalWidth,
+      image.naturalHeight
+    );
+  };
+  const handleKeyDown = (event) => {
+    if (!hasControl) return;
+    if (NAMED_KEYS.has(event.key)) {
+      event.preventDefault();
+      command({
+        t: "key",
+        key: event.key,
+        mods: {
+          shift: event.shiftKey,
+          ctrl: event.ctrlKey,
+          alt: event.altKey,
+          meta: event.metaKey
+        }
+      });
+      return;
+    }
+    if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+      event.preventDefault();
+      command({ t: "type", text: event.key });
+    }
+  };
+  const { origin, rest } = hostOf(nav.url);
+  const showTabs = tabs.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": testId,
+      className: "flex h-full min-h-0 flex-col bg-background",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-11 items-center gap-1.5 border-b border-line bg-card px-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Back",
+              className: ICON,
+              disabled: !hasControl,
+              onClick: () => command({ t: "back" }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Forward",
+              className: ICON,
+              disabled: !hasControl,
+              onClick: () => command({ t: "forward" }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Reload",
+              className: ICON,
+              disabled: !hasControl,
+              onClick: () => command({ t: "reload" }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(Reload, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-testid": "browser-shell-control",
+              "aria-label": hasControl ? "Return control" : "Take control",
+              "aria-pressed": hasControl,
+              onClick: onToggleControl,
+              className: hasControl ? "flex size-[26px] shrink-0 items-center justify-center rounded-[5px] bg-[#F5A524] text-black" : ICON,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Pointer, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-testid": "browser-shell-url",
+              className: "flex h-7 min-w-0 flex-grow items-center gap-1.5 rounded-md border border-line bg-background px-2.5 text-[11px] text-foreground",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `size-1.5 shrink-0 rounded-full ${state === "connected" ? "bg-emerald-500" : "bg-muted-foreground"}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
+                  origin,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: rest })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "More",
+                className: ICON,
+                onClick: () => setMenuOpen((open) => !open),
+                children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {})
+              }
+            ),
+            menuOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "data-testid": "browser-shell-menu",
+                className: "absolute right-0 top-8 z-10 min-w-36 rounded-md border border-line bg-card py-1 text-xs shadow-md",
+                children: [
+                  onMaximize && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "block w-full px-3 py-1.5 text-left hover:bg-secondary",
+                      onClick: () => {
+                        setMenuOpen(false);
+                        onMaximize();
+                      },
+                      children: "Maximize"
+                    }
+                  ),
+                  onClose && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "block w-full px-3 py-1.5 text-left hover:bg-secondary",
+                      onClick: () => {
+                        setMenuOpen(false);
+                        onClose();
+                      },
+                      children: "Close browser"
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] }),
+        showTabs && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-testid": "browser-shell-tabs",
+            className: "flex min-h-[34px] items-center gap-0.5 border-b border-line bg-card px-1.5",
+            children: tabs.map((tab) => (
+              // A div, not a button: the close control nests inside, and a
+              // button inside a button is invalid markup.
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  role: "tab",
+                  tabIndex: 0,
+                  "aria-selected": tab.active,
+                  "data-testid": "browser-shell-tab",
+                  onClick: () => send({ t: "switch_tab", id: tab.id }),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter") send({ t: "switch_tab", id: tab.id });
+                  },
+                  className: `flex h-6 max-w-33 cursor-pointer items-center gap-1 truncate rounded px-2 text-[11px] ${tab.active ? "bg-secondary text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tab.title || tab.url }),
+                    hasControl && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "data-testid": "browser-shell-tab-close",
+                        "aria-label": `Close ${tab.title || tab.url}`,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          command({ t: "close_tab", id: tab.id });
+                        },
+                        className: "flex size-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-secondary hover:text-foreground",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(XSmall, {})
+                      }
+                    )
+                  ]
+                },
+                tab.id
+              )
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `relative min-h-0 flex-1 bg-black ${hasControl ? "ring-2 ring-inset ring-[#F5A524]" : ""}`,
+            tabIndex: hasControl ? 0 : -1,
+            onKeyDown: handleKeyDown,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  ref: frameRef,
+                  "data-testid": "browser-shell-frame",
+                  alt: "",
+                  src: frame2 ?? void 0,
+                  draggable: false,
+                  className: "h-full w-full object-contain",
+                  onMouseDown: (event) => {
+                    const point = pointerToPage(event);
+                    if (point) command({ t: "click", ...point, count: event.detail || 1 });
+                  },
+                  onWheel: (event) => {
+                    const point = pointerToPage(event);
+                    if (point) {
+                      command({
+                        t: "scroll",
+                        ...point,
+                        dx: event.deltaX,
+                        dy: event.deltaY
+                      });
+                    }
+                  }
+                }
+              ),
+              state !== "connected" && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-testid": "browser-shell-overlay",
+                  className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/70 text-sm text-muted-foreground",
+                  children: state === "connecting" ? "Connecting to browser\u2026" : "Browser disconnected."
+                }
+              ),
+              hasControl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-full bg-black/85 px-3 py-1 text-[11px] font-medium text-amber-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Pointer, {}),
+                "You have control \xB7 click the pointer to return"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var svg = {
+  width: 14,
+  height: 14,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+var ChevronLeft = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...svg, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) });
+var ChevronRight = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...svg, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) });
+var Reload = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svg, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v5h5" })
+] });
+var Pointer = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svg, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.586 12.586 19 19" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z" })
+] });
+var XSmall = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svg, width: 10, height: 10, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+] });
+var Ellipsis = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svg, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "12", r: "1" })
+] });
+function useBrowserControl({
+  sessionId,
+  hasControl,
+  adapter,
+  onControlAcquired,
+  onControlReleased,
+  onClose
+}) {
+  const [pending, setPending] = react.useState(false);
+  const [confirmOpen, setConfirmOpen] = 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);
+        onControlReleased?.();
+      } else {
+        await adapter.acquireBrowserControl(sessionId);
+        onControlAcquired?.();
+      }
+    } catch (nextError) {
+      setError(nextError.message);
+    } finally {
+      setPending(false);
+    }
+  }
+  async function handleConfirmClose() {
+    setError(null);
+    try {
+      if (hasControl) {
+        try {
+          await adapter.releaseBrowserControl(sessionId);
+          onControlReleased?.();
+        } catch (releaseError) {
+          console.error(
+            "Failed to release browser control before close",
+            releaseError
+          );
+        }
+      }
+      if (adapter.closeBrowserSession) {
+        await adapter.closeBrowserSession(sessionId);
+      }
+      setConfirmOpen(false);
+      onClose?.();
+    } catch (nextError) {
+      setError(nextError.message);
+      throw nextError;
+    }
+  }
+  return {
+    pending,
+    error,
+    confirmOpen,
+    setConfirmOpen,
+    toggleControl,
+    handleConfirmClose
+  };
+}
 
 // src/components/ui/button.tsx
 init_utils();
@@ -449,375 +924,34 @@ function ConfirmDialog({
     }
   );
 }
-function BrowserControlBar({
+function BrowserPane({
   sessionId,
-  hasControl,
-  adapter,
-  onControlAcquired,
-  onControlReleased,
-  onClose
-}) {
-  const [pending, setPending] = react.useState(false);
-  const [confirmOpen, setConfirmOpen] = 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);
-        onControlReleased?.();
-      } else {
-        await adapter.acquireBrowserControl(sessionId);
-        onControlAcquired?.();
-      }
-    } catch (nextError) {
-      setError(nextError.message);
-    } finally {
-      setPending(false);
-    }
-  }
-  async function handleConfirmClose() {
-    setError(null);
-    try {
-      if (hasControl) {
-        try {
-          await adapter.releaseBrowserControl(sessionId);
-          onControlReleased?.();
-        } catch (releaseError) {
-          console.error(
-            "Failed to release browser control before close",
-            releaseError
-          );
-        }
-      }
-      if (adapter.closeBrowserSession) {
-        await adapter.closeBrowserSession(sessionId);
-      }
-      setConfirmOpen(false);
-      onClose?.();
-    } catch (nextError) {
-      setError(nextError.message);
-      throw nextError;
-    }
-  }
-  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"
-        ]
-      }
-    ),
-    onClose && /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        type: "button",
-        size: "xs",
-        variant: "secondary",
-        disabled: !sessionId,
-        onClick: () => {
-          setError(null);
-          setConfirmOpen(true);
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3", "aria-hidden": "true" }),
-          "Close"
-        ]
-      }
-    ),
-    /* @__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 }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ConfirmDialog,
-      {
-        open: confirmOpen,
-        title: "Close browser session?",
-        description: adapter.closeBrowserSession ? "This permanently shuts down the browser sandbox for this session. The agent will lose access to the page until it re-opens a browser. This cannot be undone." : "This hides the browser panel. The sandbox stays running so the agent can keep using it.",
-        confirmLabel: "Close browser",
-        variant: "destructive",
-        confirmIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3.5", "aria-hidden": "true" }),
-        onConfirm: handleConfirmClose,
-        onCancel: () => setConfirmOpen(false)
-      }
-    )
-  ] });
-}
-var MIN_ZOOM = 1;
-var MAX_ZOOM = 3;
-var ZOOM_STEP = 0.5;
-function clampZoom(zoom) {
-  const bounded = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
-  return Math.round(bounded * 100) / 100;
-}
-function toWsUrl(src) {
-  const url = new URL(src, window.location.href);
-  if (url.protocol === "http:") {
-    url.protocol = "ws:";
-  } else if (url.protocol === "https:") {
-    url.protocol = "wss:";
-  }
-  return url.toString();
-}
-function BrowserLiveView({
-  src,
-  testId = "browser-rfb",
-  onDisconnect
-}) {
-  const containerRef = react.useRef(null);
-  const onDisconnectRef = react.useRef(onDisconnect);
-  onDisconnectRef.current = onDisconnect;
-  const [state, setState] = react.useState("connecting");
-  const [zoom, setZoom] = react.useState(MIN_ZOOM);
-  react.useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    setState("connecting");
-    setZoom(MIN_ZOOM);
-    let rfb;
-    let disposed = false;
-    const handleConnect = () => setState("connected");
-    const handleDisconnect = (event) => {
-      const detail = event.detail;
-      setState("disconnected");
-      onDisconnectRef.current?.(detail?.clean ?? false);
-    };
-    void import('@novnc/novnc').then((mod) => {
-      if (disposed || !containerRef.current) return;
-      const instance = new mod.default(containerRef.current, toWsUrl(src), {
-        wsProtocols: ["binary"]
-      });
-      instance.viewOnly = false;
-      instance.scaleViewport = true;
-      instance.addEventListener("connect", handleConnect);
-      instance.addEventListener("disconnect", handleDisconnect);
-      rfb = instance;
-    }).catch(() => {
-      if (!disposed) setState("disconnected");
-    });
-    return () => {
-      disposed = true;
-      if (rfb) {
-        rfb.removeEventListener("connect", handleConnect);
-        rfb.removeEventListener("disconnect", handleDisconnect);
-        rfb.disconnect();
-      }
-    };
-  }, [src]);
-  const keepCanvasFocus = (event) => event.preventDefault();
-  const zoomTo = (next) => setZoom((current) => clampZoom(next || current));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-full bg-black", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: containerRef,
-        "data-testid": testId,
-        style: { width: `${zoom * 100}%`, height: `${zoom * 100}%` }
-      }
-    ) }),
-    state === "connected" && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-testid": "browser-rfb-zoom",
-        className: "absolute bottom-3 right-3 flex items-center gap-0.5 rounded-md border border-line bg-card/90 p-0.5 text-muted-foreground shadow-sm backdrop-blur",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              tabIndex: -1,
-              "aria-label": "Zoom out",
-              disabled: zoom <= MIN_ZOOM,
-              onMouseDown: keepCanvasFocus,
-              onClick: () => zoomTo(zoom - ZOOM_STEP),
-              className: "flex size-6 items-center justify-center rounded text-sm leading-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40",
-              children: "\u2212"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              tabIndex: -1,
-              "aria-label": "Reset zoom",
-              disabled: zoom === MIN_ZOOM,
-              onMouseDown: keepCanvasFocus,
-              onClick: () => setZoom(MIN_ZOOM),
-              className: "min-w-10 rounded px-1 text-center text-xs tabular-nums hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none",
-              children: [
-                Math.round(zoom * 100),
-                "%"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              tabIndex: -1,
-              "aria-label": "Zoom in",
-              disabled: zoom >= MAX_ZOOM,
-              onMouseDown: keepCanvasFocus,
-              onClick: () => zoomTo(zoom + ZOOM_STEP),
-              className: "flex size-6 items-center justify-center rounded text-sm leading-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40",
-              children: "+"
-            }
-          )
-        ]
-      }
-    ),
-    state !== "connected" && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-testid": "browser-rfb-overlay",
-        className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/70 text-sm text-muted-foreground",
-        children: state === "connecting" ? "Connecting to browser\u2026" : "Live view disconnected \u2014 take control again to reconnect."
-      }
-    )
-  ] });
-}
-
-// src/components/browser/browser-status-dot.tsx
-init_utils();
-function BrowserStatusDot({
-  status
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: cn(
-        "inline-block size-2 shrink-0 rounded-full",
-        status === "live" && "bg-emerald-500",
-        status === "user-control" && "bg-amber-500",
-        status === "provisioning" && "animate-pulse bg-sky-500",
-        status === "closed" && "bg-muted-foreground"
-      )
-    }
-  );
-}
-
-// src/components/ui/tooltip.tsx
-init_utils();
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Tooltip.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Root, { "data-slot": "tooltip", ...props });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  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,
+  state,
   adapter,
   onClose
 }) {
   const [fullscreenOpen, setFullscreenOpen] = react.useState(false);
   const [openFullscreenOnControl, setOpenFullscreenOnControl] = react.useState(false);
   const [localControlActive, setLocalControlActive] = react.useState(false);
-  const [previewSnapshot, setPreviewSnapshot] = react.useState(null);
-  const [previewLoading, setPreviewLoading] = react.useState(false);
-  const [previewError, setPreviewError] = react.useState(null);
-  const hasLiveViewAdapter = typeof adapter.browserLiveViewUrl === "function";
-  const hasPreviewAdapter = typeof adapter.getBrowserPreviewSnapshot === "function";
+  const hasShellAdapter = typeof adapter.browserShellUrl === "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 shellUrl = react.useMemo(() => {
+    if (!hasShellAdapter) return "";
+    return adapter.browserShellUrl(sessionId);
+  }, [adapter, hasShellAdapter, sessionId]);
   const hasLiveView = state.status !== "provisioning" && state.status !== "closed";
-  const hasUserControl = localControlActive;
-  const canUseLiveView = hasLiveView && hasUserControl && Boolean(liveViewUrl);
-  const canOpenPreview = hasLiveView && (hasPreviewAdapter || canUseLiveView);
-  const canOpenFullscreen = canOpenPreview;
-  const refreshPreview = react.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]
-  );
+  const canUseShell = hasLiveView && Boolean(shellUrl);
   react.useEffect(() => {
     setFullscreenOpen(false);
     setOpenFullscreenOnControl(false);
     setLocalControlActive(false);
-    setPreviewSnapshot(null);
-    setPreviewLoading(false);
-    setPreviewError(null);
   }, [sessionId]);
   react.useEffect(() => {
     if (!openFullscreenOnControl) return;
-    if (!canUseLiveView) return;
+    if (!canUseShell) return;
     setFullscreenOpen(true);
     setOpenFullscreenOnControl(false);
-  }, [canUseLiveView, openFullscreenOnControl]);
+  }, [canUseShell, openFullscreenOnControl]);
   const handleFullscreenOpenChange = react.useCallback(
     (open) => {
       setFullscreenOpen(open);
@@ -825,7 +959,7 @@ function BrowserPane({
     []
   );
   react.useEffect(() => {
-    if (!canUseLiveView || !hasControlAdapter) return;
+    if (!localControlActive || !hasControlAdapter) return;
     const handle = window.setInterval(() => {
       void adapter.acquireBrowserControl(sessionId).catch((error) => {
         console.error("Failed to refresh browser control", error);
@@ -833,30 +967,31 @@ function BrowserPane({
       });
     }, 25e3);
     return () => window.clearInterval(handle);
-  }, [adapter, canUseLiveView, hasControlAdapter, sessionId]);
-  react.useEffect(() => {
-    if (!hasLiveView || canUseLiveView) {
-      setPreviewLoading(false);
-      setPreviewError(null);
-      return;
+  }, [adapter, localControlActive, hasControlAdapter, sessionId]);
+  const control = useBrowserControl({
+    sessionId,
+    hasControl: localControlActive,
+    adapter,
+    onControlAcquired: () => {
+      setLocalControlActive(true);
+      setOpenFullscreenOnControl(true);
+    },
+    onControlReleased: () => setLocalControlActive(false),
+    onClose
+  });
+  const shell = (testId) => /* @__PURE__ */ jsxRuntime.jsx(
+    BrowserShell,
+    {
+      src: shellUrl,
+      testId,
+      hasControl: localControlActive,
+      onToggleControl: hasControlAdapter ? () => void control.toggleControl() : void 0,
+      onClose: onClose ? () => control.setConfirmOpen(true) : void 0,
+      onMaximize: fullscreenOpen ? void 0 : () => setFullscreenOpen(true),
+      onDisconnect: () => setLocalControlActive(false)
     }
-    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
-  ]);
+  );
+  const placeholder = (message) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: message });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -864,56 +999,8 @@ function BrowserPane({
         "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." }) : canUseLiveView ? /* @__PURE__ */ jsxRuntime.jsx(
-            BrowserLiveView,
-            {
-              src: liveViewUrl,
-              onDisconnect: () => setLocalControlActive(false)
-            }
-          ) : previewSnapshot ? /* @__PURE__ */ jsxRuntime.jsx(
-            BrowserPreviewImage,
-            {
-              src: previewSnapshot.src,
-              fit: "contain",
-              testId: "browser-preview-image"
-            }
-          ) : previewLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Loading browser preview..." }) : previewError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: previewError }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            BrowserControlBar,
-            {
-              sessionId,
-              hasControl: localControlActive,
-              adapter,
-              onControlAcquired: () => {
-                setLocalControlActive(true);
-                setOpenFullscreenOnControl(true);
-              },
-              onControlReleased: () => setLocalControlActive(false),
-              onClose
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: state.status === "provisioning" ? placeholder("Starting browser...") : state.status === "closed" ? placeholder("Browser closed.") : canUseShell ? shell() : placeholder("Browser view is unavailable.") }),
+          control.error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-line bg-card px-3 py-1.5 text-[11px] text-destructive", children: control.error })
         ]
       }
     ),
@@ -923,50 +1010,72 @@ function BrowserPane({
         "aria-describedby": void 0,
         className: "flex h-dvh 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: canUseLiveView ? /* @__PURE__ */ jsxRuntime.jsx(
-            BrowserLiveView,
-            {
-              src: liveViewUrl,
-              testId: "browser-fullscreen-rfb",
-              onDisconnect: () => setLocalControlActive(false)
-            }
-          ) : previewSnapshot ? /* @__PURE__ */ jsxRuntime.jsx(
-            BrowserPreviewImage,
-            {
-              src: previewSnapshot.src,
-              fit: "contain",
-              testId: "browser-fullscreen-preview-image"
-            }
-          ) : previewLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Loading browser preview..." }) : previewError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: previewError }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser preview is unavailable." }) })
+          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Browser" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: canUseShell ? shell("browser-fullscreen-shell") : placeholder("Browser view is unavailable.") })
         ]
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmDialog,
+      {
+        open: control.confirmOpen,
+        title: "Close browser session?",
+        description: adapter.closeBrowserSession ? "This permanently shuts down the browser sandbox for this session. The agent will lose access to the page until it re-opens a browser. This cannot be undone." : "This hides the browser panel. The sandbox stays running so the agent can keep using it.",
+        confirmLabel: "Close browser",
+        variant: "destructive",
+        onConfirm: control.handleConfirmClose,
+        onCancel: () => control.setConfirmOpen(false)
+      }
+    )
   ] });
 }
-function BrowserPreviewImage({
-  src,
-  fit,
-  testId
+var POLL_MS = 15e3;
+var MAX_FAILURES = 3;
+function useBrowserPreview({
+  adapter,
+  sessionId,
+  enabled
 }) {
-  return /* @__PURE__ */ jsxRuntime.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
+  const [src, setSrc] = react.useState(null);
+  const adapterRef = react.useRef(adapter);
+  adapterRef.current = adapter;
+  react.useEffect(() => {
+    if (!enabled || !sessionId) {
+      setSrc(null);
+      return;
     }
-  );
+    let cancelled = false;
+    let failures = 0;
+    let timer = 0;
+    const refresh = async () => {
+      if (document.hidden) return;
+      const fetchSnapshot = adapterRef.current.getBrowserPreviewSnapshot;
+      if (typeof fetchSnapshot !== "function") return;
+      try {
+        const snapshot = await fetchSnapshot(sessionId);
+        if (cancelled) return;
+        if (!snapshot) {
+          window.clearInterval(timer);
+          return;
+        }
+        failures = 0;
+        if (snapshot.src) setSrc(snapshot.src);
+      } catch {
+        if (cancelled) return;
+        failures += 1;
+        if (failures >= MAX_FAILURES) {
+          window.clearInterval(timer);
+        }
+      }
+    };
+    void refresh();
+    timer = window.setInterval(() => void refresh(), POLL_MS);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [enabled, sessionId]);
+  return src;
 }
 
 // src/components/ai-elements/conversation.tsx
@@ -1073,15 +1182,64 @@ function ButtonGroup({
   );
 }
 
-// src/components/ai-elements/message.tsx
+// src/components/ui/tooltip.tsx
 init_utils();
-
-// src/lib/oauth-popup.ts
-function openOAuthPopup(url) {
-  const w = 600;
-  const h = 720;
-  const dualLeft = window.screenLeft ?? window.screenX ?? 0;
-  const dualTop = window.screenTop ?? window.screenY ?? 0;
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  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" })
+      ]
+    }
+  ) });
+}
+
+// src/components/ai-elements/message.tsx
+init_utils();
+
+// src/lib/oauth-popup.ts
+function openOAuthPopup(url) {
+  const w = 600;
+  const h = 720;
+  const dualLeft = window.screenLeft ?? window.screenX ?? 0;
+  const dualTop = window.screenTop ?? window.screenY ?? 0;
   const width = window.innerWidth || document.documentElement.clientWidth || w;
   const height = window.innerHeight || document.documentElement.clientHeight || h;
   const left = dualLeft + Math.max(0, (width - w) / 2);
@@ -2883,6 +3041,25 @@ function hostname(url) {
 function truncate2(s, n) {
   return s.length > n ? `${s.slice(0, n)}\u2026` : s;
 }
+function KnowledgeBaseToolBlock({ tc }) {
+  const args = parseArgs(tc.args) ?? {};
+  const label = {
+    kb_search_pages: "KB Search",
+    kb_list_pages: "KB Browse",
+    kb_read_page: "KB Read"
+  }[tc.toolName] ?? tc.toolName;
+  let detail = "";
+  if (tc.toolName === "kb_search_pages" && args.query) {
+    detail = `\u201C${truncate2(args.query, 60)}\u201D`;
+  } else if (tc.toolName === "kb_read_page" && args.path) {
+    detail = args.pages ? `${args.path} \xB7 pages ${args.pages}` : args.path;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm py-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LibraryIcon, { className: "size-3.5 text-muted-foreground/60 shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: label }),
+    detail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/70 truncate text-xs", children: detail })
+  ] });
+}
 function VisionAnalyzeBlock({ tc }) {
   let image = "";
   try {
@@ -5197,6 +5374,10 @@ function ToolCallBlock({
     case "web_search":
     case "web_crawl":
       return /* @__PURE__ */ jsxRuntime.jsx(WebToolBlock, { tc });
+    case "kb_search_pages":
+    case "kb_list_pages":
+    case "kb_read_page":
+      return /* @__PURE__ */ jsxRuntime.jsx(KnowledgeBaseToolBlock, { tc });
     case "vision_analyze":
       return /* @__PURE__ */ jsxRuntime.jsx(VisionAnalyzeBlock, { tc });
     case "read_file":
@@ -10250,6 +10431,75 @@ function ChatComposerInner({
     }
   );
 }
+
+// src/components/chat/session-pane-card.tsx
+init_utils();
+function SessionPaneCard({
+  title,
+  subtitle,
+  thumbnail,
+  count,
+  icon: Icon = lucideReact.GlobeIcon,
+  onOpen,
+  testId = "session-pane-card",
+  className,
+  expanded
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-testid": testId,
+      "aria-label": `Open ${title}`,
+      "aria-expanded": expanded === void 0 ? void 0 : expanded,
+      onClick: onOpen,
+      className: cn(
+        // No radius here: the caller sets it. Declaring rounded-xl in the base
+        // and cancelling the bottom from a className leaves both rules live,
+        // and which corner wins comes down to stylesheet order rather than
+        // intent -- which is how the stacked cards kept round bottoms.
+        "flex w-full items-center gap-3 border border-line px-3 py-3.5 text-left transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      children: [
+        thumbnail ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            "data-testid": "session-pane-card-thumb",
+            src: thumbnail,
+            alt: "",
+            className: "h-11 w-16 shrink-0 rounded-md border border-line object-cover object-top"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            "data-testid": "session-pane-card-icon",
+            className: "size-5 shrink-0 text-muted-foreground",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 text-sm font-medium text-foreground", children: [
+            title,
+            count !== void 0 && count > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-secondary px-1.5 text-[11px] font-normal text-muted-foreground", children: count })
+          ] }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })
+        ] }),
+        expanded !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ChevronDownIcon,
+          {
+            "data-testid": "session-pane-card-chevron",
+            className: cn(
+              "ml-auto size-4 shrink-0 text-muted-foreground transition-transform",
+              expanded && "rotate-180"
+            ),
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
 var MAX_LOGOS = 10;
 function IntegrationsBand({
   agentId,
@@ -10836,9 +11086,9 @@ function ArtifactTable({ spec }) {
 init_utils();
 var DEFAULT_HEIGHT_PX = 480;
 var EXPANDED_HEIGHT_PX = 800;
-var MIN_ZOOM2 = 0.5;
-var MAX_ZOOM2 = 2;
-var ZOOM_STEP2 = 0.1;
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 2;
+var ZOOM_STEP = 0.1;
 var SAFETY_STYLE_PREAMBLE = "<style>html,body{max-height:100vh}canvas{max-height:80vh!important}</style>";
 function injectSafetyStyle(html) {
   const headCloseIdx = html.search(/<\/head\s*>/i);
@@ -10855,7 +11105,7 @@ function ArtifactHtml({
   const [zoom, setZoom] = react.useState(1);
   const safeSrcdoc = react.useMemo(() => injectSafetyStyle(spec.html), [spec.html]);
   const viewportHeight = expanded ? EXPANDED_HEIGHT_PX : DEFAULT_HEIGHT_PX;
-  const clamp4 = (v) => Math.round(Math.min(MAX_ZOOM2, Math.max(MIN_ZOOM2, v)) * 100) / 100;
+  const clamp4 = (v) => Math.round(Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, v)) * 100) / 100;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -10901,8 +11151,8 @@ function ArtifactHtml({
               "button",
               {
                 type: "button",
-                onClick: () => setZoom((z) => clamp4(z - ZOOM_STEP2)),
-                disabled: zoom <= MIN_ZOOM2,
+                onClick: () => setZoom((z) => clamp4(z - ZOOM_STEP)),
+                disabled: zoom <= MIN_ZOOM,
                 className: "hover:text-foreground disabled:opacity-40 cursor-pointer",
                 "aria-label": "zoom out",
                 children: "\u2212"
@@ -10925,8 +11175,8 @@ function ArtifactHtml({
               "button",
               {
                 type: "button",
-                onClick: () => setZoom((z) => clamp4(z + ZOOM_STEP2)),
-                disabled: zoom >= MAX_ZOOM2,
+                onClick: () => setZoom((z) => clamp4(z + ZOOM_STEP)),
+                disabled: zoom >= MAX_ZOOM,
                 className: "hover:text-foreground disabled:opacity-40",
                 "aria-label": "zoom in",
                 children: "+"
@@ -11427,748 +11677,297 @@ var InsufficientCreditsCard = react.memo(function InsufficientCreditsCard2({
   );
 });
 init_utils();
-var SKELETON_WIDTHS = [70, 85, 55, 90, 60, 78, 45, 82, 65, 72];
-var PDF_WORKER_SRC = new URL(
-  "pdfjs-dist/legacy/build/pdf.worker.mjs",
-  (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))
-).toString();
-function FileViewer({
-  file,
-  loading,
-  error,
-  downloadUrl,
-  onDelete,
-  onClose,
-  hideHeader = false
+var _EXTENSION_KIND = {
+  // Documents
+  pdf: { icon: lucideReact.FileTextIcon, typeLabel: "PDF" },
+  doc: { icon: lucideReact.FileTextIcon, typeLabel: "Word document" },
+  docx: { icon: lucideReact.FileTextIcon, typeLabel: "Word document" },
+  odt: { icon: lucideReact.FileTextIcon, typeLabel: "OpenDocument text" },
+  rtf: { icon: lucideReact.FileTextIcon, typeLabel: "Rich text" },
+  txt: { icon: lucideReact.FileTextIcon, typeLabel: "Text" },
+  md: { icon: lucideReact.FileTextIcon, typeLabel: "Markdown" },
+  // Spreadsheets
+  xls: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "Spreadsheet" },
+  xlsx: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "Spreadsheet" },
+  ods: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "OpenDocument spreadsheet" },
+  csv: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "CSV" },
+  tsv: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "TSV" },
+  // Presentations / charts
+  ppt: { icon: lucideReact.FileChartLineIcon, typeLabel: "Presentation" },
+  pptx: { icon: lucideReact.FileChartLineIcon, typeLabel: "Presentation" },
+  // Images
+  png: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
+  jpg: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
+  jpeg: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
+  gif: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
+  svg: { icon: lucideReact.FileImageIcon, typeLabel: "SVG image" },
+  webp: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
+  bmp: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
+  // Audio / video
+  mp3: { icon: lucideReact.FileAudioIcon, typeLabel: "Audio" },
+  wav: { icon: lucideReact.FileAudioIcon, typeLabel: "Audio" },
+  ogg: { icon: lucideReact.FileAudioIcon, typeLabel: "Audio" },
+  mp4: { icon: lucideReact.FileVideoIcon, typeLabel: "Video" },
+  mov: { icon: lucideReact.FileVideoIcon, typeLabel: "Video" },
+  webm: { icon: lucideReact.FileVideoIcon, typeLabel: "Video" },
+  // Archives
+  zip: { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
+  tar: { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
+  gz: { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
+  bz2: { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
+  "7z": { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
+  // Code
+  py: { icon: lucideReact.FileCodeIcon, typeLabel: "Python" },
+  js: { icon: lucideReact.FileCodeIcon, typeLabel: "JavaScript" },
+  ts: { icon: lucideReact.FileCodeIcon, typeLabel: "TypeScript" },
+  tsx: { icon: lucideReact.FileCodeIcon, typeLabel: "TypeScript" },
+  jsx: { icon: lucideReact.FileCodeIcon, typeLabel: "JavaScript" },
+  json: { icon: lucideReact.FileCodeIcon, typeLabel: "JSON" },
+  yaml: { icon: lucideReact.FileCodeIcon, typeLabel: "YAML" },
+  yml: { icon: lucideReact.FileCodeIcon, typeLabel: "YAML" },
+  toml: { icon: lucideReact.FileCodeIcon, typeLabel: "TOML" },
+  sh: { icon: lucideReact.CodeIcon, typeLabel: "Shell" },
+  rs: { icon: lucideReact.FileCodeIcon, typeLabel: "Rust" },
+  go: { icon: lucideReact.FileCodeIcon, typeLabel: "Go" },
+  rb: { icon: lucideReact.FileCodeIcon, typeLabel: "Ruby" },
+  java: { icon: lucideReact.FileCodeIcon, typeLabel: "Java" },
+  cpp: { icon: lucideReact.FileCodeIcon, typeLabel: "C++" },
+  c: { icon: lucideReact.FileCodeIcon, typeLabel: "C" },
+  html: { icon: lucideReact.FileCodeIcon, typeLabel: "HTML" },
+  css: { icon: lucideReact.FileCodeIcon, typeLabel: "CSS" },
+  scss: { icon: lucideReact.FileCodeIcon, typeLabel: "Sass" },
+  sql: { icon: lucideReact.FileCodeIcon, typeLabel: "SQL" }
+};
+function _extension(path) {
+  const idx = path.lastIndexOf(".");
+  if (idx < 0 || idx === path.length - 1) return "";
+  return path.slice(idx + 1).toLowerCase();
+}
+function _fileKindFor(path) {
+  const ext = _extension(path);
+  return _EXTENSION_KIND[ext] ?? { icon: lucideReact.FileIcon, typeLabel: "File" };
+}
+function _basename(path) {
+  const idx = path.lastIndexOf("/");
+  return idx >= 0 ? path.slice(idx + 1) : path;
+}
+function WorkspaceFileCard({
+  sessionId,
+  path,
+  label
 }) {
-  const visible = loading || file !== null || error !== null;
-  if (!visible) return null;
-  const fileName2 = file?.path.split("/").pop() ?? "File";
-  const lang = file ? getLanguageHint(file.path) : "";
-  const isPdf = file?.mime_type === "application/pdf" || file?.path.toLowerCase().endsWith(".pdf") || false;
-  const isImage = file?.encoding === "base64" && !isPdf;
-  const HeaderIcon = isImage ? lucideReact.ImageIcon : lucideReact.FileTextIcon;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col border-t border-line", children: [
-    !hideHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-line px-3 py-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(HeaderIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs font-medium", children: fileName2 }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate text-[10px] text-muted-foreground", children: [
-          file?.path ?? "Loading...",
-          file && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1.5", children: [
-            formatFileSize(file.size),
-            file.truncated && " (truncated)"
-          ] })
-        ] })
-      ] }),
-      downloadUrl && /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: downloadUrl,
-          download: fileName2,
-          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-          "aria-label": `Download ${fileName2}`,
-          title: "Download",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { className: "size-3.5" })
-        }
-      ),
-      onDelete && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onDelete,
-          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
-          "aria-label": `Delete ${fileName2}`,
-          title: "Delete",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, { className: "size-3.5" })
+  const { adapter, onFileSelect } = useAgentChatAdapterContext();
+  const kind = _fileKindFor(path);
+  const Icon = kind.icon;
+  const downloadUrl = adapter.getWorkspaceDownloadUrl({ sessionId, path });
+  const downloadName = _basename(path) || label;
+  const handleCardClick = react.useCallback(() => {
+    onFileSelect?.(path);
+  }, [onFileSelect, path]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: handleCardClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleCardClick();
         }
+      },
+      className: cn(
+        "group/file flex items-center gap-3 rounded-lg border border-border",
+        "bg-muted/20 px-3 py-2 text-left transition-colors",
+        "cursor-pointer hover:bg-muted/40"
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-          "aria-label": "Close file",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3.5" })
-        }
-      )
-    ] }),
-    file && isPdf && file.encoding === "base64" ? (
-      // PDF has its own scrollable container — bypass ScrollArea so
-      // it can grow with the parent's flex height (Radix Viewport's
-      // internal table wrapper sizes to content and breaks h-full).
-      /* @__PURE__ */ jsxRuntime.jsx(PdfPreview, { file, fileName: fileName2 })
-    ) : /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: "min-h-0 flex-1", children: [
-      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5 p-3", children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        Skeleton,
-        {
-          className: "h-3.5 rounded",
-          style: {
-            width: `${SKELETON_WIDTHS[index % SKELETON_WIDTHS.length]}%`
-          }
-        },
-        index
-      )) }),
-      error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
-      ] }),
-      file && isPdf && file.encoding !== "base64" && /* @__PURE__ */ jsxRuntime.jsx(FileViewerError, { message: "PDF preview requires base64 file content." }),
-      file && isImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: `data:${file.mime_type ?? "image/png"};base64,${file.content}`,
-          alt: fileName2,
-          className: "max-h-[60vh] max-w-full rounded object-contain"
-        }
-      ) }),
-      file && !isImage && !isPdf && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "wrap-break-word whitespace-pre-wrap p-3 text-[11px] leading-relaxed text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("code", { "data-language": lang, children: file.content }) })
-    ] })
-  ] });
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-5 text-muted-foreground", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium text-foreground", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: kind.typeLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: downloadUrl,
+            download: downloadName,
+            onClick: (e) => e.stopPropagation(),
+            className: cn(
+              "shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border",
+              "bg-background px-2.5 py-1.5 text-xs font-medium text-foreground",
+              "transition-colors hover:bg-muted"
+            ),
+            "aria-label": `Download ${downloadName}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { className: "size-4", "aria-hidden": true }),
+              "Download"
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-function FileViewerError({ message }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: message })
-  ] });
+function scrollToArtifactBlock(artifactId) {
+  document.querySelector(`[data-artifact-anchor="${CSS.escape(artifactId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "center" });
 }
-function PdfPreview({
-  file,
-  fileName: fileName2
+function ArtifactRefCard({
+  artifactId,
+  name,
+  kind
 }) {
-  const containerRef = react.useRef(null);
-  const viewerRef = react.useRef(null);
-  const pdfViewerRef = react.useRef(null);
-  const eventBusRef = react.useRef(null);
-  const findControllerRef = react.useRef(null);
-  const [error, setError] = react.useState(null);
-  const [pageNumber, setPageNumber] = react.useState(1);
-  const [pagesCount, setPagesCount] = react.useState(0);
-  const [scale, setScale] = react.useState(1);
-  const [query, setQuery] = react.useState("");
-  react.useEffect(() => {
-    let cancelled = false;
-    let loadingTask = null;
-    let pdfDocument = null;
-    const renderPdf = async () => {
-      setError(null);
-      const container = containerRef.current;
-      const viewerElement = viewerRef.current;
-      if (!container || !viewerElement) return;
-      const pdfBytes = decodeBase64(file.content);
-      const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
-      pdfjs.GlobalWorkerOptions.workerSrc = PDF_WORKER_SRC;
-      globalThis.pdfjsLib = pdfjs;
-      const pdfViewerModule = await import('pdfjs-dist/web/pdf_viewer.mjs');
-      loadingTask = pdfjs.getDocument({ data: pdfBytes });
-      const pdf = await loadingTask.promise;
-      pdfDocument = pdf;
-      if (cancelled) return;
-      const eventBus = new pdfViewerModule.EventBus();
-      const linkService = new pdfViewerModule.PDFLinkService({ eventBus });
-      const findController = new pdfViewerModule.PDFFindController({
-        eventBus,
-        linkService
-      });
-      const pdfViewer = new pdfViewerModule.PDFViewer({
-        container,
-        viewer: viewerElement,
-        eventBus,
-        linkService,
-        findController,
-        removePageBorders: true
-      });
-      linkService.setViewer(pdfViewer);
-      linkService.setDocument(pdf);
-      findController.setDocument(pdf);
-      const onPagesInit = () => {
-        pdfViewer.currentScaleValue = "page-width";
-        setScale(pdfViewer.currentScale || 1);
-        setPagesCount(pdfViewer.pagesCount);
-        setPageNumber(pdfViewer.currentPageNumber);
-      };
-      const onPageChanging = (event) => {
-        if (typeof event.pageNumber === "number") {
-          setPageNumber(event.pageNumber);
-        }
-      };
-      const onScaleChanging = (event) => {
-        if (typeof event.scale === "number") {
-          setScale(event.scale);
-        }
-      };
-      eventBus.on("pagesinit", onPagesInit);
-      eventBus.on("pagechanging", onPageChanging);
-      eventBus.on("scalechanging", onScaleChanging);
-      pdfViewerRef.current = pdfViewer;
-      eventBusRef.current = eventBus;
-      findControllerRef.current = findController;
-      setPagesCount(pdf.numPages);
-      pdfViewer.setDocument(pdf);
-    };
-    void renderPdf().catch((nextError) => {
-      if (cancelled) return;
-      if (nextError instanceof Error && nextError.name === "RenderingCancelledException") {
-        return;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => scrollToArtifactBlock(artifactId),
+      className: "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded border border-border bg-background px-3 py-2 text-left text-sm transition-colors hover:bg-muted/60",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileTextIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: KIND_LABEL[kind] })
+      ]
+    }
+  );
+}
+function resolveArtifactRef(ref, messages) {
+  for (const msg of messages) {
+    if (msg.role !== "system" || msg.systemKind !== "artifact") continue;
+    const meta = msg.systemMeta ?? {};
+    if (meta.artifact_id !== ref) continue;
+    const kind = meta.kind ?? "markdown";
+    const version = typeof meta.version === "number" ? meta.version : 1;
+    const name = typeof meta.name === "string" ? meta.name : "";
+    return { artifactId: ref, name, kind, version };
+  }
+  return null;
+}
+function TurnSummaryCard({
+  summary,
+  sessionId,
+  messages,
+  onFileSelect,
+  onCommandSelect
+}) {
+  const hasRecap = summary.recap.trim().length > 0;
+  const hasArtifacts = summary.artifacts.length > 0;
+  if (!hasArtifacts) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 rounded border border-border bg-muted/50 px-3 py-2 text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-semibold uppercase tracking-wide", children: "Summary" }),
+    hasRecap && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 whitespace-pre-wrap text-foreground", children: summary.recap }),
+    hasArtifacts && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: summary.artifacts.map((artifact, i) => {
+      const key = `${artifact.kind}:${artifact.ref}:${i}`;
+      if (artifact.kind === "file" && sessionId) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          WorkspaceFileCard,
+          {
+            sessionId,
+            path: artifact.ref,
+            label: artifact.label
+          },
+          key
+        );
       }
-      setError(formatPdfPreviewError(nextError));
-    });
-    return () => {
-      cancelled = true;
-      loadingTask?.destroy();
-      pdfDocument?.destroy();
-      pdfViewerRef.current?.cleanup();
-      pdfViewerRef.current = null;
-      eventBusRef.current = null;
-      findControllerRef.current = null;
-    };
-  }, [file.content]);
-  const setViewerPage = (nextPage) => {
-    const viewer = pdfViewerRef.current;
-    if (!viewer) return;
-    const clampedPage = Math.min(
-      Math.max(1, nextPage),
-      Math.max(1, viewer.pagesCount)
-    );
-    viewer.currentPageNumber = clampedPage;
-    setPageNumber(clampedPage);
-  };
-  const setViewerScale = (nextScale) => {
-    const viewer = pdfViewerRef.current;
-    if (!viewer) return;
-    const clampedScale = Math.min(3, Math.max(0.5, nextScale));
-    viewer.currentScale = clampedScale;
-    setScale(clampedScale);
-  };
-  const runFind = (findPrevious = false) => {
-    const eventBus = eventBusRef.current;
-    if (!eventBus || !query.trim()) return;
-    eventBus.dispatch("find", {
-      source: eventBus,
-      type: "again",
-      query,
-      phraseSearch: true,
-      caseSensitive: false,
-      entireWord: false,
-      highlightAll: true,
-      findPrevious,
-      matchDiacritics: true
-    });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-full flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-1.5 border-b border-line px-2 py-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          onClick: () => setViewerPage(pageNumber - 1),
-          disabled: pageNumber <= 1,
-          "aria-label": "Previous PDF page",
-          title: "Previous page",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "size-3.5" })
+      if (artifact.kind === "artifact") {
+        const resolved = sessionId ? resolveArtifactRef(artifact.ref, messages) : null;
+        if (resolved) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ArtifactRefCard,
+            {
+              artifactId: resolved.artifactId,
+              name: resolved.name || artifact.label,
+              kind: resolved.kind
+            },
+            key
+          );
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
         {
-          type: "number",
-          min: 1,
-          max: pagesCount || 1,
-          value: pageNumber,
-          onChange: (event) => setViewerPage(Number(event.target.value)),
-          "aria-label": "PDF page number",
-          className: "h-7 w-12 border-input px-1 text-center text-xs"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-        "/ ",
-        pagesCount || "-"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          onClick: () => setViewerPage(pageNumber + 1),
-          disabled: pagesCount > 0 && pageNumber >= pagesCount,
-          "aria-label": "Next PDF page",
-          title: "Next page",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "size-3.5" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-5 w-px bg-line" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          onClick: () => setViewerScale(scale - 0.1),
-          disabled: scale <= 0.5,
-          "aria-label": "Zoom out PDF",
-          title: "Zoom out",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MinusIcon, { className: "size-3.5" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          className: "h-7 min-w-12 px-1 text-xs text-muted-foreground hover:text-foreground",
-          onClick: () => {
-            const viewer = pdfViewerRef.current;
-            if (!viewer) return;
-            viewer.currentScaleValue = "page-width";
-            setScale(viewer.currentScale || 1);
-          },
-          "aria-label": "Fit PDF to width",
-          title: "Fit width",
+          className: "flex items-baseline gap-2 text-sm",
           children: [
-            Math.round(scale * 100),
-            "%"
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2022" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ArtifactRow,
+              {
+                artifact,
+                onFileSelect,
+                onCommandSelect
+              }
+            )
           ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-xs",
-          onClick: () => setViewerScale(scale + 0.1),
-          disabled: scale >= 3,
-          "aria-label": "Zoom in PDF",
-          title: "Zoom in",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "size-3.5" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-5 w-px bg-line" }),
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-3.5 text-muted-foreground" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          type: "search",
-          value: query,
-          onChange: (event) => setQuery(event.target.value),
-          onKeyDown: (event) => {
-            if (event.key === "Enter") runFind(event.shiftKey);
-          },
-          placeholder: "Find",
-          "aria-label": "Find in PDF",
-          className: "h-7 w-28 border-input px-1 text-xs"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "xs",
-          onClick: () => runFind(false),
-          disabled: !query.trim(),
-          children: "Find"
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-2 p-3 text-xs text-destructive", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
-    ] }),
-    !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-105 flex-1 bg-muted/20", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: containerRef,
-        "aria-label": `PDF viewer for ${fileName2}`,
-        className: "absolute inset-0 overflow-auto",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: viewerRef, className: "pdfViewer" })
-      }
-    ) })
+        },
+        key
+      );
+    }) })
   ] });
 }
-function decodeBase64(content) {
-  const binary = globalThis.atob(content);
-  const bytes = new Uint8Array(binary.length);
-  for (let index = 0; index < binary.length; index += 1) {
-    bytes[index] = binary.charCodeAt(index);
+function ArtifactRow({
+  artifact,
+  onFileSelect,
+  onCommandSelect
+}) {
+  if (artifact.kind === "file") {
+    if (!onFileSelect) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onFileSelect(artifact.ref),
+        className: "truncate cursor-pointer text-primary hover:underline",
+        children: artifact.label
+      }
+    );
   }
-  return bytes;
-}
-function formatPdfPreviewError(error) {
-  if (error instanceof Error && (error.name === "InvalidCharacterError" || error.message === "Invalid character")) {
-    return "PDF preview data is not valid base64.";
+  if (artifact.kind === "url") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: artifact.ref,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "truncate text-primary hover:underline",
+        children: artifact.label
+      }
+    );
   }
-  return error instanceof Error ? error.message : "Failed to render PDF preview.";
+  if (artifact.kind === "command") {
+    if (!onCommandSelect) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onCommandSelect(artifact.ref),
+        className: "truncate text-left cursor-pointer text-primary hover:underline",
+        children: artifact.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
 }
-var _EXTENSION_KIND = {
-  // Documents
-  pdf: { icon: lucideReact.FileTextIcon, typeLabel: "PDF" },
-  doc: { icon: lucideReact.FileTextIcon, typeLabel: "Word document" },
-  docx: { icon: lucideReact.FileTextIcon, typeLabel: "Word document" },
-  odt: { icon: lucideReact.FileTextIcon, typeLabel: "OpenDocument text" },
-  rtf: { icon: lucideReact.FileTextIcon, typeLabel: "Rich text" },
-  txt: { icon: lucideReact.FileTextIcon, typeLabel: "Text" },
-  md: { icon: lucideReact.FileTextIcon, typeLabel: "Markdown" },
-  // Spreadsheets
-  xls: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "Spreadsheet" },
-  xlsx: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "Spreadsheet" },
-  ods: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "OpenDocument spreadsheet" },
-  csv: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "CSV" },
-  tsv: { icon: lucideReact.FileSpreadsheetIcon, typeLabel: "TSV" },
-  // Presentations / charts
-  ppt: { icon: lucideReact.FileChartLineIcon, typeLabel: "Presentation" },
-  pptx: { icon: lucideReact.FileChartLineIcon, typeLabel: "Presentation" },
-  // Images
-  png: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
-  jpg: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
-  jpeg: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
-  gif: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
-  svg: { icon: lucideReact.FileImageIcon, typeLabel: "SVG image" },
-  webp: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
-  bmp: { icon: lucideReact.FileImageIcon, typeLabel: "Image" },
-  // Audio / video
-  mp3: { icon: lucideReact.FileAudioIcon, typeLabel: "Audio" },
-  wav: { icon: lucideReact.FileAudioIcon, typeLabel: "Audio" },
-  ogg: { icon: lucideReact.FileAudioIcon, typeLabel: "Audio" },
-  mp4: { icon: lucideReact.FileVideoIcon, typeLabel: "Video" },
-  mov: { icon: lucideReact.FileVideoIcon, typeLabel: "Video" },
-  webm: { icon: lucideReact.FileVideoIcon, typeLabel: "Video" },
-  // Archives
-  zip: { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
-  tar: { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
-  gz: { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
-  bz2: { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
-  "7z": { icon: lucideReact.FileArchiveIcon, typeLabel: "Archive" },
-  // Code
-  py: { icon: lucideReact.FileCodeIcon, typeLabel: "Python" },
-  js: { icon: lucideReact.FileCodeIcon, typeLabel: "JavaScript" },
-  ts: { icon: lucideReact.FileCodeIcon, typeLabel: "TypeScript" },
-  tsx: { icon: lucideReact.FileCodeIcon, typeLabel: "TypeScript" },
-  jsx: { icon: lucideReact.FileCodeIcon, typeLabel: "JavaScript" },
-  json: { icon: lucideReact.FileCodeIcon, typeLabel: "JSON" },
-  yaml: { icon: lucideReact.FileCodeIcon, typeLabel: "YAML" },
-  yml: { icon: lucideReact.FileCodeIcon, typeLabel: "YAML" },
-  toml: { icon: lucideReact.FileCodeIcon, typeLabel: "TOML" },
-  sh: { icon: lucideReact.CodeIcon, typeLabel: "Shell" },
-  rs: { icon: lucideReact.FileCodeIcon, typeLabel: "Rust" },
-  go: { icon: lucideReact.FileCodeIcon, typeLabel: "Go" },
-  rb: { icon: lucideReact.FileCodeIcon, typeLabel: "Ruby" },
-  java: { icon: lucideReact.FileCodeIcon, typeLabel: "Java" },
-  cpp: { icon: lucideReact.FileCodeIcon, typeLabel: "C++" },
-  c: { icon: lucideReact.FileCodeIcon, typeLabel: "C" },
-  html: { icon: lucideReact.FileCodeIcon, typeLabel: "HTML" },
-  css: { icon: lucideReact.FileCodeIcon, typeLabel: "CSS" },
-  scss: { icon: lucideReact.FileCodeIcon, typeLabel: "Sass" },
-  sql: { icon: lucideReact.FileCodeIcon, typeLabel: "SQL" }
-};
-function _extension(path) {
-  const idx = path.lastIndexOf(".");
-  if (idx < 0 || idx === path.length - 1) return "";
-  return path.slice(idx + 1).toLowerCase();
+
+// src/components/chat/chat-thread.tsx
+init_utils();
+var WORKING_ON_IT_DELAY_MS = 250;
+function hasUserFacingAskContent(msg) {
+  return !!msg.toolCalls?.some((tc) => tc.toolName === "ask_user_question");
 }
-function _fileKindFor(path) {
-  const ext = _extension(path);
-  return _EXTENSION_KIND[ext] ?? { icon: lucideReact.FileIcon, typeLabel: "File" };
-}
-function _basename(path) {
-  const idx = path.lastIndexOf("/");
-  return idx >= 0 ? path.slice(idx + 1) : path;
-}
-function WorkspaceFileCard({
-  sessionId,
-  path,
-  label
-}) {
-  const { adapter } = useAgentChatAdapterContext();
-  const kind = _fileKindFor(path);
-  const Icon = kind.icon;
-  const downloadUrl = adapter.getWorkspaceDownloadUrl({ sessionId, path });
-  const downloadName = _basename(path) || label;
-  const [previewOpen, setPreviewOpen] = react.useState(false);
-  const handleCardClick = react.useCallback(() => {
-    setPreviewOpen(true);
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        onClick: handleCardClick,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleCardClick();
-          }
-        },
-        className: cn(
-          "group/file flex items-center gap-3 rounded-lg border border-border",
-          "bg-muted/20 px-3 py-2 text-left transition-colors",
-          "cursor-pointer hover:bg-muted/40"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-5 text-muted-foreground", "aria-hidden": true }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium text-foreground", children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: kind.typeLabel })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
-            {
-              href: downloadUrl,
-              download: downloadName,
-              onClick: (e) => e.stopPropagation(),
-              className: cn(
-                "shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border",
-                "bg-background px-2.5 py-1.5 text-xs font-medium text-foreground",
-                "transition-colors hover:bg-muted"
-              ),
-              "aria-label": `Download ${downloadName}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { className: "size-3.5", "aria-hidden": true }),
-                "Download"
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      WorkspaceFilePreviewDialog,
-      {
-        open: previewOpen,
-        onOpenChange: setPreviewOpen,
-        sessionId,
-        path,
-        downloadUrl
-      }
-    )
-  ] });
-}
-function WorkspaceFilePreviewDialog({
-  open,
-  onOpenChange,
-  sessionId,
-  path,
-  downloadUrl
-}) {
-  const { adapter } = useAgentChatAdapterContext();
-  const [file, setFile] = react.useState(null);
-  const [loading, setLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  react.useEffect(() => {
-    if (!open) return;
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    setFile(null);
-    adapter.getWorkspaceFile({ sessionId, path }).then((result) => {
-      if (cancelled) return;
-      setFile(result);
-      setLoading(false);
-    }).catch((err) => {
-      if (cancelled) return;
-      const message = err instanceof Error ? err.message : "Failed to load file";
-      setError(message);
-      setLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [adapter, sessionId, path, open]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "flex h-[85vh] w-[95vw] max-w-350! flex-col gap-0 overflow-hidden p-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "flex flex-row items-center gap-2 border-b border-line px-4 py-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "min-w-0 flex-1 truncate text-sm", children: _basename(path) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
-        {
-          href: downloadUrl,
-          download: _basename(path),
-          className: "mr-8 inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted",
-          "aria-label": `Download ${_basename(path)}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { className: "size-3.5", "aria-hidden": true }),
-            "Download"
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(
-      FileViewer,
-      {
-        file,
-        loading,
-        error,
-        downloadUrl,
-        onDelete: null,
-        onClose: () => onOpenChange(false),
-        hideHeader: true
-      }
-    ) })
-  ] }) });
-}
-function scrollToArtifactBlock(artifactId) {
-  document.querySelector(`[data-artifact-anchor="${CSS.escape(artifactId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "center" });
-}
-function ArtifactRefCard({
-  artifactId,
-  name,
-  kind
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: () => scrollToArtifactBlock(artifactId),
-      className: "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded border border-border bg-background px-3 py-2 text-left text-sm transition-colors hover:bg-muted/60",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileTextIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: name }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: KIND_LABEL[kind] })
-      ]
-    }
-  );
-}
-function resolveArtifactRef(ref, messages) {
-  for (const msg of messages) {
-    if (msg.role !== "system" || msg.systemKind !== "artifact") continue;
-    const meta = msg.systemMeta ?? {};
-    if (meta.artifact_id !== ref) continue;
-    const kind = meta.kind ?? "markdown";
-    const version = typeof meta.version === "number" ? meta.version : 1;
-    const name = typeof meta.name === "string" ? meta.name : "";
-    return { artifactId: ref, name, kind, version };
-  }
-  return null;
-}
-function TurnSummaryCard({
-  summary,
-  sessionId,
-  messages,
-  onFileSelect,
-  onCommandSelect
-}) {
-  const hasRecap = summary.recap.trim().length > 0;
-  const hasArtifacts = summary.artifacts.length > 0;
-  if (!hasArtifacts) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 rounded border border-border bg-muted/50 px-3 py-2 text-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-semibold uppercase tracking-wide", children: "Summary" }),
-    hasRecap && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 whitespace-pre-wrap text-foreground", children: summary.recap }),
-    hasArtifacts && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: summary.artifacts.map((artifact, i) => {
-      const key = `${artifact.kind}:${artifact.ref}:${i}`;
-      if (artifact.kind === "file" && sessionId) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          WorkspaceFileCard,
-          {
-            sessionId,
-            path: artifact.ref,
-            label: artifact.label
-          },
-          key
-        );
-      }
-      if (artifact.kind === "artifact") {
-        const resolved = sessionId ? resolveArtifactRef(artifact.ref, messages) : null;
-        if (resolved) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            ArtifactRefCard,
-            {
-              artifactId: resolved.artifactId,
-              name: resolved.name || artifact.label,
-              kind: resolved.kind
-            },
-            key
-          );
-        }
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "flex items-baseline gap-2 text-sm",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2022" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ArtifactRow,
-              {
-                artifact,
-                onFileSelect,
-                onCommandSelect
-              }
-            )
-          ]
-        },
-        key
-      );
-    }) })
-  ] });
-}
-function ArtifactRow({
-  artifact,
-  onFileSelect,
-  onCommandSelect
-}) {
-  if (artifact.kind === "file") {
-    if (!onFileSelect) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onFileSelect(artifact.ref),
-        className: "truncate cursor-pointer text-primary hover:underline",
-        children: artifact.label
-      }
-    );
-  }
-  if (artifact.kind === "url") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: artifact.ref,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "truncate text-primary hover:underline",
-        children: artifact.label
-      }
-    );
-  }
-  if (artifact.kind === "command") {
-    if (!onCommandSelect) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onCommandSelect(artifact.ref),
-        className: "truncate text-left cursor-pointer text-primary hover:underline",
-        children: artifact.label
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: artifact.label });
-}
-
-// src/components/chat/chat-thread.tsx
-init_utils();
-var WORKING_ON_IT_DELAY_MS = 250;
-function hasUserFacingAskContent(msg) {
-  return !!msg.toolCalls?.some((tc) => tc.toolName === "ask_user_question");
-}
-function pendingAskCall(messages) {
-  for (let i = messages.length - 1; i >= 0; i--) {
-    const m = messages[i];
-    if (m.role === "user") return null;
-    if (m.role !== "assistant") continue;
-    return m.toolCalls?.find(
-      (tc) => tc.toolName === "ask_user_question" && tc.status === "running"
-    ) ?? null;
-  }
-  return null;
+function pendingAskCall(messages) {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i];
+    if (m.role === "user") return null;
+    if (m.role !== "assistant") continue;
+    return m.toolCalls?.find(
+      (tc) => tc.toolName === "ask_user_question" && tc.status === "running"
+    ) ?? null;
+  }
+  return null;
 }
 function askComposerPolicy(pending) {
   if (!pending) return null;
@@ -13133,6 +12932,7 @@ function ChatThread({
   retryIndicator,
   onRetry,
   onComposerError,
+  paneCards,
   showBrowser = false,
   onToggleBrowser,
   showWorkspace = false,
@@ -13212,17 +13012,65 @@ function ChatThread({
   const composerArea = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-4xl px-3 sm:px-6 pb-3 sm:pb-5 pt-3", children: [
     retryIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(RetryBanner, { indicator: retryIndicator }) }),
     researchSources.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ResearchSourcesPanel, { sources: researchSources }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ChatComposer,
+    (paneCards?.browser || paneCards?.files) && // Layers sliding out from behind the prompt box: each card is
+    // narrower than the one below it and rounded only on top, with a
+    // negative bottom margin so the next layer covers its flat edge. The
+    // composer is the widest and last, so the stack reads as coming out
+    // of it rather than sitting on top of it.
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        onSend,
-        onStop,
-        isRunning,
-        disabled: composerDisabled,
-        disabledReason: composerDisabledReason,
-        awaitingAnswer: askPolicy !== null && !askPolicy.locked,
-        placeholder: askPolicy?.placeholder,
-        tokenUsage,
+        "data-testid": "session-pane-cards",
+        className: "flex flex-col",
+        children: [
+          paneCards.browser && /* @__PURE__ */ jsxRuntime.jsx(
+            SessionPaneCard,
+            {
+              testId: "session-pane-card-browser",
+              title: "Browser",
+              icon: lucideReact.GlobeIcon,
+              subtitle: paneCards.browser.subtitle,
+              thumbnail: paneCards.browser.thumbnail,
+              onOpen: paneCards.browser.onOpen,
+              className: "w-auto rounded-t-xl border-b-0 -mb-px"
+            }
+          ),
+          paneCards.files && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SessionPaneCard,
+              {
+                testId: "session-pane-card-files",
+                title: "Files",
+                icon: lucideReact.FolderIcon,
+                count: paneCards.files.count,
+                expanded: paneCards.files.open,
+                onOpen: paneCards.files.onToggle,
+                className: "w-auto rounded-t-xl border-b-0 -mb-px"
+              }
+            ),
+            paneCards.files.open && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-testid": "files-accordion",
+                className: "-mb-px flex h-72 min-h-0 flex-col overflow-hidden border border-b-0 border-line",
+                children: paneCards.files.panel
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ChatComposer,
+      {
+        onSend,
+        onStop,
+        isRunning,
+        disabled: composerDisabled,
+        disabledReason: composerDisabledReason,
+        awaitingAnswer: askPolicy !== null && !askPolicy.locked,
+        placeholder: askPolicy?.placeholder,
+        tokenUsage,
         onComposerError,
         showBrowser,
         onToggleBrowser,
@@ -14840,17 +14688,25 @@ function useAgentChatRuntime({
         }));
       }
     }).catch(() => void 0);
-    void adapter.getBrowserState(sessionId).then((browserState) => {
-      if (sessionIdRef.current !== sessionId) return;
-      setState((prev) => ({
-        ...prev,
-        browser: browserState ? {
-          status: browserState.status,
-          controlOwner: browserState.controlOwner ?? null
-        } : null
-      }));
-    }).catch(() => void 0);
+    const hydrateBrowserState = () => {
+      void adapter.getBrowserState(sessionId).then((browserState) => {
+        if (sessionIdRef.current !== sessionId) return;
+        setState((prev) => ({
+          ...prev,
+          browser: browserState ? {
+            status: browserState.status,
+            controlOwner: browserState.controlOwner ?? null
+          } : null
+        }));
+      }).catch(() => void 0);
+    };
+    hydrateBrowserState();
+    const browserSettleTimer = window.setTimeout(
+      hydrateBrowserState,
+      RECONCILE_FIRST_DELAY
+    );
     return () => {
+      window.clearTimeout(browserSettleTimer);
       clearReconnectTimer();
       closeStream();
     };
@@ -16809,10 +16665,10 @@ async function latexToSvg(latex, display = true) {
   const start = outer.indexOf("<svg");
   const end = outer.lastIndexOf("</svg>");
   if (start === -1 || end === -1) return EMPTY;
-  const svg = outer.slice(start, end + "</svg>".length);
-  const dims = svg.match(/width="([^"]+)"\s+height="([^"]+)"/);
+  const svg2 = outer.slice(start, end + "</svg>".length);
+  const dims = svg2.match(/width="([^"]+)"\s+height="([^"]+)"/);
   return {
-    svg,
+    svg: svg2,
     widthEm: exToEm(dims?.[1]),
     heightEm: exToEm(dims?.[2])
   };
@@ -16840,13 +16696,13 @@ var FormulaCache = class {
   }
   async load(latex) {
     const key = latex;
-    const { svg, widthEm, heightEm } = await latexToSvg(latex);
-    if (!svg) {
+    const { svg: svg2, widthEm, heightEm } = await latexToSvg(latex);
+    if (!svg2) {
       this.pending.delete(key);
       return;
     }
     const image = new Image();
-    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg2)}`;
     const settle = (ok) => {
       this.pending.delete(key);
       if (!ok) return;
@@ -16880,8 +16736,8 @@ var FormulaCache = class {
 };
 
 // src/components/whiteboard/input.ts
-var MIN_ZOOM3 = 0.02;
-var MAX_ZOOM3 = 256;
+var MIN_ZOOM2 = 0.02;
+var MAX_ZOOM2 = 256;
 var ZOOM_DIVISOR = 300;
 function screenToLogical(pt, view) {
   return { x: view.x + pt.x / view.zoom, y: view.y + pt.y / view.zoom };
@@ -16891,7 +16747,7 @@ function logicalToScreen(pt, view) {
 }
 var clamp2 = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 function zoomAt(view, screenPt, factor) {
-  const zoom = clamp2(view.zoom * factor, MIN_ZOOM3, MAX_ZOOM3);
+  const zoom = clamp2(view.zoom * factor, MIN_ZOOM2, MAX_ZOOM2);
   const anchor = screenToLogical(screenPt, view);
   return {
     zoom,
@@ -16915,8 +16771,8 @@ function zoomToFit(bounds, size2, padding = 80) {
   }
   const zoom = clamp2(
     Math.min(size2.w / (bounds.w + padding * 2), size2.h / (bounds.h + padding * 2)),
-    MIN_ZOOM3,
-    MAX_ZOOM3
+    MIN_ZOOM2,
+    MAX_ZOOM2
   );
   return {
     zoom,
@@ -18357,87 +18213,514 @@ function WhiteboardSurface({
       /* @__PURE__ */ jsxRuntime.jsx(
         Input,
         {
-          className: "w-64 min-w-0 shrink",
-          placeholder: "Ask about the board (optional)",
-          value: question,
-          disabled: busy,
-          onChange: (e) => setQuestion(e.target.value),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              void ask("answer");
-            }
-          }
+          className: "w-64 min-w-0 shrink",
+          placeholder: "Ask about the board (optional)",
+          value: question,
+          disabled: busy,
+          onChange: (e) => setQuestion(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              void ask("answer");
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(TooltipProvider, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup, { "aria-label": "Actions", children: USER_ACTIONS.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: a.id === "answer" ? "default" : "outline",
+              disabled: busy,
+              "aria-label": a.label,
+              onClick: () => void ask(a.id),
+              children: a.label
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: a.hint })
+        ] }, a.id)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 px-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                id: "wb-work-it-out",
+                "aria-label": "Work it out",
+                checked: deep,
+                disabled: busy,
+                onCheckedChange: (v) => setDeep(v === true)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wb-work-it-out", children: "Work it out" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Let the agent search, compute and build before it draws, over several passes. Slower; for what the board alone cannot settle. Off, it answers your ink in one pass." })
+        ] })
+      ] }),
+      onNewBoard ? /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          "aria-label": "New board",
+          disabled: busy,
+          onClick: () => {
+            setWantFresh(true);
+            onNewBoard();
+          },
+          children: "New board"
+        }
+      ) : null,
+      viewMode && onViewModeChange && hasAnswer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center rounded-full border p-0.5", children: ["simple", "expert", "whiteboard"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${VIEW_MODE_LABELS[mode]} view`,
+          "aria-pressed": viewMode === mode,
+          className: cn(
+            "rounded-full px-3 py-1 text-xs",
+            viewMode === mode ? "bg-background font-medium shadow-sm" : "text-muted-foreground"
+          ),
+          onClick: () => onViewModeChange(mode),
+          children: VIEW_MODE_LABELS[mode]
+        },
+        mode
+      )) }) : null
+    ] })
+  ] });
+}
+function chunkPairs(flat) {
+  const pairs = [];
+  for (let i = 0; i + 1 < flat.length; i += 2) pairs.push([flat[i], flat[i + 1]]);
+  return pairs;
+}
+init_utils();
+var SKELETON_WIDTHS = [70, 85, 55, 90, 60, 78, 45, 82, 65, 72];
+var PDF_WORKER_SRC = new URL(
+  "pdfjs-dist/legacy/build/pdf.worker.mjs",
+  (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))
+).toString();
+function FileViewer({
+  file,
+  loading,
+  error,
+  downloadUrl,
+  onDelete,
+  onClose,
+  hideHeader = false,
+  className
+}) {
+  const visible = loading || file !== null || error !== null;
+  if (!visible) return null;
+  const fileName2 = file?.path.split("/").pop() ?? "File";
+  const lang = file ? getLanguageHint(file.path) : "";
+  const isPdf = file?.mime_type === "application/pdf" || file?.path.toLowerCase().endsWith(".pdf") || false;
+  const isImage = file?.encoding === "base64" && !isPdf;
+  const HeaderIcon = isImage ? lucideReact.ImageIcon : lucideReact.FileTextIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col border-t border-line", className), children: [
+    !hideHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-line px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HeaderIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate font-medium", children: fileName2 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate text-sm text-muted-foreground", children: [
+          file?.path ?? "Loading...",
+          file && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1.5", children: [
+            formatFileSize(file.size),
+            file.truncated && " (truncated)"
+          ] })
+        ] })
+      ] }),
+      downloadUrl && /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: downloadUrl,
+          download: fileName2,
+          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          "aria-label": `Download ${fileName2}`,
+          title: "Download",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { className: "size-4" })
+        }
+      ),
+      onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onDelete,
+          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
+          "aria-label": `Delete ${fileName2}`,
+          title: "Delete",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          "aria-label": "Close file",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" })
+        }
+      )
+    ] }),
+    file && isPdf && file.encoding === "base64" ? (
+      // PDF has its own scrollable container — bypass ScrollArea so
+      // it can grow with the parent's flex height (Radix Viewport's
+      // internal table wrapper sizes to content and breaks h-full).
+      /* @__PURE__ */ jsxRuntime.jsx(PdfPreview, { file, fileName: fileName2 })
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: "min-h-0 flex-1", children: [
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5 p-3", children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        Skeleton,
+        {
+          className: "h-3.5 rounded",
+          style: {
+            width: `${SKELETON_WIDTHS[index % SKELETON_WIDTHS.length]}%`
+          }
+        },
+        index
+      )) }),
+      error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
+      ] }),
+      file && isPdf && file.encoding !== "base64" && /* @__PURE__ */ jsxRuntime.jsx(FileViewerError, { message: "PDF preview requires base64 file content." }),
+      file && isImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: `data:${file.mime_type ?? "image/png"};base64,${file.content}`,
+          alt: fileName2,
+          className: "max-h-[60vh] max-w-full rounded object-contain"
+        }
+      ) }),
+      file && !isImage && !isPdf && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "wrap-break-word whitespace-pre-wrap p-3 text-base leading-relaxed text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("code", { "data-language": lang, children: file.content }) })
+    ] })
+  ] });
+}
+function FileViewerError({ message }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 p-3 text-xs text-destructive", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: message })
+  ] });
+}
+function PdfPreview({
+  file,
+  fileName: fileName2
+}) {
+  const containerRef = react.useRef(null);
+  const viewerRef = react.useRef(null);
+  const pdfViewerRef = react.useRef(null);
+  const eventBusRef = react.useRef(null);
+  const findControllerRef = react.useRef(null);
+  const [error, setError] = react.useState(null);
+  const [pageNumber, setPageNumber] = react.useState(1);
+  const [pagesCount, setPagesCount] = react.useState(0);
+  const [scale, setScale] = react.useState(1);
+  const [query, setQuery] = react.useState("");
+  react.useEffect(() => {
+    let cancelled = false;
+    let loadingTask = null;
+    let pdfDocument = null;
+    const renderPdf = async () => {
+      setError(null);
+      const container = containerRef.current;
+      const viewerElement = viewerRef.current;
+      if (!container || !viewerElement) return;
+      const pdfBytes = decodeBase64(file.content);
+      const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
+      pdfjs.GlobalWorkerOptions.workerSrc = PDF_WORKER_SRC;
+      globalThis.pdfjsLib = pdfjs;
+      const pdfViewerModule = await import('pdfjs-dist/web/pdf_viewer.mjs');
+      loadingTask = pdfjs.getDocument({ data: pdfBytes });
+      const pdf = await loadingTask.promise;
+      pdfDocument = pdf;
+      if (cancelled) return;
+      const eventBus = new pdfViewerModule.EventBus();
+      const linkService = new pdfViewerModule.PDFLinkService({ eventBus });
+      const findController = new pdfViewerModule.PDFFindController({
+        eventBus,
+        linkService
+      });
+      const pdfViewer = new pdfViewerModule.PDFViewer({
+        container,
+        viewer: viewerElement,
+        eventBus,
+        linkService,
+        findController,
+        removePageBorders: true
+      });
+      linkService.setViewer(pdfViewer);
+      linkService.setDocument(pdf);
+      findController.setDocument(pdf);
+      const onPagesInit = () => {
+        pdfViewer.currentScaleValue = "page-width";
+        setScale(pdfViewer.currentScale || 1);
+        setPagesCount(pdfViewer.pagesCount);
+        setPageNumber(pdfViewer.currentPageNumber);
+      };
+      const onPageChanging = (event) => {
+        if (typeof event.pageNumber === "number") {
+          setPageNumber(event.pageNumber);
+        }
+      };
+      const onScaleChanging = (event) => {
+        if (typeof event.scale === "number") {
+          setScale(event.scale);
+        }
+      };
+      eventBus.on("pagesinit", onPagesInit);
+      eventBus.on("pagechanging", onPageChanging);
+      eventBus.on("scalechanging", onScaleChanging);
+      pdfViewerRef.current = pdfViewer;
+      eventBusRef.current = eventBus;
+      findControllerRef.current = findController;
+      setPagesCount(pdf.numPages);
+      pdfViewer.setDocument(pdf);
+    };
+    void renderPdf().catch((nextError) => {
+      if (cancelled) return;
+      if (nextError instanceof Error && nextError.name === "RenderingCancelledException") {
+        return;
+      }
+      setError(formatPdfPreviewError(nextError));
+    });
+    return () => {
+      cancelled = true;
+      loadingTask?.destroy();
+      pdfDocument?.destroy();
+      pdfViewerRef.current?.cleanup();
+      pdfViewerRef.current = null;
+      eventBusRef.current = null;
+      findControllerRef.current = null;
+    };
+  }, [file.content]);
+  const setViewerPage = (nextPage) => {
+    const viewer = pdfViewerRef.current;
+    if (!viewer) return;
+    const clampedPage = Math.min(
+      Math.max(1, nextPage),
+      Math.max(1, viewer.pagesCount)
+    );
+    viewer.currentPageNumber = clampedPage;
+    setPageNumber(clampedPage);
+  };
+  const setViewerScale = (nextScale) => {
+    const viewer = pdfViewerRef.current;
+    if (!viewer) return;
+    const clampedScale = Math.min(3, Math.max(0.5, nextScale));
+    viewer.currentScale = clampedScale;
+    setScale(clampedScale);
+  };
+  const runFind = (findPrevious = false) => {
+    const eventBus = eventBusRef.current;
+    if (!eventBus || !query.trim()) return;
+    eventBus.dispatch("find", {
+      source: eventBus,
+      type: "again",
+      query,
+      phraseSearch: true,
+      caseSensitive: false,
+      entireWord: false,
+      highlightAll: true,
+      findPrevious,
+      matchDiacritics: true
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-full flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-1.5 border-b border-line px-2 py-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => setViewerPage(pageNumber - 1),
+          disabled: pageNumber <= 1,
+          "aria-label": "Previous PDF page",
+          title: "Previous page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: "number",
+          min: 1,
+          max: pagesCount || 1,
+          value: pageNumber,
+          onChange: (event) => setViewerPage(Number(event.target.value)),
+          "aria-label": "PDF page number",
+          className: "h-7 w-12 border-input px-1 text-center text-xs"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(TooltipProvider, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup, { "aria-label": "Actions", children: USER_ACTIONS.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: a.id === "answer" ? "default" : "outline",
-              disabled: busy,
-              "aria-label": a.label,
-              onClick: () => void ask(a.id),
-              children: a.label
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: a.hint })
-        ] }, a.id)) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 px-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Checkbox,
-              {
-                id: "wb-work-it-out",
-                "aria-label": "Work it out",
-                checked: deep,
-                disabled: busy,
-                onCheckedChange: (v) => setDeep(v === true)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wb-work-it-out", children: "Work it out" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Let the agent search, compute and build before it draws, over several passes. Slower; for what the board alone cannot settle. Off, it answers your ink in one pass." })
-        ] })
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        "/ ",
+        pagesCount || "-"
       ] }),
-      onNewBoard ? /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
           type: "button",
           variant: "ghost",
-          "aria-label": "New board",
-          disabled: busy,
+          size: "icon-xs",
+          onClick: () => setViewerPage(pageNumber + 1),
+          disabled: pagesCount > 0 && pageNumber >= pagesCount,
+          "aria-label": "Next PDF page",
+          title: "Next page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-5 w-px bg-line" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => setViewerScale(scale - 0.1),
+          disabled: scale <= 0.5,
+          "aria-label": "Zoom out PDF",
+          title: "Zoom out",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MinusIcon, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "h-7 min-w-12 px-1 text-xs text-muted-foreground hover:text-foreground",
           onClick: () => {
-            setWantFresh(true);
-            onNewBoard();
+            const viewer = pdfViewerRef.current;
+            if (!viewer) return;
+            viewer.currentScaleValue = "page-width";
+            setScale(viewer.currentScale || 1);
           },
-          children: "New board"
+          "aria-label": "Fit PDF to width",
+          title: "Fit width",
+          children: [
+            Math.round(scale * 100),
+            "%"
+          ]
         }
-      ) : null,
-      viewMode && onViewModeChange && hasAnswer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center rounded-full border p-0.5", children: ["simple", "expert", "whiteboard"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
         {
           type: "button",
-          "aria-label": `${VIEW_MODE_LABELS[mode]} view`,
-          "aria-pressed": viewMode === mode,
-          className: cn(
-            "rounded-full px-3 py-1 text-xs",
-            viewMode === mode ? "bg-background font-medium shadow-sm" : "text-muted-foreground"
-          ),
-          onClick: () => onViewModeChange(mode),
-          children: VIEW_MODE_LABELS[mode]
-        },
-        mode
-      )) }) : null
-    ] })
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => setViewerScale(scale + 0.1),
+          disabled: scale >= 3,
+          "aria-label": "Zoom in PDF",
+          title: "Zoom in",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-5 w-px bg-line" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: "search",
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") runFind(event.shiftKey);
+          },
+          placeholder: "Find",
+          "aria-label": "Find in PDF",
+          className: "h-7 w-28 border-input px-1 text-xs"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "xs",
+          onClick: () => runFind(false),
+          disabled: !query.trim(),
+          children: "Find"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-2 p-3 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
+    ] }),
+    !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-105 flex-1 bg-muted/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        "aria-label": `PDF viewer for ${fileName2}`,
+        className: "absolute inset-0 overflow-auto",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: viewerRef, className: "pdfViewer" })
+      }
+    ) })
   ] });
 }
-function chunkPairs(flat) {
-  const pairs = [];
-  for (let i = 0; i + 1 < flat.length; i += 2) pairs.push([flat[i], flat[i + 1]]);
-  return pairs;
+function decodeBase64(content) {
+  const binary = globalThis.atob(content);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return bytes;
+}
+function formatPdfPreviewError(error) {
+  if (error instanceof Error && (error.name === "InvalidCharacterError" || error.message === "Invalid character")) {
+    return "PDF preview data is not valid base64.";
+  }
+  return error instanceof Error ? error.message : "Failed to render PDF preview.";
+}
+function WorkspaceFileDrawer({
+  adapter,
+  sessionId,
+  path,
+  onClose
+}) {
+  const [file, setFile] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const requestRef = react.useRef(0);
+  react.useEffect(() => {
+    const request = ++requestRef.current;
+    setFile(null);
+    setLoading(true);
+    setError(null);
+    void (async () => {
+      try {
+        const next = await adapter.getWorkspaceFile({ sessionId, path });
+        if (requestRef.current !== request) return;
+        setFile(next);
+      } catch (fetchError) {
+        if (requestRef.current !== request) return;
+        setFile(null);
+        setError(fetchError.message);
+      } finally {
+        if (requestRef.current === request) setLoading(false);
+      }
+    })();
+  }, [adapter, sessionId, path]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "aside",
+    {
+      "data-testid": "file-preview-panel",
+      className: "flex h-full min-h-0 w-full flex-col overflow-hidden border-l border-line bg-card",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        FileViewer,
+        {
+          className: "border-t-0",
+          file,
+          loading,
+          error,
+          downloadUrl: file ? adapter.getWorkspaceDownloadUrl({ sessionId, path: file.path }) : null,
+          onDelete: null,
+          onClose
+        }
+      )
+    }
+  );
 }
 init_utils();
 
@@ -18486,7 +18769,7 @@ function FileTree({
   return /* @__PURE__ */ jsxRuntime.jsx(FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn("rounded-lg border bg-background text-sm", className),
+      className: cn("rounded-lg border bg-card text-base", className),
       role: "tree",
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children })
@@ -18695,7 +18978,7 @@ function RenderEntries({
             onClick: (event) => event.stopPropagation(),
             title: "Download",
             "aria-label": `Download ${fileName2}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { className: "size-3" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { className: "size-5" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -18709,7 +18992,7 @@ function RenderEntries({
             },
             title: "Delete",
             "aria-label": `Delete ${fileName2}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, { className: "size-3" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, { className: "size-5" })
           }
         )
       ] })
@@ -18721,6 +19004,7 @@ function WorkspacePanel({
   sessionId,
   selectedPath,
   onSelectedPathChange,
+  onOpenFile,
   refreshSignal = 0,
   disabled = false,
   fillParent = false
@@ -18729,9 +19013,6 @@ function WorkspacePanel({
   const [entries, setEntries] = react.useState([]);
   const [treeLoading, setTreeLoading] = react.useState(false);
   const [treeError, setTreeError] = react.useState(null);
-  const [file, setFile] = react.useState(null);
-  const [fileLoading, setFileLoading] = react.useState(false);
-  const [fileError, setFileError] = react.useState(null);
   const [notice, setNotice] = react.useState(null);
   const [uploading, setUploading] = react.useState(false);
   const [deleteTarget, setDeleteTarget] = react.useState(null);
@@ -18771,31 +19052,6 @@ function WorkspacePanel({
       }
     }
   }, [adapter, sessionId]);
-  const fetchFile = react.useCallback(
-    async (path) => {
-      if (!sessionId) return;
-      const requestedSessionId = sessionId;
-      setFileLoading(true);
-      setFileError(null);
-      try {
-        const nextFile = await adapter.getWorkspaceFile({
-          sessionId: requestedSessionId,
-          path
-        });
-        if (sessionIdRef.current !== requestedSessionId) return;
-        setFile(nextFile);
-      } catch (error) {
-        if (sessionIdRef.current !== requestedSessionId) return;
-        setFile(null);
-        setFileError(error.message);
-      } finally {
-        if (sessionIdRef.current === requestedSessionId) {
-          setFileLoading(false);
-        }
-      }
-    },
-    [adapter, sessionId]
-  );
   react.useEffect(() => {
     void fetchTree();
   }, [fetchTree]);
@@ -18808,8 +19064,6 @@ function WorkspacePanel({
   }, [refreshSignal, sessionId, fetchTree]);
   react.useEffect(() => {
     if (!sessionId) {
-      setFile(null);
-      setFileError(null);
       onSelectedPathChange(null);
     }
   }, [onSelectedPathChange, sessionId]);
@@ -18827,22 +19081,15 @@ function WorkspacePanel({
       return next;
     });
   }, [selectedPath]);
-  react.useEffect(() => {
-    if (!selectedPath || !sessionId || entries.length === 0) return;
-    const entry = findEntry(entries, selectedPath);
-    if (entry?.kind === "file" && file?.path !== selectedPath) {
-      void fetchFile(selectedPath);
-    }
-  }, [entries, fetchFile, file?.path, selectedPath, sessionId]);
   const handleSelect = react.useCallback(
     (path) => {
       onSelectedPathChange(path);
       const entry = findEntry(entries, path);
       if (entry?.kind === "file") {
-        void fetchFile(path);
+        onOpenFile?.(path);
       }
     },
-    [entries, fetchFile, onSelectedPathChange]
+    [entries, onOpenFile, onSelectedPathChange]
   );
   const handleUpload = react.useCallback(
     async (files) => {
@@ -18876,8 +19123,6 @@ function WorkspacePanel({
         await adapter.deleteWorkspaceFile({ sessionId, path });
         if (selectedPath === path) {
           onSelectedPathChange(null);
-          setFile(null);
-          setFileError(null);
         }
         setNotice(`Deleted ${path.split("/").pop() ?? path}`);
         await fetchTree();
@@ -18933,7 +19178,10 @@ function WorkspacePanel({
     {
       "data-testid": "workspace-panel",
       className: cn(
-        "relative z-10 flex h-full min-h-0 flex-col overflow-hidden border-l border-muted-foreground/20 bg-card",
+        "relative z-10 flex h-full min-h-0 flex-col overflow-hidden bg-card",
+        // Filling a parent means the parent draws the frame; a border
+        // here would double against it.
+        !fillParent && "border-l border-muted-foreground/20",
         (fillParent || narrow) && "w-full"
       ),
       style: fillParent || narrow ? void 0 : { width, minWidth: MIN_WIDTH, maxWidth: MAX_WIDTH },
@@ -18958,9 +19206,7 @@ function WorkspacePanel({
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-14 items-center gap-2 border-b border-line px-3 py-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpenIcon, { className: "size-4 shrink-0 text-amber-500" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium text-foreground", children: disabled ? "Workspace - Read-only" : "Workspace" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 border-b border-line px-3 py-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
               Button,
@@ -19047,24 +19293,6 @@ function WorkspacePanel({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          FileViewer,
-          {
-            file,
-            loading: fileLoading,
-            error: fileError,
-            downloadUrl: file && sessionId ? adapter.getWorkspaceDownloadUrl({
-              sessionId,
-              path: file.path
-            }) : null,
-            onDelete: file && !disabled ? () => setDeleteTarget(file.path) : null,
-            onClose: () => {
-              onSelectedPathChange(null);
-              setFile(null);
-              setFileError(null);
-            }
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           ConfirmDialog2,
           {
@@ -19162,12 +19390,15 @@ function readOnlyReasonForSession(session) {
   return { readOnly: false };
 }
 var RIGHT_STACK_STYLE = {
-  ["--right-stack-w"]: "440px"
+  // Both the column's width and the chat panel's right offset read this, so
+  // one value keeps them complementary. 50%: the browser shell renders a real
+  // page, and page layouts are unusable in a 440px strip.
+  ["--right-stack-w"]: "50%"
 };
 var MOBILE_PANE_LABELS = {
   chat: "Chat",
   browser: "Browser",
-  workspace: "Workspace"
+  file: "Preview"
 };
 function AgentChat({
   adapter,
@@ -19193,9 +19424,10 @@ function AgentChat({
   onOpenBilling
 }) {
   const [workspacePath, setWorkspacePath] = react.useState(null);
+  const [previewPath, setPreviewPath] = react.useState(null);
   const [mobileView, setMobileView] = react.useState("chat");
-  const [showBrowser, setShowBrowser] = react.useState(true);
-  const [showWorkspace, setShowWorkspace] = react.useState(true);
+  const [openPane, setOpenPane] = react.useState(null);
+  const [filesOpen, setFilesOpen] = react.useState(false);
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -19203,8 +19435,15 @@ function AgentChat({
     onSessionChange
   });
   react.useEffect(() => {
-    setShowWorkspace(runtime.viewMode === "expert");
+    setOpenPane(null);
+    setFilesOpen(false);
   }, [runtime.viewMode]);
+  react.useEffect(() => {
+    setFilesOpen(false);
+    setWorkspacePath(null);
+    setPreviewPath(null);
+    setOpenPane(null);
+  }, [sessionId]);
   const readOnly = readOnlyReasonForSession(runtime.session);
   const boardAvailable = whiteboardEnabled && isBoardSession(runtime.session);
   const viewMode = runtime.viewMode === "whiteboard" && !boardAvailable ? "simple" : runtime.viewMode;
@@ -19221,35 +19460,54 @@ function AgentChat({
   const hideTurnSummary = isSubAgentSession(runtime.session) || orchestratesDeepResearch || isBoardSession(runtime.session);
   const browserState = runtime.state.browser;
   const browserAvailable = browserState !== null && browserState.status !== "closed" && !!sessionId;
-  const browserVisible = browserAvailable && showBrowser;
+  const browserVisible = browserAvailable && openPane === "browser";
   const workspaceAvailable = !!sessionId;
-  const workspaceVisible = workspaceAvailable && showWorkspace;
-  const rightStackVisible = browserVisible || workspaceVisible;
-  const bothPanesVisible = browserVisible && workspaceVisible;
+  const filePreviewVisible = workspaceAvailable && previewPath !== null && openPane === "file";
+  const rightStackVisible = browserVisible || filePreviewVisible;
+  const browserPreview = useBrowserPreview({
+    adapter,
+    sessionId,
+    enabled: browserAvailable
+  });
+  const browserRunning = browserAvailable;
+  react.useEffect(() => {
+    if (openPane === "browser" && !browserAvailable) setOpenPane(null);
+    if (openPane === "file" && (!workspaceAvailable || previewPath === null))
+      setOpenPane(null);
+  }, [openPane, browserAvailable, workspaceAvailable, previewPath]);
   react.useEffect(() => {
     onMessagesChange?.(runtime.messages);
   }, [onMessagesChange, runtime.messages]);
+  const handleOpenFilePreview = react.useCallback((path) => {
+    setWorkspacePath(path);
+    setPreviewPath(path);
+    setOpenPane("file");
+    setMobileView("file");
+  }, []);
+  const handleSelectedPathChange = react.useCallback((path) => {
+    setWorkspacePath(path);
+    if (path === null) setPreviewPath(null);
+  }, []);
   const handleFileSelect = react.useCallback(
     (path) => {
-      setWorkspacePath(path);
-      setMobileView("workspace");
-      setShowWorkspace(true);
+      handleOpenFilePreview(path);
       onFileSelect?.(path);
     },
-    [onFileSelect]
+    [handleOpenFilePreview, onFileSelect]
   );
   const handleToggleBrowser = react.useCallback(() => {
-    setShowBrowser((prev) => !prev);
+    setOpenPane((prev) => prev === "browser" ? null : "browser");
+    setMobileView("browser");
   }, []);
-  const handleToggleWorkspace = react.useCallback(() => {
-    setShowWorkspace((prev) => !prev);
+  const handleToggleFiles = react.useCallback(() => {
+    setFilesOpen((open) => !open);
   }, []);
   const mobilePanes = react.useMemo(() => {
     const panes = ["chat"];
     if (browserVisible) panes.push("browser");
-    if (workspaceVisible) panes.push("workspace");
+    if (filePreviewVisible) panes.push("file");
     return panes;
-  }, [browserVisible, workspaceVisible]);
+  }, [browserVisible, filePreviewVisible]);
   const activeMobilePane = mobilePanes.includes(mobileView) ? mobileView : "chat";
   const showMobileToggle = mobilePanes.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -19274,7 +19532,7 @@ function AgentChat({
             // is visible. With both panes, absolute positioning lets the
             // browser/workspace split occupy a fixed width. Without the
             // right stack, the chat takes the full width.
-            browserVisible ? "md:relative md:flex-row" : "md:flex-row"
+            rightStackVisible ? "md:relative md:flex-row" : "md:flex-row"
           ),
           style: { direction: "ltr", ...RIGHT_STACK_STYLE },
           children: [
@@ -19307,14 +19565,12 @@ function AgentChat({
                 className: cn(
                   // Phone: full width column, hidden while another pane is picked.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
-                  showMobileToggle && "data-[mobile-view=browser]:hidden data-[mobile-view=workspace]:hidden md:flex!",
-                  // md+: positioning depends on whether the browser/workspace
-                  // right stack is laid out. When the browser pane is shown
-                  // we pin a fixed-width column on the right and absolutely
-                  // position the chat panel beside it. Otherwise the chat
-                  // panel just flexes alongside the workspace (or fills the
-                  // space when nothing else is visible).
-                  browserVisible ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
+                  showMobileToggle && "data-[mobile-view=browser]:hidden data-[mobile-view=file]:hidden md:flex!",
+                  // md+: when the right column is laid out (browser pane or file
+                  // preview), pin it at the configured width and absolutely
+                  // position the chat panel beside it. Otherwise the chat panel
+                  // fills the space.
+                  rightStackVisible ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
                 ),
                 children: viewMode === "whiteboard" ? (
                   // The board replaces the transcript, on the same runtime
@@ -19354,12 +19610,38 @@ function AgentChat({
                     onSelectBrowserProfile,
                     browserProfilesEnabled,
                     browserProfileLocked: !!sessionId,
-                    showBrowser,
+                    showBrowser: openPane === "browser",
                     onToggleBrowser: handleToggleBrowser,
-                    showWorkspace,
-                    onToggleWorkspace: handleToggleWorkspace,
+                    showWorkspace: filesOpen,
+                    onToggleWorkspace: handleToggleFiles,
                     canShowBrowser: browserAvailable,
                     canShowWorkspace: workspaceAvailable,
+                    paneCards: {
+                      browser: browserRunning ? {
+                        subtitle: browserState?.controlOwner ? `${browserState.controlOwner} has control` : void 0,
+                        thumbnail: browserPreview,
+                        // Show and hide on the same card, like the Files
+                        // accordion header and the composer's Tools item.
+                        onOpen: handleToggleBrowser
+                      } : null,
+                      files: workspaceAvailable ? {
+                        open: filesOpen,
+                        onToggle: handleToggleFiles,
+                        panel: /* @__PURE__ */ jsxRuntime.jsx(
+                          WorkspacePanel,
+                          {
+                            adapter,
+                            sessionId,
+                            selectedPath: workspacePath,
+                            onSelectedPathChange: handleSelectedPathChange,
+                            onOpenFile: handleOpenFilePreview,
+                            refreshSignal: runtime.workspaceRefreshKey,
+                            disabled: effectiveDisabled,
+                            fillParent: true
+                          }
+                        )
+                      } : null
+                    },
                     viewMode,
                     onViewModeChange: runtime.setViewMode,
                     deepResearchEnabled,
@@ -19387,13 +19669,10 @@ function AgentChat({
                   // Phone: full width column, hidden when chat tab active.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
                   showMobileToggle && "data-[mobile-view=chat]:hidden md:flex!",
-                  // md+: positioning differs depending on what is inside.
-                  // - browser visible (with or without workspace): absolute
-                  //   right column at the configured width.
-                  // - workspace only: relative shrink-0 column letting
-                  //   WorkspacePanel manage its own width via the resize
-                  //   handle.
-                  browserVisible ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-auto"
+                  // md+: absolute right column at the configured width. The
+                  // browser is the only pane that lives here — files expand
+                  // as an accordion inside the chat column.
+                  "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none"
                 ),
                 children: [
                   browserVisible && /* @__PURE__ */ jsxRuntime.jsx(
@@ -19401,42 +19680,25 @@ function AgentChat({
                     {
                       "data-testid": "browser-panel",
                       "data-mobile-view": activeMobilePane,
-                      className: cn(
-                        "min-h-0 w-full overflow-hidden",
-                        // With both panes the desktop splits the column in half.
-                        // A phone gives whichever pane is selected the whole
-                        // height instead — see the mobile toggle above.
-                        bothPanesVisible ? "h-full data-[mobile-view=workspace]:hidden md:block! md:h-1/2 md:border-b md:border-line" : "h-full"
-                      ),
+                      className: "min-h-0 h-full w-full overflow-hidden",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         BrowserPane,
                         {
                           sessionId,
                           state: browserState,
                           adapter,
-                          onClose: () => setShowBrowser(false)
+                          onClose: () => setOpenPane(null)
                         }
                       )
                     }
                   ),
-                  workspaceVisible && /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
+                  filePreviewVisible && sessionId && previewPath && /* @__PURE__ */ jsxRuntime.jsx(
+                    WorkspaceFileDrawer,
                     {
-                      "data-testid": "workspace-panel-frame",
-                      "data-mobile-view": activeMobilePane,
-                      className: bothPanesVisible ? "h-full min-h-0 w-full overflow-hidden data-[mobile-view=browser]:hidden md:block! md:h-1/2" : "min-h-0 h-full",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        WorkspacePanel,
-                        {
-                          adapter,
-                          sessionId,
-                          selectedPath: workspacePath,
-                          onSelectedPathChange: setWorkspacePath,
-                          refreshSignal: runtime.workspaceRefreshKey,
-                          disabled: effectiveDisabled,
-                          fillParent: bothPanesVisible
-                        }
-                      )
+                      adapter,
+                      sessionId,
+                      path: previewPath,
+                      onClose: () => setOpenPane(null)
                     }
                   )
                 ]
@@ -23463,7 +23725,7 @@ exports.AgentChat = AgentChat;
 exports.AgentChatAdapterProvider = AgentChatAdapterProvider;
 exports.AgentWhiteboard = AgentWhiteboard;
 exports.BrandBeam = BrandBeam;
-exports.BrowserLiveView = BrowserLiveView;
+exports.BrowserShell = BrowserShell;
 exports.CitationText = CitationText;
 exports.CodingAgentsPanel = CodingAgentsPanel;
 exports.ComposioConnectCard = ComposioConnectCard;
@@ -23508,6 +23770,7 @@ exports.stripMissionControlMarkup = stripMissionControlMarkup;
 exports.toolOrbState = toolOrbState;
 exports.useAgentChatAdapterContext = useAgentChatAdapterContext;
 exports.useAgentChatRuntime = useAgentChatRuntime;
+exports.useBrowserControl = useBrowserControl;
 exports.useChatViewMode = useChatViewMode;
 exports.useInboxUnreadCount = useInboxUnreadCount;
 exports.useMissionEvents = useMissionEvents;