dash-pane
Session dashboard pane: workspace, git, agent, tasks, limits and cost
確かめやすいコードターミナル＋デスクトップペインBoxSvgText
何をするか
- 欄を描く
- /dash-pane を足す
- ツールの呼び出しを見張る
- classic.UserPromptSubmit・prompt.compose・prompt.submit・session.measure ほか 3 個にフックする
- プロセスを起こす
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- デスクトップ専用の分岐がある
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like dash-pane by nikbrunner (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/nikbrunner-dash-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: "Dash" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text } = $.ui.resolve(e)
const ICON = '…'
const repo = '…'
const cwd = '…'
const t = '…'
const duration = '…'
const model = '…'
const account = '…'
const effort = '…'
const mode = '…'
const style = '…'
const turns = '…'
const ICON2 = '…'
const b = '…'
const b2 = '…'
const done = '…'
const length = '…'
const subject = '…'
const subject2 = '…'
const subject3 = '…'
const ICON3 = '…'
const b3 = '…'
const b4 = '…'
const percent = '…'
const tokens = '…'
const window = '…'
const LIMIT_LABEL = '…'
const b5 = '…'
const b6 = '…'
const percent2 = '…'
const until = '…'
const LIMIT_LABEL2 = '…'
const b7 = '…'
const b8 = '…'
const percent3 = '…'
const until2 = '…'
const LIMIT_LABEL3 = '…'
const b9 = '…'
const b10 = '…'
const percent4 = '…'
const until3 = '…'
const hit = '…'
const misses = '…'
const added = '…'
const removed = '…'
const cost = '…'
const ICON4 = '…'
const branch = '…'
const upstream = '…'
const hash = '…'
const subject4 = '…'
const age = '…'
const status = '…'
const path = '…'
const added2 = '…'
const removed2 = '…'
const status2 = '…'
const path2 = '…'
const added3 = '…'
const removed3 = '…'
const status3 = '…'
const path3 = '…'
const added4 = '…'
const removed4 = '…'
const length2 = '…'
return (
<Box flexDirection="column">
<Box flexDirection="column" paddingX={1}>
<Text dimColor wrap="truncate-end">
╌╌╌╌╌╌╌╌
</Text>
<Box justifyContent="space-between">
<Box gap={1} alignItems="center">
<Text>
{ICON}
</Text>
<Text bold>
{repo}
</Text>
</Box>
<Text color="suggestion">
worktree
</Text>
</Box>
<Box flexDirection="column">
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
cwd
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text wrap="truncate-start">
<Text>
{cwd}
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
session
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text color="suggestion" italic>
{t}
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
age
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text>
{duration}
</Text>
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column" paddingX={1}>
<Text dimColor wrap="truncate-end">
╌╌╌╌╌╌╌╌
</Text>
<Box justifyContent="space-between">
<Box gap={1} alignItems="center">
#4eba65
<Text color="success" bold>
{model}
</Text>
</Box>
<Text color="error" bold>
⚠ WORK
</Text>
</Box>
<Box flexDirection="column">
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
account
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text color="suggestion">
{account}
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
effort
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text color="warning">
{effort}
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
mode
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text>
{mode}
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
style
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text>
{style}
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
turns
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text>
{turns}
</Text>
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column" paddingX={1}>
<Text dimColor wrap="truncate-end">
╌╌╌╌╌╌╌╌
</Text>
<Box justifyContent="space-between">
<Box gap={1} alignItems="center">
<Text>
{ICON2}
</Text>
<Text bold>
tasks
</Text>
</Box>
<Box>
<Text>
<Text>
{b}
</Text>
<Text color="rate_limit_empty">
{b2}
</Text>
</Text>
<Text bold>
{" "}
{done}
/
{length}
</Text>
</Box>
</Box>
<Box flexDirection="column">
<Text color="warning" wrap="truncate-end">
{"✓ "}
{subject}
</Text>
<Text color="warning" wrap="truncate-end">
{"✓ "}
{subject2}
</Text>
<Text color="warning" wrap="truncate-end">
{"✓ "}
{subject3}
</Text>
</Box>
</Box>
<Box flexDirection="column" paddingX={1}>
<Text dimColor wrap="truncate-end">
╌╌╌╌╌╌╌╌
</Text>
<Box justifyContent="space-between">
<Box gap={1} alignItems="center">
<Text>
{ICON3}
</Text>
<Text bold>
session
</Text>
</Box>
</Box>
<Box flexDirection="column">
<Box justifyContent="space-between">
<Box>
<Box width={9} flexShrink={0}>
<Text color="inactive">
context
</Text>
</Box>
<Text>
<Text>
{b3}
</Text>
<Text color="rate_limit_empty">
{b4}
</Text>
</Text>
<Text bold>
{" "}
{percent}
%
</Text>
</Box>
<Text dimColor>
{`${tokens}k/${window}M`}
</Text>
</Box>
<Box justifyContent="space-between">
<Box>
<Box width={9} flexShrink={0}>
<Text color="inactive">
{LIMIT_LABEL}
</Text>
</Box>
<Text>
<Text>
{b5}
</Text>
<Text color="rate_limit_empty">
{b6}
</Text>
</Text>
<Text bold>
{" "}
{percent2}
%
</Text>
</Box>
<Text dimColor>
{until}
</Text>
</Box>
<Box justifyContent="space-between">
<Box>
<Box width={9} flexShrink={0}>
<Text color="inactive">
{LIMIT_LABEL2}
</Text>
</Box>
<Text>
<Text>
{b7}
</Text>
<Text color="rate_limit_empty">
{b8}
</Text>
</Text>
<Text bold>
{" "}
{percent3}
%
</Text>
</Box>
<Text dimColor>
{until2}
</Text>
</Box>
<Box justifyContent="space-between">
<Box>
<Box width={9} flexShrink={0}>
<Text color="inactive">
{LIMIT_LABEL3}
</Text>
</Box>
<Text>
<Text>
{b9}
</Text>
<Text color="rate_limit_empty">
{b10}
</Text>
</Text>
<Text bold>
{" "}
{percent4}
%
</Text>
</Box>
<Text dimColor>
{until3}
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
cache
</Text>
</Box>
<Box marginRight={1} flexShrink={0}>
#ffc107
</Box>
<Text wrap="truncate-end">
<Text>
<Text>
{`${hit}% hit`}
</Text>
<Text dimColor>
{" "}
{"· "}
{`expires ${until}`}
</Text>
<Text color="error">
{" · "}
{misses}
{" miss"}
</Text>
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
edits
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text>
<Text color="success">
+
{added}
</Text>
<Text dimColor>
/
</Text>
<Text color="error">
-
{removed}
</Text>
<Text dimColor>
{" lines"}
</Text>
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
cost
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text color="warning">
$
{cost}
</Text>
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column" paddingX={1}>
<Text dimColor wrap="truncate-end">
╌╌╌╌╌╌╌╌
</Text>
<Box justifyContent="space-between">
<Box gap={1} alignItems="center">
<Text>
{ICON4}
</Text>
<Text bold>
{branch}
</Text>
</Box>
</Box>
<Box flexDirection="column">
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
upstream
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text>
<Text>
{upstream}
</Text>
<Text color="success">
{" ↑"}
0
</Text>
<Text color="error">
{" ↓"}
0
</Text>
<Text dimColor>
{" in sync"}
</Text>
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
last
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text>
<Text color="warning">
{hash}
</Text>
<Text>
{" "}
{subject4}
</Text>
<Text dimColor>
{" · "}
{age}
</Text>
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
stashes
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text color="suggestion">
0
</Text>
</Text>
</Box>
<Box alignItems="center">
<Box width={9} flexShrink={0}>
<Text color="inactive">
changes
</Text>
</Box>
<Box marginRight={1} flexShrink={0} />
<Text>
<Text>
<Text color="success">
+
0
{" added "}
</Text>
<Text color="warning">
~
0
{" modified "}
</Text>
<Text color="error">
-
0
{" deleted "}
</Text>
<Text color="suggestion">
?
0
{" untracked"}
</Text>
</Text>
</Text>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box justifyContent="space-between">
<Text wrap="truncate-start">
<Text color="warning">
●
{" "}
{status}
{" "}
</Text>
<Text>
{path}
</Text>
</Text>
<Text>
<Text color="success">
+
{added2}
</Text>
<Text color="error">
{" -"}
{removed2}
</Text>
</Text>
</Box>
<Box justifyContent="space-between">
<Text wrap="truncate-start">
<Text color="warning">
●
{" "}
{status2}
{" "}
</Text>
<Text>
{path2}
</Text>
</Text>
<Text>
<Text color="success">
+
{added3}
</Text>
<Text color="error">
{" -"}
{removed3}
</Text>
</Text>
</Box>
<Box justifyContent="space-between">
<Text wrap="truncate-start">
<Text color="warning">
●
{" "}
{status3}
{" "}
</Text>
<Text>
{path3}
</Text>
</Text>
<Text>
<Text color="success">
+
{added4}
</Text>
<Text color="error">
{" -"}
{removed4}
</Text>
</Text>
</Box>
<Text dimColor>
{"… "}
{length2}
{" more"}
</Text>
<Text dimColor>
● staged ○ unstaged
</Text>
</Box>
</Box>
</Box>
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動ファイル読み取りツール呼び出し
コードから読み取ったデザイン
Claude に頼む…
Dash
╌╌╌╌╌╌╌╌
●acme/app
worktreecwd
src/session
Writeage
2h 10m╌╌╌╌╌╌╌╌
#4eba65Opus
⚠ WORKaccount
Editeffort
Writemode
autostyle
Editturns
3╌╌╌╌╌╌╌╌
●tasks
BashBash 3/3
✓ Fix login✓ Fix login✓ Fix login
╌╌╌╌╌╌╌╌12.4k/chat 2M2h 10m2h 10m2h 10m
●session
context
BashBash 42%build
BashBash 42%build
BashBash 42%build
BashBash 42%cache
#ffc107
Dash% hit · expires 2h 10m · Bash missedits
+3/-3 linescost
$$1.24╌╌╌╌╌╌╌╌
●main
upstream
Dash ↑0 ↓0 in synclast
a1b2c3d Fix login · 2h 10mstashes
0changes
+0 added ~0 modified -0 deleted ?0 untracked● ok src/app.ts+3 -3
● ok src/app.ts+3 -3
● ok src/app.ts+3 -3
… 3 more● staged ○ unstaged読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 1f005cafc46a のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。common/.claude/mods/dash-pane/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 のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。common/.claude/mods/dash-pane/hooks/register.tsx:80 sh（シェル・インタプリタ）; common/.claude/mods/dash-pane/hooks/register.tsx:122 sh（シェル・インタプリタ）; common/.claude/mods/dash-pane/hooks/register.tsx:145 sh（シェル・インタプリタ） |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信しない |
| ソースの鍵 | ソースに 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 のデザイン「nikbrunner-dash-pane」をコードごと読んで、同じようなペインを作って似たデザイン
-
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 に頼む…AgentsFix loginExpand≈$1.24 · 12.4k tokens · 2h 10mNo subagents yet.Running · 3▸ Finished · 3Planned · 3▢ 3. Fix login ◷ Plan · · after Planned▢ 3. Fix login ◷ Plan · · after Planned▢ 3. Fix login ◷ Plan · · after Planned
-
Claude に頼む…Fix loginRemoveCopy markdownacme/app · mainCopy linkCopy markdownbuild2h 10mbuild2h 10mbuild2h 10mHosted on uploads.sh, not committed to the repo.They will appear in a comment on the pull request once opened.
-
何をするか
- プロンプトの上の帯・欄を描く
- /progress を足す
- ツールの呼び出しを見張る（止めることがある）
- classic.SessionStart・prompt.compose・prompt.submit・session.start ほか 2 個にフックする
-
Claude に頼む…Skins0 Your promptadd rate limiting to the hub api0 Tool rows: finished, running, failedYour prompt Spinner0 Folded group of reads and searches●main · note 3 · note 3 · note 30 Edit diff cardDesktop only; the terminal keeps Claude Code's diff.0 Shell output cardDesktop only.0 Code block cardDesktop only; the terminal keeps Claude Code's markdown.0 TableAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopyAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopyAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopy0 SpinnerAccent SpinnerSpinnerSpinner… 2h 10m0 Band above the prompt: normal, then nudging to compact█████░░░ 42% build█████░░░ 42% build█████░░░ 42% buildContext is 42% full0 Compact now0 Band above a questionTable BashBashBash0 Turn footer (terminal)3 build in 2h 10m · Grep · +3 −3
-
何をするか
- 欄・プロンプトの上の帯を描く
- /clawd を足す
- ツールの呼び出しを見張る（止めることがある）
- prompt.submit・session.compact・session.start・turn.complete ほか 2 個にフックする