@tangle-network/agent-app 0.42.4 → 0.42.6

package/dist/web-react/index.js

@@ -255,7 +255,7 @@ function ModelPicker({ value, onChange, models, loading, renderProviderBadge, re
         ]
       }
     ),
-    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: [
+    open && /* @__PURE__ */ jsxs2("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-[420px] max-w-[calc(100vw-2rem)] 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(
@@ -290,16 +290,16 @@ function ModelPicker({ value, onChange, models, loading, renderProviderBadge, re
     ] })
   ] });
 }
-var EFFORT_LEVELS = [
+var DEFAULT_EFFORT_LEVELS = [
   { id: "off", label: "Off" },
-  { id: "low", label: "Low" },
-  { id: "medium", label: "Medium" },
-  { id: "high", label: "High" }
+  { id: "low", label: "Quick" },
+  { id: "medium", label: "Standard" },
+  { id: "high", label: "Extended" }
 ];
-function EffortPicker({ value, onChange }) {
+function EffortPicker({ value, onChange, levels = DEFAULT_EFFORT_LEVELS, label = "Thinking" }) {
   const [open, setOpen] = useState2(false);
   const { containerRef, triggerProps } = usePopover(open, setOpen);
-  const selected = EFFORT_LEVELS.find((l) => l.id === value) ?? EFFORT_LEVELS[2];
+  const selected = levels.find((l) => l.id === value) ?? levels[2] ?? levels[0];
   return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative inline-flex", children: [
     /* @__PURE__ */ jsxs2(
       "button",
@@ -307,16 +307,22 @@ function EffortPicker({ value, onChange }) {
         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",
+        title: label ? `${label} \u2014 how hard the agent reasons before answering` : "Reasoning effort",
+        className: "inline-flex min-h-[36px] 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__ */ jsxs2("span", { children: [
+            label ? /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground", children: [
+              label,
+              ": "
+            ] }) : null,
+            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(
+    open && /* @__PURE__ */ jsx2("div", { role: "menu", className: "absolute bottom-full left-0 z-50 mb-2 w-40 overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg", children: levels.map((l) => /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -326,7 +332,7 @@ function EffortPicker({ value, onChange }) {
           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"}`,
+        className: `flex min-h-[40px] 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
@@ -334,6 +340,24 @@ function EffortPicker({ value, onChange }) {
   ] });
 }
 
+// src/web-react/brand-mark.tsx
+import { lazy, Suspense } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MarkSpacer({ size = 24, className }) {
+  return /* @__PURE__ */ jsx3("span", { "aria-hidden": true, style: { display: "inline-block", width: size, height: size }, className });
+}
+var LazyKnot = lazy(async () => {
+  try {
+    const mod = await import("../brand/index.js");
+    return { default: mod.TangleKnot };
+  } catch {
+    return { default: MarkSpacer };
+  }
+});
+function BrandMark({ size = 24, className }) {
+  return /* @__PURE__ */ jsx3(Suspense, { fallback: /* @__PURE__ */ jsx3(MarkSpacer, { size, className }), children: /* @__PURE__ */ jsx3(LazyKnot, { size, className }) });
+}
+
 // src/web-react/chat-stream.ts
 function dispatchChatStreamLine(line, cb) {
   let receivedContent = false;
@@ -461,7 +485,7 @@ async function streamChatTurn(opts) {
 
 // src/web-react/mission-activity.tsx
 import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, 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"]);
@@ -508,15 +532,15 @@ function waterfallLayout(trace) {
   });
 }
 function ChevronGlyph({ className }) {
-  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" }) });
+  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 RefreshGlyph({ className }) {
-  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" }) });
+  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: "M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6" }) });
 }
 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" })
+    /* @__PURE__ */ jsx4("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ jsx4("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 }) {
@@ -540,23 +564,23 @@ function TraceIdCopy({ traceId }) {
       "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" })
+        /* @__PURE__ */ jsx4("span", { className: "truncate", children: traceId }),
+        /* @__PURE__ */ jsx4(CopyGlyph, { className: "h-3 w-3 shrink-0" }),
+        copied && /* @__PURE__ */ jsx4("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(
+    /* @__PURE__ */ jsx4(
       "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 })
+    /* @__PURE__ */ jsx4("span", { className: "sr-only", children: tone })
   ] });
 }
 var BAR_CLASS = {
@@ -570,15 +594,15 @@ function FlowWaterfall({ trace }) {
   const cost = formatActivityCost(trace.costUsd);
   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(
+      /* @__PURE__ */ jsx4("span", { className: "truncate font-mono text-[11px] text-muted-foreground", title: row.name, children: row.name }),
+      /* @__PURE__ */ jsx4("div", { className: "relative h-2 rounded-sm bg-muted/40", children: /* @__PURE__ */ jsx4(
         "div",
         {
           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__ */ jsx3("span", { className: "shrink-0 font-mono text-[10px] tabular-nums text-muted-foreground/70", children: row.durationLabel })
+      /* @__PURE__ */ jsx4("span", { className: "shrink-0 font-mono text-[10px] tabular-nums text-muted-foreground/70", children: row.durationLabel })
     ] }, i)),
     /* @__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),
@@ -596,19 +620,19 @@ function MissionActivityLane({ activity, startedAt, nowMs }) {
       const cost = formatActivityCost(run.costUsd);
       const duration = formatActivityDuration(run.durationMs);
       return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
-        /* @__PURE__ */ jsx3(StatusDot, { tone }),
+        /* @__PURE__ */ jsx4(StatusDot, { tone }),
         /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1 truncate", children: [
-          /* @__PURE__ */ jsx3("span", { className: "font-medium", children: run.tool }),
+          /* @__PURE__ */ jsx4("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__ */ 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 ") }),
+        tone === "live" && (run.iteration !== void 0 || run.phase !== void 0) && /* @__PURE__ */ jsx4("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 })
+          tone !== "live" && tone !== "ok" && /* @__PURE__ */ jsx4("span", { children: run.status }),
+          cost && /* @__PURE__ */ jsx4("span", { children: cost }),
+          duration && /* @__PURE__ */ jsx4("span", { children: duration })
         ] })
       ] }, run.taskId);
     }),
@@ -619,12 +643,12 @@ function MissionActivityLane({ activity, startedAt, nowMs }) {
         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__ */ jsx3(ChevronGlyph, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` }),
+          /* @__PURE__ */ jsx4(ChevronGlyph, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` }),
           "timeline"
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsx3("div", { className: "rounded-md border border-border/50 bg-muted/10 p-2", children: /* @__PURE__ */ jsx3(
+    expanded && /* @__PURE__ */ jsx4("div", { className: "rounded-md border border-border/50 bg-muted/10 p-2", children: /* @__PURE__ */ jsx4(
       FlowWaterfall,
       {
         trace: stepActivityFlowTrace(activity, {
@@ -645,39 +669,39 @@ function ActivityRow({
   const duration = formatActivityDuration(record.durationMs);
   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__ */ jsx4(StatusDot, { tone }),
       /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1 truncate", children: [
-        /* @__PURE__ */ jsx3("span", { className: "font-medium", children: record.tool }),
+        /* @__PURE__ */ jsx4("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__ */ 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(
+      tone === "live" && (record.iteration !== void 0 || record.phase !== void 0) && /* @__PURE__ */ jsx4("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__ */ jsx4(
         "span",
         {
           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__ */ 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" : ""}` })
+      cost && /* @__PURE__ */ jsx4("span", { className: "shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground", children: cost }),
+      /* @__PURE__ */ jsx4(ChevronGlyph, { className: `h-3 w-3 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-180" : ""}` })
     ] }),
     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]) }) }),
