@tangle-network/agent-app 0.22.0 → 0.24.0

package/dist/web-react/index.js

@@ -1,9 +1,13 @@
 import {
   stepActivityFlowTrace
 } from "../chunk-AFDROJ64.js";
+import {
+  snapHarnessToModel,
+  snapModelToHarness
+} from "../chunk-5VXPDXZJ.js";
 
 // src/web-react/index.tsx
-import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState5 } from "react";
 
 // src/web-react/provider-logo.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -451,6 +455,132 @@ function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent ac
   ] });
 }
 
+// src/web-react/sandbox-terminal.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+var DEFAULT_PROVISION_POLL_INTERVAL_MS = 2e3;
+var DEFAULT_PROVISION_POLL_TIMEOUT_MS = 9e4;
+var DEFAULT_TOKEN_REFRESH_SKEW_MS = 12e4;
+var EMPTY_CONNECTION = {
+  runtimeUrl: null,
+  sidecarUrl: null,
+  token: null,
+  expiresAt: null,
+  status: "idle",
+  error: null,
+  loading: false
+};
+function useSandboxTerminalConnection(opts) {
+  const [conn, setConn] = useState3(EMPTY_CONNECTION);
+  const fetcher = opts.fetcher ?? fetch;
+  const pollIntervalMs = opts.provisionPollIntervalMs ?? DEFAULT_PROVISION_POLL_INTERVAL_MS;
+  const pollTimeoutMs = opts.provisionPollTimeoutMs ?? DEFAULT_PROVISION_POLL_TIMEOUT_MS;
+  const refreshSkewMs = opts.tokenRefreshSkewMs ?? DEFAULT_TOKEN_REFRESH_SKEW_MS;
+  const connectionUrl = useCallback2(() => {
+    if (typeof opts.connectionUrl === "function") return opts.connectionUrl(opts.workspaceId);
+    return opts.connectionUrl ?? `/api/workspaces/${encodeURIComponent(opts.workspaceId)}/sandbox/connection`;
+  }, [opts.connectionUrl, opts.workspaceId]);
+  const connect = useCallback2(async () => {
+    setConn((current) => ({ ...current, loading: true, error: null }));
+    const deadline = Date.now() + pollTimeoutMs;
+    while (true) {
+      try {
+        const res = await fetcher(connectionUrl());
+        const data = await res.json();
+        const runtimeUrl = data.runtimeUrl ?? data.sidecarUrl;
+        if (res.ok && runtimeUrl && data.token && data.expiresAt) {
+          setConn({
+            runtimeUrl,
+            sidecarUrl: runtimeUrl,
+            token: data.token,
+            expiresAt: data.expiresAt,
+            status: data.status ?? "running",
+            error: null,
+            loading: false,
+            ...data.sandboxId ? { sandboxId: data.sandboxId } : {}
+          });
+          return;
+        }
+        if (res.ok) {
+          setConn({
+            runtimeUrl: null,
+            sidecarUrl: null,
+            token: null,
+            expiresAt: null,
+            loading: false,
+            error: "Sandbox connection response is missing required fields",
+            status: data.status ?? "error",
+            ...data.sandboxId ? { sandboxId: data.sandboxId } : {}
+          });
+          return;
+        }
+        if (res.status === 503 && Date.now() < deadline) {
+          setConn((current) => ({
+            ...current,
+            loading: true,
+            status: data.status ?? "provisioning",
+            error: null
+          }));
+          await sleep(pollIntervalMs);
+          continue;
+        }
+        setConn((current) => ({
+          ...current,
+          runtimeUrl: null,
+          sidecarUrl: null,
+          token: null,
+          expiresAt: null,
+          loading: false,
+          error: data.error ?? "Sandbox not available",
+          status: data.status ?? "error"
+        }));
+        return;
+      } catch (err) {
+        if (Date.now() < deadline) {
+          await sleep(pollIntervalMs);
+          continue;
+        }
+        setConn((current) => ({
+          ...current,
+          runtimeUrl: null,
+          sidecarUrl: null,
+          token: null,
+          expiresAt: null,
+          loading: false,
+          error: err instanceof Error ? err.message : "Connection failed"
+        }));
+        return;
+      }
+    }
+  }, [connectionUrl, fetcher, pollIntervalMs, pollTimeoutMs]);
+  useEffect3(() => {
+    void connect();
+  }, [connect]);
+  useEffect3(() => {
+    if (!conn.runtimeUrl || !conn.token || !conn.expiresAt) return;
+    const refreshAt = Date.parse(conn.expiresAt) - Date.now() - refreshSkewMs;
+    if (!Number.isFinite(refreshAt)) {
+      setConn((current) => ({
+        ...current,
+        runtimeUrl: null,
+        sidecarUrl: null,
+        token: null,
+        expiresAt: null,
+        status: "error",
+        error: "Sandbox token expiry is invalid"
+      }));
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      void connect();
+    }, Math.max(1e3, refreshAt));
+    return () => window.clearTimeout(timer);
+  }, [conn.runtimeUrl, conn.token, conn.expiresAt, connect, refreshSkewMs]);
+  return { ...conn, connect };
+}
+function sleep(ms) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
 // src/web-react/seat-paywall.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function CheckGlyph() {
