diff --git a/apps/desktop/src/main/__tests__/chat-marker-cascade-contract.test.ts b/apps/desktop/src/main/__tests__/chat-marker-cascade-contract.test.ts
index e9bca17278..3757bed336 100644
--- a/apps/desktop/src/main/__tests__/chat-marker-cascade-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/chat-marker-cascade-contract.test.ts
@@ -40,18 +40,18 @@ describe('chat Marker shell migration contract (#332 PR2)', () => {
     }
   });
 
-  it('keeps the turn container + deferred reasoning chrome (out of scope)', async () => {
+  it('keeps the turn container (out of scope)', async () => {
     const css = await readAllRendererCss();
     for (const selector of [
       // The `.maka-turn` flex/measure container is NOT a marker — it stays.
       '.maka-turn {',
-      '.maka-turn-tools',
       '.maka-turn-streaming',
       '.maka-turn[data-search-highlight="true"]',
-      // `.maka-turn-thinking` is explicitly deferred (pseudo-element chevron +
-      // @starting-style fade don't reduce to leaf utilities); it stays authored.
-      '.maka-turn-thinking',
-      '.maka-turn-thinking [data-slot="collapsible-trigger"]',
+      // NOTE: `.maka-turn-thinking` and `.maka-turn-tools` were retired by the
+      // streaming UI rework — reasoning now renders through the `DeepThinking`
+      // disclosure (Tailwind-literal chrome + the `maka-text-shimmer` primitive)
+      // and tools through the flat `ToolTrow`, so the hand-authored committed-
+      // turn thinking `<details>` chrome and the tools-section wrapper are gone.
     ]) {
       assert.ok(css.includes(selector), `out-of-scope turn rule "${selector}" must be preserved`);
     }
diff --git a/apps/desktop/src/main/__tests__/chat-status-cluster-layout-contract.test.ts b/apps/desktop/src/main/__tests__/chat-status-cluster-layout-contract.test.ts
index abc1e7b419..01c037761a 100644
--- a/apps/desktop/src/main/__tests__/chat-status-cluster-layout-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/chat-status-cluster-layout-contract.test.ts
@@ -21,18 +21,66 @@ describe('chat status cluster layout contract', () => {
   it('keeps alert/status badges in flow between the header and first chat content', async () => {
     const src = await readRepo('packages/ui/src/chat-view.tsx');
 
+    // The cluster div is ALWAYS mounted (streaming-settle polish): it
+    // collapses via the CSS `:empty` height transition instead of conditional
+    // mount/unmount, which used to snap the conversation column up by the
+    // badge-row height the frame a run completed. The badges inside stay
+    // conditional.
     assert.match(
       src,
-      /<header className="maka-chat-header">[\s\S]*?<\/header>\s*\{\(props\.sessionStatusBadge \|\| props\.connectionAlert \|\| props\.eventStreamAlert\) && \(/,
+      /<\/header>\s*\{\/\*[\s\S]*?\*\/\}\s*<div className="maka-chat-status-cluster">/,
       'status badges should render after the header, not inside the header toolbar row',
     );
     assert.match(
       src,
-      /<div className="maka-chat-status-cluster">[\s\S]*?<\/div>\s*\)\}\s*\{isLocalSimulationBackend && \(/,
+      /<div className="maka-chat-status-cluster">\s*\{props\.sessionStatusBadge && /,
+      'the cluster div must be unconditionally mounted with badges conditional INSIDE (the :empty transition depends on it)',
+    );
+    assert.match(
+      src,
+      /<div className="maka-chat-status-cluster">[\s\S]*?<\/div>\s*\{isLocalSimulationBackend && \(/,
       'status badges should stay before the fake-backend banner so normal flow reserves vertical space before first content',
     );
   });
 
+  it('collapses via :empty with tokenized height/opacity transition instead of unmount', async () => {
+    const css = await readRendererContractCss();
+    const body = ruleBody(css, '.maka-chat-status-cluster');
+    assert.match(body, /interpolate-size:\s*allow-keywords/, 'height auto↔0 transition needs interpolate-size');
+    assert.match(body, /transition:[\s\S]*?height var\(--duration-large\)/, 'height must transition on a duration token');
+    const emptyBody = ruleBody(css, '.maka-chat-status-cluster:empty');
+    assert.match(emptyBody, /height:\s*0/);
+    assert.match(emptyBody, /opacity:\s*0/);
+  });
+
+  it('reserves the footer placeholder for every live turn, not only text answers', async () => {
+    // Three-way review (ChatGPT P2): a settled turn ALWAYS mounts a footer
+    // (deriveTurnFooterActions yields regenerate/branch from TurnStatus alone;
+    // materialize emits a timeline item for a step's thinking even with empty
+    // text), so a thinking-only turn settles WITH a footer. The live footer
+    // placeholder must live inside the `streamingText || thinkingText` section
+    // and render unconditionally there — never re-narrowed to streamingText —
+    // so it reserves the footer box for every live turn.
+    //
+    // Groundwork only: this locks the reserved box. It makes the swap
+    // height-neutral where the live section is held to settle (text turns, via
+    // the draining handshake). The textless / thinking-only completion path is
+    // still non-atomic (clears live before the committed footer mounts); that
+    // is tracked in the single-render-path convergence (#642), not asserted
+    // here.
+    const src = await readRepo('packages/ui/src/chat-view.tsx');
+    assert.match(
+      src,
+      /Unconditional \(not gated on streamingText\)[\s\S]*?\*\/\}\s*<div aria-hidden="true" className="mt-0\.5 h-8" \/>/,
+      'the footer placeholder must render unconditionally inside the live section (covers thinking-only turns)',
+    );
+    assert.doesNotMatch(
+      src,
+      /\{props\.streamingText && <div aria-hidden="true" className="mt-0\.5 h-8" \/>\}/,
+      'the placeholder must not be re-gated on streamingText alone — that misses thinking-only settle',
+    );
+  });
+
   it('uses an in-flow wrapping row instead of absolute positioning', async () => {
     const css = await readRendererContractCss();
     const body = ruleBody(css, '.maka-chat-status-cluster');
diff --git a/apps/desktop/src/main/__tests__/design-system-governance-406-contract.test.ts b/apps/desktop/src/main/__tests__/design-system-governance-406-contract.test.ts
index 1bdc93a560..151be0620d 100644
--- a/apps/desktop/src/main/__tests__/design-system-governance-406-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/design-system-governance-406-contract.test.ts
@@ -111,10 +111,20 @@ describe('issue #406 design-system governance contract', () => {
       'maka-toast-enter',
       'maka-toast-exit',
       'maka-processing-sweep',
-      'maka-cursor',
       'maka-list-row-streaming-pulse',
       'maka-pulse',
-      'maka-reasoning-panel-pulse',
+      // Streaming UI rework: the "深度思考" disclosure title + a working trow's
+      // active-tool summary sweep light across the label (functional "still
+      // working" signal), driven by the TextShimmer primitive. The retired ▎
+      // caret's `maka-cursor` is replaced by `maka-stream-fade-in`, the
+      // per-word entrance that signals freshly streamed text.
+      'maka-text-shimmer',
+      'maka-stream-fade-in',
+      // Handoff polish: the turn footer toolbar fades in when a live turn
+      // settles (opacity only, into an equal-height placeholder slot) —
+      // functional "the answer is final, actions are now available" signal,
+      // never applied on history-hydration mounts.
+      'maka-footer-fade-in',
       'maka-shimmer',
       'maka-status-spin',
       'maka-tool-pulse',
diff --git a/apps/desktop/src/main/__tests__/markdown-prose-contract.test.ts b/apps/desktop/src/main/__tests__/markdown-prose-contract.test.ts
index 1ceda88e68..9c05edd9b3 100644
--- a/apps/desktop/src/main/__tests__/markdown-prose-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/markdown-prose-contract.test.ts
@@ -198,12 +198,13 @@ describe('PROSE-POLISH-13PX-0 contract (#546 Phase B)', () => {
       && !/\.maka-prose\s*>\s*p:nth-last-child/.test(css),
       'structural :nth-last-child prose hacks must not return — they assume a trailing non-markdown child that no longer exists',
     );
-    // The streaming caret still needs the trailing paragraph inlined, but
-    // scoped to the streaming bubble only.
-    assert.match(
-      css,
-      /\.maka-bubble-streaming\s*>\s*p:last-child\s*\{[^}]*display:\s*inline/,
-      'the caret-inline rule must be scoped to .maka-bubble-streaming so committed messages and .maka-prose reusers (tool results, #546 PR6) keep block paragraphs',
+    // The streaming ▎ caret (and its trailing-<p> inline hack) was retired by
+    // the streaming UI rework — the "still writing" signal is the per-word
+    // fade-in — so the streaming bubble must NOT re-introduce a
+    // `p:last-child { display: inline }` rule that would collapse block spacing.
+    assert.ok(
+      !/\.maka-bubble-streaming\s*>\s*p:last-child\s*\{[^}]*display:\s*inline/.test(css),
+      'the retired caret-inline hack must not return — the trailing paragraph keeps normal block layout',
     );
     // Negative side of the same contract: an unscoped variant on the
     // committed-message classes would inline the final paragraph of every
diff --git a/apps/desktop/src/main/__tests__/materialize-turns.test.ts b/apps/desktop/src/main/__tests__/materialize-turns.test.ts
index 527f1aaca9..9fa417c2c2 100644
--- a/apps/desktop/src/main/__tests__/materialize-turns.test.ts
+++ b/apps/desktop/src/main/__tests__/materialize-turns.test.ts
@@ -347,6 +347,122 @@ describe('materializeTurns', () => {
   });
 });
 
+function toolCallStep(turnId: string, ts: number, id: string, stepId: string, toolName = 'Read'): StoredMessage {
+  return { type: 'tool_call', id, turnId, ts, toolName, args: {}, stepId };
+}
+
+function assistantStep(
+  turnId: string,
+  ts: number,
+  id: string,
+  text: string,
+  thinking?: string,
+): StoredMessage {
+  return {
+    type: 'assistant',
+    id,
+    turnId,
+    ts,
+    text,
+    modelId: 'm',
+    ...(thinking !== undefined ? { thinking: { text: thinking } } : {}),
+  } as StoredMessage;
+}
+
+describe('materializeTurns timeline', () => {
+  it('interleaves each step: thinking -> text -> that step’s tools', () => {
+    const turns = materializeTurns([
+      userMsg('t1', 100, 'q'),
+      toolCallStep('t1', 101, 'c1', 'a1'),
+      toolResultMsg('t1', 102, 'c1'),
+      assistantStep('t1', 103, 'a1', 'step one', 'think one'),
+      toolCallStep('t1', 104, 'c2', 'a2'),
+      toolResultMsg('t1', 105, 'c2'),
+      assistantStep('t1', 106, 'a2', 'step two', 'think two'),
+    ]);
+    const timeline = turns[0]!.timeline;
+    assert.deepEqual(timeline.map((i) => i.kind), ['thinking', 'text', 'tools', 'thinking', 'text', 'tools']);
+    assert.equal((timeline[0] as { text: string }).text, 'think one');
+    assert.equal((timeline[1] as { text: string }).text, 'step one');
+    assert.equal((timeline[2] as { items: { toolUseId: string }[] }).items[0]?.toolUseId, 'c1');
+    assert.equal((timeline[5] as { items: { toolUseId: string }[] }).items[0]?.toolUseId, 'c2');
+    // Aggregate fields still reflect the concatenated whole for legacy consumers.
+    assert.equal(turns[0]?.assistant?.text, 'step one\n\nstep two');
+    assert.equal(turns[0]?.assistantThinking, 'think one\n\nthink two');
+  });
+
+  it('renders a pure-tool step’s orphan tools before the next step’s answer', () => {
+    // The most common tool turn: step a1 only calls tools (no assistant row
+    // is persisted for it), step a2 delivers the summary. The a1 tools carry
+    // a stepId no assistant row matches — they must still render before the
+    // answer, not park past it as answer-then-tools.
+    const turns = materializeTurns([
+      userMsg('t1', 100, 'q'),
+      toolCallStep('t1', 101, 'c1', 'a1'),
+      toolResultMsg('t1', 102, 'c1'),
+      assistantStep('t1', 103, 'a2', 'summary', 'think'),
+    ]);
+    const timeline = turns[0]!.timeline;
+    assert.deepEqual(timeline.map((i) => i.kind), ['tools', 'thinking', 'text']);
+    assert.equal((timeline[0] as { items: { toolUseId: string }[] }).items[0]?.toolUseId, 'c1');
+    assert.equal((timeline[2] as { text: string }).text, 'summary');
+  });
+
+  it('legacy call with no stepId sits before the summary text', () => {
+    const turns = materializeTurns([
+      userMsg('t1', 100, 'q'),
+      toolCallMsg('t1', 101, 'c1', 'Read'),
+      toolResultMsg('t1', 102, 'c1'),
+      assistantMsg('t1', 103, 'summary'),
+    ]);
+    const timeline = turns[0]!.timeline;
+    assert.deepEqual(timeline.map((i) => i.kind), ['tools', 'text']);
+    assert.equal((timeline[1] as { text: string }).text, 'summary');
+  });
+
+  it('flushes leftover tools as a trailing group when the turn has no assistant row (abort)', () => {
+    const turns = materializeTurns([
+      userMsg('t1', 100, 'q'),
+      toolCallStep('t1', 101, 'c1', 'a1'),
+    ]);
+    const timeline = turns[0]!.timeline;
+    assert.deepEqual(timeline.map((i) => i.kind), ['tools']);
+    assert.equal((timeline[0] as { items: { status: string }[] }).items[0]?.status, 'interrupted');
+  });
+
+  it('appends live-only in-flight tools to the timeline tail', () => {
+    const turns = materializeTurns(
+      [userMsg('t1', 100, 'q'), assistantStep('t1', 103, 'a1', 'hi')],
+      [{ toolUseId: 'live-1', toolName: 'Bash', status: 'running', args: {} }],
+    );
+    const timeline = turns[0]!.timeline;
+    assert.deepEqual(timeline.map((i) => i.kind), ['text', 'tools']);
+    assert.equal((timeline[1] as { items: { toolUseId: string }[] }).items[0]?.toolUseId, 'live-1');
+  });
+
+  it('merges adjacent thinking blocks and adjacent tool groups', () => {
+    const thinkingOnly = materializeTurns([
+      userMsg('t1', 100, 'q'),
+      assistantStep('t1', 101, 'a1', '', 'first'),
+      assistantStep('t1', 102, 'a2', '', 'second'),
+    ]);
+    const tl1 = thinkingOnly[0]!.timeline;
+    assert.deepEqual(tl1.map((i) => i.kind), ['thinking']);
+    assert.equal((tl1[0] as { text: string }).text, 'first\n\nsecond');
+
+    const toolsOnly = materializeTurns([
+      userMsg('t1', 100, 'q'),
+      toolCallStep('t1', 101, 'c1', 'a1'),
+      assistantStep('t1', 102, 'a1', ''),
+      toolCallStep('t1', 103, 'c2', 'a2'),
+      assistantStep('t1', 104, 'a2', ''),
+    ]);
+    const tl2 = toolsOnly[0]!.timeline;
+    assert.deepEqual(tl2.map((i) => i.kind), ['tools']);
+    assert.equal((tl2[0] as { items: unknown[] }).items.length, 2);
+  });
+});
+
 describe('deriveTurnLineageMap', () => {
   it('derives reverse links without mutating old turns', () => {
     const map = deriveTurnLineageMap([
diff --git a/apps/desktop/src/main/__tests__/smooth-stream.test.ts b/apps/desktop/src/main/__tests__/smooth-stream.test.ts
index 4ae2d1e7fd..76fcff84b9 100644
--- a/apps/desktop/src/main/__tests__/smooth-stream.test.ts
+++ b/apps/desktop/src/main/__tests__/smooth-stream.test.ts
@@ -132,7 +132,14 @@ describe('computeFrameAdvance', () => {
     );
   });
 
-  it('returns 0 when dt is non-positive', () => {
+  // Regression lock (streaming UI rework, blank-bubble freeze): rAF timestamps
+  // are vsync-aligned and lag the wall clock under IPC delta bursts, so dtMs
+  // clamps to 0 for every tick in the recovery window. Returning 0 left
+  // displayedCount unchanged → the RAF effect never re-armed → the typewriter
+  // died with a full backlog and the answer snapped in at stream end. With
+  // backlog present, a non-positive dt must still advance 1 to keep the
+  // single-owner RAF chain alive.
+  it('advances 1 (not 0) when dt is non-positive but backlog remains — keeps the RAF chain alive', () => {
     assert.equal(
       computeFrameAdvance({
         rawGraphemeCount: 100,
@@ -142,7 +149,7 @@ describe('computeFrameAdvance', () => {
         minCps: 30,
         maxCps: 400,
       }),
-      0,
+      1,
     );
     assert.equal(
       computeFrameAdvance({
@@ -153,6 +160,18 @@ describe('computeFrameAdvance', () => {
         minCps: 30,
         maxCps: 400,
       }),
+      1,
+    );
+    // …but never invents work: zero backlog still returns 0.
+    assert.equal(
+      computeFrameAdvance({
+        rawGraphemeCount: 10,
+        displayedGraphemeCount: 10,
+        emaCps: 60,
+        dtMs: 0,
+        minCps: 30,
+        maxCps: 400,
+      }),
       0,
     );
   });
diff --git a/apps/desktop/src/main/__tests__/stream-fade.test.ts b/apps/desktop/src/main/__tests__/stream-fade.test.ts
new file mode 100644
index 0000000000..bc85d39caf
--- /dev/null
+++ b/apps/desktop/src/main/__tests__/stream-fade.test.ts
@@ -0,0 +1,218 @@
+/**
+ * Tests for the pure stream-fade primitives (streaming UI rework): the
+ * append-record ring (window slide, out-of-order snapshot ages, cap), the
+ * word/char tokenizer, and the rehype plugin's grapheme-offset bookkeeping
+ * (multi-block prose wrapped past the boundary; code fences advanced but never
+ * wrapped). The subject lives in `@maka/ui`; the test rides in the desktop
+ * workspace where node:test is wired, like trow-summary.test.ts.
+ */
+
+import { strict as assert } from 'node:assert';
+import { describe, it } from 'node:test';
+import {
+  createFadeRing,
+  updateFadeRing,
+  fadeBoundary,
+  fadeAgeAt,
+  tokenizeFade,
+  streamFadeRehypePlugin,
+  FADE_MS,
+  type HastNode,
+  type StreamFade,
+} from '@maka/ui';
+
+describe('updateFadeRing / fadeBoundary', () => {
+  it('first observation seeds len with no batch (mount text is not new)', () => {
+    const ring = createFadeRing();
+    updateFadeRing(ring, 10, 1000);
+    assert.equal(ring.batches.length, 0);
+    // Nothing pending → boundary is the whole seeded length (no fade).
+    assert.equal(fadeBoundary(ring), 10);
+  });
+
+  it('records a batch on growth starting at the previous length', () => {
+    const ring = createFadeRing();
+    updateFadeRing(ring, 10, 1000);
+    updateFadeRing(ring, 14, 1050);
+    assert.deepEqual(ring.batches, [{ start: 10, at: 1050 }]);
+    // Boundary is the oldest live batch start — graphemes < 10 are stable.
+    assert.equal(fadeBoundary(ring), 10);
+  });
+
+  it('prunes batches older than the fade window (boundary advances)', () => {
+    const ring = createFadeRing();
+    updateFadeRing(ring, 10, 1000);
+    updateFadeRing(ring, 12, 1010); // batch A: start 10
+    updateFadeRing(ring, 16, 1200); // batch B: start 12
+    // Advance time so A is now older than FADE_MS but B is not.
+    updateFadeRing(ring, 16, 1010 + FADE_MS);
+    assert.deepEqual(ring.batches, [{ start: 12, at: 1200 }]);
+    assert.equal(fadeBoundary(ring), 12);
+  });
+
+  it('shrink (session switch / clear) resets the ring', () => {
+    const ring = createFadeRing();
+    updateFadeRing(ring, 10, 1000);
+    updateFadeRing(ring, 20, 1050);
+    updateFadeRing(ring, 3, 1060); // shorter buffer → reset
+    assert.deepEqual(ring.batches, []);
+    assert.equal(ring.len, 3);
+    assert.equal(fadeBoundary(ring), 3);
+  });
+
+  it('caps retained batches (oldest dropped, only advances the boundary)', () => {
+    const ring = createFadeRing();
+    updateFadeRing(ring, 0, 0);
+    // 5 growths, cap at 3, small fadeMs so nothing prunes by time (all same-ish t).
+    const bigFade = 10_000;
+    for (let i = 1; i <= 5; i += 1) {
+      updateFadeRing(ring, i, 1000 + i, bigFade, 3);
+    }
+    assert.equal(ring.batches.length, 3);
+    // Kept the newest 3 batches: starts 2, 3, 4.
+    assert.deepEqual(ring.batches.map((b) => b.start), [2, 3, 4]);
+    assert.equal(fadeBoundary(ring), 2);
+  });
+});
+
+describe('fadeAgeAt', () => {
+  it('returns age from the batch that first covered the offset, order-independent', () => {
+    const ring = createFadeRing();
+    updateFadeRing(ring, 0, 0);
+    updateFadeRing(ring, 5, 100); // batch: [0,5) at 100
+    updateFadeRing(ring, 9, 160); // batch: [5,9) at 160
+    const now = 200;
+    // Query a later offset first, then an earlier one — result must not depend
+    // on query order (snapshot ring is immutable during a render).
+    assert.equal(fadeAgeAt(ring, 7, now), now - 160);
+    assert.equal(fadeAgeAt(ring, 2, now), now - 100);
+    // Offset before any batch start falls through to `now` → age 0.
+    assert.equal(fadeAgeAt(ring, 0, now), now - 100);
+  });
+
+  it('never returns a negative age', () => {
+    const ring = createFadeRing();
+    updateFadeRing(ring, 0, 0);
+    updateFadeRing(ring, 3, 100);
+    // now < batch.at can happen with clock skew; clamp to 0.
+    assert.equal(fadeAgeAt(ring, 1, 50), 0);
+  });
+});
+
+describe('tokenizeFade', () => {
+  it('groups whitespace and Latin word runs, per-grapheme for CJK', () => {
+    const { tokens, length } = tokenizeFade('hi 你好', 0, 0);
+    assert.equal(length, 5); // h i _ 你 好
+    assert.deepEqual(
+      tokens.map((t) => t.text),
+      ['hi', ' ', '你', '好'],
+    );
+  });
+
+  it('only non-space tokens at/after the boundary fade', () => {
+    // boundary at grapheme 3 → "hi " is stable, "world" fades.
+    const { tokens } = tokenizeFade('hi world', 0, 3);
+    const faded = tokens.filter((t) => t.fade).map((t) => t.text);
+    assert.deepEqual(faded, ['world']);
+    // A whitespace token is never a fade token even past the boundary.
+    assert.ok(!tokens.some((t) => t.fade && /\s/.test(t.text)));
+  });
+
+  it('honors the startOffset when computing per-token offsets', () => {
+    const { tokens } = tokenizeFade('abc', 100, 101);
+    assert.equal(tokens[0]?.offset, 100);
+    // Single Latin run "abc" starts at 100 < 101 → does not fade.
+    assert.equal(tokens[0]?.fade, false);
+  });
+});
+
+// --- rehype plugin: offsets across blocks, code fences never wrapped ---------
+
+function text(value: string): HastNode {
+  return { type: 'text', value };
+}
+function el(tagName: string, children: HastNode[]): HastNode {
+  return { type: 'element', tagName, children };
+}
+
+/**
+ * `rawLength` defaults to 0 so the raw→visible shift clamps to zero — these
+ * fixtures have no hidden markdown syntax, raw and visible offsets coincide.
+ */
+function fadeFrom(boundaryOffset: number, rawLength = 0): StreamFade {
+  return { boundaryOffset, rawLength, ageAt: () => 0 };
+}
+
+/** Collect every text node's value in document order. */
+function flatText(node: HastNode): string {
+  if (node.type === 'text') return node.value ?? '';
+  return (node.children ?? []).map(flatText).join('');
+}
+
+/** Collect the text carried by `.maka-stream-fade` wrapper spans. */
+function fadedText(node: HastNode): string[] {
+  const out: string[] = [];
+  const walk = (n: HastNode): void => {
+    const cls = n.properties?.className;
+    if (n.type === 'element' && Array.isArray(cls) && cls.includes('maka-stream-fade')) {
+      out.push(flatText(n));
+    }
+    for (const c of n.children ?? []) walk(c);
+  };
+  walk(node);
+  return out;
+}
+
+describe('streamFadeRehypePlugin', () => {
+  it('wraps only post-boundary words and preserves the full text', () => {
+    const tree = el('root', [el('p', [text('hello world')])]);
+    // boundary at grapheme 6 → "world" fades, "hello " does not.
+    streamFadeRehypePlugin(fadeFrom(6))()(tree);
+    assert.equal(flatText(tree), 'hello world');
+    assert.deepEqual(fadedText(tree), ['world']);
+  });
+
+  it('tracks the grapheme cursor across multiple blocks', () => {
+    // Block 1 "hello" = 5 graphemes; block 2 "world" starts at offset 5.
+    const tree = el('root', [el('p', [text('hello')]), el('p', [text('world')])]);
+    streamFadeRehypePlugin(fadeFrom(5))()(tree);
+    // Only the second block is at/after the boundary.
+    assert.deepEqual(fadedText(tree), ['world']);
+  });
+
+  it('shifts the boundary past markdown-hidden syntax so the visible tail still fades', () => {
+    // Raw buffer: 'see [docs](https://x.dev) now' → 29 graphemes; rendering
+    // hides '[', ']', '(https://x.dev)' → visible 'see docs now' = 12.
+    const raw = 'see [docs](https://x.dev) now';
+    const tree = el('root', [el('p', [text('see '), el('a', [text('docs')]), text(' now')])]);
+    // The streaming tail is ' now' (raw offsets 25..28). Without the tail
+    // anchor, boundary 25 exceeds every visible offset and nothing fades.
+    const ages: number[] = [];
+    const fade: StreamFade = {
+      boundaryOffset: 25,
+      rawLength: raw.length,
+      ageAt: (offset) => { ages.push(offset); return 0; },
+    };
+    streamFadeRehypePlugin(fade)()(tree);
+    assert.equal(flatText(tree), 'see docs now');
+    assert.deepEqual(fadedText(tree), ['now']);
+    // Age lookups happen in raw coordinates: visible 9 + hidden 17 = 26.
+    assert.deepEqual(ages, [26]);
+  });
+
+  it('advances the cursor through code but never wraps inside a fence', () => {
+    // "ab" (2) + code "cd" (2) + "ef" starting at offset 4.
+    const tree = el('root', [
+      text('ab'),
+      el('pre', [el('code', [text('cd')])]),
+      text('ef'),
+    ]);
+    streamFadeRehypePlugin(fadeFrom(0))()(tree);
+    assert.equal(flatText(tree), 'abcdef');
+    // Everything is past the boundary, but the code text stays unwrapped.
+    const faded = fadedText(tree);
+    assert.ok(faded.includes('ab'));
+    assert.ok(faded.includes('ef'));
+    assert.ok(!faded.includes('cd'));
+  });
+});
diff --git a/apps/desktop/src/main/__tests__/streaming-handoff.test.ts b/apps/desktop/src/main/__tests__/streaming-handoff.test.ts
index d6b19d70dd..588347db92 100644
--- a/apps/desktop/src/main/__tests__/streaming-handoff.test.ts
+++ b/apps/desktop/src/main/__tests__/streaming-handoff.test.ts
@@ -108,7 +108,7 @@ describe('assistant streaming handoff', () => {
     );
   });
 
-  it('committed assistant history clears a matching draining slot on the active session', async () => {
+  it('committed assistant history clears a matching draining slot on the active session (delayed fallback only)', async () => {
     const { readRendererShellSource } = await import('./renderer-shell-source-helpers.js');
     const shell = await readRendererShellSource('app-shell.tsx');
 
@@ -117,10 +117,31 @@ describe('assistant streaming handoff', () => {
       /messages\.some\(\(message\) => message\.type === 'assistant' && message\.id === activeStreamingMessageId\)/,
       'active shell should detect when the committed assistant message has arrived',
     );
+    // Streaming-settle polish: the PRIMARY handoff signal is the bubble's
+    // onStreamingSettled (fires when catchingUp === false, i.e. the final
+    // text has been fully displayed). The committed-history path is a
+    // FALLBACK that must wait out a grace period past the smoother's 600ms
+    // completion drain budget — settling immediately used to cut the visible
+    // tail mid-typewriter and snap the last characters in with the swap.
     assert.match(
       shell,
-      /settleAssistantStreaming\(activeId, activeStreamingMessageId\)/,
-      'matching committed history should clear the draining streaming slot without requiring a session switch',
+      /const timer = window\.setTimeout\(\(\) => \{\s*void settleAssistantStreaming\(activeId, activeStreamingMessageId\);\s*\}, SETTLE_FALLBACK_GRACE_MS\)/,
+      'the committed-history settle must be a delayed fallback, never an immediate mid-drain cut',
+    );
+    assert.match(
+      shell,
+      /return \(\) => window\.clearTimeout\(timer\)/,
+      'the fallback timer must be cleaned up when the effect re-runs',
+    );
+    assert.match(
+      shell,
+      /const SETTLE_FALLBACK_GRACE_MS = 1000/,
+      'grace period must stay comfortably past the 600ms completion drain budget',
+    );
+    assert.match(
+      shell,
+      /onStreamingSettled=\{activeId \? \(\) => settleAssistantStreaming\(activeId, activeStreamingMessageId\) : undefined\}/,
+      'onStreamingSettled stays wired as the primary settle signal',
     );
   });
 
diff --git a/apps/desktop/src/main/__tests__/trow-summary.test.ts b/apps/desktop/src/main/__tests__/trow-summary.test.ts
new file mode 100644
index 0000000000..443fcb009c
--- /dev/null
+++ b/apps/desktop/src/main/__tests__/trow-summary.test.ts
@@ -0,0 +1,105 @@
+/**
+ * Tests for the pure trow-summary helpers (streaming UI rework). The subject
+ * lives in `@maka/ui`; the test rides in the desktop workspace where node:test
+ * is wired, like materialize-turns.test.ts.
+ */
+
+import { strict as assert } from 'node:assert';
+import { describe, it } from 'node:test';
+import {
+  activeTrowTool,
+  isTrowRunning,
+  summarizeTrowTools,
+  trowActivityKind,
+  trowNeedsAttention,
+  type ToolActivityItem,
+} from '@maka/ui';
+
+function tool(
+  toolName: string,
+  status: ToolActivityItem['status'] = 'completed',
+  toolUseId = toolName + Math.random(),
+): ToolActivityItem {
+  return { toolUseId, toolName, status, args: {} };
+}
+
+describe('trowActivityKind', () => {
+  it('buckets canonical maka tool names case-insensitively', () => {
+    assert.equal(trowActivityKind('Read'), 'read');
+    assert.equal(trowActivityKind('Glob'), 'search');
+    assert.equal(trowActivityKind('Grep'), 'search');
+    assert.equal(trowActivityKind('WebSearch'), 'websearch');
+    assert.equal(trowActivityKind('WebFetch'), 'webfetch');
+    assert.equal(trowActivityKind('Write'), 'edit');
+    assert.equal(trowActivityKind('Edit'), 'edit');
+    assert.equal(trowActivityKind('Bash'), 'command');
+    assert.equal(trowActivityKind('ExploreAgent'), 'explore');
+    assert.equal(trowActivityKind('browser_click'), 'browser');
+    assert.equal(trowActivityKind('OfficeDocument'), 'tool');
+  });
+});
+
+describe('summarizeTrowTools', () => {
+  it('buckets by type in first-seen order joined with 「，」', () => {
+    const summary = summarizeTrowTools([
+      tool('Read'),
+      tool('Read'),
+      tool('Read'),
+      tool('Grep'),
+      tool('Grep'),
+    ]);
+    assert.equal(summary, '读取 3 个文件，搜索 2 次');
+  });
+
+  it('preserves first-seen order even when kinds interleave', () => {
+    const summary = summarizeTrowTools([tool('Grep'), tool('Read'), tool('Grep')]);
+    assert.equal(summary, '搜索 2 次，读取 1 个文件');
+  });
+
+  it('appends 「N 个失败」 while still counting failed tools in their type bucket', () => {
+    const summary = summarizeTrowTools([
+      tool('Read'),
+      tool('Read', 'errored'),
+      tool('Bash', 'errored'),
+    ]);
+    assert.equal(summary, '读取 2 个文件，运行 1 条命令，2 个失败');
+  });
+
+  it('falls back to the generic bucket for unknown tools', () => {
+    assert.equal(summarizeTrowTools([tool('OfficeDocument'), tool('RiveWorkflow')]), '调用 2 个工具');
+  });
+});
+
+describe('activeTrowTool + isTrowRunning', () => {
+  it('reports running while any tool is in flight and picks the last in-flight tool', () => {
+    const items = [tool('Read', 'completed'), tool('Bash', 'running'), tool('Grep', 'completed')];
+    assert.equal(isTrowRunning(items), true);
+    assert.equal(activeTrowTool(items)?.toolName, 'Bash');
+  });
+
+  it('reports settled and falls back to the last tool when nothing is in flight', () => {
+    const items = [tool('Read'), tool('Grep')];
+    assert.equal(isTrowRunning(items), false);
+    assert.equal(activeTrowTool(items)?.toolName, 'Grep');
+  });
+
+  it('prefers waiting_permission as active', () => {
+    const items = [tool('Read', 'completed'), tool('Write', 'waiting_permission')];
+    assert.equal(activeTrowTool(items)?.status, 'waiting_permission');
+  });
+});
+
+describe('trowNeedsAttention', () => {
+  it('forces the group open for a permission prompt or an errored tool', () => {
+    assert.equal(trowNeedsAttention([tool('Read'), tool('Bash', 'waiting_permission')]), true);
+    // An errored tool must keep the group expanded so the error banner and
+    // output stay diagnosable (parity with the old boxed cards).
+    assert.equal(trowNeedsAttention([tool('Read'), tool('Bash', 'errored')]), true);
+  });
+
+  it('stays collapsed for settled or merely running groups', () => {
+    assert.equal(trowNeedsAttention([tool('Read'), tool('Grep')]), false);
+    assert.equal(trowNeedsAttention([tool('Read', 'running'), tool('Grep', 'pending')]), false);
+    assert.equal(trowNeedsAttention([tool('Read', 'interrupted')]), false);
+  });
+});
diff --git a/apps/desktop/src/main/visual-smoke-fixture.ts b/apps/desktop/src/main/visual-smoke-fixture.ts
index 0c81bc72df..ba8500bc34 100644
--- a/apps/desktop/src/main/visual-smoke-fixture.ts
+++ b/apps/desktop/src/main/visual-smoke-fixture.ts
@@ -969,6 +969,92 @@ function turnMessages(now: number): StoredMessage[] {
       cacheRead: 180,
       costUsd: 0.0042,
     },
+    // Streaming UI rework: a second, MULTI-STEP turn. Each step persists its own
+    // assistant row (thinking + text) plus tool_calls tagged with that row's id
+    // as `stepId`, so the turn timeline reconstructs the real per-step order —
+    // 深度思考 → answer text → tool trow — instead of one trailing tool group.
+    // Locks the capture for the new timeline (contrast the legacy stepless turn
+    // above, which renders tools-before-text).
+    ...multiStepTurnMessages(now),
+  ];
+}
+
+function multiStepTurnMessages(now: number): StoredMessage[] {
+  const turnId = 'turn-fixture-2';
+  const step1 = 'msg-assistant-2a';
+  const step2 = 'msg-assistant-2b';
+  return [
+    { type: 'user', id: 'msg-user-2', turnId, ts: now - 6 * 60_000, text: '确认 stream-fade 的环逻辑没有边界问题，然后跑一下单测。' },
+    {
+      type: 'tool_call',
+      id: 'tool-read-fade',
+      turnId,
+      ts: now - 6 * 60_000 + 4_000,
+      toolName: 'Read',
+      displayName: '读取 stream-fade.ts',
+      intent: '读取淡入环实现，确认窗口滑动与上限',
+      stepId: step1,
+      args: { file_path: 'packages/ui/src/stream-fade.ts' },
+    },
+    {
+      type: 'tool_result',
+      id: 'tool-read-fade-result',
+      turnId,
+      ts: now - 6 * 60_000 + 4_600,
+      toolUseId: 'tool-read-fade',
+      isError: false,
+      durationMs: 560,
+      content: { kind: 'text', text: 'export function updateFadeRing(...) { /* prune + cap */ }' },
+    },
+    {
+      type: 'assistant',
+      id: step1,
+      turnId,
+      ts: now - 5 * 60_000,
+      text: '环逻辑没问题：增长记录批次、超窗剪枝、按上限截断，收缩时整体重置。接下来跑单测确认。',
+      thinking: { text: 'boundary 取最老存活批次的 start，age 用 now 减去覆盖该 offset 的批次时间，窗口滑动和上限都覆盖了，值得跑一遍测试坐实。' },
+      modelId: 'glm-5.1',
+    },
+    {
+      type: 'tool_call',
+      id: 'tool-run-fade-tests',
+      turnId,
+      ts: now - 5 * 60_000 + 3_000,
+      toolName: 'Bash',
+      displayName: '运行 stream-fade 单测',
+      intent: '执行 node --test 跑淡入环与 tokenizer 单测',
+      stepId: step2,
+      args: { cmd: 'node --test dist/main/__tests__/stream-fade.test.js', cwd: '/workspace/maka' },
+    },
+    {
+      type: 'tool_result',
+      id: 'tool-run-fade-tests-result',
+      turnId,
+      ts: now - 5 * 60_000 + 5_200,
+      toolUseId: 'tool-run-fade-tests',
+      isError: false,
+      durationMs: 1_930,
+      content: {
+        kind: 'terminal',
+        cwd: '/workspace/maka',
+        cmd: 'node --test dist/main/__tests__/stream-fade.test.js',
+        status: 'completed',
+        exitCode: 0,
+        stdout: 'tests 13\npass 13\nfail 0\n',
+        stderr: '',
+        stdoutTruncated: false,
+        stderrTruncated: false,
+      },
+    },
+    {
+      type: 'assistant',
+      id: step2,
+      turnId,
+      ts: now - 4 * 60_000,
+      text: '13 个单测全绿，窗口滑动、乱序快照取龄和上限都被覆盖。边界没有问题。',
+      thinking: { text: '测试覆盖窗口滑动、乱序 age 查询与上限三类，全过说明剪枝和 cap 的顺序对，可以收尾。' },
+      modelId: 'glm-5.1',
+    },
   ];
 }
 
diff --git a/apps/desktop/src/renderer/app-shell-session-events.ts b/apps/desktop/src/renderer/app-shell-session-events.ts
index 7975a0cc3d..6217d61f0d 100644
--- a/apps/desktop/src/renderer/app-shell-session-events.ts
+++ b/apps/desktop/src/renderer/app-shell-session-events.ts
@@ -394,6 +394,11 @@ export function createAppShellSessionEventHandlers(options: {
           intent: event.intent,
           status: 'pending',
           args: event.args,
+          // Carry the step id (streaming UI rework) so the turn timeline can
+          // order this in-flight tool after the matching step's thinking/text
+          // instead of lumping every live tool into a single trailing group.
+          // Optional: legacy providers / degraded history emit no stepId.
+          ...(event.stepId !== undefined ? { stepId: event.stepId } : {}),
         });
         break;
       case 'tool_output_delta':
diff --git a/apps/desktop/src/renderer/app-shell.tsx b/apps/desktop/src/renderer/app-shell.tsx
index 8c3a6a09f9..deedef404f 100644
--- a/apps/desktop/src/renderer/app-shell.tsx
+++ b/apps/desktop/src/renderer/app-shell.tsx
@@ -146,6 +146,15 @@ function fileToPending(file: File): PendingAttachment {
   };
 }
 
+/**
+ * Grace period before the committed-history fallback force-settles a draining
+ * assistant stream slot. Comfortably past the smoother's completion drain
+ * budget (600ms, smooth-stream.ts DEFAULT_COMPLETE_FLUSH_BUDGET_MS) so the
+ * primary `onStreamingSettled` signal always wins in the healthy path and the
+ * visible tail is never cut mid-typewriter.
+ */
+const SETTLE_FALLBACK_GRACE_MS = 1000;
+
 export function AppShell({
   initialOnboardingSnapshot = null,
 }: {
@@ -987,11 +996,26 @@ export function AppShell({
     },
   });
 
+  // Streaming-settle handoff, FALLBACK path only. The primary settle signal
+  // is the bubble's own `onStreamingSettled` (ChatView below): it fires once
+  // the smoother has DISPLAYED the final text (catchingUp === false), so the
+  // user watches the tail type out before the live section swaps for the
+  // committed turn. This effect used to settle immediately when the committed
+  // assistant message appeared in `messages` — which lands mid-drain and cut
+  // the visible tail, snapping the last characters in with the swap. It now
+  // waits out a grace period comfortably past the smoother's completion drain
+  // budget (600ms): in the normal path `onStreamingSettled` clears the slot
+  // first and the delayed settle no-ops on its phase guard. The fallback stays
+  // because a stuck slot would otherwise hide the committed answer forever
+  // (`streamingMessageId` suppresses it while draining).
   useEffect(() => {
     if (!activeId || !activeStreamingComplete || !activeStreamingMessageId) return;
     const committedAssistantArrived = messages.some((message) => message.type === 'assistant' && message.id === activeStreamingMessageId);
     if (!committedAssistantArrived) return;
-    void settleAssistantStreaming(activeId, activeStreamingMessageId);
+    const timer = window.setTimeout(() => {
+      void settleAssistantStreaming(activeId, activeStreamingMessageId);
+    }, SETTLE_FALLBACK_GRACE_MS);
+    return () => window.clearTimeout(timer);
   }, [activeId, activeStreamingComplete, activeStreamingMessageId, messages, settleAssistantStreaming]);
 
   const hasModalOpen = Boolean(activePermission) || helpOpen || paletteOpen || searchModalOpen;
diff --git a/apps/desktop/src/renderer/maka-tokens.css b/apps/desktop/src/renderer/maka-tokens.css
index ea53e3e7ac..7946fac18f 100644
--- a/apps/desktop/src/renderer/maka-tokens.css
+++ b/apps/desktop/src/renderer/maka-tokens.css
@@ -1217,86 +1217,11 @@
     content-visibility: visible;
   }
 
-  .maka-turn-tools {
-    padding: 0 var(--space-2) 0 0;
-  }
-
-  /* Optional reasoning block — collapsed by default, expandable to inspect
-   * the model's chain of thought without cluttering the answer.
-   *
-   * PR-REASONING-PANEL-SMOOTH-EXPAND-0 (WAWQAQ msg `145f15d5`,
-   * skills round task #116): native `<details>` had no toggle
-   * feedback — clicking flicked content in/out without any handle.
-   * Polishes the summary into a real affordance:
-   *   - Replace browser-default disclosure triangle (varies per UA)
-   *     with a custom chevron that rotates 90deg on `[open]` using
-   *     a spring-ish cubic-bezier from design-taste-frontend §5
-   *     (var(--duration-emphasized) `cubic-bezier(0.16, 1, 0.3, 1)`).
-   * `cursor: pointer` deliberately NOT applied to the summary —
-   * macOS reserves the hand for links; details summaries use the
-   * default arrow. Enforced by `cursor-convention-contract.test.ts`.
-   * Native height animation requires `interpolate-size` + per-
-   * element JS state and isn't a single-element CSS fix; deferred
-   * until we route reasoning through Base UI's Accordion. */
-  .maka-turn-thinking {
-    margin: 0 0 var(--space-2);
-    padding: var(--space-2) var(--space-2-5);
-    border: var(--border-width-hairline) dashed oklch(from var(--focus-ring) l c h / 0.25);
-    border-radius: var(--radius-surface);
-    background: oklch(from var(--focus-ring) l c h / 0.03);
-    font-size: var(--font-size-ui);
-    color: var(--foreground-secondary);
-  }
-
-  .maka-turn-thinking [data-slot="collapsible-trigger"] {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    font-weight: var(--font-weight-semibold);
-    color: var(--focus-ring);
-    letter-spacing: var(--tracking-wide);
-    /* `cursor: pointer` intentionally omitted — native macOS reserves
-       the hand cursor for links; the Collapsible trigger is a button-like
-       control and uses the default arrow. Enforced by
-       `cursor-convention-contract.test.ts`. */
-  }
-
-  /* Replace the default disclosure triangle with a custom chevron
-     that rotates smoothly on toggle. */
-  .maka-turn-thinking [data-slot="collapsible-trigger"]::before {
-    content: '';
-    flex-shrink: 0;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 0 4px 5px;
-    border-color: transparent transparent transparent currentColor;
-    transition: transform var(--duration-emphasized) var(--ease-out-strong);
-  }
-  .maka-turn-thinking [data-slot="collapsible-trigger"][data-panel-open]::before {
-    transform: rotate(90deg);
-  }
-
-  .maka-turn-thinking-note {
-    font-size: var(--font-size-caption);
-    font-weight: var(--font-weight-medium);
-    letter-spacing: var(--tracking-wider);
-    color: var(--muted-foreground);
-    text-transform: uppercase;
-  }
-
-  .maka-turn-thinking-body {
-    margin-top: var(--space-1-5);
-    line-height: var(--leading-normal);
-    font-style: italic;
-    opacity: var(--opacity-pending);
-  }
-
-  .maka-turn-thinking-actions {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: var(--space-1-5);
-  }
+  /* The streaming UI rework retired `.maka-turn-tools` (the tools-section
+     wrapper) and the `.maka-turn-thinking` reasoning `<details>` chrome. Tools
+     now render inline via the flat `ToolTrow` and reasoning via the
+     `DeepThinking` disclosure, both Tailwind-literal + the `TextShimmer`
+     primitive — see packages/ui/src/tool-activity.tsx and chat-view.tsx. */
 
   /* The streaming bubble (out-of-band, before the in-progress turn is
    * fully persisted) sits at the bottom of the chat surface; give it the
@@ -1306,6 +1231,15 @@
        in-progress assistant streaming-row visually separated from any
        previous turn while it lands. */
     box-sizing: border-box;
+    /* Streaming-settle position parity: the committed answer sits one
+       within-turn gap (12px, `.maka-turn { gap: var(--space-3) }`) below the
+       user row, but this out-of-band section used to butt flush against the
+       committed turn above it (sections have no parent gap). The 12px
+       mismatch made the answer text jump DOWN by exactly that much the frame
+       the stream settled into the committed turn. Matching the gap here means
+       the streaming text renders at the same y it will occupy once committed,
+       so the swap is position-neutral. */
+    margin-top: var(--space-3);
   }
 
   /* ---- Tool activity ---------------------------------------------- */
@@ -1499,6 +1433,10 @@
 
   .maka-code {
     font-family: var(--font-mono);
+    /* Geist Mono ships programming ligatures on by default, which collapse a
+       run like `=== 目录 ===` into a strikethrough-looking rule. Code and
+       command surfaces read literally, so ligatures stay off. */
+    font-variant-ligatures: none;
     font-size: var(--font-size-ui);
     background: var(--foreground-3);
     border: var(--border-width-hairline) solid var(--border);
@@ -1519,6 +1457,54 @@
   0%   { background-position: -200% 0; }
   100% { background-position:  200% 0; }
 }
+
+/* Governance-level keyframe for the `TextShimmer` primitive (streaming UI
+   rework). A named `@keyframes` is a global rule, not an element property, so
+   it can't be a Tailwind leaf-literal — it lives here (the shared motion home)
+   like `maka-pulse` / `maka-tool-pulse`, with the shimmer's other declarations
+   as literal utilities in the primitive. Sweeps a clipped light band left→right
+   across the glyph shape by translating `background-position`; the two-layer
+   primitive keeps an opaque base underneath so the text stays readable. Frozen
+   by the global reduced-motion / visual-smoke rules in base.css and the
+   primitive's own `motion-reduce:` guards. */
+@keyframes maka-text-shimmer {
+  from { background-position: 150% 0; }
+  to   { background-position: -150% 0; }
+}
+
+/* Governance-level keyframe for the streaming per-word fade-in (streaming UI
+   rework) — the replacement for the retired ▎ blink caret. markdown-body's
+   rehype pass wraps each freshly streamed word/char (after the stable
+   boundary) in `.maka-stream-fade` with a negative `animation-delay` (= -age)
+   so the entrance resumes mid-flight across React re-renders instead of
+   re-flashing. Only opacity animates (no layout). The wrapping is skipped
+   entirely under reduced-motion / visual-smoke (the smoother's snap path), so
+   this never freezes text at opacity 0 in a deterministic capture. */
+@keyframes maka-stream-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+.maka-stream-fade {
+  /* --duration-large (280ms) is the fade window; FADE_MS in stream-fade.ts is
+     pinned to the same 280 so the negative animation-delay (= -age) lands at
+     the right point in the curve. Motion durations must come from a
+     var(--duration-*) token (motion-token-converge contract), so the window is
+     retuned there, not with a bare ms here. */
+  animation: maka-stream-fade-in var(--duration-large) var(--ease-out-strong) both;
+}
+
+/* Turn footer toolbar settle entrance (streaming UI rework, handoff polish).
+   `from`-only on purpose: the footer's steady state is its own cascaded
+   opacity (0.72 quiet, 1 on hover), so the animation must fade from 0 up to
+   the element's natural value and then get out of the way — an explicit
+   `to { opacity: 1 }` with fill `both` would pin the toolbar at full opacity
+   forever and defeat the quiet/hover treatment. Applied by chat-view's
+   TurnFooterActions only when the footer appears on an already-mounted turn
+   (a live settle); history hydration mounts don't animate. Reduced-motion /
+   visual-smoke globals in base.css collapse it. */
+@keyframes maka-footer-fade-in {
+  from { opacity: 0; }
+}
 .maka-shimmer {
   background-image: linear-gradient(
     90deg,
diff --git a/apps/desktop/src/renderer/styles.css b/apps/desktop/src/renderer/styles.css
index 1fbe13cb9e..c7ea985735 100644
--- a/apps/desktop/src/renderer/styles.css
+++ b/apps/desktop/src/renderer/styles.css
@@ -34,7 +34,6 @@
 @import "./styles/composer.css";
 @import "./styles/chat-detail.css";
 @import "./styles/settings.css";
-@import "./styles/reasoning-panel.css";
 @import "./styles/markdown-link.css" layer(components);
 @import "./styles/permission-dialog.css";
 @import "./styles/daily-review.css";
diff --git a/apps/desktop/src/renderer/styles/chat-header.css b/apps/desktop/src/renderer/styles/chat-header.css
index ac26ea9298..445b9cda40 100644
--- a/apps/desktop/src/renderer/styles/chat-header.css
+++ b/apps/desktop/src/renderer/styles/chat-header.css
@@ -46,6 +46,27 @@
   justify-content: flex-end;
   gap: var(--space-1);
   -webkit-app-region: no-drag;
+  /* Streaming-settle polish: the cluster is ALWAYS mounted (chat-view renders
+     the div unconditionally) and collapses via `:empty` below, so the badge
+     row glides in/out instead of mount/unmount snapping the conversation
+     column by its full height in one frame. `interpolate-size` lets the
+     `height: auto` ↔ `0` pair actually transition (Chromium 129+; Electron's
+     runtime is far past that). The reduced-motion / visual-smoke globals in
+     base.css collapse `transition-duration`, so deterministic captures and
+     accessibility users still get the instant swap. */
+  interpolate-size: allow-keywords;
+  height: auto;
+  overflow: hidden;
+  transition:
+    height var(--duration-large) var(--ease-out-strong),
+    margin-top var(--duration-large) var(--ease-out-strong),
+    opacity var(--duration-large) var(--ease-out-strong);
+}
+
+.maka-chat-status-cluster:empty {
+  height: 0;
+  margin-top: 0;
+  opacity: 0;
 }
 
 .maka-chat-status-cluster .maka-chat-header-alert,
diff --git a/apps/desktop/src/renderer/styles/chat-message.css b/apps/desktop/src/renderer/styles/chat-message.css
index 2ac8b9ba9c..6adfa910ba 100644
--- a/apps/desktop/src/renderer/styles/chat-message.css
+++ b/apps/desktop/src/renderer/styles/chat-message.css
@@ -36,15 +36,10 @@
 .maka-bubble-assistant {
   padding: var(--space-0-5) 0 0;
 }
-/* Streaming caret rides the last text line: the caret is
-   `.maka-bubble-streaming::after`, and after a block-level trailing <p> it
-   would wrap onto its own anonymous line. Inline the trailing paragraph
-   only while streaming. (PR #212 used `:nth-last-child(2)` variants of
-   this + the margin reset above because the bubble then ended with an
-   inline timestamp child; the timestamp moved to the turn footer and the
-   stale hacks instead zeroed/inlined the second-to-last *markdown* block —
-   issue #546 Phase B.) */
-.maka-bubble-streaming > p:last-child { display: inline; }
+/* The streaming ▎ caret + its trailing-<p> inline hack were retired by the
+   streaming UI rework: the "still writing" signal is now the per-word fade-in
+   (@keyframes maka-stream-fade-in, wrapped by markdown-body's rehype pass), so
+   the trailing paragraph keeps its normal block layout. */
 
 /* --- Hover-revealed copy button on assistant messages -------------------- */
 /* The wrapper is position: relative so the button can anchor to the top-right
@@ -132,29 +127,6 @@
   opacity: 1;
 }
 
-/* --- Streaming caret ------------------------------------------------------ */
-/* External design reference uses the half-block glyph ▎ tinted with --accent.
-   Subtler than a full ▋ and gives the impression of motion via the glyph shape
-   itself; we still gently pulse opacity. */
-.maka-bubble-streaming::after {
-  content: "▎";
-  display: inline-block;
-  margin-left: var(--space-0-5);
-  color: var(--status-running);
-  animation: maka-cursor 1.1s var(--ease-in-out-strong) infinite;
-  vertical-align: -2px;
-}
-@keyframes maka-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
-/* When the truncation badge (`role="status"`, chat-view.tsx) is the last
-   child, the caret sits after the badge instead of the text. Accepted: the
-   badge does NOT mean the stream froze — `applyAssistantDelta` also sets
-   `truncated` for a single over-large delta (per-delta cap) while later
-   deltas keep appending, so hiding the caret there would kill a live
-   indicator. CSS can't tell the two truncation kinds apart. */
-@media (prefers-reduced-motion: reduce) {
-  .maka-bubble-streaming::after { animation: none; opacity: 1; }
-}
-
 /* --- User-turn meta row (relocated from tool-output.css) ----------------- */
 /* PR-CHAT-CHROME-FOLLOWUP-0 / PR5 CHAT-MESSAGE-TIME-0: the relative time is
    always visible now (it was `opacity: 0` until hover, which hid it on
diff --git a/apps/desktop/src/renderer/styles/reasoning-panel.css b/apps/desktop/src/renderer/styles/reasoning-panel.css
deleted file mode 100644
index e412eafb47..0000000000
--- a/apps/desktop/src/renderer/styles/reasoning-panel.css
+++ /dev/null
@@ -1,109 +0,0 @@
-
-  /* =============================================================================
-     PR-UI-LAYOUT-42 — Reasoning panel (Anthropic extended thinking)
-
-     Renders live `ThinkingDeltaEvent.text` accumulated per session in
-     `thinkingBySession`. Visible above the streaming answer bubble while
-     the model is reasoning. Base UI Collapsible wrapper for keyboard
-     a11y. Default-open so users see the live reasoning; clicking the
-     header collapses.
-  ============================================================================= */
-.maka-reasoning-panel {
-    margin: var(--space-1) 0 var(--space-2);
-    border: var(--border-width-hairline) solid oklch(from var(--info) l c h / 0.22);
-    border-radius: var(--radius-surface);
-    background: oklch(from var(--info) l c h / 0.04);
-    overflow: hidden;
-  }
-.maka-reasoning-panel[data-live="true"] {
-    border-color: oklch(from var(--info) l c h / 0.32);
-  }
-.maka-reasoning-panel-header {
-    display: flex;
-    align-items: center;
-    gap: var(--space-1-5);
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--font-size-caption);
-    font-weight: var(--font-weight-semibold);
-    letter-spacing: var(--tracking-wide);
-    color: var(--info-text);
-    user-select: none;
-    transition: background var(--duration-base) var(--ease-out-strong);
-  }
-.maka-reasoning-panel-header:hover {
-    background: oklch(from var(--info) l c h / 0.08);
-  }
-.maka-reasoning-panel-header:focus-visible {
-    outline: none;
-    background: oklch(from var(--info) l c h / 0.10);
-    box-shadow: 0 0 0 3px oklch(from var(--info) l c h / 0.18);
-  }
-.maka-reasoning-panel-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--info);
-    /* Live pulse — collapses under prefers-reduced-motion via the rule below. */
-    animation: maka-reasoning-panel-pulse 1.4s var(--ease-in-out-strong) infinite;
-  }
-@keyframes maka-reasoning-panel-pulse {
-    0%, 100% { opacity: 0.65; transform: scale(1); }
-    /* PR-FE-BUG-HUNT-6 (kenji aesthetic audit reminder 9, finding #5):
-       standardize live-dot pulse amplitude across the three streaming
-       indicators. The semantic is identical ("live work happening")
-       but the amplitudes drifted: list-row dot 10%, reasoning-panel
-       dot 15%, tool-output dot 18%. Settled on scale(1.1) — the
-       calmest of the three — because the dots run continuously while
-       a turn is streaming and the larger pulses read as agitated. */
-    50% { opacity: 1; transform: scale(1.1); }
-  }
-@media (prefers-reduced-motion: reduce) {
-    .maka-reasoning-panel-dot {
-      animation: none;
-      opacity: var(--opacity-pending);
-    }
-  }
-.maka-reasoning-panel-label {
-    flex: 1;
-    min-width: 0;
-  }
-/* PR-UI-C0 review fixup (@kenji msg 7885a347) — "已截断" pill
-     fires when `applyThinkingDelta` / `applyThinkingComplete`
-     dropped content. Same family as the A3 tool-output truncated
-     pill: warning tone, rounded rect, cursor:help. */
-.maka-reasoning-panel-truncated[data-truncated="true"] {
-    font-size: var(--font-size-caption);
-    color: var(--warning-text, var(--info-text));
-    border: var(--border-width-hairline) solid oklch(from var(--warning) l c h / 0.24);
-    background: oklch(from var(--warning) l c h / 0.05);
-    border-radius: var(--radius-control);
-    padding: 0 var(--space-1);
-    cursor: help;
-  }
-/* The streaming "已截断" pill (PR-UI-Cx, @kenji msg cd09bcac) moved onto the
-     `Bubble variant="assistant"` chat primitive as inline utilities (issue
-     #332 PR1); its sibling `.maka-reasoning-panel-truncated` pill below keeps
-     the same visual family. */
-.maka-reasoning-panel-chevron {
-    font-size: var(--font-size-ui);
-    line-height: var(--leading-none);
-    color: var(--muted-foreground);
-    transition: transform var(--duration-base) var(--ease-out-strong);
-  }
-.maka-reasoning-panel [data-slot="collapsible-trigger"][data-panel-open] .maka-reasoning-panel-chevron {
-    transform: rotate(90deg);
-  }
-.maka-reasoning-panel-body {
-    margin: 0;
-    padding: var(--space-1-5) var(--space-2-5) var(--space-2);
-    border-top: var(--border-width-hairline) solid oklch(from var(--info) l c h / 0.14);
-    background: transparent;
-    color: var(--foreground-secondary);
-    font-family: var(--font-mono);
-    font-size: var(--font-size-caption);
-    line-height: var(--leading-normal);
-    max-height: 280px;
-    overflow-y: auto;
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
diff --git a/packages/core/src/session.ts b/packages/core/src/session.ts
index edc587de37..98a16846e0 100644
--- a/packages/core/src/session.ts
+++ b/packages/core/src/session.ts
@@ -205,6 +205,15 @@ export interface ToolCallMessage {
   displayName?: string;
   intent?: string;
   args: unknown;
+  /**
+   * Assistant step this call belongs to (equals the step's AssistantMessage
+   * id, stamped from the same source as ToolStartEvent.stepId). Optional for
+   * legacy rows written before per-step persistence. First consumer is the UI
+   * timeline (materializeTurns), which orders a step's thinking/text ahead of
+   * the tools whose stepId matches that step; the backfill path also reads it
+   * to re-pair tools with their step after a restart.
+   */
+  stepId?: string;
 }
 
 export interface ToolResultMessage {
diff --git a/packages/runtime/src/__tests__/runtime-event-backfill.test.ts b/packages/runtime/src/__tests__/runtime-event-backfill.test.ts
index e003b68fe1..8011af1658 100644
--- a/packages/runtime/src/__tests__/runtime-event-backfill.test.ts
+++ b/packages/runtime/src/__tests__/runtime-event-backfill.test.ts
@@ -68,6 +68,7 @@ describe('runtime event backfill', () => {
         displayName: 'Read file',
         intent: 'inspect',
         args: { path: 'README.md' },
+        stepId: 'step-1',
       },
       {
         type: 'tool_result',
@@ -144,6 +145,7 @@ describe('runtime event backfill', () => {
     expect(result.events[3]?.content).toEqual({ kind: 'function_call', id: 'tool-1', name: 'Read', args: { path: 'README.md' } });
     expect(result.events[3]?.actions?.stateDelta?.displayName).toBe('Read file');
     expect(result.events[3]?.actions?.stateDelta?.intent).toBe('inspect');
+    expect(result.events[3]?.refs).toEqual({ storedMessageId: 'tool-1', toolCallId: 'tool-1', stepId: 'step-1' });
     expect(result.events[4]?.content).toEqual({ kind: 'function_response', id: 'tool-1', name: 'Read', result: { kind: 'text', text: 'file body' }, isError: false });
     expect(result.events[4]?.actions?.stateDelta?.durationMs).toBe(42);
     expect(result.events[5]?.actions?.permissionDecision).toEqual({ requestId: 'perm-1', decision: 'allow', rememberForTurn: true });
diff --git a/packages/runtime/src/__tests__/runtime-event-read-model.test.ts b/packages/runtime/src/__tests__/runtime-event-read-model.test.ts
index c40f7d3588..efb4168681 100644
--- a/packages/runtime/src/__tests__/runtime-event-read-model.test.ts
+++ b/packages/runtime/src/__tests__/runtime-event-read-model.test.ts
@@ -608,6 +608,31 @@ describe('projectRuntimeEventsToStoredMessages', () => {
     });
     expect(out.diagnostics.map((diag) => diag.code)).toEqual(['incomplete_event']);
   });
+
+  test('projects tool_call stepId from refs so the UI timeline keeps step pairing', () => {
+    const stepCall = (id: string, stepId?: string) => ev({
+      id: `evt-${id}`,
+      role: 'model' as const,
+      author: 'agent' as const,
+      content: {
+        kind: 'function_call' as const,
+        id,
+        name: 'Read',
+        args: { path: '/tmp/a.txt' },
+      },
+      refs: { toolCallId: id, ...(stepId ? { stepId } : {}) },
+    });
+
+    const withStep = projectRuntimeEventsToStoredMessages([stepCall('tool-step', 'step-1')], { runHeaders: [header] });
+    expect(withStep.messages[0]).toMatchObject({ type: 'tool_call', id: 'tool-step', stepId: 'step-1' });
+
+    // Legacy events without refs.stepId must not grow a stepId key: the UI
+    // uses its absence to pick the backward-compatible tools-first ordering.
+    const withoutStep = projectRuntimeEventsToStoredMessages([stepCall('tool-legacy')], { runHeaders: [header] });
+    const legacyCall = withoutStep.messages[0];
+    expect(legacyCall).toMatchObject({ type: 'tool_call', id: 'tool-legacy' });
+    expect(legacyCall && 'stepId' in legacyCall).toBe(false);
+  });
 });
 
 describe('compareRuntimeReadModelMessages', () => {
diff --git a/packages/runtime/src/runtime-event-backfill.ts b/packages/runtime/src/runtime-event-backfill.ts
index 4fc0bd3aa4..645f4bc259 100644
--- a/packages/runtime/src/runtime-event-backfill.ts
+++ b/packages/runtime/src/runtime-event-backfill.ts
@@ -144,7 +144,14 @@ export function backfillRuntimeEventsFromStoredMessages(
               ...(message.intent !== undefined ? { intent: message.intent } : {}),
             },
           },
-          refs: { storedMessageId: message.id, toolCallId: message.id },
+          // Carry the persisted step id into refs.stepId so post-restart model
+          // replay can re-pair this call with its assistant step, matching the
+          // live tool_start path (see model-history step grouping).
+          refs: {
+            storedMessageId: message.id,
+            toolCallId: message.id,
+            ...(message.stepId !== undefined ? { stepId: message.stepId } : {}),
+          },
         });
         break;
 
diff --git a/packages/runtime/src/runtime-event-read-model.ts b/packages/runtime/src/runtime-event-read-model.ts
index b179401982..29bacefaf3 100644
--- a/packages/runtime/src/runtime-event-read-model.ts
+++ b/packages/runtime/src/runtime-event-read-model.ts
@@ -473,6 +473,10 @@ function projectFunctionCall(
     ...(stringStateDelta(event, 'intent') !== undefined
       ? { intent: stringStateDelta(event, 'intent') }
       : {}),
+    // Carry the step pairing through the projection: without it, sessions
+    // rebuilt from the runtime event log lose the tool↔step association and
+    // the UI timeline falls back to legacy tools-before-text ordering.
+    ...(event.refs?.stepId ? { stepId: event.refs.stepId } : {}),
     args: event.content.args,
   });
   return true;
diff --git a/packages/runtime/src/tool-runtime.ts b/packages/runtime/src/tool-runtime.ts
index 4539e18339..485a976f1a 100644
--- a/packages/runtime/src/tool-runtime.ts
+++ b/packages/runtime/src/tool-runtime.ts
@@ -244,6 +244,7 @@ export class ToolRuntime {
     const toolIntent = describeToolIntent(tool, args);
     const trace = this.input.getRunTrace?.() ?? null;
 
+    const stepId = this.input.getCurrentStepId?.();
     const callMsg: ToolCallMessage = {
       type: 'tool_call',
       id: toolUseId,
@@ -253,9 +254,11 @@ export class ToolRuntime {
       ...(tool.displayName ? { displayName: tool.displayName } : {}),
       ...(toolIntent ? { intent: toolIntent } : {}),
       args,
+      // Persist the same step id the tool_start event carries so the UI
+      // timeline and post-restart backfill can pair this call with its step.
+      ...(stepId !== undefined ? { stepId } : {}),
     };
     await this.input.appendMessage(callMsg);
-    const stepId = this.input.getCurrentStepId?.();
     const startEv: ToolStartEvent = {
       type: 'tool_start',
       id: this.input.newId(),
diff --git a/packages/ui/src/chat-view.tsx b/packages/ui/src/chat-view.tsx
index d4e083d906..daeb32d266 100644
--- a/packages/ui/src/chat-view.tsx
+++ b/packages/ui/src/chat-view.tsx
@@ -1,12 +1,14 @@
-import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { Fragment, lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import {
   AlertOctagon,
   AlertTriangle,
   ArrowDown,
   Ban,
   BookOpen,
+  Brain,
   CalendarDays,
   Check,
+  ChevronRight,
   Copy,
   GitBranch,
   Info,
@@ -20,17 +22,18 @@ import { Markdown } from './markdown.js';
 import { formatAbsoluteTimestamp, turnAbortMarkerLabel } from './chat-display-helpers.js';
 import type { ChatModelChoice } from './chat-model-helpers.js';
 import { prepareSmoothStreamText, useSmoothStreamContent } from './smooth-stream.js';
+import { tokenizeFade, useStreamFade, type StreamFade } from './stream-fade.js';
 import { OverlayScrollArea } from './overlay-scroll-area.js';
 import { DialogContent, DialogRoot } from './ui.js';
 import { PromptAnchorRail } from './prompt-anchor-rail.js';
 import type { AttachmentRef, PlanReminder, ProviderType, SessionSummary, StoredMessage } from '@maka/core';
 import { deriveCapabilityAuditReport, isDeepResearchSession } from '@maka/core';
-import { materializeChat, materializeTools, materializeTurns, type ToolActivityItem, type TurnViewModel } from './materialize.js';
+import { materializeChat, materializeTools, materializeTurns, type ToolActivityItem, type TurnTimelineItem, type TurnViewModel } from './materialize.js';
 import { Button as UiButton } from './ui.js';
 import { AttachmentFileCard } from './attachment-file-card.js';
 import { Alert, AlertDescription } from './primitives/alert.js';
 import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from './primitives/collapsible.js';
-import { Bubble, Marker, markerVariants, Message } from './primitives/chat.js';
+import { Bubble, Marker, markerVariants, Message, TextShimmer } from './primitives/chat.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from './primitives/tooltip.js';
 import type { NavSelection } from './nav-selection.js';
 import { EmptyState } from './empty-state.js';
@@ -70,7 +73,7 @@ function ModulePanelFallback(props: { message: string }) {
   );
 }
 import { RelativeTime } from './relative-time.js';
-import { ToolActivity } from './tool-activity.js';
+import { ToolTrow } from './tool-activity.js';
 
 /**
  * Lifecycle status badge in the chat header (PR109b §9.8). Visual
@@ -563,16 +566,18 @@ export function ChatView(props: {
             composer left-controls. Header keeps the per-session status
             chips only. */}
       </header>
-      {(props.sessionStatusBadge || props.connectionAlert || props.eventStreamAlert) && (
-        /* In normal flow below the header (see .maka-chat-status-cluster)
-           so wrapped multi-badge rows reserve space before banners and
-           messages. */
-        <div className="maka-chat-status-cluster">
-          {props.sessionStatusBadge && <SessionStatusBadge badge={props.sessionStatusBadge} />}
-          {props.connectionAlert && <ChatHeaderAlertBadge alert={props.connectionAlert} />}
-          {props.eventStreamAlert && <ChatHeaderAlertBadge alert={props.eventStreamAlert} />}
-        </div>
-      )}
+      {/* In normal flow below the header (see .maka-chat-status-cluster)
+          so wrapped multi-badge rows reserve space before banners and
+          messages. ALWAYS mounted (even with zero badges): the cluster
+          collapses/expands via the CSS `:empty` height transition instead of
+          conditional mount/unmount — unmounting it when a run completes used
+          to snap the whole conversation column up by the badge-row height in
+          a single frame (the settle "jump"). */}
+      <div className="maka-chat-status-cluster">
+        {props.sessionStatusBadge && <SessionStatusBadge badge={props.sessionStatusBadge} />}
+        {props.connectionAlert && <ChatHeaderAlertBadge alert={props.connectionAlert} />}
+        {props.eventStreamAlert && <ChatHeaderAlertBadge alert={props.eventStreamAlert} />}
+      </div>
       {isLocalSimulationBackend && (
         <Alert variant="info" className="maka-fake-backend-banner" role="status">
           <AlertTriangle size={14} strokeWidth={1.75} aria-hidden="true" />
@@ -645,29 +650,69 @@ export function ChatView(props: {
             // identical to TurnView's committed turn.
             <section className="maka-turn maka-turn-streaming">
               <Message variant="assistant">
-                {/* PR-UI-LAYOUT-42: Reasoning panel for Anthropic-style
-                 * extended thinking. Renders ABOVE the streaming
-                 * answer because thinking always precedes the
-                 * answer. Default-open during streaming so the user
-                 * sees the model reasoning; users can collapse it
-                 * if too verbose. The panel disappears entirely on
-                 * text_complete / abort / error (parent clears the
-                 * thinkingBySession entry). */}
-                {props.thinkingText && (
-                  <ReasoningPanel
-                    text={props.thinkingText}
-                    live={!props.streamingText}
-                    truncated={props.thinkingTruncated === true}
-                  />
-                )}
-                {props.streamingText && (
-                  <StreamingAssistantBubble
-                    text={props.streamingText}
-                    live={props.streamingComplete !== true}
-                    truncated={props.streamingTruncated === true}
-                    onSettled={props.onStreamingSettled}
-                  />
-                )}
+                {/* Same `flex flex-col gap-2` timeline wrapper a committed turn
+                    uses (TurnView), so the live 深度思考 + answer share the exact
+                    spacing rhythm and chrome as the settled timeline — the two
+                    DeepThinking sites are structurally identical. */}
+                <div className="flex flex-col gap-2">
+                  {/* PR-UI-LAYOUT-42: Reasoning panel for Anthropic-style
+                   * extended thinking. Renders ABOVE the streaming
+                   * answer because thinking always precedes the
+                   * answer. Default-open during streaming so the user
+                   * sees the model reasoning; users can collapse it
+                   * if too verbose. The panel disappears entirely on
+                   * text_complete / abort / error (parent clears the
+                   * thinkingBySession entry). */}
+                  {props.thinkingText && (
+                    <DeepThinking
+                      text={props.thinkingText}
+                      live={!props.streamingText}
+                      truncated={props.thinkingTruncated === true}
+                    />
+                  )}
+                  {props.streamingText && (
+                    <StreamingAssistantBubble
+                      text={props.streamingText}
+                      live={props.streamingComplete !== true}
+                      truncated={props.streamingTruncated === true}
+                      onSettled={props.onStreamingSettled}
+                    />
+                  )}
+                </div>
+                {/* Equal-height placeholder for the turn footer toolbar
+                    (TurnFooterActions: mt-0.5 + h-8 buttons). The committed
+                    turn mounts a footer the live section doesn't have; in a
+                    bottom-pinned chat that extra row used to re-anchor the
+                    scroll and shift the whole conversation up by the footer
+                    height at the settle swap. Reserving the same box here
+                    makes the swap height-neutral — the real footer then only
+                    fades in (opacity, no layout). Outside the gap-2 timeline
+                    div, mirroring the committed structure.
+
+                    Unconditional (not gated on streamingText): a settled turn
+                    ALWAYS mounts a footer — deriveTurnFooterActions yields
+                    regenerate/branch from TurnStatus alone, independent of
+                    answer text (turn-footer-actions.ts), and materialize emits
+                    a timeline item for a step's thinking even with empty text
+                    (materialize.ts). So a thinking-only / textless turn
+                    (think → tool → end, or aborted mid-think) settles WITH a
+                    footer too; gating the placeholder on streamingText left
+                    that shape unreserved. We are already inside the
+                    `streamingText || thinkingText` section, so rendering it
+                    always reserves the footer box for every live turn.
+
+                    Groundwork, not a full fix for the textless case: this only
+                    makes the swap height-neutral when the live section is held
+                    until the committed footer mounts. Text turns get that via
+                    the draining→settleAssistantStreaming handshake (refresh the
+                    committed message BEFORE clearing the live slot). Textless /
+                    thinking-only completion currently clears the live section
+                    first and refreshes messages async (drainAssistantStreaming
+                    `!applied.text`), so the swap is non-atomic and can still
+                    flash for that shape. Closing that is tracked in the
+                    single-render-path convergence (#642), which removes the
+                    two-subtree seam entirely. */}
+                <div aria-hidden="true" className="mt-0.5 h-8" />
               </Message>
             </section>
           )}
@@ -1000,6 +1045,20 @@ const TurnView = memo(function TurnView(props: {
   const { turn } = props;
   const forwardBadges = props.lineageBadges?.filter((b) => b.direction === 'forward') ?? [];
   const reverseBadges = props.lineageBadges?.filter((b) => b.direction === 'reverse') ?? [];
+  // Streaming-settle polish: fade the footer toolbar in ONLY when it appears
+  // on an already-mounted turn (a live turn just settled). Turns hydrated from
+  // history mount WITH their footer and must not animate (default mounts don't
+  // animate — motion doc), so a ref pins whether the footer was VISIBLE at
+  // mount. "Visible" must mirror the render condition — the footer renders
+  // inside the `turn.timeline.length > 0` assistant block, and during a live
+  // turn `footerActions` can already be non-empty while the timeline is still
+  // empty; keying the ref on footerActions alone would mark it present-at-
+  // mount and suppress the entrance. Once the footer has appeared the class
+  // is inert: CSS animations run on element insertion only, so later
+  // re-renders never re-flash it.
+  const footerVisible = turn.timeline.length > 0 && !!(props.footerActions && props.footerActions.length > 0);
+  const footerVisibleOnMountRef = useRef(footerVisible);
+  const footerEntrance = footerVisible && !footerVisibleOnMountRef.current;
   return (
     <section
       className="maka-turn"
@@ -1044,40 +1103,17 @@ const TurnView = memo(function TurnView(props: {
           <MessageBody role="system" text={note.text} ts={note.ts} />
         </Message>
       ))}
-      {turn.tools.length > 0 && (
-        <div className="maka-turn-tools">
-          <ToolActivity items={turn.tools} />
-        </div>
-      )}
-      {turn.assistant && (
+      {turn.timeline.length > 0 && (
         <Message
           variant="assistant"
           data-turn-status={turn.status}
           aria-label="Maka 的回答"
         >
-          <div className="flex flex-col">
-            {turn.assistantThinking && (
-              <Collapsible className="maka-turn-thinking">
-                <CollapsibleTrigger>
-                  <span>查看思考过程</span>
-                  <span className="maka-turn-thinking-note">模型推理草稿，不是最终答案</span>
-                </CollapsibleTrigger>
-                <CollapsiblePanel>
-                  <div className="maka-turn-thinking-body">
-                    <Markdown text={turn.assistantThinking} />
-                    <div className="maka-turn-thinking-actions">
-                      <MessageCopyButton text={turn.assistantThinking} label="复制思考过程" />
-                    </div>
-                  </div>
-                </CollapsiblePanel>
-              </Collapsible>
-            )}
-            {/* PR109d-c: aborted turn body gets a muted "(已中断)" prefix
-                + Ban icon so the user can see this turn was cancelled
-                without it looking like a fault state (which is reserved
-                for `failed`). Lives in the message body wrapper so the
-                Copy button below still copies the assistant text without
-                the prefix. */}
+          <div className="flex flex-col gap-2">
+            {/* PR109d-c: aborted turn gets a muted "(已中断)" marker + Ban icon
+                so the user sees this turn was cancelled without it looking like
+                a fault state (reserved for `failed`). Rendered as its own row so
+                per-segment Copy buttons still yank clean answer text. */}
             {turn.status === 'aborted' && (
               <Marker variant="aborted" role="status">
                 <Ban size={12} strokeWidth={2} aria-hidden="true" />
@@ -1101,7 +1137,12 @@ const TurnView = memo(function TurnView(props: {
                 )}
               </Marker>
             )}
-            <MessageBody role="assistant" text={turn.assistant.text} ts={turn.assistant.ts} />
+            {/* The turn timeline is the rendering source of truth
+                (materialize.ts): each step's 深度思考 disclosure, answer bubble,
+                and Codex-style tool trow in the order the model produced them. */}
+            {turn.timeline.map((item, index) => (
+              <TurnTimelineEntry key={timelineEntryKey(item, index)} item={item} />
+            ))}
           </div>
           {reverseBadges.length > 0 && (
             <Marker variant="lineage-row-reverse" aria-label="本轮回答的衍生">
@@ -1126,7 +1167,8 @@ const TurnView = memo(function TurnView(props: {
             <TurnFooterActions
               actions={props.footerActions}
               onAction={props.onFooterAction ? (actionId) => props.onFooterAction?.(turn.turnId, actionId) : undefined}
-              assistantText={turn.assistant.text}
+              assistantText={turn.assistant?.text ?? ''}
+              entrance={footerEntrance}
             />
           )}
         </Message>
@@ -1219,6 +1261,12 @@ function TurnFooterActions(props: {
   onAction?: (actionId: TurnFooterActionMeta['id']) => void;
   /** Assistant text used by the inline copy action. */
   assistantText?: string;
+  /**
+   * True when this footer appeared on an already-mounted turn (a live turn
+   * just settled): fade it in instead of popping. History-hydrated turns pass
+   * false — default mounts don't animate.
+   */
+  entrance?: boolean;
 }) {
   const [copyPhase, setCopyPhase] = useState<ClipboardCopyPhase | null>(null);
   const copyPendingRef = useRef(false);
@@ -1274,7 +1322,18 @@ function TurnFooterActions(props: {
     props.onAction?.(action.id);
   }
   return (
-    <Marker variant="footer" role="toolbar" aria-label="本轮回答操作">
+    <Marker
+      variant="footer"
+      role="toolbar"
+      aria-label="本轮回答操作"
+      // Settle entrance: opacity-only fade via the governed
+      // `@keyframes maka-footer-fade-in` (maka-tokens.css) — a `from`-only
+      // keyframe so the fade lands on the footer's own quiet 0.72 opacity
+      // instead of pinning 1. Reduced-motion collapses the duration via the
+      // base.css globals; visual-smoke never exercises a live settle, so the
+      // paused-at-0% hazard cannot occur.
+      className={props.entrance ? '[animation:maka-footer-fade-in_var(--duration-large)_var(--ease-out-strong)_both]' : undefined}
+    >
       {props.actions.map((action) => {
         // Per @kenji review: pending state must keep the original button
         // label visible (not a spinner-only) so screen readers can hear
@@ -1338,25 +1397,6 @@ const STATUS_FOOTER_ICON: Record<TurnFooterActionMeta['id'], ReactNode> = {
   info: <Info size={12} strokeWidth={2} aria-hidden="true" />,
 };
 
-/**
- * PR-UI-LAYOUT-42 — ReasoningPanel: collapsible "thinking" panel for
- * Anthropic-style extended thinking. Renders the live
- * `ThinkingDeltaEvent.text` (or final `ThinkingCompleteEvent.text`)
- * accumulated by the renderer in `thinkingBySession`.
- *
- * Default-open during streaming so the user sees the live reasoning;
- * collapses to a single-line summary if user clicks the header. The
- * panel itself is wrapped in a Base UI Collapsible for keyboard a11y
- * (Space/Enter toggles).
- *
- * `live=true` means thinking is still streaming (no text yet). Adds
- * a small pulse dot in the header so users see motion.
- *
- * The text inside is rendered as `<pre>` so the model's
- * step-by-step reasoning preserves indentation / line breaks. We
- * don't pipe through Markdown — thinking is usually plain prose +
- * occasional code, and full markdown would slow the streaming.
- */
 /**
  * PR-UI-RENDER-1 — streaming assistant bubble.
  *
@@ -1406,9 +1446,14 @@ function StreamingAssistantBubble(props: { text: string; live: boolean; truncate
     props.onSettled?.();
   }, [props.live, catchingUp, props.onSettled]);
 
+  // Per-word fade-in over the freshly revealed tail (replaces the ▎ caret).
+  // Skipped under snap (reduced-motion / visual-smoke) so the deterministic
+  // capture shows the final text at full opacity with no fade spans.
+  const streamFade = useStreamFade(displayed, !snap);
+
   return (
     <Bubble variant="assistant" className="maka-bubble-streaming">
-      <Markdown text={displayed} />
+      <Markdown text={displayed} streamFade={streamFade} />
       {props.truncated && (
         <div
           className="mt-1.5 inline-block cursor-help rounded-[var(--radius-control)] border border-[oklch(from_var(--warning)_l_c_h_/_0.24)] bg-[oklch(from_var(--warning)_l_c_h_/_0.05)] px-1 text-xs text-[color:var(--warning-text,var(--info-text))]"
@@ -1423,78 +1468,170 @@ function StreamingAssistantBubble(props: { text: string; live: boolean; truncate
   );
 }
 
-function ReasoningPanel(props: { text: string; live: boolean; truncated: boolean }) {
-  // PR-UI-RENDER-1 + PR-UI-C0: smooth-stream the thinking text on top
-  // of the C0 redaction/cap chokepoint. `props.text` is the already-
-  // redacted-and-capped buffer (renderer ran it through
-  // `applyThinkingDelta` / `applyThinkingComplete` before passing
-  // here), so the smoother is purely a visual frame-pacing layer.
-  //
-  // C1 review fixup (@kenji msg fbb8f119) — defense in depth: even
-  // though C0 already redacted, we run `prepareSmoothStreamText`
-  // again before the smoother. `redactSecrets` is idempotent on
-  // already-masked text, and the gate guarantees the smoother
-  // contract ("smoother never sees raw secrets") holds even if a
-  // future change accidentally bypasses the C0 chokepoint.
-  //
-  // `live=true` means thinking is still flowing (no answer yet) →
-  // streaming=true so the smoother typewriters. `live=false` means
-  // `thinking_complete` already fired (caller passes a settled blob)
-  // → streaming=false, hook snaps. Reduced-motion / visual-smoke
-  // also forces snap so deterministic capture sees the final text
-  // immediately.
+/**
+ * Stable key for a timeline entry. Thinking/text keys use the source step's
+ * messageId (one thinking + one text per step, so kind+messageId is unique
+ * across the turn); tools use the first tool's id (unique per merged group).
+ * No index component: a semantic key survives a group being inserted or
+ * re-positioned mid-timeline without remounting — and thereby collapsing —
+ * the disclosures after it.
+ */
+function timelineEntryKey(item: TurnTimelineItem, index: number): string {
+  if (item.kind === 'tools') return `tools-${item.items[0]?.toolUseId ?? index}`;
+  return `${item.kind}-${item.messageId}`;
+}
+
+/** Render one timeline entry: reasoning disclosure / answer bubble / tool trow. */
+function TurnTimelineEntry({ item }: { item: TurnTimelineItem }) {
+  if (item.kind === 'thinking') return <DeepThinking text={item.text} live={false} />;
+  if (item.kind === 'tools') return <ToolTrow items={item.items} />;
+  return <MessageBody role="assistant" text={item.text} ts={item.ts} />;
+}
+
+/**
+ * "深度思考" — the unified reasoning disclosure for both live streaming and
+ * committed history (replaces ReasoningPanel + the retired `.maka-turn-thinking`
+ * disclosure). Controlled Collapsible, collapsed by default (no defaultOpen —
+ * disclosure-collapsible-contract), fixed title "深度思考".
+ *
+ * `live=true` (thinking still flowing): the title shimmers (TextShimmer) and the
+ * expanded body streams plain redacted text through `useSmoothStreamContent`
+ * (non-Markdown for the same frame-pacing reason as the old ReasoningPanel),
+ * auto-following the tail. `live=false` (settled / committed): plain title,
+ * Markdown render + a "复制思考过程" button.
+ *
+ * `props.text` is the already-redacted-and-capped buffer (C0 chokepoint);
+ * `prepareSmoothStreamText` re-runs `redactSecrets` (idempotent) as
+ * defense-in-depth so the smoother never sees a raw secret. The "已截断" pill
+ * fires when the thinking cap dropped content.
+ */
+function DeepThinking(props: { text: string; live: boolean; truncated?: boolean }) {
   const snap = useStreamSnap();
   const safeText = prepareSmoothStreamText(props.text);
-  const { displayed } = useSmoothStreamContent(safeText, {
-    streaming: props.live,
-    snap,
-  });
-  // PR-UI-RENDER-1 @kenji review concern #4 — explicitly controlled
-  // open state. With a raw `open` JSX attribute, React's reconciler
-  // could re-assert the open state and undo the user's manual collapse
-  // on the next stream-driven re-render (the smoother re-renders at
-  // ~60Hz while the stream is live, so any reconciliation drift is
-  // immediately visible to the user). Owning the open state via
-  // useState + onOpenChange makes the panel uncontrolled-from-React's-view:
-  // the user's collapse sticks because we only write `open` from our
-  // own state, which we only mutate from the onOpenChange callback.
-  // Default-open at mount so users see the reasoning by default; first
-  // click toggles to closed and that sticks.
-  const [open, setOpen] = useState(true);
+  const { displayed } = useSmoothStreamContent(safeText, { streaming: props.live, snap });
+  // Per-word fade over the freshly revealed reasoning tail — same entrance as the
+  // main answer bubble (replaces the old caret). Plain-text path (no Markdown),
+  // so we tokenize `displayed` directly and wrap post-boundary tokens. Inactive
+  // (returns undefined) when settled or under snap.
+  const streamFade = useStreamFade(displayed, props.live && !snap);
+  // Controlled open (see ReasoningPanel history: a raw `open` attribute lets the
+  // ~60Hz stream re-render re-assert open state and undo a manual collapse).
+  // Collapsed by default so the answer reads cleanly; the click sticks.
+  const [open, setOpen] = useState(false);
+  const bodyRef = useRef<HTMLPreElement>(null);
+  useEffect(() => {
+    if (!props.live || !open) return;
+    const el = bodyRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [displayed, props.live, open]);
   return (
     <Collapsible
-      className="maka-reasoning-panel"
-      data-live={props.live ? 'true' : undefined}
+      className="flex flex-col"
+      data-deep-thinking={props.live ? 'live' : undefined}
       open={open}
-      onOpenChange={(v) => setOpen(v)}
+      onOpenChange={setOpen}
     >
-      <CollapsibleTrigger className="maka-reasoning-panel-header">
-        {props.live && <span className="maka-reasoning-panel-dot" aria-hidden="true" />}
-        <span className="maka-reasoning-panel-label">
-          {props.live ? '正在思考…' : '思考过程'}
-        </span>
-        {/* PR-UI-C0 review fixup (@kenji msg 7885a347): "已截断" pill
-            fires when `applyThinkingDelta` / `applyThinkingComplete`
-            dropped content (per-delta cap or per-session total cap).
-            Same chrome family as the A3 tool-output truncated pill. */}
+      {/* Structurally identical to a tool trow row: [16px icon slot] + [label]
+          + [hover-reveal trailing chevron]. One font size (base 13px), one
+          weight (normal), muted color — the whole folded timeline reads as a
+          single tier, hierarchy carried by color, not by size/weight jitter. */}
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 py-0.5 text-left">
+        <Brain
+          size={16}
+          strokeWidth={1.75}
+          aria-hidden="true"
+          className="shrink-0 text-[color:var(--muted-foreground)]"
+        />
+        {props.live ? (
+          <TextShimmer active={!snap} className="min-w-0 truncate text-[length:var(--font-size-base)]">深度思考</TextShimmer>
+        ) : (
+          <span className="min-w-0 truncate text-[length:var(--font-size-base)] text-[color:var(--muted-foreground)]">深度思考</span>
+        )}
+        {/* "已截断" pill: the thinking cap (applyThinkingDelta /
+            applyThinkingComplete) dropped content; same chrome as the
+            tool-output truncated pill. */}
         {props.truncated && (
           <span
-            className="maka-reasoning-panel-truncated"
+            className="rounded-[var(--radius-control)] border border-[oklch(from_var(--warning)_l_c_h_/_0.30)] bg-[oklch(from_var(--warning)_l_c_h_/_0.06)] px-1 text-[length:var(--font-size-caption)] text-[color:var(--warning-text,var(--info-text))]"
             data-truncated="true"
             title="部分 reasoning 已截断；显示的是最近的内容"
           >
             已截断
           </span>
         )}
-        <span className="maka-reasoning-panel-chevron" aria-hidden="true">›</span>
+        {/* Quiet trailing chevron: rides in on hover / open, matching the tool
+            trow rows. No always-on affordance so the folded row stays calm. */}
+        <span className="ml-auto inline-flex shrink-0 items-center text-[color:var(--muted-foreground)] opacity-0 [transition:opacity_var(--duration-quick)_var(--ease-out-strong)] group-hover:opacity-100 group-data-[panel-open]:opacity-100">
+          <ChevronRight
+            size={14}
+            strokeWidth={2}
+            aria-hidden="true"
+            className="[transition:transform_var(--duration-quick)_var(--ease-out-strong)] group-data-[panel-open]:rotate-90"
+          />
+        </span>
       </CollapsibleTrigger>
       <CollapsiblePanel>
-        <pre className="maka-reasoning-panel-body">{displayed}</pre>
+        {/* Left-border-indented quiet detail block, one language with the tool
+            trow's expanded body. `live` and settled render the SAME plain-text
+            body at the caption tier so the two states never jump size; settled
+            is muted + regular weight (long reasoning in italic reads poorly).
+            The copy action is an icon-only hover affordance pinned top-right so
+            it never squeezes the reading column into a vertical char stack. */}
+        <div className="group/reasoning relative mt-1 ml-2 border-l border-[var(--border)] pl-2.5 pr-7">
+          {props.live ? (
+            <pre
+              ref={bodyRef}
+              className="m-0 max-h-64 overflow-y-auto whitespace-pre-wrap [word-break:break-word] [font-family:inherit] text-[length:var(--font-size-caption)] leading-normal text-[color:var(--muted-foreground)] [scroll-behavior:auto]"
+            >
+              <DeepThinkingBody text={displayed} streamFade={streamFade} />
+            </pre>
+          ) : (
+            <>
+              <div className="whitespace-pre-wrap [word-break:break-word] text-[length:var(--font-size-caption)] leading-normal text-[color:var(--muted-foreground)]">
+                {props.text}
+              </div>
+              <div className="absolute right-0 top-0 opacity-0 [transition:opacity_var(--duration-quick)_var(--ease-out-strong)] group-hover/reasoning:opacity-100 focus-within:opacity-100">
+                <MessageCopyButton text={props.text} label="复制思考过程" footerStyle />
+              </div>
+            </>
+          )}
+        </div>
       </CollapsiblePanel>
     </Collapsible>
   );
 }
 
+/**
+ * Plain-text reasoning body with the same per-word fade as the answer bubble.
+ * When `streamFade` is absent (settled / snap) it renders the raw string so the
+ * deterministic capture shows the full text with no spans. Otherwise it splits
+ * the whole buffer at grapheme 0 and wraps each post-boundary token in a
+ * `.maka-stream-fade` span with a negative `animation-delay` (= -age) so the
+ * entrance resumes mid-flight across the ~60Hz streaming re-renders.
+ */
+function DeepThinkingBody(props: { text: string; streamFade?: StreamFade }) {
+  const fade = props.streamFade;
+  if (!fade) return <>{props.text}</>;
+  const { tokens } = tokenizeFade(props.text, 0, fade.boundaryOffset);
+  return (
+    <>
+      {tokens.map((token, index) =>
+        token.fade ? (
+          <span
+            key={index}
+            className="maka-stream-fade"
+            style={{ animationDelay: `-${Math.round(fade.ageAt(token.offset))}ms` }}
+          >
+            {token.text}
+          </span>
+        ) : (
+          <Fragment key={index}>{token.text}</Fragment>
+        ),
+      )}
+    </>
+  );
+}
+
 /**
  * PR-UI-RENDER-1 — reduced-motion / visual-smoke probe for the
  * streaming smoother.
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index aac3d44ae5..97c1c02381 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -109,3 +109,32 @@ export type { BadgeProps } from './primitives/badge.js';
 // / destructive.
 export { Chip, chipVariants } from './primitives/chip.js';
 export type { ChipProps } from './primitives/chip.js';
+// Streaming UI rework: Codex-style tool "trow" grouping helpers. Pure bucketing
+// + summary used by the timeline tool renderer (ToolTrow) and unit-tested.
+export {
+  summarizeTrowTools,
+  trowActivityKind,
+  activeTrowTool,
+  isTrowRunning,
+  trowNeedsAttention,
+  type TrowActivityKind,
+} from './tool-activity/trow-summary.js';
+// Streaming UI rework: per-word fade-in for streamed text (replaces the ▎
+// caret). Pure append-record ring + tokenizer are unit-tested; the hook feeds
+// markdown-body's rehype pass.
+export {
+  useStreamFade,
+  tokenizeFade,
+  streamFadeRehypePlugin,
+  updateFadeRing,
+  createFadeRing,
+  fadeBoundary,
+  fadeAgeAt,
+  FADE_MS,
+  MAX_FADE_BATCHES,
+  type StreamFade,
+  type FadeToken,
+  type FadeRingState,
+  type FadeBatch,
+  type HastNode,
+} from './stream-fade.js';
diff --git a/packages/ui/src/markdown-body.tsx b/packages/ui/src/markdown-body.tsx
index 73c22b2e30..8c1bc91b65 100644
--- a/packages/ui/src/markdown-body.tsx
+++ b/packages/ui/src/markdown-body.tsx
@@ -31,6 +31,7 @@ import {
 } from './maka-uri.js';
 import { useClipboardCopyFeedback } from './clipboard-feedback.js';
 import { MakaUriContext } from './markdown.js';
+import { streamFadeRehypePlugin, type StreamFade } from './stream-fade.js';
 
 const MARKDOWN_REMARK_PLUGINS = [remarkGfm, remarkBreaks];
 const MARKDOWN_REHYPE_PLUGINS = [
@@ -39,11 +40,14 @@ const MARKDOWN_REHYPE_PLUGINS = [
   [rehypeHighlight, { detect: true, ignoreMissing: true }],
 ] as const;
 
-export function MarkdownBody(props: { text: string }) {
+export function MarkdownBody(props: { text: string; streamFade?: StreamFade }) {
+  const rehypePlugins = props.streamFade
+    ? [...MARKDOWN_REHYPE_PLUGINS, streamFadeRehypePlugin(props.streamFade)]
+    : MARKDOWN_REHYPE_PLUGINS;
   return (
     <ReactMarkdown
       remarkPlugins={MARKDOWN_REMARK_PLUGINS}
-      rehypePlugins={MARKDOWN_REHYPE_PLUGINS as never}
+      rehypePlugins={rehypePlugins as never}
       components={{
         // PR-UI-RENDER-2: route `maka://` links through the internal
         // URI parser so the assistant can drop in-app navigation
diff --git a/packages/ui/src/markdown.tsx b/packages/ui/src/markdown.tsx
index 52730287d4..8b968600d2 100644
--- a/packages/ui/src/markdown.tsx
+++ b/packages/ui/src/markdown.tsx
@@ -29,11 +29,12 @@
  */
 
 import { createContext, lazy, Suspense, type ReactNode } from 'react';
+import type { StreamFade } from './stream-fade.js';
 
 // Heavy pipeline — parsed on first `<Markdown>` mount, not at app boot.
 const MarkdownBody = lazy(() => import('./markdown-body.js').then((m) => ({ default: m.MarkdownBody })));
 
-export function Markdown(props: { text: string }) {
+export function Markdown(props: { text: string; streamFade?: StreamFade }) {
   return (
     <Suspense
       // Plain-text fallback so message content is visible immediately while
@@ -45,7 +46,7 @@ export function Markdown(props: { text: string }) {
         </div>
       }
     >
-      <MarkdownBody text={props.text} />
+      <MarkdownBody text={props.text} streamFade={props.streamFade} />
     </Suspense>
   );
 }
diff --git a/packages/ui/src/materialize.ts b/packages/ui/src/materialize.ts
index f07eef281a..e562de6444 100644
--- a/packages/ui/src/materialize.ts
+++ b/packages/ui/src/materialize.ts
@@ -31,6 +31,14 @@ export interface ToolActivityItem {
   toolName: string;
   displayName?: string;
   intent?: string;
+  /**
+   * Assistant step this tool belongs to (equals the step's AssistantMessage
+   * id). Populated from the persisted `tool_call.stepId`, or from the live
+   * `ToolStartEvent.stepId` for in-flight tools. The turn timeline uses it to
+   * place a step's tools after that step's thinking/text; absent means a
+   * legacy call with no step association.
+   */
+  stepId?: string;
   status: 'pending' | 'waiting_permission' | 'running' | 'completed' | 'errored' | 'interrupted';
   args: unknown;
   result?: ToolResultContent;
@@ -111,6 +119,7 @@ export function materializeTools(messages: StoredMessage[]): ToolActivityItem[]
         toolName: call.toolName,
         displayName: call.displayName,
         intent: call.intent,
+        ...(call.stepId !== undefined ? { stepId: call.stepId } : {}),
         status: result ? materializeToolResultStatus(result) : 'interrupted',
         args: call.args,
         result: result?.content,
@@ -166,6 +175,25 @@ function mergeLiveOverPersisted(persisted: ToolActivityItem, live: ToolActivityI
   return merged;
 }
 
+/**
+ * One entry on a turn's render timeline — the interleaved thinking / answer /
+ * tool sequence in the order the model actually produced it. This is the
+ * rendering source of truth (see `TurnViewModel.timeline`); the aggregate
+ * `assistant` / `assistantThinking` fields are kept only for older consumers
+ * (copy, export, prompt rail).
+ *
+ * - `thinking`: one reasoning block (a step's thinking; adjacent blocks are
+ *   pre-merged with `\n\n`). Rendered as a collapsed "深度思考" disclosure.
+ * - `text`: one assistant answer segment (a step's text). `ts` is the source
+ *   step's wall-clock for hover meta.
+ * - `tools`: one contiguous group of tool activity, rendered as a single
+ *   Codex-style trow. Adjacent groups are pre-merged.
+ */
+export type TurnTimelineItem =
+  | { kind: 'thinking'; text: string; messageId: string }
+  | { kind: 'text'; text: string; messageId: string; ts?: number }
+  | { kind: 'tools'; items: ToolActivityItem[] };
+
 /**
  * A single conversational turn — typically one user message, the assistant's
  * tool calls (if any), and the assistant's final answer. Derived as a
@@ -198,6 +226,12 @@ export interface TurnViewModel {
    * user wants to verify the chain of reasoning.
    */
   assistantThinking?: string;
+  /**
+   * Interleaved thinking / answer / tool sequence in production order — the
+   * rendering source of truth for the turn body. Built from the per-step
+   * assistant rows and each step's paired tools (see buildTurnTimeline).
+   */
+  timeline: TurnTimelineItem[];
   /** System notes inside this turn that survive the VISIBLE_SYSTEM_NOTES gate. */
   notes: ChatItem[];
   /** Wall-clock ts of the earliest message in this turn — used for sorting. */
@@ -233,6 +267,9 @@ export function materializeTurns(
   const order: string[] = [];
   const byId = new Map<string, TurnViewModel>();
   const looseTurnId = '__loose';
+  // Storage-ordered messages per turn — the raw sequence the timeline pass
+  // replays to interleave a step's thinking/text with its paired tools.
+  const messagesByTurn = new Map<string, StoredMessage[]>();
 
   function ensureTurn(turnId: string, startedAt: number): TurnViewModel {
     let turn = byId.get(turnId);
@@ -252,6 +289,7 @@ export function materializeTurns(
         partialOutputRetained: record?.partialOutputRetained ?? false,
         tools: [],
         notes: [],
+        timeline: [],
         startedAt,
       };
       byId.set(turnId, turn);
@@ -268,6 +306,9 @@ export function materializeTurns(
     const turnId = (message as { turnId?: string }).turnId ?? looseTurnId;
     const ts = (message as { ts?: number }).ts ?? 0;
     const turn = ensureTurn(turnId, ts);
+    const turnMessageList = messagesByTurn.get(turnId);
+    if (turnMessageList) turnMessageList.push(message);
+    else messagesByTurn.set(turnId, [message]);
     if (message.type === 'user') {
       turn.user = {
         id: message.id,
@@ -335,23 +376,128 @@ export function materializeTurns(
   // active turn so they still surface in the right turn.
   const persistedTools = materializeTools(messages);
   const liveById = new Map(liveTools.map((tool) => [tool.toolUseId, tool]));
+  // toolItemByUseId feeds the timeline pass: the fully merged (persisted+live)
+  // item keyed by toolUseId, so replaying tool_call rows in storage order
+  // yields the same ToolActivityItem the tools list holds. liveOnlyByTurn
+  // collects in-flight tools with no persisted call yet — appended to the
+  // owning turn's timeline tail.
+  const toolItemByUseId = new Map<string, ToolActivityItem>();
+  const liveOnlyByTurn = new Map<string, ToolActivityItem[]>();
   for (const tool of persistedTools) {
     const live = liveById.get(tool.toolUseId);
     const merged = live ? mergeLiveOverPersisted(tool, live) : tool;
     const turnId = turnsByMsg.get(tool.toolUseId) ?? order[order.length - 1] ?? looseTurnId;
     const turn = ensureTurn(turnId, Date.now());
     turn.tools.push(merged);
+    toolItemByUseId.set(merged.toolUseId, merged);
     liveById.delete(tool.toolUseId);
   }
   for (const liveOnly of liveById.values()) {
     const turnId = order[order.length - 1] ?? looseTurnId;
     const turn = ensureTurn(turnId, Date.now());
     turn.tools.push(liveOnly);
+    toolItemByUseId.set(liveOnly.toolUseId, liveOnly);
+    const bucket = liveOnlyByTurn.get(turnId);
+    if (bucket) bucket.push(liveOnly);
+    else liveOnlyByTurn.set(turnId, [liveOnly]);
+  }
+
+  // Third pass: rebuild each turn's render timeline from its storage-ordered
+  // messages, interleaving a step's thinking/text with its paired tools.
+  for (const turnId of order) {
+    const turn = byId.get(turnId)!;
+    turn.timeline = buildTurnTimeline(
+      messagesByTurn.get(turnId) ?? [],
+      toolItemByUseId,
+      liveOnlyByTurn.get(turnId) ?? [],
+    );
   }
 
   return order.map((turnId) => byId.get(turnId)!);
 }
 
+/**
+ * Rebuild a turn's render timeline from its storage-ordered messages.
+ *
+ * Ledger order within a turn is tool_call(s) -> tool_result(s) ->
+ * assistant(step) -> next step's tools -> ... . Walking that sequence:
+ *
+ *  - tool_call rows buffer their (merged) ToolActivityItem into `pending`,
+ *    tagged by the item's stepId.
+ *  - an assistant row (id === a step's messageId) flushes the buffer around
+ *    its own thinking/text: earlier-step orphan tools -> thinking -> legacy
+ *    tools (no stepId) -> text -> this step's tools. Step order is
+ *    think->say->call, so thinking and text precede the tools whose stepId
+ *    matches this row; legacy tools (no stepId, pre-per-step persistence)
+ *    keep the old tools-then-summary reading and sit before the text. Tools
+ *    whose stepId matches no assistant row are orphans of a pure-tool step
+ *    (which persists no assistant message); ledger append order guarantees
+ *    they ran BEFORE this row landed, so they flush ahead of this step's
+ *    content — parking them past the text would invert the common
+ *    "call tools, then summarize next step" turn into answer-then-tools.
+ *  - leftover buffered tools (abort / pure-tool turn with no assistant row)
+ *    flush as a trailing tools group, then any live-only in-flight tools.
+ *
+ * Empty text/thinking produce no item. Adjacent thinking blocks merge with
+ * a blank line; adjacent tools groups merge into one trow.
+ */
+function buildTurnTimeline(
+  turnMessages: readonly StoredMessage[],
+  toolItemByUseId: ReadonlyMap<string, ToolActivityItem>,
+  liveOnly: readonly ToolActivityItem[],
+): TurnTimelineItem[] {
+  const raw: TurnTimelineItem[] = [];
+  let pending: ToolActivityItem[] = [];
+  const flushTools = (items: ToolActivityItem[]): void => {
+    if (items.length > 0) raw.push({ kind: 'tools', items });
+  };
+  for (const message of turnMessages) {
+    if (message.type === 'tool_call') {
+      const item = toolItemByUseId.get(message.id);
+      if (item) pending.push(item);
+    } else if (message.type === 'assistant') {
+      const rowId = message.id;
+      const legacy = pending.filter((tool) => tool.stepId === undefined);
+      const matched = pending.filter((tool) => tool.stepId === rowId);
+      // stepId set but not this row's: orphans of an earlier pure-tool step
+      // (no assistant row carries their stepId). A later step's tools cannot
+      // be pending here — the ledger appends them after this assistant row —
+      // so these ran earlier and must render before this step's content.
+      const orphaned = pending.filter((tool) => tool.stepId !== undefined && tool.stepId !== rowId);
+      pending = [];
+      flushTools(orphaned);
+      if (message.thinking?.text) {
+        raw.push({ kind: 'thinking', text: message.thinking.text, messageId: rowId });
+      }
+      flushTools(legacy);
+      if (message.text.length > 0) {
+        raw.push({ kind: 'text', text: message.text, messageId: rowId, ts: message.ts });
+      }
+      flushTools(matched);
+    }
+  }
+  flushTools(pending);
+  flushTools([...liveOnly]);
+  return mergeAdjacentTimeline(raw);
+}
+
+function mergeAdjacentTimeline(items: readonly TurnTimelineItem[]): TurnTimelineItem[] {
+  const out: TurnTimelineItem[] = [];
+  for (const item of items) {
+    const last = out[out.length - 1];
+    if (item.kind === 'thinking' && last?.kind === 'thinking') {
+      last.text = `${last.text}\n\n${item.text}`;
+    } else if (item.kind === 'tools' && last?.kind === 'tools') {
+      last.items = [...last.items, ...item.items];
+    } else if (item.kind === 'tools') {
+      out.push({ kind: 'tools', items: [...item.items] });
+    } else {
+      out.push({ ...item });
+    }
+  }
+  return out;
+}
+
 export interface TurnLineageTarget {
   retriedToTurnId?: string;
   regeneratedToTurnId?: string;
diff --git a/packages/ui/src/primitives/chat.tsx b/packages/ui/src/primitives/chat.tsx
index c21281b8dc..90065239fa 100644
--- a/packages/ui/src/primitives/chat.tsx
+++ b/packages/ui/src/primitives/chat.tsx
@@ -294,7 +294,7 @@ const streamVariants = cva("", {
       // `word-break:break-word` stays an arbitrary literal (Tailwind's
       // `break-words` is `overflow-wrap`, a different property).
       body:
-        "m-0 max-h-55 overflow-y-auto whitespace-pre-wrap [word-break:break-word] px-2.5 py-2 [font-family:var(--font-mono)] text-xs leading-normal bg-[var(--background)] text-[color:var(--foreground-secondary)] [scroll-behavior:auto]",
+        "m-0 max-h-55 overflow-y-auto whitespace-pre-wrap [word-break:break-word] px-2.5 py-2 [font-family:var(--font-mono)] [font-variant-ligatures:none] text-xs leading-normal bg-[var(--background)] text-[color:var(--foreground-secondary)] [scroll-behavior:auto]",
       // `.maka-tool-output-stream-chunk` (`display:contents`; recolors stderr,
       // dims redacted). The call site keeps `data-stream` / `data-redacted`.
       chunk:
@@ -346,6 +346,58 @@ export function LiveIndicator({
   );
 }
 
+/**
+ * `TextShimmer` — a running "sweep of light" across short label text
+ * (streaming UI rework). Used for the "深度思考" disclosure title while
+ * reasoning streams and for a working trow's active-tool summary.
+ *
+ * Two overlaid layers on the same grid cell: an opaque `base` (keeps the text
+ * readable at all times, and is all a snapshot / reduced-motion user sees) and
+ * a `sweep` layer whose animated linear-gradient is clipped to the glyph shape
+ * (`background-clip: text` + transparent fill) so a light band travels across
+ * the letters. The band motion is the one declaration that can't be a leaf
+ * literal — it rides the governed `@keyframes maka-text-shimmer` in
+ * maka-tokens.css (like `LiveIndicator`'s `maka-pulse`) plus the literal
+ * utilities here.
+ *
+ * `active={false}` (or reduced-motion) renders just the base text — callers
+ * pass `active` false for settled/snap states so the sweep never runs in a
+ * deterministic capture. Kept INTERNAL (off the package barrel, imported by
+ * relative path) like `LiveIndicator` — its only consumers live in `@maka/ui`.
+ */
+export function TextShimmer({
+  children,
+  active = true,
+  className,
+}: {
+  children: React.ReactNode;
+  active?: boolean;
+  className?: string;
+}): React.ReactElement {
+  if (!active) {
+    return <span className={cn("inline-block", className)}>{children}</span>;
+  }
+  return (
+    <span data-slot="text-shimmer" className={cn("relative inline-grid", className)}>
+      {/* Base: opaque, muted, always readable. */}
+      <span className="[grid-area:1/1] text-[color:var(--muted-foreground)]">{children}</span>
+      {/* Sweep: a clipped light band that travels across the glyphs. */}
+      <span
+        aria-hidden="true"
+        className={cn(
+          "[grid-area:1/1] bg-clip-text [-webkit-text-fill-color:transparent] text-transparent",
+          "bg-[linear-gradient(100deg,transparent_30%,oklch(from_var(--foreground)_l_c_h_/_0.95)_50%,transparent_70%)]",
+          "[background-size:200%_100%] [background-position:150%_0]",
+          "[animation:maka-text-shimmer_1.8s_linear_infinite]",
+          "motion-reduce:[animation:none] motion-reduce:opacity-0",
+        )}
+      >
+        {children}
+      </span>
+    </span>
+  );
+}
+
 /**
  * Tool-activity card shell (issue #332, PR3b).
  *
@@ -517,7 +569,7 @@ const previewVariants = cva("", {
       // overlay preview shares. `white-space` / `font-family` are arbitrary so
       // the structured-card kind parts override them by tailwind-merge (note 1).
       overlay:
-        "mt-1 mx-0 mb-0 max-h-[180px] overflow-auto [font-family:var(--font-mono)] text-xs [white-space:pre-wrap] [word-break:break-word]",
+        "mt-1 mx-0 mb-0 max-h-[180px] overflow-auto [font-family:var(--font-mono)] [font-variant-ligatures:none] text-xs [white-space:pre-wrap] [word-break:break-word]",
       // `.maka-overlay-close` — the dismiss action (layered over `.maka-button`).
       close:
         "justify-self-end inline-flex items-center gap-1 min-h-6 px-1.5",
@@ -533,7 +585,7 @@ const previewVariants = cva("", {
         + " [&_code]:text-[color:var(--foreground-secondary)] [&_code]:bg-transparent",
       // `.maka-tool-diff-body` — the scrolling mono `<pre>`.
       "diff-body":
-        "m-0 px-0 py-1 max-h-80 overflow-auto [font-family:var(--font-mono)] text-xs leading-snug [white-space:pre] [word-break:normal]",
+        "m-0 px-0 py-1 max-h-80 overflow-auto [font-family:var(--font-mono)] [font-variant-ligatures:none] text-xs leading-snug [white-space:pre] [word-break:normal]",
       // `.maka-tool-diff-line` (+ the `[data-line]` add/del/hunk/meta/ctx tints).
       "diff-line":
         "block px-2 py-0 [white-space:pre]"
@@ -549,7 +601,7 @@ const previewVariants = cva("", {
         "grid gap-0 p-0 rounded-[var(--radius-surface)] bg-[var(--background)] [white-space:normal] [box-shadow:var(--shadow-minimal-flat)]",
       // `.maka-tool-terminal-head`
       "terminal-head":
-        "flex flex-wrap items-center gap-1.5 px-2 py-1 [border-bottom:1px_solid_var(--border)] bg-[var(--foreground-2)] [font-family:var(--font-mono)] text-xs",
+        "flex flex-wrap items-center gap-1.5 px-2 py-1 [border-bottom:1px_solid_var(--border)] bg-[var(--foreground-2)] [font-family:var(--font-mono)] [font-variant-ligatures:none] text-xs",
       // `.maka-tool-terminal-cwd`
       "terminal-cwd": "text-[color:var(--muted-foreground)] bg-transparent",
       // `.maka-tool-terminal-cmd` — the ellipsized command line.
@@ -565,7 +617,7 @@ const previewVariants = cva("", {
         "m-0 p-2 text-[color:var(--muted-foreground)] [font-family:var(--font-mono)] text-xs italic",
       // `.maka-tool-terminal-stream` (+ the `[data-stream]` stdout/stderr tone).
       "terminal-stream":
-        "m-0 px-2 py-1.5 max-h-[180px] overflow-auto [font-family:var(--font-mono)] text-xs [white-space:pre-wrap] [word-break:break-word]"
+        "m-0 px-2 py-1.5 max-h-[180px] overflow-auto [font-family:var(--font-mono)] [font-variant-ligatures:none] text-xs [white-space:pre-wrap] [word-break:break-word]"
         + " data-[stream=stdout]:text-[color:var(--foreground)]"
         + " data-[stream=stderr]:[border-top:1px_solid_var(--border)] data-[stream=stderr]:bg-[oklch(from_var(--destructive)_l_c_h_/_0.04)] data-[stream=stderr]:text-[color:var(--destructive)]",
       // `.maka-tool-terminal-truncated-note` (+ its `> span` min-width reset).
@@ -596,7 +648,7 @@ const previewVariants = cva("", {
         "m-0 text-[color:var(--muted-foreground)] [font-family:var(--font-mono)] text-xs italic",
       // `.maka-office-document-stream` (+ the `[data-stream=stderr]` tone).
       "office-stream":
-        "m-0 px-2.5 py-2 max-h-50 overflow-auto [border:1px_solid_var(--foreground-10)] rounded-[var(--radius-control)] bg-[var(--background)] [font-family:var(--font-mono)] text-xs [white-space:pre-wrap] [word-break:break-word]"
+        "m-0 px-2.5 py-2 max-h-50 overflow-auto [border:1px_solid_var(--foreground-10)] rounded-[var(--radius-control)] bg-[var(--background)] [font-family:var(--font-mono)] [font-variant-ligatures:none] text-xs [white-space:pre-wrap] [word-break:break-word]"
         + " data-[stream=stderr]:bg-[oklch(from_var(--destructive)_l_c_h_/_0.04)] data-[stream=stderr]:text-[color:var(--destructive)]",
 
       // ── explore agent / subagent (shared shell) ───────────────────────────
diff --git a/packages/ui/src/smooth-stream.ts b/packages/ui/src/smooth-stream.ts
index 9ebcadb42c..d103c33b1c 100644
--- a/packages/ui/src/smooth-stream.ts
+++ b/packages/ui/src/smooth-stream.ts
@@ -147,13 +147,25 @@ export interface FrameAdvanceInputs {
  * Pure: how many graphemes should this RAF tick advance? Clamps the
  * EMA into [minCps, maxCps], converts to graphemes for `dtMs`, and
  * never overshoots the available backlog. Always advances at least 1
- * when there is work to do.
+ * when there is work to do — INCLUDING when `dtMs <= 0`.
+ *
+ * The `dtMs <= 0` case is load-bearing, not theoretical: `dtMs` is
+ * "rAF callback timestamp minus wall-clock time at effect re-arm", and
+ * Chromium's rAF timestamps are vsync-aligned, so under main-thread
+ * pressure (an IPC delta burst re-rendering the whole chat) the
+ * timestamp lags the wall clock and `dtMs` clamps to 0 for every tick
+ * in the recovery window. Returning 0 here used to leave
+ * `displayedCount` unchanged, which meant the RAF effect (keyed on
+ * `displayedCount`/`rawLength`) never re-armed — the typewriter died
+ * with a full backlog and the bubble sat BLANK until stream end
+ * snapped the whole answer in at once. Advancing 1 grapheme keeps the
+ * single-owner RAF chain alive at the frame-rate floor until the
+ * timestamps normalize.
  */
 export function computeFrameAdvance(inputs: FrameAdvanceInputs): number {
   const { rawGraphemeCount, displayedGraphemeCount, emaCps, dtMs, minCps, maxCps } = inputs;
   const backlog = rawGraphemeCount - displayedGraphemeCount;
   if (backlog <= 0) return 0;
-  if (dtMs <= 0) return 0;
   const cps = Math.min(Math.max(emaCps, minCps), maxCps);
   const advance = Math.max(1, Math.floor((cps * dtMs) / 1000));
   return Math.min(advance, backlog);
diff --git a/packages/ui/src/stream-fade.ts b/packages/ui/src/stream-fade.ts
new file mode 100644
index 0000000000..84ababf652
--- /dev/null
+++ b/packages/ui/src/stream-fade.ts
@@ -0,0 +1,301 @@
+/**
+ * Per-word fade-in for streamed assistant text (streaming UI rework) — the
+ * replacement for the retired ▎ blink caret. As `useSmoothStreamContent`
+ * reveals more of the displayed prefix, freshly appended text fades in over a
+ * short window; text older than the window is stable and never re-animates.
+ *
+ * Two pieces live here:
+ *  - a pure "append record ring": as the displayed grapheme length grows, each
+ *    growth is recorded as a batch `{ start, at }`. Batches older than
+ *    `FADE_MS` are pruned (they've finished fading), and the ring is capped so
+ *    a very long stream can't grow it without bound. From the ring we read a
+ *    `boundaryOffset` (graphemes before it are stable — never wrapped) and the
+ *    age of any offset (drives the CSS `animation-delay`).
+ *  - `useStreamFade`, a thin React wrapper holding the ring in a ref, plus
+ *    `tokenizeFade`, the pure word/char splitter the Markdown rehype pass and
+ *    the plain-text renderer share.
+ *
+ * Offsets are GRAPHEME offsets (via `segmentGraphemes`, same as the smoother)
+ * so we never split an emoji / surrogate pair. The negative `animation-delay`
+ * (= -age) makes the CSS animation resume mid-flight, so React re-mounting the
+ * spans on each streaming re-render continues the fade instead of restarting
+ * it. Under snap (reduced-motion / visual-smoke / OS reduced-motion) the hook
+ * returns `undefined` and callers skip wrapping entirely — the snap path shows
+ * the final text at full opacity with no spans.
+ */
+
+import { useMemo, useRef } from 'react';
+import { segmentGraphemes } from './smooth-stream.js';
+
+/**
+ * Fade window: text younger than this (ms) is still animating in. Pinned to
+ * `--duration-large` (280ms) so it equals the `.maka-stream-fade` CSS animation
+ * duration — the negative `animation-delay` (= -age) is only correct when the
+ * JS window matches the CSS window. Retuning the fade means changing both.
+ */
+export const FADE_MS = 280;
+
+/** Hard cap on retained batches so a long stream can't grow the ring forever. */
+export const MAX_FADE_BATCHES = 512;
+
+/** One recorded append: graphemes at `[start, nextStart)` first appeared at `at`. */
+export interface FadeBatch {
+  start: number;
+  at: number;
+}
+
+export interface FadeRingState {
+  batches: FadeBatch[];
+  /** Last observed displayed grapheme length. */
+  len: number;
+  /** False until the first observation, which seeds `len` without a batch. */
+  seeded: boolean;
+}
+
+export function createFadeRing(): FadeRingState {
+  return { batches: [], len: 0, seeded: false };
+}
+
+/**
+ * Fold a new displayed grapheme length into the ring at time `now`:
+ *  - first observation seeds `len` with no batch (mount text isn't "new");
+ *  - growth records a batch starting at the previous length;
+ *  - shrink (session switch / clear) resets the ring;
+ *  - batches older than `fadeMs` are pruned, then the ring is capped
+ *    (oldest dropped) — capping only advances the stable boundary, never
+ *    re-animates text.
+ * Pure aside from mutating the passed-in `state`.
+ */
+export function updateFadeRing(
+  state: FadeRingState,
+  len: number,
+  now: number,
+  fadeMs: number = FADE_MS,
+  maxBatches: number = MAX_FADE_BATCHES,
+): void {
+  if (!state.seeded) {
+    state.len = len;
+    state.seeded = true;
+  } else if (len > state.len) {
+    state.batches.push({ start: state.len, at: now });
+    state.len = len;
+  } else if (len < state.len) {
+    state.batches = [];
+    state.len = len;
+  }
+  while (state.batches.length > 0 && now - state.batches[0]!.at >= fadeMs) {
+    state.batches.shift();
+  }
+  if (state.batches.length > maxBatches) {
+    state.batches.splice(0, state.batches.length - maxBatches);
+  }
+}
+
+/** Graphemes before this offset are stable (finished fading) — never wrapped. */
+export function fadeBoundary(state: FadeRingState): number {
+  return state.batches.length > 0 ? state.batches[0]!.start : state.len;
+}
+
+/**
+ * Age (ms) of the grapheme at `offset` — `now` minus the appearance time of the
+ * batch that first covered it. Offsets in a pruned/stable region return their
+ * batch age of 0 (they won't be wrapped anyway). Query order does not matter.
+ */
+export function fadeAgeAt(state: FadeRingState, offset: number, now: number): number {
+  let at = now;
+  for (let i = state.batches.length - 1; i >= 0; i -= 1) {
+    if (offset >= state.batches[i]!.start) {
+      at = state.batches[i]!.at;
+      break;
+    }
+  }
+  return Math.max(0, now - at);
+}
+
+/** Snapshot the fade state for one render: a stable boundary + an age lookup. */
+export interface StreamFade {
+  boundaryOffset: number;
+  /**
+   * Total grapheme length of the raw source buffer the ring measured
+   * (`displayed`). The rehype pass renders markdown, which hides syntax
+   * (link URLs, emphasis markers, fence chars), so visible-text offsets lag
+   * raw offsets; this anchors the two coordinate systems at the tail.
+   */
+  rawLength: number;
+  ageAt(offset: number): number;
+}
+
+function nowMs(): number {
+  return typeof performance !== 'undefined' && typeof performance.now === 'function'
+    ? performance.now()
+    : Date.now();
+}
+
+/**
+ * React wrapper: fold the current `displayed` prefix into a ref-held ring and
+ * return a per-render {@link StreamFade}, or `undefined` when `active` is false
+ * (snap paths, or non-streaming). Recording happens in render, guarded by a
+ * length change, so the boundary/age reflect the text being rendered this frame
+ * (a StrictMode double-invoke with the same length is idempotent).
+ */
+export function useStreamFade(displayed: string, active: boolean): StreamFade | undefined {
+  const ringRef = useRef<FadeRingState>(createFadeRing());
+  const len = useMemo(() => segmentGraphemes(displayed).length, [displayed]);
+  if (!active) {
+    // Reset so a later activation doesn't fade the whole (already-visible) blob.
+    ringRef.current = createFadeRing();
+    return undefined;
+  }
+  const now = nowMs();
+  const ring = ringRef.current;
+  // Fold this frame's length in (records growth on change; always prunes so
+  // ages advance and the stable boundary moves forward frame to frame).
+  updateFadeRing(ring, len, now);
+  const boundaryOffset = fadeBoundary(ring);
+  const snapshotRing: FadeRingState = { batches: ring.batches.slice(), len: ring.len, seeded: ring.seeded };
+  return {
+    boundaryOffset,
+    rawLength: len,
+    ageAt: (offset: number) => fadeAgeAt(snapshotRing, offset, now),
+  };
+}
+
+// --- Word / char tokenizer -------------------------------------------------
+
+const CJK_RE = /[぀-ヿ㐀-䶿一-鿿豈-﫿가-힯]/;
+
+function isSpaceGrapheme(g: string): boolean {
+  return /^\s+$/.test(g);
+}
+
+function isWordGrapheme(g: string): boolean {
+  return /^[\p{L}\p{N}_'-]$/u.test(g) && !CJK_RE.test(g);
+}
+
+export interface FadeToken {
+  text: string;
+  /** Grapheme offset of this token's first grapheme. */
+  offset: number;
+  /** True when this token should fade in (non-space and at/after the boundary). */
+  fade: boolean;
+}
+
+// Minimal hast shapes — typed loosely so stream-fade takes no `hast` dep.
+export interface HastNode {
+  type: string;
+  tagName?: string;
+  value?: string;
+  properties?: Record<string, unknown>;
+  children?: HastNode[];
+}
+
+/**
+ * A rehype plugin factory that wraps freshly streamed words/chars in
+ * `.maka-stream-fade` spans (streaming UI rework). Runs AFTER rehype-highlight,
+ * so code is already tokenized under `<pre>`/`<code>`. Walks text nodes in
+ * document order tracking a visible-grapheme `cursor`; text inside code advances
+ * the cursor but is NOT wrapped (leaving highlight DOM untouched avoids
+ * fade-driven re-highlight jitter). Outside code, each token at/after the fade
+ * boundary is wrapped with a negative `animation-delay` (= -age) so the entrance
+ * resumes mid-flight instead of re-flashing on each streaming re-render. Only
+ * the post-boundary tail is wrapped (zero cost for the stable body).
+ *
+ * The ring measures offsets in RAW buffer graphemes, but this pass walks
+ * rendered VISIBLE text, which is shorter by every hidden markdown character
+ * (link URLs alone can hide dozens). The two coordinate systems are anchored
+ * at the tail: count the visible graphemes, shift the boundary and the age
+ * lookups by the total hidden amount. Exact for tokens after the last hidden
+ * syntax — the streaming tail, where fades live; tokens straddling hidden
+ * syntax near the boundary wrap slightly eagerly (errs toward motion).
+ *
+ * Pure (no react-markdown dep) so the offset behavior is unit-tested directly.
+ */
+export function streamFadeRehypePlugin(fade: StreamFade) {
+  return () => (tree: HastNode): void => {
+    const visibleTotal = countVisibleGraphemes(tree);
+    const shift = Math.max(0, fade.rawLength - visibleTotal);
+    const boundary = Math.max(0, fade.boundaryOffset - shift);
+    let cursor = 0;
+    const walk = (node: HastNode, inCode: boolean): void => {
+      if (!Array.isArray(node.children)) return;
+      const nextInCode =
+        inCode || (node.type === 'element' && (node.tagName === 'code' || node.tagName === 'pre'));
+      const out: HastNode[] = [];
+      for (const child of node.children) {
+        if (child.type === 'text') {
+          const value = child.value ?? '';
+          if (nextInCode) {
+            cursor += segmentGraphemes(value).length;
+            out.push(child);
+            continue;
+          }
+          const { tokens, length } = tokenizeFade(value, cursor, boundary);
+          cursor += length;
+          for (const token of tokens) {
+            if (token.fade) {
+              out.push({
+                type: 'element',
+                tagName: 'span',
+                properties: {
+                  className: ['maka-stream-fade'],
+                  style: `animation-delay:-${Math.round(fade.ageAt(token.offset + shift))}ms`,
+                },
+                children: [{ type: 'text', value: token.text }],
+              });
+            } else {
+              out.push({ type: 'text', value: token.text });
+            }
+          }
+        } else {
+          walk(child, nextInCode);
+          out.push(child);
+        }
+      }
+      node.children = out;
+    };
+    walk(tree, false);
+  };
+}
+
+/** Total graphemes across all text nodes — the same accounting walk() uses. */
+function countVisibleGraphemes(node: HastNode): number {
+  if (node.type === 'text') return segmentGraphemes(node.value ?? '').length;
+  let total = 0;
+  for (const child of node.children ?? []) total += countVisibleGraphemes(child);
+  return total;
+}
+
+/**
+ * Split `text` (starting at grapheme `startOffset`) into fade tokens:
+ * whitespace runs and Latin word runs stay grouped; CJK / emoji / punctuation
+ * are per-grapheme so a space-less CJK line still fades character by character.
+ * A token fades when it is non-whitespace and its offset is at/after
+ * `boundaryOffset`. Returns tokens in order plus the total graphemes consumed.
+ */
+export function tokenizeFade(
+  text: string,
+  startOffset: number,
+  boundaryOffset: number,
+): { tokens: FadeToken[]; length: number } {
+  const gs = segmentGraphemes(text);
+  const tokens: FadeToken[] = [];
+  let i = 0;
+  while (i < gs.length) {
+    const g = gs[i]!;
+    let j = i + 1;
+    if (isSpaceGrapheme(g)) {
+      while (j < gs.length && isSpaceGrapheme(gs[j]!)) j += 1;
+    } else if (isWordGrapheme(g)) {
+      while (j < gs.length && isWordGrapheme(gs[j]!)) j += 1;
+    }
+    const offset = startOffset + i;
+    const space = isSpaceGrapheme(g);
+    tokens.push({
+      text: gs.slice(i, j).join(''),
+      offset,
+      fade: !space && offset >= boundaryOffset,
+    });
+    i = j;
+  }
+  return { tokens, length: gs.length };
+}
diff --git a/packages/ui/src/tool-activity.tsx b/packages/ui/src/tool-activity.tsx
index b31075d609..69f5053085 100644
--- a/packages/ui/src/tool-activity.tsx
+++ b/packages/ui/src/tool-activity.tsx
@@ -1,12 +1,35 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type ComponentType } from 'react';
 import { type ToolResultContent } from '@maka/core';
-import { AlertOctagon, Check, Clock, Copy, Repeat, X } from './icons.js';
+import {
+  AlertOctagon,
+  Check,
+  ChevronRight,
+  Clock,
+  Copy,
+  FileText,
+  Globe,
+  Repeat,
+  Search,
+  Settings,
+  SquarePen,
+  Terminal,
+  X,
+  type LucideProps,
+} from './icons.js';
 import { useClipboardCopyFeedback } from './clipboard-feedback.js';
 import { detectUiLocale } from './locale-helpers.js';
 import { type ToolActivityItem, type ToolOutputChunk } from './materialize.js';
+import {
+  activeTrowTool,
+  isTrowRunning,
+  summarizeTrowTools,
+  trowActivityKind,
+  trowNeedsAttention,
+  type TrowActivityKind,
+} from './tool-activity/trow-summary.js';
 import { Alert, AlertAction, AlertDescription, AlertTitle } from './primitives/alert.js';
 import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from './primitives/collapsible.js';
-import { LiveIndicator, previewVariants, streamVariants, toolVariants } from './primitives/chat.js';
+import { LiveIndicator, previewVariants, streamVariants, TextShimmer, toolVariants } from './primitives/chat.js';
 import { redactSecrets } from './redact.js';
 import { Button as UiButton, cn } from './ui.js';
 import { describeLoadToolResult, formatRedactedJson, formatToolIntent, loadToolDisplayName } from './tool-format.js';
@@ -176,6 +199,20 @@ function isPermissionDeniedToolResult(result: ToolActivityItem['result']): boole
   return result?.kind === 'text' && formatUserVisibleToolText(result.text).trim() === '用户已拒绝权限请求';
 }
 
+/**
+ * Pull the shell command string out of a command-tool's args (bash / shell).
+ * Used to render a single `$ <command>` invocation line while the tool is in
+ * flight — the settled terminal result preview already prints the command in
+ * its header, so this only fills the running gap. Returns undefined for a
+ * non-command shape so the caller falls back to the compact redacted-args view.
+ */
+function extractToolCommand(args: unknown): string | undefined {
+  if (!args || typeof args !== 'object') return undefined;
+  const record = args as Record<string, unknown>;
+  const raw = record.command ?? record.cmd ?? record.script;
+  return typeof raw === 'string' && raw.trim().length > 0 ? raw : undefined;
+}
+
 export function ToolActivity(props: { items: ToolActivityItem[] }) {
   return (
     <section className={toolVariants({ part: 'container' })} aria-label="工具调用记录">
@@ -191,9 +228,6 @@ export function ToolActivity(props: { items: ToolActivityItem[] }) {
 }
 
 function ToolActivityCard({ item }: { item: ToolActivityItem }) {
-  const duration = formatDuration(item.durationMs);
-  const errored = item.status === 'errored';
-  const permissionDenied = isPermissionDeniedToolResult(item.result);
   // Controlled open that follows item.status: a card that defaults open while
   // pending/running auto-collapses when it settles to completed/interrupted
   // (restoring the pre-Collapsible native-disclosure behavior, where
@@ -205,6 +239,7 @@ function ToolActivityCard({ item }: { item: ToolActivityItem }) {
   useEffect(() => {
     setOpen(isOpenByDefault(item.status));
   }, [item.status]);
+  const duration = formatDuration(item.durationMs);
   return (
     <Collapsible
       data-slot="tool"
@@ -222,35 +257,208 @@ function ToolActivityCard({ item }: { item: ToolActivityItem }) {
         </span>
       </CollapsibleTrigger>
       <CollapsiblePanel>
-        <div className={toolVariants({ part: 'body' })}>
-          {errored && <ToolErrorBanner result={item.result} />}
-          {item.intent && !permissionDenied && <p className={toolVariants({ part: 'intent' })}>{formatToolIntent(item.intent)}</p>}
-          {item.args !== undefined && !permissionDenied && (
-            <pre className={`maka-code ${toolVariants({ part: 'args' })}`}>{formatRedactedJson(item.args)}</pre>
-          )}
-          {item.outputChunks && item.outputChunks.length > 0 && (
-            <ToolOutputStream
-              chunks={item.outputChunks}
-              live={item.status === 'running' || item.status === 'pending'}
-              interrupted={item.status === 'interrupted'}
-              truncated={item.outputTruncated === true}
-            />
-          )}
-          {item.result && !permissionDenied && (
-            isConnectorTool(item.toolName) && item.result.kind === 'json' ? (
-              <LoadToolResultPreview args={item.args} value={item.result.value} />
-            ) : isCronTool(item.toolName) && item.result.kind === 'json' ? (
-              <CronJobResultPreview toolName={item.toolName} value={item.result.value} />
-            ) : (
-              <ToolResultPreview content={item.result} />
-            )
-          )}
+        <ToolCardBody item={item} />
+      </CollapsiblePanel>
+    </Collapsible>
+  );
+}
+
+/**
+ * The tool detail body — error banner, intent, args, live output stream, and
+ * result preview — shared by the boxed `ToolActivityCard` and the flat trow
+ * rows. Extracted so the trow can render the same details without the card
+ * frame. Args/intent stay routed through `formatRedactedJson` /
+ * `formatToolIntent` (tool-args-redaction-contract).
+ */
+function ToolCardBody({ item }: { item: ToolActivityItem }) {
+  const errored = item.status === 'errored';
+  const permissionDenied = isPermissionDeniedToolResult(item.result);
+  const running = item.status === 'running' || item.status === 'pending';
+  const command = trowActivityKind(item.toolName) === 'command' ? extractToolCommand(item.args) : undefined;
+  // A terminal result preview already prints `$ cmd` + cwd + exit in its head,
+  // so the invocation line only fills the in-flight gap (and any non-terminal
+  // result). The compact redacted-args fallback still routes through
+  // formatRedactedJson (tool-args-redaction-contract).
+  const resultIsTerminal = item.result?.kind === 'terminal';
+  const showInvocation = !permissionDenied && !resultIsTerminal && (command !== undefined || item.args !== undefined);
+  // While running the live stream is the output; once a structured result
+  // preview exists it is the single quiet output block — never render both
+  // (the old body double-printed stdout as stream + preview).
+  const showLiveStream = !!item.outputChunks && item.outputChunks.length > 0 && (running || !item.result);
+  return (
+    // Flat, left-border-indented detail area — one visual language with the
+    // 深度思考 disclosure body. No nested card frame, no per-row rounded boxes.
+    <div className="mt-1 ml-2 flex flex-col gap-1.5 border-l border-[var(--border)] pl-2.5 pb-1">
+      {errored && <ToolErrorBanner result={item.result} />}
+      {showInvocation && (
+        command !== undefined ? (
+          <code className="[font-family:var(--font-mono)] [font-variant-ligatures:none] text-[length:var(--font-size-caption)] text-[color:var(--foreground-secondary)] [white-space:pre-wrap] [word-break:break-word]">
+            <span className="select-none text-[color:var(--muted-foreground)]">$ </span>
+            {redactSecrets(command)}
+          </code>
+        ) : (
+          <pre className="m-0 max-h-40 overflow-auto [font-family:var(--font-mono)] [font-variant-ligatures:none] text-[length:var(--font-size-caption)] leading-normal text-[color:var(--foreground-secondary)] [white-space:pre-wrap] [word-break:break-word]">{formatRedactedJson(item.args)}</pre>
+        )
+      )}
+      {showLiveStream && (
+        <ToolOutputStream
+          chunks={item.outputChunks!}
+          live={running}
+          interrupted={item.status === 'interrupted'}
+          truncated={item.outputTruncated === true}
+        />
+      )}
+      {item.result && !permissionDenied && (
+        isConnectorTool(item.toolName) && item.result.kind === 'json' ? (
+          <LoadToolResultPreview args={item.args} value={item.result.value} />
+        ) : isCronTool(item.toolName) && item.result.kind === 'json' ? (
+          <CronJobResultPreview toolName={item.toolName} value={item.result.value} />
+        ) : (
+          <ToolResultPreview content={item.result} />
+        )
+      )}
+    </div>
+  );
+}
+
+// Per-bucket icon for a trow's summary row + flat tool rows. Kept here (not in
+// the pure summary module) because icons are React components.
+const TROW_KIND_ICON: Record<TrowActivityKind, ComponentType<LucideProps>> = {
+  read: FileText,
+  search: Search,
+  websearch: Globe,
+  webfetch: Globe,
+  edit: SquarePen,
+  command: Terminal,
+  explore: Search,
+  browser: Globe,
+  tool: Settings,
+};
+
+function trowKindIcon(toolName: string): ComponentType<LucideProps> {
+  return TROW_KIND_ICON[trowActivityKind(toolName)];
+}
+
+/**
+ * Codex-style tool trow (streaming UI rework): one contiguous run of tool
+ * activity rendered as a single flat, borderless disclosure — replacing the
+ * boxed "工具调用 N" card stack inside a turn. A single-tool group is just that
+ * tool's own row (no double nesting); a multi-tool group adds a summary line
+ * (shimmering active-tool description while running; bucketed counts once
+ * settled) that expands to the flat-stacked tool rows.
+ */
+export function ToolTrow({ items }: { items: ToolActivityItem[] }) {
+  if (items.length === 0) return null;
+  if (items.length === 1) return <ToolTrowRow item={items[0]!} />;
+  return <ToolTrowGroup items={items} />;
+}
+
+function ToolTrowGroup({ items }: { items: ToolActivityItem[] }) {
+  const running = isTrowRunning(items);
+  const attention = trowNeedsAttention(items);
+  const active = activeTrowTool(items) ?? items[0]!;
+  // Controlled open: default collapsed, but a waiting_permission or errored
+  // tool forces the group open — a permission prompt must not hide behind the
+  // summary line, and an error banner must stay diagnosable (the old boxed
+  // cards kept errored tools expanded). The user's manual collapse sticks
+  // while `attention` stays true. No defaultOpen
+  // (disclosure-collapsible-contract) — controlled open re-syncs from status,
+  // like ToolActivityCard.
+  const [open, setOpen] = useState(attention);
+  useEffect(() => {
+    if (attention) setOpen(true);
+  }, [attention]);
+  const hasError = items.some((item) => item.status === 'errored');
+  const SummaryIcon = trowKindIcon(active.toolName);
+  const summary = running
+    ? formatUserVisibleToolText(active.intent ?? '') || resolveToolDisplayName(active)
+    : summarizeTrowTools(items);
+  return (
+    <Collapsible className="flex flex-col" data-trow="group" open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 py-0.5 text-left">
+        <SummaryIcon size={16} strokeWidth={1.75} aria-hidden="true" className={cn('shrink-0', hasError ? 'text-[color:var(--destructive)]' : 'text-[color:var(--muted-foreground)]')} />
+        {running ? (
+          <TextShimmer active={running} className="min-w-0 truncate text-[length:var(--font-size-base)]">{summary}</TextShimmer>
+        ) : (
+          <span className={cn('min-w-0 truncate text-[length:var(--font-size-base)]', hasError ? 'text-[color:var(--destructive)]' : 'text-[color:var(--muted-foreground)]')}>{summary}</span>
+        )}
+        <ChevronRight
+          size={14}
+          strokeWidth={2}
+          aria-hidden="true"
+          className="ml-auto shrink-0 text-[color:var(--muted-foreground)] opacity-0 [transition:transform_var(--duration-quick)_var(--ease-out-strong),opacity_var(--duration-quick)_var(--ease-out-strong)] group-hover:opacity-100 group-data-[panel-open]:rotate-90 group-data-[panel-open]:opacity-100"
+        />
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <div className="mt-0.5 ml-2 flex flex-col gap-0.5 border-l border-[var(--border)] pl-2.5">
+          {items.map((item) => (
+            <ToolTrowRow key={item.toolUseId} item={item} />
+          ))}
         </div>
       </CollapsiblePanel>
     </Collapsible>
   );
 }
 
+/**
+ * A single flat, borderless tool row inside a trow (or a whole single-tool
+ * trow). A caption/mono weak-color header (status dot + name + duration/status)
+ * expands to the shared `ToolCardBody`. Controlled open by status —
+ * waiting_permission / running / errored open, settled collapsed — so a
+ * permission prompt is never hidden. No card frame (`toolVariants({item})`),
+ * per the flat trow visual language.
+ */
+function ToolTrowRow({ item }: { item: ToolActivityItem }) {
+  const [open, setOpen] = useState(isOpenByDefault(item.status));
+  useEffect(() => {
+    setOpen(isOpenByDefault(item.status));
+  }, [item.status]);
+  const duration = formatDuration(item.durationMs);
+  const running = item.status === 'running' || item.status === 'pending' || item.status === 'waiting_permission';
+  const errored = item.status === 'errored';
+  const RowIcon = trowKindIcon(item.toolName);
+  // One row language with the multi-tool summary row: a kind icon + a
+  // user-language phrase, never the old status-dot + mono tool-name + status
+  // word. Running shimmers the model's intent (or the friendly tool name);
+  // settled prefers the intent, falls back to the display name.
+  const runningSummary = formatUserVisibleToolText(item.intent ?? '') || resolveToolDisplayName(item);
+  const summaryTone = errored ? 'text-[color:var(--destructive)]' : 'text-[color:var(--muted-foreground)]';
+  return (
+    <Collapsible className="flex flex-col" data-trow="row" data-status={item.status} open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 py-0.5 text-left">
+        <RowIcon
+          size={16}
+          strokeWidth={1.75}
+          aria-hidden="true"
+          className={cn('shrink-0', errored ? 'text-[color:var(--destructive)]' : 'text-[color:var(--muted-foreground)]')}
+        />
+        {running ? (
+          <TextShimmer active={running} className="min-w-0 truncate text-[length:var(--font-size-base)]">{runningSummary}</TextShimmer>
+        ) : item.intent ? (
+          <span className={cn('min-w-0 truncate text-[length:var(--font-size-base)]', summaryTone)}>{formatToolIntent(item.intent)}</span>
+        ) : (
+          <span className={cn('min-w-0 truncate text-[length:var(--font-size-base)]', summaryTone)}>{resolveToolDisplayName(item)}</span>
+        )}
+        {/* Quiet meta: the duration + chevron ride in on hover / open, matching
+            the multi-tool summary row — status is carried by the shimmer /
+            destructive tint, so no always-on status word. */}
+        <span className="ml-auto inline-flex shrink-0 items-center gap-2 text-[length:var(--font-size-caption)] text-[color:var(--muted-foreground)] opacity-0 [transition:opacity_var(--duration-quick)_var(--ease-out-strong)] group-hover:opacity-100 group-data-[panel-open]:opacity-100">
+          {duration && <span className="[font-variant-numeric:tabular-nums]">{duration}</span>}
+          <ChevronRight
+            size={14}
+            strokeWidth={2}
+            aria-hidden="true"
+            className="[transition:transform_var(--duration-quick)_var(--ease-out-strong)] group-data-[panel-open]:rotate-90"
+          />
+        </span>
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <ToolCardBody item={item} />
+      </CollapsiblePanel>
+    </Collapsible>
+  );
+}
+
 /**
  * PR-UI-12 — live stdout/stderr stream from PR-REAL-4 `tool_output_delta`.
  *
diff --git a/packages/ui/src/tool-activity/trow-summary.ts b/packages/ui/src/tool-activity/trow-summary.ts
new file mode 100644
index 0000000000..04495fb25e
--- /dev/null
+++ b/packages/ui/src/tool-activity/trow-summary.ts
@@ -0,0 +1,136 @@
+/**
+ * Pure helpers for the Codex-style tool "trow" summary (issue: streaming UI
+ * rework). A trow groups a contiguous run of tool activity into one collapsed
+ * row; when every tool in the group has settled, the summary line buckets them
+ * by activity kind and prints a compact Chinese count phrase like
+ * "读取 3 个文件，搜索 2 次". Modeled on pawwork's `contextTrowSummaryText`,
+ * translated to maka's canonical tool names + inline Chinese strings (no i18n
+ * catalog dependency).
+ *
+ * Kept pure + separately unit-tested; the React trow renders it and maps the
+ * kind to an icon.
+ */
+
+import type { ToolActivityItem } from '../materialize.js';
+
+export type TrowActivityKind =
+  | 'read'
+  | 'search'
+  | 'websearch'
+  | 'webfetch'
+  | 'edit'
+  | 'command'
+  | 'explore'
+  | 'browser'
+  | 'tool';
+
+/**
+ * Bucket a maka tool by its canonical name (case-insensitive). `browser_*`
+ * tools collapse to one `browser` bucket; anything unrecognized falls back to
+ * the generic `tool` bucket so the summary always renders.
+ */
+export function trowActivityKind(toolName: string): TrowActivityKind {
+  const name = toolName.toLowerCase();
+  if (name.startsWith('browser_')) return 'browser';
+  switch (name) {
+    case 'read':
+    case 'list':
+      return 'read';
+    case 'glob':
+    case 'grep':
+      return 'search';
+    case 'websearch':
+    case 'web_search':
+      return 'websearch';
+    case 'webfetch':
+    case 'web_fetch':
+      return 'webfetch';
+    case 'write':
+    case 'edit':
+    case 'multiedit':
+    case 'apply_patch':
+      return 'edit';
+    case 'bash':
+    case 'shell':
+      return 'command';
+    case 'exploreagent':
+    case 'explore_agent':
+      return 'explore';
+    default:
+      return 'tool';
+  }
+}
+
+/** Chinese count clause per bucket, e.g. read(3) → "读取 3 个文件". */
+const KIND_CLAUSE: Record<TrowActivityKind, (n: number) => string> = {
+  read: (n) => `读取 ${n} 个文件`,
+  search: (n) => `搜索 ${n} 次`,
+  websearch: (n) => `联网搜索 ${n} 次`,
+  webfetch: (n) => `抓取 ${n} 个网页`,
+  edit: (n) => `编辑 ${n} 个文件`,
+  command: (n) => `运行 ${n} 条命令`,
+  explore: (n) => `探索 ${n} 次`,
+  browser: (n) => `浏览器操作 ${n} 次`,
+  tool: (n) => `调用 ${n} 个工具`,
+};
+
+function isFailed(status: ToolActivityItem['status']): boolean {
+  return status === 'errored';
+}
+
+/**
+ * Build the settled-state summary line for a trow: one clause per distinct
+ * activity kind in first-seen order, joined with "，", then a trailing
+ * "N 个失败" clause when any tool errored. A failed tool still counts toward
+ * its type bucket (a failed read is "读取 1 个文件" + "1 个失败").
+ */
+export function summarizeTrowTools(items: readonly ToolActivityItem[]): string {
+  const order: TrowActivityKind[] = [];
+  const counts = new Map<TrowActivityKind, number>();
+  let failed = 0;
+  for (const item of items) {
+    const kind = trowActivityKind(item.toolName);
+    if (!counts.has(kind)) order.push(kind);
+    counts.set(kind, (counts.get(kind) ?? 0) + 1);
+    if (isFailed(item.status)) failed += 1;
+  }
+  const clauses = order.map((kind) => KIND_CLAUSE[kind](counts.get(kind) ?? 0));
+  if (failed > 0) clauses.push(`${failed} 个失败`);
+  return clauses.join('，');
+}
+
+/**
+ * The "active" tool in a running trow — the last one still in flight
+ * (running / pending / waiting_permission). Its description drives the
+ * shimmering summary line while the group is working. Falls back to the last
+ * item so the summary is never empty.
+ */
+export function activeTrowTool(items: readonly ToolActivityItem[]): ToolActivityItem | undefined {
+  for (let i = items.length - 1; i >= 0; i -= 1) {
+    const status = items[i]!.status;
+    if (status === 'running' || status === 'pending' || status === 'waiting_permission') {
+      return items[i];
+    }
+  }
+  return items[items.length - 1];
+}
+
+/** True when any tool in the group is still in flight. */
+export function isTrowRunning(items: readonly ToolActivityItem[]): boolean {
+  return items.some(
+    (item) =>
+      item.status === 'running' || item.status === 'pending' || item.status === 'waiting_permission',
+  );
+}
+
+/**
+ * True when the group must force itself open: a permission prompt or an error
+ * banner is inside. Both are actionable/diagnostic content that a collapsed
+ * summary line would hide — the old boxed cards kept errored tools expanded,
+ * and the trow keeps that behavior.
+ */
+export function trowNeedsAttention(items: readonly ToolActivityItem[]): boolean {
+  return items.some(
+    (item) => item.status === 'waiting_permission' || item.status === 'errored',
+  );
+}
diff --git a/packages/ui/stories/chat-surface.stories.tsx b/packages/ui/stories/chat-surface.stories.tsx
index 118a28c689..288af1ded8 100644
--- a/packages/ui/stories/chat-surface.stories.tsx
+++ b/packages/ui/stories/chat-surface.stories.tsx
@@ -295,6 +295,92 @@ const longMessages: StoredMessage[] = [
   ),
 ];
 
+// Multi-step reasoning turn (streaming UI rework): two think->say->call steps
+// in a single turn. Each step persists an assistant row (thinking + text) plus
+// tool_calls tagged with that row's id as `stepId`, so the turn timeline
+// reconstructs the real order — 深度思考 → answer text → tool trow — per step,
+// instead of lumping every tool into one trailing group.
+const multiStepConversation: StoredMessage[] = [
+  user('msg-user-multistep', 'turn-multistep', 12, '看一下 stream-fade 的环逻辑有没有边界问题，然后跑一下单测。'),
+  {
+    type: 'tool_call',
+    id: 'tool-read-stream-fade',
+    turnId: 'turn-multistep',
+    ts: NOW - 11 * 60_000,
+    toolName: 'Read',
+    displayName: '读取 stream-fade.ts',
+    intent: '读取淡入环的实现，确认窗口滑动与上限',
+    stepId: 'msg-assistant-step-1',
+    args: { file_path: 'packages/ui/src/stream-fade.ts' },
+  },
+  {
+    type: 'tool_result',
+    id: 'tool-read-stream-fade-result',
+    turnId: 'turn-multistep',
+    ts: NOW - 11 * 60_000 + 900,
+    toolUseId: 'tool-read-stream-fade',
+    isError: false,
+    durationMs: 640,
+    content: {
+      kind: 'text',
+      text: 'export function updateFadeRing(...) { /* prune + cap */ }',
+    },
+  },
+  {
+    type: 'assistant',
+    id: 'msg-assistant-step-1',
+    turnId: 'turn-multistep',
+    ts: NOW - 10 * 60_000,
+    text: '环逻辑没问题：增长记录批次、超窗剪枝、再按上限截断，收缩时整体重置。接下来我跑一下单测确认。',
+    thinking: {
+      text: '先读实现，确认 boundary 取的是最老存活批次的 start，age 用 now 减去覆盖该 offset 的批次时间。看起来窗口滑动和上限都覆盖了，值得跑一遍测试坐实。',
+    },
+    modelId: 'claude-sonnet-4-5',
+  },
+  {
+    type: 'tool_call',
+    id: 'tool-run-tests',
+    turnId: 'turn-multistep',
+    ts: NOW - 10 * 60_000 + 500,
+    toolName: 'Bash',
+    displayName: '运行 stream-fade 单测',
+    intent: '执行 node --test 跑淡入环与 tokenizer 的单测',
+    stepId: 'msg-assistant-step-2',
+    args: { cmd: 'node --test dist/main/__tests__/stream-fade.test.js' },
+  },
+  {
+    type: 'tool_result',
+    id: 'tool-run-tests-result',
+    turnId: 'turn-multistep',
+    ts: NOW - 9 * 60_000,
+    toolUseId: 'tool-run-tests',
+    isError: false,
+    durationMs: 1930,
+    content: {
+      kind: 'terminal',
+      cwd: '/workspace/maka-agent/apps/desktop',
+      cmd: 'node --test dist/main/__tests__/stream-fade.test.js',
+      status: 'completed',
+      exitCode: 0,
+      stdout: 'tests 13\npass 13\nfail 0\n',
+      stderr: '',
+      stdoutTruncated: false,
+      stderrTruncated: false,
+    },
+  },
+  {
+    type: 'assistant',
+    id: 'msg-assistant-step-2',
+    turnId: 'turn-multistep',
+    ts: NOW - 8 * 60_000,
+    text: '13 个单测全绿，环的窗口滑动、乱序快照取龄和上限都被覆盖。边界没有问题。',
+    thinking: {
+      text: '测试包含窗口滑动、乱序 age 查询与上限三类，全过说明剪枝和 cap 的顺序是对的，可以收尾。',
+    },
+    modelId: 'claude-sonnet-4-5',
+  },
+];
+
 export const EmptyChat: Story = {
   render: () => (
     <ChatSurface
@@ -346,6 +432,16 @@ export const WithToolActivity: Story = {
   ),
 };
 
+export const MultiStepReasoning: Story = {
+  render: () => (
+    <ChatSurface
+      chat={{
+        messages: multiStepConversation,
+      }}
+    />
+  ),
+};
+
 export const BranchedConversation: Story = {
   render: () => (
     <ChatSurface