fix(desktop): 避免步骤胶囊与底部导航重叠

[DavidShenXD]

这次改了什么

摘要

修复任务执行期间，composer 上方的步骤胶囊会与“跳到底部”或新消息提示重叠的问题。

原实现只按输入框栈顶计算底部导航位置，没有把动态出现的中央步骤/接管胶囊算进避让边界；同时中央行内容变化不一定改变外层 overlay 高度，原 ResizeObserver 也可能收不到更新。本次改为测量底部中央区域最上方的实际占用层，并同时观察中央胶囊行与输入框栈，使底部导航始终叠放在它们上方。

变更类型

• feat 新功能
• fix 缺陷修复
• refactor / perf 重构或性能优化
• docs / test / chore 文档、测试或工程维护
• 其他：

范围

• 关联 Issue / 需求：用户反馈的 Desktop 底部步骤胶囊重叠问题
• 本 PR 包含：底部中央避让边界测量、动态尺寸监听、步骤胶囊共存回归测试
• 明确不包含：步骤胶囊、新消息提示或“跳到底部”本身的视觉重设计；Mobile 改动
• 用户可见变化：步骤胶囊出现时，“跳到底部”/新消息提示会上移，并与步骤胶囊保持 6px 间距
• 是否存在 breaking change：无

UI 变化

• Desktop / Windows：修复底部中央两个 32px 胶囊的纵向堆叠；不改变颜色、字号、圆角或交互语义。
• Draft 阶段未上传截图；已在 Global 隔离 Dev 中完成本地目检和边界测量：导航胶囊底边 616px，步骤胶囊顶边 622px，间距 6px，无重叠。
• 引用的设计规范：
  • docs/design-rules/DESIGN.md §5 Spacing System：使用现有 6px 间距尺度。
  • docs/design-rules/DESIGN.md §8 Desktop Window：聊天流与 composer 随窗口布局动态重排，控件尺寸不缩减。
  • docs/design-rules/DESIGN.md §10 Light / Dark Dual-Mode Delivery Gate：本次仅调整几何定位，不增加颜色或单主题条件分支，继续复用现有语义 token；实际目检完成 Light，Dark 未单独目检。

怎么验证的

自动验证

pnpm --filter desktop exec vitest run src/renderer/components/chat/__tests__/messageStreamIndicatorPosition.test.ts src/renderer/__tests__/controlledBannerPlacement.test.ts
结果：通过，2 个测试文件、11 个测试全部通过。

pnpm --filter desktop run --if-present typecheck
结果：通过。

pnpm test:unit:related
结果：通过，apps/desktop 关联单测通过。

pnpm --filter desktop exec eslint src/renderer/components/chat/MessageStream.tsx src/renderer/components/chat/messageStreamIndicatorPosition.ts src/renderer/components/chat/__tests__/messageStreamIndicatorPosition.test.ts src/renderer/features/cc-agent/CCAgentSessionView.tsx
结果：通过。

pnpm check:dco
结果：通过，1 个提交已签名。

pnpm --filter desktop run --if-present lint
结果：未通过；全量扫描命中未改文件中的 412 个 error / 5 个 warning，本 PR 的 4 个改动文件未出现在错误列表，且上述定向 lint 通过。

手工验证

• Windows，Global 隔离沙盒：pnpm restart:desktop:remote --region=global -- --isolated=@worktree，得到 DESKTOP_DEV_VERDICT=ready。
• 在登录页实际点击“跳过登录”，同意协议后进入 #/cc-agent，侧栏显示“未登录”。
• 创建 5 步测试计划并使第 4 步保持进行中；步骤胶囊真实由计划状态生成。为稳定复现共存状态，运行时夹具仅强制显示已有的“跳到底部”组件，定位偏移仍由生产代码计算。
• 实测“跳到底部”底边 616px、步骤胶囊顶边 622px，间距 6px，overlap=false；Light 模式截图已本地目检。

未执行的验证

• Dark 模式未单独实机目检；本次未改颜色和主题分支，几何逻辑不区分主题。
• 未等待 GitHub CI；Draft PR 创建后由 CI 执行完整门禁。

风险

风险分类

• 无已知风险
• SQLite / migration
• system prompt
• 协议兼容
• 权限 / 安全 / 用户数据
• 存量插件兼容（批准状态 / 指纹 / manifest 校验 / 安装布局 / 包格式）
• 原生层 / fingerprint / OTA
• 跨平台差异
• 其他：

影响与回滚

• 影响范围：Desktop Renderer 的消息流底部导航定位；只有中央步骤/接管胶囊占位时改变偏移。
• 回滚 / 降级方式：回退本提交即可恢复原有定位；不涉及数据、配置、协议或迁移。

提交前检查

