@tangle-network/agent-app 0.45.47 → 0.45.48

package/dist/{chunk-ZX5UT4HF.js → chunk-C7AQW6US.js}

@@ -4,7 +4,7 @@ import {
 import {
   WorkProductCard,
   workProductPartsFromMessageParts
-} from "./chunk-54FYYXAX.js";
+} from "./chunk-J6OJTFNE.js";
 import {
   ChevronDown,
   OVERLAY_SHADOW,
@@ -12,7 +12,7 @@ import {
   PopoverSurface,
   usePending,
   usePopover
-} from "./chunk-GNPN6ED4.js";
+} from "./chunk-XVRHISF3.js";
 import {
   UNTITLED_SESSION_LABEL,
   mergeSessionPages,
@@ -21,9 +21,6 @@ import {
 import {
   attachmentPartsFromMessageParts
 } from "./chunk-5ZTFZBS6.js";
-import {
-  formatBytes
-} from "./chunk-KWXUBMXU.js";
 import {
   cancelStatusFor,
   fieldAcceptsFreeText,
@@ -40,7 +37,7 @@ import {
 } from "./chunk-YJMCRXQQ.js";
 
 // src/web-react/index.tsx
-import { useEffect as useEffect11, useMemo as useMemo7, useRef as useRef10, useState as useState14, memo } from "react";
+import { useEffect as useEffect11, useMemo as useMemo7, useRef as useRef11, useState as useState14, memo } from "react";
 import { InlineToolItem } from "@tangle-network/ui/run";
 
 // src/web-react/smooth-text.ts
@@ -102,7 +99,7 @@ function BrandMark({ size = 24, className }) {
 }
 
 // src/web-react/durable-plan-card.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
 
 // src/web-react/interaction-question-card.tsx
 import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
@@ -302,32 +299,43 @@ function QuestionOptionList({
   multi,
   selectedValues,
   disabled,
-  onToggle
+  onToggle,
+  answered = false
 }) {
   return /* @__PURE__ */ jsx2(Fragment, { children: options.map((option, optionIndex) => {
     const inputId = `${idPrefix}-${optionIndex}`;
     const checked = selectedValues.includes(option.value);
-    return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "flex cursor-pointer gap-2 rounded-lg border border-strong p-3 transition-colors hover:bg-accent", children: [
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          id: inputId,
-          type: multi ? "checkbox" : "radio",
-          name: groupName,
-          value: option.value,
-          checked,
-          disabled,
-          onChange: () => onToggle(option.value),
-          "aria-labelledby": `${inputId}-label`,
-          "aria-describedby": option.description ? `${inputId}-description` : void 0,
-          className: "mt-0.5 h-4 w-4 shrink-0 accent-primary"
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx2("span", { id: `${inputId}-label`, className: "block text-sm font-medium leading-5 text-foreground", children: option.label }),
-        option.description && /* @__PURE__ */ jsx2("span", { id: `${inputId}-description`, className: "mt-0.5 block text-xs leading-5 text-muted-foreground", children: option.description })
-      ] })
-    ] }, `${option.value}-${optionIndex}`);
+    const highlighted = answered && checked;
+    return /* @__PURE__ */ jsxs(
+      "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"}`,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              id: inputId,
+              type: multi ? "checkbox" : "radio",
+              name: groupName,
+              value: option.value,
+              checked,
+              disabled,
+              onChange: () => onToggle(option.value),
+              "aria-labelledby": `${inputId}-label`,
+              "aria-describedby": option.description ? `${inputId}-description` : void 0,
+              className: "mt-0.5 h-4 w-4 shrink-0 accent-primary"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx2("span", { id: `${inputId}-label`, className: "block text-sm font-medium leading-5 text-foreground", children: option.label }),
+            option.description && /* @__PURE__ */ jsx2("span", { id: `${inputId}-description`, className: "mt-0.5 block text-xs leading-5 text-muted-foreground", children: option.description })
+          ] }),
+          highlighted && /* @__PURE__ */ jsx2(CheckGlyph, { className: "mt-0.5 h-4 w-4 shrink-0 text-primary" })
+        ]
+      },
+      `${option.value}-${optionIndex}`
+    );
   }) });
 }
 function selectField(field) {
@@ -364,7 +372,6 @@ function InteractionQuestionCard({
   onResolved,
   onLateAnswer,
   kindLabel,
-  sourceNote,
   timeoutNote,
   renderMarkdown,
   className
@@ -460,113 +467,116 @@ function InteractionQuestionCard({
   } else if (submitting) {
     submitLabel = "Submitting\u2026";
   }
-  return /* @__PURE__ */ jsxs("div", { className: `rounded-xl border border-card-edge bg-card p-4 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+  return (
+    // `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: "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] })
       ] }),
-      /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground", children: sourceNote ?? "The agent asked for input" })
-    ] }),
-    interaction.title.trim() && interaction.fields.every((field) => field.label !== interaction.title) && /* @__PURE__ */ jsx2("p", { className: "mb-3 text-sm font-medium leading-5 text-foreground", children: interaction.title }),
-    interaction.body && (renderMarkdown ? /* @__PURE__ */ jsx2("div", { className: "mb-3 text-sm leading-5 text-muted-foreground", children: renderMarkdown(interaction.body) }) : /* @__PURE__ */ jsx2("p", { className: "mb-3 text-sm leading-5 text-muted-foreground", children: interaction.body })),
-    /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: interaction.fields.map((field) => {
-      const value = values[field.name] ?? {};
-      const select = selectField(field);
-      const freeText = freeTextField(field);
-      return /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium leading-5 text-foreground", children: field.label }),
-        select ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx2(
-            QuestionOptionList,
+      interaction.title.trim() && interaction.fields.every((field) => field.label !== interaction.title) && /* @__PURE__ */ jsx2("p", { className: "mb-3 text-[15px] font-semibold leading-snug text-foreground", children: interaction.title }),
+      interaction.body && (renderMarkdown ? /* @__PURE__ */ jsx2("div", { className: "mb-3 text-sm leading-5 text-muted-foreground", children: renderMarkdown(interaction.body) }) : /* @__PURE__ */ jsx2("p", { className: "mb-3 text-sm leading-5 text-muted-foreground", children: interaction.body })),
+      /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: interaction.fields.map((field) => {
+        const value = values[field.name] ?? {};
+        const select = selectField(field);
+        const freeText = freeTextField(field);
+        return /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium leading-5 text-foreground", children: field.label }),
+          select ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx2(
+              QuestionOptionList,
+              {
+                groupName: `${interaction.id}-${field.name}`,
+                idPrefix: `${interaction.id}-${field.name}`,
+                options: select.options,
+                multi: select.multi === true,
+                selectedValues: value.selected ?? [],
+                disabled,
+                onToggle: (optionValue) => toggleSelected(select, optionValue),
+                answered
+              }
+            ),
+            select.allowCustom === true && /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "text",
+                value: value.custom ?? "",
+                disabled,
+                onChange: (event) => setFieldValue(field.name, { custom: event.target.value }),
+                placeholder: "Other \u2014 type your own answer",
+                "aria-label": `Custom answer for ${field.label}`,
+                className: FIELD_INPUT_CLASSES
+              }
+            )
+          ] }) : field.type === "boolean" ? /* @__PURE__ */ jsx2("div", { className: "flex gap-4", children: ["true", "false"].map((boolValue) => /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-foreground", children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "radio",
+                name: `${interaction.id}-${field.name}`,
+                value: boolValue,
+                checked: (value.selected ?? [])[0] === boolValue,
+                disabled,
+                onChange: () => setFieldValue(field.name, { selected: [boolValue] }),
+                className: "h-4 w-4 accent-primary"
+              }
+            ),
+            boolValue === "true" ? "Yes" : "No"
+          ] }, boolValue)) }) : field.type === "number" ? /* @__PURE__ */ jsx2(
+            "input",
             {
-              groupName: `${interaction.id}-${field.name}`,
-              idPrefix: `${interaction.id}-${field.name}`,
-              options: select.options,
-              multi: select.multi === true,
-              selectedValues: value.selected ?? [],
+              type: "number",
+              value: value.text ?? "",
               disabled,
-              onToggle: (optionValue) => toggleSelected(select, optionValue)
+              "aria-label": field.label,
+              onChange: (event) => setFieldValue(field.name, { text: event.target.value }),
+              className: FIELD_INPUT_CLASSES
             }
-          ),
-          select.allowCustom === true && /* @__PURE__ */ jsx2(
+          ) : field.type === "secret" ? /* @__PURE__ */ jsx2(
             "input",
             {
-              type: "text",
-              value: value.custom ?? "",
+              type: "password",
+              value: value.text ?? "",
               disabled,
-              onChange: (event) => setFieldValue(field.name, { custom: event.target.value }),
-              placeholder: "Other \u2014 type your own answer",
-              "aria-label": `Custom answer for ${field.label}`,
+              "aria-label": field.label,
+              onChange: (event) => setFieldValue(field.name, { text: event.target.value }),
+              placeholder: field.placeholder,
+              maxLength: freeText ? textFieldMaxLength(freeText) : void 0,
               className: FIELD_INPUT_CLASSES
             }
-          )
-        ] }) : field.type === "boolean" ? /* @__PURE__ */ jsx2("div", { className: "flex gap-4", children: ["true", "false"].map((boolValue) => /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-foreground", children: [
-          /* @__PURE__ */ jsx2(
-            "input",
+          ) : /* @__PURE__ */ jsx2(
+            "textarea",
             {
-              type: "radio",
-              name: `${interaction.id}-${field.name}`,
-              value: boolValue,
-              checked: (value.selected ?? [])[0] === boolValue,
+              value: value.text ?? "",
               disabled,
-              onChange: () => setFieldValue(field.name, { selected: [boolValue] }),
-              className: "h-4 w-4 accent-primary"
+              "aria-label": field.label,
+              onChange: (event) => setFieldValue(field.name, { text: event.target.value }),
+              rows: 3,
+              maxLength: freeText ? textFieldMaxLength(freeText) : void 0,
+              placeholder: field.type === "text" ? field.placeholder : void 0,
+              className: FIELD_INPUT_CLASSES
             }
-          ),
-          boolValue === "true" ? "Yes" : "No"
-        ] }, boolValue)) }) : field.type === "number" ? /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "number",
-            value: value.text ?? "",
-            disabled,
-            "aria-label": field.label,
-            onChange: (event) => setFieldValue(field.name, { text: event.target.value }),
-            className: FIELD_INPUT_CLASSES
-          }
-        ) : field.type === "secret" ? /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "password",
-            value: value.text ?? "",
-            disabled,
-            "aria-label": field.label,
-            onChange: (event) => setFieldValue(field.name, { text: event.target.value }),
-            placeholder: field.placeholder,
-            maxLength: freeText ? textFieldMaxLength(freeText) : void 0,
-            className: FIELD_INPUT_CLASSES
-          }
-        ) : /* @__PURE__ */ jsx2(
-          "textarea",
-          {
-            value: value.text ?? "",
-            disabled,
-            "aria-label": field.label,
-            onChange: (event) => setFieldValue(field.name, { text: event.target.value }),
-            rows: 3,
-            maxLength: freeText ? textFieldMaxLength(freeText) : void 0,
-            placeholder: field.type === "text" ? field.placeholder : void 0,
-            className: FIELD_INPUT_CLASSES
-          }
-        )
-      ] }, field.name);
-    }) }),
-    error && /* @__PURE__ */ jsx2("p", { role: "alert", className: "mt-3 text-xs text-destructive", children: error }),
-    terminalNote && /* @__PURE__ */ jsx2("p", { className: "mt-3 text-xs text-muted-foreground", children: terminalNote }),
-    (showSubmitButton || showTimeoutNote) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-end gap-2", children: [
-      showTimeoutNote && /* @__PURE__ */ jsx2("div", { className: "mr-auto text-xs text-muted-foreground", children: timeoutNote }),
-      showSubmitButton && /* @__PURE__ */ jsx2(InteractionActionButton, { onClick: () => void submit(), disabled: disabled || !answerData, children: submitLabel })
-    ] }),
-    answered && /* @__PURE__ */ jsx2("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-3 w-3" }),
-      "Answered"
-    ] }) }),
-    lateAnswerSent && /* @__PURE__ */ jsx2("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-3 w-3" }),
-      "Sent as new message"
-    ] }) })
-  ] });
+          )
+        ] }, field.name);
+      }) }),
+      error && /* @__PURE__ */ jsx2("p", { role: "alert", className: "mt-3 text-xs text-destructive", children: error }),
+      terminalNote && /* @__PURE__ */ jsx2("p", { className: "mt-3 text-xs text-muted-foreground", children: terminalNote }),
+      (showSubmitButton || showTimeoutNote) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-end gap-2", children: [
+        showTimeoutNote && /* @__PURE__ */ jsx2("div", { className: "mr-auto text-xs text-muted-foreground", children: timeoutNote }),
+        showSubmitButton && /* @__PURE__ */ jsx2(InteractionActionButton, { onClick: () => void submit(), disabled: disabled || !answerData, children: submitLabel })
+      ] }),
+      answered && /* @__PURE__ */ jsx2("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-3 w-3" }),
+        "Answered"
+      ] }) }),
+      lateAnswerSent && /* @__PURE__ */ jsx2("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-3 w-3" }),
+        "Sent as new message"
+      ] }) })
+    ] })
+  );
 }
 
 // src/web-react/durable-plan-card.tsx