@@ -527,23 +657,184 @@ function SeatPaywall({
   ] }) });
 }
 
-// src/web-react/index.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/web-react/agent-session-controls.tsx
+import { useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var HARNESS_LABELS = {
+  opencode: "OpenCode (any model)",
+  "claude-code": "Claude Code (Anthropic)",
+  codex: "Codex (OpenAI)",
+  "kimi-code": "Kimi (Moonshot)",
+  amp: "Amp",
+  "factory-droids": "Factory Droids",
+  cursor: "Cursor",
+  hermes: "Hermes",
+  forge: "Forge",
+  pi: "Pi",
+  openclaw: "OpenClaw",
+  acp: "ACP",
+  "cli-base": "CLI"
+};
+function harnessLabel(h) {
+  return HARNESS_LABELS[h] ?? h;
+}
 function ChevronDown({ className }) {
   return /* @__PURE__ */ jsx4("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx4("path", { d: "m6 9 6 6 6-6" }) });
 }
-function SearchGlyph({ className }) {
+function GearGlyph({ className }) {
   return /* @__PURE__ */ jsxs4("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx4("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ jsx4("path", { d: "m21 21-4.3-4.3" })
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx4("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
+  ] });
+}
+function useClickOutside(active, onOutside) {
+  const ref = useRef2(null);
+  useEffect4(() => {
+    if (!active) return;
+    function handler(e) {
+      if (ref.current && !ref.current.contains(e.target)) onOutside();
+    }
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [active, onOutside]);
+  return ref;
+}
+function HarnessPicker({
+  value,
+  onChange,
+  available
+}) {
+  const [open, setOpen] = useState4(false);
+  const containerRef = useClickOutside(open, () => setOpen(false));
+  const options = available ?? Object.keys(HARNESS_LABELS);
+  return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        title: "Agent backend",
+        className: "inline-flex w-full items-center justify-between gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30",
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "truncate", children: harnessLabel(value) }),
+          /* @__PURE__ */ jsx4(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx4("div", { className: "absolute bottom-full left-0 z-50 mb-2 max-h-64 w-full min-w-[220px] overflow-y-auto rounded-xl border border-border bg-card p-1 shadow-lg", children: options.map((h) => /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onChange(h);
+          setOpen(false);
+        },
+        className: `flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition ${h === value ? "bg-primary/10 font-medium" : "hover:bg-accent/30"}`,
+        children: harnessLabel(h)
+      },
+      h
+    )) })
+  ] });
+}
+function useCoherentHandlers(props) {
+  const { model, models, harness, onModelChange, onHarnessChange } = props;
+  const canonicalIds = useMemo(() => models.map((m) => m.id), [models]);
+  const onModel = (next) => {
+    onModelChange(next);
+    const nextHarness = snapHarnessToModel(harness, next);
+    if (nextHarness !== harness) onHarnessChange(nextHarness);
+  };
+  const onHarness = (next) => {
+    onHarnessChange(next);
+    const snapped = snapModelToHarness(next, model, canonicalIds);
+    if (snapped !== model) onModelChange(snapped);
+  };
+  return { onModel, onHarness };
+}
+function AgentSessionControls(props) {
+  const {
+    models,
+    modelsLoading,
+    model,
+    harness,
+    availableHarnesses,
+    effort,
+    onEffortChange,
+    layout = "inline",
+    showHarness = true,
+    renderProviderBadge,
+    className
+  } = props;
+  const { onModel, onHarness } = useCoherentHandlers(props);
+  const [open, setOpen] = useState4(false);
+  const popoverRef = useClickOutside(open, () => setOpen(false));
+  const selectedModel = models.find((m) => m.id === model);
+  const showEffort = selectedModel?.supportsReasoning ?? true;
+  const modelPicker = /* @__PURE__ */ jsx4(
+    ModelPicker,
+    {
+      value: model,
+      onChange: onModel,
+      models,
+      loading: modelsLoading,
+      renderProviderBadge
+    }
+  );
+  if (layout === "inline") {
+    return /* @__PURE__ */ jsxs4("div", { className: `flex items-center gap-1.5 ${className ?? ""}`, children: [
+      modelPicker,
+      showHarness && /* @__PURE__ */ jsx4(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
+      showEffort && /* @__PURE__ */ jsx4(EffortPicker, { value: effort, onChange: onEffortChange })
+    ] });
+  }
+  const hasAdvanced = showHarness || showEffort;
+  return /* @__PURE__ */ jsxs4("div", { className: `flex items-center gap-1.5 ${className ?? ""}`, children: [
+    modelPicker,
+    hasAdvanced && /* @__PURE__ */ jsxs4("div", { ref: popoverRef, className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((v) => !v),
+          title: "Model settings \u2014 pick the agent backend and how hard it thinks",
+          className: "flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted",
+          "data-state": open ? "open" : "closed",
+          children: /* @__PURE__ */ jsx4(GearGlyph, { className: "h-4 w-4" })
+        }
+      ),
+      open && /* @__PURE__ */ jsxs4("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-72 space-y-3 rounded-xl border border-border bg-card p-3 shadow-lg", children: [
+        showHarness && /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-foreground", children: "Agent backend" }),
+          /* @__PURE__ */ jsx4(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
+          /* @__PURE__ */ jsx4("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "The engine that runs the agent. Switching it keeps your model choice compatible." })
+        ] }),
+        showEffort && /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-foreground", children: "Reasoning effort" }),
+          /* @__PURE__ */ jsx4(EffortPicker, { value: effort, onChange: onEffortChange }),
+          /* @__PURE__ */ jsx4("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "How hard the agent thinks before answering. Higher is slower but more thorough." })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/web-react/index.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChevronDown2({ className }) {
+  return /* @__PURE__ */ jsx5("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx5("path", { d: "m6 9 6 6 6-6" }) });
+}
+function SearchGlyph({ className }) {
+  return /* @__PURE__ */ jsxs5("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx5("path", { d: "m21 21-4.3-4.3" })
   ] });
 }
 function SparkleGlyph({ className }) {
-  return /* @__PURE__ */ jsx4("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx4("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1" }) });
+  return /* @__PURE__ */ jsx5("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx5("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1" }) });
 }
-function useClickOutside(onOutside) {
-  const ref = useRef2(null);
-  useEffect3(() => {
+function useClickOutside2(onOutside) {
+  const ref = useRef3(null);
+  useEffect5(() => {
     function handler(e) {
       if (ref.current && !ref.current.contains(e.target)) onOutside();
     }
@@ -578,7 +869,7 @@ function formatContext(len) {
   return `${len} ctx`;
 }
 function SectionHeader({ children }) {
-  return /* @__PURE__ */ jsx4("div", { className: "px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground/70", children });
+  return /* @__PURE__ */ jsx5("div", { className: "px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground/70", children });
 }
 function ModelRow({
   model,
@@ -588,41 +879,41 @@ function ModelRow({
 }) {
   const price = formatPrice(model.pricing?.prompt);
   const ctx = formatContext(model.contextLength);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "button",
     {
       type: "button",
       onClick: onSelect,
       className: `flex w-full items-center gap-2.5 rounded-md px-3 py-2.5 text-left text-sm transition ${selected ? "bg-primary/10 font-medium" : "hover:bg-accent/30"}`,
       children: [
-        renderProviderBadge ? renderProviderBadge(model.provider) : /* @__PURE__ */ jsx4(ProviderLogo, { provider: model.provider, size: 16 }),
-        /* @__PURE__ */ jsx4("span", { className: "truncate", children: model.name }),
-        !model.supportsTools && /* @__PURE__ */ jsx4("span", { className: "shrink-0 rounded bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: "no tools" }),
-        /* @__PURE__ */ jsxs4("span", { className: "ml-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground", children: [
-          ctx && /* @__PURE__ */ jsx4("span", { children: ctx }),
-          price && /* @__PURE__ */ jsx4("span", { children: price })
+        renderProviderBadge ? renderProviderBadge(model.provider) : /* @__PURE__ */ jsx5(ProviderLogo, { provider: model.provider, size: 16 }),
+        /* @__PURE__ */ jsx5("span", { className: "truncate", children: model.name }),
+        !model.supportsTools && /* @__PURE__ */ jsx5("span", { className: "shrink-0 rounded bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: "no tools" }),
+        /* @__PURE__ */ jsxs5("span", { className: "ml-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground", children: [
+          ctx && /* @__PURE__ */ jsx5("span", { children: ctx }),
+          price && /* @__PURE__ */ jsx5("span", { children: price })
         ] })
       ]
     }
   );
 }
 function ModelPicker({ value, onChange, models, loading, renderProviderBadge, recommendedLabel = "Recommended" }) {
-  const [open, setOpen] = useState3(false);
-  const [query, setQuery] = useState3("");
-  const containerRef = useClickOutside(() => setOpen(false));
-  const inputRef = useRef2(null);
-  useEffect3(() => {
+  const [open, setOpen] = useState5(false);
+  const [query, setQuery] = useState5("");
+  const containerRef = useClickOutside2(() => setOpen(false));
+  const inputRef = useRef3(null);
+  useEffect5(() => {
     if (open) inputRef.current?.focus();
   }, [open]);
   const selected = models.find((m) => m.id === value);
-  const filtered = useMemo(() => {
+  const filtered = useMemo2(() => {
     const q = query.trim().toLowerCase();
     if (!q) return null;
     return models.filter(
       (m) => m.id.toLowerCase().includes(q) || m.name.toLowerCase().includes(q) || (m.description?.toLowerCase() ?? "").includes(q) || m.provider.toLowerCase().includes(q)
     );
   }, [models, query]);
-  const sections = useMemo(() => {
+  const sections = useMemo2(() => {
     const recommended = models.filter((m) => m.featured);
     const byProvider = [];
     for (const m of models) {
@@ -638,24 +929,24 @@ function ModelPicker({ value, onChange, models, loading, renderProviderBadge, re
     setOpen(false);
     setQuery("");
   };
-  return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "relative inline-flex", children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5("div", { ref: containerRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxs5(
       "button",
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
         className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30",
         children: [
-          selected ? renderProviderBadge ? renderProviderBadge(selected.provider) : /* @__PURE__ */ jsx4(ProviderLogo, { provider: selected.provider, size: 16 }) : /* @__PURE__ */ jsx4(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx4("span", { className: "max-w-[160px] truncate", children: selected?.name ?? value }),
-          /* @__PURE__ */ jsx4(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          selected ? renderProviderBadge ? renderProviderBadge(selected.provider) : /* @__PURE__ */ jsx5(ProviderLogo, { provider: selected.provider, size: 16 }) : /* @__PURE__ */ jsx5(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx5("span", { className: "max-w-[160px] truncate", children: selected?.name ?? value }),
+          /* @__PURE__ */ jsx5(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs4("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-[420px] overflow-hidden rounded-xl border border-border bg-card shadow-lg", children: [
-      /* @__PURE__ */ jsx4("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2", children: [
-        /* @__PURE__ */ jsx4(SearchGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-        /* @__PURE__ */ jsx4(
+    open && /* @__PURE__ */ jsxs5("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-[420px] overflow-hidden rounded-xl border border-border bg-card shadow-lg", children: [
+      /* @__PURE__ */ jsx5("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2", children: [
+        /* @__PURE__ */ jsx5(SearchGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx5(
           "input",
           {
             ref: inputRef,
@@ -667,20 +958,20 @@ function ModelPicker({ value, onChange, models, loading, renderProviderBadge, re
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs4("div", { className: "max-h-[400px] overflow-y-auto p-1 pb-2", children: [
-        loading && /* @__PURE__ */ jsx4("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "Loading models..." }),
-        !loading && filtered && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-          filtered.length === 0 && /* @__PURE__ */ jsx4("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models match your search" }),
-          filtered.map((m) => /* @__PURE__ */ jsx4(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+      /* @__PURE__ */ jsxs5("div", { className: "max-h-[400px] overflow-y-auto p-1 pb-2", children: [
+        loading && /* @__PURE__ */ jsx5("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "Loading models..." }),
+        !loading && filtered && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          filtered.length === 0 && /* @__PURE__ */ jsx5("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models match your search" }),
+          filtered.map((m) => /* @__PURE__ */ jsx5(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
         ] }),
-        !loading && !filtered && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-          sections.recommended.length > 0 && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-            /* @__PURE__ */ jsx4(SectionHeader, { children: recommendedLabel }),
-            sections.recommended.map((m) => /* @__PURE__ */ jsx4(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+        !loading && !filtered && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          sections.recommended.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx5(SectionHeader, { children: recommendedLabel }),
+            sections.recommended.map((m) => /* @__PURE__ */ jsx5(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
           ] }),
-          sections.byProvider.map((g) => /* @__PURE__ */ jsxs4("div", { children: [
-            /* @__PURE__ */ jsx4(SectionHeader, { children: g.provider }),
-            g.items.map((m) => /* @__PURE__ */ jsx4(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+          sections.byProvider.map((g) => /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5(SectionHeader, { children: g.provider }),
+            g.items.map((m) => /* @__PURE__ */ jsx5(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
           ] }, g.provider))
         ] })
       ] })
@@ -694,11 +985,11 @@ var EFFORT_LEVELS = [
   { id: "high", label: "High" }
 ];
 function EffortPicker({ value, onChange }) {
-  const [open, setOpen] = useState3(false);
-  const containerRef = useClickOutside(() => setOpen(false));
+  const [open, setOpen] = useState5(false);
+  const containerRef = useClickOutside2(() => setOpen(false));
   const selected = EFFORT_LEVELS.find((l) => l.id === value) ?? EFFORT_LEVELS[2];
-  return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "relative inline-flex", children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5("div", { ref: containerRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxs5(
       "button",
       {
         type: "button",
@@ -706,13 +997,13 @@ function EffortPicker({ value, onChange }) {
         title: "Reasoning effort",
         className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30",
         children: [
-          /* @__PURE__ */ jsx4(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx4("span", { children: selected.label }),
-          /* @__PURE__ */ jsx4(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          /* @__PURE__ */ jsx5(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx5("span", { children: selected.label }),
+          /* @__PURE__ */ jsx5(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx4("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-36 overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg", children: EFFORT_LEVELS.map((l) => /* @__PURE__ */ jsx4(
+    open && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-36 overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg", children: EFFORT_LEVELS.map((l) => /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -728,41 +1019,41 @@ function EffortPicker({ value, onChange }) {
   ] });
 }
 function RunDrillIn({ run, onClose }) {
-  return /* @__PURE__ */ jsxs4("div", { className: "fixed inset-y-0 right-0 z-50 flex w-[480px] max-w-full flex-col border-l border-border bg-card shadow-xl", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("div", { className: "fixed inset-y-0 right-0 z-50 flex w-[480px] max-w-full flex-col border-l border-border bg-card shadow-xl", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsx5(
         "span",
         {
           className: `h-2 w-2 shrink-0 rounded-full ${run.status === "running" ? "bg-yellow-500" : run.status === "error" ? "bg-red-500" : "bg-green-500"}`
         }
       ),
-      /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx4("p", { className: "truncate text-sm font-semibold", children: run.title }),
-        /* @__PURE__ */ jsx4("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: run.toolName })
+      /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx5("p", { className: "truncate text-sm font-semibold", children: run.title }),
+        /* @__PURE__ */ jsx5("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: run.toolName })
       ] }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
           onClick: onClose,
           "aria-label": "Close",
           className: "rounded-md p-1.5 text-muted-foreground transition hover:bg-accent/30 hover:text-foreground",
-          children: /* @__PURE__ */ jsx4("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18M6 6l12 12" }) })
+          children: /* @__PURE__ */ jsx5("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18M6 6l12 12" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
-      run.steps.length === 0 && /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
-      run.steps.map((step, i) => /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border border-border/60 bg-background", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-baseline gap-2 border-b border-border/40 px-3 py-1.5", children: [
-          /* @__PURE__ */ jsx4("span", { className: `font-mono text-[11px] ${step.status === "error" ? "text-red-600" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
-          /* @__PURE__ */ jsx4("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
-          /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-[10px] text-muted-foreground/60", children: new Date(step.at).toLocaleTimeString() })
+    /* @__PURE__ */ jsxs5("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
+      run.steps.length === 0 && /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
+      run.steps.map((step, i) => /* @__PURE__ */ jsxs5("div", { className: "rounded-lg border border-border/60 bg-background", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-baseline gap-2 border-b border-border/40 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx5("span", { className: `font-mono text-[11px] ${step.status === "error" ? "text-red-600" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
+          /* @__PURE__ */ jsx5("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
+          /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[10px] text-muted-foreground/60", children: new Date(step.at).toLocaleTimeString() })
         ] }),
-        step.detail && /* @__PURE__ */ jsx4("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-[11px] leading-relaxed text-muted-foreground", children: step.detail })
+        step.detail && /* @__PURE__ */ jsx5("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-[11px] leading-relaxed text-muted-foreground", children: step.detail })
       ] }, i))
     ] }),
-    /* @__PURE__ */ jsx4("p", { className: "border-t border-border px-4 py-2 text-[11px] text-muted-foreground/60", children: "Readonly drill-in. Follow up in the main chat." })
+    /* @__PURE__ */ jsx5("p", { className: "border-t border-border px-4 py-2 text-[11px] text-muted-foreground/60", children: "Readonly drill-in. Follow up in the main chat." })
   ] });
 }
 function pendingApprovalOf(call) {
@@ -772,26 +1063,26 @@ function pendingApprovalOf(call) {
 }
 function ToolGlyph({ name, className }) {
   if (name.startsWith("sandbox_")) {
-    return /* @__PURE__ */ jsxs4("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx4("polyline", { points: "4 17 10 11 4 5" }),
-      /* @__PURE__ */ jsx4("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+    return /* @__PURE__ */ jsxs5("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx5("polyline", { points: "4 17 10 11 4 5" }),
+      /* @__PURE__ */ jsx5("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
     ] });
   }
   if (name === "submit_proposal") {
-    return /* @__PURE__ */ jsxs4("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx4("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-      /* @__PURE__ */ jsx4("path", { d: "M14 2v6h6M9 15l2 2 4-4" })
+    return /* @__PURE__ */ jsxs5("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx5("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx5("path", { d: "M14 2v6h6M9 15l2 2 4-4" })
     ] });
   }
   if (name === "schedule_followup") {
-    return /* @__PURE__ */ jsxs4("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ jsx4("path", { d: "M12 7v5l3 3" })
+    return /* @__PURE__ */ jsxs5("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx5("path", { d: "M12 7v5l3 3" })
     ] });
   }
-  return /* @__PURE__ */ jsxs4("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx4("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3" }),
-    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "4" })
+  return /* @__PURE__ */ jsxs5("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx5("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "4" })
   ] });
 }
 function toolOutcomeOf(call) {
@@ -825,36 +1116,36 @@ function truncate(v, max = 240) {
 function KvRows({ data }) {
   const entries = Object.entries(data).filter(([, v]) => v !== void 0 && v !== null && v !== "");
   if (!entries.length) return null;
-  return /* @__PURE__ */ jsx4("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs4("div", { className: "contents", children: [
-    /* @__PURE__ */ jsx4("dt", { className: "font-mono text-[11px] text-muted-foreground/70", children: k }),
-    /* @__PURE__ */ jsx4("dd", { className: "min-w-0 whitespace-pre-wrap break-words font-mono text-[11px] text-muted-foreground", children: truncate(v) })
+  return /* @__PURE__ */ jsx5("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs5("div", { className: "contents", children: [
+    /* @__PURE__ */ jsx5("dt", { className: "font-mono text-[11px] text-muted-foreground/70", children: k }),
+    /* @__PURE__ */ jsx5("dd", { className: "min-w-0 whitespace-pre-wrap break-words font-mono text-[11px] text-muted-foreground", children: truncate(v) })
   ] }, k)) });
 }
 function ShellDetail({ call }) {
   const outcome = toolOutcomeOf(call);
   const r = outcome?.result ?? {};
-  return /* @__PURE__ */ jsxs4("div", { className: "overflow-hidden rounded-md bg-zinc-900 font-mono text-[11px] leading-relaxed", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 px-3 pt-2 text-zinc-400", children: [
-      /* @__PURE__ */ jsx4("span", { className: "select-none text-zinc-500", children: "$" }),
-      /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate text-zinc-200", children: String(call.args?.command ?? "") }),
-      r.exitCode != null && /* @__PURE__ */ jsxs4("span", { className: r.exitCode === 0 ? "text-emerald-400" : "text-red-400", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "overflow-hidden rounded-md bg-zinc-900 font-mono text-[11px] leading-relaxed", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-3 pt-2 text-zinc-400", children: [
+      /* @__PURE__ */ jsx5("span", { className: "select-none text-zinc-500", children: "$" }),
+      /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-zinc-200", children: String(call.args?.command ?? "") }),
+      r.exitCode != null && /* @__PURE__ */ jsxs5("span", { className: r.exitCode === 0 ? "text-emerald-400" : "text-red-400", children: [
         "exit ",
         r.exitCode
       ] })
     ] }),
-    /* @__PURE__ */ jsx4("pre", { className: "max-h-56 overflow-auto whitespace-pre-wrap px-3 pb-2.5 pt-1.5 text-zinc-300", children: outcome?.ok === false ? outcome.message ?? "failed" : [r.stdout, r.stderr].filter(Boolean).join("\n") || "(no output)" })
+    /* @__PURE__ */ jsx5("pre", { className: "max-h-56 overflow-auto whitespace-pre-wrap px-3 pb-2.5 pt-1.5 text-zinc-300", children: outcome?.ok === false ? outcome.message ?? "failed" : [r.stdout, r.stderr].filter(Boolean).join("\n") || "(no output)" })
   ] });
 }
 function DefaultToolDetail({ call }) {
   const outcome = toolOutcomeOf(call);
-  return /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
-    call.args && Object.keys(call.args).length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
-      /* @__PURE__ */ jsx4("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/50", children: "Called with" }),
-      /* @__PURE__ */ jsx4(KvRows, { data: call.args })
+  return /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
+    call.args && Object.keys(call.args).length > 0 && /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx5("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/50", children: "Called with" }),
+      /* @__PURE__ */ jsx5(KvRows, { data: call.args })
     ] }),
-    outcome && /* @__PURE__ */ jsxs4("div", { children: [
-      /* @__PURE__ */ jsx4("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/50", children: outcome.ok === false ? "Failed" : "Result" }),
-      outcome.ok === false ? /* @__PURE__ */ jsx4("p", { className: "text-xs text-red-600", children: outcome.message ?? "Tool failed" }) : outcome.result && typeof outcome.result === "object" ? /* @__PURE__ */ jsx4(KvRows, { data: outcome.result }) : /* @__PURE__ */ jsx4("p", { className: "font-mono text-[11px] text-muted-foreground", children: truncate(outcome.result) })
+    outcome && /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx5("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/50", children: outcome.ok === false ? "Failed" : "Result" }),
+      outcome.ok === false ? /* @__PURE__ */ jsx5("p", { className: "text-xs text-red-600", children: outcome.message ?? "Tool failed" }) : outcome.result && typeof outcome.result === "object" ? /* @__PURE__ */ jsx5(KvRows, { data: outcome.result }) : /* @__PURE__ */ jsx5("p", { className: "font-mono text-[11px] text-muted-foreground", children: truncate(outcome.result) })
     ] })
   ] });
 }
@@ -865,32 +1156,32 @@ function ToolCallCard({
   onOpenRun,
   renderers
 }) {
-  const [expanded, setExpanded] = useState3(false);
+  const [expanded, setExpanded] = useState5(false);
   const pending = call.status === "done" ? pendingApprovalOf(call) : null;
   const failed = call.status === "error" || toolOutcomeOf(call)?.ok === false;
   const custom = renderers?.[call.name]?.(call, message);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: `w-fit min-w-[280px] max-w-full rounded-lg border text-xs transition ${pending ? "border-amber-300/60 bg-amber-500/5" : failed ? "border-red-300/60 bg-red-500/5" : "border-border/60 bg-muted/20"}`,
       children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
             onClick: () => setExpanded((v) => !v),
             className: "flex w-full items-center gap-2 px-3 py-2 text-left",
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: `h-2 w-2 shrink-0 rounded-full ${call.status === "running" ? "animate-pulse bg-yellow-500" : pending ? "bg-amber-500" : failed ? "bg-red-500" : "bg-green-500"}`
                 }
               ),
-              /* @__PURE__ */ jsx4(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-              /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate font-medium", children: friendlyToolTitle(call) }),
-              pending && approval && /* @__PURE__ */ jsxs4("span", { className: "flex shrink-0 items-center gap-1", onClick: (e) => e.stopPropagation(), children: [
-                /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate font-medium", children: friendlyToolTitle(call) }),
+              pending && approval && /* @__PURE__ */ jsxs5("span", { className: "flex shrink-0 items-center gap-1", onClick: (e) => e.stopPropagation(), children: [
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
@@ -899,7 +1190,7 @@ function ToolCallCard({
                     children: "Approve"
                   }
                 ),
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
@@ -909,14 +1200,14 @@ function ToolCallCard({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-[11px] text-muted-foreground/70", children: call.status === "running" ? "running\u2026" : pending ? "awaiting approval" : failed ? "failed" : "done" }),
-              /* @__PURE__ */ jsx4(ChevronDown, { className: `h-3 w-3 shrink-0 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
+              /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[11px] text-muted-foreground/70", children: call.status === "running" ? "running\u2026" : pending ? "awaiting approval" : failed ? "failed" : "done" }),
+              /* @__PURE__ */ jsx5(ChevronDown2, { className: `h-3 w-3 shrink-0 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
             ]
           }
         ),
-        expanded && /* @__PURE__ */ jsxs4("div", { className: "border-t border-border/40 px-3 py-2.5", children: [
-          custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx4(ShellDetail, { call }) : /* @__PURE__ */ jsx4(DefaultToolDetail, { call })),
-          onOpenRun && call.name.startsWith("sandbox_") && /* @__PURE__ */ jsx4(
+        expanded && /* @__PURE__ */ jsxs5("div", { className: "border-t border-border/40 px-3 py-2.5", children: [
+          custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx5(ShellDetail, { call }) : /* @__PURE__ */ jsx5(DefaultToolDetail, { call })),
+          onOpenRun && call.name.startsWith("sandbox_") && /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -943,35 +1234,35 @@ function AssistantMessage({
 }) {
   const content = useSmoothText(msg.content, streaming);
   const reasoning = useSmoothText(msg.reasoning ?? "", streaming);
-  const reasoningScrollRef = useRef2(null);
-  const thinkStartRef = useRef2(null);
-  const thinkMsRef = useRef2(null);
+  const reasoningScrollRef = useRef3(null);
+  const thinkStartRef = useRef3(null);
+  const thinkMsRef = useRef3(null);
   if (streaming && reasoning && !content && thinkStartRef.current === null) {
     thinkStartRef.current = performance.now();
   }
   if (content && thinkStartRef.current !== null && thinkMsRef.current === null) {
     thinkMsRef.current = performance.now() - thinkStartRef.current;
   }
-  useEffect3(() => {
+  useEffect5(() => {
     const el = reasoningScrollRef.current;
     if (el && streaming && !content) el.scrollTop = el.scrollHeight;
   }, [reasoning, streaming, content]);
-  return /* @__PURE__ */ jsxs4("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground/60", children: [
-      /* @__PURE__ */ jsx4("span", { className: "font-semibold uppercase", children: agentLabel }),
-      msg.modelUsed && /* @__PURE__ */ jsx4("span", { className: "font-mono normal-case", children: msg.modelUsed }),
-      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx4("span", { children: formatTokensPerSecond(msg) }),
-      formatModelCost(msg, models) && /* @__PURE__ */ jsx4("span", { children: formatModelCost(msg, models) })
+  return /* @__PURE__ */ jsxs5("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground/60", children: [
+      /* @__PURE__ */ jsx5("span", { className: "font-semibold uppercase", children: agentLabel }),
+      msg.modelUsed && /* @__PURE__ */ jsx5("span", { className: "font-mono normal-case", children: msg.modelUsed }),
+      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx5("span", { children: formatTokensPerSecond(msg) }),
+      formatModelCost(msg, models) && /* @__PURE__ */ jsx5("span", { children: formatModelCost(msg, models) })
     ] }),
-    reasoning && /* @__PURE__ */ jsxs4("details", { className: "mb-2 rounded-lg border-l-2 border-border/70 bg-muted/20 px-3 py-2", open: !content, children: [
-      /* @__PURE__ */ jsx4("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: !content ? /* @__PURE__ */ jsx4("span", { className: "animate-pulse", children: "Thinking\u2026" }) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process" }),
-      /* @__PURE__ */ jsx4("div", { ref: reasoningScrollRef, className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-[13px] leading-relaxed text-muted-foreground/70", children: reasoning })
+    reasoning && /* @__PURE__ */ jsxs5("details", { className: "mb-2 rounded-lg border-l-2 border-border/70 bg-muted/20 px-3 py-2", open: !content, children: [
+      /* @__PURE__ */ jsx5("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: !content ? /* @__PURE__ */ jsx5("span", { className: "animate-pulse", children: "Thinking\u2026" }) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process" }),
+      /* @__PURE__ */ jsx5("div", { ref: reasoningScrollRef, className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-[13px] leading-relaxed text-muted-foreground/70", children: reasoning })
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "text-base leading-[1.75]", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "text-base leading-[1.75]", children: [
       renderBody(content),
-      streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx4("span", { className: "ml-0.5 inline-block h-[1.1em] w-[3px] translate-y-[2px] animate-pulse rounded-sm bg-foreground/70", "aria-hidden": true })
+      streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx5("span", { className: "ml-0.5 inline-block h-[1.1em] w-[3px] translate-y-[2px] animate-pulse rounded-sm bg-foreground/70", "aria-hidden": true })
     ] }),
-    msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx4("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx4(
+    msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx5("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx5(
       ToolCallCard,
       {
         call: tc,
@@ -986,15 +1277,15 @@ function AssistantMessage({
   ] });
 }
 function ThinkingRow({ agentLabel }) {
-  const [seconds, setSeconds] = useState3(0);
-  useEffect3(() => {
+  const [seconds, setSeconds] = useState5(0);
+  useEffect5(() => {
     const id = setInterval(() => setSeconds((s) => s + 1), 1e3);
     return () => clearInterval(id);
   }, []);
-  return /* @__PURE__ */ jsxs4("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
-    /* @__PURE__ */ jsx4("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60", children: agentLabel }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-base text-muted-foreground", children: [
-      /* @__PURE__ */ jsx4("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx4("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }),
+  return /* @__PURE__ */ jsxs5("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
+    /* @__PURE__ */ jsx5("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60", children: agentLabel }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 text-base text-muted-foreground", children: [
+      /* @__PURE__ */ jsx5("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx5("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }),
       "Thinking",
       seconds >= 3 ? ` \xB7 ${seconds}s` : "..."
     ] })
@@ -1012,14 +1303,14 @@ function ChatMessages({
   onToolCallClick,
   toolRenderers
 }) {
-  const renderBody = renderMarkdown ?? ((content) => /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap", children: content }));
+  const renderBody = renderMarkdown ?? ((content) => /* @__PURE__ */ jsx5("p", { className: "whitespace-pre-wrap", children: content }));
   const lastIsUser = messages[messages.length - 1]?.role === "user";
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     messages.map(
-      (msg) => msg.role === "user" ? /* @__PURE__ */ jsx4("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs4("div", { className: "ml-auto w-fit max-w-[85%]", children: [
-        /* @__PURE__ */ jsx4("p", { className: "mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60", children: userLabel }),
-        /* @__PURE__ */ jsx4("div", { className: "rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed", children: /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap", children: msg.content }) })
-      ] }) }, msg.id) : /* @__PURE__ */ jsx4(
+      (msg) => msg.role === "user" ? /* @__PURE__ */ jsx5("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs5("div", { className: "ml-auto w-fit max-w-[85%]", children: [
+        /* @__PURE__ */ jsx5("p", { className: "mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60", children: userLabel }),
+        /* @__PURE__ */ jsx5("div", { className: "rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed", children: /* @__PURE__ */ jsx5("p", { className: "whitespace-pre-wrap", children: msg.content }) })
+      ] }) }, msg.id) : /* @__PURE__ */ jsx5(
         AssistantMessage,
         {
           msg,
@@ -1035,11 +1326,12 @@ function ChatMessages({
         msg.id
       )
     ),
-    loading && lastIsUser && /* @__PURE__ */ jsx4(ThinkingRow, { agentLabel })
+    loading && lastIsUser && /* @__PURE__ */ jsx5(ThinkingRow, { agentLabel })
   ] });
 }
 export {
   AgentActivityPanel,
+  AgentSessionControls,
   ChatMessages,
   EffortPicker,
   FlowWaterfall,
@@ -1059,6 +1351,7 @@ export {
   nextRevealCount,
   pendingApprovalOf,
   streamChatTurn,
+  useSandboxTerminalConnection,
   useSmoothText,
   waterfallLayout
 };