@tangle-network/agent-app 0.26.0 → 0.28.0

package/dist/web-react/index.js

@@ -1,13 +1,56 @@
 import {
   stepActivityFlowTrace
-} from "../chunk-AFDROJ64.js";
+} from "../chunk-2QI7XV2T.js";
 import {
   snapHarnessToModel,
   snapModelToHarness
 } from "../chunk-5VXPDXZJ.js";
 
 // src/web-react/index.tsx
-import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState6, memo } from "react";
+
+// src/web-react/smooth-text.ts
+import { useEffect, useRef, useState } from "react";
+function nextRevealCount(shown, targetLength, dtMs, opts = {}) {
+  if (shown >= targetLength) return targetLength;
+  const base = opts.baseCharsPerSecond ?? 90;
+  const catchUp = opts.catchUpPerChar ?? 5;
+  const max = opts.maxCharsPerSecond ?? 2400;
+  const backlog = targetLength - shown;
+  const rate = Math.min(max, base + backlog * catchUp);
+  return Math.min(targetLength, shown + rate * dtMs / 1e3);
+}
+function useSmoothText(target, enabled, opts) {
+  const [, force] = useState(0);
+  const shownRef = useRef(0);
+  const lastTargetRef = useRef("");
+  if (!target.startsWith(lastTargetRef.current.slice(0, Math.floor(shownRef.current)))) {
+    shownRef.current = 0;
+  }
+  lastTargetRef.current = target;
+  if (!enabled) shownRef.current = target.length;
+  useEffect(() => {
+    if (!enabled) return;
+    let raf = 0;
+    let last = null;
+    const tick = (t) => {
+      const dt = last == null ? 16 : Math.min(t - last, 100);
+      last = t;
+      const targetLen = lastTargetRef.current.length;
+      if (shownRef.current < targetLen) {
+        shownRef.current = nextRevealCount(shownRef.current, targetLen, dt, opts);
+        force((n) => n + 1);
+        raf = requestAnimationFrame(tick);
+      }
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [enabled, target]);
+  return target.slice(0, Math.floor(shownRef.current));
+}
+
+// src/web-react/controls.tsx
+import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 
 // src/web-react/provider-logo.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -49,44 +92,246 @@ function ProviderLogo({ provider, size = 16 }) {
   ] });
 }
 
-// src/web-react/smooth-text.ts
-import { useEffect, useRef, useState } from "react";
-function nextRevealCount(shown, targetLength, dtMs, opts = {}) {
-  if (shown >= targetLength) return targetLength;
-  const base = opts.baseCharsPerSecond ?? 90;
-  const catchUp = opts.catchUpPerChar ?? 5;
-  const max = opts.maxCharsPerSecond ?? 2400;
-  const backlog = targetLength - shown;
-  const rate = Math.min(max, base + backlog * catchUp);
-  return Math.min(targetLength, shown + rate * dtMs / 1e3);
+// src/web-react/controls.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChevronDown({ className }) {
+  return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
 }
-function useSmoothText(target, enabled, opts) {
-  const [, force] = useState(0);
-  const shownRef = useRef(0);
-  const lastTargetRef = useRef("");
-  if (!target.startsWith(lastTargetRef.current.slice(0, Math.floor(shownRef.current)))) {
-    shownRef.current = 0;
-  }
-  lastTargetRef.current = target;
-  if (!enabled) shownRef.current = target.length;
-  useEffect(() => {
-    if (!enabled) return;
-    let raf = 0;
-    let last = null;
-    const tick = (t) => {
-      const dt = last == null ? 16 : Math.min(t - last, 100);
-      last = t;
-      const targetLen = lastTargetRef.current.length;
-      if (shownRef.current < targetLen) {
-        shownRef.current = nextRevealCount(shownRef.current, targetLen, dt, opts);
-        force((n) => n + 1);
+function SearchGlyph({ className }) {
+  return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx2("path", { d: "m21 21-4.3-4.3" })
+  ] });
+}
+function SparkleGlyph({ className }) {
+  return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("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 usePopover(open, setOpen) {
+  const containerRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  useEffect2(() => {
+    if (!open) return;
+    function onMouseDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+    }
+    function onKeyDown(e) {
+      if (e.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
       }
-      raf = requestAnimationFrame(tick);
+    }
+    document.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
     };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [enabled]);
-  return target.slice(0, Math.floor(shownRef.current));
+  }, [open, setOpen]);
+  return {
+    containerRef,
+    triggerRef,
+    triggerProps: {
+      ref: triggerRef,
+      "aria-haspopup": true,
+      "aria-expanded": open
+    }
+  };
+}
+var POPOVER_OPTION_FOCUS = "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-card";
+function usePending() {
+  const [pending, setPending] = useState2(false);
+  const inFlight = useRef2(false);
+  const mounted = useRef2(true);
+  useEffect2(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const run = (action) => {
+    if (inFlight.current) return;
+    let result;
+    try {
+      result = action();
+    } catch {
+      return;
+    }
+    if (!(result instanceof Promise)) return;
+    inFlight.current = true;
+    setPending(true);
+    void result.finally(() => {
+      inFlight.current = false;
+      if (mounted.current) setPending(false);
+    });
+  };
+  return { pending, run };
+}
+function formatPrice(p) {
+  if (!p) return void 0;
+  const n = Number(p);
+  if (isNaN(n) || n === 0) return void 0;
+  const perM = n * 1e6;
+  return perM >= 1 ? `$${perM.toFixed(0)}/M` : `$${perM.toFixed(2)}/M`;
+}
+function formatContext(len) {
+  if (!len) return void 0;
+  if (len >= 1e6) return `${(len / 1e6).toFixed(1)}M ctx`;
+  if (len >= 1e3) return `${Math.round(len / 1e3)}K ctx`;
+  return `${len} ctx`;
+}
+function SectionHeader({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children });
+}
+function ModelRow({
+  model,
+  selected,
+  onSelect,
+  renderProviderBadge
+}) {
+  const price = formatPrice(model.pricing?.prompt);
+  const ctx = formatContext(model.contextLength);
+  return /* @__PURE__ */ jsxs2(
+    "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 ${POPOVER_OPTION_FOCUS} ${selected ? "bg-primary/10 font-medium" : "hover:bg-accent/30"}`,
+      children: [
+        renderProviderBadge ? renderProviderBadge(model.provider) : /* @__PURE__ */ jsx2(ProviderLogo, { provider: model.provider, size: 16 }),
+        /* @__PURE__ */ jsx2("span", { className: "truncate", children: model.name }),
+        !model.supportsTools && /* @__PURE__ */ jsx2("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__ */ jsxs2("span", { className: "ml-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground", children: [
+          ctx && /* @__PURE__ */ jsx2("span", { children: ctx }),
+          price && /* @__PURE__ */ jsx2("span", { children: price })
+        ] })
+      ]
+    }
+  );
+}
+function ModelPicker({ value, onChange, models, loading, renderProviderBadge, recommendedLabel = "Recommended" }) {
+  const [open, setOpen] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const { containerRef, triggerProps } = usePopover(open, setOpen);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+  const selected = models.find((m) => m.id === value);
+  const filtered = useMemo(() => {
+    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 recommended = models.filter((m) => m.featured);
+    const byProvider = [];
+    for (const m of models) {
+      if (m.featured) continue;
+      const last = byProvider[byProvider.length - 1];
+      if (last && last.provider === m.provider) last.items.push(m);
+      else byProvider.push({ provider: m.provider, items: [m] });
+    }
+    return { recommended, byProvider };
+  }, [models]);
+  const select = (id) => {
+    onChange(id);
+    setOpen(false);
+    setQuery("");
+  };
+  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        ...triggerProps,
+        onClick: () => setOpen(!open),
+        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 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        children: [
+          selected ? renderProviderBadge ? renderProviderBadge(selected.provider) : /* @__PURE__ */ jsx2(ProviderLogo, { provider: selected.provider, size: 16 }) : /* @__PURE__ */ jsx2(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx2("span", { className: "max-w-[160px] truncate", children: selected?.name ?? value }),
+          /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs2("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__ */ jsx2("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2", children: [
+        /* @__PURE__ */ jsx2(SearchGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder: "Search models...",
+            className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "max-h-[400px] overflow-y-auto p-1 pb-2", children: [
+        loading && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "Loading models..." }),
+        !loading && filtered && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          filtered.length === 0 && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models match your search" }),
+          filtered.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+        ] }),
+        !loading && !filtered && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          sections.recommended.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(SectionHeader, { children: recommendedLabel }),
+            sections.recommended.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+          ] }),
+          sections.byProvider.map((g) => /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(SectionHeader, { children: g.provider }),
+            g.items.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+          ] }, g.provider))
+        ] })
+      ] })
+    ] })
+  ] });
+}
+var EFFORT_LEVELS = [
+  { id: "off", label: "Off" },
+  { id: "low", label: "Low" },
+  { id: "medium", label: "Medium" },
+  { id: "high", label: "High" }
+];
+function EffortPicker({ value, onChange }) {
+  const [open, setOpen] = useState2(false);
+  const { containerRef, triggerProps } = usePopover(open, setOpen);
+  const selected = EFFORT_LEVELS.find((l) => l.id === value) ?? EFFORT_LEVELS[2];
+  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        ...triggerProps,
+        onClick: () => setOpen(!open),
+        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 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        children: [
+          /* @__PURE__ */ jsx2(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx2("span", { children: selected.label }),
+          /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx2("div", { role: "menu", 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__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": l.id === value,
+        onClick: () => {
+          onChange(l.id);
+          setOpen(false);
+        },
+        className: `flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition ${POPOVER_OPTION_FOCUS} ${l.id === value ? "bg-primary/10 font-medium" : "hover:bg-accent/30"}`,
+        children: l.label
+      },
+      l.id
+    )) })
+  ] });
 }
 
 // src/web-react/chat-stream.ts
