cockpit
/cockpit: shell commands, skills, edited files, model, context and 5h / weekly limits
確かめやすいコードターミナル＋デスクトップペインBoxButtonClientCodeText
何をするか
- 欄を描く
- /cockpit を足す
- ツールの呼び出しを見張る（止めることがある）
- classic.PermissionRequest・prompt.submit・session.measure・session.start ほか 4 個にフックする
- プロセスを起こす
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- エラーを扱う
- ファイルを書かない
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like cockpit by Gu1llaum-3 (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/gu1llaum-3-cockpit/
// 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: "Cockpit" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button, Code, Client } = $.ui.resolve(e)
const modelName = '…'
const effortLabel = '…'
const usd = '…'
const folder = '…'
const branch = '…'
const added = '…'
const deleted = '…'
const fill = '…'
const empty = '…'
const percent = '…'
const tokens = '…'
const meta = '…'
const fill2 = '…'
const empty2 = '…'
const percent2 = '…'
const minutes = '…'
const fill3 = '…'
const empty3 = '…'
const percent3 = '…'
const minutes2 = '…'
const name = '…'
const fill4 = '…'
const rest = '…'
const count = '…'
const name2 = '…'
const fill5 = '…'
const rest2 = '…'
const count2 = '…'
const name3 = '…'
const fill6 = '…'
const rest3 = '…'
const count3 = '…'
const name4 = '…'
const fill7 = '…'
const rest4 = '…'
const count4 = '…'
const name5 = '…'
const fill8 = '…'
const rest5 = '…'
const count5 = '…'
const name6 = '…'
const fill9 = '…'
const rest6 = '…'
const count6 = '…'
const edits = '…'
const shortPath = '…'
const first = '…'
const clockTime = '…'
const source = '…'
const length = '…'
return (
<Box flexDirection="column">
<Box>
<Box flexDirection="column" marginTop={1} width={13}>
<Text color="#D97757">
{" ▐▛███▜▌"}
</Text>
<Text color="#D97757">
▝▜█████▛▘
</Text>
<Text color="#D97757">
{" ▘▘ ▝▝"}
</Text>
</Box>
<Box flexDirection="column" marginTop={1} marginLeft={1}>
<Text>
<Text color="#D97757">
✻
</Text>
{" "}
{modelName}
<Text>
<Text color="gray">
{" │ "}
</Text>
<Text>
{effortLabel}
</Text>
</Text>
<Text>
<Text color="gray">
{" │ "}
</Text>
<Text color="gray">
$
{usd}
</Text>
</Text>
</Text>
<Text>
<Text color="#D97757">
⎇
</Text>
{" "}
<Text color="cyan">
{folder}
</Text>
<Text>
{" "}
<Text color="green">
{branch}
</Text>
<Text>
{" "}
<Text color="gray">
(
</Text>
<Text color="green">
+
{added}
</Text>
{" "}
<Text color="red">
-
{deleted}
</Text>
<Text color="gray">
)
</Text>
</Text>
</Text>
</Text>
<Text>
{"ctx "}
<Text>
<Text>
{fill}
</Text>
<Text color="gray">
{empty}
</Text>
{" "}
{percent}
%
</Text>
{" "}
<Text color="gray">
0
/
{tokens}
</Text>
</Text>
</Box>
</Box>
<Box marginTop={1}>
<Text>
<Text color="#D97757">
◔
</Text>
{" "}
<Text bold>
LIMITS
</Text>
{" "}
<Text color="gray">
────────
{` ${meta}`}
</Text>
</Text>
</Box>
<Text>
{" "}
5h
{" "}
<Text>
<Text>
{fill2}
</Text>
<Text color="gray">
{empty2}
</Text>
{" "}
{percent2}
%
</Text>
<Text color="green">
{" ↻ respawn "}
{minutes}
min
</Text>
</Text>
<Text>
{" "}
7d
{" "}
<Text>
<Text>
{fill3}
</Text>
<Text color="gray">
{empty3}
</Text>
{" "}
{percent3}
%
</Text>
<Text color="green">
{" ↻ respawn "}
{minutes2}
min
</Text>
</Text>
<Box marginTop={1}>
<Text>
<Text color="#D97757">
❯
</Text>
{" "}
<Text bold>
SHELL COMMANDS
</Text>
{" "}
<Text color="gray">
────────
{` ${meta}`}
</Text>
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
<Text>
{name}
</Text>
{" "}
<Text color="#D97757">
{fill4}
</Text>
<Text color="gray">
{rest}
</Text>
{" "}
{count}
</Text>
<Text>
{" "}
<Text>
{name2}
</Text>
{" "}
<Text color="#D97757">
{fill5}
</Text>
<Text color="gray">
{rest2}
</Text>
{" "}
{count2}
</Text>
<Text>
{" "}
<Text>
{name3}
</Text>
{" "}
<Text color="#D97757">
{fill6}
</Text>
<Text color="gray">
{rest3}
</Text>
{" "}
{count3}
</Text>
</Box>
<Box marginTop={1}>
<Text>
<Text color="#D97757">
✦
</Text>
{" "}
<Text bold>
SKILLS
</Text>
{" "}
<Text color="gray">
────────
{` ${meta}`}
</Text>
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
<Text>
{name4}
</Text>
{" "}
<Text color="#D97757">
{fill7}
</Text>
<Text color="gray">
{rest4}
</Text>
{" "}
{count4}
</Text>
<Text>
{" "}
<Text>
{name5}
</Text>
{" "}
<Text color="#D97757">
{fill8}
</Text>
<Text color="gray">
{rest5}
</Text>
{" "}
{count5}
</Text>
<Text>
{" "}
<Text>
{name6}
</Text>
{" "}
<Text color="#D97757">
{fill9}
</Text>
<Text color="gray">
{rest6}
</Text>
{" "}
{count6}
</Text>
</Box>
<Box marginTop={1}>
<Text>
<Text color="#D97757">
✎
</Text>
{" "}
<Text bold>
EDITED FILES
</Text>
{" "}
<Text color="gray">
────────
{` ${meta}`}
</Text>
</Text>
</Box>
<Text color="gray">
{" No file edited yet."}
</Text>
<Text color="gray">
{" click a file to see its diffs"}
</Text>
<Box flexDirection="column">
<Box>
<Box flexShrink={0}>
<Text color="#D97757">
{" ▾ "}
{`×${edits}`}
</Text>
</Box>
<Button plain label={`${shortPath}`} />
</Box>
<Text color="gray">
{" no diff recorded"}
</Text>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
</Box>
<Box flexDirection="column">
<Box>
<Box flexShrink={0}>
<Text color="#D97757">
{" ▾ "}
{`×${edits}`}
</Text>
</Box>
<Button plain label={`${shortPath}`} />
</Box>
<Text color="gray">
{" no diff recorded"}
</Text>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
</Box>
<Box flexDirection="column">
<Box>
<Box flexShrink={0}>
<Text color="#D97757">
{" ▾ "}
{`×${edits}`}
</Text>
</Box>
<Button plain label={`${shortPath}`} />
</Box>
<Text color="gray">
{" no diff recorded"}
</Text>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
<Box flexDirection="column" marginLeft={4} marginBottom={1}>
<Text color="gray">
{`─ edit ${first}0/${edits} · ${clockTime} · truncated`}
</Text>
<Code source={`${source}`} format="diff" />
</Box>
</Box>
<Text color="gray">
{` … and ${length} more`}
</Text>
<Box flexDirection="column">
<Box marginTop={1}>
<Text color="#D97757">
{"◆ "}
</Text>
<Button plain label="▾ SNAKE" />
<Text color="gray">
{" ────────"}
</Text>
</Box>
<Box marginLeft={2} display="flex">
<Client module="./snake.tsx" width={38} height={13} />
</Box>
<Box marginTop={1}>
<Text color="#D97757">
{"▦ "}
</Text>
<Button plain label="▾ TETRIS" />
<Text color="gray">
{" ────────"}
</Text>
</Box>
<Box marginLeft={2} display="flex">
<Client module="./tetris.tsx" width={36} height={24} />
</Box>
</Box>
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動環境変数ツール呼び出し
コードから読み取ったデザイン
Claude に頼む…
Cockpit no diff recorded no diff recorded no diff recorded … and 3 more
▐▛███▜▌▝▜█████▛▘ ▘▘ ▝▝
✻ Opus │ build │ $$1.24⎇ src/ main (+3 -Edit)ctx 42%Skill 42% 0/12.4k
◔ LIMITS ──────── Bash
5h 42%Skill 42% ↻ respawn 4min 7d 42%Skill 42% ↻ respawn 4min❯ SHELL COMMANDS ──────── Bash
build 42%3 3 build 42%3 3 build 42%3 3
✦ SKILLS ──────── Bash
build 42%3 3 build 42%3 3 build 42%3 3
✎ EDITED FILES ──────── Bash
No file edited yet. click a file to see its diffs ▾ ×3
src/app.ts─ edit Write0/3 · 14:32 · truncated
Write─ edit Write0/3 · 14:32 · truncated
Write─ edit Write0/3 · 14:32 · truncated
Write ▾ ×3
src/app.ts─ edit Write0/3 · 14:32 · truncated
Write─ edit Write0/3 · 14:32 · truncated
Write─ edit Write0/3 · 14:32 · truncated
Write ▾ ×3
src/app.ts─ edit Write0/3 · 14:32 · truncated
Write─ edit Write0/3 · 14:32 · truncated
Write─ edit Write0/3 · 14:32 · truncated
Write◆ ▾ SNAKE ────────
./snake.tsx
▦ ▾ TETRIS ────────
./tetris.tsx
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 8bf7ff71b416 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。8 ファイルを解析 |
| コードが 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 のデザイン「gu1llaum-3-cockpit」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…Mod controlsLive Claude ModCount: 0 / Initial / oneAdd oneName InitialOne**Markdown** with a [link](https://example.com)
const count = 1;
./counter.tsxFill composerAppend noteSuggest draftCopy text -
Claude に頼む…Fichiers modifiésFichiers modifiésEdit+3−3Writebuildsrc/
DiffWritebuildsrc/DiffWritebuildsrc/Diff -
Claude に頼む…Files⋯
│●./file-name.tsx│●./file-name.tsx│●./file-name.tsxNew file Move to Recycle Bin?────────./menu-item.tsx./menu-item.tsx./menu-item.tsx────────./menu-item.tsx./menu-item.tsx./menu-item.tsx────────./menu-item.tsx./menu-item.tsx./menu-item.tsx -
Open a file first: /crit-tui file <path>Reopen this one in the crit browser view.Claude に頼む…
-
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