feature(web/monitor): cross-reference panel with baseline selector

[jamby77]

Summary

PR 13 of 25 in docs/plans/specs/monitor-command/plan-implementation.md. Closes the Phase 3 cross-reference frontend. Stacked on top of #175 (PR 12). Wires the cross-reference engine into the session-detail page: a four-section panel displays new command shapes, hot-key delta, slowlog regressions, and ACL/audit deltas. A baseline selector swaps between 6h / 24h / 7d / same-hour-last-week and triggers a fresh compute via react-query.

Components

• New CrossReferencePanel (one per file).
• 2×2 Section grid:
  • New command shapes: counted, with a script badge for EVALSHA / FCALL / FCALL_RO rows; empty-state copy "every captured command was seen in baseline".
  • Hot-key delta: two sub-lists — newInTopK (rank #N) and rankChanges (#baseline ↑/↓ #capture with arrow); empty-state "No hot-key shifts".
  • Slowlog regressions: per verb, observed/s vs baseline p95/s; empty-state explains the meaning.
  • ACL / audit deltas: audit count + INFO counter deltas, with a note that counter delta is pending session-boundary snapshots (follow-up PR).
• Baseline selector is a <select> bound to react-query so caching works per (sessionId, baseline) tuple — switching back and forth is instant after the first compute. A small "refreshing…" indicator shows when the query is refetching in the background.

API client

• crossReference(sessionId, baseline) and the full CrossReferenceResult TypeScript shape mirrored from the backend (CrossReferenceNewShape, CrossReferenceHotKey, CrossReferenceSlowlogRegression, etc.).

Test plan

• pnpm --filter web exec tsc --noEmit → exit 0
• No new lint errors in touched files
• Run dev: MONITOR_DEV_PREVIEW=true pnpm dev:api and VITE_MONITOR_DEV_PREVIEW=true pnpm dev:web
• Seed slowlog with a GET row ~10 min before session start (see PR 12 verification for the SQL)
• Start a 3 s session and run valkey-cli GET foo + valkey-cli LPUSH x v against Valkey
• Navigate to the session detail page: 4 sections render with values
• newShapes shows LPUSH:2 etc. but NOT GET:1 (baseline covers it)
• Hot-key delta shows foo + x in newInTopK
• Switch baseline selector to same-hour-last-week → panel refetches; GET:1 reappears in newShapes (seeded row is not in last week's hour window); the rest of the values reflect the new window

Notes for reviewers

• Per-baseline caching: react-query keyed by ['monitor', 'cross-reference', sessionId, baseline] so a user toggling 24h ↔ 7d only pays the network round-trip once per window. refetchOnWindowFocus is off to avoid surprising recomputes.
• INFO counter delta UI intentionally renders — with a small footer note explaining what's pending. When PR 12's follow-up lands (session-boundary INFO snapshots), the counters will populate without any UI change required.
• AUTH redaction appears in the hot-key list as (redacted) — that's the server-side MONITOR redaction (Valkey-internal), surfaced unchanged here. Worth flagging as a UX touch-up later: we could suppress (redacted) rows from the hot-key list entirely.
• Net diff: 319 lines. Comfortably within the 400-line budget.
• Screenshots saved to docs/assets/:
  • pr13-cross-reference-24h.png
  • pr13-cross-reference-same-hour-last-week.png

Stacked PR

Base branch is feature/monitor-cross-reference (#175), so the diff shown is ONLY PR 13 changes.

Phase 3 done

Phase 3 (cross-reference engine + UI) is now complete. Next is Phase 4 (PR 14): cluster per-node selector + opt-in fan-out + partial-failure handling.