Claude CodeのTUIを拡張するccstatuslineについて、ここから削るための全部のせの設定

はじめに

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 の画面にリアルタイムで必要な情報を表示できます。

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

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