# 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 核心问题 1. **没有独立的 Agent 管理入口**：用户必须从"新建任务 → 配置弹窗"才能看到 Agent 信息 2. **四维正交架构不可见**：用户看不到 Agent 由哪四个维度组成 3. **无全局视图**：用户不知道系统里有多少 Agent、多少 Backend、多少 Group 4. **无运行状态**：Agent 健康状态、会话池、动态注册全不可见 5. **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. 不做的事情 1. **不做** Agent 配置编辑/保存（agents.json 由系统管理，UI 只读） 2. **不做** 动态注册 UI（低频操作，命令行足够） 3. **不做** Prompt 在线编辑（文件系统管理更合适） ---