feat(#87): [Live] Correct FP/Q timing truth, hierarchy, and mobile navigation

Implemented by claude via .agents/dev dispatch.

frontend/src/test/LiveComponents.test.tsx

@@ -209,6 +209,32 @@ describe('TimingTower', () => {
     expect(screen.getByText('DRS range')).toBeInTheDocument()
   })
 
+  it('derives a gap to P1 from best laps when the practice feed omits GapToLeader', () => {
+    const practiceRows = [
+      makeRow('1', 1, 'VER', { BestLapTime: '1:45.944', GapToLeader: '' }),
+      makeRow('4', 2, 'NOR', { BestLapTime: '1:46.134', GapToLeader: '' }),
+      makeRow('16', 3, 'LEC', { BestLapTime: '', GapToLeader: '' }),
+    ]
+    render(
+      <TimingTower
+        rows={practiceRows}
+        session={{
+          MeetingName: 'Belgian Grand Prix',
+          CircuitName: 'Spa',
+          SessionType: 'Practice',
+          SessionName: 'Practice 2',
+          Path: '',
+        }}
+      />,
+    )
+    // Leader shows a clear leader marker, not a fabricated gap.
+    expect(screen.getByText('VER').closest('tr')).toHaveTextContent('—')
+    expect(screen.getByText('+0.190')).toBeInTheDocument()
+    // A driver without a valid best lap gets no invented gap.
+    const lecRow = screen.getByText('LEC').closest('tr')!
+    expect(lecRow).not.toHaveTextContent('+')
+  })
+
   it('renders the SQ1 cutoff after P17 and marks rows below as at risk', () => {
     const sprintRows = Array.from({ length: 22 }, (_, index) =>
       makeRow(String(index + 1), index + 1, `D${index + 1}`),

frontend/src/test/SessionBanner.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { SessionBanner } from '../components/live/SessionBanner'
+import type { LiveStreamData } from '../types'
+
+function makeSnapshot(sessionType: string, sessionName: string): LiveStreamData {
+  return {
+    Drivers: {},
+    DriverInfo: {},
+    Tyres: {},
+    RCMessages: [],
+    Weather: { AirTemp: 0, TrackTemp: 0, Humidity: 0, WindSpeed: 0, WindDir: 0, Rainfall: false },
+    Session: {
+      MeetingName: 'Belgian Grand Prix',
+      CircuitName: 'Spa-Francorchamps',
+      SessionType: sessionType,
+      SessionName: sessionName,
+      Path: '',
+    },
+    TeamRadio: [],
+    TrackStatus: '1',
+    CurrentLap: 0,
+    TotalLaps: 0,
+    Clock: '00:45:00',
+    ClockRefTime: '',
+    ClockExtrapolating: false,
+    Stints: {},
+  }
+}
+
+describe('SessionBanner', () => {
+  it('never renders a race lap counter for a practice session', () => {
+    render(
+      <SessionBanner
+        isLive
+        snapshot={makeSnapshot('Practice', 'Practice 2')}
+        rows={[]}
+        connection="connected"
+        now={0}
+      />,
+    )
+    expect(screen.queryByTestId('live-lap-counter')).not.toBeInTheDocument()
+    // Session identity and clock stay intact.
+    expect(screen.getByText('Belgian Grand Prix')).toBeInTheDocument()
+    expect(screen.getByTestId('live-clock')).toHaveTextContent('00:45:00')
+  })
+
+  it('shows the lap counter for a race session', () => {
+    const snapshot = { ...makeSnapshot('Race', 'Race'), CurrentLap: 12, TotalLaps: 44 }
+    render(
+      <SessionBanner
+        isLive
+        snapshot={snapshot}
+        rows={[]}
+        connection="connected"
+        now={0}
+      />,
+    )
+    expect(screen.getByTestId('live-lap-counter')).toHaveTextContent('L12/44')
+  })
+})

frontend/src/test/TyreDegPanel.test.tsx

@@ -81,14 +81,20 @@ describe('TyreDegPanel', () => {
     expect(panel).toHaveTextContent('→ ~P2')
   })
 
-  it('hides the rejoin estimate outside race sessions and collapses on toggle', () => {
+  it('collapses by default outside race sessions and hides the rejoin estimate when expanded', () => {
     render(<TyreDegPanel rows={snapshotRows(3, '1:30.000')} sessionType="Qualifying" pinned={[]} />)
     const panel = screen.getByTestId('tyredeg-panel')
-    expect(panel).not.toHaveTextContent('~P')
 
-    expect(screen.getAllByTestId('tyredeg-row')).toHaveLength(2)
-    fireEvent.click(screen.getByRole('button', { name: /tyre deg/i }))
+    // Practice/qualifying starts collapsed so the Timing Tower stays above the fold.
     expect(screen.queryAllByTestId('tyredeg-row')).toHaveLength(0)
+    fireEvent.click(screen.getByRole('button', { name: /tyre deg/i }))
+    expect(screen.getAllByTestId('tyredeg-row')).toHaveLength(2)
+    expect(panel).not.toHaveTextContent('~P')
+  })
+
+  it('starts expanded during a race', () => {
+    render(<TyreDegPanel rows={snapshotRows(3, '1:30.000')} sessionType="Race" pinned={[]} />)
+    expect(screen.getAllByTestId('tyredeg-row')).toHaveLength(2)
   })
 
   it('limits rows to the top ten plus pinned drivers', () => {

frontend/src/test/live.test.ts

@@ -1,12 +1,15 @@
 import { describe, expect, it } from 'vitest'
 import {
+  bestLapGaps,
   compoundClass,
   compoundLetter,
   extrapolateClock,
+  isLiveSessionActive,
   latestRaceControl,
   liveSessionDisplay,
   loadPinnedDrivers,
   mergeVisibleSectors,
+  parseLapTimeSeconds,
   positionDeltaClass,
   parseLiveStateEvent,
   rcFlagClass,
@@ -279,6 +282,43 @@ describe('live qualifying display', () => {
   })
 })
 
+describe('practice/qualifying computed gaps', () => {
+  it('parses lap-time strings into seconds and rejects invalid input', () => {
+    expect(parseLapTimeSeconds('1:45.944')).toBeCloseTo(105.944, 3)
+    expect(parseLapTimeSeconds('45.944')).toBeCloseTo(45.944, 3)
+    expect(parseLapTimeSeconds('')).toBeNull()
+    expect(parseLapTimeSeconds(undefined)).toBeNull()
+    expect(parseLapTimeSeconds('-')).toBeNull()
+    expect(parseLapTimeSeconds('nope')).toBeNull()
+  })
+
+  it('derives a gap to P1 from valid best laps only, flagging the leader', () => {
+    const gaps = bestLapGaps([
+      timingRow('1', 1, { BestLapTime: '1:45.944' }),
+      timingRow('4', 2, { BestLapTime: '1:46.134' }),
+      timingRow('16', 3, { BestLapTime: '' }),
+    ])
+    expect(gaps['1']).toEqual({ isLeader: true, gap: '' })
+    expect(gaps['4']).toEqual({ isLeader: false, gap: '+0.190' })
+    // No valid best lap → no fabricated gap.
+    expect(gaps['16']).toBeUndefined()
+  })
+
+  it('returns no gaps when nobody has set a lap', () => {
+    expect(bestLapGaps([timingRow('1', 1, { BestLapTime: '' })])).toEqual({})
+  })
+})
+
+describe('live session activity', () => {
+  it('is active only when the feed reports a live session with data', () => {
+    expect(isLiveSessionActive({ is_live: true, data: snapshot })).toBe(true)
+    expect(isLiveSessionActive({ is_live: true, data: null })).toBe(false)
+    expect(isLiveSessionActive({ is_live: false, data: snapshot })).toBe(false)
+    expect(isLiveSessionActive(null)).toBe(false)
+    expect(isLiveSessionActive(undefined)).toBe(false)
+  })
+})
+
 describe('visible sector display', () => {
   it('holds S1 and S2 through temporary blanks while a flying lap is active', () => {
     const first = [timingRow('4', 1, {