feat(ui): Session-aware live timing enhancements

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>