Add race control visuals and driver names in laps view

frontend/src/components/LapsView.tsx

@@ -1,8 +1,9 @@
-import type { Lap } from '../types'
-import { formatLapTime } from '../utils'
+import type { Driver, Lap } from '../types'
+import { formatGap, formatLapTime, teamColor } from '../utils'
 
 interface Props {
   laps: Lap[]
+  drivers?: Driver[]
 }
 
 interface DriverLapSummary {
@@ -13,7 +14,7 @@ interface DriverLapSummary {
   pitOuts: number
 }
 
-export function LapsView({ laps }: Props) {
+export function LapsView({ laps, drivers = [] }: Props) {
   if (laps.length === 0) {
     return (
       <div className="missing-notice">
@@ -58,45 +59,52 @@ export function LapsView({ laps }: Props) {
     return a.driver_number - b.driver_number
   })
 
+  const driversByNumber = new Map(drivers.map((driver) => [driver.driver_number, driver]))
   const fastest = rows.find((row) => row.best?.lap_duration != null)?.best
+  const fastestTime = fastest?.lap_duration ?? null
 
   return (
     <div className="scroll-x" data-testid="laps-view">
-      <table className="data-table" style={{ minWidth: 460, maxWidth: 620 }}>
+      <table className="data-table" style={{ minWidth: 540, maxWidth: 700 }}>
         <thead>
           <tr>
             <th>Driver</th>
             <th className="c">Best Lap</th>
             <th className="r">Best Time</th>
+            <th className="r">Gap</th>
             <th className="r hide-mobile">Laps</th>
             <th className="r hide-mobile">Pit Outs</th>
           </tr>
         </thead>
         <tbody>
           {rows.map((row) => {
+            const driver = driversByNumber.get(row.driver_number)
+            const driverName =
+              driver?.full_name || driver?.broadcast_name || driver?.name_acronym || `#${row.driver_number}`
+            const colour = teamColor(driver?.team_colour)
             const isFastest =
               fastest &&
               row.best?.driver_number === fastest.driver_number &&
               row.best?.lap_number === fastest.lap_number
+            const gap =
+              row.best?.lap_duration != null && fastestTime != null
+                ? row.best.lap_duration - fastestTime
+                : null
 
             return (
-              <tr key={row.driver_number}>
-                <td className="mono" style={{ fontWeight: 700 }}>
-                  #{row.driver_number}
+              <tr key={row.driver_number} className={isFastest ? 'lap-fastest-row' : undefined}>
+                <td style={{ fontWeight: 700 }}>
+                  <span className="drv-cell">
+                    <span className="drv-bar" style={{ background: colour }} />
+                    <span>{driverName}</span>
+                    <span className="drv-num">{row.driver_number}</span>
+                  </span>
                 </td>
                 <td className="c mono">
-                  {row.best ? (
-                    <>
-                      {row.best.lap_number}
-                      {isFastest && (
-                        <span style={{ color: 'var(--red)', marginLeft: 6 }}>FASTEST</span>
-                      )}
-                    </>
-                  ) : (
-                    '—'
-                  )}
+                  {row.best ? row.best.lap_number : '—'}
                 </td>
                 <td className="r">{formatLapTime(row.best?.lap_duration)}</td>
+                <td className="r">{isFastest ? '—' : formatGap(gap)}</td>
                 <td className="r hide-mobile">{row.lastLap || row.total}</td>
                 <td className="r hide-mobile" style={{ color: 'var(--text-3)' }}>
                   {row.pitOuts || '—'}

frontend/src/components/RaceControlView.tsx

@@ -1,4 +1,5 @@
 import type { RaceControlMessage } from '../types'
+import { rcFlagClass } from '../lib/live'
 
 interface Props {
   messages: RaceControlMessage[]
@@ -19,6 +20,24 @@ function eventLabel(message: RaceControlMessage): string {
   return message.flag || message.category || 'Message'
 }
 
+function eventClass(message: RaceControlMessage): string {
+  const flagClass = rcFlagClass(message.flag ?? '')
+  if (flagClass) return flagClass
+
+  const category = (message.category ?? '').toLowerCase()
+  const text = `${message.message ?? ''} ${message.category ?? ''}`.toLowerCase()
+
+  if (category.includes('safety') || text.includes('safety car')) return 'rc-flag-sc'
+  if (category === 'drs' || text.includes('drs')) return 'rc-flag-drs'
+  if (text.includes('virtual safety car')) return 'rc-flag-vsc'
+  if (text.includes('red flag')) return 'rc-flag-red'
+  if (text.includes('yellow')) return 'rc-flag-yellow'
+  if (text.includes('green light') || text.includes('green flag')) return 'rc-flag-green'
+  if (text.includes('chequered') || text.includes('checkered')) return 'rc-flag-chequered'
+
+  return 'rc-flag-other'
+}
+
 export function RaceControlView({ messages }: Props) {
   if (messages.length === 0) {
     return (
@@ -44,24 +63,27 @@ export function RaceControlView({ messages }: Props) {
           </tr>
         </thead>
         <tbody>
-          {rows.map((message, index) => (
-            <tr key={`${message.date}-${index}`}>
-              <td className="mono" style={{ color: 'var(--text-3)' }}>
-                {formatEventTime(message.date)}
-              </td>
-              <td className="c mono">{message.lap_number ?? '—'}</td>
-              <td>
-                <span style={{ fontWeight: 700 }}>{eventLabel(message)}</span>
-                {message.scope && (
-                  <span style={{ color: 'var(--text-3)', marginLeft: 6 }}>
-                    {message.scope.toLowerCase()}
-                  </span>
-                )}
-              </td>
-              <td className="c mono hide-mobile">{message.driver_number ?? '—'}</td>
-              <td style={{ whiteSpace: 'normal' }}>{message.message || '—'}</td>
-            </tr>
-          ))}
+          {rows.map((message, index) => {
+            const visualClass = eventClass(message)
+            return (
+              <tr className={`race-control-row ${visualClass}`} key={`${message.date}-${index}`}>
+                <td className="mono rc-time-cell">
+                  {formatEventTime(message.date)}
+                </td>
+                <td className="c mono">{message.lap_number ?? '—'}</td>
+                <td>
+                  <span className={`rc-event-pill rc-flag ${visualClass}`}>{eventLabel(message)}</span>
+                  {message.scope && (
+                    <span className="rc-scope">
+                      {message.scope.toLowerCase()}
+                    </span>
+                  )}
+                </td>
+                <td className="c mono hide-mobile">{message.driver_number ?? '—'}</td>
+                <td className="rc-message-cell">{message.message || '—'}</td>
+              </tr>
+            )
+          })}
         </tbody>
       </table>
     </div>

frontend/src/lib/live.ts

@@ -109,6 +109,10 @@ const RC_FLAG_CSS: Record<string, string> = {
   YELLOW:               'rc-flag-yellow',
   'DOUBLE YELLOW':      'rc-flag-yellow',
   RED:                  'rc-flag-red',
+  BLUE:                 'rc-flag-blue',
+  BLACK:                'rc-flag-black',
+  'BLACK AND ORANGE':   'rc-flag-black',
+  'BLACK AND WHITE':    'rc-flag-black',
   SC:                   'rc-flag-sc',
   'SAFETY CAR':         'rc-flag-sc',
   VSC:                  'rc-flag-vsc',

frontend/src/pages/RaceHubPage.tsx

@@ -315,7 +315,7 @@ export function RaceHubPage({ sessionKey }: Props) {
               <span className="sec-meta mono">{data.laps.length} samples</span>
             )}
           </div>
-          <LapsView laps={data.laps} />
+          <LapsView laps={data.laps} drivers={data.drivers} />
         </div>
       )}
 

frontend/src/styles/app.css

@@ -421,6 +421,10 @@ a { color: inherit; text-decoration: none; }
 }
 .data-table tbody tr:last-child td { border-bottom: none; }
 .data-table tbody tr:hover { background: var(--surface-h); }
+.data-table tbody tr.lap-fastest-row td,
+.data-table tbody tr.lap-fastest-row .drv-num {
+  color: var(--purple);
+}
 
 .data-table td.r { text-align: right; font-family: var(--f-mono); }
 .data-table td.c { text-align: center; }
@@ -705,6 +709,71 @@ a { color: inherit; text-decoration: none; }
 .rc-flag-sc       { background: rgba(255,214,0,.15);    color: var(--yellow); border-color: rgba(255,214,0,.3); }
 .rc-flag-vsc      { background: rgba(194,120,255,.15);  color: var(--purple); border-color: rgba(194,120,255,.3); }
 .rc-flag-chequered { background: rgba(200,200,200,.10); color: var(--text-2); border-color: var(--border-2); }
+.rc-flag-blue     { background: rgba(67,156,255,.15);   color: #66aaff;       border-color: rgba(67,156,255,.3); }
+.rc-flag-black    { background: rgba(10,10,10,.55);      color: var(--text-2); border-color: rgba(255,255,255,.18); }
+.rc-flag-drs      { background: rgba(0,212,255,.13);     color: #00d4ff;       border-color: rgba(0,212,255,.28); }
+.rc-flag-other    { background: var(--surface-2);         color: var(--text-2); border-color: var(--border-2); }
+
+.race-control-row {
+  position: relative;
+}
+
+.race-control-row td:first-child {
+  border-left: 3px solid transparent;
+}
+
+.race-control-row.rc-flag-green td:first-child { border-left-color: var(--green); }
+.race-control-row.rc-flag-yellow td:first-child,
+.race-control-row.rc-flag-sc td:first-child { border-left-color: var(--yellow); }
+.race-control-row.rc-flag-red td:first-child { border-left-color: var(--red); }
+.race-control-row.rc-flag-vsc td:first-child { border-left-color: var(--purple); }
+.race-control-row.rc-flag-blue td:first-child { border-left-color: #66aaff; }
+.race-control-row.rc-flag-drs td:first-child { border-left-color: #00d4ff; }
+.race-control-row.rc-flag-chequered td:first-child { border-left-color: var(--text-2); }
+
+.race-control-row.rc-flag-yellow td,
+.race-control-row.rc-flag-sc td {
+  background: rgba(255,214,0,.035);
+}
+
+.race-control-row.rc-flag-red td {
+  background: rgba(225,6,0,.045);
+}
+
+.race-control-row.rc-flag-green td {
+  background: rgba(57,199,58,.03);
+}
+
+.rc-time-cell {
+  color: var(--text-3);
+}
+
+.rc-event-pill {
+  align-items: center;
+  display: inline-flex;
+  gap: 5px;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.rc-event-pill::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: currentColor;
+  flex: 0 0 auto;
+}
+
+.rc-scope {
+  color: var(--text-3);
+  margin-left: 6px;
+}
+
+.rc-message-cell {
+  white-space: normal;
+}
 
 .rc-category {
   flex-shrink: 0;

frontend/src/test/LapsView.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { LapsView } from '../components/LapsView'
-import type { Lap } from '../types'
+import type { Driver, Lap } from '../types'
 
 const laps: Lap[] = [
   {
@@ -33,15 +33,46 @@ const laps: Lap[] = [
   },
 ]
 
+const drivers: Driver[] = [
+  {
+    driver_number: 44,
+    name_acronym: 'HAM',
+    full_name: 'Lewis Hamilton',
+    first_name: 'Lewis',
+    last_name: 'Hamilton',
+    team_name: 'Ferrari',
+    team_colour: 'E80020',
+    headshot_url: '',
+    broadcast_name: 'L HAMILTON',
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+  {
+    driver_number: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    first_name: 'Max',
+    last_name: 'Verstappen',
+    team_name: 'Red Bull Racing',
+    team_colour: '3671C6',
+    headshot_url: '',
+    broadcast_name: 'M VERSTAPPEN',
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+]
+
 describe('LapsView', () => {
   it('renders compact best-lap rows by driver', () => {
-    render(<LapsView laps={laps} />)
+    render(<LapsView laps={laps} drivers={drivers} />)
 
     expect(screen.getByTestId('laps-view')).toBeInTheDocument()
-    expect(screen.getByText('#1')).toBeInTheDocument()
-    expect(screen.getByText('#44')).toBeInTheDocument()
+    expect(screen.getByText('Max Verstappen')).toBeInTheDocument()
+    expect(screen.getByText('Lewis Hamilton')).toBeInTheDocument()
     expect(screen.getByText('1:12.100')).toBeInTheDocument()
-    expect(screen.getByText('FASTEST')).toBeInTheDocument()
+    expect(screen.getByText('+3.100')).toBeInTheDocument()
+    expect(screen.queryByText('FASTEST')).not.toBeInTheDocument()
+    expect(screen.getByText('Max Verstappen').closest('tr')).toHaveClass('lap-fastest-row')
   })
 
   it('shows a missing-data state when no laps are present', () => {