@lotics/ui 45.10.1 → 46.0.0

package/MIGRATION.md

@@ -4,6 +4,33 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 46.0.0
+
+**`AgentRun` / `AgentProgress` drop `stepsLabel`, and the `agentRun` locale slice drops `steps`.**
+The run row no longer prints a step count — not on the folded run row, not on a settled
+`ToolGroup` header. The tally was a number a reader could act on in no way: while the run is live
+the label already changes on every call, so it added no motion the row did not have, and once
+settled it sized work nobody had asked to size. The chevron carries "there is more inside".
+
+Delete the prop and the pack key; both are now type errors.
+
+```diff
+-<AgentRun parts={parts} stepsLabel={(n) => plural(n, { one: "# step", other: "# steps" })} />
++<AgentRun parts={parts} />
+```
+
+```diff
+ agentRun: {
+   tools: { … },
+-  steps: (n) => `${n} bước`,
+ },
+```
+
+A row's accessible name is now the label alone (`"Searching records"`), where it was
+`"Searching records — 2 steps"` — update any test that queried it by the old string. Two rows can
+now share a name once the work is expanded (the run row and the step it was named for), so prefer
+`getAllByLabelText(...)[0]` over `getByLabelText` there.
+
 ## 45.9.0
 
 **`BrandMark` no longer carries product logos, and `SwitchButton` takes `leading` instead of

package/docs/ai_patterns.md

@@ -171,17 +171,81 @@ Output panel; `undefined` keeps it. Input + error rendering are untouched.
 **Activity grouping.** Consecutive tool parts fold into ONE group. While the agent is mid-tools
 the tail group is a SINGLE pulsing row whose label swaps in place as each call fires (no growing
 stack of dots); once prose resumes the group settles: a single call becomes one done row, and a
