本篇要解決的問題
用 AI 開發時，常常想知道這 2 件事：
- 5 小時額度還剩多少？
- 開過這些 session 裡，哪些專案還有事情沒做完？
這個月 Claude Code 推出了 Mod 的機制，可以在介面上補上自己想要的小工具。
這篇筆記文章先簡單介紹 Mod，再介紹解決上面 2 個需求的模組：
- 放在輸入框上方的用量條
token-usage。 - 放在右側欄的待辦面板
open-todos。
Claude Mods 是什麼
Mod 是我們裝進 Claude Code 的小外掛，可以讓它多出新功能。
想像一台樂高小火車。
火車本來就會跑，我們想加一盞燈、一個喇叭，就拿新積木喀嚓裝上去。
Claude Code 是那台火車，Mod 是我們多裝的積木。
Mod 可以做出這幾種東西：
| 我們想要 | Mod 做出來的東西 |
|---|---|
| 旁邊有一個一直顯示資訊的小視窗 | Pane（面板） |
| 輸入框上面多一條提示列 | Band（橫條） |
| 底下一行小字顯示狀態 | Status line（狀態列） |
| 跳出一個小通知 | Toast（提示氣泡） |
自己發明一個 /指令
|
Slash command |
| Claude 做某件事之前先攔下來檢查 | Hook（鉤子） |
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，多麼的勤儉持家（誤）。
它的運作拆成四個 hook：
-
session.measure：每次回應後拿到額度百分比、重置時間和花費。 -
turn.complete：累加輸入、輸出和快取的 token 數。 -
ui.render：在輸入框上方（AbovePrompt）把這些數字畫出來。 -
session.start：啟動一個計時器，每 5 分鐘重畫一次，讓重置倒數保持更新。重畫不會呼叫模型。
畫法有兩套：
- 桌面版用 SVG 畫圓角膠囊和小圖示。
- 終端機沒有 SVG，就退回純文字加進度條字元。
額度用顏色提醒：
- 低於 75% 維持原色。
- 到 75% 轉琥珀色。
- 到 90% 轉紅色。
時間軸上還有一根細線標出「現在走到視窗的哪裡」，用量條和時間線並排，一眼看得出用量是否跑在時間前面。
有個限制：要等第一次回應後才有資料。
模組二：open-todos，右側欄的待辦面板
安裝方式寫在後面段落，Mod 的程式碼也在該段落下載。
第二個模組解決另一個問題。
當我們同時開著好幾個專案，每個專案又有好幾個 session。
Claude 在某個 session 裡列了十個待辦，做到第七個時，我們就去忙別的了，然後我們就完全忘記。
open-todos 在右側欄列出所有 session 裡未完成和進行中的待辦，依專案分組。
可以透過輸入 /todos 開啟或重新整理。
資料從哪來
每個 session 的對話紀錄都存在 ~/.claude/projects 底下，裡面記著 Claude 呼叫待辦工具的每一筆動作。
這個掃描程式把 TaskCreate、TaskUpdate、TodoWrite 依序重放一遍，最後留下狀態還是「待辦」或「進行中」的項目。
掃描程式是一支 Node 腳本，面板用 $.process.run 呼叫它。
啟動 open-todos 的方式有 2：
- 送出 prompt 時。
- 輸入
/todos時，會重新掃描。
不過這個做法有個明確的限制：只有透過 Claude 的待辦工具建立的項目看得到，如果是在對話裡口頭交代的事，就讀不到了。
安裝與更新
兩個模組都打包成相同安裝、更新方式。
先從 GitHub 上下載專案，下載前也請按個星星，你的小小舉動，對本站都是大大的鼓勵：
接著終端機開啟專案，輸入以下指令安裝：
- macOS：
bash install.sh - Windows：
powershell -ExecutionPolicy Bypass -File install.ps1
安裝時，要確定本機有裝 Node.js。
結語
Mod 讓 Claude Code 不再是照單全收的工具。
想看額度就加一條用量條，想管待辦就加一個側欄。
開發方式還很簡單，直接在 Claude Code 上說自己想要一個什麼樣子的模組就行。
網路上也有很多有趣的 Claude Mod，大家可以多多搜尋，有趣的歡迎留言。
Top comments (0)