usage-dash
Quota, Claude sessions and background jobs pane
確かめやすいコードターミナル＋デスクトップペイントーストBoxButtonText
何をするか
- 欄を描く
- Bash の呼び出しを見張る
- classic.Elicitation・classic.ElicitationResult・classic.Notification・classic.PermissionDenied ほか 7 個にフックする
- プロセスを起こす
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like usage-dash by aqua5230 (pane, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/aqua5230-usage-dash/
// 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 pane: open it with $.ui.open({ id: 'my-pane', title: "‹t›" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button } = $.ui.resolve(e)
const name = '…'
const label = '…'
const filled = '…'
const empty = '…'
const percent = '…'
const countdown = '…'
const age = '…'
const label2 = '…'
const filled2 = '…'
const empty2 = '…'
const percent2 = '…'
const countdown2 = '…'
const age2 = '…'
const label3 = '…'
const filled3 = '…'
const empty3 = '…'
const percent3 = '…'
const countdown3 = '…'
const age3 = '…'
const label4 = '…'
const filled4 = '…'
const empty4 = '…'
const percent4 = '…'
const countdown4 = '…'
const age4 = '…'
const label5 = '…'
const filled5 = '…'
const empty5 = '…'
const percent5 = '…'
const countdown5 = '…'
const age5 = '…'
const label6 = '…'
const filled6 = '…'
const empty6 = '…'
const percent6 = '…'
const countdown6 = '…'
const age6 = '…'
const label7 = '…'
const filled7 = '…'
const empty7 = '…'
const percent7 = '…'
const countdown7 = '…'
const age7 = '…'
const label8 = '…'
const filled8 = '…'
const empty8 = '…'
const percent8 = '…'
const countdown8 = '…'
const age8 = '…'
const label9 = '…'
const filled9 = '…'
const empty9 = '…'
const percent9 = '…'
const countdown9 = '…'
const age9 = '…'
const qe = '…'
const t = '…'
const text = '…'
const source = '…'
const contextPercent = '…'
const waitingText = '…'
const preview = '…'
const text2 = '…'
const waitingText2 = '…'
const text3 = '…'
const waitingText3 = '…'
const se = '…'
const prefix = '…'
const elapsed = '…'
const agent = '…'
const completedAgo = '…'
const agent2 = '…'
const completedAgo2 = '…'
const agent3 = '…'
const completedAgo3 = '…'
const type = '…'
const description = '…'
const type2 = '…'
const type3 = '…'
const jobs = '…'
const refreshedAgo = '…'
return (
<Box flexDirection="column">
<Box flexDirection="column">
<Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
<Box flexDirection="column">
<Box flexDirection="column">
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label}
</Text>
<Text>
{filled}
</Text>
<Text dimColor>
{empty}
</Text>
{" "}
<Text>
{percent}
</Text>
<Text dimColor>
{countdown}
</Text>
<Text color="yellow">
{age}
</Text>
</Text>
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label2}
</Text>
<Text>
{filled2}
</Text>
<Text dimColor>
{empty2}
</Text>
{" "}
<Text>
{percent2}
</Text>
<Text dimColor>
{countdown2}
</Text>
<Text color="yellow">
{age2}
</Text>
</Text>
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label3}
</Text>
<Text>
{filled3}
</Text>
<Text dimColor>
{empty3}
</Text>
{" "}
<Text>
{percent3}
</Text>
<Text dimColor>
{countdown3}
</Text>
<Text color="yellow">
{age3}
</Text>
</Text>
</Box>
<Box flexDirection="column">
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label4}
</Text>
<Text>
{filled4}
</Text>
<Text dimColor>
{empty4}
</Text>
{" "}
<Text>
{percent4}
</Text>
<Text dimColor>
{countdown4}
</Text>
<Text color="yellow">
{age4}
</Text>
</Text>
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label5}
</Text>
<Text>
{filled5}
</Text>
<Text dimColor>
{empty5}
</Text>
{" "}
<Text>
{percent5}
</Text>
<Text dimColor>
{countdown5}
</Text>
<Text color="yellow">
{age5}
</Text>
</Text>
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label6}
</Text>
<Text>
{filled6}
</Text>
<Text dimColor>
{empty6}
</Text>
{" "}
<Text>
{percent6}
</Text>
<Text dimColor>
{countdown6}
</Text>
<Text color="yellow">
{age6}
</Text>
</Text>
</Box>
<Box flexDirection="column">
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label7}
</Text>
<Text>
{filled7}
</Text>
<Text dimColor>
{empty7}
</Text>
{" "}
<Text>
{percent7}
</Text>
<Text dimColor>
{countdown7}
</Text>
<Text color="yellow">
{age7}
</Text>
</Text>
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label8}
</Text>
<Text>
{filled8}
</Text>
<Text dimColor>
{empty8}
</Text>
{" "}
<Text>
{percent8}
</Text>
<Text dimColor>
{countdown8}
</Text>
<Text color="yellow">
{age8}
</Text>
</Text>
<Text>
<Text color="#d97757">
{`${name}`}
</Text>
<Text dimColor>
{label9}
</Text>
<Text>
{filled9}
</Text>
<Text dimColor>
{empty9}
</Text>
{" "}
<Text>
{percent9}
</Text>
<Text dimColor>
{countdown9}
</Text>
<Text color="yellow">
{age9}
</Text>
</Text>
</Box>
<Text dimColor>
none
</Text>
<Text color="red">
{qe}
</Text>
</Box>
</Box>
<Box position="absolute" top={0} left={2} right={2} justifyContent="space-between">
<Button plain label={`[ ▸ ${t} ]`} />
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="column" borderStyle="round" borderColor="blue" paddingX={1}>
<Box flexDirection="column">
<Box flexDirection="column">
<Box justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text>
{text}
</Text>
<Text dimColor>
{` ${source} `}
</Text>
<Text color="cyan">
here
</Text>
untitled
</Text>
</Box>
<Box flexShrink={0} marginLeft={1}>
<Text>
{`${contextPercent}%`}
</Text>
</Box>
</Box>
<Box justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
{" "}
<Text color="yellow">
{waitingText}
</Text>
<Text dimColor>
{` · ${preview}`}
</Text>
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text>
{text2}
</Text>
<Text dimColor>
{` ${source} `}
</Text>
<Text color="cyan">
here
</Text>
untitled
</Text>
</Box>
<Box flexShrink={0} marginLeft={1}>
<Text>
{`${contextPercent}%`}
</Text>
</Box>
</Box>
<Box justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
{" "}
<Text color="yellow">
{waitingText2}
</Text>
<Text dimColor>
{` · ${preview}`}
</Text>
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text>
{text3}
</Text>
<Text dimColor>
{` ${source} `}
</Text>
<Text color="cyan">
here
</Text>
untitled
</Text>
</Box>
<Box flexShrink={0} marginLeft={1}>
<Text>
{`${contextPercent}%`}
</Text>
</Box>
</Box>
<Box justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
{" "}
<Text color="yellow">
{waitingText3}
</Text>
<Text dimColor>
{` · ${preview}`}
</Text>
</Text>
</Box>
</Box>
</Box>
<Text dimColor>
none
</Text>
<Button plain label={`[ − ${t} ]`} />
<Text color="red">
{se}
</Text>
</Box>
</Box>
<Box position="absolute" top={0} left={2} right={2} justifyContent="space-between">
<Button plain label={`[ ▸ ${t} ]`} />
<Text>
{" "}
<Text dimColor>
busy_count
</Text>
{" "}
</Text>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
<Box flexDirection="column">
<Text wrap="truncate-end">
<Text color="green">
{`${prefix}${elapsed}`}
</Text>
{" "}
<Text color="cyan">
{agent}
</Text>
{` ${label}`}
<Text dimColor>
{completedAgo}
</Text>
</Text>
<Text wrap="truncate-end">
<Text color="green">
{`${prefix}${elapsed}`}
</Text>
{" "}
<Text color="cyan">
{agent2}
</Text>
{` ${label}`}
<Text dimColor>
{completedAgo2}
</Text>
</Text>
<Text wrap="truncate-end">
<Text color="green">
{`${prefix}${elapsed}`}
</Text>
{" "}
<Text color="cyan">
{agent3}
</Text>
{` ${label}`}
<Text dimColor>
{completedAgo3}
</Text>
</Text>
<Text wrap="truncate-end">
<Text color="green">
waiting
</Text>
{" "}
<Text color="cyan">
{type}
</Text>
{` ${description}`}
</Text>
<Text wrap="truncate-end">
<Text color="green">
waiting
</Text>
{" "}
<Text color="cyan">
{type2}
</Text>
{` ${description}`}
</Text>
<Text wrap="truncate-end">
<Text color="green">
waiting
</Text>
{" "}
<Text color="cyan">
{type3}
</Text>
{` ${description}`}
</Text>
<Button plain label={`[ − ${t} ]`} />
<Text dimColor>
none
</Text>
</Box>
</Box>
<Box position="absolute" top={0} left={2} right={2} justifyContent="space-between">
<Button plain label={`[ ▸ ${t} ]`} />
<Text>
{" "}
<Text color="yellow">
{jobs}
</Text>
{" "}
</Text>
</Box>
</Box>
<Box justifyContent="flex-end">
<Text dimColor>
{refreshedAgo}
</Text>
</Box>
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動ファイル書き込み環境変数Claude を動かすツール呼び出し
コードから読み取ったデザイン
Claude に頼む…
Claude sessionsnone[ − Claude sessions ]Week
buildbuildWeekCodex 42%2h 10m2h 10mbuildbuildWeekCodex 42%2h 10m2h 10mbuildbuildWeekCodex 42%2h 10m2h 10m
buildbuildWeekCodex 42%2h 10m2h 10mbuildbuildWeekCodex 42%2h 10m2h 10mbuildbuildWeekCodex 42%2h 10m2h 10m
buildbuildWeekCodex 42%2h 10m2h 10mbuildbuildWeekCodex 42%2h 10m2h 10mbuildbuildWeekCodex 42%2h 10m2h 10m
noneBash[ ▸ Claude sessions ]
Busy Gemini hereuntitled
42%
Background jobs · Claude
Busy Gemini hereuntitled
42%
Background jobs · Claude
Busy Gemini hereuntitled
42%
Background jobs · Claude
[ ▸ Claude sessions ] busy_count
Week2h 10m reviewer build2h 10mWeek2h 10m reviewer build2h 10mWeek2h 10m reviewer build2h 10mwaiting note Bashwaiting note Bashwaiting note Bash[ − Claude sessions ]none
[ ▸ Claude sessions ] Background jobs
2h 10m
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 5e3d0d874899 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。claude_pane/usage-dash/hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。7 ファイルを解析 |
| コードが 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/… などは無い）。claude_pane/usage-dash/hooks/register.tsx:103 rm（Windows にない）; claude_pane/usage-dash/hooks/register.tsx:130 ps（Windows にない）; claude_pane/usage-dash/hooks/register.tsx:154 /bin/sh（Windows にない）; claude_pane/usage-dash/hooks/register.tsx:157 tail（Windows にない） |
| 通信 | fetch の送り先（https のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。claude_pane/usage-dash/hooks/register.tsx:52 実行時に決まるプログラム; claude_pane/usage-dash/hooks/register.tsx:102 cmd（シェル・インタプリタ）; claude_pane/usage-dash/hooks/register.tsx:154 /bin/sh（シェル・インタプリタ） |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信しない |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。AGPL-3.0（オープンなライセンスではない） |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリの .claude-plugin/marketplace.json にこの Mod が載っていないため、入れる手順は出せません。コードとして読むか、作者の README に従ってください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「aqua5230-usage-dash」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…Fix login▸★ build ok▸★ build ok▸★ build ok+3 moretasks 3 pending · Glob claimed · 3 doneConsensus42%
-
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
-
Claude に頼む…moai-boardmoai-boardPickedx closebuild 1build 2build 3r refreshQueue not read yetokPick
-
Open a file first: /crit-tui file <path>Reopen this one in the crit browser view.Claude に頼む…
-
Claude に頼む…./rows.tsx●●●●●×./rows.tsxnothing loaded yet● Fix login● Fix login● Fix login● Fix login● Fix login● Fix login● Fix login● Fix login● Fix login./rows.tsxWorkspaceWorkspaceWorkspaceselected: build● open in Databricks
-
Claude に頼む…build 3 app●●●◉●●okno Library app here yet; Library adds one●./rows.tsx./rows.tsxselected: Nerd