@@ -587,6 +597,7 @@ function statusLabel(plan) {
       return "Preparing";
   }
 }
+var COLLAPSED_MAX_HEIGHT = 320;
 function DurablePlanCard({
   plan,
   canWrite,
@@ -602,6 +613,12 @@ function DurablePlanCard({
   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);
+  useLayoutEffect(() => {
+    const el = bodyRef.current;
+    if (el) setOverflows(el.scrollHeight > COLLAPSED_MAX_HEIGHT);
+  }, [plan.body, renderMarkdown]);
   async function submit(decision) {
     const trimmed = feedback.trim();
     if (decision === "rejected" && !trimmed) {
@@ -622,16 +639,24 @@ function DurablePlanCard({
         plan.revision
       ] })
     ] }),
-    plan.title && /* @__PURE__ */ jsx3("p", { className: "mb-3 text-sm font-medium leading-5 text-foreground", children: plan.title }),
+    plan.title && /* @__PURE__ */ jsx3("p", { className: "mb-3 text-[15px] font-semibold leading-snug text-foreground", children: plan.title }),
     /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx3("div", { className: "overflow-hidden text-sm", style: expanded ? void 0 : { maxHeight: 320 }, children: renderMarkdown ? renderMarkdown(plan.body) : /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap leading-5", children: plan.body }) }),
-      !expanded && /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-card to-transparent" }),
       /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: bodyRef,
+          className: "overflow-hidden text-sm",
+          style: expanded || !overflows ? void 0 : { maxHeight: COLLAPSED_MAX_HEIGHT },
+          children: renderMarkdown ? renderMarkdown(plan.body) : /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap leading-5", children: plan.body })
+        }
+      ),
+      overflows && !expanded && /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-card to-transparent" }),
+      overflows && /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
           onClick: () => setExpanded((value) => !value),
-          className: "mt-1 text-xs text-muted-foreground hover:text-foreground",
+          className: "relative z-10 mt-1 text-xs text-muted-foreground hover:text-foreground",
           children: expanded ? "Collapse plan" : "Show full plan"
         }
       )
