Context Bar：Claude Code のコンテキスト内訳をバーで表示

Context Bar は、Claude Code のコンテキスト内訳を見せてくれるコミュニティ Mod で、Hamza Zafar（hamzafer）による claude-code-mods コレクションの一部です。答えてくれる問いはひとつ、「コンテキストウィンドウを何が埋めているのか？」です。Claude Code のプロンプトの上に小さな枠付きの帯を描き、その中にターミナル幅いっぱいの積み上げバーを 1 本表示します。バーは /context と同じカテゴリ（システムプロンプト、ツール、MCP ツール、メモリファイル、スキル、メッセージなど）に分割され、その後に空き領域と自動コンパクト用のバッファが続きます。

ヘッダー行は 48k of 200k · compacts at 167k のような表示で、色付きのパーセンテージバッジが付きます。バッジは緑で、コンパクト開始位置の 70% で黄色、90% で赤に変わります（自動コンパクトがオフの場合はウィンドウ全体に対して計算します）。バーの下には凡例があり、各カテゴリのトークン数とウィンドウに占める割合が、ターミナル幅に応じて必要な行数に詰めて並びます。必要に応じて読み込まれるツールスキーマは、/context がグリッドから除外しているのと同じように除外されます。

Context Bar は私たちの コンテキストメーター に近いものですが、見せる情報は異なります。コンテキストメーターはステータスラインの 1 行の文字列で、コンテキスト全体の使用率、5 時間・7 日間のプランウィンドウ、セッションのコスト、そして 80% での一度きりの警告を表示します。Context Bar はプラン使用量やコストを表示しない代わりに、コンテキストをカテゴリ別に分解するので、場所を取っているのが MCP ツールなのか、メモリファイルなのか、会話そのものなのかがわかります。作者の README によると、Claude Code 2.1.287 以降が必要です。

録画では、小さなデモプロジェクトでこの Mod を読み込んだ Claude Code を起動し、Claude に README.md を読んでプロジェクトを一文で説明するよう依頼します。ターンが完了すると、プロンプトの上の帯に、カテゴリ別（システムプロンプト、システムツール、スキル、メッセージ、空き領域）に分割されたコンテキストウィンドウ、54k of 200k のような合計、自動コンパクトが始まる位置、そして使用率が表示されます。

インストールブロックのいずれかの方法を使ってください。どれも作者自身のマーケットプレイスから直接インストールします。バーは次のセッション開始時に表示され、/context-bar で表示・非表示を切り替えられます。

Mod は最新の読み取り結果をホスト側が保持する $.state アトムに保存するため、ホットリロードをまたいでも残ります。そしてそれを AbovePrompt の描画位置に再描画します。以下は hooks/register.tsx の更新関数です。

// Asks the engine for /context's breakdown, estimated locally (no token-count calls).
async function refresh($: EngineInterface) {
  if (await read($, isHidden)) return
  const usage = await $.session.usage({ breakdown: 'summary' })
  const b = usage.context.breakdown
  if (!b || !(b.rawMaxTokens > 0)) return // no window to measure against
  await update($, reading, () => toReading(b))
}

refresh は session.start、agentId がないときの turn.complete（サブエージェントのターンはスキップ）、そして session.compact で実行されます。/compact はターンの終了なしにウィンドウを空にするためです。toReading は遅延読み込みのカテゴリと空のカテゴリを除外し、使用中の行を空き領域とバッファより前に並べて、色を割り当てます。純粋なヘルパー関数 cells と legend が読み取り結果をバーの区間と凡例の行に変換します。使用中のカテゴリには必ず 1 セル以上が割り当てられ、端数はまず空き領域に回されます。内側の幅が 20 列未満の場合、バーは描画されません。アンケートがプロンプトの上のスペースを使っている間、帯はその場を譲ります。

/config に設定項目はありません。唯一のスイッチは /context-bar コマンドで、表示・非表示の状態は $.store に保存されます。見た目を変えたい場合は、register.tsx の先頭にある定数を編集してください。PALETTE はカテゴリの色、MESSAGES はメッセージの色、GLYPH はバーの文字、MIN_WIDTH は描画できる最小の幅です。

私たちは実行前に、プラグインが実行しうるすべてのファイル（hooks/hooks.json、hooks/register.tsx、型宣言、テスト）を読みました。package.json、インストールスクリプト、バンドルされたコードはありません。

UI の変更 はプロンプトの上の帯に対応します。コマンドの追加 は /context-bar に対応します。Mod は $.session.usage を通じてコンテキストの数値を読み取り、$.store に true/false の値をひとつだけ保存し、読み取り結果を $.state に保持します。シェルコマンドの実行、ファイルの読み書き、ネットワークの使用、環境変数の読み取り、モデルの呼び出しは行いません。claude plugin validate はエラーも警告も報告せず、作者の 6 件のテストは Claude Code 2.1.291 ですべて成功しました。

macOS 上の Claude Code 2.1.291 で確認しました（validate とテスト）。バーが表示されない場合は、次を確認してください。

• claude --version が 2.1.287 以降であること。
• 以前に非表示にしていないこと。/context-bar を一度実行し、"Context bar on" と表示されるか確認してください。
• ターミナルの幅が十分であること。帯には少なくとも 24 列が必要です。
• 入力欄の上にアンケートが開いていないこと。閉じると帯は戻ってきます。
• 内訳は Claude Code がウィンドウサイズを把握してから利用可能になります。開始直後に帯が出ていない場合は、プロンプトを一度送信してください。