Rework Chase mode into a karaoke-style letter stream

app/globals.css

@@ -86,42 +86,64 @@ html[data-training-mode='chase'] #data-notice code {
   color: rgb(226 232 240);
 }
 
-@keyframes chase-fall {
-  from {
-    transform: translate(-50%, 0);
+@keyframes chase-note-pop {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.35);
+  }
+
+  45% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.92);
+  }
+}
+
+@keyframes chase-note-drift {
+  0% {
+    opacity: 0.9;
+    transform: translate(-50%, -50%) scale(1);
   }
 
-  to {
-    transform: translate(-50%, 19rem);
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -30%) scale(0.85);
   }
 }
 
-@keyframes chase-danger-flash {
+@keyframes chase-note-live {
   0%,
   100% {
-    box-shadow: inset 0 0 0 rgba(244, 63, 94, 0);
-    filter: saturate(1);
+    transform: translate(-50%, -50%) scale(1.1);
   }
 
-  18%,
-  58% {
-    box-shadow:
-      inset 0 0 80px rgba(244, 63, 94, 0.48),
-      0 0 42px rgba(244, 63, 94, 0.42);
-    filter: saturate(1.5);
+  50% {
+    transform: translate(-50%, -50%) scale(1.22);
   }
 }
 
-@keyframes chase-target-missed {
+@keyframes chase-hitline-pulse {
   0%,
   100% {
-    opacity: 0;
-    transform: translateY(0) scale(0.98);
+    opacity: 0.75;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes chase-calm-breathe {
+  0%,
+  100% {
+    opacity: 0.5;
   }
 
-  18%,
-  70% {
+  50% {
     opacity: 1;
-    transform: translateY(-0.35rem) scale(1);
   }
 }

src/__tests__/components/features/chase/ChaseTrainingView.test.tsx

@@ -1,80 +1,135 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { ChaseTrainingView } from '@/components/features/chase/ChaseTrainingView';
+import type { ChaseNote, ChaseRecentLetter } from '@/hooks/useChaseTrainingSession';
+
+const now = Date.now();
+
+const makeNote = (overrides: Partial<ChaseNote> = {}): ChaseNote => ({
+  id: 1,
+  char: 'K',
+  laneIndex: 4,
+  toneHz: 500,
+  spawnedAt: now - 1000,
+  hitAt: now + 1000,
+  windowEndAt: now + 3000,
+  status: 'incoming',
+  ...overrides,
+});
 
 const baseProps = {
-  target: {
-    id: 1,
-    group: 'KMURE',
-    lanePercent: 50,
-    level: 2,
-    spawnedAt: 1000,
-    deadlineAt: 7000,
-    fallMs: 6000,
-  },
-  lastResolvedTarget: null,
-  userInput: '',
-  lives: 5,
+  notes: [] as readonly ChaseNote[],
+  recentLetters: [] as readonly ChaseRecentLetter[],
+  wpm: 16,
+  wpmMin: 10,
+  wpmMax: 25,
+  calm: false,
   level: 2,
   score: 1200,
-  streak: 3,
-  bestStreak: 4,
+  combo: 3,
+  bestCombo: 7,
   levelProgress: 0.4,
-  groupsCompleted: 8,
-  onChange: jest.fn(),
-  onSubmit: jest.fn(),
+  lettersHeard: 8,
+  correctCount: 6,
+  wrongCount: 1,
+  missedCount: 1,
+  onKeystroke: jest.fn(),
   onStop: jest.fn(),
 };
 
 describe('ChaseTrainingView', () => {
-  it('shows auto-fire copy and high-threat styling for longer groups', () => {
+  it('renders the HUD with score, combo, live copy rate, and pace', () => {
+    render(<ChaseTrainingView {...baseProps} />);
+
+    expect(screen.getByText('1200')).toBeInTheDocument();
+    expect(screen.getByText(/×3/)).toBeInTheDocument();
+    expect(screen.getByText(/best ×7/)).toBeInTheDocument();
+    // 6 of 8 resolved letters copied = 75%
+    expect(screen.getByText('75%')).toBeInTheDocument();
+    expect(screen.getByText('16')).toBeInTheDocument();
+    expect(screen.getByText('Finish')).toBeInTheDocument();
+  });
+
+  it('renders tone lane labels across the 300-800 Hz band', () => {
     render(<ChaseTrainingView {...baseProps} />);
 
-    expect(screen.getByPlaceholderText('COPY 5')).toBeInTheDocument();
-    expect(screen.getByText(/Auto-fires as soon as 5 characters are typed/i)).toBeInTheDocument();
-    expect(screen.getByText(/High threat/i)).toBeInTheDocument();
+    expect(screen.getByText('300 Hz')).toBeInTheDocument();
+    expect(screen.getByText('550 Hz')).toBeInTheDocument();
+    expect(screen.getByText('800 Hz')).toBeInTheDocument();
   });
 
-  it('shows a miss warning for missed targets', () => {
+  it('hides the letter on unresolved notes and reveals it once resolved', () => {
     render(
       <ChaseTrainingView
         {...baseProps}
-        target={null}
-        lastResolvedTarget={{
-          sent: 'KMU',
-          received: '',
-          outcome: 'missed',
-          scoreDelta: 0,
-        }}
+        notes={[
+          makeNote({ id: 1, char: 'K', status: 'heard' }),
+          makeNote({ id: 2, char: 'M', status: 'correct', resolvedAt: now }),
+          makeNote({ id: 3, char: 'R', status: 'missed', resolvedAt: now }),
+        ]}
       />,
     );
 
-    expect(screen.getByText(/Missed target/i)).toBeInTheDocument();
-    expect(screen.getByText(/Missed group/i)).toBeInTheDocument();
-    expect(screen.getByText('Answer')).toBeInTheDocument();
-    expect(screen.getByText('Typed')).toBeInTheDocument();
-    expect(screen.getAllByText('_').length).toBe(3);
+    expect(screen.getByTestId('chase-note-1')).toHaveTextContent('♪');
+    expect(screen.getByTestId('chase-note-2')).toHaveTextContent('M');
+    expect(screen.getByTestId('chase-note-3')).toHaveTextContent('R');
   });
 
-  it('shows the true answer and typed answer for wrong targets', () => {
+  it('shows the wrong typed character under a wrong note', () => {
     render(
       <ChaseTrainingView
         {...baseProps}
-        target={null}
-        lastResolvedTarget={{
-          sent: 'KMU',
-          received: 'KMM',
-          outcome: 'wrong',
-          scoreDelta: 0,
-        }}
+        notes={[makeNote({ id: 5, char: 'U', status: 'wrong', typedChar: 'V', resolvedAt: now })]}
       />,
     );
 
-    expect(screen.getByText(/Wrong group/i)).toBeInTheDocument();
-    expect(screen.getByText('Answer')).toBeInTheDocument();
-    expect(screen.getByText('Typed')).toBeInTheDocument();
-    expect(screen.getAllByText('K').length).toBeGreaterThan(1);
-    expect(screen.getAllByText('M').length).toBeGreaterThan(1);
+    const note = screen.getByTestId('chase-note-5');
+    expect(note).toHaveTextContent('U');
+    expect(note).toHaveTextContent('V');
+  });
+
+  it('renders the recent-letter ticker with outcomes', () => {
+    render(
+      <ChaseTrainingView
+        {...baseProps}
+        recentLetters={[
+          { id: 1, char: 'K', outcome: 'correct' },
+          { id: 2, char: 'M', outcome: 'missed' },
+        ]}
+      />,
+    );
+
+    const ticker = screen.getByTestId('chase-ticker');
+    expect(ticker).toHaveTextContent('K');
+    expect(ticker).toHaveTextContent('M');
+  });
+
+  it('shows the breather indicator during calm phases', () => {
+    render(<ChaseTrainingView {...baseProps} calm />);
+
+    expect(screen.getByText(/Breather/i)).toBeInTheDocument();
+    expect(screen.getByText(/cruising/i)).toBeInTheDocument();
+  });
+
+  it('forwards typed characters as keystrokes', () => {
+    const onKeystroke = jest.fn();
+    render(<ChaseTrainingView {...baseProps} onKeystroke={onKeystroke} />);
+
+    fireEvent.change(screen.getByPlaceholderText('TYPE WHAT YOU HEAR'), {
+      target: { value: 'ab' },
+    });
+
+    expect(onKeystroke).toHaveBeenCalledTimes(2);
+    expect(onKeystroke).toHaveBeenNthCalledWith(1, 'a');
+    expect(onKeystroke).toHaveBeenNthCalledWith(2, 'b');
+  });
+
+  it('calls onStop when Finish is pressed', () => {
+    const onStop = jest.fn();
+    render(<ChaseTrainingView {...baseProps} onStop={onStop} />);
+
+    fireEvent.click(screen.getByText('Finish'));
+    expect(onStop).toHaveBeenCalled();
   });
 });

src/__tests__/components/features/training/TrainingRouter.resilience.test.tsx

@@ -66,23 +66,25 @@ const echoTraining = {
 const chaseTraining = {
   status: 'idle',
   isTraining: false,
-  target: null,
-  lastResolvedTarget: null,
-  userInput: '',
-  lives: 3,
+  notes: [],
+  recentLetters: [],
+  wpm: 15,
+  calm: false,
   level: 1,
   score: 0,
-  streak: 0,
-  bestStreak: 0,
+  combo: 0,
+  bestCombo: 0,
   correctInLevel: 0,
   levelProgress: 0,
-  groupsCompleted: 0,
+  lettersHeard: 0,
+  correctCount: 0,
+  wrongCount: 0,
+  missedCount: 0,
   lastSessionResult: null,
   startTraining: jest.fn(),
   stopTraining: jest.fn(),
   dismissResults: jest.fn(),
-  handleInputChange: jest.fn(),
-  submitAnswer: jest.fn(),
+  handleKeystroke: jest.fn(),
 } as UseChaseTrainingSessionReturn;
 
 describe('TrainingRouter active session resilience', () => {
@@ -221,6 +223,6 @@ describe('TrainingRouter active session resilience', () => {
     );
 
     expect(screen.getByText(/Chase Mode/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Start Chase/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Start the Stream/i })).toBeInTheDocument();
   });
 });