turn-progress
Live status bar above the prompt for each turn: request, thinking, working, answer
確かめやすいコードターミナル＋デスクトップバンドBoxButtonSvgText
何をするか
- プロンプトの上の帯を描く
- /turnbar・/turnbar-clear を足す
- ツールの呼び出しを見張る（止めることがある）
- agent.spawn・session.start・turn.complete・turn.start ほか 1 個にフックする
良いところ
- ネットワークに出ない
- プロセスを起こさない
- TypeScript で書かれている
- デスクトップ専用の分岐がある
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like turn-progress by Dan (band), as modscode read it from the mod's code:
// https://modscode.com/gallery/dan-millie-front-turn-progress/
// 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, Text, Button } = $.ui.resolve(e)
const STATE_GLYPH = '…'
const pct = '…'
const pillName = '…'
const pillCount = '…'
const time = '…'
const indent = '…'
const fitCells = '…'
const clockText = '…'
const fitCells2 = '…'
const fitCells3 = '…'
const moreAgents = '…'
const STATE_GLYPH2 = '…'
const time2 = '…'
const fitCells4 = '…'
const fitCells5 = '…'
const fitCells6 = '…'
const STATE_GLYPH3 = '…'
const time3 = '…'
const fitCells7 = '…'
const fitCells8 = '…'
const fitCells9 = '…'
return (
<Box flexDirection="column" gap={1}>
<Box flexDirection="column">
<Box flexDirection="row" gap={1}>
<Text>
{STATE_GLYPH}
</Text>
<Text>
…
</Text>
<Text>
<Text>
▓▓▓▓▓▓▓▓
</Text>
<Text dimColor>
░░░░░░░░
</Text>
</Text>
<Text>
{`${pct}%`}
</Text>
<Text>
{`${pillName} ${pillCount}`}
</Text>
<Text dimColor>
{time}
</Text>
<Button plain dimColor label="✕" />
</Box>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells2}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells3}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text dimColor>
{` └ +${moreAgents}`}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row" gap={1}>
<Text>
{STATE_GLYPH2}
</Text>
<Text>
…
</Text>
<Text>
<Text>
▓▓▓▓▓▓▓▓
</Text>
<Text dimColor>
░░░░░░░░
</Text>
</Text>
<Text>
{`${pct}%`}
</Text>
<Text>
{`${pillName} ${pillCount}`}
</Text>
<Text dimColor>
{time2}
</Text>
<Button plain dimColor label="✕" />
</Box>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells4}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells5}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells6}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text dimColor>
{` └ +${moreAgents}`}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row" gap={1}>
<Text>
{STATE_GLYPH3}
</Text>
<Text>
…
</Text>
<Text>
<Text>
▓▓▓▓▓▓▓▓
</Text>
<Text dimColor>
░░░░░░░░
</Text>
</Text>
<Text>
{`${pct}%`}
</Text>
<Text>
{`${pillName} ${pillCount}`}
</Text>
<Text dimColor>
{time3}
</Text>
<Button plain dimColor label="✕" />
</Box>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells7}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells8}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text>
<Text dimColor>
{`${indent}└ `}
</Text>
<Text>
{fitCells9}
</Text>
<Text>
{` ${fitCells}`}
</Text>
<Text dimColor>
{` ${clockText}`}
</Text>
</Text>
<Text dimColor>
{` └ +${moreAgents}`}
</Text>
</Box>
{await next(e)}
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
Claude を動かすツール呼び出し
コードから読めること
2026-10-06 に読んだコミット 9f3a95df5d3e のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。1 ファイルを解析 |
| コードが 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 Dan-Millie-Front/turn-progress/plugin install turn-progress@millie-mods入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（9f3a95df5d3e）と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「dan-millie-front-turn-progress」をコードごと読んで、同じようなペインを作って似たデザイン
-
▴Token OptimizerCheckpointCheckpointCheckpointbuildStart freshbuildStart freshbuildStart freshbuildCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointbuildbuildbuildTokens savedSaved Clean up tokens in 30 days (chat 2 this session)Claude に頼む…
-
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
-
plan-progress is on. A bar appears when Claude starts a task with several steps.Claude に頼む…
-
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 個にフックする
-
Auto compact%System tools Compact▲Context is already at 42%, past Weekly%. Auto compact:NowAfter my next compactOnly in new chatsUsage limits show after the first reply.Auto compactToolsbuild42%Toolsbuild42%Toolsbuild42%Context12.4 free of 12.4k42% usedbuild12.4kbuild12.4kbuild12.4kClaude に頼む…claude-code-usage-quota: Compact