feat(tesla): real Fleet API integration — OAuth, vehicle state, send-to-nav

Server:
- teslaTokenStore: file-backed token store at /app/data/tesla-tokens.json
- teslaClient: OAuth (authorize/code-exchange/refresh), Fleet API GET/POST,
  listVehicles, getVehicleData, wake, sendNavigationRequest, getAppToken,
  registerPartnerAccount; auto-rotates refresh tokens 60s before expiry
- /api/tesla/status, /api/auth/tesla/start, /api/auth/tesla/callback,
  /api/tesla/state, /api/tesla/wake, /api/tesla/send-to-nav,
  /api/tesla/disconnect, /api/tesla/register-partner
- State includes battery, range (mi→km), charging power/eta, GPS,
  shift_state, model/trim auto-detected from vehicle_config

Client:
- useTesla hook: auto-fetches status, polls live state every 60s when connected
- Connect Tesla chip in TopBar; on connect shows battery% + range
- Per-stop "Send to Tesla nav" button (only when Tesla connected)
- "Use my location" button prefers vehicle GPS over browser geolocation
- Auto-detects model/trim from Tesla and updates the vehicle picker
- When in-car AND Tesla connected: auto-fills origin from car's GPS,
  hides the vehicle chip (we know the car), hides GPX export and Share

client/src/pages/TeslaTripPlanner.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { toast } from 'sonner';
 import { MapContainer, TileLayer, Marker, Polyline, Popup, useMap } from 'react-leaflet';
+import { useTesla, startTeslaConnect, disconnectTesla, sendToTeslaNav, wakeTesla } from '../lib/tesla';
+import { detectInCar } from '../lib/incar';
 import L from 'leaflet';
 import {
   Send, Sparkles, Download, Share2, ChevronDown, ChevronUp, X,
@@ -8,6 +10,7 @@ import {
   Zap, Bed, Flag, Home as HomeIcon, Coffee, Utensils, Camera,
   ShoppingBag, Footprints, Wifi, MapPin, Route, Clock, TreePine, Euro,
   CalendarDays, Ship, Users, ExternalLink, Crosshair, ArrowUp, ArrowDown,
+  Car, Battery, Navigation,
 } from 'lucide-react';
 
 // Fix Leaflet default icons (we still need pins for non-active stops)
@@ -983,12 +986,14 @@ function ChargerSwapBlock({ options, onPick }: { options: ChargerOption[]; onPic
   );
 }
 
-function StopExpansion({ stop, onSwap, onRemove, onCustomise, onPickCrossing }: {
+function StopExpansion({ stop, onSwap, onRemove, onCustomise, onPickCrossing, onSendToNav, canSendToNav }: {
   stop: Stop;
   onSwap: (alt: AlternativeStop) => void;
   onRemove: () => void;
   onCustomise: () => void;
   onPickCrossing?: (c: CrossingOption) => void;
+  onSendToNav?: () => void;
+  canSendToNav?: boolean;
 }) {
   const isCharge = stop.type === 'supercharger' || stop.type === 'destination-charger';
   const isCrossing = stop.type === 'crossing' || stop.type === 'tunnel' || stop.type === 'ferry';
@@ -1115,12 +1120,21 @@ function StopExpansion({ stop, onSwap, onRemove, onCustomise, onPickCrossing }:
       )}
 
       <div className="flex gap-1.5 mt-3">
+        {canSendToNav && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onSendToNav?.(); }}
+            className="flex-1 h-8 inline-flex items-center justify-center gap-1.5 rounded-lg text-[11.5px] transition"
+            style={{ background: 'var(--gd-red)', color: '#fff', border: '1px solid var(--gd-red)' }}
+          >
+            <Navigation className="w-3 h-3" /> Send to Tesla nav
+          </button>
+        )}
         <button
           onClick={(e) => { e.stopPropagation(); onCustomise(); }}
           className="flex-1 h-8 inline-flex items-center justify-center gap-1.5 rounded-lg text-[11.5px] border transition"
           style={{ background: 'var(--gd-panel-2)', borderColor: 'var(--gd-border)', color: 'var(--gd-text)' }}
         >
-          <Settings2 className="w-3 h-3" /> Customise stop
+          <Settings2 className="w-3 h-3" /> Customise
         </button>
         <button
           onClick={(e) => { e.stopPropagation(); onRemove(); }}