+      record.durationMs !== void 0 && /* @__PURE__ */ jsx4("div", { className: "rounded-md border border-border/50 bg-muted/10 p-2", children: /* @__PURE__ */ jsx4(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() }),
+        /* @__PURE__ */ jsx4("dt", { className: "text-muted-foreground/60", children: "task" }),
+        /* @__PURE__ */ jsx4("dd", { className: "truncate text-muted-foreground", children: record.taskId }),
+        /* @__PURE__ */ jsx4("dt", { className: "text-muted-foreground/60", children: "started" }),
+        /* @__PURE__ */ jsx4("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 })
+          /* @__PURE__ */ jsx4("dt", { className: "text-muted-foreground/60", children: "duration" }),
+          /* @__PURE__ */ jsx4("dd", { className: "text-muted-foreground", children: duration })
         ] }),
         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 }) })
+          /* @__PURE__ */ jsx4("dt", { className: "text-muted-foreground/60", children: "trace" }),
+          /* @__PURE__ */ jsx4("dd", { className: "min-w-0", children: /* @__PURE__ */ jsx4(TraceIdCopy, { traceId: record.traceId }) })
         ] })
       ] }),
       record.missionRef && renderMissionRef?.(record.missionRef, record)
@@ -710,8 +734,8 @@ function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent ac
   }, [load]);
   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(
+      /* @__PURE__ */ jsx4("h2", { className: "flex-1 text-sm font-semibold", children: title }),
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -719,14 +743,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__ */ jsx3(RefreshGlyph, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` })
+          children: /* @__PURE__ */ jsx4(RefreshGlyph, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` })
         }
       )
     ] }),
-    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(
+    error && /* @__PURE__ */ jsx4("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__ */ jsx4("p", { className: "px-1 text-sm text-muted-foreground", children: emptyLabel }),
+    /* @__PURE__ */ jsx4("div", { className: "space-y-1.5", children: rows.map((record) => /* @__PURE__ */ jsx4(ActivityRow, { record, renderMissionRef }, record.taskId)) }),
+    cursor && /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -901,9 +925,9 @@ function tabTerminalConnectionId(storageKey = DEFAULT_TERMINAL_CID_KEY) {
 }
 
 // src/web-react/workspace-terminal-panel.tsx
-import { lazy, Suspense } from "react";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var TerminalView = lazy(
+import { lazy as lazy2, Suspense as Suspense2 } from "react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var TerminalView = lazy2(
   () => import("@tangle-network/sandbox-ui/terminal").then((m) => ({ default: m.TerminalView }))
 );
 var TONE_DOT = {
@@ -935,18 +959,18 @@ function WorkspaceTerminalPanel({
   return /* @__PURE__ */ jsxs4("div", { className: `flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-card ${className ?? ""}`, children: [
     /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2.5", children: [
       /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx4("p", { className: "truncate text-sm font-medium text-foreground", children: title }),
-        subtitle && /* @__PURE__ */ jsx4("p", { className: "truncate text-xs text-muted-foreground", children: subtitle })
+        /* @__PURE__ */ jsx5("p", { className: "truncate text-sm font-medium text-foreground", children: title }),
+        subtitle && /* @__PURE__ */ jsx5("p", { className: "truncate text-xs text-muted-foreground", children: subtitle })
       ] }),
       /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsx4("span", { className: `h-1.5 w-1.5 rounded-full ${TONE_DOT[status.tone]}`, "aria-hidden": true }),
+          /* @__PURE__ */ jsx5("span", { className: `h-1.5 w-1.5 rounded-full ${TONE_DOT[status.tone]}`, "aria-hidden": true }),
           status.label
         ] }),
         headerExtra
       ] })
     ] }),
-    /* @__PURE__ */ jsx4("div", { className: "relative min-h-0 flex-1", children: ready ? /* @__PURE__ */ jsx4(Suspense, { fallback: /* @__PURE__ */ jsx4(TerminalMessage, { children: "Loading terminal\u2026" }), children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5("div", { className: "relative min-h-0 flex-1", children: ready ? /* @__PURE__ */ jsx5(Suspense2, { fallback: /* @__PURE__ */ jsx5(TerminalMessage, { children: "Loading terminal\u2026" }), children: /* @__PURE__ */ jsx5(
       TerminalView,
       {
         apiUrl,
@@ -956,9 +980,9 @@ function WorkspaceTerminalPanel({
         subtitle,
         isActive
       }
-    ) }) : /* @__PURE__ */ jsx4(TerminalMessage, { children: connection.error ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-destructive", children: connection.error }),
-      onRetry && /* @__PURE__ */ jsx4(
+    ) }) : /* @__PURE__ */ jsx5(TerminalMessage, { children: connection.error ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-sm text-destructive", children: connection.error }),
+      onRetry && /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -967,9 +991,9 @@ function WorkspaceTerminalPanel({
           children: "Reconnect"
         }
       )
-    ] }) : connection.loading ? /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: connection.status === "provisioning" ? "Provisioning sandbox\u2026" : "Connecting\u2026" }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: "Terminal not connected." }),
-      onRetry && /* @__PURE__ */ jsx4(
+    ] }) : connection.loading ? /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: connection.status === "provisioning" ? "Provisioning sandbox\u2026" : "Connecting\u2026" }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "Terminal not connected." }),
+      onRetry && /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -982,13 +1006,13 @@ function WorkspaceTerminalPanel({
   ] });
 }
 function TerminalMessage({ children }) {
-  return /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 flex flex-col items-center justify-center p-6 text-center", children });
+  return /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 flex flex-col items-center justify-center p-6 text-center", children });
 }
 
 // src/web-react/seat-paywall.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function CheckGlyph() {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       className: "h-4 w-4 shrink-0 text-primary",
