status-bar
Two-row band above the prompt: model, folder, git, cost, timer, context and rate limits
確かめやすいコードターミナル＋デスクトップバンドトーストBoxText
何をするか
- プロンプトの上の帯を描く
- ツールの呼び出しを見張る
- classic.Notification・session.measure・session.start・turn.completeにフックする
- プロセスを起こす
良いところ
- ネットワークに出ない
- 小さい（276 行）
- TypeScript で書かれている
- ファイルを書かない
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like status-bar by Luis Guillermo Angarita Gutierrez (band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/lguillermoangaritag-status-bar/
// 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 } = $.ui.resolve(e)
const text = '…'
const text2 = '…'
const text3 = '…'
const text4 = '…'
const text5 = '…'
const text6 = '…'
const text7 = '…'
const text8 = '…'
const text9 = '…'
const text10 = '…'
const text11 = '…'
const text12 = '…'
const text13 = '…'
const text14 = '…'
const text15 = '…'
const text16 = '…'
const text17 = '…'
const text18 = '…'
const text19 = '…'
const text20 = '…'
const text21 = '…'
const text22 = '…'
const text23 = '…'
const text24 = '…'
const text25 = '…'
const text26 = '…'
const text27 = '…'
const text28 = '…'
const text29 = '…'
const text30 = '…'
const text31 = '…'
const text32 = '…'
const text33 = '…'
const text34 = '…'
const text35 = '…'
const text36 = '…'
const text37 = '…'
const text38 = '…'
const text39 = '…'
const text40 = '…'
const text41 = '…'
const text42 = '…'
const text43 = '…'
const text44 = '…'
const text45 = '…'
const text46 = '…'
const text47 = '…'
const text48 = '…'
const text49 = '…'
const text50 = '…'
const text51 = '…'
const text52 = '…'
const text53 = '…'
const text54 = '…'
const text55 = '…'
const text56 = '…'
const text57 = '…'
const text58 = '…'
const text59 = '…'
const text60 = '…'
const text61 = '…'
const text62 = '…'
const text63 = '…'
const text64 = '…'
const text65 = '…'
const text66 = '…'
const text67 = '…'
const text68 = '…'
const text69 = '…'
const text70 = '…'
const text71 = '…'
const text72 = '…'
const text73 = '…'
const text74 = '…'
const text75 = '…'
const text76 = '…'
const text77 = '…'
const text78 = '…'
const text79 = '…'
const text80 = '…'
const text81 = '…'
return (
<Box flexDirection="column">
<Box gap={2}>
<Box gap={1}>
<Box>
<Text>
{text}
</Text>
<Text>
{text2}
</Text>
<Text>
{text3}
</Text>
</Box>
<Box>
<Text>
{text4}
</Text>
<Text>
{text5}
</Text>
<Text>
{text6}
</Text>
</Box>
<Box>
<Text>
{text7}
</Text>
<Text>
{text8}
</Text>
<Text>
{text9}
</Text>
</Box>
</Box>
<Box gap={1}>
<Box>
<Text>
{text10}
</Text>
<Text>
{text11}
</Text>
<Text>
{text12}
</Text>
</Box>
<Box>
<Text>
{text13}
</Text>
<Text>
{text14}
</Text>
<Text>
{text15}
</Text>
</Box>
<Box>
<Text>
{text16}
</Text>
<Text>
{text17}
</Text>
<Text>
{text18}
</Text>
</Box>
</Box>
<Box gap={1}>
<Box>
<Text>
{text19}
</Text>
<Text>
{text20}
</Text>
<Text>
{text21}
</Text>
</Box>
<Box>
<Text>
{text22}
</Text>
<Text>
{text23}
</Text>
<Text>
{text24}
</Text>
</Box>
<Box>
<Text>
{text25}
</Text>
<Text>
{text26}
</Text>
<Text>
{text27}
</Text>
</Box>
</Box>
</Box>
<Box gap={2}>
<Box gap={1}>
<Box>
<Text>
{text28}
</Text>
<Text>
{text29}
</Text>
<Text>
{text30}
</Text>
</Box>
<Box>
<Text>
{text31}
</Text>
<Text>
{text32}
</Text>
<Text>
{text33}
</Text>
</Box>
<Box>
<Text>
{text34}
</Text>
<Text>
{text35}
</Text>
<Text>
{text36}
</Text>
</Box>
</Box>
<Box gap={1}>
<Box>
<Text>
{text37}
</Text>
<Text>
{text38}
</Text>
<Text>
{text39}
</Text>
</Box>
<Box>
<Text>
{text40}
</Text>
<Text>
{text41}
</Text>
<Text>
{text42}
</Text>
</Box>
<Box>
<Text>
{text43}
</Text>
<Text>
{text44}
</Text>
<Text>
{text45}
</Text>
</Box>
</Box>
<Box gap={1}>
<Box>
<Text>
{text46}
</Text>
<Text>
{text47}
</Text>
<Text>
{text48}
</Text>
</Box>
<Box>
<Text>
{text49}
</Text>
<Text>
{text50}
</Text>
<Text>
{text51}
</Text>
</Box>
<Box>
<Text>
{text52}
</Text>
<Text>
{text53}
</Text>
<Text>
{text54}
</Text>
</Box>
</Box>
</Box>
<Box gap={2}>
<Box gap={1}>
<Box>
<Text>
{text55}
</Text>
<Text>
{text56}
</Text>
<Text>
{text57}
</Text>
</Box>
<Box>
<Text>
{text58}
</Text>
<Text>
{text59}
</Text>
<Text>
{text60}
</Text>
</Box>
<Box>
<Text>
{text61}
</Text>
<Text>
{text62}
</Text>
<Text>
{text63}
</Text>
</Box>
</Box>
<Box gap={1}>
<Box>
<Text>
{text64}
</Text>
<Text>
{text65}
</Text>
<Text>
{text66}
</Text>
</Box>
<Box>
<Text>
{text67}
</Text>
<Text>
{text68}
</Text>
<Text>
{text69}
</Text>
</Box>
<Box>
<Text>
{text70}
</Text>
<Text>
{text71}
</Text>
<Text>
{text72}
</Text>
</Box>
</Box>
<Box gap={1}>
<Box>
<Text>
{text73}
</Text>
<Text>
{text74}
</Text>
<Text>
{text75}
</Text>
</Box>
<Box>
<Text>
{text76}
</Text>
<Text>
{text77}
</Text>
<Text>
{text78}
</Text>
</Box>
<Box>
<Text>
{text79}
</Text>
<Text>
{text80}
</Text>
<Text>
{text81}
</Text>
</Box>
</Box>
</Box>
{await next(e)}
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動環境変数ツール呼び出し
コードから読めること
2026-10-06 に読んだコミット e20033d0e95b のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。plugins/status-bar/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 のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。plugins/status-bar/hooks/register.tsx:123 osascript（シェル・インタプリタ） |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。reads environment variables and files and reaches the network |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリがそのままマーケットプレイスです。このマーケットプレイスを足し（ターミナルでは次のコマンド、デスクトップアプリではプラグインの設定）、そこから Mod を入れます。
/plugin marketplace add LGuillermoAngaritaG/claude-plugins/plugin install status-bar@guille-plugins入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（e20033d0e95b）と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「lguillermoangaritag-status-bar」をコードごと読んで、同じようなペインを作って似たデザイン
-
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
-
could not fill the prompt boxcould not fill:Claude に頼む…
-
▴Token OptimizerCheckpointCheckpointCheckpointbuildStart freshbuildStart freshbuildStart freshbuildCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointbuildbuildbuildTokens savedSaved Clean up tokens in 30 days (chat 2 this session)Claude に頼む…
-
reflect · "Skip" ×3Save to ./CLAUDE.mdGlobal insteadEditSkipreflect · "Skip" ×3Save to ./CLAUDE.mdGlobal insteadEditSkipreflect · "Skip" ×3reflect · +3 more · /reflect-queueSave to ./CLAUDE.mdGlobal insteadEditSkipClaude に頼む…
-
Claude に頼む…moai-status:
-
Open a file first: /crit-tui file <path>Reopen this one in the crit browser view.Claude に頼む…