JARVIS/docs/superpowers/specs/2026-04-09-war-room-design.md

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 智能体模板

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 编排节点

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 连接线

interface FlowEdge {
  id: string
  source: string
  target: string
  sourceHandle?: string
  targetHandle?: string
}

6.4 群组

interface Team {
  id: string
  name: string
  protocol: 'leader-led' | 'pipeline' | 'roundtable'
  members: TeamMember[]
  focus: string
}

---

7. 样式规范

7.1 色彩系统（沿用 /agents）

--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 字体

--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 页面的完整设计指南。