TokenWise — AI 编码助手 Token 使用监控桌面应用

一、项目概述

随着 AI 编码助手（Claude Code、OpenCode 等）在日常开发中的深度使用，Token 消耗与 API 余额逐渐成为开发者关注的核心成本指标。然而，目前缺乏一款轻量、隐私友好的桌面工具，能帮助开发者实时掌握 Token 用量并按模型/来源精细分析。

TokenWise 是一款基于 Tauri 2 + Vue 3 + Rust 构建的桌面应用，通过离线日志文件解析与实时 HTTP 代理拦截两种方式采集数据，配合 Chart.js 可视化仪表盘与系统托盘集成，让开发者在编码过程中对 Token 消耗"一目了然"。

• 项目形态：macOS 桌面应用（Tauri 2 原生窗口）
• 核心能力：双源数据采集、按模型分布可视化、API 余额查询、系统托盘实时显示、HTTP 代理实时监控
• 适用场景：重度使用 Claude Code / OpenCode 的开发者，需要追踪每日 Token 消耗与成本

二、业务痛点与目标

痛点

• AI 编码助手的 Token 消耗分散在不同平台和日志中，难以汇总统计
• 多个模型（DeepSeek、Kimi、Claude、Qwen 等）同时使用时，无法按模型维度分析用量
• API 账户余额查询需手动登录各平台，操作繁琐
• 缺乏实时监控手段，只能事后查看消耗

目标

• 将 Claude Code / OpenCode 的 Token 数据自动采集并统一展示
• 按模型维度展示 Token 分布，帮助优化模型选择策略
• 支持API 余额一键查询（DeepSeek、Kimi）
• 提供系统托盘常驻，无需打开窗口即可查看今日用量
• 支持实时代理监控，在 API 调用时即捕获 Token 数据

三、技术方案与架构

技术栈

双源数据采集架构

• 来源 1 — 离线日志解析（被动）
  • OpenCode：直接查询本地 SQLite 数据库（~/.local/share/opencode/opencode.db），SQL 聚合统计
  • Claude Code：遍历 ~/.claude/projects/*/conversations/*.jsonl 日志文件，JSONL 逐行解析、去重统计
  • 自动推断 API 提供商（阿里云百炼、火山引擎、Anthropic、DeepSeek、Kimi 等）
• 来源 2 — HTTP 代理监控（主动/实时）
  • 在 127.0.0.1:7890 启动内置 hyper HTTP 代理
  • 自动修改 Claude 配置文件将 API 请求路由至代理
  • 识别 Claude CLI/Code 请求（User-Agent 过滤），仅拦截相关流量
  • 解析 SSE 响应流，从 message_start / message_delta 事件中提取 usage 数据
  • 代理停止时自动恢复原始配置，不破坏用户设置

项目组织

tauri2-jiankong/mac/
├── src/                          # Vue 3 前端
│   ├── App.vue                   # 根组件（数据加载、页面路由）
│   ├── components/
│   │   ├── UsageCard.vue         # Token 使用卡片（环形图 + 指标）
│   │   ├── BalanceCard.vue       # API 余额卡片
│   │   ├── DonutChart.vue        # Chart.js 环形图
│   │   ├── LineChart.vue         # Chart.js 折线图
│   │   ├── DetailPage.vue        # 详情页（表格 + 趋势）
│   │   └── Settings.vue          # 设置页（API Key + 代理开关）
│   └── types/                    # TypeScript 类型定义
├── src-tauri/                    # Rust 后端
│   └── src/
│       ├── lib.rs                # Tauri 命令注册、托盘、插件
│       ├── claude_query_token.rs # Claude JSONL 日志解析
│       ├── opencode_query_token.rs # OpenCode SQLite 查询
│       ├── proxy/                # HTTP 代理模块
│       │   ├── server.rs         # Hyper 代理服务器
│       │   ├── handler.rs        # SSE 流解析与 Token 提取
│       │   ├── config.rs         # Claude 配置备份/修改/恢复
│       │   └── state.rs          # 代理运行状态
│       └── storage/              # SQLite 持久化
│           └── token_db.rs       # 数据库操作（建表、插入、查询）

四、核心功能实现

1）双源 Token 数据采集

• OpenCode 数据源：通过 rusqlite 直接查询本地 SQLite 数据库，SQL 聚合统计今日 input_tokens、output_tokens、cache_creation、cache_read 等指标
• Claude Code 数据源：使用 walkdir 遍历 JSONL 日志文件，逐行解析后按 message_id 去重，stop_reason 过滤（仅统计 end_turn 和 tool_use），UTC 时间戳自动转换为本地时间
• HTTP 代理源：基于 hyper 1.0 构建正向代理，对 SSE 响应流进行实时解析，从 message_delta 事件提取 usage 写入 SQLite

2）可视化仪表盘

• 使用卡片（UsageCard）：Chart.js 环形图按模型分布展示 Token 消耗，指标行展示输入/输出/缓存写入/缓存读取/调用次数
• 余额卡片（BalanceCard）：DeepSeek 和 Kimi 账户余额实时展示，含自定义渐变配色
• 详情页（DetailPage）：折线趋势图 + 数据表格，按模型分类的数据集，自定义 HTML tooltip 展示完整指标
• 模型配色方案：DeepSeek V4 Flash（天蓝）、DeepSeek V4 Pro（蓝色）、Kimi（紫色）、GLM（绿色）、Claude（橙色）、Qwen（靛蓝）

3）API 余额查询

• 调用 DeepSeek 余额 API（/user/balance）提取 CNY 余额
• 调用 Kimi 余额 API（/v1/users/me/balance）提取可用余额
• API Key 通过 tauri-plugin-store 安全存储在本地配置文件中

4）系统托盘集成

• 菜单栏托盘图标实时显示今日 Token 总数：{Claude total} | {OpenCode total}
• 数字自动格式化（≥1M 显示 "X.XXM"，≥1K 显示 "X.XK"）
• 窗口关闭时隐藏到托盘而非退出，保持统计持续运行
• 点击托盘图标显示/聚焦应用窗口

5）HTTP 代理实时监控

• 一键启动/停止代理，实时状态指示（绿色/灰色圆点）
• 代理自动修改 ~/.claude/settings.json 将 API 请求路由至本地代理
• 代理停止时自动恢复原始配置，确保用户设置不被破坏
• 支持 Android 12+ 精确闹钟权限检查

五、项目效果

• 将"登录各平台后台查余额"的流程改为"桌面一键查看"，大幅提升查询效率
• 通过双源数据采集，实现从历史统计到实时监控的全链路覆盖
• 按模型维度的可视化分析帮助开发者优化模型选择、降低成本
• 系统托盘常驻显示，编码过程中随时掌握消耗动态

六、可扩展与复盘

• 更多 AI 工具支持：扩展至 Cursor、Windsurf 等 AI 编码助手的日志解析
• 成本估算：根据各模型单价自动计算每日/每月 API 花费
• 历史趋势：增加周/月维度的时间趋势分析
• 告警机制：Token 日消耗或 API 余额低于阈值时推送系统通知
• 多代理协同：支持同时监控多个代理端口，适配不同工具的并发使用
• Windows/Linux 支持：当前仅 macOS，可基于 Tauri 2 跨平台能力扩展