@@ -999,14 +1023,14 @@ function CheckGlyph() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ jsx6("path", { d: "M20 6 9 17l-5-5" })
     }
   );
 }
 function Benefit({ children }) {
   return /* @__PURE__ */ jsxs5("li", { className: "flex items-start gap-2.5 text-sm text-foreground", children: [
-    /* @__PURE__ */ jsx5("span", { className: "mt-0.5", children: /* @__PURE__ */ jsx5(CheckGlyph, {}) }),
-    /* @__PURE__ */ jsx5("span", { children })
+    /* @__PURE__ */ jsx6("span", { className: "mt-0.5", children: /* @__PURE__ */ jsx6(CheckGlyph, {}) }),
+    /* @__PURE__ */ jsx6("span", { children })
   ] });
 }
 function SeatPaywall({
@@ -1020,30 +1044,30 @@ function SeatPaywall({
   footnote
 }) {
   const { pending, run } = usePending();
-  return /* @__PURE__ */ jsx5("div", { className: "flex min-h-[60vh] w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs5("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card p-8 shadow-sm", children: [
-    /* @__PURE__ */ jsx5("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: product }),
+  return /* @__PURE__ */ jsx6("div", { className: "flex min-h-[60vh] w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs5("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card p-8 shadow-sm", children: [
+    /* @__PURE__ */ jsx6("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: product }),
     /* @__PURE__ */ jsxs5("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: [
       "Unlock ",
       product
     ] }),
-    tagline && /* @__PURE__ */ jsx5("p", { className: "mt-2 text-sm text-muted-foreground", children: tagline }),
+    tagline && /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-muted-foreground", children: tagline }),
     /* @__PURE__ */ jsxs5("div", { className: "mt-6 flex items-baseline gap-1.5", children: [
       /* @__PURE__ */ jsxs5("span", { className: "text-3xl font-semibold text-foreground", children: [
         "$",
         priceUsd
       ] }),
-      /* @__PURE__ */ jsx5("span", { className: "text-sm text-muted-foreground", children: "/mo" })
+      /* @__PURE__ */ jsx6("span", { className: "text-sm text-muted-foreground", children: "/mo" })
     ] }),
     /* @__PURE__ */ jsxs5("p", { className: "mt-1 text-sm text-muted-foreground", children: [
       "Includes $",
       includedUsageUsd,
       "/mo of AI usage"
     ] }),
-    /* @__PURE__ */ jsx5("ul", { className: "mt-6 space-y-2.5", children: (benefits ?? [
+    /* @__PURE__ */ jsx6("ul", { className: "mt-6 space-y-2.5", children: (benefits ?? [
       `Full access to ${product}`,
       `$${includedUsageUsd}/mo of AI usage included, every month`
-    ]).map((benefit, i) => /* @__PURE__ */ jsx5(Benefit, { children: benefit }, i)) }),
-    /* @__PURE__ */ jsx5(
+    ]).map((benefit, i) => /* @__PURE__ */ jsx6(Benefit, { children: benefit }, i)) }),
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -1053,13 +1077,13 @@ function SeatPaywall({
         children: pending ? "Opening checkout\u2026" : ctaLabel ?? `Unlock ${product}`
       }
     ),
-    footnote && /* @__PURE__ */ jsx5("p", { className: "mt-3 text-center text-xs text-muted-foreground/70", children: footnote })
+    footnote && /* @__PURE__ */ jsx6("p", { className: "mt-3 text-center text-xs text-muted-foreground/70", children: footnote })
   ] }) });
 }
 
 // src/web-react/agent-session-controls.tsx
 import { useMemo as useMemo2, useState as useState5 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var HARNESS_LABELS = {
   opencode: "OpenCode (any model)",
   "claude-code": "Claude Code (Anthropic)",
@@ -1079,12 +1103,12 @@ function harnessLabel(h) {
   return HARNESS_LABELS[h] ?? h;
 }
 function ChevronDown2({ className }) {
-  return /* @__PURE__ */ jsx6("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: "m6 9 6 6 6-6" }) });
+  return /* @__PURE__ */ jsx7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "m6 9 6 6 6-6" }) });
 }
 function GearGlyph({ className }) {
   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("circle", { cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ jsx6("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" })
+    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx7("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" })
   ] });
 }
 var FOCUS_RING = "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background";
