feat(ui): Session-aware live timing enhancements

2026-08-08 04:06:18 -04:00 · 2026-07-03 01:46:35 -04:00
parent c3ad7743e6
commit 8d5ab4d7a7
17 changed files with 311 additions and 102 deletions
--- a/frontend/src/components/CliCommands.tsx
+++ b/frontend/src/components/CliCommands.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Copy, Check } from 'lucide-react'

 interface Command {
  comment?: string
@@ -39,8 +40,9 @@ function CliCommandLine({ cmd }: { cmd: string }) {
  return (
    <div className="cli-cmd-row">
      <code className="cli-cmd">{cmd}</code>
-      <button type="button" className="cli-copy-btn" onClick={handleCopy} aria-label={`Copy ${cmd}`}>
-        {copied ? 'Copied' : 'Copy'}
+      <button type="button" className="cli-copy-btn interactive" onClick={handleCopy} aria-label={`Copy ${cmd}`} style={{ display: 'flex', alignItems: 'center', gap: '4px', padding: '4px 8px', background: copied ? 'var(--green)' : 'rgba(255,255,255,0.05)', color: copied ? '#000' : 'var(--text)', border: 'none', borderRadius: '4px', cursor: 'pointer', transition: 'all 0.2s' }}>
+        {copied ? <Check size={14} /> : <Copy size={14} />}
+        <span>{copied ? 'Copied' : 'Copy'}</span>
      </button>
    </div>
  )
--- a/frontend/src/components/OverviewView.tsx
+++ b/frontend/src/components/OverviewView.tsx
@@ -1,6 +1,7 @@
 import type { RaceHub } from '../types'
 import { compareFinishPosition, formatDuration, formatGap, formatLapTime } from '../utils'
 import { countRaceHubDatasets } from '../lib/coverage'
+import { Thermometer, Map, Droplets, Wind, CloudRain } from 'lucide-react'

 interface Props {
  data: RaceHub
@@ -74,7 +75,7 @@ export function OverviewView({ data }: Props) {
      </div>

      <div className="rh-overview-row">
-        <section className="rh-panel">
+        <section className="rh-panel ui-card">
          <div className="sec-header">
            <span className="sec-title">Conditions</span>
            {latestWeather && (
@@ -83,17 +84,20 @@ export function OverviewView({ data }: Props) {
          </div>
          {latestWeather ? (
            <div className="rh-condition-strip" data-testid="rh-conditions">
-              <ConditionChip label="Air" value={`${latestWeather.air_temperature.toFixed(1)}°C`} />
+              <ConditionChip icon={Thermometer} label="Air" value={`${latestWeather.air_temperature.toFixed(1)}°C`} />
              <ConditionChip
+                icon={Map}
                label="Track"
                value={`${latestWeather.track_temperature.toFixed(1)}°C`}
              />
-              <ConditionChip label="Humidity" value={`${latestWeather.humidity.toFixed(0)}%`} />
+              <ConditionChip icon={Droplets} label="Humidity" value={`${latestWeather.humidity.toFixed(0)}%`} />
              <ConditionChip
+                icon={Wind}
                label="Wind"
                value={`${latestWeather.wind_speed.toFixed(1)} m/s`}
              />
              <ConditionChip
+                icon={CloudRain}
                label="Rain"
                value={latestWeather.rainfall > 0 ? 'Yes' : 'No'}
                accent={latestWeather.rainfall > 0 ? 'wet' : undefined}
@@ -104,7 +108,7 @@ export function OverviewView({ data }: Props) {
          )}
        </section>

-        <section className="rh-panel">
+        <section className="rh-panel ui-card">
          <div className="sec-header">
            <span className="sec-title">Race Control · Latest</span>
            <span className="sec-meta mono">{data.race_control.length}</span>
@@ -126,7 +130,7 @@ export function OverviewView({ data }: Props) {
          )}
        </section>

-        <section className="rh-panel">
+        <section className="rh-panel ui-card">
          <div className="sec-header">
            <span className="sec-title">Local Coverage</span>
            <span className="sec-meta mono">
@@ -173,7 +177,7 @@ function StatCard({
 }: StatCardProps) {
  if (placeholder) {
    return (
-      <div className="rh-stat-card rh-stat-empty">
+      <div className="rh-stat-card ui-card rh-stat-empty">
        <div className="rh-stat-label mono">{label}</div>
        <div className="rh-stat-primary">—</div>
        <div className="rh-stat-secondary">No data ingested</div>
@@ -181,7 +185,7 @@ function StatCard({
    )
  }
  return (
-    <div className="rh-stat-card">
+    <div className="rh-stat-card ui-card interactive">
      <div className="rh-stat-label mono">{label}</div>
      <div className="rh-stat-primary" style={primaryColor ? { color: primaryColor } : undefined}>
        {primary}
@@ -196,7 +200,7 @@ function StatCard({
 function PodiumCard({ podium }: { podium: Array<{ name_acronym: string; team_colour: string; position: number; full_name: string; gap_to_leader: number | string | number[] | null; duration: number | number[] | null; driver_number: number }> }) {
  if (podium.length === 0) {
    return (
-      <div className="rh-stat-card rh-stat-empty">
+      <div className="rh-stat-card ui-card rh-stat-empty">
        <div className="rh-stat-label mono">Podium</div>
        <div className="rh-stat-primary">—</div>
        <div className="rh-stat-secondary">No classified finishers</div>
@@ -204,7 +208,7 @@ function PodiumCard({ podium }: { podium: Array<{ name_acronym: string; team_col
    )
  }
  return (
-    <div className="rh-stat-card">
+    <div className="rh-stat-card ui-card interactive">
      <div className="rh-stat-label mono">Podium</div>
      <ol className="rh-podium-list">
        {podium.map((r) => (
@@ -232,13 +236,16 @@ function ConditionChip({
  label,
  value,
  accent,
+  icon: Icon,
 }: {
  label: string
  value: string
  accent?: 'wet'
+  icon?: React.ElementType
 }) {
  return (
-    <div className={`rh-condition-chip${accent === 'wet' ? ' rh-condition-wet' : ''}`}>
+    <div className={`rh-condition-chip${accent === 'wet' ? ' rh-condition-wet' : ''}`} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+      {Icon && <Icon size={14} style={{ opacity: 0.7 }} />}
      <span className="rh-condition-label mono">{label}</span>
      <span className="rh-condition-value">{value}</span>
    </div>
--- a/frontend/src/components/live/TimingTower.tsx
+++ b/frontend/src/components/live/TimingTower.tsx
@@ -1,3 +1,4 @@
+import { useState, Fragment } from 'react'
 import { teamColor } from '../../utils'
 import type { LiveStintData } from '../../types'
 import type { LiveTimingRow } from '../../lib/live'
@@ -11,6 +12,7 @@ import {
 import type { GapHistoryMap } from '../../lib/gapHistory'
 import { GapSparkline } from './GapSparkline'
 import { StintHistory } from './StintHistory'
+import { Pin } from 'lucide-react'

 interface Props {
  rows: LiveTimingRow[]
@@ -19,6 +21,7 @@ interface Props {
  battleNumbers?: Set<string>
  pinned?: string[]
  onTogglePin?: (racingNumber: string) => void
+  sessionType?: string
 }

 function posClass(pos: number): string {
@@ -35,7 +38,11 @@ export function TimingTower({
  battleNumbers,
  pinned,
  onTogglePin,
+  sessionType = '',
 }: Props) {
+  const [expandedRow, setExpandedRow] = useState<string | null>(null)
+  const [gapMode, setGapMode] = useState<'interval' | 'leader'>('interval')
+
  if (rows.length === 0) {
    return (
      <div className="missing-notice">
@@ -44,21 +51,38 @@ export function TimingTower({
    )
  }

+  const sType = sessionType.toLowerCase()
+  const isRace = sType.includes('race') || sType.includes('sprint')
+  const isQuali = sType.includes('qualifying') || sType.includes('practice') || !isRace
+
+  const isQ1 = sType === 'qualifying 1' || sType.includes('q1')
+  const isQ2 = sType === 'qualifying 2' || sType.includes('q2')
+
  return (
    <div className="scroll-x">
      <table className="data-table live-tower" style={{ minWidth: 620 }}>
        <thead>
          <tr>
            <th>Pos</th>
-            <th>Δ</th>
+            {isRace && <th>Δ</th>}
            <th>Driver</th>
            <th>Tyre</th>
            <th>Last Lap</th>
-            <th>Gap</th>
-            <th>Trend</th>
+            <th 
+              className="interactive" 
+              onClick={() => setGapMode(g => g === 'interval' ? 'leader' : 'interval')}
+              title="Click to toggle Gap vs Interval"
+              style={{ cursor: 'pointer', textDecoration: 'underline' }}
+            >
+              {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>
-            <th className="hide-mobile">Stints</th>
-            <th className="hide-mobile r">Laps</th>
+            {isRace && <th className="hide-mobile r">Laps</th>}
+            <th className="r"></th>
          </tr>
        </thead>
        <tbody>
@@ -68,54 +92,123 @@ export function TimingTower({
            const deltaClass = positionDeltaClass(driver)
            const isPinned = pinned?.includes(row.RacingNumber) ?? false
            const inBattle = battleNumbers?.has(row.RacingNumber) ?? false
+            const isExpanded = expandedRow === row.RacingNumber
+            
+            // Knockout zone border
+            let koClass = ''
+            if (isQuali && (isQ1 || isQ2)) {
+              if (isQ1 && row.Position === 15) koClass = 'ko-line-p15'
+              if (isQ2 && row.Position === 10) koClass = 'ko-line-p10'
+            } else if (isQuali) {
+               if (row.Position === 15) koClass = 'ko-line-p15'
+               if (row.Position === 10) koClass = 'ko-line-p10'
+            }
+
+            const gapText = gapMode === 'interval' && isRace ? (driver.Interval || driver.GapToLeader) : driver.GapToLeader
+            
+            // Render micro sectors
+            const renderSector = (idx: number) => {
+              const sec = driver.Sectors?.[idx]
+              if (!sec) return '-'
+              let sClass = 'mono'
+              if (sec.OverallFastest) sClass = 'mono txt-purple'
+              else if (sec.PersonalFastest) sClass = 'mono txt-green'
+              else if (sec.Value) sClass = 'mono txt-yellow'
+              return <span className={sClass}>{sec.Value || '-'}</span>
+            }
+
            return (
-              <tr
-                key={row.RacingNumber}
-                className={[
-                  driver.InPit ? 'in-pit' : '',
-                  driver.PitOut ? 'pit-out' : '',
-                  driver.Retired ? 'retired' : '',
-                  inBattle ? 'battle-row' : '',
-                  isPinned ? 'pinned-row' : '',
-                  onTogglePin ? 'pinnable' : '',
-                ].filter(Boolean).join(' ')}
-                onClick={onTogglePin ? () => onTogglePin(row.RacingNumber) : undefined}
-                title={onTogglePin ? (isPinned ? 'Click to unpin' : 'Click to pin (max 3)') : undefined}
-              >
-                <td className={`mono ${posClass(row.Position)}`}>{row.Position}</td>
-                <td className={`pos-delta${deltaClass ? ` ${deltaClass}` : ''}`}>{delta}</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>
-                    {isPinned && <span className="pin-mark" title="Pinned">◈</span>}
-                    {driver.InPit && <span className="badge badge-pit">PIT</span>}
-                    {driver.PitOut && !driver.InPit && <span className="badge badge-pit">OUT</span>}
-                    {driver.Retired && <span className="badge badge-out">RET</span>}
-                    {driver.KnockedOut && <span className="badge badge-knocked">KO</span>}
-                    {driver.Cutoff && !driver.KnockedOut && <span className="badge badge-cutoff">CUT</span>}
-                    {driver.OnFlyingLap && <span className="badge badge-flying">FL</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="spark-cell">
-                  <GapSparkline samples={history?.[row.RacingNumber]} />
-                </td>
-                <td className={`hide-mobile ${driver.BestLapOB ? 'mono lap-ob' : 'mono'}`}>
-                  {driver.BestLapTime || '-'}
-                </td>
-                <td className="hide-mobile">
-                  <StintHistory stints={stints?.[row.RacingNumber]} />
-                </td>
-                <td className="hide-mobile mono r">{driver.NumberOfLaps || '-'}</td>
-              </tr>
+              <Fragment key={row.RacingNumber}>
+                <tr
+                  className={[
+                    driver.InPit ? 'in-pit' : '',
+                    driver.PitOut ? 'pit-out' : '',
+                    driver.Retired ? 'retired' : '',
+                    inBattle ? 'battle-row' : '',
+                    isPinned ? 'pinned-row' : '',
+                    koClass,
+                    'interactive-row'
+                  ].filter(Boolean).join(' ')}
+                  onClick={() => setExpandedRow(isExpanded ? null : row.RacingNumber)}
+                  style={{ cursor: 'pointer' }}
+                >
+                  <td className={`mono ${posClass(row.Position)}`}>{row.Position}</td>
+                  {isRace && <td className={`pos-delta${deltaClass ? ` ${deltaClass}` : ''}`}>{delta}</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.PitOut && !driver.InPit && <span className="badge badge-pit">OUT</span>}
+                      {driver.Retired && <span className="badge badge-out">RET</span>}
+                      {driver.KnockedOut && <span className="badge badge-knocked">KO</span>}
+                      {driver.Cutoff && !driver.KnockedOut && <span className="badge badge-cutoff">CUT</span>}
+                      {driver.OnFlyingLap && <span className="badge badge-flying">FL</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">{gapText || '-'}</td>
+                  
+                  {isRace && (
+                    <td className="spark-cell">
+                      <GapSparkline samples={history?.[row.RacingNumber]} />
+                    </td>
+                  )}
+
+                  {isQuali && <td>{renderSector(0)}</td>}
+                  {isQuali && <td>{renderSector(1)}</td>}
+                  {isQuali && <td>{renderSector(2)}</td>}
+
+                  <td className={`hide-mobile ${driver.BestLapOB ? 'mono lap-ob' : 'mono'}`}>
+                    {driver.BestLapTime || '-'}
+                  </td>
+                  
+                  {isRace && <td className="hide-mobile mono r">{driver.NumberOfLaps || '-'}</td>}
+
+                  <td className="r">
+                     {onTogglePin && (
+                        <button 
+                          className="pin-btn interactive" 
+                          onClick={(e) => { e.stopPropagation(); onTogglePin(row.RacingNumber); }}
+                          style={{ opacity: isPinned ? 1 : 0.3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text)' }}
+                          title={isPinned ? 'Unpin driver' : 'Pin driver'}
+                        >
+                          <Pin size={14} fill={isPinned ? 'currentColor' : 'none'} />
+                        </button>
+                     )}
+                  </td>
+                </tr>
+                {isExpanded && (
+                   <tr className="expanded-row">
+                      <td colSpan={12} style={{ padding: '16px', background: 'rgba(255,255,255,0.02)', borderBottom: '1px solid var(--border)' }}>
+                         <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+                            <div>
+                               <div className="mono" style={{ color: 'var(--text-3)', fontSize: '10px', marginBottom: '4px' }}>STINTS</div>
+                               <StintHistory stints={stints?.[row.RacingNumber]} />
+                            </div>
+                            {!isRace && (
+                              <div>
+                                 <div className="mono" style={{ color: 'var(--text-3)', fontSize: '10px', marginBottom: '4px' }}>LAPS</div>
+                                 <div className="mono">{driver.NumberOfLaps || 0}</div>
+                              </div>
+                            )}
+                            {driver.SpeedTrap && (
+                              <div>
+                                 <div className="mono" style={{ color: 'var(--text-3)', fontSize: '10px', marginBottom: '4px' }}>SPEED TRAP</div>
+                                 <div className="mono">{driver.SpeedTrap} km/h</div>
+                              </div>
+                            )}
+                         </div>
+                      </td>
+                   </tr>
+                )}
+              </Fragment>
            )
          })}
        </tbody>