@@ -660,7 +685,7 @@ function DurablePlanCard({
 }
 
 // src/web-react/interaction-plan-card.tsx
-import { useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef4, useState as useState4 } 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" }) });
@@ -677,7 +702,25 @@ var TERMINAL_NOTES2 = interactionTerminalNotes("plan", {
   declined: "The agent was asked to revise the plan."
 });
 var DEFAULT_RE_REQUEST_LABEL = "Ask agent to re-submit the plan";
-var COLLAPSED_MAX_HEIGHT = 320;
+var COLLAPSED_MAX_HEIGHT2 = 320;
+function submittedFieldText(field, values) {
+  const answer = fieldAnswer(field, values);
+  if (answer === null) return null;
+  if (Array.isArray(answer)) {
+    const options = field.type === "select" ? field.options : void 0;
+    return answer.map((value) => options?.find((option) => option.value === value)?.label ?? value).join(", ");
+  }
+  return String(answer);
+}
+function useBodyOverflows(body, renderMarkdown) {
+  const bodyRef = useRef4(null);
+  const [overflows, setOverflows] = useState4(false);
+  useLayoutEffect2(() => {
+    const el = bodyRef.current;
+    if (el) setOverflows(el.scrollHeight > COLLAPSED_MAX_HEIGHT2);
+  }, [body, renderMarkdown]);
+  return { bodyRef, overflows };
+}
 function InteractionPlanCard({
   interaction,
   canWrite,
@@ -694,7 +737,8 @@ function InteractionPlanCard({
   const [localStatus, setLocalStatus] = useState4(null);
   const [reRequested, setReRequested] = useState4(false);
   const [error, setError] = useState4(null);
-  const submitInFlightRef = useRef3(false);
+  const submitInFlightRef = useRef4(false);
+  const { bodyRef, overflows } = useBodyOverflows(interaction.body, renderMarkdown);
   const status = isTerminalInteractionStatus(interaction.status) ? interaction.status : localStatus ?? interaction.status;
   const reRequestable = isLateAnswerableStatus(status) && onReRequest !== void 0;
   const canReRequest = canWrite && reRequestable && !reRequested;
@@ -755,31 +799,30 @@ 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 justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "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] })
-      ] }),
-      /* @__PURE__ */ jsx4("span", { className: "text-xs text-muted-foreground", children: "The agent proposed a plan" })
+    /* @__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-sm font-medium leading-5 text-foreground", children: interaction.title }),
+    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 ? void 0 : { maxHeight: COLLAPSED_MAX_HEIGHT },
+          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 })
         }
       ),
-      !expanded && /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-card to-transparent" }),
-      /* @__PURE__ */ jsxs3(
+      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: "mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground transition hover:text-foreground",
+          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"
@@ -787,7 +830,7 @@ function InteractionPlanCard({
         }
       )
     ] }),
-    interaction.fields.length > 0 && /* @__PURE__ */ jsx4("div", { className: "mt-3 space-y-4", children: interaction.fields.map((field) => /* @__PURE__ */ jsxs3("fieldset", { className: "space-y-2", children: [
+    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",
@@ -812,6 +855,14 @@ function InteractionPlanCard({
         }
       )
     ] }, 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 }) }),
