Architecture

Architecture

Data Flow

Page (MAIN world)     →  Content Script (ISOLATED)  →  Background Worker
console/fetch/errors     postMessage relay              CircularBuffer
                                                        ↓ (on capture)
                                                        CaptureArtifact → Storage
                                                        ↓
                                                        Side Panel / Export

Components

Component	File	Purpose
Page Hooks	entrypoints/injected.content.ts	MAIN world — patches console, fetch, error listeners
Bridge	entrypoints/content.ts	ISOLATED — relays postMessage to background
Background	entrypoints/background.ts	Buffer management, capture trigger, storage
Side Panel	entrypoints/sidepanel/	Replay viewer with tabs
Popup	entrypoints/popup/	Status + capture button
CircularBuffer	shared/circular-buffer.ts	Fixed-size ring buffer (O(1) append)
Sanitizer	shared/sanitizer.ts	Redacts auth headers, passwords
Export	shared/export.ts	AI prompt, JSON, HTML generators

Privacy Design

• All data stays in browser.storage.local
• Sensitive headers auto-redacted before storage
• URL allowlist (default: localhost only)
• Recording indicator always visible