Add payload comparison panel with unified/side-by-side diffs, headers/meta, and ignore-fields

[Prateek32177]

Motivation

• Provide a first-class Payload Comparison UX so users can pick two events and inspect body/headers/metadata differences inline without external tools.
• Make it easy to discover and use compare via a lightweight hint and keyboard shortcuts while preserving existing dashboard flows and theme.

Description

• Added compare UI elements and styles: a discoverability hint, dual-highlighted event rows (Event A blue / Event B amber), and a responsive slide-in compare panel with four tabs (Body Diff, Headers Diff, Metadata, Ignore Fields) and animated transitions.
• Implemented dual-selection behavior (normal click → select A, Cmd/Ctrl+click → select/replace B), Escape to clear, keyboard shortcuts (d, Tab, 1–4, Escape), and synced side-by-side scrolling for column view.
• Implemented an inline LCS-based line diff algorithm (diffLines) with unified and side-by-side renderers, JSON pretty-printing and truncation rules (50kb), binary/empty handling, and header normalization with dynamic-header muting.
• Added Ignore Fields tooling that discovers JSON paths, pre-selects common dynamic fields, and re-runs diffs live when toggled, plus metadata comparison rows with provider detection and timestamp Δ formatting/coloring.

Testing

• Syntax-checked the embedded UI script by extracting it and running node --check /tmp/ui.js, which succeeded after fixes.
• Verified the dashboard script runs without introducing new npm dependencies or backend changes (no automated unit tests were added).

---

Codex Task

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.