• 已 review 完整 diff
• 每个 commit 都带 DCO 签名（git commit -s，见 DCO）
• UI 改动已在“UI 变化”注明引用的设计规范章节
• 未提交凭证、令牌或授权文件
• 已补充必要测试；本改动无需额外用户文档
• 已确认测试结果或说明未执行原因

[greptile-apps]

Greptile Summary

本 PR 修复 Desktop 消息流底部导航与步骤/接管胶囊及计划详情浮层重叠的问题。

• 将避让边界从输入框栈顶扩展到中央区域最上方的实际占用层。
• 通过 ResizeObserver 与 MutationObserver 跟踪胶囊、输入框栈和动态挂载的计划浮层。
• 增加中央胶囊、展开计划浮层及动态观察目标的回归测试。

Confidence Score: 5/5

当前实现已覆盖此前报告的计划详情浮层避让问题，PR 看起来可以安全合并。

没有剩余的阻塞性故障。

Important Files Changed

Filename	Overview
apps/desktop/src/renderer/components/chat/messageStreamIndicatorPosition.ts	新增中央区域和计划浮层的边界测量及观察目标收集，完整覆盖了此前报告的浮层避让问题。
apps/desktop/src/renderer/features/cc-agent/CCAgentSessionView.tsx	同步观察动态挂载、卸载和尺寸变化的中央控件，并将实测避让偏移传给消息流。
apps/desktop/src/renderer/components/chat/MessageStream.tsx	改用底部中央实际占用边界计算导航胶囊位置。
apps/desktop/src/renderer/components/chat/tests/messageStreamIndicatorPosition.test.ts	覆盖空中央区域、步骤胶囊、展开计划浮层及观察目标选择。
apps/desktop/src/renderer/tests/controlledBannerPlacement.test.ts	补充动态浮层挂载监听的结构回归断言。

_{Reviews (2): Last reviewed commit: "fix(desktop): 避让展开的计划详情浮层" | Re-trigger Greptile}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ff6986facd

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[DavidShenXD]

反馈已处理

已处理：

• 接受并修复两个 reviewer 指出的同一问题：展开的步骤计划详情浮层未纳入底部导航避让边界。
• 已分别回复 chatgpt-codex-connector 与 greptile-apps 的行内反馈，并 resolve 两个 review conversation。

变更：

• 将 data-plan-flyout-positioner="composer" 的实际顶边纳入底部导航避让测量。
• 在浮层动态挂载或卸载时重新同步 ResizeObserver 目标，并继续跟踪浮层尺寸变化。
• 新增展开浮层的几何回归测试及动态观察契约测试。
• 修复提交：725fb6152。

验证：

• pnpm --filter desktop exec vitest run src/renderer/components/chat/__tests__/messageStreamIndicatorPosition.test.ts src/renderer/__tests__/controlledBannerPlacement.test.ts：通过，2 个测试文件、12 个测试。
• 改动文件定向 ESLint：通过。
• pnpm --filter desktop run --if-present typecheck：通过。
• pnpm test:unit:related：通过，Desktop 相关单测通过。
• pnpm test:unit：通过，全仓可运行单测全部通过。
• pnpm check:dco：通过，PR 范围内 2 个提交均已签名。

备注：

• 本次只调整几何测量与动态观察，不改变颜色、主题 token、文案或交互语义；Light / Dark 使用同一布局逻辑。
• 未单独实机复验计划详情展开态；自动化回归已精确验证底部导航与浮层保持 6px 间距。
• GitHub CI 已因新提交重新触发，未等待其完成。

[MagicLizi]

命中 UI 路径(MessageStream / messageStreamIndicatorPosition / CCAgentSessionView)但 description 未附界面效果证据——建议补充改动后效果:截图/录屏,或改动后界面的 HTML 页面,便于确认界面符合 DESIGN.md 设计规范。本条不阻断合并。

[DavidShenXD]

反馈已处理

已处理：

• 已评估 UI 效果证据提醒。改动已在 Global dev 隔离沙盒实机复现并由用户验收通过：折叠的步骤胶囊保持在输入框上方；底部跳转/新消息导航胶囊出现时不会与其重叠；展开计划详情时避让边界同时覆盖详情浮层。

变更：

• 本轮无代码、文档或测试改动。未为非阻断证据提醒向仓库提交二进制截图或专用 HTML 演示页，以免扩大本 PR 范围。

验证：

• 人工验证：Global dev 隔离沙盒复现上述折叠、底部导航共存及详情展开状态，验收通过。
• 自动化验证：messageStreamIndicatorPosition.test.ts 与 controlledBannerPlacement.test.ts 共 12 项通过；pnpm --filter desktop run typecheck、pnpm test:unit:related、pnpm test:unit 均通过。

备注：

• 本地验收截图未作为仓库资产提交；本评论已补充界面效果与验收结论。该提醒为建议项，不阻断合并。

[MagicLizi]

合了。步骤胶囊跟着计划浮层一起量高度，底部导航终于不用再跟中间那条叠在一起。