Add visual regression coverage

documentations/refactor/21-mvp-completion-checklist.md

@@ -37,6 +37,8 @@ npm --prefix frontend test -- --run
 npm --prefix frontend run build
 npm run test:e2e
 npm run test:e2e:prod
+npm run test:visual
+npm run test:visual:prod
 ```
 
 ### Dev proxy smoke (Vite + Go API)
@@ -82,9 +84,27 @@ This runs `playwright.prod.config.ts`, which builds the frontend, seeds
 exercises Race Hub, Data Library, Live empty state, and nav links against the
 built SPA.
 
-## Remaining Post-MVP Work
+### Visual regression (Playwright screenshots)
 
-- Add real visual-regression checks for the React screens.
+Screenshot baselines for Race Hub, Data Library, and Live (disabled-live empty
+state) at desktop, tablet, and mobile viewports:
+
+```bash
+npm run test:visual
+npm run test:visual:prod
+```
+
+Refresh baselines after intentional UI changes:
+
+```bash
+npm run test:visual:update
+npm run test:visual:prod:update
+```
+
+Snapshots are stored under `tests/visual/__snapshots__/`. See
+[22 Phase 14 Visual Regression](22-phase-14-visual-regression.md).
+
+## Remaining Post-MVP Work
 - Improve high-density mobile/iPad behavior for Live Timing and Race Hub tables.
 - Add persisted live-event capture and reconciliation only after defining the
   live storage model.

documentations/refactor/22-phase-14-visual-regression.md

@@ -0,0 +1,55 @@
+# Phase 14: Visual Regression and Responsive QA
+
+## Goal
+
+Add Playwright screenshot coverage for the MVP Web UI routes across desktop,
+tablet, and mobile viewports before broader product expansion.
+
+## Scope
+
+Routes:
+
+- `/race-hub?session_key=9472`
+- `/data-library`
+- `/live` (empty state with `BOXBOX_DISABLE_LIVE=1`)
+
+Viewports (deterministic Chromium):
+
+| Project | Size |
+|---------|------|
+| desktop | 1280×800 |
+| tablet  | 768×1024 |
+| mobile  | 390×844 |
+
+## Commands
+
+```bash
+# Dev proxy (Vite + seeded Go API) — same stack as test:e2e
+npm run test:visual
+npm run test:visual:update
+
+# Production serving (Go + frontend/dist) — canonical for committed snapshots
+npm run test:visual:prod
+npm run test:visual:prod:update
+```
+
+Snapshots live under `tests/visual/__snapshots__/{desktop,tablet,mobile}/`.
+
+## Constraints
+
+- Reuses `scripts/seed-e2e-db` and `BOXBOX_DISABLE_LIVE=1`; no live F1 session
+  or OpenF1 network calls.
+- Screenshots are taken only after route-specific ready conditions (classification
+  loaded, data library detail visible, live empty state).
+- Animations disabled; full-page captures; no loading-state screenshots.
+
+## Out of Scope
+
+- Live timing tower screenshots (requires an active session and live SignalR).
+- Cross-browser matrix beyond Chromium.
+- Pixel-perfect parity between Vite dev and production builds (use prod update
+  when refreshing committed baselines).
+
+## Related
+
+- [21 MVP Completion Checklist](21-mvp-completion-checklist.md)

documentations/refactor/README.md

@@ -77,6 +77,8 @@ not implementation tickets yet.
   for showing local ingestion coverage and next CLI actions.
 - [21 MVP Completion Checklist](21-mvp-completion-checklist.md): current
   implementation status, verification commands, and remaining post-MVP work.
+- [22 Phase 14 Visual Regression](22-phase-14-visual-regression.md): Playwright
+  screenshot coverage for MVP routes and responsive viewports.
 
 ## External References