token-usage
입력창 위 한 줄: 컨텍스트 사용량, 사용 한도, 메인·서브에이전트 모델과 effort. 서브에이전트 이름을 누르면 작업 내용 창이 열립니다
確かめやすいコードターミナル＋デスクトップペインバンドステータスライントーストBoxButtonText
何をするか
- プロンプトの上の帯・欄・トーストを描く
- /token-usage を足す
- ツールの呼び出しを見張る（止めることがある）
- session.end・session.measure・session.start・turn.complete ほか 2 個にフックする
良いところ
- ネットワークに出ない
- プロセスを起こさない
- TypeScript で書かれている
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like token-usage by parkyountaek (pane, band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/parkyountaek-token-usage/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
// the band above the prompt; what else goes there is drawn under it
on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
const { Box, Text } = $.ui.resolve(e)
const pct = '…'
const fineBar = '…'
const kind = '…'
const percentUsed = '…'
const resetsIn = '…'
const kind2 = '…'
const percentUsed2 = '…'
const resetsIn2 = '…'
const kind3 = '…'
const percentUsed3 = '…'
const resetsIn3 = '…'
const modelName = '…'
const effort = '…'
const fineBar2 = '…'
const value = '…'
const fmt = '…'
const label = '…'
const limitLabel = '…'
const fineBar3 = '…'
const value2 = '…'
const resetsIn4 = '…'
const fineBar4 = '…'
const value3 = '…'
const resetsIn5 = '…'
const fineBar5 = '…'
const value4 = '…'
const resetsIn6 = '…'
const fineBar6 = '…'
const value5 = '…'
const fineBar7 = '…'
const pct2 = '…'
const icon = '…'
const mark = '…'
const description = '…'
const modelCell = '…'
const fineBar8 = '…'
const cp = '…'
const fmt2 = '…'
const icon2 = '…'
const modelCell2 = '…'
const fineBar9 = '…'
const cp2 = '…'
const fmt3 = '…'
const icon3 = '…'
const modelCell3 = '…'
const fineBar10 = '…'
const cp3 = '…'
const fmt4 = '…'
return (
<Box flexDirection="column">
<Text>
<Text>
{"🧠 "}
</Text>
<Text>
<Text bold>
{pct}
%
</Text>
<Text>
{" "}
{fineBar}
</Text>
</Text>
<Text>
<Text dimColor>
{" │ "}
</Text>
⏳
{" "}
<Text>
<Text dimColor>
{" · "}
</Text>
<Text dimColor>
{kind}
{" "}
</Text>
<Text bold>
{percentUsed}
%
</Text>
<Text dimColor>
{" "}
{resetsIn}
</Text>
</Text>
<Text>
<Text dimColor>
{" · "}
</Text>
<Text dimColor>
{kind2}
{" "}
</Text>
<Text bold>
{percentUsed2}
%
</Text>
<Text dimColor>
{" "}
{resetsIn2}
</Text>
</Text>
<Text>
<Text dimColor>
{" · "}
</Text>
<Text dimColor>
{kind3}
{" "}
</Text>
<Text bold>
{percentUsed3}
%
</Text>
<Text dimColor>
{" "}
{resetsIn3}
</Text>
</Text>
</Text>
<Text>
<Text dimColor>
{" │ "}
</Text>
<Text dimColor>
{"메인 "}
</Text>
<Text bold>
{modelName}
</Text>
<Text dimColor>
{" "}
{effort}
</Text>
</Text>
</Text>
<Text>
<Text>
{" "}
컨텍스트
</Text>
<Text>
{fineBar2}
</Text>
<Text bold>
{" "}
{value}
%
</Text>
<Text dimColor>
{" "}
{`${fmt}/${fmt} ${label}`}
</Text>
</Text>
<Text>
<Text>
{" "}
{`${limitLabel} 한도`}
</Text>
<Text>
{fineBar3}
</Text>
<Text bold>
{" "}
{value2}
%
</Text>
<Text dimColor>
{" "}
{resetsIn4}
</Text>
</Text>
<Text>
<Text>
{" "}
{`${limitLabel} 한도`}
</Text>
<Text>
{fineBar4}
</Text>
<Text bold>
{" "}
{value3}
%
</Text>
<Text dimColor>
{" "}
{resetsIn5}
</Text>
</Text>
<Text>
<Text>
{" "}
{`${limitLabel} 한도`}
</Text>
<Text>
{fineBar5}
</Text>
<Text bold>
{" "}
{value4}
%
</Text>
<Text dimColor>
{" "}
{resetsIn6}
</Text>
</Text>
<Text>
<Text>
{" "}
캐시 적중
</Text>
<Text>
{fineBar6}
</Text>
<Text bold>
{" "}
{value5}
%
</Text>
<Text dimColor>
{" "}
{`↑${fmt} ↓${fmt}`}
</Text>
</Text>
<Text dimColor>
{" ─ 모델 "}
</Text>
<Text>
<Text>
{" "}
</Text>
<Text>
{"● "}
</Text>
<Text bold>
메인
</Text>
<Text />
<Text>
<Text>
{fineBar7}
</Text>
<Text bold>
{" "}
{pct2}
%
</Text>
</Text>
<Text dimColor>
{" ↓"}
{fmt}
</Text>
</Text>
<Text>
<Text>
{" "}
</Text>
<Text>
{icon}
{" "}
</Text>
<Text bold>
{`${mark} ${description}`}
</Text>
<Text>
{modelCell}
</Text>
<Text>
<Text>
{fineBar8}
</Text>
<Text bold>
{" "}
{cp}
%
</Text>
</Text>
<Text dimColor>
{" "}
↓
{fmt2}
</Text>
</Text>
<Text>
<Text>
{" "}
</Text>
<Text>
{icon2}
{" "}
</Text>
<Text bold>
{`${mark} ${description}`}
</Text>
<Text>
{modelCell2}
</Text>
<Text>
<Text>
{fineBar9}
</Text>
<Text bold>
{" "}
{cp2}
%
</Text>
</Text>
<Text dimColor>
{" "}
↓
{fmt3}
</Text>
</Text>
<Text>
<Text>
{" "}
</Text>
<Text>
{icon3}
{" "}
</Text>
<Text bold>
{`${mark} ${description}`}
</Text>
<Text>
{modelCell3}
</Text>
<Text>
<Text>
{fineBar10}
</Text>
<Text bold>
{" "}
{cp3}
%
</Text>
</Text>
<Text dimColor>
{" "}
↓
{fmt4}
</Text>
</Text>
<Text dimColor>
{" "}
{"테마 "}
default
{" · /token-usage theme · 접기: /token-usage"}
</Text>
{await next(e)}
</Box>
)
})
// the pane: open it with $.ui.open({ id: 'my-pane', title: "서브에이전트 목록" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Button, Text } = $.ui.resolve(e)
const mark = '…'
const description = '…'
const modelName = '…'
const effort = '…'
const status = '…'
const agentElapsed = '…'
const xp = '…'
const activity = '…'
const mark2 = '…'
const modelName2 = '…'
const effort2 = '…'
const status2 = '…'
const agentElapsed2 = '…'
const activity2 = '…'
const mark3 = '…'
const modelName3 = '…'
const effort3 = '…'
const status3 = '…'
const agentElapsed3 = '…'
const activity3 = '…'
return (
<Box flexDirection="column">
<Box flexWrap="wrap">
<Button plain label="[목록]" />
<Button plain label={`[${mark} ${description}]`} />
<Button plain label={`[${mark} ${description}]`} />
<Button plain label={`[${mark} ${description}]`} />
</Box>
<Text dimColor>
────────
</Text>
<Text dimColor>
아직 서브에이전트가 없습니다.
</Text>
<Box>
<Text bold>
{mark}
{" "}
</Text>
<Button plain label={`${description}`} />
<Text bold>
{" "}
{modelName}
</Text>
<Text dimColor>
{" "}
{effort}
</Text>
<Text>
{" "}
{status}
</Text>
<Text dimColor>
{" · ⏱ "}
{agentElapsed}
</Text>
<Text dimColor>
{" · ctx "}
{`${xp}%`}
</Text>
<Text dimColor>
{" · "}
{activity}
</Text>
</Box>
<Box>
<Text bold>
{mark2}
{" "}
</Text>
<Button plain label={`${description}`} />
<Text bold>
{" "}
{modelName2}
</Text>
<Text dimColor>
{" "}
{effort2}
</Text>
<Text>
{" "}
{status2}
</Text>
<Text dimColor>
{" · ⏱ "}
{agentElapsed2}
</Text>
<Text dimColor>
{" · ctx "}
{`${xp}%`}
</Text>
<Text dimColor>
{" · "}
{activity2}
</Text>
</Box>
<Box>
<Text bold>
{mark3}
{" "}
</Text>
<Button plain label={`${description}`} />
<Text bold>
{" "}
{modelName3}
</Text>
<Text dimColor>
{" "}
{effort3}
</Text>
<Text>
{" "}
{status3}
</Text>
<Text dimColor>
{" · ⏱ "}
{agentElapsed3}
</Text>
<Text dimColor>
{" · ctx "}
{`${xp}%`}
</Text>
<Text dimColor>
{" · "}
{activity3}
</Text>
</Box>
</Box>
)
})
on('session.start', async ($, e, next) => {
const mark = '…'
const description = '…'
const how = '…'
await $.ui.toast(`창을 열 자리가 없습니다. 터미널을 넓히고 다시 눌러 주세요.`)
await $.ui.toast(`${mark} ${description} ${how}: 결과는 열린 창에 남아 있습니다`)
return next(e)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
ファイル書き込み環境変数Claude を動かすツール呼び出し
コードから読み取ったデザイン
창을 열 자리가 없습니다. 터미널을 넓히고 다시 눌러 주세요.
● : 결과는 열린 창에 남아 있습니다
🧠 42% █████░░░ │ ⏳ · note 42% 2h 10m · note 42% 2h 10m · note 42% 2h 10m │ 메인 Opus 컨텍스트█████░░░ % / build build 한도█████░░░ % 2h 10m build 한도█████░░░ % 2h 10m build 한도█████░░░ % 2h 10m 캐시 적중█████░░░ % ↑ ↓ ─ 모델 ● 메인█████░░░ 42% ↓ ● ● Opus█████░░░ % ↓ ● ● Opus█████░░░ % ↓ ● ● Opus█████░░░ % ↓ 테마 default · /token-usage theme · 접기: /token-usage
Claude に頼む…
서브에이전트 목록
[목록][● ][● ][● ]
────────아직 서브에이전트가 없습니다.● Opus ok · ⏱ 2h 10m · ctx % ·
● Opus ok · ⏱ 2h 10m · ctx % ·
● Opus ok · ⏱ 2h 10m · ctx % ·
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 4d6f2adc46e4 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。token-usage/hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。2 ファイルを解析 |
| コードが Mod の中で完結 | import は Mod 自身のファイルかエンジンのモジュールだけ。パッケージも require もない。コードはすべて Mod の中 |
| 読める | 圧縮した行・eval・new Function・計算した道の import()・符号化した塊がない。圧縮・eval・符号化した塊なし |
| 呼び出しが見える | 通信とプログラム起動はその場で $.http.fetch・$.process.run と書き、他へ渡さない。外への呼び出しはすべてその場の $ で |
| 入れる前に自分で判断する材料 | |
| 描く場所 | コードから読んだ、描く先。ターミナル・デスクトップアプリ・両方・何も描かない（フックだけ: 見張りやプロンプトの書き換え）のどれか。出すだけで、外す理由にはしない。ターミナルとデスクトップアプリに同じように描く |
| 入れる手順 | リポジトリ自身の .claude-plugin/marketplace.json にこの Mod が載っていて、ページに書いた手順でそのマーケットプレイスから入れられるか。リポジトリの .claude-plugin/marketplace.json に載っており、そこから入れられる |
| Windows のプログラム | $.process で起動するプログラムが Windows にあるか（tail・date・open・osascript・/usr/… などは無い）。Windows にないプログラムを使わない |
| 通信 | fetch の送り先（https のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。プログラムを起動しない |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信しない |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリがそのままマーケットプレイスです。このマーケットプレイスを足し（ターミナルでは次のコマンド、デスクトップアプリではプラグインの設定）、そこから Mod を入れます。
/plugin marketplace add parkyountaek/claude-mods/plugin install token-usage@pyt-mods入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（4d6f2adc46e4）と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「parkyountaek-token-usage」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…2h 10m · █████░░░✓ build ✓ build ✓ buildJavaKotlin3 Python■ ok 3 ■ ok 3 ■ ok 3 Razor proven 3 Razor proven 3 Razor proven 3Phases ──────── 3/3build Pythonbuild Pythonbuild Python… 3 more phasesLua ──────── 3/Kotlin■ the whole upgrade Ruby■ build build Ruby■ build build Ruby■ build build Ruby … 3 moreNext ──────── PythonRuby (by hand)Podsclick a button, or ctrl+x tab then Tab, EnterAttention ──────── 3! Scala ! Scala ! Scala … 3 moreSession ──────── okJava
-
Open a file first: /crit-tui file <path>Reopen this one in the crit browser view.Claude に頼む…
-
Claude に頼む…TodayOct 63 left · Mar overdueRemCTL: Sep✓ All done for today.● build3● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● build3● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● build3● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓Updated 14:32UndoRefresh
-
Claude に頼む…TO graph› Fix login › Fix login › Fix loginScopeThis featureWhole projectHide done stepsReconnect
-
Claude に頼む…InboxUntitled captureFinishing Open in localvoxtralUntitled captureFinishing Open in localvoxtralUntitled captureFinishing Open in localvoxtral
-
Claude に頼む…InboxUntitled captureFinishing Open in localvoxtralUntitled captureFinishing Open in localvoxtralUntitled captureFinishing Open in localvoxtral