CodeBurn Web仪表盘指南：本地可视化AI编码开销，支持15分钟粒度趋势分析

CodeBurn Web仪表盘指南：本地可视化AI编码开销，支持15分钟粒度趋势分析

【免费下载链接】codeburnFree, local tool to track AI coding token usage and cost across 37 tools and agents (Claude Code, Cursor, Codex, Gemini and more), by model, project, and task. npx codeburn项目地址: https://gitcode.com/gh_mirrors/co/codeburn

CodeBurn Web仪表盘是开源工具CodeBurn的浏览器界面：一条codeburn web命令，就能在本地免费、离线地可视化 Claude Code、Cursor、Codex、Gemini 等 40 多款 AI 编码工具的 token 消耗与花费，并按模型、项目、任务拆分，趋势图最细可精确到15 分钟粒度。所有数据只从你磁盘上已有的会话文件读取，服务器绑定在 localhost，不上传任何东西 📊

一键启动：30秒打开你的AI开销仪表盘

前置条件只需 Node.js 22.13+，且本机至少装了一个支持的工具（Claude Code、Cursor 等）并产生过会话数据。

npx codeburn web # 免安装直接运行，自动打开 http://localhost:4747 codeburn web -p 30days # 从“最近30天”视图开始 codeburn web --port 8080 # 端口被占用时可指定端口，或自动换一个空闲端口 codeburn web --no-open # 只启动服务，不自动打开浏览器

web子命令在 main.ts 中注册，实际的服务与页面由 web-dashboard.ts 启动，前端是 React 应用（源码在 dash/src/App.tsx）。

💡 小贴士：服务默认绑定127.0.0.1，并会拒绝任何非 localhost 的请求，防止 DNS rebinding 等手法从你访问的网页读取本机使用数据——这是本地数据隐私的核心防线（见 web-dashboard.ts 中的回环校验逻辑）。

15分钟粒度趋势图：看懂你的AI消费曲线

Web 仪表盘的核心是一张跟随所选时间范围的细粒度趋势图，它和 TUI 的"按天堆叠柱状图"不同，会把开销画成连续的时间线。

粒度由后端自动选择（逻辑在 granular-history.ts）：

图表渲染组件是 UsageChart.tsx，它提供两个实用交互：

• 切换拆解维度：右上角可在Sessions（按会话拆线）和Models（按模型拆线）之间切换。默认显示花费最高的 6 条线，其余合并为 "Other"，鼠标悬停能看到每个时间点的明细和合计。
• 切换计量单位：顶栏的Cost / Tokens开关，让同一张图在"花了多少钱"和"烧了多少 token"之间自由切换。

如何读懂 15 分钟趋势图

1. 时间范围选到 48 小时以内（比如"今天"），图表即自动进入 15 分钟粒度；
2. 若某条会话线在某个时段陡峭爬升，说明该会话密集调用 API——通常是长上下文反复重读或重试循环；
3. 配合顶栏的工具筛选器（All tools / claude / codex / cursor…），可以只留一条工具线，快速定位"罪魁祸首"；
4. 若图前有一段全零，图表会自动裁掉，避免"假繁荣"——只有真实产生花费后曲线才开始。

八个指标卡 + 全景面板：数据都拆到哪一层

主图下方的指标卡给出当期核心数字：Cost（花费）、Tokens（输入/输出）、Calls（调用次数）、Sessions（会话数）、Cache hit（缓存命中率）、Cache write / read、One-shot（一次成功率）。再往下，面板把开销拆到四个维度：

其中"Savings & waste"面板与codeburn optimize的浪费扫描同源，让你一眼看到重试浪费和路由浪费的潜在节省金额。图表数据经由本地 API/api/usage提供（实现见 serve.ts 与 web-dashboard.ts），同一份数据也服务 TUI、菜单栏和桌面端，口径完全一致。

多设备合并视图：笔记本 + 台式机一个总账 🖥️

如果你的代码同时跑在多台机器上，Web 仪表盘支持本地网络配对合并：

1. 另一台设备上运行codeburn share --pair打印 PIN；
2. 主设备运行codeburn devices add，或直接在 Web 仪表盘侧栏点击Search local devices完成配对（配对码需两侧匹配）；
3. 侧栏出现 "All devices" 入口，进入后是按设备堆叠的每日花费图 + 每台设备的 Cost/Tokens/Calls/Sessions 明细。

隐私设计很克制：远程设备只共享汇总数字，项目名、会话明细留在各台设备本地（面板会明确提示 "Project and session detail stays on that device"）。配对与共享逻辑见 src/sharing/ 目录。

常见问题排查（FAQ）

Q：打开页面提示 "Dashboard not built yet"？CLI 会持续提供数据 API，但页面需要构建一次前端：cd dash && npm install && npm run build（从源码运行时需要，npm 发布的包已内置）。

Q：端口 4747 被占用？--port指定其他端口即可；不指定时若端口被占，程序会自动回退到一个空闲端口并打印新地址。

Q：仪表盘全是 0 或空图？确认本机确实有支持工具的会话文件；可运行codeburn doctor逐个工具检查探测路径、会话数与解析健康度（只读、离线）。

Q：今天还没写代码，图是空的？仪表盘默认打开"今天"，若今天无会话会自动回落到"7 天"视图；也可用-p week|30days|month|all指定。

小结

从"这个月花了多少"到"昨天 15:15 那一分钟为什么这么贵"，CodeBurn Web 仪表盘把 AI 编码开销的账本从月度粗账细化到了分钟级——而且账单从不撒谎，因为它读的就是你自己机器上的数据 🔥

更多细节可参考 README.md 的 "Browser dashboard" 章节与 docs/providers/ 各工具的数据位置说明。

【免费下载链接】codeburnFree, local tool to track AI coding token usage and cost across 37 tools and agents (Claude Code, Cursor, Codex, Gemini and more), by model, project, and task. npx codeburn项目地址: https://gitcode.com/gh_mirrors/co/codeburn