@@ -1106,12 +1130,12 @@ function HarnessPicker({
         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 ${FOCUS_RING}`,
         children: [
-          /* @__PURE__ */ jsx6("span", { className: "truncate", children: harnessLabel(value) }),
-          /* @__PURE__ */ jsx6(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          /* @__PURE__ */ jsx7("span", { className: "truncate", children: harnessLabel(value) }),
+          /* @__PURE__ */ jsx7(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx6("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__ */ jsx6(
+    open && /* @__PURE__ */ jsx7("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__ */ jsx7(
       "button",
       {
         type: "button",
@@ -1162,7 +1186,7 @@ function AgentSessionControls(props) {
   const { containerRef: popoverRef, triggerProps } = usePopover(open, setOpen);
   const selectedModel = models.find((m) => m.id === model);
   const showEffort = selectedModel?.supportsReasoning ?? true;
-  const modelPicker = /* @__PURE__ */ jsx6(
+  const modelPicker = /* @__PURE__ */ jsx7(
     ModelPicker,
     {
       value: model,
@@ -1175,15 +1199,15 @@ function AgentSessionControls(props) {
   if (layout === "inline") {
     return /* @__PURE__ */ jsxs6("div", { className: `flex items-center gap-1.5 ${className ?? ""}`, children: [
       modelPicker,
-      showHarness && /* @__PURE__ */ jsx6(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
-      showEffort && /* @__PURE__ */ jsx6(EffortPicker, { value: effort, onChange: onEffortChange })
+      showHarness && /* @__PURE__ */ jsx7(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
+      showEffort && /* @__PURE__ */ jsx7(EffortPicker, { value: effort, onChange: onEffortChange })
     ] });
   }
   const hasAdvanced = showHarness || showEffort;
   return /* @__PURE__ */ jsxs6("div", { className: `flex items-center gap-1.5 ${className ?? ""}`, children: [
     modelPicker,
     hasAdvanced && /* @__PURE__ */ jsxs6("div", { ref: popoverRef, className: "relative inline-flex", children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1192,19 +1216,19 @@ function AgentSessionControls(props) {
           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 ${FOCUS_RING}`,
           "data-state": open ? "open" : "closed",
-          children: /* @__PURE__ */ jsx6(GearGlyph, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx7(GearGlyph, { className: "h-4 w-4" })
         }
       ),
       open && /* @__PURE__ */ jsxs6("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__ */ jsxs6("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx6("p", { className: "text-xs font-medium text-foreground", children: "Agent backend" }),
-          /* @__PURE__ */ jsx6(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
-          /* @__PURE__ */ jsx6("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "The engine that runs the agent. Switching it keeps your model choice compatible." })
+          /* @__PURE__ */ jsx7("p", { className: "text-xs font-medium text-foreground", children: "Agent backend" }),
+          /* @__PURE__ */ jsx7(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
+          /* @__PURE__ */ jsx7("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__ */ jsxs6("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx6("p", { className: "text-xs font-medium text-foreground", children: "Reasoning effort" }),
-          /* @__PURE__ */ jsx6(EffortPicker, { value: effort, onChange: onEffortChange }),
-          /* @__PURE__ */ jsx6("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "How hard the agent thinks before answering. Higher is slower but more thorough." })
+          /* @__PURE__ */ jsx7("p", { className: "text-xs font-medium text-foreground", children: "Thinking" }),
+          /* @__PURE__ */ jsx7(EffortPicker, { value: effort, onChange: onEffortChange, label: "" }),
+          /* @__PURE__ */ jsx7("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "How hard the agent thinks before answering. Higher is slower but more thorough." })
         ] })
       ] })
     ] })
@@ -1212,7 +1236,7 @@ function AgentSessionControls(props) {
 }
 
 // src/web-react/index.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } 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;
@@ -1228,39 +1252,39 @@ function formatTokensPerSecond(msg) {
 function RunDrillIn({ run, onClose }) {
   return /* @__PURE__ */ jsxs7("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__ */ jsxs7("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "span",
         {
           className: `h-2 w-2 shrink-0 rounded-full ${run.status === "running" ? "bg-warning" : run.status === "error" ? "bg-destructive" : "bg-success"}`
         }
       ),
       /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx7("p", { className: "truncate text-sm font-semibold", children: run.title }),
-        /* @__PURE__ */ jsx7("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: run.toolName })
+        /* @__PURE__ */ jsx8("p", { className: "truncate text-sm font-semibold", children: run.title }),
+        /* @__PURE__ */ jsx8("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: run.toolName })
       ] }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "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__ */ jsx7("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "M18 6 6 18M6 6l12 12" }) })
+          children: /* @__PURE__ */ jsx8("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx8("path", { d: "M18 6 6 18M6 6l12 12" }) })
         }
       )
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
-      run.steps.length === 0 && /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
+      run.steps.length === 0 && /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
       run.steps.map((step, i) => /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border/60 bg-background", children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-baseline gap-2 border-b border-border/40 px-3 py-1.5", children: [
-          /* @__PURE__ */ jsx7("span", { className: `font-mono text-[11px] ${step.status === "error" ? "text-destructive" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
-          /* @__PURE__ */ jsx7("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
-          /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: new Date(step.at).toLocaleTimeString() })
+          /* @__PURE__ */ jsx8("span", { className: `font-mono text-[11px] ${step.status === "error" ? "text-destructive" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
+          /* @__PURE__ */ jsx8("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
+          /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: new Date(step.at).toLocaleTimeString() })
         ] }),
-        step.detail && /* @__PURE__ */ jsx7("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__ */ jsx8("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__ */ jsx7("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." })
+    /* @__PURE__ */ jsx8("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) {
@@ -1268,54 +1292,108 @@ function pendingApprovalOf(call) {
   if (!outcome?.ok || outcome.result?.status !== "queued_for_approval" || !outcome.result.proposalId) return null;
   return { proposalId: outcome.result.proposalId };
 }
+function ChatEmptyState({
+  productName = "Agent",
+  headline = "Ask the agent to do something",
+  subline = "Describe the outcome you want. The agent works through it step by step, and pauses for your approval before anything irreversible.",
+  doors
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: "mx-auto flex w-full max-w-2xl flex-col items-center px-6 py-12 text-center sm:py-20", children: [
+    /* @__PURE__ */ jsx8("span", { className: "mb-5 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 ring-1 ring-primary/15", children: /* @__PURE__ */ jsx8(BrandMark, { size: 32, className: "shrink-0" }) }),
+    /* @__PURE__ */ jsx8("p", { className: "text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground", children: productName }),
+    /* @__PURE__ */ jsx8("h2", { className: "mt-1.5 text-balance text-2xl font-semibold leading-tight text-foreground sm:text-[28px]", children: headline }),
+    subline && /* @__PURE__ */ jsx8("p", { className: "mt-3 max-w-md text-[15px] leading-relaxed text-muted-foreground", children: subline }),
+    doors && doors.length > 0 && /* @__PURE__ */ jsx8("div", { className: "mt-7 grid w-full gap-2.5 sm:grid-cols-3", children: doors.slice(0, 3).map((door, i) => /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        onClick: door.onSelect,
+        className: "group flex min-h-[44px] flex-col items-start rounded-xl border border-border bg-card px-4 py-3 text-left transition hover:border-primary/40 hover:bg-accent/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        children: [
+          /* @__PURE__ */ jsx8("span", { className: "text-sm font-semibold text-foreground", children: door.label }),
+          door.description && /* @__PURE__ */ jsx8("span", { className: "mt-0.5 text-[12px] leading-snug text-muted-foreground", children: door.description })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
 function ToolGlyph({ name, className }) {
   if (name.startsWith("sandbox_")) {
     return /* @__PURE__ */ jsxs7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx7("polyline", { points: "4 17 10 11 4 5" }),
-      /* @__PURE__ */ jsx7("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+      /* @__PURE__ */ jsx8("polyline", { points: "4 17 10 11 4 5" }),
+      /* @__PURE__ */ jsx8("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
     ] });
   }
   if (name === "submit_proposal") {
     return /* @__PURE__ */ jsxs7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx7("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-      /* @__PURE__ */ jsx7("path", { d: "M14 2v6h6M9 15l2 2 4-4" })
+      /* @__PURE__ */ jsx8("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx8("path", { d: "M14 2v6h6M9 15l2 2 4-4" })
     ] });
   }
   if (name === "schedule_followup") {
     return /* @__PURE__ */ jsxs7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ jsx7("path", { d: "M12 7v5l3 3" })
+      /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx8("path", { d: "M12 7v5l3 3" })
     ] });
   }
   return /* @__PURE__ */ jsxs7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx7("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3" }),
-    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "4" })
+    /* @__PURE__ */ jsx8("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3" }),
+    /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "4" })
   ] });
 }
 function toolOutcomeOf(call) {
   return call.result;
 }
