backlog-pane
A side pane with the project's git status and its Backlog.md tasks: start, finish and create tasks from the pane
確かめやすいコードターミナル＋デスクトップペインBoxButtonInputText
何をするか
- 欄を描く
- /backlog を足す
- session.startにフックする
- プロセスを起こす
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- ファイルを書かない
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like backlog-pane by LegendSilvia (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/legendsilvia-backlog-pane/
// 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: "Workspace" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button, Input } = $.ui.resolve(e)
const branch = '…'
const ahead = '…'
const behind = '…'
const code = '…'
const path = '…'
const code2 = '…'
const path2 = '…'
const code3 = '…'
const path3 = '…'
const length = '…'
const glyph = '…'
const label = '…'
const length2 = '…'
const out = '…'
const title = '…'
const filter = '…'
const out2 = '…'
const title2 = '…'
const filter2 = '…'
const out3 = '…'
const title3 = '…'
const filter3 = '…'
const length3 = '…'
const glyph2 = '…'
const label2 = '…'
const length4 = '…'
const out4 = '…'
const title4 = '…'
const filter4 = '…'
const out5 = '…'
const title5 = '…'
const filter5 = '…'
const out6 = '…'
const title6 = '…'
const filter6 = '…'
const length5 = '…'
const glyph3 = '…'
const label3 = '…'
const length6 = '…'
const out7 = '…'
const title7 = '…'
const filter7 = '…'
const out8 = '…'
const title8 = '…'
const filter8 = '…'
const out9 = '…'
const title9 = '…'
const filter9 = '…'
const length7 = '…'
const done = '…'
const clock = '…'
const note = '…'
return (
<Box flexDirection="column">
<Box flexDirection="column" borderStyle="round" borderColor="#69f0ae" paddingX={1} marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text bold color="#69f0ae">
{"⎇ "}
{branch}
</Text>
</Box>
<Box flexShrink={0}>
<Text dimColor>
↑
{ahead}
{" ↓"}
{behind}
</Text>
</Box>
</Box>
<Text dimColor>
✓ clean
</Text>
<Text wrap="truncate-start">
<Text bold color="#4dd0e1">
{code}
</Text>
{" "}
{path}
</Text>
<Text wrap="truncate-start">
<Text bold color="#4dd0e1">
{code2}
</Text>
{" "}
{path2}
</Text>
<Text wrap="truncate-start">
<Text bold color="#4dd0e1">
{code3}
</Text>
{" "}
{path3}
</Text>
<Text dimColor>
+
{length}
{" more"}
</Text>
</Box>
<Box flexDirection="column" borderStyle="round" paddingX={1} marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text bold>
{glyph}
{" "}
{label}
</Text>
</Box>
<Box flexShrink={0}>
<Text dimColor>
{length2}
</Text>
</Box>
</Box>
<Text dimColor>
nothing here
</Text>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out}
<Text bold>
{title}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter}
</Text>
</Box>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out2}
<Text bold>
{title2}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter2}
</Text>
</Box>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out3}
<Text bold>
{title3}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter3}
</Text>
</Box>
<Text dimColor>
+
{length3}
{" more"}
</Text>
</Box>
<Box flexDirection="column" borderStyle="round" paddingX={1} marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text bold>
{glyph2}
{" "}
{label2}
</Text>
</Box>
<Box flexShrink={0}>
<Text dimColor>
{length4}
</Text>
</Box>
</Box>
<Text dimColor>
nothing here
</Text>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out4}
<Text bold>
{title4}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter4}
</Text>
</Box>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out5}
<Text bold>
{title5}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter5}
</Text>
</Box>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out6}
<Text bold>
{title6}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter6}
</Text>
</Box>
<Text dimColor>
+
{length5}
{" more"}
</Text>
</Box>
<Box flexDirection="column" borderStyle="round" paddingX={1} marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text bold>
{glyph3}
{" "}
{label3}
</Text>
</Box>
<Box flexShrink={0}>
<Text dimColor>
{length6}
</Text>
</Box>
</Box>
<Text dimColor>
nothing here
</Text>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out7}
<Text bold>
{title7}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter7}
</Text>
</Box>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out8}
<Text bold>
{title8}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter8}
</Text>
</Box>
<Box flexDirection="column" marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1}>
<Text>
<Text>
{"▸ "}
</Text>
{out9}
<Text bold>
{title9}
</Text>
</Text>
</Box>
<Box flexShrink={0}>
<Button label="✓ done" />
</Box>
</Box>
<Text>
{" "}
<Text>
━
</Text>
<Text>
━
</Text>
<Text>
━
</Text>
<Text color="#3a3a42">
────────
</Text>
</Text>
<Text dimColor>
{" "}
{filter9}
</Text>
</Box>
<Text dimColor>
+
{length7}
{" more"}
</Text>
</Box>
<Box flexDirection="column" borderStyle="round" borderColor="#4dd0e1" paddingX={1} marginBottom={1}>
<Box flexDirection="row" justifyContent="space-between" gap={1}>
<Box flexShrink={1} />
<Box flexShrink={0} />
</Box>
<Input placeholder="new task title…" submitLabel="add" />
</Box>
<Text dimColor>
<Text color="#69f0ae">
{"✓ "}
{done}
{" done"}
</Text>
{" · backlog.md synced "}
{clock}
</Text>
<Text color="#ff6b8b">
{note}
</Text>
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動ファイル読み取り
コードから読み取ったデザイン
Claude に頼む…
Workspace✓ cleanSep src/app.tsSep src/app.tsSep src/app.ts+3 morenothing here ━━━──────── Apr ━━━──────── Apr ━━━──────── Apr+3 morenothing here ━━━──────── Apr ━━━──────── Apr ━━━──────── Apr+3 morenothing here ━━━──────── Apr ━━━──────── Apr ━━━──────── Apr+3 more✓ 3 done · backlog.md synced 14:32Jun
⎇ main
↑Jan ↓Jun
● build
3
▸ FebFix login
✓ done
▸ FebFix login
✓ done
▸ FebFix login
✓ done
● build
3
▸ FebFix login
✓ done
▸ FebFix login
✓ done
▸ FebFix login
✓ done
● build
3
▸ FebFix login
✓ done
▸ FebFix login
✓ done
▸ FebFix login
✓ done
new task title… add
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 7b8f9c42c21f のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/backlog-pane/hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。1 ファイルを解析 |
| コードが 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/backlog-pane/hooks/register.tsx:218 実行時に決まるプログラム; plugins/backlog-pane/hooks/register.tsx:300 実行時に決まるプログラム |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。読んだうえで通信する |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリがそのままマーケットプレイスです。このマーケットプレイスを足し（ターミナルでは次のコマンド、デスクトップアプリではプラグインの設定）、そこから Mod を入れます。
/plugin marketplace add LegendSilvia/claude-code-mods/plugin install backlog-pane@claude-code-mods入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（7b8f9c42c21f）と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「legendsilvia-backlog-pane」をコードごと読んで、同じようなペインを作って似たデザイン
-
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 に頼む…./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
-
Claude に頼む…Approved appsApproved appsComputer use can control these apps without asking.High riskAlways allowed (3)None. Allow one below.Not installed (3)This conversation (3)None.Allow an app App name, bundle id or path allowbuilda1b2c3dbuilda1b2c3dbuilda1b2c3d
-
Claude に頼む…PulseFix loginRefresh (r) rResume (p) pokRefresh rResume pAAPL, BTC/USDT AddAddNot fetchedYour watchlist is empty. Add a ticker above.●Pulse$1.24—Remove$1.24—PulseCached quote · 3●Pulse$1.24—Remove$1.24—PulseCached quote · 3●Pulse$1.24—Remove$1.24—PulseCached quote · 3Yahoo Finance · Binance Spot · Stocks: regular session, exchange delays vary · Crypto: 24h change · Times are local · pulseticker.appTab: move between controls · Enter: activate · Esc: return to prompt
-
Claude に頼む…great_cto: 3 gate waiting — /gatesGatesmy-app · 3 waiting · checked Gates UTCGates — Fix logina1b2c3dExpensive to undo. To approve, type Gates and press Enter.approve: Gates approveGates — Fix logina1b2c3dExpensive to undo. To approve, type Gates and press Enter.approve: Gates approveGates — Fix logina1b2c3dExpensive to undo. To approve, type Gates and press Enter.approve: Gates approve