Complete React live and Race Hub views

frontend/src/components/RaceControlView.tsx

@@ -0,0 +1,69 @@
+import type { RaceControlMessage } from '../types'
+
+interface Props {
+  messages: RaceControlMessage[]
+}
+
+function formatEventTime(date: string): string {
+  if (!date) return '—'
+  const parsed = new Date(date)
+  if (Number.isNaN(parsed.getTime())) return date
+  return parsed.toLocaleTimeString('en-GB', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+function eventLabel(message: RaceControlMessage): string {
+  return message.flag || message.category || 'Message'
+}
+
+export function RaceControlView({ messages }: Props) {
+  if (messages.length === 0) {
+    return (
+      <div className="missing-notice">
+        Race control messages not ingested. Run{' '}
+        <code>box-box --ingest-session &lt;key&gt;</code> to load this dataset.
+      </div>
+    )
+  }
+
+  const rows = [...messages].sort((a, b) => a.date.localeCompare(b.date))
+
+  return (
+    <div className="scroll-x" data-testid="race-control-view">
+      <table className="data-table" style={{ minWidth: 620 }}>
+        <thead>
+          <tr>
+            <th>Time</th>
+            <th className="c">Lap</th>
+            <th>Event</th>
+            <th className="c hide-mobile">Driver</th>
+            <th>Message</th>
+          </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>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}