Agent Flow レビュー: Claude Code と Codex の実行過程を可視化する VS Code 拡張
Real-time visualization of Claude Code agent orchestration — see your agents think, branch, and coordinate as they work.
ひと目でわかる
- これは何？
- Claude Code と Codex のセッションを自動検出し、ツール呼び出しの分岐と復帰をリアルタイムのノードグラフで表示する。ブラックボックス化したエージェント実行を追う用途に絞られており、コスト削減や自動化の道具ではない。
- 誰に向いている？
- 導入を検討すべきなのは、Claude Code または Codex のツール呼び出し順序を目で追いたい開発者と、サブエージェントの分岐がどこで無駄になっているかを確認したい人である。逆に、本番パイプラインの監視や複数マシンにまたがるセッションの集約を期待する用途には向かない。
- 商用利用できる？
- できます。Apache-2.0 は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 66 日前です。
- 何の言語で書かれている？
- 主に TypeScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月15日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
Agent Flow が埋めるのは実行ログの空白
Claude Code は強力だが、その実行はブラックボックスだと README は述べている。見えるのは最終結果だけで、途中の経過は見えない。Agent Flow はこの経過を可視化するために作られた。作者はゲーム制作プラットフォーム CraftMyGame の開発中にエージェントの挙動をデバッグする必要に迫られ、それを視覚化する道具として本プロジェクトを書き、その後公開したと README に記している。
対象読者は、エージェントが問題をどう分解し、どのツールに手を伸ばし、サブエージェント同士がどう連携するかを観察したい開発者である。用途として README が挙げるのは四つ。エージェントの挙動理解、ツール呼び出し連鎖のデバッグ、時間がどこに消えているかの把握、そしてプロンプトの書き方を観察から学ぶこと。逆に言えば、エージェントに作業を代行させて成果物だけを得たい人にとっては、このツールは何もしてくれない。表示するだけで、実行はしない。
イベントはどこから来て、どう画面に届くのか
入力経路は三つある。第一に Claude Code のフック。Agent Flow は軽量な HTTP フックサーバーを立て、Claude Code からイベントを直接受け取る。README はこれをゼロ遅延のストリーミングと表現している。第二に Codex の rollout ファイル。~/.codex/sessions/**/rollout-*.jsonl を tail し、CODEX_HOME を尊重する。ここからツール呼び出し、推論、そして Codex 自身のイベントストリームが持つ権威あるトークン数を取り出すと README は説明している。第三に任意の JSONL イベントログ。agentVisualizer.eventLogPath にファイルを指定すると、それを tail して可視化する。
pnpm run dev の経路では、Next.js の開発サーバーとイベントリレーが同時に起動し、リレーが受け取ったイベントを SSE でブラウザに流す。表示側はインタラクティブなノードグラフで、ツール呼び出し、分岐、復帰の流れを描く。キャンバスはパンとズームができ、エージェントやツール呼び出しをクリックすると詳細を確認できる。加えてタイムライン、ファイル注目度のヒートマップ、メッセージのトランスクリプトの各パネルが用意されている。複数セッションはタブで並行して追える。
3 つの入口と、それぞれで異なる起動コマンド
VS Code を使わない最短経路は npx agent-flow-app である。ブラウザでビジュアライザが立ち上がるので、別のターミナルで Claude Code セッションを開始すればイベントが流れ込む。オプションは --port（既定 3001）、--no-open、--verbose の三つ。
ソースから動かす場合は git clone のあと pnpm i、pnpm run setup、pnpm run dev の順で、http://localhost:3000 を開く。setup は Claude Code フックの設定を一度だけ行う工程である。
VS Code 拡張として使う場合は、インストール後にコマンドパレットから Agent Flow: Open Agent Flow を実行し、ワークスペースでセッションを開始すれば自動検出される。フックの設定はパネルを初めて開いたときに自動で行われ、手動でやり直したいときは Agent Flow: Configure Claude Code Hooks を実行する。ショートカットは Mac が Cmd+Alt+A、Windows と Linux が Ctrl+Alt+A。拡張の要件は VS Code 互換 IDE の 1.85 以上で、Cursor や Windsurf も README は例として挙げている。
agentVisualizer.runtime と CODEX_HOME の使い分け
既定では Claude Code と Codex の両方を同時に監視する。Claude Code は ~/.claude/projects/、Codex は ~/.codex/sessions/ が対象で、セッションは並べて表示され、ランタイムごとにタグが付く。片方しか使っていない場合、もう片方は無害な no-op で、見た目にも操作にも影響しないと README は説明している。
片方に絞りたい場合は入口ごとに方法が違う。VS Code 拡張では agentVisualizer.runtime を auto、claude、codex のいずれかに設定する。pnpm run dev と npx agent-flow-app では環境変数 AGENT_FLOW_RUNTIME を claude または codex に設定する。Codex を非標準の場所にインストールしている場合は CODEX_HOME を設定する。
他の設定キーは次の通り。agentVisualizer.devServerPort の既定は 0 で、これは本番モードを意味する。agentVisualizer.eventLogPath の既定は空文字。agentVisualizer.autoOpen の既定は false で、セッション開始時に自動で開きたい場合だけ true にする。開発用スクリプトは用途ごとに分かれており、pnpm run dev:demo はモックデータで起動し、pnpm run dev:relay はリレーサーバーを単体で動かす。ビルドは pnpm run build:all のほか、web、extension、webview を個別に指定できる。
監視ツールであって、制御ツールではない
最初に押さえるべき制約は、Agent Flow が表示しかしないという点である。エージェントの実行を止める、再試行する、ツール呼び出しを差し替えるといった操作は、README の記載範囲には見当たらない。デバッグの道具として割り切る必要がある。
二つ目は入力の性質に由来する制約である。Codex 側は rollout ファイルの tail なので、ファイルが書かれて初めてイベントが見える。Claude Code 側のフックも、設定が済んでいないセッションのイベントは拾えない。pnpm run setup を実行し忘れた状態や、フックを無効化した環境では、グラフは空のままになる。
三つ目はスコープである。セッションの探索先は ~/.claude/projects/ と ~/.codex/sessions/ というローカルパスで、リモートやコンテナ内のセッションを集約する仕組みは README に記載がない。CI や本番環境で動くエージェントの監視に使うのは想定外といえる。
四つ目はプライバシー面。公開されている npx agent-flow-app のバイナリに限り、匿名の利用テレメトリが既定で有効になっている。pnpm run dev と VS Code 拡張は何も送信しないと README は明記している。オプトアウト方式である以上、npx 経由で試す前にこの違いを把握しておきたい。
LangSmith や OpenTelemetry との設計差
同じ「エージェントの実行を見る」という目的でも、LangSmith や OpenTelemetry 系のトレーシングはアプリケーション側に計装を埋め込み、トレースを外部のバックエンドに送って集約する。複数プロセスや複数マシンにまたがる相関や、長期保存と検索に向く。
Agent Flow の取り方は逆である。Claude Code と Codex という特定のランタイムがすでに吐いているイベント、すなわちフックと rollout ファイルを、計装を書かずに読む。だから自分のマシンで動かしているセッションをその場で眺める用途には即効性がある。一方で、任意の自作エージェントに組み込むには、JSONL 形式のイベントログを自分で用意するか、Claude Code か Codex を使う必要がある。汎用のトレーシング基盤ではなく、この二つのランタイム専用のビューアだと理解しておくのが正確である。
更新の履歴と Apache-2.0 の意味
リリースは 2026 年 4 月の v0.8.0 で Codex ランタイム対応が入り、7 月の v0.9.0 で新しいモデル対応と Codex 検出の修正、続く v0.9.1 で Windows における Claude Code セッション検出の修正が入っている。0.x 系が続いており、破壊的変更の可能性は残ると見るのが妥当である。
ライセンスは Apache-2.0。特許条項を含む寛容なライセンスで、社内ツールへの組み込みや改変配布の余地がある。ただし本記事は法的助言ではないし、同梱される依存パッケージのライセンスは別途確認が必要である。テレメトリのオプトアウト方法についても、README の記載はここで引用した範囲までで、具体的な無効化手順は示されていない。導入前にリポジトリの該当箇所を直接確認したい。
維持コストの面では、入力が Claude Code と Codex の内部ファイル形式に依存している点が効く。どちらかのランタイムがイベントの出力形式を変えれば、追従の修正が必要になる。実際、v0.9.0 と v0.9.1 はどちらも検出まわりの修正であり、この種の追従が継続的に発生することをうかがわせる。
編集部の結論
導入を検討すべきなのは、Claude Code または Codex のツール呼び出し順序を目で追いたい開発者と、サブエージェントの分岐がどこで無駄になっているかを確認したい人である。逆に、本番パイプラインの監視や複数マシンにまたがるセッションの集約を期待する用途には向かない。最初に確認すべきは、npx agent-flow-app を既定ポート 3001 で起動した状態で自分のセッションが検出されるか、そして VS Code 拡張の agentVisualizer.runtime を auto のままにするか claude か codex に絞るかである。npx 版のみ既定で匿名テレメトリが有効なので、送信を避けたい場合はこの点を導入判断の前に確認しておく必要がある。
コミュニティノート