feat(home-chat): 新增 stream 级 typing indicator 覆盖请求真空期

[ThreeFish-AI]

背景

用户在首页 Home Chat 发送消息后，前端在「请求已发出 → Agent 流式内容首次显示」之间存在 100–500ms（慢网或冷启动可达数秒）的等待真空期：

• 用户消息气泡已渲染、输入框切换为 Stop；
• 但 Assistant 气泡尚未挂载（要等 RUN_STARTED / 首个 TEXT_MESSAGE_CONTENT 入会话树）；
• 整个对话区视觉死寂，用户难以判断是否提交成功 / 是否已开始处理。

AssistantReplyBubble.tsx:118-128 早期已有三点 bounce 占位，但只覆盖「气泡已挂载但 segments 仍为空」的窗口；本 PR 在更上游的 ChatStream 层补一段 stream 级 indicator，与 bubble 级 placeholder 形成无缝接力。

改动总览

• 抽取共享组件 ChatTypingIndicator（inline / standalone 两种 variant），把 AssistantReplyBubble 与 MessageBubble 内既有的三点 bounce 占位收敛为单一事实源；保留 data-testid=\"agent-waiting-placeholder\" 兼容既有测试。
• ChatStream 新增 pending prop：在 displayBlocks.map 之外追加 standalone 三点动画，覆盖 Assistant 气泡尚未挂载的真空期；末尾 displayBlock 已是 assistant-reply 时让位给 bubble 级 placeholder，避免双 indicator。
• home-body 直接以既有 effectiveConnection ∈ {connecting, streaming} 派生 pending，不引入新 state、不动 activeRunIdRef（PR fix(home-chat): 根治重复渲染/乱序/双气泡 — Phase 3 折叠闸门 + invocationId 映射 + sort tiebreaker #479 故意以 ref 形式保留以规避并发 race）。
• 含 a11y：role=\"status\" + aria-live=\"polite\" + sr-only 文本；动效降级：motion-reduce:animate-none 响应 prefers-reduced-motion。

风险评估（对 PR #479）

路径	是否触碰
buildChatDisplayBlocks 去重/排序/Phase 3 折叠闸门	❌ indicator 在 displayBlocks.map 之外渲染
invocationId 映射	❌ 无关联
Sort tiebreaker	❌ indicator 无 timestamp
activeRunIdRef 并发隔离	❌ 不读不写
conversation-tree / session-hydration / useAgentSubscription	❌ 完全不动

回归风险：低。

业界最佳实践对照

• iMessage typing dots：三点 bounce + 紧贴气泡上方 — 与本方案最接近；本方案多一层 stream 级覆盖「block 尚未挂载」窗口；
• Anthropic Claude.ai / ChatGPT：在 Assistant 气泡内显示等待 caret/spinner — 对应现有 bubble 级 placeholder；
• Vercel AI SDK useChat：暴露 isLoading 由调用方决定 UI — 与本方案 effectiveConnection 派生 pending 概念一致。

自证材料

测试

• 新增 12 个单元测试（ChatTypingIndicator.test.tsx 6 条 + ChatStream.pending.test.tsx 6 条），覆盖 inline/standalone 两个 variant、a11y、reduced-motion、向后兼容、stream→bubble 接力路径。
• 全量 vitest：85 文件 / 625 测试全绿；MessageBubble 与 ChatStream 既有测试套零回归。
• pnpm typecheck、pnpm lint --max-warnings=0：均通过。

浏览器实机验证（chrome_devtools 接入用户主 Chrome 真实登录态）

• React Fiber 反查确认 <ChatStream> 收到 pending prop（key 列表含 pending）；
• Timeline 完整捕获：发送后 standalone indicator 出现 → Assistant 气泡挂载时 indicator 消失，bubble 级 placeholder 接力；
• 暗色色彩对比正常，无 console 错误。

实机截图归档于 .context/typing-indicator-*.png。

Test plan

• vitest 全量绿
• typecheck / lint 干净
• 浏览器实机：首发场景 indicator mount/unmount 完整生命周期
• PR fix(home-chat): 根治重复渲染/乱序/双气泡 — Phase 3 折叠闸门 + invocationId 映射 + sort tiebreaker #479 既有测试套零回归

🤖 Generated with Claude Code, CodeX, Gemini