资讯动态

Claude-Code-Agent-Monitor Workflows页深度解读:11张D3.js图表看懂Agent编排全流程

发布时间:2026/10/15 18:27:25 来源:尧图企业网站定制
【免费下载链接】Claude-Code-Agent-Monitor A real-time monitoring dashboard for Claude Code Codex, built with SQLite3, Node.js, Express, React, Vite, TailwindCSS, WebSockets. It tracks sessions, agent activity, tool usage, and subagent orchestration, providing live analytics, a Kanban status board, status notifications, a cute buddy, an interactive web UI/MacOS/Windows native app.项目地址https://gitcode.com/gh_mirrors/cl/Claude-Code-Agent-Monitor点击查看免费下载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 APIserver/routes/workflows.js 中的GET /api/workflows→ 前端页面 Workflows.tsx 渲染 11 个图表分区。页面顶部有六个核心指标卡指标含义平均 Agent 深度会话里 Agent 嵌套层级的平均值main0Subagent1……每会话平均 Subagent 数委派强度0 表示全是单 Agent 会话Agent 成功率干净完成 ÷完成错误中止按红黄绿着色最常见流程出现频率最高的相邻工具对例如Bash → Bash平均压缩次数上下文 Compaction 压力指标平均时长会话从首个事件到末个事件的实际耗时页头还提供三档状态筛选所有会话 / 仅活跃 / 已完成、手动刷新、以及一键导出 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 条可加载更多。四、上手建议与延伸阅读先看指标卡再看 DAG六张指标卡给出全局健康度编排图给出结构全貌其余图表按需深入。善用节点筛选在编排图里点一个 Subagent 节点工具执行流等图表会同步聚焦——这是最快定位问题 Agent 的方式。配合导出做周报右上角的导出 JSON会把当前筛选范围下的全部工作流数据下载为workflows-YYYY-MM-DD.json方便归档对比。想理解数据怎么来的可以阅读 docs/API.md 中 Workflows 标签下的 REST 接口说明以及 ARCHITECTURE.md 里 hooks → API → SQLite → WebSocket → UI 的整体管线。11 张图表从宏观编排到微观事件逐层下钻Workflows 页几乎是把多 Agent 编排的可观测性做成了开箱即用的产品。如果你的团队正在跑 Claude Code / Codex 的 Subagent 工作流这一页值得设为日常巡检的固定一站。赞分享【免费下载链接】Claude-Code-Agent-Monitor A real-time monitoring dashboard for Claude Code Codex, built with SQLite3, Node.js, Express, React, Vite, TailwindCSS, WebSockets. It tracks sessions, agent activity, tool usage, and subagent orchestration, providing live analytics, a Kanban status board, status notifications, a cute buddy, an interactive web UI/MacOS/Windows native app.项目地址https://gitcode.com/gh_mirrors/cl/Claude-Code-Agent-Monitor点击查看免费下载相关推荐GitNexus 的 Claude Code 协作规则解析读懂 CLAUDE.md 与图驱动的 Agent 安全编辑体系GitNexus 的 Claude Code 协作规则解析读懂 CLAUDE.md 与图驱动的 Agent 安全编辑体系 GitNexus 是一个完全运行在浏开发者工具知识图谱静态分析MCP 服务人工智能如何5分钟看懂CoreCoder1300行Python拆解Claude Code级编码Agent的全部奥秘如何5分钟看懂CoreCoder1300行Python拆解Claude Code级编码Agent的全部奥秘 想读懂一个 AI 编码 Agent 的内部构造却Claude Code schedule Skill 深度解析用 RemoteTrigger 编排云端 Cron Routines定时云 AgentClaude Code schedule Skill 深度解析用 RemoteTrigger 编排云端 Cron Routines定时云 Agent sc文档知识库创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