Coding Agent Viewer

GitHub Copilot などコーディングエージェントサービスの エージェント定義ファイル を可視化する VS Code 拡張機能です。 ライブ Markdown プレビューと専用のアウトラインビュー、そして *.agent.md 専用の Agent Collaboration Visualizer(エージェント連携可視化ツール)を 1 つの拡張機能にまとめています。

エージェント定義の見出し構造をブラウズし、エディタとプレビューを同期スクロールさせ、 カスタムエージェント同士がどのように仕事をハンドオフしているかを有向グラフでその場で編集可能です。

機能

Markdown プレビュー & アウトライン

• 編集と同時に再描画される ライブ Markdown プレビュー
• 表示モード 2 種類:横並び(side-by-side)/現在のエディタ列を置き換え
• アウトラインビュー(H1〜H6) を専用 Activity Bar コンテナに表示。見出しクリックでジャンプ
• プレビューや Output パネルにフォーカス移動してもアウトラインは直近の Markdown を保持
• エディタとプレビューの同期スクロール
• シンタックスハイライト付きコードブロック
• 強固なセキュリティを意識した WebView レンダリング

Agent Collaboration Visualizer(エージェント連携可視化)

• ワークスペース内の *.agent.md を自動検出(glob パターンで設定可能)
• エージェント間の handoffs を 有向グラフ として cytoscape + cytoscape-dagre で描画(上から下の階層レイアウト)
• Agent Detail ツリービュー に現在のエージェントファイルの name, namespace, description, tools, handoffs を表示
• ツールバー:検索、ネームスペースフィルタ(ユーザー単位で永続化)、エッジ追加、サブツリーフォーカス、SVG / PNG エクスポート
• グラフから直接編集:エッジをダブルクリックでラベル変更、右クリックで削除、Add edge で新規追加。すべて YAML フロントマターへ書き戻し
• ノードクリックで該当 .agent.md を最小の非グラフエディタ列に開く(余計な分割を作らない)
• テーマ対応、厳格な CSP、レンダリング毎の Nonce、楽観的編集(拡張ホスト拒否時はロールバック)

Copilot Session Visualizer

• コマンド markdownViewer.openSessionVisualizer(Open Copilot Session Visualizer)でローカルの GitHub Copilot Chat セッションを Mermaid sequenceDiagram として可視化
• 各セッションのターン毎の詳細ペインを併設
• Windows / macOS / Linux 対応(VS Code Insiders のユーザフォルダを自動解決。安定版 VS Code は現時点で未対応)
• スコープ切替:現在のワークスペース/既知の全セッション
• 一覧件数は markdownViewer.sessionVisualizer.maxSessions(1〜500、既定 50)で調整可能
• sql.js を WebAssembly 同梱でオフライン動作、ズーム位置を永続化

Agent Usage(エージェント利用状況)

• Activity Bar の Agent Usage ツリービューで、ローカル Copilot Chat セッションストアからカスタムエージェント別のセッション数を集計表示
• エージェント名・合計セッション数・最終セッション日(ISO 形式)を表示
• エントリクリックでワークスペース内の対応する .agent.md を直接オープン
• コマンド markdownViewer.refreshAgentUsage(Refresh Agent Usage)で再集計
• agent_name が空または NULL のセッションは (unknown) バケットに集約される

コマンド

設定

必要環境

• Visual Studio Code 1.120 以降
• (拡張機能をソースからビルドする場合は Node.js 24 以上が必要)

インストール

VS Code Marketplace から「Coding Agent Viewer」を検索するか、ページ上部の「Marketplace で見る」ボタンから直接ストアを開いてください。