Add sector indicators and track overlay to practice sessions

- Backend: extended sector event computation to FP1/FP2/FP3
- Frontend: sector column and track overlay now show for all non-race sessions
- Settings: live sectors toggle available in practice (was qualifying only)
- Requires recompute for practice sessions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: adn8naiagent

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to F1 Replay Timing will be documented in this file.
 ## 1.3.2
 
 ### Improvements
+- **Practice sector indicators** — live sector colours and track map sector overlay now available in practice sessions. Requires recompute
 - **Last lap time for all sessions** — now available in practice and qualifying. Requires recompute
 - **Last lap colour coding** — purple for fastest lap, green for personal best
 - **Processing feedback** — real-time status messages during on-demand processing

backend/services/f1_data.py

@@ -879,12 +879,12 @@ def _get_driver_flag(abbr: str, frame_time: float) -> str | None:
             driver_best_lap_events[drv] = events
             driver_lap_completions[drv] = completions
 
-    # For qualifying sessions: build sector completion events per driver
+    # For qualifying and practice sessions: build sector completion events per driver
     # Each entry: (session_time, sector_num, sector_time_seconds, lap_number, is_out_lap)
     # Also pre-compute which laps are out laps (lap 1 or first lap after pit exit)
     driver_sector_events: dict[str, list[tuple[float, int, float, int, bool]]] = {}
     driver_out_laps: dict[str, set[int]] = {}
-    if session_type in ("Q", "SQ"):
+    if session_type in ("Q", "SQ", "FP1", "FP2", "FP3"):
         for drv in drivers_list:
             drv_laps_df = laps.pick_drivers(drv).sort_values("LapNumber")
             sector_events = []
@@ -1474,8 +1474,8 @@ def _safe_float(v) -> float:
                     d["gap"] = "No time"
                     d["no_timing"] = False
 
-            # Add live sector indicators for qualifying
-            if session_type in ("Q", "SQ"):
+            # Add live sector indicators for qualifying and practice
+            if session_type in ("Q", "SQ", "FP1", "FP2", "FP3"):
                 # Track overall best and personal best sector times up to now
                 overall_best_sectors: dict[int, float] = {}  # sector_num -> best time
                 personal_best_sectors: dict[str, dict[int, float]] = {}  # driver -> sector_num -> best time

frontend/src/app/replay/[year]/[round]/page.tsx

@@ -249,6 +249,7 @@ export default function ReplayPage() {
   const isRace = sessionType === "R" || sessionType === "S";
   const isQualifying = sessionType === "Q" || sessionType === "SQ";
   const isPractice = sessionType === "FP1" || sessionType === "FP2" || sessionType === "FP3";
+  const hasSectors = isQualifying || isPractice;
 
   // For practice sessions, cap the total time at the official session duration (60 min)
   // so the "remaining" timer is accurate rather than including post-session telemetry
@@ -259,7 +260,7 @@ export default function ReplayPage() {
   const SECTOR_HEX: Record<string, string> = { purple: "#A855F7", green: "#22C55E", yellow: "#EAB308" };
   const DEFAULT_SECTOR = "#3A3A4A";
   const sectorOverlay: SectorOverlay | null = (() => {
-    if (!isQualifying || !showSectorOverlay || !trackData?.sector_boundaries) return null;
+    if (!hasSectors || !showSectorOverlay || !trackData?.sector_boundaries) return null;
     const target = sectorFocusDriver && selectedDrivers.includes(sectorFocusDriver)
       ? sectorFocusDriver
       : null;
@@ -285,7 +286,7 @@ export default function ReplayPage() {
     if (!isRace && settings.showBestLapTime) w += 60; // best lap time column
     if (settings.showLastLapTime) w += 60; // last lap time column
     if (settings.showGapToLeader) w += 56 + (!isRace ? 8 : 0); // extra margin between lap time and gap in practice/qualifying
-    if (isQualifying && settings.showSectors) w += 36; // sector indicators (28 + 8 margin)
+    if (hasSectors && settings.showSectors) w += 36; // sector indicators (28 + 8 margin)
     if (isRace && settings.showPitStops) w += 24;
     if (isRace && settings.showTyreHistory) w += 36;
     if (settings.showTyreType) w += 24;
@@ -535,7 +536,7 @@ export default function ReplayPage() {
               {/* Telemetry now in bottom drawer */}
 
               {/* Sector overlay toggle - desktop qualifying only */}
-              {!isMobile && isQualifying && trackData?.sector_boundaries && (
+              {!isMobile && hasSectors && trackData?.sector_boundaries && (
                 <div className="absolute bottom-2 right-36 z-20 flex items-center gap-1">
                   {showSectorOverlay && selectedDrivers.length === 0 && (
                     <span className="text-[10px] text-f1-muted mr-1">Select a driver to view sectors</span>
@@ -574,7 +575,7 @@ export default function ReplayPage() {
               )}
 
               {/* Sector overlay controls - mobile qualifying only */}
-              {isMobile && isQualifying && trackData?.sector_boundaries && (
+              {isMobile && hasSectors && trackData?.sector_boundaries && (
                 <div className="absolute bottom-2 left-2 right-2 z-20 flex items-center gap-1">
                   {showSectorOverlay && selectedDrivers.length > 0 && (
                     <div className="flex items-center gap-1 overflow-x-auto">

frontend/src/components/Leaderboard.tsx

@@ -364,8 +364,8 @@ export default function Leaderboard({ drivers, highlightedDrivers, onDriverClick
                 );
               })()}
 
-              {/* Live sector indicators - fixed width (qualifying only) */}
-              {isQualifying && settings.showSectors && (
+              {/* Live sector indicators - fixed width (qualifying and practice) */}
+              {!isRace && settings.showSectors && (
                 <span className="w-7 flex-shrink-0 flex items-center justify-center gap-[2px] mx-1">
                   {[1, 2, 3].map((sn) => {
                     const sec = drv.sectors?.find((s) => s.num === sn);

frontend/src/components/SessionBanner.tsx

@@ -38,7 +38,7 @@ const LEADERBOARD_SETTINGS: { key: keyof ReplaySettings; label: string; raceOnly
   { key: "showTyreType", label: "Tyre type" },
   { key: "showTyreAge", label: "Tyre age" },
   { key: "showTyreHistory", label: "Tyre history", raceOnly: true },
-  { key: "showSectors", label: "Live sectors", qualiOnly: true },
+  { key: "showSectors", label: "Live sectors", nonRaceOnly: true },
   { key: "showPitPrediction", label: "Pit prediction", raceOnly: true },
   { key: "showPitConfidence", label: "Confidence", raceOnly: true, parent: "showPitPrediction" },
   { key: "showPitFreeAir", label: "Pit gaps", raceOnly: true, parent: "showPitPrediction" },