@tangle-network/agent-app 0.45.49 → 0.45.51

package/dist/{chunk-ZAKKG6WI.js → chunk-CXPWUCXC.js}

@@ -13,6 +13,9 @@ import {
   usePending,
   usePopover
 } from "./chunk-CJHIAZKK.js";
+import {
+  AsyncView
+} from "./chunk-3UBAO3N5.js";
 import {
   UNTITLED_SESSION_LABEL,
   mergeSessionPages,
@@ -37,7 +40,7 @@ import {
 } from "./chunk-YJMCRXQQ.js";
 
 // src/web-react/index.tsx
-import { useEffect as useEffect11, useMemo as useMemo7, useRef as useRef11, useState as useState14, memo } from "react";
+import { useEffect as useEffect12, useId as useId4, useMemo as useMemo7, useRef as useRef12, useState as useState16, memo } from "react";
 import { InlineToolItem } from "@tangle-network/ui/run";
 
 // src/web-react/smooth-text.ts
@@ -80,6 +83,22 @@ function useSmoothText(target, enabled, opts) {
   return target.slice(0, Math.floor(shownRef.current));
 }
 
+// src/web-react/inert.ts
+function inertProps(inert) {
+  if (!inert) return {};
+  return { inert: "1" };
+}
+
+// src/web-react/motion.ts
+import { useState as useState2 } from "react";
+function staggerStyle(index, base) {
+  return { ...base, "--stagger-index": index };
+}
+function useArrivalStyle(index) {
+  const [frozen] = useState2(index);
+  return staggerStyle(frozen);
+}
+
 // src/web-react/brand-mark.tsx
 import { lazy, Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -99,10 +118,10 @@ function BrandMark({ size = 24, className }) {
 }
 
 // src/web-react/durable-plan-card.tsx
-import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState4 } from "react";
 
 // src/web-react/interaction-question-card.tsx
-import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState3 } from "react";
 
 // src/web-react/interaction-card-support.ts
 function interactionStatusLabels(labels) {
@@ -310,7 +329,8 @@ function QuestionOptionList({
       "label",
       {
         htmlFor: inputId,
-        className: `flex gap-2 rounded-lg border p-3 transition-colors ${highlighted ? "border-primary bg-primary/5" : "border-strong"} ${disabled ? "cursor-default" : "cursor-pointer hover:bg-accent"}`,
+        style: staggerStyle(optionIndex),
+        className: `agent-arrive flex gap-2 rounded-lg border p-3 transition-colors ${highlighted ? "border-primary bg-primary/5" : "border-strong"} ${disabled ? "cursor-default" : "cursor-pointer hover:bg-accent"}`,
         children: [
           /* @__PURE__ */ jsx2(
             "input",
@@ -376,13 +396,13 @@ function InteractionQuestionCard({
   renderMarkdown,
   className
 }) {
-  const [values, setValues] = useState2(() => fieldValuesFromAnswers(interaction.fields, interaction.answers));
-  const [submitting, setSubmitting] = useState2(false);
-  const [localStatus, setLocalStatus] = useState2(null);
-  const [lateAnswerSent, setLateAnswerSent] = useState2(false);
-  const [error, setError] = useState2(null);
+  const [values, setValues] = useState3(() => fieldValuesFromAnswers(interaction.fields, interaction.answers));
+  const [submitting, setSubmitting] = useState3(false);
+  const [localStatus, setLocalStatus] = useState3(null);
+  const [lateAnswerSent, setLateAnswerSent] = useState3(false);
+  const [error, setError] = useState3(null);
   const submitInFlightRef = useRef2(false);
-  const [askId, setAskId] = useState2(interaction.id);
+  const [askId, setAskId] = useState3(interaction.id);
   if (askId !== interaction.id) {
     setAskId(interaction.id);
     setValues(fieldValuesFromAnswers(interaction.fields, interaction.answers));
@@ -468,10 +488,17 @@ function InteractionQuestionCard({
     submitLabel = "Submitting\u2026";
   }
   return (
+    // The card LANDS. This is the moment the run stopped and handed the turn
+    // back — a surface that blinks into place reads as chrome that was always
+    // there, which is exactly the wrong reading for the one thing on screen
+    // waiting on the reader. `.agent-arrive` runs once on mount; a status
+    // change (answered, expired, a failed submit) re-renders the same DOM node
+    // and therefore does NOT replay it.
+    //
     // `dark:[color-scheme:dark]` keeps the native radios/checkboxes on the
     // dark control scheme — without it they paint light-scheme white on the
     // dark card.
-    /* @__PURE__ */ jsxs("div", { className: `rounded-xl border border-card-edge bg-card p-4 dark:[color-scheme:dark] ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `agent-arrive rounded-xl border border-card-edge bg-card p-4 dark:[color-scheme:dark] ${className ?? ""}`, children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsx2(InteractionBadge, { variant: "outline", children: kindLabel ?? "Question" }),
         /* @__PURE__ */ jsx2(InteractionBadge, { variant: answered ? "default" : status === "expired" || status === "declined" ? "destructive" : "outline", children: STATUS_LABELS[status] })
@@ -607,14 +634,14 @@ function DurablePlanCard({
   renderMarkdown,
   className
 }) {
-  const [feedback, setFeedback] = useState3("");
-  const [expanded, setExpanded] = useState3(false);
-  const [localError, setLocalError] = useState3(null);
+  const [feedback, setFeedback] = useState4("");
+  const [expanded, setExpanded] = useState4(false);
+  const [localError, setLocalError] = useState4(null);
   useEffect3(() => setLocalError(null), [plan.planId, plan.revision, plan.status]);
   const actionable = plan.status === "pending";
   const disabled = !canWrite || !actionable || deciding !== null;
   const bodyRef = useRef3(null);
-  const [overflows, setOverflows] = useState3(false);
+  const [overflows, setOverflows] = useState4(false);
   useLayoutEffect(() => {
     const el = bodyRef.current;
     if (el) setOverflows(el.scrollHeight > COLLAPSED_MAX_HEIGHT);
@@ -685,7 +712,7 @@ function DurablePlanCard({
 }
 
 // src/web-react/interaction-plan-card.tsx
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function CheckGlyph2({ 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: "M20 6 9 17l-5-5" }) });
@@ -714,7 +741,7 @@ function submittedFieldText(field, values) {
 }
 function useBodyOverflows(body, renderMarkdown) {
   const bodyRef = useRef4(null);
-  const [overflows, setOverflows] = useState4(false);
+  const [overflows, setOverflows] = useState5(false);
   useLayoutEffect2(() => {
     const el = bodyRef.current;
     if (el) setOverflows(el.scrollHeight > COLLAPSED_MAX_HEIGHT2);
@@ -731,12 +758,12 @@ function InteractionPlanCard({
   renderMarkdown,
   className
 }) {
-  const [values, setValues] = useState4({});
-  const [expanded, setExpanded] = useState4(false);
-  const [submitting, setSubmitting] = useState4(null);
-  const [localStatus, setLocalStatus] = useState4(null);
-  const [reRequested, setReRequested] = useState4(false);
-  const [error, setError] = useState4(null);
+  const [values, setValues] = useState5({});
+  const [expanded, setExpanded] = useState5(false);
+  const [submitting, setSubmitting] = useState5(null);
+  const [localStatus, setLocalStatus] = useState5(null);
+  const [reRequested, setReRequested] = useState5(false);
+  const [error, setError] = useState5(null);
   const submitInFlightRef = useRef4(false);
   const { bodyRef, overflows } = useBodyOverflows(interaction.body, renderMarkdown);
   const status = isTerminalInteractionStatus(interaction.status) ? interaction.status : localStatus ?? interaction.status;
@@ -800,85 +827,105 @@ function InteractionPlanCard({
   const terminalNote = TERMINAL_NOTES2[status];
   const approved = status === "answered";
   const submittedValues = interaction.answers ? fieldValuesFromAnswers(interaction.fields, interaction.answers) : values;
-  return /* @__PURE__ */ jsxs3("div", { className: `rounded-xl border border-card-edge bg-card p-4 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(InteractionBadge, { variant: "outline", children: "Plan" }),
-      /* @__PURE__ */ jsx4(InteractionBadge, { variant: approved ? "default" : status === "expired" || status === "declined" ? "destructive" : "outline", children: STATUS_LABELS2[status] })
-    ] }),
-    interaction.title.trim() && /* @__PURE__ */ jsx4("p", { className: "mb-3 text-[15px] font-semibold leading-snug text-foreground", children: interaction.title }),
-    interaction.body && /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx4(
-        "div",
-        {
-          ref: bodyRef,
-          className: "overflow-hidden text-sm text-foreground",
-          style: expanded || !overflows ? void 0 : { maxHeight: COLLAPSED_MAX_HEIGHT2 },
-          children: renderMarkdown ? renderMarkdown(interaction.body) : /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap leading-5", children: interaction.body })
-        }
-      ),
-      overflows && !expanded && /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-card to-transparent" }),
-      overflows && /* @__PURE__ */ jsxs3(
-        "button",
-        {
-          type: "button",
-          onClick: () => setExpanded((prev) => !prev),
-          className: "relative z-10 mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground transition hover:text-foreground",
-          children: [
-            /* @__PURE__ */ jsx4(ChevronDownGlyph, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` }),
-            expanded ? "Collapse plan" : "Show full plan"
-          ]
-        }
-      )
-    ] }),
-    interaction.fields.length > 0 && status === "pending" && /* @__PURE__ */ jsx4("div", { className: "mt-3 space-y-4", children: interaction.fields.map((field) => /* @__PURE__ */ jsxs3("fieldset", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium leading-5 text-foreground", children: field.label }),
-      fieldAcceptsFreeText(field) ? /* @__PURE__ */ jsx4(
-        "textarea",
-        {
-          value: values[field.name]?.text ?? "",
-          disabled,
-          "aria-label": field.label,
-          onChange: (event) => setValues((prev) => ({ ...prev, [field.name]: { ...prev[field.name], text: event.target.value } })),
-          rows: 2,
-          placeholder: field.type === "text" ? field.placeholder ?? "Optional feedback for the agent" : void 0,
-          className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary disabled:opacity-50"
-        }
-      ) : /* @__PURE__ */ jsx4(
-        "input",
-        {
-          type: "text",
-          value: values[field.name]?.text ?? "",
-          disabled,
-          "aria-label": field.label,
-          onChange: (event) => setValues((prev) => ({ ...prev, [field.name]: { ...prev[field.name], text: event.target.value } })),
-          className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary disabled:opacity-50"
-        }
-      )
-    ] }, field.name)) }),
-    interaction.fields.length > 0 && status !== "pending" && /* @__PURE__ */ jsx4("div", { className: "mt-3 space-y-2", children: interaction.fields.map((field) => {
-      const text = submittedFieldText(field, submittedValues);
-      if (!text) return null;
-      return /* @__PURE__ */ jsxs3("div", { children: [
-        /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
-        /* @__PURE__ */ jsx4("p", { className: "mt-0.5 whitespace-pre-wrap text-sm text-foreground", children: text })
-      ] }, field.name);
-    }) }),
-    error && /* @__PURE__ */ jsx4("p", { className: "mt-3 text-xs text-destructive", children: error }),
-    terminalNote && /* @__PURE__ */ jsx4("p", { className: "mt-3 text-xs text-muted-foreground", children: terminalNote }),
-    canReRequest && /* @__PURE__ */ jsx4("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsx4(InteractionActionButton, { variant: "outline", onClick: () => void requestReSubmission(), disabled: submitting !== null, children: submitting === "requesting" ? "Asking\u2026" : reRequestLabel ?? DEFAULT_RE_REQUEST_LABEL }) }),
-    reRequested && /* @__PURE__ */ jsx4("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx4(CheckGlyph2, { className: "h-3 w-3" }),
-      "Re-submission requested"
-    ] }) }),
-    status === "pending" && /* @__PURE__ */ jsxs3("div", { className: "mt-4 flex items-center justify-end gap-2", children: [
-      /* @__PURE__ */ jsx4(InteractionActionButton, { variant: "outline", onClick: () => void submit("declined"), disabled, children: submitting === "reject" ? "Sending\u2026" : "Request changes" }),
-      /* @__PURE__ */ jsx4(InteractionActionButton, { onClick: () => void submit("accepted"), disabled: disabled || approveData === null, children: submitting === "approve" ? "Approving\u2026" : "Approve plan" })
-    ] }),
-    approved && /* @__PURE__ */ jsx4("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx4(CheckGlyph2, { className: "h-3 w-3" }),
-      "Approved"
-    ] }) })
-  ] });
+  return (
+    // Same arrival as the question card: an approval is the run stopping, and
+    // the card that carries it should land rather than appear. Once on screen
+    // it never re-animates — approving, rejecting or a 410 changes state on the
+    // same DOM node, and a CSS animation does not replay on a re-render.
+    /* @__PURE__ */ jsxs3("div", { className: `agent-arrive rounded-xl border border-card-edge bg-card p-4 ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx4(InteractionBadge, { variant: "outline", children: "Plan" }),
+        /* @__PURE__ */ jsx4(InteractionBadge, { variant: approved ? "default" : status === "expired" || status === "declined" ? "destructive" : "outline", children: STATUS_LABELS2[status] })
+      ] }),
+      interaction.title.trim() && /* @__PURE__ */ jsx4("p", { className: "mb-3 text-[15px] font-semibold leading-snug text-foreground", children: interaction.title }),
+      interaction.body && /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            ref: bodyRef,
+            className: "overflow-hidden text-sm text-foreground",
+            style: expanded || !overflows ? void 0 : { maxHeight: COLLAPSED_MAX_HEIGHT2 },
+            children: renderMarkdown ? renderMarkdown(interaction.body) : /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap leading-5", children: interaction.body })
+          }
+        ),
+        overflows && !expanded && /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-card to-transparent" }),
+        overflows && /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded((prev) => !prev),
+            className: "relative z-10 mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground transition hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx4(ChevronDownGlyph, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` }),
+              expanded ? "Collapse plan" : "Show full plan"
+            ]
+          }
+        )
+      ] }),
+      interaction.fields.length > 0 && status === "pending" && // The fields do NOT carry their own `.agent-arrive`. One level per
+      // surface: the card is the thing that was not there a moment ago, and a
+      // second entrance nested inside a travelling parent composes two
+      // translations and two opacity ramps over the same pixels — the card
+      // lands while its contents are still arriving into it, which reads as
+      // instability rather than as sequence.
+      //
+      // The card level is the one that survives, because a stagger is a claim
+      // that these appeared one after another and inside a landing card that
+      // claim is false — they all appeared with it. The question card keeps
+      // its option rows staggered for the opposite reason: those are the
+      // CHOICES being offered, and telling the eye there are three of them
+      // before it has read any is information about the decision. A form's
+      // fields carry no such count to announce.
+      /* @__PURE__ */ jsx4("div", { className: "mt-3 space-y-4", children: interaction.fields.map((field) => /* @__PURE__ */ jsxs3("fieldset", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium leading-5 text-foreground", children: field.label }),
+        fieldAcceptsFreeText(field) ? /* @__PURE__ */ jsx4(
+          "textarea",
+          {
+            value: values[field.name]?.text ?? "",
+            disabled,
+            "aria-label": field.label,
+            onChange: (event) => setValues((prev) => ({ ...prev, [field.name]: { ...prev[field.name], text: event.target.value } })),
+            rows: 2,
+            placeholder: field.type === "text" ? field.placeholder ?? "Optional feedback for the agent" : void 0,
+            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary disabled:opacity-50"
+          }
+        ) : /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "text",
+            value: values[field.name]?.text ?? "",
+            disabled,
+            "aria-label": field.label,
+            onChange: (event) => setValues((prev) => ({ ...prev, [field.name]: { ...prev[field.name], text: event.target.value } })),
+            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary disabled:opacity-50"
+          }
+        )
+      ] }, field.name)) }),
+      interaction.fields.length > 0 && status !== "pending" && /* @__PURE__ */ jsx4("div", { className: "mt-3 space-y-2", children: interaction.fields.map((field) => {
+        const text = submittedFieldText(field, submittedValues);
+        if (!text) return null;
+        return /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+          /* @__PURE__ */ jsx4("p", { className: "mt-0.5 whitespace-pre-wrap text-sm text-foreground", children: text })
+        ] }, field.name);
+      }) }),
+      error && /* @__PURE__ */ jsx4("p", { className: "mt-3 text-xs text-destructive", children: error }),
+      terminalNote && /* @__PURE__ */ jsx4("p", { className: "mt-3 text-xs text-muted-foreground", children: terminalNote }),
+      canReRequest && /* @__PURE__ */ jsx4("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsx4(InteractionActionButton, { variant: "outline", onClick: () => void requestReSubmission(), disabled: submitting !== null, children: submitting === "requesting" ? "Asking\u2026" : reRequestLabel ?? DEFAULT_RE_REQUEST_LABEL }) }),
+      reRequested && /* @__PURE__ */ jsx4("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx4(CheckGlyph2, { className: "h-3 w-3" }),
+        "Re-submission requested"
+      ] }) }),
+      status === "pending" && /* @__PURE__ */ jsxs3("div", { className: "mt-4 flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsx4(InteractionActionButton, { variant: "outline", onClick: () => void submit("declined"), disabled, children: submitting === "reject" ? "Sending\u2026" : "Request changes" }),
+        /* @__PURE__ */ jsx4(InteractionActionButton, { onClick: () => void submit("accepted"), disabled: disabled || approveData === null, children: submitting === "approve" ? "Approving\u2026" : "Approve plan" })
+      ] }),
+      approved && /* @__PURE__ */ jsx4("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx4(CheckGlyph2, { className: "h-3 w-3" }),
+        "Approved"
+      ] }) })
+    ] })
+  );
 }
 
 // src/web-react/durable-chat-cards.tsx
