fix(frontend): propagate locale changes reactively to mounted shells

.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/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-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/STAGING_GAMEPLAY_SMOKE_ARTIFACT.md

@@ -22,13 +22,20 @@ Formål: levere et lille, ensartet evidensformat for release-nær gameplay-smoke
 - Host authenticated in Django admin: <yes/no>
 - Active category/questions present: <yes/no>
 - Participants: host + <N> players
+- `USE_SPA_UI`: <on/off>
+- 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)
-1. Lobby -> join -> start
+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>
-2. One full round to scoreboard
+3. One full round to scoreboard
    - submit lie -> mix -> submit guess -> calculate score -> show scoreboard: <pass/fail>
-3. Next-round + game-end sanity
+4. Next-round + game-end sanity
    - next round transitions: <pass/fail>
    - final leaderboard visible: <pass/fail>
 

docs/UI_SMOKE.md

@@ -4,15 +4,20 @@
 - 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.
 
 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

@@ -15,4 +15,6 @@ Backward compatibility under cutover:
 ## 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/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

@@ -1,4 +1,5 @@
 .shell { font-family: Arial, sans-serif; margin: 1rem; }
-.shell__header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 0.75rem; }
+.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

@@ -1,13 +1,20 @@
 <main class="shell">
   <header class="shell__header">
-    <h1>WPP Angular Shell</h1>
+    <h1>{{ copy('app.title') }}</h1>
     <nav>
-      <a routerLink="/host">Host</a>
+      <a routerLink="/host">{{ copy('app.host_nav') }}</a>
-      <a routerLink="/player">Player</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">
+  <section class="shell__content" [attr.data-wpp-locale]="locale">
     <router-outlet></router-outlet>
   </section>
 </main>

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

@@ -1,20 +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],
+  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.routes.ts

@@ -1,28 +1,47 @@
 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' },

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

@@ -12,6 +12,60 @@ function jsonResponse(status: number, body: unknown) {
   } 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();
