UI 设计

对话优先、克制留白的个人 Agent 桌面 UI。
只反映真实后端能力；无假进度、假设置、不可执行控制。

目标

对话主线：目标 → 执行状态流 → 结果交付；过程细节默认收起，完成后可展开扁平列表。
克制视觉：浅色优先（深色为夜间模式）、留白、弱边框；Mist Teal 色板（灰底 + 闷青绿 accent，阴影/软面带绿相），主按钮走 --accent 而非近黑。
可控：停止、审批、编辑重试、分支等均调真实 API。
本地可信：页脚展示引擎在线与模式；离线禁用发送。

信息架构

┌────────────┬──────────────────────────┬────────────────────┐
│ 侧栏历史    │ 对话流 + Composer         │ 编码工作台（可选）   │
│ 动作入口    │                          │ 文件树 + 预览页签    │
└────────────┴──────────────────────────┴────────────────────┘

区域	必须	不要
侧栏	新对话、历史（时间倒序）、设置/记忆/搜索等真入口	统计仪表盘、装饰卡片
主区空态	引导句 + 建议 prompt 卡 + 大 Composer	教程墙
主区对话	用户右胶囊、裸 Markdown 交付、过程状态流/扁平列表	运行中默认展开工具卡时间轴；常驻「运行详情」侧栏
Composer	Enter 发送、模型选择、Agent 状态、busy 时停止	未配置时仍假装可聊
工作台	固定文件树 + 打开文档/产物预览	把树做成页签；叫 inspector
输出栏	右侧 grid 列（与工作台同列位、互斥）；卡式视觉，主对话不压在其下	absolute 叠层挡内容

窄窗：侧栏可收；工作台可关。

过程层（呈现语法）

阶段	呈现
运行中 (live)	单行灰字状态流（`phaseDetail` / 当前工具 / 子代理活动），进出场动画；不渲染可展开工具卡树
完成后	`已处理`（有真实耗时才带秒数）+ 可展开扁平活动列表：`已运行 …` / 子代理行；默认收起
交付	左对齐裸 Markdown（无气泡、无 Agent 头像条）；代码块带语言 + 复制；路径/文件 chip 可开工作台
门禁	工具/计划审批贴在 Composer 上方；ask-user 追问留在对话流；共用紧凑 `gate-card`
子代理	与工具同构的状态行，不做主视觉大「工作组卡」

状态展示

`TaskStatus`	文案倾向
pending / planning / running	等待 / 规划 / 执行
paused	等待确认（审批、追问、预算）
completed / failed / cancelled	完成 / 失败 / 已取消

细粒度只用后端 TaskPhase（thinking、calling_tool、waiting_approval…），前端不猜。

核心流程

启动： health + tasks（+ 需要时 tools）。在线可发送；离线禁用。

发任务： POST /api/tasks → 订 stream → 按 AgentEvent 增量更新。
迟到订阅：先任务快照（含 subagentRuns 等）再实时事件。

续聊： 同任务 POST .../messages；运行中可 steering/follow_up。

控制： 停止 cancel；工具/计划审批；追问回答；预算触顶后 resume / budget continue。

编辑重试（一步）

用户消息铅笔 → 气泡内联改文案（取消 / 发送）。
「发送」= revert（默认 code_and_conv）+ 立刻 messages（编辑稿 + 原附件）。
取消只关编辑态，不截断历史。
无 Composer「编辑模式」、不用 removedContent 覆盖稿；UI 不暴露恢复范围切换。
continue 失败时可用「撤销编辑」（archivedMessages）；成功 continue 后归档清空。

分支： branch 新任务并切换。压缩： /compact 或 API。

子代理

delegate 不重复成普通工具步骤；主对话以扁平活动行展示创建/完成状态。
进度来自 subagent_updated / Task.subagentRuns；不刷子代理 token 进主正文。

多模态

拖拽/粘贴图片 → 上传 → 消息 attachments；由当前选择且支持图片输入的模型处理。
气泡内缩略图 + 查看器；attach_content 进对话与工作台。

组件边界（web-ui）

组件	职责
`App`	视图切换、全局状态拼装
`Conversation` / `Timeline`	轮次、工具、子代理、失败卡
`Composer`	输入、附件、模型、Agent 状态、斜杠命令
`WorkbenchPanel`	文件树与预览
`SettingsPanel`	真设置（LLM 槽位、工具、MCP、KB、搜索…）
hooks	SSE、任务控制、设置、附件

API 只经 packages/web-ui/src/api/。

视觉纪律

浅色优先；主列限宽；用户右胶囊、交付左裸排。
Mist Teal 默认色板：--accent #3d7a6e（暗色 #6fb5a6）；阴影/气泡/软底带绿相，避免纯灰底 + 近黑主按钮。
主色贯穿：logo、选中态（--selection-bg）、Composer 聚焦环、发送钮、空态建议卡图标（同色系明度差）；侧栏「新对话」与其它入口同款，不做特殊强调。
字号、间距、圆角用 CSS token（含 --ui-radius-xl、--composer-shadow、--user-bubble-*）。
动效克制：状态流 fade、流式光标；尊重 prefers-reduced-motion。

验收（产品）

离线/未配置模型不能「假聊」。
审批与计划门禁可点且生效。
编辑重试一步完成且可取消本地草稿。
工作台能打开工作区文件与产物。
无静态假工具列表、假记忆、假设置保存。

UI 设计 ​

目标 ​

信息架构 ​

过程层（呈现语法） ​

状态展示 ​

核心流程 ​

编辑重试（一步） ​

子代理 ​

多模态 ​

组件边界（web-ui） ​

视觉纪律 ​

验收（产品） ​