feat: persistent sessions support, remove track_map, add characteristics + tracks views

- Remove obsolete track_map use case from types, views, and router
- Delete TrackMapView.vue (superseded by persistent TrackDetailView)
- Auto-analyze in handleBuildTrack before building track model
- Add CharacteristicsView: expandable car cards with aggregated shift-point
  profiles (gear RPM/speed ranges, recommended shift RPM)
- Add TracksView + TrackDetailView + tracks Pinia store (Canvas 2D geometry)
- Add characteristics API client functions (listCarProfiles)
- Add tracks and characteristics nav items and routes
- Update Game type values to match backend snake_case (project_cars_1/2)
- Update use_case types and labels (remove track_map, keep track_mapping)

.gitignore

@@ -24,3 +24,6 @@ dist/
 # Environment files with secrets
 .env.local
 .env.*.local
+
+# Agent notes
+AGENTS.md

src/App.vue

@@ -9,6 +9,8 @@ const navItems = [
   { path: '/', label: 'Dashboard', icon: '🏠' },
   { path: '/live', label: 'Live', icon: '📡' },
   { path: '/sessions', label: 'Sessions', icon: '📊' },
+  { path: '/tracks', label: 'Tracks', icon: '🗺' },
+  { path: '/characteristics', label: 'Characteristics', icon: '🏭' },
 ]
 </script>
 

src/api/client.ts

@@ -9,6 +9,10 @@ import type {
   SessionRun,
   UseCaseInfo,
   AnalysisResult,
+  TrackModel,
+  TrackSummary,
+  BuildTrackModelRequest,
+  CarProfile,
 } from '@/types'
 
 const api = axios.create({
@@ -124,4 +128,32 @@ export async function getGames(): Promise<string[]> {
   return res.data
 }
 
+// ── Tracks ──
+
+export async function listTracks(): Promise<TrackSummary[]> {
+  const res = await api.get<TrackSummary[]>('/tracks')
+  return res.data
+}
+
+export async function getTrack(game: string, trackName: string): Promise<TrackModel> {
+  const res = await api.get<TrackModel>(`/tracks/${encodeURIComponent(game)}/${encodeURIComponent(trackName)}`)
+  return res.data
+}
+
+export async function deleteTrack(game: string, trackName: string): Promise<void> {
+  await api.delete(`/tracks/${encodeURIComponent(game)}/${encodeURIComponent(trackName)}`)
+}
+
+export async function buildTrackModel(req: BuildTrackModelRequest): Promise<TrackModel> {
+  const res = await api.post<TrackModel>('/tracks/build', req)
+  return res.data
+}
+
+// ── Characteristics ──
+
+export async function listCarProfiles(): Promise<CarProfile[]> {
+  const res = await api.get<CarProfile[]>('/characteristics/cars')
+  return res.data
+}
+
 export default api

src/router/index.ts

@@ -31,11 +31,21 @@ const router = createRouter({
       props: true,
     },
     {
-      path: '/analysis/track-map/:id',
+      path: '/tracks',
-      name: 'track-map',
+      name: 'tracks',
-      component: () => import('@/views/TrackMapView.vue'),
+      component: () => import('@/views/TracksView.vue'),
+    },
+    {
+      path: '/tracks/:game/:trackName',
+      name: 'track-detail',
+      component: () => import('@/views/TrackDetailView.vue'),
       props: true,
     },
+    {
+      path: '/characteristics',
+      name: 'characteristics',
+      component: () => import('@/views/CharacteristicsView.vue'),
+    },
   ],
 })
 

src/stores/tracks.ts

