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

Implemented by claude via .agents/dev dispatch.

frontend/src/components/Nav.tsx

@@ -1,6 +1,17 @@
 import { Link } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { fetchLiveState } from '../api'
+import { isLiveSessionActive } from '../lib/live'
 
 export function Nav() {
+  const { data: liveState } = useQuery({
+    queryKey: ['live-state'],
+    queryFn: fetchLiveState,
+    staleTime: 5_000,
+    refetchInterval: 30_000,
+  })
+  const liveActive = isLiveSessionActive(liveState)
+
   return (
     <nav className="app-nav">
       <Link to="/" className="nav-logo">
@@ -10,8 +21,16 @@ export function Nav() {
         <Link to="/" activeProps={{ className: 'active' }} activeOptions={{ exact: true }}>
           Command
         </Link>
-        <Link to="/live" activeProps={{ className: 'active' }}>
+        <Link
+          to="/live"
+          className={liveActive ? 'nav-live nav-live-on' : 'nav-live'}
+          activeProps={{ className: 'active' }}
+          data-testid="nav-live"
+          data-live-active={liveActive ? 'true' : 'false'}
+        >
+          {liveActive && <span className="nav-live-dot" aria-hidden="true" />}
           Live
+          {liveActive && <span className="sr-only"> session active</span>}
         </Link>
         <Link to="/race-hub" search={{}} activeProps={{ className: 'active' }}>
           Race Hub

frontend/src/components/live/RaceControlFeed.tsx

@@ -80,7 +80,9 @@ export function RaceControlFeed({ messages, driverInfo }: Props) {
     <section className="live-rc panel-glass">
       <div className="sec-header sticky-header">
         <span className="sec-title">Race Control</span>
-        {messages.length > 0 && <span className="sec-meta">{messages.length} messages</span>}
+        <span className="sec-meta" data-testid="rc-timezone">
+          {messages.length > 0 ? `${messages.length} messages · ` : ''}times UTC
+        </span>
       </div>
       {latest.length === 0 ? (
         <div className="missing-notice">No race control messages in the current live snapshot.</div>
@@ -102,7 +104,7 @@ export function RaceControlFeed({ messages, driverInfo }: Props) {
 
             return (
               <div className={`live-rc-row${flashClass}`} key={key}>
-                <span className="rc-time">{message.Time || '--:--'}</span>
+                <span className="rc-time" title="UTC">{message.Time || '--:--'}</span>
                 {message.Lap > 0 && <span className="rc-lap">L{message.Lap}</span>}
                 {message.Flag
                   ? <span className={`rc-flag ${rcFlagClass(message.Flag)}`}>{message.Flag}</span>

frontend/src/components/live/SessionBanner.tsx

@@ -38,9 +38,11 @@ export function SessionBanner({ isLive, isArchive = false, snapshot, rows, conne
           <div className="live-banner-meta">
             {display.advanceCount && <span>{display.advanceCount} advance</span>}
             {atRiskLabel && <span>{atRiskLabel}</span>}
-            <span>
-              L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
-            </span>
+            {display.isRace && (
+              <span data-testid="live-lap-counter">
+                L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
+              </span>
+            )}
             <span className={isLive ? 'live-state live-state-on' : 'live-state'}>{stateLabel}</span>
           </div>
         </div>

frontend/src/components/live/TimingTower.tsx

@@ -1,9 +1,10 @@
-import { useState, Fragment } from 'react'
+import { useState, useMemo, Fragment } from 'react'
 import { teamColor } from '../../utils'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 import type { LiveSessionMeta, LiveStintData } from '../../types'
 import type { LiveTimingRow } from '../../lib/live'
 import {
+  bestLapGaps,
   driverCode,
   liveSessionDisplay,
   positionDelta,
@@ -62,6 +63,10 @@ export function TimingTower({
   const isQuali = sessionDisplay.isQualifying || !isRace
   const columnCount = 7 + (isRace ? 3 : 0) + (isQuali ? 3 : 0)
 
+  // Practice/qualifying: derive a display-only gap to P1 from valid best laps
+  // when the upstream feed omits GapToLeader. Empty for races (feed is truth).
+  const practiceGaps = useMemo(() => bestLapGaps(isRace ? [] : rows), [isRace, rows])
+
   return (
     <div className="scroll-x">
       <table className="data-table live-tower" style={{ minWidth: 760 }}>
@@ -71,9 +76,9 @@ export function TimingTower({
             {isRace && <th>Δ</th>}
             <th>Driver</th>
             <th>Tyre</th>
-            <th>Last Lap</th>
-            <th 
-              className="interactive" 
+            <th className={isRace ? undefined : 'hide-mobile'}>Last Lap</th>
+            <th
+              className="interactive"
               onClick={() => setGapMode(g => g === 'interval' ? 'leader' : 'interval')}
               title="Click to toggle Gap vs Interval"
               style={{ cursor: 'pointer', textDecoration: 'underline' }}
@@ -81,10 +86,10 @@ export function TimingTower({
               {gapMode === 'interval' && isRace ? 'Interval' : 'Gap to P1'}
             </th>
             {isRace && <th>Trend</th>}
-            {isQuali && <th>S1</th>}
-            {isQuali && <th>S2</th>}
-            {isQuali && <th>S3</th>}
-            <th className="hide-mobile">Best</th>
+            {isQuali && <th className="hide-mobile">S1</th>}
+            {isQuali && <th className="hide-mobile">S2</th>}
+            {isQuali && <th className="hide-mobile">S3</th>}
+            <th className={isRace ? 'hide-mobile' : undefined}>Best</th>
             {isRace && <th className="hide-mobile r">Laps</th>}
             <th className="r"></th>
           </tr>
@@ -102,7 +107,15 @@ export function TimingTower({
               driver.Cutoff
             const showCutoffAfter = row.Position === sessionDisplay.cutoffPosition
 
-            const gapText = gapMode === 'interval' && isRace ? (driver.Interval || driver.GapToLeader) : driver.GapToLeader
+            let gapText: string
+            if (isRace) {
+              gapText = gapMode === 'interval' ? (driver.Interval || driver.GapToLeader) : driver.GapToLeader
+            } else if (driver.GapToLeader) {
+              gapText = driver.GapToLeader
+            } else {
+              const computed = practiceGaps[row.RacingNumber]
+              gapText = computed ? (computed.isLeader ? '—' : computed.gap) : ''
+            }
             const intervalAnnotation =
               gapMode === 'interval' && isRace && row.Position > 1
                 ? intervalMeaning(parseIntervalSeconds(gapText))
@@ -153,7 +166,10 @@ export function TimingTower({
                   <td>
                     <span className={`tyre-badge ${tyreClass(row.Tyre)}`}>{tyreLabel(row.Tyre)}</span>
                   </td>
-                  <td className={driver.LastLapOB ? 'mono lap-ob' : driver.LastLapPB ? 'mono lap-pb' : 'mono'}>
+                  <td className={[
+                    isRace ? '' : 'hide-mobile',
+                    driver.LastLapOB ? 'mono lap-ob' : driver.LastLapPB ? 'mono lap-pb' : 'mono',
+                  ].filter(Boolean).join(' ')}>
                     {driver.LastLapTime || '-'}
                   </td>
                   <td className="mono">
@@ -171,11 +187,14 @@ export function TimingTower({
                     </td>
                   )}
 
-                  {isQuali && <td>{renderSector(0)}</td>}
-                  {isQuali && <td>{renderSector(1)}</td>}
-                  {isQuali && <td>{renderSector(2)}</td>}
+                  {isQuali && <td className="hide-mobile">{renderSector(0)}</td>}
+                  {isQuali && <td className="hide-mobile">{renderSector(1)}</td>}
+                  {isQuali && <td className="hide-mobile">{renderSector(2)}</td>}
 
-                  <td className={`hide-mobile ${driver.BestLapOB ? 'mono lap-ob' : 'mono'}`}>
+                  <td className={[
+                    isRace ? 'hide-mobile' : '',
+                    driver.BestLapOB ? 'mono lap-ob' : 'mono',
+                  ].filter(Boolean).join(' ')}>
                     {driver.BestLapTime || '-'}
                   </td>
                   
@@ -208,6 +227,16 @@ export function TimingTower({
                                  <div className="mono">{driver.NumberOfLaps || 0}</div>
                               </div>
                             )}
+                            {!isRace && driver.Sectors?.some((sec) => sec?.Value) && (
+                              <div data-testid="expanded-sectors">
+                                 <div className="mono" style={{ color: 'var(--text-3)', fontSize: '10px', marginBottom: '4px' }}>SECTORS</div>
+                                 <div className="mono" style={{ display: 'flex', gap: '10px' }}>
+                                    {renderSector(0)}
+                                    {renderSector(1)}
+                                    {renderSector(2)}
+                                 </div>
+                              </div>
+                            )}
                             {driver.SpeedTrap && (
                               <div>
                                  <div className="mono" style={{ color: 'var(--text-3)', fontSize: '10px', marginBottom: '4px' }}>SPEED TRAP</div>

frontend/src/components/live/TyreDegPanel.tsx

@@ -52,7 +52,10 @@ function StintSparkline({ seconds }: { seconds: number[] }) {
 }
 
 export function TyreDegPanel({ rows, sessionType, pinned }: Props) {
-  const [collapsed, setCollapsed] = useState(false)
+  const isRace = isRaceSession(sessionType)
+  // In practice/qualifying deg trends are secondary — collapse by default so
+  // the Timing Tower stays above the fold. Races keep it open.
+  const [collapsed, setCollapsed] = useState(!isRace)
   const [stints, setStints] = useState<StintHistoryMap>({})
 
   // One lap-history update per received snapshot (rows is rebuilt per snapshot).
@@ -61,8 +64,6 @@ export function TyreDegPanel({ rows, sessionType, pinned }: Props) {
     setStints((prev) => recordStintSamples(prev, rows.map(stintInputFromRow)))
   }, [rows])
 
-  const isRace = isRaceSession(sessionType)
-
   const visible = useMemo(
     () =>
       rows.filter(