魔法少女がClaude Codeを監視する / ccportal-deck

Claude Code のセッションが「確認待ち」で止まっているのに気づかず、別の作業をしていた——を無くすために作ったツールを、霊夢と魔理沙に紹介してもらったわ。

複数のセッション（ローカル＋devcontainer）がいまどの状態か、コンテキストをどれだけ使っているか、トークンの残りはいくらかを、一枚の画面にまとめて表示するのぜ。確認待ち・完了になった瞬間には、OS 通知と音とタブの点滅で知らせるんだ。

▼ 起動（インストール不要）
npx ccportal

▼ できること
・セッション一覧（待機／実行中／確認待ち／完了を色と文字で）
・LOCAL と DOCKER（devcontainer）を区別して表示
・コンテキスト利用状況の内訳（Messages / System / MCP / 空き）
・トークン残量（5時間・週）とリセット時刻
・確認待ち・完了で OS 通知＋音＋タブ点滅
・スキン切り替え（デフォルト／魔法少女）

▼ 必要なもの
Node.js 20 / Chromium 系ブラウザ / macOS・Windows 11
Docker は任意（devcontainer のセッションも見る場合）

Transcript

1. 魔法少女が、 Claude Code の実行状況を そっと見守って教えてくれる
2. Noriyuki TAKEI 武井 宜行 Information • Microsoft MVP for AI Platform • サイオステクノロジー株式会社 blog https://tech-lab.sios.jp/ X Favorites • • • • スカッシュ スキー 走ること PCデスクまわりの環境改善 books 世界一やさしいRAG構築入門 @noriyukitakei core skill Azureによる クラウドネイティブなアプリ開発
4. PROBLEM ・ 困りごと 気づかないうちに、待ち時間が積もる Claude Code でターミナルを何枚も開いて並行作業していると… 裏のタスクが見えない 確認待ちを見逃す 完了を見逃す 別ターミナルで走らせたセッ ションが、今どうなっている か分からない 「許可して」「これで良い？ 」の確認待ちに気づかず、 Claude が止まったまま放置 終わっているのに気づかず、 次の指示を出すのが遅れる 結局、確認しに何度もターミナルを巡回 → その巡回こそが一番の無駄 本当は、コーディングエージェントを止めずに最大限働かせ続けたい。
5. SOLUTION ・ そこで… Claude Code Portal です！ 状態が変わった その瞬間に 魔法少女が全力で気づかせてくれる ライブ監視 複数セッションの idle / running / waiting / done をリアルタイ ム表示 魔法少女で気づかせる waiting・done の瞬間に、変身・きらめき・吹き出しでアピー ル 多層通知 OS通知＋音＋タブ明滅＋ウィンドウ前面化で、どうしても気 づかせる
6. ARCHITECTURE ・ ccportal の構成 アーキテクチャ Chrome (Appモード) Claude Code Rest SSE Push ccportal 常駐Nodeプロセス Devcontainer Claude Code ポイント：監視の本体は launcher。Chrome 窓を閉じても監視は続く／公式インターフェースを外から読むだけの非破壊監視。
7. LIVE DEMO デモ ① ② ③ npx で起動 複数セッションを走らせる waiting / done の瞬間 コマンド一発で常駐＆魔法 少女コンソールが開く LOCAL と DOCKER のセッ ションがカードで並ぶ 魔法少女が変身・通知・前 面化で気づかせる 放置ゼロを、その場で体感してください
9. GET STARTED ・ つかいかた npx ccportal で、いますぐ ① コマンド一発でインストール＆起動 npx ccportal これだけ。常駐プロセスが立ち上がって、 魔法少女コンソールがブラウザで開きます。 ② リポジトリはこちら github.com/noriyukitakei/ccportal オープンソースで公開中。 Star・Issue・PR、ぜんぶ大歓迎です。 わたしと契約しなくても、使えます。 面倒なセットアップも不要。npx 一発でだれでも使えます。 ぜひ使ってみてください ─ あなたの待ち時間、 魔法少女が見守ります。