From 6eadb62eb769d6dd4c9bc64ea345b6e18007f0a4 Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Tue, 1 Sep 2026 21:27:15 +0000
Subject: [PATCH 1/9] perf(chat): coalesce stream events per frame and pace
 text release

Every NDJSON event used to commit its own React update and re-parse the
whole partial answer through react-markdown, so long replies grew
quadratically slower. Stream events now land in a frame buffer that
flushes at most once per animation frame, releases answer and thinking
text at a steady pace with a twelve-frame catch-up, and settles
synchronously on completion, failure and abort. Streaming markdown is
split at the last completed block so only the tail is re-parsed each
frame. Applied to both the consultation hook and the rectification chat.

BUG-473

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 docs/BUG_HISTORY.md                           |  16 ++
 .../src/components/chat-message-content.tsx   |  57 ++++-
 frontend/src/components/chat-message-row.tsx  |   1 +
 .../components/rectification-agentic-chat.tsx | 106 +++++----
 frontend/src/hooks/use-consultation-run.ts    |  79 ++++---
 frontend/src/lib/chat-markdown-split.ts       |  69 ++++++
 frontend/src/lib/stream-frame-buffer.ts       | 212 ++++++++++++++++++
 frontend/tests/chat-markdown-split.test.ts    |  74 ++++++
 .../tests/home-streaming-render-split.test.ts |  47 +++-
 frontend/tests/stream-frame-buffer.test.ts    | 210 +++++++++++++++++
 10 files changed, 778 insertions(+), 93 deletions(-)
 create mode 100644 frontend/src/lib/chat-markdown-split.ts
 create mode 100644 frontend/src/lib/stream-frame-buffer.ts
 create mode 100644 frontend/tests/chat-markdown-split.test.ts
 create mode 100644 frontend/tests/stream-frame-buffer.test.ts

diff --git a/docs/BUG_HISTORY.md b/docs/BUG_HISTORY.md
index 13f0ec14..64b141c6 100644
--- a/docs/BUG_HISTORY.md
+++ b/docs/BUG_HISTORY.md
@@ -7266,3 +7266,19 @@
 - 相关记录：BUG-453、BUG-463
 - 复发自：BUG-463（idle 不再追问，拒答路径与 occupation blocking 仍挡住采用卡）
 - 修复版本：待发布
+
+## BUG-473 | 流式回答每个网络事件都全量重渲染，长回答越写越卡
+
+- 状态：resolved
+- 首次发现：2026-09-01
+- 最近更新：2026-09-01
+- 影响面：`use-consultation-run.ts` NDJSON 回调、`rectification-agentic-chat.tsx` `send` 循环、`chat-message-content.tsx`
+- 用户现象：回答越长越卡，文字一坨一坨蹦出来而不是流出来；思考步骤更新时整条消息跟着抖。
+- 触发条件：任何一次流式咨询或校正回合，回答超过一两千字后明显。
+- 根因：服务端每个模型 text-delta 立即发一条 `answer.delta`，客户端每条事件各自 `setStreamingReply` / `setMessages`；每次提交都对整段部分回答跑 `parseAgentReply`、`applyThinkingSectionProgress`、`splitSpokenAnswerAndTechniqueAudit` 和 `react-markdown` 全量 parse，随回答长度呈平方级增长。
+- 修复：新增 `lib/stream-frame-buffer.ts`，所有流式事件先落到累加器，`requestAnimationFrame` 合并成每帧最多一次提交；正文与思考文本按 `max(2, ceil(积压/12))` 每帧匀速释放，突发积压约十二帧追平，页面隐藏时退化为 250ms 定时并一次放完，`run.completed`/失败/中止时同步冲干净。`chat-message-content.tsx` 在流式时把已完成段落（最后一个空行之前，不切进代码围栏、列表项之间或表格）交给按内容记忆的前缀组件，只有尾块每帧重 parse；结算后仍整篇一次 parse。
+- 验证：`tests/stream-frame-buffer.test.ts`（释放公式、200 token/50 帧只提交 50 次、突发 12 帧追平、隐藏退化、reset/dispose）、`tests/chat-markdown-split.test.ts`（切分规则、前缀稳定、前缀与尾块分开 parse）、`tests/home-streaming-render-split.test.ts` 新增按帧驱动的渲染次数上限。
+- 防复发：流式状态必须经 `stream-frame-buffer` 提交，不得在事件回调里直接 `setState`；流式期间的 Markdown 渲染必须走前缀/尾块切分。
+- 相关记录：BUG-474
+- 复发自：无
+- 修复版本：待发布
diff --git a/frontend/src/components/chat-message-content.tsx b/frontend/src/components/chat-message-content.tsx
index bec2ea9d..24cafa41 100644
--- a/frontend/src/components/chat-message-content.tsx
+++ b/frontend/src/components/chat-message-content.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useEffect, useState, type ReactNode } from "react";
+import { memo, useEffect, useState, type ReactNode } from "react";
 
 import { prefetchOnIdle } from "@/components/chat-chunk-prefetch";
 import { plainParagraphs } from "@/components/chat-message-paragraphs";
 import { TechniqueAuditDisclosure } from "@/components/technique-audit-disclosure";
+import { splitStableMarkdown } from "@/lib/chat-markdown-split";
 import type { TechniqueAuditRow } from "@/lib/consultation-agent-events";
 import {
   resolveTechniqueAuditRows,
@@ -41,14 +42,56 @@ function useMarkdownRenderer() {
   return renderer;
 }
 
+function renderProse(text: string, renderMarkdown: MarkdownRenderer | undefined): ReactNode {
+  if (!text) return null;
+  return renderMarkdown
+    ? renderMarkdown(text)
+    : (plainParagraphs(text) ?? []).map((paragraph, index) => (
+      <p key={index}>{paragraph}</p>
+    ));
+}
+
+/**
+ * The completed part of a streaming answer. `memo` keeps React from calling the
+ * markdown parser again while `text` is unchanged, so a frame that only grew
+ * the tail costs one small parse instead of one over the whole answer.
+ */
+const StableMarkdownPrefix = memo(function StableMarkdownPrefix({
+  text,
+  renderMarkdown,
+}: Readonly<{
+  text: string;
+  renderMarkdown: MarkdownRenderer | undefined;
+}>) {
+  return <>{renderProse(text, renderMarkdown)}</>;
+});
+
+export function StreamingMarkdown({
+  text,
+  renderMarkdown,
+}: Readonly<{
+  text: string;
+  renderMarkdown: MarkdownRenderer | undefined;
+}>) {
+  const split = splitStableMarkdown(text);
+  return (
+    <>
+      {split.stable ? <StableMarkdownPrefix text={split.stable} renderMarkdown={renderMarkdown} /> : null}
+      {renderProse(split.tail, renderMarkdown)}
+    </>
+  );
+}
+
 export function ChatMessageContent({
   text,
   auditRows,
   vargaSentence,
+  streaming = false,
 }: {
   text: string;
   auditRows?: readonly TechniqueAuditRow[];
   vargaSentence?: string | null;
+  streaming?: boolean;
 }) {
   const renderMarkdown = useMarkdownRenderer();
   const split = splitSpokenAnswerAndTechniqueAudit(text);
@@ -60,11 +103,13 @@ export function ChatMessageContent({
     <div className="message-answer">
       {spoken ? (
         <div className="message-markdown">
-          {renderMarkdown
-            ? renderMarkdown(spoken)
-            : (plainParagraphs(spoken) ?? []).map((paragraph, index) => (
-              <p key={index}>{paragraph}</p>
-            ))}
+          {streaming
+            ? <StreamingMarkdown text={spoken} renderMarkdown={renderMarkdown} />
+            : renderMarkdown
+              ? renderMarkdown(spoken)
+              : (plainParagraphs(spoken) ?? []).map((paragraph, index) => (
+                <p key={index}>{paragraph}</p>
+              ))}
         </div>
       ) : null}
       {vargaSentence ? <p className="message-varga-sentence">{vargaSentence}</p> : null}
diff --git a/frontend/src/components/chat-message-row.tsx b/frontend/src/components/chat-message-row.tsx
index 03d0a1c2..401cc4cd 100644
--- a/frontend/src/components/chat-message-row.tsx
+++ b/frontend/src/components/chat-message-row.tsx
@@ -116,6 +116,7 @@ export function ChatMessageRow({
         text={message.text}
         auditRows={message.agentExecutionReceipt?.techniqueAuditTable}
         vargaSentence={showThinkingPanel ? null : vargaSentence}
+        streaming={message.state !== "settled"}
       />
     )
     : null;
diff --git a/frontend/src/components/rectification-agentic-chat.tsx b/frontend/src/components/rectification-agentic-chat.tsx
index 1872245f..563b70f0 100644
--- a/frontend/src/components/rectification-agentic-chat.tsx
+++ b/frontend/src/components/rectification-agentic-chat.tsx
@@ -4,7 +4,8 @@ import { ArrowUp, Square } from "lucide-react";
 import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { parseAgentReply } from "@/lib/agent-reply";
-import { nextActivityView, type ChatMessage, type ChatMessageView } from "@/lib/chat-message-view";
+import { nextActivityView, type AgentActivityView, type ChatMessage, type ChatMessageView } from "@/lib/chat-message-view";
+import { createStreamFrameBuffer } from "@/lib/stream-frame-buffer";
 import {
   completeActivityTrace,
   completeActivityTraceStep,
@@ -494,6 +495,30 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
     let activityReceiptState = createRectificationActivityReceiptState();
     let completedReceipt = receiptFromRectificationActivityState(activityReceiptState);
     let completedTurnId: string | undefined;
+    let currentActivity: AgentActivityView | undefined = {
+      phase: "evidence-validation",
+      label: "正在处理…",
+      startedAt: Date.now(),
+    };
+    // Every stream event lands in `frames`; it commits at most once per animation
+    // frame and releases text at a steady pace. The loop below never calls
+    // setMessages for a live turn directly except on `attempt.reset`.
+    const frames = createStreamFrameBuffer<null>({
+      initialMeta: null,
+      flush: (frame) => {
+        const text = frame.answer;
+        setMessages((current) => current.map((message) => message.renderKey === assistantRenderKey
+          ? {
+            ...message,
+            text,
+            activityTrace,
+            completedReceipt,
+            state: text.trim() ? "streaming" : "thinking",
+            activity: currentActivity,
+          }
+          : message));
+      },
+    });
     const abortController = new AbortController();
     runAbort.current = abortController;
     try {
@@ -569,35 +594,29 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
           if (event.type === "answer.delta" && typeof event.text === "string") {
             raw = event.replace === true ? event.text : raw + event.text;
             activityTrace = freezeLiveThink(activityTrace);
-            setMessages((current) => current.map((message) => message.renderKey === assistantRenderKey
-              ? {
-                ...message,
-                text: raw,
-                activityTrace,
-                state: raw.trim() ? "streaming" : "thinking",
-                activity: nextActivityView(message.activity, {
-                  phase: "answer-composition",
-                  label: "正在组织回答…",
-                }),
-              }
-              : message));
+            currentActivity = nextActivityView(currentActivity, {
+              phase: "answer-composition",
+              label: "正在组织回答…",
+            });
+            frames.setAnswer(raw);
           } else if (event.type === "activity.changed" && isPublicRectificationActivity(event.activity)) {
             const activity = event.activity;
-            setMessages((current) => current.map((message) => message.renderKey === assistantRenderKey
-              ? {
-                ...message,
-                activity: nextActivityView(message.activity, {
-                  phase: "evidence-validation",
-                  label: RECTIFICATION_ACTIVITY_PROGRESS_LABELS[activity],
-                }),
-              }
-              : message));
+            currentActivity = nextActivityView(currentActivity, {
+              phase: "evidence-validation",
+              label: RECTIFICATION_ACTIVITY_PROGRESS_LABELS[activity],
+            });
+            frames.touch();
           } else if (event.type === "attempt.reset") {
             raw = "";
             activityTrace = emptyActivityTrace();
             activityReceiptState = createRectificationActivityReceiptState();
             completedReceipt = receiptFromRectificationActivityState(activityReceiptState);
             completedTurnId = undefined;
+            currentActivity = nextActivityView(undefined, {
+              phase: "evidence-validation",
+              label: "正在处理…",
+            });
+            frames.reset();
             setMessages((current) => current.map((message) => message.renderKey === assistantRenderKey
               ? {
                 ...message,
@@ -608,10 +627,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
                 completedReceipt: undefined,
                 failed: false,
                 turnId: undefined,
-                activity: nextActivityView(undefined, {
-                  phase: "evidence-validation",
-                  label: "正在处理…",
-                }),
+                activity: currentActivity,
               }
               : message));
           } else if (event.type === "run.failed") {
@@ -634,17 +650,12 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
                 tool,
                 RECTIFICATION_TOOL_PROGRESS_LABELS[tool],
               );
-              setMessages((current) => current.map((message) => message.renderKey === assistantRenderKey
-                ? {
-                  ...message,
-                  activityTrace,
-                  activity: nextActivityView(message.activity, {
-                    phase: rectificationToolActivityPhase(tool),
-                    label: RECTIFICATION_TOOL_PROGRESS_LABELS[tool],
-                    completedTrail: rectificationCompletedTrail(activityReceiptState.completedSteps),
-                  }),
-                }
-                : message));
+              currentActivity = nextActivityView(currentActivity, {
+                phase: rectificationToolActivityPhase(tool),
+                label: RECTIFICATION_TOOL_PROGRESS_LABELS[tool],
+                completedTrail: rectificationCompletedTrail(activityReceiptState.completedSteps),
+              });
+              frames.touch();
               continue;
             }
             if (event.status !== "completed" && event.status !== "failed") continue;
@@ -661,21 +672,16 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
                 : [],
             });
             completedReceipt = receiptFromRectificationActivityState(activityReceiptState);
-            setMessages((current) => current.map((message) => message.renderKey === assistantRenderKey
-              ? {
-                ...message,
-                activityTrace,
-                completedReceipt,
-                activity: nextActivityView(message.activity, {
-                  phase: rectificationToolActivityPhase(tool),
-                  label: RECTIFICATION_TOOL_DONE_LABELS[tool],
-                  completedTrail: rectificationCompletedTrail(activityReceiptState.completedSteps),
-                }),
-              }
-              : message));
+            currentActivity = nextActivityView(currentActivity, {
+              phase: rectificationToolActivityPhase(tool),
+              label: RECTIFICATION_TOOL_DONE_LABELS[tool],
+              completedTrail: rectificationCompletedTrail(activityReceiptState.completedSteps),
+            });
+            frames.touch();
           }
         }
       }
+      frames.settle();
 
       const parsed = completed && !streamFailed ? parseAgentReply(raw) : { text: "", title: undefined };
       const succeeded = completed && !streamFailed && Boolean(parsed.text);
@@ -722,6 +728,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
         await loadCaseSnapshot();
       }
     } catch (caught) {
+      frames.settle();
       const aborted = caught instanceof DOMException
         ? caught.name === "AbortError"
         : caught instanceof Error && caught.name === "AbortError";
@@ -757,6 +764,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
           : [];
       }));
     } finally {
+      frames.dispose();
       if (runAbort.current === abortController) runAbort.current = null;
       setPending(false);
     }
diff --git a/frontend/src/hooks/use-consultation-run.ts b/frontend/src/hooks/use-consultation-run.ts
index 160fb1fa..b766adb2 100644
--- a/frontend/src/hooks/use-consultation-run.ts
+++ b/frontend/src/hooks/use-consultation-run.ts
@@ -22,6 +22,7 @@ import {
   reduceConsultationTimeline,
 } from "@/lib/consultation-run-timeline";
 import { createNdjsonParser, type AgentExecutionReceipt, type ConsultationAgentPublicEvent } from "@/lib/consultation-agent-events";
