fix: address sparring review findings

Author: Programcode

e2e/sparring.spec.ts

@@ -71,13 +71,13 @@ test('completes an LD sparring round through mocked opponent turns and judging',
     ['Second affirmative rebuttal', 'The universal policy is more reliable because every marginal trip is covered.'],
   ] as const;
 
-  for (const [turnLabel, content] of userSpeeches) {
+  for (const [index, [turnLabel, content]] of userSpeeches.entries()) {
     const draft = page.getByRole('textbox', { name: `Draft for ${turnLabel}` });
     await expect(draft).toBeVisible();
     await draft.fill(content);
     await page.getByRole('button', { name: 'Submit speech' }).click();
     if (turnLabel !== 'Second affirmative rebuttal') {
-      await expect(page.getByText(`Opponent response ${responseNumber + 1}:`)).toBeVisible();
+      await expect(page.getByText(`Opponent response ${index + 1}:`)).toBeVisible();
     }
   }
 

plans/sparring-and-streaming.md

@@ -95,6 +95,7 @@ interface SparringScorecard {
 Streaming remains tracked independently in `plans/streaming-ai.md`; it is not part of the turn-based sparring contract.
 
 ## Original Estimated Effort
+
 - Setup + Round UI: 4 hours
 - AI integration (prompts, edge function): 3 hours
 - Scorecard + judging: 2 hours

src/components/features/sparring/SparringRound.tsx

@@ -18,6 +18,7 @@ interface SparringRoundProps {
   aiError?: string | null;
   judging?: boolean;
   judgingError?: string | null;
+  submissionError?: string | null;
   onSubmit: (content: string) => void;
   onRetryAi?: () => void;
   onRetryJudging?: () => void;
@@ -41,6 +42,7 @@ export function SparringRound({
   aiError,
   judging = false,
   judgingError,
+  submissionError,
   onSubmit,
   onRetryAi,
   onRetryJudging,
@@ -61,6 +63,8 @@ export function SparringRound({
     : t('sparring.round.yourSpeechDescription', 'Make the case in the time you have. The opponent will respond to this text.');
   const timerProgress = currentTurn?.timeLimitSeconds ? Math.max(0, Math.min(100, (session.timerRemainingSeconds / currentTurn.timeLimitSeconds) * 100)) : 0;
   const isUrgent = session.timerRemainingSeconds <= 30 && session.timerRemainingSeconds > 0;
+  const timeExpired = session.timerRemainingSeconds <= 0
+    || (session.timerDeadline !== null && session.timerDeadline <= Date.now());
 
   useEffect(() => {
     const handleOnline = () => setIsOnline(true);
@@ -82,7 +86,7 @@ export function SparringRound({
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
       event.preventDefault();
-      if (userTurn && session.draft.trim() && !judging && isOnline) onSubmit(session.draft);
+      if (userTurn && session.draft.trim() && !judging && isOnline && !timeExpired) onSubmit(session.draft);
     }
   };
 
@@ -185,10 +189,12 @@ export function SparringRound({
                     />
                     <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                       <p className="text-xs text-muted-foreground">{isOnline ? <><kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono">⌘</kbd> or <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono">Ctrl</kbd> + <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono">Enter</kbd> {t('sparring.round.toSubmit', 'to submit')}</> : t('sparring.round.offlineCannotSubmit', 'Reconnect to submit this speech.')}</p>
-                      <Button type="button" onClick={() => onSubmit(session.draft)} disabled={!session.draft.trim() || !isOnline} className="sm:min-w-36">
+                      <Button type="button" onClick={() => onSubmit(session.draft)} disabled={!session.draft.trim() || !isOnline || timeExpired} className="sm:min-w-36">
                         {t('sparring.round.submitSpeech', 'Submit speech')} <Send className="h-4 w-4" aria-hidden="true" />
                       </Button>
                     </div>
+                    {timeExpired && <p className="text-sm text-destructive" role="alert">{t('sparring.round.timeExpired', 'This speaking time has ended. Reset the turn to continue.')}</p>}
+                    {!timeExpired && submissionError && <p className="text-sm text-destructive" role="alert">{submissionError}</p>}
                   </CardContent>
                 </Card>
               ) : (

src/lib/stores/sparring-store.ts

@@ -105,6 +105,58 @@ const PersistedSparringStateSchema = z.object({
 });
 
 type PersistedSparringState = Pick<SparringStoreState, 'currentSession' | 'savedSessions'>;
+const MAX_SAVED_SESSIONS = 50;
+const PERSIST_DELAY_MS = 250;
+let pendingStorageWrite: { name: string; value: string } | null = null;
+let storageWriteTimer: ReturnType<typeof setTimeout> | null = null;
+
+function flushPendingStorageWrite() {
+  if (!pendingStorageWrite || typeof sessionStorage === 'undefined') return;
+  sessionStorage.setItem(pendingStorageWrite.name, pendingStorageWrite.value);
+  pendingStorageWrite = null;
+  if (storageWriteTimer) clearTimeout(storageWriteTimer);
+  storageWriteTimer = null;
+}
+
+function withoutVolatileDraftFields(value: string): string | null {
+  try {
+    const parsed = JSON.parse(value) as { state?: { currentSession?: { draft?: string; updatedAt?: number } | null } };
+    if (parsed.state?.currentSession) {
+      parsed.state.currentSession.draft = '';
+      parsed.state.currentSession.updatedAt = 0;
+    }
+    return JSON.stringify(parsed);
+  } catch {
+    return null;
+  }
+}
+
+const debouncedSessionStorage = {
+  getItem: (name: string) => sessionStorage.getItem(name),
+  setItem: (name: string, value: string) => {
+    const persistedValue = sessionStorage.getItem(name);
+    const draftOnlyChange = persistedValue !== null
+      && withoutVolatileDraftFields(persistedValue) === withoutVolatileDraftFields(value);
+    if (!draftOnlyChange) {
+      if (storageWriteTimer) clearTimeout(storageWriteTimer);
+      storageWriteTimer = null;
+      pendingStorageWrite = null;
+      sessionStorage.setItem(name, value);
+      return;
+    }
+    pendingStorageWrite = { name, value };
+    if (storageWriteTimer) clearTimeout(storageWriteTimer);
+    storageWriteTimer = setTimeout(flushPendingStorageWrite, PERSIST_DELAY_MS);
+  },
+  removeItem: (name: string) => {
+    if (pendingStorageWrite?.name === name) pendingStorageWrite = null;
+    if (storageWriteTimer) clearTimeout(storageWriteTimer);
+    storageWriteTimer = null;
+    sessionStorage.removeItem(name);
+  },
+};
+
+if (typeof window !== 'undefined') window.addEventListener('pagehide', flushPendingStorageWrite);
 
 function migratePersistedSparringState(value: unknown): PersistedSparringState {
   const parsed = PersistedSparringStateSchema.safeParse(value);
@@ -173,7 +225,7 @@ function mergeSessions(local: SparringSession[], remote: SparringSession[]): Spa
     const current = byId.get(session.id);
     if (!current || current.updatedAt < session.updatedAt) byId.set(session.id, session);
   }
-  return [...byId.values()].sort((a, b) => b.updatedAt - a.updatedAt);
+  return [...byId.values()].sort((a, b) => b.updatedAt - a.updatedAt).slice(0, MAX_SAVED_SESSIONS);
 }
 
 function parseSavedRows(value: unknown): SparringSession[] {
@@ -282,7 +334,10 @@ export const useSparringStore = create<SparringStoreState>()(
         const session = get().currentSession;
         const turn = session ? currentTurn(session) : undefined;
         const cleanContent = content.trim();
-        if (!session || session.phase !== 'round' || turn?.speaker !== 'user' || !cleanContent || cleanContent.length > 6_000) return null;
+        const deadlinePassed = session?.timerDeadline !== null
+          && session?.timerDeadline !== undefined
+          && session.timerDeadline <= now;
+        if (!session || session.phase !== 'round' || turn?.speaker !== 'user' || !cleanContent || cleanContent.length > 6_000 || session.timerRemainingSeconds <= 0 || deadlinePassed) return null;
         const remaining = session.timerRunning && session.timerDeadline !== null
           ? Math.max(0, Math.ceil((session.timerDeadline - now) / 1000))
           : session.timerRemainingSeconds;
@@ -378,12 +433,16 @@ export const useSparringStore = create<SparringStoreState>()(
     }),
     {
       name: 'debate-sparring-storage',
-      storage: createJSONStorage(() => sessionStorage),
-      version: 2,
+      storage: createJSONStorage(() => debouncedSessionStorage),
+      version: 3,
       migrate: (persistedState) => migratePersistedSparringState(persistedState),
+      merge: (persistedState, currentState) => ({
+        ...currentState,
+        ...migratePersistedSparringState(persistedState),
+      }),
       partialize: (state) => ({
         currentSession: state.currentSession,
-        savedSessions: state.savedSessions,
+        savedSessions: state.savedSessions.slice(0, MAX_SAVED_SESSIONS),
       }),
     },
   ),

src/locales/en.json

@@ -1292,6 +1292,8 @@
       "draftFor": "Draft for {{label}}",
       "toSubmit": "to submit",
       "submitSpeech": "Submit speech",
+      "timeExpired": "This speaking time has ended. Reset the turn to continue.",
+      "speechRejected": "This speech could not be submitted. Check the timer and length, then try again.",
       "offlineCannotSubmit": "Reconnect to submit this speech.",
       "opponentFailed": "The opponent could not answer",
       "retryOpponent": "Retry opponent turn",

src/locales/es.json

@@ -1292,6 +1292,8 @@
       "draftFor": "Borrador para {{label}}",
       "toSubmit": "para enviar",
       "submitSpeech": "Enviar intervención",
+      "timeExpired": "El tiempo de esta intervención ha terminado. Reinicia el turno para continuar.",
+      "speechRejected": "No se pudo enviar esta intervención. Comprueba el cronómetro y la longitud e inténtalo de nuevo.",
       "offlineCannotSubmit": "Vuelve a conectarte para enviar esta intervención.",
       "opponentFailed": "El oponente no pudo responder",
       "retryOpponent": "Reintentar turno del oponente",

src/locales/hu.json

@@ -1292,6 +1292,8 @@
       "draftFor": "Piszkozat: {{label}}",
       "toSubmit": "beküldéshez",
       "submitSpeech": "Beszéd beküldése",
+      "timeExpired": "A felszólalási idő lejárt. A folytatáshoz állítsd vissza a kört.",
+      "speechRejected": "A beszédet nem sikerült beküldeni. Ellenőrizd az időt és a hosszt, majd próbáld újra.",
       "offlineCannotSubmit": "Csatlakozz újra a beszéd beküldéséhez.",
       "opponentFailed": "Az ellenfél nem tudott válaszolni",
       "retryOpponent": "Az ellenfél körének újrapróbálása",

src/pages/SparringPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ArrowLeft, CircleHelp } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
@@ -38,6 +38,7 @@ export default function SparringPage() {
   const [aiLoading, setAiLoading] = useState(false);
   const [aiError, setAiError] = useState<string | null>(null);
   const [judgingError, setJudgingError] = useState<string | null>(null);
+  const [submissionError, setSubmissionError] = useState<string | null>(null);
   const [isOnline, setIsOnline] = useState(() => typeof navigator === 'undefined' || navigator.onLine);
   const [retryNonce, setRetryNonce] = useState(0);
   const aiRequestRef = useRef<string | null>(null);
@@ -68,7 +69,7 @@ export default function SparringPage() {
     };
   }, []);
 
-  const config = getFeatureConfig('sparring');
+  const config = useMemo(() => getFeatureConfig('sparring'), [getFeatureConfig]);
 
   const retryAi = useCallback(() => {
     aiRequestRef.current = null;
@@ -102,7 +103,6 @@ export default function SparringPage() {
     aiInFlightRef.current = true;
     setAiLoading(true);
     setAiError(null);
-    let active = true;
     const { speaker: _speaker, ...turnInput } = currentTurn;
     const input: SparringRespondInput = {
       action: 'respond',
@@ -136,17 +136,15 @@ export default function SparringPage() {
         appendAiSpeech(speech);
       })
       .catch((error: unknown) => {
-        if (!active || aiRequestRef.current !== requestKey) return;
+        if (aiRequestRef.current !== requestKey) return;
         setAiError(readableError(error, t('sparring.round.aiRequestFailed', 'The AI request failed. Check your connection and try again.')));
       })
       .finally(() => {
-        aiInFlightRef.current = false;
-        if (active && aiRequestRef.current === requestKey) setAiLoading(false);
+        if (aiRequestRef.current === requestKey) {
+          aiInFlightRef.current = false;
+          setAiLoading(false);
+        }
       });
-
-    return () => {
-      active = false;
-    };
   }, [appendAiSpeech, config, outputLanguage, retryNonce, session, t]);
 
   useEffect(() => {
@@ -160,7 +158,6 @@ export default function SparringPage() {
     judgeRequestRef.current = requestKey;
     judgeInFlightRef.current = true;
     setJudgingError(null);
-    let active = true;
     const input: SparringScoreInput = {
       action: 'score',
       sessionId: session.id,
@@ -178,15 +175,12 @@ export default function SparringPage() {
         completeSession(result.scorecard);
       })
       .catch((error: unknown) => {
-        if (!active || judgeRequestRef.current !== requestKey) return;
+        if (judgeRequestRef.current !== requestKey) return;
         setJudgingError(readableError(error, t('sparring.round.judgeRequestFailed', 'The judge request failed. Check your connection and try again.')));
       })
       .finally(() => {
-        judgeInFlightRef.current = false;
+        if (judgeRequestRef.current === requestKey) judgeInFlightRef.current = false;
       });
-    return () => {
-      active = false;
-    };
   }, [completeSession, config, outputLanguage, retryNonce, session, t]);
 
   const handleStart = (values: SparringSetupValues) => {
@@ -196,6 +190,7 @@ export default function SparringPage() {
     setRetryNonce(0);
     aiRequestRef.current = null;
     judgeRequestRef.current = null;
+    setSubmissionError(null);
   };
 
   const handleRestart = () => {
@@ -205,6 +200,12 @@ export default function SparringPage() {
     setRetryNonce(0);
     aiRequestRef.current = null;
     judgeRequestRef.current = null;
+    setSubmissionError(null);
+  };
+
+  const handleSubmit = (content: string) => {
+    const result = submitUserSpeech(content);
+    setSubmissionError(result ? null : t('sparring.round.speechRejected', 'This speech could not be submitted. Check the timer and length, then try again.'));
   };
 
   const handleExportDocx = () => {
@@ -243,7 +244,8 @@ export default function SparringPage() {
         aiError={aiError}
         judging={session.phase === 'judging'}
         judgingError={judgingError}
-        onSubmit={(content) => submitUserSpeech(content)}
+        submissionError={submissionError}
+        onSubmit={handleSubmit}
         onRetryAi={retryAi}
         onRetryJudging={retryJudging}
       />

src/test/pages/SparringPage.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { MemoryRouter } from 'react-router-dom';
 import type { ReactNode } from 'react';
 import type { ProviderConfig } from '@/lib/ai/providers/types';
@@ -109,6 +109,10 @@ describe('SparringPage', () => {
     judgeMock.mockResolvedValue({ action: 'score', scorecard: SCORECARD });
   });
 
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
   it('renders setup, validates the motion, and starts a chosen round', async () => {
     renderPage();
 
@@ -179,6 +183,28 @@ describe('SparringPage', () => {
     expect(screen.getByText('Universal access removes the price barrier.')).toBeInTheDocument();
   });
 
+  it('blocks a speech after the turn deadline', () => {
+    const session = useSparringStore.getState().startSession({
+      motion: 'This House would make public transport free.',
+      userSide: 'pro',
+      format: 'standard',
+      difficulty: 'medium',
+    });
+    useSparringStore.setState({
+      currentSession: {
+        ...session,
+        draft: 'A speech submitted too late.',
+        timerRemainingSeconds: 0,
+        timerRunning: false,
+        timerDeadline: null,
+      },
+    });
+
+    renderPage();
+    expect(screen.getByRole('button', { name: 'Submit speech' })).toBeDisabled();
+    expect(screen.getByRole('alert')).toHaveTextContent('This speaking time has ended');
+  });
+
   it('offers a retry after an opponent failure without duplicating the user speech', async () => {
     generateMock
       .mockRejectedValueOnce(new Error('Temporary provider failure'))
@@ -232,12 +258,12 @@ describe('SparringPage', () => {
   });
 
   it('renders safely at a narrow viewport with reduced motion enabled', () => {
-    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    vi.stubGlobal('matchMedia', vi.fn().mockImplementation((query: string) => ({
       matches: query === '(prefers-reduced-motion: reduce)',
       media: query,
       addEventListener: (): void => undefined,
       removeEventListener: (): void => undefined,
-    }));
+    })));
 
     renderPage();
     expect(screen.getByRole('heading', { name: 'Spar with an opponent who listens.' })).toBeInTheDocument();

src/test/sparring-ai.test.ts

@@ -45,11 +45,20 @@ describe('Sparring AI contract', () => {
   });
 
   it('caps session context at twelve speeches and requires all score categories', () => {
-    const speech = {
-      id: 'speech-1', turnId: 'pf-1', speaker: 'user', side: 'pro', role: 'Pro constructive',
-      content: 'A complete argument.', createdAt: 1, timeLimitSeconds: 240, timeUsedSeconds: 20,
-    };
-    expect(SparringInputSchema.safeParse({ ...session, action: 'score', speeches: Array(13).fill(speech) }).success).toBe(false);
+    const speeches = Array.from({ length: 13 }, (_, index) => ({
+      id: `speech-${index + 1}`,
+      turnId: `turn-${index + 1}`,
+      speaker: index % 2 === 0 ? 'user' as const : 'ai' as const,
+      side: index % 2 === 0 ? 'pro' as const : 'con' as const,
+      role: `Speaker ${index + 1}`,
+      content: `Complete argument ${index + 1}.`,
+      createdAt: index + 1,
+      timeLimitSeconds: 240,
+      timeUsedSeconds: 20,
+      ...(index % 2 === 1 ? { integrityToken: `${'x'.repeat(40)}${index + 1}` } : {}),
+    }));
+    expect(SparringInputSchema.safeParse({ ...session, action: 'score', speeches: speeches.slice(0, 12) }).success).toBe(true);
+    expect(SparringInputSchema.safeParse({ ...session, action: 'score', speeches }).success).toBe(false);
     const category = (name: 'Logic' | 'Evidence' | 'Delivery' | 'Strategy') => ({ name, userScore: 20, aiScore: 18, feedback: 'Clear comparison.' });
     const scorecard = {
       userScore: 80, aiScore: 72,