はじめに

Claude Code はターミナル上で動作する CUI/TUI ツールですが、デフォルトの画面には現在のモデル名やコンテキストの使用状況くらいしか表示されません。

ccstatusline は、Claude Code の画面下部にカスタマイズ可能なステータスラインを追加するツールです。セッションのコスト、コンテキスト使用率、Gitの状態、トークン速度など、さまざまな情報をリアルタイムで表示できます。

この記事では、まず「全部のせ」の設定を紹介します。ここから自分に不要なものを削っていくことで、自分好みのステータスラインを作れます。

ccstatusline とは

ccstatusline は、Claude Code のステータスライン機能を活用するサードパーティ製のツールです。

Claude Code には statusLine という設定項目があり、任意のシェルコマンドの出力をステータスラインとして表示できます。ccstatusline はこの仕組みを利用して、リッチな情報をフォーマットして表示してくれます。

特徴:

インストール不要: npx で直接実行できる
TUIで設定: 対話的な TUI で設定を編集できる
Powerline対応: Nerd Font を使った美しい表示
多彩なウィジェット: モデル情報、コスト、Git、トークンなど多数

セットアップ

1. Claude Code の設定に追加

~/.claude/settings.json に以下を追加します。

{
  "statusLine": {
    "type": "command",
    "command": "npx -y ccstatusline@latest",
    "padding": 0
  }
}

これだけで ccstatusline が有効になります。初回実行時に設定ファイルが ~/.config/ccstatusline/settings.json に自動生成されます。

2. 設定の編集

ターミナルから以下を実行すると、対話的な TUI で設定を編集できます。

npx -y ccstatusline@latest

ただし、TUIを使わずに ~/.config/ccstatusline/settings.json を直接編集することもできます。

全部のせの設定

以下が、主要なウィジェットをすべて有効にした「全部のせ」の設定です。3行のステータスラインに全情報を詰め込んでいます。

{
  "version": 3,
  "lines": [
    [
      { "id": "01", "type": "model", "color": "cyan" },
      { "id": "02", "type": "version", "color": "brightBlack" },
      { "id": "03", "type": "output-style", "color": "brightBlack" },
      { "id": "04", "type": "context-length", "color": "brightBlack" },
      { "id": "05", "type": "context-bar" },
      { "id": "06", "type": "context-percentage", "color": "brightBlack" },
      { "id": "07", "type": "context-percentage-usable", "color": "brightBlack" },
      { "id": "08", "type": "memory-usage", "color": "brightBlack" }
    ],
    [
      { "id": "10", "type": "session-cost", "color": "yellow" },
      { "id": "11", "type": "session-usage", "color": "green" },
      { "id": "12", "type": "weekly-usage", "color": "blue" },
      { "id": "13", "type": "session-clock", "color": "brightBlack" },
      { "id": "14", "type": "reset-timer", "color": "magenta" },
      { "id": "15", "type": "weekly-reset-timer", "color": "brightBlack" },
      { "id": "16", "type": "block-timer", "color": "brightBlack" },
      { "id": "17", "type": "tokens-input", "color": "green" },
      { "id": "18", "type": "tokens-output", "color": "yellow" },
      { "id": "19", "type": "tokens-cached", "color": "blue" },
      { "id": "20", "type": "tokens-total", "color": "brightBlack" },
      { "id": "21", "type": "input-speed", "color": "brightBlack" },
      { "id": "22", "type": "output-speed", "color": "brightBlack" },
      { "id": "23", "type": "total-speed", "color": "brightBlack" }
    ],
    [
      { "id": "30", "type": "git-branch", "color": "magenta" },
      { "id": "31", "type": "git-changes", "color": "yellow" },
      { "id": "32", "type": "git-insertions", "color": "green" },
      { "id": "33", "type": "git-deletions", "color": "red" },
      { "id": "34", "type": "git-root-dir", "color": "blue" },
      { "id": "35", "type": "git-worktree", "color": "brightBlack" },
      { "id": "36", "type": "session-id", "color": "brightBlack" },
      { "id": "37", "type": "session-name", "color": "yellow" },
      { "id": "38", "type": "current-working-dir", "color": "blue" },
      { "id": "39", "type": "skills", "color": "brightBlack" }
    ]
  ],
  "flexMode": "full-minus-40",
  "compactThreshold": 60,
  "colorLevel": 2,
  "defaultPadding": " ",
  "inheritSeparatorColors": false,
  "globalBold": false,
  "powerline": {
    "enabled": true,
    "separators": [""],
    "separatorInvertBackground": [false],
    "startCaps": [],
    "endCaps": [],
    "theme": "nord-aurora",
    "autoAlign": false
  }
}

