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

AI Dev DayのLTのスライドです。

1. ✨ ✨ ✨ ✨ 魔法少女が、 Claude Code の実行状況を そっと見守って教えてくれる ✨
2. Noriyuki TAKEI 武井 宜行 Information • Microsoft MVP for AI Platform • サイオステクノロジー株式会社 blog https://tech-lab.sios.jp/ X @noriyukitakei core skill Azureによる クラウドネイティブなアプリ開発 Favorites • • • • スカッシュ スキー 走ること PCデスクまわりの環境改善 books 世界一やさしいRAG構築入門
4. PROBLEM ・ 困りごと 🪄 気づかないうちに、待ち時間が積もる Claude Code でターミナルを何枚も開いて並行作業していると… 🖥 ⏳ ✅ 裏のタスクが見えない 確認待ちを見逃す 完了を見逃す 別ターミナルで走らせたセッ ションが、今どうなっている か分からない 「許可して」「これで良い？ 」の確認待ちに気づかず、 Claude が止まったまま放置 終わっているのに気づかず、次 の指示を出すのが遅れる 結局、確認しに何度もターミナルを巡回 → その巡回こそが一番の無駄 本当は、コーディングエージェントを止めずに最大限働かせ続けたい。
5. SOLUTION ・ そこで… 🪄 Claude Code Watcher です！ 状態が変わった その瞬間に 魔法少女が全力で気づかせてくれる 🔮 ライブ監視 複数セッションの idle / running / waiting / done をリアルタイム表示 💗 魔法少女で気づかせる waiting・done の瞬間に、変身・きらめき・吹き出しでアピール 📣 多層通知 OS通知＋音＋タブ明滅＋ウィンドウ前面化で、どうしても気づかせる
6. ARCHITECTURE 2/2 ・ CCwatcher の構成 🪄 アーキテクチャ Claude Code Watcher 🪄 魔法少女コンソール REST Chrome app モード窓 上：セッション監視 常駐 Node プロセス / 127.0.0.1 Interface REST / SSE 下：魔法少女ステージ (React UI) SSE push LOCAL：PC上の Claude Code 読むだけ supervisor＋各セッション → claude agents --json を 1.5秒ごとにポーリング Core 状態遷移検知（依存ゼロ） Adapter 外部コマンド＋防御的パース DOCKER：devcontainer 内 コンテナ内の Claude Code → docker events で増減検知 → docker exec で --json 購読 ポイント：監視の本体は launcher。Chrome 窓を閉じても監視は続く／公式インターフェースを外から読むだけの非破壊監視。
7. LIVE DEMO ▶ デモ ① ② ③ npx で起動 複数セッションを走らせ る LOCAL と DOCKER のセ ッションがカードで並ぶ waiting / done の瞬間 コマンド一発で常駐＆魔法 少女コンソールが開く 魔法少女が変身・通知・前 面化で気づかせる ✨ 放置ゼロを、その場で体感してください ✨
9. CLOSING 鋭意制作中です！ 魔法少女は、 ✨ まだ変身の練習中🪄 ✨ リリースはもうちょっとだけ、待たれよ。 v1 実装：進行中 npx 配布：準備中 公開：Coming soon ✨ 続報をお楽しみに。 〜 あなたの待ち時間を、魔法少女が見守る日はもうすぐ 〜 ✨