streams
Untangles the interleaved work in a Claude Code session (prompts, mid-turn asides, subagents, loops) into colour-coded streams with a live navigator pane, a status bar of pills and per-stream focus.
何をするか
- プロンプトの上の帯・欄・ステータス行・トーストを描く
- /streams・/stream を足す
- ツールの呼び出しを見張る(止めることがある)
- agent.spawn・classic.UserPromptSubmit・prompt.submit・session.append ほか 3 個にフックする
- ターンをまたいで自分の状態を持つ
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形(register.tsx)
import type { Register } from 'claude-code'
// Drawn like streams by Macleod Labs (pane, band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/macleodlabs-ai-streams/
// 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 band above the prompt; what else goes there is drawn under it
on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
const { Box, Button, Text } = $.ui.resolve(e)
const i = '…'
const label = '…'
const label2 = '…'
const label3 = '…'
return (
<Box flexDirection="column">
<Box gap={1}>
<Button plain label="all" hotkey="0" />
<Box gap={0}>
<Button plain label={`${i}`} hotkey={`${i}`} />
<Text>
{" "}
↻
{" "}
{label}
{" "}
</Text>
</Box>
<Box gap={0}>
<Button plain label={`${i}`} hotkey={`${i}`} />
<Text>
{" "}
↻
{" "}
{label2}
{" "}
</Text>
</Box>
<Box gap={0}>
<Button plain label={`${i}`} hotkey={`${i}`} />
<Text>
{" "}
↻
{" "}
{label3}
{" "}
</Text>
</Box>
<Button plain label="≡" hotkey="s" />
<Text dimColor>
widen the terminal to see streams
</Text>
</Box>
{await next(e)}
</Box>
)
})
// the pane: open it with $.ui.open({ id: 'my-pane', title: "Streams" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button } = $.ui.resolve(e)
const label = '…'
const done = '…'
const total = '…'
const length = '…'
const focus = '…'
const HEALTH_GLYPH = '…'
const name = '…'
const FOLD_LABEL = '…'
const verdict = '…'
const loopBadge = '…'
const rows = '…'
const agents = '…'
const ago = '…'
const summary = '…'
const STATUS_GLYPH = '…'
const status = '…'
const clock = '…'
const label2 = '…'
const last = '…'
const label3 = '…'
const last2 = '…'
const label4 = '…'
const last3 = '…'
const GLYPH = '…'
const text = '…'
const GLYPH2 = '…'
const text2 = '…'
const GLYPH3 = '…'
const text3 = '…'
const HEALTH_GLYPH2 = '…'
const verdict2 = '…'
const loopBadge2 = '…'
const rows2 = '…'
const agents2 = '…'
const ago2 = '…'
const summary2 = '…'
const label5 = '…'
const last4 = '…'
const label6 = '…'
const last5 = '…'
const label7 = '…'
const last6 = '…'
const GLYPH4 = '…'
const text4 = '…'
const GLYPH5 = '…'
const text5 = '…'
const GLYPH6 = '…'
const text6 = '…'
const HEALTH_GLYPH3 = '…'
const verdict3 = '…'
const loopBadge3 = '…'
const rows3 = '…'
const agents3 = '…'
const ago3 = '…'
const summary3 = '…'
const label8 = '…'
const last7 = '…'
const label9 = '…'
const last8 = '…'
const label10 = '…'
const last9 = '…'
const GLYPH7 = '…'
const text7 = '…'
const GLYPH8 = '…'
const text8 = '…'
const GLYPH9 = '…'
const text9 = '…'
const HEALTH_GLYPH4 = '…'
const verdict4 = '…'
const loopBadge4 = '…'
const rows4 = '…'
const agents4 = '…'
const ago4 = '…'
const summary4 = '…'
const label11 = '…'
const last10 = '…'
const label12 = '…'
const last11 = '…'
const label13 = '…'
const last12 = '…'
const GLYPH10 = '…'
const text10 = '…'
const GLYPH11 = '…'
const text11 = '…'
const GLYPH12 = '…'
const text12 = '…'
const HEALTH_GLYPH5 = '…'
const verdict5 = '…'
const loopBadge5 = '…'
const rows5 = '…'
const agents5 = '…'
const ago5 = '…'
const summary5 = '…'
const label14 = '…'
const last13 = '…'
const label15 = '…'
const last14 = '…'
const label16 = '…'
const last15 = '…'
const GLYPH13 = '…'
const text13 = '…'
const GLYPH14 = '…'
const text14 = '…'
const GLYPH15 = '…'
const text15 = '…'
const HEALTH_GLYPH6 = '…'
const verdict6 = '…'
const loopBadge6 = '…'
const rows6 = '…'
const agents6 = '…'
const ago6 = '…'
const summary6 = '…'
const label17 = '…'
const last16 = '…'
const label18 = '…'
const last17 = '…'
const label19 = '…'
const last18 = '…'
const GLYPH16 = '…'
const text16 = '…'
const GLYPH17 = '…'
const text17 = '…'
const GLYPH18 = '…'
const text18 = '…'
return (
<Box flexDirection="column">
<Text color="#ffd33d" bold wrap="truncate">
{"⟳ filing history: "}
{label}
{` ${done}/${total}`}
</Text>
<Box gap={1}>
<Text dimColor>
{length}
{" streams · "}
{`focused on ${focus}`}
</Text>
<Button plain dimColor label="show all" />
</Box>
<Box gap={1}>
<Button plain dimColor label="collapse all" />
<Button plain dimColor label="expand all" />
</Box>
<Text dimColor>
Streams appear as you prompt. Tag one by hand with #name.
</Text>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text>
{" "}
</Text>
<Text>
{HEALTH_GLYPH}
</Text>
<Button plain label={`${name} ◉`} />
<Button plain dimColor label={`${FOLD_LABEL}`} />
<Button plain dimColor label="restore" />
</Box>
<Text wrap="truncate">
<Text dimColor>
{verdict}
</Text>
{" "}
{loopBadge}
<Text dimColor>
{" "}
{"· "}
{rows}
{" rows · "}
{agents}
{" agents · "}
{ago}
{" ago"}
</Text>
</Text>
<Box flexDirection="column">
<Text dimColor wrap="truncate">
{summary}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label2}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label3}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last2}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label4}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last3}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH}
{" "}
{text}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH2}
{" "}
{text2}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH3}
{" "}
{text3}
</Text>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text>
{" "}
</Text>
<Text>
{HEALTH_GLYPH2}
</Text>
<Button plain label={`${name} ◉`} />
<Button plain dimColor label={`${FOLD_LABEL}`} />
<Button plain dimColor label="restore" />
</Box>
<Text wrap="truncate">
<Text dimColor>
{verdict2}
</Text>
{" "}
{loopBadge2}
<Text dimColor>
{" "}
{"· "}
{rows2}
{" rows · "}
{agents2}
{" agents · "}
{ago2}
{" ago"}
</Text>
</Text>
<Box flexDirection="column">
<Text dimColor wrap="truncate">
{summary2}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label5}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last4}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label6}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last5}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label7}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last6}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH4}
{" "}
{text4}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH5}
{" "}
{text5}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH6}
{" "}
{text6}
</Text>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text>
{" "}
</Text>
<Text>
{HEALTH_GLYPH3}
</Text>
<Button plain label={`${name} ◉`} />
<Button plain dimColor label={`${FOLD_LABEL}`} />
<Button plain dimColor label="restore" />
</Box>
<Text wrap="truncate">
<Text dimColor>
{verdict3}
</Text>
{" "}
{loopBadge3}
<Text dimColor>
{" "}
{"· "}
{rows3}
{" rows · "}
{agents3}
{" agents · "}
{ago3}
{" ago"}
</Text>
</Text>
<Box flexDirection="column">
<Text dimColor wrap="truncate">
{summary3}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label8}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last7}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label9}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last8}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label10}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last9}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH7}
{" "}
{text7}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH8}
{" "}
{text8}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH9}
{" "}
{text9}
</Text>
</Box>
</Box>
<Box marginTop={1}>
<Button plain dimColor label={`▾ archived (${length})`} />
</Box>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text>
{" "}
</Text>
<Text>
{HEALTH_GLYPH4}
</Text>
<Button plain label={`${name} ◉`} />
<Button plain dimColor label={`${FOLD_LABEL}`} />
<Button plain dimColor label="restore" />
</Box>
<Text wrap="truncate">
<Text dimColor>
{verdict4}
</Text>
{" "}
{loopBadge4}
<Text dimColor>
{" "}
{"· "}
{rows4}
{" rows · "}
{agents4}
{" agents · "}
{ago4}
{" ago"}
</Text>
</Text>
<Box flexDirection="column">
<Text dimColor wrap="truncate">
{summary4}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label11}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last10}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label12}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last11}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label13}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last12}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH10}
{" "}
{text10}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH11}
{" "}
{text11}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH12}
{" "}
{text12}
</Text>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text>
{" "}
</Text>
<Text>
{HEALTH_GLYPH5}
</Text>
<Button plain label={`${name} ◉`} />
<Button plain dimColor label={`${FOLD_LABEL}`} />
<Button plain dimColor label="restore" />
</Box>
<Text wrap="truncate">
<Text dimColor>
{verdict5}
</Text>
{" "}
{loopBadge5}
<Text dimColor>
{" "}
{"· "}
{rows5}
{" rows · "}
{agents5}
{" agents · "}
{ago5}
{" ago"}
</Text>
</Text>
<Box flexDirection="column">
<Text dimColor wrap="truncate">
{summary5}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label14}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last13}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label15}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last14}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label16}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last15}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH13}
{" "}
{text13}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH14}
{" "}
{text14}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH15}
{" "}
{text15}
</Text>
</Box>
</Box>
<Box flexDirection="column" marginTop={1}>
<Box gap={1}>
<Text>
{" "}
</Text>
<Text>
{HEALTH_GLYPH6}
</Text>
<Button plain label={`${name} ◉`} />
<Button plain dimColor label={`${FOLD_LABEL}`} />
<Button plain dimColor label="restore" />
</Box>
<Text wrap="truncate">
<Text dimColor>
{verdict6}
</Text>
{" "}
{loopBadge6}
<Text dimColor>
{" "}
{"· "}
{rows6}
{" rows · "}
{agents6}
{" agents · "}
{ago6}
{" ago"}
</Text>
</Text>
<Box flexDirection="column">
<Text dimColor wrap="truncate">
{summary6}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label17}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last16}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label18}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last17}
</Text>
<Text wrap="truncate">
{" "}
<Text bold>
{`${STATUS_GLYPH} ${status} ${clock}`}
</Text>
<Text>
{" "}
{label19}
</Text>
</Text>
<Text color="#ffd33d" wrap="truncate">
{" ↳ "}
{last18}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH16}
{" "}
{text16}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH17}
{" "}
{text17}
</Text>
<Text wrap="truncate">
{" "}
{GLYPH18}
{" "}
{text18}
</Text>
</Box>
</Box>
</Box>
)
})
on('session.start', async ($, e, next) => {
const focus = '…'
const id = '…'
const ago = '…'
await $.ui.status(`◉ stream ${focus}`)
await $.ui.toast(`stream ${id} looks stalled: nothing for ${ago}`)
await $.ui.toast(`stream ${id} finished`)
return next(e)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動ファイル書き込みClaude を動かすツール呼び出し保存
コードから読み取ったデザイン
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例(点線の下線)にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット fe2eb37ffb76 のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/streams/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/… などは無い)。plugins/streams/hooks/register.tsx:426 cat(Windows にない) |
| 通信 | fetch の送り先(https のホスト)がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。cat |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信しない |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス(MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0)で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み(またはフォルダーで claude plugin validate .)、触るものを見て、読んだコミットを入れてください。
リポジトリがそのままマーケットプレイスです。このマーケットプレイスを足し(ターミナルでは次のコマンド、デスクトップアプリではプラグインの設定)、そこから Mod を入れます。
/plugin marketplace add macleodlabs-ai/claudeflow/plugin install streams@claudeflow入るのはマーケットプレイスの最新のコミットで、ここで読んだもの(fe2eb37ffb76)と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「macleodlabs-ai-streams」をコードごと読んで、同じようなペインを作って似たデザイン
-
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
-
Open a file first: /crit-tui file <path>Reopen this one in the crit browser view.Claude に頼む…
-
Claude に頼む…TodayOct 63 left · Mar overdueRemCTL: Sep✓ All done for today.● build3● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● build3● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● build3● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓● Fix login ● ⚑Jul · build✓Updated 14:32UndoRefresh
-
Claude に頼む…TO graph› Fix login › Fix login › Fix loginScopeThis featureWhole projectHide done stepsReconnect
-
Claude に頼む…InboxUntitled captureFinishing Open in localvoxtralUntitled captureFinishing Open in localvoxtralUntitled captureFinishing Open in localvoxtral
-
Claude に頼む…InboxUntitled captureFinishing Open in localvoxtralUntitled captureFinishing Open in localvoxtralUntitled captureFinishing Open in localvoxtral