Nice and stable before liveview

app/api/drivers/route.ts

@@ -86,220 +86,6 @@ export async function GET(request: Request) {
   }
 }
 
-// POST endpoint for updating driver data (optional, for future use)
-export async function POST(request: Request) {
-  try {
-    const body = await request.json();
-    
-    // Add your update logic here
-    // Example: Update driver rank, stats, etc.
-    
-    return NextResponse.json({
-      success: true,
-      message: 'Driver updated',
-    });
-  } catch (error) {
-    console.error('Error updating driver:', error);
-    return NextResponse.json(
-      { success: false, error: 'Failed to update driver' },
-      { status: 500 }
-    );
-  }
-}// app/api/drivers/route.ts
-// API Route: GET /api/drivers
-// Returns all connected drivers with their server info
-
-import { NextResponse } from 'next/server';
-import { query } from '@/lib/db';
-import { DriverWithServer } from '@/types/racing';
-
-export async function GET(request: Request) {
-  try {
-    // Parse query params (e.g., ?connected=true)
-    const { searchParams } = new URL(request.url);
-    const connectedOnly = searchParams.get('connected') === 'true';
-
-    // SQL query - joins drivers with servers
-    const sql = `
-      SELECT 
-        u.driver_guid,
-        u.driver_name,
-        u.driver_team,
-        u.car_model,
-        u.car_skin,
-        u.cuts_alltime,
-        u.contacts_alltime,
-        u.laps_completed,
-        u.user_rank,
-        u.is_connect,
-        u.is_loading,
-        u.current_server,
-        u.created_at,
-        s.server_id,
-        s.server_name,
-        s.server_track,
-        s.session_type,
-        s.session_flag,
-        s.connected_players
-      FROM users u
-      LEFT JOIN servers s ON u.current_server = s.server_id
-      ${connectedOnly ? 'WHERE u.is_connect = true' : ''}
-      ORDER BY u.user_rank ASC
-    `;
-
-    const rows = await query(sql);
-
-    // Transform to proper structure
-    const drivers: DriverWithServer[] = rows.map((row: any) => ({
-      driver_guid: row.driver_guid,
-      driver_name: row.driver_name,
-      driver_team: row.driver_team,
-      car_model: row.car_model,
-      car_skin: row.car_skin,
-      cuts_alltime: row.cuts_alltime,
-      contacts_alltime: row.contacts_alltime,
-      laps_completed: row.laps_completed,
-      user_rank: row.user_rank,
-      is_connect: row.is_connect,
-      is_loading: row.is_loading,
-      current_server: row.current_server,
-      created_at: row.created_at,
-      // Include server info if they're connected
-      server: row.server_id ? {
-        server_id: row.server_id,
-        server_name: row.server_name,
-        server_track: row.server_track,
-        session_type: row.session_type,
-        session_flag: row.session_flag,
-        connected_players: row.connected_players,
-      } : undefined,
-    }));
-
-    return NextResponse.json({
-      success: true,
-      data: drivers,
-      count: drivers.length,
-    });
-
-  } catch (error) {
-    console.error('Error fetching drivers:', error);
-    return NextResponse.json(
-      { 
-        success: false, 
-        error: 'Failed to fetch drivers' 
-      },
-      { status: 500 }
-    );
-  }
-}
-
-// POST endpoint for updating driver data (optional, for future use)
-export async function POST(request: Request) {
-  try {
-    const body = await request.json();
-    
-    // Add your update logic here
-    // Example: Update driver rank, stats, etc.
-    
-    return NextResponse.json({
-      success: true,
-      message: 'Driver updated',
-    });
-  } catch (error) {
-    console.error('Error updating driver:', error);
-    return NextResponse.json(
-      { success: false, error: 'Failed to update driver' },
-      { status: 500 }
-    );
-  }
-}// app/api/drivers/route.ts
-// API Route: GET /api/drivers
-// Returns all connected drivers with their server info
-
-import { NextResponse } from 'next/server';
-import { query } from '@/lib/db';
-import { DriverWithServer } from '@/types/racing';
-
-export async function GET(request: Request) {
-  try {
-    // Parse query params (e.g., ?connected=true)
-    const { searchParams } = new URL(request.url);
-    const connectedOnly = searchParams.get('connected') === 'true';
-
-    // SQL query - joins drivers with servers
-    const sql = `
-      SELECT 
-        u.driver_guid,
-        u.driver_name,
-        u.driver_team,
-        u.car_model,
-        u.car_skin,
-        u.cuts_alltime,
-        u.contacts_alltime,
-        u.laps_completed,
-        u.user_rank,
-        u.is_connect,
-        u.is_loading,
-        u.current_server,
-        u.created_at,
-        s.server_id,
-        s.server_name,
-        s.server_track,
-        s.session_type,
-        s.session_flag,
-        s.connected_players
-      FROM users u
-      LEFT JOIN servers s ON u.current_server = s.server_id
-      ${connectedOnly ? 'WHERE u.is_connect = true' : ''}
-      ORDER BY u.user_rank ASC
-    `;
-
-    const rows = await query(sql);
-
-    // Transform to proper structure
-    const drivers: DriverWithServer[] = rows.map((row: any) => ({
-      driver_guid: row.driver_guid,
-      driver_name: row.driver_name,
-      driver_team: row.driver_team,
-      car_model: row.car_model,
-      car_skin: row.car_skin,
-      cuts_alltime: row.cuts_alltime,
-      contacts_alltime: row.contacts_alltime,
-      laps_completed: row.laps_completed,
-      user_rank: row.user_rank,
-      is_connect: row.is_connect,
-      is_loading: row.is_loading,
-      current_server: row.current_server,
-      created_at: row.created_at,
-      // Include server info if they're connected
-      server: row.server_id ? {
-        server_id: row.server_id,
-        server_name: row.server_name,
-        server_track: row.server_track,
-        session_type: row.session_type,
-        session_flag: row.session_flag,
-        connected_players: row.connected_players,
-      } : undefined,
-    }));
-
-    return NextResponse.json({
-      success: true,
-      data: drivers,
-      count: drivers.length,
-    });
-
-  } catch (error) {
-    console.error('Error fetching drivers:', error);
-    return NextResponse.json(
-      { 
-        success: false, 
-        error: 'Failed to fetch drivers' 
-      },
-      { status: 500 }
-    );
-  }
-}
-
 // POST endpoint for updating driver data (optional, for future use)
 export async function POST(request: Request) {
   try {

app/api/events/cars/route.ts

@@ -0,0 +1,22 @@
+// app/api/events/cars/route.ts
+// API endpoint to get available cars from server config
+
+import { NextResponse } from 'next/server';
+import { getAvailableCars } from '@/lib/serverConfig';
+
+export async function GET() {
+  try {
+    const cars = await getAvailableCars();
+    
+    return NextResponse.json({
+      success: true,
+      data: cars,
+    });
+  } catch (error) {
+    console.error('Error fetching cars:', error);
+    return NextResponse.json(
+      { success: false, error: 'Failed to load available cars' },
+      { status: 500 }
+    );
+  }
+}

app/api/events/register/route.ts

@@ -20,16 +20,15 @@ export async function POST(request: Request) {
     }
 
     // Validate steamId format to prevent SQL injection
-    const steamId = inputSteamId.trim(); // just in case
+    const driverGuid = steamId.trim(); // just in case
 
-    if (!/^[0-9]{15,20}$/.test(steamId)) {
+    if (!/^[0-9]{15,20}$/.test(driverGuid)) {
       return NextResponse.json(
         { success: false, error: "Invalid Steam ID format" },
         { status: 400 }
       );
     } 
 
-    const driverGuid = steamId;
     console.log('Parsed driver GUID:', driverGuid);
     if (isNaN(driverGuid)) {
       return NextResponse.json(

app/api/telemetry/route.ts

@@ -0,0 +1,89 @@
+// app/api/live/telemetry/route.ts
+// Server-Sent Events endpoint streaming from C++ Unix socket
+
+import { getTelemetryBridge } from '@/lib/telemetryBridge';
+
+export const dynamic = 'force-dynamic';
+export const runtime = 'nodejs';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const serverId = searchParams.get('serverId');
+  const filterServerId = serverId ? parseInt(serverId) : null;
+
+  const encoder = new TextEncoder();
+  const bridge = getTelemetryBridge();
+  
+  const stream = new ReadableStream({
+    start(controller) {
+      console.log('[SSE] Client connected', filterServerId ? `(server ${filterServerId})` : '(all servers)');
+      
+      // Send initial connection message
+      controller.enqueue(encoder.encode(`data: ${JSON.stringify({ 
+        type: 'connected',
+        bridge_status: bridge.isConnected() ? 'connected' : 'connecting'
+      })}\n\n`));
+
+      // Subscribe to telemetry updates
+      const unsubscribe = bridge.subscribe((packet) => {
+        // Filter by server if specified
+        if (filterServerId && packet.server_id !== filterServerId) {
+          return;
+        }
+
+        // Transform to client format
+        const telemetry = {
+          type: 'update',
+          timestamp: Date.now(),
+          server_id: packet.server_id,
+          cars: packet.cars.map((car, index) => ({
+            carID: car.carID,
+            driver_guid: car.driver_guid,
+            driver_name: car.driver_name,
+            car_model: car.car_model,
+            position: car.position || index + 1,
+            current_lap: car.current_lap,
+            normalizedSplinePos: car.normalizedSplinePos,
+            speed: Math.round(car.speed_kmh),
+            gear: car.gear,
+            rpm: car.rpm,
+            last_lap_time: car.last_lap_time || null,
+            best_lap_time: car.best_lap_time || null,
+          })),
+        };
+
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify(telemetry)}\n\n`));
+        } catch (error) {
+          console.error('[SSE] Error sending data:', error);
+        }
+      });
+
+      // Heartbeat every 30 seconds
+      const heartbeat = setInterval(() => {
+        try {
+          controller.enqueue(encoder.encode(`: heartbeat\n\n`));
+        } catch (error) {
+          clearInterval(heartbeat);
+        }
+      }, 30000);
+
+      // Cleanup on connection close
+      request.signal.addEventListener('abort', () => {
+        console.log('[SSE] Client disconnected');
+        unsubscribe();
+        clearInterval(heartbeat);
+        controller.close();
+      });
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+      'X-Accel-Buffering': 'no', // Disable nginx buffering
+    },
+  });
+}

app/dashboard/page.tsx

@@ -4,6 +4,8 @@
 import { query } from '@/lib/db';
 import { DriverWithServer } from '@/types/racing';
 import { UsersIcon, ServerIcon, ActivityIcon, MapPinIcon, FlagIcon, LiveDotIcon } from '@/components/ui/icons';
+import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
+export const dynamic = "force-dynamic";
 
 async function getConnectedDrivers(): Promise<DriverWithServer[]> {
   const sql = `
@@ -130,7 +132,7 @@ export default async function DashboardPage() {
                           ID: {server?.server_id}
                         </span>
                       </div>
-                      <h2 className="text-2xl font-bold tracking-tight">
+                      <h2 className="text-2xl font-light tracking-tight" style={{ letterSpacing: "0.1em" }}>
                         {server?.server_name}
                       </h2>
                       <div className="flex flex-wrap gap-x-6 gap-y-2">

app/events/[event_id]/page.tsx

@@ -49,7 +49,7 @@ function formatDate(date: Date): string {
 export default async function EventDetailPage({
   params,
 }: {
-  params: Promise<{ id: string }>;
+  params: Promise<{ event_id: string }>;
 }) {
   const { event_id } = await params;
   

app/events/page.tsx

@@ -5,6 +5,7 @@ import { query } from '@/lib/db';
 import { Event } from '@/types/racing';
 import Link from 'next/link';
 import { TrophyIcon, UsersIcon, MapPinIcon, ClockIcon, CalendarIcon } from '@/components/ui/icons';
+export const dynamic = "force-dynamic";
 
 async function getEvents(): Promise<Event[]> {
   const sql = `
@@ -75,7 +76,7 @@ export default async function EventsPage() {
               <div key={event.event_id} className="border border-white/10 sharp-border bg-black">
                 
                 <img 
-                    src="https://openwheels.racing/files/img/EnduranceEvents1-1.png"
+                    src="https://openwheels.racing/files/img/EnduranceEvents1-1.png?fckcache=999"
                     alt={event.event_name}
                     className="w-full h-48 object-cover object-[50%_0%] border-b border-white/10 grayscale hover:grayscale-0 transition duration-300"
                 />

app/globals.css

@@ -10,10 +10,10 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   font-family: 'BBH Sans Bartle', sans-serif;
-  letter-spacing: -0.02em;
+  letter-spacing: +0.07em;
 }
 
-span p a{
+span {
   letter-spacing: +0.08em;
 }
 

app/live/page.tsx

@@ -0,0 +1,132 @@
+// app/live/page.tsx
+// Live race view with track map and timing
+
+import { query } from '@/lib/db';
+import { ActivityIcon } from '@/components/ui/icons';
+import LiveSessionClient from '@/components/live/LiveSessionClient';
+export const dynamic = "force-dynamic";
+
+interface LiveData {
+  server_id: number;
+  server_name: string;
+  server_track: string;
+  server_config: string;
+  connected_players: number;
+  cars: any[];
+}
+
+async function getLiveData(): Promise<LiveData[]> {
+  const sql = `
+    SELECT 
+      s.server_id,
+      s.server_name,
+      s.server_track,
+      s.server_config,
+      s.connected_players
+    FROM servers s
+    WHERE s.connected_players > 0
+    ORDER BY s.connected_players DESC
+  `;
+
+  const servers = await query(sql);
+  
+  // For each server, get connected cars with their positions
+  const liveData = await Promise.all(
+    servers.map(async (server: any) => {
+      const carsSql = `
+        SELECT 
+          u.driver_guid,
+          u.driver_name,
+          u.car_model,
+          u.laps_completed
+        FROM users u
+        WHERE u.current_server = $1 AND u.is_connect = true
+        ORDER BY u.user_rank ASC
+      `;
+      
+      const cars = await query(carsSql, [server.server_id]);
+      
+      // Add mock data for positions (real data will come from telemetry stream)
+      const carsWithPositions = cars.map((car: any, index: number) => ({
+        ...car,
+        carID: index,
+        position: index + 1,
+        current_lap: car.laps_completed || 0,
+        normalizedSplinePos: Math.random(),
+        speed: 0,
+        gear: 0,
+        rpm: 0,
+        last_lap_time: null,
+        best_lap_time: null,
+      }));
+      
+      return {
+        ...server,
+        cars: carsWithPositions,
+      };
+    })
+  );
+
+  return liveData;
+}
+
+export default async function LivePage() {
+  const liveData = await getLiveData();
+
+  return (
+    <>
+      {/* Hero */}
+      <div className="relative border-b border-white/10 grid-overlay">
+        <div className="max-w-[1920px] mx-auto px-6 py-12">
+          <div className="space-y-4">
+            <div className="inline-flex items-center space-x-2 px-3 py-1 border border-white/20 bg-black">
+              <ActivityIcon className="w-4 h-4" />
+              <span className="text-xs font-medium tracking-wider">LIVE TIMING</span>
+            </div>
+            <h1 className="text-6xl font-bold tracking-tight">
+              LIVE VIEW
+            </h1>
+            <p className="text-white/60 text-lg max-w-3xl">
+              Real-time race positions and telemetry from active servers
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Live Sessions */}
+      <div className="max-w-[1920px] mx-auto px-6 py-12 space-y-12">
+        {liveData.length === 0 ? (
+          <div className="border border-white/10 p-16 text-center bg-black">
+            <ActivityIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
+            <p className="text-white/40 text-base tracking-wider">NO ACTIVE SESSIONS</p>
+            <p className="text-white/20 text-sm mt-2">Join a server to see live timing</p>
+          </div>
+        ) : (
+          liveData.map((session) => (
+            <LiveSessionClient
+              key={session.server_id}
+              serverId={session.server_id}
+              serverName={session.server_name}
+              serverTrack={session.server_track}
+              serverConfig={session.server_config}
+              connectedPlayers={session.connected_players}
+              initialCars={session.cars}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Info Box */}
+      <div className="max-w-[1920px] mx-auto px-6 pb-12">
+        <div className="border border-white/10 p-6 topo-lines-dense bg-black">
+          <h3 className="text-sm font-bold tracking-wider text-white/60 mb-4">ABOUT LIVE VIEW</h3>
+          <div className="space-y-2 text-sm text-white/60">
+            <p>• Data updates in real-time from UDP telemetry stream</p>
+            <p>• Track positions calculated from normalized spline position (0.0 - 1.0)</p>
+            <p>• Lap times and gaps updated every sector</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

app/page.tsx

@@ -4,6 +4,7 @@
 import Link from 'next/link';
 import { query } from '@/lib/db';
 import { TrophyIcon, ChartIcon, CircleIcon, UsersIcon, ServerIcon, ActivityIcon } from '@/components/ui/icons';
+export const dynamic = "force-dynamic";
 
 async function getStats() {
   const driversOnline = await query(`

app/rankings/page.tsx

@@ -4,6 +4,7 @@
 import { query } from '@/lib/db';
 import { TrophyIcon } from '@/components/ui/icons';
 import Link from 'next/link';
+export const dynamic = "force-dynamic";
 
 interface RankingDriver {
   driver_guid: string;
@@ -178,7 +179,7 @@ export default async function RankingsPage({
                       )}
                     </td>
                     <td className="px-6 py-4">
-                      <span className="font-semibold tracking-tight text-base" style={{ letterSpacing: "0.1em" }}>
+                      <span className="tracking-tight text-base" style={{ letterSpacing: "0.04em" }}>
                         {driver.driver_name}
                       </span>
                     </td>

components/events/EventRegistrationForm.tsx

@@ -1,7 +1,7 @@
 // components/events/EventRegistrationForm.tsx
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 
 export default function EventRegistrationForm({ eventId }: { eventId: number }) {
@@ -12,10 +12,35 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
     carSkin: '',
     teamName: '',
   });
+  const [availableCars, setAvailableCars] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
+  const [loadingCars, setLoadingCars] = useState(true);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
 
+  // Fetch available cars on mount
+  useEffect(() => {
+    const fetchCars = async () => {
+      try {
+        const response = await fetch('/api/events/cars');
+        const data = await response.json();
+        
+        if (data.success) {
+          setAvailableCars(data.data);
+        } else {
+          setError('Failed to load available cars');
+        }
+      } catch (err) {
+        console.error('Error fetching cars:', err);
+        setError('Failed to load available cars');
+      } finally {
+        setLoadingCars(false);
+      }
+    };
+
+    fetchCars();
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -49,6 +74,13 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
     }
   };
 
+  // Format car name for display
+  const formatCarName = (carId: string) => {
+    return carId
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, char => char.toUpperCase());
+  };
+
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       {/* Steam ID */}
@@ -68,21 +100,32 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
         <p className="text-xs text-white/40 mt-1">Your Steam ID from the database</p>
       </div>
 
-      {/* Car Model */}
+      {/* Car Model Dropdown */}
       <div>
         <label htmlFor="carModel" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
           CAR MODEL *
         </label>
-        <input
+        {loadingCars ? (
-          type="text"
+          <div className="w-full px-4 py-3 bg-black border border-white/20 text-white/40">
-          id="carModel"
+            Loading available cars...
-          required
+          </div>
-          value={formData.carModel}
+        ) : (
-          onChange={(e) => setFormData({ ...formData, carModel: e.target.value })}
+          <select
-          className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors font-mono"
+            id="carModel"
-          placeholder="ks_ferrari_488_gt3"
+            required
-        />
+            value={formData.carModel}
-        <p className="text-xs text-white/40 mt-1">Assetto Corsa car folder name</p>
+            onChange={(e) => setFormData({ ...formData, carModel: e.target.value })}
+            className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors cursor-pointer"
+          >
+            <option value="">Select a car</option>
+            {availableCars.map((car) => (
+              <option key={car} value={car}>
+                {formatCarName(car)}
+              </option>
+            ))}
+          </select>
+        )}
+        <p className="text-xs text-white/40 mt-1">Choose from available cars for this event</p>
       </div>
 
       {/* Car Skin */}
@@ -132,7 +175,7 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
       {/* Submit Button */}
       <button
         type="submit"
-        disabled={loading || success}
+        disabled={loading || success || loadingCars}
         className="w-full px-6 py-4 border border-white hover:bg-white hover:text-black transition-all text-sm font-bold tracking-wider disabled:opacity-50 disabled:cursor-not-allowed"
       >
         {loading ? 'REGISTERING...' : success ? 'REGISTERED!' : 'REGISTER NOW'}

components/live/LiveRefreshWrapper.tsx

@@ -0,0 +1,20 @@
+// components/live/LiveRefreshWrapper.tsx
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function LiveRefreshWrapper({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Refresh every 3 seconds for live updates
+    const interval = setInterval(() => {
+      router.refresh();
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [router]);
+
+  return <>{children}</>;
+}

components/live/LiveSessionClient.tsx

@@ -0,0 +1,130 @@
+// components/live/LiveSessionClient.tsx
+'use client';
+
+import { useLiveTelemetry } from '@/hooks/useLiveTelemetry';
+import LiveTrackMap from '@/components/live/LiveTrackMap';
+import LiveTiming from '@/components/live/LiveTiming';
+import { MapPinIcon, UsersIcon, SettingsIcon, LiveDotIcon } from '@/components/ui/icons';
+import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
+
+interface LiveSessionClientProps {
+  serverId: number;
+  serverName: string;
+  serverTrack: string;
+  serverConfig: string;
+  connectedPlayers: number;
+  initialCars: any[];
+}
+
+export default function LiveSessionClient({
+  serverId,
+  serverName,
+  serverTrack,
+  serverConfig,
+  connectedPlayers,
+  initialCars,
+}: LiveSessionClientProps) {
+  const { telemetry, connected, error } = useLiveTelemetry(serverId);
+
+  // Use live telemetry if available, otherwise use initial data
+  const cars = telemetry.length > 0 ? telemetry : initialCars;
+
+  return (
+    <div className="border border-white/10 bg-black">
+      {/* Server Header */}
+      <div className="border-b border-white/10 p-6 topo-lines-dense">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight mb-2">
+              {serverName}
+            </h2>
+            <div className="flex items-center space-x-4 text-sm text-white/60">
+              <div className="flex items-center space-x-1">
+                <MapPinIcon className="w-4 h-4" />
+                <span>{cleanTrackName(serverTrack)}</span>
+              </div>
+              {serverConfig && (
+                <div className="flex items-center space-x-1">
+                  <SettingsIcon className="w-4 h-4" />
+                  <span>{cleanTrackConfig(serverConfig)}</span>
+                </div>
+              )}
+              <div className="flex items-center space-x-1">
+                <UsersIcon className="w-4 h-4" />
+                <span>{connectedPlayers} drivers</span>
+              </div>
+            </div>
+          </div>
+          <div className={`flex items-center space-x-2 px-3 py-2 border ${
+            connected 
+              ? 'border-red-500/30 bg-red-500/10' 
+              : 'border-white/20 bg-white/5'
+          }`}>
+            <LiveDotIcon className={`w-2 h-2 ${connected ? 'text-red-500 animate-pulse' : 'text-white/40'}`} />
+            <span className={`text-xs font-bold tracking-wider ${
+              connected ? 'text-red-400' : 'text-white/40'
+            }`}>
+              {connected ? 'LIVE' : error ? 'OFFLINE' : 'CONNECTING'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6 p-6">
+        {/* Left: Timing Board (3 columns) */}
+        <div className="lg:col-span-3">
+          <div className="border border-white/10 bg-black p-4">
+            <div className="flex items-center justify-between mb-4 border-b border-white/10 pb-3">
+              <h3 className="text-xl font-bold tracking-tight">LIVE TIMING</h3>
+              {connected && (
+                <div className="text-xs text-white/40">
+                  Updates: {telemetry.length} cars
+                </div>
+              )}
+            </div>
+            <LiveTiming entries={cars} />
+          </div>
+        </div>
+
+        {/* Right: Track Map (2 columns) */}
+        <div className="lg:col-span-2">
+          <div className="sticky top-20">
+            <LiveTrackMap
+              track={serverTrack}
+              trackConfig={serverConfig}
+              cars={cars}
+            />
+            
+            {/* Session Info */}
+            <div className="mt-4 border border-white/10 bg-black p-4">
+              <h4 className="text-sm font-bold tracking-wider text-white/60 mb-3">SESSION INFO</h4>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-white/60">Drivers:</span>
+                  <span className="font-mono">{connectedPlayers}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-white/60">Track:</span>
+                  <span className="font-mono">{cleanTrackName(serverTrack)}</span>
+                </div>
+                {serverConfig && (
+                  <div className="flex justify-between">
+                    <span className="text-white/60">Layout:</span>
+                    <span className="font-mono">{cleanTrackConfig(serverConfig)}</span>
+                  </div>
+                )}
+                <div className="flex justify-between">
+                  <span className="text-white/60">Stream:</span>
+                  <span className={`font-mono ${connected ? 'text-green-400' : 'text-red-400'}`}>
+                    {connected ? 'Connected' : 'Offline'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/live/LiveTiming.tsx

@@ -0,0 +1,125 @@
+// components/live/LiveTiming.tsx
+'use client';
+
+import { BoltIcon } from '@/components/ui/icons';
+
+interface TimingEntry {
+  position: number;
+  carID: number;
+  driver_name: string;
+  car_model: string;
+  current_lap: number;
+  last_lap_time: number | null;
+  best_lap_time: number | null;
+  gap_to_leader: string;
+  avg_lap_time: number | null;
+}
+
+interface LiveTimingProps {
+  entries: TimingEntry[];
+}
+
+export default function LiveTiming({ entries }: LiveTimingProps) {
+  
+  // Format lap time from milliseconds
+  const formatLapTime = (ms: number | null) => {
+    if (!ms || ms === 0) return '-:--.---';
+    
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+    const milliseconds = ms % 1000;
+    
+    return `${minutes}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
+  };
+
+  // Get position color
+  const getPositionColor = (position: number) => {
+    if (position === 1) return 'text-white border-white';
+    if (position === 2) return 'text-white/90 border-white/70';
+    if (position === 3) return 'text-white/80 border-white/50';
+    return 'text-white/60 border-white/20';
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* Header */}
+      <div className="grid grid-cols-12 gap-2 px-3 py-2 border-b border-white/10 text-xs font-bold tracking-wider text-white/40">
+        <div className="col-span-1">POS</div>
+        <div className="col-span-4">DRIVER</div>
+        <div className="col-span-2 text-right">LAP</div>
+        <div className="col-span-3 text-right">LAST LAP</div>
+        <div className="col-span-2 text-right">BEST</div>
+      </div>
+
+      {/* Timing Entries */}
+      <div className="space-y-1">
+        {entries.map((entry) => {
+          const isLeader = entry.position === 1;
+          const isFastestLap = entries.length > 0 && 
+            entry.best_lap_time === Math.min(...entries.filter(e => e.best_lap_time).map(e => e.best_lap_time!));
+
+          return (
+            <div
+              key={entry.carID}
+              className={`
+                grid grid-cols-12 gap-2 px-3 py-3 border transition-all
+                ${getPositionColor(entry.position)}
+                hover:bg-white/5
+                ${isLeader ? 'bg-white/[0.02]' : ''}
+              `}
+            >
+              {/* Position */}
+              <div className="col-span-1 flex items-center">
+                <span className="text-lg font-bold">
+                  {String(entry.position).padStart(2, '0')}
+                </span>
+              </div>
+
+              {/* Driver Info */}
+              <div className="col-span-4 flex flex-col justify-center">
+                <div className="font-normal truncate" style={{ letterSpacing: "0.1em" }}>{entry.driver_name}</div>
+                <div className="text-xs text-white/40 font-mono truncate">{entry.car_model}</div>
+              </div>
+
+              {/* Current Lap */}
+              <div className="col-span-2 flex items-center justify-end">
+                <span className="font-mono text-sm">{entry.current_lap}</span>
+              </div>
+
+              {/* Last Lap Time */}
+              <div className="col-span-3 flex flex-col items-end justify-center">
+                <div className="font-mono text-sm">
+                  {formatLapTime(entry.last_lap_time)}
+                </div>
+                {entry.avg_lap_time && (
+                  <div className="text-xs text-white/40 font-mono">
+                    Avg: {formatLapTime(entry.avg_lap_time)}
+                  </div>
+                )}
+              </div>
+
+              {/* Best Lap Time */}
+              <div className="col-span-2 flex items-center justify-end">
+                <div className={`font-mono text-sm flex items-center space-x-1 ${isFastestLap ? 'text-purple-400' : ''}`}>
+                  <span>{formatLapTime(entry.best_lap_time)}</span>
+                  {isFastestLap && (
+                    <BoltIcon className="w-3 h-3" />
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Legend */}
+      <div className="border-t border-white/10 pt-3 px-3 text-xs text-white/40 space-y-1">
+        <div className="flex items-center space-x-2">
+          <BoltIcon className="w-3 h-3" />
+          <span>Fastest lap overall</span>
+        </div>
+        <div>Times updated in real-time from server telemetry</div>
+      </div>
+    </div>
+  );
+}

components/live/LiveTrackMap.tsx

@@ -0,0 +1,145 @@
+// components/live/LiveTrackMap.tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getTrackMapUrl, cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
+
+interface Car {
+  carID: number;
+  driver_name: string;
+  car_model: string;
+  normalizedSplinePos: number;
+  position: number;
+  lap_time?: number;
+  best_lap_time?: number;
+}
+
+interface LiveTrackMapProps {
+  track: string;
+  trackConfig: string;
+  cars: Car[];
+}
+
+export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapProps) {
+  const [imageError, setImageError] = useState(false);
+  
+  // Get cleaned track map URL
+  const trackMapUrl = getTrackMapUrl(track, trackConfig);
+  const displayTrackName = cleanTrackName(track);
+  const displayTrackConfig = cleanTrackConfig(trackConfig);
+
+  // Calculate position on track (circular approximation)
+  const getCarPosition = (normalizedPos: number) => {
+    // normalizedPos is 0.0 to 1.0 around the track
+    // We'll place cars in a circular path for now
+    const angle = normalizedPos * Math.PI * 2 - Math.PI / 2; // Start at top
+    
+    // Position relative to center (percentage)
+    const centerX = 50;
+    const centerY = 50;
+    const radius = 40; // 40% from center
+    
+    const x = centerX + Math.cos(angle) * radius;
+    const y = centerY + Math.sin(angle) * radius;
+    
+    return { x, y };
+  };
+
+  // Get color based on position
+  const getPositionColor = (position: number) => {
+    if (position === 1) return '#ffffff'; // P1 - White
+    if (position === 2) return '#d1d5db'; // P2 - Light gray
+    if (position === 3) return '#9ca3af'; // P3 - Gray
+    return '#6b7280'; // Others - Dark gray
+  };
+
+  return (
+    <div className="relative w-full aspect-square bg-black border border-white/10 overflow-hidden">
+      {/* Track Map Background */}
+      {!imageError ? (
+        <img
+          src={trackMapUrl}
+          alt={`${track} track map`}
+          className="absolute inset-0 w-full h-full object-contain opacity-60"
+          onError={() => setImageError(true)}
+        />
+      ) : (
+        <div className="absolute inset-0 flex items-center justify-center text-white/40 text-sm">
+          Track map not available
+        </div>
+      )}
+
+      {/* Grid overlay for reference */}
+      <div className="absolute inset-0 opacity-10">
+        <svg width="100%" height="100%" className="text-white">
+          <defs>
+            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="0.5"/>
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#grid)" />
+        </svg>
+      </div>
+
+      {/* Car Positions */}
+      <div className="absolute inset-0">
+        {cars.map((car) => {
+          const pos = getCarPosition(car.normalizedSplinePos);
+          const color = getPositionColor(car.position);
+          
+          return (
+            <div
+              key={car.carID}
+              className="absolute transition-all duration-300 ease-linear"
+              style={{
+                left: `${pos.x}%`,
+                top: `${pos.y}%`,
+                transform: 'translate(-50%, -50%)',
+              }}
+            >
+              {/* Car dot */}
+              <div
+                className="w-4 h-4 rounded-full border-2 animate-pulse"
+                style={{
+                  backgroundColor: color,
+                  borderColor: color,
+                  boxShadow: `0 0 10px ${color}`,
+                }}
+              />
+              
+              {/* Position number */}
+              <div
+                className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs font-bold whitespace-nowrap px-2 py-1 bg-black/80 border"
+                style={{ borderColor: color, color: color }}
+              >
+                P{car.position}
+              </div>
+
+              {/* Driver name on hover */}
+              <div className="absolute top-6 left-1/2 transform -translate-x-1/2 opacity-0 hover:opacity-100 transition-opacity whitespace-nowrap">
+                <div className="px-2 py-1 bg-black/90 border border-white/20 text-xs">
+                  {car.driver_name}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Track info overlay */}
+      <div className="absolute top-4 left-4 bg-black/80 border border-white/20 px-3 py-2">
+        <div className="text-xs font-bold tracking-wider text-white/60">TRACK</div>
+        <div className="text-sm font-mono">{track}</div>
+        {trackConfig && trackConfig !== 'default' && (
+          <div className="text-xs text-white/60">{trackConfig}</div>
+        )}
+      </div>
+
+      {/* Live indicator */}
+      <div className="absolute top-4 right-4 flex items-center space-x-2 bg-black/80 border border-white/20 px-3 py-2">
+        <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
+        <span className="text-xs font-bold tracking-wider">LIVE</span>
+      </div>
+    </div>
+  );
+}

components/ui/icons.tsx

@@ -1,4 +1,4 @@
-// components/ui/icons.tsx
+// components/ui/Icons.tsx
 // Sharp, technical SVG icons for racing dashboard
 
 export function UsersIcon({ className = "w-6 h-6" }: { className?: string }) {
@@ -91,7 +91,7 @@ export function LiveDotIcon({ className = "w-3 h-3" }: { className?: string }) {
 export function CalendarIcon({ className = "w-6 h-6" }: { className?: string }) {
   return (
     <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <rect x="3" y="4" width="18" height="18" rx="2" strokeLinecap="square" strokeLinejoin="miter"/>
+      <rect x="3" y="4" width="18" height="18" rx="0" strokeLinecap="square" strokeLinejoin="miter"/>
       <line x1="16" y1="2" x2="16" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
       <line x1="8" y1="2" x2="8" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
       <line x1="3" y1="10" x2="21" y2="10" strokeLinecap="square" strokeLinejoin="miter"/>
@@ -99,38 +99,28 @@ export function CalendarIcon({ className = "w-6 h-6" }: { className?: string })
   );
 }
 
-export function ChevronRightIcon({ className = "w-6 h-6" }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <polyline points="9 18 15 12 9 6" strokeLinecap="square" strokeLinejoin="miter"/>
-    </svg>
-  );
-}
-
-export function ChevronLeftIcon({ className = "w-6 h-6" }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <polyline points="15 18 9 12 15 6" strokeLinecap="square" strokeLinejoin="miter"/>
-    </svg>
-  );
-}
-
-export function ExternalLinkIcon({ className = "w-6 h-6" }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" strokeLinecap="square" strokeLinejoin="miter"/>
-      <polyline points="15 3 21 3 21 9" strokeLinecap="square" strokeLinejoin="miter"/>
-      <line x1="10" y1="14" x2="21" y2="3" strokeLinecap="square" strokeLinejoin="miter"/>
-    </svg>
-  );
-}
-
 export function ClockIcon({ className = "w-6 h-6" }: { className?: string }) {
-    return (
+  return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-            <circle cx="12" cy="12" r="10" strokeLinecap="square" strokeLinejoin="miter"/>
+      <circle cx="12" cy="12" r="10" strokeLinecap="square" strokeLinejoin="miter"/>
-            <polyline points="12 6 12 12 16 14" strokeLinecap="square" strokeLinejoin="miter"/>
+      <polyline points="12 6 12 12 16 14" strokeLinecap="square" strokeLinejoin="miter"/>
-        </svg>
+    </svg>
-    );
+  );
 }
 
+export function SettingsIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <circle cx="12" cy="12" r="3" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function BoltIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}

hooks/useLiveTelemetry.ts

@@ -0,0 +1,74 @@
+// hooks/useLiveTelemetry.ts
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface TelemetryCar {
+  carID: number;
+  driver_guid: string;
+  driver_name: string;
+  car_model: string;
+  position: number;
+  current_lap: number;
+  normalizedSplinePos: number;
+  speed: number;
+  gear: number;
+  rpm: number;
+  last_lap_time: number | null;
+  best_lap_time: number | null;
+}
+
+interface TelemetryData {
+  type: string;
+  timestamp: number;
+  cars: TelemetryCar[];
+}
+
+export function useLiveTelemetry(serverId?: number) {
+  const [telemetry, setTelemetry] = useState<TelemetryCar[]>([]);
+  const [connected, setConnected] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = serverId 
+      ? `/api/live/telemetry?serverId=${serverId}`
+      : '/api/live/telemetry';
+
+    const eventSource = new EventSource(url);
+
+    eventSource.onopen = () => {
+      console.log('[Telemetry] Connected');
+      setConnected(true);
+      setError(null);
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data: TelemetryData = JSON.parse(event.data);
+        
+        if (data.type === 'connected') {
+          console.log('[Telemetry] Stream established');
+        } else if (data.type === 'update') {
+          setTelemetry(data.cars);
+        }
+      } catch (err) {
+        console.error('[Telemetry] Parse error:', err);
+      }
+    };
+
+    eventSource.onerror = (err) => {
+      console.error('[Telemetry] Connection error:', err);
+      setConnected(false);
+      setError('Connection lost');
+      eventSource.close();
+    };
+
+    // Cleanup on unmount
+    return () => {
+      console.log('[Telemetry] Disconnecting');
+      eventSource.close();
+    };
+  }, [serverId]);
+
+  return { telemetry, connected, error };
+}

lib/serverConfig.ts

@@ -0,0 +1,46 @@
+// lib/serverConfig.ts
+// Parse AC server config to get available cars
+
+import { promises as fs } from 'fs';
+
+const SERVER_CONFIG_PATH = '/mnt/combined/servers/acserver_EVENTS/utils/cfg/server_cfg.ini';
+
+export async function getAvailableCars(): Promise<string[]> {
+  try {
+    const content = await fs.readFile(SERVER_CONFIG_PATH, 'utf-8');
+    
+    // Find the CARS= line
+    const carsLine = content
+      .split('\n')
+      .find(line => line.trim().startsWith('CARS='));
+    
+    if (!carsLine) {
+      console.error('CARS line not found in server config');
+      return [];
+    }
+    
+    // Extract cars list after "CARS="
+    const carsString = carsLine.split('CARS=')[1].trim();
+    
+    // Split by semicolon and remove duplicates
+    const cars = carsString
+      .split(';')
+      .map(car => car.trim())
+      .filter(car => car.length > 0);
+    
+    // Remove duplicates using Set
+    const uniqueCars = Array.from(new Set(cars));
+    
+    return uniqueCars.sort();
+  } catch (error) {
+    console.error('Error reading server config:', error);
+    return [];
+  }
+}
+
+// Format car name for display (optional - makes it prettier)
+export function formatCarName(carId: string): string {
+  return carId
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, char => char.toUpperCase());
+}

lib/telemetryBridge.ts

@@ -0,0 +1,202 @@
+// lib/telemetryBridge.ts
+// Bridge between C++ Unix socket and Next.js SSE
+
+import { Socket } from 'net';
+
+const TELEMETRY_SOCKET_PATH = '/tmp/ACtelemetry_socket';
+
+interface CarTelemetry {
+  carID: number;
+  driver_name: string;
+  driver_guid: string;
+  car_model: string;
+  normalizedSplinePos: number;
+  speed_kmh: number;
+  gear: number;
+  rpm: number;
+  last_lap_time: number;
+  best_lap_time: number;
+  current_lap: number;
+  position: number;
+}
+
+interface TelemetryPacket {
+  server_id: number;
+  car_count: number;
+  cars: CarTelemetry[];
+}
+
+type TelemetryCallback = (data: TelemetryPacket) => void;
+
+class TelemetryBridge {
+  private socket: Socket | null = null;
+  private connected: boolean = false;
+  private callbacks: Set<TelemetryCallback> = new Set();
+  private reconnectTimeout: NodeJS.Timeout | null = null;
+  private buffer: Buffer = Buffer.alloc(0);
+
+  constructor() {
+    this.connect();
+  }
+
+  private connect() {
+    console.log('[Telemetry] Connecting to', TELEMETRY_SOCKET_PATH);
+    
+    this.socket = new Socket();
+    
+    this.socket.connect(TELEMETRY_SOCKET_PATH, () => {
+      console.log('[Telemetry] Connected to C++ socket');
+      this.connected = true;
+      this.buffer = Buffer.alloc(0); // Reset buffer on new connection
+    });
+
+    this.socket.on('data', (data: Buffer) => {
+      // Append new data to buffer
+      this.buffer = Buffer.concat([this.buffer, data]);
+      
+      // Parse complete packets from buffer
+      this.parsePackets();
+    });
+
+    this.socket.on('error', (err) => {
+      console.error('[Telemetry] Socket error:', err.message);
+      this.connected = false;
+    });
+
+    this.socket.on('close', () => {
+      console.log('[Telemetry] Connection closed, reconnecting in 2s...');
+      this.connected = false;
+      this.socket = null;
+      
+      // Reconnect after 2 seconds
+      if (this.reconnectTimeout) clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = setTimeout(() => this.connect(), 2000);
+    });
+  }
+
+  private parsePackets() {
+    // Telemetry packet structure from C++:
+    // uint8_t server_id (1 byte)
+    // uint8_t car_count (1 byte)
+    // car_telemetry cars[64] (each car = 158 bytes)
+    
+    const HEADER_SIZE = 2;
+    const CAR_SIZE = 158; // Size of car_telemetry struct
+    
+    while (this.buffer.length >= HEADER_SIZE) {
+      const server_id = this.buffer.readUInt8(0);
+      const car_count = this.buffer.readUInt8(1);
+      
+      const expected_size = HEADER_SIZE + (car_count * CAR_SIZE);
+      
+      if (this.buffer.length < expected_size) {
+        // Not enough data yet, wait for more
+        break;
+      }
+      
+      // Parse the packet
+      const packet: TelemetryPacket = {
+        server_id,
+        car_count,
+        cars: [],
+      };
+      
+      let offset = HEADER_SIZE;
+      
+      for (let i = 0; i < car_count; i++) {
+        const carID = this.buffer.readUInt8(offset);
+        offset += 1;
+        
+        const driver_name = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
+        offset += 64;
+        
+        const driver_guid = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
+        offset += 64;
+        
+        const car_model = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
+        offset += 64;
+        
+        const normalizedSplinePos = this.buffer.readFloatLE(offset);
+        offset += 4;
+        
+        const speed_kmh = this.buffer.readFloatLE(offset);
+        offset += 4;
+        
+        const gear = this.buffer.readUInt8(offset);
+        offset += 1;
+        
+        const rpm = this.buffer.readUInt16LE(offset);
+        offset += 2;
+        
+        const last_lap_time = this.buffer.readUInt32LE(offset);
+        offset += 4;
+        
+        const best_lap_time = this.buffer.readUInt32LE(offset);
+        offset += 4;
+        
+        const current_lap = this.buffer.readUInt16LE(offset);
+        offset += 2;
+        
+        const position = this.buffer.readUInt8(offset);
+        offset += 1;
+        
+        packet.cars.push({
+          carID,
+          driver_name,
+          driver_guid,
+          car_model,
+          normalizedSplinePos,
+          speed_kmh,
+          gear,
+          rpm,
+          last_lap_time,
+          best_lap_time,
+          current_lap,
+          position,
+        });
+      }
+      
+      // Emit packet to all callbacks
+      this.callbacks.forEach(cb => cb(packet));
+      
+      // Remove processed packet from buffer
+      this.buffer = this.buffer.subarray(expected_size);
+    }
+  }
+
+  public subscribe(callback: TelemetryCallback): () => void {
+    this.callbacks.add(callback);
+    console.log('[Telemetry] Subscriber added, total:', this.callbacks.size);
+    
+    // Return unsubscribe function
+    return () => {
+      this.callbacks.delete(callback);
+      console.log('[Telemetry] Subscriber removed, total:', this.callbacks.size);
+    };
+  }
+
+  public isConnected(): boolean {
+    return this.connected;
+  }
+
+  public disconnect() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+    }
+    if (this.socket) {
+      this.socket.destroy();
+      this.socket = null;
+    }
+    this.connected = false;
+  }
+}
+
+// Singleton instance
+let bridge: TelemetryBridge | null = null;
+
+export function getTelemetryBridge(): TelemetryBridge {
+  if (!bridge) {
+    bridge = new TelemetryBridge();
+  }
+  return bridge;
+}

lib/trackUtils.ts

@@ -0,0 +1,57 @@
+// lib/trackUtils.ts
+// Utility functions for track name handling
+
+/**
+ * Clean track name from database format
+ * Example: "csp/2000/../jr_road_atlanta_2022" -> "jr_road_atlanta_2022"
+ */
+export function cleanTrackName(trackName: string): string {
+  if (!trackName) return '';
+  
+  // Split by '/' and get the last segment
+  const segments = trackName.split('/');
+  const lastSegment = segments[segments.length - 1];
+  
+  return lastSegment.trim();
+}
+
+/**
+ * Clean track config name
+ * Example: "csp/2000/../full" -> "full"
+ */
+export function cleanTrackConfig(configName: string): string {
+  if (!configName) return '';
+  
+  // Split by '/' and get the last segment
+  const segments = configName.split('/');
+  const lastSegment = segments[segments.length - 1];
+  
+  return lastSegment.trim();
+}
+
+/**
+ * Format track name for display
+ * Example: "jr_road_atlanta_2022" -> "JR Road Atlanta 2022"
+ */
+export function formatTrackName(trackName: string): string {
+  return cleanTrackName(trackName)
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, char => char.toUpperCase());
+}
+
+/**
+ * Get track map URL
+ * Handles the track name cleaning and URL construction
+ */
+export function getTrackMapUrl(trackName: string, trackConfig?: string): string {
+  const baseUrl = 'https://openwheels.racing/files/img/tracks';
+  const cleanedTrack = cleanTrackName(trackName);
+  const cleanedConfig = trackConfig ? cleanTrackConfig(trackConfig) : '';
+  
+  // Try with config first, fallback to map.png if no config or config is default
+  if (cleanedConfig && cleanedConfig !== 'default' && cleanedConfig !== '') {
+    return `${baseUrl}/${cleanedTrack}/${cleanedConfig}/map.png`;
+  }
+  
+  return `${baseUrl}/${cleanedTrack}/map.png`;
+}