feat(i18n): add shared-contract architecture + bilingual MVP flow smoke

Merged by integrator-runner

.gitea/workflows/ci.yml

@@ -31,3 +31,14 @@ jobs:
 
       - name: Tests
         run: python manage.py test lobby -v 1
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - name: Install SPA dependencies
+        run: npm ci --prefix frontend/angular
+
+      - name: SPA Angular smoke tests
+        run: npm --prefix frontend/angular test

docs/I18N_ARCHITECTURE.md

@@ -0,0 +1,48 @@
+# Shared i18n architecture (frontend + backend)
+
+## Scope
+Issue #175 requires one shared i18n contract for MVP host/player flows across frontend and backend.
+
+## Source of truth
+- Catalog: `shared/i18n/lobby.json`
+- Locales:
+  - supported: `en`, `da`
+  - default/fallback: `en`
+
+Both Angular (`frontend/angular/src/app/lobby-i18n.ts`) and Django (`lobby/i18n.py`) read from this catalog.
+
+## Key naming convention
+- Domain-first namespaces:
+  - `frontend.ui.common.*`
+  - `frontend.ui.host.*`
+  - `frontend.ui.player.*`
+  - `frontend.errors.*`
+  - `backend.errors.*`
+  - `backend.error_codes.*`
+- UI lookup keys in Angular are shortened aliases mapped under `frontend.ui`, e.g.:
+  - `host.start_round`
+  - `player.submit_guess`
+  - `common.session_code`
+- Backend API errors return stable code + localized message:
+  - `error_code` = machine-stable key from `backend.error_codes`
+  - `error` = localized message from `backend.errors`
+  - `locale` = resolved request locale
+
+## Fallback model (robust)
+1. Resolve requested locale (`Accept-Language` on backend, user/browser preference on frontend).
+2. If locale unsupported -> use default `en`.
+3. If key missing -> return key and log warning.
+4. If locale translation missing for key -> fallback to `en` translation.
+
+## Audio-routing policy
+- Catalog capability: `frontend.capabilities.client_has_no_audio_output = true`
+- Host/player clients expose this as a read-only capability flag.
+- Policy: phone clients must not play audio directly; only primary/host output is allowed.
+
+## Verification
+- Backend tests: `lobby/tests.py` i18n coverage for locale selection + fallback + error-code/message matrix.
+- Frontend smoke/e2e-level unit coverage:
+  - `frontend/angular/src/app/lobby-i18n.spec.ts`
+  - `frontend/angular/src/app/i18n-mvp-flow-smoke.spec.ts`
+  - `frontend/angular/src/app/features/host/host-shell.component.spec.ts`
+  - `frontend/angular/src/app/features/player/player-shell.component.spec.ts`

docs/ISSUE-175-I18N-SHARED-CONTRACT-ARTIFACT.md

@@ -0,0 +1,35 @@
+# ISSUE-175 Artifact — shared i18n contract + MVP host/player flow
+
+## Delivered
+- Shared i18n contract is centralized in `shared/i18n/lobby.json` (da/en, default `en`, robust fallback).
+- Frontend host/player MVP copy is read via shared keys (no hardcoded Danish strings in Angular MVP flow components).
+- Backend error messages resolve from shared keyspace with locale-aware API payload (`error_code`, `error`, `locale`).
+- Audio-routing policy is explicit and shared: `frontend.capabilities.client_has_no_audio_output=true`.
+- Architecture + key naming documented in `docs/I18N_ARCHITECTURE.md`.
+
+## Smoke / e2e evidence
+### Backend locale + fallback
+Command:
+```bash
+. .venv/bin/activate && python manage.py test \
+  lobby.tests.LobbyFlowTests.test_join_error_localizes_to_danish_with_accept_language_header \
+  lobby.tests.LobbyFlowTests.test_join_error_falls_back_to_english_for_unsupported_locale \
+  lobby.tests.I18nResolverTests
+```
+Result:
+- PASS (7 tests)
+- Confirms `da` localization and fallback to `en` for unsupported locale.
+
+### Frontend host/player + language switch + audio policy
+Command:
+```bash
+cd frontend/angular
+npm test -- --run \
+  src/app/lobby-i18n.spec.ts \
+  src/app/i18n-mvp-flow-smoke.spec.ts \
+  src/app/features/host/host-shell.component.spec.ts \
+  src/app/features/player/player-shell.component.spec.ts
+```
+Result:
+- PASS (22 tests)
+- Includes smoke for host/player copy in **both en and da** and verifies primary-only audio policy flag (`clientHasNoAudioOutput=true`).

docs/ISSUE-180-SPA-NEXT-ROUND-FINAL-LEADERBOARD-EVIDENCE.md

@@ -0,0 +1,28 @@
+# Issue #180 Evidence — SPA next-round + final leaderboard
+
+## Flow log (Angular SPA)
+1. Host reaches `reveal` phase and runs `loadScoreboard()` (`GET /lobby/sessions/:code/scoreboard`).
+2. Host can start next round directly in SPA via `startNextRound()` (`POST /lobby/sessions/:code/rounds/next`) and then session hydrate (`GET /lobby/sessions/:code`) without page reload.
+3. Host can finish game directly in SPA via `finishGame()` (`POST /lobby/sessions/:code/finish`), rendering winner + sorted final leaderboard (plus raw payload for debug) in the same shell.
+4. Player SPA renders final leaderboard from refreshed finished-session payload (sorted by score desc, nickname tiebreak) without leaving SPA route.
+5. Error/retry paths are implemented and covered:
+   - scoreboard failure -> `scoreboardError` + retry button
+   - next-round failure -> `nextRoundError` + retry button
+   - finish-game/final-leaderboard failure -> `finishError` + retry button
+
+## Test evidence
+### `frontend/angular` (Vitest)
+- `src/app/features/host/host-shell.component.spec.ts`
+  - `runs next-round transition without reload and clears scoreboard payload`
+  - `captures finish-game failure for retry and stores final leaderboard on success`
+- `src/app/features/player/player-shell.component.spec.ts`
+  - `builds final leaderboard in finished status without legacy page hop`
+
+Result:
+- Test Files: 2 passed
+- Tests: 9 passed
+
+### `frontend` shared SPA tests (regression)
+Result:
+- Test Files: 5 passed
+- Tests: 24 passed

docs/ISSUE-188-SPA-CUTOVER-HARDENING-ARTIFACT.md

@@ -0,0 +1,47 @@
+# Issue #188 Artifact — SPA cutover hardening (asset versioning + rollback)
+
+## Scope
+Acceptance for `[READY][SPA][P11] Cutover hardening`:
+1. Dokumenteret strategi for cache-busting/versionering af SPA assets i Django staticfiles/reverse proxy setup.
+2. Konfigurerbar rollback-procedure for `USE_SPA_UI` (trin-for-trin, target <10 min).
+3. Smoke-artefakt for både SPA on/off i samme release-vindue.
+4. Ingen gameplay-ændringer.
+
+## 1) Asset versioning/cache-busting strategi
+Implementeret i SPA shell render-path:
+
+- Konfiguration i `partyhub/settings.py`:
+  - `WPP_SPA_ASSET_BASE` (eksisterende)
+  - `WPP_SPA_ASSET_VERSION` (ny)
+- `lobby/ui_views.py` injicerer `spa_asset_version` til template-context.
+- `lobby/templates/lobby/spa_shell.html` appender `?v={{ spa_asset_version }}` på:
+  - `styles.css`
+  - `main.js`
+
+Effekt:
+- Ny release-version (fx SHA/tag) kan tvinge cache-miss i browser/proxy uden ændring af route.
+- Rollback kan pege på tidligere stabil version-token med samme mekanisme.
+
+## 2) Rollback playbook (`USE_SPA_UI`) — target <10 min
+Dokumenteret i `docs/spa-cutover-flag.md`:
+
+1. Sæt `USE_SPA_UI=false`.
+2. Sæt `WPP_SPA_ASSET_VERSION` til sidste stabile release-token.
+3. Deploy/reload app-processer.
+4. Verificér legacy routes (`/lobby/ui/host` + `/lobby/ui/player`).
+5. Kør hurtig smoke sanity.
+6. Log trigger/timestamp/resultat i smoke artifact.
+
+## 3) Smoke artifact for SPA OFF/ON i samme release-vindue
+Dokumenteret i:
+- `docs/UI_SMOKE.md` (sektion: "Samme release-vindue: SPA OFF + ON verifikation")
+- `docs/STAGING_GAMEPLAY_SMOKE_ARTIFACT.md` (template udvidet med release-window check + `WPP_SPA_ASSET_VERSION`)
+
+Krav:
+- OFF-pass (legacy) og ON-pass (SPA) køres i samme deploy/release-vindue.
+- Begge passes logges i samme artifact med UTC timestamps og version-token.
+
+## Non-goals bekræftet
+- Ingen gameplay-regler ændret.
+- Ingen API-kontrakter ændret.
+- Ingen UX-redesign; kun drift/cutover-hardening.

docs/ISSUE-200-SPA-HOST-PLAYER-PHASE-SYNC-ARTIFACT.md

@@ -0,0 +1,57 @@
+# Issue #200 Artifact — SPA host→player phase sync (no reload)
+
+## Scope
+Acceptance for `[READY][SPA][P14] Gameplay MVP-del 5`:
+1. Host handlinger (`start round` / `næste fase`) propagere korrekt til player-ruter i SPA.
+2. Happy-path artefakt for én fuld faseovergang uden page reload.
+3. Sync-fejl giver kontrolleret fallback/error state.
+
+Afgrænsning overholdt: ingen nye spilregler og ingen redesign af backend event-model.
+
+## Happy-path faseovergang (uden page reload)
+Reference-flow i Angular shell:
+
+1. **Host starter runde/fase**
+   - Host action kalder backend endpoint (`POST /lobby/sessions/:code/start` eller fase-endpoint)
+   - Host shell hydrerer session igen (`GET /lobby/sessions/:code`)
+   - Host route synkes via hash-rewrite i samme SPA shell:
+     - `#/host/<phase>/<CODE>`
+     - Implementeret i `HostShellComponent.syncRouteFromSession()`
+
+2. **Player modtager ny fase via state sync**
+   - Player shell kører periodisk session-refresh (3s), uden hard reload
+   - Når `session.status` ændrer sig, synkes hash-route i samme SPA shell:
+     - `#/player/<phase>/<CODE>`
+     - Implementeret i `PlayerShellComponent.syncRouteFromSession()`
+
+3. **Ingen page reload**
+   - Routing sker med `window.history.replaceState(...)`
+   - URL opdateres i eksisterende SPA instans (ingen template-hop, ingen full refresh)
+
+## Kontrolleret fallback ved sync-fejl
+Når player-sync fejler (netværk/fetch/session-refresh):
+
+- UI går i kontrolleret connection-state:
+  - `reconnecting` ved online netværksfejl
+  - `offline` når browser rapporterer offline
+- Fejl vises med retry/back-to-join handlinger
+- Reconnect forsøges igen via timer (`scheduleReconnect`) uden at crashe shell
+
+## Verifikation (tests)
+Kørt i `frontend/angular` med Vitest:
+
+- `src/app/features/host/host-shell.component.spec.ts`
+  - Verificerer host-faseflow og hash-route sync uden reload
+- `src/app/features/player/player-shell.component.spec.ts`
+  - Verificerer periodisk player state sync + hash-route sync
+  - Verificerer reconnect/offline fallback ved sync-fejl
+- `src/app/api-contract-smoke.spec.ts`
+- `src/app/session-route-context.spec.ts`
+
+Kommando:
+
+```bash
+npm test -- --reporter=dot
+```
+
+Resultat: **4/4 testfiler grønne, 22/22 tests bestået**.

docs/ISSUE-205-I18N-FOUNDATION.md

@@ -0,0 +1,36 @@
+# Issue #205 — Django i18n foundation (da/en)
+
+## Implemented acceptance checks
+
+- **Django i18n setup for `en` + `da` with `en` fallback**
+  - `LANGUAGE_CODE` set to `en`.
+  - `LANGUAGES = [('en', 'English'), ('da', 'Danish')]`.
+  - `LocaleMiddleware` enabled in middleware chain.
+- **Shared-key resolver/adapter (no ad hoc backend mapping)**
+  - Backend error responses now resolve from shared catalog keys in `shared/i18n/lobby.json`.
+  - `lobby.i18n.api_error()` accepts a shared key and resolves locale-specific text.
+- **Representative API flow documented with key/locale behavior**
+  - `POST /lobby/join` with empty code returns:
+    - `error_code: "session_code_required"`
+    - localized `error`
+    - resolved `locale`
+- **Missing key handling deterministic and loggable**
+  - `resolve_error_message()` returns key string when key/translation is missing.
+  - Warning is logged (`lobby.i18n` logger) for missing key/translation.
+
+## Example response behavior
+
+### Request
+`POST /lobby/join` with empty code and header `Accept-Language: da`
+
+### Response (400)
+
+```json
+{
+  "error": "Sessionskode er påkrævet",
+  "error_code": "session_code_required",
+  "locale": "da"
+}
+```
+
+If locale is unsupported (e.g. `fr`), response uses `locale: "en"` and English message.

docs/ISSUE-207-I18N-AUDIO-SMOKE-ARTIFACT.md

@@ -0,0 +1,35 @@
+# Issue #207 Artifact — da/en locale switch + audio routing (primary-only)
+
+## Scope
+Acceptance for `[READY][i18n][P19]`:
+1. Verify one MVP host+player flow in both `en` and `da` locale context.
+2. Verify controlled fallback to `en` when a locale key is missing.
+3. Verify audio-routing policy is primary-only (client/player has no audio output).
+
+No new feature behavior added — this is verification-only evidence.
+
+## Smoke/e2e evidence (Angular shell test run)
+Executed from `frontend/angular`:
+
+```bash
+npm test -- --reporter=dot src/app/lobby-i18n.spec.ts src/app/features/host/host-shell.component.spec.ts src/app/features/player/player-shell.component.spec.ts
+```
+
+Evidence covered by the run:
+- `lobby-i18n.spec.ts`
+  - subscriber locale switch updates (`en -> da -> en`)
+  - controlled fallback where `da` key is removed during test and `en` copy is returned
+  - `clientHasNoAudioOutput === true` (primary-only audio routing)
+- `host-shell.component.spec.ts`
+  - host actions and route sync in SPA (no reload)
+- `player-shell.component.spec.ts`
+  - player session refresh/sync path and retry behavior
+
+## Policy evidence
+- Shared catalog capability: `shared/i18n/lobby.json`
+  - `frontend.capabilities.client_has_no_audio_output = true`
+- Angular host/player shells bind this capability:
+  - `HostShellComponent.clientHasNoAudioOutput`
+  - `PlayerShellComponent.clientHasNoAudioOutput`
+
+Conclusion: locale switching works in `da`/`en`, fallback resolves to `en` when locale key is intentionally missing, and client audio remains disabled by policy (`primary-only`).

docs/STAGING_GAMEPLAY_SMOKE_ARTIFACT.md

@@ -0,0 +1,66 @@
+# Staging gameplay smoke artifact (Issue #144)
+
+Formål: levere et lille, ensartet evidensformat for release-nær gameplay-smoke i #16/#90-sporet uden scope-udvidelse.
+
+## Guardrails (MVP)
+- Hold scope inden for #16 (execution board) og #17 (scope guardrail).
+- Kun verifikation af eksisterende flow; ingen nye features/polish.
+
+## Hvornår bruges artifacten
+- Efter staging-smoke af gameplay-flowet: lobby -> join -> start -> runde -> scoreboard -> next/final.
+- Resultatet logges i issue/PR-kommentar med denne skabelon.
+
+## Evidence template (kopiér i PR/issue-kommentar)
+```markdown
+### Staging gameplay smoke evidence
+- Timestamp (UTC): <YYYY-MM-DD HH:MM>
+- Environment: staging
+- Commit/Head SHA: <sha>
+- Linked scope: #16 #17 #90 #129 #144
+
+#### Setup
+- Host authenticated in Django admin: <yes/no>
+- Active category/questions present: <yes/no>
+- Participants: host + <N> players
+- `USE_SPA_UI`: <on/off>
+- `WPP_SPA_ASSET_VERSION`: <release-token/sha>
+- UI route used:
+  - OFF (legacy): `/lobby/ui/host` + `/lobby/ui/player`
+  - ON (SPA shell): `/lobby/ui/host/<spa-path>` + `/lobby/ui/player`
+
+#### Checks (PASS/FAIL)
+0. Same release-window verification
+   - OFF + ON smoke kørt i samme release-vindue: <pass/fail>
+1. Cutover route sanity
+   - Flag OFF serves legacy UI templates: <pass/fail>
+   - Flag ON serves SPA shell on expected path(s): <pass/fail>
+2. Lobby -> join -> start
+   - Mixed-case + whitespace session code accepted: <pass/fail>
+3. One full round to scoreboard
+   - submit lie -> mix -> submit guess -> calculate score -> show scoreboard: <pass/fail>
+4. Next-round + game-end sanity
+   - next round transitions: <pass/fail>
+   - final leaderboard visible: <pass/fail>
+
+#### Smoke-gate decision (før `USE_SPA_UI=true`)
+- Gate status: <GREEN/RED>
+- Gate criteria met:
+  - [ ] Cutover route sanity = PASS (OFF + ON)
+  - [ ] Full gameplay round = PASS
+  - [ ] Next-round/final leaderboard sanity = PASS
+  - [ ] Ingen nye blocker-regressioner i host/player flow
+
+#### Rollback checkpoint
+- Rollback required: <yes/no>
+- Trigger reason (if yes): <kort trigger>
+- Rollback done (`USE_SPA_UI=false`) verified: <yes/no>
+
+#### Evidence pointers
+- Command(s): `<exact command(s)>`
+- UI notes/screenshots/log refs: <short refs>
+- Result: <PASS/FAIL>
+- If FAIL: blocker issue link + shortest repro
+```
+
+## Anti-stall minimum
+Hvis der ikke er ny kode at ændre, er denne artifact-skabelon den mindste gyldige leverance for at sikre ensartet, reviewbar smoke-evidens i staging.

docs/UI_SMOKE.md

@@ -4,15 +4,45 @@
 - Host er logget ind i Django.
 - Mindst én aktiv kategori med spørgsmål findes.
 
+## Cutover-forudsætning (`USE_SPA_UI`)
+- `USE_SPA_UI=false` (default): brug legacy routes `/lobby/ui/host` + `/lobby/ui/player`.
+- `USE_SPA_UI=true`: host må gerne testes på SPA deep-link route `/lobby/ui/host/<spa-path>` (fx `/lobby/ui/host/guess`), player på `/lobby/ui/player`.
+
 ## Flow
-1. Åbn host-siden på /lobby/ui/host og tryk Opret session.
+1. Verificér cutover-route matcher valgt flag (legacy vs SPA shell).
-2. Åbn player-siden i 3 faner/enheder på /lobby/ui/player.
+2. Åbn host-siden og tryk Opret session.
-3. Join alle spillere med sessionkode og nickname.
+3. Åbn player-siden i 3 faner/enheder.
-4. Host: vælg kategori, Start runde, Vis spørgsmål.
+4. Join alle spillere med sessionkode og nickname.
-5. Spillere: brug round_question_id og submit løgn.
+5. Host: vælg kategori, Start runde, Vis spørgsmål.
-6. Host: Mix svar.
+6. Spillere: brug round_question_id og submit løgn.
-7. Spillere: submit gæt.
+7. Host: Mix svar.
-8. Host: Beregn score og Vis scoreboard.
+8. Spillere: submit gæt.
-9. Host: Næste runde eller Afslut spil.
+9. Host: Beregn score og Vis scoreboard.
+10. Host: Næste runde eller Afslut spil.
+
+## Smoke-gate (staging cutover)
+`USE_SPA_UI` må kun aktiveres i staging når følgende er opfyldt:
+- Cutover route sanity er PASS for både OFF (legacy) og ON (SPA shell).
+- Én fuld gameplay-runde til scoreboard er PASS.
+- Next-round/final leaderboard sanity er PASS.
+- Ingen nye blocker-regressioner i host/player kerneflow.
+
+## Samme release-vindue: SPA OFF + ON verifikation
+Kør begge checks i samme release-vindue (samme deploy/artifact version):
+
+1. **OFF-pass (legacy)**
+   - `USE_SPA_UI=false`
+   - Verificér legacy routes + fuld runde.
+2. **ON-pass (SPA)**
+   - `USE_SPA_UI=true`
+   - Behold samme release artifact og kun toggl flag/version-token ved behov.
+   - Verificér SPA shell routes + fuld runde.
+3. Dokumentér begge pass i samme smoke-artifact med UTC timestamps og `WPP_SPA_ASSET_VERSION`.
+
+## Rollback check points
+Skift straks tilbage til `USE_SPA_UI=false` hvis en gate fejler:
+1. Verificér legacy routes (`/lobby/ui/host` + `/lobby/ui/player`) fungerer igen.
+2. Log rollback trigger + kort repro i smoke artifact.
+3. Opret/link blocker issue før nyt cutover-forsøg.
 
 Resultat: En fuld runde kan køres uden rå API-kald fra terminal.

docs/issue-180-flow-log.md

@@ -0,0 +1,28 @@
+# Issue #180 – SPA gameplay flow evidence
+
+## Flow log (host + player, no page reload)
+
+1. Host opens SPA host shell and loads scoreboard (`GET /lobby/sessions/{code}/scoreboard`).
+2. Host starts next round (`POST /lobby/sessions/{code}/rounds/next`).
+3. Host shell refreshes session state in-place (`GET /lobby/sessions/{code}`) and clears old scoreboard/final leaderboard payloads.
+4. Player shell performs periodic session refresh while online (3s cadence) and transitions from `scoreboard` to `lobby` without page reload.
+5. Host finishes game (`POST /lobby/sessions/{code}/finish`) and renders final leaderboard directly in SPA shell.
+6. Player shell reads `finished` state and renders final leaderboard in SPA (sorted by score).
+7. Error/retry paths available:
+   - Host: next-round and finish-game retry buttons with explicit error feedback.
+   - Player: reconnect + submit retry feedback.
+
+## Test output snapshot
+
+Command:
+
+```bash
+cd frontend/angular
+npm test -- --run src/app/features/host/host-shell.component.spec.ts src/app/features/player/player-shell.component.spec.ts
+```
+
+Result:
+
+- `host-shell.component.spec.ts`: 6 passed
+- `player-shell.component.spec.ts`: 7 passed
+- Total: 13 passed, 0 failed

docs/spa-cutover-flag.md

@@ -0,0 +1,67 @@
+# SPA cutover feature flag (`USE_SPA_UI`)
+
+## Formål
+`USE_SPA_UI` styrer om host/player UI routes serverer Angular SPA shell eller legacy Django templates.
+
+## Miljø-toggle (uden kodeændring)
+Sæt env var pr. miljø:
+
+- `USE_SPA_UI=true` -> `/lobby/ui/host` og `/lobby/ui/player` returnerer SPA shell
+- `USE_SPA_UI=false` (default) -> legacy template-flow bruges uændret
+
+Backward compatibility under cutover:
+- Hvis `USE_SPA_UI` ikke er sat, bruges `WPP_SPA_ENABLED` som fallback.
+
+## Static asset versioning/cache-busting (hardening)
+Formål: sikre at browser/proxy/CDN hurtigt henter ny SPA bundle i release-vinduet uden at kræve hard refresh.
+
+- `WPP_SPA_ASSET_BASE` peger fortsat på build-output (`/static/frontend/angular/browser`).
+- `WPP_SPA_ASSET_VERSION` injiceres i SPA shell URLs som query-param (`?v=<version>`).
+- Anbefalet værdi for `WPP_SPA_ASSET_VERSION`: release-tag eller kort commit SHA.
+- Ved rollback sættes `WPP_SPA_ASSET_VERSION` til den tidligere kendte stabile release-værdi.
+
+Eksempel (staging/prod env):
+
+```env
+USE_SPA_UI=true
+WPP_SPA_ASSET_BASE=/static/frontend/angular/browser
+WPP_SPA_ASSET_VERSION=rel-2026-03-01-bb82357
+```
+
+## Staging rollout-checkliste (`USE_SPA_UI`)
+1. **Baseline (flag OFF)**
+   - Bekræft at staging kører med `USE_SPA_UI=false`.
+   - Kør gameplay smoke på legacy routes (`/lobby/ui/host` + `/lobby/ui/player`).
+2. **Smoke-gate før aktivering (skal være grøn)**
+   - Cutover route sanity = PASS for både OFF og ON checks.
+   - Full gameplay round (join/start/round/scoreboard) = PASS.
+   - Next-round/final leaderboard sanity = PASS.
+   - Ingen nye blocker-regressioner i host/player kerneflow.
+3. **Kontrolleret aktivering i staging**
+   - Sæt `USE_SPA_UI=true` i staging miljøet.
+   - Kør smoke-flow igen med SPA-route-verifikation.
+4. **Post-cutover dokumentation**
+   - Log evidens med commit/head SHA, UTC timestamp og gate-status.
+
+## Rollback playbook (`USE_SPA_UI`) — mål: <10 min
+Rollback til legacy (`USE_SPA_UI=false`) udføres straks hvis et checkpoint fejler:
+- Forkert route/shell for valgt flag i cutover route sanity.
+- Gameplay smoke kan ikke gennemføres til scoreboard/final leaderboard.
+- Kritisk regression i host/player flow under smoke.
+
+Trin-for-trin:
+1. Sæt `USE_SPA_UI=false` i deploy-env.
+2. Sæt `WPP_SPA_ASSET_VERSION` til sidste stabile release-token.
+3. Deploy/reload app-processer.
+4. Verificér legacy routes: `/lobby/ui/host` + `/lobby/ui/player`.
+5. Kør hurtig smoke sanity (join/start/scoreboard path).
+6. Log UTC tid, trigger, release-token og resultat i smoke artifact.
+
+Target: rollback + sanity-verifikation inden for 10 minutter.
+
+## Verifikation
+- Flag OFF: `UiScreenTests.test_legacy_templates_are_used_when_spa_flag_is_off`
+- Flag ON (host): `UiScreenTests.test_host_screen_can_render_angular_shell_when_feature_flag_enabled`
+- Flag ON (host deep-link): `UiScreenTests.test_host_screen_deeplink_preserves_spa_path_when_feature_flag_enabled`
+- Flag ON (player): `UiScreenTests.test_player_screen_can_render_angular_shell_when_feature_flag_enabled`
+- Smoke-checkliste for cutover paths: `docs/STAGING_GAMEPLAY_SMOKE_ARTIFACT.md` + `docs/UI_SMOKE.md`

frontend/.gitignore

@@ -0,0 +1 @@
+node_modules/

frontend/README.md

@@ -0,0 +1,12 @@
+# Frontend API client baseline
+
+Dette er baseline-klientlaget for SPA-sporet.
+
+## Kører checks lokalt
+
+```bash
+cd frontend
+npm install
+npm test
+npm run build
+```

frontend/angular/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.angular/

frontend/angular/angular.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "projects": {
+    "wpp-angular-shell": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/wpp-angular-shell",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [],
+            "styles": ["src/styles.css"],
+            "outputHashing": "none"
+          }
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "options": {
+            "buildTarget": "wpp-angular-shell:build"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

frontend/angular/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "wpp-angular-shell",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/compiler": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^19.2.0",
+    "@angular/cli": "^19.2.0",
+    "@angular/compiler-cli": "^19.2.0",
+    "typescript": "~5.7.2",
+    "vitest": "^2.1.9"
+  }
+}

frontend/angular/src/app/api-contract-smoke.spec.ts