@@ -938,6 +989,12 @@ function WarningGlyph({ className }) {
 function iconForMediaType(mediaType) {
   return mediaType?.startsWith("image/") ? ImageGlyph : FileGlyph;
 }
+function formatDisplayBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  const mb = bytes / (1024 * 1024);
+  return `${mb >= 10 ? Math.round(mb) : mb.toFixed(1)} MB`;
+}
 function attachmentDisplayName(part) {
   if (typeof part.name === "string" && part.name.trim().length > 0) return part.name;
   const base = part.path.split("/").pop() ?? "";
@@ -1001,7 +1058,7 @@ function useAttachmentObjectUrl(blob) {
 function AttachmentThumbnailError({ name }) {
   return /* @__PURE__ */ jsxs4("span", { className: "inline-flex h-16 w-16 shrink-0 flex-col items-center justify-center gap-1 rounded-md border border-destructive/40 bg-destructive/10 px-1 text-center text-destructive", children: [
     /* @__PURE__ */ jsx6(WarningGlyph, { className: "h-4 w-4 shrink-0" }),
-    /* @__PURE__ */ jsx6("span", { className: "line-clamp-2 text-[10px] leading-tight", children: name })
+    /* @__PURE__ */ jsx6("span", { className: "line-clamp-2 text-[11px] leading-tight", children: name })
   ] });
 }
 function AttachmentUnavailable({ shape }) {
@@ -1013,7 +1070,7 @@ function AttachmentUnavailable({ shape }) {
         className: "inline-flex h-16 w-16 shrink-0 flex-col items-center justify-center gap-1 rounded-md border border-border bg-muted px-1 text-center text-muted-foreground",
         children: [
           /* @__PURE__ */ jsx6(WarningGlyph, { className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx6("span", { className: "line-clamp-2 text-[10px] leading-tight", children: "Attachment unavailable" })
+          /* @__PURE__ */ jsx6("span", { className: "line-clamp-2 text-[11px] leading-tight", children: "Attachment unavailable" })
         ]
       }
     );
@@ -1114,7 +1171,7 @@ function AttachmentChip({ part, resolveFileUrl, fetchFile }) {
         displayName,
         typeof part.size === "number" && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground/70", children: [
           "\xB7 ",
-          formatBytes(part.size)
+          formatDisplayBytes(part.size)
         ] })
       ]
     }
@@ -1311,10 +1368,11 @@ async function streamChatTurn(opts) {
 import {
   useCallback as useCallback2,
   useEffect as useEffect5,
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState6
 } 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);
 function SendGlyph({ className }) {
   return /* @__PURE__ */ jsx7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z" }) });
 }