@@ -1191,7 +1205,7 @@ function NightBlock({ lastStop, onOpenHotelOptions }: { lastStop: Stop; onOpenHo
 // ─── Stop card (icon-led) ────────────────────────────────────────────────────
 function StopCard({
   stop, active, hover, dragging, onSelect, onHover, onSwap, onRemove, onCustomise, onPickCrossing,
-  onMoveUp, onMoveDown, canMoveUp, canMoveDown,
+  onMoveUp, onMoveDown, canMoveUp, canMoveDown, onSendToNav, canSendToNav,
   onDragStart, onDragOver, onDrop, onDragEnd,
 }: {
   stop: Stop;
@@ -1208,6 +1222,8 @@ function StopCard({
   onMoveDown: () => void;
   canMoveUp: boolean;
   canMoveDown: boolean;
+  onSendToNav?: () => void;
+  canSendToNav?: boolean;
   onDragStart: (e: React.DragEvent) => void;
   onDragOver: (e: React.DragEvent) => void;
   onDrop: (e: React.DragEvent) => void;
@@ -1308,7 +1324,7 @@ function StopCard({
             </div>
           )}
 
-          {active && <StopExpansion stop={stop} onSwap={onSwap} onRemove={onRemove} onCustomise={onCustomise} onPickCrossing={onPickCrossing} />}
+          {active && <StopExpansion stop={stop} onSwap={onSwap} onRemove={onRemove} onCustomise={onCustomise} onPickCrossing={onPickCrossing} onSendToNav={onSendToNav} canSendToNav={canSendToNav} />}
         </div>
       </div>
     </div>
@@ -1358,6 +1374,7 @@ function TopBar({
   chatInput, setChatInput, onChatSubmit, chips, onRemoveChip,
   vehicle, onOpenVehiclePanel, grokStatus, onOpenGpx,
   travelDates, onOpenDates, onUseMyLocation,
+  teslaStatus, teslaState, onConnectTesla, onDisconnectTesla, inCar,
 }: {
   origin: string; destination: string;
   onOriginChange: (v: string) => void;
@@ -1372,7 +1389,14 @@ function TopBar({
   travelDates: TravelDates;
   onOpenDates: (rect: DOMRect) => void;
   onUseMyLocation: () => void;
+  teslaStatus: ReturnType<typeof useTesla>['status'];
+  teslaState: ReturnType<typeof useTesla>['state'];
+  onConnectTesla: () => void;
+  onDisconnectTesla: () => void;
+  inCar: boolean;
 }) {
+  const hideVehicleChip = inCar && !!teslaStatus?.connected;
+  const hideGpxChip = inCar;
   const [locating, setLocating] = React.useState(false);
   const handleLocate = async () => {
     setLocating(true);
@@ -1493,7 +1517,8 @@ function TopBar({
         </button>
       </div>
 
-      {/* Vehicle chip — opens trim panel */}
+      {/* Vehicle chip — opens trim panel. Hidden when in-car with Tesla connected (we already know the car). */}
+      {!hideVehicleChip && (
       <button
         onClick={(e) => onOpenVehiclePanel(e.currentTarget.getBoundingClientRect())}
         className="h-[38px] px-3 inline-flex items-center gap-2 rounded-[10px] cursor-pointer"
@@ -1509,6 +1534,7 @@ function TopBar({
         </div>
         <ChevronDown className="w-3 h-3" style={{ color: 'var(--gd-text-3)' }} />
       </button>
+      )}
 
       <button
         onClick={(e) => onOpenDates(e.currentTarget.getBoundingClientRect())}
@@ -1524,14 +1550,48 @@ function TopBar({
         <ChevronDown className="w-3 h-3" style={{ color: datesEmpty ? 'var(--gd-red)' : 'var(--gd-text-3)' }} />
       </button>
 
-      <ChipButton onClick={() => onOpenGpx()}>
-        <Download className="w-3.5 h-3.5" style={{ color: 'var(--gd-text-2)' }} />
-        Export
-      </ChipButton>
-      <ChipButton onClick={() => toast('Shareable link copied')}>
-        <Share2 className="w-3.5 h-3.5" style={{ color: 'var(--gd-text-2)' }} />
-        Share
-      </ChipButton>
+      {teslaStatus?.available && (
+        teslaStatus.connected ? (
+          <button
+            onClick={onDisconnectTesla}
+            title="Disconnect Tesla"
+            className="h-[38px] px-3 inline-flex items-center gap-2 rounded-[10px] cursor-pointer"
+            style={{ background: 'var(--gd-panel)', border: '1px solid var(--gd-border)' }}
+          >
+            <Car className="w-3.5 h-3.5" style={{ color: 'var(--gd-red)' }} />
+            <div className="flex flex-col items-start leading-[1.15]">
+              <div className="text-[11.5px] font-medium">
+                {teslaState?.battery != null ? `${teslaState.battery}%` : 'Connected'}
+              </div>
+              <div className="text-[9.5px] num" style={{ color: 'var(--gd-text-3)' }}>
+                {teslaState?.rangeKm != null ? `${teslaState.rangeKm} km` : (teslaState?.asleep ? 'asleep' : '—')}
+              </div>
+            </div>
+          </button>
+        ) : (
+          <button
+            onClick={onConnectTesla}
+            className="h-[38px] px-3 inline-flex items-center gap-2 rounded-[10px] cursor-pointer"
+            style={{ background: 'var(--gd-red-soft)', border: '1px solid var(--gd-red-line)', color: 'var(--gd-red)' }}
+          >
+            <Car className="w-3.5 h-3.5" />
+            <div className="text-[12px] font-medium">Connect Tesla</div>
+          </button>
+        )
+      )}
+
+      {!hideGpxChip && (
+        <ChipButton onClick={() => onOpenGpx()}>
+          <Download className="w-3.5 h-3.5" style={{ color: 'var(--gd-text-2)' }} />
+          Export
+        </ChipButton>
+      )}
+      {!inCar && (
+        <ChipButton onClick={() => toast('Shareable link copied')}>
+          <Share2 className="w-3.5 h-3.5" style={{ color: 'var(--gd-text-2)' }} />
+          Share
+        </ChipButton>
+      )}
       {grokStatus.label && (
         <div className="text-[10px] px-2 py-1 rounded" style={{ background: 'var(--gd-panel-2)', color: 'var(--gd-text-3)' }}>
           {grokStatus.label}
@@ -1543,6 +1603,69 @@ function TopBar({
 
 // ─── Main planner ────────────────────────────────────────────────────────────
 export default function TeslaTripPlanner() {
+  const tesla = useTesla();
+  const inCar = React.useMemo(() => detectInCar().isInCar, []);
+  const teslaConnected = !!tesla.status?.connected;
+  const teslaInCar = inCar && teslaConnected;
+
+  // When Tesla is connected, auto-detect the vehicle model + trim from the
+  // Fleet API response so the planner uses the real range / kW instead of
+  // the default.
+  React.useEffect(() => {
+    if (!tesla.state) return;
+    const carType = tesla.state.carType || tesla.status?.carType;
+    const trimBadging = tesla.state.trimBadging || tesla.status?.trimBadging;
+    if (!carType) return;
+    const modelId = carType === 'modely' ? 'model-y'
+      : carType === 'model3' ? 'model-3'
+      : carType === 'models' ? 'model-s'
+      : carType === 'modelx' ? 'model-x'
+      : carType === 'cybertruck' ? 'cybertruck'
+      : null;
+    if (!modelId) return;
+    const model = TESLA_MODELS.find(m => m.id === modelId);
+    if (!model) return;
+    // Match trim badging (e.g. "lrawd" → Long Range AWD)
+    const trim = model.trims.find(t => {
+      const n = (trimBadging || '').toLowerCase();
+      const id = t.id.toLowerCase().replace(/-/g, '');
+      return n === id || n.includes(id) || id.includes(n);
+    }) || model.trims[0];
+    if (!trim) return;
+    setVehicle(prev => prev.modelId === model.id && prev.trimId === trim.id ? prev : {
+      modelId: model.id, trimId: trim.id, name: model.name, trim: trim.name,
+      rangeKm: trim.rangeKm, kw: trim.kw, sec0to60: trim.sec0to60, topKmh: trim.topKmh, badge: trim.badge,
+    });
+  }, [tesla.state?.carType, tesla.state?.trimBadging, tesla.status?.carType, tesla.status?.trimBadging]);
+
+  // When in-car AND Tesla connected: auto-fill the origin from the car's GPS
+  // once on mount, so the user doesn't have to type their starting point.
+  const autoOriginRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!teslaInCar || autoOriginRef.current) return;
+    if (!tesla.state?.lat || !tesla.state?.lng) return;
+    autoOriginRef.current = true;
+    reverseGeocode(tesla.state.lat, tesla.state.lng).then(name => {
+      if (name) setOrigin(name);
+    });
+  }, [teslaInCar, tesla.state?.lat, tesla.state?.lng]);
+
+  // Surface a toast once after the OAuth round trip lands us back at /?tesla_connected=1
+  React.useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('tesla_connected') === '1') {
+      toast.success('Tesla connected', { description: 'Live battery + GPS + send-to-nav enabled.' });
+      params.delete('tesla_connected');
+      const q = params.toString();
+      window.history.replaceState({}, '', window.location.pathname + (q ? `?${q}` : ''));
+    } else if (params.get('tesla_error')) {
+      toast.error('Tesla connect failed', { description: params.get('tesla_error') || undefined });
+      params.delete('tesla_error');
+      const q = params.toString();
+      window.history.replaceState({}, '', window.location.pathname + (q ? `?${q}` : ''));
+    }
+  }, []);
+
   const [messages, setMessages] = useState<{ id: number; role: 'user' | 'assistant'; content: string }[]>([
     { id: 1, role: 'assistant', content: "Hello! I'm Grok Drive. Tell me where you want to go." },
   ]);
@@ -1911,17 +2034,30 @@ export default function TeslaTripPlanner() {
 
   const useMyLocation = async () => {
     const t = toast.loading('Locating your car…');
-    const coords = await getBrowserLocation();
-    if (!coords) {
+    let lat: number | null = null;
+    let lng: number | null = null;
+
+    // Prefer Tesla Fleet API location when connected — it's the actual vehicle GPS.
+    if (tesla.state?.lat != null && tesla.state?.lng != null) {
+      lat = tesla.state.lat;
+      lng = tesla.state.lng;
+    } else {
+      const coords = await getBrowserLocation();
+      if (coords) { lat = coords.latitude; lng = coords.longitude; }
+    }
+
+    if (lat == null || lng == null) {
       toast.error('Could not get your location', {
         id: t,
-        description: "Tesla's browser may not expose GPS — type your postcode instead.",
+        description: tesla.status?.connected
+          ? 'Your Tesla may be asleep — try waking it or type a postcode.'
+          : "Connect your Tesla account for vehicle GPS, or type a postcode.",
       });
       return;
     }
-    const name = await reverseGeocode(coords.latitude, coords.longitude);
+    const name = await reverseGeocode(lat, lng);
     if (!name) {
-      const fallback = `${coords.latitude.toFixed(4)}, ${coords.longitude.toFixed(4)}`;
+      const fallback = `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
       setOrigin(fallback);
       toast.success('Got your location', { id: t, description: fallback });
       return;
@@ -2050,6 +2186,18 @@ export default function TeslaTripPlanner() {
           travelDates={travelDates}
           onOpenDates={(rect) => { setDateAnchor(rect); setDatePickerOpen(true); }}
           onUseMyLocation={useMyLocation}
+          teslaStatus={tesla.status}
+          teslaState={tesla.state}
+          onConnectTesla={async () => {
+            try { await startTeslaConnect(); }
+            catch { toast.error('Could not start Tesla OAuth'); }
+          }}
+          onDisconnectTesla={async () => {
+            await disconnectTesla();
+            await tesla.refreshStatus();
+            toast.success('Tesla disconnected');
+          }}
+          inCar={inCar}
         />
 
         {variants.length > 0 && (
@@ -2355,6 +2503,12 @@ export default function TeslaTripPlanner() {
                                 onMoveDown={() => moveStop(stop.id, 1)}
                                 canMoveUp={allStops[0]?.id !== stop.id}
                                 canMoveDown={allStops[allStops.length - 1]?.id !== stop.id}
+                                onSendToNav={async () => {
+                                  const ok = await sendToTeslaNav({ lat: stop.lat, lng: stop.lng, name: stop.name });
+                                  if (ok) toast.success(`Sent to Tesla nav`, { description: stop.name });
+                                  else toast.error('Could not send to nav', { description: 'Car may be asleep — try wake.' });
+                                }}
+                                canSendToNav={!!tesla.status?.connected}
                                 onDragStart={(e) => {
                                   e.dataTransfer.setData('text/plain', stop.id);
                                   e.dataTransfer.effectAllowed = 'move';