我用 Claude Code 写了一个 macOS 原生 App。来监控 Claude Code 自己的 Token 消耗

起因

最近重度使用 Claude Code 做开发，每天的 token 消耗量非常大。虽然有 npx ccusage@latest 这样的命令行工具可以查看用量。但每次都要跑一遍命令，而且输出是纯文本表格，不够直观。

说到我想要的是，

• 一眼看到每天花了多少钱
• 知道哪个项目最烧钱
• 了解缓存命中率
• 不同模型的用量分布

于是决定用 SwiftUI 写一个 macOS 原生 App。整个过程从设计到开发到上架 GitHub，全程用 Claude Code 完成。

先看效果

Dashboard — 一眼掌握全局

顶部四个指标卡片：总费用、总 Token、缓存命中率、会话数。其实，中间是每日用量柱状图，右侧是模型分布饼图。其实，

Projects — 哪个项目最烧钱

堆叠面积图展示各项目的 Token 消耗趋势。下方表格可以展开查看每个会话的详情。

Models — 模型用量对比

按模型维度统计费用和 Token 分布。Opus 果然是大头，

Sessions — 会话级明细

所有会话按时间排序。支持搜索和排序，点进去可以看到 Token 时间线、模型切换、工具调用日志。

技术方法

数据从哪来？

Clique Code 会在本地 ~/.claude/projects/ 目录下为每个项目、每个会话生成 JSONL 文件。每一行是一个 JSON 对象，记录了：

{
说到"type"，"assistant","message": {
"model": "claude-opus--","usage": {
"input_tokens":,"output_tokens":,"cache_creation_input_tokens":,"cache_read_input_tokens":
}
},"timestamp": "--19T12::.775Z","sessionId": "7e175846-a0c7-4fcb-9f3f-5aaed25b5f4b","cwd": "/xxx","gitBranch": "xxx/xxx"
}

关键字段：

• usage — 四种 token 计数：input、output、cache_creation、cache_read
• model — 使用的模型
• sessionId + timestamp - 会话关联和时间线
• cwd + gitBranch - 项目和分支信息

技术栈

组件	选择	理由
UI 框架	SwiftUI / macOS 原生。声明式 UI	快速建立原生界面无第三方依赖
图表库	Swift Charts	与 SwiftUI 无缝集成，支持多种图表类型
数据层	纯内存模型	不需要数据库，启动即加载全部数据
项目管理	XcodeGen / YAML 配置生成 xcodeproj	方便版本控制与自动化建立
最低版本 macOS 14Swift Charts 的 SectorMark 需要第三方依赖无零依赖，纯 Apple 框架 t>

主要架构

App
├── AppState # 全局状态 + 时间范围过滤
├── JSONLParser # 异步解析所有 JSONL 文件
├── StatsEngine # 按日期/项目/模型聚合统计
├── ModelPricing # 可自定义的模型定价
└── L10n # 中英文国际化

至于数据流，App 启动 → JSONLParser 扫描 /~/.claude/projects/​) → 解析所有 .jsonl 文件 → → AppState 持有数据 → 各 View 通过 @EnvironmentObject 消费。

费用计算 swift static func cost -> Double { let price = priceFor let input = Double / 1_000_000 * price.inputPerMillion let output = Double / 1_000_000 * price.outputPerMillion let cacheWrite = Double / 1_000_000 * price.cacheWritePerMillion let cacheRead = Double / 1_000_000 * price.cacheReadPerMillion return input + output + cacheWrite + cacheRead } 当前定价的观点是，

模型 Input Output Cache Write Cache Read

使用者可以在 Settings里自定义每个模型的单价。swift 从**注**来看。代码块示例仅作展示，请自行根据实际文件调整。

---

再看图表交互，鼠标跟随 Tooltip

Swift Charts 本身不提供 hover tooltip。需要用 chartOverlay + onContinuousHover 手动实现：

swift .chartOverlay { proxy in GeometryReader { geo in Rectangle.fill.contentShape) .onContinuousHover { phase in switch phase { case .active: hoverLocation = loc chartWidth = geo.size.width if let date: Date = proxy.value { selectedDate = Calendar.current.startOfDay } case .ended: selectedDate = nil } } } }

Tooltip位置需要处理边界情况——鼠标靠右时 tooltip 要翻转到左侧：

swift let tooltipW: CGFloat = /* width */ let xOff: CGFloat = hoverLocation.x + tooltipW + /* margin */ // 判断是否超出右边界 if xOff> chartWidth { // 翻转到左侧 } else { // 正常在右侧显示 }

---

项目名解析

Claude Code 的项目目录名是把文件方法中的 / 替换成 ‑比如：

css ‑Users‑devsh‑Documents‑cnb‑code‑app‑backend

需要解析回可读的项目名。策略是跳过常用方法前缀，取最终有意义的部分：

swift static func decodeProjectName -> String { let components = dirName.components.filter{!$0.isEmpty} let skipPrefixes = // ... 跳过前缀，返回最终 - 个有意义段 } }

---

从CI/CD来看，自动建立 DMG

用 GitHub Actions 实现打 tag 自动建立 DMG 并发布到 Releases：

yaml on这方面，push: tags的观点是，- 'v*' permissions: contents: write

至于jobs，build: runs-on: macos-latest

再看steps。- uses: actions/checkout@v4

 - run: brew install xcodegen
- run: xcodegen generate
- run: |
mkdir dmg_contents && cp -R build/Build/Products/Release/Tokmon.app dmg_contents/
ln -s /Applications dmg_contents/
hdiutil create -volname Tokmon \
-srcfolder dmg_contents \
-ov \
-format UDZO Tokmon-${GITHUB_REF_NAME}.dmg
- uses : softprops/action-gh-release@v2
with :
files : Tokmon-*.dmg

发版只需要的观点是，

bash git tag -a v1.x.x -m 'v1.x.x' && git push origin v1.x.x

---

一些发现

通过 Tokmon 分析自己的使用数据，发现了几个有意思的点：

1. 缓存命中率约 50% — 大约一半 input token 来自缓存，大幅节省成本。
2. Opus 占 60% 的费用 — 虽然 Haiku 会话数更多，但 Opus 单价高得多。
3. 日均消耗 $12+ — 重度使用 Claude Code 成本确实不低。
4. 不同项目差异很大 — web-management 项目消耗最多，因为代码量大且上下文长。按理说，

---

使用方式

直接下载

从 GitHub Releases 下载 DMG。拖到 Applications 即可。

从源码建立

bash brew install xcodegen && git clone https://github.com/learningpro/Tokmon.git && cd Tokmon && xcodegen generate && open Tokmon.xcproj # Cmd+R Run

---

开源

项目完全开源 MIT 协议：github.com/learningpro/Tokmon.git…​🔓​🚀​🌍​🤝​💬​⭐︎

欢迎 Star、Issue、PR。如果你也在重度使用 Claude Code，希望这个工具能帮你更好地了解自己的用量和费用。按理说，

整个项目从设计到开发到发布。全程使用 Claude Code 完成。包括 UI 设计稿、SwiftUI代码、JSONL解析、图表交互、国际化、CI/CD配置还有 README 都由 AI 助手协同完成。

---