@@ -1385,13 +1443,13 @@ function ChatComposer({
   const isControlled = value !== void 0;
   const [internal, setInternal] = useState6(initialValue ?? "");
   const text = isControlled ? value : internal;
-  const textRef = useRef4(text);
+  const textRef = useRef5(text);
   textRef.current = text;
-  const textareaRef = useRef4(null);
-  const fileInputRef = useRef4(null);
-  const folderInputRef = useRef4(null);
+  const textareaRef = useRef5(null);
+  const fileInputRef = useRef5(null);
+  const folderInputRef = useRef5(null);
   const [dragOver, setDragOver] = useState6(false);
-  const dragDepth = useRef4(0);
+  const dragDepth = useRef5(0);
   const setText = useCallback2(
     (next) => {
       if (!isControlled) setInternal(next);
@@ -1405,8 +1463,8 @@ function ChatComposer({
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
   }, [text]);
-  const prevSeedRef = useRef4(null);
-  const pendingCaretRef = useRef4(null);
+  const prevSeedRef = useRef5(null);
+  const pendingCaretRef = useRef5(null);
   useEffect5(() => {
     const prev = prevSeedRef.current;
     prevSeedRef.current = seed ?? null;
@@ -1430,7 +1488,7 @@ function ChatComposer({
     el.focus();
     el.setSelectionRange(text.length, text.length);
   }, [text]);
-  const restoreCaretRef = useRef4(null);
+  const restoreCaretRef = useRef5(null);
   useEffect5(() => {
     const pending = restoreCaretRef.current;
     if (!pending || pending.text !== text) return;
@@ -1754,8 +1812,8 @@ function ChatComposer({
           }
         ),
         focusShortcut && /* @__PURE__ */ jsx7("div", { className: "mt-1.5 flex justify-end px-1", children: /* @__PURE__ */ jsxs5("span", { className: "text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsx7("kbd", { className: "rounded border border-border bg-background px-1 py-0.5 text-[10px]", children: "Cmd" }),
-          /* @__PURE__ */ jsx7("kbd", { className: "ml-0.5 rounded border border-border bg-background px-1 py-0.5 text-[10px]", children: "L" }),
+          /* @__PURE__ */ jsx7("kbd", { className: "rounded border border-border bg-background px-1 py-0.5 text-[11px]", children: IS_APPLE_PLATFORM ? "Cmd" : "Ctrl" }),
+          /* @__PURE__ */ jsx7("kbd", { className: "ml-0.5 rounded border border-border bg-background px-1 py-0.5 text-[11px]", children: "L" }),
           /* @__PURE__ */ jsx7("span", { className: "ml-1", children: "to focus" })
         ] }) })
       ]
@@ -1764,7 +1822,7 @@ function ChatComposer({
 }
 
 // src/web-react/durable-plan-flow.ts
-import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef6, useState as useState7 } from "react";
 var DurablePlanClientError = class extends Error {
   constructor(message, status, code, currentPlan) {
     super(message);
@@ -1855,8 +1913,8 @@ function useDurablePlanFlow(options) {
   const [deciding, setDeciding] = useState7(null);
   const [restoring, setRestoring] = useState7(false);
   const [error, setError] = useState7(null);
-  const attachments = useRef5(/* @__PURE__ */ new Map());
-  const decisionInFlight = useRef5(false);
+  const attachments = useRef6(/* @__PURE__ */ new Map());
+  const decisionInFlight = useRef6(false);
   useEffect6(() => setPlan(options.plan), [options.plan]);
   const apply = useCallback3(async (result) => {
     setPlan(result.plan);
@@ -2132,7 +2190,7 @@ function useChatInteractions(options = {}) {
 }
 
 // src/web-react/use-file-mentions.ts
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef6, useState as useState9 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef7, useState as useState9 } from "react";
 var FILE_MENTION_KIND = "file";
 function toMentionItem(file) {
   return { id: file.path, label: file.name, detail: file.path, kind: FILE_MENTION_KIND };
@@ -2191,9 +2249,9 @@ function useFileMentions(options) {
   } = options;
   const fetchImpl = options.fetchImpl ?? fetch;
   const [state, setState] = useState9({ kind: "idle" });
-  const stateRef = useRef6(state);
+  const stateRef = useRef7(state);
   stateRef.current = state;
-  const inFlightRef = useRef6(null);
+  const inFlightRef = useRef7(null);
   const [mentions, setMentions] = useState9([]);
   const load = useCallback5(() => {
     if (inFlightRef.current) return inFlightRef.current;
@@ -2421,9 +2479,9 @@ function FlowWaterfall({ trace }) {
           style: { left: `${row.offsetPct}%`, width: `${row.widthPct}%` }
         }
       ) }),
-      /* @__PURE__ */ jsx8("span", { className: "shrink-0 font-mono text-[10px] tabular-nums text-muted-foreground/70", children: row.durationLabel })
+      /* @__PURE__ */ jsx8("span", { className: "shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground/70", children: row.durationLabel })
     ] }, i)),
-    /* @__PURE__ */ jsxs6("p", { className: "pt-0.5 text-right font-mono text-[10px] tabular-nums text-muted-foreground/60", children: [
+    /* @__PURE__ */ jsxs6("p", { className: "pt-0.5 text-right font-mono text-[11px] tabular-nums text-muted-foreground/60", children: [
       (trace.totalMs / 1e3).toFixed(1),
       "s",
       cost ? ` \xB7 ${cost}` : ""
@@ -2447,8 +2505,8 @@ function MissionActivityLane({ activity, startedAt, nowMs }) {
             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-[10px] 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-[10px] tabular-nums text-muted-foreground/70", children: [
+        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-[11px] 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-[11px] 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 })
@@ -2460,7 +2518,7 @@ function MissionActivityLane({ activity, startedAt, nowMs }) {
       {
         type: "button",
         onClick: () => setExpanded((v) => !v),
-        className: "flex items-center gap-1 py-0.5 text-[10px] font-medium text-muted-foreground/70 transition hover:text-foreground",
+        className: "flex items-center gap-1 py-0.5 text-[11px] font-medium text-muted-foreground/70 transition hover:text-foreground",
         children: [
           /* @__PURE__ */ jsx8(ChevronGlyph, { className: `h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}` }),
           "timeline"
@@ -2496,11 +2554,11 @@ function ActivityRow({
           record.detail
         ] })
       ] }),
-      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-[10px] text-warning", children: [record.iteration !== void 0 ? `iter ${record.iteration}` : null, record.phase ?? null].filter(Boolean).join(" \xB7 ") }),
+      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-[11px] text-warning", children: [record.iteration !== void 0 ? `iter ${record.iteration}` : null, record.phase ?? null].filter(Boolean).join(" \xB7 ") }),
       /* @__PURE__ */ jsx8(
         "span",
         {
-          className: `shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${tone === "ok" ? "bg-success/10 text-success" : tone === "error" ? "bg-destructive/10 text-destructive" : tone === "live" ? "bg-warning/10 text-warning" : "bg-secondary text-muted-foreground"}`,
+          className: `shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium ${tone === "ok" ? "bg-success/10 text-success" : tone === "error" ? "bg-destructive/10 text-destructive" : tone === "live" ? "bg-warning/10 text-warning" : "bg-secondary text-muted-foreground"}`,
           children: record.status
         }
       ),
@@ -2585,7 +2643,7 @@ function AgentActivityPanel({ fetchActivity, renderMissionRef, title = "Agent ac
 }
 
 // src/web-react/provenance.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useId, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useId, useRef as useRef8, useState as useState11 } from "react";
 
 // src/web-react/provenance-model.ts
 var PROVENANCE_BASES = ["extracted", "entered", "computed", "asserted"];
@@ -2812,7 +2870,7 @@ function SourceRow({
   const openable = status === "ready" && (onOpenSource !== void 0 || source.href !== void 0);
   return /* @__PURE__ */ jsxs7("li", { className: "rounded-md border border-card-edge bg-card px-2.5 py-2", children: [
     /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
-      /* @__PURE__ */ jsx9("span", { className: "text-[13px] font-medium text-foreground", children: source.label }),
+      /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-foreground", children: source.label }),
       source.locator && /* @__PURE__ */ jsx9("span", { className: "text-[11px] text-muted-foreground", children: source.locator }),
       openable && (onOpenSource ? /* @__PURE__ */ jsxs7(
         "button",
@@ -2880,8 +2938,8 @@ function ProvenanceValue({
   className
 }) {
   const [open, setOpen] = useState11(defaultOpen);
-  const triggerRef = useRef7(null);
-  const rootRef = useRef7(null);
+  const triggerRef = useRef8(null);
+  const rootRef = useRef8(null);
   const panelId = useId();
   const standing = rollUpProvenanceStanding(record, confidencePolicy);
   const basisMeta = provenanceBasisMeta(record.basis);
@@ -2938,7 +2996,7 @@ function ProvenanceValue({
           /* @__PURE__ */ jsxs7(
             "span",
             {
-              className: `ml-1.5 inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium ${BASIS_TONES[record.basis]}`,
+              className: `ml-1.5 inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[11px] font-medium ${BASIS_TONES[record.basis]}`,
               children: [
                 /* @__PURE__ */ jsx9(BasisGlyph, { basis: record.basis, className: "h-3 w-3" }),
                 basisMeta.label
@@ -2970,7 +3028,7 @@ function ProvenanceValue({
               "aria-expanded": open,
               "aria-controls": panelId,
               "aria-label": provenanceTriggerLabel(record, standing),
-              className: `inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition hover:brightness-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ${BASIS_TONES[record.basis]}`,
+              className: `inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[11px] font-medium transition hover:brightness-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ${BASIS_TONES[record.basis]}`,
               children: [
                 /* @__PURE__ */ jsx9(BasisGlyph, { basis: record.basis, className: "h-3 w-3" }),
                 /* @__PURE__ */ jsx9("span", { "aria-hidden": true, children: basisMeta.label })
@@ -2980,7 +3038,7 @@ function ProvenanceValue({
           standing !== "settled" && // Legible at rest: what to do about the value does not wait for
           // someone to open the panel. `aria-hidden` because the trigger's
           // accessible name already carries it — this is the visual half.
-          /* @__PURE__ */ jsx9("span", { "aria-hidden": true, className: `text-[10px] font-medium ${STANDING_TONES[standing]}`, children: standingMeta.label })
+          /* @__PURE__ */ jsx9("span", { "aria-hidden": true, className: `text-[11px] font-medium ${STANDING_TONES[standing]}`, children: standingMeta.label })
         ] }),
         open && /* @__PURE__ */ jsxs7(
           "div",
@@ -3019,7 +3077,7 @@ function ProvenanceValue({
               )),
               loading.length > 0 && sources.length === 0 && /* @__PURE__ */ jsx9("p", { role: "status", className: "text-[11px] text-muted-foreground", children: "Looking up where this came from\u2026" }),
               inputs.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "border-t border-border pt-2", children: [
-                /* @__PURE__ */ jsx9("p", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: record.derivation ? `Computed from ${record.derivation}` : "Computed from" }),
+                /* @__PURE__ */ jsx9("p", { className: "text-[11px] font-medium uppercase tracking-[0.05em] text-muted-foreground", children: record.derivation ? `Computed from ${record.derivation}` : "Computed from" }),
                 /* @__PURE__ */ jsx9("ul", { className: "mt-1.5 space-y-1.5", children: inputs.map((input, index) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsx9(
                   ProvenanceValue,
                   {
@@ -3047,7 +3105,7 @@ function ProvenanceLegend({ bases, className }) {
       /* @__PURE__ */ jsxs7(
         "span",
         {
-          className: `inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium ${BASIS_TONES[basis]}`,
+          className: `inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[11px] font-medium ${BASIS_TONES[basis]}`,
           children: [
             /* @__PURE__ */ jsx9(BasisGlyph, { basis, className: "h-3 w-3" }),
             meta.label
@@ -3107,7 +3165,7 @@ function SeatPaywall({
   const recurringUsage = offer ? usd(offer.recurring.includedCreditsCents) : `$${includedUsageUsd}`;
   const introductory = offer?.introductory ?? null;
   return /* @__PURE__ */ jsx10("div", { className: "flex min-h-[60vh] w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs8("div", { className: "w-full max-w-md rounded-2xl border border-card-edge bg-card p-8", children: [
-    /* @__PURE__ */ jsx10("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: product }),
+    /* @__PURE__ */ jsx10("p", { className: "text-[11px] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: product }),
     /* @__PURE__ */ jsxs8("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: [
       "Unlock ",
       product
@@ -3142,8 +3200,7 @@ function SeatPaywall({
       ] })
     ] }),
     /* @__PURE__ */ jsx10("ul", { className: "mt-6 space-y-2.5", children: (benefits ?? [
-      `Full access to ${product}`,
-      `${recurringUsage}/mo of AI usage included`
+      `Full access to ${product}`
     ]).map((benefit, i) => /* @__PURE__ */ jsx10(Benefit, { children: benefit }, i)) }),
     /* @__PURE__ */ jsx10(
       "button",
@@ -3152,7 +3209,7 @@ function SeatPaywall({
         disabled: pending,
         onClick: () => run(onCheckout),
         className: "mt-7 inline-flex w-full items-center justify-center rounded-xl bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-70",
-        children: pending ? "Opening checkout\u2026" : ctaLabel ?? `Unlock ${product}`
+        children: pending ? "Opening checkout\u2026" : ctaLabel ?? "Continue to checkout"
       }
     ),
     footnote && /* @__PURE__ */ jsx10("p", { className: "mt-3 text-center text-xs text-muted-foreground/70", children: footnote })
@@ -3165,7 +3222,7 @@ import {
   useEffect as useEffect9,
   useId as useId2,
   useMemo as useMemo5,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState12
 } from "react";
 import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -3177,7 +3234,7 @@ function rethrowAsync(error) {
 function useInfiniteScroll(onLoadMore, { enabled, root, rootMargin = "300px" }) {
   const [sentinel, setSentinel] = useState12(null);
   const sentinelRef = useCallback8((node) => setSentinel(node), []);
-  const onLoadMoreRef = useRef8(onLoadMore);
+  const onLoadMoreRef = useRef9(onLoadMore);
   useEffect9(() => {
     onLoadMoreRef.current = onLoadMore;
   }, [onLoadMore]);
@@ -3214,16 +3271,16 @@ function useSessionHistory({
   const [nextCursor, setNextCursor] = useState12(initialPage.nextCursor ?? null);
   const [phase, setPhase] = useState12("idle");
   const [reloadKey, setReloadKey] = useState12(0);
-  const seqRef = useRef8(0);
-  const resetAbortRef = useRef8(null);
-  const loadMoreAbortRef = useRef8(null);
-  const loadingMoreRef = useRef8(false);
-  const lastOpRef = useRef8("first");
-  const nextCursorRef = useRef8(nextCursor);
+  const seqRef = useRef9(0);
+  const resetAbortRef = useRef9(null);
+  const loadMoreAbortRef = useRef9(null);
+  const loadingMoreRef = useRef9(false);
+  const lastOpRef = useRef9("first");
+  const nextCursorRef = useRef9(nextCursor);
   nextCursorRef.current = nextCursor;
-  const viewRef = useRef8({ q, sort, fetchPage });
+  const viewRef = useRef9({ q, sort, fetchPage });
   viewRef.current = { q, sort, fetchPage };
-  const seedRef = useRef8(initialPage);
+  const seedRef = useRef9(initialPage);
   seedRef.current = initialPage;
   const isDefaultView = q === "" && sort === defaultSort;
   const seedKey = useMemo5(() => seedSignature(initialPage), [initialPage]);
@@ -3552,7 +3609,7 @@ function SessionHistoryPanel({
   contentWidth = "reading",
   className
 }) {
-  const scrollRef = useRef8(null);
+  const scrollRef = useRef9(null);
   const sentinelRef = useInfiniteScroll(history.loadMore, {
     enabled: history.hasMore && !history.isLoadingMore && !history.isError,
     root: scrollRef,
@@ -3953,7 +4010,7 @@ import {
   useEffect as useEffect10,
   useId as useId3,
   useMemo as useMemo6,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState13
 } from "react";
 
@@ -4352,10 +4409,10 @@ function RecordGrid({
   const [draftErrors, setDraftErrors] = useState13({});
   const [draftError, setDraftError] = useState13(null);
   const [creating, setCreating] = useState13(false);
-  const cellRefs = useRef9(/* @__PURE__ */ new Map());
-  const settling = useRef9(false);
-  const draftCounter = useRef9(0);
-  const editingRef = useRef9(null);
+  const cellRefs = useRef10(/* @__PURE__ */ new Map());
+  const settling = useRef10(false);
+  const draftCounter = useRef10(0);
+  const editingRef = useRef10(null);
   const setEditing = useCallback9((next) => {
     editingRef.current = next;
     setEditingState(next);
@@ -4670,7 +4727,7 @@ function RecordGrid({
         className: "w-full border-collapse text-left text-sm",
         onKeyDown: handleGridKeyDown,
         children: [
-          /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs10("tr", { role: "row", className: "border-b border-border text-[11px] uppercase tracking-wide text-muted-foreground", children: [
+          /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs10("tr", { role: "row", className: "border-b border-border text-[11px] uppercase tracking-[0.05em] text-muted-foreground", children: [
             columns.map((column) => /* @__PURE__ */ jsx12(
               "th",
               {
@@ -5210,7 +5267,7 @@ function RunDrillIn({ run, onClose }) {
         }
       ),
       /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx13("p", { className: "truncate text-sm font-semibold", children: run.title }),
+        /* @__PURE__ */ jsx13("p", { className: "truncate text-[15px] font-semibold", children: run.title }),
         /* @__PURE__ */ jsx13("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: run.toolName })
       ] }),
       /* @__PURE__ */ jsx13(
@@ -5230,12 +5287,12 @@ function RunDrillIn({ run, onClose }) {
         /* @__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-[11px] ${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-[10px] text-muted-foreground", children: new Date(step.at).toLocaleTimeString() })
+          /* @__PURE__ */ jsx13("span", { className: "shrink-0 text-[11px] 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-[11px] leading-relaxed text-muted-foreground", children: step.detail })
       ] }, i))
     ] }),
-    /* @__PURE__ */ jsx13("p", { className: "border-t border-border px-4 py-2 text-[11px] text-muted-foreground", children: "Readonly drill-in. Follow up in the main chat." })
+    /* @__PURE__ */ jsx13("p", { className: "border-t border-border px-4 py-2 text-[11px] text-muted-foreground", children: "Read-only transcript \u2014 reply in the main chat." })
   ] });
 }
 function pendingApprovalOf(call) {
@@ -5249,19 +5306,24 @@ function ChatEmptyState({
   subline = "Describe the outcome you want. The agent works through it step by step, and pauses for your approval before anything irreversible.",
   doors
 }) {
+  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-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground", children: productName }),
-    /* @__PURE__ */ jsx13("h2", { className: "mt-1.5 text-balance text-2xl font-semibold leading-tight text-foreground sm:text-[28px]", children: headline }),
+    /* @__PURE__ */ jsx13("p", { className: "text-[11px] 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 sm:grid-cols-3", children: doors.slice(0, 3).map((door, i) => /* @__PURE__ */ jsxs11(
+    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(
       "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__ */ jsx13("span", { className: "text-sm font-semibold text-foreground", children: door.label }),
+          /* @__PURE__ */ jsxs11("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 })
         ]
       },
@@ -5349,7 +5411,7 @@ function proposalPreview(call) {
   const a = call.args ?? {};
   const asString = (v) => typeof v === "string" && v.trim() ? v.trim() : null;
   const asList = (v) => Array.isArray(v) ? v.map((x) => typeof x === "string" ? x : null).filter((x) => !!x) : asString(v) ? [asString(v)] : [];
-  const verbPhrase = asString(a.summary) ?? asString(a.description) ?? (asString(a.type) ? `${String(a.type).replace(/_/g, " ")}${asString(a.title) ? `: ${asString(a.title)}` : ""}` : null);
+  const verbPhrase = asString(a.summary) ?? asString(a.description) ?? null;
   const destinations = [
     ...asList(a.destinations),
     ...asList(a.channels),
@@ -5358,6 +5420,7 @@ function proposalPreview(call) {
   ];
   const dest = destinations.length ? ` to ${destinations.join(" and ")}` : "";
   const summary = verbPhrase ? `${verbPhrase}${dest}` : destinations.length ? `Publish to ${destinations.join(" and ")}` : null;
+  const typeSlug = summary === null ? asString(a.type) : null;
   const meta = [];
   const cost = a.cost ?? a.price ?? a.estimatedCost;
   if (typeof cost === "number" && cost > 0) meta.push(`~$${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)}`);
@@ -5365,7 +5428,7 @@ function proposalPreview(call) {
   const reach = a.reach ?? a.audience ?? a.estimatedReach;
   if (typeof reach === "number" && reach > 0) meta.push(`reaches ~${reach.toLocaleString()}`);
   else if (asString(reach)) meta.push(asString(reach));
-  return { summary, meta };
+  return { summary, meta, typeSlug };
 }
 function truncate(v, max = 240) {
   const s = typeof v === "string" ? v : JSON.stringify(v);
@@ -5400,14 +5463,14 @@ function DefaultToolDetail({ call }) {
   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-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Called with" }),
+      /* @__PURE__ */ jsx13("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Called with" }),
       /* @__PURE__ */ jsx13(KvRows, { data: call.args })
     ] }),
     envelope ? /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx13("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: envelope.ok === false ? "Failed" : "Result" }),
+      /* @__PURE__ */ jsx13("p", { className: "mb-1 text-[11px] 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-[11px] text-muted-foreground", children: truncate(envelope.result) }) : null
     ] }) : result != null ? /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx13("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Result" }),
+      /* @__PURE__ */ jsx13("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Result" }),
       /* @__PURE__ */ jsx13("p", { className: "font-mono text-[11px] text-muted-foreground", children: truncate(result) })
     ] }) : null
   ] });
@@ -5420,28 +5483,29 @@ function ProposalCard({
   renderers
 }) {
   const [expanded, setExpanded] = useState14(false);
-  const { summary, meta } = proposalPreview(call);
+  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-[10px] font-semibold uppercase tracking-wider text-warning-strong", children: "Needs your approval" }),
+        /* @__PURE__ */ jsx13("p", { className: "text-[11px] 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-[13px] leading-relaxed text-muted-foreground", children: summary }),
+        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-[11px] 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: [
+      approval && /* @__PURE__ */ jsxs11(Fragment7, { children: [
         /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
             disabled: deciding,
             onClick: () => decide(() => approval.onApprove(pending.proposalId, call.id)),
-            className: "inline-flex min-h-[40px] flex-1 items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60 sm:flex-none sm:min-w-[160px]",
+            className: "inline-flex min-h-[40px] flex-1 items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60 sm:flex-none sm:min-w-[160px]",
             children: "Approve & run"
           }
         ),
@@ -5455,7 +5519,7 @@ function ProposalCard({
             children: "Reject"
           }
         )
-      ] }) : /* @__PURE__ */ jsx13("span", { className: "text-[12px] font-medium text-muted-foreground", children: "Awaiting approval\u2026" }),
+      ] }),
       /* @__PURE__ */ jsxs11(
         "button",
         {
@@ -5473,14 +5537,27 @@ function ProposalCard({
     expanded && /* @__PURE__ */ jsx13("div", { className: "border-t border-warning/20 px-4 py-3 text-xs", children: custom ?? /* @__PURE__ */ jsx13(DefaultToolDetail, { call }) })
   ] });
 }
+function formatFollowupWhen(when) {
+  const date = new Date(when);
+  if (Number.isNaN(date.getTime())) return when;
+  const day = date.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
+  const time = date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  return `${day} \xB7 ${time}`;
+}
 function FollowupCard({ call }) {
   const a = call.args ?? {};
   const when = typeof a.when === "string" ? a.when : typeof a.at === "string" ? a.at : typeof a.schedule === "string" ? a.schedule : null;
-  return /* @__PURE__ */ jsx13("div", { className: "flex items-start gap-2", children: /* @__PURE__ */ jsx13("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", { className: "hidden min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground sm:inline", children: when })
-  ] }) }) });
+  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)]"}` }) })
+    ] }),
+    errorText && /* @__PURE__ */ jsx13("div", { className: "border-t border-border px-3 py-2 text-xs text-[var(--surface-danger-text)]", children: errorText })
+  ] }) });
 }
 function toolRowTitle(call) {
   if (call.name === "sandbox_run_command") return "Ran command";
@@ -5500,7 +5577,6 @@ function ToolCallCard({
 }) {
   const pending = call.status === "done" ? pendingApprovalOf(call) : null;
   const kind = blockKindOf(call);
-  const failed = toolCallFailed(call);
   if (pending) {
     return /* @__PURE__ */ jsx13(
       ProposalCard,
@@ -5513,7 +5589,7 @@ function ToolCallCard({
       }
     );
   }
-  if (kind === "followup" && !failed) {
+  if (kind === "followup") {
     return /* @__PURE__ */ jsx13(FollowupCard, { call });
   }
   const custom = renderers?.[call.name]?.(call, message);
@@ -5529,8 +5605,13 @@ function ToolCallCard({
         {
           type: "button",
           onClick: () => onOpenRun(call, message),
-          className: "rounded border border-border bg-card px-2 py-1 text-[11px] font-medium transition hover:bg-accent",
-          children: "Open full transcript \u2192"
+          "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
     }
@@ -5628,7 +5709,7 @@ function SegmentedBody({
         // 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 px-1 py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", 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: [
             "Worked through ",
             g.calls.length,
             " steps"
@@ -5641,7 +5722,7 @@ function SegmentedBody({
     streaming && segments[lastIndex]?.kind === "tool" && /* @__PURE__ */ jsx13(StreamingCaret, {})
   ] });
 }
-var QUIET_META_LANE_CLASS = "mt-1 flex h-[18px] items-center gap-2 text-[11px] tracking-wide 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";
+var QUIET_META_LANE_CLASS = "mt-1 flex h-[18px] items-center gap-2 text-[11px] 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) {
   const textRuns = msg.segments?.filter((s) => s.kind === "text") ?? [];
   if (textRuns.length > 0) return textRuns.map((s) => s.content).join("\n\n");
@@ -5649,7 +5730,7 @@ function copyTextOf(msg) {
 }
 function CopyMessageButton({ text }) {
   const [copied, setCopied] = useState14(false);
-  const timerRef = useRef10(null);
+  const timerRef = useRef11(null);
   useEffect11(
     () => () => {
       if (timerRef.current !== null) clearTimeout(timerRef.current);
@@ -5705,9 +5786,9 @@ 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 = useRef10(null);
-  const thinkStartRef = useRef10(null);
-  const thinkMsRef = useRef10(null);
+  const reasoningScrollRef = useRef11(null);
+  const thinkStartRef = useRef11(null);
+  const thinkMsRef = useRef11(null);
   if (streaming && reasoning && !hasAnswerText && thinkStartRef.current === null) {
     thinkStartRef.current = performance.now();
   }
@@ -5723,8 +5804,8 @@ function AssistantMessageImpl({
   );
   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-[11px] tracking-wide text-muted-foreground", children: [
-      /* @__PURE__ */ jsx13("span", { className: "font-semibold uppercase", children: agentLabel }),
+    !quiet && /* @__PURE__ */ jsxs11("div", { className: "mb-1 flex items-baseline gap-2 text-[11px] 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) })
@@ -5742,7 +5823,7 @@ function AssistantMessageImpl({
           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-[13px] leading-relaxed text-muted-foreground", children: reasoning })
+      /* @__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 })
     ] }),
     segments && segments.length > 0 ? /* @__PURE__ */ jsx13(
       SegmentedBody,
@@ -5822,8 +5903,8 @@ 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-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: agentLabel }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-base text-muted-foreground", children: [
+    chrome !== "quiet" && /* @__PURE__ */ jsx13("p", { className: "mb-1 text-[11px] 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" }) }),
       "Thinking",
       seconds >= 3 ? ` \xB7 ${seconds}s` : "..."
@@ -5870,7 +5951,7 @@ function ChatMessages({
   resolveAttachmentUrl,
   workProductCards
 }) {
-  const messageClassName = messageSize === "large" ? "agent-app-message-copy text-[17px] leading-[1.75]" : "agent-app-message-copy text-base leading-[1.75]";
+  const messageClassName = messageSize === "large" ? "agent-app-message-copy text-[16px] leading-[1.6]" : "agent-app-message-copy text-[15px] leading-[1.6]";
   const renderBody = useMemo7(
     () => renderMarkdown ?? ((content) => /* @__PURE__ */ jsx13("p", { className: "whitespace-pre-wrap", children: content })),
     [renderMarkdown]
@@ -5889,7 +5970,7 @@ function ChatMessages({
     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-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: userLabel }),
+          !quiet && /* @__PURE__ */ jsx13("p", { className: "mb-1 text-right text-[11px] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: userLabel }),
           /* @__PURE__ */ jsx13(
             "div",
             {
@@ -6047,4 +6128,4 @@ export {
   useThinkingSeconds,
   ChatMessages
 };
-//# sourceMappingURL=chunk-ZX5UT4HF.js.map
+//# sourceMappingURL=chunk-C7AQW6US.js.map