Web 工作台
AgentHub Web(端口 5174)是 Hub 驱动的 IM 式协作界面。它与 Desktop 共享同一套工作台 UI,在聊天中展示 Agent 对话,在独立面板中展示审查产出。团队可以在这里查看项目、共享 session、run 历史、审查状态和集成入口创建的任务,但浏览器不能直接访问开发者本机文件系统或本地 CLI 进程。
NOTE
Web 工作台是活跃开发面。它可以按 Hub-backed session 做本地预览。完整生产级 Web + Hub + Edge 路由和数据库驱动工作台界面仍在开发中。
什么时候使用 Web
当工作流需要团队可见性,而不是直接本地执行时,使用 AgentHub Web:
| 场景 | Web 负责 | Desktop / Edge 负责 |
|---|---|---|
| 团队审查 | 共享聊天记录、审查状态、审计轨迹 | 本地文件预览和本地 diff 审批 |
| 项目概览 | Project context、task、agent、device、run history | Workspace 管理和 runtime 进程控制 |
| IM 创建任务 | 从飞书/Lark 或自动化创建 Hub task | Hub 授权后的 runtime 执行 |
| 远程目标规划 | Target 选择、授权状态、降级状态 | 通过已批准 Edge 访问实际 workspace |
Web 的定位是协作层,本地执行属于 Desktop + Edge。
界面模型
完整 Web 工作台组织以下界面,而不是变成通用聊天页:
| 界面 | 目的 | 当前状态 |
|---|---|---|
| Project list | 团队工作入口 | 推进中 |
| Project detail | Context、file、run、agent、task、member | 推进中 |
| Shared session | IM 式群聊,选中 agent、target、event、approval | 推进中 |
| Review view | 产出、diff、comment、approve/reject action | 推进中 |
| Target/device view | 在线状态、授权、last seen、能力 | 开发中 |
| Audit/status view | 产品事件、降级状态、失败原因 | 推进中 |
Hub 契约
Web 与 Hub 通信。Hub 管身份、产品 session、项目成员、设备路由、任务创建、共享状态和审计。
最小有用 Hub-backed Web session 包括:
- TokenDance ID subject 和 AgentHub 产品 session(OIDC PKCE)。
- Project id、角色和成员状态。
- Task 或 run id。
- 已选 Agent Profile 和目标 Edge。
- 对话事件和 run lifecycle event。
- 产出、diff、approval、failure 的 review state。
- 谁请求、审批、拒绝、取消或升级任务的 audit event。
Hub 授权 target 且 Edge 发出安全事件后,Web 才能渲染本地执行状态。
本地文件边界
Web 的核心规则:Web 不拥有本地文件系统。
| 请求 | 正确行为 |
|---|---|
| 用户要求 Web 检查本地文件 | 创建 Hub task,并路由到已授权 Edge target |
| 用户打开 Edge 生成的 diff | 渲染归一化 diff 数据,不渲染任意本地路径 |
| 用户点击 approve | 带 audit context 发送 Hub/Edge approval action |
| 用户要求执行终端命令 | 需要明确 policy,并通过 Edge approval 路由 |
| Edge 离线 | 显示 unavailable 或 degraded state |
公开截图应避免私有绝对路径、secret、provider key、内部 host name 和真实用户数据。
交互状态
Web 暴露稳定、桌面和移动端都可读的产品状态:
| 状态 | 含义 | UI 预期 |
|---|---|---|
| Empty | 未选择 project 或 run | 紧凑提示选择或创建 task |
| Ready | Hub session 和 project context 已加载 | 主操作清楚,target 状态可见 |
| Running | Edge 已接受 run 并流式输出 event | 消息流、进度、cancel affordance |
| Needs approval | Edge 等待用户或 reviewer 决策 | 产出(diff/artifact)可见,决策控件清楚 |
| Completed | Run 已完成并生成结果与产出 | Summary、产出、下一步 |
| Failed | Runtime、policy、schema、auth 或网络失败 | 稳定错误码和恢复路径 |
| Degraded | Target、Hub 或 integration 部分不可用 | 如实显示状态 |
避免跳动布局、厚重 hover 阴影、旧紫色强调、死黑 footer 和浏览器默认蓝色 focus outline 出现在产品 mock 里。真实控件仍要有可访问 focus state,但纯展示 mock 的装饰按钮不应像被 DOM 选中。
审查流程
Web review flow 让决策链条可见:
- 用户、集成入口或自动化创建 Hub task。
- Hub 解析项目成员、产品授权、Agent Profile 和 target policy。
- Edge 在授权和 workspace policy 通过后启动 runtime。
- Edge 流式输出归一化 event 和候选产出。
- Web 渲染对话记录、产出、diff 和 approval state。
- Reviewer approve、reject、comment、escalate 或 cancel。
- Hub 记录 audit event,并暴露最终状态。
设计要求
Web 延续 AgentHub Desktop 和公开官网的产品方向。二者共享同一套工作台 UI:
- 浅色优先的 TokenDance Blue 界面。
- 紧凑但可读的工具布局。
- 小圆角和克制玻璃质感。
- 常见操作优先使用图标控件。
- 工具面板内不放营销式卡片。
- 表格和面板在移动端不溢出。
- zh/en 文案描述同一能力和状态。
- 聊天消息和审查产出与 Desktop 渲染一致。
- 动效帮助连续性,不在 hydration 后改变布局。
证据清单
把 Web 文案从”推进中”升级为更强 claim 前,需要留下:
| 证据 | 证明什么 |
|---|---|
| 路由截图 | Project/session/review route 在桌面和移动端正常渲染 |
| Hub API trace | Web 通过产品 session 边界读取 Hub 状态 |
| Edge routing trace | Target 选择和 Edge event 经过 Hub 授权 |
| 审查截图 | Review surface 渲染工作台合约且不暴露私有路径 |
| Approval audit | approve/reject/cancel action 产生记录事件 |
| Failure 截图 | Offline target、unauthorized target、runtime unavailable、timeout 都可读 |