ledger
A per-session ledger of topics, decisions, open questions, to-dos and board state, kept by Claude through a tool and shown in a pane.
何をするか
- プロンプトの上の帯・欄を描く
- /ledger を足す
- Agent・SendMessage の呼び出しを見張る(止めることがある)
- prompt.submit・session.compact・session.start・turn.completeにフックする
- ターンをまたいで自分の状態を持つ
良いところ
- ネットワークに出ない
- プロセスを起こさない
- TypeScript で書かれている
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形(register.tsx)
import type { Register } from 'claude-code'
// Drawn like ledger by gabedeluna (pane, band), as modscode read it from the mod's code:
// https://modscode.com/gallery/gabedeluna-ledger/
// 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, Button } = $.ui.resolve(e)
const you = '…'
const claude = '…'
const gaps = '…'
return (
<Box flexDirection="column">
<Box flexDirection="row">
<Text color="#e0905f" bold>
{"▎ledger "}
</Text>
<Text color="#e0905f">
{`${you} for you`}
</Text>
<Text dimColor>
{" · "}
</Text>
<Text color="#8b929c">
{`${claude} on Claude`}
</Text>
<Text dimColor>
{" · "}
</Text>
<Text color="#e8c06a">
{`${gaps} board gaps`}
</Text>
<Text dimColor>
{" · updated this turn"}
</Text>
<Box flexGrow={1} />
<Button plain label="open ledger" hotkey="l" />
</Box>
{await next(e)}
</Box>
)
})
// the pane: open it with $.ui.open({ id: 'my-pane', title: "Ledger" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button } = $.ui.resolve(e)
const turns = '…'
const label = '…'
const i = '…'
const hold = '…'
const glyph = '…'
const split = '…'
const chip = '…'
const sub = '…'
const counts = '…'
const length = '…'
const split2 = '…'
const t = '…'
const t2 = '…'
const t3 = '…'
const split3 = '…'
const t4 = '…'
const t5 = '…'
const t6 = '…'
const split4 = '…'
const t7 = '…'
const t8 = '…'
const t9 = '…'
const split5 = '…'
const t10 = '…'
const t11 = '…'
const t12 = '…'
const split6 = '…'
const t13 = '…'
const t14 = '…'
const t15 = '…'
const split7 = '…'
const t16 = '…'
const t17 = '…'
const t18 = '…'
const split8 = '…'
const t19 = '…'
const t20 = '…'
const t21 = '…'
const split9 = '…'
const t22 = '…'
const t23 = '…'
const t24 = '…'
const split10 = '…'
const t25 = '…'
const t26 = '…'
const t27 = '…'
const split11 = '…'
const sub2 = '…'
const split12 = '…'
const t28 = '…'
const t29 = '…'
const t30 = '…'
const split13 = '…'
const t31 = '…'
const t32 = '…'
const t33 = '…'
const split14 = '…'
const t34 = '…'
const t35 = '…'
const t36 = '…'
const split15 = '…'
const t37 = '…'
const t38 = '…'
const t39 = '…'
const split16 = '…'
const t40 = '…'
const t41 = '…'
const t42 = '…'
return (
<Box flexDirection="column">
<Box flexDirection="row">
<Text color="#e0905f" bold>
{"LEDGER "}
</Text>
<Text bold wrap="truncate-end">
This session
</Text>
<Box flexGrow={1} />
<Text dimColor>
{`this conversation · ${turns} turn`}
</Text>
<Text>
{" "}
</Text>
</Box>
<Text dimColor>
────────
</Text>
<Box flexDirection="row" gap={1}>
<Button variant="primary" label={`${label}`} hotkey={`${i}`} />
<Button variant="primary" label={`${label}`} hotkey={`${i}`} />
<Button variant="primary" label={`${label}`} hotkey={`${i}`} />
</Box>
<Box flexDirection="row" marginTop={1}>
<Text backgroundColor="#c3a6ff" color="#14161a" bold>
{" HOLD "}
</Text>
<Text color="#8b929c">
{` ${hold}`}
</Text>
</Box>
<Box marginTop={1}>
<Text dimColor>
Nothing recorded yet. Topics, decisions and to-dos land here as they come up.
</Text>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row">
<Text dimColor>
{"▾ "}
</Text>
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text color="#14161a" bold>
{` ${chip} `}
</Text>
</Box>
<Box paddingLeft={4}>
<Text>
{split}
</Text>
</Box>
<Box flexDirection="row" paddingLeft={4}>
<Text color="#8b929c" wrap="wrap">
{sub}
</Text>
<Box flexGrow={1} />
<Text>
{` ${counts}`}
</Text>
</Box>
<Box flexDirection="column" marginLeft={3}>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row">
<Text dimColor>
{"▾ "}
</Text>
<Button plain dimColor label={`${label} ${length}`} />
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split2}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t2}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t3}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split3}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t4}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t5}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t6}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split4}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t7}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t8}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t9}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row">
<Text dimColor>
{"▾ "}
</Text>
<Button plain dimColor label={`${label} ${length}`} />
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split5}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t10}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t11}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t12}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split6}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t13}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t14}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t15}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split7}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t16}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t17}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t18}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row">
<Text dimColor>
{"▾ "}
</Text>
<Button plain dimColor label={`${label} ${length}`} />
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split8}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t19}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t20}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t21}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split9}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t22}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t23}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t24}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split10}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t25}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t26}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t27}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row">
<Text dimColor>
{"▾ "}
</Text>
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text color="#14161a" bold>
{` ${chip} `}
</Text>
</Box>
<Box paddingLeft={4}>
<Text>
{split11}
</Text>
</Box>
<Box flexDirection="row" paddingLeft={4}>
<Text color="#8b929c" wrap="wrap">
{sub2}
</Text>
<Box flexGrow={1} />
<Text>
{` ${counts}`}
</Text>
</Box>
<Box flexDirection="column" marginLeft={3}>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row">
<Text dimColor>
{"▾ "}
</Text>
<Button plain dimColor label={`${label} ${length}`} />
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split12}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t28}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t29}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t30}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split13}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t31}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t32}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t33}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split14}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t34}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t35}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t36}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row">
<Text dimColor>
{"▾ "}
</Text>
<Button plain dimColor label={`${label} ${length}`} />
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split15}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t37}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t38}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t39}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1}>
<Button variant="primary" label="Use recommended" />
<Button label="Different answer" />
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Text>
{`${glyph} `}
</Text>
<Button plain label={`${split}`} />
<Box flexGrow={1} />
<Text backgroundColor="#e0905f" color="#14161a" bold>
{" YOU "}
</Text>
</Box>
<Box paddingLeft={2}>
<Text>
{split16}
</Text>
</Box>
<Box flexDirection="column" paddingLeft={2} marginBottom={1}>
<Box>
<Text color="#8b929c">
{t40}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t41}
</Text>
</Box>
<Box>
<Text color="#8b929c">
{t42}
</Text>
</Box>
<Box flexDirection="row" gap={2} marginTop={1} />
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
ファイル読み取りClaude を動かすツール呼び出し保存
コードから読み取ったデザイン
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例(点線の下線)にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 504649c5a336 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/ledger/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 gabedeluna/claude-mods/plugin install ledger@claude-mods入るのはマーケットプレイスの最新のコミットで、ここで読んだもの(504649c5a336)と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「gabedeluna-ledger」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…Blast RadiusBlast Radius: npm testWould Cancel. Proceed Proceed ProceedProceed 1Cancel 2
-
Claude に頼む…Replay TheaterReplay Theater 31 31 31src/app.ts (step 01 of 3)● Write● Write● WritePrev pNext nClose q
-
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
-
何をするか
- プロンプトの上の帯を描く
- /seo-spend・/seo-doctor・/seo-cockpit を足す
- Agent の呼び出しを見張る(止めることがある)
- agent.spawn・classic.SessionStart・prompt.submit・session.compact ほか 3 個にフックする
-
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