+function blockKindOf(call) {
+  if (call.name === "submit_proposal") return "proposal";
+  if (call.name === "schedule_followup") return "followup";
+  if (call.name.startsWith("sandbox_")) return "command";
+  return "generic";
+}
 function friendlyToolTitle(call) {
   const a = call.args ?? {};
   switch (call.name) {
     case "submit_proposal":
-      return `Proposal \xB7 ${String(a.type ?? "")}${a.title ? `: ${String(a.title)}` : ""}`;
+      return a.title ? `Approve: ${String(a.title)}?` : "Approve this action?";
     case "sandbox_create":
-      return `Create sandbox (${String(a.environment ?? "universal")})`;
+      return `Created sandbox (${String(a.environment ?? "universal")})`;
     case "sandbox_run_command":
-      return `$ ${String(a.command ?? "")}`;
+      return `Ran ${String(a.command ?? "command")}`;
     case "sandbox_destroy":
-      return `Destroy sandbox ${String(a.sandbox_id ?? "")}`;
+      return `Destroyed sandbox ${String(a.sandbox_id ?? "")}`;
     case "schedule_followup":
-      return `Follow-up \xB7 ${String(a.title ?? "")}`;
+      return `Scheduled: ${String(a.title ?? "follow-up")}`;
     case "render_ui":
-      return `Render view \xB7 ${String(a.title ?? "")}`;
+      return `Rendered view \xB7 ${String(a.title ?? "")}`;
     case "add_citation":
-      return `Citation \xB7 ${String(a.path ?? "")}`;
+      return `Cited ${String(a.path ?? "")}`;
     default:
       return call.name;
   }
 }