@@ -215,8 +460,8 @@ async function streamChatTurn(opts) {
 }
 
 // src/web-react/mission-activity.tsx
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var LIVE_STATUSES = /* @__PURE__ */ new Set(["pending", "running"]);
 var OK_STATUSES = /* @__PURE__ */ new Set(["completed", "done", "succeeded"]);
 var ERROR_STATUSES = /* @__PURE__ */ new Set(["failed", "error", "cancelled", "aborted"]);
@@ -263,19 +508,57 @@ function waterfallLayout(trace) {
   });
 }
 function ChevronGlyph({ className }) {
-  return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
+  return /* @__PURE__ */ jsx3("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }) });
 }
 function RefreshGlyph({ className }) {
-  return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6" }) });
+  return /* @__PURE__ */ jsx3("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d: "M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6" }) });
 }
-function StatusDot({ tone }) {
-  return /* @__PURE__ */ jsx2(
-    "span",
+function CopyGlyph({ className }) {
+  return /* @__PURE__ */ jsxs3("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx3("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  ] });
+}
+function TraceIdCopy({ traceId }) {
+  const [copied, setCopied] = useState3(false);
+  const copy = useCallback(() => {
+    void navigator.clipboard?.writeText(traceId).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1200);
+      },
+      () => {
+      }
+    );
+  }, [traceId]);
+  return /* @__PURE__ */ jsxs3(
+    "button",
     {
-      className: `h-2 w-2 shrink-0 rounded-full ${tone === "live" ? "animate-pulse bg-yellow-500" : tone === "ok" ? "bg-green-500" : tone === "error" ? "bg-red-500" : "bg-muted-foreground/40"}`
+      type: "button",
+      onClick: copy,
+      title: "Copy trace id",
+      "aria-label": "Copy trace id",
+      className: "inline-flex min-w-0 items-center gap-1.5 rounded text-left font-mono text-muted-foreground transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-card",
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "truncate", children: traceId }),
+        /* @__PURE__ */ jsx3(CopyGlyph, { className: "h-3 w-3 shrink-0" }),
+        copied && /* @__PURE__ */ jsx3("span", { className: "shrink-0 not-italic text-success", children: "copied" })
+      ]
     }
   );
 }
