fix(race-story): sync chapter highlight and empty-state E2E (#68)

Clamp active-chapter detection to the same scrub bounds as chapter clicks,
keep an explicit selection on click for out-of-window timestamps, point E2E
at the empty-state card, and move Race Story empty-state styles out of app.css.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/test/ChapterStrip.test.tsx

@@ -103,4 +103,26 @@ describe('ChapterStrip', () => {
     expect(index).toBe(1)
     expect(scrub).toBeCloseTo(0.6, 2)
   })
+
+  it('highlights an explicitly selected chapter even when scrub is outside its raw window', () => {
+    // Scrub parked at chart start; chapter 1's raw times are mid-race, but selection wins.
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    render(
+      <QueryClientProvider client={queryClient}>
+        <ChapterStrip
+          chapters={chapters}
+          scrubTime={0}
+          tMin={tMin}
+          tRange={tRange}
+          tourActive={false}
+          tourChapterIndex={null}
+          selectedChapterIndex={1}
+          onChapterClick={vi.fn()}
+          onTourToggle={vi.fn()}
+        />
+      </QueryClientProvider>,
+    )
+    expect(screen.getByTestId('chapter-card-1')).toHaveClass('active')
+    expect(screen.getByTestId('chapter-card-0')).not.toHaveClass('active')
+  })
 })

frontend/src/test/RaceStoryCanvas.test.tsx

@@ -187,6 +187,46 @@ describe('RaceStoryCanvas replay map', () => {
     expect(screen.getByTestId('chapter-card-0')).not.toHaveClass('active')
   })
 
+  it('highlights out-of-window chapters after click (clamped scrub + selection)', async () => {
+    // Position samples start at 13:05; start chapter ends at 13:01 — outside the window.
+    renderCanvas({
+      positions: [
+        { session_key: 99, driver_number: 1, meeting_key: 1, date: '2025-05-25T13:05:00Z', position: 1 },
+        { session_key: 99, driver_number: 1, meeting_key: 1, date: '2025-05-25T13:10:00Z', position: 1 },
+      ],
+      chapters: [
+        {
+          kind: 'start',
+          title: 'Start',
+          headline: 'Lights out before samples',
+          start_lap: 1,
+          end_lap: 1,
+          start_time: '2025-05-25T13:00:00Z',
+          end_time: '2025-05-25T13:01:00Z',
+          driver_numbers: [],
+        },
+        {
+          kind: 'finish',
+          title: 'Finish',
+          headline: 'Flag after samples',
+          start_lap: 78,
+          end_lap: 78,
+          start_time: '2025-05-25T13:20:00Z',
+          end_time: '2025-05-25T13:21:00Z',
+          driver_numbers: [],
+        },
+      ],
+    })
+
+    fireEvent.click(screen.getByTestId('chapter-card-0'))
+    await waitFor(() => expect(screen.getByTestId('chapter-card-0')).toHaveClass('active'))
+    expect(screen.getByTestId('chapter-card-1')).not.toHaveClass('active')
+
+    fireEvent.click(screen.getByTestId('chapter-card-1'))
+    await waitFor(() => expect(screen.getByTestId('chapter-card-1')).toHaveClass('active'))
+    expect(screen.getByTestId('chapter-card-0')).not.toHaveClass('active')
+  })
+
   it('renders the empty-state card when positions are unavailable', () => {
     renderCanvas({
       datasets: { positions: { status: 'missing', source: 'local', count: 0 } },

frontend/src/test/chapters.test.ts

@@ -60,6 +60,41 @@ describe('chapters lib', () => {
     expect(activeChapterIndex(sampleChapters, scrub, tMin, tRange)).toBe(1)
   })
 
+  it('activates chapters whose timestamps clamp outside the position window', () => {
+    // Position samples only cover 13:05–13:10; chapters sit before/after that window.
+    const tMin = new Date('2025-05-25T13:05:00Z').getTime()
+    const tMax = new Date('2025-05-25T13:10:00Z').getTime()
+    const tRange = tMax - tMin
+    const outOfWindow: Chapter[] = [
+      {
+        kind: 'start',
+        title: 'Start',
+        headline: 'Lights out',
+        start_lap: 1,
+        end_lap: 1,
+        start_time: '2025-05-25T13:00:00Z',
+        end_time: '2025-05-25T13:01:00Z',
+        driver_numbers: [],
+      },
+      {
+        kind: 'finish',
+        title: 'Finish',
+        headline: 'Chequered flag',
+        start_lap: 78,
+        end_lap: 78,
+        start_time: '2025-05-25T13:20:00Z',
+        end_time: '2025-05-25T13:21:00Z',
+        driver_numbers: [],
+      },
+    ]
+
+    expect(chapterStartScrub(outOfWindow[0], tMin, tRange)).toBe(0)
+    expect(chapterStartScrub(outOfWindow[1], tMin, tRange)).toBe(1)
+    expect(activeChapterIndex(outOfWindow, 0, tMin, tRange)).toBe(0)
+    expect(activeChapterIndex(outOfWindow, 1, tMin, tRange)).toBe(1)
+    expect(activeChapterIndex(outOfWindow, 0.5, tMin, tRange)).toBeNull()
+  })
+
   it('splits 90s evenly across chapters', () => {
     expect(chapterTourDurations(sampleChapters)).toEqual([45_000, 45_000])
   })