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

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

frontend/src/spa/vertical-slice.ts

@@ -1,11 +1,13 @@
 import type { ApiClient } from '../api/client';
 import type { SessionDetailResponse } from '../api/types';
+import { createSessionContextStore, type SessionContext, type SessionContextStore } from './session-context-store';
 
 export type AsyncState = 'idle' | 'loading' | 'success' | 'error';
 
 export interface VerticalSliceState {
   sessionCode: string;
   session: SessionDetailResponse | null;
+  context: SessionContext | null;
   joinState: AsyncState;
   startRoundState: AsyncState;
   loadingSession: boolean;
@@ -19,10 +21,14 @@ export interface VerticalSliceController {
   startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState>;
 }
 
-export function createVerticalSliceController(api: ApiClient): VerticalSliceController {
+export function createVerticalSliceController(
+  api: ApiClient,
+  sessionContextStore: SessionContextStore = createSessionContextStore()
+): VerticalSliceController {
   const state: VerticalSliceState = {
     sessionCode: '',
     session: null,
+    context: sessionContextStore.get(),
     joinState: 'idle',
     startRoundState: 'idle',
     loadingSession: false,
@@ -31,11 +37,31 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
 
   const normalizeCode = (value: string): string => value.trim().toUpperCase();
 
+  function syncContext(): void {
+    state.context = sessionContextStore.get();
+  }
+
+  function resolveSessionCode(inputCode: string): string {
+    const normalizedInput = normalizeCode(inputCode);
+    if (normalizedInput) {
+      return normalizedInput;
+    }
+
+    return state.context?.sessionCode ?? '';
+  }
+
   async function hydrateLobby(sessionCode: string): Promise<VerticalSliceState> {
     state.loadingSession = true;
     state.errorMessage = null;
-    state.sessionCode = normalizeCode(sessionCode);
+    const resolvedCode = resolveSessionCode(sessionCode);
 
+    if (!resolvedCode) {
+      state.loadingSession = false;
+      state.errorMessage = 'Session-kode mangler.';
+      return { ...state };
+    }
+
+    state.sessionCode = resolvedCode;
     const result = await api.getSession(state.sessionCode);
     state.loadingSession = false;
 
@@ -45,6 +71,7 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
     }
 
     state.session = result.data;
+    syncContext();
     return { ...state };
   }
 
@@ -59,15 +86,29 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
       return { ...state };
     }
 
+    sessionContextStore.set({
+      sessionCode: join.data.session.code,
+      playerId: join.data.player.id,
+      token: join.data.player.session_token
+    });
+    syncContext();
+
     state.joinState = 'success';
-    return hydrateLobby(sessionCode);
+    return hydrateLobby(join.data.session.code);
   }
 
   async function startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState> {
     state.startRoundState = 'loading';
     state.errorMessage = null;
 
-    const start = await api.startRound(sessionCode, { category_slug: categorySlug });
+    const resolvedCode = resolveSessionCode(sessionCode);
+    if (!resolvedCode) {
+      state.startRoundState = 'error';
+      state.errorMessage = 'Session-kode mangler.';
+      return { ...state };
+    }
+
+    const start = await api.startRound(resolvedCode, { category_slug: categorySlug });
     if (!start.ok) {
       state.startRoundState = 'error';
       state.errorMessage = 'Kunne ikke starte runden. Opdatér lobbyen og prøv igen.';
@@ -75,7 +116,7 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont
     }
 
     state.startRoundState = 'success';
-    return hydrateLobby(sessionCode);
+    return hydrateLobby(resolvedCode);
   }
 
   return {

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

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

frontend/tests/vertical-slice.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { createVerticalSliceController } from '../src/spa/vertical-slice';
+import { createSessionContextStore, type StorageLike } from '../src/spa/session-context-store';
 import type { ApiClient } from '../src/api/client';
 
 function makeApiMock(overrides?: Partial<ApiClient>): ApiClient {
@@ -58,10 +59,24 @@ function makeApiMock(overrides?: Partial<ApiClient>): ApiClient {
   return { ...base, ...overrides };
 }
 
+function makeMemoryStorage(): StorageLike {
+  const memory = new Map<string, string>();
+  return {
+    getItem: (key: string) => memory.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      memory.set(key, value);
+    },
+    removeItem: (key: string) => {
+      memory.delete(key);
+    }
+  };
+}
+
 describe('vertical slice controller: lobby -> join -> start round', () => {
-  it('tracks loading and success state for join + start flow', async () => {
+  it('tracks loading and success state for join + start flow and stores session context', async () => {
     const api = makeApiMock();
-    const controller = createVerticalSliceController(api);
+    const store = createSessionContextStore(makeMemoryStorage());
+    const controller = createVerticalSliceController(api, store);
 
     const beforeJoinPromise = controller.joinLobby('abcd12', 'Maja');
     expect(controller.getState().joinState).toBe('loading');
@@ -70,13 +85,15 @@ describe('vertical slice controller: lobby -> join -> start round', () => {
     const postJoin = controller.getState();
     expect(postJoin.joinState).toBe('success');
     expect(postJoin.session?.session.code).toBe('ABCD12');
+    expect(postJoin.context).toEqual({ sessionCode: 'ABCD12', playerId: 9, token: 'token-1' });
 
-    const beforeStartPromise = controller.startRound('abcd12', 'history');
+    const beforeStartPromise = controller.startRound('', 'history');
     expect(controller.getState().startRoundState).toBe('loading');
     await beforeStartPromise;
 
     const postStart = controller.getState();
     expect(postStart.startRoundState).toBe('success');
+    expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' });
   });
 
   it('surfaces a friendly error when join fails', async () => {
@@ -112,4 +129,15 @@ describe('vertical slice controller: lobby -> join -> start round', () => {
     expect(state.startRoundState).toBe('error');
     expect(state.errorMessage).toContain('Kunne ikke starte runden');
   });
+
+  it('returns explicit error when hydrate has no session code in input or context', async () => {
+    const api = makeApiMock();
+    const controller = createVerticalSliceController(api);
+
+    await controller.hydrateLobby('   ');
+
+    const state = controller.getState();
+    expect(state.errorMessage).toContain('Session-kode mangler');
+    expect(api.getSession).not.toHaveBeenCalled();
+  });
 });