@@ -20,14 +74,13 @@ describe('HostShellComponent gameplay wiring', () => {
   it('runs startRound transition and refreshes session details', async () => {
     const fetchMock: FetchMock = vi
       .fn()
-      .mockResolvedValueOnce(jsonResponse(201, { ok: true }))
       .mockResolvedValueOnce(
-        jsonResponse(200, {
+        jsonResponse(201, {
-          session: { code: 'ABCD12', status: 'lie', current_round: 2 },
+          session: { code: 'ABCD12', status: 'lie', current_round: 1 },
-          round_question: { id: 41, prompt: 'Q?', answers: [] },
+          round: { number: 1, category: { slug: 'history', name: 'History' } },
-          players: [],
         })
-      );
+      )
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('lie')));
 
     vi.stubGlobal('fetch', fetchMock);
 
@@ -42,20 +95,14 @@ describe('HostShellComponent gameplay wiring', () => {
       '/lobby/sessions/ABCD12/rounds/start',
       expect.objectContaining({ method: 'POST', body: JSON.stringify({ category_slug: 'history' }) })
     );
-    expect(fetchMock).toHaveBeenNthCalledWith(
+    expect(fetchMock).toHaveBeenNthCalledWith(2, '/lobby/sessions/ABCD12', expect.objectContaining({ method: 'GET' }));
-      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(
+    const fetchMock: FetchMock = vi.fn().mockResolvedValue(jsonResponse(500, { error: 'Scoreboard unavailable' }));
-      jsonResponse(500, { error: 'Scoreboard unavailable' })
-    );
 
     vi.stubGlobal('fetch', fetchMock);
 
@@ -64,29 +111,44 @@ describe('HostShellComponent gameplay wiring', () => {
 
     await component.loadScoreboard();
 
-    expect(fetchMock).toHaveBeenCalledWith(
+    expect(fetchMock).toHaveBeenCalledWith('/lobby/sessions/ABCD12/scoreboard', expect.objectContaining({ method: 'GET' }));
-      '/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 sessionAfterAction = {
-      session: { code: 'ABCD12', status: 'guess', current_round: 1 },
-      round_question: { id: 77, prompt: 'Q?', answers: [] },
-      players: [],
-    };
-
     const fetchMock: FetchMock = vi
       .fn()
-      .mockResolvedValueOnce(jsonResponse(200, { ok: true }))
+      .mockResolvedValueOnce(
-      .mockResolvedValueOnce(jsonResponse(200, sessionAfterAction))
+        jsonResponse(200, {
-      .mockResolvedValueOnce(jsonResponse(200, { ok: true }))
+          round_question: {
-      .mockResolvedValueOnce(jsonResponse(200, sessionAfterAction))
+            id: 77,
-      .mockResolvedValueOnce(jsonResponse(200, { ok: true }))
+            round_number: 1,
-      .mockResolvedValueOnce(jsonResponse(200, sessionAfterAction));
+            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);
 
@@ -98,23 +160,107 @@ describe('HostShellComponent gameplay wiring', () => {
     await component.mixAnswers();
     await component.calculateScores();
 
-    expect(fetchMock).toHaveBeenNthCalledWith(
-      1,
-      '/lobby/sessions/ABCD12/questions/show',
-      expect.objectContaining({ method: 'POST', body: JSON.stringify({}) })
-    );
-    expect(fetchMock).toHaveBeenNthCalledWith(
-      3,
-      '/lobby/sessions/ABCD12/questions/77/answers/mix',
-      expect.objectContaining({ method: 'POST', body: JSON.stringify({}) })
-    );
-    expect(fetchMock).toHaveBeenNthCalledWith(
-      5,
-      '/lobby/sessions/ABCD12/questions/77/scores/calculate',
-      expect.objectContaining({ method: 'POST', body: JSON.stringify({}) })
-    );
-
     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

@@ -1,60 +1,133 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+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>Host SPA gameplay flow</h2>
+    <h2>{{ copy('host.title') }}</h2>
 
-    <div class="panel">
+    <div class="panel" [attr.data-client-has-no-audio-output]="clientHasNoAudioOutput">
-      <label>Session code <input [(ngModel)]="sessionCode" /></label>
+      <label>{{ copy('common.session_code') }} <input [(ngModel)]="sessionCode" /></label>
-      <label>Category <input [(ngModel)]="categorySlug" /></label>
+      <label>{{ copy('host.category') }} <input [(ngModel)]="categorySlug" /></label>
-      <button (click)="refreshSession()" [disabled]="loading">Refresh</button>
+      <button (click)="refreshSession()" [disabled]="loading">{{ copy('common.refresh') }}</button>
-      <button (click)="startRound()" [disabled]="loading">Start round</button>
+      <button (click)="startRound()" [disabled]="loading">{{ copy('host.start_round') }}</button>
-      <button (click)="showQuestion()" [disabled]="loading || !roundQuestionId">Show question</button>
+      <button (click)="showQuestion()" [disabled]="loading || !roundQuestionId">{{ copy('host.show_question') }}</button>
-      <button (click)="mixAnswers()" [disabled]="loading || !roundQuestionId">Mix answers → guess</button>
+      <button (click)="mixAnswers()" [disabled]="loading || !roundQuestionId">{{ copy('host.mix_answers') }}</button>
-      <button (click)="calculateScores()" [disabled]="loading || !roundQuestionId">Calculate scores → reveal</button>
+      <button (click)="calculateScores()" [disabled]="loading || !roundQuestionId">{{ copy('host.calculate_scores') }}</button>
-      <button (click)="loadScoreboard()" [disabled]="loading">Load scoreboard</button>
+      <button (click)="loadScoreboard()" [disabled]="loading">{{ copy('host.load_scoreboard') }}</button>
-      <button *ngIf="scoreboardError" (click)="loadScoreboard()" [disabled]="loading">Retry 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>Status:</strong> {{ session.session.status }} · round {{ session.session.current_round }}</p>
+      <p><strong>{{ copy('common.status') }}:</strong> {{ session.session.status }} · {{ copy('common.round') }} {{ session.session.current_round }}</p>
-      <p><strong>Round question id:</strong> {{ roundQuestionId || '-' }}</p>
+      <p><strong>{{ copy('common.round_question_id') }}:</strong> {{ roundQuestionId || '-' }}</p>
-      <p *ngIf="session.round_question"><strong>Prompt:</strong> {{ session.round_question.prompt }}</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 {
+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,
@@ -78,13 +151,23 @@ export class HostShellComponent {
     this.loading = true;
     this.error = '';
     this.scoreboardError = '';
+    this.nextRoundError = '';
+    this.finishError = '';
     try {
-      const code = this.normalizeCode(this.sessionCode);
+      const state = await this.controller.hydrateLobby(this.sessionCode);
-      this.session = await this.request<SessionDetail>(`/lobby/sessions/${encodeURIComponent(code)}`, 'GET');
+      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 = `Session refresh failed: ${(error as Error).message}`;
+      this.error = `${this.copy('host.session_refresh_failed')}: ${(error as Error).message}`;
     } finally {
       this.loading = false;
     }
@@ -92,11 +175,17 @@ export class HostShellComponent {
 
   async startRound(): Promise<void> {
     await this.runAction(async () => {
-      const code = this.normalizeCode(this.sessionCode);
+      const state = await this.controller.startRound(this.sessionCode, this.categorySlug.trim());
-      await this.request(`/lobby/sessions/${encodeURIComponent(code)}/rounds/start`, 'POST', {
+      if (!state.session || state.errorMessage) {
-        category_slug: this.categorySlug.trim(),
+        throw new Error(state.errorMessage ?? 'Unknown error');
-      });
+      }
-      await this.refreshSession();
+      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();
     });
   }
 
@@ -136,12 +225,83 @@ export class HostShellComponent {
       this.scoreboardPayload = JSON.stringify(payload, null, 2);
       await this.refreshSession();
     } catch (error) {
-      this.scoreboardError = `Scoreboard failed: ${(error as Error).message}`;
+      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 = '';

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

@@ -12,17 +12,70 @@ function jsonResponse(status: number, body: unknown) {
   } 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, {
+      jsonResponse(200, sessionDetailPayload('reveal', { answers: ['A'] }))
-        session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
-        round_question: { id: 11, prompt: 'Q?', answers: [{ text: 'A' }] },
-      })
     );
 
     vi.stubGlobal('fetch', fetchMock);
@@ -44,13 +97,8 @@ describe('PlayerShellComponent gameplay wiring', () => {
     const fetchMock: FetchMock = vi
       .fn()
       .mockResolvedValueOnce(jsonResponse(500, { error: 'Temporary submit outage' }))
-      .mockResolvedValueOnce(jsonResponse(200, { ok: true }))
+      .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(
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('guess', { answers: ['A', 'B'] })));
-        jsonResponse(200, {
-          session: { code: 'ABCD12', status: 'guess', current_round: 1 },
-          round_question: { id: 11, prompt: 'Q?', answers: [{ text: 'A' }, { text: 'B' }] },
-        })
-      );
 
     vi.stubGlobal('fetch', fetchMock);
 
@@ -62,6 +110,7 @@ describe('PlayerShellComponent gameplay wiring', () => {
     component.session = {
       session: { code: 'ABCD12', status: 'lie', current_round: 1 },
       round_question: { id: 11, prompt: 'Q?', answers: [] },
+      players: [],
     };
 
     await component.submitLie();
@@ -84,17 +133,36 @@ describe('PlayerShellComponent gameplay wiring', () => {
     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(200, { ok: true }))
+      .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(
+      .mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('reveal', { answers: ['A', 'B'] })));
-        jsonResponse(200, {
-          session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
-          round_question: { id: 11, prompt: 'Q?', answers: [{ text: 'A' }, { text: 'B' }] },
-        })
-      );
 
     vi.stubGlobal('fetch', fetchMock);
 
@@ -106,6 +174,7 @@ describe('PlayerShellComponent gameplay wiring', () => {
     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();
@@ -128,4 +197,157 @@ describe('PlayerShellComponent gameplay wiring', () => {
     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

@@ -1,10 +1,26 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+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({
@@ -12,22 +28,35 @@ interface SessionDetail {
   standalone: true,
   imports: [CommonModule, FormsModule],
   template: `
-    <h2>Player SPA gameplay flow</h2>
+    <h2>{{ copy('player.title') }}</h2>
 
-    <div class="panel">
+    <div class="panel" [attr.data-client-has-no-audio-output]="clientHasNoAudioOutput">
-      <label>Session code <input [(ngModel)]="sessionCode" /></label>
+      <label>{{ copy('common.session_code') }} <input [(ngModel)]="sessionCode" /></label>
-      <label>Nickname <input [(ngModel)]="nickname" /></label>
+      <label>{{ copy('player.nickname') }} <input [(ngModel)]="nickname" /></label>
-      <button (click)="refreshSession()" [disabled]="loading">Refresh</button>
+      <button (click)="refreshSession()" [disabled]="loading">{{ copy('common.refresh') }}</button>
-      <button (click)="joinSession()" [disabled]="loading">Join</button>
+      <button (click)="joinSession()" [disabled]="loading">{{ copy('player.join') }}</button>
     </div>
 
-    <div class="panel" *ngIf="session">
+    <p *ngIf="connectionState === 'reconnecting'" class="error">
-      <p><strong>Status:</strong> {{ session.session.status }}</p>
+      {{ copy('player.reconnecting_text') }}
-      <p *ngIf="session.round_question"><strong>Prompt:</strong> {{ session.round_question.prompt }}</p>
+      <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>
 
-      <label>Løgn <input [(ngModel)]="lieText" [disabled]="loading || session.session.status !== 'lie'" /></label>
+    <p *ngIf="loading" class="hint">{{ loadingMessage }}</p>
-      <button (click)="submitLie()" [disabled]="loading || session.session.status !== 'lie'">Submit lie</button>
+
-      <button *ngIf="submitError?.kind === 'lie'" (click)="submitLie()" [disabled]="loading">Retry lie submit</button>
+    <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
@@ -41,15 +70,30 @@ interface SessionDetail {
         </button>
       </div>
 
-      <button (click)="submitGuess()" [disabled]="loading || session.session.status !== 'guess' || !selectedGuess">Submit guess</button>
+      <button (click)="submitGuess()" [disabled]="loading || session.session.status !== 'guess' || !selectedGuess">{{ copy('player.submit_guess') }}</button>
-      <button *ngIf="submitError?.kind === 'guess'" (click)="submitGuess()" [disabled]="loading">Retry guess submit</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 {
+export class PlayerShellComponent implements OnInit, OnDestroy {
+  locale = resolvePreferredLocale();
+  readonly clientHasNoAudioOutput = clientHasNoAudioOutput;
+
   sessionCode = '';
   nickname = '';
   playerId = 0;
@@ -60,11 +104,232 @@ export class PlayerShellComponent {
   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,
@@ -86,40 +351,57 @@ export class PlayerShellComponent {
 
   async refreshSession(): Promise<void> {
     this.loading = true;
+    this.loadingTransition = 'refresh';
     this.error = '';
     try {
-      const code = this.normalizeCode(this.sessionCode);
+      const state = await this.controller.hydrateLobby(this.sessionCode);
-      this.session = await this.request<SessionDetail>(`/lobby/sessions/${encodeURIComponent(code)}`, 'GET');
+      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 = `Session refresh failed: ${(error as Error).message}`;
+      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 payload = await this.request<{
+      const state = await this.controller.joinLobby(this.sessionCode, this.nickname);
-        player: { id: number; session_token: string };
+      if (!state.session || state.errorMessage) {
-        session: { code: string };
+        throw new Error(state.errorMessage ?? 'Unknown error');
-      }>('/lobby/sessions/join', 'POST', {
+      }
-        code: this.normalizeCode(this.sessionCode),
+      this.session = state.session as SessionDetail;
-        nickname: this.nickname.trim(),
+      this.sessionCode = this.session.session.code;
-      });
+
-      this.playerId = payload.player.id;
+      const sessionContext = this.sessionContextStore.get();
-      this.sessionToken = payload.player.session_token;
+      this.playerId = sessionContext?.playerId ?? 0;
-      this.sessionCode = payload.session.code;
+      this.sessionToken = sessionContext?.token ?? '';
-      await this.refreshSession();
+      if (this.session.session.status !== 'guess') {
+        this.selectedGuess = '';
+      }
+      this.syncFinalLeaderboard();
+      this.syncRouteFromSession();
+      this.markOnline();
     } catch (error) {
-      this.error = `Join failed: ${(error as Error).message}`;
+      this.error = `${this.copy('player.join_failed')}: ${this.toMessage(error)}`;
+      this.markConnectionIssue(error);
     } finally {
       this.loading = false;
+      this.loadingTransition = null;
     }
   }
 
@@ -128,6 +410,7 @@ export class PlayerShellComponent {
       return;
     }
     this.loading = true;
+    this.loadingTransition = 'submit-lie';
     this.submitError = null;
     try {
       await this.request(
@@ -140,10 +423,13 @@ export class PlayerShellComponent {
         }
       );
       await this.refreshSession();
+      this.markOnline();
     } catch (error) {
-      this.submitError = { kind: 'lie', message: `Lie submit failed: ${(error as Error).message}` };
+      this.submitError = { kind: 'lie', message: `${this.copy('player.lie_submit_failed')}: ${this.toMessage(error)}` };
+      this.markConnectionIssue(error);
     } finally {
       this.loading = false;
+      this.loadingTransition = null;
     }
   }
 
@@ -152,6 +438,7 @@ export class PlayerShellComponent {
       return;
     }
     this.loading = true;
+    this.loadingTransition = 'submit-guess';
     this.submitError = null;
     try {
       await this.request(
@@ -164,10 +451,13 @@ export class PlayerShellComponent {
         }
       );
       await this.refreshSession();
+      this.markOnline();
     } catch (error) {
-      this.submitError = { kind: 'guess', message: `Guess submit failed: ${(error as Error).message}` };
+      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/lobby-i18n.spec.ts

@@ -0,0 +1,47 @@
+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']);
+  });
+});

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/src/api/angular-client.ts

@@ -1,12 +1,36 @@
+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
+  StartRoundResponse,
+  SubmitGuessRequest,
+  SubmitGuessResponse,
+  SubmitLieRequest,
+  SubmitLieResponse
 } from './types';
 
 export interface AngularHttpError {
@@ -25,6 +49,18 @@ export interface AngularApiClient {
   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 {
@@ -60,10 +96,10 @@ function buildUrl(baseUrl: string, path: string): string {
   return `${normalizeBaseUrl(baseUrl)}${path}`;
 }
 
-async function wrap<T>(call: () => Promise<T>): Promise<ApiResult<T>> {
+async function wrap<T>(call: () => Promise<unknown>, mapper: (payload: unknown) => T): Promise<ApiResult<T>> {
+  let payload: unknown;
   try {
-    const data = await call();
+    payload = await call();
-    return { ok: true, status: 200, data };
   } catch (error: unknown) {
     return {
       ok: false,
@@ -71,35 +107,156 @@ async function wrap<T>(call: () => Promise<T>): Promise<ApiResult<T>> {
       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 })),
+    health: () =>
+      wrap(() => http.get<HealthResponse>(buildUrl(baseUrl, '/healthz'), { withCredentials: true }), mapHealthResponse),
     getSession: (code: string) =>
-      wrap(() =>
+      wrap(
-        http.get<SessionDetailResponse>(buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`), {
+        () =>
-          withCredentials: true
+          http.get<SessionDetailResponse>(buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`), {
-        })
+            withCredentials: true
+          }),
+        mapSessionDetailResponse
       ),
     joinSession: (payload: JoinSessionRequest) =>
-      wrap(() =>
+      wrap(
-        http.post<JoinSessionResponse>(
+        () =>
-          buildUrl(baseUrl, '/lobby/sessions/join'),
+          http.post<JoinSessionResponse>(
-          {
+            buildUrl(baseUrl, '/lobby/sessions/join'),
-            code: normalizeCode(payload.code),
+            {
-            nickname: payload.nickname.trim()
+              code: normalizeCode(payload.code),
-          },
+              nickname: payload.nickname.trim()
-          { withCredentials: true }
+            },
-        )
+            { withCredentials: true }
+          ),
+        mapJoinSessionResponse
       ),
     startRound: (code: string, payload: StartRoundRequest) =>
-      wrap(() =>
+      wrap(
-        http.post<StartRoundResponse>(
+        () =>
-          buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/start`),
+          http.post<StartRoundResponse>(
-          payload,
+            buildUrl(baseUrl, `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/start`),
-          { withCredentials: true }
+            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

@@ -1,11 +1,35 @@
+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
+  StartRoundResponse,
+  SubmitGuessRequest,
+  SubmitGuessResponse,
+  SubmitLieRequest,
+  SubmitLieResponse
 } from './types';
 
 export interface ApiClient {
@@ -13,10 +37,23 @@ export interface ApiClient {
   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', payload?: unknown): Promise<ApiResult<T>> {
+  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}`, {
@@ -59,22 +96,102 @@ export function createApiClient(baseUrl = '', fetchImpl: typeof fetch = fetch):
       };
     }
 
-    return { ok: true, status: response.status, data: responsePayload as T };
+    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'),
+    health: () => request<HealthResponse>('/healthz', 'GET', mapHealthResponse),
     getSession: (code: string) =>
-      request<SessionDetailResponse>(`/lobby/sessions/${encodeURIComponent(code.trim().toUpperCase())}`, 'GET'),
+      request<SessionDetailResponse>(
+        `/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`,
+        'GET',
+        mapSessionDetailResponse
+      ),
     joinSession: (payload: JoinSessionRequest) =>
-      request<JoinSessionResponse>('/lobby/sessions/join', 'POST', {
+      request<JoinSessionResponse>(
-        code: payload.code.trim().toUpperCase(),
+        '/lobby/sessions/join',
-        nickname: payload.nickname.trim()
+        'POST',
-      }),
+        mapJoinSessionResponse,
+        {
+          code: normalizeCode(payload.code),
+          nickname: payload.nickname.trim()
+        }
+      ),
     startRound: (code: string, payload: StartRoundRequest) =>
       request<StartRoundResponse>(
-        `/lobby/sessions/${encodeURIComponent(code.trim().toUpperCase())}/rounds/start`,
+        `/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

@@ -101,6 +101,113 @@ export interface StartRoundResponse {
   };
 }
 
+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 {

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

@@ -189,6 +189,143 @@ describe('createAngularApiClient', () => {
     );
   });
 
+  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 () => {

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

@@ -74,6 +74,12 @@ beforeAll(async () => {
       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' }));
@@ -123,6 +129,18 @@ describe('createApiClient', () => {
     }
   });
 
+  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);
 

lobby/i18n.py

@@ -1,8 +1,12 @@
 import json
+import logging
 from functools import lru_cache
 from pathlib import Path
 
-from django.http import JsonResponse
+from django.http import HttpRequest, JsonResponse
+from django.utils.translation import get_language_from_request
+
+LOGGER = logging.getLogger(__name__)
 
 
 @lru_cache(maxsize=1)
@@ -12,9 +16,55 @@ def lobby_i18n_catalog() -> dict:
         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 api_error(*, code: str, message: str, status: int) -> JsonResponse:
+def lobby_i18n_error_messages() -> dict:
-    return JsonResponse({"error": message, "error_code": code}, status=status)
+    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/tests.py

@@ -19,6 +19,7 @@ from fupogfakta.models import (
     RoundConfig,
     RoundQuestion,
 )
+from lobby.i18n import resolve_error_message
 
 User = get_user_model()
 
@@ -110,6 +111,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)
@@ -1174,3 +1201,8 @@ class SmokeStagingCommandTests(TestCase):
                     "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")

lobby/views.py

@@ -128,15 +128,15 @@ def join_session(request: HttpRequest) -> JsonResponse:
 
     if not code:
         return api_error(
-            code=ERROR_CODES.get("session_code_required", "session_code_required"),
+            request,
-            message="Session code is required",
+            key=ERROR_CODES.get("session_code_required", "session_code_required"),
             status=400,
         )
 
     if len(nickname) < 2 or len(nickname) > 40:
         return api_error(
-            code=ERROR_CODES.get("nickname_invalid", "nickname_invalid"),
+            request,
-            message="Nickname must be between 2 and 40 characters",
+            key=ERROR_CODES.get("nickname_invalid", "nickname_invalid"),
             status=400,
         )
 
@@ -144,22 +144,22 @@ def join_session(request: HttpRequest) -> JsonResponse:
         session = GameSession.objects.get(code=code)
     except GameSession.DoesNotExist:
         return api_error(
-            code=ERROR_CODES.get("session_not_found", "session_not_found"),
+            request,
-            message="Session not found",
+            key=ERROR_CODES.get("session_not_found", "session_not_found"),
             status=404,
         )
 
     if session.status not in JOINABLE_STATUSES:
         return api_error(
-            code=ERROR_CODES.get("session_not_joinable", "session_not_joinable"),
+            request,
-            message="Session is not joinable",
+            key=ERROR_CODES.get("session_not_joinable", "session_not_joinable"),
             status=400,
         )
 
     if Player.objects.filter(session=session, nickname__iexact=nickname).exists():
         return api_error(
-            code=ERROR_CODES.get("nickname_taken", "nickname_taken"),
+            request,
-            message="Nickname already taken",
+            key=ERROR_CODES.get("nickname_taken", "nickname_taken"),
             status=409,
         )
 
@@ -190,8 +190,8 @@ def session_detail(request: HttpRequest, code: str) -> JsonResponse:
         session = GameSession.objects.get(code=session_code)
     except GameSession.DoesNotExist:
         return api_error(
-            code=ERROR_CODES.get("session_not_found", "session_not_found"),
+            request,
-            message="Session not found",
+            key=ERROR_CODES.get("session_not_found", "session_not_found"),
             status=404,
         )
 
@@ -251,8 +251,8 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
 
     if not category_slug:
         return api_error(
-            code=ERROR_CODES.get("category_slug_required", "category_slug_required"),
+            request,
-            message="category_slug is required",
+            key=ERROR_CODES.get("category_slug_required", "category_slug_required"),
             status=400,
         )
 
@@ -262,8 +262,8 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
         session = GameSession.objects.get(code=session_code)
     except GameSession.DoesNotExist:
         return api_error(
-            code=ERROR_CODES.get("session_not_found", "session_not_found"),
+            request,
-            message="Session not found",
+            key=ERROR_CODES.get("session_not_found", "session_not_found"),
             status=404,
         )
 
@@ -272,8 +272,8 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
 
     if session.status != GameSession.Status.LOBBY:
         return api_error(
-            code=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
+            request,
-            message="Round can only be started from lobby",
+            key=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
             status=400,
         )
 
@@ -281,8 +281,8 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
         category = Category.objects.get(slug=category_slug, is_active=True)
     except Category.DoesNotExist:
         return api_error(
-            code=ERROR_CODES.get("category_not_found", "category_not_found"),
+            request,
-            message="Category not found",
+            key=ERROR_CODES.get("category_not_found", "category_not_found"),
             status=404,
         )
 
@@ -293,8 +293,8 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
         session = GameSession.objects.select_for_update().get(pk=session.pk)
         if session.status != GameSession.Status.LOBBY:
             return api_error(
-                code=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
+                request,
-                message="Round can only be started from lobby",
+                key=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
                 status=400,
             )
 
@@ -305,8 +305,8 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
         )
         if not created:
             return api_error(
-                code=ERROR_CODES.get("round_already_configured", "round_already_configured"),
+                request,
-                message="Round already configured",
+                key=ERROR_CODES.get("round_already_configured", "round_already_configured"),
                 status=409,
             )
 

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

shared/i18n/lobby.json

@@ -1,14 +1,266 @@
 {
+  "locales": {
+    "default": "en",
+    "supported": [
+      "en",
+      "da"
+    ]
+  },
   "frontend": {
     "errors": {
-      "session_code_required": "Session code is required.",
+      "session_code_required": {
-      "session_fetch_failed": "Could not load lobby status.",
+        "en": "Session code is required.",
-      "join_failed": "Join failed. Check code or nickname and try again.",
+        "da": "Sessionskoden er påkrævet."
-      "start_round_failed": "Could not start round. Refresh the lobby and try again.",
+      },
-      "session_not_found": "Session code is invalid or the session no longer exists.",
+      "session_fetch_failed": {
-      "nickname_invalid": "Nickname must be between 2 and 40 characters.",
+        "en": "Could not load lobby status.",
-      "nickname_taken": "Nickname is already taken.",
+        "da": "Kunne ikke indlæse lobby-status."
-      "unknown": "Action failed. Refresh status and try again."
+      },
+      "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": {
@@ -22,6 +274,44 @@
       "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"
+      }
     }
   }
-}
+}