Desktop UI 参考
AgentHub Desktop 是本地可见 Agent 工作的控制界面。本页映射预期 UI 区域、状态和交互，方便统一评估 preview 与截图。
布局模型
Desktop 保持紧凑、清晰、面向工作。主要布局是：
| 区域 | 作用 | 预期行为 |
|---|---|---|
| Sidebar | 项目、workspace、最近 run、runtime 快捷入口 | 紧凑行、清晰选中态，不放大营销卡片 |
| Chat stream | 用户请求、Agent 消息、tool 状态、approval | 消息流式输出时布局稳定 |
| Context rail | Files、diff、artifact、preview、terminal | 可切换面板，默认只读 |
| Composer | Prompt、目标 runtime、approval mode、submit/cancel | 支持键盘操作，不跳动 |
| Status area | Edge、runtime、run state、sync | 小状态指示，不做噪音横幅 |
官网 hero mock 遵守同一模型。展示时可以压缩内容，但不能虚构一个和产品不一致的界面。
Run 状态
Desktop、Web、文档和截图使用一致的状态语言：
| 状态 | 含义 | UI 规则 |
|---|---|---|
| Idle | 没有活跃 run | Composer 可用，context 保持可见 |
| Preparing | Edge 正在验证 workspace/runtime | 安静进度，不用全屏 spinner |
| Running | Runtime 正在输出消息或 tool event | 流式渲染，不挤动侧栏 |
| Needs approval | Runtime 请求写入、shell、apply 或 publish 权限 | 必须用户明确操作 |
| Completed | Run 成功结束 | 保留 transcript、diff、artifact 供审查 |
| Failed | Run 以可恢复错误结束 | 显示 code、安全 message 和下一步 |
| Cancelled | 用户或策略停止 run | 保留部分 transcript 和审计线索 |
静态官网 mock 不出现产品里不存在的浏览器 focus outline、选中框或 hover 蓝色。Mock 交互应像产品，而不是像原始 DOM。
Workspace 和 Edge 选择
Workspace selector 明确执行边界：
- 展示 workspace 名称，但公开截图不暴露私有绝对路径；
- 展示连接的 Edge 是 local、remote 还是 unavailable；
- blocked 状态用策略语言说明，不用泛泛的失败文本；
- 区分 Local Edge loopback 状态和 Hub/Web session 状态。
如果 Desktop 连接到 Local Edge，可以展示本地执行控制。如果 Web 没有授权 Edge target，不展示暗示直接访问本机文件的控制。
Runtime 选择器
Runtime picker 只展示已配置或可发现的 adapter：
| Runtime | 展示规则 |
|---|---|
| Mock | UI 和 event 验证的安全默认项 |
| Claude Code | 使用 Claude Code 标记，不用泛 Anthropic 标记 |
| Codex | 使用产品配置的 Codex/OpenAI 兼容标记 |
| OpenCode | 使用配置的 OpenCode 标记 |
| Custom | 使用中性 adapter 图标和明确 profile label |
不可用 runtime 只在有助于诊断时才保留可见。disabled 状态说明 CLI 缺失、鉴权缺失还是 adapter profile 校验失败。
Diff 和文件面板
Diff 与文件面板是审查面，不是自动写入面。
必备行为：
- 用户批准 apply 前，变更文件只读渲染；
- 清晰展示新增、修改、删除、重命名文件；
- 长行可滚动，不撑破页面外壳；
- 有条件时保留语法高亮，但不能只靠颜色表达状态；
- 生成 artifact 尽量和源码 diff 分开展示。
Approval 按钮使用简短动作：apply、reject、continue、ask、cancel。高风险动作带简短原因或策略标签。
动效与反馈
Desktop 动效保持克制：
- 不做跳动 hero 文案；
- mock window hover 不加厚重阴影；
- 不出现和 TokenDance Blue 无关的彩虹/色条；
- hydration 后不从原尺寸闪到缩放尺寸；
- 尊重
prefers-reduced-motion。
交互预览可以自动播放场景变化，但过渡发生在 mock 内部状态，不让整个 hero 重新排版。
截图 QA
公开站点使用 Desktop 截图或 mock 前，检查：
| 检查项 | 通过条件 |
|---|---|
| 主题 | 交互 mock 跟随站点主题切换 |
| 语言 | zh/en mock 文案跟随站点语言切换 |
| Runtime logo | Claude Code、Codex、OpenCode 图标来自配置源 |
| Focus | hover/click 没有不必要的蓝色 DOM outline |
| 密度 | desktop 和 mobile 下 mock 保持紧凑 |
| 隐私 | 无私有路径、key、token、邮箱或主机名 |
相关页面：Desktop 使用手册、设计系统、排障指南。