企业官网建设流程全解析

Workflows 页是 Claude-Code-Agent-Monitor（一个面向 Claude Code 与 Codex 的实时 Agent 监控仪表盘）中最硬核的一页：它把成百上千条会话事件聚合成 11 张交互式 D3.js 图表，用编排 DAG、桑基图、散点图等形式，把 Agent 委派、工具链、错误传播、成本分布一次性摊开在你面前。无论你是刚接触 Claude Code 编排机制的新手，还是想优化多 Agent 工作流的资深用户，这一页都能帮你快速回答："我的 Agent 到底在干什么？哪里慢？哪里贵？哪里容易出错？"

一、Workflows 页是干什么的？30秒建立心智模型

一句话概括：Sessions 页回答"哪些会话"，Analytics 页回答"花了多少"，而 Workflows 页回答"怎么编排"。

它的数据链路很简单：Hooks 事件 → REST API（server/routes/workflows.js 中的GET /api/workflows）→ 前端页面 Workflows.tsx 渲染 11 个图表分区。页面顶部有六个核心指标卡：

页头还提供三档状态筛选（所有会话 / 仅活跃 / 已完成）、手动刷新、以及一键导出 JSON。所有图表数据通过 WebSocket 事件自动刷新（3 秒防抖），右上角的 Live 徽标会实时提示连接状态。每张卡片右下角的 ⓘ 图标会解释"这个数字怎么算的"以及"当前数值意味着什么"——对新手非常友好。

二、动态工作流运行面板：Workflow 工具的"黑匣子"回放

在 11 张图表之前，还有一块Dynamic Workflows（动态工作流）面板，它展示的是由 Workflow 工具派生的 Agent 群组运行日志（依据磁盘上的运行日志重建）：

展开某次运行后，可以看到每个内部 Agent 的阶段（Phase）、状态（State）、Token 消耗、工具调用次数和时长，以及人性化的 Prompt 与结果预览——相当于给 Workflow 工具的运行留了一份可回放的录像带：

小提示：该面板是 Claude Code 专属功能；当仪表盘切换到 Codex 专属数据范围时会自动隐藏，而不是显示空卡片。

三、11 张图表逐个拆解

以下 11 个分区源码都在 client/src/components/workflows/ 目录下，每张图的官方解读文案可参考中文语言包 client/src/i18n/locales/zh/workflows.json。

1. Agent 编排图（Orchestration DAG）—— 全局导航图

分层有向无环图（DAG），五列从左到右：起点会话 → 主 Agent → Subagent 类型 → 压缩 → 结果（完成/错误/中止）。

• 边越粗 = 流转越频繁，节点徽章是次数；
• 点击任意节点即可按该节点筛选页面其余所有图表（这是本页最核心的交互）；
• 悬停任意节点可看完成数、错误数等统计。

它回答的是："我的工作流里，工作流向哪里去了？哪些 Subagent 占主导？哪些路径以错误收尾？"

2. 工具执行流（Sankey 桑基图）—— 工具如何串联

两侧是工具（Read、Edit、Bash……），中间的带状是相邻工具调用的流转，带子粗细 = 流转次数。悬停带子可查看"占源 / 占目标"的比例。

典型用途：发现习惯性工具链（如Read → Edit → Bash）、揪出循环调用或多余跳转。若你在第 1 张图里点击了某个 Subagent 节点，这张图会自动只展示该类型 Agent 的工具流。

3. Agent 管道图（协作网络）—— 谁在谁之后运行

圆圈是 Agent 类型（大小 = 总生成数），箭头 A → B 表示"B 在同一会话中紧随 A 运行"，箭头标签是次数，节点可拖拽重排。

它能暴露你未必有意设计的真实委派管道——比如 code-review agent 几乎总是跟在 build agent 之后运行，于是你可以考虑把它们固化成一个命名工作流。

4. Subagent 效能—— 每个 Agent 的健康体检卡