この設定を ~/.config/ccstatusline/settings.json にコピーすれば、そのまま使えます。

各ウィジェットの解説

1行目: モデル・コンテキスト情報

type	表示内容
`model`	使用中のモデル名（Sonnet, Opus など）
`version`	Claude Code のバージョン
`output-style`	出力スタイル（concise, verbose など）
`context-length`	コンテキストの使用トークン数
`context-bar`	コンテキスト使用率のプログレスバー
`context-percentage`	コンテキスト使用率（%）
`context-percentage-usable`	コンテキスト残量（%）
`memory-usage`	メモリ使用量

コンテキストウィンドウの使用状況は、長い会話をしているときに「そろそろコンテキストが溢れそうか」を判断するのに便利です。

2行目: コスト・使用量・トークン情報

type	表示内容
`session-cost`	現在のセッションのコスト（USD）
`session-usage`	セッションの使用量
`weekly-usage`	週間使用量
`session-clock`	セッション経過時間
`reset-timer`	使用量リセットまでの時間
`weekly-reset-timer`	週間使用量リセットまでの時間
`block-timer`	レートリミットのブロック解除までの時間
`tokens-input`	入力トークン数
`tokens-output`	出力トークン数
`tokens-cached`	キャッシュされたトークン数
`tokens-total`	合計トークン数
`input-speed`	入力トークン速度
`output-speed`	出力トークン速度
`total-speed`	合計トークン速度

特に session-cost はAPIプランの場合にコストを確認でき、weekly-usage は月額プランでの消費ペースを把握するのに役立ちます。

3行目: Git・セッション情報

type	表示内容
`git-branch`	現在のGitブランチ名
`git-changes`	変更されたファイル数
`git-insertions`	追加行数
`git-deletions`	削除行数
`git-root-dir`	Gitリポジトリのルートディレクトリ名
`git-worktree`	ワークツリー情報
`session-id`	セッションID
`session-name`	セッション名（`/rename` で設定した名前）
`current-working-dir`	カレントディレクトリ
`skills`	読み込まれているスキル

git-branch や git-changes は、Claude に作業させているときに「いまどのブランチで何が変わっているか」を常に確認できるので重宝します。

削っていくためのガイド

全部のせの状態では情報量が多すぎるかもしれません。以下を参考に、自分に不要なものを削ってみてください。

まず削っても困らないもの

version — Claude Code のバージョンは普段意識しない
session-id — セッションIDを見ることはほぼない
output-style — 頻繁に切り替えなければ不要
memory-usage — 気にならなければ不要
tokens-cached — キャッシュの内訳まで見る必要がなければ
skills — スキルを使っていなければ不要

速度系をまとめる

input-speed、output-speed、total-speed の3つは、total-speed だけ残せば十分なことが多いです。

最小構成の例

最低限これだけあれば作業に困らない、というミニマル構成です。

{
  "version": 3,
  "lines": [
    [
      { "id": "01", "type": "model", "color": "cyan" },
      { "id": "02", "type": "context-bar" },
      { "id": "03", "type": "context-percentage", "color": "brightBlack" },
      { "id": "04", "type": "session-cost", "color": "yellow" },
      { "id": "05", "type": "git-branch", "color": "magenta" },
      { "id": "06", "type": "git-changes", "color": "yellow" }
    ]
  ]
}

グローバル設定の解説

ウィジェット以外のグローバル設定も紹介します。

設定	説明	デフォルト
`flexMode`	ウィジェットの横幅調整モード	`"full-minus-40"`
`compactThreshold`	ターミナル幅がこの値以下でコンパクト表示	`60`
`colorLevel`	カラーレベル（1: 16色, 2: 256色, 3: Truecolor）	`2`
`defaultPadding`	ウィジェット間のパディング	`" "`
`globalBold`	全体を太字にするか	`false`

Powerline 設定

"powerline": {
  "enabled": true,
  "theme": "nord-aurora"
}

powerline.enabled を true にすると、Nerd Font を使った矢印型のセパレータで表示されます。Nerd Font 対応のフォント（JetBrainsMono Nerd Font など）が必要です。false にするとプレーンなテキスト表示になります。

まとめ

ccstatusline を使うと、Claude Code の画面にリアルタイムで必要な情報を表示できます。

まずは「全部のせ」の設定をコピーして使ってみる
実際に使いながら、見ていない情報を削っていく
自分にとってちょうどいい構成に仕上げる

という流れで、自分好みのステータスラインを作ってみてください。