feat(docs): add development documentation, prototypes, and war-room components
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
372
docs/superpowers/specs/2026-04-09-war-room-design.md
Normal file
372
docs/superpowers/specs/2026-04-09-war-room-design.md
Normal file
@@ -0,0 +1,372 @@
|
||||
# War Room 智能体控制中心 - 设计规范
|
||||
|
||||
> 日期：2026-04-09
|
||||
> 状态：已批准
|
||||
|
||||
## 1. 概述
|
||||
|
||||
### 1.1 页面定位
|
||||
**智能体控制中心** - JARVIS 的全局智能体管理界面，一目了然展示所有智能体，支持快速创建、编排、群组协作。
|
||||
|
||||
### 1.2 核心价值
|
||||
- **可视化** - 所有智能体和流程一目了然
|
||||
- **可编排** - 拖拽创建智能体工作流
|
||||
- **可协作** - 多智能体群组分工配合
|
||||
- **可扩展** - 用户可自定义节点和智能体
|
||||
|
||||
### 1.3 与 /agents 关系
|
||||
- `/agents` 是**单会话级别**的智能体视图（当前会话的 Agent 拓扑）
|
||||
- `/war-room` 是**全局级别**的智能体控制中心（全部 Agent 模板和编排）
|
||||
- 两者风格统一，war-room 可跳转去 /agents 编辑特定智能体
|
||||
|
||||
---
|
||||
|
||||
## 2. 技术栈
|
||||
|
||||
- **框架**：Vue 3 + TypeScript
|
||||
- **状态管理**：Pinia
|
||||
- **UI 库**：Element Plus + Lucide Icons
|
||||
- **动画**：Vue Motion
|
||||
- **样式**：Scoped CSS + CSS Variables
|
||||
|
||||
---
|
||||
|
||||
## 3. 布局结构
|
||||
|
||||
### 3.1 整体布局（三栏式）
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────┐
|
||||
│ WAR ROOM - 智能体控制中心 [+ 新建] [▶ 运行]│
|
||||
├────────────┬───────────────────────────────┬─────────────────┤
|
||||
│ │ │ │
|
||||
│ 资源面板 │ 画布区域 │ 详情面板 │
|
||||
│ MODES │ │ INSPECTOR │
|
||||
│ │ [根据模式切换视图] │ │
|
||||
│ • 固定模板 │ │ [选中项详情] │
|
||||
│ • 编排画布 │ │ │
|
||||
│ • 群组协作 │ │ [操作按钮] │
|
||||
│ │ │ │
|
||||
├────────────┴───────────────────────────────┴─────────────────┤
|
||||
│ RUNTIME FEED - 实时状态滚动 │
|
||||
└──────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.2 顶部栏（Top Bar）
|
||||
- 标题：WAR ROOM - 智能体控制中心
|
||||
- 右侧按钮：
|
||||
- `+ 新建` - 新建智能体/编排/群组
|
||||
- `▶ 运行` - 启动当前编排（跳转到 /chat 执行）
|
||||
|
||||
### 3.3 左侧资源面板（Resource Bay）
|
||||
- **模式切换**：FIXED | STUDIO | TEAMS
|
||||
- **快速创建**：
|
||||
- CREATE AGENT
|
||||
- CREATE FLOW
|
||||
- CREATE TEAM
|
||||
- **资源列表**（根据模式动态切换）
|
||||
|
||||
### 3.4 中央画布（Command Stage）
|
||||
根据活跃模式显示不同内容
|
||||
|
||||
### 3.5 右侧详情面板（Inspector Bay）
|
||||
显示选中项详情和操作按钮
|
||||
|
||||
### 3.6 底部运行时面板（Runtime Strip）
|
||||
实时事件滚动
|
||||
|
||||
---
|
||||
|
||||
## 4. 模式详细设计
|
||||
|
||||
### 4.1 FIXED 模式 - 固定智能体模板
|
||||
|
||||
#### 4.1.1 模板矩阵（2x2 卡片网格）
|
||||
| 类型 | 图标 | 颜色 | 描述 |
|
||||
|------|------|------|------|
|
||||
| 时间管理 | CalendarClock | cyan | 读取日历、任务与提醒，输出全天日程 |
|
||||
| 知识管理 | Brain | amber | 聚合知识库、上下文，生成检索与摘要 |
|
||||
| 记账财务 | ReceiptText | green | 记录账目、消费分类、生成日报月报 |
|
||||
| 任务分发 | CircuitBoard | violet | 待办路由到 Planner/Executor/Researcher |
|
||||
|
||||
#### 4.1.2 每个卡片内容
|
||||
- **Kicker**：类型标签（TIME / MEMORY / FINANCE / COMMAND）
|
||||
- **标题**：智能体名称
|
||||
- **摘要**：功能描述
|
||||
- **统计**：Agent数量 / 工具数量 / 特性标签
|
||||
- **操作**：OPEN（查看详情）| INSTANTIATE（添加到编排画布）
|
||||
|
||||
#### 4.1.3 流程示意 Lane
|
||||
固定模板下方显示流程链：
|
||||
```
|
||||
TEMPLATE CORE → PLANNER → KNOWLEDGE → HUMAN GATE → OUTPUT
|
||||
```
|
||||
|
||||
### 4.2 STUDIO 模式 - 拖拽编排画布
|
||||
|
||||
#### 4.2.1 节点类型
|
||||
| 类型 | 说明 | 颜色 |
|
||||
|------|------|------|
|
||||
| Trigger | 触发器（定时/手动/文件）| cyan |
|
||||
| Agent | 智能体节点 | amber |
|
||||
| Tool | 工具节点 | green |
|
||||
| Condition | 条件分支 | violet |
|
||||
| Memory | 记忆节点 | cyan |
|
||||
|
||||
#### 4.2.2 节点面板（左侧，可折叠）
|
||||
```
|
||||
├── TRIGGERS
|
||||
│ ├── ⏰ 定时触发
|
||||
│ ├── 🎯 手动触发
|
||||
│ └── 📁 文件触发
|
||||
├── AGENTS
|
||||
│ ├── 🤖 预置智能体（从固定模板加载）
|
||||
│ └── ➕ 自定义智能体
|
||||
├── TOOLS
|
||||
│ ├── 📅 日历工具
|
||||
│ ├── 💰 记账工具
|
||||
│ └── 📚 知识库工具
|
||||
├── CONDITIONS
|
||||
│ ├── 🔀 条件分支
|
||||
│ └── ⏳ 延时节点
|
||||
└── MEMORY
|
||||
├── 🧠 共享记忆
|
||||
└── 📝 上下文
|
||||
```
|
||||
|
||||
#### 4.2.3 画布交互
|
||||
- **拖拽**：从面板拖拽节点到画布
|
||||
- **连接**：点击节点边缘锚点，拖拽到另一节点建立连线
|
||||
- **选择**：点击节点打开右侧 Inspector
|
||||
- **删除**：选中节点按 Delete 或右键菜单
|
||||
- **缩放**：滚轮缩放画布
|
||||
- **平移**：空白区域拖拽平移
|
||||
|
||||
#### 4.2.4 节点样式（沿用 /agents 风格）
|
||||
- 四角装饰线
|
||||
- 状态指示灯（active/idle/disabled）
|
||||
- 节点标签、名称、角色
|
||||
- 描述文字
|
||||
- 任务标签（当前执行中任务）
|
||||
|
||||
#### 4.2.5 SVG 连接线
|
||||
- 贝塞尔曲线连接
|
||||
- 虚线流动动画
|
||||
- 高亮激活状态
|
||||
|
||||
### 4.3 TEAMS 模式 - 多智能体群组
|
||||
|
||||
#### 4.3.1 群组卡片
|
||||
每个群组显示：
|
||||
- **群组名称**：如 OPS-ALPHA、LEDGER-NET
|
||||
- **协作协议**：Leader-led / Pipeline / Roundtable
|
||||
- **成员数**：N members
|
||||
- **专注领域**：时间与任务编排 / 账目录入与日报 / 知识聚合与检索
|
||||
|
||||
#### 4.3.2 成员拓扑图
|
||||
群组卡片内显示成员节点网络：
|
||||
```
|
||||
LEADER
|
||||
/ \
|
||||
AGENT AGENT
|
||||
\ /
|
||||
GATE(人机确认)
|
||||
```
|
||||
|
||||
#### 4.3.3 协作协议
|
||||
| 协议 | 说明 |
|
||||
|------|------|
|
||||
| Leader-led | 一个领导 Agent 协调，其他执行 |
|
||||
| Pipeline | 按顺序处理，上游输出下游输入 |
|
||||
| Roundtable | 平等协作，投票或共识决策 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 组件清单
|
||||
|
||||
### 5.1 WarRoomPage（主页面）
|
||||
- 整体布局管理
|
||||
- 模式状态
|
||||
- 主题样式（沿用 /agents 科幻风格）
|
||||
|
||||
### 5.2 ModeStrip（模式切换条）
|
||||
- 三个模式按钮：FIXED | STUDIO | TEAMS
|
||||
- 当前模式高亮
|
||||
|
||||
### 5.3 ResourceBay（资源面板）
|
||||
- 快速创建按钮组
|
||||
- 资源列表（动态）
|
||||
- 底部统计
|
||||
|
||||
### 5.4 CommandStage（中央画布）
|
||||
- 动态组件切换
|
||||
- StageFixed / StageStudio / StageTeams
|
||||
|
||||
### 5.5 StageFixed（固定模板视图）
|
||||
- OpsGrid（2x2 卡片网格）
|
||||
- OpsLane（流程示意）
|
||||
|
||||
### 5.6 StageStudio（编排画布）
|
||||
- NodePalette（节点面板）
|
||||
- FlowCanvas（拖拽画布）
|
||||
- StudioNodes（节点组件）
|
||||
- SVG 连接线
|
||||
|
||||
### 5.7 StageTeams（群组视图）
|
||||
- TeamsGrid（群组卡片网格）
|
||||
- TeamNetwork（群组拓扑）
|
||||
|
||||
### 5.8 InspectorBay（详情面板）
|
||||
- 动态详情显示
|
||||
- 操作按钮组
|
||||
|
||||
### 5.9 RuntimeStrip（运行时面板）
|
||||
- 事件滚动列表
|
||||
|
||||
---
|
||||
|
||||
## 6. 数据结构
|
||||
|
||||
### 6.1 智能体模板
|
||||
```typescript
|
||||
interface AgentTemplate {
|
||||
id: string
|
||||
name: string
|
||||
type: 'schedule' | 'knowledge' | 'bookkeeping' | 'dispatch'
|
||||
kicker: string
|
||||
icon: string
|
||||
tone: 'cyan' | 'amber' | 'green' | 'violet'
|
||||
summary: string
|
||||
stats: string[]
|
||||
flow: string[] // 流程节点
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 编排节点
|
||||
```typescript
|
||||
interface FlowNode {
|
||||
id: string
|
||||
type: 'trigger' | 'agent' | 'tool' | 'condition' | 'memory'
|
||||
label: string
|
||||
role: string
|
||||
position: { x: number, y: number }
|
||||
config: Record<string, any>
|
||||
}
|
||||
```
|
||||
|
||||
### 6.3 连接线
|
||||
```typescript
|
||||
interface FlowEdge {
|
||||
id: string
|
||||
source: string
|
||||
target: string
|
||||
sourceHandle?: string
|
||||
targetHandle?: string
|
||||
}
|
||||
```
|
||||
|
||||
### 6.4 群组
|
||||
```typescript
|
||||
interface Team {
|
||||
id: string
|
||||
name: string
|
||||
protocol: 'leader-led' | 'pipeline' | 'roundtable'
|
||||
members: TeamMember[]
|
||||
focus: string
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 样式规范
|
||||
|
||||
### 7.1 色彩系统（沿用 /agents）
|
||||
```css
|
||||
--accent-cyan: #00f5d4;
|
||||
--accent-amber: #f9a825;
|
||||
--accent-green: #00c853;
|
||||
--accent-violet: #be9fff;
|
||||
--bg-void: #050810;
|
||||
--bg-card: #0d1525;
|
||||
--border-mid: rgba(0, 245, 212, 0.15);
|
||||
--text-primary: #e8ffff;
|
||||
--text-secondary: #8fe4ff;
|
||||
--text-dim: #4a6670;
|
||||
```
|
||||
|
||||
### 7.2 字体
|
||||
```css
|
||||
--font-display: 'Orbitron', monospace;
|
||||
--font-mono: 'JetBrains Mono', 'Share Tech Mono', monospace;
|
||||
```
|
||||
|
||||
### 7.3 节点样式
|
||||
- 四角装饰线（10px 角落）
|
||||
- 状态环动画（active 时脉冲）
|
||||
- 悬浮高亮效果
|
||||
- 选中态边框发光
|
||||
|
||||
### 7.4 背景效果
|
||||
- 网格背景（40px 间隔）
|
||||
- 扫描线效果
|
||||
- 粒子漂浮动画
|
||||
|
||||
---
|
||||
|
||||
## 8. API 接口
|
||||
|
||||
### 8.1 智能体模板
|
||||
- `GET /api/agents/templates` - 获取预置模板列表
|
||||
- `GET /api/agents/templates/:id` - 获取模板详情
|
||||
|
||||
### 8.2 编排
|
||||
- `GET /api/orchestrations` - 获取编排列表
|
||||
- `POST /api/orchestrations` - 创建编排
|
||||
- `PUT /api/orchestrations/:id` - 更新编排
|
||||
- `DELETE /api/orchestrations/:id` - 删除编排
|
||||
|
||||
### 8.3 群组
|
||||
- `GET /api/teams` - 获取群组列表
|
||||
- `POST /api/teams` - 创建群组
|
||||
- `PUT /api/teams/:id` - 更新群组
|
||||
- `DELETE /api/teams/:id` - 删除群组
|
||||
|
||||
---
|
||||
|
||||
## 9. 实现优先级
|
||||
|
||||
### Phase 1 - 基础框架
|
||||
1. WarRoomPage 主布局
|
||||
2. ModeStrip 模式切换
|
||||
3. ResourceBay 资源面板（基础）
|
||||
4. RuntimeStrip 运行时面板（基础）
|
||||
|
||||
### Phase 2 - FIXED 模式
|
||||
5. StageFixed 固定模板视图
|
||||
6. OpsGrid 卡片组件
|
||||
7. InspectorBay 详情面板
|
||||
8. 模板数据 + API 集成
|
||||
|
||||
### Phase 3 - STUDIO 模式
|
||||
9. NodePalette 节点面板
|
||||
10. FlowCanvas 拖拽画布
|
||||
11. SVG 连接线
|
||||
12. 节点配置抽屉
|
||||
13. 编排 API 集成
|
||||
|
||||
### Phase 4 - TEAMS 模式
|
||||
14. StageTeams 群组视图
|
||||
15. TeamCard 群组卡片
|
||||
16. 群组 API 集成
|
||||
|
||||
---
|
||||
|
||||
## 10. 待确认事项
|
||||
|
||||
- [ ] 节点面板的具体节点列表
|
||||
- [ ] 智能体模板的详细配置项
|
||||
- [ ] 群组成员的角色定义
|
||||
- [ ] 编排的执行逻辑（如何传递给 /chat 执行）
|
||||
|
||||
---
|
||||
|
||||
*本设计规范为 JARVIS War Room 页面的完整设计指南。*
|
||||
Reference in New Issue
Block a user