VS Code extension that visualizes your GitHub Copilot agents, skills, and handoffs as an interactive graph. Parses chat sessions to surface usage metrics — which agents run, how often, and how sessions flow.
Work in progress. See ROADMAP.md for planned milestones.
- Static analysis — Parses your
.github/agents/and.github/skills/directories to build a visual graph of agents, their handoff chains, and skills. - Runtime analysis — Reads Copilot chat session JSONL files from VS Code workspace storage to extract usage metrics: which agents ran, how often, what tools they called, and session durations. Detects custom agents and skills from system prompts. Automatically finds sessions across workspace storage hash directories, so it works in devcontainers, WSL2, and after workspace reconnections.
- Token distribution — Donut charts show where tokens are going: by agent, by model, and prompt vs completion ratio. Hover tooltips on agent usage bars reveal average prompt/completion sizes to spot context bloat.
fnm use # or nvm use — picks up .node-version
npm install
npm run build # esbuild bundle
npm test # vitest
npm run watch # esbuild watch modePress F5 in VS Code to launch the Extension Development Host.
src/
extension.ts # Activation, command registration
models/ # TypeScript interfaces (Agent, Skill, Graph)
parsers/ # Pure-function parsers for agents, skills, and sessions
analyzers/ # Graph builder, metrics collector
views/
treeProvider.ts # Sidebar tree view (agents & skills)
graphPanel.ts # Webview panel host for the graph
metricsPanel.ts # Webview panel host for the dashboard
sessionPanel.ts # Webview panel host for session explorer
webview/
graph.ts # Lit + D3.js DAG graph component
metrics.ts # Lit metrics dashboard component
session.ts # Lit session explorer component
