Claude Code のセッションをウェブブラウザで可愛く可視化してセッション迷子を卒業する
はじめに
皆様こんにちは、あかいけです。
私はこれまでClaude Codeのセッションを以下のような方法で可視化してきました。
どちらも作っていて非常に楽しかったのですが、専用の機器が必要なので、普段使いするにはちょっとハードルが高いものでした。（そろそろ、現実的に利用できそうなものが欲しい…）
というわけで今回は、Claude Codeのセッションをブラウザで可視化できるダッシュボードを作ってみました。
モチベーション
Claude Codeのセッションを複数並べて作業していて、以下のような悩みがありました。
-
私の普段のClaude Codeの使い方
- フォルダごとにVS Codeを開いて、それぞれのウィンドウでClaude Codeを動かしています
- VS Codeを使うのは、Claudeが作った資料やコードをレビューするとき、大きな画面のほうが見やすいからです
- ターミナルのcmuxも試しましたが、作った資料を見るのが不便で、結局VS Codeに戻ってきました…
-
困っていること
- ウィンドウが増えると、どれが処理中で、どれが承認待ちなのか分からなくなります
- 承認待ちで止まっているセッションに気付かず、しばらく放置しちゃうこともよくあります
- ミラーボールだとどのセッションが承認待ちかまでは分からず、ESP32のデバイスは画面が小さくて1つのセッションしか表示できません
本記事では、こんな感じでセッションを見失う状態を「セッション迷子」と定義します。
そんなわけで複数のセッションを一目で確認できるものが欲しくなりました。
作ったもの
Clawd Session Houseという名前のClaude Code向けのプラグインを作りました。
セッションごとにClawdの部屋を用意し、部屋の中のClawdの動きと明かりの色で、そのセッションの状態を表します。
ライブ表示
ライブ表示では、動いているセッションを1つずつタイルで並べます。
ざっくり以下のような動きをします、癒されます。
- ステータス
- 待機中：明かりが青で、Clawdは呼吸とまばたきをしています
- 処理中：明かりが琥珀色で、Clawdは歩きながら考えています
- 承認待ち：明かりが赤く点滅し、Clawdが困り顔で「HELP!」を出します
- 経過時間と実行中のツールに加えて、サブエージェント、タスクの進み具合、バックグラウンドの作業も表示します
- 承認待ちになったときと、1分以上かかった処理が終わったときに、デスクトップ通知を出せます
振り返り
振り返りの画面では、記録したイベントから、Claudeが作業していた時間と承認を待っていた時間を集計します。
承認待ちの時間が長いプロジェクトを見つけて、許可するコマンドの設定を見直すきっかけにもできます。
- 日別、時間帯別、プロジェクト別の集計
- よく使ったツールと、サブエージェントの種類ごとの起動回数
- セッションごとに、状態の移り変わりを示すタイムライン
- 期間の指定と、CSVでのダウンロード
これらの記録はローカルのSQLiteにのみ保存しています。
またプロンプトの本文やツールの入力内容は、保存も表示もしません。
使い方
動作するOSはmacOS、Linux、WindowsのWSL2で、Python 3.9以上とcurlが必要です。
Claude Codeの中で次のコマンドを実行し、新しいセッションを始めます。
/plugin install clawd-session-house --marketplace Lamaglama39/clawd-session-house
Claude Code 2.1.275より前のバージョンでは、先にマーケットプレイスを追加してからインストールします。
/plugin marketplace add Lamaglama39/clawd-session-house
/plugin install clawd-session-house@lamaglama39
あとはブラウザでhttp://127.0.0.1:8765/を開くだけです。
Skillsを用意しているので、Claude Codeに「セッションハウスを開いて」と頼んでも、ダッシュボードを開いてくれます。
仕組み
全体像
全体の構成は次のとおりです。
まずは、状態を知る手段であるClaude Codeのフックです。
フックは、プロンプトの送信、ツールの実行、承認の要求といった決まったタイミングで、Claude Codeが自動で実行するコマンドです。
フックにはセッションIDや作業フォルダといった情報がJSONで渡されるので、どのセッションで何が起きたかが分かります。
次に、フックのスクリプトが、受け取ったJSONをそのままローカルのサーバーへ送ります。
サーバーはセッションIDごとに状態を持ち、状態が変わるたびにServer-Sent Eventsでブラウザへ知らせます。
Server-Sent Eventsは、サーバーからブラウザへ続けてデータを送るための仕組みです。
サーバーはPythonの標準ライブラリだけで動くので、追加のパッケージは要りません。
最後に、ブラウザが受け取った状態に合わせて、タイルごとにClawdを描きます。
同じイベントはサーバーがSQLiteにも記録していて、振り返りの画面はその記録を集計して表示しています。
イベントと状態の対応
フックのイベントと、ダッシュボードの状態は次のように対応させています。
| フックのイベント | 状態 |
|---|---|
UserPromptSubmit、PreToolUse、PostToolUse |
処理中 |
PermissionRequest |
承認待ち |
Stop |
待機中 |
SessionEnd |
終了 |
ただ、Escで処理を中断したときや、承認ダイアログで拒否したときは、Claude Codeがフックを送らないので、フックだけでは状態の変化が分かりません。
そのため、上記のような操作をした際は次のプロンプトを送るまで、タイルのアニメーションがそのままになります。（今後何らかの方法で改善したい…）
プラグインとして配布
ここまでの仕組みは、Claude Codeのプラグインとしてまとめています。
プラグインに含まれるフックは、インストールすると自動で登録されます。
利用者がsettings.jsonを書き換える必要はなく、アンインストールすればフックも外れます。
サーバーはセッションが始まったときに自動で起動するので、利用者が起動を意識することもありません。
また、ダッシュボードを開く、サーバーを起動し直す、サーバーを止めるという3つの操作は、スキルとして用意しました。
Claude Codeの中から、/clawd-session-house:openのように呼び出せます。
ウェブアプリの部分も含めて、コマンド1つで手軽に配れるので、プラグインは便利でいいですね。
さいごに
以上、Claude Codeのセッションをブラウザで可視化してみた話でした。
あとこのダッシュボードは、すべてClaude Codeと会話しながら作りました。
フックでセッションの状態さえ取り出せれば見せ方は自由なので、皆さんも、自分に合ったダッシュボードを作って、ベストなセッション管理の方法を探してみてください。
この記事が、全国のセッション迷子の助けになれば幸いです。