每种 Subagent 一张卡片：成功率环（环形填充 = 成功率）、总会话数、平均时长，外加过去 7 天的每日活动迷你图。快速回答"哪些 Agent 可靠、哪些慢、哪些用量在涨"。

5. 检测到的工作流模式 —— 你的"标准动作"清单

从会话轨迹中自动聚类出的 Agent 编排序列（main → sub → sub …），按出现频次排序，右侧显示匹配的会话数及占比；没有 Subagent 的独立会话单列。

高频模式是沉淀为 slash 命令、skill 或命名工作流的最佳候选——这是从"监控"走向"复用"的关键入口。

6. 模型委派流 —— 成本/延迟分级是否到位

两列流图：左列是会话使用的主模型，右列是 Subagent 内部使用的模型，连线表示观察到的"主 → Subagent"搭配，节点标注 Agent 数与总 Token。

典型洞察：主模型用 Sonnet、Subagent 用 Haiku 是健康的分级；如果 Subagent 意外升级到 Opus，这里会一眼看出来。悬停节点还能查看 Opus / Sonnet / Haiku 各档的定位说明。

7. 错误传播图 —— 故障到底在哪一层

顶部横幅给出会话级错误率；按深度（会话/主 → 直接 Subagent → 嵌套 → 深层）显示错误聚集；"易错类型"列表按错误数排序；底部汇总 API / 会话级错误。

它帮你决定重试、校验或重写该投在哪：错误集中在主线还是某个特定 Subagent，一目了然。

8. Agent 并发时间线 —— 会话节奏可视化

每行一种 Agent 类型：条形长度与会话数成正比，右侧百分比表示它在会话时间线中的平均起止位置（0% = 会话开始，100% = 会话结束）。

能揭示节奏规律，例如"开头跑 lint、结尾跑 code-review"，或某个 Agent 几乎占据整个会话。

9. 会话复杂度散点图 —— 成本/复杂度离群点猎人

每个会话一个气泡：x = 时长，y = Agent 数，气泡大小 = 总 Token，颜色 = 终止状态（红/黄 = 错误/中止）。

右上角的大气泡就是"耗时长、Agent 多、Token 贵"的失控候选会话；点击气泡可直接把该会话送入第 11 区的深入分析面板。

10. 压缩影响分析 —— 上下文压力的量化

两个数字框给出压缩事件总数与回收的 Token 总量，柱状图列出至少触发过一次压缩的会话（按次数降序）。

压缩是上下文压力信号：大量高压缩会话通常意味着工作流该拆分、汇总，或迁移到更长上下文的模型上。

11. 会话深入分析（Drill-In）—— 从聚合回到细节

当某张聚合图标记出可疑会话时，这里是"按顺序读懂究竟发生了什么"的地方：可选会话（下拉搜索或直接点击散点图气泡），在三个标签页间切换：

• Agent 树：完整的嵌套委派结构；
• 工具时间线：工具调用的时间视图；
• 事件序列：按时间顺序的原始事件流（默认展示前 100 条，可加载更多）。

四、上手建议与延伸阅读

1. 先看指标卡，再看 DAG：六张指标卡给出全局健康度，编排图给出结构全貌，其余图表按需深入。
2. 善用节点筛选：在编排图里点一个 Subagent 节点，工具执行流等图表会同步聚焦——这是最快定位问题 Agent 的方式。
3. 配合导出做周报：右上角的"导出 JSON"会把当前筛选范围下的全部工作流数据下载为workflows-YYYY-MM-DD.json，方便归档对比。
4. 想理解数据怎么来的，可以阅读 docs/API.md 中 Workflows 标签下的 REST 接口说明，以及 ARCHITECTURE.md 里 "hooks → API → SQLite → WebSocket → UI" 的整体管线。

11 张图表从宏观编排到微观事件逐层下钻，Workflows 页几乎是把"多 Agent 编排的可观测性"做成了开箱即用的产品。如果你的团队正在跑 Claude Code / Codex 的 Subagent 工作流，这一页值得设为日常巡检的固定一站。