@@ -968,7 +1015,7 @@ function DurableChatCards({
 }
 
 // src/web-react/message-attachments.tsx
-import { useCallback, useEffect as useEffect4, useState as useState5 } from "react";
+import { useCallback, useEffect as useEffect4, useState as useState6 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function FileGlyph({ 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: [
@@ -1043,7 +1090,7 @@ function triggerAttachmentDownload(name, blob) {
   }
 }
 function useAttachmentObjectUrl(blob) {
-  const [url, setUrl] = useState5(null);
+  const [url, setUrl] = useState6(null);
   useEffect4(() => {
     if (!blob) {
       setUrl(null);
@@ -1090,7 +1137,7 @@ function AttachmentUnavailable({ shape }) {
 function AttachmentThumbnail({ part, resolveFileUrl, fetchFile }) {
   const url = resolveFileUrl(part);
   const displayName = attachmentDisplayName(part);
-  const [result, setResult] = useState5(null);
+  const [result, setResult] = useState6(null);
   useEffect4(() => {
     if (!displayName) return;
     let cancelled = false;
@@ -1129,8 +1176,8 @@ function AttachmentThumbnail({ part, resolveFileUrl, fetchFile }) {
 }
 function AttachmentChip({ part, resolveFileUrl, fetchFile }) {
   const displayName = attachmentDisplayName(part);
-  const [status, setStatus] = useState5("idle");
-  const [errorMessage, setErrorMessage] = useState5(null);
+  const [status, setStatus] = useState6("idle");
+  const [errorMessage, setErrorMessage] = useState6(null);
   const handleClick = useCallback(() => {
     if (!displayName || status === "loading") return;
     setStatus("loading");
@@ -1369,7 +1416,7 @@ import {
   useCallback as useCallback2,
   useEffect as useEffect5,
   useRef as useRef5,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var IS_APPLE_PLATFORM = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
@@ -1441,14 +1488,14 @@ function ChatComposer({
   className
 }) {
   const isControlled = value !== void 0;
-  const [internal, setInternal] = useState6(initialValue ?? "");
+  const [internal, setInternal] = useState7(initialValue ?? "");
   const text = isControlled ? value : internal;
   const textRef = useRef5(text);
   textRef.current = text;
   const textareaRef = useRef5(null);
   const fileInputRef = useRef5(null);
   const folderInputRef = useRef5(null);
-  const [dragOver, setDragOver] = useState6(false);
+  const [dragOver, setDragOver] = useState7(false);
   const dragDepth = useRef5(0);
   const setText = useCallback2(
     (next) => {
@@ -1514,7 +1561,7 @@ function ChatComposer({
   const readyFileCount = pendingFiles.filter((f) => f.status === "ready").length;
   const hasSendable = text.trim().length > 0 || readyFileCount > 0;
   const canSend = hasSendable && !isStreaming && !disabled;
-  const [failedSend, setFailedSend] = useState6(null);
+  const [failedSend, setFailedSend] = useState7(null);
   const failSend = useCallback2(
     (error, draft, trimmed, parts, caret) => {
       const message = sendFailureText(error, sendFailureMessage);
@@ -1822,7 +1869,7 @@ function ChatComposer({
 }
 
 // src/web-react/durable-plan-flow.ts
-import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
 var DurablePlanClientError = class extends Error {
   constructor(message, status, code, currentPlan) {
     super(message);
@@ -1909,10 +1956,10 @@ function createDurablePlanDecisionClient(options) {
   };
 }
 function useDurablePlanFlow(options) {
-  const [plan, setPlan] = useState7(options.plan);
-  const [deciding, setDeciding] = useState7(null);
-  const [restoring, setRestoring] = useState7(false);
-  const [error, setError] = useState7(null);
+  const [plan, setPlan] = useState8(options.plan);
+  const [deciding, setDeciding] = useState8(null);
+  const [restoring, setRestoring] = useState8(false);
+  const [error, setError] = useState8(null);
   const attachments = useRef6(/* @__PURE__ */ new Map());
   const decisionInFlight = useRef6(false);
   useEffect6(() => setPlan(options.plan), [options.plan]);
@@ -2084,7 +2131,7 @@ function createDurableInteractionAnswerSubmitter(options) {
 }
 
 // src/web-react/use-chat-interactions.ts
-import { useCallback as useCallback4, useMemo as useMemo3, useState as useState8 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo3, useState as useState9 } from "react";
 function hasPendingContentDuplicate(list, interaction) {
   if (interaction.status !== "pending") return false;
   const signature = questionInteractionContentSignature(interaction);
@@ -2163,7 +2210,7 @@ function hydrateChatInteractions(list, persisted) {
   return persisted.reduce(upsertChatInteraction, list);
 }
 function useChatInteractions(options = {}) {
-  const [interactions, setInteractions] = useState8([]);
+  const [interactions, setInteractions] = useState9([]);
   const upsert = useCallback4((interaction) => {
     setInteractions((prev) => upsertChatInteraction(prev, interaction));
   }, []);
@@ -2190,7 +2237,7 @@ function useChatInteractions(options = {}) {
 }
 
 // src/web-react/use-file-mentions.ts
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef7, useState as useState9 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef7, useState as useState10 } from "react";
 var FILE_MENTION_KIND = "file";
 function toMentionItem(file) {
   return { id: file.path, label: file.name, detail: file.path, kind: FILE_MENTION_KIND };
@@ -2248,11 +2295,11 @@ function useFileMentions(options) {
     emptyText = DEFAULT_MENTION_EMPTY_TEXT
   } = options;
   const fetchImpl = options.fetchImpl ?? fetch;
-  const [state, setState] = useState9({ kind: "idle" });
+  const [state, setState] = useState10({ kind: "idle" });
   const stateRef = useRef7(state);
   stateRef.current = state;
   const inFlightRef = useRef7(null);
-  const [mentions, setMentions] = useState9([]);
+  const [mentions, setMentions] = useState10([]);
   const load = useCallback5(() => {
     if (inFlightRef.current) return inFlightRef.current;
     if (stateRef.current.kind === "idle") {
@@ -2361,7 +2408,7 @@ function segmentMentionContent(content, parts) {
 }
 
 // src/web-react/mission-activity.tsx
-import { useCallback as useCallback6, useEffect as useEffect7, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect7, useState as useState11 } from "react";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var LIVE_STATUSES = /* @__PURE__ */ new Set(["pending", "running"]);
 var OK_STATUSES = /* @__PURE__ */ new Set(["completed", "done", "succeeded"]);
@@ -2421,7 +2468,7 @@ function CopyGlyph({ className }) {
   ] });
 }
 function TraceIdCopy({ traceId }) {
-  const [copied, setCopied] = useState10(false);
+  const [copied, setCopied] = useState11(false);
   const copy = useCallback6(() => {
     void navigator.clipboard?.writeText(traceId).then(
       () => {
@@ -2454,12 +2501,21 @@ function StatusDot({ tone }) {
       "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"}`
+        className: `h-2 w-2 shrink-0 rounded-full ${tone === "live" ? "bg-warning" : tone === "ok" ? "bg-success" : tone === "error" ? "bg-destructive" : "bg-muted-foreground/40"}`
       }
     ),
     /* @__PURE__ */ jsx8("span", { className: "sr-only", children: tone })
   ] });
 }
+function RunLabel({ tool, detail, live }) {
+  return /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1 truncate", children: [
+    /* @__PURE__ */ jsx8("span", { className: live ? "agent-shimmer font-medium" : "font-medium", "data-motion": live ? "essential" : void 0, children: tool }),
+    /* @__PURE__ */ jsxs6("span", { className: "text-muted-foreground", children: [
+      " \u2014 ",
+      detail
+    ] })
+  ] });
+}
 var BAR_CLASS = {
   pipeline: "bg-muted-foreground/30",
   model: "bg-primary/60",
@@ -2488,31 +2544,27 @@ function FlowWaterfall({ trace }) {
     ] })
   ] });
 }
+function LaneRow({ run, staggerIndex }) {
+  const arrival = useArrivalStyle(staggerIndex);
+  const tone = activityTone(run.status);
+  const cost = formatActivityCost(run.costUsd);
+  const duration = formatActivityDuration(run.durationMs);
+  return /* @__PURE__ */ jsxs6("div", { className: "agent-arrive flex items-center gap-2 py-1 text-xs", style: arrival, children: [
+    /* @__PURE__ */ jsx8(StatusDot, { tone }),
+    /* @__PURE__ */ jsx8(RunLabel, { tool: run.tool, detail: run.detail, live: tone === "live" }),
+    tone === "live" && (run.iteration !== void 0 || run.phase !== void 0) && /* @__PURE__ */ jsx8("span", { className: "shrink-0 rounded-full bg-warning/10 px-1.5 py-0.5 font-mono text-xs text-warning", children: [run.iteration !== void 0 ? `iter ${run.iteration}` : null, run.phase ?? null].filter(Boolean).join(" \xB7 ") }),
+    /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1.5 font-mono text-xs tabular-nums text-muted-foreground/70", children: [
+      tone !== "live" && tone !== "ok" && /* @__PURE__ */ jsx8("span", { children: run.status }),
+      cost && /* @__PURE__ */ jsx8("span", { children: cost }),
+      duration && /* @__PURE__ */ jsx8("span", { children: duration })
+    ] })
+  ] });
+}
 function MissionActivityLane({ activity, startedAt, nowMs }) {
-  const [expanded, setExpanded] = useState10(false);
+  const [expanded, setExpanded] = useState11(false);
   if (activity.length === 0) return null;
   return /* @__PURE__ */ jsxs6("div", { className: "mt-1 border-l border-border pl-3", children: [
-    activity.map((run) => {
-      const tone = activityTone(run.status);
-      const cost = formatActivityCost(run.costUsd);
-      const duration = formatActivityDuration(run.durationMs);
-      return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
-        /* @__PURE__ */ jsx8(StatusDot, { tone }),
-        /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1 truncate", children: [
-          /* @__PURE__ */ jsx8("span", { className: "font-medium", children: run.tool }),
-          /* @__PURE__ */ jsxs6("span", { className: "text-muted-foreground", children: [
-            " \u2014 ",
-            run.detail
-          ] })
-        ] }),
-        tone === "live" && (run.iteration !== void 0 || run.phase !== void 0) && /* @__PURE__ */ jsx8("span", { className: "shrink-0 rounded-full bg-warning/10 px-1.5 py-0.5 font-mono text-xs text-warning", children: [run.iteration !== void 0 ? `iter ${run.iteration}` : null, run.phase ?? null].filter(Boolean).join(" \xB7 ") }),
-        /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1.5 font-mono text-xs tabular-nums text-muted-foreground/70", children: [
-          tone !== "live" && tone !== "ok" && /* @__PURE__ */ jsx8("span", { children: run.status }),
-          cost && /* @__PURE__ */ jsx8("span", { children: cost }),
-          duration && /* @__PURE__ */ jsx8("span", { children: duration })
-        ] })
-      ] }, run.taskId);
-    }),
+    activity.map((run, index) => /* @__PURE__ */ jsx8(LaneRow, { run, staggerIndex: index }, run.taskId)),
     /* @__PURE__ */ jsxs6(
       "button",
       {
@@ -2538,22 +2590,18 @@ function MissionActivityLane({ activity, startedAt, nowMs }) {
 }
 function ActivityRow({
   record,
-  renderMissionRef
+  renderMissionRef,
+  staggerIndex
 }) {
-  const [open, setOpen] = useState10(false);
+  const arrival = useArrivalStyle(staggerIndex);
+  const [open, setOpen] = useState11(false);
   const tone = activityTone(record.status);
   const cost = formatActivityCost(record.costUsd);
   const duration = formatActivityDuration(record.durationMs);
-  return /* @__PURE__ */ jsxs6("div", { className: "rounded-lg border border-card-edge bg-card", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "agent-arrive rounded-lg border border-card-edge bg-card", style: arrival, children: [
     /* @__PURE__ */ jsxs6("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__ */ jsx8(StatusDot, { tone }),
-      /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1 truncate", children: [
-        /* @__PURE__ */ jsx8("span", { className: "font-medium", children: record.tool }),
-        /* @__PURE__ */ jsxs6("span", { className: "text-muted-foreground", children: [
-          " \u2014 ",
-          record.detail
-        ] })
-      ] }),
+      /* @__PURE__ */ jsx8(RunLabel, { tool: record.tool, detail: record.detail, live: tone === "live" }),
       tone === "live" && (record.iteration !== void 0 || record.phase !== void 0) && /* @__PURE__ */ jsx8("span", { className: "shrink-0 rounded-full bg-warning/10 px-2 py-0.5 font-mono text-xs text-warning", children: [record.iteration !== void 0 ? `iter ${record.iteration}` : null, record.phase ?? null].filter(Boolean).join(" \xB7 ") }),
       /* @__PURE__ */ jsx8(
         "span",
@@ -2586,10 +2634,10 @@ function ActivityRow({
   ] });
 }
 function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent activity", emptyLabel = "No agent runs yet." }) {
-  const [rows, setRows] = useState10([]);
-  const [cursor, setCursor] = useState10(void 0);
-  const [status, setStatus] = useState10("loading");
-  const [error, setError] = useState10(null);
+  const [rows, setRows] = useState11([]);
+  const [cursor, setCursor] = useState11(void 0);
+  const [status, setStatus] = useState11("loading");
+  const [error, setError] = useState11(null);
   const load = useCallback6(
     async (from) => {
       setStatus("loading");
@@ -2628,7 +2676,7 @@ function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent ac
     status === "error" && /* @__PURE__ */ jsx8("p", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: error }),
     status === "ready" && rows.length === 0 && /* @__PURE__ */ jsx8("p", { className: "px-1 text-sm text-muted-foreground", children: emptyLabel }),
     /* @__PURE__ */ jsx8("span", { role: "status", "aria-live": "polite", "aria-busy": loading, className: "sr-only", children: loading ? "Loading activity\u2026" : "" }),
-    /* @__PURE__ */ jsx8("div", { className: "space-y-1.5", "aria-busy": loading, children: rows.map((record) => /* @__PURE__ */ jsx8(ActivityRow, { record, renderMissionRef }, record.taskId)) }),
+    /* @__PURE__ */ jsx8("div", { className: "space-y-1.5", "aria-busy": loading, children: rows.map((record, index) => /* @__PURE__ */ jsx8(ActivityRow, { record, renderMissionRef, staggerIndex: index }, record.taskId)) }),
     cursor && /* @__PURE__ */ jsx8(
       "button",
       {
@@ -2643,7 +2691,7 @@ function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent ac
 }
 
 // src/web-react/provenance.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useId, useRef as useRef8, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useId, useRef as useRef8, useState as useState12 } from "react";
 
 // src/web-react/provenance-model.ts
 var PROVENANCE_BASES = ["extracted", "entered", "computed", "asserted"];
@@ -2937,7 +2985,7 @@ function ProvenanceValue({
   missingValueLabel = DEFAULT_MISSING_VALUE_LABEL,
   className
 }) {
-  const [open, setOpen] = useState11(defaultOpen);
+  const [open, setOpen] = useState12(defaultOpen);
   const triggerRef = useRef8(null);
   const rootRef = useRef8(null);
   const panelId = useId();
@@ -3223,7 +3271,7 @@ import {
   useId as useId2,
   useMemo as useMemo5,
   useRef as useRef9,
-  useState as useState12
+  useState as useState13
 } from "react";
 import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function rethrowAsync(error) {
@@ -3232,7 +3280,7 @@ function rethrowAsync(error) {
   });
 }
 function useInfiniteScroll(onLoadMore, { enabled, root, rootMargin = "300px" }) {
-  const [sentinel, setSentinel] = useState12(null);
+  const [sentinel, setSentinel] = useState13(null);
   const sentinelRef = useCallback8((node) => setSentinel(node), []);
   const onLoadMoreRef = useRef9(onLoadMore);
   useEffect9(() => {
@@ -3267,10 +3315,10 @@ function useSessionHistory({
   initialPage,
   defaultSort = "newest"
 }) {
-  const [items, setItems] = useState12(initialPage.items);
-  const [nextCursor, setNextCursor] = useState12(initialPage.nextCursor ?? null);
-  const [phase, setPhase] = useState12("idle");
-  const [reloadKey, setReloadKey] = useState12(0);
+  const [items, setItems] = useState13(initialPage.items);
+  const [nextCursor, setNextCursor] = useState13(initialPage.nextCursor ?? null);
+  const [phase, setPhase] = useState13("idle");
+  const [reloadKey, setReloadKey] = useState13(0);
   const seqRef = useRef9(0);
   const resetAbortRef = useRef9(null);
   const loadMoreAbortRef = useRef9(null);
@@ -3388,11 +3436,11 @@ function useSessionActions({
   labels
 }) {
   const text = { ...DEFAULT_LABELS, ...labels };
-  const [renameTarget, setRenameTarget] = useState12(null);
-  const [renameValue, setRenameValue] = useState12("");
-  const [deleteTarget, setDeleteTarget] = useState12(null);
-  const [busy, setBusy] = useState12(false);
-  const [error, setError] = useState12(null);
+  const [renameTarget, setRenameTarget] = useState13(null);
+  const [renameValue, setRenameValue] = useState13("");
+  const [deleteTarget, setDeleteTarget] = useState13(null);
+  const [busy, setBusy] = useState13(false);
+  const [error, setError] = useState13(null);
   const openRename = useCallback8((session) => {
     setError(null);
     setRenameTarget(session);
@@ -3618,11 +3666,11 @@ function SessionHistoryPanel({
   const searchTerm = query.trim();
   const isSearching = searchTerm.length > 0;
   const column = contentWidth === "full" ? "w-full" : "mx-auto w-full max-w-4xl";
-  const [selectedIds, setSelectedIds] = useState12(/* @__PURE__ */ new Set());
-  const [ageDays, setAgeDays] = useState12("30");
-  const [bulkTarget, setBulkTarget] = useState12(null);
-  const [bulkBusy, setBulkBusy] = useState12(false);
-  const [bulkError, setBulkError] = useState12(null);
+  const [selectedIds, setSelectedIds] = useState13(/* @__PURE__ */ new Set());
+  const [ageDays, setAgeDays] = useState13("30");
+  const [bulkTarget, setBulkTarget] = useState13(null);
+  const [bulkBusy, setBulkBusy] = useState13(false);
+  const [bulkError, setBulkError] = useState13(null);
   useEffect9(() => {
     setSelectedIds(/* @__PURE__ */ new Set());
   }, [searchTerm, sort]);
@@ -3902,7 +3950,7 @@ function SessionRow({
   selected,
   onSelectedChange
 }) {
-  const [menuOpen, setMenuOpen] = useState12(false);
+  const [menuOpen, setMenuOpen] = useState13(false);
   const panelId = useId2();
   const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(menuOpen, setMenuOpen);
   const extras = extraActions?.(session) ?? [];
@@ -4011,7 +4059,7 @@ import {
   useId as useId3,
   useMemo as useMemo6,
   useRef as useRef10,
-  useState as useState13
+  useState as useState14
 } from "react";
 
 // src/web-react/record-grid-model.ts
@@ -4396,19 +4444,19 @@ function RecordGrid({
   className
 }) {
   const fieldPrefix = useId3();
-  const [overlay, setOverlay] = useState13(EMPTY_RECORD_GRID_OVERLAY);
-  const [editing, setEditingState] = useState13(null);
-  const [cellErrors, setCellErrors] = useState13({});
-  const [rowErrors, setRowErrors] = useState13({});
-  const [pendingRows, setPendingRows] = useState13({});
-  const [focus, setFocus] = useState13(null);
-  const [openSource, setOpenSource] = useState13(null);
-  const [confirmDelete, setConfirmDelete] = useState13(null);
-  const [adding, setAdding] = useState13(false);
-  const [draft, setDraft] = useState13({ ...newRowDefaults ?? {} });
-  const [draftErrors, setDraftErrors] = useState13({});
-  const [draftError, setDraftError] = useState13(null);
-  const [creating, setCreating] = useState13(false);
+  const [overlay, setOverlay] = useState14(EMPTY_RECORD_GRID_OVERLAY);
+  const [editing, setEditingState] = useState14(null);
+  const [cellErrors, setCellErrors] = useState14({});
+  const [rowErrors, setRowErrors] = useState14({});
+  const [pendingRows, setPendingRows] = useState14({});
+  const [focus, setFocus] = useState14(null);
+  const [openSource, setOpenSource] = useState14(null);
+  const [confirmDelete, setConfirmDelete] = useState14(null);
+  const [adding, setAdding] = useState14(false);
+  const [draft, setDraft] = useState14({ ...newRowDefaults ?? {} });
+  const [draftErrors, setDraftErrors] = useState14({});
+  const [draftError, setDraftError] = useState14(null);
+  const [creating, setCreating] = useState14(false);
   const cellRefs = useRef10(/* @__PURE__ */ new Map());
   const settling = useRef10(false);
   const draftCounter = useRef10(0);
@@ -5243,8 +5291,594 @@ function DraftField({ column, id, value, invalid, describedBy, onValue }) {
   );
 }
 
+// src/web-react/class-names.ts
+function joinClasses(...parts) {
+  const kept = [];
+  for (const part of parts) {
+    if (typeof part !== "string") continue;
+    const trimmed = part.trim();
+    if (trimmed.length > 0) kept.push(trimmed);
+  }
+  return kept.join(" ");
+}
+
+// src/web-react/sparkline.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_SPARKLINE_WIDTH = 96;
+var DEFAULT_SPARKLINE_HEIGHT = 24;
+var DEFAULT_INSET = 2.5;
+var STROKE_WIDTH = 1.5;
+var DOT_RADIUS = 1.75;
+var DEFAULT_SPARKLINE_LABEL = "Trend";
+var DEFAULT_SPARKLINE_EMPTY_LABEL = "No history yet";
+var DEFAULT_SPARKLINE_UNAVAILABLE_LABEL = "No readings available";
+var NUMBER_FORMAT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+function formatSparklineValue(value) {
+  return NUMBER_FORMAT.format(value);
+}
+function isReading(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function sparklineReadings(values) {
+  return values.filter(isReading);
+}
+function round(value) {
+  return Math.round(value * 100) / 100;
+}
+function sparklineGeometry(values, { width = DEFAULT_SPARKLINE_WIDTH, height = DEFAULT_SPARKLINE_HEIGHT, inset = DEFAULT_INSET } = {}) {
+  const samples = values.length;
+  const plotted = [];
+  for (let index = 0; index < samples; index += 1) {
+    const value = values[index];
+    if (isReading(value)) plotted.push({ index, value });
+  }
+  const readings = plotted.map((entry) => entry.value);
+  const gaps = samples - readings.length;
+  if (readings.length === 0) {
+    return { readings, points: [], segments: [], gaps, min: 0, max: 0, first: 0, last: 0, direction: "flat" };
+  }
+  let min = readings[0];
+  let max = readings[0];
+  for (const value of readings) {
+    if (value < min) min = value;
+    if (value > max) max = value;
+  }
+  const first = readings[0];
+  const last = readings[readings.length - 1];
+  const span = max - min;
+  const top = inset;
+  const bottom = height - inset;
+  const left = inset;
+  const right = width - inset;
+  const points = plotted.map(({ index, value }) => ({
+    // A series of ONE SAMPLE sits in the middle rather than at the left edge,
+    // where it reads as the start of a line whose rest failed to render. A
+    // single reading among several samples keeps its own position — that is the
+    // one thing that says where in the window the reading is.
+    x: round(samples <= 1 ? width / 2 : left + (right - left) * index / (samples - 1)),
+    // `span === 0` is the stable metric. Mid-height is the honest render of it;
+    // dividing by the span here is the NaN that erases the whole polyline.
+    y: round(span === 0 ? height / 2 : bottom - (bottom - top) * (value - min) / span)
+  }));
+  const segments = [];
+  let run = [];
+  let previous = Number.NEGATIVE_INFINITY;
+  plotted.forEach(({ index }, position) => {
+    if (index !== previous + 1 && run.length > 0) {
+      segments.push(run);
+      run = [];
+    }
+    run.push(points[position]);
+    previous = index;
+  });
+  if (run.length > 0) segments.push(run);
+  return {
+    readings,
+    points,
+    segments,
+    gaps,
+    min,
+    max,
+    first,
+    last,
+    direction: last > first ? "rising" : last < first ? "falling" : "flat"
+  };
+}
+function sparklinePointsAttribute(points) {
+  return points.map((point) => `${point.x},${point.y}`).join(" ");
+}
+function sparklineLabel(values, { label = DEFAULT_SPARKLINE_LABEL, format = formatSparklineValue } = {}) {
+  const { readings, gaps, min, max, first, last, direction } = sparklineGeometry(values);
+  const missing = gaps === 0 ? "" : `, ${gaps} not available`;
+  if (readings.length === 0) return gaps === 0 ? `${label}: no readings yet` : `${label}: no readings${missing}`;
+  if (readings.length === 1) return `${label}: one reading${missing}, ${format(first)}`;
+  if (max === min) return `${label}: ${readings.length} readings${missing}, unchanged at ${format(first)}`;
+  const movement = direction === "flat" ? "net unchanged" : direction;
+  return `${label}: ${readings.length} readings${missing}, range ${format(min)} to ${format(max)}, ${movement} from ${format(first)} to ${format(last)}`;
+}
+function Sparkline({
+  values,
+  label = DEFAULT_SPARKLINE_LABEL,
+  format = formatSparklineValue,
+  width = DEFAULT_SPARKLINE_WIDTH,
+  height = DEFAULT_SPARKLINE_HEIGHT,
+  emptyLabel = DEFAULT_SPARKLINE_EMPTY_LABEL,
+  unavailableLabel = DEFAULT_SPARKLINE_UNAVAILABLE_LABEL,
+  className
+}) {
+  const geometry = sparklineGeometry(values, { width, height });
+  const accessibleName = sparklineLabel(values, { label, format });
+  if (geometry.points.length === 0) {
+    return /* @__PURE__ */ jsxs11(
+      "span",
+      {
+        "data-sparkline": geometry.gaps > 0 ? "unavailable" : "empty",
+        className: joinClasses("text-[11px] text-muted-foreground", className),
+        children: [
+          /* @__PURE__ */ jsx13("span", { className: "sr-only", children: accessibleName }),
+          /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", children: geometry.gaps > 0 ? unavailableLabel : emptyLabel })
+        ]
+      }
+    );
+  }
+  const drawsLine = geometry.segments.some((segment) => segment.length > 1);
+  const end = geometry.points[geometry.points.length - 1];
+  return /* @__PURE__ */ jsxs11(
+    "svg",
+    {
+      role: "img",
+      "aria-label": accessibleName,
+      "data-sparkline": drawsLine ? "line" : "point",
+      "data-direction": geometry.direction,
+      "data-gaps": geometry.gaps > 0 ? geometry.gaps : void 0,
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className,
+      focusable: "false",
+      children: [
+        geometry.segments.map((segment, index) => {
+          const key = `segment-${index}`;
+          if (segment.length > 1) {
+            return /* @__PURE__ */ jsx13(
+              "polyline",
+              {
+                points: sparklinePointsAttribute(segment),
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: STROKE_WIDTH,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                vectorEffect: "non-scaling-stroke"
+              },
+              key
+            );
+          }
+          const only = segment[0];
+          if (only.x === end.x && only.y === end.y) return null;
+          return /* @__PURE__ */ jsx13("circle", { cx: only.x, cy: only.y, r: DOT_RADIUS, fill: "currentColor" }, key);
+        }),
+        /* @__PURE__ */ jsx13("circle", { cx: end.x, cy: end.y, r: DOT_RADIUS, fill: "currentColor" })
+      ]
+    }
+  );
+}
+
+// src/web-react/insight-card.tsx
+import {
+  isValidElement as isValidElement2,
+  useCallback as useCallback10,
+  useEffect as useEffect11,
+  useRef as useRef11,
+  useState as useState15
+} from "react";
+import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function insightDelta(value, previous) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  if (typeof previous !== "number" || !Number.isFinite(previous)) return null;
+  const absolute = value - previous;
+  return {
+    previous,
+    absolute,
+    percent: previous === 0 ? null : absolute / previous,
+    direction: absolute > 0 ? "up" : absolute < 0 ? "down" : "flat"
+  };
+}
+function insightDeltaTone(direction, polarity = "neutral") {
+  if (direction === "flat" || polarity === "neutral") return "neutral";
+  const welcome = polarity === "higher-is-better" ? "up" : "down";
+  return direction === welcome ? "positive" : "negative";
+}
+function formatInsightDelta(delta, format = formatSparklineValue) {
+  const from = format(delta.previous);
+  if (delta.direction === "flat") return `No change from ${from}`;
+  const word = delta.direction === "up" ? "Up" : "Down";
+  const magnitude = delta.percent === null ? format(Math.abs(delta.absolute)) : `${(Math.abs(delta.percent) * 100).toFixed(1)}%`;
+  return `${word} ${magnitude} from ${from}`;
+}
+var TONE_CLASS = {
+  positive: "text-success",
+  negative: "text-destructive",
+  neutral: "text-muted-foreground"
+};
+var DIRECTION_GLYPH = { up: "\u2191", down: "\u2193", flat: "\u2192" };
+var INSIGHT_UNAVAILABLE_GLYPH = "\u2014";
+var INSIGHT_UNAVAILABLE_LABEL = "Not available";
+function InsightCard({
+  title,
+  value,
+  unit,
+  previous,
+  polarity = "neutral",
+  format = formatSparklineValue,
+  series,
+  seriesLabel,
+  description,
+  action,
+  live = false,
+  liveLabel = "Updating",
+  className,
+  style
+}) {
+  const delta = insightDelta(value, previous);
+  const tone = delta ? insightDeltaTone(delta.direction, polarity) : "neutral";
+  const unavailable = typeof value === "number" && !Number.isFinite(value);
+  const shown = typeof value === "number" ? format(value) : value;
+  return /* @__PURE__ */ jsxs12(
+    "article",
+    {
+      "data-insight-card": "",
+      "data-tone": tone,
+      className: joinClasses("agent-arrive flex h-full flex-col rounded-xl border border-card-edge bg-card p-4", className),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__PURE__ */ jsx14("h3", { className: "text-[13px] font-medium text-muted-foreground", children: title }),
+          live ? (
+            // No `data-motion` opt-out: the word is the signal and the sweep is
+            // emphasis, so the reduced-motion floor reaches this like everything
+            // else and leaves a static, legible label.
+            /* @__PURE__ */ jsx14("span", { className: "agent-shimmer shrink-0 text-[11px] font-medium", "data-insight-live": "", children: liveLabel })
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx14("p", { className: "mt-1 flex items-baseline gap-1", children: unavailable ? /* @__PURE__ */ jsxs12("span", { "data-insight-value": "unavailable", className: "text-xl font-semibold text-muted-foreground", children: [
+          /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: INSIGHT_UNAVAILABLE_GLYPH }),
+          /* @__PURE__ */ jsx14("span", { className: "sr-only", children: INSIGHT_UNAVAILABLE_LABEL })
+        ] }) : /* @__PURE__ */ jsxs12(Fragment7, { children: [
+          /* @__PURE__ */ jsx14("span", { className: "text-xl font-semibold tabular-nums text-foreground", children: shown }),
+          unit ? /* @__PURE__ */ jsx14("span", { className: "text-[11px] text-muted-foreground", children: unit }) : null
+        ] }) }),
+        delta ? /* @__PURE__ */ jsxs12("p", { "data-insight-delta": delta.direction, className: `mt-0.5 text-[11px] font-medium ${TONE_CLASS[tone]}`, children: [
+          /* @__PURE__ */ jsxs12("span", { "aria-hidden": "true", children: [
+            DIRECTION_GLYPH[delta.direction],
+            " "
+          ] }),
+          formatInsightDelta(delta, format)
+        ] }) : null,
+        description ? /* @__PURE__ */ jsx14("p", { className: "mt-1 text-[11px] text-muted-foreground", children: description }) : null,
+        series ? /* @__PURE__ */ jsx14("div", { className: "mt-2 text-muted-foreground", children: /* @__PURE__ */ jsx14(Sparkline, { values: series, label: seriesLabel ?? title, format }) }) : null,
+        action ? /* @__PURE__ */ jsx14("div", { className: "mt-3", children: renderInsightAction(action) }) : null
+      ]
+    }
+  );
+}
+function renderInsightAction(action) {
+  if (isValidElement2(action)) return action;
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      onClick: action.onClick,
+      className: "h-8 rounded-md border border-border px-3 text-xs font-medium text-foreground transition hover:bg-accent",
+      children: action.label
+    }
+  );
+}
+var DEFAULT_INSIGHT_PAGE_SIZE = 3;
+var MAX_PAGE_DOTS = 8;
+var PAGE_SIZE_FAULT_REASON = {
+  "not-a-number": "A page size that is not a number cannot count cards at all.",
+  "below-one": "A page size below one card gives the deck a page nothing fits on.",
+  fractional: "A fractional page size hides cards on no page at all."
+};
+var MAX_NAMED_PAGE_SIZES = 8;
+var warnedPageSizes = {
+  "not-a-number": { named: /* @__PURE__ */ new Set(), latched: false },
+  "below-one": { named: /* @__PURE__ */ new Set(), latched: false },
+  fractional: { named: /* @__PURE__ */ new Set(), latched: false }
+};
+function pageSizeFault(pageSize) {
+  if (!Number.isFinite(pageSize)) return "not-a-number";
+  if (pageSize < 1) return "below-one";
+  return "fractional";
+}
+function warnPageSize(pageSize) {
+  const fault = pageSizeFault(pageSize);
+  const record = warnedPageSizes[fault];
+  if (record.latched || record.named.has(pageSize)) return;
+  record.named.add(pageSize);
+  console.warn(
+    `[insight-card] pageSize must be a whole number of cards, 1 or more \u2014 received ${String(pageSize)}. Using ${DEFAULT_INSIGHT_PAGE_SIZE}. ${PAGE_SIZE_FAULT_REASON[fault]}`
+  );
+  if (record.named.size >= MAX_NAMED_PAGE_SIZES) {
+    record.named.clear();
+    record.latched = true;
+    console.warn(`[insight-card] further "${fault}" pageSize warnings are suppressed.`);
+  }
+}
+function insightPageSize(pageSize = DEFAULT_INSIGHT_PAGE_SIZE) {
+  if (Number.isInteger(pageSize) && pageSize >= 1) return pageSize;
+  warnPageSize(pageSize);
+  return DEFAULT_INSIGHT_PAGE_SIZE;
+}
+function insightPageCount(total, pageSize = DEFAULT_INSIGHT_PAGE_SIZE) {
+  const size = insightPageSize(pageSize);
+  const counted = Number.isFinite(total) && total > 0 ? total : 0;
+  return Math.max(1, Math.ceil(counted / size));
+}
+function insightPageSlice(items, page, pageSize = DEFAULT_INSIGHT_PAGE_SIZE) {
+  const size = insightPageSize(pageSize);
+  const count = insightPageCount(items.length, size);
+  const requested = Number.isFinite(page) ? Math.floor(page) : 0;
+  const safe = Math.min(Math.max(requested, 0), count - 1);
+  return items.slice(safe * size, safe * size + size);
+}
+function InsightDeck({
+  state,
+  empty,
+  label = "Insights",
+  pageSize = DEFAULT_INSIGHT_PAGE_SIZE,
+  loadingLabel = "Loading insights\u2026",
+  retryLabel,
+  className,
+  onPageChange
+}) {
+  const [page, setPage] = useState15(0);
+  const [held, setHeld] = useState15(null);
+  const answered = state.status === "error" || state.status === "empty";
+  const carried = state.status === "ready" ? state.value : answered ? null : held;
+  if (carried !== held) setHeld(carried);
+  const shown = carried !== null && state.status !== "ready" ? { status: "ready", value: carried, retry: state.retry } : state;
+  const refreshing = shown !== state;
+  const reported = useRef11(0);
+  const settlePage = useCallback10(
+    (next) => {
+      if (reported.current === next) return;
+      reported.current = next;
+      onPageChange?.(next);
+    },
+    [onPageChange]
+  );
+  return /* @__PURE__ */ jsx14(
+    AsyncView,
+    {
+      state: shown,
+      empty,
+      loadingLabel,
+      retryLabel,
+      className,
+      children: (insights) => /* @__PURE__ */ jsx14(
+        InsightPages,
+        {
+          insights,
+          label,
+          pageSize,
+          className,
+          page,
+          busy: refreshing,
+          onSelectPage: setPage,
+          onPageSettled: settlePage
+        }
+      )
+    }
+  );
+}
+var EDITABLE_TAG = /^(INPUT|TEXTAREA|SELECT)$/;
+var ARROW_KEY_ROLES = /* @__PURE__ */ new Set([
+  "application",
+  "combobox",
+  "grid",
+  "gridcell",
+  "listbox",
+  "menu",
+  "menubar",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "radiogroup",
+  "row",
+  "scrollbar",
+  "searchbox",
+  "slider",
+  "spinbutton",
+  "tab",
+  "tablist",
+  "textbox",
+  "tree",
+  "treegrid",
+  "treeitem"
+]);
+function ownsArrowKeys(target, boundary) {
+  let node = target instanceof Element ? target : null;
+  while (node !== null && node !== boundary) {
+    if (EDITABLE_TAG.test(node.tagName)) return true;
+    if (node instanceof HTMLElement && node.isContentEditable) return true;
+    const role = node.getAttribute("role");
+    if (role !== null && role.split(/\s+/).some((token) => ARROW_KEY_ROLES.has(token))) return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+function InsightPages({
+  insights,
+  label,
+  pageSize,
+  className,
+  page,
+  busy,
+  onSelectPage,
+  onPageSettled
+}) {
+  const size = insightPageSize(pageSize);
+  const pageCount = insightPageCount(insights.length, size);
+  const current = Math.min(Math.max(page, 0), pageCount - 1);
+  const visible = insightPageSlice(insights, current, size);
+  const sectionRef = useRef11(null);
+  const listRef = useRef11(null);
+  const recoverFocus = useRef11(false);
+  useEffect11(() => {
+    onPageSettled(current);
+  }, [current, onPageSettled]);
+  useEffect11(() => {
+    if (!recoverFocus.current) return;
+    recoverFocus.current = false;
+    sectionRef.current?.focus();
+  }, [current]);
+  const goTo = useCallback10(
+    (next) => {
+      const clamped = Math.min(Math.max(next, 0), pageCount - 1);
+      if (clamped === current) return false;
+      const active = typeof document === "undefined" ? null : document.activeElement;
+      recoverFocus.current = active instanceof Node && (listRef.current?.contains(active) ?? false);
+      onSelectPage(clamped);
+      return true;
+    },
+    [current, onSelectPage, pageCount]
+  );
+  const onKeyDown = (event) => {
+    if (event.defaultPrevented) return;
+    if (ownsArrowKeys(event.target, event.currentTarget)) return;
+    let moved = false;
+    switch (event.key) {
+      case "ArrowRight":
+      case "PageDown":
+        moved = goTo(current + 1);
+        break;
+      case "ArrowLeft":
+      case "PageUp":
+        moved = goTo(current - 1);
+        break;
+      case "Home":
+        moved = goTo(0);
+        break;
+      case "End":
+        moved = goTo(pageCount - 1);
+        break;
+      default:
+        return;
+    }
+    if (moved) event.preventDefault();
+  };
+  return /* @__PURE__ */ jsxs12(
+    "section",
+    {
+      ref: sectionRef,
+      "aria-label": label,
+      "data-insight-deck": "",
+      "aria-busy": busy,
+      className: joinClasses("space-y-3", className),
+      onKeyDown,
+      tabIndex: pageCount > 1 ? 0 : void 0,
+      "aria-keyshortcuts": pageCount > 1 ? "ArrowLeft ArrowRight PageUp PageDown Home End" : void 0,
+      children: [
+        /* @__PURE__ */ jsx14("ul", { ref: listRef, className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: visible.map(({ id, style, ...card }, index) => (
+          // The page index is in the key on purpose: a page turn is an arrival,
+          // and reusing the node would swap the text under a card that never
+          // moved. Remounting replays `.agent-arrive` with the new stagger.
+          //
+          // A REFRESH is the other case and the key is why it behaves the other
+          // way: the page has not changed and the id is stable, so the key
+          // matches, React keeps the node, and a card that was already settled
+          // does not arrive a second time. The key does BOTH jobs — but only
+          // because the deck now keeps this subtree mounted across a reload
+          // (see `InsightDeck`); a key is never compared across a teardown.
+          /* @__PURE__ */ jsx14("li", { children: /* @__PURE__ */ jsx14(InsightCard, { ...card, style: staggerStyle(index, style) }) }, `${current}:${id}`)
+        )) }),
+        /* @__PURE__ */ jsxs12("div", { className: pageCount > 1 ? "flex items-center justify-between gap-2" : void 0, children: [
+          /* @__PURE__ */ jsxs12(
+            "p",
+            {
+              role: "status",
+              "aria-live": "polite",
+              className: pageCount > 1 ? "text-[11px] text-muted-foreground" : "sr-only",
+              children: [
+                "Page ",
+                current + 1,
+                " of ",
+                pageCount
+              ]
+            }
+          ),
+          pageCount > 1 ? /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx14(PagerButton, { label: "Previous insights", glyph: "\u2039", atEnd: current === 0, onClick: () => goTo(current - 1) }),
+            pageCount <= MAX_PAGE_DOTS ? Array.from({ length: pageCount }, (_, index) => (
+              // WCAG 2.2 SC 2.5.8 wants a 24x24 CSS px target. The dot stays
+              // 8px because a 24px dot is a different control; the BUTTON
+              // around it carries the target, so the padding is the hit area
+              // and the span is the graphic. The Spacing exception cannot
+              // rescue the bare dot — at a 12px pitch the 24px circle around
+              // each centre overlaps its neighbour's.
+              /* @__PURE__ */ jsx14(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Page ${index + 1} of ${pageCount}`,
+                  "aria-current": index === current ? "page" : void 0,
+                  onClick: () => goTo(index),
+                  className: "group flex h-6 w-6 shrink-0 items-center justify-center rounded-full",
+                  children: /* @__PURE__ */ jsx14(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: joinClasses(
+                        "block rounded-full transition",
+                        index === current ? "h-2 w-4 bg-foreground" : "h-2 w-2 bg-muted-foreground group-hover:bg-foreground"
+                      )
+                    }
+                  )
+                },
+                index
+              )
+            )) : null,
+            /* @__PURE__ */ jsx14(
+              PagerButton,
+              {
+                label: "Next insights",
+                glyph: "\u203A",
+                atEnd: current === pageCount - 1,
+                onClick: () => goTo(current + 1)
+              }
+            )
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+function PagerButton({
+  label,
+  glyph,
+  atEnd,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-disabled": atEnd,
+      onClick: () => {
+        if (!atEnd) onClick();
+      },
+      className: `flex h-6 w-6 items-center justify-center rounded-md border border-border text-xs text-muted-foreground transition ${atEnd ? "opacity-40" : "hover:bg-accent hover:text-foreground"}`,
+      children: /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: glyph })
+    }
+  );
+}
+
 // src/web-react/index.tsx
-import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs13 } 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;
@@ -5258,41 +5892,41 @@ function formatTokensPerSecond(msg) {
   return `${Math.round(msg.completionTokens / (msg.durationMs / 1e3))} tok/s`;
 }
 function RunDrillIn({ run, onClose }) {
-  return /* @__PURE__ */ jsxs11("div", { className: `fixed inset-y-0 right-0 z-50 flex w-[480px] max-w-full flex-col border-l border-card-edge bg-popover ${OVERLAY_SHADOW}`, children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13("div", { className: `fixed inset-y-0 right-0 z-50 flex w-[480px] max-w-full flex-col border-l border-card-edge bg-popover ${OVERLAY_SHADOW}`, children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsx15(
         "span",
         {
           className: `h-2 w-2 shrink-0 rounded-full ${run.status === "running" ? "bg-warning" : run.status === "error" ? "bg-destructive" : "bg-success"}`
         }
       ),
-      /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx13("p", { className: "truncate text-[15px] font-semibold", children: run.title }),
-        /* @__PURE__ */ jsx13("p", { className: "truncate font-mono text-xs text-muted-foreground", children: run.toolName })
+      /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx15("p", { className: "truncate text-[15px] font-semibold", children: run.title }),
+        /* @__PURE__ */ jsx15("p", { className: "truncate font-mono text-xs text-muted-foreground", children: run.toolName })
       ] }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
           onClick: onClose,
           "aria-label": "Close",
           className: "rounded-md p-1.5 text-muted-foreground transition hover:bg-accent hover:text-foreground",
-          children: /* @__PURE__ */ jsx13("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx13("path", { d: "M18 6 6 18M6 6l12 12" }) })
+          children: /* @__PURE__ */ jsx15("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx15("path", { d: "M18 6 6 18M6 6l12 12" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
-      run.steps.length === 0 && /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
-      run.steps.map((step, i) => /* @__PURE__ */ jsxs11("div", { className: "rounded-lg border border-card-edge bg-card", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-baseline gap-2 border-b border-border px-3 py-1.5", children: [
-          /* @__PURE__ */ jsx13("span", { className: `font-mono text-xs ${step.status === "error" ? "text-destructive" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
-          /* @__PURE__ */ jsx13("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
-          /* @__PURE__ */ jsx13("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: new Date(step.at).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) })
+    /* @__PURE__ */ jsxs13("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
+      run.steps.length === 0 && /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
+      run.steps.map((step, i) => /* @__PURE__ */ jsxs13("div", { className: "rounded-lg border border-card-edge bg-card", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-baseline gap-2 border-b border-border px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx15("span", { className: `font-mono text-xs ${step.status === "error" ? "text-destructive" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
+          /* @__PURE__ */ jsx15("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
+          /* @__PURE__ */ jsx15("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: new Date(step.at).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) })
         ] }),
-        step.detail && /* @__PURE__ */ jsx13("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-xs leading-relaxed text-muted-foreground", children: step.detail })
+        step.detail && /* @__PURE__ */ jsx15("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-xs leading-relaxed text-muted-foreground", children: step.detail })
       ] }, i))
     ] }),
-    /* @__PURE__ */ jsx13("p", { className: "border-t border-border px-4 py-2 text-xs text-muted-foreground", children: "Read-only transcript \u2014 reply in the main chat." })
+    /* @__PURE__ */ jsx15("p", { className: "border-t border-border px-4 py-2 text-xs text-muted-foreground", children: "Read-only transcript \u2014 reply in the main chat." })
   ] });
 }
 function pendingApprovalOf(call) {
@@ -5308,23 +5942,23 @@ function ChatEmptyState({
 }) {
   const doorCount = Math.min(doors?.length ?? 0, 3);
   const doorsGridClass = doorCount === 1 ? "mx-auto max-w-sm sm:grid-cols-1" : doorCount === 2 ? "sm:grid-cols-2" : "sm:grid-cols-3";
-  return /* @__PURE__ */ jsxs11("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__ */ jsx13("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__ */ jsx13(BrandMark, { size: 32, className: "shrink-0" }) }),
-    /* @__PURE__ */ jsx13("p", { className: "text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: productName }),
-    /* @__PURE__ */ jsx13("h2", { className: "mt-1.5 text-balance text-2xl font-semibold leading-tight text-foreground", children: headline }),
-    subline && /* @__PURE__ */ jsx13("p", { className: "mt-3 max-w-md text-[15px] leading-relaxed text-muted-foreground", children: subline }),
-    doors && doors.length > 0 && /* @__PURE__ */ jsx13("div", { className: `mt-7 grid w-full gap-2.5 ${doorsGridClass}`, children: doors.slice(0, 3).map((door, i) => /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13("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__ */ jsx15("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__ */ jsx15(BrandMark, { size: 32, className: "shrink-0" }) }),
+    /* @__PURE__ */ jsx15("p", { className: "text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: productName }),
+    /* @__PURE__ */ jsx15("h2", { className: "mt-1.5 text-balance text-2xl font-semibold leading-tight text-foreground", children: headline }),
+    subline && /* @__PURE__ */ jsx15("p", { className: "mt-3 max-w-md text-[15px] leading-relaxed text-muted-foreground", children: subline }),
+    doors && doors.length > 0 && /* @__PURE__ */ jsx15("div", { className: `mt-7 grid w-full gap-2.5 ${doorsGridClass}`, children: doors.slice(0, 3).map((door, i) => /* @__PURE__ */ jsxs13(
       "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",
         children: [
-          /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
+          /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
             door.icon,
             door.label
           ] }),
-          door.description && /* @__PURE__ */ jsx13("span", { className: "mt-0.5 text-[12px] leading-snug text-muted-foreground", children: door.description })
+          door.description && /* @__PURE__ */ jsx15("span", { className: "mt-0.5 text-[12px] leading-snug text-muted-foreground", children: door.description })
         ]
       },
       i
@@ -5333,26 +5967,26 @@ function ChatEmptyState({
 }
 function ToolGlyph({ name, className }) {
   if (name.startsWith("sandbox_")) {
-    return /* @__PURE__ */ jsxs11("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx13("polyline", { points: "4 17 10 11 4 5" }),
-      /* @__PURE__ */ jsx13("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+    return /* @__PURE__ */ jsxs13("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx15("polyline", { points: "4 17 10 11 4 5" }),
+      /* @__PURE__ */ jsx15("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
     ] });
   }
   if (name === "submit_proposal") {
-    return /* @__PURE__ */ jsxs11("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx13("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-      /* @__PURE__ */ jsx13("path", { d: "M14 2v6h6M9 15l2 2 4-4" })
+    return /* @__PURE__ */ jsxs13("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx15("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx15("path", { d: "M14 2v6h6M9 15l2 2 4-4" })
     ] });
   }
   if (name === "schedule_followup") {
-    return /* @__PURE__ */ jsxs11("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx13("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ jsx13("path", { d: "M12 7v5l3 3" })
+    return /* @__PURE__ */ jsxs13("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx15("path", { d: "M12 7v5l3 3" })
     ] });
   }
-  return /* @__PURE__ */ jsxs11("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx13("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3" }),
-    /* @__PURE__ */ jsx13("circle", { cx: "12", cy: "12", r: "4" })
+  return /* @__PURE__ */ jsxs13("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx15("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3" }),
+    /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "4" })
   ] });
 }
 function toolOutcomeOf(call) {
@@ -5438,40 +6072,40 @@ 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__ */ jsx13("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs11("div", { className: "contents", children: [
-    /* @__PURE__ */ jsx13("dt", { className: "font-mono text-xs text-muted-foreground", children: k }),
-    /* @__PURE__ */ jsx13("dd", { className: "min-w-0 whitespace-pre-wrap break-words font-mono text-xs text-muted-foreground", children: truncate(v) })
+  return /* @__PURE__ */ jsx15("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs13("div", { className: "contents", children: [
+    /* @__PURE__ */ jsx15("dt", { className: "font-mono text-xs text-muted-foreground", children: k }),
+    /* @__PURE__ */ jsx15("dd", { className: "min-w-0 whitespace-pre-wrap break-words font-mono text-xs text-muted-foreground", children: truncate(v) })
   ] }, k)) });
 }
 function ShellDetail({ call }) {
   const outcome = toolOutcomeOf(call);
   const r = outcome?.result ?? {};
-  return /* @__PURE__ */ jsxs11("div", { className: "overflow-hidden rounded-md bg-zinc-900 font-mono text-xs leading-relaxed", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 px-3 pt-2 text-zinc-400", children: [
-      /* @__PURE__ */ jsx13("span", { className: "select-none text-zinc-500", children: "$" }),
-      /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate text-zinc-200", children: String(call.args?.command ?? "") }),
-      r.exitCode != null && /* @__PURE__ */ jsxs11("span", { className: r.exitCode === 0 ? "text-success" : "text-destructive", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "overflow-hidden rounded-md bg-zinc-900 font-mono text-xs leading-relaxed", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 px-3 pt-2 text-zinc-400", children: [
+      /* @__PURE__ */ jsx15("span", { className: "select-none text-zinc-500", children: "$" }),
+      /* @__PURE__ */ jsx15("span", { className: "min-w-0 flex-1 truncate text-zinc-200", children: String(call.args?.command ?? "") }),
+      r.exitCode != null && /* @__PURE__ */ jsxs13("span", { className: r.exitCode === 0 ? "text-success" : "text-destructive", children: [
         "exit ",
         r.exitCode
       ] })
     ] }),
-    /* @__PURE__ */ jsx13("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__ */ jsx15("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 result = call.result;
   const envelope = typeof result === "object" && result !== null ? result : null;
-  return /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
-    call.args && Object.keys(call.args).length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx13("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Called with" }),
-      /* @__PURE__ */ jsx13(KvRows, { data: call.args })
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
+    call.args && Object.keys(call.args).length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx15("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Called with" }),
+      /* @__PURE__ */ jsx15(KvRows, { data: call.args })
     ] }),
-    envelope ? /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx13("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: envelope.ok === false ? "Failed" : "Result" }),
-      envelope.ok === false ? /* @__PURE__ */ jsx13("p", { className: "text-xs text-destructive", children: envelope.message ?? "Tool failed" }) : envelope.result && typeof envelope.result === "object" ? /* @__PURE__ */ jsx13(KvRows, { data: envelope.result }) : envelope.result != null ? /* @__PURE__ */ jsx13("p", { className: "font-mono text-xs text-muted-foreground", children: truncate(envelope.result) }) : null
-    ] }) : result != null ? /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx13("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Result" }),
-      /* @__PURE__ */ jsx13("p", { className: "font-mono text-xs text-muted-foreground", children: truncate(result) })
+    envelope ? /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx15("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: envelope.ok === false ? "Failed" : "Result" }),
+      envelope.ok === false ? /* @__PURE__ */ jsx15("p", { className: "text-xs text-destructive", children: envelope.message ?? "Tool failed" }) : envelope.result && typeof envelope.result === "object" ? /* @__PURE__ */ jsx15(KvRows, { data: envelope.result }) : envelope.result != null ? /* @__PURE__ */ jsx15("p", { className: "font-mono text-xs text-muted-foreground", children: truncate(envelope.result) }) : null
+    ] }) : result != null ? /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx15("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Result" }),
+      /* @__PURE__ */ jsx15("p", { className: "font-mono text-xs text-muted-foreground", children: truncate(result) })
     ] }) : null
   ] });
 }
@@ -5482,24 +6116,24 @@ function ProposalCard({
   approval,
   renderers
 }) {
-  const [expanded, setExpanded] = useState14(false);
+  const [expanded, setExpanded] = useState16(false);
   const { summary, meta, typeSlug } = proposalPreview(call);
   const custom = renderers?.[call.name]?.(call, message);
   const { pending: deciding, run: decide } = usePending();
-  return /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { className: "flex items-start gap-2.5 px-4 pt-3.5", children: [
-      /* @__PURE__ */ jsx13("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__ */ jsx13(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5" }) }),
-      /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx13("p", { className: "text-xs font-semibold uppercase tracking-[0.05em] text-warning-strong", children: approval ? "Needs your approval" : "Awaiting approval" }),
-        /* @__PURE__ */ jsx13("p", { className: "mt-0.5 text-[15px] font-semibold leading-snug text-foreground", children: friendlyToolTitle(call) }),
-        summary && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: summary }),
-        typeSlug && /* @__PURE__ */ jsx13("p", { className: "mt-1 font-mono text-xs text-muted-foreground", children: typeSlug }),
-        meta.length > 0 && /* @__PURE__ */ jsx13("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: meta.map((m, i) => /* @__PURE__ */ jsx13("span", { className: "rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-muted-foreground", children: m }, i)) })
+  return /* @__PURE__ */ jsxs13("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__ */ jsxs13("div", { className: "flex items-start gap-2.5 px-4 pt-3.5", children: [
+      /* @__PURE__ */ jsx15("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__ */ jsx15(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx15("p", { className: "text-xs font-semibold uppercase tracking-[0.05em] text-warning-strong", children: approval ? "Needs your approval" : "Awaiting approval" }),
+        /* @__PURE__ */ jsx15("p", { className: "mt-0.5 text-[15px] font-semibold leading-snug text-foreground", children: friendlyToolTitle(call) }),
+        summary && /* @__PURE__ */ jsx15("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: summary }),
+        typeSlug && /* @__PURE__ */ jsx15("p", { className: "mt-1 font-mono text-xs text-muted-foreground", children: typeSlug }),
+        meta.length > 0 && /* @__PURE__ */ jsx15("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: meta.map((m, i) => /* @__PURE__ */ jsx15("span", { className: "rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-muted-foreground", children: m }, i)) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2 px-4 pb-3.5 pt-3", children: [
-      approval && /* @__PURE__ */ jsxs11(Fragment7, { children: [
-        /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap items-center gap-2 px-4 pb-3.5 pt-3", children: [
+      approval && /* @__PURE__ */ jsxs13(Fragment8, { children: [
+        /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
@@ -5509,7 +6143,7 @@ function ProposalCard({
             children: "Approve & run"
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
@@ -5520,7 +6154,7 @@ function ProposalCard({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs13(
         "button",
         {
           type: "button",
@@ -5529,12 +6163,12 @@ function ProposalCard({
           className: "ml-auto inline-flex items-center gap-1 rounded text-[12px] font-medium text-muted-foreground transition hover:text-foreground",
           children: [
             expanded ? "Hide details" : "View details",
-            /* @__PURE__ */ jsx13(ChevronDown, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` })
+            /* @__PURE__ */ jsx15(ChevronDown, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` })
           ]
         }
       )
     ] }),
-    expanded && /* @__PURE__ */ jsx13("div", { className: "border-t border-warning/20 px-4 py-3 text-xs", children: custom ?? /* @__PURE__ */ jsx13(DefaultToolDetail, { call }) })
+    expanded && /* @__PURE__ */ jsx15("div", { className: "border-t border-warning/20 px-4 py-3 text-xs", children: custom ?? /* @__PURE__ */ jsx15(DefaultToolDetail, { call }) })
   ] });
 }
 function formatFollowupWhen(when) {
@@ -5549,14 +6183,14 @@ function FollowupCard({ call }) {
   const when = typeof a.when === "string" ? a.when : typeof a.at === "string" ? a.at : typeof a.schedule === "string" ? a.schedule : null;
   const failed = toolCallFailed(call);
   const errorText = failed ? toolOutcomeOf(call)?.message ?? "Scheduling failed" : null;
-  return /* @__PURE__ */ jsx13("div", { className: "flex items-start gap-2", children: /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center gap-2.5 px-3 py-2", children: [
-      /* @__PURE__ */ jsx13("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-border bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx13(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5" }) }),
-      /* @__PURE__ */ jsx13("span", { className: "shrink-0 whitespace-nowrap text-xs font-medium text-foreground", children: friendlyToolTitle(call) }),
-      when && /* @__PURE__ */ jsx13("span", { title: when, className: "hidden min-w-0 flex-1 truncate font-mono text-xs tabular-nums text-muted-foreground sm:inline", children: formatFollowupWhen(when) }),
-      /* @__PURE__ */ jsx13("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: call.status === "running" ? /* @__PURE__ */ jsx13("svg", { className: "h-3 w-3 shrink-0 animate-spin text-[var(--accent-text)]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx13("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }) : /* @__PURE__ */ jsx13("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${failed ? "bg-[var(--surface-danger-text)]" : "bg-[var(--surface-success-text)]"}` }) })
+  return /* @__PURE__ */ jsx15("div", { className: "flex items-start gap-2", children: /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-2.5 px-3 py-2", children: [
+      /* @__PURE__ */ jsx15("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-border bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx15(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx15("span", { className: "shrink-0 whitespace-nowrap text-xs font-medium text-foreground", children: friendlyToolTitle(call) }),
+      when && /* @__PURE__ */ jsx15("span", { title: when, className: "hidden min-w-0 flex-1 truncate font-mono text-xs tabular-nums text-muted-foreground sm:inline", children: formatFollowupWhen(when) }),
+      /* @__PURE__ */ jsx15("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: call.status === "running" ? /* @__PURE__ */ jsx15("svg", { className: "h-3 w-3 shrink-0 animate-spin text-[var(--accent-text)]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx15("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }) : /* @__PURE__ */ jsx15("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${failed ? "bg-[var(--surface-danger-text)]" : "bg-[var(--surface-success-text)]"}` }) })
     ] }),
-    errorText && /* @__PURE__ */ jsx13("div", { className: "border-t border-border px-3 py-2 text-xs text-[var(--surface-danger-text)]", children: errorText })
+    errorText && /* @__PURE__ */ jsx15("div", { className: "border-t border-border px-3 py-2 text-xs text-[var(--surface-danger-text)]", children: errorText })
   ] }) });
 }
 function toolRowTitle(call) {
@@ -5573,52 +6207,59 @@ function ToolCallCard({
   message,
   approval,
   onOpenRun,
-  renderers
+  renderers,
+  staggerIndex
 }) {
+  const arrival = useArrivalStyle(staggerIndex ?? 0);
   const pending = call.status === "done" ? pendingApprovalOf(call) : null;
   const kind = blockKindOf(call);
+  const arrive = (row) => /* @__PURE__ */ jsx15("div", { className: "agent-arrive", style: arrival, children: row });
   if (pending) {
-    return /* @__PURE__ */ jsx13(
-      ProposalCard,
-      {
-        call,
-        message,
-        pending,
-        approval,
-        renderers
-      }
+    return arrive(
+      /* @__PURE__ */ jsx15(
+        ProposalCard,
+        {
+          call,
+          message,
+          pending,
+          approval,
+          renderers
+        }
+      )
     );
   }
   if (kind === "followup") {
-    return /* @__PURE__ */ jsx13(FollowupCard, { call });
+    return arrive(/* @__PURE__ */ jsx15(FollowupCard, { call }));
   }
   const custom = renderers?.[call.name]?.(call, message);
-  return /* @__PURE__ */ jsx13(
-    InlineToolItem,
-    {
-      part: chatToolCallPart(call),
-      title: toolRowTitle(call),
-      description: toolRowDescription(call),
-      renderToolDetail: () => custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx13(ShellDetail, { call }) : /* @__PURE__ */ jsx13(DefaultToolDetail, { call })),
-      actions: onOpenRun && call.name.startsWith("sandbox_") ? /* @__PURE__ */ jsx13(
-        "button",
-        {
-          type: "button",
-          onClick: () => onOpenRun(call, message),
-          "aria-label": "Open full transcript",
-          title: "Open full transcript",
-          className: "rounded-md p-1.5 text-muted-foreground transition hover:bg-accent hover:text-foreground",
-          children: /* @__PURE__ */ jsxs11("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-            /* @__PURE__ */ jsx13("path", { d: "M7 17 17 7" }),
-            /* @__PURE__ */ jsx13("path", { d: "M7 7h10v10" })
-          ] })
-        }
-      ) : void 0
-    }
+  return arrive(
+    /* @__PURE__ */ jsx15(
+      InlineToolItem,
+      {
+        part: chatToolCallPart(call),
+        title: toolRowTitle(call),
+        description: toolRowDescription(call),
+        renderToolDetail: () => custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx15(ShellDetail, { call }) : /* @__PURE__ */ jsx15(DefaultToolDetail, { call })),
+        actions: onOpenRun && call.name.startsWith("sandbox_") ? /* @__PURE__ */ jsx15(
+          "button",
+          {
+            type: "button",
+            onClick: () => onOpenRun(call, message),
+            "aria-label": "Open full transcript",
+            title: "Open full transcript",
+            className: "rounded-md p-1.5 text-muted-foreground transition hover:bg-accent hover:text-foreground",
+            children: /* @__PURE__ */ jsxs13("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx15("path", { d: "M7 17 17 7" }),
+              /* @__PURE__ */ jsx15("path", { d: "M7 7h10v10" })
+            ] })
+          }
+        ) : void 0
+      }
+    )
   );
 }
 function StreamingCaret() {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     "span",
     {
       className: "ml-0.5 inline-block h-[1.1em] w-[3px] translate-y-[2px] animate-[agent-caret_1s_step-end_infinite] rounded-sm bg-foreground/70",
@@ -5643,9 +6284,9 @@ function SegmentText({
     // the container on top of that makes the paragraph shimmer while it types.
     // The distinction is what separates "the answer materialised" from "the
     // log was appended to".
-    /* @__PURE__ */ jsxs11("div", { className: `${messageClassName}${streaming ? "" : " agent-stream-in"}`, children: [
+    /* @__PURE__ */ jsxs13("div", { className: `${messageClassName}${streaming ? "" : " agent-stream-in"}`, children: [
       body,
-      showCaret && /* @__PURE__ */ jsx13(StreamingCaret, {})
+      showCaret && /* @__PURE__ */ jsx15(StreamingCaret, {})
     ] })
   );
 }
@@ -5670,14 +6311,15 @@ function SegmentedBody({
   const leftoverToolCalls = (msg.toolCalls ?? []).filter(
     (tc) => !segmentToolIds.has(tc.id)
   );
-  const renderToolCard = (call) => /* @__PURE__ */ jsx13(
+  const renderToolCard = (call, index) => /* @__PURE__ */ jsx15(
     ToolCallCard,
     {
       call,
       message: msg,
       approval,
       onOpenRun: onToolCallClick,
-      renderers: toolRenderers
+      renderers: toolRenderers,
+      staggerIndex: index
     },
     `tool-${call.id}`
   );
@@ -5693,34 +6335,44 @@ function SegmentedBody({
       else groups.push({ kind: "tools", index: i, calls: [seg.call] });
     }
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
-    groups.map(
-      (g) => g.kind === "text" ? /* @__PURE__ */ jsx13(
-        SegmentText,
-        {
-          content: g.content,
-          streaming: streaming && g.index === lastIndex,
-          showCaret: streaming && g.index === lastIndex,
-          renderBody,
-          messageClassName
-        },
-        `text-${g.index}`
-      ) : !streaming && g.calls.length >= COLLAPSE_TOOL_RUN_AT && !g.calls.some(isImportantTool) ? (
-        // The fold is a quiet disclosure line, not a filled box — the
-        // canonical rows inside it carry the row chrome.
-        /* @__PURE__ */ jsxs11("details", { children: [
-          /* @__PURE__ */ jsxs11("summary", { className: "cursor-pointer select-none rounded-md py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", children: [
+  const children = [];
+  for (const g of groups) {
+    if (g.kind === "text") {
+      children.push(
+        /* @__PURE__ */ jsx15(
+          SegmentText,
+          {
+            content: g.content,
+            streaming: streaming && g.index === lastIndex,
+            showCaret: streaming && g.index === lastIndex,
+            renderBody,
+            messageClassName
+          },
+          `text-${g.index}`
+        )
+      );
+      continue;
+    }
+    if (!streaming && g.calls.length >= COLLAPSE_TOOL_RUN_AT && !g.calls.some(isImportantTool)) {
+      children.push(
+        /* @__PURE__ */ jsxs13("details", { children: [
+          /* @__PURE__ */ jsxs13("summary", { className: "cursor-pointer select-none rounded-md py-0.5 text-xs font-medium text-muted-foreground [transition:color_var(--motion-control)] hover:text-foreground", children: [
             "Worked through ",
             g.calls.length,
             " steps"
           ] }),
-          /* @__PURE__ */ jsx13("div", { className: "mt-1.5 flex flex-col gap-1.5", children: g.calls.map(renderToolCard) })
-        ] }, `tools-${g.index}`)
-      ) : /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-2", children: g.calls.map(renderToolCard) }, `tools-${g.index}`)
-    ),
-    leftoverToolCalls.map(renderToolCard),
-    streaming && segments[lastIndex]?.kind === "tool" && /* @__PURE__ */ jsx13(StreamingCaret, {})
-  ] });
+          /* @__PURE__ */ jsx15("div", { className: "mt-1.5 flex flex-col gap-1.5", children: g.calls.map(renderToolCard) })
+        ] }, `tools-fold-${g.index}`)
+      );
+      continue;
+    }
+    g.calls.forEach((call, index) => children.push(renderToolCard(call, index)));
+  }
+  leftoverToolCalls.forEach((call, index) => children.push(renderToolCard(call, index)));
+  if (streaming && segments[lastIndex]?.kind === "tool") {
+    children.push(/* @__PURE__ */ jsx15(StreamingCaret, {}, "streaming-caret"));
+  }
+  return /* @__PURE__ */ jsx15("div", { className: "flex flex-col gap-2", children });
 }
 var QUIET_META_LANE_CLASS = "mt-1 flex h-[18px] items-center gap-2 text-xs tabular-nums text-muted-foreground opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100";
 function copyTextOf(msg) {
@@ -5729,9 +6381,9 @@ function copyTextOf(msg) {
   return msg.content;
 }
 function CopyMessageButton({ text }) {
-  const [copied, setCopied] = useState14(false);
-  const timerRef = useRef11(null);
-  useEffect11(
+  const [copied, setCopied] = useState16(false);
+  const timerRef = useRef12(null);
+  useEffect12(
     () => () => {
       if (timerRef.current !== null) clearTimeout(timerRef.current);
     },
@@ -5750,7 +6402,7 @@ function CopyMessageButton({ text }) {
       }
     );
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       type: "button",
@@ -5758,9 +6410,9 @@ function CopyMessageButton({ text }) {
       "aria-label": "Copy message",
       title: "Copy message",
       className: "rounded p-0.5 text-muted-foreground transition hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-      children: copied ? /* @__PURE__ */ jsx13("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx13("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs11("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-        /* @__PURE__ */ jsx13("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-        /* @__PURE__ */ jsx13("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      children: copied ? /* @__PURE__ */ jsx15("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx15("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs13("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx15("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+        /* @__PURE__ */ jsx15("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
       ] })
     }
   );
@@ -5786,46 +6438,88 @@ function AssistantMessageImpl({
   const body = useMemo7(() => renderBody(content), [renderBody, content]);
   const segments = msg.segments;
   const hasAnswerText = content !== "" || (segments?.some((s) => s.kind === "text" && s.content.trim() !== "") ?? false);
-  const reasoningScrollRef = useRef11(null);
-  const thinkStartRef = useRef11(null);
-  const thinkMsRef = useRef11(null);
+  const reasoningScrollRef = useRef12(null);
+  const thinkStartRef = useRef12(null);
+  const thinkMsRef = useRef12(null);
   if (streaming && reasoning && !hasAnswerText && thinkStartRef.current === null) {
     thinkStartRef.current = performance.now();
   }
   if (hasAnswerText && thinkStartRef.current !== null && thinkMsRef.current === null) {
     thinkMsRef.current = performance.now() - thinkStartRef.current;
   }
-  useEffect11(() => {
+  useEffect12(() => {
     const el = reasoningScrollRef.current;
     if (el && streaming && !hasAnswerText) el.scrollTop = el.scrollHeight;
   }, [reasoning, streaming, hasAnswerText]);
   const thinkingSeconds = useThinkingSeconds(
     streaming && !!reasoning && !hasAnswerText
   );
+  const reasoningId = useId4();
+  const [reasoningToggled, setReasoningToggled] = useState16(null);
+  const reasoningOpen = reasoningToggled ?? !hasAnswerText;
   const quiet = chrome === "quiet";
-  return /* @__PURE__ */ jsxs11("div", { className: `mx-auto w-full max-w-3xl px-6 ${quiet ? "group pb-1 pt-3" : "py-3"}`, children: [
-    !quiet && /* @__PURE__ */ jsxs11("div", { className: "mb-1 flex items-baseline gap-2 text-xs tabular-nums text-muted-foreground", children: [
-      /* @__PURE__ */ jsx13("span", { className: "font-semibold uppercase tracking-[0.05em]", children: agentLabel }),
-      msg.modelUsed && /* @__PURE__ */ jsx13("span", { className: "font-mono normal-case", children: msg.modelUsed }),
-      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx13("span", { children: formatTokensPerSecond(msg) }),
-      formatModelCost(msg, models) && /* @__PURE__ */ jsx13("span", { children: formatModelCost(msg, models) })
+  return /* @__PURE__ */ jsxs13("div", { className: `mx-auto w-full max-w-3xl px-6 ${quiet ? "group pb-1 pt-3" : "py-3"}`, children: [
+    !quiet && /* @__PURE__ */ jsxs13("div", { className: "mb-1 flex items-baseline gap-2 text-xs tabular-nums text-muted-foreground", children: [
+      /* @__PURE__ */ jsx15("span", { className: "font-semibold uppercase tracking-[0.05em]", children: agentLabel }),
+      msg.modelUsed && /* @__PURE__ */ jsx15("span", { className: "font-mono normal-case", children: msg.modelUsed }),
+      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx15("span", { children: formatTokensPerSecond(msg) }),
+      formatModelCost(msg, models) && /* @__PURE__ */ jsx15("span", { children: formatModelCost(msg, models) })
     ] }),
-    reasoning && /* @__PURE__ */ jsxs11("details", { className: "mb-2 rounded-lg border-l-2 border-border bg-secondary px-3 py-2", open: !hasAnswerText, children: [
-      /* @__PURE__ */ jsx13("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: !hasAnswerText ? (
-        // A pulse dims the whole word on a loop, which is the same cue a
-        // skeleton placeholder uses — it reads as "nothing here yet". A
-        // sweep travels THROUGH the glyphs, which reads as work in
-        // flight, and the elapsed seconds say how much. `essential`
-        // because it is the only signal separating a working agent from
-        // a stuck one, and reduced-motion still collapses its duration.
-        /* @__PURE__ */ jsxs11("span", { className: "agent-shimmer", "data-motion": "essential", children: [
-          "Thinking",
-          thinkingSeconds >= 1 ? ` \xB7 ${thinkingSeconds}s` : "\u2026"
-        ] })
-      ) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process" }),
-      /* @__PURE__ */ jsx13("div", { ref: reasoningScrollRef, className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground", children: reasoning })
+    reasoning && // A button + `.agent-disclose` rather than `<details>`: a native
+    // disclosure has no transition to give, so the trace SNAPPED to full
+    // height the moment the answer arrived — the single largest layout jump
+    // in a turn, at the exact moment the reader is trying to start reading.
+    // The grid row animates the content's REAL height (0fr → 1fr), which a
+    // max-height guess cannot do without either clipping a long trace or
+    // easing toward a number it never reaches. The keyboard contract
+    // `<details>` supplied for free is restated explicitly: a real
+    // `<button>` (Enter/Space, focusable, in the tab order) carrying
+    // `aria-expanded` and `aria-controls` — which also announces the state
+    // that a `<summary>` leaves to the browser.
+    /* @__PURE__ */ jsxs13("div", { className: "mb-2 rounded-lg border-l-2 border-border bg-secondary px-3 py-2", children: [
+      /* @__PURE__ */ jsxs13(
+        "button",
+        {
+          type: "button",
+          onClick: () => setReasoningToggled(!reasoningOpen),
+          "aria-expanded": reasoningOpen,
+          "aria-controls": reasoningId,
+          className: "flex w-full select-none items-center gap-1.5 text-left text-xs font-medium text-muted-foreground [transition:color_var(--motion-control)] hover:text-foreground",
+          children: [
+            /* @__PURE__ */ jsx15(ChevronDown, { className: `h-3 w-3 shrink-0 [transition:transform_var(--motion-surface)] ${reasoningOpen ? "" : "-rotate-90"}` }),
+            !hasAnswerText ? (
+              // A pulse dims the whole word on a loop, which is the same cue a
+              // skeleton placeholder uses — it reads as "nothing here yet". A
+              // sweep travels THROUGH the glyphs, which reads as work in
+              // flight, and the elapsed seconds say how much. `essential`
+              // because it is the only signal separating a working agent from
+              // a stuck one — and `essential` is an exemption from the blanket
+              // floor, never a licence to sweep forever at someone who asked
+              // for less motion: under `prefers-reduced-motion` tokens.css
+              // stops this animation and leaves a dotted rule under the word
+              // that the settled label ("Thought for 12s") does not carry. The
+              // rule is the only difference — measured in Chromium, both labels
+              // compute this button's own `text-muted-foreground`, so tone
+              // separates neither.
+              /* @__PURE__ */ jsxs13("span", { className: "agent-shimmer", "data-motion": "essential", children: [
+                "Thinking",
+                thinkingSeconds >= 1 ? ` \xB7 ${thinkingSeconds}s` : "\u2026"
+              ] })
+            ) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx15("div", { className: "agent-disclose", "data-open": reasoningOpen ? "true" : "false", children: /* @__PURE__ */ jsx15("div", { ...inertProps(!reasoningOpen), children: /* @__PURE__ */ jsx15(
+        "div",
+        {
+          id: reasoningId,
+          ref: reasoningScrollRef,
+          className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground",
+          children: reasoning
+        }
+      ) }) })
     ] }),
-    segments && segments.length > 0 ? /* @__PURE__ */ jsx13(
+    segments && segments.length > 0 ? /* @__PURE__ */ jsx15(
       SegmentedBody,
       {
         segments,
@@ -5837,24 +6531,25 @@ function AssistantMessageImpl({
         toolRenderers,
         messageClassName
       }
-    ) : /* @__PURE__ */ jsxs11(Fragment7, { children: [
-      /* @__PURE__ */ jsxs11("div", { className: messageClassName, children: [
+    ) : /* @__PURE__ */ jsxs13(Fragment8, { children: [
+      /* @__PURE__ */ jsxs13("div", { className: messageClassName, children: [
         body,
-        streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx13(StreamingCaret, {})
+        streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx15(StreamingCaret, {})
       ] }),
-      msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx13("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx13(
+      msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx15("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc, index) => /* @__PURE__ */ jsx15(
         ToolCallCard,
         {
           call: tc,
           message: msg,
           approval,
           onOpenRun: onToolCallClick,
-          renderers: toolRenderers
+          renderers: toolRenderers,
+          staggerIndex: index
         },
         tc.id
       )) })
     ] }),
-    durableCards && msg.parts && /* @__PURE__ */ jsx13(
+    durableCards && msg.parts && /* @__PURE__ */ jsx15(
       DurableChatCards,
       {
         ...durableCards,
@@ -5863,7 +6558,7 @@ function AssistantMessageImpl({
         className: "mt-3"
       }
     ),
-    workProductCards && workProductPartsFromMessageParts(msg.parts).map((part) => /* @__PURE__ */ jsx13(
+    workProductCards && workProductPartsFromMessageParts(msg.parts).map((part) => /* @__PURE__ */ jsx15(
       WorkProductCard,
       {
         part,
@@ -5873,7 +6568,7 @@ function AssistantMessageImpl({
       `${part.ref.id}:${part.ref.version}`
     )),
     renderExtras?.(msg),
-    resolveAttachmentUrl && attachmentPartsFromMessageParts(msg.parts).length > 0 && /* @__PURE__ */ jsx13("div", { className: "mt-2", children: /* @__PURE__ */ jsx13(
+    resolveAttachmentUrl && attachmentPartsFromMessageParts(msg.parts).length > 0 && /* @__PURE__ */ jsx15("div", { className: "mt-2", children: /* @__PURE__ */ jsx15(
       MessageAttachments,
       {
         parts: attachmentPartsFromMessageParts(msg.parts),
@@ -5881,18 +6576,18 @@ function AssistantMessageImpl({
         justify: "start"
       }
     ) }),
-    quiet && /* @__PURE__ */ jsxs11("div", { "data-testid": "message-meta-lane", className: QUIET_META_LANE_CLASS, children: [
-      /* @__PURE__ */ jsx13(CopyMessageButton, { text: copyTextOf(msg) }),
-      msg.modelUsed && /* @__PURE__ */ jsx13("span", { className: "font-mono", children: msg.modelUsed }),
-      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx13("span", { children: formatTokensPerSecond(msg) }),
-      formatModelCost(msg, models) && /* @__PURE__ */ jsx13("span", { children: formatModelCost(msg, models) })
+    quiet && /* @__PURE__ */ jsxs13("div", { "data-testid": "message-meta-lane", className: QUIET_META_LANE_CLASS, children: [
+      /* @__PURE__ */ jsx15(CopyMessageButton, { text: copyTextOf(msg) }),
+      msg.modelUsed && /* @__PURE__ */ jsx15("span", { className: "font-mono", children: msg.modelUsed }),
+      formatTokensPerSecond(msg) && /* @__PURE__ */ jsx15("span", { children: formatTokensPerSecond(msg) }),
+      formatModelCost(msg, models) && /* @__PURE__ */ jsx15("span", { children: formatModelCost(msg, models) })
     ] })
   ] });
 }
 var AssistantMessage = memo(AssistantMessageImpl);
 function useThinkingSeconds(active) {
-  const [seconds, setSeconds] = useState14(0);
-  useEffect11(() => {
+  const [seconds, setSeconds] = useState16(0);
+  useEffect12(() => {
     if (!active) return;
     setSeconds(0);
     const id = setInterval(() => setSeconds((s) => s + 1), 1e3);
@@ -5902,23 +6597,23 @@ function useThinkingSeconds(active) {
 }
 function ThinkingRow({ agentLabel, chrome = "labeled" }) {
   const seconds = useThinkingSeconds(true);
-  return /* @__PURE__ */ jsxs11("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
-    chrome !== "quiet" && /* @__PURE__ */ jsx13("p", { className: "mb-1 text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: agentLabel }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-[15px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsx13("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx13("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }),
+  return /* @__PURE__ */ jsxs13("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
+    chrome !== "quiet" && /* @__PURE__ */ jsx15("p", { className: "mb-1 text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: agentLabel }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 text-[15px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx15("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx15("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__ */ jsx13("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs11("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__ */ jsxs11("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__ */ jsx13("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ jsx13("path", { d: "M12 8v4m0 4h.01" })
+  return /* @__PURE__ */ jsx15("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs13("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__ */ jsxs13("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__ */ jsx15("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx15("path", { d: "M12 8v4m0 4h.01" })
     ] }),
-    /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 break-words", children: message }),
-    onRetry && /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15("span", { className: "min-w-0 flex-1 break-words", children: message }),
+    onRetry && /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -5953,32 +6648,32 @@ function ChatMessages({
 }) {
   const messageClassName = messageSize === "large" ? "agent-app-message-copy text-[17px] leading-[1.6]" : "agent-app-message-copy text-base leading-[1.6]";
   const renderBody = useMemo7(
-    () => renderMarkdown ?? ((content) => /* @__PURE__ */ jsx13("p", { className: "whitespace-pre-wrap", children: content })),
+    () => renderMarkdown ?? ((content) => /* @__PURE__ */ jsx15("p", { className: "whitespace-pre-wrap", children: content })),
     [renderMarkdown]
   );
   const lastIsUser = messages[messages.length - 1]?.role === "user";
   const quiet = chrome === "quiet";
   if (messages.length === 0 && !loading && !error) {
-    const empty = renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx13(ChatEmptyState, { ...emptyState });
-    return /* @__PURE__ */ jsxs11(Fragment7, { children: [
+    const empty = renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx15(ChatEmptyState, { ...emptyState });
+    return /* @__PURE__ */ jsxs13(Fragment8, { children: [
       header,
       empty
     ] });
   }
-  return /* @__PURE__ */ jsxs11(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment8, { children: [
     header,
     messages.map(
-      (msg) => msg.role === "user" ? /* @__PURE__ */ jsxs11("div", { className: `mx-auto w-full max-w-3xl px-6 ${quiet ? "group pb-1 pt-3" : "py-3"}`, children: [
-        /* @__PURE__ */ jsxs11("div", { className: `ml-auto w-fit ${quiet ? "max-w-[72%]" : "max-w-[85%]"}`, children: [
-          !quiet && /* @__PURE__ */ jsx13("p", { className: "mb-1 text-right text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: userLabel }),
-          /* @__PURE__ */ jsx13(
+      (msg) => msg.role === "user" ? /* @__PURE__ */ jsxs13("div", { className: `mx-auto w-full max-w-3xl px-6 ${quiet ? "group pb-1 pt-3" : "py-3"}`, children: [
+        /* @__PURE__ */ jsxs13("div", { className: `ml-auto w-fit ${quiet ? "max-w-[72%]" : "max-w-[85%]"}`, children: [
+          !quiet && /* @__PURE__ */ jsx15("p", { className: "mb-1 text-right text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: userLabel }),
+          /* @__PURE__ */ jsx15(
             "div",
             {
               className: quiet ? `rounded-2xl bg-[color-mix(in_srgb,hsl(var(--secondary))_65%,hsl(var(--background)))] px-4 py-2.5 ${messageClassName}` : `rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 ${messageClassName}`,
-              children: /* @__PURE__ */ jsx13("p", { className: "whitespace-pre-wrap", children: msg.content })
+              children: /* @__PURE__ */ jsx15("p", { className: "whitespace-pre-wrap", children: msg.content })
             }
           ),
-          resolveAttachmentUrl && attachmentPartsFromMessageParts(msg.parts).length > 0 && /* @__PURE__ */ jsx13("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx13(
+          resolveAttachmentUrl && attachmentPartsFromMessageParts(msg.parts).length > 0 && /* @__PURE__ */ jsx15("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx15(
             MessageAttachments,
             {
               parts: attachmentPartsFromMessageParts(msg.parts),
@@ -5987,8 +6682,8 @@ function ChatMessages({
             }
           ) })
         ] }),
-        quiet && /* @__PURE__ */ jsx13("div", { "data-testid": "message-meta-lane", className: `${QUIET_META_LANE_CLASS} justify-end`, children: /* @__PURE__ */ jsx13(CopyMessageButton, { text: msg.content }) })
-      ] }, msg.id) : /* @__PURE__ */ jsx13(
+        quiet && /* @__PURE__ */ jsx15("div", { "data-testid": "message-meta-lane", className: `${QUIET_META_LANE_CLASS} justify-end`, children: /* @__PURE__ */ jsx15(CopyMessageButton, { text: msg.content }) })
+      ] }, msg.id) : /* @__PURE__ */ jsx15(
         AssistantMessage,
         {
           msg,
@@ -6009,8 +6704,8 @@ function ChatMessages({
         msg.id
       )
     ),
-    loading && lastIsUser && /* @__PURE__ */ jsx13(ThinkingRow, { agentLabel, chrome }),
-    error && !loading && /* @__PURE__ */ jsx13(StreamErrorRow, { message: error, onRetry })
+    loading && lastIsUser && /* @__PURE__ */ jsx15(ThinkingRow, { agentLabel, chrome }),
+    error && !loading && /* @__PURE__ */ jsx15(StreamErrorRow, { message: error, onRetry })
   ] });
 }
 
@@ -6119,6 +6814,26 @@ export {
   withoutRecordGridRemoved,
   pruneRecordGridOverlay,
   RecordGrid,
+  DEFAULT_SPARKLINE_WIDTH,
+  DEFAULT_SPARKLINE_HEIGHT,
+  DEFAULT_SPARKLINE_LABEL,
+  DEFAULT_SPARKLINE_EMPTY_LABEL,
+  DEFAULT_SPARKLINE_UNAVAILABLE_LABEL,
+  formatSparklineValue,
+  sparklineReadings,
+  sparklineGeometry,
+  sparklinePointsAttribute,
+  sparklineLabel,
+  Sparkline,
+  insightDelta,
+  insightDeltaTone,
+  formatInsightDelta,
+  InsightCard,
+  DEFAULT_INSIGHT_PAGE_SIZE,
+  insightPageSize,
+  insightPageCount,
+  insightPageSlice,
+  InsightDeck,
   formatModelCost,
   formatTokensPerSecond,
   RunDrillIn,
@@ -6128,4 +6843,4 @@ export {
   useThinkingSeconds,
   ChatMessages
 };
-//# sourceMappingURL=chunk-ZAKKG6WI.js.map
+//# sourceMappingURL=chunk-CXPWUCXC.js.map