Claude Code に「ダッシュボード」を付けてみた

Claude Code でコードを書いていると、こんな瞬間がありませんか。

• 作業の途中で急に使用枠が尽きて、数時間待つことになる。
• 大きな変更を頼んでコーヒーを淹れて戻ると、どこまで進んだのか分からない。
• だんだん返事が鈍くなり、あとでコンテキストが埋まっていたと気づく。

情報はずっとそこにあったのに、見えなかっただけです。ターミナルに切り替えてコマンドを打つか、勘に頼るしかありませんでした。そこで Claude Code Panel という小さな拡張機能を作りました。入れるとサイドバーにパネルが一枚、ステータスバーに一行が増えて、見たいものがいつでも目に入ります。

一行で、いまの状態が分かる

いちばんよく見るのは、下のステータスバーの一行です。左から順に:

• 5h 38%:5 時間枠をどれだけ使ったか。
• 7d 24%:1 週間の枠をどれだけ使ったか。
• 63%:いまのタスクがどこまで進んだか。
• Running a command:Claude がいま何をしているか。考え中、ファイル編集、コマンド実行など。

枠が残り少なくなると黄色に、ほぼ使い切ると赤になります。じっと見ていなくても、視界の端で気づけます。

タブは三つ、それぞれ一つの役割

パネルを開くと、タブが三つあります。

Overview(概要):使用枠、いまのセッション、進行中のタスク。ふだんはこのタブだけで足ります。枠のバーにある細い点線は「均等ペース線」で、均等に使っていたらいまどこにいるはずかを示します。緑のバーが点線より先に出ていたら、少し使うペースが速めです。

Tasks(タスク):タスクごとに一枚のカードで、すべての手順を並べます。どこまで終わってどこを作業中かが一目で分かります。カードにはどのセッションのタスクかが書いてあるので、ウィンドウをいくつ開いても混ざりません。手順のリストは Claude Code に元からある ToDo 機能から直接読むので、設定はいりません。

Session(セッション):使っているモデル、コンテキストの埋まり具合、この会話で出力したトークン量、呼び出したツール、送り出したサブエージェントがまだ動いているか。

こだわった設計

何もインストールせず、ローカルのファイルを読むだけ

Claude Code は、すべての会話をあなたのパソコンの ~/.claude/projects フォルダに丸ごと記録しています。パネルがやることは単純で、数秒ごとにそのファイルを読み、役に立つ情報を整理して見せるだけです。

だから設定の変更は不要で、Claude Code に何かを足すこともありません。統計もテレメトリーもなく、会話の内容がパソコンの外に出ることはありません。

使用枠は、ネットにつなぐ前にまず聞く

ネットにつなぐ可能性があるのは使用枠だけです。初めて開いたとき、数字をどこから取るかを聞いてきます。ローカルのファイルを読むか、許可を得て Anthropic の使用量 API に問い合わせるか。あなたが同意しない限り、ネットにはつなぎません。

これは自分で痛い目を見てからこだわった点です。使用枠を毎分確認する小さなスクリプトを使っていたら、1 か月で何百回もレート制限にかかりました。なのでこの拡張機能は、ネットにつなぐ場合でも既定で 5 分に 1 回しか問い合わせず、制限されたら自動で間隔を広げます。

進捗は「何歩目か」だけ。期待させない

タスクの進捗の計算はとても素朴です。終わった手順を 1、作業中を 0.5 として、手順の総数で割るだけ。

教えてくれるのは「いま何歩目か」で、「あとどれくらいかかるか」は予想しません。途中で手順が二つ増えたら、パーセントは正直に下がります。いつまでも 99% で止まる進捗バーより、正直なほうがいいと思っています。

狭くても、広くても見やすい

サイドバーを狭くすると、重要度の低い情報は自動でたたまれます。広げたりエディタ領域にドラッグしたりすると、2 段、3 段に分かれます。ライト・ダークはエディタのテーマに合わせて切り替わり、表示言語もエディタに合わせます。いまは英語と中国語に対応しています。

インストール方法

1. GitHub のリリースページから claude-code-panel-0.1.0.vsix をダウンロードします:github.com/karin-lin/claude-code-panel/releases
2. ターミナルで次のどちらかを実行します。VS Code なら 1 行目、Cursor なら 2 行目です。

code --install-extension claude-code-panel-0.1.0.vsix
cursor --install-extension claude-code-panel-0.1.0.vsix

3. エディタのウィンドウを再読み込みします。左のアクティビティバーにメーターのアイコンが、下のステータスバーに一行が増えます。

コマンドを使いたくない場合は、拡張機能ビューの右上の ... から「VSIX からのインストール」を選んでも入れられます。

自分好みに合わせる

コードを触らずに調整できる入り口をいくつか用意しています。

• 自分の上限ライン:たとえば 5 時間枠を 65% で止めたいなら、ラインを設定できます。バーに線が引かれ、ラインまであと何ポイントかも表示されます。
• 自分の使用枠データ:決まった形式で小さなファイルを書けば、どんなスクリプトからでもパネルに数字を渡せます。
• 自分のタスク進捗:どんなツールでも進捗ファイルを書けば、パネルが対応するセッションの下に表示します。

形式はプロジェクトの カスタマイズガイド にまとめてあります。

分かっている制限

• Claude Code のローカルの会話記録の形式を読んでいます。これは公式に安定を約束された仕組みではないので、今後のアップデートで一部が一時的に動かなくなるかもしれません。そのときは追従して直します。
• Claude Code のバージョンによっては ToDo リストを作らないことがあります。そのときタスクタブは空になるので、自分の進捗ファイルを使ってください。
• 「確認待ちかも」の表示は推測です。30 秒以上止まっているツール呼び出しは、遅いコマンドと見分けがつきません。
• いちばん多く試したのは macOS と Cursor の組み合わせで、VS Code、Windows、Linux はまだ少なめです。問題があれば GitHub の issue で教えてください。

さいごに

これは私の初めてのオープンソースツールです。MIT ライセンスで、自由に無料で使えます。ソース、インストーラ、説明は GitHub にあります。

github.com/karin-lin/claude-code-panel

毎日 Claude Code と一緒にコードを書いている人の「あれ、枠がもうない」が、少しでも減ればうれしいです。