协作图

协作图可视化 Agent 之间的任务分发与回复关系，基于消息总线中的 task_id 构建 DAG。

数据模型

每条聊天消息可携带 task_id：

字段	说明
task_id	整数，关联 dispatch 与 reply
message_type	"task" 或 "reply"
from / to	Agent ID
content	消息内容

API 端点按 task_id 分组，将 task 消息作为边（edge），reply 消息作为边的属性。

API 端点

GET /api/collaboration/graph

返回 JSON：

{
  "nodes": [
    {"id": "alice", "label": "Alice"},
    {"id": "bob", "label": "Bob"}
  ],
  "edges": [
    {
      "id": "task_42",
      "from": "alice",
      "to": "bob",
      "task_id": 42,
      "type": "task",
      "summary": "请帮我搜索...",
      "timestamp": "2026-05-02T10:00:00Z",
      "replies": [
        {
          "from": "bob",
          "content": "搜索结果如下...",
          "timestamp": "2026-05-02T10:00:05Z"
        }
      ]
    }
  ]
}

数据来源：

• chat/group.jsonl — 消息总线文件
• agents/config.toml — Agent 名称映射

前端可视化

定义于 web-ui/src/pages/Collaboration.tsx，使用 dagre 自动布局：

• dagre 布局 — 自上而下（TB），节点间距 50px，层级间距 80px
• SVG 渲染 — 节点为圆角矩形，边为带箭头路径
• 侧面板 — 点击边（任务）展开详情面板，显示 task 摘要和所有 reply
• 自动轮询 — 每 5 秒刷新一次数据
• 空状态 — 无数据时显示提示文字

side panel

点击协作图中的边，右侧显示：

• Task 摘要 — 源 Agent → 目标 Agent 的原始消息
• Reply 列表 — 每条回复的发送者、内容、时间戳
• 关闭按钮 — 关闭侧面板

与 dispatch 的关联

当 Agent 调用 dispatch_task 工具时：

1. 写入 chat/group.jsonl，携带 task_id
2. 目标 Agent 回复时，同一 task_id 标记为 reply
3. API 聚合后，前端呈现为一条带回复的边