@@ -0,0 +1,247 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { createAngularApiClient, type AngularHttpClientLike } from '../../../src/api/angular-client';
+
+describe('SPA Angular API contract smoke (host/player foundation)', () => {
+  it('smoke-checks canonical host/player endpoint contracts', async () => {
+    const get = vi.fn<AngularHttpClientLike['get']>(async <T>(url: string) => {
+      if (url === '/lobby/sessions/ABCD12') {
+        return {
+          session: { code: 'ABCD12', status: 'lobby', host_id: 1, current_round: 1, players_count: 2 },
+          players: [
+            { id: 2, nickname: 'Maja', score: 0, is_connected: true },
+            { id: 3, nickname: 'Bo', score: 0, is_connected: true }
+          ],
+          round_question: {
+            id: 77,
+            round_number: 1,
+            prompt: 'Q?',
+            shown_at: '2026-03-01T18:00:00Z',
+            answers: [{ text: 'A' }, { text: 'B' }]
+          },
+          phase_view_model: {
+            status: 'lobby',
+            round_number: 1,
+            players_count: 2,
+            constraints: {
+              min_players_to_start: 2,
+              max_players_mvp: 8,
+              min_players_reached: true,
+              max_players_allowed: true
+            },
+            host: {
+              can_start_round: true,
+              can_show_question: true,
+              can_mix_answers: true,
+              can_calculate_scores: true,
+              can_reveal_scoreboard: true,
+              can_start_next_round: true,
+              can_finish_game: true
+            },
+            player: {
+              can_join: true,
+              can_submit_lie: true,
+              can_submit_guess: true,
+              can_view_final_result: false
+            }
+          }
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/scoreboard') {
+        return {
+          session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
+          leaderboard: [
+            { id: 9, nickname: 'Maja', score: 200 },
+            { id: 10, nickname: 'Bo', score: 150 }
+          ]
+        } as T;
+      }
+
+      throw { status: 404, error: { error: 'Not found' } };
+    });
+
+    const post = vi.fn<AngularHttpClientLike['post']>(async <T>(url: string, body: unknown) => {
+      if (url === '/lobby/sessions/join') {
+        expect(body).toEqual({ code: 'ABCD12', nickname: 'Maja' });
+        return {
+          player: { id: 9, nickname: 'Maja', session_token: 'session-token-1', score: 0 },
+          session: { code: 'ABCD12', status: 'lobby' }
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/rounds/start') {
+        expect(body).toEqual({ category_slug: 'history' });
+        return {
+          session: { code: 'ABCD12', status: 'lie', current_round: 1 },
+          round: { number: 1, category: { slug: 'history', name: 'History' } }
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/questions/show') {
+        expect(body).toEqual({});
+        return {
+          round_question: {
+            id: 77,
+            prompt: 'Q?',
+            round_number: 1,
+            shown_at: '2026-03-01T18:00:00Z',
+            lie_deadline_at: '2026-03-01T18:00:30Z'
+          },
+          config: { lie_seconds: 30 }
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/questions/77/answers/mix') {
+        expect(body).toEqual({});
+        return {
+          session: { code: 'ABCD12', status: 'guess', current_round: 1 },
+          round_question: { id: 77, round_number: 1 },
+          answers: [{ text: 'A' }, { text: 'B' }]
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/questions/77/scores/calculate') {
+        expect(body).toEqual({});
+        return {
+          session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
+          round_question: { id: 77, round_number: 1 },
+          events_created: 2,
+          leaderboard: [
+            { id: 9, nickname: 'Maja', score: 200 },
+            { id: 10, nickname: 'Bo', score: 150 }
+          ]
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/rounds/next') {
+        expect(body).toEqual({});
+        return { session: { code: 'ABCD12', status: 'lie', current_round: 2 } } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/finish') {
+        expect(body).toEqual({});
+        return {
+          session: { code: 'ABCD12', status: 'finished', current_round: 2 },
+          winner: { id: 9, nickname: 'Maja', score: 250 },
+          leaderboard: [
+            { id: 9, nickname: 'Maja', score: 250 },
+            { id: 10, nickname: 'Bo', score: 150 }
+          ]
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/questions/77/lies/submit') {
+        expect(body).toEqual({ player_id: 9, session_token: 'session-token-1', text: 'my lie' });
+        return {
+          lie: {
+            id: 501,
+            player_id: 9,
+            round_question_id: 77,
+            text: 'my lie',
+            created_at: '2026-03-01T18:00:05Z'
+          },
+          window: { lie_deadline_at: '2026-03-01T18:00:30Z' }
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/questions/77/guesses/submit') {
+        expect(body).toEqual({ player_id: 9, session_token: 'session-token-1', selected_text: 'B' });
+        return {
+          guess: {
+            id: 601,
+            player_id: 9,
+            round_question_id: 77,
+            selected_text: 'B',
+            is_correct: false,
+            fooled_player_id: null,
+            created_at: '2026-03-01T18:00:15Z'
+          },
+          window: { guess_deadline_at: '2026-03-01T18:01:00Z' }
+        } as T;
+      }
+
+      throw { status: 404, error: { error: 'Not found' } };
+    });
+
+    const client = createAngularApiClient({ get, post } as AngularHttpClientLike);
+
+    const session = await client.getSession(' abcd12 ');
+    expect(session.ok).toBe(true);
+    if (session.ok) {
+      expect(session.data.session.code).toBe('ABCD12');
+      expect(session.data.phase_view_model.host.can_start_next_round).toBe(true);
+      expect(session.data.phase_view_model.player.can_submit_guess).toBe(true);
+    }
+
+    expect((await client.joinSession({ code: ' abcd12 ', nickname: ' Maja ' })).ok).toBe(true);
+    expect((await client.startRound(' abcd12 ', { category_slug: 'history' })).ok).toBe(true);
+    expect((await client.showQuestion(' abcd12 ')).ok).toBe(true);
+    expect((await client.mixAnswers(' abcd12 ', 77)).ok).toBe(true);
+    expect((await client.calculateScores(' abcd12 ', 77)).ok).toBe(true);
+    expect((await client.getScoreboard(' abcd12 ')).ok).toBe(true);
+    expect((await client.startNextRound(' abcd12 ')).ok).toBe(true);
+    expect((await client.finishGame(' abcd12 ')).ok).toBe(true);
+    expect(
+      (
+        await client.submitLie(' abcd12 ', 77, {
+          player_id: 9,
+          session_token: 'session-token-1',
+          text: 'my lie'
+        })
+      ).ok
+    ).toBe(true);
+    expect(
+      (
+        await client.submitGuess(' abcd12 ', 77, {
+          player_id: 9,
+          session_token: 'session-token-1',
+          selected_text: 'B'
+        })
+      ).ok
+    ).toBe(true);
+
+    expect(get).toHaveBeenNthCalledWith(1, '/lobby/sessions/ABCD12', { withCredentials: true });
+    expect(get).toHaveBeenNthCalledWith(2, '/lobby/sessions/ABCD12/scoreboard', { withCredentials: true });
+
+    expect(post).toHaveBeenNthCalledWith(
+      1,
+      '/lobby/sessions/join',
+      { code: 'ABCD12', nickname: 'Maja' },
+      { withCredentials: true }
+    );
+    expect(post).toHaveBeenNthCalledWith(
+      2,
+      '/lobby/sessions/ABCD12/rounds/start',
+      { category_slug: 'history' },
+      { withCredentials: true }
+    );
+    expect(post).toHaveBeenNthCalledWith(3, '/lobby/sessions/ABCD12/questions/show', {}, { withCredentials: true });
+    expect(post).toHaveBeenNthCalledWith(
+      4,
+      '/lobby/sessions/ABCD12/questions/77/answers/mix',
+      {},
+      { withCredentials: true }
+    );
+    expect(post).toHaveBeenNthCalledWith(
+      5,
+      '/lobby/sessions/ABCD12/questions/77/scores/calculate',
+      {},
+      { withCredentials: true }
+    );
+    expect(post).toHaveBeenNthCalledWith(6, '/lobby/sessions/ABCD12/rounds/next', {}, { withCredentials: true });
+    expect(post).toHaveBeenNthCalledWith(7, '/lobby/sessions/ABCD12/finish', {}, { withCredentials: true });
+    expect(post).toHaveBeenNthCalledWith(
+      8,
+      '/lobby/sessions/ABCD12/questions/77/lies/submit',
+      { player_id: 9, session_token: 'session-token-1', text: 'my lie' },
+      { withCredentials: true }
+    );
+    expect(post).toHaveBeenNthCalledWith(
+      9,
+      '/lobby/sessions/ABCD12/questions/77/guesses/submit',
+      { player_id: 9, session_token: 'session-token-1', selected_text: 'B' },
+      { withCredentials: true }
+    );
+  });
+});

frontend/angular/src/app/app.component.css

@@ -0,0 +1,5 @@
+.shell { font-family: Arial, sans-serif; margin: 1rem; }
+.shell__header { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 0.75rem; }
+.shell__header nav { display: flex; gap: 0.75rem; }
+.shell__content { margin-top: 1rem; }
+.locale-picker { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }

frontend/angular/src/app/app.component.html

@@ -0,0 +1,20 @@
+<main class="shell">
+  <header class="shell__header">
+    <h1>{{ copy('app.title') }}</h1>
+    <nav>
+      <a routerLink="/host">{{ copy('app.host_nav') }}</a>
+      <a routerLink="/player">{{ copy('app.player_nav') }}</a>
+    </nav>
+    <label class="locale-picker">
+      {{ copy('app.language_label') }}
+      <select [ngModel]="locale" (ngModelChange)="setLocale($event)">
+        <option value="en">English</option>
+        <option value="da">Dansk</option>
+      </select>
+    </label>
+  </header>
+
+  <section class="shell__content" [attr.data-wpp-locale]="locale">
+    <router-outlet></router-outlet>
+  </section>
+</main>

frontend/angular/src/app/app.component.ts

@@ -0,0 +1,33 @@
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Router, RouterLink, RouterOutlet } from '@angular/router';
+
+import { resolvePreferredLocale, setPreferredLocale, t } from './lobby-i18n';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, FormsModule],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+})
+export class AppComponent {
+  private readonly router = inject(Router);
+
+  locale = resolvePreferredLocale();
+
+  constructor() {
+    const shellRoute = document.body.dataset['wppShellRoute'];
+    if (shellRoute?.startsWith('/host') || shellRoute?.startsWith('/player')) {
+      void this.router.navigateByUrl(shellRoute);
+    }
+  }
+
+  copy(key: string): string {
+    return t(key, this.locale);
+  }
+
+  setLocale(locale: string): void {
+    this.locale = setPreferredLocale(locale);
+  }
+}

frontend/angular/src/app/app.config.ts

@@ -0,0 +1,7 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes, withHashLocation())],
+};

frontend/angular/src/app/app.routes.ts

@@ -0,0 +1,49 @@
+import { Routes } from '@angular/router';
+
+import {
+  hostRouteContextResolver,
+  hostRouteGuard,
+  playerRouteContextResolver,
+  playerRouteGuard,
+} from './session-route-context';
+
+export const routes: Routes = [
+  {
+    path: 'host',
+    resolve: { routeContext: hostRouteContextResolver },
+    canActivate: [hostRouteGuard],
+    loadComponent: () => import('./features/host/host-shell.component').then((m) => m.HostShellComponent),
+  },
+  {
+    path: 'host/:phase',
+    resolve: { routeContext: hostRouteContextResolver },
+    canActivate: [hostRouteGuard],
+    loadComponent: () => import('./features/host/host-shell.component').then((m) => m.HostShellComponent),
+  },
+  {
+    path: 'host/:phase/:context',
+    resolve: { routeContext: hostRouteContextResolver },
+    canActivate: [hostRouteGuard],
+    loadComponent: () => import('./features/host/host-shell.component').then((m) => m.HostShellComponent),
+  },
+  {
+    path: 'player',
+    resolve: { routeContext: playerRouteContextResolver },
+    canActivate: [playerRouteGuard],
+    loadComponent: () => import('./features/player/player-shell.component').then((m) => m.PlayerShellComponent),
+  },
+  {
+    path: 'player/:phase',
+    resolve: { routeContext: playerRouteContextResolver },
+    canActivate: [playerRouteGuard],
+    loadComponent: () => import('./features/player/player-shell.component').then((m) => m.PlayerShellComponent),
+  },
+  {
+    path: 'player/:phase/:context',
+    resolve: { routeContext: playerRouteContextResolver },
+    canActivate: [playerRouteGuard],
+    loadComponent: () => import('./features/player/player-shell.component').then((m) => m.PlayerShellComponent),
+  },
+  { path: '', pathMatch: 'full', redirectTo: 'player' },
+  { path: '**', redirectTo: 'player' },
+];

frontend/angular/src/app/features/host/host-shell.component.spec.ts

@@ -0,0 +1,266 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { HostShellComponent } from './host-shell.component';
+
+type FetchMock = ReturnType<typeof vi.fn>;
+
+function jsonResponse(status: number, body: unknown) {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    json: vi.fn().mockResolvedValue(body),
+  } as unknown as Response;
+}
+
+function sessionDetailPayload(status: string, options?: { roundQuestionId?: number | null }) {
+  const roundQuestionId = options?.roundQuestionId ?? 41;
+
+  return {
+    session: {
+      code: 'ABCD12',
+      status,
+      host_id: 1,
+      current_round: status === 'lobby' ? 2 : 1,
+      players_count: 2,
+    },
+    round_question:
+      roundQuestionId === null
+        ? null
+        : {
+            id: roundQuestionId,
+            round_number: 1,
+            prompt: 'Q?',
+            shown_at: '2026-01-01T00:00:00Z',
+            answers: [],
+          },
+    players: [
+      { id: 1, nickname: 'Host', score: 0, is_connected: true },
+      { id: 2, nickname: 'Mads', score: 120, is_connected: true },
+    ],
+    phase_view_model: {
+      status,
+      round_number: 1,
+      players_count: 2,
+      constraints: {
+        min_players_to_start: 2,
+        max_players_mvp: 8,
+        min_players_reached: true,
+        max_players_allowed: true,
+      },
+      host: {
+        can_start_round: status === 'lobby',
+        can_show_question: status === 'lie',
+        can_mix_answers: status === 'lie',
+        can_calculate_scores: status === 'guess',
+        can_reveal_scoreboard: status === 'reveal',
+        can_start_next_round: status === 'scoreboard',
+        can_finish_game: status === 'scoreboard',
+      },
+      player: {
+        can_join: status === 'lobby',
+        can_submit_lie: status === 'lie',
+        can_submit_guess: status === 'guess',
+        can_view_final_result: status === 'finished',
+      },
+    },
+  };
+}
+
+describe('HostShellComponent gameplay wiring', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('runs startRound transition and refreshes session details', async () => {
+    const fetchMock: FetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(
+        jsonResponse(201, {
+          session: { code: 'ABCD12', status: 'lie', current_round: 1 },
+          round: { number: 1, category: { slug: 'history', name: 'History' } },
+        })
+      )
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('lie')));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new HostShellComponent();
+    component.sessionCode = ' abcd12 ';
+    component.categorySlug = ' history ';
+
+    await component.startRound();
+
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      '/lobby/sessions/ABCD12/rounds/start',
+      expect.objectContaining({ method: 'POST', body: JSON.stringify({ category_slug: 'history' }) })
+    );
+    expect(fetchMock).toHaveBeenNthCalledWith(2, '/lobby/sessions/ABCD12', expect.objectContaining({ method: 'GET' }));
+    expect(component.session?.session.status).toBe('lie');
+    expect(component.roundQuestionId).toBe('41');
+    expect(component.loading).toBe(false);
+  });
+
+  it('captures scoreboard error for retry path', async () => {
+    const fetchMock: FetchMock = vi.fn().mockResolvedValue(jsonResponse(500, { error: 'Scoreboard unavailable' }));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new HostShellComponent();
+    component.sessionCode = 'ABCD12';
+
+    await component.loadScoreboard();
+
+    expect(fetchMock).toHaveBeenCalledWith('/lobby/sessions/ABCD12/scoreboard', expect.objectContaining({ method: 'GET' }));
+    expect(component.scoreboardError).toContain('Scoreboard failed: Scoreboard unavailable');
+    expect(component.loading).toBe(false);
+  });
+
+  it('wires showQuestion, mixAnswers and calculateScores with expected request payloads', async () => {
+    const fetchMock: FetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(
+        jsonResponse(200, {
+          round_question: {
+            id: 77,
+            round_number: 1,
+            prompt: 'Q?',
+            shown_at: '2026-01-01T00:00:00Z',
+            lie_deadline_at: '2026-01-01T00:00:45Z',
+          },
+          config: { lie_seconds: 45 },
+        })
+      )
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('lie', { roundQuestionId: 77 })))
+      .mockResolvedValueOnce(
+        jsonResponse(200, {
+          session: { code: 'ABCD12', status: 'guess', current_round: 1 },
+          round_question: { id: 77, round_number: 1 },
+          answers: [{ text: 'A' }],
+        })
+      )
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('guess', { roundQuestionId: 77 })))
+      .mockResolvedValueOnce(
+        jsonResponse(200, {
+          session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
+          round_question: { id: 77, round_number: 1 },
+          events_created: 2,
+          leaderboard: [{ id: 1, nickname: 'Luna', score: 320 }],
+        })
+      )
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('reveal', { roundQuestionId: 77 })));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new HostShellComponent();
+    component.sessionCode = ' abcd12 ';
+    component.roundQuestionId = ' 77 ';
+
+    await component.showQuestion();
+    await component.mixAnswers();
+    await component.calculateScores();
+
+    expect(component.error).toBe('');
+    expect(component.loading).toBe(false);
+  });
+
+  it('runs next-round transition without reload and clears scoreboard payload', async () => {
+    const fetchMock: FetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(200, { session: { code: 'ABCD12', status: 'lobby', current_round: 2 } }))
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('lobby', { roundQuestionId: null })));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new HostShellComponent();
+    component.sessionCode = ' abcd12 ';
+    component.scoreboardPayload = '{"leaderboard":[]}';
+    component.finalLeaderboardPayload = '{"leaderboard":[{"nickname":"Old","score":1}]}' ;
+    component.finalLeaderboard = [{ id: 9, nickname: 'Old', score: 1 }];
+
+    await component.startNextRound();
+
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      '/lobby/sessions/ABCD12/rounds/next',
+      expect.objectContaining({ method: 'POST', body: JSON.stringify({}) })
+    );
+    expect(fetchMock).toHaveBeenNthCalledWith(2, '/lobby/sessions/ABCD12', expect.objectContaining({ method: 'GET' }));
+    expect(component.session?.session.status).toBe('lobby');
+    expect(component.scoreboardPayload).toBe('');
+    expect(component.finalLeaderboardPayload).toBe('');
+    expect(component.finalLeaderboard).toEqual([]);
+    expect(component.nextRoundError).toBe('');
+  });
+
+  it('captures finish-game failure for retry and stores final leaderboard on success', async () => {
+    const fetchMock: FetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(503, { error: 'Final leaderboard timeout' }))
+      .mockResolvedValueOnce(
+        jsonResponse(200, {
+          session: { code: 'ABCD12', status: 'finished', current_round: 2 },
+          winner: { id: 1, nickname: 'Luna', score: 320 },
+          leaderboard: [
+            { id: 2, nickname: 'Mads', score: 120 },
+            { id: 1, nickname: 'Luna', score: 320 },
+          ],
+        })
+      )
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('finished', { roundQuestionId: null })));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new HostShellComponent();
+    component.sessionCode = 'ABCD12';
+
+    await component.finishGame();
+    expect(component.finishError).toContain('Finish game failed: Final leaderboard timeout');
+
+    await component.finishGame();
+
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      '/lobby/sessions/ABCD12/finish',
+      expect.objectContaining({ method: 'POST', body: JSON.stringify({}) })
+    );
+    expect(component.finishError).toBe('');
+    expect(component.finalLeaderboardPayload).toContain('"status": "finished"');
+    expect(component.finalWinner?.nickname).toBe('Luna');
+    expect(component.finalLeaderboard.map((entry) => entry.nickname)).toEqual(['Luna', 'Mads']);
+  });
+
+  it('guards next-round and finish actions when session code is missing', async () => {
+    const fetchMock: FetchMock = vi.fn();
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new HostShellComponent();
+    component.sessionCode = '   ';
+
+    await component.startNextRound();
+    await component.finishGame();
+
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(component.nextRoundError).toContain('Session code is required');
+    expect(component.finishError).toContain('Session code is required');
+  });
+
+  it('syncs host hash-route with latest phase after refresh without page reload', async () => {
+    const fetchMock: FetchMock = vi.fn().mockResolvedValue(jsonResponse(200, sessionDetailPayload('guess', { roundQuestionId: 77 })));
+    vi.stubGlobal('fetch', fetchMock);
+
+    const replaceState = vi.fn();
+    vi.stubGlobal('window', {
+      location: { hash: '#/host/lobby/ABCD12' },
+      history: { state: null, replaceState },
+      sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn() },
+    });
+
+    const component = new HostShellComponent();
+    component.sessionCode = 'ABCD12';
+
+    await component.refreshSession();
+
+    expect(replaceState).toHaveBeenCalledWith(null, '', '#/host/guess/ABCD12');
+  });
+});

frontend/angular/src/app/features/host/host-shell.component.ts

@@ -0,0 +1,316 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { createApiClient } from '../../../../../src/api/client';
+import type { FinishGameResponse, ScoreboardResponse } from '../../../../../src/api/types';
+import { createVerticalSliceController } from '../../../../../src/spa/vertical-slice';
+import { clientHasNoAudioOutput, resolvePreferredLocale, subscribeToLocaleChanges, t } from '../../lobby-i18n';
+
+interface SessionDetail {
+  session: { code: string; status: string; current_round: number };
+  round_question: { id: number; prompt: string; answers: Array<{ text: string }> } | null;
+  players: Array<{ id: number; nickname: string; score: number }>;
+}
+
+type LeaderboardEntry = ScoreboardResponse['leaderboard'][number];
+type LeaderboardResponse = FinishGameResponse;
+
+@Component({
+  selector: 'app-host-shell',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <h2>{{ copy('host.title') }}</h2>
+
+    <div class="panel" [attr.data-client-has-no-audio-output]="clientHasNoAudioOutput">
+      <label>{{ copy('common.session_code') }} <input [(ngModel)]="sessionCode" /></label>
+      <label>{{ copy('host.category') }} <input [(ngModel)]="categorySlug" /></label>
+      <button (click)="refreshSession()" [disabled]="loading">{{ copy('common.refresh') }}</button>
+      <button (click)="startRound()" [disabled]="loading">{{ copy('host.start_round') }}</button>
+      <button (click)="showQuestion()" [disabled]="loading || !roundQuestionId">{{ copy('host.show_question') }}</button>
+      <button (click)="mixAnswers()" [disabled]="loading || !roundQuestionId">{{ copy('host.mix_answers') }}</button>
+      <button (click)="calculateScores()" [disabled]="loading || !roundQuestionId">{{ copy('host.calculate_scores') }}</button>
+      <button (click)="loadScoreboard()" [disabled]="loading">{{ copy('host.load_scoreboard') }}</button>
+      <button (click)="startNextRound()" [disabled]="loading">{{ copy('host.start_next_round') }}</button>
+      <button (click)="finishGame()" [disabled]="loading">{{ copy('host.finish_game') }}</button>
+      <button *ngIf="scoreboardError" (click)="loadScoreboard()" [disabled]="loading">{{ copy('host.retry_scoreboard') }}</button>
+      <button *ngIf="nextRoundError" (click)="startNextRound()" [disabled]="loading">{{ copy('host.retry_next_round') }}</button>
+      <button *ngIf="finishError" (click)="finishGame()" [disabled]="loading">{{ copy('host.retry_finish') }}</button>
+    </div>
+
+    <p *ngIf="session" class="hint">{{ copy('host.audio_locale_hint') }}: {{ locale }}</p>
+    <p *ngIf="error" class="error">{{ error }}</p>
+    <p *ngIf="scoreboardError" class="error">{{ scoreboardError }}</p>
+    <p *ngIf="nextRoundError" class="error">{{ nextRoundError }}</p>
+    <p *ngIf="finishError" class="error">{{ finishError }}</p>
+
+    <div *ngIf="session" class="panel">
+      <p><strong>{{ copy('common.status') }}:</strong> {{ session.session.status }} · {{ copy('common.round') }} {{ session.session.current_round }}</p>
+      <p><strong>{{ copy('common.round_question_id') }}:</strong> {{ roundQuestionId || '-' }}</p>
+      <p *ngIf="session.round_question"><strong>{{ copy('common.prompt') }}:</strong> {{ session.round_question.prompt }}</p>
+      <ul>
+        <li *ngFor="let p of session.players">{{ p.nickname }}: {{ p.score }}</li>
+      </ul>
+      <pre *ngIf="scoreboardPayload">{{ scoreboardPayload }}</pre>
+      <div *ngIf="finalLeaderboard.length">
+        <h3>{{ copy('host.final_leaderboard') }}</h3>
+        <p *ngIf="finalWinner"><strong>{{ copy('host.winner') }}:</strong> {{ finalWinner.nickname }} ({{ finalWinner.score }} pts)</p>
+        <ol>
+          <li *ngFor="let entry of finalLeaderboard">{{ entry.nickname }}: {{ entry.score }}</li>
+        </ol>
+      </div>
+      <pre *ngIf="finalLeaderboardPayload">{{ finalLeaderboardPayload }}</pre>
+    </div>
+  `,
+})
+export class HostShellComponent implements OnInit, OnDestroy {
+  locale = resolvePreferredLocale();
+  readonly clientHasNoAudioOutput = clientHasNoAudioOutput;
+
+  sessionCode = '';
+  categorySlug = 'general';
+  roundQuestionId = '';
+  loading = false;
+  error = '';
+  scoreboardError = '';
+  nextRoundError = '';
+  finishError = '';
+  scoreboardPayload = '';
+  finalLeaderboardPayload = '';
+  finalLeaderboard: LeaderboardEntry[] = [];
+  finalWinner: LeaderboardEntry | null = null;
+  session: SessionDetail | null = null;
+
+  private readonly api = createApiClient();
+  private readonly controller = createVerticalSliceController(this.api);
+  private unsubscribeLocale: (() => void) | null = null;
+
+  ngOnInit(): void {
+    this.unsubscribeLocale = subscribeToLocaleChanges((locale) => {
+      this.locale = locale;
+    });
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const hashRoute = window.location.hash.replace(/^#\/?/, '');
+    const match = hashRoute.match(/^host(?:\/[^/]+)?(?:\/([^/?#]+))?/i);
+    const codeFromRoute = match?.[1] ?? '';
+    const storedCode = window.sessionStorage.getItem('wpp.host-session-code') ?? '';
+    const candidate = codeFromRoute || storedCode;
+
+    if (!candidate) {
+      return;
+    }
+
+    this.sessionCode = this.normalizeCode(candidate);
+    this.persistSessionCode(this.sessionCode);
+    void this.refreshSession();
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeLocale?.();
+    this.unsubscribeLocale = null;
+  }
+
+  copy(key: string): string {
+    return t(key, this.locale);
+  }
+
+  private normalizeCode(value: string): string {
+    return value.trim().toUpperCase();
+  }
+
+  private persistSessionCode(code: string): void {
+    if (typeof window !== 'undefined') {
+      window.sessionStorage.setItem('wpp.host-session-code', code);
+    }
+  }
+
+  private async request<T>(path: string, method: 'GET' | 'POST', payload?: unknown): Promise<T> {
+    const response = await fetch(path, {
+      method,
+      headers: {
+        Accept: 'application/json',
+        ...(payload === undefined ? {} : { 'Content-Type': 'application/json' }),
+      },
+      ...(payload === undefined ? {} : { body: JSON.stringify(payload) }),
+      credentials: 'same-origin',
+    });
+
+    const body = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      throw new Error((body as { error?: string }).error ?? `HTTP ${response.status}`);
+    }
+
+    return body as T;
+  }
+
+  async refreshSession(): Promise<void> {
+    this.loading = true;
+    this.error = '';
+    this.scoreboardError = '';
+    this.nextRoundError = '';
+    this.finishError = '';
+    try {
+      const state = await this.controller.hydrateLobby(this.sessionCode);
+      if (!state.session || state.errorMessage) {
+        throw new Error(state.errorMessage ?? 'Unknown error');
+      }
+      this.session = state.session as SessionDetail;
+      this.sessionCode = this.session.session.code;
+      this.persistSessionCode(this.sessionCode);
+      this.roundQuestionId = this.session.round_question?.id ? String(this.session.round_question.id) : '';
+      if (this.session.session.status !== 'finished') {
+        this.resetFinalLeaderboard();
+      }
+      this.syncRouteFromSession();
+    } catch (error) {
+      this.error = `${this.copy('host.session_refresh_failed')}: ${(error as Error).message}`;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  async startRound(): Promise<void> {
+    await this.runAction(async () => {
+      const state = await this.controller.startRound(this.sessionCode, this.categorySlug.trim());
+      if (!state.session || state.errorMessage) {
+        throw new Error(state.errorMessage ?? 'Unknown error');
+      }
+      this.session = state.session as SessionDetail;
+      this.sessionCode = this.session.session.code;
+      this.persistSessionCode(this.sessionCode);
+      this.roundQuestionId = this.session.round_question?.id ? String(this.session.round_question.id) : '';
+      this.scoreboardPayload = '';
+      this.resetFinalLeaderboard();
+      this.syncRouteFromSession();
+    });
+  }
+
+  async showQuestion(): Promise<void> {
+    await this.runAction(async () => {
+      const code = this.normalizeCode(this.sessionCode);
+      await this.request(`/lobby/sessions/${encodeURIComponent(code)}/questions/show`, 'POST', {});
+      await this.refreshSession();
+    });
+  }
+
+  async mixAnswers(): Promise<void> {
+    await this.runAction(async () => {
+      const code = this.normalizeCode(this.sessionCode);
+      const roundQuestionId = this.roundQuestionId.trim();
+      await this.request(`/lobby/sessions/${encodeURIComponent(code)}/questions/${roundQuestionId}/answers/mix`, 'POST', {});
+      await this.refreshSession();
+    });
+  }
+
+  async calculateScores(): Promise<void> {
+    await this.runAction(async () => {
+      const code = this.normalizeCode(this.sessionCode);
+      const roundQuestionId = this.roundQuestionId.trim();
+      await this.request(`/lobby/sessions/${encodeURIComponent(code)}/questions/${roundQuestionId}/scores/calculate`, 'POST', {});
+      await this.refreshSession();
+    });
+  }
+
+  async loadScoreboard(): Promise<void> {
+    this.loading = true;
+    this.scoreboardError = '';
+    this.error = '';
+    try {
+      const code = this.normalizeCode(this.sessionCode);
+      const payload = await this.request<unknown>(`/lobby/sessions/${encodeURIComponent(code)}/scoreboard`, 'GET');
+      this.scoreboardPayload = JSON.stringify(payload, null, 2);
+      await this.refreshSession();
+    } catch (error) {
+      this.scoreboardError = `${this.copy('host.scoreboard_failed')}: ${(error as Error).message}`;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  async startNextRound(): Promise<void> {
+    this.loading = true;
+    this.nextRoundError = '';
+    this.error = '';
+    try {
+      const code = this.normalizeCode(this.sessionCode);
+      if (!code) {
+        throw new Error(this.copy('host.session_code_required'));
+      }
+      await this.request(`/lobby/sessions/${encodeURIComponent(code)}/rounds/next`, 'POST', {});
+      this.scoreboardPayload = '';
+      this.resetFinalLeaderboard();
+      await this.refreshSession();
+    } catch (error) {
+      this.nextRoundError = `${this.copy('host.next_round_failed')}: ${(error as Error).message}`;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  async finishGame(): Promise<void> {
+    this.loading = true;
+    this.finishError = '';
+    this.error = '';
+    try {
+      const code = this.normalizeCode(this.sessionCode);
+      if (!code) {
+        throw new Error(this.copy('host.session_code_required'));
+      }
+      const payload = await this.request<LeaderboardResponse>(`/lobby/sessions/${encodeURIComponent(code)}/finish`, 'POST', {});
+      this.finalLeaderboardPayload = JSON.stringify(payload, null, 2);
+      this.finalLeaderboard = [...payload.leaderboard].sort((a, b) => {
+        if (b.score !== a.score) {
+          return b.score - a.score;
+        }
+        return a.nickname.localeCompare(b.nickname);
+      });
+      this.finalWinner = payload.winner ?? this.finalLeaderboard[0] ?? null;
+      await this.refreshSession();
+    } catch (error) {
+      this.finishError = `${this.copy('host.finish_game_failed')}: ${(error as Error).message}`;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private resetFinalLeaderboard(): void {
+    this.finalLeaderboardPayload = '';
+    this.finalLeaderboard = [];
+    this.finalWinner = null;
+  }
+
+  private syncRouteFromSession(): void {
+    if (!this.session) {
+      return;
+    }
+
+    const phase = this.session.session.status || 'lobby';
+    const code = this.normalizeCode(this.session.session.code || this.sessionCode);
+    if (!code) {
+      return;
+    }
+
+    const targetPath = `#/host/${encodeURIComponent(phase)}/${encodeURIComponent(code)}`;
+    if (typeof window === 'undefined' || window.location.hash === targetPath) {
+      return;
+    }
+
+    window.history.replaceState(window.history.state, '', targetPath);
+  }
+
+  private async runAction(action: () => Promise<void>): Promise<void> {
+    this.loading = true;
+    this.error = '';
+    try {
+      await action();
+    } catch (error) {
+      this.error = (error as Error).message;
+    } finally {
+      this.loading = false;
+    }
+  }
+}

frontend/angular/src/app/features/player/player-shell.component.spec.ts

@@ -0,0 +1,353 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { PlayerShellComponent } from './player-shell.component';
+
+type FetchMock = ReturnType<typeof vi.fn>;
+
+function jsonResponse(status: number, body: unknown) {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    json: vi.fn().mockResolvedValue(body),
+  } as unknown as Response;
+}
+
+function sessionDetailPayload(status: string, options?: { answers?: string[]; players?: Array<{ id: number; nickname: string; score: number }>; roundQuestionId?: number | null }) {
+  const answers = options?.answers ?? [];
+  const roundQuestionId = options?.roundQuestionId ?? 11;
+
+  return {
+    session: {
+      code: 'ABCD12',
+      status,
+      host_id: null,
+      current_round: 1,
+      players_count: (options?.players ?? []).length,
+    },
+    round_question:
+      roundQuestionId === null
+        ? null
+        : {
+            id: roundQuestionId,
+            round_number: 1,
+            prompt: 'Q?',
+            shown_at: '2026-01-01T00:00:00Z',
+            answers: answers.map((text) => ({ text })),
+          },
+    players: (options?.players ?? []).map((player) => ({
+      ...player,
+      is_connected: true,
+    })),
+    phase_view_model: {
+      status,
+      round_number: 1,
+      players_count: (options?.players ?? []).length,
+      constraints: {
+        min_players_to_start: 2,
+        max_players_mvp: 8,
+        min_players_reached: true,
+        max_players_allowed: true,
+      },
+      host: {
+        can_start_round: false,
+        can_show_question: false,
+        can_mix_answers: false,
+        can_calculate_scores: false,
+        can_reveal_scoreboard: false,
+        can_start_next_round: false,
+        can_finish_game: false,
+      },
+      player: {
+        can_join: status === 'lobby',
+        can_submit_lie: status === 'lie',
+        can_submit_guess: status === 'guess',
+        can_view_final_result: status === 'finished',
+      },
+    },
+  };
+}
+
+describe('PlayerShellComponent gameplay wiring', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('clears selected guess when refreshed status is no longer guess', async () => {
+    const fetchMock: FetchMock = vi.fn().mockResolvedValue(
+      jsonResponse(200, sessionDetailPayload('reveal', { answers: ['A'] }))
+    );
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'abcd12';
+    component.selectedGuess = 'A';
+
+    await component.refreshSession();
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/lobby/sessions/ABCD12',
+      expect.objectContaining({ method: 'GET' })
+    );
+    expect(component.selectedGuess).toBe('');
+  });
+
+  it('surfaces lie submit error and allows retry success flow', async () => {
+    const fetchMock: FetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(500, { error: 'Temporary submit outage' }))
+      .mockResolvedValueOnce(jsonResponse(201, { lie: { id: 1, player_id: 9, round_question_id: 11, text: 'my lie', created_at: '2026-01-01T00:00:01Z' }, window: { lie_deadline_at: '2026-01-01T00:00:45Z' } }))
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('guess', { answers: ['A', 'B'] })));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'ABCD12';
+    component.playerId = 9;
+    component.sessionToken = 'token-1';
+    component.lieText = 'my lie';
+    component.session = {
+      session: { code: 'ABCD12', status: 'lie', current_round: 1 },
+      round_question: { id: 11, prompt: 'Q?', answers: [] },
+      players: [],
+    };
+
+    await component.submitLie();
+
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      '/lobby/sessions/ABCD12/questions/11/lies/submit',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({ player_id: 9, session_token: 'token-1', text: 'my lie' }),
+      })
+    );
+    expect(component.submitError?.kind).toBe('lie');
+    expect(component.submitError?.message).toContain('Lie submit failed: Temporary submit outage');
+
+    await component.submitLie();
+
+    expect(component.submitError).toBeNull();
+    expect(component.session?.session.status).toBe('guess');
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+  });
+
+  it('builds final leaderboard in finished status without legacy page hop', async () => {
+    const fetchMock: FetchMock = vi.fn().mockResolvedValue(
+      jsonResponse(
+        200,
+        sessionDetailPayload('finished', {
+          roundQuestionId: null,
+          players: [
+            { id: 2, nickname: 'Mads', score: 150 },
+            { id: 1, nickname: 'Luna', score: 320 },
+          ],
+        })
+      )
+    );
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'ABCD12';
+
+    await component.refreshSession();
+
+    expect(component.finalLeaderboard.map((entry) => entry.nickname)).toEqual(['Luna', 'Mads']);
+  });
+
+  it('surfaces guess submit error and retries with selected answer payload', async () => {
+    const fetchMock: FetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(503, { error: 'Guess queue busy' }))
+      .mockResolvedValueOnce(jsonResponse(201, { guess: { id: 2, player_id: 9, round_question_id: 11, selected_text: 'B', is_correct: false, fooled_player_id: 3, created_at: '2026-01-01T00:00:10Z' }, window: { guess_deadline_at: '2026-01-01T00:01:30Z' } }))
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('reveal', { answers: ['A', 'B'] })));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = ' abcd12 ';
+    component.playerId = 9;
+    component.sessionToken = 'token-1';
+    component.selectedGuess = 'B';
+    component.session = {
+      session: { code: 'ABCD12', status: 'guess', current_round: 1 },
+      round_question: { id: 11, prompt: 'Q?', answers: [{ text: 'A' }, { text: 'B' }] },
+      players: [],
+    };
+
+    await component.submitGuess();
+
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      '/lobby/sessions/ABCD12/questions/11/guesses/submit',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({ player_id: 9, session_token: 'token-1', selected_text: 'B' }),
+      })
+    );
+    expect(component.submitError?.kind).toBe('guess');
+    expect(component.submitError?.message).toContain('Guess submit failed: Guess queue busy');
+
+    await component.submitGuess();
+
+    expect(component.submitError).toBeNull();
+    expect(component.session?.session.status).toBe('reveal');
+    expect(component.selectedGuess).toBe('');
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+  });
+
+  it('auto-refreshes player session to avoid host/player state desync between rounds', async () => {
+    vi.useFakeTimers();
+
+    const fetchMock: FetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('scoreboard', { roundQuestionId: null })))
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('lobby', { roundQuestionId: null })));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'ABCD12';
+
+    await component.refreshSession();
+    expect(component.session?.session.status).toBe('scoreboard');
+
+    await vi.advanceTimersByTimeAsync(3100);
+
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(component.session?.session.status).toBe('lobby');
+
+    component.ngOnDestroy();
+  });
+
+  it('enters reconnecting state when network request fails while online', async () => {
+    vi.stubGlobal('navigator', { onLine: true });
+
+    const fetchMock: FetchMock = vi.fn().mockRejectedValueOnce(new TypeError('Failed to fetch'));
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'ABCD12';
+
+    await component.refreshSession();
+
+    expect(component.connectionState === 'reconnecting' || component.connectionState === 'online').toBe(true);
+    expect(component.error).toContain('Session refresh failed:');
+  });
+
+  it('uses offline state when browser reports disconnected network', async () => {
+    vi.stubGlobal('navigator', { onLine: false });
+
+    const fetchMock: FetchMock = vi.fn().mockRejectedValue(new TypeError('Failed to fetch'));
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'ABCD12';
+
+    await component.refreshSession();
+
+    expect(component.connectionState).toBe('offline');
+    expect(component.error).toContain('Session refresh failed');
+  });
+
+  it('tracks loading transition message for join action', async () => {
+    let resolveJoin: ((value: Response) => void) | null = null;
+    const fetchMock: FetchMock = vi.fn().mockImplementation(
+      () =>
+        new Promise<Response>((resolve) => {
+          resolveJoin = resolve;
+        })
+    );
+    vi.stubGlobal('fetch', fetchMock);
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'ABCD12';
+    component.nickname = 'Luna';
+
+    const joinPromise = component.joinSession();
+
+    expect(component.loading).toBe(true);
+    expect(component.loadingMessage).toBe('Joining session… restoring your player state.');
+
+    resolveJoin?.(jsonResponse(201, sessionDetailPayload('lobby', { roundQuestionId: null })));
+    await joinPromise;
+
+    expect(component.loading).toBe(false);
+    expect(component.loadingTransition).toBeNull();
+  });
+
+  it('returnToJoin clears persisted session context and transient state', () => {
+    const values = new Map<string, string>();
+    const localStorage = {
+      getItem: vi.fn((key: string) => values.get(key) ?? null),
+      setItem: vi.fn((key: string, value: string) => {
+        values.set(key, value);
+      }),
+      removeItem: vi.fn((key: string) => {
+        values.delete(key);
+      }),
+    };
+
+    vi.stubGlobal('window', {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      localStorage,
+    });
+
+    values.set('wpp.session-context', JSON.stringify({ sessionCode: 'ABCD12', playerId: 9, token: 'tok-1' }));
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'ABCD12';
+    component.playerId = 9;
+    component.sessionToken = 'tok-1';
+    component.error = 'Session refresh failed';
+    component.submitError = { kind: 'guess', message: 'Guess submit failed' };
+    component.session = {
+      session: { code: 'ABCD12', status: 'guess', current_round: 1 },
+      round_question: { id: 11, prompt: 'Q?', answers: [{ text: 'A' }] },
+      players: [],
+    };
+
+    component.returnToJoin();
+
+    expect(component.playerId).toBe(0);
+    expect(component.sessionToken).toBe('');
+    expect(component.session).toBeNull();
+    expect(component.error).toBe('');
+    expect(component.submitError).toBeNull();
+    expect(values.get('wpp.session-context')).toBeUndefined();
+  });
+
+  it('syncs player hash-route with latest phase during periodic state sync', async () => {
+    vi.useFakeTimers();
+
+    const fetchMock: FetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('scoreboard', { roundQuestionId: null })))
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('lobby', { roundQuestionId: null })));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    const replaceState = vi.fn();
+    const localStorage = { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() };
+    vi.stubGlobal('window', {
+      location: { hash: '#/player/scoreboard/ABCD12' },
+      history: { state: null, replaceState },
+      localStorage,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+
+    const component = new PlayerShellComponent();
+    component.sessionCode = 'ABCD12';
+
+    await component.refreshSession();
+    await vi.advanceTimersByTimeAsync(3100);
+
+    expect(replaceState).toHaveBeenCalledWith(null, '', '#/player/lobby/ABCD12');
+
+    component.ngOnDestroy();
+  });
+});

frontend/angular/src/app/features/player/player-shell.component.ts

