Coding Agent Viewer

GitHub Copilot などコーディングエージェントサービスの エージェント定義ファイル を可視化する VS Code 拡張機能です。 ライブ Markdown プレビューと専用のアウトラインビュー、*.agent.md 専用の Agent Collaboration Visualizer(エージェント連携可視化ツール)、ローカル Copilot チャットセッションの Session List & Details(一覧と詳細)、そして Copilot Hooks を使ったセッション/サブエージェントの タイミング計測までを 1 つの拡張機能にまとめています。

エージェント定義の見出し構造をブラウズし、エディタとプレビューを同期スクロールさせ、 カスタムエージェント同士がどのように仕事をハンドオフしているかを有向グラフでその場で編集できます。 さらにローカルの Copilot セッションを一覧・詳細・Mermaid シーケンス図で振り返り、 カスタムエージェントの利用状況を集計できます。

機能

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 List & Details

• Activity Bar の Session List ツリービュー(markdownViewerSessionList)でローカルの Copilot チャットセッションを一覧表示。各行は「セッション名」ラベルと agent · 更新日 の説明を表示
• フィルタ切替:All Sessions / Current Workspace Only(コマンド markdownViewer.setSessionListFilter、選択はワークスペース状態に永続化)
• 近リアルタイム更新:Copilot hook イベント受信時、または Refresh Session List(markdownViewer.refreshSessionList)実行時に ingest パイプラインが新規セッションを取り込み、ビューを更新
• セッションをクリックすると Session Details パネル(markdownViewerSessionAgentOrder)が開き、次の情報を表示
  • 完全なメタデータ(id / セッション名 / タイトル / agent / summary / cwd / host type / 作成・更新タイムスタンプ / ターン数 / ingest 管理情報)
  • セッションのタイミング(開始 / 終了 / 所要時間)と、サブエージェント別タイミング(agent id / type / 開始 / 終了 / 所要時間)— Copilot Hooks から取得
  • セッションで使われた agent の初出順
  • ターンごとの完全な会話(各ターンのタイムスタンプ・モデル・User / Assistant メッセージ本文)

Copilot Hooks timing capture(タイミング計測・オプトイン)

• GitHub Copilot Hooks を使ってセッション/サブエージェントの開始・終了タイミングを計測。同梱の受信スクリプト copilot-hook.js が SessionStart / Stop / SubagentStart / SubagentStop イベントで呼ばれ、イベントごとに JSON Lines レコードを追記
• オプトイン:初回アクティベーション時に同意を確認。Enable Copilot Hook Timing(markdownViewer.installCopilotHook)/ Disable Copilot Hook Timing(markdownViewer.uninstallCopilotHook)でいつでも有効化/無効化でき、選択は globalState に記憶
• 有効化するとワークスペース固有のフック設定 .github/hooks/vscode-doc-viewer.json を書き込み。無効化時はこの拡張が管理するエントリのみ削除し、他のフックには触れない
• 計測結果は拡張のグローバルストレージの hook-timing.jsonl に書き込まれ、ingest パイプラインによってセッションインデックス DB(session-index.db)に取り込まれる

Copilot Session Visualizer

• コマンド markdownViewer.openSessionVisualizer(Open Copilot Session Visualizer)でローカルの GitHub Copilot チャットセッションを Mermaid sequenceDiagram として可視化
• Copilot Chat ストアを直接読むのではなく、拡張機能所有のセッションインデックス DB(session-index.db)を sql.js 経由で読み取る。この DB は ingest パイプラインがローカルの Copilot チャットセッションストアから生成
• ストアは拡張自身のグローバルストレージ相対で解決されるため、VS Code の全バリアント(Stable / Insiders / VSCodium / ポータブル / remote・WSL ホスト)で見つかる
• 各セッションのターン毎の詳細ペインを併設
• スコープ切替:現在のワークスペース/マシン上の全既知セッション
• 一覧件数は markdownViewer.sessionVisualizer.maxSessions(1〜500、既定 50)で調整可能
• UI ズーム・シーケンス図ズームを globalState に永続化。厳格な CSP + レンダリング毎 Nonce、テーマ追従
• 完全オフライン:sql.js の WebAssembly(sql-wasm.wasm)を同梱

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

• Activity Bar の Agent Usage ツリービュー(markdownViewerAgentUsage)で、セッションインデックス DB(session-index.db)からカスタムエージェント別のセッション数を集計表示
• エージェント名・合計セッション数・最終セッション日を表示
• エントリクリックでワークスペース内の対応する .agent.md を直接オープン
• コマンド markdownViewer.refreshAgentUsage(Refresh Agent Usage)で再集計、markdownViewer.setAgentUsageScope(Set Agent Usage Scope)で現在のワークスペース/全ワークスペースを切替
• agent_name が空または NULL のセッションは (unknown) バケットに集約される

コマンド

(markdownViewer.revealHeading と markdownViewer.openSessionAgentOrder は内部コマンドのためコマンドパレットには表示されません。)

設定

ビュー

必要環境

• Visual Studio Code 1.120 以降。Copilot セッション機能は WAL モードの Copilot セッションストアを Node 組み込みの node:sqlite モジュール経由で読むため、1.120 の拡張ホストが提供する Node.js 24 ランタイム を必要とします(package.json の engines.node >= 24)
• (拡張機能をソースからビルドする場合も Node.js 24 以上が必要です)

インストール

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