agent-registry-design.md
13.5 KB
Agent Registry Web UI — 产品设计方案
1. 现状诊断
1.1 后端能力覆盖度
| 后端 API | 能力 | Web UI 状态 |
|---|---|---|
GET /agents |
全量 Agent 列表（含四维信息） | ❌ 无页面 |
GET /agents/:name |
单个 Agent 详情 | ❌ 无页面 |
GET /agents/:name/health |
健康检查 | ❌ 无页面 |
POST /agents |
动态注册 Agent | ❌ 无页面 |
DELETE /agents/:name |
注销动态 Agent | ❌ 无页面 |
GET /agents/config |
完整配置（agents + launchers + backends） | ❌ 无页面 |
GET /agents/sessions |
会话池状态 | ❌ 无页面 |
GET /agents/groups |
Agent 组列表 | ✅ NewTask 选择器 |
GET /agents/groups/:id |
组详情（含四维信息 + availableBackends） | ✅ 配置弹窗 |
结论：10 个 API 只有 2 个在 UI 中有体现，且都藏在"新建任务"流程里。
1.2 核心问题
- 没有独立的 Agent 管理入口：用户必须从"新建任务 → 配置弹窗"才能看到 Agent 信息
- 四维正交架构不可见：用户看不到 Agent 由哪四个维度组成
- 无全局视图：用户不知道系统里有多少 Agent、多少 Backend、多少 Group
- 无运行状态：Agent 健康状态、会话池、动态注册全不可见
- NewTask 页面职责混乱：既是任务创建页，又兼任 Agent 配置入口
2. 信息层级分析 (Benchmark-First)
L1 核心主体：Agent 全景视图
用户第一眼需要知道：我有多少 Agent，它们分别是什么角色，健康状态如何？
L2 参照系：四维架构
每个 Agent 由四个正交维度定义（身份 / 协议 / 传输 / 生命周期），用户需要看到这个结构。
L3 数据点：具体配置
每个 Agent 的具体配置值：cliBackend: claude-cli、launcher: kimi-local 等。
L4 补充信息：Prompt 内容、会话状态
展开查看的详细内容，默认折叠。
3. 页面架构
3.1 路由变更
/ → TaskList（任务列表 — 保持不变）
/new → NewTask（新建任务 — 精简，配置入口指向 /agents）
/task/:id → TaskDetail（任务详情 — 保持不变）
/agents → AgentRegistry（新增 — Agent 注册中心）★
/claude-chat → ClaudeChat（保持不变）
3.2 AgentRegistry 页面设计
┌────────────────────────────────────────────────────────────────────┐
│ Agent Registry │
│ │
│ ┌── 统计概览 ─────────────────────────────────────────────────┐ │
│ │ 🤖 20 Agents · 📦 4 Backends · 👥 3 Groups · 💚 All │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ ┌── Tab 切换 ─────────────────────────────────────────────────┐ │
│ │ [按组查看] [按类型查看] [执行后端] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ === Tab 1: 按组查看 ========================================== │
│ │
│ ┌── 软件开发 (development) ── 默认 ──────────────────────────┐ │
│ │ ┌── master ──────────────────────────────────────────────┐ │ │
│ │ │ [master] 通用任务调度者 [acp · pipe · kimi-local] │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ ┌── coder ───────────────────────────────────────────────┐ │ │
│ │ │ [executor] 编写代码 [acp · pipe · kimi-local] │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ ┌── verifier ────────────────────────────────────────────┐ │ │
│ │ │ [validator] 验证代码正确性 [acp · pipe · kimi-local] │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ ┌── frontend-tester ─────────────────────────────────────┐ │ │
│ │ │ [validator] 前端浏览器测试 [acp · pipe · kimi-local] │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌── 小说创作 (novel-writing) ────────────────────────────────┐ │
│ │ ... │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ === Tab 2: 按类型查看 ======================================== │
│ │
│ ┌── executor (8) ────────────────────────────────────────────┐ │
│ │ coder · kimi-coder · claude-coder · gemini-coder │ │
│ │ claude-engine-coder · gemini-engine-coder · ... │ │
│ └────────────────────────────────────────────────────────────┘ │
│ ┌── validator (3) ───────────────────────────────────────────┐ │
│ │ verifier · frontend-tester · editor │ │
│ └────────────────────────────────────────────────────────────┘ │
│ ┌── master (1)────── orchestrator (2) ───────────────────────┐ │
│ │ ... │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ === Tab 3: 执行后端 ========================================== │
│ │
│ ┌── CLI Backends ────────────────────────────────────────────┐ │
│ │ ┌─ claude-cli ─┐ ┌─ gemini-cli ─┐ ┌─ kimi-cli ──┐ │ │
│ │ │ command: claude │ command: gemini│ command: kimi │ │ │
│ │ │ 会话模式 │ │ 单次模式 │ │ 单次模式 │ │ │
│ │ │ 引用: 2 agents│ │ 引用: 2 agents│ │ 引用: 2 │ │ │
│ │ └───────────────┘ └───────────────┘ └─────────────┘ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌── Launchers ───────────────────────────────────────────────┐ │
│ │ ┌─ kimi-local ─┐ ┌─ gemini-local ┐ ┌─ claude-local ─┐ │ │
│ │ │ process │ │ process │ │ process │ │ │
│ │ │ cmd: kimi │ │ cmd: gemini │ │ cmd: claude │ │ │
│ │ │ 引用: 8 │ │ 引用: 2 │ │ 引用: 2 │ │ │
│ │ └──────────────┘ └───────────────┘ └────────────────┘ │ │
│ └────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────────┘
3.3 NewTask 页面精简
配置弹窗移除，改为：
- Agent 组选择卡片保留
- 选择卡片上增加"当前执行后端"标签（一目了然）
- "配置"按钮跳转到
/agents页面（而非弹窗）
3.4 信噪比决策
| 信息 | 决策 | 理由 |
|---|---|---|
| Agent 名称 + 类型 | ✅ 保留并强化 | L1 核心 |
| 四维标签 | ✅ 保留 | L2 参照 |
| Description | ✅ 保留 | L3 数据 |
| Prompt 内容 | ⬇️ 降级（展开查看） | L4 补充 |
| 会话池状态 | ⬇️ 降级（统计卡片） | L4 补充 |
| 动态注册 | ⬇️ 降级（高级功能） | 低频操作 |
| 旧 CLI 列表 | ❌ 砍掉 | 已被 backends 取代 |
4. 组件规划
4.1 新建组件
| 组件 | 文件 | 职责 |
|---|---|---|
AgentRegistry.vue |
views/AgentRegistry.vue |
Agent 注册中心页面（路由入口） |
AgentTable.vue |
components/agent/AgentTable.vue |
Agent 表格视图（按组/按类型） |
BackendPanel.vue |
components/agent/BackendPanel.vue |
执行后端面板 |
AgentCard.vue |
components/agent/AgentCard.vue |
从 task/ 移入，通用 Agent 卡片 |
4.2 现有组件变更
| 组件 | 变更 |
|---|---|
NewTask.vue |
移除配置弹窗，改为跳转链接 |
AgentConfigModal.vue |
删除（功能并入 AgentRegistry 页面） |
AgentGroupSelector.vue |
增加当前执行后端提示 |
4.3 API 层变更
| 函数 | 变更 |
|---|---|
getAgents() |
已存在，需增加四维字段消费 |
getAgentConfig() |
新增 — 调用 GET /agents/config |
getAgentHealth(name) |
新增 — 调用 GET /agents/:name/health |
getSessionStats() |
新增 — 调用 GET /agents/sessions |
5. 不做的事情
- 不做 Agent 配置编辑/保存（agents.json 由系统管理，UI 只读）
- 不做 动态注册 UI（低频操作，命令行足够）
- 不做 Prompt 在线编辑（文件系统管理更合适）