@@ -0,0 +1,463 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { createApiClient } from '../../../../../src/api/client';
+import { createSessionContextStore } from '../../../../../src/spa/session-context-store';
+import { createVerticalSliceController } from '../../../../../src/spa/vertical-slice';
+import { clientHasNoAudioOutput, resolvePreferredLocale, subscribeToLocaleChanges, t } from '../../lobby-i18n';
+
+interface SessionDetail {
+  session: { code: string; status: string; current_round: number };
+  round_question: { id: number; prompt: string; answers: Array<{ text: string }> } | null;
+  players: Array<{ id: number; nickname: string; score: number }>;
+}
+
+type ConnectionState = 'online' | 'reconnecting' | 'offline';
+type LoadingTransition = 'refresh' | 'join' | 'submit-lie' | 'submit-guess' | null;
+
+function resolveLocalStorage(): Storage | undefined {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  return window.localStorage;
+}
+
+@Component({
+  selector: 'app-player-shell',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <h2>{{ copy('player.title') }}</h2>
+
+    <div class="panel" [attr.data-client-has-no-audio-output]="clientHasNoAudioOutput">
+      <label>{{ copy('common.session_code') }} <input [(ngModel)]="sessionCode" /></label>
+      <label>{{ copy('player.nickname') }} <input [(ngModel)]="nickname" /></label>
+      <button (click)="refreshSession()" [disabled]="loading">{{ copy('common.refresh') }}</button>
+      <button (click)="joinSession()" [disabled]="loading">{{ copy('player.join') }}</button>
+    </div>
+
+    <p *ngIf="connectionState === 'reconnecting'" class="error">
+      {{ copy('player.reconnecting_text') }}
+      <button type="button" (click)="retryReconnect()" [disabled]="loading">{{ copy('player.retry_now') }}</button>
+      <button type="button" (click)="returnToJoin()" [disabled]="loading">{{ copy('common.back_to_join') }}</button>
+    </p>
+    <p *ngIf="connectionState === 'offline'" class="error">
+      {{ copy('player.offline_text') }}
+      <button type="button" (click)="retryReconnect()" [disabled]="loading">{{ copy('player.retry_now') }}</button>
+      <button type="button" (click)="returnToJoin()" [disabled]="loading">{{ copy('common.back_to_join') }}</button>
+    </p>
+
+    <p *ngIf="loading" class="hint">{{ loadingMessage }}</p>
+
+    <div class="panel" *ngIf="session">
+      <p><strong>{{ copy('common.status') }}:</strong> {{ session.session.status }}</p>
+      <p *ngIf="session.round_question"><strong>{{ copy('common.prompt') }}:</strong> {{ session.round_question.prompt }}</p>
+
+      <label>{{ copy('player.lie_label') }} <input [(ngModel)]="lieText" [disabled]="loading || session.session.status !== 'lie'" /></label>
+      <button (click)="submitLie()" [disabled]="loading || session.session.status !== 'lie'">{{ copy('player.submit_lie') }}</button>
+      <button *ngIf="submitError?.kind === 'lie'" (click)="submitLie()" [disabled]="loading">{{ copy('player.retry_lie_submit') }}</button>
+
+      <div class="answers" *ngIf="session.round_question?.answers?.length">
+        <button
+          type="button"
+          *ngFor="let answer of session.round_question?.answers"
+          (click)="selectedGuess = answer.text"
+          [class.active]="selectedGuess === answer.text"
+          [disabled]="loading || session.session.status !== 'guess'"
+        >
+          {{ answer.text }}
+        </button>
+      </div>
+
+      <button (click)="submitGuess()" [disabled]="loading || session.session.status !== 'guess' || !selectedGuess">{{ copy('player.submit_guess') }}</button>
+      <button *ngIf="submitError?.kind === 'guess'" (click)="submitGuess()" [disabled]="loading">{{ copy('player.retry_guess_submit') }}</button>
+
+      <div *ngIf="session.session.status === 'finished' && finalLeaderboard.length">
+        <h3>{{ copy('player.final_leaderboard') }}</h3>
+        <ol>
+          <li *ngFor="let entry of finalLeaderboard">{{ entry.nickname }}: {{ entry.score }}</li>
+        </ol>
+      </div>
+    </div>
+
+    <p *ngIf="error" class="error">{{ error }}</p>
+    <p *ngIf="submitError" class="error">{{ submitError.message }}</p>
+
+    <div class="panel" *ngIf="error || submitError">
+      <button type="button" (click)="retryReconnect()" [disabled]="loading">{{ copy('common.retry') }}</button>
+      <button type="button" (click)="returnToJoin()" [disabled]="loading">{{ copy('common.back_to_join') }}</button>
+    </div>
+  `,
+})
+export class PlayerShellComponent implements OnInit, OnDestroy {
+  locale = resolvePreferredLocale();
+  readonly clientHasNoAudioOutput = clientHasNoAudioOutput;
+
+  sessionCode = '';
+  nickname = '';
+  playerId = 0;
+  sessionToken = '';
+  lieText = '';
+  selectedGuess = '';
+  loading = false;
+  error = '';
+  submitError: { kind: 'lie' | 'guess'; message: string } | null = null;
+  session: SessionDetail | null = null;
+  finalLeaderboard: Array<{ id: number; nickname: string; score: number }> = [];
+  connectionState: ConnectionState = 'online';
+  loadingTransition: LoadingTransition = null;
+
+  private readonly sessionContextStore = createSessionContextStore(resolveLocalStorage());
+  private readonly controller = createVerticalSliceController(createApiClient(), this.sessionContextStore);
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private stateSyncTimer: ReturnType<typeof setTimeout> | null = null;
+  private unsubscribeLocale: (() => void) | null = null;
+
+  constructor() {
+    if (typeof navigator !== 'undefined' && !navigator.onLine) {
+      this.connectionState = 'offline';
+    }
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('online', this.handleOnline);
+      window.addEventListener('offline', this.handleOffline);
+    }
+  }
+
+  ngOnInit(): void {
+    this.unsubscribeLocale = subscribeToLocaleChanges((locale) => {
+      this.locale = locale;
+    });
+
+    const hashRoute = window.location.hash.replace(/^#\/?/, '');
+    const match = hashRoute.match(/^player(?:\/[^/]+)?(?:\/([^/?#]+))?/i);
+    const codeFromRoute = match?.[1] ?? '';
+
+    const persistedContext = this.sessionContextStore.get();
+    if (persistedContext) {
+      this.playerId = persistedContext.playerId;
+      this.sessionToken = persistedContext.token;
+    }
+
+    const candidate = codeFromRoute || persistedContext?.sessionCode || '';
+    if (!candidate) {
+      return;
+    }
+
+    this.sessionCode = this.normalizeCode(candidate);
+    void this.refreshSession();
+  }
+
+  ngOnDestroy(): void {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('online', this.handleOnline);
+      window.removeEventListener('offline', this.handleOffline);
+    }
+    this.clearReconnectTimer();
+    this.clearStateSyncTimer();
+    this.unsubscribeLocale?.();
+    this.unsubscribeLocale = null;
+  }
+
+  private readonly handleOnline = (): void => {
+    this.connectionState = 'reconnecting';
+    void this.retryReconnect();
+  };
+
+  private readonly handleOffline = (): void => {
+    this.connectionState = 'offline';
+    this.clearReconnectTimer();
+    this.clearStateSyncTimer();
+  };
+
+  private clearReconnectTimer(): void {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+  }
+
+  private clearStateSyncTimer(): void {
+    if (this.stateSyncTimer) {
+      clearTimeout(this.stateSyncTimer);
+      this.stateSyncTimer = null;
+    }
+  }
+
+  private scheduleStateSync(): void {
+    this.clearStateSyncTimer();
+
+    if (!this.sessionCode.trim() || this.connectionState !== 'online' || !this.session) {
+      return;
+    }
+
+    if (this.session.session.status === 'finished') {
+      return;
+    }
+
+    this.stateSyncTimer = setTimeout(() => {
+      this.stateSyncTimer = null;
+      if (this.loading || this.connectionState !== 'online') {
+        this.scheduleStateSync();
+        return;
+      }
+      void this.refreshSession();
+    }, 3000);
+  }
+
+  get loadingMessage(): string {
+    switch (this.loadingTransition) {
+      case 'join':
+        return this.copy('player.loading_join');
+      case 'submit-lie':
+        return this.copy('player.loading_submit_lie');
+      case 'submit-guess':
+        return this.copy('player.loading_submit_guess');
+      case 'refresh':
+      default:
+        return this.copy('player.loading_refresh');
+    }
+  }
+
+  copy(key: string): string {
+    return t(key, this.locale);
+  }
+
+  private normalizeCode(value: string): string {
+    return value.trim().toUpperCase();
+  }
+
+  private toMessage(error: unknown): string {
+    if (error instanceof Error && error.message) {
+      return error.message;
+    }
+    return 'Unknown error';
+  }
+
+  private markOnline(): void {
+    this.connectionState = 'online';
+    this.clearReconnectTimer();
+    this.scheduleStateSync();
+  }
+
+  private markConnectionIssue(error: unknown): void {
+    this.clearStateSyncTimer();
+
+    if (typeof navigator !== 'undefined' && !navigator.onLine) {
+      this.connectionState = 'offline';
+      return;
+    }
+
+    const message = this.toMessage(error).toLowerCase();
+    if (
+      message.includes('fetch') ||
+      message.includes('network') ||
+      message.includes('failed to') ||
+      message.includes('could not load lobby status') ||
+      message.includes('session refresh failed')
+    ) {
+      this.connectionState = 'reconnecting';
+      this.scheduleReconnect();
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (this.reconnectTimer || !this.sessionCode.trim()) {
+      return;
+    }
+
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      void this.retryReconnect();
+    }, 2000);
+  }
+
+  async retryReconnect(): Promise<void> {
+    if (!this.sessionCode.trim() || this.loading) {
+      return;
+    }
+
+    await this.refreshSession();
+  }
+
+  returnToJoin(): void {
+    this.loadingTransition = null;
+    this.clearReconnectTimer();
+    this.clearStateSyncTimer();
+    this.connectionState = typeof navigator !== 'undefined' && !navigator.onLine ? 'offline' : 'online';
+    this.session = null;
+    this.finalLeaderboard = [];
+    this.selectedGuess = '';
+    this.lieText = '';
+    this.submitError = null;
+    this.error = '';
+    this.playerId = 0;
+    this.sessionToken = '';
+    this.sessionContextStore.clear();
+  }
+
+  private syncFinalLeaderboard(): void {
+    if (!this.session || this.session.session.status !== 'finished') {
+      this.finalLeaderboard = [];
+      return;
+    }
+
+    this.finalLeaderboard = [...this.session.players].sort((a, b) => {
+      if (b.score !== a.score) {
+        return b.score - a.score;
+      }
+      return a.nickname.localeCompare(b.nickname);
+    });
+  }
+
+  private syncRouteFromSession(): void {
+    if (!this.session) {
+      return;
+    }
+
+    const phase = this.session.session.status || 'lobby';
+    const code = this.normalizeCode(this.session.session.code || this.sessionCode);
+    if (!code) {
+      return;
+    }
+
+    const targetPath = `#/player/${encodeURIComponent(phase)}/${encodeURIComponent(code)}`;
+    if (typeof window === 'undefined' || window.location.hash === targetPath) {
+      return;
+    }
+
+    window.history.replaceState(window.history.state, '', targetPath);
+  }
+
+  private async request<T>(path: string, method: 'GET' | 'POST', payload?: unknown): Promise<T> {
+    const response = await fetch(path, {
+      method,
+      headers: {
+        Accept: 'application/json',
+        ...(payload === undefined ? {} : { 'Content-Type': 'application/json' }),
+      },
+      ...(payload === undefined ? {} : { body: JSON.stringify(payload) }),
+      credentials: 'same-origin',
+    });
+
+    const body = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      throw new Error((body as { error?: string }).error ?? `HTTP ${response.status}`);
+    }
+
+    return body as T;
+  }
+
+  async refreshSession(): Promise<void> {
+    this.loading = true;
+    this.loadingTransition = 'refresh';
+    this.error = '';
+    try {
+      const state = await this.controller.hydrateLobby(this.sessionCode);
+      if (!state.session || state.errorMessage) {
+        throw new Error(state.errorMessage ?? 'Unknown error');
+      }
+      this.session = state.session as SessionDetail;
+      this.sessionCode = this.session.session.code;
+      if (this.session.session.status !== 'guess') {
+        this.selectedGuess = '';
+      }
+      this.syncFinalLeaderboard();
+      this.syncRouteFromSession();
+      this.markOnline();
+    } catch (error) {
+      this.error = `${this.copy('player.session_refresh_failed')}: ${this.toMessage(error)}`;
+      this.markConnectionIssue(error);
+    } finally {
+      this.loading = false;
+      this.loadingTransition = null;
+    }
+  }
+
+  async joinSession(): Promise<void> {
+    this.loading = true;
+    this.loadingTransition = 'join';
+    this.error = '';
+    try {
+      const state = await this.controller.joinLobby(this.sessionCode, this.nickname);
+      if (!state.session || state.errorMessage) {
+        throw new Error(state.errorMessage ?? 'Unknown error');
+      }
+      this.session = state.session as SessionDetail;
+      this.sessionCode = this.session.session.code;
+
+      const sessionContext = this.sessionContextStore.get();
+      this.playerId = sessionContext?.playerId ?? 0;
+      this.sessionToken = sessionContext?.token ?? '';
+      if (this.session.session.status !== 'guess') {
+        this.selectedGuess = '';
+      }
+      this.syncFinalLeaderboard();
+      this.syncRouteFromSession();
+      this.markOnline();
+    } catch (error) {
+      this.error = `${this.copy('player.join_failed')}: ${this.toMessage(error)}`;
+      this.markConnectionIssue(error);
+    } finally {
+      this.loading = false;
+      this.loadingTransition = null;
+    }
+  }
+
+  async submitLie(): Promise<void> {
+    if (!this.session?.round_question?.id) {
+      return;
+    }
+    this.loading = true;
+    this.loadingTransition = 'submit-lie';
+    this.submitError = null;
+    try {
+      await this.request(
+        `/lobby/sessions/${encodeURIComponent(this.normalizeCode(this.sessionCode))}/questions/${this.session.round_question.id}/lies/submit`,
+        'POST',
+        {
+          player_id: this.playerId,
+          session_token: this.sessionToken,
+          text: this.lieText,
+        }
+      );
+      await this.refreshSession();
+      this.markOnline();
+    } catch (error) {
+      this.submitError = { kind: 'lie', message: `${this.copy('player.lie_submit_failed')}: ${this.toMessage(error)}` };
+      this.markConnectionIssue(error);
+    } finally {
+      this.loading = false;
+      this.loadingTransition = null;
+    }
+  }
+
+  async submitGuess(): Promise<void> {
+    if (!this.session?.round_question?.id || !this.selectedGuess) {
+      return;
+    }
+    this.loading = true;
+    this.loadingTransition = 'submit-guess';
+    this.submitError = null;
+    try {
+      await this.request(
+        `/lobby/sessions/${encodeURIComponent(this.normalizeCode(this.sessionCode))}/questions/${this.session.round_question.id}/guesses/submit`,
+        'POST',
+        {
+          player_id: this.playerId,
+          session_token: this.sessionToken,
+          selected_text: this.selectedGuess,
+        }
+      );
+      await this.refreshSession();
+      this.markOnline();
+    } catch (error) {
+      this.submitError = { kind: 'guess', message: `${this.copy('player.guess_submit_failed')}: ${this.toMessage(error)}` };
+      this.markConnectionIssue(error);
+    } finally {
+      this.loading = false;
+      this.loadingTransition = null;
+    }
+  }
+}

frontend/angular/src/app/gameplay-phase-machine.spec.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest';
+
+import { deriveGameplayPhase, transitionGameplayPhase } from '../../../src/spa/gameplay-phase-machine';
+
+describe('gameplay phase machine sync guards', () => {
+  it('keeps explicit scoreboard status as scoreboard phase', () => {
+    const phase = deriveGameplayPhase({
+      session: {
+        code: 'ABCD12',
+        status: 'scoreboard',
+        host_id: 1,
+        current_round: 1,
+        players_count: 2,
+      },
+      round_question: null,
+      players: [],
+      phase_view_model: {
+        status: 'scoreboard',
+        round_number: 1,
+        players_count: 2,
+        constraints: {
+          min_players_to_start: 2,
+          max_players_mvp: 8,
+          min_players_reached: true,
+          max_players_allowed: true,
+        },
+        host: {
+          can_start_round: false,
+          can_show_question: false,
+          can_mix_answers: false,
+          can_calculate_scores: false,
+          can_reveal_scoreboard: false,
+          can_start_next_round: true,
+          can_finish_game: true,
+        },
+        player: {
+          can_join: false,
+          can_submit_lie: false,
+          can_submit_guess: false,
+          can_view_final_result: false,
+        },
+      },
+    });
+
+    expect(phase).toBe('scoreboard');
+  });
+
+  it('maps finished status to scoreboard phase fallback', () => {
+    const phase = deriveGameplayPhase({
+      session: {
+        code: 'ABCD12',
+        status: 'finished',
+        host_id: 1,
+        current_round: 1,
+        players_count: 2,
+      },
+      round_question: null,
+      players: [],
+      phase_view_model: {
+        status: 'finished',
+        round_number: 1,
+        players_count: 2,
+        constraints: {
+          min_players_to_start: 2,
+          max_players_mvp: 8,
+          min_players_reached: true,
+          max_players_allowed: true,
+        },
+        host: {
+          can_start_round: false,
+          can_show_question: false,
+          can_mix_answers: false,
+          can_calculate_scores: false,
+          can_reveal_scoreboard: false,
+          can_start_next_round: false,
+          can_finish_game: false,
+        },
+        player: {
+          can_join: false,
+          can_submit_lie: false,
+          can_submit_guess: false,
+          can_view_final_result: true,
+        },
+      },
+    });
+
+    expect(phase).toBe('scoreboard');
+  });
+
+  it('transitions reveal -> scoreboard on SCOREBOARD_READY', () => {
+    expect(transitionGameplayPhase('reveal', 'SCOREBOARD_READY')).toEqual({
+      phase: 'scoreboard',
+      changed: true,
+    });
+  });
+});

frontend/angular/src/app/i18n-mvp-flow-smoke.spec.ts

@@ -0,0 +1,61 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { HostShellComponent } from './features/host/host-shell.component';
+import { PlayerShellComponent } from './features/player/player-shell.component';
+import { setPreferredLocale } from './lobby-i18n';
+
+describe('i18n MVP flow smoke (host/player + audio policy)', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('resolves host/player copy in en and da from shared catalog', () => {
+    vi.stubGlobal('window', {
+      location: { hash: '', search: '' },
+      history: { state: null, replaceState: vi.fn() },
+      localStorage: { getItem: vi.fn().mockReturnValue('en'), setItem: vi.fn(), removeItem: vi.fn() },
+      sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() },
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    vi.stubGlobal('navigator', { language: 'en-US', onLine: true });
+
+    const host = new HostShellComponent();
+    const player = new PlayerShellComponent();
+    host.ngOnInit();
+    player.ngOnInit();
+
+    expect(host.copy('host.start_round')).toBe('Start round');
+    expect(player.copy('player.submit_guess')).toBe('Submit guess');
+
+    setPreferredLocale('da');
+
+    expect(host.copy('host.start_round')).toBe('Start runde');
+    expect(player.copy('player.submit_guess')).toBe('Send gæt');
+
+    player.ngOnDestroy();
+    host.ngOnDestroy();
+  });
+
+  it('keeps audio routing policy primary-only (client has no audio output)', () => {
+    vi.stubGlobal('window', {
+      location: { hash: '', search: '' },
+      history: { state: null, replaceState: vi.fn() },
+      localStorage: { getItem: vi.fn().mockReturnValue('en'), setItem: vi.fn(), removeItem: vi.fn() },
+      sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() },
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    vi.stubGlobal('navigator', { language: 'en-US', onLine: true });
+
+    const host = new HostShellComponent();
+    const player = new PlayerShellComponent();
+
+    expect(host.clientHasNoAudioOutput).toBe(true);
+    expect(player.clientHasNoAudioOutput).toBe(true);
+
+    player.ngOnDestroy();
+    host.ngOnDestroy();
+  });
+});

frontend/angular/src/app/lobby-i18n.spec.ts

@@ -0,0 +1,91 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+type StorageLike = {
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
+};
+
+function storageMock(initial: Record<string, string> = {}): StorageLike {
+  const data = new Map<string, string>(Object.entries(initial));
+  return {
+    getItem: vi.fn((key: string) => data.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      data.set(key, value);
+    }),
+  };
+}
+
+describe('lobby i18n locale propagation', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    vi.resetModules();
+  });
+
+  it('notifies subscribers immediately and on locale changes', async () => {
+    const localStorage = storageMock({ 'wpp.locale': 'en' });
+    vi.stubGlobal('window', {
+      location: { search: '' },
+      localStorage,
+    });
+    vi.stubGlobal('navigator', { language: 'en-US' });
+
+    const i18n = await import('./lobby-i18n');
+
+    const updates: string[] = [];
+    const unsubscribe = i18n.subscribeToLocaleChanges((locale) => updates.push(locale));
+
+    expect(updates).toEqual(['en']);
+
+    i18n.setPreferredLocale('da');
+    expect(updates).toEqual(['en', 'da']);
+
+    unsubscribe();
+    i18n.setPreferredLocale('en');
+    expect(updates).toEqual(['en', 'da']);
+  });
+
+  it('falls back to default en translation when da key is intentionally missing', async () => {
+    vi.stubGlobal('window', {
+      location: { search: '' },
+      localStorage: storageMock({ 'wpp.locale': 'da' }),
+    });
+    vi.stubGlobal('navigator', { language: 'da-DK' });
+
+    const i18n = await import('./lobby-i18n');
+    const catalogModule = await import('../../../../shared/i18n/lobby.json');
+    const catalog = catalogModule.default as {
+      frontend: {
+        ui: {
+          common: {
+            refresh: {
+              en?: string;
+              da?: string;
+            };
+          };
+        };
+      };
+    };
+
+    const originalDa = catalog.frontend.ui.common.refresh.da;
+    catalog.frontend.ui.common.refresh.da = undefined;
+
+    try {
+      expect(i18n.t('common.refresh', 'da')).toBe(catalog.frontend.ui.common.refresh.en);
+    } finally {
+      catalog.frontend.ui.common.refresh.da = originalDa;
+    }
+  });
+
+  it('exposes primary-only audio routing policy to clients', async () => {
+    vi.stubGlobal('window', {
+      location: { search: '' },
+      localStorage: storageMock({ 'wpp.locale': 'en' }),
+    });
+    vi.stubGlobal('navigator', { language: 'en-US' });
+
+    const i18n = await import('./lobby-i18n');
+
+    expect(i18n.clientHasNoAudioOutput).toBe(true);
+  });
+});

frontend/angular/src/app/lobby-i18n.ts

@@ -0,0 +1,86 @@
+import lobbyCatalog from '../../../../shared/i18n/lobby.json';
+
+type SupportedLocale = (typeof lobbyCatalog.locales.supported)[number];
+
+const DEFAULT_LOCALE = lobbyCatalog.locales.default as SupportedLocale;
+const SUPPORTED_LOCALES = lobbyCatalog.locales.supported as readonly SupportedLocale[];
+
+let activeLocale: SupportedLocale | null = null;
+const localeSubscribers = new Set<(locale: SupportedLocale) => void>();
+
+export function normalizeLocale(rawLocale?: string | null): SupportedLocale {
+  const locale = (rawLocale ?? '').trim().toLowerCase();
+  if ((SUPPORTED_LOCALES as readonly string[]).includes(locale)) {
+    return locale as SupportedLocale;
+  }
+
+  const shortLocale = locale.split('-')[0] ?? '';
+  if ((SUPPORTED_LOCALES as readonly string[]).includes(shortLocale)) {
+    return shortLocale as SupportedLocale;
+  }
+
+  return DEFAULT_LOCALE;
+}
+
+export function resolvePreferredLocale(): SupportedLocale {
+  if (activeLocale) {
+    return activeLocale;
+  }
+
+  if (typeof window === 'undefined') {
+    activeLocale = DEFAULT_LOCALE;
+    return activeLocale;
+  }
+
+  const queryLocale = new URLSearchParams(window.location?.search ?? '').get('lang');
+  const storedLocale = window.localStorage?.getItem?.('wpp.locale');
+  const browserLocale = typeof navigator !== 'undefined' ? navigator.language : '';
+
+  activeLocale = normalizeLocale(queryLocale || storedLocale || browserLocale || DEFAULT_LOCALE);
+  return activeLocale;
+}
+
+export function setPreferredLocale(locale: string): SupportedLocale {
+  const normalized = normalizeLocale(locale);
+  activeLocale = normalized;
+  if (typeof window !== 'undefined') {
+    window.localStorage?.setItem?.('wpp.locale', normalized);
+  }
+
+  for (const subscriber of localeSubscribers) {
+    subscriber(normalized);
+  }
+
+  return normalized;
+}
+
+export function subscribeToLocaleChanges(callback: (locale: SupportedLocale) => void): () => void {
+  localeSubscribers.add(callback);
+  callback(resolvePreferredLocale());
+  return () => {
+    localeSubscribers.delete(callback);
+  };
+}
+
+export function t(key: string, locale: string): string {
+  const normalizedLocale = normalizeLocale(locale);
+  const fallbackLocale = DEFAULT_LOCALE;
+  const segments = key.split('.');
+
+  let cursor: unknown = lobbyCatalog.frontend.ui;
+  for (const segment of segments) {
+    if (!cursor || typeof cursor !== 'object' || !(segment in (cursor as Record<string, unknown>))) {
+      return key;
+    }
+    cursor = (cursor as Record<string, unknown>)[segment];
+  }
+
+  if (!cursor || typeof cursor !== 'object') {
+    return key;
+  }
+
+  const translations = cursor as Record<string, string>;
+  return translations[normalizedLocale] ?? translations[fallbackLocale] ?? key;
+}
+
+export const clientHasNoAudioOutput = Boolean(lobbyCatalog.frontend.capabilities.client_has_no_audio_output);

frontend/angular/src/app/session-route-context.spec.ts

@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { hostRouteContextResolver, playerRouteContextResolver, resolveSessionCode } from './session-route-context';
+
+type RouteLike = {
+  paramMap: { get: (key: string) => string | null };
+  queryParamMap: { get: (key: string) => string | null };
+};
+
+function route(params: Record<string, string | null>, query: Record<string, string | null> = {}): RouteLike {
+  return {
+    paramMap: { get: (key: string) => params[key] ?? null },
+    queryParamMap: { get: (key: string) => query[key] ?? null },
+  };
+}
+
+function storageMock(initial: Record<string, string> = {}): Storage {
+  const data = new Map<string, string>(Object.entries(initial));
+
+  return {
+    getItem: vi.fn((key: string) => data.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      data.set(key, value);
+    }),
+    removeItem: vi.fn((key: string) => {
+      data.delete(key);
+    }),
+    clear: vi.fn(() => {
+      data.clear();
+    }),
+    key: vi.fn((index: number) => Array.from(data.keys())[index] ?? null),
+    get length() {
+      return data.size;
+    },
+  } as unknown as Storage;
+}
+
+function setWindow(localStorage: Storage, sessionStorage: Storage): void {
+  vi.stubGlobal('window', { localStorage, sessionStorage });
+}
+
+describe('session route context', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('resolves player code from persisted session context when route has no code', () => {
+    setWindow(
+      storageMock({ 'wpp.session-context': JSON.stringify({ sessionCode: 'ab12', playerId: 7, token: 'tok' }) }),
+      storageMock()
+    );
+
+    expect(resolveSessionCode(route({}, {}) as never, 'player')).toBe('AB12');
+  });
+
+  it('resolves host code from session query string', () => {
+    setWindow(storageMock(), storageMock());
+
+    expect(resolveSessionCode(route({}, { session: 'qwe9' }) as never, 'host')).toBe('QWE9');
+  });
+
+  it('player resolver emits player id/token when context matches route session', () => {
+    setWindow(
+      storageMock({ 'wpp.session-context': JSON.stringify({ sessionCode: 'AB12', playerId: 5, token: 'tok-5' }) }),
+      storageMock()
+    );
+
+    expect(playerRouteContextResolver(route({ context: 'ab12' }) as never, {} as never)).toEqual({
+      sessionCode: 'AB12',
+      playerId: 5,
+      token: 'tok-5',
+    });
+  });
+
+  it('host resolver stores normalized host session code for refresh bootstrap', () => {
+    const sessionStorage = storageMock();
+    setWindow(storageMock(), sessionStorage);
+
+    expect(hostRouteContextResolver(route({ context: 'ab12' }) as never, {} as never)).toEqual({
+      sessionCode: 'AB12',
+      playerId: null,
+      token: null,
+    });
+    expect(sessionStorage.setItem).toHaveBeenCalledWith('wpp.host-session-code', 'AB12');
+  });
+});

frontend/angular/src/app/session-route-context.ts

@@ -0,0 +1,140 @@
+import { inject } from '@angular/core';
+import { type ActivatedRouteSnapshot, type CanActivateFn, type ResolveFn, Router, type UrlTree } from '@angular/router';
+
+import { createSessionContextStore } from '../../../src/spa/session-context-store';
+
+export interface RouteSessionContext {
+  sessionCode: string | null;
+  playerId: number | null;
+  token: string | null;
+}
+
+const HOST_STORAGE_KEY = 'wpp.host-session-code';
+
+function normalizeCode(value: string): string {
+  return value.trim().toUpperCase();
+}
+
+function isCodeLike(value: string | null | undefined): value is string {
+  return !!value && /^[A-Za-z0-9]{4,12}$/.test(value.trim());
+}
+
+function hasPlayerSessionContext(sessionCode: string): boolean {
+  const context = createSessionContextStore(window.localStorage).get();
+  if (!context) {
+    return false;
+  }
+
+  return (
+    isCodeLike(context.sessionCode) &&
+    normalizeCode(context.sessionCode) === normalizeCode(sessionCode) &&
+    Number.isInteger(context.playerId) &&
+    context.playerId > 0 &&
+    !!context.token.trim()
+  );
+}
+
+export function resolveSessionCode(route: ActivatedRouteSnapshot, mode: 'host' | 'player'): string | null {
+  const contextParam = route.paramMap.get('context');
+  const queryCode = route.queryParamMap.get('session');
+
+  if (isCodeLike(contextParam)) {
+    return normalizeCode(contextParam);
+  }
+  if (isCodeLike(queryCode)) {
+    return normalizeCode(queryCode);
+  }
+
+  if (mode === 'player') {
+    const persisted = createSessionContextStore(window.localStorage).get()?.sessionCode;
+    if (isCodeLike(persisted)) {
+      return normalizeCode(persisted);
+    }
+    return null;
+  }
+
+  const stored = window.sessionStorage.getItem(HOST_STORAGE_KEY);
+  if (isCodeLike(stored)) {
+    return normalizeCode(stored);
+  }
+
+  return null;
+}
+
+async function sessionExists(code: string): Promise<boolean> {
+  const response = await fetch(`/lobby/sessions/${encodeURIComponent(code)}`, {
+    method: 'GET',
+    headers: { Accept: 'application/json' },
+    credentials: 'same-origin',
+  });
+
+  return response.ok;
+}
+
+async function requireSessionContext(route: ActivatedRouteSnapshot, mode: 'host' | 'player'): Promise<boolean> {
+  const phase = route.paramMap.get('phase');
+  const code = resolveSessionCode(route, mode);
+
+  if (!phase) {
+    if (mode === 'host' && code) {
+      window.sessionStorage.setItem(HOST_STORAGE_KEY, code);
+    }
+    return true;
+  }
+
+  if (!code) {
+    return false;
+  }
+
+  if (mode === 'player' && !hasPlayerSessionContext(code)) {
+    return false;
+  }
+
+  const ok = await sessionExists(code);
+  if (!ok) {
+    return false;
+  }
+
+  if (mode === 'host') {
+    window.sessionStorage.setItem(HOST_STORAGE_KEY, code);
+  }
+
+  return true;
+}
+
+async function guard(mode: 'host' | 'player', route: ActivatedRouteSnapshot): Promise<boolean | UrlTree> {
+  const router = inject(Router);
+  const allowed = await requireSessionContext(route, mode);
+  if (allowed) {
+    return true;
+  }
+
+  return router.createUrlTree([`/${mode}`]);
+}
+
+export const hostRouteGuard: CanActivateFn = (route) => guard('host', route);
+
+export const playerRouteGuard: CanActivateFn = (route) => guard('player', route);
+
+export const hostRouteContextResolver: ResolveFn<RouteSessionContext> = (route) => {
+  const code = resolveSessionCode(route, 'host');
+  if (code) {
+    window.sessionStorage.setItem(HOST_STORAGE_KEY, code);
+  }
+  return { sessionCode: code, playerId: null, token: null };
+};
+
+export const playerRouteContextResolver: ResolveFn<RouteSessionContext> = (route) => {
+  const code = resolveSessionCode(route, 'player');
+  const context = createSessionContextStore(window.localStorage).get();
+
+  if (!code || !context || normalizeCode(context.sessionCode) !== code) {
+    return { sessionCode: code, playerId: null, token: null };
+  }
+
+  return {
+    sessionCode: code,
+    playerId: Number.isInteger(context.playerId) && context.playerId > 0 ? context.playerId : null,
+    token: context.token.trim() || null,
+  };
+};

frontend/angular/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>WPP Angular Shell</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

frontend/angular/src/main.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((error) => {
+  console.error(error);
+});

frontend/angular/src/styles.css

@@ -0,0 +1,4 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}

frontend/angular/src/test-setup.ts

@@ -0,0 +1 @@
+import '@angular/compiler';

frontend/angular/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

frontend/angular/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

frontend/angular/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['src/**/*.spec.ts'],
+    setupFiles: ['src/test-setup.ts'],
+  },
+});

frontend/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "wpp-frontend-api-client-baseline",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "build": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.10",
+    "typescript": "^5.7.3",
+    "vitest": "^2.1.9"
+  }
+}

frontend/src/api/angular-client.ts

@@ -0,0 +1,262 @@
+import {
+  mapCalculateScoresResponse,
+  mapFinishGameResponse,
+  mapHealthResponse,
+  mapJoinSessionResponse,
+  mapMixAnswersResponse,
+  mapScoreboardResponse,
+  mapSessionDetailResponse,
+  mapShowQuestionResponse,
+  mapStartNextRoundResponse,
+  mapStartRoundResponse,
+  mapSubmitGuessResponse,
+  mapSubmitLieResponse
+} from './mappers';
+import type {
+  ApiFailure,
+  ApiResult,
+  CalculateScoresResponse,
+  FinishGameResponse,
+  HealthResponse,
+  JoinSessionRequest,
+  JoinSessionResponse,
+  MixAnswersResponse,
+  ScoreboardResponse,
+  SessionDetailResponse,
+  ShowQuestionResponse,
+  StartNextRoundResponse,
+  StartRoundRequest,
+  StartRoundResponse,
+  SubmitGuessRequest,
+  SubmitGuessResponse,
+  SubmitLieRequest,
+  SubmitLieResponse
+} from './types';
+
+export interface AngularHttpError {
+  status?: number;
+  message?: string;
+  error?: unknown;
+}
+
+export interface AngularHttpClientLike {
+  get<T>(url: string, options?: { withCredentials?: boolean }): Promise<T>;
+  post<T>(url: string, body: unknown, options?: { withCredentials?: boolean }): Promise<T>;
+}
+
+export interface AngularApiClient {
+  health(): Promise<ApiResult<HealthResponse>>;
+  getSession(code: string): Promise<ApiResult<SessionDetailResponse>>;
+  joinSession(payload: JoinSessionRequest): Promise<ApiResult<JoinSessionResponse>>;
+  startRound(code: string, payload: StartRoundRequest): Promise<ApiResult<StartRoundResponse>>;
+  showQuestion(code: string): Promise<ApiResult<ShowQuestionResponse>>;
+  mixAnswers(code: string, roundQuestionId: number): Promise<ApiResult<MixAnswersResponse>>;
+  calculateScores(code: string, roundQuestionId: number): Promise<ApiResult<CalculateScoresResponse>>;
+  getScoreboard(code: string): Promise<ApiResult<ScoreboardResponse>>;
+  startNextRound(code: string): Promise<ApiResult<StartNextRoundResponse>>;
+  finishGame(code: string): Promise<ApiResult<FinishGameResponse>>;
+  submitLie(code: string, roundQuestionId: number, payload: SubmitLieRequest): Promise<ApiResult<SubmitLieResponse>>;
+  submitGuess(
+    code: string,
+    roundQuestionId: number,
+    payload: SubmitGuessRequest
+  ): Promise<ApiResult<SubmitGuessResponse>>;
+}
+
+function toFailure(error: unknown): ApiFailure {
+  const candidate = (error ?? {}) as AngularHttpError;
+  const status = typeof candidate.status === 'number' ? candidate.status : 0;
+  const payload = candidate.error;
+
+  if (status === 0) {
+    return {
+      kind: 'network',
+      status: 0,
+      message: candidate.message ?? 'Network error while contacting API'
+    };
+  }
+
+  return {
+    kind: 'http',
+    status,
+    message: candidate.message ?? `HTTP ${status}`,
+    ...(payload === undefined ? {} : { payload })
+  };
+}
+
+function normalizeCode(code: string): string {
+  return code.trim().toUpperCase();
+}
+
+function normalizeBaseUrl(baseUrl: string): string {
+  return baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+}
+
+function buildUrl(baseUrl: string, path: string): string {
+  return `${normalizeBaseUrl(baseUrl)}${path}`;
+}
+
+async function wrap<T>(call: () => Promise<unknown>, mapper: (payload: unknown) => T): Promise<ApiResult<T>> {
+  let payload: unknown;
+  try {
+    payload = await call();
+  } catch (error: unknown) {
+    return {
+      ok: false,
+      status: typeof (error as AngularHttpError)?.status === 'number' ? (error as AngularHttpError).status! : 0,
+      error: toFailure(error)
+    };
+  }
+
+  try {
+    return { ok: true, status: 200, data: mapper(payload) };
+  } catch (error: unknown) {
+    return {
+      ok: false,
+      status: 200,
+      error: {
+        kind: 'parse',
+        status: 200,
+        message: error instanceof Error ? error.message : 'Invalid API response contract',
+        payload
+      }
+    };
+  }
+}
+
+export function createAngularApiClient(http: AngularHttpClientLike, baseUrl = ''): AngularApiClient {
+  return {
+    health: () =>
+      wrap(() => http.get<HealthResponse>(buildUrl(baseUrl, '/healthz'), { withCredentials: true }), mapHealthResponse),
+    getSession: (code: string) =>
+      wrap(
+        () =>
+          http.get<SessionDetailResponse>(buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`), {
+            withCredentials: true
+          }),
+        mapSessionDetailResponse
+      ),
+    joinSession: (payload: JoinSessionRequest) =>
+      wrap(
+        () =>
+          http.post<JoinSessionResponse>(
+            buildUrl(baseUrl, '/lobby/sessions/join'),
+            {
+              code: normalizeCode(payload.code),
+              nickname: payload.nickname.trim()
+            },
+            { withCredentials: true }
+          ),
+        mapJoinSessionResponse
+      ),
+    startRound: (code: string, payload: StartRoundRequest) =>
+      wrap(
+        () =>
+          http.post<StartRoundResponse>(
+            buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/start`),
+            payload,
+            { withCredentials: true }
+          ),
+        mapStartRoundResponse
+      ),
+    showQuestion: (code: string) =>
+      wrap(
+        () =>
+          http.post<ShowQuestionResponse>(
+            buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/show`),
+            {},
+            { withCredentials: true }
+          ),
+        mapShowQuestionResponse
+      ),
+    mixAnswers: (code: string, roundQuestionId: number) =>
+      wrap(
+        () =>
+          http.post<MixAnswersResponse>(
+            buildUrl(
+              baseUrl,
+              `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/${roundQuestionId}/answers/mix`
+            ),
+            {},
+            { withCredentials: true }
+          ),
+        mapMixAnswersResponse
+      ),
+    calculateScores: (code: string, roundQuestionId: number) =>
+      wrap(
+        () =>
+          http.post<CalculateScoresResponse>(
+            buildUrl(
+              baseUrl,
+              `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/${roundQuestionId}/scores/calculate`
+            ),
+            {},
+            { withCredentials: true }
+          ),
+        mapCalculateScoresResponse
+      ),
+    getScoreboard: (code: string) =>
+      wrap(
+        () =>
+          http.get<ScoreboardResponse>(
+            buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/scoreboard`),
+            { withCredentials: true }
+          ),
+        mapScoreboardResponse
+      ),
+    startNextRound: (code: string) =>
+      wrap(
+        () =>
+          http.post<StartNextRoundResponse>(
+            buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/next`),
+            {},
+            { withCredentials: true }
+          ),
+        mapStartNextRoundResponse
+      ),
+    finishGame: (code: string) =>
+      wrap(
+        () =>
+          http.post<FinishGameResponse>(
+            buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/finish`),
+            {},
+            { withCredentials: true }
+          ),
+        mapFinishGameResponse
+      ),
+    submitLie: (code: string, roundQuestionId: number, payload: SubmitLieRequest) =>
+      wrap(
+        () =>
+          http.post<SubmitLieResponse>(
+            buildUrl(
+              baseUrl,
+              `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/${roundQuestionId}/lies/submit`
+            ),
+            {
+              player_id: payload.player_id,
+              session_token: payload.session_token,
+              text: payload.text
+            },
+            { withCredentials: true }
+          ),
+        mapSubmitLieResponse
+      ),
+    submitGuess: (code: string, roundQuestionId: number, payload: SubmitGuessRequest) =>
+      wrap(
+        () =>
+          http.post<SubmitGuessResponse>(
+            buildUrl(
+              baseUrl,
+              `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/${roundQuestionId}/guesses/submit`
+            ),
+            {
+              player_id: payload.player_id,
+              session_token: payload.session_token,
+              selected_text: payload.selected_text
+            },
+            { withCredentials: true }
+          ),
+        mapSubmitGuessResponse
+      )
+  };
+}