+function proposalPreview(call) {
+  const a = call.args ?? {};
+  const asString = (v) => typeof v === "string" && v.trim() ? v.trim() : null;
+  const asList = (v) => Array.isArray(v) ? v.map((x) => typeof x === "string" ? x : null).filter((x) => !!x) : asString(v) ? [asString(v)] : [];
+  const verbPhrase = asString(a.summary) ?? asString(a.description) ?? (asString(a.type) ? `${String(a.type).replace(/_/g, " ")}${asString(a.title) ? `: ${asString(a.title)}` : ""}` : null);
+  const destinations = [
+    ...asList(a.destinations),
+    ...asList(a.channels),
+    ...asList(a.targets),
+    ...asList(a.platforms)
+  ];
+  const dest = destinations.length ? ` to ${destinations.join(" and ")}` : "";
+  const summary = verbPhrase ? `${verbPhrase}${dest}` : destinations.length ? `Publish to ${destinations.join(" and ")}` : null;
+  const meta = [];
+  const cost = a.cost ?? a.price ?? a.estimatedCost;
+  if (typeof cost === "number" && cost > 0) meta.push(`~$${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)}`);
+  else if (asString(cost)) meta.push(asString(cost));
+  const reach = a.reach ?? a.audience ?? a.estimatedReach;
+  if (typeof reach === "number" && reach > 0) meta.push(`reaches ~${reach.toLocaleString()}`);
+  else if (asString(reach)) meta.push(asString(reach));
+  return { summary, meta };
+}
 function truncate(v, max = 240) {
   const s = typeof v === "string" ? v : JSON.stringify(v);
   return s.length > max ? `${s.slice(0, max)}\u2026` : s;
@@ -1323,9 +1401,9 @@ 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__ */ jsx7("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs7("div", { className: "contents", children: [
-    /* @__PURE__ */ jsx7("dt", { className: "font-mono text-[11px] text-muted-foreground", children: k }),
-    /* @__PURE__ */ jsx7("dd", { className: "min-w-0 whitespace-pre-wrap break-words font-mono text-[11px] text-muted-foreground", children: truncate(v) })
+  return /* @__PURE__ */ jsx8("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs7("div", { className: "contents", children: [
+    /* @__PURE__ */ jsx8("dt", { className: "font-mono text-[11px] text-muted-foreground", children: k }),
+    /* @__PURE__ */ jsx8("dd", { className: "min-w-0 whitespace-pre-wrap break-words font-mono text-[11px] text-muted-foreground", children: truncate(v) })
   ] }, k)) });
 }
 function ShellDetail({ call }) {
@@ -1333,29 +1411,101 @@ function ShellDetail({ call }) {
   const r = outcome?.result ?? {};
   return /* @__PURE__ */ jsxs7("div", { className: "overflow-hidden rounded-md bg-zinc-900 font-mono text-[11px] leading-relaxed", children: [
     /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 pt-2 text-zinc-400", children: [
-      /* @__PURE__ */ jsx7("span", { className: "select-none text-zinc-500", children: "$" }),
-      /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate text-zinc-200", children: String(call.args?.command ?? "") }),
+      /* @__PURE__ */ jsx8("span", { className: "select-none text-zinc-500", children: "$" }),
+      /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1 truncate text-zinc-200", children: String(call.args?.command ?? "") }),
       r.exitCode != null && /* @__PURE__ */ jsxs7("span", { className: r.exitCode === 0 ? "text-success" : "text-destructive", children: [
         "exit ",
         r.exitCode
       ] })
     ] }),
-    /* @__PURE__ */ jsx7("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__ */ jsx8("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__ */ jsxs7("div", { className: "space-y-2", children: [
     call.args && Object.keys(call.args).length > 0 && /* @__PURE__ */ jsxs7("div", { children: [
-      /* @__PURE__ */ jsx7("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Called with" }),
-      /* @__PURE__ */ jsx7(KvRows, { data: call.args })
+      /* @__PURE__ */ jsx8("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Called with" }),
+      /* @__PURE__ */ jsx8(KvRows, { data: call.args })
     ] }),
     outcome && /* @__PURE__ */ jsxs7("div", { children: [
-      /* @__PURE__ */ jsx7("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: outcome.ok === false ? "Failed" : "Result" }),
-      outcome.ok === false ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-destructive", children: outcome.message ?? "Tool failed" }) : outcome.result && typeof outcome.result === "object" ? /* @__PURE__ */ jsx7(KvRows, { data: outcome.result }) : /* @__PURE__ */ jsx7("p", { className: "font-mono text-[11px] text-muted-foreground", children: truncate(outcome.result) })
+      /* @__PURE__ */ jsx8("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: outcome.ok === false ? "Failed" : "Result" }),
+      outcome.ok === false ? /* @__PURE__ */ jsx8("p", { className: "text-xs text-destructive", children: outcome.message ?? "Tool failed" }) : outcome.result && typeof outcome.result === "object" ? /* @__PURE__ */ jsx8(KvRows, { data: outcome.result }) : /* @__PURE__ */ jsx8("p", { className: "font-mono text-[11px] text-muted-foreground", children: truncate(outcome.result) })
     ] })
   ] });
 }
+function ProposalCard({
+  call,
+  message,
+  pending,
+  approval,
+  renderers
+}) {
+  const [expanded, setExpanded] = useState6(false);
+  const { summary, meta } = proposalPreview(call);
+  const custom = renderers?.[call.name]?.(call, message);
+  const { pending: deciding, run: decide } = usePending();
+  return /* @__PURE__ */ jsxs7("div", { className: "w-full max-w-full rounded-xl border border-warning/50 bg-warning/[0.06] text-sm shadow-sm ring-1 ring-warning/10", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-2.5 px-4 pt-3.5", children: [
+      /* @__PURE__ */ jsx8("span", { className: "mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-warning/15 text-warning", children: /* @__PURE__ */ jsx8(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx8("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-warning-foreground", children: "Needs your approval" }),
+        /* @__PURE__ */ jsx8("p", { className: "mt-0.5 text-[15px] font-semibold leading-snug text-foreground", children: friendlyToolTitle(call) }),
+        summary && /* @__PURE__ */ jsx8("p", { className: "mt-1 text-[13px] leading-relaxed text-muted-foreground", children: summary }),
+        meta.length > 0 && /* @__PURE__ */ jsx8("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: meta.map((m, i) => /* @__PURE__ */ jsx8("span", { className: "rounded-full bg-muted/60 px-2 py-0.5 text-[11px] font-medium text-muted-foreground", children: m }, i)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-2 px-4 pb-3.5 pt-3", children: [
+      approval ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            disabled: deciding,
+            onClick: () => decide(() => approval.onApprove(pending.proposalId, call.id)),
+            className: "inline-flex min-h-[40px] flex-1 items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-60 sm:flex-none sm:min-w-[160px]",
+            children: "Approve & run"
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            disabled: deciding,
+            onClick: () => decide(() => approval.onReject(pending.proposalId, call.id)),
+            className: "inline-flex min-h-[40px] items-center justify-center rounded-lg border border-border bg-transparent px-4 py-2 text-sm font-medium text-muted-foreground transition hover:bg-accent/30 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-60",
+            children: "Reject"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx8("span", { className: "text-[12px] font-medium text-muted-foreground", children: "Awaiting approval\u2026" }),
+      /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          type: "button",
+          onClick: () => setExpanded((v) => !v),
+          "aria-expanded": expanded,
+          className: "ml-auto inline-flex items-center gap-1 rounded text-[12px] font-medium text-muted-foreground transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: [
+            expanded ? "Hide details" : "View details",
+            /* @__PURE__ */ jsx8(ChevronDown, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` })
+          ]
+        }
+      )
+    ] }),
+    expanded && /* @__PURE__ */ jsx8("div", { className: "border-t border-warning/20 px-4 py-3 text-xs", children: custom ?? /* @__PURE__ */ jsx8(DefaultToolDetail, { call }) })
+  ] });
+}
+function FollowupCard({ call }) {
+  const a = call.args ?? {};
+  const when = typeof a.when === "string" ? a.when : typeof a.at === "string" ? a.at : typeof a.schedule === "string" ? a.schedule : null;
+  return /* @__PURE__ */ jsxs7("div", { className: "w-fit min-w-[260px] max-w-full rounded-lg border border-border/60 border-l-2 border-l-primary/60 bg-muted/20 px-3 py-2 text-sm", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx8(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5 shrink-0 text-primary/80" }),
+      /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: friendlyToolTitle(call) })
+    ] }),
+    when && /* @__PURE__ */ jsx8("p", { className: "mt-0.5 pl-[22px] text-[12px] text-muted-foreground", children: when })
+  ] });
+}
 function ToolCallCard({
   call,
   message,
@@ -1365,13 +1515,29 @@ function ToolCallCard({
 }) {
   const [expanded, setExpanded] = useState6(false);
   const pending = call.status === "done" ? pendingApprovalOf(call) : null;
+  const kind = blockKindOf(call);
   const failed = call.status === "error" || toolOutcomeOf(call)?.ok === false;
   const custom = renderers?.[call.name]?.(call, message);
-  const { pending: deciding, run: decide } = usePending();
+  if (pending) {
+    return /* @__PURE__ */ jsx8(
+      ProposalCard,
+      {
+        call,
+        message,
+        pending,
+        approval,
+        renderers
+      }
+    );
+  }
+  if (kind === "followup" && !failed) {
+    return /* @__PURE__ */ jsx8(FollowupCard, { call });
+  }
+  const isCommand = kind === "command";
   return /* @__PURE__ */ jsxs7(
     "div",
     {
-      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"}`,
+      className: `w-fit min-w-[280px] max-w-full rounded-lg border text-xs transition ${failed ? "border-destructive/40 bg-destructive/5" : "border-border/60 bg-muted/20"}`,
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center gap-2 px-3 py-2", children: [
           /* @__PURE__ */ jsxs7(
@@ -1382,41 +1548,25 @@ function ToolCallCard({
               "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__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "span",
                   {
-                    className: `h-2 w-2 shrink-0 rounded-full ${call.status === "running" ? "animate-pulse bg-warning" : pending ? "bg-warning" : failed ? "bg-destructive" : "bg-success"}`
+                    className: `h-2 w-2 shrink-0 rounded-full ${call.status === "running" ? "animate-pulse bg-warning" : failed ? "bg-destructive" : "bg-success"}`
                   }
                 ),
-                /* @__PURE__ */ jsx7(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate font-medium", children: friendlyToolTitle(call) })
+                /* @__PURE__ */ jsx8(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx8(
+                  "span",
+                  {
+                    className: `min-w-0 flex-1 truncate ${isCommand ? "font-mono text-[12px] tracking-tight text-foreground/90" : "font-medium"}`,
+                    children: friendlyToolTitle(call)
+                  }
+                )
               ]
             }
           ),
-          pending && approval && /* @__PURE__ */ jsxs7("span", { className: "flex shrink-0 items-center gap-1", children: [
-            /* @__PURE__ */ jsx7(
-              "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__ */ jsx7(
-              "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__ */ jsx7("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: call.status === "running" ? "running\u2026" : pending ? "awaiting approval" : failed ? "failed" : "done" }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: call.status === "running" ? "running\u2026" : failed ? "failed" : "done" }),
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -1424,13 +1574,13 @@ function ToolCallCard({
               "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__ */ jsx7(ChevronDown, { className: `h-3 w-3 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
+              children: /* @__PURE__ */ jsx8(ChevronDown, { className: `h-3 w-3 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
             }
           )
         ] }),
         expanded && /* @__PURE__ */ jsxs7("div", { className: "border-t border-border/40 px-3 py-2.5", children: [
-          custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx7(ShellDetail, { call }) : /* @__PURE__ */ jsx7(DefaultToolDetail, { call })),
-          onOpenRun && call.name.startsWith("sandbox_") && /* @__PURE__ */ jsx7(
+          custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx8(ShellDetail, { call }) : /* @__PURE__ */ jsx8(DefaultToolDetail, { call })),
+          onOpenRun && call.name.startsWith("sandbox_") && /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -1444,6 +1594,73 @@ function ToolCallCard({
     }
   );
 }
+function StreamingCaret() {
+  return /* @__PURE__ */ jsx8(
+    "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
+    }
+  );
+}
+function SegmentText({
+  content,
+  streaming,
+  showCaret,
+  renderBody
+}) {
+  const text = useSmoothText(content, streaming);
+  const body = useMemo3(() => renderBody(text), [renderBody, text]);
+  if (!content.trim() && !showCaret) return null;
+  return /* @__PURE__ */ jsxs7("div", { className: "text-base leading-[1.75]", children: [
+    body,
+    showCaret && /* @__PURE__ */ jsx8(StreamingCaret, {})
+  ] });
+}
+function SegmentedBody({
+  segments,
+  msg,
+  streaming,
+  renderBody,
+  approval,
+  onToolCallClick,
+  toolRenderers
+}) {
+  const lastIndex = segments.length - 1;
+  const segmentToolIds = new Set(
+    segments.flatMap((s) => s.kind === "tool" ? [s.call.id] : [])
+  );
+  const leftoverToolCalls = (msg.toolCalls ?? []).filter(
+    (tc) => !segmentToolIds.has(tc.id)
+  );
+  const renderToolCard = (call) => /* @__PURE__ */ jsx8(
+    ToolCallCard,
+    {
+      call,
+      message: msg,
+      approval,
+      onOpenRun: onToolCallClick,
+      renderers: toolRenderers
+    },
+    `tool-${call.id}`
+  );
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
+    segments.map(
+      (seg, i) => seg.kind === "text" ? /* @__PURE__ */ jsx8(
+        SegmentText,
+        {
+          content: seg.content,
+          streaming: streaming && i === lastIndex,
+          showCaret: streaming && i === lastIndex,
+          renderBody
+        },
+        `text-${i}`
+      ) : renderToolCard(seg.call)
+    ),
+    leftoverToolCalls.map(renderToolCard),
+    streaming && segments[lastIndex]?.kind === "tool" && /* @__PURE__ */ jsx8(StreamingCaret, {})
+  ] });
+}
 function AssistantMessageImpl({
   msg,
   streaming,
@@ -1458,45 +1675,60 @@ function AssistantMessageImpl({
   const content = useSmoothText(msg.content, streaming);
   const reasoning = useSmoothText(msg.reasoning ?? "", streaming);
   const body = useMemo3(() => renderBody(content), [renderBody, content]);
+  const segments = msg.segments;
+  const hasAnswerText = content !== "" || (segments?.some((s) => s.kind === "text" && s.content.trim() !== "") ?? false);
   const reasoningScrollRef = useRef4(null);
   const thinkStartRef = useRef4(null);
   const thinkMsRef = useRef4(null);
-  if (streaming && reasoning && !content && thinkStartRef.current === null) {
+  if (streaming && reasoning && !hasAnswerText && thinkStartRef.current === null) {
     thinkStartRef.current = performance.now();
   }
-  if (content && thinkStartRef.current !== null && thinkMsRef.current === null) {
+  if (hasAnswerText && thinkStartRef.current !== null && thinkMsRef.current === null) {
     thinkMsRef.current = performance.now() - thinkStartRef.current;
   }
   useEffect5(() => {
     const el = reasoningScrollRef.current;
-    if (el && streaming && !content) el.scrollTop = el.scrollHeight;
-  }, [reasoning, streaming, content]);
+    if (el && streaming && !hasAnswerText) el.scrollTop = el.scrollHeight;
+  }, [reasoning, streaming, hasAnswerText]);
   return /* @__PURE__ */ jsxs7("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
     /* @__PURE__ */ jsxs7("div", { className: "mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground", children: [
-      /* @__PURE__ */ jsx7("span", { className: "font-semibold uppercase", children: agentLabel }),
-      msg.modelUsed && /* @__PURE__ */ jsx7("span", { className: "font-mono normal-case", children: msg.modelUsed }),
-      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx7("span", { children: formatTokensPerSecond(msg) }),
-      formatModelCost(msg, models) && /* @__PURE__ */ jsx7("span", { children: formatModelCost(msg, models) })
-    ] }),
-    reasoning && /* @__PURE__ */ jsxs7("details", { className: "mb-2 rounded-lg border-l-2 border-border/70 bg-muted/20 px-3 py-2", open: !content, children: [
-      /* @__PURE__ */ jsx7("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: !content ? /* @__PURE__ */ jsx7("span", { className: "animate-pulse", children: "Thinking\u2026" }) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process" }),
-      /* @__PURE__ */ jsx7("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__ */ jsx8("span", { className: "font-semibold uppercase", children: agentLabel }),
+      msg.modelUsed && /* @__PURE__ */ jsx8("span", { className: "font-mono normal-case", children: msg.modelUsed }),
+      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx8("span", { children: formatTokensPerSecond(msg) }),
+      formatModelCost(msg, models) && /* @__PURE__ */ jsx8("span", { children: formatModelCost(msg, models) })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "text-base leading-[1.75]", children: [
-      body,
-      streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx7("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 })
+    reasoning && /* @__PURE__ */ jsxs7("details", { className: "mb-2 rounded-lg border-l-2 border-border/70 bg-muted/20 px-3 py-2", open: !hasAnswerText, children: [
+      /* @__PURE__ */ jsx8("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: !hasAnswerText ? /* @__PURE__ */ jsx8("span", { className: "animate-pulse", children: "Thinking\u2026" }) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process" }),
+      /* @__PURE__ */ jsx8("div", { ref: reasoningScrollRef, className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-[13px] leading-relaxed text-muted-foreground", children: reasoning })
     ] }),
-    msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx7(
-      ToolCallCard,
+    segments && segments.length > 0 ? /* @__PURE__ */ jsx8(
+      SegmentedBody,
       {
-        call: tc,
-        message: msg,
+        segments,
+        msg,
+        streaming,
+        renderBody,
         approval,
-        onOpenRun: onToolCallClick,
-        renderers: toolRenderers
-      },
-      tc.id
-    )) }),
+        onToolCallClick,
+        toolRenderers
+      }
+    ) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      /* @__PURE__ */ jsxs7("div", { className: "text-base leading-[1.75]", children: [
+        body,
+        streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx8(StreamingCaret, {})
+      ] }),
+      msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx8("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx8(
+        ToolCallCard,
+        {
+          call: tc,
+          message: msg,
+          approval,
+          onOpenRun: onToolCallClick,
+          renderers: toolRenderers
+        },
+        tc.id
+      )) })
+    ] }),
     renderExtras?.(msg)
   ] });
 }
@@ -1508,22 +1740,22 @@ function ThinkingRow({ agentLabel }) {
     return () => clearInterval(id);
   }, []);
   return /* @__PURE__ */ jsxs7("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
-    /* @__PURE__ */ jsx7("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: agentLabel }),
+    /* @__PURE__ */ jsx8("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: agentLabel }),
     /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 text-base text-muted-foreground", children: [
-      /* @__PURE__ */ jsx7("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }),
+      /* @__PURE__ */ jsx8("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx8("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__ */ jsx7("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs7("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: [
+  return /* @__PURE__ */ jsx8("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs7("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__ */ jsxs7("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__ */ jsx7("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ jsx7("path", { d: "M12 8v4m0 4h.01" })
+      /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx8("path", { d: "M12 8v4m0 4h.01" })
     ] }),
-    /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 break-words", children: message }),
-    onRetry && /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1 break-words", children: message }),
+    onRetry && /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1547,20 +1779,29 @@ function ChatMessages({
   toolRenderers,
   error,
   onRetry,
-  renderEmpty
+  renderEmpty,
+  emptyState,
+  header
 }) {
   const renderBody = useMemo3(
-    () => renderMarkdown ?? ((content) => /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap", children: content })),
+    () => renderMarkdown ?? ((content) => /* @__PURE__ */ jsx8("p", { className: "whitespace-pre-wrap", children: content })),
     [renderMarkdown]
   );
   const lastIsUser = messages[messages.length - 1]?.role === "user";
-  if (messages.length === 0 && !loading && !error && renderEmpty) return /* @__PURE__ */ jsx7(Fragment4, { children: renderEmpty() });
+  if (messages.length === 0 && !loading && !error) {
+    const empty = renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx8(ChatEmptyState, { ...emptyState });
+    return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      header,
+      empty
+    ] });
+  }
   return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    header,
     messages.map(
-      (msg) => msg.role === "user" ? /* @__PURE__ */ jsx7("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs7("div", { className: "ml-auto w-fit max-w-[85%]", children: [
-        /* @__PURE__ */ jsx7("p", { className: "mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: userLabel }),
-        /* @__PURE__ */ jsx7("div", { className: "rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed", children: /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap", children: msg.content }) })
-      ] }) }, msg.id) : /* @__PURE__ */ jsx7(
+      (msg) => msg.role === "user" ? /* @__PURE__ */ jsx8("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs7("div", { className: "ml-auto w-fit max-w-[85%]", children: [
+        /* @__PURE__ */ jsx8("p", { className: "mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: userLabel }),
+        /* @__PURE__ */ jsx8("div", { className: "rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed", children: /* @__PURE__ */ jsx8("p", { className: "whitespace-pre-wrap", children: msg.content }) })
+      ] }) }, msg.id) : /* @__PURE__ */ jsx8(
         AssistantMessage,
         {
           msg,
@@ -1576,14 +1817,16 @@ function ChatMessages({
         msg.id
       )
     ),
-    loading && lastIsUser && /* @__PURE__ */ jsx7(ThinkingRow, { agentLabel }),
-    error && !loading && /* @__PURE__ */ jsx7(StreamErrorRow, { message: error, onRetry })
+    loading && lastIsUser && /* @__PURE__ */ jsx8(ThinkingRow, { agentLabel }),
+    error && !loading && /* @__PURE__ */ jsx8(StreamErrorRow, { message: error, onRetry })
   ] });
 }
 export {
   AgentActivityPanel,
   AgentSessionControls,
+  ChatEmptyState,
   ChatMessages,
+  DEFAULT_EFFORT_LEVELS,
   EffortPicker,
   FlowWaterfall,
   MissionActivityLane,