Complete React live and Race Hub views

frontend/src/components/live/RaceControlFeed.tsx

@@ -0,0 +1,33 @@
+import type { LiveRCMessage } from '../../types'
+import { latestRaceControl } from '../../lib/live'
+
+interface Props {
+  messages: LiveRCMessage[]
+}
+
+export function RaceControlFeed({ messages }: Props) {
+  const latest = latestRaceControl(messages)
+
+  return (
+    <section className="live-rc">
+      <div className="sec-header">
+        <span className="sec-title">Race Control</span>
+        {messages.length > 0 && <span className="sec-meta">{messages.length} messages</span>}
+      </div>
+      {latest.length === 0 ? (
+        <div className="missing-notice">No race control messages in the current live snapshot.</div>
+      ) : (
+        <div className="live-rc-list">
+          {latest.map((message, index) => (
+            <div className="live-rc-row" key={`${message.Time}-${message.Message}-${index}`}>
+              <span className="rc-time">{message.Time || '--:--'}</span>
+              {message.Flag && <span className="rc-flag">{message.Flag}</span>}
+              {message.Lap > 0 && <span className="rc-lap">L{message.Lap}</span>}
+              <span>{message.Message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

frontend/src/components/live/SessionBanner.tsx

@@ -0,0 +1,37 @@
+import type { LiveStreamData } from '../../types'
+import { extrapolateClock, trackStatusClass, trackStatusLabel } from '../../lib/live'
+
+interface Props {
+  isLive: boolean
+  snapshot: LiveStreamData
+  connection: 'connected' | 'connecting' | 'disconnected' | 'error'
+  now: number
+}
+
+export function SessionBanner({ isLive, snapshot, connection, now }: Props) {
+  const session = snapshot.Session
+  const clock = extrapolateClock(snapshot.Clock, snapshot.ClockRefTime, snapshot.ClockExtrapolating, now)
+  const status = snapshot.TrackStatus ? trackStatusLabel(snapshot.TrackStatus) : ''
+
+  return (
+    <section className="live-banner">
+      <div className="live-banner-main">
+        <span className={`live-conn live-conn-${connection}`}>{connection}</span>
+        <div>
+          <h1>{session?.MeetingName || 'Live Timing'}</h1>
+          <p>
+            {[session?.SessionName, session?.CircuitName].filter(Boolean).join(' · ') || 'F1 live feed'}
+          </p>
+        </div>
+      </div>
+      <div className="live-banner-meta">
+        <span className="mono">
+          Lap <strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
+        </span>
+        {status && <span className={`track-status ${trackStatusClass(snapshot.TrackStatus)}`}>{status}</span>}
+        {clock && <span className="mono">{clock}</span>}
+        <span className={isLive ? 'live-state live-state-on' : 'live-state'}>{isLive ? 'live' : 'stale'}</span>
+      </div>
+    </section>
+  )
+}

frontend/src/components/live/TimingTower.tsx

@@ -0,0 +1,72 @@
+import { teamColor } from '../../utils'
+import type { LiveStreamData } from '../../types'
+import { driverCode, positionDelta, sortLiveTimingRows, tyreClass, tyreLabel } from '../../lib/live'
+
+interface Props {
+  snapshot: LiveStreamData
+}
+
+export function TimingTower({ snapshot }: Props) {
+  const rows = sortLiveTimingRows(snapshot)
+
+  if (rows.length === 0) {
+    return (
+      <div className="missing-notice">
+        Live timing is connected, but no driver timing rows have arrived yet.
+      </div>
+    )
+  }
+
+  return (
+    <div className="scroll-x">
+      <table className="data-table live-tower">
+        <thead>
+          <tr>
+            <th>Pos</th>
+            <th>Δ</th>
+            <th>Driver</th>
+            <th>Tyre</th>
+            <th>Last Lap</th>
+            <th>Gap</th>
+            <th>Best</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            const driver = row.Driver
+            return (
+              <tr
+                key={row.RacingNumber}
+                className={[
+                  driver.InPit ? 'in-pit' : '',
+                  driver.PitOut ? 'pit-out' : '',
+                  driver.Retired ? 'retired' : '',
+                ].filter(Boolean).join(' ')}
+              >
+                <td className="mono pos-n">{row.Position}</td>
+                <td className="pos-delta">{positionDelta(driver)}</td>
+                <td>
+                  <div className="drv-cell">
+                    <div className="drv-bar" style={{ background: teamColor(row.Info?.TeamColour) }} />
+                    <span className="drv-code">{driverCode(row)}</span>
+                    <span className="drv-num">{row.RacingNumber}</span>
+                    {driver.InPit && <span className="badge badge-pit">PIT</span>}
+                    {driver.Retired && <span className="badge badge-out">OUT</span>}
+                  </div>
+                </td>
+                <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'}>
+                  {driver.LastLapTime || '-'}
+                </td>
+                <td className="mono">{driver.GapToLeader || driver.Interval || '-'}</td>
+                <td className={driver.BestLapOB ? 'mono lap-ob' : 'mono'}>{driver.BestLapTime || '-'}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}