frontend/src/api/client.ts

@@ -0,0 +1,198 @@
+import {
+  mapCalculateScoresResponse,
+  mapFinishGameResponse,
+  mapHealthResponse,
+  mapJoinSessionResponse,
+  mapMixAnswersResponse,
+  mapNextRoundResponse,
+  mapScoreboardResponse,
+  mapSessionDetailResponse,
+  mapShowQuestionResponse,
+  mapStartRoundResponse,
+  mapSubmitGuessResponse,
+  mapSubmitLieResponse
+} from './mappers';
+import type {
+  ApiResult,
+  CalculateScoresResponse,
+  FinishGameResponse,
+  HealthResponse,
+  JoinSessionRequest,
+  JoinSessionResponse,
+  MixAnswersResponse,
+  NextRoundResponse,
+  ScoreboardResponse,
+  SessionDetailResponse,
+  ShowQuestionResponse,
+  StartRoundRequest,
+  StartRoundResponse,
+  SubmitGuessRequest,
+  SubmitGuessResponse,
+  SubmitLieRequest,
+  SubmitLieResponse
+} from './types';
+
+export interface ApiClient {
+  health(): Promise<ApiResult<HealthResponse>>;
+  getSession(code: string): Promise<ApiResult<SessionDetailResponse>>;
+  joinSession(payload: JoinSessionRequest): Promise<ApiResult<JoinSessionResponse>>;
+  startRound(code: string, payload: StartRoundRequest): Promise<ApiResult<StartRoundResponse>>;
+  showQuestion(code: string): Promise<ApiResult<ShowQuestionResponse>>;
+  mixAnswers(code: string, roundQuestionId: number): Promise<ApiResult<MixAnswersResponse>>;
+  calculateScores(code: string, roundQuestionId: number): Promise<ApiResult<CalculateScoresResponse>>;
+  getScoreboard(code: string): Promise<ApiResult<ScoreboardResponse>>;
+  startNextRound(code: string): Promise<ApiResult<NextRoundResponse>>;
+  finishGame(code: string): Promise<ApiResult<FinishGameResponse>>;
+  submitLie(code: string, roundQuestionId: number, payload: SubmitLieRequest): Promise<ApiResult<SubmitLieResponse>>;
+  submitGuess(code: string, roundQuestionId: number, payload: SubmitGuessRequest): Promise<ApiResult<SubmitGuessResponse>>;
+}
+
+export function createApiClient(baseUrl = '', fetchImpl: typeof fetch = fetch): ApiClient {
+  async function request<T>(
+    path: string,
+    method: 'GET' | 'POST',
+    mapper: (payload: unknown) => T,
+    payload?: unknown
+  ): Promise<ApiResult<T>> {
+    let response: Response;
+    try {
+      response = await fetchImpl(`${baseUrl}${path}`, {
+        method,
+        headers: {
+          Accept: 'application/json',
+          ...(payload === undefined ? {} : { 'Content-Type': 'application/json' })
+        },
+        ...(payload === undefined ? {} : { body: JSON.stringify(payload) })
+      });
+    } catch {
+      return {
+        ok: false,
+        status: 0,
+        error: { kind: 'network', status: 0, message: 'Network error while contacting API' }
+      };
+    }
+
+    let responsePayload: unknown;
+    try {
+      responsePayload = await response.json();
+    } catch {
+      return {
+        ok: false,
+        status: response.status,
+        error: { kind: 'parse', status: response.status, message: 'Invalid JSON response from API' }
+      };
+    }
+
+    if (!response.ok) {
+      return {
+        ok: false,
+        status: response.status,
+        error: {
+          kind: 'http',
+          status: response.status,
+          message: `HTTP ${response.status}`,
+          payload: responsePayload
+        }
+      };
+    }
+
+    try {
+      return { ok: true, status: response.status, data: mapper(responsePayload) };
+    } catch (error) {
+      return {
+        ok: false,
+        status: response.status,
+        error: {
+          kind: 'parse',
+          status: response.status,
+          message: error instanceof Error ? error.message : 'Invalid API response contract',
+          payload: responsePayload
+        }
+      };
+    }
+  }
+
+  const normalizeCode = (value: string): string => value.trim().toUpperCase();
+
+  return {
+    health: () => request<HealthResponse>('/healthz', 'GET', mapHealthResponse),
+    getSession: (code: string) =>
+      request<SessionDetailResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`,
+        'GET',
+        mapSessionDetailResponse
+      ),
+    joinSession: (payload: JoinSessionRequest) =>
+      request<JoinSessionResponse>(
+        '/lobby/sessions/join',
+        'POST',
+        mapJoinSessionResponse,
+        {
+          code: normalizeCode(payload.code),
+          nickname: payload.nickname.trim()
+        }
+      ),
+    startRound: (code: string, payload: StartRoundRequest) =>
+      request<StartRoundResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/start`,
+        'POST',
+        mapStartRoundResponse,
+        payload
+      ),
+    showQuestion: (code: string) =>
+      request<ShowQuestionResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/show`,
+        'POST',
+        mapShowQuestionResponse,
+        {}
+      ),
+    mixAnswers: (code: string, roundQuestionId: number) =>
+      request<MixAnswersResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/${roundQuestionId}/answers/mix`,
+        'POST',
+        mapMixAnswersResponse,
+        {}
+      ),
+    calculateScores: (code: string, roundQuestionId: number) =>
+      request<CalculateScoresResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/${roundQuestionId}/scores/calculate`,
+        'POST',
+        mapCalculateScoresResponse,
+        {}
+      ),
+    getScoreboard: (code: string) =>
+      request<ScoreboardResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/scoreboard`,
+        'GET',
+        mapScoreboardResponse
+      ),
+    startNextRound: (code: string) =>
+      request<NextRoundResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/next`,
+        'POST',
+        mapNextRoundResponse,
+        {}
+      ),
+    finishGame: (code: string) =>
+      request<FinishGameResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/finish`,
+        'POST',
+        mapFinishGameResponse,
+        {}
+      ),
+    submitLie: (code: string, roundQuestionId: number, payload: SubmitLieRequest) =>
+      request<SubmitLieResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/${roundQuestionId}/lies/submit`,
+        'POST',
+        mapSubmitLieResponse,
+        payload
+      ),
+    submitGuess: (code: string, roundQuestionId: number, payload: SubmitGuessRequest) =>
+      request<SubmitGuessResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/questions/${roundQuestionId}/guesses/submit`,
+        'POST',
+        mapSubmitGuessResponse,
+        payload
+      )
+  };
+}

frontend/src/api/mappers.ts

@@ -0,0 +1,359 @@
+import type {
+  CalculateScoresResponse,
+  FinishGameResponse,
+  HealthResponse,
+  JoinSessionResponse,
+  MixAnswersResponse,
+  ScoreboardResponse,
+  SessionDetailResponse,
+  ShowQuestionResponse,
+  StartNextRoundResponse,
+  StartRoundResponse,
+  SubmitGuessResponse,
+  SubmitLieResponse
+} from './types';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean';
+}
+
+function isNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+function isString(value: unknown): value is string {
+  return typeof value === 'string';
+}
+
+function asRecord(value: unknown, path: string): Record<string, unknown> {
+  if (!isRecord(value)) {
+    throw new Error(`Invalid API contract: expected object at ${path}`);
+  }
+  return value;
+}
+
+function readString(record: Record<string, unknown>, key: string, path: string): string {
+  const value = record[key];
+  if (!isString(value)) {
+    throw new Error(`Invalid API contract: expected string at ${path}.${key}`);
+  }
+  return value;
+}
+
+function readNumber(record: Record<string, unknown>, key: string, path: string): number {
+  const value = record[key];
+  if (!isNumber(value)) {
+    throw new Error(`Invalid API contract: expected number at ${path}.${key}`);
+  }
+  return value;
+}
+
+function readBoolean(record: Record<string, unknown>, key: string, path: string): boolean {
+  const value = record[key];
+  if (!isBoolean(value)) {
+    throw new Error(`Invalid API contract: expected boolean at ${path}.${key}`);
+  }
+  return value;
+}
+
+export function mapHealthResponse(payload: unknown): HealthResponse {
+  const root = asRecord(payload, 'health');
+  return {
+    ok: readBoolean(root, 'ok', 'health'),
+    service: readString(root, 'service', 'health')
+  };
+}
+
+function mapSessionDetail(payload: unknown): SessionDetailResponse {
+  const root = asRecord(payload, 'session_detail');
+  const session = asRecord(root.session, 'session_detail.session');
+  const players = root.players;
+  if (!Array.isArray(players)) {
+    throw new Error('Invalid API contract: expected array at session_detail.players');
+  }
+
+  const roundQuestionRaw = root.round_question;
+  let roundQuestion: SessionDetailResponse['round_question'] = null;
+  if (roundQuestionRaw !== null) {
+    const roundQuestionRecord = asRecord(roundQuestionRaw, 'session_detail.round_question');
+    const answersRaw = roundQuestionRecord.answers;
+    if (!Array.isArray(answersRaw)) {
+      throw new Error('Invalid API contract: expected array at session_detail.round_question.answers');
+    }
+
+    roundQuestion = {
+      id: readNumber(roundQuestionRecord, 'id', 'session_detail.round_question'),
+      round_number: readNumber(roundQuestionRecord, 'round_number', 'session_detail.round_question'),
+      prompt: readString(roundQuestionRecord, 'prompt', 'session_detail.round_question'),
+      shown_at: readString(roundQuestionRecord, 'shown_at', 'session_detail.round_question'),
+      answers: answersRaw.map((answer, index) => {
+        const answerRecord = asRecord(answer, `session_detail.round_question.answers[${index}]`);
+        return { text: readString(answerRecord, 'text', `session_detail.round_question.answers[${index}]`) };
+      })
+    };
+  }
+
+  const phase = asRecord(root.phase_view_model, 'session_detail.phase_view_model');
+  const constraints = asRecord(phase.constraints, 'session_detail.phase_view_model.constraints');
+  const host = asRecord(phase.host, 'session_detail.phase_view_model.host');
+  const player = asRecord(phase.player, 'session_detail.phase_view_model.player');
+
+  return {
+    session: {
+      code: readString(session, 'code', 'session_detail.session'),
+      status: readString(session, 'status', 'session_detail.session'),
+      host_id: (() => {
+        const hostId = session.host_id;
+        if (hostId === null) {
+          return null;
+        }
+        if (!isNumber(hostId)) {
+          throw new Error('Invalid API contract: expected number|null at session_detail.session.host_id');
+        }
+        return hostId;
+      })(),
+      current_round: readNumber(session, 'current_round', 'session_detail.session'),
+      players_count: readNumber(session, 'players_count', 'session_detail.session')
+    },
+    players: players.map((item, index) => {
+      const record = asRecord(item, `session_detail.players[${index}]`);
+      return {
+        id: readNumber(record, 'id', `session_detail.players[${index}]`),
+        nickname: readString(record, 'nickname', `session_detail.players[${index}]`),
+        score: readNumber(record, 'score', `session_detail.players[${index}]`),
+        is_connected: readBoolean(record, 'is_connected', `session_detail.players[${index}]`)
+      };
+    }),
+    round_question: roundQuestion,
+    phase_view_model: {
+      status: readString(phase, 'status', 'session_detail.phase_view_model'),
+      round_number: readNumber(phase, 'round_number', 'session_detail.phase_view_model'),
+      players_count: readNumber(phase, 'players_count', 'session_detail.phase_view_model'),
+      constraints: {
+        min_players_to_start: readNumber(constraints, 'min_players_to_start', 'session_detail.phase_view_model.constraints'),
+        max_players_mvp: readNumber(constraints, 'max_players_mvp', 'session_detail.phase_view_model.constraints'),
+        min_players_reached: readBoolean(constraints, 'min_players_reached', 'session_detail.phase_view_model.constraints'),
+        max_players_allowed: readBoolean(constraints, 'max_players_allowed', 'session_detail.phase_view_model.constraints')
+      },
+      host: {
+        can_start_round: readBoolean(host, 'can_start_round', 'session_detail.phase_view_model.host'),
+        can_show_question: readBoolean(host, 'can_show_question', 'session_detail.phase_view_model.host'),
+        can_mix_answers: readBoolean(host, 'can_mix_answers', 'session_detail.phase_view_model.host'),
+        can_calculate_scores: readBoolean(host, 'can_calculate_scores', 'session_detail.phase_view_model.host'),
+        can_reveal_scoreboard: readBoolean(host, 'can_reveal_scoreboard', 'session_detail.phase_view_model.host'),
+        can_start_next_round: readBoolean(host, 'can_start_next_round', 'session_detail.phase_view_model.host'),
+        can_finish_game: readBoolean(host, 'can_finish_game', 'session_detail.phase_view_model.host')
+      },
+      player: {
+        can_join: readBoolean(player, 'can_join', 'session_detail.phase_view_model.player'),
+        can_submit_lie: readBoolean(player, 'can_submit_lie', 'session_detail.phase_view_model.player'),
+        can_submit_guess: readBoolean(player, 'can_submit_guess', 'session_detail.phase_view_model.player'),
+        can_view_final_result: readBoolean(player, 'can_view_final_result', 'session_detail.phase_view_model.player')
+      }
+    }
+  };
+}
+
+export function mapSessionDetailResponse(payload: unknown): SessionDetailResponse {
+  return mapSessionDetail(payload);
+}
+
+export function mapJoinSessionResponse(payload: unknown): JoinSessionResponse {
+  const root = asRecord(payload, 'join_session');
+  const player = asRecord(root.player, 'join_session.player');
+  const session = asRecord(root.session, 'join_session.session');
+
+  return {
+    player: {
+      id: readNumber(player, 'id', 'join_session.player'),
+      nickname: readString(player, 'nickname', 'join_session.player'),
+      session_token: readString(player, 'session_token', 'join_session.player'),
+      score: readNumber(player, 'score', 'join_session.player')
+    },
+    session: {
+      code: readString(session, 'code', 'join_session.session'),
+      status: readString(session, 'status', 'join_session.session')
+    }
+  };
+}
+
+export function mapStartRoundResponse(payload: unknown): StartRoundResponse {
+  const root = asRecord(payload, 'start_round');
+  const session = asRecord(root.session, 'start_round.session');
+  const round = asRecord(root.round, 'start_round.round');
+  const category = asRecord(round.category, 'start_round.round.category');
+
+  return {
+    session: {
+      code: readString(session, 'code', 'start_round.session'),
+      status: readString(session, 'status', 'start_round.session'),
+      current_round: readNumber(session, 'current_round', 'start_round.session')
+    },
+    round: {
+      number: readNumber(round, 'number', 'start_round.round'),
+      category: {
+        slug: readString(category, 'slug', 'start_round.round.category'),
+        name: readString(category, 'name', 'start_round.round.category')
+      }
+    }
+  };
+}
+
+function mapLeaderboardEntry(payload: unknown, path: string): { id: number; nickname: string; score: number } {
+  const record = asRecord(payload, path);
+  return {
+    id: readNumber(record, 'id', path),
+    nickname: readString(record, 'nickname', path),
+    score: readNumber(record, 'score', path)
+  };
+}
+
+function mapSessionState(payload: unknown, path: string): { code: string; status: string; current_round: number } {
+  const session = asRecord(payload, path);
+  return {
+    code: readString(session, 'code', path),
+    status: readString(session, 'status', path),
+    current_round: readNumber(session, 'current_round', path)
+  };
+}
+
+export function mapShowQuestionResponse(payload: unknown): ShowQuestionResponse {
+  const root = asRecord(payload, 'show_question');
+  const roundQuestion = asRecord(root.round_question, 'show_question.round_question');
+  const config = asRecord(root.config, 'show_question.config');
+
+  return {
+    round_question: {
+      id: readNumber(roundQuestion, 'id', 'show_question.round_question'),
+      prompt: readString(roundQuestion, 'prompt', 'show_question.round_question'),
+      round_number: readNumber(roundQuestion, 'round_number', 'show_question.round_question'),
+      shown_at: readString(roundQuestion, 'shown_at', 'show_question.round_question'),
+      lie_deadline_at: readString(roundQuestion, 'lie_deadline_at', 'show_question.round_question')
+    },
+    config: {
+      lie_seconds: readNumber(config, 'lie_seconds', 'show_question.config')
+    }
+  };
+}
+
+export function mapMixAnswersResponse(payload: unknown): MixAnswersResponse {
+  const root = asRecord(payload, 'mix_answers');
+  const roundQuestion = asRecord(root.round_question, 'mix_answers.round_question');
+  const answersRaw = root.answers;
+  if (!Array.isArray(answersRaw)) {
+    throw new Error('Invalid API contract: expected array at mix_answers.answers');
+  }
+
+  return {
+    session: mapSessionState(root.session, 'mix_answers.session'),
+    round_question: {
+      id: readNumber(roundQuestion, 'id', 'mix_answers.round_question'),
+      round_number: readNumber(roundQuestion, 'round_number', 'mix_answers.round_question')
+    },
+    answers: answersRaw.map((answer, index) => {
+      const record = asRecord(answer, `mix_answers.answers[${index}]`);
+      return { text: readString(record, 'text', `mix_answers.answers[${index}]`) };
+    })
+  };
+}
+
+export function mapCalculateScoresResponse(payload: unknown): CalculateScoresResponse {
+  const root = asRecord(payload, 'calculate_scores');
+  const roundQuestion = asRecord(root.round_question, 'calculate_scores.round_question');
+  const leaderboardRaw = root.leaderboard;
+  if (!Array.isArray(leaderboardRaw)) {
+    throw new Error('Invalid API contract: expected array at calculate_scores.leaderboard');
+  }
+
+  return {
+    session: mapSessionState(root.session, 'calculate_scores.session'),
+    round_question: {
+      id: readNumber(roundQuestion, 'id', 'calculate_scores.round_question'),
+      round_number: readNumber(roundQuestion, 'round_number', 'calculate_scores.round_question')
+    },
+    events_created: readNumber(root, 'events_created', 'calculate_scores'),
+    leaderboard: leaderboardRaw.map((entry, index) => mapLeaderboardEntry(entry, `calculate_scores.leaderboard[${index}]`))
+  };
+}
+
+export function mapScoreboardResponse(payload: unknown): ScoreboardResponse {
+  const root = asRecord(payload, 'scoreboard');
+  const leaderboardRaw = root.leaderboard;
+  if (!Array.isArray(leaderboardRaw)) {
+    throw new Error('Invalid API contract: expected array at scoreboard.leaderboard');
+  }
+
+  return {
+    session: mapSessionState(root.session, 'scoreboard.session'),
+    leaderboard: leaderboardRaw.map((entry, index) => mapLeaderboardEntry(entry, `scoreboard.leaderboard[${index}]`))
+  };
+}
+
+export function mapStartNextRoundResponse(payload: unknown): StartNextRoundResponse {
+  const root = asRecord(payload, 'start_next_round');
+  return { session: mapSessionState(root.session, 'start_next_round.session') };
+}
+
+export function mapFinishGameResponse(payload: unknown): FinishGameResponse {
+  const root = asRecord(payload, 'finish_game');
+  const leaderboardRaw = root.leaderboard;
+  if (!Array.isArray(leaderboardRaw)) {
+    throw new Error('Invalid API contract: expected array at finish_game.leaderboard');
+  }
+
+  const winnerRaw = root.winner;
+
+  return {
+    session: mapSessionState(root.session, 'finish_game.session'),
+    winner: winnerRaw === null ? null : mapLeaderboardEntry(winnerRaw, 'finish_game.winner'),
+    leaderboard: leaderboardRaw.map((entry, index) => mapLeaderboardEntry(entry, `finish_game.leaderboard[${index}]`))
+  };
+}
+
+export function mapSubmitLieResponse(payload: unknown): SubmitLieResponse {
+  const root = asRecord(payload, 'submit_lie');
+  const lie = asRecord(root.lie, 'submit_lie.lie');
+  const window = asRecord(root.window, 'submit_lie.window');
+
+  return {
+    lie: {
+      id: readNumber(lie, 'id', 'submit_lie.lie'),
+      player_id: readNumber(lie, 'player_id', 'submit_lie.lie'),
+      round_question_id: readNumber(lie, 'round_question_id', 'submit_lie.lie'),
+      text: readString(lie, 'text', 'submit_lie.lie'),
+      created_at: readString(lie, 'created_at', 'submit_lie.lie')
+    },
+    window: {
+      lie_deadline_at: readString(window, 'lie_deadline_at', 'submit_lie.window')
+    }
+  };
+}
+
+export function mapSubmitGuessResponse(payload: unknown): SubmitGuessResponse {
+  const root = asRecord(payload, 'submit_guess');
+  const guess = asRecord(root.guess, 'submit_guess.guess');
+  const window = asRecord(root.window, 'submit_guess.window');
+  const fooledPlayerId = guess.fooled_player_id;
+  if (fooledPlayerId !== null && !isNumber(fooledPlayerId)) {
+    throw new Error('Invalid API contract: expected number|null at submit_guess.guess.fooled_player_id');
+  }
+
+  return {
+    guess: {
+      id: readNumber(guess, 'id', 'submit_guess.guess'),
+      player_id: readNumber(guess, 'player_id', 'submit_guess.guess'),
+      round_question_id: readNumber(guess, 'round_question_id', 'submit_guess.guess'),
+      selected_text: readString(guess, 'selected_text', 'submit_guess.guess'),
+      is_correct: readBoolean(guess, 'is_correct', 'submit_guess.guess'),
+      fooled_player_id: fooledPlayerId,
+      created_at: readString(guess, 'created_at', 'submit_guess.guess')
+    },
+    window: {
+      guess_deadline_at: readString(window, 'guess_deadline_at', 'submit_guess.window')
+    }
+  };
+}

frontend/src/api/types.ts

@@ -0,0 +1,222 @@
+export interface HealthResponse {
+  ok: boolean;
+  service: string;
+}
+
+export interface SessionSummary {
+  code: string;
+  status: string;
+  host_id: number | null;
+  current_round: number;
+  players_count: number;
+}
+
+export interface SessionPlayer {
+  id: number;
+  nickname: string;
+  score: number;
+  is_connected: boolean;
+}
+
+export interface SessionAnswer {
+  text: string;
+}
+
+export interface SessionRoundQuestion {
+  id: number;
+  round_number: number;
+  prompt: string;
+  shown_at: string;
+  answers: SessionAnswer[];
+}
+
+export interface PhaseViewModel {
+  status: string;
+  round_number: number;
+  players_count: number;
+  constraints: {
+    min_players_to_start: number;
+    max_players_mvp: number;
+    min_players_reached: boolean;
+    max_players_allowed: boolean;
+  };
+  host: {
+    can_start_round: boolean;
+    can_show_question: boolean;
+    can_mix_answers: boolean;
+    can_calculate_scores: boolean;
+    can_reveal_scoreboard: boolean;
+    can_start_next_round: boolean;
+    can_finish_game: boolean;
+  };
+  player: {
+    can_join: boolean;
+    can_submit_lie: boolean;
+    can_submit_guess: boolean;
+    can_view_final_result: boolean;
+  };
+}
+
+export interface SessionDetailResponse {
+  session: SessionSummary;
+  players: SessionPlayer[];
+  round_question: SessionRoundQuestion | null;
+  phase_view_model: PhaseViewModel;
+}
+
+export interface JoinSessionRequest {
+  code: string;
+  nickname: string;
+}
+
+export interface JoinSessionResponse {
+  player: {
+    id: number;
+    nickname: string;
+    session_token: string;
+    score: number;
+  };
+  session: {
+    code: string;
+    status: string;
+  };
+}
+
+export interface StartRoundRequest {
+  category_slug: string;
+}
+
+export interface StartRoundResponse {
+  session: {
+    code: string;
+    status: string;
+    current_round: number;
+  };
+  round: {
+    number: number;
+    category: {
+      slug: string;
+      name: string;
+    };
+  };
+}
+
+export interface ShowQuestionResponse {
+  round_question: {
+    id: number;
+    prompt: string;
+    round_number: number;
+    shown_at: string;
+    lie_deadline_at: string;
+  };
+  config: {
+    lie_seconds: number;
+  };
+}
+
+export interface MixAnswersResponse {
+  session: {
+    code: string;
+    status: string;
+    current_round: number;
+  };
+  round_question: {
+    id: number;
+    round_number: number;
+  };
+  answers: Array<{ text: string }>;
+}
+
+export interface CalculateScoresResponse {
+  session: {
+    code: string;
+    status: string;
+    current_round: number;
+  };
+  round_question: {
+    id: number;
+    round_number: number;
+  };
+  events_created: number;
+  leaderboard: Array<{ id: number; nickname: string; score: number }>;
+}
+
+export interface ScoreboardResponse {
+  session: {
+    code: string;
+    status: string;
+    current_round: number;
+  };
+  leaderboard: Array<{ id: number; nickname: string; score: number }>;
+}
+
+export interface StartNextRoundResponse {
+  session: {
+    code: string;
+    status: string;
+    current_round: number;
+  };
+}
+
+export interface FinishGameResponse {
+  session: {
+    code: string;
+    status: string;
+    current_round: number;
+  };
+  winner: { id: number; nickname: string; score: number } | null;
+  leaderboard: Array<{ id: number; nickname: string; score: number }>;
+}
+
+export interface SubmitLieRequest {
+  player_id: number;
+  session_token: string;
+  text: string;
+}
+
+export interface SubmitLieResponse {
+  lie: {
+    id: number;
+    player_id: number;
+    round_question_id: number;
+    text: string;
+    created_at: string;
+  };
+  window: {
+    lie_deadline_at: string;
+  };
+}
+
+export interface SubmitGuessRequest {
+  player_id: number;
+  session_token: string;
+  selected_text: string;
+}
+
+export interface SubmitGuessResponse {
+  guess: {
+    id: number;
+    player_id: number;
+    round_question_id: number;
+    selected_text: string;
+    is_correct: boolean;
+    fooled_player_id: number | null;
+    created_at: string;
+  };
+  window: {
+    guess_deadline_at: string;
+  };
+}
+
+export type ApiErrorKind = 'network' | 'http' | 'parse';
+
+export interface ApiFailure {
+  kind: ApiErrorKind;
+  message: string;
+  status: number;
+  payload?: unknown;
+}
+
+export type ApiResult<T> =
+  | { ok: true; status: number; data: T }
+  | { ok: false; status: number; error: ApiFailure };

frontend/src/spa/gameplay-phase-machine.ts

@@ -0,0 +1,58 @@
+import type { SessionDetailResponse } from '../api/types';
+
+export type GameplayPhase = 'lie' | 'guess' | 'reveal' | 'scoreboard';
+
+export type GameplayPhaseEvent =
+  | 'LIES_LOCKED'
+  | 'GUESSES_LOCKED'
+  | 'SCOREBOARD_READY'
+  | 'NEXT_ROUND';
+
+export interface GameplayTransitionResult {
+  phase: GameplayPhase;
+  changed: boolean;
+}
+
+const TRANSITIONS: Record<GameplayPhase, Partial<Record<GameplayPhaseEvent, GameplayPhase>>> = {
+  lie: {
+    LIES_LOCKED: 'guess'
+  },
+  guess: {
+    GUESSES_LOCKED: 'reveal'
+  },
+  reveal: {
+    SCOREBOARD_READY: 'scoreboard'
+  },
+  scoreboard: {
+    NEXT_ROUND: 'lie'
+  }
+};
+
+export function transitionGameplayPhase(phase: GameplayPhase, event: GameplayPhaseEvent): GameplayTransitionResult {
+  const next = TRANSITIONS[phase][event] ?? phase;
+  return {
+    phase: next,
+    changed: next !== phase
+  };
+}
+
+export function allowedGameplayEvents(phase: GameplayPhase): GameplayPhaseEvent[] {
+  return Object.keys(TRANSITIONS[phase]) as GameplayPhaseEvent[];
+}
+
+export function deriveGameplayPhase(session: SessionDetailResponse | null): GameplayPhase | null {
+  const status = session?.session.status;
+  if (!status) {
+    return null;
+  }
+
+  if (status === 'lie' || status === 'guess' || status === 'reveal' || status === 'scoreboard') {
+    return status;
+  }
+
+  if (status === 'finished') {
+    return 'scoreboard';
+  }
+
+  return null;
+}

frontend/src/spa/lobby-i18n.ts

@@ -0,0 +1,48 @@
+import lobbyCatalog from '../../../shared/i18n/lobby.json';
+
+const frontendErrors = lobbyCatalog.frontend.errors;
+const localeConfig = lobbyCatalog.locales;
+
+type FrontendErrorKey = keyof typeof frontendErrors;
+type SupportedLocale = (typeof localeConfig.supported)[number];
+
+function isFrontendErrorKey(value: string): value is FrontendErrorKey {
+  return value in frontendErrors;
+}
+
+function normalizeLocale(rawLocale?: string): SupportedLocale {
+  const requested = (rawLocale ?? '').trim().toLowerCase();
+  if (localeConfig.supported.includes(requested as SupportedLocale)) {
+    return requested as SupportedLocale;
+  }
+  return localeConfig.default;
+}
+
+export function lobbyMessage(key: FrontendErrorKey, locale?: string): string {
+  const resolvedLocale = normalizeLocale(locale);
+  const translations = frontendErrors[key] as Record<string, string>;
+
+  if (translations[resolvedLocale]) {
+    return translations[resolvedLocale];
+  }
+  if (translations[localeConfig.default]) {
+    return translations[localeConfig.default];
+  }
+
+  return key;
+}
+
+export function lobbyMessageFromApiPayload(payload: unknown, fallbackKey: FrontendErrorKey, locale?: string): string {
+  if (!payload || typeof payload !== 'object') {
+    return lobbyMessage(fallbackKey, locale);
+  }
+
+  const record = payload as Record<string, unknown>;
+  const code = typeof record.error_code === 'string' ? record.error_code : '';
+  const payloadLocale = typeof record.locale === 'string' ? record.locale : locale;
+  if (!isFrontendErrorKey(code)) {
+    return lobbyMessage(fallbackKey, payloadLocale);
+  }
+
+  return lobbyMessage(code, payloadLocale);
+}

frontend/src/spa/session-context-store.ts

@@ -0,0 +1,123 @@
+export interface SessionContext {
+  sessionCode: string;
+  playerId: number;
+  token: string;
+}
+
+export interface SessionContextInput {
+  sessionCode: string;
+  playerId: number;
+  token: string;
+}
+
+export interface SessionContextStore {
+  get(): SessionContext | null;
+  set(input: SessionContextInput): SessionContext;
+  clear(): void;
+}
+
+export interface StorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+const DEFAULT_STORAGE_KEY = 'wpp.session-context';
+
+function normalizeSessionCode(value: string): string {
+  return value.trim().toUpperCase();
+}
+
+function normalizeToken(value: string): string {
+  return value.trim();
+}
+
+function toContext(input: SessionContextInput): SessionContext {
+  const sessionCode = normalizeSessionCode(input.sessionCode);
+  const token = normalizeToken(input.token);
+
+  if (!sessionCode) {
+    throw new Error('sessionCode is required');
+  }
+  if (!Number.isInteger(input.playerId) || input.playerId <= 0) {
+    throw new Error('playerId must be a positive integer');
+  }
+  if (!token) {
+    throw new Error('token is required');
+  }
+
+  return {
+    sessionCode,
+    playerId: input.playerId,
+    token
+  };
+}
+
+function safeParse(raw: string): SessionContext | null {
+  try {
+    const data = JSON.parse(raw) as Partial<SessionContextInput>;
+    if (typeof data.sessionCode !== 'string' || typeof data.playerId !== 'number' || typeof data.token !== 'string') {
+      return null;
+    }
+    return toContext({
+      sessionCode: data.sessionCode,
+      playerId: data.playerId,
+      token: data.token
+    });
+  } catch {
+    return null;
+  }
+}
+
+export function createSessionContextStore(storage?: StorageLike, storageKey = DEFAULT_STORAGE_KEY): SessionContextStore {
+  let current: SessionContext | null = null;
+
+  function getFromStorage(): SessionContext | null {
+    if (!storage) {
+      return null;
+    }
+
+    const raw = storage.getItem(storageKey);
+    if (!raw) {
+      return null;
+    }
+
+    const parsed = safeParse(raw);
+    if (!parsed) {
+      storage.removeItem(storageKey);
+      return null;
+    }
+
+    return parsed;
+  }
+
+  return {
+    get(): SessionContext | null {
+      if (current) {
+        return { ...current };
+      }
+
+      const fromStorage = getFromStorage();
+      if (fromStorage) {
+        current = fromStorage;
+        return { ...current };
+      }
+
+      return null;
+    },
+    set(input: SessionContextInput): SessionContext {
+      const normalized = toContext(input);
+      current = normalized;
+      if (storage) {
+        storage.setItem(storageKey, JSON.stringify(normalized));
+      }
+      return { ...normalized };
+    },
+    clear(): void {
+      current = null;
+      if (storage) {
+        storage.removeItem(storageKey);
+      }
+    }
+  };
+}

frontend/src/spa/vertical-slice.ts

