Coding Agent Viewer

A VS Code extension that visualizes agent definition files for coding agent services such as GitHub Copilot. It combines a live Markdown preview, a dedicated outline view, an Agent Collaboration Visualizer for *.agent.md files, a Session List & Details view for local Copilot chat sessions, and Copilot Hooks timing capture for sessions and subagents — all in a single extension.

Browse the heading structure of agent definitions, scroll the editor and preview in sync, and edit how custom agents hand off work to each other directly on a directed graph. You can also browse, inspect, and replay local Copilot sessions as Mermaid sequence diagrams, and aggregate how often each custom agent is used.

Features

Markdown Preview & Outline

• Live Markdown preview that re-renders as you type
• Two display modes: side-by-side / replace the current editor column
• Outline view (H1–H6) in a dedicated Activity Bar container with click-to-jump
• The outline keeps the most recent Markdown even when focus moves to the preview or Output panel
• Synchronized scrolling between editor and preview
• Syntax-highlighted code blocks
• WebView rendering designed with strong security in mind

Agent Collaboration Visualizer

• Auto-detects *.agent.md in the workspace (configurable glob pattern)
• Renders inter-agent handoffs as a directed graph using cytoscape + cytoscape-dagre (top-to-bottom hierarchical layout)
• Agent Detail tree view displays name, namespace, description, tools, and handoffs of the current agent file
• Toolbar: search, namespace filter (persisted per user), add edge, subtree focus, SVG / PNG export
• Edit directly from the graph: double-click an edge to rename, right-click to delete, "Add edge" to create new ones. All changes are written back to YAML front matter
• Clicking a node opens the corresponding .agent.md in the smallest non-graph editor column (no extra splits)
• Theme-aware, strict CSP, per-render nonces, optimistic edits (rolled back if the extension host rejects)

Copilot Session List & Details

• The Session List tree view in the Activity Bar (markdownViewerSessionList) lists local Copilot chat sessions. Each row shows a session-name label and an agent · updated date description
• Filter toggle: All Sessions / Current Workspace Only (command markdownViewer.setSessionListFilter; the selection is persisted in workspace state)
• Near real-time updates: the ingest pipeline imports new sessions and refreshes the view when a Copilot hook event arrives or when Refresh Session List (markdownViewer.refreshSessionList) is run
• Clicking a session opens the Session Details panel (markdownViewerSessionAgentOrder) showing
  • Full metadata (id / session name / title / agent / summary / cwd / host type / created & updated timestamps / turn count / ingest bookkeeping)
  • Session timing (start / end / duration) and per-subagent timing (agent id / type / start / end / duration) — captured from Copilot Hooks
  • The first-seen order of agents used in the session
  • The complete per-turn conversation (each turn's timestamp, model, and User / Assistant message bodies)

Copilot Hooks timing capture (opt-in)

• Uses GitHub Copilot Hooks to measure session/subagent start and stop timing. The bundled receiver script copilot-hook.js is invoked on SessionStart / Stop / SubagentStart / SubagentStop events and appends a JSON Lines record per event
• Opt-in: consent is requested on first activation. You can enable/disable it at any time via Enable Copilot Hook Timing (markdownViewer.installCopilotHook) / Disable Copilot Hook Timing (markdownViewer.uninstallCopilotHook), and the choice is remembered in globalState
• When enabled, it writes the workspace-specific hook config .github/hooks/vscode-doc-viewer.json. When disabled, it removes only the entry this extension manages and leaves other hooks untouched
• The captured timing is written to hook-timing.jsonl in the extension's global storage and ingested into the session index DB (session-index.db) by the ingest pipeline

Copilot Session Visualizer

• The command markdownViewer.openSessionVisualizer (Open Copilot Session Visualizer) visualizes local GitHub Copilot chat sessions as Mermaid sequenceDiagram
• Instead of reading the Copilot Chat store directly, it reads the extension-owned session index DB (session-index.db) via sql.js. That DB is produced by the ingest pipeline from the local Copilot chat session store
• Because the store is resolved relative to the extension's own global storage, it is found across all VS Code variants (Stable / Insiders / VSCodium / portable / remote & WSL hosts)
• Includes a per-turn detail pane for each session
• Scope toggle: current workspace / all known sessions on the machine
• List size is configurable via markdownViewer.sessionVisualizer.maxSessions (1–500, default 50)
• Persists UI zoom and sequence-diagram zoom in globalState; strict CSP with per-render nonces, theme-aware
• Fully offline: ships sql.js WebAssembly (sql-wasm.wasm)

Agent Usage

• The Agent Usage tree view in the Activity Bar (markdownViewerAgentUsage) aggregates session counts per custom agent from the session index DB (session-index.db)
• Shows the agent name, total session count, and last session date
• Click an entry to open the matching .agent.md in the workspace
• The command markdownViewer.refreshAgentUsage (Refresh Agent Usage) re-aggregates the data, and markdownViewer.setAgentUsageScope (Set Agent Usage Scope) switches between the current workspace and all workspaces
• Sessions whose agent_name is blank or NULL are grouped under the (unknown) bucket.

Commands

(markdownViewer.revealHeading and markdownViewer.openSessionAgentOrder are internal commands and are not shown in the Command Palette.)

Settings

Views

Requirements

• Visual Studio Code 1.120 or later. The Copilot session features read the WAL-mode Copilot session store via Node's built-in node:sqlite module, which requires the Node.js 24 runtime provided by the 1.120 extension host (engines.node >= 24 in package.json)
• (Building from source also requires Node.js 24 or later.)

Installation

Search for "Coding Agent Viewer" in the VS Code Marketplace, or open the store directly from the "View on Marketplace" button at the top of the page.