+import { createStreamFrameBuffer } from "@/lib/stream-frame-buffer";
 import {
   applyThinkingSectionProgress,
   upsertThinkingSection,
@@ -659,6 +660,29 @@ export function useConsultationRun(params: ConsultationRunParams) {
     let thinkingSections: PublicThinkingSection[] = [];
     let streamedThinking = "";
     let timelineState = emptyConsultationTimeline();
+    let currentActivity: AgentActivityView | undefined;
+    // Every stream event lands in `frames`; it commits at most once per animation
+    // frame and releases text at a steady pace. Nothing below calls
+    // setStreamingReply directly while the response body is being read.
+    const frames = createStreamFrameBuffer<null>({
+      initialMeta: null,
+      flush: (frame) => {
+        const partialReply = parseAgentReply(frame.answer).text;
+        latestPartialReply = partialReply;
+        thinkingSections = applyThinkingSectionProgress(thinkingSections, partialReply);
+        setStreamingReply({
+          sessionId,
+          text: partialReply,
+          thinkingText: frame.thinking.trim() || undefined,
+          thinkingSections: thinkingSections.length ? thinkingSections : undefined,
+          timeline: timelineState.rows,
+          activity: currentActivity,
+        });
+        if (partialReply && pendingConsultation.current?.requestId === requestId) {
+          pendingConsultation.current = { ...pendingConsultation.current, partialReply };
+        }
+      },
+    });
     try {
       const response = await fetch("/api/consult", {
         method: "POST",
@@ -721,24 +745,6 @@ export function useConsultationRun(params: ConsultationRunParams) {
       const reader = response.body.getReader();
       const decoder = new TextDecoder();
       let answer = "";
-      const updateStreamingAnswer = (activity?: AgentActivityView) => {
-        const partialReply = parseAgentReply(answer).text;
-        latestPartialReply = partialReply;
-        thinkingSections = applyThinkingSectionProgress(thinkingSections, partialReply);
-        setStreamingReply((current) => ({
-          sessionId,
-          text: partialReply,
-          thinkingText: streamedThinking.trim() || undefined,
-          thinkingSections: thinkingSections.length ? thinkingSections : undefined,
-          timeline: timelineState.rows,
-          activity: activity
-            ? nextActivityView(current?.sessionId === sessionId ? current.activity : undefined, activity)
-            : current?.sessionId === sessionId ? current.activity : undefined,
-        }));
-        if (partialReply && pendingConsultation.current?.requestId === requestId) {
-          pendingConsultation.current = { ...pendingConsultation.current, partialReply };
-        }
-      };
       const updateActivity = (event: ConsultationAgentPublicEvent) => {
         let activity: AgentActivityView | undefined;
         if (event.type === "skill.started") {
@@ -766,23 +772,23 @@ export function useConsultationRun(params: ConsultationRunParams) {
         } else if (event.type === "answer.delta") {
           activity = { phase: "answer-composition", label: CONSULTATION_COMPOSING_LABEL };
         }
-        if (activity) updateStreamingAnswer(activity);
+        if (activity) {
+          currentActivity = nextActivityView(currentActivity, activity);
+          frames.touch();
+        }
       };
 
       if ((response.headers.get("content-type") ?? "").includes("application/x-ndjson")) {
         const parser = createNdjsonParser((event) => {
           timelineState = reduceConsultationTimeline(timelineState, event);
-          if (event.type === "answer.delta") answer += event.text;
+          frames.touch();
+          if (event.type === "answer.delta") {
+            answer += event.text;
+            frames.setAnswer(answer);
+          }
           if (event.type === "thinking.delta" && typeof event.text === "string") {
             streamedThinking += event.text;
-            setStreamingReply((current) => ({
-              sessionId,
-              text: current?.sessionId === sessionId ? current.text : parseAgentReply(answer).text,
-              thinkingText: streamedThinking.trim() || undefined,
-              thinkingSections: current?.sessionId === sessionId ? current.thinkingSections : thinkingSections,
-              timeline: timelineState.rows,
-              activity: current?.sessionId === sessionId ? current.activity : undefined,
-            }));
+            frames.setThinking(streamedThinking);
           }
           if (event.type === "thinking.section") {
             thinkingSections = applyThinkingSectionProgress(
@@ -794,14 +800,6 @@ export function useConsultationRun(params: ConsultationRunParams) {
               }),
               parseAgentReply(answer).text,
             );
-            setStreamingReply((current) => ({
-              sessionId,
-              text: current?.sessionId === sessionId ? current.text : parseAgentReply(answer).text,
-              thinkingText: streamedThinking.trim() || undefined,
-              thinkingSections,
-              timeline: timelineState.rows,
-              activity: current?.sessionId === sessionId ? current.activity : undefined,
-            }));
           }
           if (event.type === "run.completed") {
             runCompleted = true;
@@ -829,6 +827,7 @@ export function useConsultationRun(params: ConsultationRunParams) {
           parser.push(decoder.decode(value, { stream: true }));
         }
         parser.finish(decoder.decode());
+        frames.settle();
         if (truncatedFailure) {
           const reply = parseAgentReply(answer);
           if (!reply.text) throw new ConsultationResponseError(502, truncatedFailure.message);
@@ -867,9 +866,11 @@ export function useConsultationRun(params: ConsultationRunParams) {
           const { done, value } = await reader.read();
           if (done) break;
           answer += decoder.decode(value, { stream: true });
-          updateStreamingAnswer();
+          frames.setAnswer(answer);
         }
         answer += decoder.decode();
+        frames.setAnswer(answer);
+        frames.settle();
       }
       if (controller.signal.aborted) return Boolean(latestPartialReply);
       const reply = parseAgentReply(answer);
@@ -915,6 +916,9 @@ export function useConsultationRun(params: ConsultationRunParams) {
       void refreshAccount();
       return true;
     } catch (caught) {
+      // Whatever arrived before the failure is what gets kept, not just the
+      // part the pacing had released so far.
+      frames.settle();
       const cancelled = controller.signal.aborted;
       const ownsInterface = pendingConsultation.current?.requestId === requestId;
       const partialReply = latestPartialReply;
@@ -992,6 +996,7 @@ export function useConsultationRun(params: ConsultationRunParams) {
       }
       return Boolean(partialReply);
     } finally {
+      frames.dispose();
       cancellationRequests.current.delete(requestId);
       const pending = pendingConsultation.current;
       if (pending?.requestId !== requestId || pending.phase !== "recovering") {
diff --git a/frontend/src/lib/chat-markdown-split.ts b/frontend/src/lib/chat-markdown-split.ts
new file mode 100644
index 00000000..7e73ed86
--- /dev/null
+++ b/frontend/src/lib/chat-markdown-split.ts
@@ -0,0 +1,69 @@
+/**
+ * Split streaming markdown into a stable prefix and a live tail.
+ *
+ * While an answer streams, only the tail can still change; everything before
+ * the last completed block is final. Rendering the prefix through a memoised
+ * component means each frame re-parses a paragraph, not the whole answer.
+ *
+ * The cut is only allowed at a blank line where both sides parse the same on
+ * their own as they would together: never inside a fenced code block, never
+ * between two items of the same list (a second `<ul>` would add margin that
+ * the settled render does not have), and never inside a table or blockquote.
+ */
+
+export type StableMarkdownSplit = Readonly<{
+  stable: string;
+  tail: string;
+}>;
+
+const FENCE = /^\s{0,3}(`{3,}|~{3,})/;
+const LIST_ITEM = /^\s{0,3}(?:[-*+]|\d{1,9}[.)])\s/;
+const INDENTED = /^\s{2,}\S/;
+const TABLE_ROW = /^\s{0,3}\|/;
+
+function lastNonBlank(lines: readonly string[]): string | undefined {
+  return [...lines].reverse().find((line) => line.trim().length > 0);
+}
+
+/** A blank line does not end a list or a table when the next block continues it. */
+function continuesPreviousBlock(previous: readonly string[], next: string): boolean {
+  const last = lastNonBlank(previous);
+  if (last === undefined) return false;
+  const previousIsList = LIST_ITEM.test(last) || INDENTED.test(last);
+  const nextIsList = LIST_ITEM.test(next) || INDENTED.test(next);
+  if (previousIsList && nextIsList) return true;
+  return TABLE_ROW.test(last) && TABLE_ROW.test(next);
+}
+
+export function splitStableMarkdown(text: string): StableMarkdownSplit {
+  const lines = text.split("\n");
+  let insideFence = false;
+  let cut = -1;
+  let currentBlock: string[] = [];
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index] ?? "";
+    if (FENCE.test(line)) insideFence = !insideFence;
+    if (insideFence) {
+      currentBlock.push(line);
+      continue;
+    }
+    if (line.trim().length > 0) {
+      currentBlock.push(line);
+      continue;
+    }
+    // Blank line: the block that just ended is complete only if a non-blank
+    // line follows later, and the cut is safe only when the next block does
+    // not continue the previous one.
+    const nextIndex = lines.findIndex((candidate, at) => at > index && candidate.trim().length > 0);
+    if (nextIndex < 0) break;
+    const next = lines[nextIndex] ?? "";
+    if (currentBlock.length > 0 && !continuesPreviousBlock(currentBlock, next)) cut = index;
+    currentBlock = [];
+  }
+
+  if (cut < 0) return { stable: "", tail: text };
+  const stable = lines.slice(0, cut).join("\n");
+  const tail = lines.slice(cut + 1).join("\n");
+  return { stable, tail };
+}
diff --git a/frontend/src/lib/stream-frame-buffer.ts b/frontend/src/lib/stream-frame-buffer.ts
new file mode 100644
index 00000000..c96b2c0b
--- /dev/null
+++ b/frontend/src/lib/stream-frame-buffer.ts
@@ -0,0 +1,212 @@
+/**
+ * Frame-coalesced release of streamed agent output.
+ *
+ * Every network chunk used to become its own React commit, and each commit
+ * re-parsed the whole partial answer. This buffer sits between the event
+ * parser and `setState`: events mutate an accumulator, and at most one flush
+ * happens per animation frame. Answer and thinking text are released at a
+ * steady per-frame pace so a burst of chunks reads as flowing text instead of
+ * a jump, while a large backlog (reconnect, slow tab) catches up in roughly a
+ * dozen frames.
+ *
+ * Pure release arithmetic lives in exported functions so the policy is
+ * testable without a DOM; scheduling is injectable for the same reason.
+ */
+
+export const STREAM_RELEASE_MIN_CHARS = 2;
+export const STREAM_RELEASE_CATCHUP_DIVISOR = 12;
+export const STREAM_HIDDEN_FLUSH_MS = 250;
+
+/**
+ * Characters to reveal on one frame. `backlogChars` is how much was waiting
+ * when the newest text arrived: dividing that by twelve clears any burst in
+ * about twelve frames, while the two-character floor keeps a slow model from
+ * reading as stalled. Callers without a backlog figure pass the pending count.
+ */
+export function streamReleaseCount(pendingChars: number, backlogChars = pendingChars): number {
+  if (pendingChars <= 0) return 0;
+  return Math.min(
+    pendingChars,
+    Math.max(STREAM_RELEASE_MIN_CHARS, Math.ceil(backlogChars / STREAM_RELEASE_CATCHUP_DIVISOR)),
+  );
+}
+
+/** Advance a released prefix toward its target by one frame's worth of text. */
+export function advanceStreamRelease(released: string, target: string, backlogChars?: number): string {
+  if (!target.startsWith(released)) {
+    // The target was replaced rather than extended: restart from its head.
+    return target.slice(0, streamReleaseCount(target.length, backlogChars ?? target.length));
+  }
+  const pending = target.length - released.length;
+  if (pending <= 0) return target;
+  return target.slice(0, released.length + streamReleaseCount(pending, backlogChars ?? pending));
+}
+
+export type StreamFrameSnapshot<Meta> = Readonly<{
+  answer: string;
+  thinking: string;
+  meta: Meta;
+  /** True when this flush released everything that had arrived. */
+  settled: boolean;
+}>;
+
+export type StreamFrameScheduler = Readonly<{
+  requestFrame: (callback: () => void) => number;
+  cancelFrame: (handle: number) => void;
+  requestTimeout: (callback: () => void, delayMs: number) => number;
+  cancelTimeout: (handle: number) => void;
+  hidden: () => boolean;
+}>;
+
+export type StreamFrameBufferOptions<Meta> = Readonly<{
+  initialMeta: Meta;
+  flush: (snapshot: StreamFrameSnapshot<Meta>) => void;
+  scheduler?: StreamFrameScheduler;
+}>;
+
+export type StreamFrameBuffer<Meta> = Readonly<{
+  setAnswer: (fullText: string) => void;
+  setThinking: (fullText: string) => void;
+  setMeta: (next: Meta | ((current: Meta) => Meta)) => void;
+  /** Publish meta-only changes (timeline rows, activity) on the next frame. */
+  touch: () => void;
+  /** Release everything received and flush synchronously. */
+  settle: () => void;
+  /** Drop everything, including scheduled work, without flushing. */
+  reset: (meta?: Meta) => void;
+  dispose: () => void;
+  /** Text released so far, for callers that persist partial output. */
+  released: () => Readonly<{ answer: string; thinking: string }>;
+}>;
+
+function pendingChars(released: string, target: string): number {
+  return target.startsWith(released) ? target.length - released.length : target.length;
+}
+
+function browserScheduler(): StreamFrameScheduler {
+  return {
+    requestFrame: (callback) => window.requestAnimationFrame(callback),
+    cancelFrame: (handle) => window.cancelAnimationFrame(handle),
+    requestTimeout: (callback, delayMs) => window.setTimeout(callback, delayMs),
+    cancelTimeout: (handle) => window.clearTimeout(handle),
+    hidden: () => typeof document !== "undefined" && document.hidden,
+  };
+}
+
+export function createStreamFrameBuffer<Meta>(
+  options: StreamFrameBufferOptions<Meta>,
+): StreamFrameBuffer<Meta> {
+  const scheduler = options.scheduler ?? browserScheduler();
+  let targetAnswer = "";
+  let targetThinking = "";
+  let releasedAnswer = "";
+  let releasedThinking = "";
+  let answerBacklog = 0;
+  let thinkingBacklog = 0;
+  let meta = options.initialMeta;
+  let dirty = false;
+  let disposed = false;
+  let frameHandle: number | null = null;
+  let timeoutHandle: number | null = null;
+
+  const cancelScheduled = () => {
+    if (frameHandle !== null) {
+      scheduler.cancelFrame(frameHandle);
+      frameHandle = null;
+    }
+    if (timeoutHandle !== null) {
+      scheduler.cancelTimeout(timeoutHandle);
+      timeoutHandle = null;
+    }
+  };
+
+  const emit = (settled: boolean) => {
+    dirty = false;
+    options.flush({
+      answer: releasedAnswer,
+      thinking: releasedThinking,
+      meta,
+      settled,
+    });
+  };
+
+  const step = () => {
+    frameHandle = null;
+    timeoutHandle = null;
+    if (disposed) return;
+    if (scheduler.hidden()) {
+      releasedAnswer = targetAnswer;
+      releasedThinking = targetThinking;
+    } else {
+      releasedAnswer = advanceStreamRelease(releasedAnswer, targetAnswer, answerBacklog);
+      releasedThinking = advanceStreamRelease(releasedThinking, targetThinking, thinkingBacklog);
+    }
+    if (releasedAnswer === targetAnswer) answerBacklog = 0;
+    if (releasedThinking === targetThinking) thinkingBacklog = 0;
+    const caughtUp = releasedAnswer === targetAnswer && releasedThinking === targetThinking;
+    emit(caughtUp);
+    if (!caughtUp) schedule();
+  };
+
+  const schedule = () => {
+    if (disposed || frameHandle !== null || timeoutHandle !== null) return;
+    if (scheduler.hidden()) {
+      timeoutHandle = scheduler.requestTimeout(step, STREAM_HIDDEN_FLUSH_MS);
+    } else {
+      frameHandle = scheduler.requestFrame(step);
+    }
+  };
+
+  return {
+    setAnswer(fullText) {
+      if (disposed || fullText === targetAnswer) return;
+      targetAnswer = fullText;
+      answerBacklog = Math.max(answerBacklog, pendingChars(releasedAnswer, targetAnswer));
+      schedule();
+    },
+    setThinking(fullText) {
+      if (disposed || fullText === targetThinking) return;
+      targetThinking = fullText;
+      thinkingBacklog = Math.max(thinkingBacklog, pendingChars(releasedThinking, targetThinking));
+      schedule();
+    },
+    setMeta(next) {
+      if (disposed) return;
+      meta = typeof next === "function" ? (next as (current: Meta) => Meta)(meta) : next;
+      dirty = true;
+      schedule();
+    },
+    touch() {
+      if (disposed) return;
+      dirty = true;
+      schedule();
+    },
+    settle() {
+      if (disposed) return;
+      cancelScheduled();
+      releasedAnswer = targetAnswer;
+      releasedThinking = targetThinking;
+      answerBacklog = 0;
+      thinkingBacklog = 0;
+      emit(true);
+    },
+    reset(nextMeta) {
+      cancelScheduled();
+      targetAnswer = "";
+      targetThinking = "";
+      releasedAnswer = "";
+      releasedThinking = "";
+      answerBacklog = 0;
+      thinkingBacklog = 0;
+      dirty = false;
+      if (nextMeta !== undefined) meta = nextMeta;
+    },
+    dispose() {
+      disposed = true;
+      cancelScheduled();
+    },
+    released() {
+      return { answer: releasedAnswer, thinking: releasedThinking };
+    },
+  };
+}
diff --git a/frontend/tests/chat-markdown-split.test.ts b/frontend/tests/chat-markdown-split.test.ts
new file mode 100644
index 00000000..fd8586e9
--- /dev/null
+++ b/frontend/tests/chat-markdown-split.test.ts
@@ -0,0 +1,74 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+
+import { StreamingMarkdown } from "../src/components/chat-message-content.tsx";
+import { splitStableMarkdown } from "../src/lib/chat-markdown-split.ts";
+
+const contentSource = readFileSync(new URL("../src/components/chat-message-content.tsx", import.meta.url), "utf8");
+const messageRowSource = readFileSync(new URL("../src/components/chat-message-row.tsx", import.meta.url), "utf8");
+
+test("the stable prefix ends at the last completed paragraph and the tail keeps streaming", () => {
+  assert.deepEqual(splitStableMarkdown("只有一段还没写完"), { stable: "", tail: "只有一段还没写完" });
+  assert.deepEqual(splitStableMarkdown("第一段。\n\n第二段还在"), { stable: "第一段。", tail: "第二段还在" });
+  assert.deepEqual(
+    splitStableMarkdown("## 标题\n\n第一段。\n\n第二段。\n\n第三"),
+    { stable: "## 标题\n\n第一段。\n\n第二段。", tail: "第三" },
+  );
+});
+
+test("the cut never lands inside a fence, between list items, or inside a table", () => {
+  const fenced = "前言。\n\n```txt\n第一行\n\n第二行";
+  assert.deepEqual(splitStableMarkdown(fenced), { stable: "前言。", tail: "```txt\n第一行\n\n第二行" });
+
+  const looseList = "- 甲\n\n- 乙\n\n- 丙还在";
+  assert.deepEqual(splitStableMarkdown(looseList), { stable: "", tail: looseList });
+
+  const listThenParagraph = "- 甲\n- 乙\n\n总结一下";
+  assert.deepEqual(splitStableMarkdown(listThenParagraph), { stable: "- 甲\n- 乙", tail: "总结一下" });
+
+  const orderedListContinues = "1. 甲\n\n2. 乙\n\n   缩进的补充";
+  assert.deepEqual(splitStableMarkdown(orderedListContinues), { stable: "", tail: orderedListContinues });
+
+  const table = "说明。\n\n| 技法 | 状态 |\n| --- | --- |\n| 甲 | 已执行 |\n\n> 引用";
+  assert.deepEqual(
+    splitStableMarkdown(table),
+    { stable: "说明。\n\n| 技法 | 状态 |\n| --- | --- |\n| 甲 | 已执行 |", tail: "> 引用" },
+  );
+});
+
+test("growing the tail keeps the prefix string identical so the memoised prefix is not re-parsed", () => {
+  const before = splitStableMarkdown("第一段。\n\n第二段。\n\n第三段正在");
+  const after = splitStableMarkdown("第一段。\n\n第二段。\n\n第三段正在写，还没有换段");
+  assert.equal(before.stable, after.stable);
+  assert.notEqual(before.tail, after.tail);
+
+  // Only once a new paragraph completes does the prefix move forward.
+  const later = splitStableMarkdown("第一段。\n\n第二段。\n\n第三段写完了。\n\n第四");
+  assert.equal(later.stable, "第一段。\n\n第二段。\n\n第三段写完了。");
+});
+
+test("the streaming renderer parses the prefix and the tail as two separate documents", () => {
+  const calls: string[] = [];
+  const renderMarkdown = (text: string) => {
+    calls.push(text);
+    return createElement("p", null, text);
+  };
+  renderToString(createElement(StreamingMarkdown, {
+    text: "第一段。\n\n第二段。\n\n第三段还在",
+    renderMarkdown,
+  }));
+  // Server rendering evaluates the tail in the parent and the memoised prefix as a child,
+  // so compare as a set: what matters is that neither call sees the whole answer.
+  assert.deepEqual([...calls].sort(), ["第一段。\n\n第二段。", "第三段还在"].sort());
+
+  // The prefix component is memoised on its text, so an unchanged prefix costs no parse.
+  assert.match(contentSource, /const StableMarkdownPrefix = memo\(function StableMarkdownPrefix/);
+  assert.match(contentSource, /splitStableMarkdown\(text\)/);
+  assert.match(contentSource, /streaming\s*\?\s*<StreamingMarkdown/);
+  // Settled answers still parse once as one document.
+  assert.match(contentSource, /: renderMarkdown\s*\?\s*renderMarkdown\(spoken\)/);
+  assert.match(messageRowSource, /streaming=\{message\.state !== "settled"\}/);
+});
diff --git a/frontend/tests/home-streaming-render-split.test.ts b/frontend/tests/home-streaming-render-split.test.ts
index 7284f43c..ccd16d20 100644
--- a/frontend/tests/home-streaming-render-split.test.ts
+++ b/frontend/tests/home-streaming-render-split.test.ts
@@ -11,6 +11,7 @@ import {
   type ChatTranscriptProps,
 } from "../src/components/chat-transcript.tsx";
 import type { ChatMessage } from "../src/lib/chat-message-view.ts";
+import { createStreamFrameBuffer, type StreamFrameScheduler } from "../src/lib/stream-frame-buffer.ts";
 import { streamingChatMessageView } from "../src/lib/chat-message-view.ts";
 import {
   disableHomeStreamingRenderProbe,
@@ -71,7 +72,51 @@ test("the split architecture renders settled history once while streaming tokens
   disableHomeStreamingRenderProbe();
 
   assert.equal(split.settledListRenders, 1);
-  assert.equal(split.streamingRowRenders, tokens.length);
+  // Former assertion: `streamingRowRenders === tokens.length`. That was a snapshot of the
+  // status quo (one commit per network token), not the goal; this test drives renders by
+  // hand, so the count equals the number of hand-driven renders and must never exceed it.
+  assert.ok(split.streamingRowRenders <= tokens.length);
+  assert.ok(split.streamingRowRenders >= 1);
   assert.equal(unsplit.unsplitListRenders, tokens.length);
   assert.ok(unsplit.settledRowRenders > split.settledRowRenders);
 });
+
+test("frame coalescing renders the streaming row once per frame, not once per token", () => {
+  const messages: ChatMessage[] = [{ role: "user", text: "请继续说明这个月的安排。" }];
+  const frames: Array<() => void> = [];
+  const scheduler: StreamFrameScheduler = {
+    requestFrame(callback) {
+      frames.push(callback);
+      return frames.length;
+    },
+    cancelFrame() { frames.length = 0; },
+    requestTimeout() { return 0; },
+    cancelTimeout() {},
+    hidden: () => false,
+  };
+
+  resetHomeStreamingRenderProbe();
+  enableHomeStreamingRenderProbe();
+  const buffer = createStreamFrameBuffer<null>({
+    initialMeta: null,
+    scheduler,
+    flush: (frame) => {
+      const streamingMessage = streamingChatMessageView(messages, true, frame.answer);
+      assert.ok(streamingMessage);
+      renderToString(createElement(StreamingMessageEntry, { message: streamingMessage }));
+    },
+  });
+  // 200 one-character tokens arrive four per frame across fifty frames.
+  let answer = "";
+  for (let index = 0; index < 200; index += 1) {
+    answer += "字";
+    buffer.setAnswer(answer);
+    if (index % 4 === 3) for (const callback of frames.splice(0)) callback();
+  }
+  buffer.settle();
+  const probe = homeStreamingRenderProbeSnapshot();
+  disableHomeStreamingRenderProbe();
+
+  assert.ok(probe.streamingRowRenders <= 51, `rendered ${probe.streamingRowRenders} times for 200 tokens`);
+  assert.ok(probe.streamingRowRenders * 3 <= 200);
+});
diff --git a/frontend/tests/stream-frame-buffer.test.ts b/frontend/tests/stream-frame-buffer.test.ts
new file mode 100644
index 00000000..81fbf787
--- /dev/null
+++ b/frontend/tests/stream-frame-buffer.test.ts
@@ -0,0 +1,210 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  STREAM_HIDDEN_FLUSH_MS,
+  STREAM_RELEASE_CATCHUP_DIVISOR,
+  STREAM_RELEASE_MIN_CHARS,
+  advanceStreamRelease,
+  createStreamFrameBuffer,
+  streamReleaseCount,
+  type StreamFrameScheduler,
+  type StreamFrameSnapshot,
+} from "../src/lib/stream-frame-buffer.ts";
+
+function fakeScheduler(hidden = () => false) {
+  const frames: Array<() => void> = [];
+  const timeouts: Array<{ callback: () => void; delayMs: number }> = [];
+  let handle = 0;
+  const scheduler: StreamFrameScheduler = {
+    requestFrame(callback) {
+      frames.push(callback);
+      handle += 1;
+      return handle;
+    },
+    cancelFrame() {
+      frames.length = 0;
+    },
+    requestTimeout(callback, delayMs) {
+      timeouts.push({ callback, delayMs });
+      handle += 1;
+      return handle;
+    },
+    cancelTimeout() {
+      timeouts.length = 0;
+    },
+    hidden,
+  };
+  return {
+    scheduler,
+    tick() {
+      const pending = frames.splice(0);
+      for (const callback of pending) callback();
+      return pending.length;
+    },
+    tickTimeouts() {
+      const pending = timeouts.splice(0);
+      for (const entry of pending) entry.callback();
+      return pending;
+    },
+    get scheduledFrames() {
+      return frames.length;
+    },
+  };
+}
+
+test("release count is at least two characters and catches up a backlog within about twelve frames", () => {
+  assert.equal(streamReleaseCount(0), 0);
+  assert.equal(streamReleaseCount(1), 1);
+  assert.equal(streamReleaseCount(2), STREAM_RELEASE_MIN_CHARS);
+  assert.equal(streamReleaseCount(5), STREAM_RELEASE_MIN_CHARS);
+  assert.equal(streamReleaseCount(24), STREAM_RELEASE_MIN_CHARS);
+  assert.equal(streamReleaseCount(25), 3);
+  assert.equal(streamReleaseCount(1200), 1200 / STREAM_RELEASE_CATCHUP_DIVISOR);
+
+  let released = "";
+  const target = "字".repeat(3_000);
+  let frames = 0;
+  while (released !== target && frames < 100) {
+    released = advanceStreamRelease(released, target, target.length);
+    frames += 1;
+  }
+  // A 3,000-character backlog that arrived at once clears in twelve frames (~200ms).
+  assert.equal(frames, STREAM_RELEASE_CATCHUP_DIVISOR);
+  assert.equal(released, target);
+
+  // Without the backlog figure the pace still floors at two characters per frame.
+  assert.equal(advanceStreamRelease("", "十二个字符十二个字符十二"), "十二");
+});
+
+test("a replaced target that no longer extends the released prefix jumps instead of stalling", () => {
+  assert.equal(advanceStreamRelease("旧的回答", "新"), "新");
+  // A replacement restarts at the paced rate from the new head rather than showing stale text.
+  assert.equal(advanceStreamRelease("abc", "abd"), "ab");
+});
+
+test("many events collapse into one flush per frame and settle releases everything synchronously", () => {
+  const fake = fakeScheduler();
+  const flushes: StreamFrameSnapshot<string[]>[] = [];
+  const buffer = createStreamFrameBuffer<string[]>({
+    initialMeta: [],
+    scheduler: fake.scheduler,
+    flush: (snapshot) => flushes.push(snapshot),
+  });
+
+  // 200 one-character tokens arrive four per frame across fifty frames, the way a
+  // model streams Chinese text; each frame is allowed one commit.
+  let answer = "";
+  let frameCount = 0;
+  for (let index = 0; index < 200; index += 1) {
+    answer += "字";
+    buffer.setAnswer(answer);
+    buffer.setMeta((rows) => [...rows, `row-${index}`]);
+    if (index % 4 === 3) frameCount += fake.tick();
+  }
+  assert.equal(frameCount, 50);
+  assert.equal(flushes.length, 50);
+  assert.ok(flushes.length * 3 <= 200, "at most one commit per frame, not per token");
+  for (let index = 1; index < flushes.length; index += 1) {
+    assert.ok(flushes[index]!.answer.length >= flushes[index - 1]!.answer.length);
+    assert.ok(flushes[index]!.answer.length - flushes[index - 1]!.answer.length >= STREAM_RELEASE_MIN_CHARS);
+  }
+  assert.equal(flushes.at(-1)!.meta.length, 200);
+  assert.ok(flushes.at(-1)!.answer.length < 200, "pacing is still behind the network");
+
+  buffer.settle();
+  assert.equal(flushes.at(-1)!.answer, answer);
+  assert.equal(flushes.at(-1)!.settled, true);
+  assert.equal(fake.scheduledFrames, 0);
+  assert.equal(buffer.released().answer, answer);
+});
+
+test("thinking text is paced separately from the answer and meta-only touches still flush", () => {
+  const fake = fakeScheduler();
+  const flushes: StreamFrameSnapshot<null>[] = [];
+  const buffer = createStreamFrameBuffer<null>({
+    initialMeta: null,
+    scheduler: fake.scheduler,
+    flush: (snapshot) => flushes.push(snapshot),
+  });
+  buffer.setThinking("先看事业宫，再看大运。");
+  fake.tick();
+  assert.equal(flushes.length, 1);
+  assert.equal(flushes[0]!.answer, "");
+  assert.ok(flushes[0]!.thinking.length >= STREAM_RELEASE_MIN_CHARS);
+  assert.equal(flushes[0]!.settled, false);
+
+  buffer.settle();
+  assert.equal(flushes.at(-1)!.thinking, "先看事业宫，再看大运。");
+
+  buffer.touch();
+  fake.tick();
+  assert.equal(flushes.length, 3);
+  assert.equal(flushes.at(-1)!.settled, true);
+});
+
+test("a burst that lands mid-stream is cleared within about twelve frames instead of trickling", () => {
+  const fake = fakeScheduler();
+  const flushes: StreamFrameSnapshot<null>[] = [];
+  const buffer = createStreamFrameBuffer<null>({
+    initialMeta: null,
+    scheduler: fake.scheduler,
+    flush: (snapshot) => flushes.push(snapshot),
+  });
+  buffer.setAnswer("字".repeat(20));
+  fake.tick();
+  buffer.setAnswer("字".repeat(2_420));
+  let frames = 0;
+  while (fake.scheduledFrames > 0 && frames < 100) {
+    fake.tick();
+    frames += 1;
+  }
+  assert.equal(flushes.at(-1)!.answer.length, 2_420);
+  assert.ok(frames <= STREAM_RELEASE_CATCHUP_DIVISOR + 1, `took ${frames} frames`);
+});
+
+test("a hidden document falls back to a timeout and releases everything at once", () => {
+  const fake = fakeScheduler(() => true);
+  const flushes: StreamFrameSnapshot<null>[] = [];
+  const buffer = createStreamFrameBuffer<null>({
+    initialMeta: null,
+    scheduler: fake.scheduler,
+    flush: (snapshot) => flushes.push(snapshot),
+  });
+  buffer.setAnswer("字".repeat(500));
+  assert.equal(fake.scheduledFrames, 0);
+  const fired = fake.tickTimeouts();
+  assert.equal(fired.length, 1);
+  assert.equal(fired[0]!.delayMs, STREAM_HIDDEN_FLUSH_MS);
+  assert.equal(flushes.length, 1);
+  assert.equal(flushes[0]!.answer.length, 500);
+  assert.equal(flushes[0]!.settled, true);
+});
+
+test("reset drops received and released text plus scheduled work, and dispose silences the buffer", () => {
+  const fake = fakeScheduler();
+  const flushes: StreamFrameSnapshot<number>[] = [];
+  const buffer = createStreamFrameBuffer<number>({
+    initialMeta: 1,
+    scheduler: fake.scheduler,
+    flush: (snapshot) => flushes.push(snapshot),
+  });
+  buffer.setAnswer("第一次尝试的正文");
+  fake.tick();
+  assert.equal(flushes.length, 1);
+
+  buffer.reset(2);
+  assert.equal(fake.scheduledFrames, 0);
+  assert.deepEqual(buffer.released(), { answer: "", thinking: "" });
+  buffer.touch();
+  fake.tick();
+  assert.equal(flushes.at(-1)!.answer, "");
+  assert.equal(flushes.at(-1)!.meta, 2);
+
+  buffer.dispose();
+  buffer.setAnswer("不再发布");
+  buffer.touch();
+  assert.equal(fake.tick(), 0);
+  buffer.settle();
+  assert.equal(flushes.at(-1)!.answer, "");
+});

From be5e810ac918e0ff5c3ff779a0b1b81e86e2da7a Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Tue, 1 Sep 2026 23:05:55 +0000
Subject: [PATCH 2/9] fix(chat): keep the latest reply mounted through
 settlement and animate the timeline collapse

The streaming and settled versions of the trailing assistant reply were
two components, so settling unmounted one and mounted the other and the
entrance tween replayed over text the reader was already on. One
LatestAssistantEntry now owns that row under a single key, and the
history list excludes it. The CSS entrance keyframe that doubled the
GSAP tween is gone and the tween matches the documented 160ms. The step
timeline no longer remounts on settle: it is a button-controlled
disclosure with a 180ms grid-rows transition, the reader's own toggle
wins over the live default, and an in-flight request with no events yet
shows a queued row instead of an empty shell.

BUG-474 BUG-475

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 docs/BUG_HISTORY.md                           |  32 ++++
 .../home-streaming-render-benchmark.mts       |  12 +-
 frontend/src/app/globals.css                  |  40 ++++-
 frontend/src/components/chat-message-row.tsx  |   2 +-
 frontend/src/components/chat-transcript.tsx   | 156 ++++++++++--------
 .../components/consultation-run-timeline.tsx  |  73 ++++++--
 frontend/src/lib/chat-message-view.ts         |  37 +++++
 .../src/lib/home-streaming-render-probe.ts    |   6 +
 .../chat-bundle-splitting-contract.test.ts    |   4 +-
 .../tests/chat-stream-settle-contract.test.ts |  80 +++++++++
 .../class-name-definition-contract.test.ts    |   1 -
 .../tests/home-streaming-render-split.test.ts |  21 ++-
 .../tests/session-conversation-layout.test.ts |   4 +-
 13 files changed, 365 insertions(+), 103 deletions(-)
 create mode 100644 frontend/tests/chat-stream-settle-contract.test.ts

diff --git a/docs/BUG_HISTORY.md b/docs/BUG_HISTORY.md
index 64b141c6..8709b6a9 100644
--- a/docs/BUG_HISTORY.md
+++ b/docs/BUG_HISTORY.md
@@ -7282,3 +7282,35 @@
 - 相关记录：BUG-474
 - 复发自：无
 - 修复版本：待发布
+
+## BUG-474 | 回答结算瞬间整条消息闪一下，步骤时间线从展开直接跳成折叠
+
+- 状态：resolved
+- 首次发现：2026-09-01
+- 最近更新：2026-09-01
+- 影响面：`chat-transcript.tsx`、`chat-message-row.tsx`、`consultation-run-timeline.tsx`、`globals.css` `.message`
+- 用户现象：流式回答写完的那一刻，正在读的整条回答淡出再淡入一次；上方「正在分析」步骤块瞬间收成「已完成 N 步」，下方正文向上跳一段。
+- 触发条件：任何一次咨询流式结束。
+- 根因：流式中的最后一条由 `StreamingMessageEntry` 渲染，结算后由 `SettledMessageEntry` 渲染，两者是不同组件，`renderKey` 相同也会卸载重挂，`ChatMessageRow` 的 GSAP 入场在新挂载的 `<article>` 上重放；`ConsultationRunTimeline` 用 `key={live ? "live" : "settled"}` 强制重挂，原生 `<details>` 的 `open` 没有过渡；`.message` 上另有一份 160ms CSS 入场关键帧与 GSAP 的 180ms 叠加。
+- 修复：`latestAssistantView` 派生最后一条 assistant 视图（流式或刚结算），`LatestAssistantEntry` 一个组件、一个 key 负责两个状态；历史列表按 `excludeLatestAssistant` 排除尾条。删除 `.message` 的 CSS 入场与 `message-enter` 关键帧，GSAP 时长改为 0.16s 与 DESIGN.md §6 一致。时间线去掉 `key`，改成 `button[aria-expanded]` + `grid-template-rows 0fr→1fr` 180ms 过渡，折叠后内容 `inert`；summary 文案换行时 120ms 淡入。
+- 验证：`tests/chat-stream-settle-contract.test.ts`（视图 key 跨结算一致、只有一处渲染尾条、`.message` 无 animation、时间线过渡与 reduced-motion、live 空行「正在处理…」）；`session-conversation-layout` 与 `chat-bundle-splitting-contract` 的 0.18 锁改为 0.16 并注释原值。
+- 防复发：尾条 assistant 必须由 `LatestAssistantEntry` 单点渲染；不得给时间线加随状态变化的 `key`；入场动画只允许 GSAP 一份。
+- 相关记录：BUG-473、BUG-475
+- 复发自：无
+- 修复版本：待发布
+
+## BUG-475 | 流式期间步骤时间线无法折叠，请求已发出但第一个事件到达前没有任何进行中反馈
+
+- 状态：resolved
+- 首次发现：2026-09-01
+- 最近更新：2026-09-01
+- 影响面：`consultation-run-timeline.tsx`
+- 用户现象：回答生成中点「正在分析」想收起步骤，下一个 token 又把它撑开；发送后到服务端第一条事件之间只有头像和空白。
+- 触发条件：流式期间点击时间线 summary；服务端首事件延迟超过一两秒时。
+- 根因：`<details open={live ? true : undefined}>` 由 `live` 受控，用户的开合没有进入状态；`rows` 为空时组件直接返回 `null`。
+- 修复：`open = userOpen ?? live`，用户切换后记入 state，结算时若用户未动才程序折叠；`rows` 为空且 live 时渲染一条 `QUEUED_TIMELINE_ROW`（「正在处理…」+ 行内 spinner + shimmer 文案）。
+- 验证：`tests/chat-stream-settle-contract.test.ts`。
+- 防复发：时间线开合必须以用户选择优先；live 状态下不得渲染空壳。
+- 相关记录：BUG-474
+- 复发自：无
+- 修复版本：待发布
diff --git a/frontend/scripts/home-streaming-render-benchmark.mts b/frontend/scripts/home-streaming-render-benchmark.mts
index 075ab1a2..c8946ba9 100644
--- a/frontend/scripts/home-streaming-render-benchmark.mts
+++ b/frontend/scripts/home-streaming-render-benchmark.mts
@@ -5,14 +5,14 @@ import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 
 import {
+  LatestAssistantEntry,
   SettledMessageList,
-  StreamingMessageEntry,
   UnsplitChatTranscript,
   type ChatTranscriptActions,
   type ChatTranscriptProps,
 } from "../src/components/chat-transcript.tsx";
 import type { ChatMessage } from "../src/lib/chat-message-view.ts";
-import { streamingChatMessageView } from "../src/lib/chat-message-view.ts";
+import { settledChatMessageViews, streamingChatMessageView } from "../src/lib/chat-message-view.ts";
 import {
   disableHomeStreamingRenderProbe,
   enableHomeStreamingRenderProbe,
@@ -120,7 +120,13 @@ function runSplitArchitecture(name: string, messages: readonly ChatMessage[], re
   for (const streamingText of tokens) {
     const streamingMessage = streamingChatMessageView(messages, true, streamingText);
     if (streamingMessage) {
-      renderToString(createElement(StreamingMessageEntry, { message: streamingMessage }));
+      renderToString(createElement(LatestAssistantEntry, {
+        ...props,
+        loading: true,
+        message: streamingMessage,
+        views: [...settledChatMessageViews(messages), streamingMessage],
+        index: messages.length,
+      }));
     }
   }
   const elapsedMs = performance.now() - started;
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 2e4c5a16..6655e9d4 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -545,7 +545,6 @@ button:disabled { cursor: default; opacity: .45; }
 
 @keyframes app-loading-orbit { to { transform: rotate(360deg); } }
 @keyframes inline-spin { to { transform: rotate(360deg); } }
-@keyframes message-enter { from { opacity: 0; transform: translateY(4px); } }
 @keyframes onboarding-card-enter { from { opacity: 0; transform: translateY(6px); } }
 @keyframes onboarding-caret { 50% { opacity: 0; } }
 @keyframes account-overlay-enter { from { opacity: 0; } }
@@ -1034,7 +1033,7 @@ button:disabled { cursor: default; opacity: .45; }
   min-height: 40vh;
   color: var(--color-ink-secondary);
 }
-.message { display: flex; animation: message-enter 160ms var(--ease-out) both; padding: var(--space-2) 0; }
+.message { display: flex; padding: var(--space-2) 0; }
 .agent-avatar { width: 32px; height: 32px; display: block; flex: 0 0 32px; margin-top: var(--space-2); border-radius: 50%; background: var(--color-canvas) url("/jyotish-logo.png") center / contain no-repeat; box-shadow: 0 0 0 1px var(--ring-hairline); }
 .message-content { min-width: 0; max-width: min(80%, 680px); }
 .message-bubble { overflow: hidden; border: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-canvas-muted); }
@@ -1133,7 +1132,7 @@ button:disabled { cursor: default; opacity: .45; }
 .consultation-run-timeline {
   min-width: 0;
 }
-.consultation-run-timeline > summary,
+.consultation-run-timeline__summary,
 .consultation-run-timeline__details > summary {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 20px;
@@ -1144,12 +1143,40 @@ button:disabled { cursor: default; opacity: .45; }
   list-style: none;
   color: var(--color-ink-tertiary);
 }
-.consultation-run-timeline > summary::-webkit-details-marker,
+.consultation-run-timeline__summary {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
+}
+.consultation-run-timeline__summary:focus-visible {
+  border-radius: var(--radius-sm);
+  outline: 2px solid var(--color-focus);
+  outline-offset: 3px;
+}
 .consultation-run-timeline__details > summary::-webkit-details-marker {
   display: none;
 }
 .consultation-run-timeline__summary-label {
   min-width: 0;
+  animation: agent-activity-status-in 120ms ease-out;
+}
+/* Open ↔ closed is a 180ms height transition on the same element, so settling
+   never swaps the timeline out from under the reader. */
+.consultation-run-timeline__body-wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 180ms var(--ease-out);
+}
+.consultation-run-timeline.is-open > .consultation-run-timeline__body-wrap {
+  grid-template-rows: 1fr;
+}
+.consultation-run-timeline__body-inner {
+  min-height: 0;
+  overflow: hidden;
 }
 .consultation-run-timeline__list {
   margin-top: var(--space-2);
@@ -1184,7 +1211,7 @@ button:disabled { cursor: default; opacity: .45; }
   color: var(--color-ink-tertiary);
   transition: transform 160ms ease;
 }
-.consultation-run-timeline[open] > summary > .consultation-run-timeline__chevron,
+.consultation-run-timeline.is-open > .consultation-run-timeline__summary > .consultation-run-timeline__chevron,
 .consultation-run-timeline__details[open] > summary > .consultation-run-timeline__chevron {
   transform: rotate(180deg);
 }
@@ -1221,7 +1248,8 @@ button:disabled { cursor: default; opacity: .45; }
   white-space: pre-wrap;
 }
 @media (prefers-reduced-motion: reduce) {
-  .consultation-run-timeline__spinner,
+  .consultation-run-timeline__summary-label,
+  .consultation-run-timeline__body-wrap,
   .consultation-run-timeline__chevron {
     animation: none;
     transition: none;
diff --git a/frontend/src/components/chat-message-row.tsx b/frontend/src/components/chat-message-row.tsx
index 401cc4cd..0bffd982 100644
--- a/frontend/src/components/chat-message-row.tsx
+++ b/frontend/src/components/chat-message-row.tsx
@@ -87,7 +87,7 @@ export function ChatMessageRow({
       }, {
         autoAlpha: 1,
         clearProps: "opacity,transform,visibility",
-        duration: 0.18,
+        duration: 0.16,
         ease: "cubic-bezier(.22, 1, .36, 1)",
         y: 0,
       });
diff --git a/frontend/src/components/chat-transcript.tsx b/frontend/src/components/chat-transcript.tsx
index a15b028e..6dc16186 100644
--- a/frontend/src/components/chat-transcript.tsx
+++ b/frontend/src/components/chat-transcript.tsx
@@ -11,16 +11,21 @@ import { isGeneralDailyFortuneQuestion } from "@/lib/consultation-entrypoint";
 import { deriveConsultationFollowUps } from "@/lib/consultation-follow-ups";
 import type { ConsultationDomain } from "@/lib/consultation-domain-registry";
 import type { AgentActivityView, ChatMessage, ChatMessageView } from "@/lib/chat-message-view";
-import { chatMessageViews, settledChatMessageViews, streamingChatMessageView } from "@/lib/chat-message-view";
+import {
+  chatMessageViews,
+  latestAssistantView,
+  settledChatMessageViews,
+} from "@/lib/chat-message-view";
 import type { PublicThinkingSection } from "@/lib/consultation-thinking-plan";
 import type { ConsultationTimelineRow } from "@/lib/consultation-run-timeline";
 import {
+  noteLatestEntryMount,
   noteSettledListRender,
   noteSettledRowRender,
   noteStreamingRowRender,
   noteUnsplitListRender,
 } from "@/lib/home-streaming-render-probe";
-import { memo, type MutableRefObject } from "react";
+import { memo, useEffect, type MutableRefObject } from "react";
 
 export type ChatTranscriptActions = Readonly<{
   onFeedback: (feedbackKey: string, requested: ChatMessageFeedback) => void;
@@ -47,20 +52,7 @@ export type ChatTranscriptProps = Readonly<{
   actionsRef: MutableRefObject<ChatTranscriptActions>;
 }>;
 
-const SettledMessageEntry = memo(function SettledMessageEntry({
-  message,
-  views,
-  index,
-  sessionId,
-  sessionType,
-  theme,
-  messageFeedback,
-  copiedMessageKey,
-  loading,
-  cancellationPending,
-  productEntrypointsDisabled,
-  actionsRef,
-}: Readonly<{
+type MessageEntryProps = Readonly<{
   message: ChatMessageView;
   views: readonly ChatMessageView[];
   index: number;
@@ -73,8 +65,27 @@ const SettledMessageEntry = memo(function SettledMessageEntry({
   cancellationPending: boolean;
   productEntrypointsDisabled: boolean;
   actionsRef: MutableRefObject<ChatTranscriptActions>;
-}>) {
-  noteSettledRowRender();
+}>;
+
+/**
+ * One transcript row. The same component renders history rows, the row that is
+ * still streaming and the row that just settled: actions and follow-ups appear
+ * once the view is settled, nothing remounts when it does.
+ */
+function MessageEntry({
+  message,
+  views,
+  index,
+  sessionId,
+  sessionType,
+  theme,
+  messageFeedback,
+  copiedMessageKey,
+  loading,
+  cancellationPending,
+  productEntrypointsDisabled,
+  actionsRef,
+}: MessageEntryProps) {
   const showActions = message.role === "assistant"
     && message.state === "settled"
     && Boolean(message.text);
@@ -116,10 +127,21 @@ const SettledMessageEntry = memo(function SettledMessageEntry({
       />
     </div>
   );
+}
+
+const HistoryMessageEntry = memo(function HistoryMessageEntry(props: MessageEntryProps) {
+  noteSettledRowRender();
+  return <MessageEntry {...props} />;
 });
 
+/**
+ * History rows: every settled message except the trailing assistant reply,
+ * which `LatestAssistantEntry` owns so it keeps one identity from the first
+ * streamed token through settlement.
+ */
 export const SettledMessageList = memo(function SettledMessageList({
   messages,
+  excludeLatestAssistant = false,
   sessionId,
   sessionType,
   theme,
@@ -129,13 +151,16 @@ export const SettledMessageList = memo(function SettledMessageList({
   cancellationPending,
   productEntrypointsDisabled,
   actionsRef,
-}: Omit<ChatTranscriptProps, "streamingText" | "streamingActivity" | "streamingThinking" | "streamingSections" | "streamingTimeline">) {
+}: Omit<ChatTranscriptProps, "streamingText" | "streamingActivity" | "streamingThinking" | "streamingSections" | "streamingTimeline"> & {
+  excludeLatestAssistant?: boolean;
+}) {
   noteSettledListRender();
   const views = settledChatMessageViews(messages);
+  const history = excludeLatestAssistant && views.at(-1)?.role === "assistant" ? views.slice(0, -1) : views;
   return (
     <>
-      {views.map((message, index) => (
-        <SettledMessageEntry
+      {history.map((message, index) => (
+        <HistoryMessageEntry
           key={message.renderKey}
           message={message}
           views={views}
@@ -155,15 +180,13 @@ export const SettledMessageList = memo(function SettledMessageList({
   );
 });
 
-export const StreamingMessageEntry = memo(function StreamingMessageEntry({
-  message,
-}: Readonly<{ message: ChatMessageView }>) {
+/** The trailing assistant reply, streaming or settled, under one React identity. */
+export const LatestAssistantEntry = memo(function LatestAssistantEntry(props: MessageEntryProps) {
   noteStreamingRowRender();
-  return (
-    <div className="message-entry">
-      <ChatMessageRow message={message} />
-    </div>
-  );
+  useEffect(() => {
+    noteLatestEntryMount();
+  }, []);
+  return <MessageEntry {...props} />;
 });
 
 export const ChatTranscript = memo(function ChatTranscript({
@@ -183,7 +206,7 @@ export const ChatTranscript = memo(function ChatTranscript({
   productEntrypointsDisabled,
   actionsRef,
 }: ChatTranscriptProps) {
-  const streamingMessage = streamingChatMessageView(
+  const latest = latestAssistantView(
     messages,
     loading,
     streamingText,
@@ -197,6 +220,7 @@ export const ChatTranscript = memo(function ChatTranscript({
     <>
       <SettledMessageList
         messages={messages}
+        excludeLatestAssistant
         loading={loading}
         sessionId={sessionId}
         sessionType={sessionType}
@@ -207,7 +231,23 @@ export const ChatTranscript = memo(function ChatTranscript({
         productEntrypointsDisabled={productEntrypointsDisabled}
         actionsRef={actionsRef}
       />
-      {streamingMessage ? <StreamingMessageEntry message={streamingMessage} /> : null}
+      {latest ? (
+        <LatestAssistantEntry
+          key={latest.view.renderKey}
+          message={latest.view}
+          views={latest.views}
+          index={latest.views.length - 1}
+          sessionId={sessionId}
+          sessionType={sessionType}
+          theme={theme}
+          messageFeedback={messageFeedback}
+          copiedMessageKey={copiedMessageKey}
+          loading={loading}
+          cancellationPending={cancellationPending}
+          productEntrypointsDisabled={productEntrypointsDisabled}
+          actionsRef={actionsRef}
+        />
+      ) : null}
     </>
   );
 });
@@ -244,46 +284,22 @@ export function UnsplitChatTranscript({
       {views.map((message, index) => {
         noteSettledRowRender();
         if (message.state !== "settled") noteStreamingRowRender();
-        const showActions = message.role === "assistant"
-          && message.state === "settled"
-          && Boolean(message.text);
-        const feedbackKey = `${sessionId}:${message.renderKey}`;
-        const latestRegeneratableKey = !loading && !cancellationPending
-          ? [...views].reverse().find((item) => (
-            item.role === "assistant" && item.state === "settled" && Boolean(item.text)
-          ))?.renderKey
-          : undefined;
-        const previousQuestion = views[index - 1]?.role === "user" ? views[index - 1]?.text : "";
-        const followUps = showActions
-          && message.renderKey === latestRegeneratableKey
-          && sessionType === "consultation"
-          && previousQuestion
-          ? deriveConsultationFollowUps({
-            question: previousQuestion,
-            answer: message.text,
-            theme,
-            entrypoint: isGeneralDailyFortuneQuestion(previousQuestion) ? "daily_starlanguage" : null,
-          })
-          : [];
         return (
-          <div className="message-entry" key={message.renderKey}>
-            <ChatMessageRow message={message} />
-            {showActions && (
-              <ChatMessageActions
-                feedback={messageFeedback[feedbackKey]}
-                copied={copiedMessageKey === feedbackKey}
-                canRegenerate={message.renderKey === latestRegeneratableKey}
-                onFeedback={(requested) => actionsRef.current.onFeedback(feedbackKey, requested)}
-                onCopy={() => actionsRef.current.onCopy(feedbackKey, message.text)}
-                onRegenerate={() => actionsRef.current.onRegenerate(message.renderKey)}
-              />
-            )}
-            <ConversationFollowUps
-              questions={followUps}
-              disabled={productEntrypointsDisabled}
-              onSelect={(question) => actionsRef.current.onFollowUp(question)}
-            />
-          </div>
+          <MessageEntry
+            key={message.renderKey}
+            message={message}
+            views={views}
+            index={index}
+            sessionId={sessionId}
+            sessionType={sessionType}
+            theme={theme}
+            messageFeedback={messageFeedback}
+            copiedMessageKey={copiedMessageKey}
+            loading={loading}
+            cancellationPending={cancellationPending}
+            productEntrypointsDisabled={productEntrypointsDisabled}
+            actionsRef={actionsRef}
+          />
         );
       })}
     </>
diff --git a/frontend/src/components/consultation-run-timeline.tsx b/frontend/src/components/consultation-run-timeline.tsx
index bf74195d..633ef3ba 100644
--- a/frontend/src/components/consultation-run-timeline.tsx
+++ b/frontend/src/components/consultation-run-timeline.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useId, useState } from "react";
 import { BookOpen, Check, ChevronDown, Layers, ListTodo, LoaderCircle, PenLine, type LucideIcon } from "lucide-react";
 
 import { InlineSpinner } from "@/components/inline-spinner";
@@ -18,6 +19,23 @@ const KIND_ICONS: Record<ConsultationTimelineKind, LucideIcon> = {
   write: PenLine,
 };
 
+/** Shown while the request is in flight but no step has been reported yet. */
+export const QUEUED_TIMELINE_ROW: ConsultationTimelineRow = {
+  id: "queued",
+  kind: "method",
+  status: "live",
+  label: "正在处理…",
+};
+
+export function timelineSummaryLabel(rows: readonly ConsultationTimelineRow[], live: boolean): string {
+  return live ? "正在分析" : `已完成 ${rows.length} 步`;
+}
+
+/**
+ * The step timeline of one assistant reply. Open by default while live and
+ * closed once settled; a reader's own toggle wins over both. The element keeps
+ * its identity across settlement so the collapse is a transition, not a swap.
+ */
 export function ConsultationRunTimeline({
   rows,
   live = false,
@@ -25,26 +43,43 @@ export function ConsultationRunTimeline({
   rows: readonly ConsultationTimelineRow[];
   live?: boolean;
 }>) {
-  if (rows.length === 0) return null;
+  const bodyId = useId();
+  const [userOpen, setUserOpen] = useState<boolean | null>(null);
+  const visibleRows = rows.length === 0 && live ? [QUEUED_TIMELINE_ROW] : rows;
+  if (visibleRows.length === 0) return null;
+  const open = userOpen ?? live;
+  const summary = timelineSummaryLabel(rows, live);
 
   return (
-    <details
-      key={live ? "live" : "settled"}
-      className="consultation-run-timeline"
-      open={live ? true : undefined}
+    <section
+      className={`consultation-run-timeline${open ? " is-open" : ""}${live ? " is-live" : ""}`}
+      aria-label="分析步骤"
     >
-      <summary className="consultation-run-timeline__summary">
-        <span className="consultation-run-timeline__summary-label">
-          {live ? "正在分析" : `已完成 ${rows.length} 步`}
+      <button
+        type="button"
+        className="consultation-run-timeline__summary"
+        aria-expanded={open}
+        aria-controls={bodyId}
+        onClick={() => setUserOpen(!open)}
+      >
+        <span
+          key={summary}
+          className={`consultation-run-timeline__summary-label${live ? " agent-activity-status__text" : ""}`}
+        >
+          {summary}
         </span>
         <ChevronDown className="consultation-run-timeline__chevron" aria-hidden="true" />
-      </summary>
-      <ol className="agent-thinking-timeline consultation-run-timeline__list" aria-label="步骤">
-        {rows.map((row) => (
-          <TimelineRow key={row.id} row={row} />
-        ))}
-      </ol>
-    </details>
+      </button>
+      <div className="consultation-run-timeline__body-wrap" id={bodyId} inert={open ? undefined : true}>
+        <div className="consultation-run-timeline__body-inner">
+          <ol className="agent-thinking-timeline consultation-run-timeline__list" aria-label="步骤">
+            {visibleRows.map((row) => (
+              <TimelineRow key={row.id} row={row} />
+            ))}
+          </ol>
+        </div>
+      </div>
+    </section>
   );
 }
 
@@ -68,7 +103,13 @@ function TimelineRow({ row }: Readonly<{ row: ConsultationTimelineRow }>) {
   const label = (
     <span className="consultation-run-timeline__label">
       <KindIcon className="consultation-run-timeline__kind-icon" aria-hidden="true" />
-      <span>{row.label}</span>
+      <span
+        key={row.label}
+        className={row.status === "live" ? "agent-activity-status__text" : undefined}
+        role={row.status === "live" ? "status" : undefined}
+      >
+        {row.label}
+      </span>
     </span>
   );
 
diff --git a/frontend/src/lib/chat-message-view.ts b/frontend/src/lib/chat-message-view.ts
index 91e0363f..1db38241 100644
--- a/frontend/src/lib/chat-message-view.ts
+++ b/frontend/src/lib/chat-message-view.ts
@@ -106,6 +106,43 @@ export function streamingChatMessageView(
   };
 }
 
+export type LatestAssistantView = Readonly<{
+  /** The trailing assistant reply: the live stream, or the last settled answer. */
+  view: ChatMessageView;
+  /** Every view in order, ending with `view`, for follow-up and regenerate lookups. */
+  views: readonly ChatMessageView[];
+}>;
+
+/**
+ * The trailing assistant reply keeps one render key from its first streamed
+ * token through settlement (`message-<index>` in both cases), so the same
+ * component instance can carry it across the transition without remounting.
+ */
+export function latestAssistantView(
+  messages: readonly ChatMessage[],
+  loading: boolean,
+  streamingText: string,
+  activity?: AgentActivityView,
+  thinkingText?: string,
+  thinkingSections?: readonly PublicThinkingSection[],
+  timeline?: readonly ConsultationTimelineRow[],
+): LatestAssistantView | undefined {
+  const settled = settledChatMessageViews(messages);
+  const streaming = streamingChatMessageView(
+    messages,
+    loading,
+    streamingText,
+    activity,
+    thinkingText,
+    thinkingSections,
+    timeline,
+  );
+  if (streaming) return { view: streaming, views: [...settled, streaming] };
+  const last = settled.at(-1);
+  if (!last || last.role !== "assistant") return undefined;
+  return { view: last, views: settled };
+}
+
 export function chatMessageViews(
   messages: readonly ChatMessage[],
   loading: boolean,
diff --git a/frontend/src/lib/home-streaming-render-probe.ts b/frontend/src/lib/home-streaming-render-probe.ts
index 81963d1c..6d94033e 100644
--- a/frontend/src/lib/home-streaming-render-probe.ts
+++ b/frontend/src/lib/home-streaming-render-probe.ts
@@ -3,6 +3,7 @@ export type HomeStreamingRenderProbeSnapshot = Readonly<{
   settledRowRenders: number;
   streamingRowRenders: number;
   unsplitListRenders: number;
+  latestEntryMounts: number;
 }>;
 
 const emptySnapshot = (): HomeStreamingRenderProbeSnapshot => ({
@@ -10,6 +11,7 @@ const emptySnapshot = (): HomeStreamingRenderProbeSnapshot => ({
   settledRowRenders: 0,
   streamingRowRenders: 0,
   unsplitListRenders: 0,
+  latestEntryMounts: 0,
 });
 
 let enabled = false;
@@ -48,3 +50,7 @@ export function noteStreamingRowRender() {
 export function noteUnsplitListRender() {
   if (enabled) snapshot = { ...snapshot, unsplitListRenders: snapshot.unsplitListRenders + 1 };
 }
+
+export function noteLatestEntryMount() {
+  if (enabled) snapshot = { ...snapshot, latestEntryMounts: snapshot.latestEntryMounts + 1 };
+}
diff --git a/frontend/tests/chat-bundle-splitting-contract.test.ts b/frontend/tests/chat-bundle-splitting-contract.test.ts
index aa334bdb..bd639da4 100644
--- a/frontend/tests/chat-bundle-splitting-contract.test.ts
+++ b/frontend/tests/chat-bundle-splitting-contract.test.ts
@@ -61,7 +61,9 @@ test("gsap loads on demand while keeping the reduced-motion gate", () => {
   assert.match(messageRowSource, /prefers-reduced-motion: reduce/);
   assert.match(messageRowSource, /prefers-reduced-motion: no-preference/);
   assert.match(messageRowSource, /gsap\.matchMedia\(\)/);
-  assert.match(messageRowSource, /duration: 0\.18/);
+  // Former value: `duration: 0\.18`. DESIGN.md §6 gives the message entrance 160ms and the CSS
+  // keyframe that used to run alongside was 160ms too; 0.18 was the GSAP copy drifting.
+  assert.match(messageRowSource, /duration: 0\.16/);
   assert.match(messageRowSource, /clearProps: "opacity,transform,visibility"/);
 
   // And: a row that mounts before the chunk lands renders unanimated instead of flashing.
diff --git a/frontend/tests/chat-stream-settle-contract.test.ts b/frontend/tests/chat-stream-settle-contract.test.ts
new file mode 100644
index 00000000..273f5c9a
--- /dev/null
+++ b/frontend/tests/chat-stream-settle-contract.test.ts
@@ -0,0 +1,80 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+
+import { ConsultationRunTimeline, timelineSummaryLabel } from "../src/components/consultation-run-timeline.tsx";
+import { latestAssistantView, type ChatMessage } from "../src/lib/chat-message-view.ts";
+
+const read = (path: string) => readFileSync(new URL(`../${path}`, import.meta.url), "utf8");
+const transcriptSource = read("src/components/chat-transcript.tsx");
+const timelineSource = read("src/components/consultation-run-timeline.tsx");
+const messageRowSource = read("src/components/chat-message-row.tsx");
+const globalStyles = read("src/app/globals.css");
+
+test("the trailing assistant reply keeps one view identity from first token to settlement", () => {
+  const history: ChatMessage[] = [{ role: "user", text: "问题" }];
+  const streaming = latestAssistantView(history, true, "完整答案");
+  const settled = latestAssistantView([...history, { role: "assistant", text: "完整答案" }], false, "");
+  assert.ok(streaming && settled);
+  assert.equal(streaming.view.renderKey, settled.view.renderKey);
+  assert.equal(streaming.view.state, "streaming");
+  assert.equal(settled.view.state, "settled");
+  assert.equal(streaming.views.length, 2);
+  assert.equal(settled.views.length, 2);
+
+  // A trailing user message means nothing is pending and nothing is latest.
+  assert.equal(latestAssistantView(history, false, ""), undefined);
+  // A settled reply still in the loading gap is rendered once, not duplicated.
+  const lagging = latestAssistantView([...history, { role: "assistant", text: "完整答案" }], true, "完整答案");
+  assert.equal(lagging?.view.state, "settled");
+});
+
+test("one component renders the latest reply in both states; nothing remounts on settle", () => {
+  assert.match(transcriptSource, /export const LatestAssistantEntry = memo\(/);
+  assert.match(transcriptSource, /<LatestAssistantEntry\s+key=\{latest\.view\.renderKey\}/);
+  assert.match(transcriptSource, /excludeLatestAssistant/);
+  assert.match(transcriptSource, /noteLatestEntryMount\(\)/);
+  assert.doesNotMatch(transcriptSource, /StreamingMessageEntry|SettledMessageEntry/);
+  // Exactly one place in the split transcript renders the trailing reply.
+  assert.equal(transcriptSource.match(/<LatestAssistantEntry\b/g)?.length, 1);
+});
+
+test("a message enters once, through GSAP at the documented 160ms, never twice", () => {
+  assert.match(messageRowSource, /duration: 0\.16/);
+  assert.doesNotMatch(globalStyles, /message-enter/);
+  const messageRule = globalStyles.match(/\n\.message \{[^}]*\}/)?.[0] ?? "";
+  assert.ok(messageRule, "the .message rule exists");
+  assert.doesNotMatch(messageRule, /animation/);
+});
+
+test("the timeline collapses in place with a 180ms height transition and honours the reader's toggle", () => {
+  assert.doesNotMatch(timelineSource, /key=\{live/);
+  assert.match(timelineSource, /const open = userOpen \?\? live/);
+  assert.match(timelineSource, /aria-expanded=\{open\}/);
+  assert.match(timelineSource, /inert=\{open \? undefined : true\}/);
+  assert.match(timelineSource, /className="consultation-run-timeline__summary"/);
+  assert.match(timelineSource, /agent-activity-status__text/);
+  assert.match(globalStyles, /\.consultation-run-timeline__body-wrap \{[^}]*grid-template-rows: 0fr/);
+  assert.match(globalStyles, /\.consultation-run-timeline__body-wrap \{[^}]*transition: grid-template-rows 180ms var\(--ease-out\)/);
+  assert.match(globalStyles, /\.consultation-run-timeline\.is-open > \.consultation-run-timeline__body-wrap \{[^}]*grid-template-rows: 1fr/);
+  assert.match(globalStyles, /\.consultation-run-timeline__summary-label \{[^}]*animation: agent-activity-status-in 120ms/);
+  assert.match(globalStyles, /@media \(prefers-reduced-motion: reduce\) \{\s*\.consultation-run-timeline__summary-label,\s*\.consultation-run-timeline__body-wrap,/);
+
+  assert.equal(timelineSummaryLabel([], true), "正在分析");
+  assert.equal(timelineSummaryLabel([{ id: "method", kind: "method", status: "done", label: "已加载方法" }], false), "已完成 1 步");
+
+  const live = renderToString(createElement(ConsultationRunTimeline, { rows: [], live: true }));
+  assert.match(live, /aria-expanded="true"/);
+  assert.match(live, /正在处理…/);
+  assert.match(live, /inline-spinner/);
+  const settled = renderToString(createElement(ConsultationRunTimeline, {
+    rows: [{ id: "method", kind: "method", status: "done", label: "已加载方法" }],
+    live: false,
+  }));
+  assert.match(settled, /aria-expanded="false"/);
+  assert.match(settled, /inert=""/);
+  assert.match(settled, /已完成 1 步/);
+  assert.equal(renderToString(createElement(ConsultationRunTimeline, { rows: [], live: false })), "");
+});
diff --git a/frontend/tests/class-name-definition-contract.test.ts b/frontend/tests/class-name-definition-contract.test.ts
index f68f9e38..db0ee295 100644
--- a/frontend/tests/class-name-definition-contract.test.ts
+++ b/frontend/tests/class-name-definition-contract.test.ts
@@ -54,7 +54,6 @@ const tailwindCollisions = new Set([
 const knownUnstyled = new Set([
   "birth-time-evidence-receipt",
   "chart-nav",
-  "consultation-run-timeline__summary",
   "consultation-step-tree",
   "is-changed",
   "is-done",
diff --git a/frontend/tests/home-streaming-render-split.test.ts b/frontend/tests/home-streaming-render-split.test.ts
index ccd16d20..239218f3 100644
--- a/frontend/tests/home-streaming-render-split.test.ts
+++ b/frontend/tests/home-streaming-render-split.test.ts
@@ -4,15 +4,15 @@ import { renderToString } from "react-dom/server";
 import test from "node:test";
 
 import {
+  LatestAssistantEntry,
   SettledMessageList,
-  StreamingMessageEntry,
   UnsplitChatTranscript,
   type ChatTranscriptActions,
   type ChatTranscriptProps,
 } from "../src/components/chat-transcript.tsx";
 import type { ChatMessage } from "../src/lib/chat-message-view.ts";
 import { createStreamFrameBuffer, type StreamFrameScheduler } from "../src/lib/stream-frame-buffer.ts";
-import { streamingChatMessageView } from "../src/lib/chat-message-view.ts";
+import { settledChatMessageViews, streamingChatMessageView } from "../src/lib/chat-message-view.ts";
 import {
   disableHomeStreamingRenderProbe,
   enableHomeStreamingRenderProbe,
@@ -58,7 +58,14 @@ test("the split architecture renders settled history once while streaming tokens
   for (const streamingText of tokens) {
     const streamingMessage = streamingChatMessageView(messages, true, streamingText);
     assert.ok(streamingMessage);
-    renderToString(createElement(StreamingMessageEntry, { message: streamingMessage }));
+    renderToString(createElement(LatestAssistantEntry, {
+      ...base,
+      loading: true,
+      message: streamingMessage,
+      views: [...settledChatMessageViews(messages), streamingMessage],
+      index: messages.length,
+      cancellationPending: false,
+    }));
   }
   const split = homeStreamingRenderProbeSnapshot();
   disableHomeStreamingRenderProbe();
@@ -103,7 +110,13 @@ test("frame coalescing renders the streaming row once per frame, not once per to
     flush: (frame) => {
       const streamingMessage = streamingChatMessageView(messages, true, frame.answer);
       assert.ok(streamingMessage);
-      renderToString(createElement(StreamingMessageEntry, { message: streamingMessage }));
+      renderToString(createElement(LatestAssistantEntry, {
+        ...propsFor(messages),
+        loading: true,
+        message: streamingMessage,
+        views: [...settledChatMessageViews(messages), streamingMessage],
+        index: messages.length,
+      }));
     },
   });
   // 200 one-character tokens arrive four per frame across fifty frames.
diff --git a/frontend/tests/session-conversation-layout.test.ts b/frontend/tests/session-conversation-layout.test.ts
index 6dc7f197..6426f60b 100644
--- a/frontend/tests/session-conversation-layout.test.ts
+++ b/frontend/tests/session-conversation-layout.test.ts
@@ -25,7 +25,9 @@ test("keeps onboarding transcript and intake card on the same session column", (
 test("keeps message motion restrained and honors reduced-motion preferences", () => {
   assert.match(messageRowSource, /gsap\.matchMedia\(\)/);
   assert.match(messageRowSource, /prefers-reduced-motion:\s*no-preference/);
-  assert.match(messageRowSource, /duration:\s*0\.18/);
+  // Former value: `duration:\s*0\.18`. DESIGN.md §6 gives the message entrance 160ms; 0.18 was
+  // the GSAP copy drifting from the (now removed) 160ms CSS keyframe that ran alongside it.
+  assert.match(messageRowSource, /duration:\s*0\.16/);
   assert.match(messageRowSource, /ease:\s*"cubic-bezier\(\.22,\s*1,\s*\.36,\s*1\)"/);
   assert.match(messageRowSource, /clearProps:\s*"opacity,transform,visibility"/);
 });

From ccdae76dd32a59e52b071b1eff75bd038eb4981b Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Tue, 1 Sep 2026 23:10:28 +0000
Subject: [PATCH 3/9] refactor(chat): render rectification activity through the
 shared step timeline

The rectification surface had its own activity pipeline: a trace panel
with a 20px canvas orb clipped inside a 14px marker, a list that never
collapsed, a second receipt disclosure under every reply, an inline
failure banner and a staged label while regenerating. Its trace and
receipt are now projected onto ConsultationTimelineRow so both surfaces
render one ConsultationRunTimeline with one live marker and one settled
summary; receipt methods become source chips on the last completed row.
The unreachable sections-report/step-tree path, the trace panel, the
receipt component and the thinking-orbs dependency are removed. The
server-side drop of rectification thinking deltas is untouched.

BUG-476

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 docs/BUG_HISTORY.md                           |  16 ++
 frontend/package-lock.json                    | 107 ---------
 frontend/package.json                         |   1 -
 frontend/src/app/globals.css                  | 152 -------------
 .../src/components/agent-activity-status.tsx  |  96 ++------
 frontend/src/components/chat-message-row.tsx  |  28 +--
 .../components/completed-activity-receipt.tsx | 113 ----------
 .../consultation-thinking-report.tsx          |  69 ------
 .../components/rectification-agentic-chat.tsx |  29 ++-
 .../src/components/thinking-step-tree.tsx     | 213 ------------------
 .../src/lib/rectification-timeline-adapter.ts |  85 +++++++
 .../chat-bundle-splitting-contract.test.ts    |  20 +-
 frontend/tests/chat-stream-layout.test.ts     |  37 ++-
 .../class-name-definition-contract.test.ts    |   1 -
 .../rectification-activity-receipt.test.ts    |  18 +-
 .../tests/rectification-agentic-entry.test.ts |  16 +-
 .../rectification-timeline-adapter.test.ts    | 131 +++++++++++
 17 files changed, 313 insertions(+), 819 deletions(-)
 delete mode 100644 frontend/src/components/completed-activity-receipt.tsx
 delete mode 100644 frontend/src/components/consultation-thinking-report.tsx
 delete mode 100644 frontend/src/components/thinking-step-tree.tsx
 create mode 100644 frontend/src/lib/rectification-timeline-adapter.ts
 create mode 100644 frontend/tests/rectification-timeline-adapter.test.ts

diff --git a/docs/BUG_HISTORY.md b/docs/BUG_HISTORY.md
index 8709b6a9..8db2208c 100644
--- a/docs/BUG_HISTORY.md
+++ b/docs/BUG_HISTORY.md
@@ -7314,3 +7314,19 @@
 - 相关记录：BUG-474
 - 复发自：无
 - 修复版本：待发布
+
+## BUG-476 | 生时校正会话的 Agent 活动 UI 与普通会话是两套，live 标记被 14px 格子裁切
+
+- 状态：resolved
+- 首次发现：2026-09-01
+- 最近更新：2026-09-01
+- 影响面：`rectification-agentic-chat.tsx`、`agent-activity-status.tsx`、`chat-message-row.tsx`、`globals.css`、`package.json`（`thinking-orbs`）
+- 用户现象：校正会话里步骤标记是一个 20px 的 canvas 小球，被压在 14px 的格子里边缘裁切；结算后步骤列表永远全展开，下面还多挂一个「本轮完成 · N 个步骤」折叠块；失败时消息上方多一行红字；重新生成时先出现一个假的「正在组织回答…」；普通会话则是行内 spinner、结算收成「已完成 N 步」一行。两边看起来不像一个产品。
+- 触发条件：任何一次校正回合与任何一次咨询回合并排对比。
+- 根因：校正走 `activityTrace` + `AgentActivityStatus` 的 trace 分支，普通会话走 `ConsultationRunTimeline`；`chat-message-row.tsx` 里并存三条思考渲染路径（timeline、`ConsultationThinkingReport`+`ThinkingStepTree`、trace panel），其中 sections report 已无任何调用方可达；`.conversation.is-rectification .agent-thinking-marker { 14px }` 覆写与 `ThinkingOrb size={20}` 冲突。
+- 修复：新增 `lib/rectification-timeline-adapter.ts`，把 trace/receipt/activity 映射成 `ConsultationTimelineRow`（tool → calculate 行；失败 tool 标签加「未完成」；回执方法作为最后一条完成行的 sources chips，去重 ≤8；无 live 行时把「正在…」类活动文案作为 live 行，answer-composition 归 write）。校正消息由此走同一个 `ConsultationRunTimeline`。删除 `consultation-thinking-report.tsx`、`thinking-step-tree.tsx`、`completed-activity-receipt.tsx` 及其 CSS；`AgentActivityStatus` 只保留无 timeline 的兜底，live 标记统一 `InlineSpinner` 12px，移除 `thinking-orbs` 依赖；删除 14px 覆写；失败态改走既有 error 通知；重新生成显示 queued 行由真实事件填充。校正 `thinking.delta` 仍在服务端公开边界丢弃，本轮未动。
+- 验证：`tests/rectification-timeline-adapter.test.ts`；`chat-stream-layout`、`chat-bundle-splitting-contract`、`rectification-agentic-entry`、`rectification-activity-receipt` 中锁死路径的断言按「注明原值与错因」改为锁新路径。
+- 防复发：任何会话面的 Agent 活动都必须投影成 `ConsultationTimelineRow` 交给 `ConsultationRunTimeline`；live 标记只允许 `InlineSpinner`；不得再引入第二种等待词汇。
+- 相关记录：BUG-474、BUG-475
+- 复发自：无
+- 修复版本：待发布
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 542f3768..13b48200 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -39,7 +39,6 @@
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.6.0",
         "tailwindcss": "^4.3.2",
-        "thinking-orbs": "^0.1.1",
         "tsx": "^4.23.1",
         "tw-animate-css": "^1.4.0",
         "zod": "^3.25.76"
@@ -1745,9 +1744,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1764,9 +1760,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1783,9 +1776,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1802,9 +1792,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1821,9 +1808,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1840,9 +1824,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1859,9 +1840,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1878,9 +1856,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1897,9 +1872,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1922,9 +1894,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1947,9 +1916,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1972,9 +1938,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1997,9 +1960,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2022,9 +1982,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2047,9 +2004,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2072,9 +2026,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2508,9 +2459,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2527,9 +2475,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2546,9 +2491,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2565,9 +2507,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3886,9 +3825,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3903,9 +3839,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3920,9 +3853,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3937,9 +3867,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4205,9 +4132,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4224,9 +4148,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4243,9 +4164,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4262,9 +4180,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -9371,9 +9286,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -9394,9 +9306,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -9417,9 +9326,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -9440,9 +9346,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -13217,16 +13120,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/thinking-orbs": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/thinking-orbs/-/thinking-orbs-0.1.1.tgz",
-      "integrity": "sha512-nLvLTGJtk74K13MmP7XiRdzFiQx7UsoZAIyBZNgXyl7Q3h2mdz0r3eKn9LCsuzb3DGOVjwDvMhtnAkIqJJRVQA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18.0.0",
-        "react-dom": ">=18.0.0"
-      }
-    },
     "node_modules/throttle-debounce": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ebec2b02..980a68e4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,7 +48,6 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.2",
-    "thinking-orbs": "^0.1.1",
     "tsx": "^4.23.1",
     "tw-animate-css": "^1.4.0",
     "zod": "^3.25.76"
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 6655e9d4..4d629c32 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -426,13 +426,6 @@ button:disabled { cursor: default; opacity: .45; }
   gap: var(--space-2);
   min-height: 24px;
 }
-.agent-thinking-step.is-think:has(.message-thinking) {
-  display: block;
-  min-height: 0;
-}
-.agent-thinking-step.is-think .message-thinking {
-  margin-bottom: 0;
-}
 .agent-thinking-marker {
   width: 20px;
   height: 20px;
@@ -449,8 +442,6 @@ button:disabled { cursor: default; opacity: .45; }
 }
 .agent-activity-status__row { min-height: 24px; display: flex; align-items: center; gap: var(--space-2); min-width: 0; width: 100%; }
 .agent-activity-status__live { min-height: 24px; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
-.agent-activity-status canvas,
-.agent-thinking-marker canvas { flex: 0 0 auto; }
 .agent-activity-status__elapsed,
 .agent-thinking-elapsed {
   flex: 0 0 auto;
@@ -1054,67 +1045,10 @@ button:disabled { cursor: default; opacity: .45; }
   line-height: 1.55;
   white-space: pre-wrap;
 }
-.consultation-step-tree__group {
-  display: grid;
-  gap: var(--space-2);
-}
-.consultation-step-tree__stage {
-  display: grid;
-  grid-template-columns: 20px minmax(0, 1fr);
-  align-items: center;
-  gap: var(--space-2);
-  min-height: 24px;
-  margin: 0;
-  color: var(--color-ink-strong);
-  font-family: inherit;
-  font-size: var(--type-caption);
-  font-weight: 600;
-  line-height: 1.35;
-  text-wrap: balance;
-}
-.consultation-step-tree__stage-index,
-.consultation-step-tree__stage-mark {
-  width: 20px;
-  height: 20px;
-  display: grid;
-  place-items: center;
-  border-radius: var(--radius-xs);
-  background: var(--color-canvas-muted);
-  box-shadow: inset 0 0 0 1px var(--color-border);
-  color: var(--color-ink-secondary);
-  font-size: 10px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.02em;
-}
-.consultation-step-tree__stage-mark {
-  background: transparent;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 80%, transparent);
-}
-.consultation-step-tree__stage-title {
-  min-width: 0;
-}
-.agent-thinking-marker.is-pending {
-  background: var(--color-canvas-muted);
-  box-shadow: inset 0 0 0 1px var(--color-border);
-}
-.agent-thinking-step.is-more {
-  color: var(--color-ink-tertiary);
-}
 .consultation-thinking-report {
   display: grid;
   gap: var(--space-6);
 }
-.consultation-step-tree__group + .consultation-step-tree__group {
-  margin-top: var(--space-6);
-}
-.consultation-step-tree__reasoning {
-  margin: 0 0 var(--space-4);
-  color: var(--color-ink-secondary);
-  font-size: var(--type-caption);
-  line-height: 1.55;
-  white-space: pre-wrap;
-}
 .consultation-report-analysis {
   min-width: 0;
 }
@@ -1124,11 +1058,6 @@ button:disabled { cursor: default; opacity: .45; }
 .consultation-report-analysis .message-markdown {
   color: var(--color-ink-strong);
 }
-.consultation-thinking-report .message-thinking {
-  margin-bottom: 0;
-  padding-bottom: var(--space-3);
-  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
-}
 .consultation-run-timeline {
   min-width: 0;
 }
@@ -2682,14 +2611,6 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
   max-width: 720px;
   padding-bottom: var(--rectification-jump-clearance);
 }
-.conversation.is-rectification .message-assistant .agent-thinking-step {
-  grid-template-columns: 14px minmax(0, 1fr);
-  gap: 6px;
-}
-.conversation.is-rectification .message-assistant .agent-thinking-marker {
-  width: 14px;
-  height: 14px;
-}
 .conversation.is-rectification .message-actions {
   margin-inline-start: var(--assistant-content-inset);
 }
@@ -3545,78 +3466,6 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
 }
 
 .rectification-message-wrap { display: grid; gap: var(--space-1); }
-.rectification-activity-receipt {
-  width: min(720px, 100%);
-  margin: 0 0 var(--space-2) 36px;
-  color: var(--color-ink-tertiary);
-  font-size: var(--type-caption);
-}
-.rectification-activity-receipt summary {
-  display: flex;
-  min-height: 32px;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: 0;
-  color: var(--color-ink-tertiary);
-  cursor: pointer;
-  font-weight: 500;
-  list-style: none;
-}
-.rectification-activity-receipt summary::-webkit-details-marker { display: none; }
-.rectification-activity-receipt summary:focus-visible {
-  border-radius: var(--radius-sm);
-  outline: 2px solid var(--color-focus);
-  outline-offset: 3px;
-}
-.rectification-activity-receipt__summary-main,
-.rectification-activity-receipt__toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-.rectification-activity-receipt__summary-main svg { color: var(--color-success); }
-.rectification-activity-receipt__toggle { flex: 0 0 auto; color: var(--color-ink-tertiary); }
-.rectification-activity-receipt__toggle svg { transition: transform 160ms ease; }
-.rectification-activity-receipt[open] .rectification-activity-receipt__toggle svg { transform: rotate(180deg); }
-.rectification-activity-receipt__failure-mark {
-  display: inline-grid;
-  width: 15px;
-  height: 15px;
-  place-items: center;
-  border: 1px solid currentColor;
-  border-radius: 50%;
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1;
-}
-.rectification-activity-receipt.is-failed,
-.rectification-activity-failure { color: var(--color-danger); }
-.rectification-activity-failure { margin: 0 0 var(--space-2) 36px; font-size: var(--type-caption); }
-.rectification-activity-receipt__details {
-  display: grid;
-  gap: var(--space-3);
-  margin-top: var(--space-1);
-  padding: var(--space-3) 0 var(--space-2) 19px;
-  border-left: 1px solid var(--color-border);
-}
-.rectification-activity-receipt__details section { display: grid; gap: var(--space-1); }
-.rectification-activity-receipt__details h3 {
-  margin: 0;
-  color: var(--color-ink-tertiary);
-  font-size: var(--type-overline);
-  font-weight: 650;
-}
-.rectification-activity-receipt__details p { margin: 0; color: var(--color-ink-secondary); line-height: 1.65; }
-.rectification-activity-receipt__method-groups { display: grid; gap: 2px; }
-.rectification-activity-receipt__method-groups strong { color: var(--color-ink-secondary); font-weight: 600; }
-
-@media (max-width: 640px) {
-  .rectification-activity-receipt,
-  .rectification-activity-failure { margin-left: 32px; }
-  .rectification-activity-receipt summary { align-items: flex-start; }
-  .rectification-activity-receipt__toggle { padding-left: var(--space-1); }
-}
 
 @media (prefers-reduced-motion: reduce) {
   .agent-activity-status__text {
@@ -3624,6 +3473,5 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
     background: none;
     -webkit-text-fill-color: currentColor;
   }
-  .rectification-activity-receipt__toggle svg { transition: none; }
   .technique-audit > summary::before { transition: none; }
 }
diff --git a/frontend/src/components/agent-activity-status.tsx b/frontend/src/components/agent-activity-status.tsx
index eba9b608..641895c8 100644
--- a/frontend/src/components/agent-activity-status.tsx
+++ b/frontend/src/components/agent-activity-status.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import dynamic from "next/dynamic";
 import { Check } from "lucide-react";
-import type { OrbState } from "thinking-orbs";
 
-import { prefetchOnIdle } from "@/components/chat-chunk-prefetch";
+import { InlineSpinner } from "@/components/inline-spinner";
 import { activityCompletedSteps, activityElapsedLabel } from "@/lib/chat-message-view";
-import type { AgentActivityTraceItem } from "@/lib/agent-activity-trace";
+
+export type AgentActivityState = "working" | "searching" | "solving" | "listening" | "composing" | "shaping";
 
 const labels = {
   working: "正在处理任务…",
@@ -16,20 +15,7 @@ const labels = {
   listening: "正在聆听…",
   composing: "正在组织回答…",
   shaping: "正在生成结果…",
-} as const satisfies Record<OrbState, string>;
-
-const importThinkingOrb = () => import("thinking-orbs");
-
-const ThinkingOrb = dynamic(async () => (await importThinkingOrb()).ThinkingOrb, {
-  loading: () => (
-    <span aria-hidden="true" style={{ display: "block", flex: "0 0 auto", height: 20, width: 20 }} />
-  ),
-  ssr: false,
-});
-
-prefetchOnIdle(importThinkingOrb);
-
-export type AgentActivityState = OrbState;
+} as const satisfies Record<AgentActivityState, string>;
 
 function ActivityElapsed({ startedAt }: Readonly<{ startedAt: number }>) {
   const [now, setNow] = useState(() => Date.now());
@@ -77,13 +63,18 @@ function VargaTraceStep({ sentence }: Readonly<{ sentence: string }>) {
   );
 }
 
+/**
+ * Fallback activity panel for an assistant row that carries no step timeline.
+ * Both chat surfaces normally render `ConsultationRunTimeline`; this remains
+ * for rows that only have a phase label, a completed trail or thinking text.
+ * The live marker is the shared `InlineSpinner`, the same one the timeline uses.
+ */
 export function AgentActivityStatus({
   state,
   label = labels[state],
   startedAt,
   completedTrail,
   thinkingText,
-  activityTrace,
   vargaSentence,
   hasAnswer = false,
   showLive = true,
@@ -93,33 +84,14 @@ export function AgentActivityStatus({
   startedAt?: number;
   completedTrail?: string;
   thinkingText?: string;
-  activityTrace?: readonly AgentActivityTraceItem[];
   vargaSentence?: string | null;
   hasAnswer?: boolean;
   showLive?: boolean;
 }>) {
   const completedSteps = activityCompletedSteps(completedTrail);
   const live = showLive && !hasAnswer;
-  const trace = activityTrace ?? [];
   const varga = vargaSentence?.trim() ?? "";
-  const showVarga = Boolean(varga) && !trace.some((item) => item.label === varga);
-  if (trace.length > 0) {
-    return (
-      <div className="agent-thinking-panel agent-activity-status">
-        <ol className="agent-thinking-timeline">
-          {trace.map((item) => (
-            <TraceStep
-              key={item.id}
-              item={item}
-              state={state}
-              hasAnswer={hasAnswer}
-            />
-          ))}
-          {showVarga ? <VargaTraceStep sentence={varga} /> : null}
-        </ol>
-      </div>
-    );
-  }
+  const showVarga = Boolean(varga);
   if (!live && completedSteps.length === 0 && !thinkingText?.trim() && !showVarga) return null;
 
   return (
@@ -136,8 +108,8 @@ export function AgentActivityStatus({
           ))}
           {live ? (
             <li className="agent-thinking-step is-live">
-              <span className="agent-thinking-marker is-live-marker">
-                <ThinkingOrb aria-hidden="true" state={state} size={20} />
+              <span className="agent-thinking-marker is-live-marker" aria-hidden="true">
+                <InlineSpinner size={12} />
               </span>
               <span className="agent-activity-status__live" role="status">
                 <span key={label} className="agent-activity-status__text">{label}</span>
@@ -152,45 +124,3 @@ export function AgentActivityStatus({
     </div>
   );
 }
-
-function TraceStep({
-  item,
-  state,
-  hasAnswer,
-}: Readonly<{
-  item: AgentActivityTraceItem;
-  state: AgentActivityState;
-  hasAnswer: boolean;
-}>) {
-  if (item.kind === "think") {
-    return (
-      <li className={`agent-thinking-step is-think is-${item.status}`}>
-        {item.text?.trim() ? (
-          <MessageThinkingTrace text={item.text} hasAnswer={hasAnswer || item.status === "done"} />
-        ) : (
-          <>
-            <span className={`agent-thinking-marker${item.status === "live" ? " is-live-marker" : ""}`} aria-hidden="true">
-              {item.status === "live" ? <ThinkingOrb aria-hidden="true" state={state} size={20} /> : <Check />}
-            </span>
-            <span>{item.label}</span>
-          </>
-        )}
-      </li>
-    );
-  }
-  return (
-    <li className={`agent-thinking-step is-${item.status}`}>
-      <span className={`agent-thinking-marker${item.status === "live" ? " is-live-marker" : ""}`} aria-hidden="true">
-        {item.status === "live" ? <ThinkingOrb aria-hidden="true" state={state} size={20} /> : <Check />}
-      </span>
-      {item.status === "live" ? (
-        <span className="agent-activity-status__live" role="status">
-          <span key={item.label} className="agent-activity-status__text">{item.label}</span>
-          {item.startedAt ? <ActivityElapsed key={item.startedAt} startedAt={item.startedAt} /> : null}
-        </span>
-      ) : (
-        <span>{item.label}</span>
-      )}
-    </li>
-  );
-}
diff --git a/frontend/src/components/chat-message-row.tsx b/frontend/src/components/chat-message-row.tsx
index 0bffd982..41b95032 100644
--- a/frontend/src/components/chat-message-row.tsx
+++ b/frontend/src/components/chat-message-row.tsx
@@ -4,7 +4,6 @@ import { AgentActivityStatus } from "@/components/agent-activity-status";
 import { prefetchOnIdle } from "@/components/chat-chunk-prefetch";
 import { ChatMessageContent } from "@/components/chat-message-content";
 import { ConsultationRunTimeline } from "@/components/consultation-run-timeline";
-import { ConsultationThinkingReport } from "@/components/consultation-thinking-report";
 import type { ChatMessageView } from "@/lib/chat-message-view";
 import { useEffect, useLayoutEffect, useRef } from "react";
 
@@ -63,12 +62,11 @@ export function ChatMessageRow({
     ?? (message.state === "thinking" ? "正在处理…" : undefined);
   const hasAnswer = Boolean(message.text.trim());
   const consultTimeline = message.timeline;
-  const thinkingSections = message.thinkingSections ?? [];
-  const hasTrace = (message.activityTrace?.length ?? 0) > 0;
-  const showReport = consultTimeline === undefined && thinkingSections.length > 0;
-  const showLiveActivity = showActivity && !showReport && consultTimeline === undefined;
-  const showThinkingPanel = showLiveActivity || (!showReport && consultTimeline === undefined && (Boolean(message.thinkingText?.trim()) || hasTrace));
-  const showSpokenAnswer = !showReport && Boolean(message.text);
+  // Rows with a step timeline (every consultation and rectification reply) render
+  // `ConsultationRunTimeline`; the activity panel is the fallback for rows without one.
+  const showLiveActivity = showActivity && consultTimeline === undefined;
+  const showThinkingPanel = showLiveActivity || (consultTimeline === undefined && Boolean(message.thinkingText?.trim()));
+  const showSpokenAnswer = Boolean(message.text);
   const stackedThinkingAndAnswer = showThinkingPanel && showSpokenAnswer;
 
   useEntryEffect(() => {
@@ -102,8 +100,7 @@ export function ChatMessageRow({
         label={activityLabel}
         startedAt={message.activity?.startedAt}
         completedTrail={message.activity?.completedTrail}
-        thinkingText={hasTrace ? undefined : message.thinkingText}
-        activityTrace={message.activityTrace}
+        thinkingText={message.thinkingText}
         vargaSentence={vargaSentence}
         hasAnswer={hasAnswer}
         showLive={showLiveActivity}
@@ -145,19 +142,6 @@ export function ChatMessageRow({
               </div>
             ) : (
               <>
-                {showReport && (
-                  <ConsultationThinkingReport
-                    sections={thinkingSections}
-                    thinkingText={message.thinkingText}
-                    answer={message.text}
-                    live={showActivity && !hasAnswer}
-                    liveLabel={activityLabel}
-                    liveState={activityState}
-                    startedAt={message.activity?.startedAt}
-                    auditRows={message.agentExecutionReceipt?.techniqueAuditTable}
-                    vargaSentence={vargaSentence}
-                  />
-                )}
                 {stackedThinkingAndAnswer ? (
                   <div className="message-stage-and-answer">
                     {thinkingPanel}
diff --git a/frontend/src/components/completed-activity-receipt.tsx b/frontend/src/components/completed-activity-receipt.tsx
deleted file mode 100644
index 8956b6ef..00000000
--- a/frontend/src/components/completed-activity-receipt.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client";
-
-import { Check, ChevronDown } from "lucide-react";
-import type { CompletedActivityReceiptView } from "@/lib/rectification-activity-receipt";
-import { RECTIFICATION_TOOL_DONE_LABELS } from "@/lib/rectification-activity-labels";
-import type {
-  PublicRectificationMethod,
-  PublicRectificationTool,
-} from "@/lib/rectification-agentic/v9/public-receipt";
-import { PUBLIC_RECTIFICATION_METHOD_LABELS } from "@/lib/rectification-varga-sentence";
-
-const TOOL_LABELS = RECTIFICATION_TOOL_DONE_LABELS;
-
-const METHOD_LABELS = PUBLIC_RECTIFICATION_METHOD_LABELS;
-
-const METHOD_GROUPS: readonly Readonly<{
-  label: string;
-  methods: readonly PublicRectificationMethod[];
-}>[] = [
-  {
-    label: "基础判断",
-    methods: [
-      "d1-rashi",
-      "functional-benefic-malefic",
-      "vimshottari-dasha",
-      "narayana-dasha",
-      "arudha-pada",
-    ],
-  },
-  {
-    label: "主题分盘",
-    methods: [
-      "d2-hora",
-      "d4-chaturthamsha",
-      "d9-navamsa",
-      "d10-dashamsa",
-      "d11-labhamsha",
-      "d24-chaturvimshamsha",
-      "d30-trimshamsha",
-    ],
-  },
-  {
-    label: "交叉验证",
-    methods: ["gochara", "ashtakavarga", "shadbala"],
-  },
-];
-
-function failureLabel(tool: PublicRectificationTool): string {
-  return tool === "rectification-compare-candidates"
-    ? "候选比较未完成，当前进度已保留"
-    : `${TOOL_LABELS[tool]}未完成，当前进度已保留`;
-}
-
-export function CompletedActivityReceipt({
-  receipt,
-}: Readonly<{ receipt: CompletedActivityReceiptView }>) {
-  const stepLabels = receipt.steps.map((tool) => TOOL_LABELS[tool]);
-  const methodSet = new Set(receipt.methods);
-  const methodGroups = METHOD_GROUPS.map((group) => ({
-    label: group.label,
-    methods: group.methods.filter((method) => methodSet.has(method)).map((method) => METHOD_LABELS[method]),
-  })).filter((group) => group.methods.length > 0);
-  const hasDetails = stepLabels.length > 0 || methodGroups.length > 0;
-  const summary = receipt.failedTool
-    ? failureLabel(receipt.failedTool)
-    : `本轮完成 · ${stepLabels.length} 个步骤 · ${receipt.methods.length} 项计算依据`;
-
-  if (!hasDetails) {
-    return receipt.failedTool
-      ? <p className="rectification-activity-failure">{summary}</p>
-      : null;
-  }
-
-  return (
-    <details className={`rectification-activity-receipt${receipt.failedTool ? " is-failed" : ""}`}>
-      <summary>
-        <span className="rectification-activity-receipt__summary-main">
-          {receipt.failedTool ? (
-            <span className="rectification-activity-receipt__failure-mark" aria-hidden="true">!</span>
-          ) : (
-            <Check aria-hidden="true" size={14} strokeWidth={2.25} />
-          )}
-          <span>{summary}</span>
-        </span>
-        <span className="rectification-activity-receipt__toggle">
-          查看详情
-          <ChevronDown aria-hidden="true" size={14} />
-        </span>
-      </summary>
-      <div className="rectification-activity-receipt__details">
-        {stepLabels.length > 0 && (
-          <section aria-label="执行步骤">
-            <h3>执行步骤</h3>
-            <p>{stepLabels.join(" · ")}</p>
-          </section>
-        )}
-        {methodGroups.length > 0 && (
-          <section aria-label="计算依据">
-            <h3>计算依据</h3>
-            <div className="rectification-activity-receipt__method-groups">
-              {methodGroups.map((group) => (
-                <p key={group.label}>
-                  <strong>{group.label}：</strong>
-                  {group.methods.join("、")}
-                </p>
-              ))}
-            </div>
-          </section>
-        )}
-      </div>
-    </details>
-  );
-}
diff --git a/frontend/src/components/consultation-thinking-report.tsx b/frontend/src/components/consultation-thinking-report.tsx
deleted file mode 100644
index 8b978b3f..00000000
--- a/frontend/src/components/consultation-thinking-report.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client";
-
-import { ChatMessageContent } from "@/components/chat-message-content";
-import { ThinkingStepTree } from "@/components/thinking-step-tree";
-import type { TechniqueAuditRow } from "@/lib/consultation-agent-events";
-import {
-  applyThinkingSectionProgress,
-  type PublicThinkingSection,
-} from "@/lib/consultation-thinking-plan";
-
-export function ConsultationThinkingReport({
-  sections,
-  answer,
-  thinkingText,
-  live = false,
-  liveLabel,
-  liveState,
-  startedAt,
-  auditRows,
-  vargaSentence,
-}: Readonly<{
-  sections: readonly PublicThinkingSection[];
-  answer: string;
-  thinkingText?: string;
-  live?: boolean;
-  liveLabel?: string;
-  liveState?: "working" | "searching" | "solving" | "listening" | "composing" | "shaping";
-  startedAt?: number;
-  auditRows?: readonly TechniqueAuditRow[];
-  vargaSentence?: string | null;
-}>) {
-  const hasAnswer = Boolean(answer.trim());
-  const progressed = applyThinkingSectionProgress(sections, answer, {
-    settled: !live && hasAnswer,
-  });
-  const activeIndex = progressed.findIndex((section) => (
-    section.steps.some((step) => step.status === "active")
-  ));
-
-  return (
-    <div className="consultation-thinking-report">
-      <ThinkingStepTree
-        caption="思考"
-        reasoning={thinkingText}
-        groups={progressed.map((section, index) => ({
-          id: section.id,
-          intent: section.title,
-          steps: section.steps,
-          live: live && index === activeIndex,
-        }))}
-        revealAll
-        live={live && !hasAnswer}
-        liveLabel={live && !hasAnswer ? liveLabel : undefined}
-        liveState={liveState}
-        startedAt={live && !hasAnswer ? startedAt : undefined}
-        defaultOpen={live && !hasAnswer}
-      />
-      {hasAnswer ? (
-        <section className="consultation-report-analysis" aria-label="分析">
-          <ChatMessageContent
-            text={answer}
-            auditRows={auditRows}
-            vargaSentence={vargaSentence}
-          />
-        </section>
-      ) : null}
-    </div>
-  );
-}
diff --git a/frontend/src/components/rectification-agentic-chat.tsx b/frontend/src/components/rectification-agentic-chat.tsx
index 563b70f0..7286222c 100644
--- a/frontend/src/components/rectification-agentic-chat.tsx
+++ b/frontend/src/components/rectification-agentic-chat.tsx
@@ -41,6 +41,7 @@ import {
   RECTIFICATION_BOARD_SPLIT_MIN_PX,
 } from "@/lib/rectification-board-model";
 import { membershipHref } from "@/lib/membership";
+import { rectificationTimelineRows } from "@/lib/rectification-timeline-adapter";
 import { vargaSentenceFromMethods } from "@/lib/rectification-varga-sentence";
 import {
   isPublicRectificationActivity,
@@ -1158,18 +1159,29 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
               && !busy
               && !readonly
               && regeneratingMessageKey === null;
-            const displayedMessage = regenerating
+            // Both surfaces render the same step timeline: the tool trace and receipt
+            // are projected onto ConsultationRunTimeline rows. A regenerating reply shows
+            // the queued row until real events fill it in, never a staged label.
+            const displayedMessage: RenderMessage = regenerating
               ? {
                 ...message,
                 text: "",
                 thinkingText: undefined,
                 state: "thinking" as const,
-                activity: nextActivityView(undefined, {
-                  phase: "answer-composition",
-                  label: "正在组织回答…",
-                }),
+                activity: undefined,
+                activityTrace: emptyActivityTrace(),
+                completedReceipt: undefined,
+                timeline: [],
               }
-              : message;
+              : {
+                ...message,
+                timeline: rectificationTimelineRows({
+                  trace: message.activityTrace,
+                  receipt: message.completedReceipt,
+                  activity: message.activity,
+                  settled: message.state === "settled",
+                }),
+              };
             const settledChoice = message.choiceAttachment;
             const visibleChoiceCard = settledChoice?.card;
             const vargaSentence = !message.failed
@@ -1177,11 +1189,6 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
               : null;
             return (
               <div key={message.renderKey} className="rectification-message-wrap rectification-message-entry">
-                {message.state === "settled" && message.failed && Boolean(message.text) && (
-                  <p className="rectification-activity-failure" role="status">
-                    回答未完成，已保留现有内容；本次不会扣点。
-                  </p>
-                )}
                 {(!message.failed || Boolean(displayedMessage.text) || regenerating) && (
                   <ChatMessageRow
                     message={displayedMessage}
diff --git a/frontend/src/components/thinking-step-tree.tsx b/frontend/src/components/thinking-step-tree.tsx
deleted file mode 100644
index c89c95a3..00000000
--- a/frontend/src/components/thinking-step-tree.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-"use client";
-
-import { useEffect, useId, useState } from "react";
-import dynamic from "next/dynamic";
-import { Check } from "lucide-react";
-import type { OrbState } from "thinking-orbs";
-
-import { prefetchOnIdle } from "@/components/chat-chunk-prefetch";
-import { activityElapsedLabel } from "@/lib/chat-message-view";
-import {
-  visibleThinkingSteps,
-  type PublicThinkingStep,
-  type ThinkingStepStatus,
-} from "@/lib/consultation-thinking-plan";
-
-const importThinkingOrb = () => import("thinking-orbs");
-
-const ThinkingOrb = dynamic(async () => (await importThinkingOrb()).ThinkingOrb, {
-  loading: () => (
-    <span aria-hidden="true" style={{ display: "block", flex: "0 0 auto", height: 20, width: 20 }} />
-  ),
-  ssr: false,
-});
-
-prefetchOnIdle(importThinkingOrb);
-
-function ActivityElapsed({ startedAt }: Readonly<{ startedAt: number }>) {
-  const [now, setNow] = useState(() => Date.now());
-  useEffect(() => {
-    const timer = window.setInterval(() => setNow(Date.now()), 1000);
-    return () => window.clearInterval(timer);
-  }, []);
-  const label = activityElapsedLabel(startedAt, now);
-  if (!label) return null;
-  return <span className="agent-activity-status__elapsed" aria-hidden="true">{label}</span>;
-}
-
-function StepMarker({
-  status,
-  liveState,
-}: Readonly<{
-  status: ThinkingStepStatus | "live";
-  liveState?: OrbState;
-}>) {
-  if (status === "live" || status === "active") {
-    return (
-      <span className="agent-thinking-marker is-live-marker">
-        <ThinkingOrb aria-hidden="true" state={liveState ?? "working"} size={20} />
-      </span>
-    );
-  }
-  if (status === "done") {
-    return (
-      <span className="agent-thinking-marker" aria-hidden="true">
-        <Check />
-      </span>
-    );
-  }
-  return <span className="agent-thinking-marker is-pending" aria-hidden="true" />;
-}
-
-type ThinkingStepGroup = Readonly<{
-  id: string;
-  intent?: string;
-  steps: readonly PublicThinkingStep[];
-  live?: boolean;
-}>;
-
-function StepList({
-  steps,
-  revealAll,
-  live,
-  liveLabel,
-  liveState,
-  startedAt,
-}: Readonly<{
-  steps: readonly PublicThinkingStep[];
-  revealAll: boolean;
-  live: boolean;
-  liveLabel?: string;
-  liveState?: OrbState;
-  startedAt?: number;
-}>) {
-  const visible = revealAll ? { visible: steps, hiddenCount: 0 } : visibleThinkingSteps(steps);
-  const hiddenDone = visible.hiddenCount > 0
-    && steps.slice(visible.visible.length).every((step) => step.status === "done");
-  return (
-    <ol className="agent-thinking-timeline">
-      {visible.visible.map((step) => (
-        <li
-          className={`agent-thinking-step is-${step.status}`}
-          key={step.id}
-        >
-          <StepMarker status={step.status} liveState={liveState} />
-          <span>{step.label}</span>
-        </li>
-      ))}
-      {visible.hiddenCount > 0 ? (
-        <li className={`agent-thinking-step is-more${hiddenDone ? " is-done" : ""}`}>
-          <StepMarker status={hiddenDone ? "done" : "pending"} />
-          <span>还有 {visible.hiddenCount} 项</span>
-        </li>
-      ) : null}
-      {live && liveLabel ? (
-        <li className="agent-thinking-step is-live">
-          <StepMarker status="live" liveState={liveState} />
-          <span className="agent-activity-status__live" role="status">
-            <span key={liveLabel} className="agent-activity-status__text">{liveLabel}</span>
-            {startedAt ? <ActivityElapsed key={startedAt} startedAt={startedAt} /> : null}
-          </span>
-        </li>
-      ) : null}
-    </ol>
-  );
-}
-
-export function ThinkingStepTree({
-  caption,
-  intent,
-  reasoning,
-  steps = [],
-  groups,
-  hiddenCount,
-  revealAll = false,
-  live = false,
-  liveLabel,
-  liveState = "working",
-  startedAt,
-  defaultOpen = false,
-}: Readonly<{
-  caption?: string;
-  intent?: string;
-  reasoning?: string;
-  steps?: readonly PublicThinkingStep[];
-  groups?: readonly ThinkingStepGroup[];
-  hiddenCount?: number;
-  revealAll?: boolean;
-  live?: boolean;
-  liveLabel?: string;
-  liveState?: OrbState;
-  startedAt?: number;
-  defaultOpen?: boolean;
-}>) {
-  const [userOpen, setUserOpen] = useState<boolean | null>(null);
-  const treeId = useId();
-  const groupItems = groups ?? [{
-    id: "default",
-    intent,
-    steps,
-    live,
-  }];
-  const showAll = revealAll || hiddenCount === 0;
-  const stagedCount = groupItems.filter((group) => Boolean(group.intent)).length;
-  const body = (
-    <>
-      {groupItems.map((group, index) => {
-        const stageId = `${treeId}-${group.id}-stage`;
-        return (
-          <section
-            className="consultation-step-tree__group"
-            key={group.id}
-            aria-labelledby={group.intent ? stageId : undefined}
-          >
-            {group.intent ? (
-              <h3 className="consultation-step-tree__stage" id={stageId}>
-                {stagedCount > 1 ? (
-                  <span className="consultation-step-tree__stage-index" aria-hidden="true">
-                    {index + 1}
-                  </span>
-                ) : (
-                  <span className="consultation-step-tree__stage-mark" aria-hidden="true" />
-                )}
-                <span className="consultation-step-tree__stage-title">
-                  {stagedCount > 1 ? <span className="sr-only">阶段 {index + 1}：</span> : null}
-                  {group.intent}
-                </span>
-              </h3>
-            ) : null}
-            <StepList
-              steps={group.steps}
-              revealAll={showAll}
-              live={Boolean(group.live)}
-              liveLabel={group.live ? liveLabel : undefined}
-              liveState={liveState}
-              startedAt={group.live ? startedAt : undefined}
-            />
-          </section>
-        );
-      })}
-    </>
-  );
-
-  if (!caption) return <div className="consultation-step-tree">{body}</div>;
-
-  const open = userOpen ?? defaultOpen;
-  return (
-    <details
-      className="message-thinking consultation-step-tree"
-      open={open}
-      onToggle={(event) => {
-        setUserOpen((event.currentTarget as HTMLDetailsElement).open);
-      }}
-    >
-      <summary>{caption}</summary>
-      <div className="message-thinking-body">
-        {reasoning?.trim() ? (
-          <div className="consultation-step-tree__reasoning">{reasoning}</div>
-        ) : null}
-        {body}
-      </div>
-    </details>
-  );
-}
diff --git a/frontend/src/lib/rectification-timeline-adapter.ts b/frontend/src/lib/rectification-timeline-adapter.ts
new file mode 100644
index 00000000..b9c5e23f
--- /dev/null
+++ b/frontend/src/lib/rectification-timeline-adapter.ts
@@ -0,0 +1,85 @@
+import type { AgentActivityTraceItem } from "./agent-activity-trace.ts";
+import type { AgentActivityView } from "./chat-message-view.ts";
+import type { ConsultationTimelineRow } from "./consultation-run-timeline.ts";
+import type { CompletedActivityReceiptView } from "./rectification-activity-receipt.ts";
+import { PUBLIC_RECTIFICATION_METHOD_LABELS } from "./rectification-varga-sentence.ts";
+
+export const RECTIFICATION_TIMELINE_SOURCE_LIMIT = 8;
+export const RECTIFICATION_TIMELINE_LIVE_ID = "activity-live";
+const FAILED_SUFFIX = "未完成";
+
+export type RectificationTimelineInput = Readonly<{
+  trace: readonly AgentActivityTraceItem[] | undefined;
+  receipt: CompletedActivityReceiptView | undefined;
+  activity: AgentActivityView | undefined;
+  settled: boolean;
+}>;
+
+function methodChips(receipt: CompletedActivityReceiptView | undefined): string[] {
+  if (!receipt) return [];
+  const seen = new Set<string>();
+  const chips: string[] = [];
+  for (const method of receipt.methods) {
+    const label = PUBLIC_RECTIFICATION_METHOD_LABELS[method];
+    if (!label || seen.has(label)) continue;
+    seen.add(label);
+    chips.push(label);
+    if (chips.length >= RECTIFICATION_TIMELINE_SOURCE_LIMIT) break;
+  }
+  return chips;
+}
+
+/** Progress labels are the only ones that name an action still under way. */
+function isProgressLabel(label: string): boolean {
+  return /^正在/.test(label.trim());
+}
+
+/**
+ * Project the rectification agent's tool trace and receipt onto the same
+ * timeline rows the consultation surface renders, so both sessions share one
+ * step list, one live marker and one settled summary. Thinking text never
+ * reaches this surface: the public stream drops it on the server.
+ */
+export function rectificationTimelineRows(input: RectificationTimelineInput): ConsultationTimelineRow[] {
+  const failedTool = input.receipt?.failedTool;
+  const rows: ConsultationTimelineRow[] = (input.trace ?? []).map((item) => {
+    if (item.kind === "think") {
+      return {
+        id: item.id,
+        kind: "think",
+        status: item.status,
+        label: item.label,
+        ...(item.text?.trim() ? { thinkingText: item.text } : {}),
+      };
+    }
+    const failed = item.status === "done" && failedTool !== undefined && item.tool === failedTool;
+    return {
+      id: item.id,
+      kind: "calculate",
+      status: item.status,
+      label: failed ? `${item.label}${FAILED_SUFFIX}` : item.label,
+    };
+  });
+
+  const chips = methodChips(input.receipt);
+  if (chips.length > 0) {
+    for (let index = rows.length - 1; index >= 0; index -= 1) {
+      const row = rows[index];
+      if (!row || row.kind !== "calculate" || row.status !== "done" || row.label.endsWith(FAILED_SUFFIX)) continue;
+      rows[index] = { ...row, sources: chips };
+      break;
+    }
+  }
+
+  const hasLiveRow = rows.some((row) => row.status === "live");
+  const label = input.activity?.label ?? "";
+  if (!input.settled && !hasLiveRow && isProgressLabel(label)) {
+    rows.push({
+      id: RECTIFICATION_TIMELINE_LIVE_ID,
+      kind: input.activity?.phase === "answer-composition" ? "write" : "calculate",
+      status: "live",
+      label,
+    });
+  }
+  return rows;
+}
diff --git a/frontend/tests/chat-bundle-splitting-contract.test.ts b/frontend/tests/chat-bundle-splitting-contract.test.ts
index bd639da4..19597eca 100644
--- a/frontend/tests/chat-bundle-splitting-contract.test.ts
+++ b/frontend/tests/chat-bundle-splitting-contract.test.ts
@@ -71,21 +71,16 @@ test("gsap loads on demand while keeping the reduced-motion gate", () => {
   assert.match(messageRowSource, /useEntryEffect\(\(\) => \{/);
 });
 
-test("the thinking orb loads on demand behind a same-size placeholder", () => {
-  // Given: only the state type is imported at build time.
-  assert.doesNotMatch(activitySource, /^import \{ ThinkingOrb/m);
-  assert.match(activitySource, /^import type \{ OrbState \} from "thinking-orbs";$/m);
-  assert.match(activitySource, /dynamic\(async \(\) => \(await importThinkingOrb\(\)\)\.ThinkingOrb/);
-  assert.match(activitySource, /ssr: false/);
-
-  // Then: the placeholder reserves the exact 20px orb box so the row cannot shift.
-  assert.match(activitySource, /loading: \(\) => \(/);
-  assert.match(activitySource, /height: 20, width: 20/);
-  assert.match(activitySource, /flex: "0 0 auto"/);
+test("the live marker is the shared inline spinner, with no on-demand orb chunk", () => {
+  // Former test: "the thinking orb loads on demand behind a same-size placeholder". The canvas
+  // orb was a second live-marker vocabulary beside the timeline's InlineSpinner, undocumented in
+  // DESIGN.md §9, and clipped inside the rectification surface's 14px marker (BUG-476). Removed.
+  assert.doesNotMatch(activitySource, /thinking-orbs|ThinkingOrb|next\/dynamic/);
+  assert.match(activitySource, /<InlineSpinner size=\{12\} \/>/);
 
   // And: the live region and the decorative marking survive.
   assert.match(activitySource, /role="status"/);
-  assert.match(activitySource, /<ThinkingOrb aria-hidden="true" state=\{state\} size=\{20\}/);
+  assert.match(activitySource, /className="agent-thinking-marker is-live-marker" aria-hidden="true"/);
 });
 
 test("deferred chat chunks are requested during idle time after first paint", () => {
@@ -93,6 +88,5 @@ test("deferred chat chunks are requested during idle time after first paint", ()
   assert.match(prefetchSource, /window\.requestIdleCallback\(request, \{ timeout: 2_000 \}\)/);
   assert.match(prefetchSource, /window\.setTimeout\(request, 300\)/);
   assert.match(contentSource, /prefetchOnIdle\(loadMarkdownRenderer\)/);
-  assert.match(activitySource, /prefetchOnIdle\(importThinkingOrb\)/);
   assert.match(messageRowSource, /if \(motionPreferred\(\)\) prefetchOnIdle\(loadGsap\)/);
 });
diff --git a/frontend/tests/chat-stream-layout.test.ts b/frontend/tests/chat-stream-layout.test.ts
index 8fc45254..c6c7b873 100644
--- a/frontend/tests/chat-stream-layout.test.ts
+++ b/frontend/tests/chat-stream-layout.test.ts
@@ -8,8 +8,6 @@ const transcriptSource = readFileSync(new URL("../src/components/chat-transcript
 const globalStyles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
 const messageRowSource = readFileSync(new URL("../src/components/chat-message-row.tsx", import.meta.url), "utf8");
 const activitySource = readFileSync(new URL("../src/components/agent-activity-status.tsx", import.meta.url), "utf8");
-const reportSource = readFileSync(new URL("../src/components/consultation-thinking-report.tsx", import.meta.url), "utf8");
-const treeSource = readFileSync(new URL("../src/components/thinking-step-tree.tsx", import.meta.url), "utf8");
 const timelineSource = readFileSync(new URL("../src/components/consultation-run-timeline.tsx", import.meta.url), "utf8");
 const reducerSource = readFileSync(new URL("../src/lib/consultation-run-timeline.ts", import.meta.url), "utf8");
 
@@ -80,7 +78,9 @@ test("shows honest agent activity states before and during streamed text", () =>
   assert.match(globalStyles, /\.message-stage-and-answer/);
   assert.match(globalStyles, /\.message-stage-and-answer \{[\s\S]*gap: var\(--space-2\)/);
   assert.match(globalStyles, /\.agent-activity-status \+ \.message-answer/);
-  assert.match(activitySource, /<ThinkingOrb aria-hidden="true" state=\{state\} size=\{20\}/);
+  // Former lock: `<ThinkingOrb aria-hidden="true" state={state} size={20}` — the canvas orb was a
+  // second live-marker vocabulary next to the timeline's InlineSpinner (BUG-476). One marker now.
+  assert.match(activitySource, /<InlineSpinner size=\{12\} \/>/);
   assert.match(activitySource, /className="agent-activity-status__text"/);
   assert.match(activitySource, /className="agent-activity-status__elapsed" aria-hidden="true"/);
   assert.match(activitySource, /className="agent-thinking-timeline"/);
@@ -104,20 +104,14 @@ test("shows honest agent activity states before and during streamed text", () =>
   assert.match(pageSource, /activeStreamingSections/);
   assert.match(pageSource, /streamedThinking/);
   assert.match(messageRowSource, /showLiveActivity/);
-  assert.match(messageRowSource, /ConsultationThinkingReport/);
-  assert.match(messageRowSource, /thinkingText=\{hasTrace \? undefined : message\.thinkingText\}/);
-  assert.match(messageRowSource, /activityTrace=\{message\.activityTrace\}/);
-  assert.match(messageRowSource, /showLiveActivity \|\| \(!showReport && consultTimeline === undefined && \(Boolean\(message\.thinkingText/);
-  assert.match(activitySource, /activityTrace \?\? \[\]/);
-  assert.match(activitySource, /function TraceStep/);
-  assert.match(globalStyles, /\.agent-thinking-step\.is-think:has\(\.message-thinking\)/);
-  assert.match(reportSource, /caption="思考"/);
-  assert.match(reportSource, /reasoning=\{thinkingText\}/);
-  assert.match(reportSource, /aria-label="分析"/);
-  assert.match(treeSource, /consultation-step-tree__reasoning/);
-  assert.match(reportSource, /revealAll/);
-  assert.match(reportSource, /groups=\{progressed\.map/);
-  assert.doesNotMatch(reportSource, /analysisForSection|splitAnswerByHeadings/);
+  // Former locks on `ConsultationThinkingReport`, `hasTrace`, `activityTrace={message.activityTrace}`,
+  // `function TraceStep`, `.agent-thinking-step.is-think:has(...)`, and the report/tree sources:
+  // those pinned the second and third thinking-render paths (sections report, trace panel) that
+  // no caller could reach once every reply carries a timeline (BUG-476). One path remains.
+  assert.doesNotMatch(messageRowSource, /ConsultationThinkingReport|showReport|hasTrace|activityTrace/);
+  assert.match(messageRowSource, /thinkingText=\{message\.thinkingText\}/);
+  assert.match(messageRowSource, /showLiveActivity \|\| \(consultTimeline === undefined && Boolean\(message\.thinkingText/);
+  assert.doesNotMatch(activitySource, /activityTrace|thinking-orbs/);
   assert.match(globalStyles, /\.markdown-list/);
   assert.match(activitySource, />思考</);
   assert.match(pageSource, /event\.type === "run\.failed"/);
@@ -144,12 +138,9 @@ test("shows honest agent activity states before and during streamed text", () =>
   assert.match(reducerSource, /kind: "calculate"/);
   assert.match(globalStyles, /\.consultation-report-analysis/);
   assert.match(globalStyles, /\.consultation-thinking-report/);
-  assert.match(globalStyles, /\.consultation-thinking-report \.message-thinking/);
-  assert.match(treeSource, /consultation-step-tree__stage/);
-  assert.match(treeSource, /阶段 \{index \+ 1\}/);
-  assert.doesNotMatch(treeSource, /consultation-step-tree__intent/);
-  assert.match(globalStyles, /\.consultation-step-tree__stage-index/);
-  assert.match(globalStyles, /\.consultation-step-tree__group \+ \.consultation-step-tree__group[^}]*margin-top:\s*var\(--space-6\)/);
+  // Former locks on `.consultation-thinking-report .message-thinking`, `consultation-step-tree__*`
+  // and the tree source: the step-tree report path is deleted (BUG-476), and with it its CSS.
+  assert.doesNotMatch(globalStyles, /consultation-step-tree/);
 });
 
 test("nothing sits between the transcript and the composer to shift height while streaming", () => {
diff --git a/frontend/tests/class-name-definition-contract.test.ts b/frontend/tests/class-name-definition-contract.test.ts
index db0ee295..ef948b47 100644
--- a/frontend/tests/class-name-definition-contract.test.ts
+++ b/frontend/tests/class-name-definition-contract.test.ts
@@ -54,7 +54,6 @@ const tailwindCollisions = new Set([
 const knownUnstyled = new Set([
   "birth-time-evidence-receipt",
   "chart-nav",
-  "consultation-step-tree",
   "is-changed",
   "is-done",
   "is-live",
diff --git a/frontend/tests/rectification-activity-receipt.test.ts b/frontend/tests/rectification-activity-receipt.test.ts
index 3a2283d0..e9bd3dc0 100644
--- a/frontend/tests/rectification-activity-receipt.test.ts
+++ b/frontend/tests/rectification-activity-receipt.test.ts
@@ -99,8 +99,16 @@ test("answer deltas preserve a still-running server activity", () => {
     chatSource.indexOf('event.type === "answer.delta"'),
     chatSource.indexOf('event.type === "run.failed"'),
   );
-  assert.match(deltaBranch, /state: raw\.trim\(\) \? "streaming" : "thinking"/);
-  assert.match(deltaBranch, /text: raw,/);
+  // Former locks: `state: raw.trim() ? "streaming" : "thinking"` and `text: raw,` inside the
+  // delta branch. Those pinned one setMessages per network chunk (BUG-473); the same state
+  // derivation now lives in the frame buffer's flush, which the delta branch feeds.
+  const frameFlush = chatSource.slice(
+    chatSource.indexOf("const frames = createStreamFrameBuffer"),
+    chatSource.indexOf("const abortController = new AbortController()"),
+  );
+  assert.match(frameFlush, /state: text\.trim\(\) \? "streaming" : "thinking"/);
+  assert.match(frameFlush, /^\s*text,$/m);
+  assert.match(deltaBranch, /frames\.setAnswer\(raw\)/);
   assert.match(deltaBranch, /event\.replace === true \? event\.text : raw \+ event\.text/);
   assert.doesNotMatch(deltaBranch, /settled\.spoken/);
   assert.match(deltaBranch, /正在组织回答/);
@@ -110,7 +118,11 @@ test("answer deltas preserve a still-running server activity", () => {
 test("failed server turns retain their receipt state without parsing activity from answer text", () => {
   assert.match(chatSource, /failed:\s*true/);
   assert.match(chatSource, /completedReceipt/);
-  assert.match(chatSource, /message\.state === "settled" && message\.failed/);
+  // Former lock: `message.state === "settled" && message.failed`, the inline red banner above a
+  // failed reply. That banner was the second, rectification-only failure surface (BUG-476);
+  // failure now reaches the shared error notice while the receipt state still gates actions.
+  assert.match(chatSource, /&& !message\.failed/);
+  assert.doesNotMatch(chatSource, /rectification-activity-failure/);
   assert.doesNotMatch(chatSource, /parsed\.(?:activity|receipt|tools|methods)/);
 });
 
diff --git a/frontend/tests/rectification-agentic-entry.test.ts b/frontend/tests/rectification-agentic-entry.test.ts
index 6837146c..652d0b94 100644
--- a/frontend/tests/rectification-agentic-entry.test.ts
+++ b/frontend/tests/rectification-agentic-entry.test.ts
@@ -44,10 +44,6 @@ const progressLabels = readFileSync(
   new URL("../src/lib/rectification-activity-labels.ts", import.meta.url),
   "utf8",
 );
-const completedActivityReceipt = readFileSync(
-  new URL("../src/components/completed-activity-receipt.tsx", import.meta.url),
-  "utf8",
-);
 const choiceCardComponent = readFileSync(
   new URL("../src/components/rectification-choice-card.tsx", import.meta.url),
   "utf8",
@@ -344,9 +340,10 @@ test("rectification keeps receipts for the varga sentence and shows live tool pr
   const replyIndex = messageRender.indexOf("<ChatMessageRow");
   assert.ok(replyIndex >= 0);
   assert.doesNotMatch(messageRender, /<RectificationHouseTableView/);
-  assert.match(completedActivityReceipt, /<details className=/);
-  assert.doesNotMatch(completedActivityReceipt, /<details[^>]*\sopen/);
-  assert.match(completedActivityReceipt, /本轮完成 · \$\{stepLabels\.length\} 个步骤 · \$\{receipt\.methods\.length\} 项计算依据/);
+  // Former locks on `completed-activity-receipt.tsx` (`<details>`, never open, the "本轮完成 · N 个
+  // 步骤" summary): that was a second collapsed block under every settled rectification reply.
+  // Its methods now sit as source chips on the shared timeline's calculate row (BUG-476).
+  assert.match(chat, /completedReceipt/);
   for (const genericCopy of ["开始本轮执行", "正在加载专用方法", "专用方法已加载", "本轮做了什么"]) {
     assert.doesNotMatch(chat, new RegExp(genericCopy));
   }
@@ -360,7 +357,10 @@ test("rectification keeps receipts for the varga sentence and shows live tool pr
   assert.doesNotMatch(chat, /本轮处理未完成，已保留服务端记录的执行进度/);
   assert.match(chat, /startActivityTraceStep/);
   assert.match(chat, /completeActivityTraceStep/);
-  assert.match(activityStatus, /activityTrace/);
+  // Former lock: `activityStatus` contained `activityTrace` — the rectification-only trace panel.
+  // The trace is now projected onto the shared timeline rows (BUG-476); the panel is a fallback.
+  assert.match(chat, /rectificationTimelineRows/);
+  assert.doesNotMatch(activityStatus, /activityTrace/);
   assert.match(activityStatus, /className="message-thinking"/);
   assert.match(activityStatus, />思考</);
   assert.match(activityStatus, /userOpen \?\? !hasAnswer/);
diff --git a/frontend/tests/rectification-timeline-adapter.test.ts b/frontend/tests/rectification-timeline-adapter.test.ts
new file mode 100644
index 00000000..e559a4e2
--- /dev/null
+++ b/frontend/tests/rectification-timeline-adapter.test.ts
@@ -0,0 +1,131 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+
+import {
+  completeActivityTraceStep,
+  emptyActivityTrace,
+  startActivityTraceStep,
+} from "../src/lib/agent-activity-trace.ts";
+import {
+  RECTIFICATION_TIMELINE_LIVE_ID,
+  RECTIFICATION_TIMELINE_SOURCE_LIMIT,
+  rectificationTimelineRows,
+} from "../src/lib/rectification-timeline-adapter.ts";
+import { PUBLIC_RECTIFICATION_METHODS } from "../src/lib/rectification-agentic/v9/public-receipt.ts";
+
+const read = (path: string) => readFileSync(new URL(`../${path}`, import.meta.url), "utf8");
+const chatSource = read("src/components/rectification-agentic-chat.tsx");
+const rowSource = read("src/components/chat-message-row.tsx");
+const activitySource = read("src/components/agent-activity-status.tsx");
+const packageJson = read("package.json");
+const globalStyles = read("src/app/globals.css");
+
+test("a started tool is a live calculate row and a completed tool a done row with the done label", () => {
+  const started = startActivityTraceStep(emptyActivityTrace(), "rectification-read-case", "正在读取校正记录…", 1);
+  assert.deepEqual(rectificationTimelineRows({ trace: started, receipt: undefined, activity: undefined, settled: false }), [
+    { id: "activity-rectification-read-case-1", kind: "calculate", status: "live", label: "正在读取校正记录…" },
+  ]);
+
+  const done = completeActivityTraceStep(started, "rectification-read-case", "读取校正记录");
+  assert.deepEqual(rectificationTimelineRows({
+    trace: done,
+    receipt: { steps: ["rectification-read-case"], methods: [] },
+    activity: undefined,
+    settled: true,
+  }), [
+    { id: "activity-rectification-read-case-1", kind: "calculate", status: "done", label: "读取校正记录" },
+  ]);
+});
+
+test("a failed tool keeps its row with a 未完成 suffix and never carries the method chips", () => {
+  let trace = startActivityTraceStep(emptyActivityTrace(), "rectification-read-case", "正在读取校正记录…", 1);
+  trace = completeActivityTraceStep(trace, "rectification-read-case", "读取校正记录");
+  trace = startActivityTraceStep(trace, "rectification-compare-candidates", "正在比较候选时间…", 2);
+  trace = completeActivityTraceStep(trace, "rectification-compare-candidates", "比较候选时间");
+  const rows = rectificationTimelineRows({
+    trace,
+    receipt: { steps: ["rectification-read-case"], methods: ["d1-rashi"], failedTool: "rectification-compare-candidates" },
+    activity: undefined,
+    settled: true,
+  });
+  assert.equal(rows.length, 2);
+  assert.equal(rows[1]?.label, "比较候选时间未完成");
+  assert.equal(rows[1]?.sources, undefined);
+  assert.deepEqual(rows[0]?.sources, ["D1 本命盘"]);
+});
+
+test("method chips are de-duplicated, labelled, capped, and attached to the last completed row", () => {
+  let trace = startActivityTraceStep(emptyActivityTrace(), "rectification-read-case", "正在读取校正记录…", 1);
+  trace = completeActivityTraceStep(trace, "rectification-read-case", "读取校正记录");
+  trace = startActivityTraceStep(trace, "rectification-compare-candidates", "正在比较候选时间…", 2);
+  trace = completeActivityTraceStep(trace, "rectification-compare-candidates", "比较候选时间");
+  const rows = rectificationTimelineRows({
+    trace,
+    receipt: {
+      steps: ["rectification-read-case", "rectification-compare-candidates"],
+      methods: [...PUBLIC_RECTIFICATION_METHODS, ...PUBLIC_RECTIFICATION_METHODS],
+    },
+    activity: undefined,
+    settled: true,
+  });
+  assert.equal(rows[0]?.sources, undefined);
+  const chips = rows[1]?.sources ?? [];
+  assert.equal(chips.length, RECTIFICATION_TIMELINE_SOURCE_LIMIT);
+  assert.equal(new Set(chips).size, chips.length);
+  for (const chip of chips) assert.doesNotMatch(chip, /^d\d+-|-/);
+});
+
+test("a phase label that names work under way becomes the live row when no tool is live", () => {
+  const queued = rectificationTimelineRows({
+    trace: emptyActivityTrace(),
+    receipt: undefined,
+    activity: { phase: "evidence-validation", label: "正在处理…" },
+    settled: false,
+  });
+  assert.deepEqual(queued, [{ id: RECTIFICATION_TIMELINE_LIVE_ID, kind: "calculate", status: "live", label: "正在处理…" }]);
+
+  const composing = rectificationTimelineRows({
+    trace: emptyActivityTrace(),
+    receipt: undefined,
+    activity: { phase: "answer-composition", label: "正在组织回答…" },
+    settled: false,
+  });
+  assert.equal(composing[0]?.kind, "write");
+
+  // A done label left on the activity after a tool completed is not a live step.
+  const doneLabel = rectificationTimelineRows({
+    trace: emptyActivityTrace(),
+    receipt: undefined,
+    activity: { phase: "chart-calculation", label: "比较候选时间" },
+    settled: false,
+  });
+  assert.deepEqual(doneLabel, []);
+
+  // A live tool row already covers the activity, so nothing is appended.
+  const live = startActivityTraceStep(emptyActivityTrace(), "rectification-read-case", "正在读取校正记录…", 1);
+  assert.equal(rectificationTimelineRows({
+    trace: live,
+    receipt: undefined,
+    activity: { phase: "loading-method", label: "正在读取校正记录…" },
+    settled: false,
+  }).length, 1);
+});
+
+test("after attempt.reset the timeline is empty, and a settled reply without a receipt renders no rows", () => {
+  assert.deepEqual(rectificationTimelineRows({ trace: emptyActivityTrace(), receipt: undefined, activity: undefined, settled: false }), []);
+  assert.deepEqual(rectificationTimelineRows({ trace: undefined, receipt: { steps: [], methods: [] }, activity: undefined, settled: true }), []);
+});
+
+test("both chat surfaces render one timeline, one live marker, and no second receipt block", () => {
+  assert.match(chatSource, /rectificationTimelineRows\(\{/);
+  assert.match(chatSource, /timeline: rectificationTimelineRows/);
+  assert.doesNotMatch(chatSource, /rectification-activity-failure|<CompletedActivityReceipt/);
+  assert.doesNotMatch(chatSource, /label: "正在组织回答…",\s*\}\),\s*\}\s*:\s*message;/);
+  assert.doesNotMatch(rowSource, /ConsultationThinkingReport|showReport|activityTrace/);
+  assert.doesNotMatch(activitySource, /thinking-orbs|ThinkingOrb|\bTraceStep\b|activityTrace/);
+  assert.match(activitySource, /<InlineSpinner size=\{12\} \/>/);
+  assert.doesNotMatch(packageJson, /thinking-orbs/);
+  assert.doesNotMatch(globalStyles, /\.conversation\.is-rectification \.message-assistant \.agent-thinking-(step|marker)/);
+  assert.doesNotMatch(globalStyles, /rectification-activity-receipt|rectification-activity-failure|consultation-step-tree/);
+});

From 12d8c8afbb16e5389c4b064afe25796cc2d566a5 Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Tue, 1 Sep 2026 23:14:42 +0000
Subject: [PATCH 4/9] docs(chat): record streaming-ux progress, block task 3 on
 batch three, align DESIGN.md

DESIGN.md gains the streaming-states table, the thinking-collapse and
label-swap motion rows, the 17px body correction and the single live
marker rule; task 3 is registered in BLOCKED.md until the home split
batch three lands; PROGRESS lists every touched assertion with its
former value.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 BLOCKED.md                              |  6 ++
 PROGRESS-chat-streaming-ux-20260901.md  | 95 +++++++++++++++++++++++++
 frontend/DESIGN.md                      | 31 ++++++--
 frontend/src/lib/stream-frame-buffer.ts |  5 --
 4 files changed, 128 insertions(+), 9 deletions(-)
 create mode 100644 PROGRESS-chat-streaming-ux-20260901.md

diff --git a/BLOCKED.md b/BLOCKED.md
index 56aa6f7c..1c19f209 100644
--- a/BLOCKED.md
+++ b/BLOCKED.md
@@ -1,5 +1,11 @@
 # BLOCKED
 
+## Agent 聊天流式体验与双会话面统一（2026-09-01，分支 `codex/streaming-ux-20260901`）
+
+- **任务 3（校正面复用 `ChatComposer` + 统一滚动跟随 + `JumpToLatestButton` + 720→900 宽度）未做，等待 `TASK-home-split-batch3-20260901.md` 合入。** 任务书红线 7：任务 3 要动 `page.tsx` 两处（按 `activeStreamingText` 触发的滚动 effect、内联 Tailwind 的「跳到最新」按钮），与第三批拆页冲突。开工时 `git log origin/staging -- frontend/src/app/page.tsx` 最新为 `551d6317`（第二批），第三批尚未合入，故按红线登记。随之延后的还有任务 4 里与任务 3 对应的 DESIGN.md 条目（§4 阅读宽度、§5 composer 共用一句、§5 新增 Jump to latest、§7 `--shadow-soft`）与 BUG-476/475。任务 0/1/2 未碰 `page.tsx`。
+- **浏览器级手工验收未做：执行环境无登录态、无 Chrome。** 任务书里的 Performance 录制（3k 字回答无 >50ms 长任务）、结算不闪录屏、流式期间折叠时间线、校正/普通会话并排截图，全部留给有真实会话的人按 `docs/testing/staging-manual-walkthrough-20260901.md` 的方式补。本轮的替代证据是 `tests/home-streaming-render-split.test.ts` 的按帧驱动渲染计数与 `tests/stream-frame-buffer.test.ts` 的释放节奏断言。
+- **`LatestAssistantEntry` 的「一次会话只 mount 一次」探针无法在测试里驱动。** 仓库没有 jsdom / happy-dom，`renderToString` 不跑 effect，所以 `latestEntryMounts` 只是留给浏览器里手动读的探针；测试改用纯函数 `latestAssistantView` 的 key 一致性 + 源码锁（只有一处 `<LatestAssistantEntry`、无 `StreamingMessageEntry`/`SettledMessageEntry`）代替。
+
 ## 报告解读深度对齐（2026-09-01，分支 `codex/report-skill-parity-20260901`）
 
 - **端到端真实生成未做：执行环境没有任何模型凭据。** `ANTHROPIC_*` / `OPENAI_*` / `DEEPSEEK_*` 等全部未设置，仓内只有 `.env.official.example` / `.env.cn.example` / `deploy/.env.staging.identity.example`，不含可用 key。按红线不得读取或猜测凭据。因此任务书交付物 5 的「真实 writer 输出抽查」与交付物 7 的「改前改后同盘同主题章节全文对照 + 真实 inputTokens / 墙钟对照」本地无法产出。离线替代物已给出：`PROGRESS-report-skill-parity-20260901.md` 里的每章 prompt 载荷改前改后逐章对照、claim card 全文对照、以及对服务器确定性 conclusion 的 5 处逐行回溯。真实生成待部署后由委托方补。
diff --git a/PROGRESS-chat-streaming-ux-20260901.md b/PROGRESS-chat-streaming-ux-20260901.md
new file mode 100644
index 00000000..96b4e1fc
--- /dev/null
+++ b/PROGRESS-chat-streaming-ux-20260901.md
@@ -0,0 +1,95 @@
+# PROGRESS · Agent 聊天流式体验与双会话面统一（2026-09-01）
+
+工作树：`.worktrees/streaming-ux-20260901`
+分支：`codex/streaming-ux-20260901`
+基线：`origin/staging` @ `fbb80fa3`（任务书写 `80e77361`，开工时远端已多一条任务书本身的 docs commit）。
+
+未改 `.gitea/workflows/**`。未合并 staging，未碰 main。未手写 `useCallback` / `useMemo`（`rectification-agentic-chat.tsx` 既有的 `useCallback` 原样保留）。未动服务端事件语义；校正 `thinking.delta` 在 `stream-mapping.ts` 公开边界的丢弃原样保留。`page.tsx` 一行未动。
+
+| 任务 | 状态 | commit | BUG |
+| --- | --- | --- | --- |
+| 0 · 流式按帧合并 + 匀速吐字 + Markdown 前缀记忆 | 完成 | `dd4e3b37` | BUG-473 |
+| 1 · 结算不闪、时间线开合过渡、流式可折叠、queued 行 | 完成 | `69d19e0f` | BUG-474、BUG-475 |
+| 2 · 校正接入同一套时间线、删三条死路径、移除 thinking-orbs | 完成 | `cc17d971` | BUG-476 |
+| 3 · 校正复用 ChatComposer / 统一滚动跟随 / JumpToLatest / 900px | **未做**，见 `BLOCKED.md` | — | BUG-476/475 未占号 |
+| 4 · DESIGN.md | 与 0/1/2 对应的条目已改；与 3 对应的条目随 3 延后 | 本文件同 commit | — |
+
+## 任务 0 · 流式渲染
+
+改动：`src/lib/stream-frame-buffer.ts`（新）、`src/lib/chat-markdown-split.ts`（新）、`src/components/chat-message-content.tsx`、`src/components/chat-message-row.tsx`（`streaming` prop）、`src/hooks/use-consultation-run.ts`、`src/components/rectification-agentic-chat.tsx`。
+
+- 两个会话面的事件回调都不再直接 `setState`：事件写入累加器，`requestAnimationFrame` 每帧最多一次 flush；`run.completed` / `run.failed` / abort / 读流结束时 `settle()` 同步冲干净；`finally` 里 `dispose()`；校正 `attempt.reset` 走 `reset()`。
+- 释放节奏：`max(2, ceil(积压 ÷ 12))` 字/帧，积压按「新文本到达时的未释放量」记，所以 3,000 字突发恰好 12 帧追平（测试锁死），稳态约落后网络 12 帧（≈200ms）；页面隐藏走 250ms `setTimeout` 并一次放完。
+- 重活只做一次：`parseAgentReply` / `applyThinkingSectionProgress` 只在 flush 里对已释放文本跑。
+- Markdown：流式时在最后一个空行切「稳定前缀 / 尾块」，不切进代码围栏、同一列表的项之间、表格行之间；前缀交给 `memo` 的 `StableMarkdownPrefix`，只有尾块每帧 parse；切分对象是 `splitSpokenAnswerAndTechniqueAudit(text).spoken`，技法审计表留在审计折叠里。结算后仍整篇一次 parse，DOM 结构与流式时一致（react-markdown 不加包裹元素）。
+- 没有另写"薄 hook"：`use-consultation-run` 按前两轮拆页公证是"内部 0 个 React hook"，缓冲器按每次 send 创建/销毁的工厂用法更贴合，两处调用都是这个形态。
+
+渲染次数探针（`tests/home-streaming-render-split.test.ts` 新增用例，假 rAF 驱动）：200 个单字 token、每帧到 4 个、共 50 帧 → **`streamingRowRenders = 50`**（改前的架构每 token 一次 = 200）。`tests/stream-frame-buffer.test.ts` 同一场景 flush 50 次，且每次释放 ≥2 字、结算后与网络全文一致。
+
+Performance 面板录制（3k 字回答无 >50ms 长任务）**未做**：无登录态、无 Chrome，见 `BLOCKED.md`。
+
+## 任务 1 · 结算与时间线
+
+改动：`src/components/chat-transcript.tsx`（重写）、`src/lib/chat-message-view.ts`（`latestAssistantView`）、`src/lib/home-streaming-render-probe.ts`（`latestEntryMounts`）、`src/components/consultation-run-timeline.tsx`（重写）、`src/components/chat-message-row.tsx`（GSAP 0.16）、`src/app/globals.css`、`scripts/home-streaming-render-benchmark.mts`（改用 `LatestAssistantEntry`）。
+
+- `ChatTranscript` = `SettledMessageList excludeLatestAssistant` + 一个 `LatestAssistantEntry key={renderKey}`。同一个 `MessageEntry` 渲染历史行、流式行、刚结算行，动作条与追问只在 settled 出现。`renderKey` 在流式（`message-N`，N=历史条数）与结算（末条下标 N）下相同，纯函数 `latestAssistantView` 有测试锁。
+- `.message` 的 CSS `message-enter` 关键帧删除，只剩 GSAP 一份，时长 0.18 → 0.16（DESIGN.md §6 = 160ms）。
+- 时间线：去掉 `key={live…}`；外层 `<section>` + `button[aria-expanded][aria-controls]`；`open = userOpen ?? live`；折叠是 `grid-template-rows 0fr↔1fr` 180ms，折叠后内容 `inert`；summary 文案换行 120ms 淡入；live 行与 summary 文案共用既有 `agent-activity-status__text` shimmer；`rows` 为空且 live 时渲染 `QUEUED_TIMELINE_ROW`「正在处理…」。reduced-motion 下三处过渡为 0（全局 `*` 规则之外再显式写了一次）。
+- `latestEntryMounts` 探针只能在浏览器里手动读（无 DOM 测试库，`renderToString` 不跑 effect），见 `BLOCKED.md`。
+
+## 任务 2 · 双会话面统一
+
+改动：`src/lib/rectification-timeline-adapter.ts`（新）、`src/components/rectification-agentic-chat.tsx`、`src/components/agent-activity-status.tsx`（重写为兜底）、`src/components/chat-message-row.tsx`、`src/app/globals.css`、`package.json` / `package-lock.json`（`npm uninstall thinking-orbs`）；删除 `consultation-thinking-report.tsx`、`thinking-step-tree.tsx`、`completed-activity-receipt.tsx`。
+
+- 适配：tool trace → `calculate` 行（started=live / completed=done，标签沿用 `RECTIFICATION_TOOL_*_LABELS`）；`failedTool` 的行标签加「未完成」且不挂 chips；回执 `methods` 经 `PUBLIC_RECTIFICATION_METHOD_LABELS` 去重 ≤8 作为最后一条完成 calculate 行的 `sources`；没有 live 行且 `activity.label` 以「正在」开头时补一条 live 行（`answer-composition` → `write`，其余 → `calculate`）；think 类 trace 项映射为 think 行（现网不会出现，服务端丢弃）。
+- 校正结算后与普通会话一样收成「已完成 N 步」一行，方法 chips 在行内展开；第二个回执折叠块、消息上方红字失败行、重新生成时的假「正在组织回答…」全部删除；失败走既有 `error` 通知；重新生成显示 queued 行。
+- `chat-message-row.tsx` 只剩 timeline 一条主路径 + `AgentActivityStatus` 兜底（无 trace 分支、无 orb）；live 标记全部 `InlineSpinner`；`.conversation.is-rectification .agent-thinking-step/.agent-thinking-marker` 14px 覆写删除。
+- 校正的「已用时 N 秒」计时（`ActivityElapsed`）随 trace 面板一起退出——时间线本来就没有这个元素，两面一致优先。
+
+## 任务 3 · 未做
+
+`git log origin/staging -- frontend/src/app/page.tsx` 最新 `551d6317`（第二批），第三批未合入。按红线 7 登记 `BLOCKED.md`，未占 BUG-476/475。
+
+## 任务 4 · DESIGN.md
+
+已改：§3 思考正文 13px 写成显式例外；§5 Message 正文 16px → 17px（≤767px 时 16px，与 `globals.css` 一致）、Motion 改为"只有 GSAP 一份 160ms、结算不重放"、新增「Streaming states」七态表（含 failed 不用消息内红字、pacing 公式、reduced-motion 行为、校正只差不显示思考正文）；§6 表新增 Thinking collapse 180ms / Timeline label swap 120ms / Text reveal；§9 等待表把时间线 live 步写成两面共用，注明 live 标记只有 `InlineSpinner`、orb 已移除。
+
+随任务 3 延后：§4 阅读宽度（720 vs 900）、§5 composer 共用一句、§5 Jump to latest 条目、§7 `--shadow-soft`。
+
+## 被触碰的既有断言（红线 3，每处源码上方均有原值与错因注释）
+
+| 文件 | 原断言 | 现在 | 理由 |
+| --- | --- | --- | --- |
+| `tests/home-streaming-render-split.test.ts` | `split.streamingRowRenders === tokens.length` | `≤ tokens.length && ≥ 1`，另加按帧驱动的新用例 | 原值是"每 token 一次提交"的现状快照（BUG-473） |
+| `tests/chat-bundle-splitting-contract.test.ts` | `duration: 0\.18` | `0\.16` | DESIGN.md §6 160ms，0.18 是 GSAP 副本漂移（BUG-474） |
+| `tests/session-conversation-layout.test.ts` | `duration:\s*0\.18` | `0\.16` | 同上 |
+| `tests/class-name-definition-contract.test.ts` | `knownUnstyled` 含 `consultation-run-timeline__summary`、`consultation-step-tree` | 两条移除 | 前者现在有样式（按钮），后者类名已随组件删除；该测试本身要求列表无过期项 |
+| `tests/chat-bundle-splitting-contract.test.ts` | "the thinking orb loads on demand…"（`OrbState` 导入、`dynamic(...)`、20px 占位、`prefetchOnIdle(importThinkingOrb)`） | 改为"live 标记是共享 InlineSpinner，无 orb chunk" | orb 是第二种 live 标记且被 14px 裁切（BUG-476） |
+| `tests/chat-stream-layout.test.ts` | `reportSource`/`treeSource` 读取；`<ThinkingOrb … size={20}`；`ConsultationThinkingReport`、`hasTrace`、`activityTrace={message.activityTrace}`、`activityTrace ?? []`、`function TraceStep`、`.agent-thinking-step.is-think:has(...)`、report/tree 内容锁、`consultation-step-tree__*` CSS 锁、`.consultation-thinking-report .message-thinking` | 改为锁"只剩一条路径"（`doesNotMatch` 这些符号）+ `InlineSpinner size={12}` | 锁的正是被删除的第二/第三条思考渲染路径（BUG-476） |
+| `tests/rectification-agentic-entry.test.ts` | 读取 `completed-activity-receipt.tsx` 并锁其 `<details>`/不 open/「本轮完成 · N 个步骤」；`activityStatus /activityTrace/` | 改为锁 `chat /rectificationTimelineRows/`、`chat /completedReceipt/`、`activityStatus` 不含 `activityTrace` | 锁的是校正专属第二折叠块与 trace 面板（BUG-476） |
+| `tests/rectification-activity-receipt.test.ts` | `deltaBranch` 内 `state: raw.trim() ? "streaming" : "thinking"`、`text: raw,`；`message.state === "settled" && message.failed` | 状态派生改锁 frame flush 段（`state: text.trim() ? …`、`text,`、`frames.setAnswer(raw)`）；失败行改锁 `&& !message.failed` 且无 `rectification-activity-failure` | 前者锁的是每 chunk 一次 setMessages（BUG-473），后者锁的是校正专属红字失败行（BUG-476）。**注**：这个文件在任务 0 的聚焦跑里漏跑了，任务 2 跑全量前才发现，改在 `cc17d971` |
+
+新增测试：`tests/stream-frame-buffer.test.ts`（7）、`tests/chat-markdown-split.test.ts`（4）、`tests/chat-stream-settle-contract.test.ts`（4）、`tests/rectification-timeline-adapter.test.ts`（6）、`home-streaming-render-split` +1。
+
+## 命令输出
+
+`./node_modules/.bin/tsc --noEmit` → **0**（任务 0/1/2 各跑一次，均无诊断）。
+
+`./node_modules/.bin/eslint` 触及文件 → **0 error**。`use-consultation-run.ts` 有 9 条既有 `no-unused-vars` warning（未使用的导入/`startNewChat`），本轮只加了一行 import，与 `origin/staging` 一致；`stream-frame-buffer.ts` 一条 `dirty` 未用已在本 commit 清掉。
+
+`./node_modules/.bin/tsx --test tests/*.test.ts`：
+
+| | 基线（开工时 `fbb80fa3`） | 现在 |
+| --- | ---: | ---: |
+| tests | 2460 | 2482 |
+| pass | 2426 | 2448 |
+| fail | 24 | 24 |
+| skipped | 10 | 10 |
+
+24 条失败逐条比对**完全同一集合**（`comm` 差集为空）：全部是本机无 Docker / PostgreSQL / 部署夹具的数据库、Better Auth、staging workflow YAML、live sync 类（admin code functions、Owner recovery、local PostgreSQL、redeem security、personal report job/sections RLS、migration runner、v9 migration 等），与上一轮 PROGRESS 记录的环境缺口同类。10 条 skipped 同基线。无产品逻辑新增失败。
+
+`./node_modules/.bin/next build` → **0**。`✓ Compiled successfully in 21.7s`、`Finished TypeScript in 58s`、`Generating static pages (62/62)`，`/` 仍是 `○ (Static)`。5 条既有 `skill-package-registry.ts` filesystem-tracing warning，未失败。
+
+## 未做与原因
+
+见 `BLOCKED.md` 顶部三条：任务 3 等第三批拆页；浏览器级手工验收（Performance 录制、结算录屏、两面并排截图、流式期间折叠）无登录态无 Chrome；`latestEntryMounts` 探针无 DOM 测试库不可驱动。
diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
index 5e8e4005..ada6df41 100644
--- a/frontend/DESIGN.md
+++ b/frontend/DESIGN.md
@@ -156,6 +156,8 @@ is read through an external store so a change in one tab reaches the others.
 
 Display headings use the serif stack at weight 400. Body copy never drops below 14px; 12–13px is reserved for short labels and metadata. CJK text uses `text-wrap: pretty`; display text uses `text-wrap: balance`.
 
+One documented exception: the thinking text inside a timeline step (`.consultation-run-timeline__thinking`) and the fallback thinking trace (`.message-thinking-body`) render at 13px. They are working notes shown on request inside a collapsed row, not reading copy; the answer itself never inherits that size.
+
 ## 4. Spacing & Layout
 
 The base unit is 4px. Tokens are `--space-1: 4px`, `--space-2: 8px`, `--space-3: 12px`, `--space-4: 16px`, `--space-5: 20px`, `--space-6: 24px`, `--space-8: 32px`, `--space-10: 40px`, `--space-12: 48px`, `--space-16: 64px`, and `--space-24: 96px`.
@@ -261,10 +263,26 @@ The base unit is 4px. Tokens are `--space-1: 4px`, `--space-2: 8px`, `--space-3:
 
 - **Variants:** assistant editorial text on canvas; user text on warm card surface; streaming; error. Streaming uses a timeline of completed steps plus the current step; the thinking body expands while streaming, collapses when answer text appears, and is stored with the assistant message.
 - **Identity:** every assistant message carries the 32px Jyotisha logo avatar; user messages stay visually lighter and avatar-free.
-- **Typography:** assistant body 16px with serif subheadings; user body 14px.
+- **Typography:** assistant body 17px (16px below 768px) with serif subheadings; user body 14px.
 - **Tables:** three-column technique audit tables keep 状态 on one line. Below 768px they stack each row as title + status, then the note, instead of squeezing 已执行 into a vertical glyph column.
 - **Follow-up:** the latest settled consultation answer may offer two or three grounded next questions under that answer. Clicking one sends it in the current session. The composer never hosts suggestion chips. If the answer does not support a grounded continuation, nothing is shown.
-- **Motion:** new messages enter with a short opacity/translate transition only.
+- **Motion:** a new row enters once, through the GSAP tween in `chat-message-row.tsx` at the 160ms Message duration; there is no CSS entrance keyframe beside it. The trailing assistant reply is one component (`LatestAssistantEntry`) from its first streamed token through settlement, so settling never remounts it and never replays the entrance.
+
+#### Streaming states
+
+Every assistant reply moves through the same states on both chat surfaces, and each state has exactly one visual. The step timeline (`ConsultationRunTimeline`) is the only activity surface; the rectification session projects its tool trace onto the same rows and differs only in that it never shows thinking text, because the server drops rectification `thinking.delta` at the public boundary.
+
+| State | When | Visible | Transition in |
+|---|---|---|---|
+| `queued` | request sent, no server event yet | timeline open with one live row “正在处理…” (spinner + shimmer label), summary “正在分析” | row enters with the message |
+| `loading-method` | `skill.started` | live method row | label swap, 120ms fade |
+| `calculating` | `tool.started` / chart activity | live calculate row; completed rows above it show the check marker | label swap, 120ms fade |
+| `thinking` | `thinking.section` / `thinking.delta` | live think row; thinking text inside the row, paced per frame | label swap, 120ms fade |
+| `composing` | first `answer.delta` | live write row; answer text below the timeline, released per frame | answer paragraphs appear as text, no per-token animation |
+| `settled` | `run.completed` | summary becomes “已完成 N 步”, timeline collapses in place unless the reader opened or closed it themselves; actions and follow-ups appear | 180ms height transition, 120ms label fade |
+| `failed` | `run.failed`, abort, network loss | whatever was received stays in place; the message carries no inline banner — the notice goes to the composer notice / error line | none |
+
+Text release is paced, not animated: the frame buffer commits at most once per animation frame and reveals `max(2, ⌈backlog ÷ 12⌉)` characters per frame, so a burst catches up in about twelve frames and a slow model never reads as stalled. The reader's own toggle on the timeline always wins over the state default. Under `prefers-reduced-motion: reduce` the collapse and the label fade are instant; the pacing stays, because it is content arrival rather than decoration.
 
 ### Suggestion card
 
@@ -340,6 +358,9 @@ system.
 | Micro | 120ms | ease-out / `--ease-out` | Button, row, popover and tooltip feedback |
 | Standard | 180ms | `--ease-out` | Dialogs, onboarding cards, auth steps |
 | Message | 160ms | `--ease-out` | A message row entering the transcript |
+| Thinking collapse | 180ms | `--ease-out` | The step timeline opening or closing in place (`grid-template-rows` 0fr ↔ 1fr) |
+| Timeline label swap | 120ms | ease-out | “正在分析” → “已完成 N 步”, and a live row's label changing |
+| Text reveal | per-frame release, not a duration | none | Streamed answer and thinking text; see Streaming states |
 | Sheet | 280ms | `--ease-out` | Rectification sheet rising from the bottom |
 | Spatial | Instant | None | Sidebar state changes and mobile drawer |
 
@@ -372,8 +393,10 @@ or user IDs.
 | 类别 | 语义 | 组件 / 样式 | 时长 | `prefers-reduced-motion: reduce` |
 | --- | --- | --- | ---: | --- |
 | 整页 / 整块阻塞 | 载入账户、正在准备问题、生时评估浮层 | `AppLoadingIndicator`（轨道环 `app-loading-orbit`） | 1.4s linear | 全局 `*` 规则把循环收成一帧；不要改它的 DOM |
-| 行内 / 局部等待 | 出生地解析、咨询时间线 live 步、个人报告列表与详情 | `InlineSpinner`（`inline-spin`） | 0.8s linear | `animation: none`，收成静止圆点，不要半圈圆弧 |
-| 流式生成中 | 引导语打字、Agent 活动字 | `onboarding-caret` / `agent-activity-shimmer` | 700ms steps / 1.6s linear | 保持现有全局降级 |
+| 行内 / 局部等待 | 出生地解析、两个会话面时间线的 live 步、兜底活动面板的 live 行、个人报告列表与详情 | `InlineSpinner`（`inline-spin`） | 0.8s linear | `animation: none`，收成静止圆点，不要半圈圆弧 |
+| 流式生成中 | 引导语打字、时间线 summary 与 live 行的文案 | `onboarding-caret` / `agent-activity-shimmer` | 700ms steps / 1.6s linear | 保持现有全局降级 |
+
+Agent 的 live 标记只有 `InlineSpinner` 一种。曾经并存的 canvas 小球（`thinking-orbs`）已移除，不得再引入第二种 live 标记。
 
 今日星语首次拉取是行内等待，但不用 spinner、也不用透明度呼吸：卡片用静态占位文案（`aria-busy` 仍保留）。轨道环消失后不得再换一套动效继续等。
 
diff --git a/frontend/src/lib/stream-frame-buffer.ts b/frontend/src/lib/stream-frame-buffer.ts
index c96b2c0b..92410aef 100644
--- a/frontend/src/lib/stream-frame-buffer.ts
+++ b/frontend/src/lib/stream-frame-buffer.ts
@@ -104,7 +104,6 @@ export function createStreamFrameBuffer<Meta>(
   let answerBacklog = 0;
   let thinkingBacklog = 0;
   let meta = options.initialMeta;
-  let dirty = false;
   let disposed = false;
   let frameHandle: number | null = null;
   let timeoutHandle: number | null = null;
@@ -121,7 +120,6 @@ export function createStreamFrameBuffer<Meta>(
   };
 
   const emit = (settled: boolean) => {
-    dirty = false;
     options.flush({
       answer: releasedAnswer,
       thinking: releasedThinking,
@@ -173,12 +171,10 @@ export function createStreamFrameBuffer<Meta>(
     setMeta(next) {
       if (disposed) return;
       meta = typeof next === "function" ? (next as (current: Meta) => Meta)(meta) : next;
-      dirty = true;
       schedule();
     },
     touch() {
       if (disposed) return;
-      dirty = true;
       schedule();
     },
     settle() {
@@ -198,7 +194,6 @@ export function createStreamFrameBuffer<Meta>(
       releasedThinking = "";
       answerBacklog = 0;
       thinkingBacklog = 0;
-      dirty = false;
       if (nextMeta !== undefined) meta = nextMeta;
     },
     dispose() {

From 6187d7fdb8aa6abfdba7974a46996a43a8f01758 Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Tue, 1 Sep 2026 23:26:23 +0000
Subject: [PATCH 5/9] refactor(chat): share composer, scroll follow and jump
 control across both chat surfaces

The rectification session rendered its own textarea (no length ceiling,
no count), its own rAF scroll follow with a sticky-scroll helper, and its
own jump chip styled differently from the main chat's inline Tailwind
button, while the main chat re-ran scrollTo on every streamed token and
added a smooth scroll on settle. ChatComposer now accepts a controlled
value so the rectification surface reuses it without touching the main
draft store; useConversationScrollAnchor owns the follow through a
ResizeObserver, one frame per content change, for both surfaces; a
single JumpToLatestButton replaces both chips; the 720px transcript
override is gone. DESIGN.md records the shared composer, the jump
control, the reading width and the two shadow tokens.

BUG-477 BUG-478

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 BLOCKED.md                                    |   2 +-
 docs/BUG_HISTORY.md                           |  32 ++++
 frontend/DESIGN.md                            |  13 +-
 frontend/src/app/globals.css                  |  63 ++++----
 frontend/src/app/page.tsx                     |  24 +--
 frontend/src/components/chat-composer.tsx     |  17 ++-
 .../src/components/jump-to-latest-button.tsx  |  25 ++++
 .../components/rectification-agentic-chat.tsx | 137 +++++-------------
 .../hooks/use-conversation-scroll-anchor.ts   |  57 +++++++-
 .../src/lib/rectification-sticky-scroll.ts    |  43 ------
 .../character-remaining-contract.test.ts      |   6 +-
 .../chat-navigation-a11y-contract.test.ts     |  33 +++--
 .../chat-notice-and-scroll-contract.test.ts   |  51 ++++---
 frontend/tests/chat-stream-layout.test.ts     |   5 +-
 .../tests/composer-isolation-contract.test.ts |  11 +-
 .../tests/rectification-agentic-entry.test.ts |  46 +++---
 .../tests/rectification-answer-choice.test.ts |  28 ++--
 17 files changed, 329 insertions(+), 264 deletions(-)
 create mode 100644 frontend/src/components/jump-to-latest-button.tsx
 delete mode 100644 frontend/src/lib/rectification-sticky-scroll.ts

diff --git a/BLOCKED.md b/BLOCKED.md
index 1c19f209..2c76efb2 100644
--- a/BLOCKED.md
+++ b/BLOCKED.md
@@ -2,7 +2,7 @@
 
 ## Agent 聊天流式体验与双会话面统一（2026-09-01，分支 `codex/streaming-ux-20260901`）
 
-- **任务 3（校正面复用 `ChatComposer` + 统一滚动跟随 + `JumpToLatestButton` + 720→900 宽度）未做，等待 `TASK-home-split-batch3-20260901.md` 合入。** 任务书红线 7：任务 3 要动 `page.tsx` 两处（按 `activeStreamingText` 触发的滚动 effect、内联 Tailwind 的「跳到最新」按钮），与第三批拆页冲突。开工时 `git log origin/staging -- frontend/src/app/page.tsx` 最新为 `551d6317`（第二批），第三批尚未合入，故按红线登记。随之延后的还有任务 4 里与任务 3 对应的 DESIGN.md 条目（§4 阅读宽度、§5 composer 共用一句、§5 新增 Jump to latest、§7 `--shadow-soft`）与 BUG-476/475。任务 0/1/2 未碰 `page.tsx`。
+- **~~任务 3 未做，等待第三批拆页合入~~ 已解除并完成（2026-09-02）。** `origin/staging` 合入 `bf6989ec`（第三批）、`124d3990`、`058e5db9` 后，本分支 rebase 到其上，任务 3 按任务书原文完成：`page.tsx` 的滚动 effect 与内联「跳到最新」按钮删除，跟随并入 `useConversationScrollAnchor`，校正面接入同一 hook 与 `JumpToLatestButton`，复用 `ChatComposer`（`value` 受控、500 字上限），`rectification-sticky-scroll.ts` 删除，720px 覆写删除。对应 DESIGN.md 四条与 BUG-477/476 一并落地。
 - **浏览器级手工验收未做：执行环境无登录态、无 Chrome。** 任务书里的 Performance 录制（3k 字回答无 >50ms 长任务）、结算不闪录屏、流式期间折叠时间线、校正/普通会话并排截图，全部留给有真实会话的人按 `docs/testing/staging-manual-walkthrough-20260901.md` 的方式补。本轮的替代证据是 `tests/home-streaming-render-split.test.ts` 的按帧驱动渲染计数与 `tests/stream-frame-buffer.test.ts` 的释放节奏断言。
 - **`LatestAssistantEntry` 的「一次会话只 mount 一次」探针无法在测试里驱动。** 仓库没有 jsdom / happy-dom，`renderToString` 不跑 effect，所以 `latestEntryMounts` 只是留给浏览器里手动读的探针；测试改用纯函数 `latestAssistantView` 的 key 一致性 + 源码锁（只有一处 `<LatestAssistantEntry`、无 `StreamingMessageEntry`/`SettledMessageEntry`）代替。
 
diff --git a/docs/BUG_HISTORY.md b/docs/BUG_HISTORY.md
index 8db2208c..6559b21b 100644
--- a/docs/BUG_HISTORY.md
+++ b/docs/BUG_HISTORY.md
@@ -7330,3 +7330,35 @@
 - 相关记录：BUG-474、BUG-475
 - 复发自：无
 - 修复版本：待发布
+
+## BUG-477 | 生时校正会话的输入框没有字数上限，也没有接近上限的计数
+
+- 状态：resolved
+- 首次发现：2026-09-01
+- 最近更新：2026-09-02
+- 影响面：`rectification-agentic-chat.tsx`、`chat-composer.tsx`
+- 用户现象：校正会话里可以无限输入；主对话在剩余 50 字时会出现计数并在到顶时变红（BUG-447），校正会话什么都没有。停止按钮、发送按钮、textarea 也是另一份手写的。
+- 触发条件：任何一次校正会话输入。
+- 根因：校正面用裸 `<Textarea>` + 两个 `<Button>` 自己拼输入框，没有 `maxLength`，也没有接 `CharacterRemaining`；`ChatComposer` 只会读主会话的 `composer-draft` 外部 store，校正面有自己的 `draft` state，所以一直没复用。
+- 修复：`ChatComposer` 新增可选受控 `value` 与 `remainingId`：有 `value` 时以其为准（store 订阅仍在组件内，不改主会话行为），校正面传 `value={draft}`，不写主会话 store。校正面渲染 `ChatComposer`（`maxLength=500`，与主对话同上限）并在 `composer-footer` 放 `CharacterRemaining`；三段 placeholder、Enter/Shift+Enter/`isComposing` 处理、停止按钮文案原样保留。
+- 验证：`composer-isolation-contract`（校正传 `value`、不 import `composer-draft`）、`character-remaining-contract`、`composer-ime-contract`、`rectification-agentic-entry`。
+- 防复发：不得再手写第二个聊天输入框；新增会话面一律渲染 `ChatComposer`，自有草稿走 `value`。
+- 相关记录：BUG-447、BUG-478
+- 复发自：无
+- 修复版本：待发布
+
+## BUG-478 | 滚动跟随与「跳到最新」在两个会话面各写一份，主会话每个 token 都触发一次 scrollTo
+
+- 状态：resolved
+- 首次发现：2026-09-01
+- 最近更新：2026-09-02
+- 影响面：`use-conversation-scroll-anchor.ts`、`page.tsx`、`rectification-agentic-chat.tsx`、`rectification-sticky-scroll.ts`（删除）、`globals.css`
+- 用户现象：主会话流式期间每个 token 触发一次 `scrollTo`，回答结束瞬间再补一次 smooth 滚动，看起来"先跳到底再滑一下"；校正面是另一套 rAF 跟随；「跳到最新」按钮两份不同样式（主会话内联 Tailwind `shadow-md`、校正面 `--shadow-soft`，文案一个「跳到最新」一个「回到最新」）。
+- 触发条件：任意流式回答；向上翻阅历史。
+- 根因：`page.tsx` 的滚动 effect 以 `activeStreamingText` 为依赖；校正面自带 `followTailRef` / `followLatestContent` / `rectification-sticky-scroll.ts`；按钮各写各的。
+- 修复：跟随并入 `useConversationScrollAnchor`：`ResizeObserver` 观察滚动容器的子元素、`MutationObserver` 跟踪子元素增删，anchored 时下一帧 `scrollTop = scrollHeight`；`resetKey` 变化立即落底；不再在结算时补 smooth 滚动。`page.tsx` 的滚动 effect 删除；校正面接入同一 hook（`resetKey = caseId`），删除 `rectification-sticky-scroll.ts` 及其全部胶水。新增 `JumpToLatestButton`（`.jump-to-latest`，`--shadow-elevated`、44px、focus ring），两面共用，文案统一「跳到最新」带箭头；`page.tsx` 内联 Tailwind 版与 `.rectification-jump-latest` 删除。校正 `.message-list` 720px 覆写删除，与主会话同 900px。
+- 验证：`chat-notice-and-scroll-contract`（follow 在 hook 内、anchored 守卫在赋值前、`page.tsx` 无 `scrollTo`）、`chat-navigation-a11y-contract`、`chat-stream-layout`、`rectification-agentic-entry`、`rectification-answer-choice`。
+- 防复发：任何会话面不得自行监听 scroll 或按内容变化调 `scrollTo`；跟随只经 `useConversationScrollAnchor`，跳到最新只经 `JumpToLatestButton`。
+- 相关记录：BUG-477
+- 复发自：无
+- 修复版本：待发布
diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
index ada6df41..87cc7856 100644
--- a/frontend/DESIGN.md
+++ b/frontend/DESIGN.md
@@ -162,7 +162,7 @@ One documented exception: the thinking text inside a timeline step (`.consultati
 
 The base unit is 4px. Tokens are `--space-1: 4px`, `--space-2: 8px`, `--space-3: 12px`, `--space-4: 16px`, `--space-5: 20px`, `--space-6: 24px`, `--space-8: 32px`, `--space-10: 40px`, `--space-12: 48px`, `--space-16: 64px`, and `--space-24: 96px`.
 
-- Chat reading width: 760px for the welcome/composer and 900px for long answers.
+- Chat reading width: 760px for the welcome/composer and 900px for long answers. Both chat surfaces share the 900px transcript width; the rectification session no longer narrows it to 720px.
 - Admin content width: 1200px, centered.
 - Desktop shell: 288px sidebar plus flexible reading panel.
 - Layout breakpoints: mobile below 768px, tablet 768–1023px, desktop 1024px and above. These three decide the shell — sidebar mode, grid columns, drawer versus rail.
@@ -190,6 +190,15 @@ The base unit is 4px. Tokens are `--space-1: 4px`, `--space-2: 8px`, `--space-3:
 - **Structure:** warm canvas field, hairline, typed value, optional icon action.
 - **States:** default, hover, focus with deep-brown ring, disabled, invalid, loading.
 - **Accessibility:** persistent label where practical; composer has an explicit accessible label.
+- **One composer:** the rectification surface renders the same `ChatComposer` as the main chat; there is no second composer. A surface that owns its own draft passes it as `value`; the main chat reads the draft store. Both count down from the same 500-character ceiling through `CharacterRemaining`.
+
+### Jump to latest
+
+- **Structure:** one pill button (`JumpToLatestButton`) with a down arrow and the label “跳到最新”, shared by both chat surfaces.
+- **Placement:** hangs off the composer wrap's top edge (`.jump-to-latest`, absolute, `bottom: 100%`) so it never reflows the transcript or the composer.
+- **Visibility:** shown when the reader is not anchored — more than 96px from the bottom after scrolling up — and hidden again once they return or press it. Sending a question re-anchors.
+- **Surface:** canvas fill, hairline border, `--shadow-elevated`; hover uses the warm card surface. No utility-class shadows.
+- **Accessibility:** a real button in document order with a visible label matching its accessible name, 44px target, and the focus ring; the icon is decorative.
 
 ### Birth time intake
 
@@ -370,7 +379,7 @@ Only `transform`, `opacity`, and color/filter transitions animate. Reduced-motio
 
 ## 7. Depth & Surface
 
-Strategy: warm tonal shifts, restrained translucency, and fine hairlines. Most depth comes from the page floor, main canvas, warm cards, and selected white glass. Standard UI uses no drop shadow. Modal and raised-sheet depth use one restrained two-stage token: `--shadow-elevated: 0 1px 2px rgba(29, 29, 31, .07), 0 12px 28px -16px rgba(29, 29, 31, .18)`. Interactive rings use `0 0 0 1px` or the focus ring; no generic card shadows or atmospheric gradients. When transparency is reduced, frosted surfaces fall back to opaque warm neutrals.
+Strategy: warm tonal shifts, restrained translucency, and fine hairlines. Most depth comes from the page floor, main canvas, warm cards, and selected white glass. Standard UI uses no drop shadow. Modal, popover, floating-control and raised-sheet depth use one restrained two-stage token: `--shadow-elevated: 0 1px 2px rgba(29, 29, 31, .07), 0 12px 28px -16px rgba(29, 29, 31, .18)`. A second, quieter token, `--shadow-soft: 0 1px 2px rgba(29, 29, 31, .06), 0 8px 20px -18px rgba(29, 29, 31, .2)`, belongs to surfaces inside the reading column — the conversational narrative card, the composer field within a session, the starter theme card's focus state and the auth mode tab. Floating controls and overlays (jump to latest, popovers, sheets) always take `--shadow-elevated`. Interactive rings use `0 0 0 1px` or the focus ring; no generic card shadows, no utility-class shadows, no atmospheric gradients. When transparency is reduced, frosted surfaces fall back to opaque warm neutrals.
 
 ## 8. Agent wording and accuracy boundary
 
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 4d629c32..43cee3fe 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1485,6 +1485,42 @@ button:disabled { cursor: default; opacity: .45; }
 .error-message { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--color-danger); background: var(--color-danger-muted); color: var(--color-danger); font-size: 13px; line-height: 1.6; border-color: var(--color-danger); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
 
 .composer-wrap { position: sticky; bottom: 0; z-index: 2; min-width: 0; border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); padding: var(--space-3) var(--space-6) var(--space-4); background: var(--color-frosted); backdrop-filter: saturate(130%) blur(20px); }
+/* Jump to latest: shared by both chat surfaces. Hangs off the composer wrap's top
+   edge so it never reflows the transcript or the composer. */
+.jump-to-latest {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 100%;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  padding-bottom: var(--space-3);
+  pointer-events: none;
+}
+.jump-to-latest__button {
+  pointer-events: auto;
+  min-height: 44px;
+  min-width: 44px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-canvas);
+  color: var(--color-ink);
+  box-shadow: var(--shadow-elevated);
+  font: inherit;
+  font-size: var(--type-body-sm);
+  cursor: pointer;
+  transition: background-color 120ms ease-out;
+}
+.jump-to-latest__button svg { width: 16px; height: 16px; flex: 0 0 auto; }
+.jump-to-latest__button:hover { background: var(--color-canvas-muted); }
+.jump-to-latest__button:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--color-focus) 56%, transparent);
+  outline-offset: 3px;
+}
 .composer { width: min(760px, 100%); display: flex; align-items: flex-end; gap: 10px; margin: 0 auto; border: 1px solid var(--color-border); transition: border-color 140ms ease-out; min-height: 60px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-color: var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-canvas); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 42%, transparent); }
 .composer:focus-within { border-color: var(--color-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 15%, transparent); }
 .composer textarea { min-width: 0; min-height: 44px; max-height: 128px; flex: 1; resize: none; padding: 11px 0 8px; border: 0; outline: 0; background: transparent; color: var(--color-ink); line-height: 1.5; font-size: 16px; }
@@ -2608,7 +2644,6 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
 }
 .rectification-workspace__chat .message-list {
   width: 100%;
-  max-width: 720px;
   padding-bottom: var(--rectification-jump-clearance);
 }
 .conversation.is-rectification .message-actions {
@@ -2618,32 +2653,6 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
   position: relative;
   z-index: 2;
 }
-.rectification-jump-latest {
-  position: absolute;
-  inset-inline: 0;
-  bottom: 100%;
-  z-index: 3;
-  display: flex;
-  justify-content: center;
-  padding-bottom: var(--space-2);
-  pointer-events: none;
-}
-.rectification-jump-latest button {
-  pointer-events: auto;
-  min-height: 44px;
-  min-width: 44px;
-  padding: 0 var(--space-4);
-  border: 1px solid var(--color-border);
-  border-radius: 999px;
-  background: var(--color-canvas);
-  color: var(--color-ink);
-  box-shadow: var(--shadow-soft);
-  font-size: var(--type-caption);
-}
-.rectification-jump-latest button:focus-visible {
-  outline: 3px solid color-mix(in srgb, var(--color-focus) 56%, transparent);
-  outline-offset: 3px;
-}
 .rectification-workspace.is-compact.is-board-open .rectification-workspace__chat .composer-wrap {
   z-index: 0;
   visibility: hidden;
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index f4c635f8..3127c204 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -4,7 +4,7 @@ import "@/app/site-styles";
 import Link from "next/link";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
-import { ArrowDown, Sparkles } from "lucide-react";
+import { Sparkles } from "lucide-react";
 import { InlineSpinner } from "@/components/inline-spinner";
 import { useEffect, useRef, useState } from "react";
 import type { FormEvent, KeyboardEvent } from "react";
@@ -33,6 +33,7 @@ import { ChatTranscript, type ChatTranscriptActions } from "@/components/chat-tr
 import { ModelSelector } from "@/components/model-selector";
 import { OnboardingRedeemPaywall } from "@/components/onboarding-redeem-paywall";
 import { ChatComposer } from "@/components/chat-composer";
+import { JumpToLatestButton } from "@/components/jump-to-latest-button";
 import { ComposerCharacterRemaining } from "@/components/composer-character-remaining";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { composerDraftSnapshot, setComposerDraft } from "@/lib/composer-draft";
@@ -1240,15 +1241,6 @@ export default function Home() {
     setStarterGreetingSelection(Math.random());
   }, [starterHomeVisible]);
 
-  useEffect(() => {
-    if (starterHomeVisible) return;
-    const container = conversation.current;
-    if (!container) return;
-    if (!conversationAnchor.anchored) return;
-    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    container.scrollTo({ top: container.scrollHeight, behavior: isLoading || reduceMotion ? "auto" : "smooth" });
-  }, [activeSessionId, activeSession?.messages.length, activeStreamingText, conversationAnchor.anchored, isLoading, onboardingPending, onboardingStep, presetMessageFinished, profileComplete, starterHomeVisible]);
-
   useEffect(() => {
     if (hydrated && accountId && !profileComplete && onboardingStep === "name" && presetMessageFinished && activeAccountDialog === null) {
       composerInput.current?.focus();
@@ -1924,17 +1916,7 @@ export default function Home() {
 
         {!rectificationSurfaceOpen && !onboardingFormActive && <div className={`composer-wrap ${starterHomeVisible ? "composer-wrap-starter" : ""}`}>
           {jumpToLatestVisible && (
-            <div className="pointer-events-none absolute inset-x-0 bottom-full flex justify-center pb-3">
-              <button
-                className="pointer-events-auto inline-flex min-h-11 min-w-11 items-center gap-1.5 rounded-full border border-border bg-canvas px-4 text-sm text-ink shadow-md transition-colors outline-none hover:bg-canvas-muted focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
-                type="button"
-                aria-label="跳到最新"
-                onClick={conversationAnchor.anchorToLatest}
-              >
-                <ArrowDown aria-hidden="true" className="size-4" />
-                跳到最新
-              </button>
-            </div>
+            <JumpToLatestButton onClick={conversationAnchor.anchorToLatest} />
           )}
           <ChatComposer
             inputRef={composerInput}
diff --git a/frontend/src/components/chat-composer.tsx b/frontend/src/components/chat-composer.tsx
index a32ec312..3384c4d9 100644
--- a/frontend/src/components/chat-composer.tsx
+++ b/frontend/src/components/chat-composer.tsx
@@ -24,6 +24,14 @@ export function useComposerDraft(): string {
 
 type ChatComposerProps = {
   readonly inputRef: RefObject<HTMLTextAreaElement | null>;
+  /**
+   * A surface that owns its own draft (the rectification session) passes it here;
+   * the main chat leaves it undefined and the composer reads the draft store.
+   */
+  readonly value?: string;
+  readonly remainingId?: string;
+  /** Extra description (a question stem shown above the field) merged with the count id. */
+  readonly describedBy?: string;
   readonly inputLabel: string;
   readonly placeholder: string;
   readonly maxLength: number;
@@ -41,6 +49,9 @@ type ChatComposerProps = {
 
 export function ChatComposer({
   inputRef,
+  value,
+  remainingId = composerRemainingId,
+  describedBy,
   inputLabel,
   placeholder,
   maxLength,
@@ -55,15 +66,17 @@ export function ChatComposer({
   onKeyDown,
   onStop,
 }: ChatComposerProps) {
-  const draft = useComposerDraft();
+  const storeDraft = useComposerDraft();
+  const draft = value ?? storeDraft;
   const showRemaining = characterRemainingVisible(draft.length, maxLength);
+  const describedByIds = [describedBy, showRemaining ? remainingId : undefined].filter(Boolean).join(" ") || undefined;
 
   return (
     <form className="composer" onSubmit={onSubmit}>
       <Textarea
         ref={inputRef}
         aria-label={inputLabel}
-        aria-describedby={showRemaining ? composerRemainingId : undefined}
+        aria-describedby={describedByIds}
         placeholder={placeholder}
         rows={1}
         maxLength={maxLength}
diff --git a/frontend/src/components/jump-to-latest-button.tsx b/frontend/src/components/jump-to-latest-button.tsx
new file mode 100644
index 00000000..bf15870b
--- /dev/null
+++ b/frontend/src/components/jump-to-latest-button.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { ArrowDown } from "lucide-react";
+
+/**
+ * The "back to the newest turn" control both chat surfaces show once the
+ * reader has scrolled away from the bottom. It hangs off the composer's top
+ * edge (the composer wrap is its containing block) so it never reflows the
+ * transcript or the composer, and it is a real button in document order.
+ */
+export function JumpToLatestButton({ onClick }: Readonly<{ onClick: () => void }>) {
+  return (
+    <div className="jump-to-latest">
+      <button
+        type="button"
+        className="jump-to-latest__button"
+        aria-label="跳到最新"
+        onClick={onClick}
+      >
+        <ArrowDown aria-hidden="true" />
+        跳到最新
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/rectification-agentic-chat.tsx b/frontend/src/components/rectification-agentic-chat.tsx
index 7286222c..dec4fe93 100644
--- a/frontend/src/components/rectification-agentic-chat.tsx
+++ b/frontend/src/components/rectification-agentic-chat.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { ArrowUp, Square } from "lucide-react";
 import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { parseAgentReply } from "@/lib/agent-reply";
@@ -49,7 +48,6 @@ import {
   isPublicRectificationTool,
 } from "@/lib/rectification-agentic/v9/public-receipt";
 import { userFacingRunFailure, isIncompleteRunBanner } from "@/lib/rectification-agentic/v9/run-diagnostic";
-import { isNearBottom, shouldShowJumpToLatest } from "@/lib/rectification-sticky-scroll";
 import {
   CHOICE_ACTION,
   STOP_ACTION,
@@ -66,7 +64,11 @@ import {
   type RectificationChoiceCard as ChoiceCardModel,
 } from "@/lib/rectification-agentic/v9/choice-card";
 import type { PublicLanguageModel } from "@/lib/public-models";
+import { useConversationScrollAnchor } from "@/hooks/use-conversation-scroll-anchor";
+import { CharacterRemaining } from "./character-remaining";
+import { ChatComposer } from "./chat-composer";
 import { ChatMessageRow } from "./chat-message-row";
+import { JumpToLatestButton } from "./jump-to-latest-button";
 import {
   ChatMessageActions,
   toggleChatMessageFeedback,
@@ -75,7 +77,6 @@ import { ModelSelector } from "./model-selector";
 import { RectificationBoard, RectificationBoardPeek } from "./rectification-board";
 import { RectificationChoiceCard } from "./rectification-choice-card";
 import { Button } from "./ui/button";
-import { Textarea } from "./ui/textarea";
 
 type PersistedTurn = Readonly<{
   id: string;
@@ -97,6 +98,9 @@ type PersistedTurn = Readonly<{
   }> | null;
 }>;
 
+/** Same ceiling as the main chat composer, so both surfaces count down the same way. */
+const RECTIFICATION_COMPOSER_MAX_LENGTH = 500;
+
 type CandidateResult = RectificationCandidateResult | null;
 type CurrentQuestionModel = Readonly<{
   kind: "choice" | "collect_spoken";
@@ -317,17 +321,17 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
   const openingStarted = useRef(false);
   const previousBoardResult = useRef<CandidateResult>(null);
   const runAbort = useRef<AbortController | null>(null);
-  const followTailRef = useRef(true);
-  const scrollFrameRef = useRef<number | null>(null);
   const choiceActionIds = useRef(new Map<string, string>());
-  const choiceCardsOpen = useRef(false);
-  const [showJumpToLatest, setShowJumpToLatest] = useState(false);
   const [compactBoard, setCompactBoard] = useState(false);
   const [boardOpen, setBoardOpen] = useState(false);
   const [boardDiff, setBoardDiff] = useState(() => diffRectificationBoard(null, null));
   const boardId = useId();
   const boardTitleId = useId();
   const collectSpokenPromptId = useId();
+  const composerRemainingId = useId();
+  // The same anchor-and-follow the consultation surface uses: streamed tokens and
+  // new cards land the viewport on the bottom only while the reader is there.
+  const conversationAnchor = useConversationScrollAnchor(conversation, true, caseId);
 
   useLayoutEffect(() => {
     const query = window.matchMedia(`(max-width: ${RECTIFICATION_BOARD_SPLIT_MIN_PX - 1}px)`);
@@ -358,50 +362,6 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
     onPendingChange?.(value);
   }, [onPendingChange]);
 
-  const updateFollowState = useCallback(() => {
-    const viewport = conversation.current;
-    if (!viewport) return;
-    const nearBottom = isNearBottom(viewport.scrollHeight, viewport.scrollTop, viewport.clientHeight);
-    followTailRef.current = nearBottom;
-    setShowJumpToLatest(shouldShowJumpToLatest(
-      viewport.scrollHeight,
-      viewport.scrollTop,
-      viewport.clientHeight,
-      choiceCardsOpen.current,
-    ));
-  }, []);
-
-  const scrollToLatest = useCallback((behavior: ScrollBehavior = "smooth") => {
-    const viewport = conversation.current;
-    if (!viewport) return;
-    followTailRef.current = true;
-    setShowJumpToLatest(false);
-    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    viewport.scrollTo({
-      top: viewport.scrollHeight,
-      behavior: reduceMotion ? "auto" : behavior,
-    });
-  }, []);
-
-  const followLatestContent = useCallback(() => {
-    if (!followTailRef.current) return;
-    if (scrollFrameRef.current !== null) {
-      cancelAnimationFrame(scrollFrameRef.current);
-    }
-    scrollFrameRef.current = requestAnimationFrame(() => {
-      const container = conversation.current;
-      if (!container || !followTailRef.current) return;
-      container.scrollTop = container.scrollHeight;
-    });
-  }, []);
-
-  useLayoutEffect(() => {
-    followLatestContent();
-    return () => {
-      if (scrollFrameRef.current !== null) cancelAnimationFrame(scrollFrameRef.current);
-    };
-  }, [busy, candidateResult, choiceCard, error, messages, savedTime, followLatestContent]);
-
   // Candidate snapshot comes from the persisted Candidate Snapshot API, never
   // from parsing agent text or hidden sentinels.
   const applyCaseSnapshot = useCallback((payload: {
@@ -1071,10 +1031,6 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
     && !readonly
     && regeneratingMessageKey === null,
   );
-  useLayoutEffect(() => {
-    choiceCardsOpen.current = showLiveChoiceCard;
-    updateFollowState();
-  }, [showLiveChoiceCard, updateFollowState]);
   const showSelectionCards = Boolean(
     candidateResult?.selectionAllowed
     && candidateResult?.canAdopt
@@ -1141,7 +1097,6 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
           className="conversation is-rectification"
           aria-label="生时校正对话"
           aria-busy={busy || regeneratingMessageKey !== null}
-          onScroll={updateFollowState}
         >
           <div className="message-list">
           {pendingConsultationQuestion?.trim() && (
@@ -1284,26 +1239,17 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
       </section>
 
         <div className="composer-wrap">
-          {showJumpToLatest && (
-            <div className="rectification-jump-latest">
-              <button
-                type="button"
-                aria-label="回到最新"
-                onClick={() => scrollToLatest("smooth")}
-              >
-                回到最新
-              </button>
-            </div>
+          {!conversationAnchor.anchored && (
+            <JumpToLatestButton onClick={conversationAnchor.anchorToLatest} />
           )}
-          <form className="composer" onSubmit={submit}>
-          <Textarea
-            ref={composer}
-            aria-label={readonly ? "该校正已结束，只能查看历史" : "继续描述你的经历或回答"}
-            aria-describedby={collectSpokenPrompt && !showLiveChoiceCard && !readonly
+          <ChatComposer
+            inputRef={composer}
+            describedBy={collectSpokenPrompt && !showLiveChoiceCard && !readonly
               ? collectSpokenPromptId
               : undefined}
             value={draft}
-            disabled={!canSend}
+            remainingId={composerRemainingId}
+            inputLabel={readonly ? "该校正已结束，只能查看历史" : "继续描述你的经历或回答"}
             placeholder={readonly
               ? "该校正已结束，只能查看历史；需要再次校正请新建。"
               : showLiveChoiceCard
@@ -1311,6 +1257,14 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
                 : collectSpokenPrompt
                   ? "请回答上面的问题…"
                   : "继续说你记得的人生经历，或回答刚才的问题…"}
+            maxLength={RECTIFICATION_COMPOSER_MAX_LENGTH}
+            inputDisabled={!canSend}
+            submitLabel="发送"
+            submitBlocked={!canSend}
+            stopVisible={busy}
+            stopLabel="停止回答"
+            stopTitle="停止当前推理，已生成内容会保留"
+            onSubmit={submit}
             onChange={(event) => setDraft(event.target.value)}
             onKeyDown={(event) => {
               if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
@@ -1318,33 +1272,22 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
                 event.currentTarget.form?.requestSubmit();
               }
             }}
+            onStop={stopRun}
           />
-          {busy ? (
-            <Button
-              className="composer-stop"
-              aria-label="停止回答"
-              title="停止当前推理，已生成内容会保留"
-              size="icon"
-              type="button"
-              onClick={stopRun}
-            >
-              <Square aria-hidden="true" />
-            </Button>
-          ) : (
-            <Button aria-label="发送" disabled={!draft.trim() || !canSend} size="icon" type="submit">
-              <ArrowUp aria-hidden="true" />
-            </Button>
-          )}
-        </form>
 
-        <div className="composer-footer">
-          <ModelSelector
-            models={models}
-            selectedModelId={selectedModelId}
-            disabled={busy || readonly}
-            onSelect={onSelectModel}
-          />
-        </div>
+          <div className="composer-footer">
+            <ModelSelector
+              models={models}
+              selectedModelId={selectedModelId}
+              disabled={busy || readonly}
+              onSelect={onSelectModel}
+            />
+            <CharacterRemaining
+              id={composerRemainingId}
+              length={draft.length}
+              maxLength={RECTIFICATION_COMPOSER_MAX_LENGTH}
+            />
+          </div>
         </div>
       </div>
       <RectificationBoard
diff --git a/frontend/src/hooks/use-conversation-scroll-anchor.ts b/frontend/src/hooks/use-conversation-scroll-anchor.ts
index 37f8fbf6..85c24a73 100644
--- a/frontend/src/hooks/use-conversation-scroll-anchor.ts
+++ b/frontend/src/hooks/use-conversation-scroll-anchor.ts
@@ -24,15 +24,28 @@ export function nextAnchorState(anchored: boolean, distanceFromBottom: number, s
   return scrolledUp ? false : anchored;
 }
 
+/**
+ * Owns both halves of "follow the conversation": whether the reader is
+ * anchored to the bottom (a scroll listener), and landing the viewport on the
+ * newest content while they are (a resize observer over the scroller's
+ * children, one frame per change). Both chat surfaces use this one hook, so
+ * streamed tokens never call scrollTo directly and settlement never adds a
+ * second, smooth scroll on top of the follow.
+ */
 export function useConversationScrollAnchor(
-  container: RefObject<HTMLDivElement | null>,
+  container: RefObject<HTMLElement | null>,
   active: boolean,
   resetKey: string,
 ): ConversationScrollAnchor {
   const [anchor, setAnchor] = useState<AnchorState>({ key: resetKey, anchored: true });
   const lastScrollTop = useRef(0);
+  const anchoredRef = useRef(true);
   const anchored = anchor.key === resetKey ? anchor.anchored : true;
 
+  useEffect(() => {
+    anchoredRef.current = anchored;
+  }, [anchored]);
+
   useEffect(() => {
     const element = container.current;
     if (!active || !element) return;
@@ -61,6 +74,48 @@ export function useConversationScrollAnchor(
     };
   }, [active, container, resetKey]);
 
+  // Follow: while anchored, any change in the scroller's content height lands the
+  // viewport on the bottom, at most once per frame. Switching conversations
+  // (resetKey) lands there immediately.
+  useEffect(() => {
+    const element = container.current;
+    if (!active || !element) return;
+    let frame = 0;
+    const follow = () => {
+      frame = 0;
+      if (!anchoredRef.current) return;
+      element.scrollTop = element.scrollHeight;
+    };
+    const requestFollow = () => {
+      if (frame) return;
+      frame = window.requestAnimationFrame(follow);
+    };
+    requestFollow();
+    if (typeof ResizeObserver === "undefined") {
+      return () => {
+        if (frame) window.cancelAnimationFrame(frame);
+      };
+    }
+    const sizes = new ResizeObserver(requestFollow);
+    const observeChildren = () => {
+      sizes.disconnect();
+      for (const child of Array.from(element.children)) sizes.observe(child);
+    };
+    observeChildren();
+    const children = typeof MutationObserver === "undefined"
+      ? null
+      : new MutationObserver(() => {
+        observeChildren();
+        requestFollow();
+      });
+    children?.observe(element, { childList: true });
+    return () => {
+      sizes.disconnect();
+      children?.disconnect();
+      if (frame) window.cancelAnimationFrame(frame);
+    };
+  }, [active, container, resetKey]);
+
   return {
     anchored,
     anchorToLatest: () => {
diff --git a/frontend/src/lib/rectification-sticky-scroll.ts b/frontend/src/lib/rectification-sticky-scroll.ts
deleted file mode 100644
index bd112109..00000000
--- a/frontend/src/lib/rectification-sticky-scroll.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Sticky follow for a streaming message viewport.
- *
- * Auto-follow only when the user is already near the bottom. Streaming
- * updates must not steal scrollTop after the user moves upward.
- */
-
-export const RECTIFICATION_NEAR_BOTTOM_PX = 96;
-/** Keep the jump chip hidden while a choice card still occupies the composer overlay band. */
-export const RECTIFICATION_CHOICE_NEAR_BOTTOM_PX = 360;
-
-export function distanceFromBottom(
-  scrollHeight: number,
-  scrollTop: number,
-  clientHeight: number,
-): number {
-  return scrollHeight - scrollTop - clientHeight;
-}
-
-export function isNearBottom(
-  scrollHeight: number,
-  scrollTop: number,
-  clientHeight: number,
-  thresholdPx = RECTIFICATION_NEAR_BOTTOM_PX,
-): boolean {
-  return distanceFromBottom(scrollHeight, scrollTop, clientHeight) <= thresholdPx;
-}
-
-export function shouldShowJumpToLatest(
-  scrollHeight: number,
-  scrollTop: number,
-  clientHeight: number,
-  choiceCardOpen = false,
-): boolean {
-  const distance = distanceFromBottom(scrollHeight, scrollTop, clientHeight);
-  if (distance <= RECTIFICATION_NEAR_BOTTOM_PX) return false;
-  if (choiceCardOpen && distance <= RECTIFICATION_CHOICE_NEAR_BOTTOM_PX) return false;
-  return true;
-}
-
-export function shouldFollowLatest(followTail: boolean): boolean {
-  return followTail === true;
-}
diff --git a/frontend/tests/character-remaining-contract.test.ts b/frontend/tests/character-remaining-contract.test.ts
index eb7c4412..ce5f7e2f 100644
--- a/frontend/tests/character-remaining-contract.test.ts
+++ b/frontend/tests/character-remaining-contract.test.ts
@@ -43,7 +43,11 @@ test("the count region is polite, atomic, and only mounted inside the threshold"
 });
 
 test("the four capped fields wire describedby to a count that lives in existing chrome", () => {
-  assert.match(composer, /aria-describedby=\{showRemaining \? composerRemainingId : undefined\}/);
+  // Former lock: `aria-describedby={showRemaining ? composerRemainingId : undefined}`. The composer
+  // is now shared with the rectification surface, which passes its own count id (BUG-477).
+  assert.match(composer, /remainingId = composerRemainingId/);
+  assert.match(composer, /showRemaining \? remainingId : undefined\]\.filter\(Boolean\)\.join\(" "\)/);
+  assert.match(composer, /aria-describedby=\{describedByIds\}/);
   assert.match(page, /<ComposerCharacterRemaining maxLength=\{!profileComplete && onboardingStep === "name" \? 80 : 500\} \/>/);
   assert.match(page, /className="composer-footer"/);
   assert.match(page, /aria-describedby=\{characterRemainingVisible\(value\.name\.length, 80\) \? nameRemainingId : undefined\}/);
diff --git a/frontend/tests/chat-navigation-a11y-contract.test.ts b/frontend/tests/chat-navigation-a11y-contract.test.ts
index 59f930d8..9c8787f6 100644
--- a/frontend/tests/chat-navigation-a11y-contract.test.ts
+++ b/frontend/tests/chat-navigation-a11y-contract.test.ts
@@ -204,25 +204,36 @@ test("aria-busy marks the updating message list without swallowing the status re
 });
 
 test("the jump-to-latest control stays keyboard reachable and labelled", () => {
-  const jumpControl = sourceBetween(pageSource, "{jumpToLatestVisible && (", "</button>");
-  const buttonTag = sourceBetween(jumpControl, "<button", ">");
+  // Former locks pinned the inline Tailwind button in page.tsx (`min-h-11`, `focus-visible:ring-3`,
+  // `shadow-md`, `pointer-events-auto`, `absolute inset-x-0 bottom-full`). That button was one of
+  // two jump controls with two styles, and `shadow-md` bypassed the §7 shadow token (BUG-478).
+  // Both surfaces now render `JumpToLatestButton`; its semantics live in the component and CSS.
+  const jumpControl = sourceBetween(pageSource, "{jumpToLatestVisible && (", ")}");
+  assert.match(jumpControl, /<JumpToLatestButton onClick=\{conversationAnchor\.anchorToLatest\} \/>/);
+
+  const jumpSource = readFileSync(new URL("../src/components/jump-to-latest-button.tsx", import.meta.url), "utf8");
+  const buttonTag = sourceBetween(jumpSource, "<button", ">");
+  const styles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
+  const buttonRule = styles.match(/\.jump-to-latest__button \{[^}]*\}/)?.[0] ?? "";
+  const wrapRule = styles.match(/\.jump-to-latest \{[^}]*\}/)?.[0] ?? "";
 
   // Given: a real button in document order, never removed from the tab sequence.
-  assert.match(jumpControl, /<button\b/);
+  assert.match(jumpSource, /<button\b/);
   assert.match(buttonTag, /type="button"/);
   assert.doesNotMatch(buttonTag, /tabIndex/);
   assert.doesNotMatch(buttonTag, /aria-hidden/);
   assert.doesNotMatch(buttonTag, /disabled/);
 
   // And: a visible label, a matching accessible name, a focus ring and a 44px target.
-  assert.match(jumpControl, /aria-label="跳到最新"/);
-  assert.match(jumpControl, /\n\s*跳到最新\n/);
-  assert.match(jumpControl, /focus-visible:ring-3/);
-  assert.match(jumpControl, /min-h-11/);
-  assert.match(jumpControl, /min-w-11/);
+  assert.match(jumpSource, /aria-label="跳到最新"/);
+  assert.match(jumpSource, /\n\s*跳到最新\n/);
+  assert.match(styles, /\.jump-to-latest__button:focus-visible \{[^}]*outline: 3px solid/);
+  assert.match(buttonRule, /min-height: 44px/);
+  assert.match(buttonRule, /min-width: 44px/);
 
   // And: the icon is decorative, and pointer-events never gate keyboard activation.
-  assert.match(jumpControl, /<ArrowDown aria-hidden="true"/);
-  assert.match(jumpControl, /pointer-events-auto/);
-  assert.match(jumpControl, /onClick=\{conversationAnchor\.anchorToLatest\}/);
+  assert.match(jumpSource, /<ArrowDown aria-hidden="true"/);
+  assert.match(wrapRule, /pointer-events: none/);
+  assert.match(buttonRule, /pointer-events: auto/);
+  assert.match(jumpSource, /onClick=\{onClick\}/);
 });
diff --git a/frontend/tests/chat-notice-and-scroll-contract.test.ts b/frontend/tests/chat-notice-and-scroll-contract.test.ts
index 4252e637..07a90b22 100644
--- a/frontend/tests/chat-notice-and-scroll-contract.test.ts
+++ b/frontend/tests/chat-notice-and-scroll-contract.test.ts
@@ -68,17 +68,19 @@ test("assigns notice severity by message intent", () => {
 });
 
 test("anchors the streaming scroll instead of following every token", () => {
-  const autoScrollEffect = sourceBetween(
-    pageSource,
-    "useEffect(() => {\n    if (starterHomeVisible) return;",
-    "profileComplete, starterHomeVisible]);",
-  );
-
-  // Then: streamed tokens only move the viewport while the reader stays anchored.
-  assert.match(autoScrollEffect, /if \(!conversationAnchor\.anchored\) return/);
-  const scrollGuard = autoScrollEffect.indexOf("if (!conversationAnchor.anchored) return");
-  const scrollCall = autoScrollEffect.indexOf("container.scrollTo(");
+  // Former lock: a page-level effect keyed on `activeStreamingText` that called
+  // `container.scrollTo` after an `anchored` guard. That effect ran once per token and added
+  // a second smooth scroll on settle; the follow now lives in the hook, driven by a
+  // ResizeObserver over the scroller's children, one frame per change (BUG-478).
+  assert.doesNotMatch(pageSource, /container\.scrollTo\(/);
+  const follow = sourceBetween(anchorSource, "const follow = () => {", "};");
+  assert.match(follow, /if \(!anchoredRef\.current\) return/);
+  const scrollGuard = follow.indexOf("if (!anchoredRef.current) return");
+  const scrollCall = follow.indexOf("element.scrollTop = element.scrollHeight");
   assert.ok(scrollGuard >= 0 && scrollGuard < scrollCall);
+  assert.match(anchorSource, /new ResizeObserver\(requestFollow\)/);
+  assert.match(anchorSource, /frame = window\.requestAnimationFrame\(follow\)/);
+  assert.match(anchorSource, /observe\(element, \{ childList: true \}\)/);
 });
 
 test("scrolls to the newest turn on intentional jumps", () => {
@@ -92,15 +94,22 @@ test("scrolls to the newest turn on intentional jumps", () => {
 });
 
 test("offers an accessible jump-to-latest control while reading history", () => {
-  const jumpControl = sourceBetween(pageSource, "{jumpToLatestVisible && (", "</button>");
+  // Former locks pinned the inline Tailwind button in page.tsx (`min-h-11`, `focus-visible:ring-3`,
+  // `shadow-md`, `pointer-events-auto`, `absolute inset-x-0 bottom-full`). That button was one of
+  // two jump controls with two styles, and `shadow-md` bypassed the §7 shadow token (BUG-478).
+  // Both surfaces now render `JumpToLatestButton`; its semantics live in the component and CSS.
+  const jumpControl = sourceBetween(pageSource, "{jumpToLatestVisible && (", ")}");
+  const jumpSource = readFileSync(new URL("../src/components/jump-to-latest-button.tsx", import.meta.url), "utf8");
+  const buttonRule = globalsSource.match(/\.jump-to-latest__button \{[^}]*\}/)?.[0] ?? "";
 
   assert.match(pageSource, /const jumpToLatestVisible = !rectificationSurfaceOpen[\s\S]*?&& !conversationAnchor\.anchored/);
-  assert.match(jumpControl, /type="button"/);
-  assert.match(jumpControl, /aria-label="跳到最新"/);
-  assert.match(jumpControl, /focus-visible:ring-3/);
-  assert.match(jumpControl, /min-h-11/);
-  assert.match(jumpControl, /min-w-11/);
-  assert.match(jumpControl, /onClick=\{conversationAnchor\.anchorToLatest\}/);
+  assert.match(jumpControl, /<JumpToLatestButton onClick=\{conversationAnchor\.anchorToLatest\} \/>/);
+  assert.match(jumpSource, /type="button"/);
+  assert.match(jumpSource, /aria-label="跳到最新"/);
+  assert.match(globalsSource, /\.jump-to-latest__button:focus-visible \{[^}]*outline: 3px solid/);
+  assert.match(buttonRule, /min-height: 44px/);
+  assert.match(buttonRule, /min-width: 44px/);
+  assert.match(buttonRule, /box-shadow: var\(--shadow-elevated\)/);
 });
 
 test("rests the jump-to-latest control on the composer instead of the padded scroller", () => {
@@ -111,9 +120,11 @@ test("rests the jump-to-latest control on the composer instead of the padded scr
 
   // Then: the control hangs off the composer's own top edge, whatever that reserve is.
   const composerWrap = sourceBetween(pageSource, "className={`composer-wrap ", "<ChatComposer");
-  const jumpControl = sourceBetween(composerWrap, "{jumpToLatestVisible && (", "</button>");
-  assert.match(jumpControl, /absolute inset-x-0 bottom-full/);
-  assert.doesNotMatch(jumpControl, /sticky/);
+  assert.match(composerWrap, /<JumpToLatestButton/);
+  const wrapRule = globalsSource.match(/\.jump-to-latest \{[^}]*\}/)?.[0] ?? "";
+  assert.match(wrapRule, /position: absolute/);
+  assert.match(wrapRule, /bottom: 100%/);
+  assert.doesNotMatch(wrapRule, /sticky/);
 });
 
 test("keeps the scroll listener passive and reduced-motion aware", () => {
diff --git a/frontend/tests/chat-stream-layout.test.ts b/frontend/tests/chat-stream-layout.test.ts
index c6c7b873..a41d4cc4 100644
--- a/frontend/tests/chat-stream-layout.test.ts
+++ b/frontend/tests/chat-stream-layout.test.ts
@@ -152,7 +152,10 @@ test("nothing sits between the transcript and the composer to shift height while
     pageSource.indexOf("<ChatComposer"));
 
   assert.doesNotMatch(composerWrap, /composer-suggestions/);
-  assert.match(composerWrap, /pointer-events-none absolute inset-x-0 bottom-full/);
+  // Former lock: the inline `pointer-events-none absolute inset-x-0 bottom-full` wrapper. The
+  // control is now the shared JumpToLatestButton, positioned by `.jump-to-latest` (BUG-478).
+  assert.match(composerWrap, /<JumpToLatestButton/);
+  assert.match(globalStyles, /\.jump-to-latest \{[^}]*position: absolute[^}]*bottom: 100%/);
 });
 
 test("docks the composer inside the chat panel instead of floating over content", () => {
diff --git a/frontend/tests/composer-isolation-contract.test.ts b/frontend/tests/composer-isolation-contract.test.ts
index 6225ec86..316b1245 100644
--- a/frontend/tests/composer-isolation-contract.test.ts
+++ b/frontend/tests/composer-isolation-contract.test.ts
@@ -42,7 +42,16 @@ test("the textarea lives in an isolated composer that owns the draft subscriptio
 
   // When: the composer resolves the draft itself.
   assert.match(composerSource, /useSyncExternalStore\(\n\s*subscribeComposerDraft,\n\s*composerDraftSnapshot,\n\s*serverComposerDraftSnapshot,\n\s*\)/);
-  assert.match(composerSource, /const draft = useComposerDraft\(\)/);
+  // Former lock: `const draft = useComposerDraft()`. The composer still owns the store
+  // subscription; a surface with its own draft (rectification) may pass `value` instead, and
+  // must never write the main chat's store (BUG-477).
+  assert.match(composerSource, /const storeDraft = useComposerDraft\(\);\n\s*const draft = value \?\? storeDraft;/);
+  const rectificationSource = readFileSync(
+    new URL("../src/components/rectification-agentic-chat.tsx", import.meta.url),
+    "utf8",
+  );
+  assert.match(rectificationSource, /<ChatComposer[\s\S]*?value=\{draft\}/);
+  assert.doesNotMatch(rectificationSource, /composer-draft|setComposerDraft|useComposerDraft/);
 
   // Then: only the composer subtree reads the value that changes on every keystroke.
   assert.match(composerSource, /<Textarea[\s\S]*?value=\{draft\}/);
diff --git a/frontend/tests/rectification-agentic-entry.test.ts b/frontend/tests/rectification-agentic-entry.test.ts
index 652d0b94..ec9ec346 100644
--- a/frontend/tests/rectification-agentic-entry.test.ts
+++ b/frontend/tests/rectification-agentic-entry.test.ts
@@ -277,27 +277,19 @@ test("rectification uses one case-level entitlement and the session-pinned model
 });
 
 test("Agentic rectification follows the conversation tail only while the reader stays near the bottom", () => {
+  // Former locks pinned the rectification-only follow (`followTailRef`, `isNearBottom`,
+  // `shouldShowJumpToLatest`, `choiceCardsOpen`, `followLatestContent`, the 「回到最新」 chip and
+  // `.rectification-jump-latest`). That was the second scroll implementation beside the
+  // consultation hook (BUG-478); both surfaces now share `useConversationScrollAnchor` and
+  // `JumpToLatestButton`. The choice-card band is gone with it: the card sits inside the
+  // transcript, so a reader looking at it is near the bottom and anchored.
   assert.match(chat, /const conversation = useRef<HTMLElement>\(null\)/);
   assert.match(chat, /<section[\s\S]*ref=\{conversation\}[\s\S]*className="conversation is-rectification"/);
-  assert.match(chat, /followTailRef/);
-  assert.match(chat, /isNearBottom/);
-  assert.match(chat, /showJumpToLatest/);
-  assert.match(chat, /回到最新/);
-  assert.match(chat, /followLatestContent/);
-  assert.match(chat, /const container = conversation\.current/);
-  assert.match(chat, /top: viewport\.scrollHeight/);
-  assert.match(chat, /shouldShowJumpToLatest/);
-  assert.match(chat, /choiceCardsOpen/);
-  assert.match(
-    chat,
-    /useLayoutEffect\(\(\) => \{\s*choiceCardsOpen\.current = showLiveChoiceCard;\s*updateFollowState\(\);\s*\}, \[showLiveChoiceCard, updateFollowState\]\)/,
-  );
-  assert.doesNotMatch(chat, /choiceCardsOpen\.current = showLiveChoiceCard;\s*useLayoutEffect/);
-  assert.match(chat, /updateFollowState/);
-  assert.match(chat, /\}, \[busy, candidateResult, choiceCard, error, messages, savedTime, followLatestContent\]\);/);
-  const jumpLatestRule = styles.match(/\.rectification-jump-latest \{[^}]+\}/)?.[0] ?? "";
-  assert.match(jumpLatestRule, /justify-content: center/);
-  assert.doesNotMatch(jumpLatestRule, /flex-end/);
+  assert.match(chat, /const conversationAnchor = useConversationScrollAnchor\(conversation, true, caseId\)/);
+  assert.match(chat, /\{!conversationAnchor\.anchored && \(\s*<JumpToLatestButton onClick=\{conversationAnchor\.anchorToLatest\} \/>/);
+  assert.doesNotMatch(chat, /followTailRef|isNearBottom|shouldShowJumpToLatest|choiceCardsOpen|followLatestContent|updateFollowState|回到最新|onScroll=/);
+  assert.doesNotMatch(styles, /\.rectification-jump-latest/);
+  assert.match(styles, /\.jump-to-latest \{[^}]*justify-content: center/);
   assert.match(styles, /--rectification-jump-clearance/);
   assert.match(styles, /\.message-stage-and-answer \{[\s\S]*gap: var\(--space-2\)/);
   assert.doesNotMatch(chat, /conversationEnd|scrollIntoView/);
@@ -515,8 +507,13 @@ test("compact board overlays chat as a bottom sheet above the composer", () => {
 test("rectification composer can stop a live agent run", () => {
   assert.match(chat, /signal: abortController\.signal/);
   assert.match(chat, /runAbort\.current\?\.abort\(\)/);
-  assert.match(chat, /className="composer-stop"/);
-  assert.match(chat, /aria-label="停止回答"/);
+  // Former locks: `className="composer-stop"` and `aria-label="停止回答"` inside the chat file —
+  // the rectification-only composer. The stop control now comes from the shared ChatComposer
+  // (BUG-477); the chat passes the label and the handler.
+  assert.match(chat, /stopVisible=\{busy\}/);
+  assert.match(chat, /stopLabel="停止回答"/);
+  assert.match(chat, /onStop=\{stopRun\}/);
+  assert.match(readFileSync(new URL("../src/components/chat-composer.tsx", import.meta.url), "utf8"), /className="composer-stop"/);
   assert.match(chat, /event\.type === "attempt\.reset"/);
   assert.match(chat, /caught\.name === "AbortError"/);
   assert.match(chat, /showActivity=\{displayedMessage\.state !== "settled"\}/);
@@ -576,7 +573,12 @@ test("time-selection cards use server adoption state and stay mutually exclusive
 });
 
 test("rectification keeps the composer but never renders generated suggestion chips", () => {
-  assert.match(chat, /<form className="composer"/);
+  // Former lock: `<form className="composer"` written inline in the chat. The form now comes
+  // from the shared ChatComposer, with the same 500-character ceiling as the main chat (BUG-477).
+  assert.match(chat, /<ChatComposer/);
+  assert.match(chat, /maxLength=\{RECTIFICATION_COMPOSER_MAX_LENGTH\}/);
+  assert.match(chat, /const RECTIFICATION_COMPOSER_MAX_LENGTH = 500/);
+  assert.match(chat, /<CharacterRemaining/);
   assert.doesNotMatch(chat, /composer-suggestions/);
   assert.doesNotMatch(chat, /setSuggestions/);
   assert.doesNotMatch(chat, /suggestions/);
diff --git a/frontend/tests/rectification-answer-choice.test.ts b/frontend/tests/rectification-answer-choice.test.ts
index 0d56f7e1..8b440c5e 100644
--- a/frontend/tests/rectification-answer-choice.test.ts
+++ b/frontend/tests/rectification-answer-choice.test.ts
@@ -13,7 +13,7 @@ import {
   shouldContinueAfterStructuredChoice,
   userVisibleChoiceLine,
 } from "../src/lib/rectification-agentic/v9/choice-action.ts";
-import { isNearBottom, shouldFollowLatest, shouldShowJumpToLatest } from "../src/lib/rectification-sticky-scroll.ts";
+import { conversationAnchorThreshold, nextAnchorState } from "../src/hooks/use-conversation-scroll-anchor.ts";
 import { stableFollowupQuestionId } from "../src/lib/rectification-agentic/v9/server-focus.ts";
 import {
   spokenCollectFallbackFollowup,
@@ -542,17 +542,15 @@ function choiceAccounting(overrides: Parameters<typeof fakeAccounting>[0] = {})
 }
 
 test("does not force-follow when the reader has scrolled upward", () => {
-  assert.equal(isNearBottom(1_000, 100, 400), false);
-  assert.equal(shouldFollowLatest(false), false);
-  assert.equal(isNearBottom(1_000, 520, 400), true);
-  assert.equal(shouldFollowLatest(true), true);
-});
-
-test("jump-to-latest stays hidden while a choice card still sits in the overlay band", () => {
-  assert.equal(shouldShowJumpToLatest(1_000, 100, 400), true);
-  assert.equal(shouldShowJumpToLatest(1_000, 520, 400), false);
-  assert.equal(shouldShowJumpToLatest(1_000, 500, 400, true), false);
-  assert.equal(shouldShowJumpToLatest(1_000, 200, 400, true), true);
+  // Former locks exercised `rectification-sticky-scroll.ts` (`isNearBottom`, `shouldFollowLatest`,
+  // `shouldShowJumpToLatest` with a 360px choice-card band). That module was the second scroll
+  // implementation (BUG-478); the shared anchor keeps the same 96px near-bottom rule, and the
+  // jump control shows exactly when the reader is not anchored.
+  assert.equal(conversationAnchorThreshold, 96);
+  assert.equal(nextAnchorState(true, 1_000 - 100 - 400, true), false);
+  assert.equal(nextAnchorState(true, 1_000 - 520 - 400, false), true);
+  assert.equal(nextAnchorState(false, 600, false), false);
+  assert.equal(nextAnchorState(false, 40, false), true);
 });
 
 test("choice quotes come from the option label, not the assistant question year", () => {
@@ -1125,8 +1123,10 @@ test("the public agent route treats structured choice as a non-model command", (
   assert.match(chat, /send\("read_only", ""\)/);
   assert.match(chat, /willContinue/);
   assert.match(chat, /current\.filter\(\(message\) => message\.renderKey !== assistantRenderKey\)/);
-  assert.match(chat, /回到最新/);
-  assert.match(chat, /followTailRef\.current/);
+  // Former locks: `回到最新` and `followTailRef.current` — the rectification-only chip and follow
+  // flag (BUG-478). The shared control and anchor are locked instead.
+  assert.match(chat, /<JumpToLatestButton onClick=\{conversationAnchor\.anchorToLatest\} \/>/);
+  assert.match(chat, /conversationAnchor\.anchored/);
 });
 
 test("rectification attempt timeout stays under the agent route budget", () => {

From 6ac55aebbb2b82f6198b8df1d68133bd110bde8b Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Wed, 2 Sep 2026 04:01:41 +0000
Subject: [PATCH 6/9] docs(chat): record task 3 in progress and re-lock the
 starter-home scroll guard on the hook

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 PROGRESS-chat-streaming-ux-20260901.md   | 61 +++++++++++++++++-------
 frontend/tests/starter-questions.test.ts | 18 +++----
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/PROGRESS-chat-streaming-ux-20260901.md b/PROGRESS-chat-streaming-ux-20260901.md
index 96b4e1fc..6152d54a 100644
--- a/PROGRESS-chat-streaming-ux-20260901.md
+++ b/PROGRESS-chat-streaming-ux-20260901.md
@@ -2,7 +2,9 @@
 
 工作树：`.worktrees/streaming-ux-20260901`
 分支：`codex/streaming-ux-20260901`
-基线：`origin/staging` @ `fbb80fa3`（任务书写 `80e77361`，开工时远端已多一条任务书本身的 docs commit）。
+基线：任务 0–2 时为 `origin/staging` @ `fbb80fa3`；2026-09-02 远端前进到 `058e5db9`（`bf6989ec` 第三批拆页、`124d3990` 引擎卫生、`058e5db9` Home lint 修复）后本分支 **rebase 到其上**，任务 3 在该基线上做。
+
+**BUG 编号顺延**：staging 的 lint 修复占用了 BUG-470，本分支四条整体后移（470→471、471→472、472→473、473→474），`docs/BUG_HISTORY.md`、本文件、四个测试文件里的注释与四个 commit message 一并改（用 `git filter-branch --tree-filter/--msg-filter` 在原提交上逐个改，再 rebase，只在 `BUG_HISTORY.md` 冲突一次）。任务书 `TASK-chat-streaming-ux-20260901.md` 未动。
 
 未改 `.gitea/workflows/**`。未合并 staging，未碰 main。未手写 `useCallback` / `useMemo`（`rectification-agentic-chat.tsx` 既有的 `useCallback` 原样保留）。未动服务端事件语义；校正 `thinking.delta` 在 `stream-mapping.ts` 公开边界的丢弃原样保留。`page.tsx` 一行未动。
 
@@ -11,8 +13,8 @@
 | 0 · 流式按帧合并 + 匀速吐字 + Markdown 前缀记忆 | 完成 | `dd4e3b37` | BUG-473 |
 | 1 · 结算不闪、时间线开合过渡、流式可折叠、queued 行 | 完成 | `69d19e0f` | BUG-474、BUG-475 |
 | 2 · 校正接入同一套时间线、删三条死路径、移除 thinking-orbs | 完成 | `cc17d971` | BUG-476 |
-| 3 · 校正复用 ChatComposer / 统一滚动跟随 / JumpToLatest / 900px | **未做**，见 `BLOCKED.md` | — | BUG-476/475 未占号 |
-| 4 · DESIGN.md | 与 0/1/2 对应的条目已改；与 3 对应的条目随 3 延后 | 本文件同 commit | — |
+| 3 · 校正复用 ChatComposer / 统一滚动跟随 / JumpToLatest / 900px | 完成（第三批合入后解除阻塞） | `b72c1efc` | BUG-477、BUG-478 |
+| 4 · DESIGN.md | 与 0/1/2 对应的条目随各任务改；与 3 对应的四条随任务 3 同 commit | — | — |
 
 ## 任务 0 · 流式渲染
 
@@ -46,15 +48,23 @@ Performance 面板录制（3k 字回答无 >50ms 长任务）**未做**：无登
 - `chat-message-row.tsx` 只剩 timeline 一条主路径 + `AgentActivityStatus` 兜底（无 trace 分支、无 orb）；live 标记全部 `InlineSpinner`；`.conversation.is-rectification .agent-thinking-step/.agent-thinking-marker` 14px 覆写删除。
 - 校正的「已用时 N 秒」计时（`ActivityElapsed`）随 trace 面板一起退出——时间线本来就没有这个元素，两面一致优先。
 
-## 任务 3 · 未做
+## 任务 3 · 校正复用 ChatComposer、统一滚动跟随与「跳到最新」
 
-`git log origin/staging -- frontend/src/app/page.tsx` 最新 `551d6317`（第二批），第三批未合入。按红线 7 登记 `BLOCKED.md`，未占 BUG-476/475。
+开工时 `git log origin/staging -- frontend/src/app/page.tsx` 最新为 `551d6317`，第三批未合入，先按红线 7 登记 `BLOCKED.md`；远端合入 `bf6989ec`/`058e5db9` 后 rebase，阻塞解除，`BLOCKED.md` 该条改为已完成。
+
+改动：`src/hooks/use-conversation-scroll-anchor.ts`、`src/components/jump-to-latest-button.tsx`（新）、`src/components/chat-composer.tsx`、`src/app/page.tsx`、`src/components/rectification-agentic-chat.tsx`、`src/app/globals.css`；删除 `src/lib/rectification-sticky-scroll.ts`。
+
+- **ChatComposer**：新增可选 `value`（受控）与 `remainingId`。`const storeDraft = useComposerDraft(); const draft = value ?? storeDraft;`——store 订阅仍在组件内，主会话行为不变；校正面传 `value={draft}`，`grep composer-draft` 在校正文件里为 0（契约锁死）。校正面 `maxLength=500`（`RECTIFICATION_COMPOSER_MAX_LENGTH`，与主对话同上限），footer 放 `CharacterRemaining`（id 用 `useId`）；三段 placeholder、Enter/Shift+Enter/`isComposing`、「停止回答」文案与 `stopRun` 原样。
+- **滚动跟随只留一份**：`useConversationScrollAnchor` 增加 follow：`ResizeObserver` 观察滚动容器的子元素（`MutationObserver childList` 跟踪子元素增删并重新观察），anchored 时下一帧 `scrollTop = scrollHeight`；`resetKey` 变化时先落底一次；`anchored` 经 `anchoredRef` 在 effect 里同步（不在 render 写 ref，过 `react-hooks` 规则）。`page.tsx` 那个按 `activeStreamingText` 触发、结算时再补 smooth 的 effect 删除；hook 调用签名 `(conversation, !rectificationSurfaceOpen && !starterHomeVisible, activeSessionId)` 不变，starter home 不滚动的性质由 `active=false` 承担。校正面 `useConversationScrollAnchor(conversation, true, caseId)`，删除 `followTailRef` / `scrollFrameRef` / `updateFollowState` / `scrollToLatest` / `followLatestContent` / `showJumpToLatest` / `choiceCardsOpen` 与两个 `useLayoutEffect`；`rectification-sticky-scroll.ts` 删除。选择卡 360px 带宽的特例随之退出：卡片本来就在 transcript 里，看着它的人离底 ≤96px，本就 anchored。
+- **JumpToLatestButton**：`.jump-to-latest`（absolute、`bottom: 100%`、`pointer-events: none`）+ `.jump-to-latest__button`（44px、`--shadow-elevated`、focus ring、hover 暖卡片色），两面共用，文案统一「跳到最新」带 `ArrowDown`；`page.tsx` 内联 Tailwind 版（`shadow-md`）与 `.rectification-jump-latest` 三条规则删除。
+- **宽度**：`.rectification-workspace__chat .message-list { max-width: 720px }` 删除，两面同 `.message-list` 的 900px；`--rectification-jump-clearance` 底部留白保留。
+- 手工项（两面各做一次「流式中上滚→停跟随→出现按钮→点回底并恢复跟随」）**未做**，无登录态无 Chrome；行为由 `chat-notice-and-scroll-contract`、`rectification-agentic-entry`、`rectification-answer-choice` 的 hook/组件锁与 `nextAnchorState` 纯函数断言代替。
 
 ## 任务 4 · DESIGN.md
 
 已改：§3 思考正文 13px 写成显式例外；§5 Message 正文 16px → 17px（≤767px 时 16px，与 `globals.css` 一致）、Motion 改为"只有 GSAP 一份 160ms、结算不重放"、新增「Streaming states」七态表（含 failed 不用消息内红字、pacing 公式、reduced-motion 行为、校正只差不显示思考正文）；§6 表新增 Thinking collapse 180ms / Timeline label swap 120ms / Text reveal；§9 等待表把时间线 live 步写成两面共用，注明 live 标记只有 `InlineSpinner`、orb 已移除。
 
-随任务 3 延后：§4 阅读宽度（720 vs 900）、§5 composer 共用一句、§5 Jump to latest 条目、§7 `--shadow-soft`。
+随任务 3 已改：§4 阅读宽度写明两面同 900px；§5 Input and composer 加「One composer」条；§5 新增「Jump to latest」条目；§7 写明 `--shadow-soft` 的实际归属（叙事卡、会话内 composer 字段、starter 主题卡 focus、auth 模式 tab）与「浮动控件一律 `--shadow-elevated`、不得用工具类阴影」。
 
 ## 被触碰的既有断言（红线 3，每处源码上方均有原值与错因注释）
 
@@ -69,27 +79,42 @@ Performance 面板录制（3k 字回答无 >50ms 长任务）**未做**：无登
 | `tests/rectification-agentic-entry.test.ts` | 读取 `completed-activity-receipt.tsx` 并锁其 `<details>`/不 open/「本轮完成 · N 个步骤」；`activityStatus /activityTrace/` | 改为锁 `chat /rectificationTimelineRows/`、`chat /completedReceipt/`、`activityStatus` 不含 `activityTrace` | 锁的是校正专属第二折叠块与 trace 面板（BUG-476） |
 | `tests/rectification-activity-receipt.test.ts` | `deltaBranch` 内 `state: raw.trim() ? "streaming" : "thinking"`、`text: raw,`；`message.state === "settled" && message.failed` | 状态派生改锁 frame flush 段（`state: text.trim() ? …`、`text,`、`frames.setAnswer(raw)`）；失败行改锁 `&& !message.failed` 且无 `rectification-activity-failure` | 前者锁的是每 chunk 一次 setMessages（BUG-473），后者锁的是校正专属红字失败行（BUG-476）。**注**：这个文件在任务 0 的聚焦跑里漏跑了，任务 2 跑全量前才发现，改在 `cc17d971` |
 
+**任务 3 触碰的断言**（同样每处有原值与错因注释）：
+
+| 文件 | 原断言 | 现在 | 理由 |
+| --- | --- | --- | --- |
+| `tests/character-remaining-contract.test.ts` | `aria-describedby={showRemaining ? composerRemainingId : undefined}` | `remainingId = composerRemainingId` 默认 + `aria-describedby={showRemaining ? remainingId : undefined}` | composer 现为两面共用，校正传自己的计数 id（BUG-477） |
+| `tests/composer-isolation-contract.test.ts` | `const draft = useComposerDraft()` | `const storeDraft = useComposerDraft(); const draft = value ?? storeDraft;` + 校正传 `value={draft}` 且不 import `composer-draft` | 受控 `value` 是任务书要求，隔离性质加强而非减弱（BUG-477） |
+| `tests/chat-navigation-a11y-contract.test.ts` | 内联按钮的 `min-h-11` / `focus-visible:ring-3` / `pointer-events-auto` / `<ArrowDown … className="size-4"` | 页面锁 `<JumpToLatestButton onClick={conversationAnchor.anchorToLatest} />`，语义改锁组件源码 + `.jump-to-latest__button` 的 44px / focus-visible / pointer-events | 锁的是内联 Tailwind 按钮本身（BUG-478） |
+| `tests/chat-notice-and-scroll-contract.test.ts` | 三处：page effect 内 `anchored` 守卫先于 `container.scrollTo`；jump control 的 Tailwind 类；`absolute inset-x-0 bottom-full` | follow 在 hook 内、`anchoredRef` 守卫先于 `scrollTop` 赋值、`page.tsx` 无 `scrollTo`、`ResizeObserver`/`MutationObserver` 存在；按钮改锁组件与 CSS；定位改锁 `.jump-to-latest { position: absolute; bottom: 100% }` | 锁的是每 token 一次 `scrollTo` 的 effect 与内联按钮（BUG-478） |
+| `tests/chat-stream-layout.test.ts` | composerWrap 含 `pointer-events-none absolute inset-x-0 bottom-full` | 含 `<JumpToLatestButton` + CSS 锁 | 同上 |
+| `tests/starter-questions.test.ts` | page effect 以 `if (starterHomeVisible) return` 开头并调 `scrollTo` | hook 调用第二参含 `!starterHomeVisible`，follow effect `if (!active \|\| !element) return` 先于赋值，page 无 `scrollTo` | 性质（starter home 不自动滚）由 `active` 承担（BUG-478）。这条在任务 3 第一次全量跑才暴露，改在最后的 docs commit |
+| `tests/rectification-agentic-entry.test.ts` | 整段校正专属跟随锁（`followTailRef`、`isNearBottom`、`shouldShowJumpToLatest`、`choiceCardsOpen`、`回到最新`、`.rectification-jump-latest`）；`className="composer-stop"`、`aria-label="停止回答"`；`<form className="composer"` | 锁 `useConversationScrollAnchor(conversation, true, caseId)`、`<JumpToLatestButton …>`、这些符号不再出现、`.jump-to-latest` 居中；`stopLabel="停止回答"`、`onStop={stopRun}`、`composer-stop` 在 `chat-composer.tsx`；`<ChatComposer` + `RECTIFICATION_COMPOSER_MAX_LENGTH = 500` + `<CharacterRemaining` | 锁的是第二套滚动与第二个输入框（BUG-477/476） |
+| `tests/rectification-answer-choice.test.ts` | import `rectification-sticky-scroll` 并断言 `isNearBottom`/`shouldFollowLatest`/`shouldShowJumpToLatest`（含 360px 选择卡带宽）；`回到最新`、`followTailRef.current` | import hook 的 `conversationAnchorThreshold`/`nextAnchorState`，断言 96px 与同一组距离判定；锁 `<JumpToLatestButton …>` 与 `conversationAnchor.anchored` | 模块已删除（BUG-478） |
+
 新增测试：`tests/stream-frame-buffer.test.ts`（7）、`tests/chat-markdown-split.test.ts`（4）、`tests/chat-stream-settle-contract.test.ts`（4）、`tests/rectification-timeline-adapter.test.ts`（6）、`home-streaming-render-split` +1。
 
 ## 命令输出
 
-`./node_modules/.bin/tsc --noEmit` → **0**（任务 0/1/2 各跑一次，均无诊断）。
+`./node_modules/.bin/tsc --noEmit` → **0**（任务 0/1/2 各一次；rebase 后一次；任务 3 后一次，均无诊断）。
 
-`./node_modules/.bin/eslint` 触及文件 → **0 error**。`use-consultation-run.ts` 有 9 条既有 `no-unused-vars` warning（未使用的导入/`startNewChat`），本轮只加了一行 import，与 `origin/staging` 一致；`stream-frame-buffer.ts` 一条 `dirty` 未用已在本 commit 清掉。
+`./node_modules/.bin/eslint` 触及文件 → **0 error**。warning 只落在 `page.tsx`（43 条，与 `origin/staging` 同文件同数）与 `use-consultation-run.ts`（9 条既有 `no-unused-vars`，本轮只加一行 import）；本轮新建的六个文件 0 warning。
 
-`./node_modules/.bin/tsx --test tests/*.test.ts`：
+`./node_modules/.bin/tsx --test tests/*.test.ts`（基线在干净的 `origin/staging` @ `058e5db9` 独立 worktree 里 `npm ci` 后跑）：
 
-| | 基线（开工时 `fbb80fa3`） | 现在 |
-| --- | ---: | ---: |
-| tests | 2460 | 2482 |
-| pass | 2426 | 2448 |
-| fail | 24 | 24 |
-| skipped | 10 | 10 |
+| | 旧基线 `fbb80fa3` | 新基线 `058e5db9` | 现在（rebase + 任务 3） |
+| --- | ---: | ---: | ---: |
+| tests | 2460 | 2461 | 2482 |
+| pass | 2426 | 2427 | 2448 |
+| fail | 24 | 24 | 24 |
+| skipped | 10 | 10 | 10 |
 
-24 条失败逐条比对**完全同一集合**（`comm` 差集为空）：全部是本机无 Docker / PostgreSQL / 部署夹具的数据库、Better Auth、staging workflow YAML、live sync 类（admin code functions、Owner recovery、local PostgreSQL、redeem security、personal report job/sections RLS、migration runner、v9 migration 等），与上一轮 PROGRESS 记录的环境缺口同类。10 条 skipped 同基线。无产品逻辑新增失败。
+24 条失败与新基线逐条比对**完全同一集合**（`comm` 差集为空）：全部是本机无 Docker / PostgreSQL / 部署夹具的数据库、Better Auth、staging workflow YAML、live sync 类（admin code functions、Owner recovery、local PostgreSQL、redeem security、personal report job/sections RLS、migration runner、v9 migration 等）。10 条 skipped 同基线。无产品逻辑新增失败。任务 3 第一次全量跑曾多出 1 条 `starter-questions` 的源码锁失败，按红线 3 改锁 hook 后（见上表）复跑归零。
 
-`./node_modules/.bin/next build` → **0**。`✓ Compiled successfully in 21.7s`、`Finished TypeScript in 58s`、`Generating static pages (62/62)`，`/` 仍是 `○ (Static)`。5 条既有 `skill-package-registry.ts` filesystem-tracing warning，未失败。
+rebase 后、任务 3 前的聚焦 14 套件 117/117；任务 3 后的聚焦 17 套件 177/177。
+
+`./node_modules/.bin/next build` → **0**。`✓ Compiled successfully in 22.6s`、`Finished TypeScript in 28.4s`、`Generating static pages (62/62)`，`/` 仍是 `○ (Static)`。5 条既有 `skill-package-registry.ts` filesystem-tracing warning，未失败。
 
 ## 未做与原因
 
-见 `BLOCKED.md` 顶部三条：任务 3 等第三批拆页；浏览器级手工验收（Performance 录制、结算录屏、两面并排截图、流式期间折叠）无登录态无 Chrome；`latestEntryMounts` 探针无 DOM 测试库不可驱动。
+见 `BLOCKED.md` 顶部：任务 3 已解除并完成；仍未做的是浏览器级手工验收（Performance 录制、结算录屏、两面并排截图、流式期间折叠、两面滚动跟随实机）——无登录态无 Chrome；`latestEntryMounts` 探针无 DOM 测试库不可驱动。
diff --git a/frontend/tests/starter-questions.test.ts b/frontend/tests/starter-questions.test.ts
index 68245e47..aff178f9 100644
--- a/frontend/tests/starter-questions.test.ts
+++ b/frontend/tests/starter-questions.test.ts
@@ -206,15 +206,15 @@ test("removes the user-facing admin button from the chat page", () => {
 });
 
 test("keeps the empty starter home at the top instead of auto-scrolling", () => {
-  const autoScrollEffect = sourceBetween(
-    pageSource,
-    "useEffect(() => {\n    if (starterHomeVisible) return;",
-    "profileComplete, starterHomeVisible]);",
-  );
-
-  assert.match(autoScrollEffect, /if \(starterHomeVisible\) return/);
-  assert.match(autoScrollEffect, /const container = conversation\.current/);
-  assert.match(autoScrollEffect, /container\.scrollTo\(\{ top: container\.scrollHeight/);
+  // Former lock: a page-level effect starting `if (starterHomeVisible) return;` that called
+  // `container.scrollTo`. The follow now lives in useConversationScrollAnchor (BUG-478); the page
+  // switches it off for the starter home through the hook's `active` argument instead.
+  assert.match(pageSource, /useConversationScrollAnchor\(\n\s*conversation,\n\s*!rectificationSurfaceOpen && !starterHomeVisible,/);
+  const anchorSource = readFileSync(new URL("../src/hooks/use-conversation-scroll-anchor.ts", import.meta.url), "utf8");
+  const followEffect = anchorSource.slice(anchorSource.indexOf("// Follow: while anchored"));
+  assert.match(followEffect, /if \(!active \|\| !element\) return;/);
+  assert.ok(followEffect.indexOf("if (!active || !element) return;") < followEffect.indexOf("element.scrollTop = element.scrollHeight"));
+  assert.doesNotMatch(pageSource, /container\.scrollTo\(/);
   assert.match(pageSource, /ref=\{conversation\} className=\{`conversation/);
   assert.doesNotMatch(pageSource, /conversationEnd|scrollIntoView/);
 });

From e3df3d17e790fc2e9b5690dd5d9d232f91800390 Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Wed, 2 Sep 2026 04:04:09 +0000
Subject: [PATCH 7/9] docs(chat): note the second rebase and renumbering;
 re-lock the question-stem describedby on the shared composer

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 PROGRESS-chat-streaming-ux-20260901.md              | 2 ++
 frontend/tests/rectification-spoken-collect.test.ts | 9 ++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/PROGRESS-chat-streaming-ux-20260901.md b/PROGRESS-chat-streaming-ux-20260901.md
index 6152d54a..f1e3d417 100644
--- a/PROGRESS-chat-streaming-ux-20260901.md
+++ b/PROGRESS-chat-streaming-ux-20260901.md
@@ -16,6 +16,8 @@
 | 3 · 校正复用 ChatComposer / 统一滚动跟随 / JumpToLatest / 900px | 完成（第三批合入后解除阻塞） | `b72c1efc` | BUG-477、BUG-478 |
 | 4 · DESIGN.md | 与 0/1/2 对应的条目随各任务改；与 3 对应的四条随任务 3 同 commit | — | — |
 
+**第二次 rebase 与编号再顺延（2026-09-02）**：远端又合入 `1a3e14e7`（问题题干显示/占用后解锁采用），占了 BUG-471/472。本分支再次用 `filter-branch` 在原提交上改号后 rebase 到 `1a3e14e7`：471→473、472→474、473→475、474→476、475→477、476→478，`BUG_HISTORY`、本文件、测试注释、commit message 一并改。冲突两处：`docs/BUG_HISTORY.md`（取 staging 全文 + 我方条目续在后面）；`rectification-agentic-chat.tsx`（两边都保留——staging 的 `collectSpokenPromptId` 与题干 `<p>` 原样，staging 加在 `<Textarea>` 上的 `aria-describedby` 改为经 `ChatComposer` 新增的 `describedBy` prop 传入，composer 把它与字数计数 id 合并成一个 `aria-describedby`）。staging 新测试 `rectification-spoken-collect` 锁 `aria-describedby={collectSpokenPrompt`（内联 Textarea），按红线 3 改锁 `describedBy={collectSpokenPrompt …}` + composer 的合并表达式，注释原值。`character-remaining-contract` 的 `aria-describedby={showRemaining ? remainingId : undefined}` 锁随之改为合并表达式。
+
 ## 任务 0 · 流式渲染
 
 改动：`src/lib/stream-frame-buffer.ts`（新）、`src/lib/chat-markdown-split.ts`（新）、`src/components/chat-message-content.tsx`、`src/components/chat-message-row.tsx`（`streaming` prop）、`src/hooks/use-consultation-run.ts`、`src/components/rectification-agentic-chat.tsx`。
diff --git a/frontend/tests/rectification-spoken-collect.test.ts b/frontend/tests/rectification-spoken-collect.test.ts
index a4ec220b..260e8849 100644
--- a/frontend/tests/rectification-spoken-collect.test.ts
+++ b/frontend/tests/rectification-spoken-collect.test.ts
@@ -111,7 +111,14 @@ test("collect_spoken current_question renders the prompt in the question slot",
   assert.match(chat, /const collectSpokenPrompt =/);
   assert.match(chat, /collectSpokenPrompt\n\s+\? "请回答上面的问题…"/);
   assert.match(chat, /rectification-question-slot__prompt/);
-  assert.match(chat, /aria-describedby=\{collectSpokenPrompt/);
+  // Former lock: `aria-describedby={collectSpokenPrompt` on the inline <Textarea>. The rectification
+  // surface now renders the shared ChatComposer (BUG-477) and hands the stem id in as `describedBy`,
+  // which the composer merges into the field's aria-describedby together with the count id.
+  assert.match(chat, /describedBy=\{collectSpokenPrompt && !showLiveChoiceCard && !readonly/);
+  assert.match(
+    readFileSync(new URL("../src/components/chat-composer.tsx", import.meta.url), "utf8"),
+    /\[describedBy, showRemaining \? remainingId : undefined\]\.filter\(Boolean\)\.join\(" "\)/,
+  );
   assert.match(chat, /<RectificationChoiceCard/);
   assert.doesNotMatch(chat, /rectification-question-slot__spoken/);
   assert.doesNotMatch(chat, /请在下方输入框回答/);

From c846c44a018924db2cc5fc6ff3439c72b4e55318 Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Wed, 2 Sep 2026 04:05:31 +0000
Subject: [PATCH 8/9] docs(chat): final test numbers after the second rebase

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 PROGRESS-chat-streaming-ux-20260901.md | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/PROGRESS-chat-streaming-ux-20260901.md b/PROGRESS-chat-streaming-ux-20260901.md
index f1e3d417..ee5b606e 100644
--- a/PROGRESS-chat-streaming-ux-20260901.md
+++ b/PROGRESS-chat-streaming-ux-20260901.md
@@ -104,12 +104,14 @@ Performance 面板录制（3k 字回答无 >50ms 长任务）**未做**：无登
 
 `./node_modules/.bin/tsx --test tests/*.test.ts`（基线在干净的 `origin/staging` @ `058e5db9` 独立 worktree 里 `npm ci` 后跑）：
 
-| | 旧基线 `fbb80fa3` | 新基线 `058e5db9` | 现在（rebase + 任务 3） |
-| --- | ---: | ---: | ---: |
-| tests | 2460 | 2461 | 2482 |
-| pass | 2426 | 2427 | 2448 |
-| fail | 24 | 24 | 24 |
-| skipped | 10 | 10 | 10 |
+| | 旧基线 `fbb80fa3` | 基线 `058e5db9` | 任务 3 后（`058e5db9` 上） | 最终（rebase 到 `1a3e14e7` 后，HEAD 树） |
+| --- | ---: | ---: | ---: | ---: |
+| tests | 2460 | 2461 | 2482 | 2484 |
+| pass | 2426 | 2427 | 2448 | 2450 |
+| fail | 24 | 24 | 24 | 24 |
+| skipped | 10 | 10 | 10 | 10 |
+
+`1a3e14e7` 本身只改了校正类测试文件（+2 用例），没有另跑一份干净基线；最终列的 24 条失败清单与 `058e5db9` 基线逐条比对差集为空，仍是同一组环境缺口。
 
 24 条失败与新基线逐条比对**完全同一集合**（`comm` 差集为空）：全部是本机无 Docker / PostgreSQL / 部署夹具的数据库、Better Auth、staging workflow YAML、live sync 类（admin code functions、Owner recovery、local PostgreSQL、redeem security、personal report job/sections RLS、migration runner、v9 migration 等）。10 条 skipped 同基线。无产品逻辑新增失败。任务 3 第一次全量跑曾多出 1 条 `starter-questions` 的源码锁失败，按红线 3 改锁 hook 后（见上表）复跑归零。
 

From 2e76af4057286bd60883aa4c95d99ed50c85bb92 Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Wed, 2 Sep 2026 04:29:00 +0000
Subject: [PATCH 9/9] docs(rectification): align the surface brief with the
 unified-loading ruling and record cross-brief ordering

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
---
 TASK-rectification-ux-20260902.md | 35 +++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/TASK-rectification-ux-20260902.md b/TASK-rectification-ux-20260902.md
index e2f115cf..5532d63f 100644
--- a/TASK-rectification-ux-20260902.md
+++ b/TASK-rectification-ux-20260902.md
@@ -1,6 +1,13 @@
 # 任务书 · 生时校正会话面：消除空白假死与交互摩擦（2026-09-02）
 
-基线：**`codex/streaming-ux-20260901`（HEAD `c846c44a`）合入后的 `origin/staging`**。本轮改的文件与那条分支高度重叠（`rectification-agentic-chat.tsx`、`page.tsx`、`globals.css`、`rectification-agentic-entry.test.ts`），**必须在它合入之后开工**；若开工时尚未合入，则基于该分支开 `codex/rectification-ux-20260902`，并在 PROGRESS 里写明。
+基线：**`codex/streaming-ux-20260901`（HEAD `c846c44a`）合入后的 `origin/staging`**。本轮改的文件与那条分支高度重叠（`rectification-agentic-chat.tsx`、`page.tsx`、`globals.css`、`rectification-agentic-entry.test.ts`），**必须在它合入之后开工**。
+
+## 与同日其它任务书的关系（先读）
+
+| 任务书 | 关系 | 结论 |
+| --- | --- | --- |
+| `TASK-unified-loading-20260902.md` | 产品裁决：揭幕后不得再出现 spinner / 骨架 / "正在加载"文案，流式生成中除外；且"与其它改 `page.tsx` 的轮次不得并行" | 本轮**遵守同一裁决**：进入校正面的等待全部提前到切换之前（并行拉完再一次揭幕，见 0.2），面板内不设加载态；剩余等待都是生成中（timeline live 行）。两轮都改 `page.tsx`，**串行执行**：streaming-ux 合入 → 本轮 → unified-loading（本轮对 `page.tsx` 只有两处小改，先做冲突面小）。 |
+| `TASK-rectification-walkthrough-polish-20260902.md` | 服务端抛光。其 **B.2**（流结束后前端立即刷新快照）与本轮 0.4 重复；其 **D.2**（问题槽必须在对话流内）与本轮问题槽改动同文件 | B.2 由本轮 0.4 承担，polish 执行方只做服务端 emit（若选 `question.ready` 事件，本轮 0.4 直接消费它）；D.2 的 UI 部分并入本轮 0.3。两轮同改 `rectification-agentic-chat.tsx`，polish 以服务端为主，**polish 先合入**，本轮 rebase。 |
 
 用户反馈原话："动画加载的过程中还有一段时间是空白状态，也没有加载也没有状态，导致用户以为页面卡了；交互也不是很友好。"下面每一条空白都对着代码找到了成因。**先读完「硬红线」再动手。**
 
@@ -71,25 +78,27 @@
 
 ## 任务 0（P0）· 六段空白与死角
 
-### 0.1 入口卡片有反馈
+### 0.1 入口有反馈，但不转圈
 
-`starter-home.tsx`：`rectificationLoading` 时卡片 `aria-busy="true"`，footer 的 action 文案换成「正在打开…」并在前面放 `InlineSpinner size={14}`；卡片整体 `cursor: progress`。文案在 `rectificationCardLabel` 的派生处加一个 loading 分支，不要在组件里硬编码两份。
+`starter-home.tsx`：`rectificationLoading` 时卡片 `aria-busy="true"`、`data-opening="true"`，footer 的 action 文案换成「正在打开…」（静态文案，**不加 spinner**，遵守 unified-loading 裁决），卡片 `cursor: progress`。文案在 `rectificationCardLabel` 的派生处加 loading 分支。侧栏校正会话行在 `rectificationLoading && 目标是该行` 时同样只加 `aria-busy` 与静态「打开中」尾注，不转圈。
 
-### 0.2 校正会话面板挂一次、不重挂、有恢复态
+### 0.2 一次揭幕：open + 记录 + 快照并行拉完再切面板，面板挂一次不重挂
 
-- `page.tsx`：`rectificationSurfaceOpen` 改为 `activeRectificationSession`（只要活动会话是校正类型就挂校正面板），面板 props 增加 `caseId: string | null`。`caseId` 为 null（open 尚未返回）或 turns 尚未加载时，面板内部渲染**恢复态**：`.message-list` 里一条 queued 行「正在恢复校正记录…」（用 `ConsultationRunTimeline` 的 `QUEUED_TIMELINE_ROW` 形态，或直接复用 `session-messages-loading` 的 spinner + sr-only 文案），composer 禁用、placeholder「正在恢复…」。
-- **key 去掉 `-ready/-loading` 后缀**，只保留 `${sessionId}-${caseId}`。turns 的到达改为 **prop 更新**：面板内 `useEffect([initialTurns])`——当本地 `messages` 为空且 `initialTurns.length > 0` 时用 `messagesFromTurns` 填充；本地已有消息（正在流或已流过）时**忽略**这次 turns，不覆盖。`refreshRectificationCase` 仍在 `onCompleted` 后调用，但不再引起重挂。
-- `use-session-management.ts` 的 `selectSession` 顺序不变；因为面板现在立即挂载，空白 2 的"先闪普通对话"自然消失。
-- 卸载时 `runAbort.current?.abort()`（cleanup effect），防止残余流写到已卸载实例。
+- `use-rectification-surface.ts` `openRectificationCase`：`/cases/open` 返回后**不立刻**切会话；改为 `Promise.allSettled([refreshRectificationCase(caseId, sessionId), fetch 案例快照])` 并行拉 turns 与快照（上限 4 秒，与 unified-loading 同一常量），全部落地后再一次性 `setRectificationTurns / setRectificationSnapshot / setRectificationSessionId / setActiveSessionId`。超时或失败：turns 用空数组、快照用 null，仍然切换（面板会走 0.6 空态或 0.4 的重试路径），并 composer notice「校正记录没有完全加载，可以继续」。
+- `use-session-management.ts` `selectSession`：对校正会话**不再先 `setActiveSessionId`**，改为只调 `openRectificationSession(id)`，由上一条在数据齐了以后切换；期间旧画面保持不动（这就是"先闪普通对话"的消除）。URL 写入时机随之后移到切换那一刻。
+- `page.tsx`：面板 key 去掉 `-ready/-loading` 后缀，只保留 `${sessionId}-${caseId}`；props 增加 `initialSnapshot`。面板内 `useState(() => messagesFromTurns(initialTurns))` 与 `useState(() => initialSnapshot)` 初始化，`caseSnapshotLoaded` 初值 = `initialSnapshot !== null`；挂载后**不再**自己拉一次快照（0.4 的重试路径除外）。
+- turns 的后续到达（`onCompleted` → `refreshRectificationCase`）改为 **prop 更新**：面板内 `useEffect([initialTurns])`——本地 `messages` 为空且 `initialTurns.length > 0` 时用 `messagesFromTurns` 填充；本地已有消息时忽略，不覆盖、不重挂。
+- 卸载时 `runAbort.current?.abort()`（cleanup effect）。
 
-### 0.3 快照未回来时问题槽显示恢复中
+### 0.3 问题槽只有生成中态，且始终在对话流内
 
-`caseSnapshotLoaded === false && !busy && !readonly` → 问题槽渲染 live 行「正在恢复校正进度…」。快照回来后按既有逻辑切换。
+- 快照随揭幕一起到位后，问题槽没有"等待快照"这一态；仅当 0.4 的重试在跑时显示 live 行。
+- **承接 polish D.2**：问题槽（live 选择卡 / spoken prompt / 状态行）渲染为 transcript 的**最后一条内容**——放在候选卡之后、`rectification-saved` 之前，用 `.message-entry` 的同一缩进与间距（`--assistant-content-inset`），不得悬在卡片外。
 
 ### 0.4 两条"等待服务端更新"文案改为有动作的状态
 
 `showMissingQuestion` / `showUnavailableQuestion` 命中时：
-1. 先自动重拉快照：最多 3 次、间隔 2s（`useVisibilityAwarePoll` 已有，复用），期间问题槽显示 live 行「正在准备下一个问题…」。
+1. 先自动重拉快照：若 polish 轮落地了 `question.ready` 公开事件，则收到即拉；否则在 `run.completed` 后立即拉一次，再最多 2 次、间隔 2s（`useVisibilityAwarePoll` 已有，复用）。期间问题槽显示 live 行「正在准备下一个问题…」——这是生成中等待，符合裁决。
 2. 3 次后仍命中：显示「没有拿到下一个问题。」+ 一个 44px 次级按钮「重新加载」（调 `loadCaseSnapshot`）。
 3. 两条旧文案从源码删除。
 
@@ -108,9 +117,9 @@
 
 ### 验收（任务 0）
 
-- 契约测试（源码锁 + 纯函数）：`page.tsx` 无 `"ready" : "loading"`；`rectification-agentic-chat.tsx` 无 `choiceContinuationPending`、无「等待服务端更新」；存在「正在恢复校正记录」「正在恢复校正进度」「正在准备下一个问题」「这段校正还没有开始」；`send` 签名含 `reuseAssistantRenderKey`；卸载 cleanup 调 `abort`。
+- 契约测试（源码锁 + 纯函数）：`page.tsx` 无 `"ready" : "loading"`；`use-rectification-surface.ts` 含 `allSettled` 与 4 秒常量；`selectSession` 对校正会话不直接 `setActiveSessionId`；面板源码含 `initialSnapshot`；揭幕后 `rectification-agentic-chat.tsx` / `starter-home.tsx` 无非生成中的 `InlineSpinner`；`rectification-agentic-chat.tsx` 无 `choiceContinuationPending`、无「等待服务端更新」；存在「正在打开…」「正在准备下一个问题」「这段校正还没有开始」；`send` 签名含 `reuseAssistantRenderKey`；卸载 cleanup 调 `abort`。
 - 纯函数：新增 `rectification-surface-state.ts`（把"恢复中 / 空态 / 问题槽四态"的判定抽成纯函数）并测全部分支。
-- 手工清单追加到 `docs/testing/staging-manual-walkthrough-20260901.md`：① 首页点卡片看到「正在打开…」；② 侧栏切校正会话不闪普通对话、看到「正在恢复」；③ 新建校正第一轮结束不闪、滚动不归零；④ 连点两道选择题中间无空帧无闪卡；⑤ 采用候选看到 live 行；⑥ 一个开场失败的旧会话进来有「开始提问」。
+- 手工清单追加到 `docs/testing/staging-manual-walkthrough-20260901.md`：① 首页点卡片看到「正在打开…」，随后一次性出现完整面板（消息 + 问题 + 盘面）；② 侧栏切校正会话：旧画面保持到数据齐、不闪普通对话、不出现空白；③ 新建校正第一轮结束不闪、滚动不归零；④ 连点两道选择题中间无空帧无闪卡；⑤ 采用候选看到 live 行；⑥ 一个开场失败的旧会话进来有「开始提问」。
 
 ### 建档