给Claude Code开发Mod插件：实现额度用量条与项目待办面板

用 AI 开发时，经常会想知道这两件事：过去开过的 session 里，哪些项目还有事情没做完？这个月的用量如何。

Claude Code 前阵子推出了 Mod 机制，可以在界面上添加自己想要的小工具。

这篇笔记先简单介绍 Mod，再介绍满足上面两个需求的模块：

放在输入框上方的用量条 token-usage。

放在右侧栏的待办面板 open-todos。

Mod 是什么

Mod 是我们装进 Claude Code 的小外挂，可以让它多出新功能。

火车本来就会跑，我们想加一盏灯、一个喇叭，就拿新积木咔嚓装上去。

Claude Code 是那台火车，Mod 是我们多装的积木。

Mod 的触发逻辑就像是："当这件事发生，就做那件事。"

而 Claude 要删文件时先问一声，或你送出消息时在底下显示提示，都是这种写法。

另一个很好的特性是热重载，当我们改了 Mod，不用重开 Claude Code，画面马上换成新的，这省下大量等待时间。

一个 Mod 就是一个文件夹，里面有 3 个文件：

my-mod/
├── .claude-plugin/plugin.json   名字卡：我叫什么、做什么
├── hooks/hooks.json             地图：程序文件放在哪
└── hooks/register.tsx           真正做事的程序

写完之后，可以用 claude plugin validate <文件夹> 检查有没有写错。

模块一：token-usage，输入框上方的用量条

安装方式写在后面段落，Mod 的代码也在该段落下载。

token-usage 在 Claude Desktop 的输入框上方放一排胶囊，显示 5 小时额度、7 天额度、token 用量和花费。

主要是让 Claude Code 看这篇 X 贴文后，参考样式来撰写：https://x.com/thegenioo/status/2106139975922409585。

安装本篇的 Mod 后，最终会看到的样式如下：

看看，August 只用 Sonnet 5.5 medium，多么的勤俭持家（误）。

session.measure： 每次响应后拿到额度百分比、重置时间和花费。

turn.complete： 累加输入、输出和缓存的 token 数。

ui.render： 在输入框上方（AbovePrompt）把这些数字画出来。

session.start： 启动一个计时器，每 5 分钟重画一次，让重置倒数保持更新。重画不会调用模型。

终端机没有 SVG，就退回纯文字加进度条字符。

时间轴上还有一根细线标出"现在走到窗口的哪里"，用量条和时间线并排，一眼看得出用量是否跑在时间前面。

模块二：open-todos，右侧栏的待办面板

安装方式写在后面段落，Mod 的代码也在该段落下载。

当我们同时开着好几个项目，每个项目又有好几个 session。

Claude 在某个 session 里列了十个待办，做到第七个时，我们就去忙别的了，然后我们就完全忘记。

open-todos 在右侧栏列出所有 session 里未完成和进行中的待办，依项目分组。

可以通过输入 /todos 开启或刷新。

每个 session 的对话记录都存在 ~/.claude/projects 底下，里面记着 Claude 调用待办工具的每一笔动作。

这个扫描程序把 TaskCreate、TaskUpdate、TodoWrite 依序重放一遍，最后留下状态还是"待办"或"进行中"的项目。

扫描程序是一支 Node 脚本，面板用 $.process.run 调用它。

启动 open-todos 的方式有 2：

不过这个做法有个明确的限制：只有通过 Claude 的待办工具创建的项目看得到，如果在对话里口头交代的事，就读不到了。

安装方式

先从 GitHub 上下载项目，下载前也按个星星，你的小小举动，对本站都是大大的鼓励：

macOS：bash install.sh

Windows：powershell -ExecutionPolicy Bypass -File install.ps1

结语

Mod 让 Claude Code 不再是照单全收的工具。

想看额度就加一条用量条，想管待办就加一个侧栏。

开发方式还很直接，就在 Claude Code 上说自己想要一个什么样子的模块就行。

网络上也有很多有趣的 Claude Mod，大家可以多多搜索，有趣的欢迎留言。