modscode / 図鑑 / mission-control
mission-control
Live view of what Claude is executing: every tool call with its input, output and status, subagents in their own lanes, and a network-tab style timeline of durations. Observe-only.
確かめやすいコードターミナル＋デスクトップペインBoxButtonText
何をするか
- 欄を描く
- /mission を足す
- ツールの呼び出しを見張る（止めることがある）
- session.end・session.start・turn.complete・turn.startにフックする
良いところ
- ネットワークに出ない
- プロセスを起こさない
- TypeScript で書かれている
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like mission-control by harshitmywork17 (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/harshitmywork17-mission-control/
// 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: "Mission Control" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button } = $.ui.resolve(e)
const TURN_STATUS = '…'
const length = '…'
const length2 = '…'
const seconds = '…'
const prompt = '…'
const tools = '…'
const failed = '…'
const length3 = '…'
const seconds2 = '…'
const BADGE = '…'
const tool = '…'
const summary = '…'
const pad = '…'
const fill = '…'
const seconds3 = '…'
const type = '…'
const output = '…'
const BADGE2 = '…'
const tool2 = '…'
const summary2 = '…'
const pad2 = '…'
const fill2 = '…'
const seconds4 = '…'
const type2 = '…'
const output2 = '…'
const BADGE3 = '…'
const tool3 = '…'
const summary3 = '…'
const pad3 = '…'
const fill3 = '…'
const seconds5 = '…'
const type3 = '…'
const output3 = '…'
const BADGE4 = '…'
const tool4 = '…'
const summary4 = '…'
const pad4 = '…'
const fill4 = '…'
const seconds6 = '…'
const type4 = '…'
const output4 = '…'
const BADGE5 = '…'
const tool5 = '…'
const summary5 = '…'
const pad5 = '…'
const fill5 = '…'
const seconds7 = '…'
const type5 = '…'
const output5 = '…'
const BADGE6 = '…'
const tool6 = '…'
const summary6 = '…'
const pad6 = '…'
const fill6 = '…'
const seconds8 = '…'
const type6 = '…'
const output6 = '…'
const BADGE7 = '…'
const tool7 = '…'
const summary7 = '…'
const pad7 = '…'
const fill7 = '…'
const seconds9 = '…'
const type7 = '…'
const output7 = '…'
const BADGE8 = '…'
const tool8 = '…'
const summary8 = '…'
const pad8 = '…'
const fill8 = '…'
const seconds10 = '…'
const type8 = '…'
const output8 = '…'
const BADGE9 = '…'
const tool9 = '…'
const summary9 = '…'
const pad9 = '…'
const fill9 = '…'
const seconds11 = '…'
const type9 = '…'
const output9 = '…'
return (
<Box flexDirection="column">
<Box flexDirection="row" gap={1}>
<Text bold color="cyan">
{TURN_STATUS}
</Text>
<Text dimColor>
{"turn "}
{length}
/
{length2}
{" · "}
{seconds}
</Text>
</Box>
<Text wrap="truncate-end">
“
{prompt}
”
</Text>
<Text dimColor>
{tools}
{" tool call"}
{` · ${failed} failed`}
{" · "}
{length3}
{" subagent"}
{" · model "}
{seconds2}
</Text>
<Box flexDirection="column" marginTop={1}>
<Text bold color="white" wrap="truncate-end">
▌Main
</Text>
<Text dimColor>
{" no tool calls yet"}
</Text>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad}
</Text>
<Text>
{fill}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds3}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE2}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool2}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary2}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad2}
</Text>
<Text>
{fill2}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds4}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type2}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output2}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE3}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool3}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary3}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad3}
</Text>
<Text>
{fill3}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds5}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type3}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output3}
</Text>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Text bold color="white" wrap="truncate-end">
▌Main
</Text>
<Text dimColor>
{" no tool calls yet"}
</Text>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE4}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool4}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary4}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad4}
</Text>
<Text>
{fill4}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds6}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type4}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output4}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE5}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool5}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary5}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad5}
</Text>
<Text>
{fill5}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds7}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type5}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output5}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE6}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool6}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary6}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad6}
</Text>
<Text>
{fill6}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds8}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type6}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output6}
</Text>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Text bold color="white" wrap="truncate-end">
▌Main
</Text>
<Text dimColor>
{" no tool calls yet"}
</Text>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE7}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool7}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary7}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad7}
</Text>
<Text>
{fill7}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds9}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type7}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output7}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE8}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool8}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary8}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad8}
</Text>
<Text>
{fill8}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds10}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type8}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output8}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row">
<Box width={3} flexShrink={0}>
<Text>
{" "}
{BADGE9}
</Text>
</Box>
<Box width={12} flexShrink={0}>
<Text bold wrap="truncate-end">
{tool9}
</Text>
</Box>
<Box flexShrink={1}>
<Text dimColor wrap="truncate-end">
{summary9}
</Text>
</Box>
<Box flexShrink={0}>
<Text>
{pad9}
</Text>
<Text>
{fill9}
</Text>
</Box>
<Box width={8} flexShrink={0} justifyContent="flex-end">
<Text>
{seconds11}
</Text>
</Box>
</Box>
<Text color="magenta">
{" "}
{"⑂ subagent "}
{type9}
</Text>
<Text dimColor wrap="truncate-end">
{" ↳ "}
{output9}
</Text>
</Box>
</Box>
<Box flexDirection="row" gap={1} marginTop={1}>
<Button label="show outputs" hotkey="v" />
<Button label="older turn" hotkey="o" />
<Button label="newer turn" hotkey="w" />
</Box>
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
Claude を動かすツール呼び出し
コードから読み取ったデザイン
Claude に頼む…
Mission Control
okturn 3/3 · 2h 10m
“Write”3 tool call · 3 failed · 3 subagent · model 2h 10m▌Main no tool calls yet ⑂ subagent note ↳ Bash ⑂ subagent note ↳ Bash ⑂ subagent note ↳ Bash
●
Edit
Bash
Read42%
2h 10m
●
Edit
Bash
Read42%
2h 10m
●
Edit
Bash
Read42%
2h 10m
▌Main no tool calls yet ⑂ subagent note ↳ Bash ⑂ subagent note ↳ Bash ⑂ subagent note ↳ Bash
●
Edit
Bash
Read42%
2h 10m
●
Edit
Bash
Read42%
2h 10m
●
Edit
Bash
Read42%
2h 10m
▌Main no tool calls yet ⑂ subagent note ↳ Bash ⑂ subagent note ↳ Bash ⑂ subagent note ↳ Bash
●
Edit
Bash
Read42%
2h 10m
●
Edit
Bash
Read42%
2h 10m
●
Edit
Bash
Read42%
2h 10m
show outputs volder turn onewer turn w
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 34736612216c のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/mission-control/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 harshitmywork17/claude-mods/plugin install mission-control@harshit-mods入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（34736612216c）と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「harshitmywork17-mission-control」をコードごと読んで、同じようなペインを作って似たデザイン
-
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 個にフックする