gitgraph
在 Claude Code 面板顯示目前 repo 的 git 分支線圖，執行 git 指令後自動更新
確かめやすいコードターミナル＋デスクトップペインBoxButtonText
何をするか
- 欄を描く
- /branches を足す
- Bash の呼び出しを見張る
- session.startにフックする
- プロセスを起こす
良いところ
- ネットワークに出ない
- 小さい（259 行）
- TypeScript で書かれている
- ファイルを書かない
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like gitgraph by TCcodemaster (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/tccodemaster-gitgraph/
// 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: "Git 分支" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Button, Text } = $.ui.resolve(e)
const name = '…'
const branch = '…'
const tracking = '…'
const text = '…'
const text2 = '…'
const text3 = '…'
const subject = '…'
const files = '…'
const text4 = '…'
const text5 = '…'
const text6 = '…'
const author = '…'
const text7 = '…'
const text8 = '…'
const text9 = '…'
const subject2 = '…'
const text10 = '…'
const text11 = '…'
const text12 = '…'
const author2 = '…'
const text13 = '…'
const text14 = '…'
const text15 = '…'
const subject3 = '…'
const text16 = '…'
const text17 = '…'
const text18 = '…'
const author3 = '…'
return (
<Box flexDirection="column" backgroundColor="bashMessageBackgroundColor" paddingX={1} width="100%">
<Box flexDirection="row" flexWrap="wrap" columnGap={1}>
<Button label="全部" variant="primary" />
<Button label="收起" role="dismiss" />
<Button label={`✓ ${name}`} variant="primary" />
<Button label={`✓ ${name}`} variant="primary" />
<Button label={`✓ ${name}`} variant="primary" />
</Box>
<Text>
{" "}
</Text>
<Text wrap="truncate-end">
<Text color="warning">
{"◌ "}
</Text>
<Text bold color="text">
沒有變更
</Text>
</Text>
<Text wrap="truncate-end">
<Text color="subtle">
{"│ 目前分支 "}
</Text>
<Text bold color="success">
{branch}
</Text>
<Text color="subtle">
{` ${tracking}`}
</Text>
</Text>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row" justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text color="text">
{text}
</Text>
<Text color="text">
{text2}
</Text>
<Text color="text">
{text3}
</Text>
<Text bold color="text">
{subject}
</Text>
</Text>
</Box>
<Text backgroundColor="subtle" color="inverseText">
{` ${files} `}
</Text>
</Box>
<Box flexDirection="row" justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text color="text">
{text4}
</Text>
<Text color="text">
{text5}
</Text>
<Text color="text">
{text6}
</Text>
<Text color="subtle" italic>
{author}
</Text>
</Text>
</Box>
<Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
</Text>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row" justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text color="text">
{text7}
</Text>
<Text color="text">
{text8}
</Text>
<Text color="text">
{text9}
</Text>
<Text bold color="text">
{subject2}
</Text>
</Text>
</Box>
<Text backgroundColor="subtle" color="inverseText">
{` ${files} `}
</Text>
</Box>
<Box flexDirection="row" justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text color="text">
{text10}
</Text>
<Text color="text">
{text11}
</Text>
<Text color="text">
{text12}
</Text>
<Text color="subtle" italic>
{author2}
</Text>
</Text>
</Box>
<Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
</Text>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box flexDirection="row" justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text color="text">
{text13}
</Text>
<Text color="text">
{text14}
</Text>
<Text color="text">
{text15}
</Text>
<Text bold color="text">
{subject3}
</Text>
</Text>
</Box>
<Text backgroundColor="subtle" color="inverseText">
{` ${files} `}
</Text>
</Box>
<Box flexDirection="row" justifyContent="space-between">
<Box flexShrink={1}>
<Text wrap="truncate-end">
<Text color="text">
{text16}
</Text>
<Text color="text">
{text17}
</Text>
<Text color="text">
{text18}
</Text>
<Text color="subtle" italic>
{author3}
</Text>
</Text>
</Box>
<Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
<Text>
<Text color="inverseText" bold>
{` ${text} `}
</Text>
{" "}
</Text>
</Text>
</Box>
</Box>
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動ツール呼び出し
コードから読めること
2026-10-06 に読んだコミット 4fe05246827f のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。gitgraph/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 のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。git（通信する） |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信するが、ファイルも環境変数も読まない |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリの .claude-plugin/marketplace.json にこの Mod が載っていないため、入れる手順は出せません。コードとして読むか、作者の README に従ってください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「tccodemaster-gitgraph」をコードごと読んで、同じようなペインを作って似たデザイン
-
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
-
何をするか
- 欄を描く
- session.end・session.start・ui.closeにフックする
- プロセスを起こす
-
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
-
何をするか
- プロンプトの上の帯を描く
- /seo-spend・/seo-doctor・/seo-cockpit を足す
- Agent の呼び出しを見張る（止めることがある）
- agent.spawn・classic.SessionStart・prompt.submit・session.compact ほか 3 個にフックする