@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { TrackModel, TrackSummary } from '@/types'
+import * as api from '@/api/client'
+
+export const useTracksStore = defineStore('tracks', () => {
+  const tracks = ref<TrackSummary[]>([])
+  const currentTrack = ref<TrackModel | null>(null)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchTracks() {
+    loading.value = true
+    error.value = null
+    try {
+      tracks.value = await api.listTracks()
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : 'Failed to load tracks'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function fetchTrack(game: string, trackName: string) {
+    loading.value = true
+    error.value = null
+    try {
+      currentTrack.value = await api.getTrack(game, trackName)
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : 'Failed to load track'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function deleteTrack(game: string, trackName: string) {
+    try {
+      await api.deleteTrack(game, trackName)
+      tracks.value = tracks.value.filter(
+        (t) => !(t.game === game && t.track_name === trackName),
+      )
+      if (
+        currentTrack.value?.game === game &&
+        currentTrack.value?.track_name === trackName
+      ) {
+        currentTrack.value = null
+      }
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : 'Failed to delete track'
+    }
+  }
+
+  return {
+    tracks,
+    currentTrack,
+    loading,
+    error,
+    fetchTracks,
+    fetchTrack,
+    deleteTrack,
+  }
+})

src/types/index.ts

@@ -9,14 +9,14 @@ export type UseCase =
   | 'braking_analysis'
   | 'lap_times'
   | 'sector_analysis'
-  | 'track_map'
+  | 'track_mapping'
   | 'general'
 
 export type Game =
   | 'assetto_corsa'
   | 'assetto_corsa_competizione'
-  | 'project_cars1'
+  | 'project_cars_1'
-  | 'project_cars2'
+  | 'project_cars_2'
 
 export type RecordingStatus = 'recording' | 'stopped'
 export type SessionStatus = 'active' | 'completed'
@@ -161,7 +161,7 @@ export interface ShiftPointAnalysis {
   total_frames_analyzed: number
 }
 
-// Track Map Analysis (use_case = "track_map")
+// Track Map Analysis (use_case = "track_mapping")
 export interface TrackPoint {
   x: number
   y: number
@@ -187,5 +187,77 @@ export interface NotImplementedResponse {
   use_case: string
 }
 
-// Union of all analysis result types — matches backend discriminant responses
+// ── Track Models (persistent, from /api/tracks) ──
+
+export interface Corner {
+  index: number
+  number: number
+  entry_s: number
+  apex_s: number
+  exit_s: number
+  curvature_peak: number
+}
+
+export interface Sector {
+  index: number
+  start_s: number
+  end_s: number
+}
+
+export type TrackModelSource = 'boundary_recording'
+
+export interface TrackModel {
+  game: string
+  track_name: string
+  center_line: number[][]
+  left_boundary: number[][]
+  right_boundary: number[][]
+  track_width: number[]
+  heading: number[]
+  curvature: number[]
+  corners: Corner[]
+  sectors: Sector[]
+  source: TrackModelSource
+  created_at: string
+}
+
+export interface TrackSummary {
+  game: string
+  track_name: string
+  source: TrackModelSource
+  created_at: string
+  corner_count: number
+}
+
+export interface BuildTrackModelRequest {
+  session_id: string
+  game?: string | null
+  track_name?: string | null
+}
+
+export type TrackMappingAnalysis = TrackMapAnalysis
+
 export type AnalysisResult = ShiftPointAnalysis | TrackMapAnalysis | NotImplementedResponse
+
+// ── Characteristics (aggregated across sessions) ──
+
+export interface CarGearProfile {
+  gear: number
+  gear_display: string
+  min_rpm: number
+  max_rpm: number
+  min_speed_kmh: number
+  max_speed_kmh: number
+  session_count: number
+}
+
+export interface CarProfile {
+  car_name: string
+  session_count: number
+  recommended_shift_rpm_avg: number | null
+  recommended_shift_rpm_min: number | null
+  recommended_shift_rpm_max: number | null
+  gear_profiles: CarGearProfile[]
+  last_session_id: string
+  last_session_date: string
+}

src/views/CharacteristicsView.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import * as api from '@/api/client'
+import type { CarProfile } from '@/types'
+
+const profiles = ref<CarProfile[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+const expanded = ref<Set<string>>(new Set())
+
+onMounted(async () => {
+  try {
+    profiles.value = await api.listCarProfiles()
+  } catch (e: unknown) {
+    error.value = e instanceof Error ? e.message : 'Failed to load characteristics'
+  } finally {
+    loading.value = false
+  }
+})
+
+function toggle(carName: string) {
+  const next = new Set(expanded.value)
+  if (next.has(carName)) {
+    next.delete(carName)
+  } else {
+    next.add(carName)
+  }
+  expanded.value = next
+}
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleString()
+}
+
+function rpmLabel(rpm: number | null): string {
+  return rpm !== null ? `${Math.round(rpm).toLocaleString()}` : '—'
+}
+</script>
+
+<template>
+  <div class="characteristics-view">
+    <div class="flex items-center justify-between mb-3">
+      <h2 class="page-title">Characteristics</h2>
+    </div>
+
+    <div v-if="error" class="card mb-3 text-error">{{ error }}</div>
+    <div v-if="loading" class="card text-secondary">Loading...</div>
+
+    <div v-if="!loading && profiles.length === 0" class="card text-secondary">
+      <p class="mb-2">No car characteristics data yet.</p>
+      <p style="font-size: 0.85rem; color: var(--color-text-muted)">
+        Complete Shift Points analysis sessions to build per-car profiles across your sessions.
+      </p>
+    </div>
+
+    <div v-else class="profile-cards">
+      <div v-for="car in profiles" :key="car.car_name" class="card profile-card">
+        <div class="flex items-center justify-between" @click="toggle(car.car_name)" style="cursor: pointer">
+          <div class="flex items-center gap-2">
+            <span class="car-name">{{ car.car_name }}</span>
+            <span class="badge badge-muted">{{ car.session_count }} session{{ car.session_count !== 1 ? 's' : '' }}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="text-secondary" style="font-size: 0.85rem">
+              Shift RPM: {{ rpmLabel(car.recommended_shift_rpm_avg) }}
+            </span>
+            <span class="expand-icon">{{ expanded.has(car.car_name) ? '▾' : '▸' }}</span>
+          </div>
+        </div>
+
+        <div v-if="expanded.has(car.car_name)" class="gear-table-wrap mt-2">
+          <table v-if="car.gear_profiles.length > 0" class="gear-table">
+            <thead>
+              <tr>
+                <th>Gear</th>
+                <th>Min RPM</th>
+                <th>Max RPM</th>
+                <th>Min Speed</th>
+                <th>Max Speed</th>
+                <th>Sessions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="gear in car.gear_profiles" :key="gear.gear">
+                <td class="mono">{{ gear.gear_display }}</td>
+                <td class="mono">{{ Math.round(gear.min_rpm).toLocaleString() }}</td>
+                <td class="mono">{{ Math.round(gear.max_rpm).toLocaleString() }}</td>
+                <td class="mono">{{ Math.round(gear.min_speed_kmh) }} km/h</td>
+                <td class="mono">{{ Math.round(gear.max_speed_kmh) }} km/h</td>
+                <td class="mono">{{ gear.session_count }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="shift-rpm-detail mt-2">
+            <span class="text-secondary" style="font-size: 0.85rem">
+              Recommended shift RPM — avg: {{ rpmLabel(car.recommended_shift_rpm_avg) }} ·
+              min: {{ rpmLabel(car.recommended_shift_rpm_min) }} ·
+              max: {{ rpmLabel(car.recommended_shift_rpm_max) }}
+            </span>
+          </div>
+          <div class="mt-2">
+            <RouterLink
+              :to="`/sessions/${car.last_session_id}`"
+              class="btn btn-secondary btn-sm"
+            >
+              View last session
+            </RouterLink>
+            <span class="text-muted ml-2" style="font-size: 0.8rem">{{ formatTime(car.last_session_date) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-title {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.profile-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.profile-card {
+  transition: border-color 0.15s ease;
+}
+
+.profile-card:hover {
+  border-color: var(--color-primary);
+}
+
+.car-name {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.expand-icon {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+
+.gear-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.gear-table th,
+.gear-table td {
+  text-align: left;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.gear-table th {
+  color: var(--color-text-muted);
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+}
+
+.gear-table-wrap {
+  overflow-x: auto;
+}
+
+.mono {
+  font-family: monospace;
+}
+</style>

src/views/DashboardView.vue

@@ -29,7 +29,7 @@ function useCaseLabel(uc: string): string {
     braking_analysis: 'Braking Analysis',
     lap_times: 'Lap Times',
     sector_analysis: 'Sector Analysis',
-    track_map: 'Track Map',
+    track_mapping: 'Track Mapping',
     general: 'General',
   }
   return labels[uc] ?? uc
@@ -164,8 +164,9 @@ const aliveCount = computed(() => telemetry.feeds.filter((f) => f.health === 'al
         <h2>Quick Actions</h2>
       </div>
       <div class="flex gap-2">
-        <RouterLink to="/live" class="btn btn-primary">📡 Live Telemetry</RouterLink>
+        <RouterLink to="/live" class="btn btn-primary">Live Telemetry</RouterLink>
-        <RouterLink to="/sessions" class="btn btn-secondary">📊 Sessions</RouterLink>
+        <RouterLink to="/sessions" class="btn btn-secondary">Sessions</RouterLink>
+        <RouterLink to="/tracks" class="btn btn-secondary">Tracks</RouterLink>
       </div>
     </section>
 

src/views/SessionDetailView.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useSessionsStore } from '@/stores/sessions'
 import type { ShiftPointAnalysis, TrackMapAnalysis } from '@/types'
 import { isShiftPointAnalysis, isTrackMapAnalysis } from '@/utils/analysis'
+import * as api from '@/api/client'
 
 const props = defineProps<{
   id: string
@@ -100,8 +101,6 @@ function viewAnalysis() {
   if (!session.value) return
   if (session.value.use_case === 'shift_points') {
     router.push({ name: 'shift-points', params: { id: session.value.id } })
-  } else if (session.value.use_case === 'track_map') {
-    router.push({ name: 'track-map', params: { id: session.value.id } })
   }
 }
 
@@ -121,6 +120,37 @@ async function handleDeleteRun(runId: string, runLabel: string) {
 async function handleReopen() {
   await store.reopenSession(sessionId.value)
 }
+
+const buildingTrack = ref(false)
+const buildTrackError = ref<string | null>(null)
+const buildTrackSuccess = ref(false)
+
+const isTrackMapping = computed(() => session.value?.use_case === 'track_mapping')
+
+const hasLeftRun = computed(() =>
+  session.value?.runs.some((r) => r.label?.toLowerCase() === 'left' && r.status === 'stopped') ?? false,
+)
+
+const hasRightRun = computed(() =>
+  session.value?.runs.some((r) => r.label?.toLowerCase() === 'right' && r.status === 'stopped') ?? false,
+)
+
+const canBuildTrack = computed(() => isCompleted.value && hasLeftRun.value && hasRightRun.value)
+
+async function handleBuildTrack() {
+  buildingTrack.value = true
+  buildTrackError.value = null
+  buildTrackSuccess.value = false
+  try {
+    await store.reAnalyze(sessionId.value)
+    await api.buildTrackModel({ session_id: sessionId.value })
+    buildTrackSuccess.value = true
+  } catch (e: unknown) {
+    buildTrackError.value = e instanceof Error ? e.message : 'Failed to build track model'
+  } finally {
+    buildingTrack.value = false
+  }
+}
 </script>
 
 <template>
@@ -310,7 +340,7 @@ async function handleReopen() {
           </div>
 
           <div class="flex gap-2">
-            <button class="btn btn-primary" @click="viewAnalysis">
+            <button v-if="session.use_case === 'shift_points'" class="btn btn-primary" @click="viewAnalysis">
               📊 View Full Analysis
             </button>
             <button class="btn btn-secondary" @click="handleReAnalyze">
@@ -329,6 +359,42 @@ async function handleReopen() {
           </button>
         </div>
       </section>
+
+      <!-- Track Mapping: Build Track Model -->
+      <section v-if="isTrackMapping && isCompleted" class="card mb-3">
+        <div class="card-header">
+          <h2>Build Track Model</h2>
+        </div>
+        <div v-if="canBuildTrack">
+          <p class="text-secondary mb-2" style="font-size: 0.85rem">
+            Both boundary runs (left + right) are recorded. Build the persistent track model to enable corner analysis and sector timing.
+          </p>
+          <button
+            class="btn btn-primary"
+            :disabled="buildingTrack"
+            @click="handleBuildTrack"
+          >
+            {{ buildingTrack ? 'Building...' : 'Build Track Model' }}
+          </button>
+          <div v-if="buildTrackSuccess" class="text-success mt-2" style="font-size: 0.85rem">
+            Track model built successfully. <RouterLink to="/tracks">View in Tracks →</RouterLink>
+          </div>
+          <div v-if="buildTrackError" class="text-error mt-2" style="font-size: 0.85rem">
+            {{ buildTrackError }}
+          </div>
+        </div>
+        <div v-else class="text-secondary" style="font-size: 0.85rem">
+          <p>Requires 2 completed runs labeled "left" and "right".</p>
+          <div class="flex gap-2 mt-1">
+            <span :class="hasLeftRun ? 'text-success' : 'text-muted'">
+              {{ hasLeftRun ? '✓' : '○' }} Left boundary
+            </span>
+            <span :class="hasRightRun ? 'text-success' : 'text-muted'">
+              {{ hasRightRun ? '✓' : '○' }} Right boundary
+            </span>
+          </div>
+        </div>
+      </section>
     </template>
   </div>
 </template>

src/views/SessionsView.vue

@@ -12,7 +12,7 @@ const newLabel = ref('')
 
 const useCaseOptions: { value: UseCase; label: string }[] = [
   { value: 'shift_points', label: 'Shift Points' },
-  { value: 'track_map', label: 'Track Map' },
+  { value: 'track_mapping', label: 'Track Mapping' },
   { value: 'racing_line', label: 'Racing Line' },
   { value: 'braking_analysis', label: 'Braking Analysis' },
   { value: 'lap_times', label: 'Lap Times' },

src/views/TrackDetailView.vue

@@ -0,0 +1,545 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTracksStore } from '@/stores/tracks'
+import type { Corner } from '@/types'
+
+let resizeRafId: number | null = null
+
+const route = useRoute()
+const router = useRouter()
+const store = useTracksStore()
+
+const game = computed(() => route.params.game as string)
+const trackName = computed(() => route.params.trackName as string)
+const canvas = ref<HTMLCanvasElement | null>(null)
+
+const showCurvature = ref(true)
+const showCorners = ref(true)
+const showSectors = ref(true)
+
+onMounted(async () => {
+  await store.fetchTrack(game.value, trackName.value)
+})
+
+watch([() => store.currentTrack, canvas], () => {
+  if (store.currentTrack && canvas.value) {
+    drawTrack()
+  }
+}, { immediate: true })
+
+function drawTrack() {
+  if (!canvas.value || !store.currentTrack) return
+  const model = store.currentTrack
+  const ctx = canvas.value.getContext('2d')
+  if (!ctx) return
+
+  const width = canvas.value.width
+  const height = canvas.value.height
+  const padding = 50
+  const drawWidth = width - padding * 2
+  const drawHeight = height - padding * 2
+
+  ctx.fillStyle = '#0f1117'
+  ctx.fillRect(0, 0, width, height)
+
+  ctx.strokeStyle = '#1a1d27'
+  ctx.lineWidth = 1
+  for (let i = 0; i <= 10; i++) {
+    const x = padding + (drawWidth / 10) * i
+    const y = padding + (drawHeight / 10) * i
+    ctx.beginPath()
+    ctx.moveTo(x, padding)
+    ctx.lineTo(x, height - padding)
+    ctx.stroke()
+    ctx.beginPath()
+    ctx.moveTo(padding, y)
+    ctx.lineTo(width - padding, y)
+    ctx.stroke()
+  }
+
+  const allPoints = [...model.left_boundary, ...model.right_boundary, ...model.center_line]
+  if (allPoints.length === 0) return
+
+  const minX = allPoints.reduce((m, p) => p[0] < m ? p[0] : m, Infinity)
+  const maxX = allPoints.reduce((m, p) => p[0] > m ? p[0] : m, -Infinity)
+  const minY = allPoints.reduce((m, p) => p[1] < m ? p[1] : m, Infinity)
+  const maxY = allPoints.reduce((m, p) => p[1] > m ? p[1] : m, -Infinity)
+
+  const rangeX = maxX - minX || 1
+  const rangeY = maxY - minY || 1
+  const scale = Math.min(drawWidth / rangeX, drawHeight / rangeY)
+
+  const offsetX = padding + (drawWidth - rangeX * scale) / 2
+  const offsetY = padding + (drawHeight - rangeY * scale) / 2
+
+  function toCanvas(pt: number[]): [number, number] {
+    return [
+      offsetX + (pt[0] - minX) * scale,
+      offsetY + (maxY - pt[1]) * scale,
+    ]
+  }
+
+  function drawPolyline(c: CanvasRenderingContext2D, points: number[][], color: string, lineWidth: number, alpha = 1) {
+    if (points.length < 2) return
+    c.strokeStyle = color
+    c.lineWidth = lineWidth
+    c.globalAlpha = alpha
+    c.beginPath()
+    const [sx, sy] = toCanvas(points[0])
+    c.moveTo(sx, sy)
+    for (let i = 1; i < points.length; i++) {
+      const [px, py] = toCanvas(points[i])
+      c.lineTo(px, py)
+    }
+    c.stroke()
+    c.globalAlpha = 1
+  }
+
+  if (showSectors.value && model.sectors.length > 0) {
+    const totalPoints = model.center_line.length
+    for (const sector of model.sectors) {
+      const startIdx = Math.floor(sector.start_s * totalPoints)
+      const sectorPoints = model.center_line.slice(
+        startIdx,
+        Math.floor(sector.end_s * totalPoints) + 1,
+      )
+      if (sectorPoints.length < 2) continue
+      const sectorColors = ['rgba(79, 143, 247, 0.12)', 'rgba(52, 211, 153, 0.12)', 'rgba(251, 191, 36, 0.12)']
+      ctx.fillStyle = sectorColors[sector.index % sectorColors.length]
+      ctx.beginPath()
+      const [sx, sy] = toCanvas(sectorPoints[0])
+      ctx.moveTo(sx, sy)
+      for (let i = 1; i < sectorPoints.length; i++) {
+        const [px, py] = toCanvas(sectorPoints[i])
+        ctx.lineTo(px, py)
+      }
+      for (let i = sectorPoints.length - 1; i >= 0; i--) {
+        const [px, py] = toCanvas(sectorPoints[i])
+        ctx.lineTo(px, py)
+      }
+      ctx.closePath()
+      ctx.fill()
+    }
+  }
+
+  drawPolyline(ctx, model.left_boundary, '#f87171', 2, 0.5)
+  drawPolyline(ctx, model.right_boundary, '#60a5fa', 2, 0.5)
+
+  if (showCurvature.value && model.curvature.length > 0) {
+    const centerLine = model.center_line
+    const maxCurv = model.curvature.reduce((m, k) => { const a = Math.abs(k); return a > m ? a : m; }, 0.001)
+    const steps = 16
+    ctx.lineWidth = 4
+    for (let s = 0; s < steps; s++) {
+      const lo = s / steps
+      const hi = (s + 1) / steps
+      const mid = (lo + hi) / 2
+      const r = Math.round(mid * 200)
+      const g = Math.round((1 - mid) * 200 + 55)
+      const b = Math.round(100)
+      ctx.strokeStyle = `rgb(${r}, ${g}, ${b})`
+      ctx.beginPath()
+      let moved = false
+      for (let i = 0; i < centerLine.length - 1; i++) {
+        const normalized = Math.min(Math.abs(model.curvature[i]) / maxCurv, 1)
+        if (normalized >= lo && normalized < hi) {
+          const [x1, y1] = toCanvas(centerLine[i])
+          if (!moved) { ctx.moveTo(x1, y1); moved = true }
+          const [x2, y2] = toCanvas(centerLine[i + 1])
+          ctx.lineTo(x2, y2)
+        } else {
+          moved = false
+        }
+      }
+      ctx.stroke()
+    }
+  } else {
+    drawPolyline(ctx, model.center_line, '#34d399', 3, 0.9)
+  }
+
+  if (showCorners.value) {
+    for (const corner of model.corners) {
+      const totalPoints = model.center_line.length
+      const apexIdx = Math.min(
+        Math.floor(corner.apex_s * totalPoints),
+        totalPoints - 1,
+      )
+      const [cx, cy] = toCanvas(model.center_line[apexIdx])
+
+      ctx.fillStyle = 'rgba(251, 191, 36, 0.3)'
+      ctx.beginPath()
+      ctx.arc(cx, cy, 12, 0, Math.PI * 2)
+      ctx.fill()
+
+      ctx.strokeStyle = '#fbbf24'
+      ctx.lineWidth = 1.5
+      ctx.beginPath()
+      ctx.arc(cx, cy, 12, 0, Math.PI * 2)
+      ctx.stroke()
+
+      ctx.fillStyle = '#fbbf24'
+      ctx.font = 'bold 10px sans-serif'
+      ctx.textAlign = 'center'
+      ctx.fillText(`${corner.number}`, cx, cy + 3.5)
+    }
+  }
+
+  if (model.center_line.length > 0) {
+    const [startX, startY] = toCanvas(model.center_line[0])
+    ctx.fillStyle = '#34d399'
+    ctx.beginPath()
+    ctx.arc(startX, startY, 6, 0, Math.PI * 2)
+    ctx.fill()
+    ctx.strokeStyle = '#fff'
+    ctx.lineWidth = 1.5
+    ctx.beginPath()
+    ctx.arc(startX, startY, 6, 0, Math.PI * 2)
+    ctx.stroke()
+  }
+}
+
+function handleResize() {
+  if (canvas.value) {
+    const container = canvas.value.parentElement
+    if (container) {
+      canvas.value.width = container.clientWidth
+      canvas.value.height = Math.max(500, container.clientWidth * 0.6)
+      drawTrack()
+    }
+  }
+}
+
+const debouncedResize = () => {
+  if (resizeRafId !== null) cancelAnimationFrame(resizeRafId)
+  resizeRafId = requestAnimationFrame(() => {
+    handleResize()
+    resizeRafId = null
+  })
+}
+
+onMounted(() => {
+  handleResize()
+  window.addEventListener('resize', debouncedResize)
+})
+
+onUnmounted(() => {
+  if (resizeRafId !== null) cancelAnimationFrame(resizeRafId)
+  window.removeEventListener('resize', debouncedResize)
+})
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleString()
+}
+
+function gameLabel(g: string): string {
+  const labels: Record<string, string> = {
+    assetto_corsa: 'Assetto Corsa',
+    assetto_corsa_competizione: 'ACC',
+    project_cars_1: 'Project CARS 1',
+    project_cars_2: 'Project CARS 2',
+  }
+  return labels[g] ?? g
+}
+
+function curvatureLabel(corner: Corner): string {
+  return corner.curvature_peak.toFixed(4)
+}
+
+async function handleDelete() {
+  if (store.currentTrack && confirm(`Delete track model "${store.currentTrack.track_name}"?`)) {
+    await store.deleteTrack(store.currentTrack.game, store.currentTrack.track_name)
+    router.push('/tracks')
+  }
+}
+
+watch([showCurvature, showCorners, showSectors], () => {
+  if (store.currentTrack && canvas.value) {
+    drawTrack()
+  }
+})
+</script>
+
+<template>
+  <div class="track-detail">
+    <div class="flex items-center gap-2 mb-3">
+      <button class="btn btn-secondary btn-sm" @click="router.push('/tracks')">← Back</button>
+      <h2 class="page-title">
+        {{ store.currentTrack?.track_name ?? 'Track' }}
+      </h2>
+      <span v-if="store.currentTrack" class="badge badge-primary">{{ gameLabel(store.currentTrack.game) }}</span>
+    </div>
+
+    <div v-if="store.error" class="card mb-3 text-error">{{ store.error }}</div>
+    <div v-if="store.loading && !store.currentTrack" class="card text-secondary">Loading track model...</div>
+
+    <template v-if="store.currentTrack">
+      <!-- Stats -->
+      <div class="grid grid-4 mb-3">
+        <div class="card stat-card">
+          <span class="stat-label">Corners</span>
+          <span class="stat-value mono">{{ store.currentTrack.corners.length }}</span>
+        </div>
+        <div class="card stat-card">
+          <span class="stat-label">Sectors</span>
+          <span class="stat-value mono">{{ store.currentTrack.sectors.length }}</span>
+        </div>
+        <div class="card stat-card">
+          <span class="stat-label">Center Line Points</span>
+          <span class="stat-value mono">{{ store.currentTrack.center_line.length.toLocaleString() }}</span>
+        </div>
+        <div class="card stat-card">
+          <span class="stat-label">Source</span>
+          <span class="stat-value" style="font-size: 1rem; color: var(--color-text-secondary)">
+            {{ store.currentTrack.source.replace(/_/g, ' ') }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Track Map Canvas -->
+      <div class="card mb-3">
+        <div class="card-header">
+          <h2>Track Map</h2>
+          <div class="flex gap-2 items-center">
+            <label class="toggle-label">
+              <input type="checkbox" v-model="showCurvature" />
+              <span>Curvature</span>
+            </label>
+            <label class="toggle-label">
+              <input type="checkbox" v-model="showCorners" />
+              <span>Corners</span>
+            </label>
+            <label class="toggle-label">
+              <input type="checkbox" v-model="showSectors" />
+              <span>Sectors</span>
+            </label>
+            <button class="btn btn-danger btn-sm" @click="handleDelete">Delete</button>
+          </div>
+        </div>
+        <div class="legend-bar">
+          <span class="legend-item">
+            <span class="legend-dot" style="background: #f87171" />
+            Left boundary
+          </span>
+          <span class="legend-item">
+            <span class="legend-dot" style="background: #60a5fa" />
+            Right boundary
+          </span>
+          <span class="legend-item">
+            <span class="legend-dot" style="background: #34d399" />
+            Start / Center
+          </span>
+          <span class="legend-item">
+            <span class="legend-dot" style="background: #fbbf24" />
+            Corners
+          </span>
+        </div>
+        <div class="canvas-container">
+          <canvas ref="canvas" />
+        </div>
+      </div>
+
+      <!-- Corners Table -->
+      <div v-if="store.currentTrack.corners.length > 0" class="card mb-3">
+        <div class="card-header">
+          <h2>Corners</h2>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Entry (s)</th>
+                <th>Apex (s)</th>
+                <th>Exit (s)</th>
+                <th>Peak Curvature (1/m)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="corner in store.currentTrack.corners" :key="corner.number">
+                <td class="mono">{{ corner.number }}</td>
+                <td class="mono">{{ corner.entry_s.toFixed(3) }}</td>
+                <td class="mono">{{ corner.apex_s.toFixed(3) }}</td>
+                <td class="mono">{{ corner.exit_s.toFixed(3) }}</td>
+                <td class="mono">{{ curvatureLabel(corner) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Sectors Table -->
+      <div v-if="store.currentTrack.sectors.length > 0" class="card mb-3">
+        <div class="card-header">
+          <h2>Sectors</h2>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>Sector</th>
+                <th>Start (s)</th>
+                <th>End (s)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="sector in store.currentTrack.sectors" :key="sector.index">
+                <td class="mono">{{ sector.index + 1 }}</td>
+                <td class="mono">{{ sector.start_s.toFixed(3) }}</td>
+                <td class="mono">{{ sector.end_s.toFixed(3) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Metadata -->
+      <div class="card">
+        <div class="card-header">
+          <h2>Metadata</h2>
+        </div>
+        <div class="info-grid">
+          <div class="info-item">
+            <span class="info-label">Game</span>
+            <span>{{ gameLabel(store.currentTrack.game) }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">Track</span>
+            <span>{{ store.currentTrack.track_name }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">Created</span>
+            <span>{{ formatTime(store.currentTrack.created_at) }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">Boundary Points</span>
+            <span class="mono">{{ store.currentTrack.left_boundary.length.toLocaleString() }} / {{ store.currentTrack.right_boundary.length.toLocaleString() }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.page-title {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.stat-card {
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 0.25rem;
+}
+
+.canvas-container {
+  width: 100%;
+  min-height: 500px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+canvas {
+  display: block;
+  width: 100%;
+}
+
+.legend-bar {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.75rem;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.info-label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.table-wrap {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+th {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 2px solid var(--color-border);
+  color: var(--color-text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+}
+
+td {
+  padding: 0.4rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+tr:hover td {
+  background: var(--color-surface-hover);
+}
+
+@media (max-width: 768px) {
+  .grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>

src/views/TrackMapView.vue

@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import type { TrackMapAnalysis, TrackPoint } from '@/types'
-import * as api from '@/api/client'
-
-const BOUNDARY_COLORS = ['#f87171', '#60a5fa', '#fbbf24', '#34d399', '#a78bfa']
-let resizeRafId: number | null = null
-
-const route = useRoute()
-const router = useRouter()
-
-const sessionId = computed(() => route.params.id as string)
-const analysis = ref<TrackMapAnalysis | null>(null)
-const loading = ref(true)
-const error = ref<string | null>(null)
-const canvas = ref<HTMLCanvasElement | null>(null)
-
-onMounted(async () => {
-  try {
-    const data = await api.getAnalysis(sessionId.value)
-    if (data && 'boundaries' in data) {
-      analysis.value = data as unknown as TrackMapAnalysis
-    } else {
-      error.value = 'Track map analysis not available'
-    }
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Failed to load analysis'
-  } finally {
-    loading.value = false
-  }
-})
-
-watch([analysis, canvas], () => {
-  if (analysis.value && canvas.value) {
-    drawTrackMap()
-  }
-}, { immediate: true })
-
-function drawTrackMap() {
-  if (!canvas.value || !analysis.value) return
-
-  const ctx = canvas.value.getContext('2d')
-  if (!ctx) return
-
-  const allPoints = analysis.value.boundaries.flatMap((b) => b.points)
-  if (analysis.value.center_line) {
-    allPoints.push(...analysis.value.center_line.points)
-  }
-
-  if (allPoints.length === 0) return
-
-  const minX = allPoints.reduce((m, p) => p.x < m ? p.x : m, Infinity)
-  const maxX = allPoints.reduce((m, p) => p.x > m ? p.x : m, -Infinity)
-  const minY = allPoints.reduce((m, p) => p.y < m ? p.y : m, Infinity)
-  const maxY = allPoints.reduce((m, p) => p.y > m ? p.y : m, -Infinity)
-
-  const width = canvas.value.width
-  const height = canvas.value.height
-  const padding = 40
-  const drawWidth = width - padding * 2
-  const drawHeight = height - padding * 2
-
-  const rangeX = maxX - minX || 1
-  const rangeY = maxY - minY || 1
-  const scale = Math.min(drawWidth / rangeX, drawHeight / rangeY)
-
-  const offsetX = padding + (drawWidth - rangeX * scale) / 2
-  const offsetY = padding + (drawHeight - rangeY * scale) / 2
-
-  function toCanvas(point: TrackPoint): [number, number] {
-    return [
-      offsetX + (point.x - minX) * scale,
-      offsetY + (maxY - point.y) * scale,
-    ]
-  }
-
-  ctx.fillStyle = '#0f1117'
-  ctx.fillRect(0, 0, width, height)
-
-  ctx.strokeStyle = '#1a1d27'
-  ctx.lineWidth = 1
-  for (let i = 0; i <= 10; i++) {
-    const x = padding + (drawWidth / 10) * i
-    const y = padding + (drawHeight / 10) * i
-    ctx.beginPath()
-    ctx.moveTo(x, padding)
-    ctx.lineTo(x, height - padding)
-    ctx.stroke()
-    ctx.beginPath()
-    ctx.moveTo(padding, y)
-    ctx.lineTo(width - padding, y)
-    ctx.stroke()
-  }
-
-  analysis.value.boundaries.forEach((boundary, idx) => {
-    if (boundary.points.length < 2) return
-    const color = BOUNDARY_COLORS[idx % BOUNDARY_COLORS.length]
-    ctx.strokeStyle = color
-    ctx.lineWidth = 2
-    ctx.globalAlpha = 0.7
-    ctx.beginPath()
-    const [sx, sy] = toCanvas(boundary.points[0])
-    ctx.moveTo(sx, sy)
-    for (let i = 1; i < boundary.points.length; i++) {
-      const [px, py] = toCanvas(boundary.points[i])
-      ctx.lineTo(px, py)
-    }
-    ctx.stroke()
-    ctx.globalAlpha = 1
-
-    const labelPoint = boundary.points[Math.floor(boundary.points.length / 2)]
-    const [lx, ly] = toCanvas(labelPoint)
-    ctx.fillStyle = color
-    ctx.font = '12px sans-serif'
-    ctx.fillText(boundary.label, lx + 5, ly - 5)
-  })
-
-  if (analysis.value.center_line && analysis.value.center_line.points.length >= 2) {
-    ctx.strokeStyle = '#34d399'
-    ctx.lineWidth = 3
-    ctx.globalAlpha = 0.9
-    ctx.beginPath()
-    const [sx, sy] = toCanvas(analysis.value.center_line.points[0])
-    ctx.moveTo(sx, sy)
-    for (let i = 1; i < analysis.value.center_line.points.length; i++) {
-      const [px, py] = toCanvas(analysis.value.center_line.points[i])
-      ctx.lineTo(px, py)
-    }
-    ctx.stroke()
-    ctx.globalAlpha = 1
-
-    const [startX, startY] = toCanvas(analysis.value.center_line.points[0])
-    const [endX, endY] = toCanvas(analysis.value.center_line.points[analysis.value.center_line.points.length - 1])
-    ctx.fillStyle = '#34d399'
-    ctx.beginPath()
-    ctx.arc(startX, startY, 5, 0, Math.PI * 2)
-    ctx.fill()
-    ctx.fillStyle = '#f87171'
-    ctx.beginPath()
-    ctx.arc(endX, endY, 5, 0, Math.PI * 2)
-    ctx.fill()
-  }
-}
-
-function handleResize() {
-  if (canvas.value) {
-    const container = canvas.value.parentElement
-    if (container) {
-      canvas.value.width = container.clientWidth
-      canvas.value.height = Math.max(500, container.clientWidth * 0.6)
-      drawTrackMap()
-    }
-  }
-}
-
-const debouncedResize = () => {
-  if (resizeRafId !== null) cancelAnimationFrame(resizeRafId)
-  resizeRafId = requestAnimationFrame(() => {
-    handleResize()
-    resizeRafId = null
-  })
-}
-
-onMounted(() => {
-  handleResize()
-  window.addEventListener('resize', debouncedResize)
-})
-
-onUnmounted(() => {
-  if (resizeRafId !== null) cancelAnimationFrame(resizeRafId)
-  window.removeEventListener('resize', debouncedResize)
-})
-</script>
-
-<template>
-  <div class="track-map-view">
-    <div class="flex items-center gap-2 mb-3">
-      <button class="btn btn-secondary btn-sm" @click="router.back()">← Back</button>
-      <h2 class="page-title">Track Map</h2>
-    </div>
-
-    <div v-if="loading" class="card text-secondary">Loading analysis...</div>
-    <div v-else-if="error" class="card text-error">{{ error }}</div>
-
-    <template v-else-if="analysis">
-      <div class="grid grid-3 mb-3">
-        <div class="card stat-card">
-          <span class="stat-label">Boundaries</span>
-          <span class="stat-value mono">{{ analysis.boundaries.length }}</span>
-        </div>
-        <div class="card stat-card">
-          <span class="stat-label">Total Points</span>
-          <span class="stat-value mono">{{ analysis.total_points.toLocaleString() }}</span>
-        </div>
-        <div class="card stat-card">
-          <span class="stat-label">Center Line</span>
-          <span class="stat-value" :class="analysis.center_line ? 'text-success' : 'text-muted'">
-            {{ analysis.center_line ? '✓ Computed' : '✗ N/A' }}
-          </span>
-        </div>
-      </div>
-
-      <div class="card mb-3">
-        <div class="card-header">
-          <h2>Track Map</h2>
-          <div class="flex gap-2">
-            <span v-for="(boundary, idx) in analysis.boundaries" :key="boundary.label" class="legend-item">
-              <span class="legend-dot" :style="{ background: BOUNDARY_COLORS[idx % BOUNDARY_COLORS.length] }" />
-              {{ boundary.label }} ({{ boundary.point_count }})
-            </span>
-            <span v-if="analysis.center_line" class="legend-item">
-              <span class="legend-dot" style="background: #34d399" />
-              Center Line
-            </span>
-          </div>
-        </div>
-        <div class="canvas-container">
-          <canvas ref="canvas" />
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="card-header">
-          <h2>Boundaries</h2>
-        </div>
-        <div class="table-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>Label</th>
-                <th>Points</th>
-                <th>Spline Range</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="boundary in analysis.boundaries" :key="boundary.label">
-                <td>{{ boundary.label }}</td>
-                <td class="mono">{{ boundary.point_count.toLocaleString() }}</td>
-                <td class="mono">
-                  {{ boundary.points.length > 0 ? boundary.points[0].spline.toFixed(3) : '-' }}
-                  –
-                  {{ boundary.points.length > 0 ? boundary.points[boundary.points.length - 1].spline.toFixed(3) : '-' }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.page-title {
-  font-size: 1.5rem;
-  margin: 0;
-}
-
-.stat-card {
-  text-align: center;
-}
-
-.stat-label {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-top: 0.25rem;
-}
-
-.canvas-container {
-  width: 100%;
-  min-height: 500px;
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-canvas {
-  display: block;
-  width: 100%;
-}
-
-.legend-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.legend-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.table-wrap {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.85rem;
-}
-
-th {
-  text-align: left;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 2px solid var(--color-border);
-  color: var(--color-text-muted);
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 0.75rem;
-  letter-spacing: 0.05em;
-}
-
-td {
-  padding: 0.4rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-}
-</style>

src/views/TracksView.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useTracksStore } from '@/stores/tracks'
+
+const store = useTracksStore()
+
+onMounted(() => {
+  store.fetchTracks()
+})
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleString()
+}
+
+function gameLabel(game: string): string {
+  const labels: Record<string, string> = {
+    assetto_corsa: 'Assetto Corsa',
+    assetto_corsa_competizione: 'ACC',
+    project_cars_1: 'Project CARS 1',
+    project_cars_2: 'Project CARS 2',
+  }
+  return labels[game] ?? game
+}
+
+async function handleDelete(game: string, trackName: string) {
+  if (confirm(`Delete track model "${trackName}" (${gameLabel(game)})?`)) {
+    await store.deleteTrack(game, trackName)
+  }
+}
+</script>
+
+<template>
+  <div class="tracks-view">
+    <div class="flex items-center justify-between mb-3">
+      <h2 class="page-title">Tracks</h2>
+      <RouterLink to="/sessions" class="btn btn-secondary">
+        + Map a Track
+      </RouterLink>
+    </div>
+
+    <div v-if="store.error" class="card mb-3 text-error">{{ store.error }}</div>
+    <div v-if="store.loading && store.tracks.length === 0" class="card text-secondary">Loading tracks...</div>
+
+    <div v-if="store.tracks.length === 0 && !store.loading" class="card text-secondary">
+      <p class="mb-2">No track models stored yet.</p>
+      <p style="font-size: 0.85rem; color: var(--color-text-muted)">
+        Create a Track Mapping session, record left and right boundary laps, then build the track model.
+      </p>
+    </div>
+
+    <div v-else class="track-cards">
+      <div v-for="track in store.tracks" :key="`${track.game}-${track.track_name}`" class="card track-card">
+        <div class="flex items-center justify-between mb-1">
+          <div class="flex items-center gap-2">
+            <span class="badge badge-primary">{{ gameLabel(track.game) }}</span>
+            <span class="track-name">{{ track.track_name }}</span>
+          </div>
+          <div class="flex gap-1">
+            <RouterLink
+              :to="`/tracks/${track.game}/${track.track_name}`"
+              class="btn btn-secondary btn-sm"
+            >
+              View
+            </RouterLink>
+            <button
+              class="btn btn-danger btn-sm"
+              @click="handleDelete(track.game, track.track_name)"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+        <div class="track-meta">
+          <span class="text-secondary">{{ track.corner_count }} corners</span>
+          <span class="text-muted">·</span>
+          <span class="text-muted" style="font-size: 0.8rem">{{ formatTime(track.created_at) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-title {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.track-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.track-card {
+  transition: border-color 0.15s ease;
+}
+
+.track-card:hover {
+  border-color: var(--color-primary);
+}
+
+.track-name {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.track-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  margin-top: 0.25rem;
+}
+</style>