更新于 2026-06-19

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 historyWorkspace 管理和 runtime 进程控制
IM 创建任务从飞书/Lark 或自动化创建 Hub taskHub 授权后的 runtime 执行
远程目标规划Target 选择、授权状态、降级状态通过已批准 Edge 访问实际 workspace

Web 的定位是协作层,本地执行属于 Desktop + Edge。

界面模型

完整 Web 工作台组织以下界面,而不是变成通用聊天页:

界面目的当前状态
Project list团队工作入口推进中
Project detailContext、file、run、agent、task、member推进中
Shared sessionIM 式群聊,选中 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
ReadyHub session 和 project context 已加载主操作清楚,target 状态可见
RunningEdge 已接受 run 并流式输出 event消息流、进度、cancel affordance
Needs approvalEdge 等待用户或 reviewer 决策产出(diff/artifact)可见,决策控件清楚
CompletedRun 已完成并生成结果与产出Summary、产出、下一步
FailedRuntime、policy、schema、auth 或网络失败稳定错误码和恢复路径
DegradedTarget、Hub 或 integration 部分不可用如实显示状态

避免跳动布局、厚重 hover 阴影、旧紫色强调、死黑 footer 和浏览器默认蓝色 focus outline 出现在产品 mock 里。真实控件仍要有可访问 focus state,但纯展示 mock 的装饰按钮不应像被 DOM 选中。

审查流程

Web review flow 让决策链条可见:

  1. 用户、集成入口或自动化创建 Hub task。
  2. Hub 解析项目成员、产品授权、Agent Profile 和 target policy。
  3. Edge 在授权和 workspace policy 通过后启动 runtime。
  4. Edge 流式输出归一化 event 和候选产出。
  5. Web 渲染对话记录、产出、diff 和 approval state。
  6. Reviewer approve、reject、comment、escalate 或 cancel。
  7. Hub 记录 audit event,并暴露最终状态。

设计要求

Web 延续 AgentHub Desktop 和公开官网的产品方向。二者共享同一套工作台 UI:

  • 浅色优先的 TokenDance Blue 界面。
  • 紧凑但可读的工具布局。
  • 小圆角和克制玻璃质感。
  • 常见操作优先使用图标控件。
  • 工具面板内不放营销式卡片。
  • 表格和面板在移动端不溢出。
  • zh/en 文案描述同一能力和状态。
  • 聊天消息和审查产出与 Desktop 渲染一致。
  • 动效帮助连续性,不在 hydration 后改变布局。

证据清单

把 Web 文案从”推进中”升级为更强 claim 前,需要留下:

证据证明什么
路由截图Project/session/review route 在桌面和移动端正常渲染
Hub API traceWeb 通过产品 session 边界读取 Hub 状态
Edge routing traceTarget 选择和 Edge event 经过 Hub 授权
审查截图Review surface 渲染工作台合约且不暴露私有路径
Approval auditapprove/reject/cancel action 产生记录事件
Failure 截图Offline target、unauthorized target、runtime unavailable、timeout 都可读

相关页面

在 GitHub 编辑此页