ClaudeMods
☰
JA
● 0 人がオンライン ・閲覧 0 回
スポンサー作品を投稿
GitHub リポジトリ · 投稿者 anthonybaldwin

context-bar

[mod](https://code.claude.com/docs/en/plugins/mods/overview) です。プロンプトの上にある帯状の領域に、コンテキストウィンドウを積み上げバーとして描画します。`/context` と同じ分類ごとに色を分け、下には凡例を表示します。

anthonybaldwin@anthonybaldwin

anthonybaldwin/cc-plugins/tree/main/plugins/context-bar

翻訳済み

この 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.start registers /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.SessionStart for clear / resume / fork / compact measures again and restores the toggle (those reset $.state).
  • ui.render on AbovePrompt lays the categories out across bodyColumns cells 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.

同名の他の作品

関連作品