RecBug for VS Code

Inspect a bug report, reproduce it, or hand it to an AI assistant.

Use

Run RecBug: Open Bug Report for a .recbug archive, evidence ZIP, or bug_report.json. Use Open Report Folder for extracted evidence, or Open Sample Report to try the bundled example.

The report has two panes: recording, action frames, and attachments on the left, report and evidence on the right. Attachments use compact image, video, or file thumbnails; click a tile to inspect its file beside the report. Hover for its full name, type, and size. Attachments are loaded from the archive manifest or an exported attachments/ folder. Resize the divider with a pointer or arrow keys. Narrow editors stack the panes. Inspector tabs stay on one line with horizontal scrolling and left/right controls when needed. Keyboard navigation reveals the selected tab.

• Overview: report details, editable description, expected and actual outcomes, and test generation.
• Session events: chronological actions, every console level, request starts/responses, captured WebSocket frames, page visits, recording pauses, memory samples, and captured snapshots. Events near the current video time are highlighted together. Type filters stay on a single scrollable row with controls. Recording only appears when pause or resume events were captured. Other only appears for unrecognized event types in imported reports. Search, follow playback, seek to an event, or inspect its network request.
• Actions, Console: search, filter, inspect, and seek to evidence.
• Network: sortable request table with Fetch / XHR and WebSocket filters, errors-only filtering, keyboard row selection, request waterfall, and an inspector for Headers, Payload, Response, Timing, Cookies, and captured WebSocket messages. The Name column stays visible during horizontal scrolling. Selecting a row opens its details; Seek to request changes video position. Copy cURL and Generate MSW always use the original request index.
• Storage: select entries, groups, or all captured storage and copy JSON. Redacted storage stays redacted. Empty storage is distinguished from a missing capture.
• Performance: page timings, runtime data, network totals, permissions, memory history, and resource timings. Missing and invalid measurements are labeled separately.
• AI handoff: choose Cursor, Antigravity, VS Code, or Codex; select which evidence and static files to attach, auto-detect the host IDE, and preview, attach, copy, or export a brief.

Choose a test framework and Generate test to open a reproduction draft. Drafts start disabled (test.fixme / it.skip) until selectors and assertions are reviewed. No generated code runs automatically.

Use Edit on Description, Expected, or Actual to revise a report, then Save (or Ctrl/Cmd+Enter); Cancel discards the draft. All three fields support Markdown. Saved revisions display Modified, are local to this report and editor installation, survive reopening, and update other open copies, field copying, generated tests, and AI previews, copies, exports, and handoffs. The captured archive stays unchanged. Opening different report contents at the same path starts with those report contents.

Searches, filters, disclosures, AI choices, and scroll positions remain in place while switching tabs. The selected tab, test framework, pane width, and separate timeline/media positions are saved for editor restoration. New reports reset their evidence panels.

Session events read timeline.json references together with the evidence files and preserve explicit exported clip times, pauses, and trimming. Unknown timestamps are listed as Time not captured. Storage shows the final snapshot and any exported start/navigation/resume snapshots and observed changes. Reports without history show only their final snapshot; the viewer never invents key-creation times. Timing breakdowns, cookies, and socket frames appear only when present in the archive. This viewer inspects recorded traffic and does not issue or replay requests.

Network, Console, Storage, and Performance memory history also follow video playback. All entries within one second of the current time highlight together; active requests remain highlighted for their captured duration. Playback brings the nearest entry into view while preserving request and storage selections. Storage highlights snapshots and captured history entries around their recorded times; missing times remain unhighlighted.

The video seek track marks console errors and failed network requests in red. Hover or focus a marker to preview its errors; click to jump to that video time. Nearby errors group into a count marker, with individual timestamps and Inspect console or Inspect request links in the popup. Markers follow the exported clip's pause/trim timing and resize with the evidence pane. Untimed errors and errors outside the video are omitted. Failed requests use response completion time; when only a request start is captured, the popup labels that limitation.