-multi-call group becomes a persistent "{final action} ({n} steps)" HEADER (a `complete` terminal
+multi-call group becomes a persistent "{final action}" HEADER (a `complete` terminal
 dot — distinct from the filled `done` step dots; amber `warning` if any call errored) that STAYS
-PUT and rolls the calls out BELOW it on press. The run ALWAYS ends on the agent's text — there is
-no global terminal node.
+PUT and rolls the calls out BELOW it on press.
+
+**ONE row for the whole run, and NO prose until it ends.** While the agent works, the entire feed
+is a single row. It names the call in flight — "Searching records" — and says
+**"Thinking…"** whenever the model is writing rather than calling, which is every gap between
+calls. The dot pulses; nothing rolls out unless the reader asks.
+
+**No step count.** The row says WHAT is happening and stops there. A tally was a number the reader
+could act on in no way: live, the label already changes on every call, so it added no motion the
+row did not have; settled, it sized work nobody had asked to size. The chevron carries "there is
+more inside".
+
+**The agent's between-call text is not shown at all.** It is narration by instruction — a plan the
+prompt tells it to state up front, asides capped at two sentences — and none of it is load-bearing
+in flight. The one message that genuinely needs a response is a bulk-mutation confirmation, and
+there the agent WAITS: the run stops, so that text becomes the trailing text and renders as the
+answer. Showing the rest bought a sentence that appeared, got half-read, and vanished when the
+next call superseded it. The threshold is that the run did SOME work — a reply with no tool calls
+at all is all answer, and hiding *that* behind a row until settle would be the real loss.
+
+A reader waiting on an answer is not reading a transcript, and a transcript that scrolls past
+while they wait is still noise — bounding it only makes the noise a fixed size. What they need is
+that something is happening and roughly what; the label and the count carry both, and the press
+carries the rest. That the waits are long (production: **p50 25s, p90 94s**; five-plus tool calls
+p50 52s / p90 144s) is an argument for the label CHANGING, not for showing the feed.
+
+The cost, stated plainly: the answer appears at settle rather than streaming. Final responses are
+≤3 sentences by instruction, so what is given up is a second of typing — against never yanking a
+half-read sentence out from under anyone.
+
+Grouping alone could never deliver this, because a group breaks on every prose part AND every
+reasoning part. An interleaved-thinking run therefore rebuilt the stack one group at a time — the
+reader watched finished rows pile up while they waited, and was then left with that pile sitting
+above the answer at the answer's weight, every row of it stale.
+
+**Expanding is where live and settled differ, and the only place they do.** Opened mid-run the
+timeline is CAPPED and self-pinning (220px, ~5 rows) — someone who opens a run in flight asked to
+see the work, not to hand the page a feed that grows for another minute; `FollowScroll` follows at
+LAYOUT level so each call paints already pinned. Opened once settled it is uncapped: nothing is
+arriving, so there is nothing to cap. Settling never closes what a reader opened; it just stops
+capping it.
+
+The split is POSITIONAL (`splitTimeline` in `agent_transform`): what comes after the last tool
+call is the answer, everything before it is the work. Nothing has to decide whether a paragraph
+was a plan or a report — a model emits all of it as `text`, so only position is knowable, and
+while the run is still moving that position is not yet final. Which is why the answer waits for
+settle: at that moment, and only then, the trailing text is known to be the report.
+
+The work stays fully open where collapsing would hide something needed: while any call is parked
+`awaiting` a human decision (the approval surface would be asking about work the reader can no
+longer see); when a SETTLED run stopped ON a tool call, leaving no answer to fold behind (mid-run
+that is just "not there yet", not a dead end); when the work is already one row (folding buys
+nothing and costs a second press to reach a step's I/O); and when no tool ran at all (`Thinking`
+is already a collapsed row, and a summary could only name a step that never happened).
+**`collapseProcess={false}`** hands the whole job back to the caller — for a surface that ALREADY
+frames the run (`AgentProgress`'s pill) or one whose subject is a step's own output; such a
+surface owns the `FollowScroll` too, and one on the default must NOT add one or it nests a
+scroller in a scroller. **`summarizeRun(steps)`** renames the row; the default names the current
+or last action and nothing more, because only the HOST knows which of its tools WROTE, and a
+kit-side list of write tools would be silently incomplete the first time one was added —
+reporting a run that changed data as though it had only read. A host that knows should say so
+("Updated 3 records"): that is the one fact worth reading without expanding.
+
+An ARTIFACT the run produced — a file, an image, a record diff — belongs in the result zone the
+host renders below the feed, never inside a tool's output panel where the fold puts it two
+presses away.
 
 **Tool labels.** A tool part carries the RAW tool name (`update_records` from `tool-update_records`,
 or a `dynamic-tool`'s `toolName`), resolved through the active locale's **`agentRun.tools`** map.
 An optional **`labelForCall`** override still wins, for phrasing a call by what it TARGETS rather
 than by which tool ran. It gets the whole call — `{ toolName, input, state }` (`AgentToolCall`);
 return `undefined` to fall back. Unknown names fall back
-to a prettified form. `stepsLabel` localizes the "{n} steps" suffix. The tool `state` folds ai's
+to a prettified form. The tool `state` folds ai's
 7-state lifecycle to **running / awaiting / done / error**: `approval-requested` → `awaiting` (the
 call is parked on a human decision — an amber dot + an "awaiting" annotation, and it NEVER
 pulses); `approval-responded` → running; `output-denied` → error carrying the
@@ -197,9 +261,13 @@ tinted panel rather than another step row, and it carries `role="alert"` so a sc
 action (a secondary `Button`) sits INSIDE that panel so the operator can re-fire the run; omit it
 and the panel carries the message alone.
 
-**In a bounded container, wrap it in `FollowScroll`.** An `AgentRun` streaming inside a dialog,
-drawer, or fixed-height panel grows BELOW the fold — a plain scroll container doesn't follow. Wrap
-the feed: `<FollowScroll style={{ maxHeight: … }}><AgentRun … /></FollowScroll>` — the same
+**`FollowScroll` — only when you took the job (`collapseProcess={false}`).** A run opened mid-flight
+already caps itself with exactly this, so wrapping the default AGAIN nests a scroller in a
+scroller: the outer never overflows, the inner holds the content, and the wheel lands on whichever
+the pointer happens to be over. Reach for the wrapper when the run is a raw timeline you are
+framing yourself — a dialog, drawer, or fixed-height panel where the feed grows BELOW the fold and
+a plain scroll container doesn't follow. Wrap it then:
+`<FollowScroll style={{ maxHeight: … }}><AgentRun … collapseProcess={false} /></FollowScroll>` — the same
 inverted-list mechanism as a chat message list: the follow happens at
 LAYOUT level (each growth paints already pinned — no scroll-after-paint flash), scrolling up
 releases it, and the feed stays at the newest content when the run settles (`AgentProgress`'s
@@ -225,9 +293,9 @@ feed**; the starting row IS the placeholder, consistent and localized.
 
 **Localization.** The feed's fixed chrome — the "Thinking" label, the "Input"/"Output"/"Error"
 panel titles, the "awaiting" annotation, the "Retry" action, the tool labels (`agentRun.tools`,
-keyed by raw tool name) and the "{n} steps" suffix (`agentRun.steps`) — resolves through the
+keyed by raw tool name) — resolves through the
 `LoticsLocale` `agentRun` slice (translate once at the provider; a `vi` app gets them for free);
-`labelForCall` and `stepsLabel` remain as per-call-site OVERRIDES.
+`labelForCall` remains a per-call-site OVERRIDE.
 
 **Answering an awaiting call — `ApprovalPrompt`.** The `awaiting` row inside `AgentRun` is
 READ-ONLY — it only NAMES that a call is parked on a human decision. The surface that ANSWERS it
@@ -245,7 +313,7 @@ locale slice → English.
 On a canvas/composer app reach for `AgentProgress` (`@lotics/ui/agent_progress`) — `AgentRun`
 collapsed into a floating pill (an animated `WaveAvatar` + the current step's label) that EXPANDS
 on press to the full feed in a capped scroll panel. It takes the same `parts`/`state`/`error`, and
-forwards `labelForCall`/`renderToolOutput`/`onRetry`/`stepsLabel` to the expanded feed, plus `label`
+forwards `labelForCall`/`renderToolOutput`/`onRetry` to the expanded feed, plus `label`
 (override the collapsed text — defaults to the running step's label, else "Working…" / "Done" /
 "Stopped"; pass it to localize — note it's one static string, so it no longer tracks the running
 step) and `defaultExpanded`. Its pill matches `Composer`'s compact geometry, so the composer morphs

package/docs/catalog.md

@@ -2093,13 +2093,27 @@ component rather than showing it at zero.
   state }`); `renderToolOutput(call)` replaces a step's default Output panel (the one render escape
   hatch — input/error untouched). A per-tool failure shows amber with the reason in its expanded
   Error panel; a run-level breaking `error` (outside `parts`) renders as a terminal danger row, with
-  an optional `onRetry` Button under it. Fixed chrome (Thinking / Input / Output / Error / awaiting /
-  Retry) localizes via the `agentRun` locale slice. Needs `ai` as an optional type-only peer. AI
+  an optional `onRetry` Button under it. While it runs the whole feed is ONE row and NO prose: the
+  row names the call in flight ("Searching records") and says "Thinking…" whenever the
+  model is writing rather than calling. The agent's between-call narration is never shown — the one
+  message needing a response is a bulk-mutation confirmation, and the agent waits there, so the run
+  stops and that text becomes the answer. A reply with no tool calls is all answer and still streams.
+  At settle the work folds to "{last action}" with the answer below. Expanding is the one
+  place live and settled differ: opened mid-run the timeline is capped and self-pinning (220px),
+  opened settled it is uncapped. Stays fully open while a call is parked, when a SETTLED run ended on
+  a tool call, and when the work is already one row. `collapseProcess={false}` hands the job back to
+  the caller (a surface that already frames the run — it then owns the `FollowScroll` too);
+  `summarizeRun(steps)` renames the row.
+  Fixed chrome (Thinking / Input / Output /
+  Error / awaiting / Retry) localizes via the `agentRun` locale slice. Needs `ai` as an optional type-only peer. AI
   work ONLY — deterministic work (template fill, an export) shows a `loading` state on its trigger
   and delivers at once; dressing it as an agent run is theater.
 - **`agent_transform`** — internal (no component): the one place that folds an ai-sdk `UIMessage`'s
   `parts` into the render timeline (`AgentUIPart`, `toSegments`, `lastRunningStep`), shared by
-  `AgentRun` and `AgentProgress`. The sole file permitted to `import type` from `ai`.
+  `AgentRun` and `AgentProgress`. Also `splitTimeline` → `AgentTimeline` (`{ process, result,
+  steps }`): the run's work/answer split, cut POSITIONALLY at the last tool call because a
+  model emits its plan, its asides and its report all as `text`. The sole file permitted to
+  `import type` from `ai`.
 - **`agent_progress`** — `AgentProgress`: `AgentRun`'s compact, floating, expandable form (same
   `parts` prop) — a composer's working state.
 - **`approval_prompt`** — `ApprovalPrompt`: the surface that ANSWERS an agent's approval-gated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "45.10.1",
+  "version": "46.0.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/agent_progress.tsx

@@ -26,8 +26,6 @@ export interface AgentProgressProps {
   renderToolOutput?: AgentRunProps["renderToolOutput"];
   /** Retry action under the expanded feed's terminal error row. */
   onRetry?: () => void;
-  /** Localized "{n} steps" suffix, forwarded to the expanded feed. */
-  stepsLabel?: (n: number) => string;
   defaultExpanded?: boolean;
 }
 
@@ -40,7 +38,7 @@ export interface AgentProgressProps {
  * label, so the surface stays calm until you ask to see the steps.
  */
 export function AgentProgress(props: AgentProgressProps) {
-  const { parts, state = "streaming", error, label, labelForCall, renderToolOutput, onRetry, stepsLabel, defaultExpanded } = props;
+  const { parts, state = "streaming", error, label, labelForCall, renderToolOutput, onRetry, defaultExpanded } = props;
   const [expanded, setExpanded] = useState(defaultExpanded ?? false);
 
   const running = lastRunningStep(toSegments(parts));
@@ -62,7 +60,10 @@ export function AgentProgress(props: AgentProgressProps) {
           {/* FollowScroll keeps the newest step in view as the run streams —
               a plain ScrollView would let new content grow below the fold. */}
           <FollowScroll style={{ maxHeight: 260 }} contentContainerStyle={{ padding: 16 }}>
-            <AgentRun parts={parts} state={state} error={error} labelForCall={labelForCall} renderToolOutput={renderToolOutput} onRetry={onRetry} stepsLabel={stepsLabel} />
+            {/* collapseProcess=false: the pill IS the fold. Letting the settled
+                run fold again inside it would put the steps two presses deep —
+                and this panel is only ever open because someone asked for them. */}
+            <AgentRun parts={parts} state={state} error={error} labelForCall={labelForCall} renderToolOutput={renderToolOutput} onRetry={onRetry} collapseProcess={false} />
           </FollowScroll>
         </View>
       ) : null}

package/src/agent_run.tsx

@@ -8,6 +8,7 @@ import { Callout, CalloutActions, CalloutText } from "./callout";
 import { Markdown } from "./markdown";
 import { JsonPanel, stringifyData } from "./json_panel";
 import { PressableHighlight } from "./pressable_highlight";
+import { FollowScroll } from "./follow_scroll";
 import { Marker, type StepStatus } from "./stepper";
 import { NODE } from "./stepper_layout";
 import { AnimationFadeIn } from "./animation_fade_in";
@@ -17,7 +18,7 @@ import { useLoticsLocale, type LoticsLocale } from "./locale";
 // The render model comes STRAIGHT from ai-sdk `UIMessage.parts` — no bespoke
 // transcript type. `agent_transform` is the one place that folds parts into the
 // timeline; this file is the renderer.
-import { toSegments, anyRunning, type AgentUIPart, type AgentStep, type AgentStepStatus } from "./agent_transform";
+import { toSegments, splitTimeline, anyRunning, lastRunningStep, type AgentUIPart, type AgentSegment, type AgentStep, type AgentStepStatus } from "./agent_transform";
 
 /** A resolved tool call as a `labelForCall` sees it: the RAW tool name, the
  *  input it was invoked with, and its settle state. Richer than a name-only map,
@@ -64,9 +65,21 @@ export interface AgentRunProps {
   /** When the run ended on a terminal `error`, render a retry action under that
    *  danger row. Omit it and the error row renders exactly as before. */
   onRetry?: () => void;
-  /** Localized "{n} steps" suffix on a collapsed activity group (the kit is
-   *  locale-neutral). Default `"{n} steps"`. */
-  stepsLabel?: (n: number) => string;
+  /** Fold a SETTLED run's work into ONE summary row, leaving the answer as the
+   *  only thing at rest (`splitTimeline`). Default `true`. Set `false` where the
+   *  run is ALREADY inside a collapsed shell — `AgentProgress`'s pill — since a
+   *  fold behind a fold costs two presses to read one run. */
+  collapseProcess?: boolean;
+  /** Name the whole run on that summary row. Gets every tool step in order;
+   *  return `undefined` to fall back to the built-in label (the LAST step's).
+   *
+   *  The default names the last action and nothing more, deliberately: only the
+   *  host knows which of its tools WROTE, and a kit-side guess would be a list
+   *  of tool names that is silently incomplete the moment a write tool is added
+   *  — reporting a run that changed data as if it had only read. A host that
+   *  does know should say so here ("Updated 3 records"), since that is the one
+   *  fact worth reading without expanding. */
+  summarizeRun?: (steps: readonly AgentStep[]) => string | undefined;
   accessibilityLabel?: string;
 }
 
@@ -141,12 +154,18 @@ const INK = colors.zinc[700];
  * tools it calls, in the order they happened. While the agent is mid-tools the
  * tail group is a SINGLE pulsing row whose label swaps in place as each call
  * fires (not a growing stack of dots); once prose resumes the group settles into
- * one row — "{final action} ({n} steps)" — that EXPANDS on press to the steps in
- * between. Text segments render as prose. The run always ends on the agent's text.
- * Pair with `Composer` + a review surface (`DiffValue` / `useChangeSet`).
+ * one row — "{final action}" — that EXPANDS on press to the steps in between.
+ * Text segments render as prose.
+ *
+ * That no-stacking law holds for the WHOLE run, not just one burst: the work
+ * stays at ONE row from the first call to the last, its label swapping in place
+ * to whatever is happening now, and the answer is the only thing that renders
+ * below it (`collapseProcess`, on by default). Press the row at any time —
+ * mid-run included — to roll the timeline out under it. Pair with `Composer` +
+ * a review surface (`DiffValue` / `useChangeSet`).
  */
 export function AgentRun(props: AgentRunProps) {
-  const { parts, labelForCall, renderToolOutput, onRetry, stepsLabel, accessibilityLabel } = props;
+  const { parts, labelForCall, renderToolOutput, onRetry, summarizeRun, accessibilityLabel } = props;
   const locale = useLoticsLocale();
   const segments = toSegments(parts);
   const state = props.state ?? (anyRunning(segments) ? "streaming" : "done");
@@ -155,6 +174,70 @@ export function AgentRun(props: AgentRunProps) {
 
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
   const toggle = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }));
+  const [workOpen, setWorkOpen] = useState(false);
+
+  const { process, result, steps } = splitTimeline(segments);
+  const awaiting = steps.some((s) => s.status === "awaiting");
+  // Does this run manage its own process zone? A surface that ALREADY frames the
+  // run — `AgentProgress`'s pill, a demo about one step's output — opts out and
+  // gets the raw timeline.
+  const managed = (props.collapseProcess ?? true) && !awaiting;
+
+  // The work is COLLAPSED for the whole run, not just at the end — one row whose
+  // label follows what is happening now. Nothing rolls out unless the reader asks.
+  //
+  // WHILE STREAMING that covers EVERY segment, prose included. The agent's
+  // between-call text is narration by instruction — a plan it was told to state
+  // up front, asides capped at two sentences — and none of it is load-bearing in
+  // flight: the one message that needs an answer is a bulk-mutation confirmation,
+  // and the agent WAITS there, so the run stops and that text becomes the
+  // trailing text this renders below. Showing the rest bought a sentence that
+  // appeared, was read halfway, and vanished when the next call superseded it.
+  // The threshold is `process.length > 0` — a reply with no work at all is all
+  // answer, and hiding THAT behind a row until settle would be the real loss.
+  //
+  // SETTLED, the collapse covers the work and the answer stands below it.
+  // Expanding differs between the two, and only there: LIVE the timeline is
+  // capped and self-pinning (opening a run mid-flight must not hand the page a
+  // feed that grows for another minute), SETTLED it opens in full.
+  //
+  // The settled clauses are cases where collapsing would hide something needed:
+  //  · no answer — the run stopped ON a tool call, so the fold would leave an
+  //    empty message. An unfinished run should look unfinished.
+  //  · one process row — already one row. Folding buys no rows and costs a
+  //    second press to reach a step's I/O.
+  //  · no tool steps — thinking plus a stray sentence, and `Thinking` is already
+  //    a collapsed row. A summary row here could only name a step that never ran.
+  const folded = managed && (streaming ? process.length > 0 : process.length > 1 && steps.length > 0 && result.length > 0);
+
+  // What the row SAYS right now: the tool in flight, or — when the model is
+  // writing rather than calling — "Thinking…". Naming the last finished action
+  // while the agent composes prose reports a moment that has passed.
+  const thinking = streaming && !lastRunningStep(segments);
+
+  const renderSegment = (seg: AgentSegment, tail: boolean) => {
+    if (seg.kind === "text") {
+      return (
+        <View key={seg.id} style={styles.narration}>
+          <Markdown>{seg.text}</Markdown>
+        </View>
+      );
+    }
+    if (seg.kind === "reasoning") {
+      return <ReasoningDisclosure key={seg.id} text={seg.text} streaming={streaming && tail} expanded={!!expanded[seg.id]} onToggle={() => toggle(seg.id)} />;
+    }
+    return (
+      <ToolGroup
+        key={seg.id}
+        steps={seg.steps}
+        active={streaming && tail}
+        expanded={!!expanded[seg.id]}
+        onToggle={() => toggle(seg.id)}
+        labelForCall={labelForCall}
+        renderToolOutput={renderToolOutput}
+      />
+    );
+  };
 
   return (
     <View accessibilityLabel={accessibilityLabel} style={{ gap: 10 }}>
@@ -165,30 +248,32 @@ export function AgentRun(props: AgentRunProps) {
           CTA press (uploads included) and never hand-roll a text/skeleton
           placeholder in front of the feed. */}
       {streaming && segments.length === 0 ? <StartingRow label={locale.agentRun.starting} /> : null}
-      {segments.map((seg, i) => {
-        if (seg.kind === "text") {
-          return (
-            <View key={seg.id} style={styles.narration}>
-              <Markdown>{seg.text}</Markdown>
-            </View>
-          );
-        }
-        if (seg.kind === "reasoning") {
-          return <ReasoningDisclosure key={seg.id} text={seg.text} streaming={streaming && i === lastIndex} expanded={!!expanded[seg.id]} onToggle={() => toggle(seg.id)} />;
-        }
-        return (
-          <ToolGroup
-            key={seg.id}
-            steps={seg.steps}
-            active={streaming && i === lastIndex}
-            expanded={!!expanded[seg.id]}
-            onToggle={() => toggle(seg.id)}
+      {folded ? (
+        <>
+          <WorkSummary
+            steps={steps}
+            live={streaming}
+            thinking={thinking}
+            expanded={workOpen}
+            onToggle={() => setWorkOpen((o) => !o)}
             labelForCall={labelForCall}
-            renderToolOutput={renderToolOutput}
-            stepsLabel={stepsLabel ?? locale.agentRun.steps}
-          />
-        );
-      })}
+            summarizeRun={summarizeRun}
+          >
+            {/* Streaming, the collapse holds EVERY segment — the trailing prose
+                has nowhere else to be, and that is the point. Settled, it holds
+                the work and the answer stands below. Opened mid-run the tail
+                group still pulses in there. */}
+            {(streaming ? segments : process).map((seg, i, all) => renderSegment(seg, streaming && i === all.length - 1))}
+          </WorkSummary>
+          {/* The answer, once there IS one. It appears at settle rather than
+              streaming, and that is the trade: our final responses are ≤3
+              sentences by instruction, so what is given up is a second of typing
+              — against never yanking a half-read sentence out from under anyone. */}
+          {streaming ? null : result.map((seg) => renderSegment(seg, false))}
+        </>
+      ) : (
+        segments.map((seg, i) => renderSegment(seg, i === lastIndex))
+      )}
       {/* A run-level BREAKING error terminates the feed. It lives outside `parts`
           (the stream failed), so the caller passes it explicitly.
           A CONTAINED surface, not another step row: the run didn't advance, it
@@ -382,17 +467,14 @@ function ReasoningDisclosure(props: { text: string; streaming?: boolean; expande
   );
 }
 
-function SummaryLabel({ label, count, stepsLabel }: { label: string; count: number; stepsLabel: (n: number) => string }) {
+// The row says WHAT is happening and nothing else. A step count was a number the
+// reader could do nothing with: on a live row the label already changes on every
+// call, so the tally added no motion it did not have; on a settled one it sized
+// work nobody had asked to size. The chevron carries "there is more inside".
+function SummaryLabel({ label }: { label: string }) {
   return (
-    // PARENTHESES, not a middot. The count is supplementary to the action, and
-    // parentheses say so in a mark that survives text extraction and screen
-    // readers; a middot asserts a relationship without naming it, and the ink
-    // contrast here was already doing the separating anyway.
     <Text size="sm" weight="medium" numberOfLines={1}>
       {label}
-      <Text size="sm" color="muted">
-        {" (" + stepsLabel(count) + ")"}
-      </Text>
     </Text>
   );
 }
@@ -401,6 +483,90 @@ function chevron(dir: "down" | "up") {
   return <Icon name={dir === "down" ? "chevron-down" : "chevron-up"} size={16} color={colors.zinc[400]} />;
 }
 
+/**
+ * The run's WORK, held at ONE row — the whole timeline up to the answer, behind
+ * a single "{current or last action}" header that expands the work out BELOW it,
+ * in order, exactly as it renders unfolded.
+ *
+ * ONE row for the whole lifecycle, not just at the end. Live, the label swaps in
+ * place under a pulsing dot; settled, it becomes the done summary. That is the
+ * point: a feed that grows a finished row per call makes the reader watch the
+ * work scroll past, and then leaves the wreckage sitting above the answer forever.
+ *
+ * It is the run-level analogue of `ToolGroup`'s header, and it exists because
+ * that grouping alone was never enough — a group breaks on every prose part AND
+ * every reasoning part, so an interleaved-thinking run rebuilds the stack one
+ * group at a time and settles as a pile of collapsed rows plus whatever plan it
+ * narrated on the way, all at the answer's weight and all stale. At rest a
+ * reader wants the answer; the work is what they open when they doubt it.
+ */
+function WorkSummary(props: {
+  steps: AgentStep[];
+  live: boolean;
+  /** The model is WRITING rather than calling — no tool is in flight. */
+  thinking: boolean;
+  expanded: boolean;
+  onToggle: () => void;
+  labelForCall?: (call: AgentToolCall) => string | undefined;
+  summarizeRun?: AgentRunProps["summarizeRun"];
+  children: ReactNode;
+}) {
+  const { steps, live, thinking, expanded, onToggle, labelForCall, summarizeRun, children } = props;
+  const locale = useLoticsLocale();
+  const final = steps[steps.length - 1];
+  // "Thinking…" WINS over a host summary while the model writes: `summarizeRun`
+  // names what the run DID, and mid-compose that is a moment already past.
+  const label = thinking
+    ? locale.agentRun.thinkingStreaming
+    : (summarizeRun?.(steps) ?? stepLabel(final, labelForCall, locale.agentRun.tools));
+  // A failure ANYWHERE in the work marks the closed row, so a run that limped to
+  // its answer never reads as clean work — the amber is the reason to open it.
+  // While the run is still STREAMING the marker is the pulsing `current` dot —
+  // keyed off the run, not off whether a call happens to be in flight this
+  // instant, or the dot would settle and re-pulse every time the agent stopped to
+  // write a sentence. An error that already happened waits its turn too: a run in
+  // flight is not a run that failed, and amber mid-flight would say it stopped.
+  const errored = steps.some((s) => s.status === "error");
+  return (
+    <View style={styles.group}>
+      <ActivityRow
+        markerStatus={live ? "current" : errored ? "warning" : "complete"}
+        live={live}
+        onPress={onToggle}
+        accessibilityLabel={label}
+        trailing={chevron(expanded ? "up" : "down")}
+      >
+        {/* Keyed by what the row is SAYING, so a new call (or the switch to
+            "Thinking…") rises + fades into the SAME row — the label swaps, the
+            row does not move. Exactly what a settled `ToolGroup` does mid-burst,
+            held for the whole run. */}
+        <AnimationFadeIn key={live ? label : "settled"} translateY={4}>
+          <SummaryLabel label={label} />
+        </AnimationFadeIn>
+      </ActivityRow>
+      {/* The run's own 10px rhythm, not the group's 2px: what rolls out here is
+          whole segments — prose, thinking, tool groups — not sibling step rows.
+          Opened while the run is still LIVE it is also CAPPED and self-pinning:
+          a reader who opens a run mid-flight asked to see the work, not to hand
+          the page a feed that grows for another minute. `FollowScroll` follows at
+          LAYOUT level (an inverted single-cell list), so each new call paints
+          already pinned — no scroll-after-paint flash. Settled, it opens in full:
+          nothing is arriving, so there is nothing to cap. */}
+      {expanded ? (
+        live ? (
+          <View testID="agent-run-work-capped" style={styles.work}>
+            <FollowScroll style={styles.liveFrame}>
+              <View style={{ gap: 10 }}>{children}</View>
+            </FollowScroll>
+          </View>
+        ) : (
+          <View testID="agent-run-work" style={styles.work}>{children}</View>
+        )
+      ) : null}
+    </View>
+  );
+}
+
 function ToolGroup(props: {
   steps: AgentStep[];
   active: boolean;
@@ -408,9 +574,8 @@ function ToolGroup(props: {
   onToggle: () => void;
   labelForCall?: (call: AgentToolCall) => string | undefined;
   renderToolOutput?: AgentRunProps["renderToolOutput"];
-  stepsLabel: (n: number) => string;
 }) {
-  const { steps, active, expanded, onToggle, labelForCall, renderToolOutput, stepsLabel } = props;
+  const { steps, active, expanded, onToggle, labelForCall, renderToolOutput } = props;
   const locale = useLoticsLocale();
   const resolve = (s: AgentStep) => stepLabel(s, labelForCall, locale.agentRun.tools);
 
@@ -454,7 +619,7 @@ function ToolGroup(props: {
     );
   }
 
-  // SETTLED, expandable — a persistent "{final action} ({n} steps)" HEADER that
+  // SETTLED, expandable — a persistent "{final action}" HEADER that
   // STAYS PUT and rolls the steps out BELOW it (in order) on press, so the row you
   // pressed never moves. The header wears the `complete` terminal dot — an outlined
   // ring + check, a differentiator from the filled `done` step dots; every row
@@ -464,10 +629,10 @@ function ToolGroup(props: {
       <ActivityRow
         markerStatus={errored || awaiting ? "warning" : "complete"}
         onPress={onToggle}
-        accessibilityLabel={`${resolve(final)} — ${stepsLabel(steps.length)}`}
+        accessibilityLabel={resolve(final)}
         trailing={chevron(expanded ? "up" : "down")}
       >
-        <SummaryLabel label={resolve(final)} count={steps.length} stepsLabel={stepsLabel} />
+        <SummaryLabel label={resolve(final)} />
       </ActivityRow>
       {expanded
         ? steps.map((s) => (
@@ -486,6 +651,15 @@ const styles = StyleSheet.create({
   // lines in every padded container).
   narration: {},
   group: { gap: 2 },
+  // The folded work, opened: segment spacing (the run's own gap), and a small
+  // lead-in under the header so the rolled-out work reads as its content.
+  work: { gap: 10, paddingTop: 6 },
+  // The cap on work OPENED mid-run. ~5 rows: enough to read what is happening,
+  // short enough that opening a p90 94s run does not push the composer off the
+  // screen for the rest of it. No border and no background — the run sits flush
+  // in the consumer's gutter by law, and a frame that appeared only while
+  // streaming would be the loudest thing on the surface.
+  liveFrame: { maxHeight: 220 },
   row: {
     flexDirection: "row",
     alignItems: "center",

package/src/agent_run_pane.tsx

@@ -178,12 +178,17 @@ export function AgentRunPane<TLanding>(props: AgentRunPaneProps<TLanding>) {
           `agentRun` locale slice — and ai_patterns states the law outright:
           never hand-roll a placeholder in front of the feed. A slot here would
           invite exactly that, and every app would localize it again. */}
+      {/* collapseProcess=false: this pane took the framing job — the FollowScroll
+          above IS the bound, sized by the dialog. Leaving the default on would
+          nest the run's own 220px window inside it, and the dialog's scroller
+          would then never overflow while the inner one held every step. */}
       <AgentRun
         parts={run.parts}
         state={run.status === "error" ? "error" : run.status === "streaming" ? "streaming" : "done"}
         error={run.error ?? undefined}
         labelForCall={labelForCall}
         renderToolOutput={renderToolOutput}
+        collapseProcess={false}
       />
     </FollowScroll>
   );

package/src/agent_transform.ts

@@ -112,3 +112,37 @@ export function lastRunningStep(segments: readonly AgentSegment[]): AgentStep |
   }
   return undefined;
 }
+
+/**
+ * A settled run reads as two zones: the WORK it did, and the ANSWER it ended on.
+ *
+ * The split is POSITIONAL. Nothing inside a part says whether its prose is a
+ * plan, a between-call aside, or the report — a model emits all three as `text`,
+ * and deciding between them would be guessing at language. Position is the one
+ * thing that IS knowable: what comes after the last tool call is what the agent
+ * said once the work was over; everything before it is the work.
+ */
+export interface AgentTimeline {
+  /** The work, in order — prose narrated on the way, thinking, tool groups. */
+  process: AgentSegment[];
+  /** The trailing text segments: what the run ended on. EMPTY when the run
+   *  stopped on a tool call (aborted, out of steps, parked) — which is exactly
+   *  when the work must NOT be folded away, because nothing would be left. */
+  result: AgentSegment[];
+  /** Every tool step in `process`, flattened in order — what a run-level
+   *  summary counts and names. */
+  steps: AgentStep[];
+}
+
+/** Split a folded timeline into its work and its answer. Pure: the returned
+ *  arrays are fresh, and nothing in `segments` is mutated. */
+export function splitTimeline(segments: readonly AgentSegment[]): AgentTimeline {
+  let cut = segments.length;
+  while (cut > 0 && segments[cut - 1].kind === "text") cut -= 1;
+  const process = segments.slice(0, cut);
+  const steps: AgentStep[] = [];
+  for (const seg of process) {
+    if (seg.kind === "group") steps.push(...seg.steps);
+  }
+  return { process, result: segments.slice(cut), steps };
+}

package/src/locale.tsx

@@ -250,10 +250,9 @@ export interface LoticsLocale {
   textInputField: { clear: string };
   /** `AgentRun`: the reasoning disclosure's label (settled / streaming), the
    *  auto-built tool peek's Input / Error / Output panel titles, the `awaiting`
-   *  annotation on a call parked on a human decision, and the terminal error's
-   *  `retry` action, the per-tool labels (`tools`) and the "{n} steps" suffix
-   *  (`steps`). `labelForCall` / `stepsLabel` remain as per-call-site
-   *  OVERRIDES, not as the only way to get a translation. */
+   *  annotation on a call parked on a human decision, the terminal error's
+   *  `retry` action, and the per-tool labels (`tools`). `labelForCall` remains a
+   *  per-call-site OVERRIDE, not the only way to get a translation. */
   /** `AgentRun` / `AgentProgress` chrome, plus `tools` — the display label per
    *  PLATFORM tool name. The tool set is bounded and kit-known, so localizing it
    *  here means every app inherits it; leaving it to each call site's
@@ -271,7 +270,6 @@ export interface LoticsLocale {
     retry: string;
     stop: string;
     tools: Record<string, string>;
-    steps: (n: number) => string;
   };
   /** `ApprovalPrompt`: the default prompt line (overridable per instance) and
    *  the Approve / Deny button labels — the surface that ANSWERS `AgentRun`'s
@@ -489,7 +487,6 @@ export const en: LoticsLocale = {
       generate_excel_from_template: "Generating spreadsheet",
       generate_docx_from_template: "Generating document",
     },
-    steps: (n) => `${n} steps`,
   },
   approvalPrompt: { message: "The assistant wants to perform an action that needs your approval.", approve: "Approve", deny: "Deny" },
   messageActions: { copy: "Copy", copied: "Copied", regenerate: "Regenerate", edit: "Edit", previousVersion: "Previous version", nextVersion: "Next version" },
@@ -697,7 +694,6 @@ export const vi: LoticsLocale = {
       generate_excel_from_template: "Đang tạo bảng tính",
       generate_docx_from_template: "Đang tạo văn bản",
     },
-    steps: (n) => `${n} bước`,
   },
   approvalPrompt: { message: "Trợ lý muốn thực hiện thao tác cần bạn duyệt.", approve: "Cho phép", deny: "Từ chối" },
   messageActions: { copy: "Sao chép", copied: "Đã sao chép", regenerate: "Tạo lại", edit: "Chỉnh sửa", previousVersion: "Phiên bản trước", nextVersion: "Phiên bản sau" },