Claude Codeのステータスラインカスタマイズツールccstatuslineを試してみる
はじめに
データ事業本部のkobayashiです。
Claude Codeをターミナルで使っていると、今どのモデルを使っているのか、コンテキストウィンドウをどれくらい消費しているのか、セッションのコストはいくらかといった情報を常に把握しておきたいと感じることがあります。Claude Codeにはターミナル下部にステータスラインを表示するカスタマイズ機能がありますが、自前でシェルスクリプトを書いて整形するのはなかなか手間がかかります。
今回は、Claude CodeのステータスラインをインタラクティブなターミナルUIで簡単にカスタマイズできるツール「ccstatusline」を試してみたのでその内容をまとめます。
sirmalloc/ccstatusline: Highly customizable status line for Claude Code
Claude Codeのステータスライン機能とは
ccstatuslineの紹介の前に、まずClaude Code自体が持つステータスライン機能について簡単に説明します。
Claude Codeでは~/.claude/settings.jsonのstatusLine設定に任意のシェルコマンドを指定することで、ターミナル下部にカスタムのステータスラインを表示できます。
Claude Codeは設定されたコマンドを実行する際に、stdinを通じてJSON形式のセッション情報を渡します。以下は代表的なフィールドの例です（Claude Codeのバージョンによりフィールドは変更される場合があります）。
{
"model": {
"id": "claude-opus-4-6",
"display_name": "Opus"
},
"workspace": {
"current_dir": "/path/to/project",
"project_dir": "/path/to/project"
},
"cost": {
"total_cost_usd": 0.01234,
"total_duration_ms": 45000
},
"context_window": {
"context_window_size": 123456,
"used_percentage": 8,
"remaining_percentage": 92
},
"version": "1.x.xx"
}
このJSONデータをパースして整形するシェルスクリプトやプログラムを自作すれば、好みのステータスラインを作ることができます。ただしjqでJSONをパースしてANSIエスケープコードで色をつけるなどの加工を行うのはそれなりに手間がかかります。
ccstatuslineとは
ccstatuslineは、Claude Codeのステータスラインを高度にカスタマイズするためのツールです。TypeScriptで書かれており、React/InkベースのインタラクティブなTUI（Terminal User Interface）で設定を行えるのが特徴です。
主な特徴としては以下になります。
- インタラクティブなTUIで直感的にウィジェットの追加・編集・並べ替えが可能
- モデル名、Gitブランチ、トークン使用量、セッションコスト、コンテキスト使用率など豊富なウィジェットを提供
- Powerlineスタイルの美しいステータスライン表示に対応
- 複数行のステータスラインに対応
- カスタムコマンドウィジェットで任意のシェルコマンドの出力を表示可能
- インストール不要で
npxで即座に実行可能
では早速試してみます。
ccstatuslineを使ってみる
TUIの起動と設定
ccstatuslineはインストール不要で、以下のコマンドでTUI（設定画面）を起動できます。
$ npx ccstatusline@latest
TUIが起動すると、ステータスラインのプレビューが上部に表示され、その下に設定メニューが表示されます。
TUIのメインメニューでは以下の操作が行えます。
- Edit lines: ステータスラインに表示するウィジェットの追加・編集・並べ替え
- Global options: 全体のパディング、セパレータ、色設定などのグローバル設定
- Powerline options: Powerlineスタイルの有効化と設定
- Terminal width options: ターミナル幅に対する表示幅の設定
- Install to Claude Code settings: Claude Codeの設定ファイルへの自動インストール
Claude Codeへのインストール
TUIの「Install to Claude Code settings」を選択すると、自動的に~/.claude/settings.jsonにステータスラインの設定が追加されます。
手動で設定する場合は、~/.claude/settings.jsonに以下を追加します。
{
"statusLine": {
"type": "command",
"command": "npx ccstatusline@latest"
}
}
設定後にClaude Codeを起動すると、ターミナル下部にカスタマイズしたステータスラインが表示されるようになります。
利用可能なウィジェット
ccstatuslineには豊富なウィジェットが用意されています。主要なものを紹介します。
セッション情報系
| ウィジェット | 説明 | 表示例 |
|---|---|---|
| Model | 使用中のモデル名 | Model: Opus 4.6 |
| Session Clock | セッション経過時間 | Session: 2hr 15m |
| Session Cost | セッション累計コスト | Cost: $1.23 |
| Version | Claude Codeのバージョン | v1.0.80 |
コンテキスト・トークン系
| ウィジェット | 説明 | 表示例 |
|---|---|---|
| Context % | コンテキスト使用率 | Ctx: 9.1% |
| Context Length | コンテキスト長 | Ctx: 45.1k |
| Tokens Input | 入力トークン数 | In: 1234 |
| Tokens Output | 出力トークン数 | Out: 5432 |
| Tokens Total | 合計トークン数 | Total: 6789 |
Git情報系
| ウィジェット | 説明 | 表示例 |
|---|---|---|
| Git Branch | 現在のブランチ名 | main |
| Git Changes | 未コミットの変更 | (+42,-10) |
| Git Worktree | Worktree名 | main |
その他
| ウィジェット | 説明 |
|---|---|
| Custom Text | 任意の固定テキスト |
| Custom Command | 任意のシェルコマンドの実行結果 |
| Memory Usage | システムメモリ使用量 |
| Flex Separator | 伸縮するセパレータ |
ウィジェットの追加・編集
TUIのメインメニューから「Edit lines」を選択すると、ライン（行）ごとにウィジェットを管理する画面に入ります。
ウィジェットの操作はキーボードショートカットで簡単に行えます。
↑↓ select ウィジェットの選択
←→ open type picker ウィジェットタイプの変更
Enter ウィジェットの移動
(a)dd ウィジェットの追加（ピッカーから選択）
(i)nsert ウィジェットの挿入（ピッカーから選択）
(d)elete ウィジェットの削除
(c)lear line ライン内の全ウィジェットをクリア
(r)aw value ラベル省略の切り替え
(m)erge 前のウィジェットとの結合切り替え
ESC 戻る
また、ウィジェットのスタイル（色や太字など）はメインメニューの「Edit Colors」から設定できます。こちらもキーボード操作で直感的に変更が可能です。
↑↓ ウィジェットの選択
←→ 前景色の切り替え（基本16色をサイクル）
(f) 前景色/背景色の切り替え
(b)old 太字の切り替え
(a)nsi256 256色モードでの色指定
(r)eset 選択中のウィジェットの色をリセット
(c)lear all 全ウィジェットの色をリセット
(s)how separators セパレータの表示/非表示切り替え
ESC 戻る
前景色は←→キーで基本16色（Black, Red, Green, Yellow, Blue, Magenta, Cyan, Whiteとそれぞれのbright版）をサイクルできるため、設定ファイルを直接編集しなくてもリアルタイムにプレビューしながら色を選べます。
Powerlineモード
ccstatuslineではPowerlineスタイルのステータスラインも設定できます。TUIの「Powerline options」から有効化すると、矢印型のセパレータでウィジェットが区切られた美しいステータスラインになります。
Powerlineモードでは以下の設定が可能です。
- Align Widgets: 複数行のウィジェットを自動整列
- Separator: Powerlineフォントの矢印型セパレータ
- Start/End cap: ステータスライン両端の装飾
Powerlineフォントが必要な場合は、Nerd Fontのインストールが推奨されます。
Custom Commandウィジェット
Custom Commandウィジェットを使うと、任意のシェルコマンドの実行結果をステータスラインに組み込めます。
活用例としては以下のようなものがあります。
# 現在時刻の表示
date +%H:%M
# 現在のコミットハッシュ
git rev-parse --short HEAD
# Node.jsバージョン
node -v
ターミナル幅の設定
「Terminal Options」では、ステータスラインの表示幅を以下の3つのモードから選択できます。
| モード | 説明 |
|---|---|
| Full width always | 常にターミナル全幅を使用 |
| Full width minus 40 | 40文字分を予約して折り返しを防止（デフォルト） |
| Full width until compact | コンテキスト使用率に応じて動的に切り替え |
注意事項
いくつか利用時の注意点があります。
- VSCode統合ターミナル:
terminal.integrated.minimumContrastRatioの設定が色表示に影響する場合があります。期待通りの色が出ない場合は値を1に設定してコントラスト強制を無効化してください - Session Cost:
/resumeでセッションを再開した場合、Claude Code側の制限でコストが正しく更新されない場合があります - Custom Command: ステータスラインのスクリプトは頻繁に実行されるため、Custom Commandには軽量なコマンドを設定することを推奨します
まとめ
Claude CodeのステータスラインをインタラクティブなターミナルUIで簡単にカスタマイズできるツール「ccstatusline」を試してみました。
導入はnpx ccstatusline@latestを実行してTUIから設定するだけで完了し、モデル名やコンテキスト使用率、Gitブランチ、セッションコストなどの情報をターミナル下部に常時表示できるようになります。自前でシェルスクリプトを書く必要がなく、TUIで直感的にウィジェットの追加や色の変更ができるため、手軽にClaude Codeの作業環境を改善できます。
最後まで読んで頂いてありがとうございました。
