anthonybaldwin/cc-plugins/tree/main/plugins/context-bar
context-bar
[mod](https://code.claude.com/docs/en/plugins/mods/overview) です。プロンプトの上にある帯状の領域に、コンテキストウィンドウを積み上げバーとして描画します。`/context` と同じ分類ごとに色を分け、下には凡例を表示します。
この mod について
mod です。プロンプトの上にある帯状の領域に、コンテキストウィンドウを積み上げバーとして描画します。/context と同じ分類ごとに色を分け、下には凡例を表示します。
████████▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
40% System prompt 3% System tools 7% Messages 30% Autocompact buffer 10% Free space 50%
(各区間は、その分類のテーマカラーで描画されます。色は /context と同じです。塗りつぶしの █ は使用中、▒ はコンパクション用バッファ、░ は空き領域を表します。)
リアルタイムで動作します。Claude Code は各ターンの後に測定値をプッシュし、バーはその値から再描画されます。ポーリングもタイマーも token 数のリクエストも必要ありません(内訳はローカルの summary 推定値で、/context が最初に使うものです)。
インストール
/plugin marketplace add anthonybaldwin/cc-plugins
/plugin install context-bar@cc-plugins
Claude Code v2.1.287+(mods)が必要です。ターミナルと Desktop アプリの Code タブに描画されます。VS Code のチャットパネルと claude -p ではフックは動作しますが、何も描画されません。
使い方
| | |
|---|---|
| /context-bar | バーを切り替えます。選択はセッション間で記憶され、ターンの途中でも動作します。 |
| ctrl+x ctrl+a | プロンプト上の帯状領域を折りたたむ Claude Code 自身の操作です。 |
この帯状領域は他の mod や Claude Code のアンケートと共有されます。アンケートが表示されている間は、アンケートが優先されます。
なぜ mod なのか。なぜ statusline-dashboard の行にしないのか
ステータスラインが受け取れるのはウィンドウ全体の合計だけです。分類ごとの内訳は mods API の呼び出し($.session.usage({ breakdown }))であり、プロンプト上の帯状領域は、プラグインがプッシュ時に更新される複数行のテーマカラー付きウィジェットを描画できる唯一の場所です。そのため、ステータスラインにはコンテキストのゲージを残し、この mod は隣の詳細ビューになります。両者は独立しているため、どちらか一方だけでも両方でもインストールできます。
仕組み
hooks/register.ts:
session.startは/context-barを登録し、$.storeから保存済みの切り替え状態を復元して、最初の測定を行います。session.measure(各メインスレッドのターン後に発火)は、コンテキスト単位が動いたときに$.session.usage({ breakdown: 'summary' })を再読み込みし、スナップショットを$.stateに書き込みます。状態を書き込むと帯状領域が再描画され、レンダリングフックがその状態を購読します。classic.SessionStartはclear/resume/fork/compactに対してもう一度測定し、切り替え状態を復元します(これらは$.stateをリセットします)。ui.renderはAbovePrompt上で最大剰余法による丸めを使い、カテゴリをbodyColumns個のセルに配置します。これによりバーは常に帯状領域の幅と完全に一致し、空でないカテゴリはすべて表示されます。また、/contextのグリッドと同じように遅延されたツール行を省き、幅に収まるだけ凡例項目を配置します。
テスト(claude plugin test plugins/context-bar)では、レイアウト計算、両方の表示面での描画、$.store を介した切り替え状態の往復、/clear 経路、アンケートの優先順位をカバーしています。
インストール
まず作者の README で marketplace とプラグイン名を確認してください。コマンドはリポジトリの構成によって変わる場合があります。
claude plugin marketplace add anthonybaldwin/cc-plugins claude plugin install context-bar
原文 / README
Context Bar
A mod that draws your context window as a stacked bar in the band above the prompt — one color per category, as /context breaks it down — with a legend underneath:
████████▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
40% System prompt 3% System tools 7% Messages 30% Autocompact buffer 10% Free space 50%
(Each run is drawn in its category's theme color — the same colors /context uses — solid █ for what's in use, ▒ for the compaction buffer, ░ for free space.)
It's live: Claude Code pushes a measurement after every turn, and the bar redraws from it. No polling, no timer, no token-count requests (the breakdown is the local summary estimate, the one /context starts from).
Install
/plugin marketplace add anthonybaldwin/cc-plugins
/plugin install context-bar@cc-plugins
Requires Claude Code v2.1.287+ (mods). It draws in the terminal and in the Desktop app's Code tab; in the VS Code chat panel and claude -p the hooks run but nothing is drawn.
Use
| | |
|---|---|
| /context-bar | Toggle the bar. The choice is remembered across sessions. Works mid-turn. |
| ctrl+x ctrl+a | Claude Code's own collapse for the band above the prompt. |
The band is shared with other mods and with Claude Code's surveys; a survey takes precedence while it's up.
Why a mod, and why not a row in statusline-dashboard
The status line receives only the window's total. The per-category breakdown is a mods-API call ($.session.usage({ breakdown })), and the band above the prompt is the one place a plugin can draw a multi-row, theme-colored widget that updates on push. So the status line keeps its context gauge, and this is the detail view beside it. The two are independent — install either or both.
How it works
hooks/register.ts:
session.startregisters/context-bar, restores the saved toggle from$.store, and takes a first measurement.session.measure(fired after each main-thread turn) re-reads$.session.usage({ breakdown: 'summary' })whenever the context unit moved, and writes the snapshot into$.state. Writing the state redraws the band — the render hook subscribes to it.classic.SessionStartforclear/resume/fork/compactmeasures again and restores the toggle (those reset$.state).ui.renderonAbovePromptlays the categories out acrossbodyColumnscells with largest-remainder rounding (so the bar is always exactly the band's width and every non-empty category stays visible), skips deferred tool rows like/context's grid does, and fits as many legend entries as the width allows.
Tests (claude plugin test plugins/context-bar) cover the layout arithmetic, drawing on both surfaces, the toggle round-trip through $.store, the /clear path, and the survey precedence.
同名の他の作品
- context-barrodbegbie · ★ 0
- context-barziedgithub · ★ 0
- context-barvrnrn · ★ 0
- context-barAkash001uts · ★ 0
- context-barBoom-Vitt · ★ 0
- context-barmyUdav4iik · ★ 0
