weirsoe-party-protocol/docs/SPA_VISUAL_REALTIME_SMOKE_ARTIFACT.md

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:

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

### SPA visual + realtime smoke evidence
- Timestamp (UTC): <YYYY-MM-DD HH:MM>
- Environment: <local/staging>
- Commit/Head SHA: <sha>
- `USE_SPA_UI`: `true`
- Locale: <en/da>
- Devices: projected host + <N> player phones/tabs

#### Setup
- Host route: `/lobby/ui/host`
- Player route: `/lobby/ui/player`
- Session code: <code>
- Participants joined: <list or count>
- Developer-state left OFF by default before evidence capture: <yes/no>

#### Checks (PASS/FAIL)
1. Presenter-only question visibility
   - Host lie/presenter scene shows the active prompt: <pass/fail>
   - Player phones stay prompt-hidden until the allowed phase payload reveals it: <pass/fail>
2. Reconnect recovery
   - Disconnect one player device or throttle network during an active lie/guess input: <pass/fail>
   - Reconnect badge/card appears without clearing the local draft/selection: <pass/fail>
   - Recovered websocket push resumes before the 3s polling fallback becomes the steady-state transport: <pass/fail>
3. Multi-device reveal + scoreboard
   - At least 3 player devices reach reveal and scoreboard together: <pass/fail>
   - Host projected scene remains presenter-grade through reveal and final standings: <pass/fail>
   - Shared player identity tokens/colors/icons stay consistent between the projected host roster and player-phone developer-state snapshots: <pass/fail>
4. Developer-state safety
   - Host developer-state screenshot or recording captured separately from the default presenter screen: <pass/fail>
   - Player developer-state screenshot or recording captured separately from the default phone UI: <pass/fail>
   - 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: <pass/fail>
   - At least one lie/guess/reveal capture shows an authored question ornament slug from admin/bootstrap content instead of only the deterministic fallback set: <pass/fail>
5. Optional host voice cue check
   - Host-only voice playback still routes on the primary device when enabled: <pass/fail/not-run>

#### Artifact pointers
- Automated smoke command: `npm --prefix frontend/angular test -- src/app/realtime-visual-smoke.spec.ts`
- Screenshot/video refs:
  - host projected scene: <ref>
  - reconnect recovery: <ref>
  - reveal/scoreboard multi-device: <ref>
  - host/player developer-state: <ref>
- Result: <PASS/FAIL>
- 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.