mnote/design/07-ai/done/7-73-page-ai-pi-ui-polish-v1.md

7-73 Page AI Pi UI 产品化收口 v1

状态：done Owner：07-ai / mnote-web / browser runtime 日期：2026-07-05

目标

在 7-72 功能补齐后，先收口用户可见的 Pi 面板体验：历史记录不能遮住输入区，顶部工具栏使用一致图标，辅助浮层不再像调试面板一样挤占主对话区。

已完成

• History 从文档流面板改为 Pi 内部浮层，固定在顶部工具栏下方，不再把消息区和 composer 顶乱。
• History 浮层增加标题栏与关闭按钮，打开 History 时自动关闭 Artifacts 浮层。
• 顶部 commandbar 改为统一 SVG icon button，覆盖新对话、历史、打开、Artifacts、运行状态、通知、启动、中止、清空、设置。
• 底部 modebar 去掉临时 Build / Plan 分段，保留真正有用的 send mode、模型、队列和快捷操作。
• 收紧 commandbar、消息区、composer 的间距、圆角和阴影，弱化调试感。
• 正式 smoke 增加 UI polish 断言：History 不遮 composer、顶部工具栏图标数量、History 操作入口。

验证

• node --check rust/crates/mnote-web/browser/sidebar-page-ai-pi-lab-runtime.js
• node --check scripts/task-pi-lab-ui-completion-smoke.js
• cargo test -p mnote-web page_ai_pi --lib，10 passed
• MNOTE_UI_BASE_URL=http://127.0.0.1:3000 node scripts/task-pi-lab-ui-completion-smoke.js

真实浏览器证据：

• 结果：/tmp/mnote-pi-ui-completion-1783248311039/result.json
• History 浮层与统一图标：/tmp/mnote-pi-ui-completion-1783248311039/01-history-session-actions.png
• 审批 audit/receipt：/tmp/mnote-pi-ui-completion-1783248311039/02-approval-audit-ui.png
• Abort stopReason / queued：/tmp/mnote-pi-ui-completion-1783248311039/03-abort-stopreason-queue.png

关键断言：

• historyDoesNotCoverComposer=true
• commandbarIconCount=10
• hasHistoryOpen=true
• hasHistoryRename=true
• hasHistoryFork=true