AI handoff

The preview, clipboard, chat attachment, and Markdown export use the same brief. JSON exports use the versioned recbug-ai-context structure. Both formats include reporter observations, original evidence entry references, capture limitations, integrity diagnostics, and omission counts. They contain a diagnostic summary, not attached media or repository source.

Briefs are bounded to 24,000 characters. Failed response previews are opt-in and individually bounded. Cookies, storage values, request headers/bodies, input values, media, and repository contents are excluded. Best-effort text redaction does not guarantee that every captured value is safe to share. The original evidence is unchanged.

The active host IDE (Antigravity, Cursor, or VS Code) is auto-detected and pre-selected by default. Codex thread is available as an in-editor extension option. Developers can select/deselect individual evidence files (HAR HTTP telemetry, console logs, user actions, storage state, screenshots, and submitted attachments) to attach directly into the chat session alongside the diagnostic brief.

Commands are detected in the running editor. Cursor and Antigravity adapters use editor-specific commands that may change. The Codex command is described in official OpenAI documentation.

If a command is unavailable or fails, the brief opens in a beside editor tab and is copied to the clipboard for manual attachment or paste. Check the receiving chat attachment before submitting your request. RecBug does not submit a prompt automatically or require an AI backend or API key.

The Command Palette (Cmd+Shift+P / Ctrl+Shift+P) offers Open Bug Report, Open Recent Report, Open Report Folder, Open Sample Report, Generate Reproduction Test, Generate MSW Mock Handlers, Find Related Source, Copy AI Context, Add Diagnostic Brief to AI Chat, Export AI Diagnostic Brief, Refresh Reports, and Clear Report Cache. Those actions use the last active open report, with response previews off.

Architecture

Each panel mounts once per report. Switching tabs reuses its DOM; report replacement disposes its subscriptions. Main navigation state uses the VS Code webview state API. Evidence entry indexes remain stable across filtering, display, and AI export.

The report viewer uses the RecBug design system, based on the Network, Storage, and Performance panels. tokens.css defines theme colors, spacing, typography, and sizing; components.css defines shared cards, controls, badges, disclosures, and data displays. layout.css owns the shell, while panel and media styles only handle their specific layouts and states.

Keep screen copy to report data, action names, essential field labels, and actionable errors. Use accessible names for icon controls. Native sidebar trees, dialogs, and Command Palette entries use VS Code's own theme and controls. Avoid adding dependencies or abstraction layers for a single screen.

Settings and cache

• recbug.preferredTestRunner: Playwright or Cypress.
• recbug.enableAstRouteMatching: existing setting for filesystem and route-string heuristics; it does not parse an AST.

Clear Report Cache removes extracted evidence and generated handoff briefs after reports are closed. It keeps original files, explicitly saved exports, local report revisions, and recent history. History holds up to 30 paths/titles/priorities/open times. Hand-off files stay in extension-local storage until cleared.

Imports isolate archives with identical report IDs, check original ZIP paths and streamed byte quotas, reject evidence-folder symlinks, and remove incomplete extraction folders. Optional malformed telemetry produces per-file diagnostics while valid evidence remains available. This is not complete envelope-schema validation.

Checksums support SHA-256 (raw or sha256: prefixed) and fnv1a32:. FNV is an accidental-change check, not cryptographic verification. Missing or unsupported checksums and credential scans remain unknown.

Verify

From the monorepo root:

npm run test:vscode
npm run build:vscode

The build checks TypeScript before bundling the extension host and webview. Open the monorepo, press F5 with Run RecBug Extension (F5) selected, and run RecBug: Open Sample Report in the development host for a native smoke test.

Tests cover import boundaries and recovery, history, commands, source paths, playback/timeline sync, keyboard navigation, state retention, generated-code safety, bounded/redacted AI packages, attachment adapters, and export/cancellation/fallback behavior. Browser rendering and mocked host tests do not establish native chat attachment interoperability. See AUDIT.md for the remaining limitations.