Coding Agent Viewer

A VS Code viewer that surfaces agent definitions for GitHub Copilot and other coding agent services, making their behavior and collaboration easy to inspect. It pairs a live Markdown preview with a dedicated outline view and an Agent Collaboration Visualizer for *.agent.md files, so you can browse the heading structure of an agent definition, keep editor and preview scrolled together, and explore how your custom agents hand off work to one another as a directed graph you can edit in place. It also bundles a Copilot Session Visualizer that replays your local GitHub Copilot chat sessions as Mermaid sequence diagrams, so you can review past Copilot conversations turn by turn, plus a Session List with a full Session Details panel and optional Copilot Hooks timing capture that surfaces session and subagent durations.

Features

Markdown preview & outline

• Live Markdown preview that re-renders as you type.
• Two display modes: side-by-side, or replace the current editor column.
• Outline view (H1–H6) in a dedicated Coding Agent Viewer Activity Bar container; click a heading to jump to it.
• Outline keeps showing the last active Markdown document even when focus moves to the preview, the Output panel, or other non-Markdown views.
• Synchronized scrolling between editor and preview.
• Syntax-highlighted fenced code blocks.
• ```mermaid fenced code blocks are rendered as diagrams inside the preview, using a vendored Mermaid bundle (no remote assets) with a strict securityLevel: 'strict' configuration and a theme that follows the current VS Code color theme.
• Local image references in the Markdown source are rewritten through webview.asWebviewUri so relative and absolute file paths display inside the preview; http(s):, data:, vscode-webview:, and file: sources are passed through unchanged.
• Hardened, secure WebView rendering.

Agent Collaboration Visualizer

• Discovers *.agent.md files in the workspace (configurable glob) and renders inter-agent handoffs as a directed graph using cytoscape + cytoscape-dagre (top-to-bottom layered layout).
• Agent Detail tree view in the Activity Bar shows the parsed name, namespace, description, tools, and handoffs of the current agent file; stays visible whenever any .agent.md document is open.
• Toolbar controls: Search, Namespace filter (persisted per user), Add edge (interactive source → target picker), Focus subtree, Export SVG, Export PNG.
• Edit handoffs directly from the graph: double-click an edge to rename its label, right-click to remove it, or use Add edge to create one. All edits are written back to the source agent's YAML frontmatter.
• Click any node to open its source .agent.md file in the smallest non-graph editor column.
• Theme-aware rendering with strict Content Security Policy, per-render nonce, and optimistic edits with rollback on extension-host rejection.

Copilot Session Visualizer

• Reads from an extension-owned session index database (session-index.db) via sql.js, instead of reading the Copilot Chat store directly. The index database is populated by the ingest pipeline (see Copilot Hooks timing capture below) from the local GitHub Copilot Chat session store, which is located relative to the extension's own global storage so it is found across VS Code variants (Stable, Insiders, VSCodium, portable installs, and remote/WSL hosts).
• Renders each Copilot chat session as a Mermaid sequenceDiagram with a side-by-side turn-by-turn details pane.
• Scope toggle between the current workspace's sessions and all known sessions across your machine.
• Persisted UI zoom and sequence-diagram zoom across sessions, stored in the extension's globalState.
• Theme-aware rendering with strict Content Security Policy and a per-render nonce.
• Fully offline: the sql.js WebAssembly module (sql-wasm.wasm) is vendored inside the extension, so no remote assets are fetched at runtime.

Copilot Session List & Details

• Session List tree view in the Activity Bar (markdownViewerSessionList) lists your local Copilot chat sessions, read from the extension-owned session index database. Each row shows a session-name label and a compact agent · updated-date description.
• Filter toggle between All Sessions and Current Workspace Only (markdownViewer.setSessionListFilter); the choice is persisted in workspace state.
• The list updates in near real time: when Copilot hook events arrive — or when you use Refresh Session List (markdownViewer.refreshSessionList) — the ingest pipeline pulls newly created sessions out of the Copilot store and the view refreshes.
• Click a session to open the Session Details panel, which shows every piece of information stored for that session:
  • Full metadata: id, session name, title, agent, summary, cwd, host type, created/updated timestamps, turn count, and ingest bookkeeping.
  • Session timing (started, ended, duration) and per-subagent timing (agent id, type, started, ended, duration) captured from Copilot hooks.
  • The first-seen order of agents used in the session.
  • The complete conversation, turn by turn, with each turn's timestamp, model, and the User and Assistant message bodies.

Copilot Hooks timing capture

• Optionally captures session and subagent start/end timing using GitHub Copilot Hooks. A bundled receiver script (copilot-hook.js) is invoked by Copilot on the SessionStart, Stop, SubagentStart, and SubagentStop events and appends one JSON Lines record per event.
• Opt-in: on first activation the extension asks for consent before enabling capture. Enable or disable it at any time with the Enable Copilot Hook Timing (markdownViewer.installCopilotHook) and Disable Copilot Hook Timing (markdownViewer.uninstallCopilotHook) commands; the choice is remembered in globalState.
• Enabling writes a workspace-scoped hook configuration to .github/hooks/vscode-doc-viewer.json; disabling removes only the entries this extension manages and leaves any other hooks untouched.
• Captured timing is written to hook-timing.jsonl in the extension's global storage and then folded into the session index database (session-index.db) by the ingest pipeline, where the Session List, Session Details, Session Visualizer, and Agent Usage views read it.

Agent Usage

• Agent Usage tree view in the Activity Bar (markdownViewerAgentUsage) aggregates how many Copilot chat sessions each custom agent has been involved in, using the same extension-owned session index database as the Session List and Session Visualizer.
• Each row shows the agent name, session count, and the date of the most recent session. Sessions whose agent_name is blank or NULL are collected under the (unknown) bucket.
• Click an agent item whose definition is discoverable in the workspace to jump directly to its .agent.md source file.
• Use the Refresh toolbar button or run Coding Agent Viewer: Refresh Agent Usage (markdownViewer.refreshAgentUsage) to reload the counts.

Getting started — Markdown preview

1. Open a Markdown (.md) file.
2. Open the Command Palette and run Coding Agent Viewer: Open Preview — or click the open-preview icon in the Coding Agent Viewer view in the Activity Bar.
3. Edit the document; the preview updates automatically and scrolls in sync with the editor.
4. Click any heading in the Outline view to jump to it in both the editor and the preview.

Getting started — Agent Collaboration Visualizer

1. Open any .agent.md file in your workspace. The Agent Detail view appears in the Coding Agent Viewer Activity Bar container.
2. From the Agent Detail view's title bar, click Open Agent Collaboration Graph. The graph opens beside the active editor and lists every discovered agent as a node, with edges drawn from each agent's handoffs entries.
3. Use the toolbar to navigate and edit the graph:
   • Search — filter nodes by name or display name.
   • Namespaces — toggle namespace checkboxes; the selection is saved to markdownViewer.namespaceFilter.
   • Add edge — pick a source node, then a target node, then enter a handoff label; the edge is written to the source agent's YAML frontmatter.
   • Focus subtree — with a node selected, hide everything except that node and its outgoing-reachable descendants. Click again ("Show all") to restore the full graph.
   • Export SVG / Export PNG — save the current visible graph through a VS Code save dialog.
4. Edit existing edges directly:
   • Double-click an edge to rename its handoff label.
   • Right-click an edge to remove the handoff.
5. Click any non-placeholder node to open its source .agent.md file in the smallest non-graph editor column (no extra splits are created).

Getting started — Copilot Session Visualizer

1. Open the Command Palette and run Coding Agent Viewer: Open Copilot Session Visualizer. The panel opens beside the active editor.
2. The session list is populated from the extension-owned session index database (session-index.db), which the ingest pipeline fills from your local Copilot Chat session store. The store is located relative to the extension's own global storage, so it is found across VS Code variants (Stable, Insiders, VSCodium) and remote/WSL hosts.
3. Use the scope toggle in the panel to switch between current workspace sessions and all known sessions on this machine.
4. Click a session in the list to render its turns as a Mermaid sequenceDiagram. The details pane next to the diagram shows the turn-by-turn breakdown of the conversation.
5. Cap the size of the session list with markdownViewer.sessionVisualizer.maxSessions (number, range 1–500, default 50).

Getting started — Copilot Session List & Details

1. Open the Coding Agent Viewer container in the Activity Bar and find the Session List view, which lists the Copilot sessions known to the extension's session index database.
2. Use the filter button (Set Session List Filter) to switch between All Sessions and Current Workspace Only.
3. Click a session to open the Session Details panel beside the editor, showing the session's full metadata, timing, subagent timing, agent order, and complete conversation.
4. Use the Refresh Session List button to pull in any sessions created since the view last loaded.

Getting started — Copilot Hooks timing capture

1. On first activation, choose Enable when prompted to capture Copilot session and subagent timing. You can also decide later using the commands below.
2. To enable manually, run Coding Agent Viewer: Enable Copilot Hook Timing from the Command Palette; this writes .github/hooks/vscode-doc-viewer.json in the current workspace.
3. To stop capturing, run Coding Agent Viewer: Disable Copilot Hook Timing.
4. Captured timing is stored as hook-timing.jsonl in the extension's global storage and appears as session and subagent durations in the Session Details panel and the Session Visualizer.

Commands

Configuration

Views

Requirements

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

For contributors: building this extension from source also requires Node.js 24 or later.

Feedback

Found a bug or have a feature request? Please file an issue at https://github.com/uenohajime/vscode-doc-viewer/issues.

Release notes

See CHANGELOG.md.

License

See LICENSE.