@tangle-network/agent-app 0.45.50 → 0.45.52

package/dist/{chunk-7HY4LX7O.js → chunk-JEZILUC3.js}

@@ -40,7 +40,7 @@ import {
 } from "./chunk-YJMCRXQQ.js";
 
 // src/web-react/index.tsx
-import { useEffect as useEffect12, useMemo as useMemo7, useRef as useRef12, useState as useState15, 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
@@ -83,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";
@@ -102,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) {
@@ -313,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",
@@ -379,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));
@@ -471,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] })
@@ -610,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);
@@ -688,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" }) });
@@ -717,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);
@@ -734,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;
@@ -803,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
@@ -971,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: [
@@ -1046,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);
@@ -1093,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;
@@ -1132,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");
@@ -1372,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);
@@ -1444,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) => {
@@ -1517,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);
@@ -1825,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);
@@ -1912,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]);
@@ -2087,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);
@@ -2166,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));
   }, []);
@@ -2193,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 };
@@ -2251,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") {
@@ -2364,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"]);
@@ -2424,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(
       () => {
@@ -2457,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",
@@ -2491,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",
       {
@@ -2541,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",
@@ -2589,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");
@@ -2631,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",
       {
@@ -2646,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"];
@@ -2940,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();
@@ -3226,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) {
@@ -3235,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(() => {
@@ -3270,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);
@@ -3391,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);
@@ -3621,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]);
@@ -3905,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) ?? [];
@@ -4014,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
@@ -4399,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);
@@ -5425,7 +5470,7 @@ import {
   useCallback as useCallback10,
   useEffect as useEffect11,
   useRef as useRef11,
-  useState as useState14
+  useState as useState15
 } from "react";
 import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function insightDelta(value, previous) {
@@ -5578,9 +5623,6 @@ function insightPageSlice(items, page, pageSize = DEFAULT_INSIGHT_PAGE_SIZE) {
   const safe = Math.min(Math.max(requested, 0), count - 1);
   return items.slice(safe * size, safe * size + size);
 }
-function staggerStyle(index, base) {
-  return { ...base, "--stagger-index": index };
-}
 function InsightDeck({
   state,
   empty,
@@ -5591,8 +5633,8 @@ function InsightDeck({
   className,
   onPageChange
 }) {
-  const [page, setPage] = useState14(0);
-  const [held, setHeld] = useState14(null);
+  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);
@@ -6074,7 +6116,7 @@ function ProposalCard({
   approval,
   renderers
 }) {
-  const [expanded, setExpanded] = useState15(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();
@@ -6165,48 +6207,55 @@ 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__ */ jsx15(
-      ProposalCard,
-      {
-        call,
-        message,
-        pending,
-        approval,
-        renderers
-      }
+    return arrive(
+      /* @__PURE__ */ jsx15(
+        ProposalCard,
+        {
+          call,
+          message,
+          pending,
+          approval,
+          renderers
+        }
+      )
     );
   }
   if (kind === "followup") {
-    return /* @__PURE__ */ jsx15(FollowupCard, { call });
+    return arrive(/* @__PURE__ */ jsx15(FollowupCard, { call }));
   }
   const custom = renderers?.[call.name]?.(call, message);
-  return /* @__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
-    }
+  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() {
@@ -6262,14 +6311,15 @@ function SegmentedBody({
   const leftoverToolCalls = (msg.toolCalls ?? []).filter(
     (tc) => !segmentToolIds.has(tc.id)
   );
-  const renderToolCard = (call) => /* @__PURE__ */ jsx15(
+  const renderToolCard = (call, index) => /* @__PURE__ */ jsx15(
     ToolCallCard,
     {
       call,
       message: msg,
       approval,
       onOpenRun: onToolCallClick,
-      renderers: toolRenderers
+      renderers: toolRenderers,
+      staggerIndex: index
     },
     `tool-${call.id}`
   );
@@ -6285,34 +6335,44 @@ function SegmentedBody({
       else groups.push({ kind: "tools", index: i, calls: [seg.call] });
     }
   }
-  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
-    groups.map(
-      (g) => g.kind === "text" ? /* @__PURE__ */ jsx15(
-        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.
+  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-colors hover:text-foreground", 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__ */ jsx15("div", { className: "mt-1.5 flex flex-col gap-1.5", children: g.calls.map(renderToolCard) })
-        ] }, `tools-${g.index}`)
-      ) : /* @__PURE__ */ jsx15("div", { className: "flex flex-col gap-2", children: g.calls.map(renderToolCard) }, `tools-${g.index}`)
-    ),
-    leftoverToolCalls.map(renderToolCard),
-    streaming && segments[lastIndex]?.kind === "tool" && /* @__PURE__ */ jsx15(StreamingCaret, {})
-  ] });
+        ] }, `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) {
@@ -6321,7 +6381,7 @@ function copyTextOf(msg) {
   return msg.content;
 }
 function CopyMessageButton({ text }) {
-  const [copied, setCopied] = useState15(false);
+  const [copied, setCopied] = useState16(false);
   const timerRef = useRef12(null);
   useEffect12(
     () => () => {
@@ -6394,6 +6454,9 @@ function AssistantMessageImpl({
   const thinkingSeconds = useThinkingSeconds(
     streaming && !!reasoning && !hasAnswerText
   );
+  const reasoningId = useId4();
+  const [reasoningToggled, setReasoningToggled] = useState16(null);
+  const reasoningOpen = reasoningToggled ?? !hasAnswerText;
   const quiet = chrome === "quiet";
   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: [
@@ -6402,20 +6465,59 @@ function AssistantMessageImpl({
       formatTokensPerSecond(msg) && /* @__PURE__ */ jsx15("span", { children: formatTokensPerSecond(msg) }),
       formatModelCost(msg, models) && /* @__PURE__ */ jsx15("span", { children: formatModelCost(msg, models) })
     ] }),
-    reasoning && /* @__PURE__ */ jsxs13("details", { className: "mb-2 rounded-lg border-l-2 border-border bg-secondary px-3 py-2", open: !hasAnswerText, children: [
-      /* @__PURE__ */ jsx15("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__ */ 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", { 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__ */ jsx15(
       SegmentedBody,
@@ -6434,14 +6536,15 @@ function AssistantMessageImpl({
         body,
         streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx15(StreamingCaret, {})
       ] }),
-      msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx15("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx15(
+      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
       )) })
@@ -6483,7 +6586,7 @@ function AssistantMessageImpl({
 }
 var AssistantMessage = memo(AssistantMessageImpl);
 function useThinkingSeconds(active) {
-  const [seconds, setSeconds] = useState15(0);
+  const [seconds, setSeconds] = useState16(0);
   useEffect12(() => {
     if (!active) return;
     setSeconds(0);
@@ -6740,4 +6843,4 @@ export {
   useThinkingSeconds,
   ChatMessages
 };
-//# sourceMappingURL=chunk-7HY4LX7O.js.map
+//# sourceMappingURL=chunk-JEZILUC3.js.map