Session tracing: waterfall visualization of request execution

[23min]

Summary

Visualize session execution as a waterfall/flamechart showing where time is spent, what tools are called, and where bottlenecks occur. This gives insight into the AI assistant's execution flow within a session.

Scope

Based on ROADMAP.md Milestone 11, adapted to current architecture:

Phase 1: Basic Waterfall

• Trace data model — TraceSpan / SessionTrace with spans for requests, tool calls, subagents, gaps, and errors
• Trace builder: Copilot — Convert sessions to traces using native totalElapsed and firstProgress timing data
• Trace builder: Claude — Derive request durations from message timestamps; parse subagent sidechains
• Waterfall webview — D3.js horizontal waterfall chart: requests as bars on a time axis, annotated with agent/model/tokens/tools

Phase 2: Enrichment

• Session health indicators — Rate limiting markers, long gaps between requests, timeout detection
• Tool call breakdown — Nested tool-call spans within requests (where timing data is available)
• Subagent execution — Render subagent/sidechain execution as nested spans (Copilot runSubagent children via subAgentInvocationId, Claude subagent files via parentUuid)

Phase 3: Context Growth (stretch)

• Context pressure overlay — Show cumulative token count growing across requests
• Requires per-request token data (available from usage.promptTokens / completionTokens)

Available Timing Data

Copilot (JSONL)

• result.timings.totalElapsed — Total request duration (ms)
• result.timings.firstProgress — Time to first token (ms)
• Request timestamps from JSONL line ordering
• Tool call ordering within toolCallRounds

Claude (JSONL)

• Message timestamps per turn
• Subagent start/end events (subagent_tool_call_begin / subagent_turn_end)
• No native per-tool timing

Codex (JSONL)

• exec.started_at / exec.completed_at on tool executions
• token_count cumulative snapshots

Files

• New: src/models/trace.ts — TraceSpan, SessionTrace interfaces
• New: src/analyzers/traceBuilder.ts — Per-provider trace construction
• New: webview/waterfall.ts — Lit + D3 waterfall component
• New: src/views/waterfallPanel.ts — VS Code webview panel
• src/extension.ts — New command registration