modscode / 図鑑 / superpowers-tracker
superpowers-tracker
Live tracker for obra/superpowers: a stage rail above the prompt, a dashboard pane, resume detection, toasts and optional guards.
確かめやすいコードターミナル＋デスクトップペインバンドステータスライントーストBoxButtonSvgText
何をするか
- プロンプトの上の帯・欄・ステータス行・トーストを描く
- /sp を足す
- ツールの呼び出しを見張る（止めることがある）
- agent.spawn・config.set・prompt.submit・session.append ほか 6 個にフックする
- ターンをまたいで自分の状態を持つ
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- デスクトップ専用の分岐がある
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like superpowers-tracker by nalyk (pane, band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/nalyk-superpowers-tracker/
// 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, Svg, Text, Button } = $.ui.resolve(e)
const source = '…'
const alt = '…'
const label = '…'
const bar = '…'
const done = '…'
const total = '…'
const warnings = '…'
const text = '…'
return (
<Box flexDirection="column">
<Svg source={`${source}`} alt={`${alt}`} isInteractive />
<Box flexDirection="column">
<Text wrap="truncate-end">
<Text bold>
{"ϟ superpowers "}
</Text>
<Text>
{`● ${label} `}
</Text>
<Text>
{`● ${label} `}
</Text>
<Text>
{`● ${label} `}
</Text>
<Text>
{`▕${bar}${bar}${bar}▏ ${done}/${total}`}
</Text>
<Text>
{` ⚠ ${warnings}`}
</Text>
<Text inverse>
{" STRICT "}
</Text>
</Text>
<Box flexDirection="row" gap={1}>
<Text bold>
{`✗ ${text}`}
</Text>
<Button label="ack" />
</Box>
</Box>
{await next(e)}
</Box>
)
})
// the pane: open it with $.ui.open({ id: 'my-pane', title: "superpowers" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button } = $.ui.resolve(e)
const name = '…'
const split = '…'
const padEnd = '…'
const padEnd2 = '…'
const ratio = '…'
const padEnd3 = '…'
const padEnd4 = '…'
const padEnd5 = '…'
const padEnd6 = '…'
const split2 = '…'
const padEnd7 = '…'
const padEnd8 = '…'
const padEnd9 = '…'
const padEnd10 = '…'
const padEnd11 = '…'
const padEnd12 = '…'
const split3 = '…'
const padEnd13 = '…'
const padEnd14 = '…'
const padEnd15 = '…'
const padEnd16 = '…'
const padEnd17 = '…'
const padEnd18 = '…'
return (
<Box flexDirection="column" borderStyle="round" paddingX={2}>
<Text>
<Text bold>
{"ϟ "}
</Text>
<Text bold>
Arc tokens
</Text>
<Text>
{` showing ${name}`}
</Text>
</Text>
<Box flexDirection="column" marginTop={1}>
<Text>
{split}
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd}
</Text>
<Text>
{padEnd2}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd3}
</Text>
<Text>
{padEnd4}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd5}
</Text>
<Text>
{padEnd6}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
█
</Text>
<Text>
█
</Text>
<Text>
█
</Text>
<Text>
{" brand gradient (OKLCH)"}
</Text>
</Text>
</Box>
<Box flexDirection="column" marginTop={1}>
<Text>
{split2}
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd7}
</Text>
<Text>
{padEnd8}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd9}
</Text>
<Text>
{padEnd10}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd11}
</Text>
<Text>
{padEnd12}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
█
</Text>
<Text>
█
</Text>
<Text>
█
</Text>
<Text>
{" brand gradient (OKLCH)"}
</Text>
</Text>
</Box>
<Box flexDirection="column" marginTop={1}>
<Text>
{split3}
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd13}
</Text>
<Text>
{padEnd14}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd15}
</Text>
<Text>
{padEnd16}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
{"██ "}
</Text>
<Text>
{padEnd17}
</Text>
<Text>
{padEnd18}
</Text>
<Text>
{`${ratio}:1 ✓`}
</Text>
</Text>
<Text>
<Text>
█
</Text>
<Text>
█
</Text>
<Text>
█
</Text>
<Text>
{" brand gradient (OKLCH)"}
</Text>
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button label="dark" hotkey="d" plain />
<Button label="light" hotkey="l" plain />
<Button label="daltonized" hotkey="z" plain />
<Button label="ansi" hotkey="a" plain />
<Button label="auto" hotkey="u" plain dimColor />
</Box>
</Box>
)
})
on('session.start', async ($, e, next) => {
const stage = '…'
const done = '…'
const total = '…'
const warnings = '…'
const length = '…'
const map = '…'
const p = '…'
await $.ui.status(`ϟ ${stage} ${done}/${total} ⚠${warnings}`)
await $.ui.toast(`● ${length} updates · ${map}`)
await $.ui.toast(`● Exported · ${p}`)
return next(e)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
plugins/superpowers-tracker/hooks/register.tsx718〜753 行plugins/superpowers-tracker/hooks/ui/band/BandText.tsx11〜62 行plugins/superpowers-tracker/hooks/register.tsx784〜795 行plugins/superpowers-tracker/hooks/ui/themePreview.tsx25〜66 行
コードが呼ぶもの
プログラム起動ファイル書き込み環境変数Claude を動かすツール呼び出し保存
コードから読み取ったデザイン
● Exported · Edit
ϟ superpowers ● build ● build ● build ▕█████░░░█████░░░█████░░░▏ 3/3 ⚠ Write STRICT
✗ Send itack
Claude に頼む…
superpowers
ϟ Arc tokens showing build
Not now██ FinalFinal42%:1 ✓██ FinalFinal42%:1 ✓██ FinalFinal42%:1 ✓███ brand gradient (OKLCH)
Not now██ FinalFinal42%:1 ✓██ FinalFinal42%:1 ✓██ FinalFinal42%:1 ✓███ brand gradient (OKLCH)
Not now██ FinalFinal42%:1 ✓██ FinalFinal42%:1 ✓██ FinalFinal42%:1 ✓███ brand gradient (OKLCH)
d darkl lightz daltonizeda ansiu auto
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット eb1f0249b684 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/superpowers-tracker/hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。36 ファイルを解析 |
| コードが 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 のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。plugins/superpowers-tracker/hooks/register.tsx:86 実行時に決まるプログラム |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信しない |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリがそのままマーケットプレイスです。このマーケットプレイスを足し（ターミナルでは次のコマンド、デスクトップアプリではプラグインの設定）、そこから Mod を入れます。
/plugin marketplace add nalyk/nalyk-skills/plugin install superpowers-tracker@nalyk-skills入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（eb1f0249b684）と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「nalyk-superpowers-tracker」をコードごと読んで、同じようなペインを作って似たデザイン
-
spending-effort-with-jev: no TypeSafe API key, so effort tips are off. Set it in /plugin.⚠ effort: long run, fuzzy spec → have Claude interview you, then go maxClaude に頼む…
-
✦ explain as pick how Claude answers×3 ● build3 ● build3 ● build▸ VideoClaude に頼む…
-
何をするか
- ターミナルにプロンプトの上の帯・欄・ステータス行・トーストを描く
- /agentzero を足す
- Bash の呼び出しを見張る（止めることがある）
- command.register・env.get・fs.read・fs.stat ほか 13 個にフックする
-
Claude に頼む…Timer● MonAprNo timer runningStopResume last CollapseFri week./meter.tsxUnbilled Wed h$1.24 · expenses MarMayToday, Oct 6This week
-
Claude に頼む…Notes⚠ A team of Never uses your Claude usage much faster.Showing:buildbuildbuildHide completed:buildbuildbuildSet team size:DefaultDefaultDefaultSet model:NotesNotesNotesWorkflowYour next prompt can hand work to Never Notes helpers.● Fix login · Tool agents42% AllCopy failed2h 10m● Fix login · Tool agents42% AllCopy failed2h 10m● Fix login · Tool agents42% AllCopy failed2h 10m
-
Claude に頼む…Prompt cacheexpired · LowTTL Cache breaks · last hit 0 · ctx 42%extending…This conversationavg hit – · req English · breaks Compact · extended Compact · peak ctx 12.4kPer request · token cost■ read ×0.1■ write□ miss▬▬▬ hit rate▬ break┊ idle near expiry▲ extendedCache breaksnone● Low Extend● Low Extend● Low ExtendBreak sensitivityEnglishHigher counts smaller drops as breaks; applies from the next requestExtensionsnone2h 10m · English · 32h 10m · English · 32h 10m · English · 3SettingsWhen about to expireLowAuto-extend per idle stretch2h 10mToast notificationsDetailsCache TTLautoPrompt cacheBand above the promptOffBreak sensitivityEnglishHigher counts smaller drops as breaks; applies from the next requestLanguageen