# SPA visual + realtime smoke artifact ## Purpose This is the Batch 6 manual evidence lane for the presenter-host and player-phone overhaul. Use it when `USE_SPA_UI=true` and you need reviewable proof that the Angular host/player shells behave correctly across realtime reconnects, role-based visibility, and multi-device presentation. The automated companion lane for this checklist is: ```bash npm --prefix frontend/angular test -- src/app/realtime-visual-smoke.spec.ts ``` ## When to capture it - Staging or local smoke after a host/player visual or realtime change. - Before asking for SPA cutover confidence beyond unit-level component coverage. - When reconnect recovery or developer-state safety changed and reviewers need concrete device evidence. ## Evidence template ```markdown ### SPA visual + realtime smoke evidence - Timestamp (UTC): - Environment: - Commit/Head SHA: - `USE_SPA_UI`: `true` - Locale: - Devices: projected host + player phones/tabs #### Setup - Host route: `/lobby/ui/host` - Player route: `/lobby/ui/player` - Session code: - Participants joined: - Developer-state left OFF by default before evidence capture: #### Checks (PASS/FAIL) 1. Presenter-only question visibility - Host lie/presenter scene shows the active prompt: - Player phones stay prompt-hidden until the allowed phase payload reveals it: 2. Reconnect recovery - Disconnect one player device or throttle network during an active lie/guess input: - Reconnect badge/card appears without clearing the local draft/selection: - Recovered websocket push resumes before the 3s polling fallback becomes the steady-state transport: 3. Multi-device reveal + scoreboard - At least 3 player devices reach reveal and scoreboard together: - Host projected scene remains presenter-grade through reveal and final standings: - Shared player identity tokens/colors/icons stay consistent between the projected host roster and player-phone developer-state snapshots: 4. Developer-state safety - Host developer-state screenshot or recording captured separately from the default presenter screen: - Player developer-state screenshot or recording captured separately from the default phone UI: - Host/player developer-state captures show the current `phase_display.theme` and `phase_display.ornament` tokens plus each player `identity.token` and `identity.icon` so contract-driven scene art/copy and roster styling can be traced back to the payload: - At least one lie/guess/reveal capture shows an authored question ornament slug from admin/bootstrap content instead of only the deterministic fallback set: 5. Optional host voice cue check - Host-only voice playback still routes on the primary device when enabled: #### Artifact pointers - Automated smoke command: `npm --prefix frontend/angular test -- src/app/realtime-visual-smoke.spec.ts` - Screenshot/video refs: - host projected scene: - reconnect recovery: - reveal/scoreboard multi-device: - host/player developer-state: - Result: - If FAIL: blocker link + shortest repro ``` ## Minimum acceptable artifact - One projected host screenshot during lie, reveal, or scoreboard. - One player-device capture showing reconnect recovery or input preservation. - One reveal or scoreboard capture with 3+ player devices. - Separate host and player developer-state captures so diagnostics stay out of the default presentation.