Claude Code を日常的に使い始めてしばらく経つと、自然と気になることが出てきます。「今月いくら使ったか」「どのツールを頻繁に呼び出しているか」「キャッシュはどれだけ効いているか」——しかし Claude Code 自体にはこれらを一覧できるダッシュボードがありません。そこで、ローカルのログを集計して表示する Claude Code Monitor を作りました。

なぜ作ったか

Claude Code は ~/.claude/projects/ 以下に JSONL 形式でセッションログを書き出しています。コスト・トークン数・使用モデル・呼び出したツールなど、ほぼすべての情報がここに入っています。にもかかわらず、それを見やすい形で閲覧する手段が標準では用意されていません。

外部サービスに送信したくない、インストール不要で使いたい、という制約のもと、Python の標準ライブラリだけで動く最小構成のサーバーを書くことにしました。

画面で見られる情報

ダッシュボードは大きく次の領域に分かれています。

コストとトークンの概要

コスト・トークン概要とグラフ

日別のコスト・累積コスト・プロジェクト別の内訳をグラフで確認できます。入力・出力・キャッシュ読み取り・キャッシュ書き込みのトークン推移も並べて表示されるので、「この日は何をしていたか」を振り返るのに役立ちます。

ツールと使用パターン

ツール使用頻度と時間帯・曜日別ヒートマップ

Claude がセッション中に呼び出したツールの Top 20 と Bash コマンドの Top 15 が一覧になります。さらに時間帯別・曜日別のヒートマップで、自分がどの時間帯に Claude Code を使う傾向があるかも一目でわかります。

キャッシュ効率とモデル内訳

キャッシュ命中率・節約額とモデル別コスト

日別のキャッシュ命中率と節約額、モデル(Opus / Sonnet / Haiku)ごとのコスト推移が確認できます。プロンプトの組み方を工夫してキャッシュ率が上がったかどうかを数値で検証できるのが、個人的にいちばん気に入っている部分です。スキル呼び出し回数の一覧もここに表示されます。

セッション・フック一覧

セッション一覧とフック実行統計

コスト上位のセッションがタイトル・プロジェクト名・日付・ターン数とともに並び、高コストな作業を把握できます。フック一覧では、設定済みフックの実行数・成功/失敗・平均実行時間を確認できます。

仕組み

server.py は Python の http.serverjson モジュールだけで動く 1 ファイル構成です。起動時に ~/.claude/projects/ 以下の JSONL ファイルをすべて読み込み、オンメモリで集計した結果を JSON API として返します。フロントエンドは静的な HTML + JavaScript で、ポーリングで自動更新するシンプルな設計です。

集計ロジックはログ行数に対して線形にスケールします。通常の利用量であれば 1 秒未満でパースが完了します。キャッシュ TTL は 30 秒で、同じ時間内の重複リクエストは再集計せずキャッシュを返します。

グローバルおよびプロジェクトごとの settings.json も読み取るため、設定済みのフックやスキルも自動で拾います。データは外部に送信されず、すべてローカルで完結します。

使い方

リポジトリをクローンして server.py を実行するだけです。

git clone https://github.com/nt-718/claude-code-monitor.git
cd claude-code-monitor
python server.py

起動後にブラウザで http://localhost:8080 を開くとダッシュボードが表示されます。ポートを変えたい場合は --port オプションを使います。

python server.py --port 9000

↺ Refresh ボタンで強制更新も可能です。動作には Python 3.8 以上が必要で、追加パッケージのインストールは不要です。

料金計算に使うトークン単価は server.py 冒頭の MODEL_PRICING 定数で管理しています。Anthropic が単価を変更した場合はここだけ更新すれば対応できます。

まとめ

  • Claude Code のログ (~/.claude/projects/ の JSONL) を集計し、コスト・トークン・キャッシュ効率・ツール使用頻度をブラウザで確認できる。
  • Python 標準ライブラリのみで動作し、インストール不要、データはすべてローカル完結。
  • python server.py で即起動、--port でポート変更可能、30 秒自動更新。
  • 「キャッシュ命中率が上がったか」「どのツールを使いすぎているか」など、Claude Code の使い方を客観的に見直す足がかりになります。