+function StatusDot({ tone }) {
+  return /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center", children: [
+    /* @__PURE__ */ jsx3(
+      "span",
+      {
+        "aria-hidden": true,
+        className: `h-2 w-2 shrink-0 rounded-full ${tone === "live" ? "animate-pulse bg-warning" : tone === "ok" ? "bg-success" : tone === "error" ? "bg-destructive" : "bg-muted-foreground/40"}`
+      }
+    ),
+    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: tone })
+  ] });
+}
 var BAR_CLASS = {
   pipeline: "bg-muted-foreground/30",
   model: "bg-primary/60",
@@ -285,19 +568,19 @@ function FlowWaterfall({ trace }) {
   const rows = waterfallLayout(trace);
   if (rows.length === 0) return null;
   const cost = formatActivityCost(trace.costUsd);
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
-    rows.map((row, i) => /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[minmax(0,2fr)_minmax(0,3fr)_auto] items-center gap-2", children: [
-      /* @__PURE__ */ jsx2("span", { className: "truncate font-mono text-[11px] text-muted-foreground", title: row.name, children: row.name }),
-      /* @__PURE__ */ jsx2("div", { className: "relative h-2 rounded-sm bg-muted/40", children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+    rows.map((row, i) => /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[minmax(0,2fr)_minmax(0,3fr)_auto] items-center gap-2", children: [
+      /* @__PURE__ */ jsx3("span", { className: "truncate font-mono text-[11px] text-muted-foreground", title: row.name, children: row.name }),
+      /* @__PURE__ */ jsx3("div", { className: "relative h-2 rounded-sm bg-muted/40", children: /* @__PURE__ */ jsx3(
         "div",
         {
-          className: `absolute inset-y-0 rounded-sm ${row.ok ? BAR_CLASS[row.kind] : "bg-red-500/80"} ${row.approx ? "opacity-70" : ""}`,
+          className: `absolute inset-y-0 rounded-sm ${row.ok ? BAR_CLASS[row.kind] : "bg-destructive/80"} ${row.approx ? "opacity-70" : ""}`,
           style: { left: `${row.offsetPct}%`, width: `${row.widthPct}%` }
         }
       ) }),
-      /* @__PURE__ */ jsx2("span", { className: "shrink-0 font-mono text-[10px] tabular-nums text-muted-foreground/70", children: row.durationLabel })
+      /* @__PURE__ */ jsx3("span", { className: "shrink-0 font-mono text-[10px] tabular-nums text-muted-foreground/70", children: row.durationLabel })
     ] }, i)),
-    /* @__PURE__ */ jsxs2("p", { className: "pt-0.5 text-right font-mono text-[10px] tabular-nums text-muted-foreground/60", children: [
+    /* @__PURE__ */ jsxs3("p", { className: "pt-0.5 text-right font-mono text-[10px] tabular-nums text-muted-foreground/60", children: [
       (trace.totalMs / 1e3).toFixed(1),
       "s",
       cost ? ` \xB7 ${cost}` : ""
@@ -305,43 +588,43 @@ function FlowWaterfall({ trace }) {
   ] });
 }
 function MissionActivityLane({ activity, startedAt, nowMs }) {
-  const [expanded, setExpanded] = useState2(false);
+  const [expanded, setExpanded] = useState3(false);
   if (activity.length === 0) return null;
-  return /* @__PURE__ */ jsxs2("div", { className: "mt-1 border-l border-border/50 pl-3", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "mt-1 border-l border-border/50 pl-3", children: [
     activity.map((run) => {
       const tone = activityTone(run.status);
       const cost = formatActivityCost(run.costUsd);
       const duration = formatActivityDuration(run.durationMs);
-      return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
-        /* @__PURE__ */ jsx2(StatusDot, { tone }),
-        /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1 truncate", children: [
-          /* @__PURE__ */ jsx2("span", { className: "font-medium", children: run.tool }),
-          /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground", children: [
+      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
+        /* @__PURE__ */ jsx3(StatusDot, { tone }),
+        /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1 truncate", children: [
+          /* @__PURE__ */ jsx3("span", { className: "font-medium", children: run.tool }),
+          /* @__PURE__ */ jsxs3("span", { className: "text-muted-foreground", children: [
             " \u2014 ",
             run.detail
           ] })
         ] }),
-        tone === "live" && (run.iteration !== void 0 || run.phase !== void 0) && /* @__PURE__ */ jsx2("span", { className: "shrink-0 rounded-full bg-yellow-500/10 px-1.5 py-0.5 font-mono text-[10px] text-yellow-700 dark:text-yellow-400", children: [run.iteration !== void 0 ? `iter ${run.iteration}` : null, run.phase ?? null].filter(Boolean).join(" \xB7 ") }),
-        /* @__PURE__ */ jsxs2("span", { className: "flex shrink-0 items-center gap-1.5 font-mono text-[10px] tabular-nums text-muted-foreground/70", children: [
-          tone !== "live" && tone !== "ok" && /* @__PURE__ */ jsx2("span", { children: run.status }),
-          cost && /* @__PURE__ */ jsx2("span", { children: cost }),
-          duration && /* @__PURE__ */ jsx2("span", { children: duration })
+        tone === "live" && (run.iteration !== void 0 || run.phase !== void 0) && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full bg-warning/10 px-1.5 py-0.5 font-mono text-[10px] text-warning", children: [run.iteration !== void 0 ? `iter ${run.iteration}` : null, run.phase ?? null].filter(Boolean).join(" \xB7 ") }),
+        /* @__PURE__ */ jsxs3("span", { className: "flex shrink-0 items-center gap-1.5 font-mono text-[10px] tabular-nums text-muted-foreground/70", children: [
+          tone !== "live" && tone !== "ok" && /* @__PURE__ */ jsx3("span", { children: run.status }),
+          cost && /* @__PURE__ */ jsx3("span", { children: cost }),
+          duration && /* @__PURE__ */ jsx3("span", { children: duration })
         ] })
       ] }, run.taskId);
     }),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
         onClick: () => setExpanded((v) => !v),
         className: "flex items-center gap-1 py-0.5 text-[10px] font-medium text-muted-foreground/70 transition hover:text-foreground",
         children: [
-          /* @__PURE__ */ jsx2(ChevronGlyph, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` }),
+          /* @__PURE__ */ jsx3(ChevronGlyph, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` }),
           "timeline"
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsx2("div", { className: "rounded-md border border-border/50 bg-muted/10 p-2", children: /* @__PURE__ */ jsx2(
+    expanded && /* @__PURE__ */ jsx3("div", { className: "rounded-md border border-border/50 bg-muted/10 p-2", children: /* @__PURE__ */ jsx3(
       FlowWaterfall,
       {
         trace: stepActivityFlowTrace(activity, {
@@ -356,44 +639,45 @@ function ActivityRow({
   record,
   renderMissionRef
 }) {
-  const [open, setOpen] = useState2(false);
+  const [open, setOpen] = useState3(false);
   const tone = activityTone(record.status);
   const cost = formatActivityCost(record.costUsd);
   const duration = formatActivityDuration(record.durationMs);
-  return /* @__PURE__ */ jsxs2("div", { className: "rounded-lg border border-border/60 bg-card", children: [
-    /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm", children: [
-      /* @__PURE__ */ jsx2(StatusDot, { tone }),
-      /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1 truncate", children: [
-        /* @__PURE__ */ jsx2("span", { className: "font-medium", children: record.tool }),
-        /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "rounded-lg border border-border/60 bg-card", children: [
+    /* @__PURE__ */ jsxs3("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm", children: [
+      /* @__PURE__ */ jsx3(StatusDot, { tone }),
+      /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1 truncate", children: [
+        /* @__PURE__ */ jsx3("span", { className: "font-medium", children: record.tool }),
+        /* @__PURE__ */ jsxs3("span", { className: "text-muted-foreground", children: [
           " \u2014 ",
           record.detail
         ] })
       ] }),
-      tone === "live" && (record.iteration !== void 0 || record.phase !== void 0) && /* @__PURE__ */ jsx2("span", { className: "shrink-0 rounded-full bg-yellow-500/10 px-2 py-0.5 font-mono text-[10px] text-yellow-700 dark:text-yellow-400", children: [record.iteration !== void 0 ? `iter ${record.iteration}` : null, record.phase ?? null].filter(Boolean).join(" \xB7 ") }),
-      /* @__PURE__ */ jsx2(
+      tone === "live" && (record.iteration !== void 0 || record.phase !== void 0) && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full bg-warning/10 px-2 py-0.5 font-mono text-[10px] text-warning", children: [record.iteration !== void 0 ? `iter ${record.iteration}` : null, record.phase ?? null].filter(Boolean).join(" \xB7 ") }),
+      /* @__PURE__ */ jsx3(
         "span",
         {
-          className: `shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${tone === "ok" ? "bg-green-500/10 text-green-700 dark:text-green-400" : tone === "error" ? "bg-red-500/10 text-red-700 dark:text-red-400" : tone === "live" ? "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400" : "bg-muted/60 text-muted-foreground"}`,
+          className: `shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${tone === "ok" ? "bg-success/10 text-success" : tone === "error" ? "bg-destructive/10 text-destructive" : tone === "live" ? "bg-warning/10 text-warning" : "bg-muted/60 text-muted-foreground"}`,
           children: record.status
         }
       ),
-      cost && /* @__PURE__ */ jsx2("span", { className: "shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground", children: cost }),
-      /* @__PURE__ */ jsx2(ChevronGlyph, { className: `h-3 w-3 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-180" : ""}` })
+      cost && /* @__PURE__ */ jsx3("span", { className: "shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground", children: cost }),
+      /* @__PURE__ */ jsx3(ChevronGlyph, { className: `h-3 w-3 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-180" : ""}` })
     ] }),
-    open && /* @__PURE__ */ jsxs2("div", { className: "space-y-1.5 border-t border-border/40 px-3 py-2.5", children: [
-      /* @__PURE__ */ jsxs2("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 font-mono text-[11px]", children: [
-        /* @__PURE__ */ jsx2("dt", { className: "text-muted-foreground/60", children: "task" }),
-        /* @__PURE__ */ jsx2("dd", { className: "truncate text-muted-foreground", children: record.taskId }),
-        /* @__PURE__ */ jsx2("dt", { className: "text-muted-foreground/60", children: "started" }),
-        /* @__PURE__ */ jsx2("dd", { className: "text-muted-foreground", children: new Date(record.startedAt).toLocaleString() }),
-        duration && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2("dt", { className: "text-muted-foreground/60", children: "duration" }),
-          /* @__PURE__ */ jsx2("dd", { className: "text-muted-foreground", children: duration })
+    open && /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 border-t border-border/40 px-3 py-2.5", children: [
+      record.durationMs !== void 0 && /* @__PURE__ */ jsx3("div", { className: "rounded-md border border-border/50 bg-muted/10 p-2", children: /* @__PURE__ */ jsx3(FlowWaterfall, { trace: stepActivityFlowTrace([record]) }) }),
+      /* @__PURE__ */ jsxs3("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 font-mono text-[11px]", children: [
+        /* @__PURE__ */ jsx3("dt", { className: "text-muted-foreground/60", children: "task" }),
+        /* @__PURE__ */ jsx3("dd", { className: "truncate text-muted-foreground", children: record.taskId }),
+        /* @__PURE__ */ jsx3("dt", { className: "text-muted-foreground/60", children: "started" }),
+        /* @__PURE__ */ jsx3("dd", { className: "text-muted-foreground", children: new Date(record.startedAt).toLocaleString() }),
+        duration && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3("dt", { className: "text-muted-foreground/60", children: "duration" }),
+          /* @__PURE__ */ jsx3("dd", { className: "text-muted-foreground", children: duration })
         ] }),
-        record.traceId && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2("dt", { className: "text-muted-foreground/60", children: "trace" }),
-          /* @__PURE__ */ jsx2("dd", { className: "truncate text-muted-foreground", children: record.traceId })
+        record.traceId && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3("dt", { className: "text-muted-foreground/60", children: "trace" }),
+          /* @__PURE__ */ jsx3("dd", { className: "min-w-0", children: /* @__PURE__ */ jsx3(TraceIdCopy, { traceId: record.traceId }) })
         ] })
       ] }),
       record.missionRef && renderMissionRef?.(record.missionRef, record)
@@ -401,10 +685,10 @@ function ActivityRow({
   ] });
 }
 function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent activity", emptyLabel = "No agent runs yet." }) {
-  const [rows, setRows] = useState2([]);
-  const [cursor, setCursor] = useState2(void 0);
-  const [loading, setLoading] = useState2(false);
-  const [error, setError] = useState2(null);
+  const [rows, setRows] = useState3([]);
+  const [cursor, setCursor] = useState3(void 0);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
   const load = useCallback(
     async (from) => {
       setLoading(true);
@@ -421,13 +705,13 @@ function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent ac
     },
     [fetchActivity]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     void load();
   }, [load]);
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx2("h2", { className: "flex-1 text-sm font-semibold", children: title }),
-      /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx3("h2", { className: "flex-1 text-sm font-semibold", children: title }),
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -435,14 +719,14 @@ function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent ac
           disabled: loading,
           "aria-label": "Refresh",
           className: "rounded-md p-1.5 text-muted-foreground transition hover:bg-accent/30 hover:text-foreground disabled:opacity-50",
-          children: /* @__PURE__ */ jsx2(RefreshGlyph, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` })
+          children: /* @__PURE__ */ jsx3(RefreshGlyph, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` })
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx2("p", { className: "rounded-md border border-red-300/60 bg-red-500/5 px-3 py-2 text-xs text-red-600", children: error }),
-    !error && rows.length === 0 && !loading && /* @__PURE__ */ jsx2("p", { className: "px-1 text-sm text-muted-foreground", children: emptyLabel }),
-    /* @__PURE__ */ jsx2("div", { className: "space-y-1.5", children: rows.map((record) => /* @__PURE__ */ jsx2(ActivityRow, { record, renderMissionRef }, record.taskId)) }),
-    cursor && /* @__PURE__ */ jsx2(
+    error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: error }),
+    !error && rows.length === 0 && !loading && /* @__PURE__ */ jsx3("p", { className: "px-1 text-sm text-muted-foreground", children: emptyLabel }),
+    /* @__PURE__ */ jsx3("div", { className: "space-y-1.5", children: rows.map((record) => /* @__PURE__ */ jsx3(ActivityRow, { record, renderMissionRef }, record.taskId)) }),
+    cursor && /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -456,7 +740,7 @@ 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";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState4 } from "react";
 var DEFAULT_PROVISION_POLL_INTERVAL_MS = 2e3;
 var DEFAULT_PROVISION_POLL_TIMEOUT_MS = 9e4;
 var DEFAULT_TOKEN_REFRESH_SKEW_MS = 12e4;
@@ -470,7 +754,7 @@ var EMPTY_CONNECTION = {
   loading: false
 };
 function useSandboxTerminalConnection(opts) {
-  const [conn, setConn] = useState3(EMPTY_CONNECTION);
+  const [conn, setConn] = useState4(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;
@@ -552,10 +836,10 @@ function useSandboxTerminalConnection(opts) {
       }
     }
   }, [connectionUrl, fetcher, pollIntervalMs, pollTimeoutMs]);
-  useEffect3(() => {
+  useEffect4(() => {
     void connect();
   }, [connect]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!conn.runtimeUrl || !conn.token || !conn.expiresAt) return;
     const refreshAt = Date.parse(conn.expiresAt) - Date.now() - refreshSkewMs;
     if (!Number.isFinite(refreshAt)) {
@@ -582,9 +866,9 @@ function sleep(ms) {
 }
 
 // src/web-react/seat-paywall.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function CheckGlyph() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       className: "h-4 w-4 shrink-0 text-primary",
@@ -595,14 +879,14 @@ function CheckGlyph() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsx3("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ jsx4("path", { d: "M20 6 9 17l-5-5" })
     }
   );
 }
 function Benefit({ children }) {
-  return /* @__PURE__ */ jsxs3("li", { className: "flex items-start gap-2.5 text-sm text-foreground", children: [
-    /* @__PURE__ */ jsx3("span", { className: "mt-0.5", children: /* @__PURE__ */ jsx3(CheckGlyph, {}) }),
-    /* @__PURE__ */ jsx3("span", { children })
+  return /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2.5 text-sm text-foreground", children: [
+    /* @__PURE__ */ jsx4("span", { className: "mt-0.5", children: /* @__PURE__ */ jsx4(CheckGlyph, {}) }),
+    /* @__PURE__ */ jsx4("span", { children })
   ] });
 }
 function SeatPaywall({
@@ -613,53 +897,55 @@ function SeatPaywall({
   tagline,
   ctaLabel
 }) {
-  return /* @__PURE__ */ jsx3("div", { className: "flex min-h-[60vh] w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs3("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card p-8 shadow-sm", children: [
-    /* @__PURE__ */ jsx3("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: product }),
-    /* @__PURE__ */ jsxs3("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: [
+  const { pending, run } = usePending();
+  return /* @__PURE__ */ jsx4("div", { className: "flex min-h-[60vh] w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs4("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card p-8 shadow-sm", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: product }),
+    /* @__PURE__ */ jsxs4("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: [
       "Unlock ",
       product
     ] }),
-    tagline && /* @__PURE__ */ jsx3("p", { className: "mt-2 text-sm text-muted-foreground", children: tagline }),
-    /* @__PURE__ */ jsxs3("div", { className: "mt-6 flex items-baseline gap-1.5", children: [
-      /* @__PURE__ */ jsxs3("span", { className: "text-3xl font-semibold text-foreground", children: [
+    tagline && /* @__PURE__ */ jsx4("p", { className: "mt-2 text-sm text-muted-foreground", children: tagline }),
+    /* @__PURE__ */ jsxs4("div", { className: "mt-6 flex items-baseline gap-1.5", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "text-3xl font-semibold text-foreground", children: [
         "$",
         priceUsd
       ] }),
-      /* @__PURE__ */ jsx3("span", { className: "text-sm text-muted-foreground", children: "/mo" })
+      /* @__PURE__ */ jsx4("span", { className: "text-sm text-muted-foreground", children: "/mo" })
     ] }),
-    /* @__PURE__ */ jsxs3("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs4("p", { className: "mt-1 text-sm text-muted-foreground", children: [
       "Includes $",
       includedUsageUsd,
       "/mo of AI usage"
     ] }),
-    /* @__PURE__ */ jsxs3("ul", { className: "mt-6 space-y-2.5", children: [
-      /* @__PURE__ */ jsxs3(Benefit, { children: [
+    /* @__PURE__ */ jsxs4("ul", { className: "mt-6 space-y-2.5", children: [
+      /* @__PURE__ */ jsxs4(Benefit, { children: [
         "Full access to ",
         product
       ] }),
-      /* @__PURE__ */ jsxs3(Benefit, { children: [
+      /* @__PURE__ */ jsxs4(Benefit, { children: [
         "$",
         includedUsageUsd,
         "/mo of AI usage included, every month"
       ] }),
-      /* @__PURE__ */ jsx3(Benefit, { children: "One Tangle wallet across every product you run" })
+      /* @__PURE__ */ jsx4(Benefit, { children: "One Tangle wallet across every product you run" })
     ] }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
-        onClick: onCheckout,
-        className: "mt-7 inline-flex w-full items-center justify-center rounded-xl bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90",
-        children: ctaLabel ?? `Unlock ${product}`
+        disabled: pending,
+        onClick: () => run(onCheckout),
+        className: "mt-7 inline-flex w-full items-center justify-center rounded-xl bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-70",
+        children: pending ? "Opening checkout\u2026" : ctaLabel ?? `Unlock ${product}`
       }
     ),
-    /* @__PURE__ */ jsx3("p", { className: "mt-3 text-center text-xs text-muted-foreground/70", children: "Cancel anytime." })
+    /* @__PURE__ */ jsx4("p", { className: "mt-3 text-center text-xs text-muted-foreground/70", children: "Cancel anytime." })
   ] }) });
 }
 
 // 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";
+import { useMemo as useMemo2, useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var HARNESS_LABELS = {
   opencode: "OpenCode (any model)",
   "claude-code": "Claude Code (Anthropic)",
@@ -678,58 +964,50 @@ var HARNESS_LABELS = {
 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 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 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: "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" })
+  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: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx5("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;
-}
+var FOCUS_RING = "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background";
 function HarnessPicker({
   value,
   onChange,
   available
 }) {
-  const [open, setOpen] = useState4(false);
-  const containerRef = useClickOutside(open, () => setOpen(false));
+  const [open, setOpen] = useState5(false);
+  const { containerRef, triggerProps } = usePopover(open, setOpen);
   const options = available ?? Object.keys(HARNESS_LABELS);
-  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),
+        ...triggerProps,
+        onClick: () => setOpen(!open),
         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",
+        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 ${FOCUS_RING}`,
         children: [
-          /* @__PURE__ */ jsx4("span", { className: "truncate", children: harnessLabel(value) }),
-          /* @__PURE__ */ jsx4(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          /* @__PURE__ */ jsx5("span", { className: "truncate", children: harnessLabel(value) }),
+          /* @__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 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(
+    open && /* @__PURE__ */ jsx5("div", { role: "menu", 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__ */ jsx5(
       "button",
       {
         type: "button",
+        role: "menuitemradio",
+        "aria-checked": h === value,
         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"}`,
+        className: `flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition ${FOCUS_RING} ${h === value ? "bg-primary/10 font-medium" : "hover:bg-accent/30"}`,
         children: harnessLabel(h)
       },
       h
@@ -738,7 +1016,7 @@ function HarnessPicker({
 }
 function useCoherentHandlers(props) {
   const { model, models, harness, onModelChange, onHarnessChange } = props;
-  const canonicalIds = useMemo(() => models.map((m) => m.id), [models]);
+  const canonicalIds = useMemo2(() => models.map((m) => m.id), [models]);
   const onModel = (next) => {
     onModelChange(next);
     const nextHarness = snapHarnessToModel(harness, next);
@@ -766,11 +1044,11 @@ function AgentSessionControls(props) {
     className
   } = props;
   const { onModel, onHarness } = useCoherentHandlers(props);
-  const [open, setOpen] = useState4(false);
-  const popoverRef = useClickOutside(open, () => setOpen(false));
+  const [open, setOpen] = useState5(false);
+  const { containerRef: popoverRef, triggerProps } = usePopover(open, setOpen);
   const selectedModel = models.find((m) => m.id === model);
   const showEffort = selectedModel?.supportsReasoning ?? true;
-  const modelPicker = /* @__PURE__ */ jsx4(
+  const modelPicker = /* @__PURE__ */ jsx5(
     ModelPicker,
     {
       value: model,
@@ -781,37 +1059,38 @@ function AgentSessionControls(props) {
     }
   );
   if (layout === "inline") {
-    return /* @__PURE__ */ jsxs4("div", { className: `flex items-center gap-1.5 ${className ?? ""}`, children: [
+    return /* @__PURE__ */ jsxs5("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 })
+      showHarness && /* @__PURE__ */ jsx5(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
+      showEffort && /* @__PURE__ */ jsx5(EffortPicker, { value: effort, onChange: onEffortChange })
     ] });
   }
   const hasAdvanced = showHarness || showEffort;
-  return /* @__PURE__ */ jsxs4("div", { className: `flex items-center gap-1.5 ${className ?? ""}`, children: [
+  return /* @__PURE__ */ jsxs5("div", { className: `flex items-center gap-1.5 ${className ?? ""}`, children: [
     modelPicker,
-    hasAdvanced && /* @__PURE__ */ jsxs4("div", { ref: popoverRef, className: "relative inline-flex", children: [
-      /* @__PURE__ */ jsx4(
+    hasAdvanced && /* @__PURE__ */ jsxs5("div", { ref: popoverRef, className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
-          onClick: () => setOpen((v) => !v),
+          ...triggerProps,
+          onClick: () => setOpen(!open),
           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",
+          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 ${FOCUS_RING}`,
           "data-state": open ? "open" : "closed",
-          children: /* @__PURE__ */ jsx4(GearGlyph, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx5(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." })
+      open && /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-xs font-medium text-foreground", children: "Agent backend" }),
+          /* @__PURE__ */ jsx5(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
+          /* @__PURE__ */ jsx5("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." })
+        showEffort && /* @__PURE__ */ jsxs5("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-xs font-medium text-foreground", children: "Reasoning effort" }),
+          /* @__PURE__ */ jsx5(EffortPicker, { value: effort, onChange: onEffortChange }),
+          /* @__PURE__ */ jsx5("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "How hard the agent thinks before answering. Higher is slower but more thorough." })
         ] })
       ] })
     ] })
@@ -819,30 +1098,7 @@ function AgentSessionControls(props) {
 }
 
 // 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__ */ 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 useClickOutside2(onOutside) {
-  const ref = useRef3(null);
-  useEffect5(() => {
-    function handler(e) {
-      if (ref.current && !ref.current.contains(e.target)) onOutside();
-    }
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  });
-  return ref;
-}
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function formatModelCost(msg, models) {
   if (msg.promptTokens == null && msg.completionTokens == null) return null;
   const pricing = models.find((m) => m.id === msg.modelUsed)?.pricing;
@@ -855,205 +1111,42 @@ function formatTokensPerSecond(msg) {
   if (msg.completionTokens == null || !msg.durationMs) return null;
   return `${Math.round(msg.completionTokens / (msg.durationMs / 1e3))} tok/s`;
 }
-function formatPrice(p) {
-  if (!p) return void 0;
-  const n = Number(p);
-  if (isNaN(n) || n === 0) return void 0;
-  const perM = n * 1e6;
-  return perM >= 1 ? `$${perM.toFixed(0)}/M` : `$${perM.toFixed(2)}/M`;
-}
-function formatContext(len) {
-  if (!len) return void 0;
-  if (len >= 1e6) return `${(len / 1e6).toFixed(1)}M ctx`;
-  if (len >= 1e3) return `${Math.round(len / 1e3)}K ctx`;
-  return `${len} ctx`;
-}
-function SectionHeader({ 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,
-  selected,
-  onSelect,
-  renderProviderBadge
-}) {
-  const price = formatPrice(model.pricing?.prompt);
-  const ctx = formatContext(model.contextLength);
-  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__ */ 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] = 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 = 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 = useMemo2(() => {
-    const recommended = models.filter((m) => m.featured);
-    const byProvider = [];
-    for (const m of models) {
-      if (m.featured) continue;
-      const last = byProvider[byProvider.length - 1];
-      if (last && last.provider === m.provider) last.items.push(m);
-      else byProvider.push({ provider: m.provider, items: [m] });
-    }
-    return { recommended, byProvider };
-  }, [models]);
-  const select = (id) => {
-    onChange(id);
-    setOpen(false);
-    setQuery("");
-  };
-  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__ */ 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__ */ 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,
-            type: "text",
-            value: query,
-            onChange: (e) => setQuery(e.target.value),
-            placeholder: "Search models...",
-            className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-          }
-        )
-      ] }) }),
-      /* @__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__ */ 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__ */ 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))
-        ] })
-      ] })
-    ] })
-  ] });
-}
-var EFFORT_LEVELS = [
-  { id: "off", label: "Off" },
-  { id: "low", label: "Low" },
-  { id: "medium", label: "Medium" },
-  { id: "high", label: "High" }
-];
-function EffortPicker({ value, onChange }) {
-  const [open, setOpen] = useState5(false);
-  const containerRef = useClickOutside2(() => setOpen(false));
-  const selected = EFFORT_LEVELS.find((l) => l.id === value) ?? EFFORT_LEVELS[2];
-  return /* @__PURE__ */ jsxs5("div", { ref: containerRef, className: "relative inline-flex", children: [
-    /* @__PURE__ */ jsxs5(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen((v) => !v),
-        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__ */ 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__ */ 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",
-        onClick: () => {
-          onChange(l.id);
-          setOpen(false);
-        },
-        className: `flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition ${l.id === value ? "bg-primary/10 font-medium" : "hover:bg-accent/30"}`,
-        children: l.label
-      },
-      l.id
-    )) })
-  ] });
-}
 function RunDrillIn({ run, onClose }) {
-  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(
+  return /* @__PURE__ */ jsxs6("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__ */ jsxs6("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsx6(
         "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"}`
+          className: `h-2 w-2 shrink-0 rounded-full ${run.status === "running" ? "bg-warning" : run.status === "error" ? "bg-destructive" : "bg-success"}`
         }
       ),
-      /* @__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__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx6("p", { className: "truncate text-sm font-semibold", children: run.title }),
+        /* @__PURE__ */ jsx6("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: run.toolName })
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "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__ */ 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" }) })
+          children: /* @__PURE__ */ jsx6("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx6("path", { d: "M18 6 6 18M6 6l12 12" }) })
         }
       )
     ] }),
-    /* @__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() })
+    /* @__PURE__ */ jsxs6("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
+      run.steps.length === 0 && /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
+      run.steps.map((step, i) => /* @__PURE__ */ jsxs6("div", { className: "rounded-lg border border-border/60 bg-background", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-baseline gap-2 border-b border-border/40 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx6("span", { className: `font-mono text-[11px] ${step.status === "error" ? "text-destructive" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
+          /* @__PURE__ */ jsx6("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
+          /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: new Date(step.at).toLocaleTimeString() })
         ] }),
-        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 })
+        step.detail && /* @__PURE__ */ jsx6("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__ */ 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." })
+    /* @__PURE__ */ jsx6("p", { className: "border-t border-border px-4 py-2 text-[11px] text-muted-foreground", children: "Readonly drill-in. Follow up in the main chat." })
   ] });
 }
 function pendingApprovalOf(call) {
@@ -1063,26 +1156,26 @@ function pendingApprovalOf(call) {
 }
 function ToolGlyph({ name, className }) {
   if (name.startsWith("sandbox_")) {
-    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" })
+    return /* @__PURE__ */ jsxs6("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx6("polyline", { points: "4 17 10 11 4 5" }),
+      /* @__PURE__ */ jsx6("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
     ] });
   }
   if (name === "submit_proposal") {
-    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" })
+    return /* @__PURE__ */ jsxs6("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx6("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx6("path", { d: "M14 2v6h6M9 15l2 2 4-4" })
     ] });
   }
   if (name === "schedule_followup") {
-    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__ */ jsxs6("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx6("path", { d: "M12 7v5l3 3" })
     ] });
   }
-  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" })
+  return /* @__PURE__ */ jsxs6("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx6("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "4" })
   ] });
 }
 function toolOutcomeOf(call) {
@@ -1116,36 +1209,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__ */ 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) })
+  return /* @__PURE__ */ jsx6("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs6("div", { className: "contents", children: [
+    /* @__PURE__ */ jsx6("dt", { className: "font-mono text-[11px] text-muted-foreground", children: k }),
+    /* @__PURE__ */ jsx6("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__ */ 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: [
+  return /* @__PURE__ */ jsxs6("div", { className: "overflow-hidden rounded-md bg-zinc-900 font-mono text-[11px] leading-relaxed", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 px-3 pt-2 text-zinc-400", children: [
+      /* @__PURE__ */ jsx6("span", { className: "select-none text-zinc-500", children: "$" }),
+      /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-zinc-200", children: String(call.args?.command ?? "") }),
+      r.exitCode != null && /* @__PURE__ */ jsxs6("span", { className: r.exitCode === 0 ? "text-success" : "text-destructive", children: [
         "exit ",
         r.exitCode
       ] })
     ] }),
-    /* @__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)" })
+    /* @__PURE__ */ jsx6("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__ */ 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 })
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
+    call.args && Object.keys(call.args).length > 0 && /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx6("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Called with" }),
+      /* @__PURE__ */ jsx6(KvRows, { data: call.args })
     ] }),
-    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) })
+    outcome && /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx6("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: outcome.ok === false ? "Failed" : "Result" }),
+      outcome.ok === false ? /* @__PURE__ */ jsx6("p", { className: "text-xs text-destructive", children: outcome.message ?? "Tool failed" }) : outcome.result && typeof outcome.result === "object" ? /* @__PURE__ */ jsx6(KvRows, { data: outcome.result }) : /* @__PURE__ */ jsx6("p", { className: "font-mono text-[11px] text-muted-foreground", children: truncate(outcome.result) })
     ] })
   ] });
 }
@@ -1156,58 +1249,74 @@ function ToolCallCard({
   onOpenRun,
   renderers
 }) {
-  const [expanded, setExpanded] = useState5(false);
+  const [expanded, setExpanded] = useState6(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__ */ jsxs5(
+  const { pending: deciding, run: decide } = usePending();
+  return /* @__PURE__ */ jsxs6(
     "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"}`,
+      className: `w-fit min-w-[280px] max-w-full rounded-lg border text-xs transition ${pending ? "border-warning/40 bg-warning/5" : failed ? "border-destructive/40 bg-destructive/5" : "border-border/60 bg-muted/20"}`,
       children: [
-        /* @__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__ */ 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__ */ 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",
+        /* @__PURE__ */ jsxs6("div", { className: "flex w-full items-center gap-2 px-3 py-2", children: [
+          /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              onClick: () => setExpanded((v) => !v),
+              "aria-expanded": expanded,
+              className: "flex min-w-0 flex-1 items-center gap-2 rounded text-left focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsx6(
+                  "span",
                   {
-                    type: "button",
-                    onClick: () => approval.onApprove(pending.proposalId, call.id),
-                    className: "rounded bg-green-600/90 px-2 py-0.5 text-[11px] font-semibold text-white transition hover:bg-green-600",
-                    children: "Approve"
+                    className: `h-2 w-2 shrink-0 rounded-full ${call.status === "running" ? "animate-pulse bg-warning" : pending ? "bg-warning" : failed ? "bg-destructive" : "bg-success"}`
                   }
                 ),
-                /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => approval.onReject(pending.proposalId, call.id),
-                    className: "rounded border border-border bg-card px-2 py-0.5 text-[11px] font-medium text-foreground transition hover:bg-accent/30",
-                    children: "Reject"
-                  }
-                )
-              ] }),
-              /* @__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__ */ 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(
+                /* @__PURE__ */ jsx6(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate font-medium", children: friendlyToolTitle(call) })
+              ]
+            }
+          ),
+          pending && approval && /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                disabled: deciding,
+                onClick: () => decide(() => approval.onApprove(pending.proposalId, call.id)),
+                className: "rounded bg-success px-2 py-0.5 text-[11px] font-semibold text-success-foreground transition hover:bg-success/90 disabled:cursor-not-allowed disabled:opacity-60",
+                children: "Approve"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                disabled: deciding,
+                onClick: () => decide(() => approval.onReject(pending.proposalId, call.id)),
+                className: "rounded border border-border bg-card px-2 py-0.5 text-[11px] font-medium text-foreground transition hover:bg-accent/30 disabled:cursor-not-allowed disabled:opacity-60",
+                children: "Reject"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: call.status === "running" ? "running\u2026" : pending ? "awaiting approval" : failed ? "failed" : "done" }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => setExpanded((v) => !v),
+              "aria-label": expanded ? "Collapse details" : "Expand details",
+              "aria-expanded": expanded,
+              className: "shrink-0 rounded p-0.5 focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx6(ChevronDown, { className: `h-3 w-3 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
+            }
+          )
+        ] }),
+        expanded && /* @__PURE__ */ jsxs6("div", { className: "border-t border-border/40 px-3 py-2.5", children: [
+          custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx6(ShellDetail, { call }) : /* @__PURE__ */ jsx6(DefaultToolDetail, { call })),
+          onOpenRun && call.name.startsWith("sandbox_") && /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1221,7 +1330,7 @@ function ToolCallCard({
     }
   );
 }
-function AssistantMessage({
+function AssistantMessageImpl({
   msg,
   streaming,
   models,
@@ -1234,6 +1343,7 @@ function AssistantMessage({
 }) {
   const content = useSmoothText(msg.content, streaming);
   const reasoning = useSmoothText(msg.reasoning ?? "", streaming);
+  const body = useMemo3(() => renderBody(content), [renderBody, content]);
   const reasoningScrollRef = useRef3(null);
   const thinkStartRef = useRef3(null);
   const thinkMsRef = useRef3(null);
@@ -1247,22 +1357,22 @@ function AssistantMessage({
     const el = reasoningScrollRef.current;
     if (el && streaming && !content) el.scrollTop = el.scrollHeight;
   }, [reasoning, streaming, content]);
-  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) })
+  return /* @__PURE__ */ jsxs6("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ jsx6("span", { className: "font-semibold uppercase", children: agentLabel }),
+      msg.modelUsed && /* @__PURE__ */ jsx6("span", { className: "font-mono normal-case", children: msg.modelUsed }),
+      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx6("span", { children: formatTokensPerSecond(msg) }),
+      formatModelCost(msg, models) && /* @__PURE__ */ jsx6("span", { children: formatModelCost(msg, models) })
     ] }),
-    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 })
+    reasoning && /* @__PURE__ */ jsxs6("details", { className: "mb-2 rounded-lg border-l-2 border-border/70 bg-muted/20 px-3 py-2", open: !content, children: [
+      /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: !content ? /* @__PURE__ */ jsx6("span", { className: "animate-pulse", children: "Thinking\u2026" }) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process" }),
+      /* @__PURE__ */ jsx6("div", { ref: reasoningScrollRef, className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-[13px] leading-relaxed text-muted-foreground", children: reasoning })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "text-base leading-[1.75]", children: [
-      renderBody(content),
-      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 })
+    /* @__PURE__ */ jsxs6("div", { className: "text-base leading-[1.75]", children: [
+      body,
+      streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx6("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__ */ jsx5("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx5(
+    msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx6(
       ToolCallCard,
       {
         call: tc,
@@ -1276,21 +1386,40 @@ function AssistantMessage({
     renderExtras?.(msg)
   ] });
 }
+var AssistantMessage = memo(AssistantMessageImpl);
 function ThinkingRow({ agentLabel }) {
-  const [seconds, setSeconds] = useState5(0);
+  const [seconds, setSeconds] = useState6(0);
   useEffect5(() => {
     const id = setInterval(() => setSeconds((s) => s + 1), 1e3);
     return () => clearInterval(id);
   }, []);
-  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" }) }),
+  return /* @__PURE__ */ jsxs6("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
+    /* @__PURE__ */ jsx6("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: agentLabel }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 text-base text-muted-foreground", children: [
+      /* @__PURE__ */ jsx6("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx6("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }),
       "Thinking",
       seconds >= 3 ? ` \xB7 ${seconds}s` : "..."
     ] })
   ] });
 }
+function StreamErrorRow({ message, onRetry }) {
+  return /* @__PURE__ */ jsx6("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs6("div", { role: "alert", className: "flex items-start gap-2.5 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2.5 text-sm text-destructive", children: [
+    /* @__PURE__ */ jsxs6("svg", { className: "mt-0.5 h-4 w-4 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx6("path", { d: "M12 8v4m0 4h.01" })
+    ] }),
+    /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 break-words", children: message }),
+    onRetry && /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: `shrink-0 rounded border border-destructive/40 bg-card px-2 py-0.5 text-[11px] font-medium text-destructive transition hover:bg-destructive/10 ${POPOVER_OPTION_FOCUS}`,
+        children: "Retry"
+      }
+    )
+  ] }) });
+}
 function ChatMessages({
   messages,
   models = [],
@@ -1301,16 +1430,23 @@ function ChatMessages({
   loading,
   approval,
   onToolCallClick,
-  toolRenderers
+  toolRenderers,
+  error,
+  onRetry,
+  renderEmpty
 }) {
-  const renderBody = renderMarkdown ?? ((content) => /* @__PURE__ */ jsx5("p", { className: "whitespace-pre-wrap", children: content }));
+  const renderBody = useMemo3(
+    () => renderMarkdown ?? ((content) => /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap", children: content })),
+    [renderMarkdown]
+  );
   const lastIsUser = messages[messages.length - 1]?.role === "user";
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  if (messages.length === 0 && !loading && !error && renderEmpty) return /* @__PURE__ */ jsx6(Fragment3, { children: renderEmpty() });
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     messages.map(
-      (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(
+      (msg) => msg.role === "user" ? /* @__PURE__ */ jsx6("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs6("div", { className: "ml-auto w-fit max-w-[85%]", children: [
+        /* @__PURE__ */ jsx6("p", { className: "mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: userLabel }),
+        /* @__PURE__ */ jsx6("div", { className: "rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed", children: /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap", children: msg.content }) })
+      ] }) }, msg.id) : /* @__PURE__ */ jsx6(
         AssistantMessage,
         {
           msg,
@@ -1326,7 +1462,8 @@ function ChatMessages({
         msg.id
       )
     ),
-    loading && lastIsUser && /* @__PURE__ */ jsx5(ThinkingRow, { agentLabel })
+    loading && lastIsUser && /* @__PURE__ */ jsx6(ThinkingRow, { agentLabel }),
+    error && !loading && /* @__PURE__ */ jsx6(StreamErrorRow, { message: error, onRetry })
   ] });
 }
 export {
@@ -1351,6 +1488,8 @@ export {
   nextRevealCount,
   pendingApprovalOf,
   streamChatTurn,
+  usePending,
+  usePopover,
   useSandboxTerminalConnection,
   useSmoothText,
   waterfallLayout