@@ -0,0 +1,146 @@
+import type { ApiClient } from '../api/client';
+import type { SessionDetailResponse } from '../api/types';
+import {
+  createSessionContextStore,
+  type SessionContext,
+  type SessionContextInput,
+  type SessionContextStore as PersistedSessionContextStore
+} from './session-context-store';
+import { deriveGameplayPhase, type GameplayPhase } from './gameplay-phase-machine';
+import { lobbyMessage, lobbyMessageFromApiPayload } from './lobby-i18n';
+
+export type AsyncState = 'idle' | 'loading' | 'success' | 'error';
+
+export type SessionContextStore = Pick<PersistedSessionContextStore, 'get' | 'set'>;
+
+export interface VerticalSliceState {
+  sessionCode: string;
+  session: SessionDetailResponse | null;
+  gameplayPhase: GameplayPhase | null;
+  joinState: AsyncState;
+  startRoundState: AsyncState;
+  loadingSession: boolean;
+  errorMessage: string | null;
+}
+
+export interface VerticalSliceController {
+  getState(): VerticalSliceState;
+  hydrateLobby(sessionCode: string): Promise<VerticalSliceState>;
+  joinLobby(sessionCode: string, nickname: string): Promise<VerticalSliceState>;
+  startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState>;
+}
+
+export function createVerticalSliceController(
+  api: ApiClient,
+  sessionContextStore: SessionContextStore = createSessionContextStore()
+): VerticalSliceController {
+  const persistedContext = sessionContextStore.get();
+
+  const state: VerticalSliceState = {
+    sessionCode: persistedContext?.sessionCode ?? '',
+    session: null,
+    gameplayPhase: null,
+    joinState: 'idle',
+    startRoundState: 'idle',
+    loadingSession: false,
+    errorMessage: null
+  };
+
+  const normalizeCode = (value: string): string => value.trim().toUpperCase();
+
+  async function hydrateLobby(sessionCode: string): Promise<VerticalSliceState> {
+    state.loadingSession = true;
+    state.errorMessage = null;
+
+    const normalizedRequestedCode = normalizeCode(sessionCode);
+    const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || '');
+    state.sessionCode = normalizedRequestedCode || fallbackCode;
+
+    if (!state.sessionCode) {
+      state.loadingSession = false;
+      state.errorMessage = lobbyMessage('session_code_required');
+      return { ...state };
+    }
+
+    const result = await api.getSession(state.sessionCode);
+    state.loadingSession = false;
+
+    if (!result.ok) {
+      state.errorMessage = lobbyMessageFromApiPayload(result.error.payload, 'session_fetch_failed');
+      state.gameplayPhase = null;
+      return { ...state };
+    }
+
+    state.session = result.data;
+    state.gameplayPhase = deriveGameplayPhase(result.data);
+    state.sessionCode = normalizeCode(result.data.session.code);
+
+    if (persistedContext && state.sessionCode === normalizeCode(persistedContext.sessionCode)) {
+      sessionContextStore.set({ ...persistedContext, sessionCode: state.sessionCode });
+    }
+
+    return { ...state };
+  }
+
+  async function joinLobby(sessionCode: string, nickname: string): Promise<VerticalSliceState> {
+    state.joinState = 'loading';
+    state.errorMessage = null;
+
+    const normalizedRequestedCode = normalizeCode(sessionCode);
+    const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || '');
+    const requestCode = normalizedRequestedCode || fallbackCode;
+
+    const join = await api.joinSession({ code: requestCode, nickname });
+    if (!join.ok) {
+      state.joinState = 'error';
+      state.errorMessage = lobbyMessageFromApiPayload(join.error.payload, 'join_failed');
+      return { ...state };
+    }
+
+    state.joinState = 'success';
+    state.sessionCode = normalizeCode(join.data.session.code || requestCode);
+
+    const nextContext: SessionContextInput = {
+      sessionCode: state.sessionCode,
+      playerId: join.data.player.id,
+      token: join.data.player.session_token
+    };
+    sessionContextStore.set(nextContext);
+
+    return hydrateLobby(state.sessionCode);
+  }
+
+  async function startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState> {
+    state.startRoundState = 'loading';
+    state.errorMessage = null;
+
+    const normalizedRequestedCode = normalizeCode(sessionCode);
+    const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || '');
+    const codeToUse = normalizedRequestedCode || fallbackCode;
+
+    if (!codeToUse) {
+      state.startRoundState = 'error';
+      state.errorMessage = lobbyMessage('session_code_required');
+      return { ...state };
+    }
+
+    const start = await api.startRound(codeToUse, { category_slug: categorySlug });
+    if (!start.ok) {
+      state.startRoundState = 'error';
+      state.errorMessage = lobbyMessageFromApiPayload(start.error.payload, 'start_round_failed');
+      return { ...state };
+    }
+
+    state.startRoundState = 'success';
+    return hydrateLobby(codeToUse);
+  }
+
+  return {
+    getState: () => ({ ...state }),
+    hydrateLobby,
+    joinLobby,
+    startRound
+  };
+}
+
+export type { SessionContext };

frontend/tests/angular-api-client.test.ts

@@ -0,0 +1,358 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { createAngularApiClient, type AngularHttpClientLike } from '../src/api/angular-client';
+
+describe('createAngularApiClient', () => {
+  it('reads health and session detail using Django-compatible endpoints', async () => {
+    const get = vi.fn<AngularHttpClientLike['get']>(async <T>(url: string) => {
+      if (url === '/healthz') {
+        return { ok: true, service: 'partyhub' } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12') {
+        return {
+          session: { code: 'ABCD12', status: 'lobby', host_id: 1, current_round: 1, players_count: 2 },
+          players: [
+            { id: 2, nickname: 'Maja', score: 0, is_connected: true },
+            { id: 3, nickname: 'Bo', score: 0, is_connected: false }
+          ],
+          round_question: null,
+          phase_view_model: {
+            status: 'lobby',
+            round_number: 1,
+            players_count: 2,
+            constraints: {
+              min_players_to_start: 2,
+              max_players_mvp: 8,
+              min_players_reached: true,
+              max_players_allowed: true
+            },
+            host: {
+              can_start_round: true,
+              can_show_question: false,
+              can_mix_answers: false,
+              can_calculate_scores: false,
+              can_reveal_scoreboard: false,
+              can_start_next_round: false,
+              can_finish_game: false
+            },
+            player: {
+              can_join: true,
+              can_submit_lie: false,
+              can_submit_guess: false,
+              can_view_final_result: false
+            }
+          }
+        } as T;
+      }
+
+      throw { status: 404, error: { error: 'Not found' } };
+    });
+
+    const post = vi.fn<AngularHttpClientLike['post']>(async <T>(url: string, body: unknown) => {
+      if (url === '/lobby/sessions/join') {
+        expect(body).toEqual({ code: 'ABCD12', nickname: 'Maja' });
+        return {
+          player: { id: 9, nickname: 'Maja', session_token: 'token-1', score: 0 },
+          session: { code: 'ABCD12', status: 'lobby' }
+        } as T;
+      }
+
+      if (url === '/lobby/sessions/ABCD12/rounds/start') {
+        expect(body).toEqual({ category_slug: 'history' });
+        return {
+          session: { code: 'ABCD12', status: 'lie', current_round: 1 },
+          round: { number: 1, category: { slug: 'history', name: 'History' } }
+        } as T;
+      }
+
+      throw { status: 404, error: { error: 'Not found' } };
+    });
+
+    const http = { get, post };
+    const client = createAngularApiClient(http as AngularHttpClientLike);
+
+    const health = await client.health();
+    expect(health.ok).toBe(true);
+    if (health.ok) {
+      expect(health.data.ok).toBe(true);
+      expect(health.data.service).toBe('partyhub');
+    }
+
+    const session = await client.getSession(' abcd12 ');
+    expect(session.ok).toBe(true);
+    if (session.ok) {
+      expect(session.data.session.code).toBe('ABCD12');
+      expect(session.data.session.host_id).toBe(1);
+      expect(session.data.phase_view_model.host.can_start_round).toBe(true);
+    }
+
+    const join = await client.joinSession({ code: ' abcd12 ', nickname: ' Maja ' });
+    expect(join.ok).toBe(true);
+
+    const start = await client.startRound(' abcd12 ', { category_slug: 'history' });
+    expect(start.ok).toBe(true);
+
+    expect(get).toHaveBeenNthCalledWith(1, '/healthz', { withCredentials: true });
+    expect(get).toHaveBeenNthCalledWith(2, '/lobby/sessions/ABCD12', { withCredentials: true });
+    expect(post).toHaveBeenNthCalledWith(
+      1,
+      '/lobby/sessions/join',
+      { code: 'ABCD12', nickname: 'Maja' },
+      { withCredentials: true }
+    );
+    expect(post).toHaveBeenNthCalledWith(
+      2,
+      '/lobby/sessions/ABCD12/rounds/start',
+      { category_slug: 'history' },
+      { withCredentials: true }
+    );
+  });
+
+  it('normalizes baseUrl with trailing slash to keep Django endpoint paths canonical', async () => {
+    const get = vi.fn<AngularHttpClientLike['get']>(async <T>(url: string) => {
+      if (url === '/api/healthz') {
+        return { ok: true, service: 'partyhub' } as T;
+      }
+      if (url === '/api/lobby/sessions/ABCD12') {
+        return {
+          session: { code: 'ABCD12', status: 'lobby', host_id: 1, current_round: 1, players_count: 2 },
+          players: [],
+          round_question: null,
+          phase_view_model: {
+            status: 'lobby',
+            round_number: 1,
+            players_count: 2,
+            constraints: {
+              min_players_to_start: 2,
+              max_players_mvp: 8,
+              min_players_reached: true,
+              max_players_allowed: true
+            },
+            host: {
+              can_start_round: true,
+              can_show_question: false,
+              can_mix_answers: false,
+              can_calculate_scores: false,
+              can_reveal_scoreboard: false,
+              can_start_next_round: false,
+              can_finish_game: false
+            },
+            player: {
+              can_join: true,
+              can_submit_lie: false,
+              can_submit_guess: false,
+              can_view_final_result: false
+            }
+          }
+        } as T;
+      }
+      throw { status: 404, error: { error: 'Not found' } };
+    });
+
+    const post = vi.fn<AngularHttpClientLike['post']>(async <T>(url: string) => {
+      if (url === '/api/lobby/sessions/join') {
+        return {
+          player: { id: 9, nickname: 'Maja', session_token: 'token-1', score: 0 },
+          session: { code: 'ABCD12', status: 'lobby' }
+        } as T;
+      }
+      if (url === '/api/lobby/sessions/ABCD12/rounds/start') {
+        return {
+          session: { code: 'ABCD12', status: 'lie', current_round: 1 },
+          round: { number: 1, category: { slug: 'history', name: 'History' } }
+        } as T;
+      }
+      throw { status: 404, error: { error: 'Not found' } };
+    });
+
+    const client = createAngularApiClient({ get, post } as AngularHttpClientLike, '/api/');
+
+    await client.health();
+    await client.getSession('abcd12');
+    await client.joinSession({ code: 'abcd12', nickname: 'Maja' });
+    await client.startRound('abcd12', { category_slug: 'history' });
+
+    expect(get).toHaveBeenNthCalledWith(1, '/api/healthz', { withCredentials: true });
+    expect(get).toHaveBeenNthCalledWith(2, '/api/lobby/sessions/ABCD12', { withCredentials: true });
+    expect(post).toHaveBeenNthCalledWith(
+      1,
+      '/api/lobby/sessions/join',
+      { code: 'ABCD12', nickname: 'Maja' },
+      { withCredentials: true }
+    );
+    expect(post).toHaveBeenNthCalledWith(
+      2,
+      '/api/lobby/sessions/ABCD12/rounds/start',
+      { category_slug: 'history' },
+      { withCredentials: true }
+    );
+  });
+
+  it('returns parse error when successful payload breaks typed contract', async () => {
+    const http = {
+      get: vi.fn<AngularHttpClientLike['get']>(async <T>() => ({ ok: true } as T)),
+      post: vi.fn<AngularHttpClientLike['post']>(async <T>() => ({ ok: true } as T))
+    };
+
+    const client = createAngularApiClient(http as AngularHttpClientLike);
+    const session = await client.getSession('ABCD12');
+
+    expect(session.ok).toBe(false);
+    if (!session.ok) {
+      expect(session.status).toBe(200);
+      expect(session.error.kind).toBe('parse');
+      expect(session.error.message).toContain('Invalid API contract');
+    }
+  });
+
+  it('maps host/player gameplay endpoints through typed response mappers', async () => {
+    const get = vi.fn<AngularHttpClientLike['get']>(async <T>(url: string) => {
+      if (url === '/lobby/sessions/ABCD12/scoreboard') {
+        return {
+          session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
+          leaderboard: [
+            { id: 2, nickname: 'Maja', score: 11 },
+            { id: 3, nickname: 'Bo', score: 7 }
+          ]
+        } as T;
+      }
+      throw { status: 404, error: { error: 'Not found' } };
+    });
+
+    const post = vi.fn<AngularHttpClientLike['post']>(async <T>(url: string, body: unknown) => {
+      if (url === '/lobby/sessions/ABCD12/questions/show') {
+        expect(body).toEqual({});
+        return {
+          round_question: {
+            id: 77,
+            prompt: 'Prompt?',
+            round_number: 1,
+            shown_at: '2026-03-01T16:00:00Z',
+            lie_deadline_at: '2026-03-01T16:00:30Z'
+          },
+          config: { lie_seconds: 30 }
+        } as T;
+      }
+      if (url === '/lobby/sessions/ABCD12/questions/77/answers/mix') {
+        expect(body).toEqual({});
+        return {
+          session: { code: 'ABCD12', status: 'guess', current_round: 1 },
+          round_question: { id: 77, round_number: 1 },
+          answers: [{ text: 'A' }, { text: 'B' }]
+        } as T;
+      }
+      if (url === '/lobby/sessions/ABCD12/questions/77/scores/calculate') {
+        expect(body).toEqual({});
+        return {
+          session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
+          round_question: { id: 77, round_number: 1 },
+          events_created: 3,
+          leaderboard: [{ id: 2, nickname: 'Maja', score: 11 }]
+        } as T;
+      }
+      if (url === '/lobby/sessions/ABCD12/rounds/next') {
+        expect(body).toEqual({});
+        return { session: { code: 'ABCD12', status: 'lobby', current_round: 2 } } as T;
+      }
+      if (url === '/lobby/sessions/ABCD12/finish') {
+        expect(body).toEqual({});
+        return {
+          session: { code: 'ABCD12', status: 'finished', current_round: 2 },
+          winner: { id: 2, nickname: 'Maja', score: 15 },
+          leaderboard: [{ id: 2, nickname: 'Maja', score: 15 }]
+        } as T;
+      }
+      if (url === '/lobby/sessions/ABCD12/questions/77/lies/submit') {
+        expect(body).toEqual({ player_id: 9, session_token: 'tok', text: 'my lie' });
+        return {
+          lie: {
+            id: 100,
+            player_id: 9,
+            round_question_id: 77,
+            text: 'my lie',
+            created_at: '2026-03-01T16:00:10Z'
+          },
+          window: { lie_deadline_at: '2026-03-01T16:00:30Z' }
+        } as T;
+      }
+      if (url === '/lobby/sessions/ABCD12/questions/77/guesses/submit') {
+        expect(body).toEqual({ player_id: 9, session_token: 'tok', selected_text: 'A' });
+        return {
+          guess: {
+            id: 200,
+            player_id: 9,
+            round_question_id: 77,
+            selected_text: 'A',
+            is_correct: false,
+            fooled_player_id: 3,
+            created_at: '2026-03-01T16:01:00Z'
+          },
+          window: { guess_deadline_at: '2026-03-01T16:01:30Z' }
+        } as T;
+      }
+
+      throw { status: 404, error: { error: 'Not found' } };
+    });
+
+    const client = createAngularApiClient({ get, post } as AngularHttpClientLike);
+
+    const showQuestion = await client.showQuestion('abcd12');
+    expect(showQuestion.ok).toBe(true);
+
+    const mixAnswers = await client.mixAnswers('abcd12', 77);
+    expect(mixAnswers.ok).toBe(true);
+
+    const calculateScores = await client.calculateScores('abcd12', 77);
+    expect(calculateScores.ok).toBe(true);
+
+    const scoreboard = await client.getScoreboard('abcd12');
+    expect(scoreboard.ok).toBe(true);
+
+    const nextRound = await client.startNextRound('abcd12');
+    expect(nextRound.ok).toBe(true);
+
+    const finish = await client.finishGame('abcd12');
+    expect(finish.ok).toBe(true);
+
+    const submitLie = await client.submitLie('abcd12', 77, { player_id: 9, session_token: 'tok', text: 'my lie' });
+    expect(submitLie.ok).toBe(true);
+
+    const submitGuess = await client.submitGuess('abcd12', 77, {
+      player_id: 9,
+      session_token: 'tok',
+      selected_text: 'A'
+    });
+    expect(submitGuess.ok).toBe(true);
+  });
+
+  it('maps HttpErrorResponse-style failures to ApiResult errors', async () => {
+    const http = {
+      get: vi.fn<AngularHttpClientLike['get']>(async () => {
+        throw { status: 503, message: 'Service unavailable', error: { error: 'maintenance' } };
+      }),
+      post: vi.fn<AngularHttpClientLike['post']>(async () => {
+        throw { status: 403, message: 'Forbidden', error: { error: 'Only host can start round' } };
+      })
+    };
+
+    const client = createAngularApiClient(http as AngularHttpClientLike);
+    const health = await client.health();
+
+    expect(health.ok).toBe(false);
+    if (!health.ok) {
+      expect(health.status).toBe(503);
+      expect(health.error.kind).toBe('http');
+      expect(health.error.payload).toEqual({ error: 'maintenance' });
+      expect(health.error.message).toContain('Service unavailable');
+    }
+
+    const start = await client.startRound('ABCD12', { category_slug: 'history' });
+    expect(start.ok).toBe(false);
+    if (!start.ok) {
+      expect(start.status).toBe(403);
+      expect(start.error.kind).toBe('http');
+      expect(start.error.payload).toEqual({ error: 'Only host can start round' });
+    }
+  });
+});

frontend/tests/api-client.integration.test.ts

@@ -0,0 +1,166 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { AddressInfo } from 'node:net';
+import { createServer, type IncomingMessage, type Server, type ServerResponse } from 'node:http';
+import { createApiClient } from '../src/api/client';
+
+let server: Server;
+let baseUrl: string;
+
+beforeAll(async () => {
+  server = createServer(async (req: IncomingMessage, res: ServerResponse) => {
+    if (req.url === '/healthz') {
+      res.writeHead(200, { 'content-type': 'application/json' });
+      res.end(JSON.stringify({ ok: true, service: 'weirsoe-party-protocol' }));
+      return;
+    }
+
+    if (req.url === '/lobby/sessions/ABCD12' && req.method === 'GET') {
+      res.writeHead(200, { 'content-type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          session: { code: 'ABCD12', status: 'lobby', host_id: 1, current_round: 1, players_count: 3 },
+          players: [],
+          round_question: null,
+          phase_view_model: {
+            status: 'lobby',
+            round_number: 1,
+            players_count: 3,
+            constraints: {
+              min_players_to_start: 3,
+              max_players_mvp: 5,
+              min_players_reached: true,
+              max_players_allowed: true
+            },
+            host: {
+              can_start_round: true,
+              can_show_question: false,
+              can_mix_answers: false,
+              can_calculate_scores: false,
+              can_reveal_scoreboard: false,
+              can_start_next_round: false,
+              can_finish_game: false
+            },
+            player: {
+              can_join: true,
+              can_submit_lie: false,
+              can_submit_guess: false,
+              can_view_final_result: false
+            }
+          }
+        })
+      );
+      return;
+    }
+
+    if (req.url === '/lobby/sessions/join' && req.method === 'POST') {
+      res.writeHead(201, { 'content-type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          player: { id: 9, nickname: 'Maja', session_token: 'token-1', score: 0 },
+          session: { code: 'ABCD12', status: 'lobby' }
+        })
+      );
+      return;
+    }
+
+    if (req.url === '/lobby/sessions/ABCD12/rounds/start' && req.method === 'POST') {
+      res.writeHead(201, { 'content-type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          session: { code: 'ABCD12', status: 'lie', current_round: 1 },
+          round: { number: 1, category: { slug: 'history', name: 'History' } }
+        })
+      );
+      return;
+    }
+
+    if (req.url === '/lobby/sessions/BADMAP' && req.method === 'GET') {
+      res.writeHead(200, { 'content-type': 'application/json' });
+      res.end(JSON.stringify({ session: { code: 'BADMAP' } }));
+      return;
+    }
+
+    if (req.url?.startsWith('/lobby/sessions/')) {
+      res.writeHead(404, { 'content-type': 'application/json' });
+      res.end(JSON.stringify({ error: 'Session not found' }));
+      return;
+    }
+
+    res.writeHead(500, { 'content-type': 'application/json' });
+    res.end(JSON.stringify({ error: 'unexpected route' }));
+  });
+
+  await new Promise<void>((resolve) => server.listen(0, '127.0.0.1', () => resolve()));
+  const { port } = server.address() as AddressInfo;
+  baseUrl = `http://127.0.0.1:${port}`;
+});
+
+afterAll(async () => {
+  await new Promise<void>((resolve, reject) =>
+    server.close((err?: Error) => (err ? reject(err) : resolve()))
+  );
+});
+
+describe('createApiClient', () => {
+  it('reads health + session detail through typed wrappers', async () => {
+    const client = createApiClient(baseUrl);
+
+    const health = await client.health();
+    expect(health.ok).toBe(true);
+
+    const session = await client.getSession('abcd12');
+    expect(session.ok).toBe(true);
+    if (session.ok) {
+      expect(session.data.session.code).toBe('ABCD12');
+      expect(session.data.phase_view_model.host.can_start_round).toBe(true);
+    }
+  });
+
+  it('supports join + start round writes for lobby vertical slice', async () => {
+    const client = createApiClient(baseUrl);
+
+    const join = await client.joinSession({ code: 'abcd12', nickname: 'Maja' });
+    expect(join.ok).toBe(true);
+
+    const start = await client.startRound('abcd12', { category_slug: 'history' });
+    expect(start.ok).toBe(true);
+    if (start.ok) {
+      expect(start.data.session.status).toBe('lie');
+    }
+  });
+
+  it('returns parse error when response violates typed contract', async () => {
+    const client = createApiClient(baseUrl);
+
+    const invalid = await client.getSession('badmap');
+    expect(invalid.ok).toBe(false);
+    if (!invalid.ok) {
+      expect(invalid.status).toBe(200);
+      expect(invalid.error.kind).toBe('parse');
+      expect(invalid.error.message).toContain('Invalid API contract');
+    }
+  });
+
+  it('returns consistent HTTP error shape for 4xx/5xx', async () => {
+    const client = createApiClient(baseUrl);
+
+    const missing = await client.getSession('missing');
+    expect(missing.ok).toBe(false);
+    if (!missing.ok) {
+      expect(missing.status).toBe(404);
+      expect(missing.error.kind).toBe('http');
+      expect(missing.error.payload).toEqual({ error: 'Session not found' });
+    }
+  });
+
+  it('returns consistent network error shape', async () => {
+    const client = createApiClient('http://127.0.0.1:9');
+
+    const health = await client.health();
+    expect(health.ok).toBe(false);
+    if (!health.ok) {
+      expect(health.error.kind).toBe('network');
+      expect(health.status).toBe(0);
+    }
+  });
+});

frontend/tests/gameplay-phase-machine.test.ts

@@ -0,0 +1,106 @@
+import { describe, expect, it } from 'vitest';
+import {
+  allowedGameplayEvents,
+  deriveGameplayPhase,
+  transitionGameplayPhase,
+  type GameplayPhase
+} from '../src/spa/gameplay-phase-machine';
+
+describe('gameplay phase machine skeleton', () => {
+  it('supports canonical phase progression lie -> guess -> reveal -> scoreboard -> lie', () => {
+    let phase: GameplayPhase = 'lie';
+
+    phase = transitionGameplayPhase(phase, 'LIES_LOCKED').phase;
+    expect(phase).toBe('guess');
+
+    phase = transitionGameplayPhase(phase, 'GUESSES_LOCKED').phase;
+    expect(phase).toBe('reveal');
+
+    phase = transitionGameplayPhase(phase, 'SCOREBOARD_READY').phase;
+    expect(phase).toBe('scoreboard');
+
+    phase = transitionGameplayPhase(phase, 'NEXT_ROUND').phase;
+    expect(phase).toBe('lie');
+  });
+
+  it('keeps state unchanged for invalid transition events', () => {
+    const transition = transitionGameplayPhase('lie', 'NEXT_ROUND');
+    expect(transition.phase).toBe('lie');
+    expect(transition.changed).toBe(false);
+  });
+
+  it('exposes allowed events per phase', () => {
+    expect(allowedGameplayEvents('guess')).toEqual(['GUESSES_LOCKED']);
+    expect(allowedGameplayEvents('scoreboard')).toEqual(['NEXT_ROUND']);
+  });
+
+  it('derives gameplay phase from session detail status', () => {
+    expect(
+      deriveGameplayPhase({
+        session: { code: 'ABCD12', status: 'lie', host_id: 1, current_round: 1, players_count: 3 },
+        players: [],
+        round_question: null,
+        phase_view_model: {
+          status: 'lie',
+          round_number: 1,
+          players_count: 3,
+          constraints: {
+            min_players_to_start: 3,
+            max_players_mvp: 5,
+            min_players_reached: true,
+            max_players_allowed: true
+          },
+          host: {
+            can_start_round: false,
+            can_show_question: true,
+            can_mix_answers: true,
+            can_calculate_scores: false,
+            can_reveal_scoreboard: false,
+            can_start_next_round: false,
+            can_finish_game: false
+          },
+          player: {
+            can_join: false,
+            can_submit_lie: true,
+            can_submit_guess: false,
+            can_view_final_result: false
+          }
+        }
+      })
+    ).toBe('lie');
+
+    expect(
+      deriveGameplayPhase({
+        session: { code: 'ABCD12', status: 'finished', host_id: 1, current_round: 1, players_count: 3 },
+        players: [],
+        round_question: null,
+        phase_view_model: {
+          status: 'finished',
+          round_number: 1,
+          players_count: 3,
+          constraints: {
+            min_players_to_start: 3,
+            max_players_mvp: 5,
+            min_players_reached: true,
+            max_players_allowed: true
+          },
+          host: {
+            can_start_round: false,
+            can_show_question: false,
+            can_mix_answers: false,
+            can_calculate_scores: false,
+            can_reveal_scoreboard: false,
+            can_start_next_round: false,
+            can_finish_game: false
+          },
+          player: {
+            can_join: false,
+            can_submit_lie: false,
+            can_submit_guess: false,
+            can_view_final_result: true
+          }
+        }
+      })
+    ).toBe('scoreboard');
+  });
+});

frontend/tests/lobby-i18n.contract.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+
+import lobbyCatalog from '../../shared/i18n/lobby.json';
+import { lobbyMessage, lobbyMessageFromApiPayload } from '../src/spa/lobby-i18n';
+
+describe('shared i18n keyspace contract', () => {
+  it('keeps en as default and da/en matrix for frontend error keys', () => {
+    expect(lobbyCatalog.locales.default).toBe('en');
+    expect(lobbyCatalog.locales.supported).toEqual(expect.arrayContaining(['en', 'da']));
+
+    for (const [key, translations] of Object.entries(lobbyCatalog.frontend.errors)) {
+      expect(translations.en, `${key} missing en`).toBeTruthy();
+      expect(translations.da, `${key} missing da`).toBeTruthy();
+    }
+  });
+
+  it('keeps backend error-code keyspace aligned with backend translations', () => {
+    for (const [code, key] of Object.entries(lobbyCatalog.backend.error_codes)) {
+      expect(code).toBe(key);
+      expect(lobbyCatalog.backend.errors[key as keyof typeof lobbyCatalog.backend.errors]).toBeDefined();
+    }
+
+    for (const [key, translations] of Object.entries(lobbyCatalog.backend.errors)) {
+      expect(translations.en, `${key} missing en`).toBeTruthy();
+      expect(translations.da, `${key} missing da`).toBeTruthy();
+    }
+  });
+});
+
+describe('lobbyMessage locale handling', () => {
+  it('uses english by default and falls back to default for unsupported locale', () => {
+    expect(lobbyMessage('session_code_required')).toBe('Session code is required.');
+    expect(lobbyMessage('session_code_required', 'fr')).toBe('Session code is required.');
+  });
+
+  it('resolves locale from api payload and maps known backend error codes directly', () => {
+    expect(
+      lobbyMessageFromApiPayload(
+        { error_code: 'session_not_found', locale: 'da' },
+        'join_failed',
+      ),
+    ).toBe('Sessionskoden er ugyldig, eller sessionen findes ikke længere.');
+  });
+
+  it('falls back when backend error code has no frontend translation key', () => {
+    expect(
+      lobbyMessageFromApiPayload(
+        { error_code: 'session_not_joinable', locale: 'da' },
+        'join_failed',
+      ),
+    ).toBe('Kunne ikke joine. Tjek kode eller kaldenavn og prøv igen.');
+  });
+});

frontend/tests/session-context-store.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { createSessionContextStore, type StorageLike } from '../src/spa/session-context-store';
+
+function makeMemoryStorage(seed?: Record<string, string>): StorageLike {
+  const memory = new Map<string, string>(Object.entries(seed ?? {}));
+  return {
+    getItem: (key: string) => memory.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      memory.set(key, value);
+    },
+    removeItem: (key: string) => {
+      memory.delete(key);
+    }
+  };
+}
+
+describe('session context store', () => {
+  it('normalizes and persists sessionCode/playerId/token', () => {
+    const storage = makeMemoryStorage();
+    const store = createSessionContextStore(storage, 'ctx');
+
+    const value = store.set({ sessionCode: ' abcd12 ', playerId: 12, token: ' token-1 ' });
+    expect(value).toEqual({ sessionCode: 'ABCD12', playerId: 12, token: 'token-1' });
+
+    expect(store.get()).toEqual({ sessionCode: 'ABCD12', playerId: 12, token: 'token-1' });
+    expect(storage.getItem('ctx')).toBe('{"sessionCode":"ABCD12","playerId":12,"token":"token-1"}');
+  });
+
+  it('loads from storage and clears invalid payloads', () => {
+    const storage = makeMemoryStorage({ ctx: '{"sessionCode":"","playerId":0,"token":""}' });
+    const store = createSessionContextStore(storage, 'ctx');
+
+    expect(store.get()).toBeNull();
+    expect(storage.getItem('ctx')).toBeNull();
+  });
+
+  it('supports clear()', () => {
+    const storage = makeMemoryStorage();
+    const store = createSessionContextStore(storage, 'ctx');
+
+    store.set({ sessionCode: 'ABCD12', playerId: 3, token: 'token-3' });
+    store.clear();
+
+    expect(store.get()).toBeNull();
+    expect(storage.getItem('ctx')).toBeNull();
+  });
+
+  it('rejects invalid context writes', () => {
+    const store = createSessionContextStore();
+    expect(() => store.set({ sessionCode: '', playerId: 1, token: 'token-1' })).toThrow('sessionCode is required');
+    expect(() => store.set({ sessionCode: 'ABCD12', playerId: 0, token: 'token-1' })).toThrow(
+      'playerId must be a positive integer'
+    );
+    expect(() => store.set({ sessionCode: 'ABCD12', playerId: 2, token: '   ' })).toThrow('token is required');
+  });
+});

frontend/tests/vertical-slice.test.ts

@@ -0,0 +1,227 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  createVerticalSliceController,
+  type SessionContext,
+  type SessionContextStore
+} from '../src/spa/vertical-slice';
+import type { ApiClient } from '../src/api/client';
+
+function makeApiMock(overrides?: Partial<ApiClient>): ApiClient {
+  const base: ApiClient = {
+    health: vi.fn(),
+    getSession: vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      data: {
+        session: { code: 'ABCD12', status: 'lobby', host_id: 1, current_round: 1, players_count: 3 },
+        players: [],
+        round_question: null,
+        phase_view_model: {
+          status: 'lobby',
+          round_number: 1,
+          players_count: 3,
+          constraints: {
+            min_players_to_start: 3,
+            max_players_mvp: 5,
+            min_players_reached: true,
+            max_players_allowed: true
+          },
+          host: {
+            can_start_round: true,
+            can_show_question: false,
+            can_mix_answers: false,
+            can_calculate_scores: false,
+            can_reveal_scoreboard: false,
+            can_start_next_round: false,
+            can_finish_game: false
+          },
+          player: {
+            can_join: true,
+            can_submit_lie: false,
+            can_submit_guess: false,
+            can_view_final_result: false
+          }
+        }
+      }
+    }),
+    joinSession: vi.fn().mockResolvedValue({
+      ok: true,
+      status: 201,
+      data: { player: { id: 9, nickname: 'Maja', session_token: 'token-1', score: 0 }, session: { code: 'ABCD12', status: 'lobby' } }
+    }),
+    startRound: vi.fn().mockResolvedValue({
+      ok: true,
+      status: 201,
+      data: {
+        session: { code: 'ABCD12', status: 'lie', current_round: 1 },
+        round: { number: 1, category: { slug: 'history', name: 'History' } }
+      }
+    })
+  };
+
+  return { ...base, ...overrides };
+}
+
+function makeSessionContextStore(initial: SessionContext | null = null): SessionContextStore {
+  let value = initial;
+  return {
+    get: vi.fn(() => value),
+    set: vi.fn((next: SessionContext) => {
+      value = next;
+      return next;
+    })
+  };
+}
+
+describe('vertical slice controller: lobby -> join -> start round', () => {
+  it('uses createSessionContextStore by default (no manual injection)', async () => {
+    vi.resetModules();
+    const defaultStore = {
+      get: vi.fn(() => null),
+      set: vi.fn((next: SessionContext) => next),
+      clear: vi.fn()
+    };
+
+    vi.doMock('../src/spa/session-context-store', async () => {
+      const actual = await vi.importActual<typeof import('../src/spa/session-context-store')>('../src/spa/session-context-store');
+      return {
+        ...actual,
+        createSessionContextStore: vi.fn(() => defaultStore)
+      };
+    });
+
+    const { createVerticalSliceController: createControllerWithMock } = await import('../src/spa/vertical-slice');
+    const api = makeApiMock();
+    const controller = createControllerWithMock(api);
+
+    await controller.joinLobby('ABCD12', 'Maja');
+
+    expect(defaultStore.set).toHaveBeenCalledWith({
+      sessionCode: 'ABCD12',
+      playerId: 9,
+      token: 'token-1'
+    });
+
+    vi.doUnmock('../src/spa/session-context-store');
+    vi.resetModules();
+  });
+
+  it('tracks loading and success state for join + start flow', async () => {
+    const api = makeApiMock();
+    const controller = createVerticalSliceController(api);
+
+    const beforeJoinPromise = controller.joinLobby('abcd12', 'Maja');
+    expect(controller.getState().joinState).toBe('loading');
+    await beforeJoinPromise;
+
+    const postJoin = controller.getState();
+    expect(postJoin.joinState).toBe('success');
+    expect(postJoin.session?.session.code).toBe('ABCD12');
+
+    const beforeStartPromise = controller.startRound('abcd12', 'history');
+    expect(controller.getState().startRoundState).toBe('loading');
+    await beforeStartPromise;
+
+    const postStart = controller.getState();
+    expect(postStart.startRoundState).toBe('success');
+  });
+
+  it('persists session context after join and syncs normalized session code', async () => {
+    const api = makeApiMock();
+    const sessionContextStore = makeSessionContextStore();
+    const controller = createVerticalSliceController(api, sessionContextStore);
+
+    await controller.joinLobby('abcd12', 'Maja');
+
+    expect(sessionContextStore.set).toHaveBeenCalledWith({
+      sessionCode: 'ABCD12',
+      playerId: 9,
+      token: 'token-1'
+    });
+    expect(controller.getState().sessionCode).toBe('ABCD12');
+  });
+
+  it('uses stored session code as fallback for join + hydrate flow when input code is empty', async () => {
+    const api = makeApiMock();
+    const sessionContextStore = makeSessionContextStore({
+      sessionCode: 'wxyz99',
+      playerId: 5,
+      token: 'token-old'
+    });
+    const controller = createVerticalSliceController(api, sessionContextStore);
+
+    await controller.joinLobby('  ', 'Maja');
+
+    expect(api.joinSession).toHaveBeenCalledWith({ code: 'WXYZ99', nickname: 'Maja' });
+    expect(api.getSession).toHaveBeenCalledWith('ABCD12');
+  });
+
+  it('surfaces a friendly error when join fails', async () => {
+    const api = makeApiMock({
+      joinSession: vi.fn().mockResolvedValue({
+        ok: false,
+        status: 404,
+        error: { kind: 'http', status: 404, message: 'HTTP 404', payload: { error: 'Session not found', error_code: 'session_not_found' } }
+      })
+    });
+
+    const controller = createVerticalSliceController(api);
+    await controller.joinLobby('missing', 'Maja');
+
+    const state = controller.getState();
+    expect(state.joinState).toBe('error');
+    expect(state.errorMessage).toBe('Session code is invalid or the session no longer exists.');
+  });
+
+  it('surfaces a friendly error when round start fails', async () => {
+    const api = makeApiMock({
+      startRound: vi.fn().mockResolvedValue({
+        ok: false,
+        status: 400,
+        error: { kind: 'http', status: 400, message: 'HTTP 400', payload: { error: 'Round can only be started from lobby', error_code: 'round_start_invalid_phase' } }
+      })
+    });
+
+    const controller = createVerticalSliceController(api);
+    await controller.startRound('ABCD12', 'history');
+
+    const state = controller.getState();
+    expect(state.startRoundState).toBe('error');
+    expect(state.errorMessage).toBe('Could not start round. Refresh the lobby and try again.');
+  });
+
+  it('shows local validation error and avoids API call when hydrating without any session code', async () => {
+    const api = makeApiMock();
+    const controller = createVerticalSliceController(api, makeSessionContextStore(null));
+
+    await controller.hydrateLobby('   ');
+
+    const state = controller.getState();
+    expect(state.errorMessage).toBe('Session code is required.');
+    expect(state.loadingSession).toBe(false);
+    expect(api.getSession).not.toHaveBeenCalled();
+  });
+
+  it('shows local validation error and avoids API call when starting round without any session code', async () => {
+    const api = makeApiMock();
+    const controller = createVerticalSliceController(api, makeSessionContextStore(null));
+
+    await controller.startRound('   ', 'history');
+
+    const state = controller.getState();
+    expect(state.startRoundState).toBe('error');
+    expect(state.errorMessage).toBe('Session code is required.');
+    expect(api.startRound).not.toHaveBeenCalled();
+  });
+
+  it('uses joined session code when starting round without a reload', async () => {
+    const api = makeApiMock();
+    const controller = createVerticalSliceController(api);
+
+    await controller.joinLobby(' abcd12 ', 'Maja');
+    await controller.startRound('', 'history');
+
+    expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' });
+    expect(controller.getState().sessionCode).toBe('ABCD12');
+  });
+});

frontend/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": ["ES2022", "DOM"],
+    "types": ["vitest/globals", "node"]
+  },
+  "include": ["src", "tests", "../shared/i18n/*.json"]
+}

frontend/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['tests/**/*.test.ts'],
+    exclude: ['**/node_modules/**']
+  }
+});

infra/staging/README.md

@@ -22,7 +22,11 @@ Forventet:
 - service er active
 - healthz returnerer JSON med ok=true
 
-Efter deploy vil scriptet også verificere at `DB_ENGINE` ikke er `django.db.backends.sqlite3` før migrations køres.
+Smoke-suite skriver nu et gameplay-artifact som JSON under `/opt/wpp-staging/app/artifacts/smoke/` (kan overrides via `ARTIFACT_DIR`/`ARTIFACT_FILE`).
+
+Efter deploy validerer scriptet, at `DB_ENGINE` ikke er `django.db.backends.sqlite3` før migrations køres.
+
+Deploy-scriptet bruger en release-candidate mappe og promoverer først til `/opt/wpp-staging/app` efter succesfuld `migrate`. Det reducerer schema/code drift ved afbrudte deploys (issue #130) og understøtter release-readiness gate (issue #90).
 
 ## Deploy (canonical execution context)
 Deploy skal altid køres via Proxmox host over SSH (ikke fra lokal coder-shell med direkte sudo pct).

infra/staging/deploy_staging.sh

@@ -9,25 +9,88 @@ PROXMOX_HOST="${PROXMOX_HOST:-proxmox-lan}"
 echo "[deploy] host=${PROXMOX_HOST} CT_ID=${CT_ID} REF=${REF_NAME}"
 
 echo "[deploy] extracting source + installing deps + migrate + restart"
-ssh "${PROXMOX_HOST}" "sudo -n /usr/sbin/pct exec ${CT_ID} -- bash -lc \"set -euo pipefail
+ssh "${PROXMOX_HOST}" sudo -n /usr/sbin/pct exec "${CT_ID}" -- bash -s -- "${ARCHIVE_URL}" <<'REMOTE'
-mkdir -p /opt/wpp-staging/releases/src
+set -euo pipefail
-cd /opt/wpp-staging/releases
+
-curl -fsSL \\\"${ARCHIVE_URL}\\\" -o app.tar.gz
+ARCHIVE_URL="$1"
-rm -rf src && mkdir src
+RELEASES_DIR=/opt/wpp-staging/releases
-tar -xzf app.tar.gz -C src --strip-components=1
+CANDIDATE_DIR="${RELEASES_DIR}/src"
-rm -rf /opt/wpp-staging/app/*
+APP_DIR=/opt/wpp-staging/app
-cp -a src/. /opt/wpp-staging/app/
+
-# Ensure deploy artifact copied as root does not leave app tree non-writable for wpp.
+install -d -m 0755 -o wpp -g wpp "${RELEASES_DIR}" "${APP_DIR}"
-chown -R wpp:wpp /opt/wpp-staging/app
+mkdir -p "${CANDIDATE_DIR}"
-# Staging must not run on SQLite (issue #133). Remove bundled sqlite artifact.
+cd "${RELEASES_DIR}"
-rm -f /opt/wpp-staging/app/db.sqlite3
+curl -fsSL "${ARCHIVE_URL}" -o app.tar.gz
-cd /opt/wpp-staging/app
+rm -rf "${CANDIDATE_DIR}" && mkdir -p "${CANDIDATE_DIR}"
+tar -xzf app.tar.gz -C "${CANDIDATE_DIR}" --strip-components=1
+
+# Ensure deploy artifact copied as root does not leave candidate tree non-writable for wpp.
+chown -R wpp:wpp "${CANDIDATE_DIR}"
+# Staging must not run on SQLite (issue #133). Remove bundled sqlite artifact from candidate.
+rm -f "${CANDIDATE_DIR}/db.sqlite3"
+cd "${CANDIDATE_DIR}"
+
+# Load staging env before any manage.py call (issue #133 follow-up).
+ENV_LOADED=0
+for ENV_FILE in \
+  /opt/wpp-staging/.env.staging \
+  /opt/wpp-staging/.env \
+  /opt/wpp-staging/env/wpp_staging.env \
+  /opt/wpp-staging/secrets/wpp_staging.env
+  do
+  if [ -f "${ENV_FILE}" ]; then
+    set -a
+    . "${ENV_FILE}"
+    set +a
+    echo "[deploy] loaded staging env: ${ENV_FILE}"
+    ENV_LOADED=1
+    break
+  fi
+done
+if [ "${ENV_LOADED}" -ne 1 ]; then
+  echo "[deploy] ERROR: no staging env file found"
+  exit 1
+fi
+
 runuser -u wpp -- python3 -m venv .venv
 runuser -u wpp -- .venv/bin/pip install -U pip >/dev/null
 runuser -u wpp -- .venv/bin/pip install -r requirements.txt >/dev/null
-runuser -u wpp -- .venv/bin/python manage.py shell -c \"from django.conf import settings; import sys; engine = settings.DATABASES['default']['ENGINE']; print(f'DB_ENGINE={engine}'); sys.exit(0 if engine != 'django.db.backends.sqlite3' else 1)\"
+runuser -u wpp -- .venv/bin/python manage.py shell -c "from django.conf import settings; import sys; engine = settings.DATABASES['default']['ENGINE']; print(f'DB_ENGINE={engine}'); sys.exit(0 if engine != 'django.db.backends.sqlite3' else 1)"
 runuser -u wpp -- .venv/bin/python manage.py migrate --noinput
+
+# Promote candidate only after migrations succeed (issue #130): avoid code/schema drift after failed deploy.
+# Use find instead of rm "${APP_DIR}"/* to reliably remove dotfiles between deploys.
+find "${APP_DIR}" -mindepth 1 -maxdepth 1 -exec rm -rf -- {} +
+cp -a "${CANDIDATE_DIR}"/. "${APP_DIR}/"
+chown -R wpp:wpp "${APP_DIR}"
+runuser -u wpp -- test -w "${APP_DIR}"
+
 systemctl restart wpp-staging.service
-curl -fsS http://127.0.0.1:8000/healthz\"" 
+
+HEALTH_URL="http://127.0.0.1:8000/healthz"
+MAX_ATTEMPTS=7
+SLEEP_SECONDS=1
+ATTEMPT=1
+
+until curl -fsS "${HEALTH_URL}" >/dev/null; do
+  if [ "${ATTEMPT}" -ge "${MAX_ATTEMPTS}" ]; then
+    echo "[deploy] ERROR: health check failed after ${MAX_ATTEMPTS} attempts: ${HEALTH_URL}" >&2
+    echo "[deploy] service status (wpp-staging.service):" >&2
+    systemctl --no-pager --full status wpp-staging.service >&2 || true
+    echo "[deploy] recent service logs (wpp-staging.service):" >&2
+    journalctl --no-pager -u wpp-staging.service -n 80 >&2 || true
+    exit 1
+  fi
+
+  echo "[deploy] health check not ready (attempt ${ATTEMPT}/${MAX_ATTEMPTS}); retrying in ${SLEEP_SECONDS}s"
+  sleep "${SLEEP_SECONDS}"
+  ATTEMPT=$((ATTEMPT + 1))
+  if [ "${SLEEP_SECONDS}" -lt 8 ]; then
+    SLEEP_SECONDS=$((SLEEP_SECONDS * 2))
+  fi
+done
+
+echo "[deploy] health check passed: ${HEALTH_URL}"
+REMOTE
 
 echo "[deploy] OK: staging deploy complete for CT ${CT_ID} (${REF_NAME})"

infra/staging/smoke_suite.sh

@@ -50,10 +50,30 @@ PY
 echo "[smoke] healthz check: ${BASE_URL}/healthz"
 curl -fsS "${BASE_URL}/healthz" >/dev/null || { SMOKE_FAIL_MESSAGE="healthz check failed" fail "healthz check failed"; }
 
-echo "[smoke] gameplay flow via management command"
+ENV_FILE="${ENV_FILE:-/etc/wpp/staging.env}"
-(
-  cd "${APP_DIR}"
-  .venv/bin/python manage.py smoke_staging
-) || { SMOKE_FAIL_MESSAGE="manage.py smoke_staging failed" fail "manage.py smoke_staging failed"; }
 
+run_manage() {
+  local cmd="$1"
+  (
+    cd "${APP_DIR}"
+    if [[ -f "${ENV_FILE}" ]]; then
+      set -a
+      # shellcheck disable=SC1090
+      source "${ENV_FILE}"
+      set +a
+    fi
+    .venv/bin/python manage.py ${cmd}
+  )
+}
+
+echo "[smoke] migration consistency check"
+run_manage "migrate --check --noinput" || { SMOKE_FAIL_MESSAGE="schema drift: unapplied migrations in staging" fail "schema drift: unapplied migrations in staging"; }
+
+ARTIFACT_DIR="${ARTIFACT_DIR:-${APP_DIR}/artifacts/smoke}"
+ARTIFACT_FILE="${ARTIFACT_FILE:-${ARTIFACT_DIR}/smoke-$(date -u +%Y%m%dT%H%M%SZ).json}"
+
+echo "[smoke] gameplay flow via management command"
+run_manage "smoke_staging --artifact ${ARTIFACT_FILE}" || { SMOKE_FAIL_MESSAGE="manage.py smoke_staging failed" fail "manage.py smoke_staging failed"; }
+
+echo "[smoke] artifact: ${ARTIFACT_FILE}"
 echo "[smoke] OK"

lobby/feature_flags.py

@@ -0,0 +1,6 @@
+from django.conf import settings
+
+
+def use_spa_ui() -> bool:
+    """Central read-point for SPA cutover flag."""
+    return bool(getattr(settings, "USE_SPA_UI", False))

lobby/i18n.py

@@ -0,0 +1,70 @@
+import json
+import logging
+from functools import lru_cache
+from pathlib import Path
+
+from django.http import HttpRequest, JsonResponse
+from django.utils.translation import get_language_from_request
+
+LOGGER = logging.getLogger(__name__)
+
+
+@lru_cache(maxsize=1)
+def lobby_i18n_catalog() -> dict:
+    catalog_path = Path(__file__).resolve().parents[1] / "shared" / "i18n" / "lobby.json"
+    with catalog_path.open(encoding="utf-8") as handle:
+        return json.load(handle)
+
+
+@lru_cache(maxsize=1)
+def i18n_locale_config() -> tuple[str, tuple[str, ...]]:
+    locales = lobby_i18n_catalog().get("locales", {})
+    default_locale = str(locales.get("default", "en")).strip().lower() or "en"
+    supported_locales = tuple(
+        locale.strip().lower() for locale in locales.get("supported", ["en", "da"]) if str(locale).strip()
+    ) or ("en", "da")
+    return default_locale, supported_locales
+
+
+def lobby_i18n_errors() -> dict:
+    return lobby_i18n_catalog().get("backend", {}).get("error_codes", {})
+
+
+def lobby_i18n_error_messages() -> dict:
+    return lobby_i18n_catalog().get("backend", {}).get("errors", {})
+
+
+def resolve_locale(request: HttpRequest) -> str:
+    default_locale, supported_locales = i18n_locale_config()
+    requested = (get_language_from_request(request) or "").split("-", 1)[0].lower()
+    if requested in supported_locales:
+        return requested
+    return default_locale
+
+
+def resolve_error_message(*, key: str, locale: str) -> str:
+    default_locale, _supported_locales = i18n_locale_config()
+    translations = lobby_i18n_error_messages().get(key)
+    if not isinstance(translations, dict):
+        LOGGER.warning("i18n key missing in shared catalog", extra={"key": key, "locale": locale})
+        return key
+
+    if locale in translations and translations[locale]:
+        return translations[locale]
+    if default_locale in translations and translations[default_locale]:
+        return translations[default_locale]
+
+    LOGGER.warning("i18n translation missing for key", extra={"key": key, "locale": locale})
+    return key
+
+
+def api_error(request: HttpRequest, *, key: str, status: int) -> JsonResponse:
+    locale = resolve_locale(request)
+    return JsonResponse(
+        {
+            "error": resolve_error_message(key=key, locale=locale),
+            "error_code": key,
+            "locale": locale,
+        },
+        status=status,
+    )

lobby/management/commands/smoke_staging.py

@@ -1,4 +1,6 @@
 import json
+from datetime import datetime, timezone
+from pathlib import Path
 
 from django.contrib.auth import get_user_model
 from django.core.management.base import BaseCommand, CommandError
@@ -10,6 +12,12 @@ from fupogfakta.models import Category, GameSession, Player, Question, RoundQues
 class Command(BaseCommand):
     help = "Run minimal staging smoke flow for lobby gameplay"
 
+    def add_arguments(self, parser):
+        parser.add_argument(
+            "--artifact",
+            help="Optional path to write smoke result artifact as JSON",
+        )
+
     def handle(self, *args, **options):
         GameSession.objects.all().delete()
         Player.objects.all().delete()
@@ -72,7 +80,13 @@ class Command(BaseCommand):
             nick = player["nickname"]
             lie_res = Client().post(
                 f"/lobby/sessions/{code}/questions/{round_question_id}/lies/submit",
-                data=json.dumps({"player_id": player["id"], "text": f"Lie from {nick}"}),
+                data=json.dumps(
+                    {
+                        "player_id": player["id"],
+                        "session_token": player["session_token"],
+                        "text": f"Lie from {nick}",
+                    }
+                ),
                 content_type="application/json",
             )
             if lie_res.status_code != 201:
@@ -94,7 +108,13 @@ class Command(BaseCommand):
             selected = next((a for a in answers if a.get("player_id") != player["id"]), answers[0])
             guess_res = Client().post(
                 f"/lobby/sessions/{code}/questions/{round_question_id}/guesses/submit",
-                data=json.dumps({"player_id": player["id"], "selected_text": selected["text"]}),
+                data=json.dumps(
+                    {
+                        "player_id": player["id"],
+                        "session_token": player["session_token"],
+                        "selected_text": selected["text"],
+                    }
+                ),
                 content_type="application/json",
             )
             if guess_res.status_code != 201:
@@ -115,4 +135,30 @@ class Command(BaseCommand):
         if finish_res.status_code != 200:
             raise CommandError(f"finish_game failed: {finish_res.status_code}")
 
+        artifact_path = options.get("artifact")
+        if artifact_path:
+            artifact = {
+                "ok": True,
+                "command": "smoke_staging",
+                "generated_at": datetime.now(timezone.utc).isoformat(),
+                "session_code": code,
+                "players": [player["nickname"] for player in players],
+                "round_question_id": round_question_id,
+                "steps": [
+                    "create_session",
+                    "join_players",
+                    "start_round",
+                    "show_question",
+                    "submit_lies",
+                    "mix_answers",
+                    "submit_guesses",
+                    "calculate_scores",
+                    "reveal_scoreboard",
+                    "finish_game",
+                ],
+            }
+            output_path = Path(artifact_path)
+            output_path.parent.mkdir(parents=True, exist_ok=True)
+            output_path.write_text(json.dumps(artifact, indent=2) + "\n", encoding="utf-8")
+
         self.stdout.write(self.style.SUCCESS(f"Smoke flow OK for session {code}"))

lobby/templates/lobby/host_screen.html

@@ -1,5 +1,16 @@
 <!doctype html>
-<html lang="da"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>WPP Host</title></head>
+<html lang="da"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>WPP Host</title>
+<style>
+.critical-card { margin: 10px 0 12px; padding: 10px; border-radius: 10px; border: 1px solid #cbd5e1; background: #f8fafc; }
+.critical-card h2 { margin: 0 0 6px; font-size: 1rem; }
+.critical-card p { margin: 0; color: #334155; }
+.skeleton-line { position: relative; overflow: hidden; height: 12px; border-radius: 999px; margin-top: 8px; background: #e2e8f0; }
+.skeleton-line:first-of-type { margin-top: 4px; }
+.skeleton-line.short { width: 60%; }
+.skeleton-line::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(226,232,240,0) 0%, rgba(255,255,255,0.85) 45%, rgba(226,232,240,0) 100%); animation: wppShimmer 1.2s infinite; }
+@keyframes wppShimmer { to { transform: translateX(100%); } }
+</style>
+</head>
 <body>
 <h1>Host panel (MVP)</h1>
 <p>Kræver login som host-bruger.</p>
@@ -28,6 +39,22 @@
 <button id="autoRefreshToggleBtn" onclick="toggleAutoRefresh()">Auto-refresh: OFF</button>
 <p id="autoRefreshHint">Auto-refresh er slået fra.</p>
 <p id="lastRefreshStatus">Session-data ikke opdateret endnu.</p>
+<div id="hostShellErrorBoundary" style="display:none;margin:8px 0 10px;padding:8px 10px;border-radius:8px;border:1px solid #b91c1c;background:#fee2e2;color:#7f1d1d;">Der opstod en kritisk fejl i app-skallen.
+  <button id="hostRecoverRetryBtn" type="button" onclick="recoverHostShell('retry')">Prøv gendan</button>
+  <button id="hostRecoverReloadBtn" type="button" onclick="recoverHostShell('reload')">Genindlæs siden</button>
+</div>
+<section id="hostCriticalSkeleton" class="critical-card" aria-live="polite">
+  <h2>Indlæser host-overblik…</h2>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line short"></div>
+</section>
+<section id="hostCriticalView" class="critical-card" style="display:none" aria-live="polite">
+  <h2>Host-overblik</h2>
+  <p id="hostCriticalPhase">Fase: afventer</p>
+  <p id="hostCriticalPlayers">Spillere: afventer</p>
+  <p id="hostCriticalRound">Aktiv round question: afventer</p>
+</section>
 <pre id="out">Klar.</pre>
 <script>
 var currentSessionStatus="";
@@ -37,13 +64,31 @@ var hostActionInFlight=false;
 var lastRefreshAtLabel="";
 var lastRefreshFailed=false;
 var sessionDetailInFlight=false;
+var hostShellRouteHint="";
+var HOST_SHELL_ROUTES={lobby:"lobby",lie:"lie",guess:"guess",reveal:"reveal",finished:"finished"};
+var hostShellFatalError=false;
+var hostShellRecoverInFlight=false;
+var hostCriticalHydrated=false;
+function setHostCriticalLoading(isLoading){var skeleton=document.getElementById("hostCriticalSkeleton");var view=document.getElementById("hostCriticalView");if(!skeleton||!view){return;}skeleton.style.display=isLoading?"block":"none";view.style.display=isLoading?"none":"block";}
+function hydrateHostCriticalView(data){var session=(data&&data.session)||{};var phaseEl=document.getElementById("hostCriticalPhase");var playersEl=document.getElementById("hostCriticalPlayers");var roundEl=document.getElementById("hostCriticalRound");if(phaseEl){phaseEl.textContent="Fase: "+phaseLabel(currentSessionStatus||session.status||"");}
+if(playersEl){playersEl.textContent="Spillere: "+(typeof session.players_count==="number"?session.players_count:"ukendt");}
+if(roundEl){roundEl.textContent="Aktiv round question: "+(rq()||"ikke valgt");}
+hostCriticalHydrated=true;
+setHostCriticalLoading(false);
+}
 function csrf(){var m=document.cookie.match(/csrftoken=([^;]+)/);return m?m[1]:"";}
+function updateHostShellErrorBoundary(){var panel=document.getElementById("hostShellErrorBoundary");var retryBtn=document.getElementById("hostRecoverRetryBtn");var reloadBtn=document.getElementById("hostRecoverReloadBtn");if(!panel||!retryBtn||!reloadBtn){return;}panel.style.display=hostShellFatalError?"block":"none";retryBtn.disabled=hostShellRecoverInFlight||sessionDetailInFlight||!code();reloadBtn.disabled=hostShellRecoverInFlight;}
+function setHostShellFatalError(detail){hostShellFatalError=true;var out=document.getElementById("out");if(out){out.textContent=JSON.stringify({status:0,data:{error:"host_shell_runtime_error",detail:detail||"Ukendt runtime-fejl"}},null,2);}var hint=document.getElementById("hostErrorHint");if(hint){hint.textContent="Fejl: Kritisk app-fejl. Brug recover-handlingerne for at fortsætte.";}updateHostShellErrorBoundary();}
+function clearHostShellFatalError(){hostShellFatalError=false;hostShellRecoverInFlight=false;updateHostShellErrorBoundary();}
+function recoverHostShell(mode){if(hostShellRecoverInFlight){return Promise.resolve({error:"recover_in_flight"});}hostShellRecoverInFlight=true;updateHostShellErrorBoundary();if(mode==="reload"){window.location.reload();return Promise.resolve({ok:true});}if(!code()){hostShellRecoverInFlight=false;updateHostShellErrorBoundary();return Promise.resolve({error:"missing_session_code"});}return sessionDetail().then(function(result){clearHostShellFatalError();return result;}).catch(function(err){hostShellRecoverInFlight=false;updateHostShellErrorBoundary();throw err;});}
 function code(){return document.getElementById("code").value.trim().toUpperCase();}
 function rq(){return document.getElementById("roundQuestionId").value.trim();}
-
 function saveHostContext(){try{localStorage.setItem("wppHostContext",JSON.stringify({code:code(),round_question_id:rq(),session_status:currentSessionStatus||"",auto_refresh:autoRefreshEnabled}));}catch(_e){}}
 function restoreHostContext(){try{var raw=localStorage.getItem("wppHostContext");if(!raw){return false;}var ctx=JSON.parse(raw);if(ctx.code){document.getElementById("code").value=(ctx.code||"").toUpperCase();}if(ctx.round_question_id){document.getElementById("roundQuestionId").value=ctx.round_question_id;}if(ctx.session_status){currentSessionStatus=ctx.session_status;}autoRefreshEnabled=!!ctx.auto_refresh;updateAutoRefreshUi();return !!ctx.code;}catch(_e){return false;}}
 function phaseLabel(status){if(status==="lobby"){return"Lobby";}if(status==="lie"){return"Løgn";}if(status==="guess"){return"Gæt";}if(status==="reveal"){return"Reveal";}if(status==="finished"){return"Afsluttet";}return"Ukendt";}
+function hostShellRouteFromPath(){var marker="/lobby/ui/host";var path=(window.location.pathname||"").toLowerCase();var idx=path.indexOf(marker);if(idx===-1){return"";}var remainder=path.slice(idx+marker.length).replace(/^\/+|\/+$/g,"");if(!remainder){return"";}var route=remainder.split("/")[0];return HOST_SHELL_ROUTES[route]?route:"";}
+function expectedHostShellRoute(){return HOST_SHELL_ROUTES[currentSessionStatus]||"";}
+function syncHostShellRoute(){var currentRoute=hostShellRouteFromPath();var expectedRoute=expectedHostShellRoute();if(!currentRoute||!expectedRoute){hostShellRouteHint="";return;}if(currentRoute===expectedRoute){hostShellRouteHint="";return;}var nextPath="/lobby/ui/host/"+expectedRoute;window.history.replaceState(null,"",nextPath);hostShellRouteHint="Deep-link route guard: omdirigeret fra /"+currentRoute+" til /"+expectedRoute+" for fase "+phaseLabel(currentSessionStatus)+".";}
 function updateAutoRefreshUi(){var btn=document.getElementById("autoRefreshToggleBtn");var hint=document.getElementById("autoRefreshHint");if(btn){btn.textContent="Auto-refresh: "+(autoRefreshEnabled?"ON":"OFF");btn.disabled=hostActionInFlight||sessionDetailInFlight||!code();}if(!hint){return;}if(hostActionInFlight){hint.textContent="Auto-refresh-lås: afvent aktiv host-handling.";return;}if(sessionDetailInFlight){hint.textContent="Auto-refresh-lås: afvent aktiv session-opdatering.";return;}if(!autoRefreshEnabled){hint.textContent="Auto-refresh er slået fra.";return;}if(!code()){hint.textContent="Auto-refresh venter: angiv sessionkode.";return;}if(currentSessionStatus==="finished"){hint.textContent="Auto-refresh stoppet: spillet er afsluttet.";return;}hint.textContent="Auto-refresh aktiv (10s) for lobby-status.";}
 function stopAutoRefresh(reason){autoRefreshEnabled=false;if(autoRefreshTimer){clearInterval(autoRefreshTimer);autoRefreshTimer=null;}if(reason){var hint=document.getElementById("autoRefreshHint");if(hint){hint.textContent=reason;}}updateAutoRefreshUi();saveHostContext();}
 function startAutoRefresh(){if(!code()){updateAutoRefreshUi();return;}autoRefreshEnabled=true;if(autoRefreshTimer){clearInterval(autoRefreshTimer);}autoRefreshTimer=setInterval(function(){if(!code()||sessionDetailInFlight){return;}if(currentSessionStatus==="finished"){stopAutoRefresh("Auto-refresh stoppet: spillet er afsluttet.");return;}sessionDetail();},10000);updateAutoRefreshUi();saveHostContext();}
@@ -54,12 +99,14 @@ function updateLastRefreshStatus(){var el=document.getElementById("lastRefreshSt
 function normalizeApiError(data){if(!data||typeof data!=="object"){return"";}return (data.error_code||data.error||"").toString();}
 function mapUiErrorMessage(errorKey){if(!errorKey){return"";}var key=errorKey.toLowerCase();if(key.indexOf("phase")!==-1){return"Ugyldig fase for handlingen. Opdatér session-status og prøv igen.";}if(key.indexOf("token")!==-1||key.indexOf("auth")!==-1){return"Session-token er ugyldig eller udløbet. Rejoin sessionen og prøv igen.";}if(key.indexOf("round")!==-1||key.indexOf("question")!==-1||key.indexOf("state")!==-1){return"Runde-kontekst matcher ikke længere. Opdatér session-status før næste handling.";}if(key.indexOf("session")!==-1){return"Sessionkoden er ugyldig eller sessionen findes ikke længere.";}return"Handling fejlede. Opdatér session-status og prøv igen.";}
 function updateErrorHint(status,data){var el=document.getElementById("hostErrorHint");if(!el){return;}if(status>=200&&status<300){el.textContent="Ingen fejl.";return;}var errKey=normalizeApiError(data);el.textContent="Fejl: "+mapUiErrorMessage(errKey)+" ("+(errKey||("http_"+status))+")";}
-function updateCreateSessionState(){var btn=document.getElementById("createSessionBtn");var hint=document.getElementById("createSessionHint");if(btn){btn.disabled=hostActionInFlight||sessionDetailInFlight;}if(!hint){return;}if(hostActionInFlight){hint.textContent="Opret session er låst mens en host-handling kører.";return;}if(sessionDetailInFlight){hint.textContent="Opret session er låst mens session-opdatering kører.";return;}hint.textContent="Opret session er klar.";}function updateSessionDetailState(){var btn=document.getElementById("sessionDetailBtn");var hint=document.getElementById("sessionDetailHint");var codeInput=document.getElementById("code");if(btn){btn.disabled=sessionDetailInFlight||hostActionInFlight||!code();}if(codeInput){codeInput.readOnly=sessionDetailInFlight||hostActionInFlight;}if(!hint){return;}if(sessionDetailInFlight){hint.textContent="Opdaterer session-status…";return;}if(hostActionInFlight){hint.textContent="Session-opdatering er låst mens en host-handling kører.";return;}if(!code()){hint.textContent="Angiv sessionkode for at opdatere session-status.";return;}hint.textContent="Session-opdatering klar.";}
+function updateCreateSessionState(){var btn=document.getElementById("createSessionBtn");var hint=document.getElementById("createSessionHint");if(btn){btn.disabled=hostActionInFlight||sessionDetailInFlight;}if(!hint){return;}if(hostActionInFlight){hint.textContent="Opret session er låst mens en host-handling kører.";return;}if(sessionDetailInFlight){hint.textContent="Opret session er låst mens session-opdatering kører.";return;}hint.textContent="Opret session er klar.";}function updateSessionDetailState(){var btn=document.getElementById("sessionDetailBtn");var hint=document.getElementById("sessionDetailHint");var codeInput=document.getElementById("code");if(btn){btn.disabled=sessionDetailInFlight||hostActionInFlight||!code();}if(codeInput){codeInput.readOnly=sessionDetailInFlight||hostActionInFlight;}if(!hint){return;}if(sessionDetailInFlight){hint.textContent="Opdaterer session-status…";return;}if(hostActionInFlight){hint.textContent="Session-opdatering er låst mens en host-handling kører.";return;}if(!code()){hint.textContent="Angiv sessionkode for at opdatere session-status.";updateHostShellErrorBoundary();return;}hint.textContent="Session-opdatering klar.";updateHostShellErrorBoundary();}
 
-function updatePhaseStatus(){var el=document.getElementById("phaseStatus");if(!el){return;}if(!currentSessionStatus){el.textContent="Fase: ukendt (opdatér session-status).";return;}el.textContent="Fase: "+phaseLabel(currentSessionStatus)+" ("+currentSessionStatus+")";}
+function updatePhaseStatus(){var el=document.getElementById("phaseStatus");syncHostShellRoute();if(!el){return;}if(!currentSessionStatus){el.textContent="Fase: ukendt (opdatér session-status).";return;}el.textContent="Fase: "+phaseLabel(currentSessionStatus)+" ("+currentSessionStatus+")";}
 function syncStartRoundGuard(data){var btn=document.getElementById("startRoundBtn");var hint=document.getElementById("startRoundHint");var status=document.getElementById("playerCountStatus");if(!btn||!hint||!status){return;}var count=(data&&data.session&&typeof data.session.players_count==="number")?data.session.players_count:null;var phase=currentSessionStatus||"";if(phase&&phase!=="lobby"){btn.disabled=true;status.textContent=count===null?"Spillere i session: ukendt":"Spillere i session: "+count;hint.textContent="Start runde er kun tilladt i lobby-fasen.";return;}if(count===null){btn.disabled=true;status.textContent="Spillere i session: ukendt";hint.textContent="Opdatér session-status for at validere 3-5 spillere.";return;}status.textContent="Spillere i session: "+count;if(count<3){btn.disabled=true;hint.textContent="Mangler spillere: kræver mindst 3 for at starte runde.";return;}if(count>5){btn.disabled=true;hint.textContent="For mange spillere: maks 5 i MVP før runde-start.";return;}btn.disabled=false;hint.textContent="Klar: spillerantal er indenfor 3-5 til runde-start.";}
-function updateHostActionState(){updateCreateSessionState();var hasCode=!!code();var hasRound=!!rq();var phase=currentSessionStatus||"";var showQuestionBtn=document.getElementById("showQuestionBtn");var mixAnswersBtn=document.getElementById("mixAnswersBtn");var calcScoresBtn=document.getElementById("calcScoresBtn");var showScoreboardBtn=document.getElementById("showScoreboardBtn");var nextRoundBtn=document.getElementById("nextRoundBtn");var finishGameBtn=document.getElementById("finishGameBtn");var roundQuestionInput=document.getElementById("roundQuestionId");var roundQuestionGuardHint=document.getElementById("roundQuestionGuardHint");var categorySelect=document.getElementById("category");var categoryGuardHint=document.getElementById("categoryGuardHint");var hint=document.getElementById("hostActionHint");if(showQuestionBtn){showQuestionBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="lie";}if(showScoreboardBtn){showScoreboardBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="reveal";}if(nextRoundBtn){nextRoundBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="reveal";}if(finishGameBtn){finishGameBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="reveal";}if(mixAnswersBtn){mixAnswersBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||!hasRound||(phase!=="lie"&&phase!=="guess");}if(calcScoresBtn){calcScoresBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||!hasRound||phase!=="guess";}var canEditRoundQuestion=!!hasCode&&(phase==="lie"||phase==="guess"||phase==="reveal");if(roundQuestionInput){roundQuestionInput.disabled=hostActionInFlight||sessionDetailInFlight||!canEditRoundQuestion;}if(roundQuestionGuardHint){if(hostActionInFlight){roundQuestionGuardHint.textContent="Round question-id er låst mens en handling kører.";}else if(sessionDetailInFlight){roundQuestionGuardHint.textContent="Round question-id er låst mens session-opdatering kører.";}else if(!hasCode){roundQuestionGuardHint.textContent="Angiv sessionkode for at redigere round question-id.";}else if(!phase){roundQuestionGuardHint.textContent="Opdatér session-status for round question-id.";}else if(canEditRoundQuestion){roundQuestionGuardHint.textContent="Round question-id kan redigeres i fase: "+phaseLabel(phase)+".";}else{roundQuestionGuardHint.textContent="Round question-id er låst i fase: "+phaseLabel(phase)+".";}}if(categorySelect){categorySelect.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="lobby";}if(categoryGuardHint){if(hostActionInFlight){categoryGuardHint.textContent="Kategori er midlertidigt låst mens en handling kører.";}else if(sessionDetailInFlight){categoryGuardHint.textContent="Kategori er låst mens session-opdatering kører.";}else if(!hasCode){categoryGuardHint.textContent="Angiv sessionkode for at låse kategori til lobby-fasen.";}else if(phase==="lobby"){categoryGuardHint.textContent="Kategori kan vælges i lobby-fasen.";}else if(!phase){categoryGuardHint.textContent="Opdatér session-status for at validere kategori-lås.";}else{categoryGuardHint.textContent="Kategori er låst udenfor lobby-fasen.";}}if(!hint){return;}if(hostActionInFlight){hint.textContent="Handling kører… afvent svar før næste klik.";return;}if(sessionDetailInFlight){hint.textContent="Host-actions er låst mens session-opdatering kører.";return;}if(!hasCode){hint.textContent="Angiv sessionkode for at aktivere host-actions.";return;}if(!phase){hint.textContent="Opdatér session-status for fasebaserede host-actions.";return;}if(phase==="finished"){hint.textContent="Spillet er afsluttet: gameplay-actions er låst.";return;}if((phase==="lie"||phase==="guess")&&!hasRound){hint.textContent="Round question id mangler: mix/beregn score er låst.";return;}hint.textContent="Host-actions er klar for fase: "+phaseLabel(phase)+".";}
+
-async function api(path,method,payload){var o={method:method||"GET",headers:{"Accept":"application/json"}};if(payload!==null){o.headers["Content-Type"]="application/json";o.headers["X-CSRFToken"]=csrf();o.body=JSON.stringify(payload);}var r=await fetch(path,o);var d=await r.json().catch(function(){return {};});var isSessionDetailRead=(method||"GET")==="GET"&&/^\/lobby\/sessions\/[A-Z0-9]+$/.test(path);if(isSessionDetailRead){markSessionRefresh(r.status);}document.getElementById("out").textContent=JSON.stringify({status:r.status,data:d},null,2);if(d.session&&d.session.code){document.getElementById("code").value=d.session.code;}if(d.session&&d.session.status){currentSessionStatus=d.session.status;}if(d.round_question&&d.round_question.id){document.getElementById("roundQuestionId").value=d.round_question.id;}updateErrorHint(r.status,d);updatePhaseStatus();syncStartRoundGuard(d);updateHostActionState();if(currentSessionStatus==="finished"&&autoRefreshEnabled){stopAutoRefresh("Auto-refresh stoppet: spillet er afsluttet.");}else{updateAutoRefreshUi();}saveHostContext();return d;}
+function updateHostActionState(){updateCreateSessionState();var hasCode=!!code();var hasRound=!!rq();var phase=currentSessionStatus||"";var showQuestionBtn=document.getElementById("showQuestionBtn");var mixAnswersBtn=document.getElementById("mixAnswersBtn");var calcScoresBtn=document.getElementById("calcScoresBtn");var showScoreboardBtn=document.getElementById("showScoreboardBtn");var nextRoundBtn=document.getElementById("nextRoundBtn");var finishGameBtn=document.getElementById("finishGameBtn");var roundQuestionInput=document.getElementById("roundQuestionId");var roundQuestionGuardHint=document.getElementById("roundQuestionGuardHint");var categorySelect=document.getElementById("category");var categoryGuardHint=document.getElementById("categoryGuardHint");var hint=document.getElementById("hostActionHint");if(showQuestionBtn){showQuestionBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="lie";}if(showScoreboardBtn){showScoreboardBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="reveal";}if(nextRoundBtn){nextRoundBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="reveal";}if(finishGameBtn){finishGameBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="reveal";}if(mixAnswersBtn){mixAnswersBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||!hasRound||(phase!=="lie"&&phase!=="guess");}if(calcScoresBtn){calcScoresBtn.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||!hasRound||phase!=="guess";}var canEditRoundQuestion=!!hasCode&&(phase==="lie"||phase==="guess"||phase==="reveal");if(roundQuestionInput){roundQuestionInput.disabled=hostActionInFlight||sessionDetailInFlight||!canEditRoundQuestion;}if(roundQuestionGuardHint){if(hostActionInFlight){roundQuestionGuardHint.textContent="Round question-id er låst mens en handling kører.";}else if(sessionDetailInFlight){roundQuestionGuardHint.textContent="Round question-id er låst mens session-opdatering kører.";}else if(!hasCode){roundQuestionGuardHint.textContent="Angiv sessionkode for at redigere round question-id.";}else if(!phase){roundQuestionGuardHint.textContent="Opdatér session-status for round question-id.";}else if(canEditRoundQuestion){roundQuestionGuardHint.textContent="Round question-id kan redigeres i fase: "+phaseLabel(phase)+".";}else{roundQuestionGuardHint.textContent="Round question-id er låst i fase: "+phaseLabel(phase)+".";}}if(categorySelect){categorySelect.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!=="lobby";}if(categoryGuardHint){if(hostActionInFlight){categoryGuardHint.textContent="Kategori er midlertidigt låst mens en handling kører.";}else if(sessionDetailInFlight){categoryGuardHint.textContent="Kategori er låst mens session-opdatering kører.";}else if(!hasCode){categoryGuardHint.textContent="Angiv sessionkode for at låse kategori til lobby-fasen.";}else if(phase==="lobby"){categoryGuardHint.textContent="Kategori kan vælges i lobby-fasen.";}else if(!phase){categoryGuardHint.textContent="Opdatér session-status for at validere kategori-lås.";}else{categoryGuardHint.textContent="Kategori er låst udenfor lobby-fasen.";}}if(!hint){return;}if(hostActionInFlight){hint.textContent="Handling kører… afvent svar før næste klik.";return;}if(sessionDetailInFlight){hint.textContent="Host-actions er låst mens session-opdatering kører.";return;}if(!hasCode){hint.textContent="Angiv sessionkode for at aktivere host-actions.";return;}if(!phase){hint.textContent="Opdatér session-status for fasebaserede host-actions.";return;}if(phase==="finished"){hint.textContent="Spillet er afsluttet: gameplay-actions er låst.";return;}if((phase==="lie"||phase==="guess")&&!hasRound){hint.textContent="Round question id mangler: mix/beregn score er låst.";return;}if(hostShellRouteHint){hint.textContent=hostShellRouteHint;return;}hint.textContent="Host-actions er klar for fase: "+phaseLabel(phase)+".";}
+async function api(path,method,payload){var o={method:method||"GET",headers:{"Accept":"application/json"}};if(payload!==null){o.headers["Content-Type"]="application/json";o.headers["X-CSRFToken"]=csrf();o.body=JSON.stringify(payload);}var r=await fetch(path,o);var d=await r.json().catch(function(){return {};});var isSessionDetailRead=(method||"GET")==="GET"&&/^\/lobby\/sessions\/[A-Z0-9]+$/.test(path);if(isSessionDetailRead){markSessionRefresh(r.status);}document.getElementById("out").textContent=JSON.stringify({status:r.status,data:d},null,2);if(d.session&&d.session.code){document.getElementById("code").value=d.session.code;}if(d.session&&d.session.status){currentSessionStatus=d.session.status;}if(d.round_question&&d.round_question.id){document.getElementById("roundQuestionId").value=d.round_question.id;}if(d.session){hydrateHostCriticalView(d);}updateErrorHint(r.status,d);updatePhaseStatus();syncStartRoundGuard(d);updateHostActionState();if(currentSessionStatus==="finished"&&autoRefreshEnabled){stopAutoRefresh("Auto-refresh stoppet: spillet er afsluttet.");}else{updateAutoRefreshUi();}if(hostShellFatalError){clearHostShellFatalError();}saveHostContext();return d;}
+
 function withHostActionLock(fn){if(hostActionInFlight){return Promise.resolve({error:"host_action_in_flight"});}hostActionInFlight=true;updateHostActionState();return Promise.resolve().then(fn).finally(function(){hostActionInFlight=false;updateHostActionState();});}
 function createSession(){return withHostActionLock(function(){return api("/lobby/sessions/create","POST",{});});} 
 function sessionDetail(){if(!code()){updateSessionDetailState();return Promise.resolve({error:"missing_session_code"});}if(sessionDetailInFlight){return Promise.resolve({error:"session_detail_in_flight"});}sessionDetailInFlight=true;updateSessionDetailState();return api("/lobby/sessions/"+code(),"GET",null).finally(function(){sessionDetailInFlight=false;updateSessionDetailState();});} 
@@ -72,7 +119,10 @@ function nextRound(){return withHostActionLock(function(){return api("/lobby/ses
 function finishGame(){return withHostActionLock(function(){return api("/lobby/sessions/"+code()+"/finish","POST",{});});} 
 ["code","roundQuestionId"].forEach(function(fieldId){var field=document.getElementById(fieldId);if(!field){return;}field.addEventListener("input",function(){syncStartRoundGuard(null);updateHostActionState();updateSessionDetailState();saveHostContext();});field.addEventListener("change",function(){syncStartRoundGuard(null);updateHostActionState();updateSessionDetailState();saveHostContext();});});
 
-updatePhaseStatus();syncStartRoundGuard(null);updateHostActionState();updateCreateSessionState();updateSessionDetailState();updateAutoRefreshUi();updateLastRefreshStatus();
+window.addEventListener("error",function(event){setHostShellFatalError((event&&event.message)||"Ukendt runtime-fejl");});
-if(restoreHostContext()){updatePhaseStatus();if(autoRefreshEnabled){startAutoRefresh();}sessionDetail();}else{saveHostContext();}
+window.addEventListener("unhandledrejection",function(event){var reason=event&&event.reason;var detail=(reason&&reason.message)||String(reason||"Unhandled promise rejection");setHostShellFatalError(detail);});
+setHostCriticalLoading(true);
+updatePhaseStatus();syncHostShellRoute();syncStartRoundGuard(null);updateHostActionState();updateCreateSessionState();updateSessionDetailState();updateAutoRefreshUi();updateLastRefreshStatus();updateHostShellErrorBoundary();
+if(restoreHostContext()){updatePhaseStatus();syncHostShellRoute();if(autoRefreshEnabled){startAutoRefresh();}sessionDetail();}else{saveHostContext();setTimeout(function(){if(!hostCriticalHydrated){hydrateHostCriticalView({session:{status:currentSessionStatus,players_count:null}});}},350);}
 </script>
 </body></html>

lobby/templates/lobby/player_screen.html

@@ -9,8 +9,22 @@
 #joinStatus { margin: 6px 0 10px; font-size: 0.95rem; color: #333; }
 #contextLockHint { margin: 6px 0 10px; font-size: 0.95rem; color: #333; }
 #phaseStatus { margin: 6px 0 10px; font-size: 0.95rem; color: #333; }
+#connectionBanner { margin: 8px 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid #b91c1c; background: #fee2e2; color: #7f1d1d; display: none; }
+#connectionBanner button { margin-left: 8px; border: 1px solid #991b1b; background: #fff; color: #7f1d1d; border-radius: 6px; padding: 4px 8px; cursor: pointer; }
+#connectionBanner button[disabled] { opacity: 0.55; cursor: not-allowed; }
+#playerShellErrorBoundary { margin: 8px 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid #b91c1c; background: #fee2e2; color: #7f1d1d; display: none; }
+#playerShellErrorBoundary button { margin-left: 8px; border: 1px solid #991b1b; background: #fff; color: #7f1d1d; border-radius: 6px; padding: 4px 8px; cursor: pointer; }
+#playerShellErrorBoundary button[disabled] { opacity: 0.55; cursor: not-allowed; }
 #lieStatus.locked { color: #0a5f2d; font-weight: 600; }
 #guessStatus.locked { color: #0a5f2d; font-weight: 600; }
+.critical-card { margin: 10px 0 12px; padding: 10px; border-radius: 10px; border: 1px solid #cbd5e1; background: #f8fafc; }
+.critical-card h2 { margin: 0 0 6px; font-size: 1rem; }
+.critical-card p { margin: 0; color: #334155; }
+.skeleton-line { position: relative; overflow: hidden; height: 12px; border-radius: 999px; margin-top: 8px; background: #e2e8f0; }
+.skeleton-line:first-of-type { margin-top: 4px; }
+.skeleton-line.short { width: 60%; }
+.skeleton-line::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(226,232,240,0) 0%, rgba(255,255,255,0.85) 45%, rgba(226,232,240,0) 100%); animation: wppShimmer 1.2s infinite; }
+@keyframes wppShimmer { to { transform: translateX(100%); } }
 </style>
 </head>
 <body>
@@ -38,6 +52,23 @@
 <p id="playerLastRefreshStatus">Session-data ikke opdateret endnu.</p>
 <p id="phaseStatus">Fase: ukendt (opdatér session-status).</p>
 <p id="playerErrorHint">Ingen fejl.</p>
+<div id="connectionBanner">Forbindelsen til serveren blev afbrudt.<button id="connectionRetryBtn" type="button" onclick="retryConnection()">Prøv igen</button></div>
+<div id="playerShellErrorBoundary">Der opstod en kritisk fejl i app-skallen.
+  <button id="playerRecoverRetryBtn" type="button" onclick="recoverPlayerShell('retry')">Prøv gendan</button>
+  <button id="playerRecoverReloadBtn" type="button" onclick="recoverPlayerShell('reload')">Genindlæs siden</button>
+</div>
+<section id="playerCriticalSkeleton" class="critical-card" aria-live="polite">
+  <h2>Indlæser spiller-overblik…</h2>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line short"></div>
+</section>
+<section id="playerCriticalView" class="critical-card" style="display:none" aria-live="polite">
+  <h2>Spiller-overblik</h2>
+  <p id="playerCriticalPhase">Fase: afventer</p>
+  <p id="playerCriticalRound">Round question: afventer</p>
+  <p id="playerCriticalJoin">Join-status: afventer</p>
+</section>
 <pre id="out">Klar.</pre>
 <script>
 var availableAnswers=[];
@@ -53,7 +84,23 @@ var playerAutoRefreshTimer=null;
 var sessionDetailInFlight=false;
 var playerLastRefreshAtLabel="";
 var playerLastRefreshFailed=false;
+var connectionLost=false;
+var connectionRetryInFlight=false;
+var playerShellFatalError=false;
+var playerShellRecoverInFlight=false;
+var playerCriticalHydrated=false;
+function setPlayerCriticalLoading(isLoading){var skeleton=document.getElementById("playerCriticalSkeleton");var view=document.getElementById("playerCriticalView");if(!skeleton||!view){return;}skeleton.style.display=isLoading?"block":"none";view.style.display=isLoading?"none":"block";}
+function hydratePlayerCriticalView(data){var phaseEl=document.getElementById("playerCriticalPhase");var roundEl=document.getElementById("playerCriticalRound");var joinEl=document.getElementById("playerCriticalJoin");if(phaseEl){phaseEl.textContent="Fase: "+phaseLabel(currentSessionStatus||((data&&data.session&&data.session.status)||""));}
+if(roundEl){roundEl.textContent="Round question: "+(rq()||"afventer");}
+if(joinEl){joinEl.textContent="Join-status: "+(isPlayerContextLocked()?"låst/aktiv":"ikke låst");}
+playerCriticalHydrated=true;
+setPlayerCriticalLoading(false);
+}
 function code(){return document.getElementById("code").value.trim().toUpperCase();}
+function updatePlayerShellErrorBoundary(){var panel=document.getElementById("playerShellErrorBoundary");var retryBtn=document.getElementById("playerRecoverRetryBtn");var reloadBtn=document.getElementById("playerRecoverReloadBtn");if(!panel||!retryBtn||!reloadBtn){return;}panel.style.display=playerShellFatalError?"block":"none";retryBtn.disabled=playerShellRecoverInFlight||sessionDetailInFlight||joinInFlight||!code();reloadBtn.disabled=playerShellRecoverInFlight;}
+function setPlayerShellFatalError(detail){playerShellFatalError=true;var out=document.getElementById("out");if(out){out.textContent=JSON.stringify({status:0,data:{error:"player_shell_runtime_error",detail:detail||"Ukendt runtime-fejl"}},null,2);}var hint=document.getElementById("playerErrorHint");if(hint){hint.textContent="Fejl: Kritisk app-fejl. Brug recover-handlingerne for at fortsætte.";}updatePlayerShellErrorBoundary();}
+function clearPlayerShellFatalError(){playerShellFatalError=false;playerShellRecoverInFlight=false;updatePlayerShellErrorBoundary();}
+function recoverPlayerShell(mode){if(playerShellRecoverInFlight){return Promise.resolve({error:"recover_in_flight"});}playerShellRecoverInFlight=true;updatePlayerShellErrorBoundary();if(mode==="reload"){window.location.reload();return Promise.resolve({ok:true});}if(!code()){playerShellRecoverInFlight=false;updatePlayerShellErrorBoundary();return Promise.resolve({error:"missing_session_code"});}return sessionDetail().then(function(result){clearPlayerShellFatalError();return result;}).catch(function(err){playerShellRecoverInFlight=false;updatePlayerShellErrorBoundary();throw err;});}
 function pid(){return document.getElementById("playerId").value.trim();}
 function rq(){return document.getElementById("roundQuestionId").value.trim();}
 function phaseLabel(status){if(status==="lobby"){return"Lobby";}if(status==="lie"){return"Løgn";}if(status==="guess"){return"Gæt";}if(status==="reveal"){return"Reveal";}if(status==="finished"){return"Afsluttet";}return"Ukendt";}
@@ -75,11 +122,13 @@ function markPlayerSessionRefresh(status){if(status>=200&&status<300){playerLast
 function updatePlayerLastRefreshStatus(){var el=document.getElementById("playerLastRefreshStatus");if(!el){return;}if(!playerLastRefreshAtLabel){el.textContent=playerLastRefreshFailed?"Session-data kan være forældet (ingen succesfuld opdatering endnu).":"Session-data ikke opdateret endnu.";return;}if(playerLastRefreshFailed){el.textContent="Session-data kan være forældet (seneste succes: "+playerLastRefreshAtLabel+").";return;}el.textContent="Sidst opdateret: "+playerLastRefreshAtLabel+".";}
 function updatePlayerAutoRefreshUi(){var btn=document.getElementById("playerAutoRefreshToggleBtn");var hint=document.getElementById("playerAutoRefreshHint");if(btn){btn.textContent="Auto-refresh: "+(playerAutoRefreshEnabled?"ON":"OFF");btn.disabled=sessionDetailInFlight||joinInFlight||!code();}if(!hint){return;}if(sessionDetailInFlight){hint.textContent="Auto-refresh-lås: afvent aktiv session-opdatering.";return;}if(joinInFlight){hint.textContent="Auto-refresh-lås: afvent aktiv join.";return;}if(!code()){hint.textContent="Auto-refresh kræver sessionkode.";return;}if(!playerAutoRefreshEnabled){hint.textContent="Auto-refresh er slået fra.";return;}if(currentSessionStatus==="finished"){hint.textContent="Auto-refresh stoppet: spillet er afsluttet.";return;}hint.textContent="Auto-refresh aktiv (10s) for spillerstatus.";}
 function stopPlayerAutoRefresh(reason){playerAutoRefreshEnabled=false;if(playerAutoRefreshTimer){clearInterval(playerAutoRefreshTimer);playerAutoRefreshTimer=null;}if(reason){var hint=document.getElementById("playerAutoRefreshHint");if(hint){hint.textContent=reason;}}updatePlayerAutoRefreshUi();savePlayerContext();}
-function startPlayerAutoRefresh(){if(!code()){updatePlayerAutoRefreshUi();return;}playerAutoRefreshEnabled=true;if(playerAutoRefreshTimer){clearInterval(playerAutoRefreshTimer);}playerAutoRefreshTimer=setInterval(function(){if(!code()||sessionDetailInFlight){return;}if(currentSessionStatus==="finished"){stopPlayerAutoRefresh("Auto-refresh stoppet: spillet er afsluttet.");return;}sessionDetail();},10000);updatePlayerAutoRefreshUi();savePlayerContext();}
+function startPlayerAutoRefresh(){if(!code()){updatePlayerAutoRefreshUi();return;}playerAutoRefreshEnabled=true;if(playerAutoRefreshTimer){clearInterval(playerAutoRefreshTimer);}playerAutoRefreshTimer=setInterval(function(){if(!code()||sessionDetailInFlight){return;}if(currentSessionStatus==="finished"){stopPlayerAutoRefresh("Auto-refresh stoppet: spillet er afsluttet.");return;}sessionDetail().catch(function(){});},10000);updatePlayerAutoRefreshUi();savePlayerContext();}
 function togglePlayerAutoRefresh(){if(joinInFlight){updatePlayerAutoRefreshUi();return;}if(playerAutoRefreshEnabled){stopPlayerAutoRefresh();return;}startPlayerAutoRefresh();}
-function updatePlayerErrorHint(status,data){var el=document.getElementById("playerErrorHint");if(!el){return;}if(status>=200&&status<300){el.textContent="Ingen fejl.";return;}var errKey=normalizeApiError(data);el.textContent="Fejl: "+mapUiErrorMessage(errKey)+" ("+(errKey||("http_"+status))+")";}
+function updateConnectionBanner(){var banner=document.getElementById("connectionBanner");var retryBtn=document.getElementById("connectionRetryBtn");if(!banner||!retryBtn){return;}banner.style.display=connectionLost?"block":"none";retryBtn.disabled=connectionRetryInFlight||sessionDetailInFlight||joinInFlight||!code();}
-function updateSessionDetailState(){var btn=document.getElementById("sessionDetailBtn");var hint=document.getElementById("sessionRefreshHint");var submitInFlight=lieSubmitInFlight||guessSubmitInFlight;if(btn){btn.disabled=sessionDetailInFlight||joinInFlight||submitInFlight||!code();}if(!hint){updatePlayerAutoRefreshUi();return;}if(sessionDetailInFlight){hint.textContent="Opdaterer session-status…";updatePlayerAutoRefreshUi();return;}if(joinInFlight){hint.textContent="Session-opdatering er låst mens join kører.";updatePlayerAutoRefreshUi();return;}if(submitInFlight){hint.textContent="Session-opdatering er låst mens submit kører.";updatePlayerAutoRefreshUi();return;}if(!code()){hint.textContent="Angiv sessionkode for at opdatere session-status.";updatePlayerAutoRefreshUi();return;}hint.textContent="Session-opdatering klar.";updatePlayerAutoRefreshUi();}
+function setConnectionLost(isLost){connectionLost=!!isLost;updateConnectionBanner();}
-function updateJoinState(){var btn=document.getElementById("joinBtn");var status=document.getElementById("joinStatus");var joined=!!(pid()&&document.getElementById("sessionToken").value.trim());var canJoin=canAttemptJoin();if(btn){btn.disabled=joinInFlight||sessionDetailInFlight||joined||!canJoin;}if(!status){updateContextLockState();return;}if(joinInFlight){status.textContent="Joiner…";updateContextLockState();return;}if(sessionDetailInFlight&&!joined){status.textContent="Afvent aktiv session-opdatering før join.";updateContextLockState();return;}if(joined){status.textContent="Join gennemført.";updateContextLockState();return;}if(!canJoin){status.textContent="Udfyld kode og nickname for at join.";updateContextLockState();return;}status.textContent="Klar til join.";updateContextLockState();}
+function updatePlayerErrorHint(status,data){var el=document.getElementById("playerErrorHint");if(!el){return;}if(status>=200&&status<300){el.textContent="Ingen fejl.";setConnectionLost(false);return;}var errKey=normalizeApiError(data);el.textContent="Fejl: "+mapUiErrorMessage(errKey)+" ("+(errKey||("http_"+status))+")";}
+function updateSessionDetailState(){var btn=document.getElementById("sessionDetailBtn");var hint=document.getElementById("sessionRefreshHint");var submitInFlight=lieSubmitInFlight||guessSubmitInFlight;if(btn){btn.disabled=sessionDetailInFlight||joinInFlight||submitInFlight||!code();}if(!hint){updatePlayerAutoRefreshUi();updateConnectionBanner();return;}if(sessionDetailInFlight){hint.textContent="Opdaterer session-status…";updatePlayerAutoRefreshUi();updateConnectionBanner();return;}if(joinInFlight){hint.textContent="Session-opdatering er låst mens join kører.";updatePlayerAutoRefreshUi();updateConnectionBanner();return;}if(submitInFlight){hint.textContent="Session-opdatering er låst mens submit kører.";updatePlayerAutoRefreshUi();updateConnectionBanner();return;}if(!code()){hint.textContent="Angiv sessionkode for at opdatere session-status.";updatePlayerAutoRefreshUi();updateConnectionBanner();updatePlayerShellErrorBoundary();return;}hint.textContent="Session-opdatering klar.";updatePlayerAutoRefreshUi();updateConnectionBanner();updatePlayerShellErrorBoundary();}
+function updateJoinState(){var btn=document.getElementById("joinBtn");var status=document.getElementById("joinStatus");var joined=!!(pid()&&document.getElementById("sessionToken").value.trim());var canJoin=canAttemptJoin();if(btn){btn.disabled=joinInFlight||sessionDetailInFlight||joined||!canJoin;}if(!status){updateContextLockState();updateConnectionBanner();return;}if(joinInFlight){status.textContent="Joiner…";updateContextLockState();updateConnectionBanner();return;}if(sessionDetailInFlight&&!joined){status.textContent="Afvent aktiv session-opdatering før join.";updateContextLockState();updateConnectionBanner();return;}if(joined){status.textContent="Join gennemført.";updateContextLockState();updateConnectionBanner();return;}if(!canJoin){status.textContent="Udfyld kode og nickname for at join.";updateContextLockState();updateConnectionBanner();return;}status.textContent="Klar til join.";updateContextLockState();updateConnectionBanner();}
 
 function guessStorageKey(){var c=code();var p=pid();var q=rq();if(!c||!p||!q){return "";}return ["wppGuess",c,p,q].join(":");}
 function lieStorageKey(){var c=code();var p=pid();var q=rq();if(!c||!p||!q){return "";}return ["wppLie",c,p,q].join(":");}
@@ -94,19 +143,25 @@ function updateGuessSubmitState(){var selected=document.getElementById("guessTex
 function setGuess(text,submitted){document.getElementById("guessText").value=text||"";if(typeof submitted==="boolean"){guessSubmitted=submitted;}var buttons=document.querySelectorAll("#answerOptions button");buttons.forEach(function(btn){btn.classList.toggle("active",btn.dataset.answer===text);});updateGuessSubmitState();
 updateJoinState();}
 function renderAnswerOptions(roundQuestion){var wrap=document.getElementById("answerOptions");wrap.innerHTML="";availableAnswers=[];guessSubmitted=false;setGuess("",false);lieSubmitted=false;setLieState("",false);if(!roundQuestion||!Array.isArray(roundQuestion.answers)){updateGuessSubmitState();updateLieSubmitState();return;}roundQuestion.answers.forEach(function(item){if(!item||!item.text){return;}availableAnswers.push(item.text);var btn=document.createElement("button");btn.type="button";btn.dataset.answer=item.text;btn.textContent=item.text;btn.onclick=function(){if(guessSubmitted){return;}setGuess(item.text,false);persistGuessState(item.text,false);};wrap.appendChild(btn);});var saved=loadGuessState();if(saved&&availableAnswers.indexOf(saved.selected_text)!==-1){setGuess(saved.selected_text,!!saved.submitted);}updateGuessSubmitState();}
-async function api(path,method,payload){var o={method:method||"GET",headers:{"Accept":"application/json"}};if(payload!==null){o.headers["Content-Type"]="application/json";o.body=JSON.stringify(payload);}var r=await fetch(path,o);var d=await r.json().catch(function(){return {};});var isSessionDetailRead=(method||"GET")==="GET"&&/^\/lobby\/sessions\/[A-Z0-9]+$/.test(path);if(isSessionDetailRead){markPlayerSessionRefresh(r.status);}document.getElementById("out").textContent=JSON.stringify({status:r.status,data:d},null,2);if(d.player&&d.player.id){document.getElementById("playerId").value=d.player.id;}if(d.player&&d.player.session_token){document.getElementById("sessionToken").value=d.player.session_token;}if(d.round_question&&d.round_question.id){document.getElementById("roundQuestionId").value=d.round_question.id;}if(d.session&&d.session.status){currentSessionStatus=d.session.status;}if(d.round_question){renderAnswerOptions(d.round_question);var savedLie=loadLieState();if(savedLie){setLieState(savedLie.text||"",!!savedLie.submitted);}}else{document.getElementById("roundQuestionId").value="";renderAnswerOptions(null);}if(d.guess&&d.guess.round_question_id){document.getElementById("roundQuestionId").value=d.guess.round_question_id;setGuess(d.guess.selected_text||"",true);persistGuessState(d.guess.selected_text||"",true);}updateRoundContextHint();updatePlayerErrorHint(r.status,d);updatePhaseStatus();updateLieSubmitState();updateGuessSubmitState();if(currentSessionStatus==="finished"&&playerAutoRefreshEnabled){stopPlayerAutoRefresh("Auto-refresh stoppet: spillet er afsluttet.");}else{updatePlayerAutoRefreshUi();}savePlayerContext();return d;}
+async function api(path,method,payload){var o={method:method||"GET",headers:{"Accept":"application/json"}};if(payload!==null){o.headers["Content-Type"]="application/json";o.body=JSON.stringify(payload);}try{var r=await fetch(path,o);var d=await r.json().catch(function(){return {};});var isSessionDetailRead=(method||"GET")==="GET"&&/^\/lobby\/sessions\/[A-Z0-9]+$/.test(path);if(isSessionDetailRead){markPlayerSessionRefresh(r.status);}document.getElementById("out").textContent=JSON.stringify({status:r.status,data:d},null,2);if(d.player&&d.player.id){document.getElementById("playerId").value=d.player.id;}if(d.player&&d.player.session_token){document.getElementById("sessionToken").value=d.player.session_token;}if(d.round_question&&d.round_question.id){document.getElementById("roundQuestionId").value=d.round_question.id;}if(d.session&&d.session.status){currentSessionStatus=d.session.status;}if(d.round_question){renderAnswerOptions(d.round_question);var savedLie=loadLieState();if(savedLie){setLieState(savedLie.text||"",!!savedLie.submitted);}}else{document.getElementById("roundQuestionId").value="";renderAnswerOptions(null);}if(d.guess&&d.guess.round_question_id){document.getElementById("roundQuestionId").value=d.guess.round_question_id;setGuess(d.guess.selected_text||"",true);persistGuessState(d.guess.selected_text||"",true);}hydratePlayerCriticalView(d);updateRoundContextHint();updatePlayerErrorHint(r.status,d);updatePhaseStatus();updateLieSubmitState();updateGuessSubmitState();if(currentSessionStatus==="finished"&&playerAutoRefreshEnabled){stopPlayerAutoRefresh("Auto-refresh stoppet: spillet er afsluttet.");}else{updatePlayerAutoRefreshUi();}if(playerShellFatalError){clearPlayerShellFatalError();}savePlayerContext();return d;}catch(err){setConnectionLost(true);if((method||"GET")==="GET"&&/^\/lobby\/sessions\/[A-Z0-9]+$/.test(path)){markPlayerSessionRefresh(0);}document.getElementById("out").textContent=JSON.stringify({status:0,data:{error:"connection_lost",detail:"Kunne ikke kontakte serveren."}},null,2);document.getElementById("playerErrorHint").textContent="Fejl: Mistede forbindelsen til serveren. Prøv igen.";updateSessionDetailState();throw err;}}
 function joinSession(){if(joinInFlight){return Promise.resolve({error:"join_in_flight"});}if(!canAttemptJoin()){updateJoinState();return Promise.resolve({error:"missing_join_input"});}if(pid()&&document.getElementById("sessionToken").value.trim()){updateJoinState();return Promise.resolve({error:"already_joined_client"});}joinInFlight=true;updateJoinState();updatePlayerAutoRefreshUi();return api("/lobby/sessions/join","POST",{code:code(),nickname:document.getElementById("nickname").value.trim()}).then(function(d){joinInFlight=false;if(d&&d.player&&d.player.id){updateJoinState();updatePlayerAutoRefreshUi();return d;}updateJoinState();updatePlayerAutoRefreshUi();document.getElementById("joinStatus").textContent="Join fejlede – prøv igen.";return d;}).catch(function(err){joinInFlight=false;updateJoinState();updatePlayerAutoRefreshUi();document.getElementById("joinStatus").textContent="Join fejlede – prøv igen.";throw err;});}
 function sessionDetail(){if(!code()){updateSessionDetailState();return Promise.resolve({error:"missing_session_code"});}if(sessionDetailInFlight){return Promise.resolve({error:"session_detail_in_flight"});}sessionDetailInFlight=true;updateSessionDetailState();return api("/lobby/sessions/"+code(),"GET",null).finally(function(){sessionDetailInFlight=false;updateSessionDetailState();});} 
+function retryConnection(){if(connectionRetryInFlight||!code()){updateConnectionBanner();return Promise.resolve({error:"retry_unavailable"});}connectionRetryInFlight=true;updateConnectionBanner();return sessionDetail().then(function(result){setConnectionLost(false);return result;}).finally(function(){connectionRetryInFlight=false;updateConnectionBanner();});}
 function submitLie(){if(lieSubmitted){return Promise.resolve({error:"lie_already_submitted_client"});}if(lieSubmitInFlight){return Promise.resolve({error:"lie_submit_in_flight"});}if(!hasSubmitContext()){updateLieSubmitState();return Promise.resolve({error:"missing_submit_context"});}var text=(document.getElementById("lieText").value||"").trim();if(!text){updateLieSubmitState();return Promise.resolve({error:"empty_lie_text"});}lieSubmitInFlight=true;updateLieSubmitState();return api("/lobby/sessions/"+code()+"/questions/"+rq()+"/lies/submit","POST",{player_id:parseInt(pid(),10),session_token:document.getElementById("sessionToken").value,text:text}).then(function(d){if(d&&d.lie&&d.lie.id){lieSubmitted=true;persistLieState(text,true);}return d;}).finally(function(){lieSubmitInFlight=false;updateLieSubmitState();});}
 document.getElementById("lieText").addEventListener("input",function(){if(!lieSubmitted){updateLieSubmitState();persistLieState(document.getElementById("lieText").value,false);}});updateLieSubmitState();
 function submitGuess(){if(guessSubmitted){return Promise.resolve({error:"guess_already_submitted_client"});}if(guessSubmitInFlight){return Promise.resolve({error:"guess_submit_in_flight"});}if(!hasSubmitContext()){updateGuessSubmitState();document.getElementById("out").textContent=JSON.stringify({status:400,data:{error:"Join først for at aktivere gæt"}},null,2);return Promise.resolve({error:"missing_submit_context"});}var selected=document.getElementById("guessText").value;if(availableAnswers.indexOf(selected)===-1){document.getElementById("out").textContent=JSON.stringify({status:400,data:{error:"Vælg et af de viste svarmuligheder"}},null,2);return Promise.resolve({error:"invalid_client_guess"});}guessSubmitInFlight=true;updateGuessSubmitState();return api("/lobby/sessions/"+code()+"/questions/"+rq()+"/guesses/submit","POST",{player_id:parseInt(pid(),10),session_token:document.getElementById("sessionToken").value,selected_text:selected}).finally(function(){guessSubmitInFlight=false;updateGuessSubmitState();});}
 ["code","nickname","playerId","sessionToken","roundQuestionId"].forEach(function(fieldId){var field=document.getElementById(fieldId);if(!field){return;}field.addEventListener("input",function(){if(fieldId!=="roundQuestionId"){resetRoundContextForManualChange();}updateLieSubmitState();updateGuessSubmitState();updateJoinState();updateSessionDetailState();savePlayerContext();});field.addEventListener("change",function(){if(fieldId!=="roundQuestionId"){resetRoundContextForManualChange();}updateLieSubmitState();updateGuessSubmitState();updateJoinState();updateSessionDetailState();savePlayerContext();});});
+window.addEventListener("error",function(event){setPlayerShellFatalError((event&&event.message)||"Ukendt runtime-fejl");});
+window.addEventListener("unhandledrejection",function(event){var reason=event&&event.reason;var detail=(reason&&reason.message)||String(reason||"Unhandled promise rejection");setPlayerShellFatalError(detail);});
+setPlayerCriticalLoading(true);
 updatePhaseStatus();
 updateGuessSubmitState();
 updateJoinState();
 updatePlayerAutoRefreshUi();
 updatePlayerLastRefreshStatus();
 updateRoundContextHint();
-if(restorePlayerContext()){if(playerAutoRefreshEnabled){startPlayerAutoRefresh();}sessionDetail();}else{savePlayerContext();}
+updateConnectionBanner();
+updatePlayerShellErrorBoundary();
+if(restorePlayerContext()){if(playerAutoRefreshEnabled){startPlayerAutoRefresh();}sessionDetail().catch(function(){});}else{savePlayerContext();setTimeout(function(){if(!playerCriticalHydrated){hydratePlayerCriticalView({session:{status:currentSessionStatus}});}},350);}
 </script>
 </body></html>

lobby/templates/lobby/spa_shell.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="da">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>WPP SPA Shell</title>
+  <link rel="stylesheet" href="{{ spa_asset_base }}/styles.css?v={{ spa_asset_version|urlencode }}">
+</head>
+<body data-wpp-shell-route="{{ shell_route }}" data-wpp-shell-kind="{{ shell_kind }}">
+  <app-root data-wpp-shell-route="{{ shell_route }}" data-wpp-shell-kind="{{ shell_kind }}">Indlæser Angular app-shell…</app-root>
+  <script type="module" src="{{ spa_asset_base }}/main.js?v={{ spa_asset_version|urlencode }}"></script>
+</body>
+</html>

lobby/tests.py

@@ -1,7 +1,12 @@
+import json
+import tempfile
 from datetime import timedelta
+from pathlib import Path
+from unittest.mock import patch
 
 from django.contrib.auth import get_user_model
-from django.test import TestCase
+from django.core.management import call_command
+from django.test import TestCase, override_settings
 from django.urls import reverse
 from django.utils import timezone
 
@@ -15,6 +20,7 @@ from fupogfakta.models import (
     RoundConfig,
     RoundQuestion,
 )
+from lobby.i18n import i18n_locale_config, lobby_i18n_catalog, resolve_error_message
 
 User = get_user_model()
 
@@ -59,6 +65,28 @@ class LobbyFlowTests(TestCase):
         self.assertTrue(body["player"]["session_token"])
         self.assertTrue(Player.objects.filter(session=session, nickname="Luna").exists())
 
+    def test_player_can_join_with_trimmed_code(self):
+        session = GameSession.objects.create(host=self.host, code="ABCD23")
+
+        response = self.client.post(
+            reverse("lobby:join_session"),
+            data={"code": "  abcd23  ", "nickname": "Luna"},
+            content_type="application/json",
+        )
+
+        self.assertEqual(response.status_code, 201)
+        self.assertTrue(Player.objects.filter(session=session, nickname="Luna").exists())
+
+    def test_join_rejects_code_empty_after_trim(self):
+        response = self.client.post(
+            reverse("lobby:join_session"),
+            data={"code": "   ", "nickname": "Luna"},
+            content_type="application/json",
+        )
+
+        self.assertEqual(response.status_code, 400)
+        self.assertEqual(response.json()["error"], "Session code is required")
+
     def test_join_rejects_duplicate_nickname_case_insensitive(self):
         session = GameSession.objects.create(host=self.host, code="QWER12")
         Player.objects.create(session=session, nickname="Luna")
@@ -84,6 +112,32 @@ class LobbyFlowTests(TestCase):
         self.assertEqual(response.status_code, 400)
         self.assertEqual(response.json()["error"], "Session is not joinable")
 
+    def test_join_error_localizes_to_danish_with_accept_language_header(self):
+        response = self.client.post(
+            reverse("lobby:join_session"),
+            data={"code": "   ", "nickname": "Luna"},
+            content_type="application/json",
+            HTTP_ACCEPT_LANGUAGE="da",
+        )
+
+        self.assertEqual(response.status_code, 400)
+        self.assertEqual(response.json()["error_code"], "session_code_required")
+        self.assertEqual(response.json()["locale"], "da")
+        self.assertEqual(response.json()["error"], "Sessionskode er påkrævet")
+
+    def test_join_error_falls_back_to_english_for_unsupported_locale(self):
+        response = self.client.post(
+            reverse("lobby:join_session"),
+            data={"code": "   ", "nickname": "Luna"},
+            content_type="application/json",
+            HTTP_ACCEPT_LANGUAGE="fr",
+        )
+
+        self.assertEqual(response.status_code, 400)
+        self.assertEqual(response.json()["error_code"], "session_code_required")
+        self.assertEqual(response.json()["locale"], "en")
+        self.assertEqual(response.json()["error"], "Session code is required")
+
     def test_session_detail_returns_players(self):
         session = GameSession.objects.create(host=self.host, code="LMNO45")
         Player.objects.create(session=session, nickname="Mia", score=7)
@@ -130,6 +184,21 @@ class StartRoundTests(TestCase):
         round_config = RoundConfig.objects.get(session=self.session, number=1)
         self.assertEqual(round_config.category, self.category)
 
+    def test_host_start_round_uses_normalized_session_code_from_path(self):
+        self.client.login(username="host", password="secret123")
+
+        response = self.client.post(
+            reverse("lobby:start_round", kwargs={"code": "  abcd23  "}),
+            data={"category_slug": self.category.slug},
+            content_type="application/json",
+        )
+
+        self.assertEqual(response.status_code, 201)
+        self.session.refresh_from_db()
+        self.assertEqual(self.session.status, GameSession.Status.LIE)
+        round_config = RoundConfig.objects.get(session=self.session, number=1)
+        self.assertEqual(round_config.category, self.category)
+
     def test_start_round_requires_host(self):
         self.client.login(username="other", password="secret123")
 
@@ -825,6 +894,27 @@ class UiScreenTests(TestCase):
         self.assertContains(response, "Round question-id er låst mens session-opdatering kører.")
         self.assertContains(response, "Kategori er låst mens session-opdatering kører.")
         self.assertContains(response, "categorySelect.disabled=hostActionInFlight||sessionDetailInFlight||!hasCode||phase!==")
+        self.assertContains(response, "hostShellRouteFromPath")
+        self.assertContains(response, "syncHostShellRoute")
+        self.assertContains(response, "Deep-link route guard: omdirigeret")
+        self.assertContains(response, "id=\"hostShellErrorBoundary\"")
+        self.assertContains(response, "recoverHostShell('retry')")
+        self.assertContains(response, "recoverHostShell('reload')")
+        self.assertContains(response, "setHostShellFatalError")
+        self.assertContains(response, "clearHostShellFatalError")
+        self.assertContains(response, "updateHostShellErrorBoundary")
+        self.assertContains(response, "host_shell_runtime_error")
+        self.assertContains(response, "window.addEventListener(\"unhandledrejection\"")
+
+    def test_host_screen_deeplink_requires_login(self):
+        response = self.client.get(reverse("lobby:host_screen_deeplink", kwargs={"spa_path": "guess"}))
+        self.assertEqual(response.status_code, 302)
+
+    def test_host_screen_deeplink_renders_for_logged_in_user(self):
+        self.client.login(username="host_ui", password="secret123")
+        response = self.client.get(reverse("lobby:host_screen_deeplink", kwargs={"spa_path": "guess"}))
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "Host panel")
 
     def test_player_screen_is_public(self):
         response = self.client.get(reverse("lobby:player_screen"))
@@ -857,6 +947,11 @@ class UiScreenTests(TestCase):
         self.assertContains(response, "Udfyld kode og nickname for at join.")
         self.assertContains(response, "Afvent aktiv session-opdatering før join.")
         self.assertContains(response, "btn.disabled=joinInFlight||sessionDetailInFlight||joined||!canJoin")
+        self.assertContains(response, "id=\"connectionBanner\"")
+        self.assertContains(response, "id=\"connectionRetryBtn\"")
+        self.assertContains(response, "retryConnection")
+        self.assertContains(response, "setConnectionLost")
+        self.assertContains(response, "connection_lost")
         self.assertContains(response, "id=\"contextLockHint\"")
         self.assertContains(response, "updateContextLockState")
         self.assertContains(response, "Spillerkontekst er låst efter join.")
@@ -897,6 +992,83 @@ class UiScreenTests(TestCase):
         self.assertContains(response, "Session-data ikke opdateret endnu.")
         self.assertContains(response, "Sidst opdateret:")
         self.assertContains(response, "Session-data kan være forældet")
+        self.assertContains(response, "id=\"playerShellErrorBoundary\"")
+        self.assertContains(response, "recoverPlayerShell('retry')")
+        self.assertContains(response, "recoverPlayerShell('reload')")
+        self.assertContains(response, "setPlayerShellFatalError")
+        self.assertContains(response, "clearPlayerShellFatalError")
+        self.assertContains(response, "updatePlayerShellErrorBoundary")
+        self.assertContains(response, "player_shell_runtime_error")
+        self.assertContains(response, "window.addEventListener(\"error\"")
+
+    @override_settings(USE_SPA_UI=False)
+    def test_legacy_templates_are_used_when_spa_flag_is_off(self):
+        self.client.login(username="host_ui", password="secret123")
+
+        host_response = self.client.get(reverse("lobby:host_screen"))
+        player_response = self.client.get(reverse("lobby:player_screen"))
+
+        self.assertContains(host_response, "Host panel")
+        self.assertContains(player_response, "Player panel")
+        self.assertNotContains(host_response, "<app-root")
+        self.assertNotContains(player_response, "<app-root")
+
+    @override_settings(USE_SPA_UI=True)
+    def test_host_screen_can_render_angular_shell_when_feature_flag_enabled(self):
+        self.client.login(username="host_ui", password="secret123")
+
+        response = self.client.get(reverse("lobby:host_screen"))
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "<app-root")
+        self.assertContains(response, "data-wpp-shell-route=\"/host\"")
+        self.assertContains(response, "data-wpp-shell-kind=\"host\"")
+        self.assertContains(response, "/static/frontend/angular/browser/main.js?v=dev")
+        self.assertContains(response, "/static/frontend/angular/browser/styles.css?v=dev")
+
+    @override_settings(USE_SPA_UI=True)
+    def test_host_screen_deeplink_preserves_spa_path_when_feature_flag_enabled(self):
+        self.client.login(username="host_ui", password="secret123")
+
+        response = self.client.get(
+            reverse("lobby:host_screen_deeplink", kwargs={"spa_path": "guess/round-1"})
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "<app-root")
+        self.assertContains(response, "data-wpp-shell-route=\"/host/guess/round-1\"")
+        self.assertContains(response, "data-wpp-shell-kind=\"host\"")
+
+    @override_settings(USE_SPA_UI=True)
+    def test_host_screen_deeplink_normalizes_redundant_slashes_when_feature_flag_enabled(self):
+        self.client.login(username="host_ui", password="secret123")
+
+        response = self.client.get("/lobby/ui/host//guess///round-1//")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "<app-root")
+        self.assertContains(response, "data-wpp-shell-route=\"/host/guess/round-1\"")
+        self.assertContains(response, "data-wpp-shell-kind=\"host\"")
+
+    @override_settings(USE_SPA_UI=True)
+    def test_player_screen_can_render_angular_shell_when_feature_flag_enabled(self):
+        response = self.client.get(reverse("lobby:player_screen"))
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "<app-root")
+        self.assertContains(response, "data-wpp-shell-route=\"/player\"")
+        self.assertContains(response, "data-wpp-shell-kind=\"player\"")
+        self.assertContains(response, "/static/frontend/angular/browser/main.js?v=dev")
+
+    @override_settings(USE_SPA_UI=True, WPP_SPA_ASSET_VERSION="release-2026-03-01")
+    def test_spa_shell_uses_configured_asset_version_for_cache_busting(self):
+        self.client.login(username="host_ui", password="secret123")
+
+        response = self.client.get(reverse("lobby:host_screen"))
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "/static/frontend/angular/browser/styles.css?v=release-2026-03-01")
+        self.assertContains(response, "/static/frontend/angular/browser/main.js?v=release-2026-03-01")
 
 
 class SessionDetailRoundQuestionTests(TestCase):
@@ -925,3 +1097,165 @@ class SessionDetailRoundQuestionTests(TestCase):
         payload = response.json()
         self.assertEqual(payload["round_question"]["id"], round_question.id)
         self.assertEqual(payload["round_question"]["prompt"], self.question.prompt)
+
+
+
+
+class SessionDetailPhaseViewModelTests(TestCase):
+    def setUp(self):
+        self.host = User.objects.create_user(username="host_phase", password="secret123")
+        self.session = GameSession.objects.create(host=self.host, code="PHASE1", status=GameSession.Status.LOBBY)
+
+    def test_session_detail_includes_shared_phase_view_model_contract(self):
+        Player.objects.create(session=self.session, nickname="P1")
+        Player.objects.create(session=self.session, nickname="P2")
+        Player.objects.create(session=self.session, nickname="P3")
+
+        response = self.client.get(reverse("lobby:session_detail", kwargs={"code": self.session.code}))
+
+        self.assertEqual(response.status_code, 200)
+        phase = response.json()["phase_view_model"]
+        self.assertEqual(phase["status"], GameSession.Status.LOBBY)
+        self.assertEqual(phase["round_number"], 1)
+        self.assertEqual(phase["players_count"], 3)
+        self.assertEqual(phase["constraints"]["min_players_to_start"], 3)
+        self.assertEqual(phase["constraints"]["max_players_mvp"], 5)
+        self.assertTrue(phase["constraints"]["min_players_reached"])
+        self.assertTrue(phase["constraints"]["max_players_allowed"])
+        self.assertTrue(phase["host"]["can_start_round"])
+        self.assertFalse(phase["host"]["can_show_question"])
+        self.assertTrue(phase["player"]["can_join"])
+        self.assertFalse(phase["player"]["can_submit_lie"])
+        self.assertFalse(phase["player"]["can_submit_guess"])
+
+    def test_phase_view_model_flags_change_with_round_phase(self):
+        category = Category.objects.create(name="Kultur", slug="kultur", is_active=True)
+        question = Question.objects.create(
+            category=category,
+            prompt="Hvilket land kommer sushi fra?",
+            correct_answer="Japan",
+            is_active=True,
+        )
+        round_question = RoundQuestion.objects.create(
+            session=self.session,
+            round_number=1,
+            question=question,
+            correct_answer="Japan",
+        )
+
+        self.session.status = GameSession.Status.LIE
+        self.session.save(update_fields=["status"])
+        lie_payload = self.client.get(reverse("lobby:session_detail", kwargs={"code": self.session.code})).json()
+        lie_phase = lie_payload["phase_view_model"]
+        self.assertFalse(lie_phase["host"]["can_show_question"])
+        self.assertTrue(lie_phase["host"]["can_mix_answers"])
+        self.assertTrue(lie_phase["player"]["can_submit_lie"])
+        self.assertFalse(lie_phase["player"]["can_submit_guess"])
+
+        self.session.status = GameSession.Status.GUESS
+        self.session.save(update_fields=["status"])
+        guess_payload = self.client.get(reverse("lobby:session_detail", kwargs={"code": self.session.code})).json()
+        guess_phase = guess_payload["phase_view_model"]
+        self.assertTrue(guess_phase["host"]["can_mix_answers"])
+        self.assertTrue(guess_phase["host"]["can_calculate_scores"])
+        self.assertFalse(guess_phase["player"]["can_submit_lie"])
+        self.assertTrue(guess_phase["player"]["can_submit_guess"])
+
+        round_question.delete()
+        self.session.status = GameSession.Status.REVEAL
+        self.session.save(update_fields=["status"])
+        reveal_payload = self.client.get(reverse("lobby:session_detail", kwargs={"code": self.session.code})).json()
+        reveal_phase = reveal_payload["phase_view_model"]
+        self.assertTrue(reveal_phase["host"]["can_reveal_scoreboard"])
+        self.assertTrue(reveal_phase["host"]["can_start_next_round"])
+        self.assertTrue(reveal_phase["host"]["can_finish_game"])
+        self.assertFalse(reveal_phase["player"]["can_view_final_result"])
+
+        self.session.status = GameSession.Status.FINISHED
+        self.session.save(update_fields=["status"])
+        finished_payload = self.client.get(reverse("lobby:session_detail", kwargs={"code": self.session.code})).json()
+        finished_phase = finished_payload["phase_view_model"]
+        self.assertFalse(finished_phase["player"]["can_join"])
+        self.assertTrue(finished_phase["player"]["can_view_final_result"])
+
+class SmokeStagingCommandTests(TestCase):
+    def test_smoke_staging_command_runs_full_flow(self):
+        call_command("smoke_staging")
+
+        session = GameSession.objects.latest("created_at")
+        self.assertEqual(session.status, GameSession.Status.FINISHED)
+        self.assertEqual(Player.objects.filter(session=session).count(), 3)
+
+    def test_smoke_staging_writes_artifact_when_requested(self):
+        with tempfile.TemporaryDirectory() as tmp_dir:
+            artifact_path = Path(tmp_dir) / "smoke.json"
+            call_command("smoke_staging", artifact=str(artifact_path))
+
+            self.assertTrue(artifact_path.exists())
+            payload = json.loads(artifact_path.read_text(encoding="utf-8"))
+            self.assertTrue(payload["ok"])
+            self.assertEqual(payload["command"], "smoke_staging")
+            self.assertEqual(payload["players"], ["P1", "P2", "P3"])
+            self.assertIn("generated_at", payload)
+            self.assertIn("session_code", payload)
+            self.assertEqual(
+                payload["steps"],
+                [
+                    "create_session",
+                    "join_players",
+                    "start_round",
+                    "show_question",
+                    "submit_lies",
+                    "mix_answers",
+                    "submit_guesses",
+                    "calculate_scores",
+                    "reveal_scoreboard",
+                    "finish_game",
+                ],
+            )
+
+
+class I18nResolverTests(TestCase):
+    def test_missing_backend_key_returns_key_deterministically(self):
+        self.assertEqual(resolve_error_message(key="missing_key", locale="da"), "missing_key")
+
+    def test_missing_backend_key_is_logged_with_context(self):
+        with self.assertLogs("lobby.i18n", level="WARNING") as logs:
+            result = resolve_error_message(key="missing_key", locale="da")
+
+        self.assertEqual(result, "missing_key")
+        self.assertTrue(any("i18n key missing in shared catalog" in entry for entry in logs.output))
+
+    def test_missing_locale_translation_falls_back_to_default_locale(self):
+        with patch(
+            "lobby.i18n.lobby_i18n_error_messages",
+            return_value={"session_code_required": {"en": "Session code is required"}},
+        ):
+            self.assertEqual(
+                resolve_error_message(key="session_code_required", locale="da"),
+                "Session code is required",
+            )
+
+    def test_shared_catalog_uses_en_default_and_da_en_matrix(self):
+        default_locale, supported_locales = i18n_locale_config()
+        catalog = lobby_i18n_catalog()
+
+        self.assertEqual(default_locale, "en")
+        self.assertIn("en", supported_locales)
+        self.assertIn("da", supported_locales)
+
+        for key, translations in catalog["backend"]["errors"].items():
+            self.assertTrue(translations.get("en"), f"backend key {key} missing en")
+            self.assertTrue(translations.get("da"), f"backend key {key} missing da")
+
+        for key, translations in catalog["frontend"]["errors"].items():
+            self.assertTrue(translations.get("en"), f"frontend key {key} missing en")
+            self.assertTrue(translations.get("da"), f"frontend key {key} missing da")
+
+    def test_backend_error_codes_map_to_same_named_translation_keys(self):
+        catalog = lobby_i18n_catalog()
+        backend_errors = catalog["backend"]["errors"]
+
+        for code, key in catalog["backend"]["error_codes"].items():
+            self.assertEqual(code, key)
+            self.assertIn(key, backend_errors)

lobby/ui_views.py

@@ -1,14 +1,50 @@
+from django.conf import settings
 from django.contrib.auth.decorators import login_required
 from django.shortcuts import render
 
 from fupogfakta.models import Category
 
+from .feature_flags import use_spa_ui
+from .i18n import lobby_i18n_catalog
+
+
+def _render_spa_shell(request, shell_route: str, shell_kind: str):
+    return render(
+        request,
+        "lobby/spa_shell.html",
+        {
+            "shell_route": shell_route,
+            "shell_kind": shell_kind,
+            "spa_asset_base": settings.WPP_SPA_ASSET_BASE,
+            "spa_asset_version": getattr(settings, "WPP_SPA_ASSET_VERSION", "dev"),
+            "lobby_i18n": lobby_i18n_catalog(),
+        },
+    )
+
 
 @login_required
-def host_screen(request):
+def host_screen(request, spa_path=None):
+    if use_spa_ui():
+        host_route = "/host"
+        if spa_path:
+            normalized_spa_path = "/".join(segment for segment in spa_path.split("/") if segment)
+            if normalized_spa_path:
+                host_route = f"/host/{normalized_spa_path}"
+        return _render_spa_shell(request, host_route, "host")
+
     categories = Category.objects.filter(is_active=True).order_by("name")
-    return render(request, "lobby/host_screen.html", {"categories": categories})
+    return render(
+        request,
+        "lobby/host_screen.html",
+        {
+            "categories": categories,
+            "lobby_i18n": lobby_i18n_catalog(),
+        },
+    )
 
 
 def player_screen(request):
-    return render(request, "lobby/player_screen.html")
+    if use_spa_ui():
+        return _render_spa_shell(request, "/player", "player")
+
+    return render(request, "lobby/player_screen.html", {"lobby_i18n": lobby_i18n_catalog()})

lobby/urls.py

@@ -6,6 +6,7 @@ app_name = "lobby"
 
 urlpatterns = [
     path("ui/host", ui_views.host_screen, name="host_screen"),
+    path("ui/host/<path:spa_path>", ui_views.host_screen, name="host_screen_deeplink"),
     path("ui/player", ui_views.player_screen, name="player_screen"),
     path("sessions/create", views.create_session, name="create_session"),
     path("sessions/join", views.join_session, name="join_session"),

lobby/views.py

@@ -20,6 +20,8 @@ from fupogfakta.models import (
     ScoreEvent,
 )
 
+from .i18n import api_error, lobby_i18n_errors
+
 SESSION_CODE_ALPHABET = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"
 SESSION_CODE_LENGTH = 6
 MAX_CODE_GENERATION_ATTEMPTS = 20
@@ -29,6 +31,7 @@ JOINABLE_STATUSES = {
     GameSession.Status.GUESS,
     GameSession.Status.REVEAL,
 }
+ERROR_CODES = lobby_i18n_errors()
 
 
 def _json_body(request: HttpRequest) -> dict:
@@ -45,6 +48,10 @@ def _generate_session_code() -> str:
     return "".join(random.choices(SESSION_CODE_ALPHABET, k=SESSION_CODE_LENGTH))
 
 
+def _normalize_session_code(code: str) -> str:
+    return code.strip().upper()
+
+
 def _create_unique_session_code() -> str:
     for _ in range(MAX_CODE_GENERATION_ATTEMPTS):
         code = _generate_session_code()
@@ -54,6 +61,45 @@ def _create_unique_session_code() -> str:
     raise RuntimeError("Could not generate unique session code")
 
 
+def _build_phase_view_model(session: GameSession, *, players_count: int, has_round_question: bool) -> dict:
+    status = session.status
+    in_lobby = status == GameSession.Status.LOBBY
+    in_lie = status == GameSession.Status.LIE
+    in_guess = status == GameSession.Status.GUESS
+    in_reveal = status == GameSession.Status.REVEAL
+    in_finished = status == GameSession.Status.FINISHED
+
+    min_players_reached = players_count >= 3
+    max_players_allowed = players_count <= 5
+
+    return {
+        "status": status,
+        "round_number": session.current_round,
+        "players_count": players_count,
+        "constraints": {
+            "min_players_to_start": 3,
+            "max_players_mvp": 5,
+            "min_players_reached": min_players_reached,
+            "max_players_allowed": max_players_allowed,
+        },
+        "host": {
+            "can_start_round": in_lobby and min_players_reached and max_players_allowed,
+            "can_show_question": in_lie and not has_round_question,
+            "can_mix_answers": in_lie or in_guess,
+            "can_calculate_scores": in_guess,
+            "can_reveal_scoreboard": in_reveal,
+            "can_start_next_round": in_reveal,
+            "can_finish_game": in_reveal,
+        },
+        "player": {
+            "can_join": status in JOINABLE_STATUSES,
+            "can_submit_lie": in_lie and has_round_question,
+            "can_submit_guess": in_guess and has_round_question,
+            "can_view_final_result": in_finished,
+        },
+    }
+
+
 @require_POST
 @login_required
 def create_session(request: HttpRequest) -> JsonResponse:
@@ -77,25 +123,45 @@ def create_session(request: HttpRequest) -> JsonResponse:
 def join_session(request: HttpRequest) -> JsonResponse:
     payload = _json_body(request)
 
-    code = str(payload.get("code", "")).strip().upper()
+    code = _normalize_session_code(str(payload.get("code", "")))
     nickname = str(payload.get("nickname", "")).strip()
 
     if not code:
-        return JsonResponse({"error": "Session code is required"}, status=400)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("session_code_required", "session_code_required"),
+            status=400,
+        )
 
     if len(nickname) < 2 or len(nickname) > 40:
-        return JsonResponse({"error": "Nickname must be between 2 and 40 characters"}, status=400)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("nickname_invalid", "nickname_invalid"),
+            status=400,
+        )
 
     try:
         session = GameSession.objects.get(code=code)
     except GameSession.DoesNotExist:
-        return JsonResponse({"error": "Session not found"}, status=404)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("session_not_found", "session_not_found"),
+            status=404,
+        )
 
     if session.status not in JOINABLE_STATUSES:
-        return JsonResponse({"error": "Session is not joinable"}, status=400)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("session_not_joinable", "session_not_joinable"),
+            status=400,
+        )
 
     if Player.objects.filter(session=session, nickname__iexact=nickname).exists():
-        return JsonResponse({"error": "Nickname already taken"}, status=409)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("nickname_taken", "nickname_taken"),
+            status=409,
+        )
 
     player = Player.objects.create(session=session, nickname=nickname)
 
@@ -118,12 +184,16 @@ def join_session(request: HttpRequest) -> JsonResponse:
 
 @require_GET
 def session_detail(request: HttpRequest, code: str) -> JsonResponse:
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     try:
         session = GameSession.objects.get(code=session_code)
     except GameSession.DoesNotExist:
-        return JsonResponse({"error": "Session not found"}, status=404)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("session_not_found", "session_not_found"),
+            status=404,
+        )
 
     players = list(
         session.players.order_by("nickname").values(
@@ -151,6 +221,12 @@ def session_detail(request: HttpRequest, code: str) -> JsonResponse:
             "answers": [{"text": text} for text in (current_round_question.mixed_answers or [])],
         }
 
+    phase_view_model = _build_phase_view_model(
+        session,
+        players_count=len(players),
+        has_round_question=bool(current_round_question),
+    )
+
     return JsonResponse(
         {
             "session": {
@@ -162,6 +238,7 @@ def session_detail(request: HttpRequest, code: str) -> JsonResponse:
             },
             "players": players,
             "round_question": round_question_payload,
+            "phase_view_model": phase_view_model,
         }
     )
 
@@ -173,25 +250,41 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
     category_slug = str(payload.get("category_slug", "")).strip()
 
     if not category_slug:
-        return JsonResponse({"error": "category_slug is required"}, status=400)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("category_slug_required", "category_slug_required"),
+            status=400,
+        )
 
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     try:
         session = GameSession.objects.get(code=session_code)
     except GameSession.DoesNotExist:
-        return JsonResponse({"error": "Session not found"}, status=404)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("session_not_found", "session_not_found"),
+            status=404,
+        )
 
     if session.host_id != request.user.id:
         return JsonResponse({"error": "Only host can start round"}, status=403)
 
     if session.status != GameSession.Status.LOBBY:
-        return JsonResponse({"error": "Round can only be started from lobby"}, status=400)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
+            status=400,
+        )
 
     try:
         category = Category.objects.get(slug=category_slug, is_active=True)
     except Category.DoesNotExist:
-        return JsonResponse({"error": "Category not found"}, status=404)
+        return api_error(
+            request,
+            key=ERROR_CODES.get("category_not_found", "category_not_found"),
+            status=404,
+        )
 
     if not Question.objects.filter(category=category, is_active=True).exists():
         return JsonResponse({"error": "Category has no active questions"}, status=400)
@@ -199,7 +292,11 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
     with transaction.atomic():
         session = GameSession.objects.select_for_update().get(pk=session.pk)
         if session.status != GameSession.Status.LOBBY:
-            return JsonResponse({"error": "Round can only be started from lobby"}, status=400)
+            return api_error(
+                request,
+                key=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
+                status=400,
+            )
 
         round_config, created = RoundConfig.objects.get_or_create(
             session=session,
@@ -207,7 +304,11 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
             defaults={"category": category},
         )
         if not created:
-            return JsonResponse({"error": "Round already configured"}, status=409)
+            return api_error(
+                request,
+                key=ERROR_CODES.get("round_already_configured", "round_already_configured"),
+                status=409,
+            )
 
         session.status = GameSession.Status.LIE
         session.save(update_fields=["status"])
@@ -234,7 +335,7 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
 @require_POST
 @login_required
 def show_question(request: HttpRequest, code: str) -> JsonResponse:
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     try:
         session = GameSession.objects.get(code=session_code)
@@ -294,7 +395,7 @@ def show_question(request: HttpRequest, code: str) -> JsonResponse:
 @require_POST
 def submit_lie(request: HttpRequest, code: str, round_question_id: int) -> JsonResponse:
     payload = _json_body(request)
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     player_id = payload.get("player_id")
     session_token = str(payload.get("session_token", "")).strip()
@@ -367,7 +468,7 @@ def submit_lie(request: HttpRequest, code: str, round_question_id: int) -> JsonR
 @require_POST
 @login_required
 def mix_answers(request: HttpRequest, code: str, round_question_id: int) -> JsonResponse:
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     try:
         session = GameSession.objects.get(code=session_code)
@@ -437,7 +538,7 @@ def mix_answers(request: HttpRequest, code: str, round_question_id: int) -> Json
 @require_POST
 def submit_guess(request: HttpRequest, code: str, round_question_id: int) -> JsonResponse:
     payload = _json_body(request)
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     player_id = payload.get("player_id")
     session_token = str(payload.get("session_token", "")).strip()
@@ -543,7 +644,7 @@ def submit_guess(request: HttpRequest, code: str, round_question_id: int) -> Jso
 @require_GET
 @login_required
 def reveal_scoreboard(request: HttpRequest, code: str) -> JsonResponse:
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     try:
         session = GameSession.objects.get(code=session_code)
@@ -577,7 +678,7 @@ def reveal_scoreboard(request: HttpRequest, code: str) -> JsonResponse:
 @require_POST
 @login_required
 def start_next_round(request: HttpRequest, code: str) -> JsonResponse:
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     try:
         session = GameSession.objects.get(code=session_code)
@@ -609,7 +710,7 @@ def start_next_round(request: HttpRequest, code: str) -> JsonResponse:
 @require_POST
 @login_required
 def finish_game(request: HttpRequest, code: str) -> JsonResponse:
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     try:
         session = GameSession.objects.get(code=session_code)
@@ -651,7 +752,7 @@ def finish_game(request: HttpRequest, code: str) -> JsonResponse:
 @require_POST
 @login_required
 def calculate_scores(request: HttpRequest, code: str, round_question_id: int) -> JsonResponse:
-    session_code = code.strip().upper()
+    session_code = _normalize_session_code(code)
 
     try:
         session = GameSession.objects.get(code=session_code)

partyhub/settings.py

@@ -30,6 +30,7 @@ INSTALLED_APPS = [
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.locale.LocaleMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
@@ -89,7 +90,12 @@ AUTH_PASSWORD_VALIDATORS = [
     {'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator'},
 ]
 
-LANGUAGE_CODE = 'da'
+LANGUAGE_CODE = 'en'
+LANGUAGES = [
+    ('en', 'English'),
+    ('da', 'Danish'),
+]
+LOCALE_PATHS = [BASE_DIR / 'locale']
 TIME_ZONE = 'Europe/Copenhagen'
 USE_I18N = True
 USE_TZ = True
@@ -99,6 +105,16 @@ STATIC_ROOT = BASE_DIR / 'staticfiles'
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
+USE_SPA_UI_RAW = env('USE_SPA_UI')
+if USE_SPA_UI_RAW is None:
+    # Backward-compatible fallback while cutover is rolling out.
+    USE_SPA_UI_RAW = env('WPP_SPA_ENABLED', 'false')
+USE_SPA_UI = USE_SPA_UI_RAW.lower() == 'true'
+WPP_SPA_ASSET_BASE = env('WPP_SPA_ASSET_BASE', '/static/frontend/angular/browser').rstrip('/')
+# Cache-busting token for SPA shell static asset URLs (querystring versioning).
+# Set to release id / commit SHA in deploy env for deterministic invalidation.
+WPP_SPA_ASSET_VERSION = env('WPP_SPA_ASSET_VERSION', 'dev')
+
 CHANNEL_REDIS_HOST = env('CHANNEL_REDIS_HOST', '127.0.0.1')
 CHANNEL_REDIS_PORT = int(env('CHANNEL_REDIS_PORT', '6379'))
 CHANNEL_LAYERS = {

shared/i18n/lobby.json

@@ -0,0 +1,317 @@
+{
+  "locales": {
+    "default": "en",
+    "supported": [
+      "en",
+      "da"
+    ]
+  },
+  "frontend": {
+    "errors": {
+      "session_code_required": {
+        "en": "Session code is required.",
+        "da": "Sessionskoden er påkrævet."
+      },
+      "session_fetch_failed": {
+        "en": "Could not load lobby status.",
+        "da": "Kunne ikke indlæse lobby-status."
+      },
+      "join_failed": {
+        "en": "Join failed. Check code or nickname and try again.",
+        "da": "Kunne ikke joine. Tjek kode eller kaldenavn og prøv igen."
+      },
+      "start_round_failed": {
+        "en": "Could not start round. Refresh the lobby and try again.",
+        "da": "Kunne ikke starte runden. Opdater lobbyen og prøv igen."
+      },
+      "session_not_found": {
+        "en": "Session code is invalid or the session no longer exists.",
+        "da": "Sessionskoden er ugyldig, eller sessionen findes ikke længere."
+      },
+      "nickname_invalid": {
+        "en": "Nickname must be between 2 and 40 characters.",
+        "da": "Kaldenavn skal være mellem 2 og 40 tegn."
+      },
+      "nickname_taken": {
+        "en": "Nickname is already taken.",
+        "da": "Kaldenavnet er allerede taget."
+      },
+      "unknown": {
+        "en": "Action failed. Refresh status and try again.",
+        "da": "Handlingen fejlede. Opdater status og prøv igen."
+      }
+    },
+    "ui": {
+      "common": {
+        "refresh": {
+          "en": "Refresh",
+          "da": "Opdatér"
+        },
+        "retry": {
+          "en": "Retry",
+          "da": "Prøv igen"
+        },
+        "back_to_join": {
+          "en": "Back to join",
+          "da": "Tilbage til join"
+        },
+        "session_code": {
+          "en": "Session code",
+          "da": "Sessionskode"
+        },
+        "status": {
+          "en": "Status",
+          "da": "Status"
+        },
+        "prompt": {
+          "en": "Prompt",
+          "da": "Spørgsmål"
+        },
+        "round_question_id": {
+          "en": "Round question id",
+          "da": "Rundespørgsmål-id"
+        },
+        "round": {
+          "en": "round",
+          "da": "runde"
+        }
+      },
+      "app": {
+        "title": {
+          "en": "WPP Angular Shell",
+          "da": "WPP Angular Shell"
+        },
+        "host_nav": {
+          "en": "Host",
+          "da": "Vært"
+        },
+        "player_nav": {
+          "en": "Player",
+          "da": "Spiller"
+        },
+        "language_label": {
+          "en": "Language",
+          "da": "Sprog"
+        }
+      },
+      "host": {
+        "title": {
+          "en": "Host gameplay flow",
+          "da": "Vært gameplay-flow"
+        },
+        "category": {
+          "en": "Category",
+          "da": "Kategori"
+        },
+        "start_round": {
+          "en": "Start round",
+          "da": "Start runde"
+        },
+        "show_question": {
+          "en": "Show question",
+          "da": "Vis spørgsmål"
+        },
+        "mix_answers": {
+          "en": "Mix answers → guess",
+          "da": "Bland svar → gæt"
+        },
+        "calculate_scores": {
+          "en": "Calculate scores → reveal",
+          "da": "Udregn score → afslør"
+        },
+        "load_scoreboard": {
+          "en": "Load scoreboard",
+          "da": "Hent scoreboard"
+        },
+        "start_next_round": {
+          "en": "Start next round",
+          "da": "Start næste runde"
+        },
+        "finish_game": {
+          "en": "Finish game",
+          "da": "Afslut spil"
+        },
+        "retry_scoreboard": {
+          "en": "Retry scoreboard",
+          "da": "Prøv scoreboard igen"
+        },
+        "retry_next_round": {
+          "en": "Retry next round",
+          "da": "Prøv næste runde igen"
+        },
+        "retry_finish": {
+          "en": "Retry finish game",
+          "da": "Prøv afslutning igen"
+        },
+        "session_refresh_failed": {
+          "en": "Session refresh failed",
+          "da": "Kunne ikke opdatere session"
+        },
+        "scoreboard_failed": {
+          "en": "Scoreboard failed",
+          "da": "Scoreboard fejlede"
+        },
+        "next_round_failed": {
+          "en": "Next round failed",
+          "da": "Næste runde fejlede"
+        },
+        "finish_game_failed": {
+          "en": "Finish game failed",
+          "da": "Afslutning fejlede"
+        },
+        "session_code_required": {
+          "en": "Session code is required",
+          "da": "Sessionskode er påkrævet"
+        },
+        "final_leaderboard": {
+          "en": "Final leaderboard",
+          "da": "Finale leaderboard"
+        },
+        "winner": {
+          "en": "Winner",
+          "da": "Vinder"
+        },
+        "audio_locale_hint": {
+          "en": "Host locale for audio references",
+          "da": "Værtens locale for lydreferencer"
+        }
+      },
+      "player": {
+        "title": {
+          "en": "Player gameplay flow",
+          "da": "Spiller gameplay-flow"
+        },
+        "nickname": {
+          "en": "Nickname",
+          "da": "Kaldenavn"
+        },
+        "join": {
+          "en": "Join",
+          "da": "Join"
+        },
+        "lie_label": {
+          "en": "Lie",
+          "da": "Løgn"
+        },
+        "submit_lie": {
+          "en": "Submit lie",
+          "da": "Send løgn"
+        },
+        "retry_lie_submit": {
+          "en": "Retry lie submit",
+          "da": "Prøv løgn igen"
+        },
+        "submit_guess": {
+          "en": "Submit guess",
+          "da": "Send gæt"
+        },
+        "retry_guess_submit": {
+          "en": "Retry guess submit",
+          "da": "Prøv gæt igen"
+        },
+        "final_leaderboard": {
+          "en": "Final leaderboard",
+          "da": "Finale leaderboard"
+        },
+        "reconnecting_text": {
+          "en": "Reconnecting… trying to refresh session state.",
+          "da": "Forbinder igen… prøver at opdatere session."
+        },
+        "offline_text": {
+          "en": "You are offline. Reconnect to continue gameplay.",
+          "da": "Du er offline. Forbind igen for at fortsætte."
+        },
+        "retry_now": {
+          "en": "Retry now",
+          "da": "Prøv nu"
+        },
+        "loading_refresh": {
+          "en": "Loading latest session state…",
+          "da": "Indlæser seneste session-status…"
+        },
+        "loading_join": {
+          "en": "Joining session… restoring your player state.",
+          "da": "Joiner session… gendanner spillerstatus."
+        },
+        "loading_submit_lie": {
+          "en": "Submitting lie… waiting for guess phase.",
+          "da": "Sender løgn… venter på gættefase."
+        },
+        "loading_submit_guess": {
+          "en": "Submitting guess… waiting for reveal.",
+          "da": "Sender gæt… venter på afsløring."
+        },
+        "session_refresh_failed": {
+          "en": "Session refresh failed",
+          "da": "Kunne ikke opdatere session"
+        },
+        "join_failed": {
+          "en": "Join failed",
+          "da": "Join fejlede"
+        },
+        "lie_submit_failed": {
+          "en": "Lie submit failed",
+          "da": "Løgn-fejl"
+        },
+        "guess_submit_failed": {
+          "en": "Guess submit failed",
+          "da": "Gætte-fejl"
+        }
+      }
+    },
+    "capabilities": {
+      "client_has_no_audio_output": true
+    }
+  },
+  "backend": {
+    "error_codes": {
+      "session_code_required": "session_code_required",
+      "nickname_invalid": "nickname_invalid",
+      "session_not_found": "session_not_found",
+      "session_not_joinable": "session_not_joinable",
+      "nickname_taken": "nickname_taken",
+      "category_slug_required": "category_slug_required",
+      "category_not_found": "category_not_found",
+      "round_start_invalid_phase": "round_start_invalid_phase",
+      "round_already_configured": "round_already_configured"
+    },
+    "errors": {
+      "session_code_required": {
+        "en": "Session code is required",
+        "da": "Sessionskode er påkrævet"
+      },
+      "nickname_invalid": {
+        "en": "Nickname must be between 2 and 40 characters",
+        "da": "Kaldenavn skal være mellem 2 og 40 tegn"
+      },
+      "session_not_found": {
+        "en": "Session not found",
+        "da": "Session blev ikke fundet"
+      },
+      "session_not_joinable": {
+        "en": "Session is not joinable",
+        "da": "Sessionen kan ikke joine nu"
+      },
+      "nickname_taken": {
+        "en": "Nickname already taken",
+        "da": "Kaldenavnet er allerede taget"
+      },
+      "category_slug_required": {
+        "en": "category_slug is required",
+        "da": "category_slug er påkrævet"
+      },
+      "category_not_found": {
+        "en": "Category not found",
+        "da": "Kategori blev ikke fundet"
+      },
+      "round_start_invalid_phase": {
+        "en": "Round can only be started from lobby",
+        "da": "Runden kan kun startes fra lobbyen"
+      },
+      "round_already_configured": {
+        "en": "Round already configured",
+        "da": "Runden er allerede konfigureret"
+      }
+    }
+  }
+}