From 425c36253f7c5ef614ab233322f8502a6f8966c2 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sat, 8 Aug 2026 15:46:57 -0700
Subject: [PATCH 01/15] refactor(web): rewrite VehicleCommandCenter around
 shared range/command hooks

Redesigns the vehicle command center into modular components (hero, readiness strip, workspace, safety panel, activity feed) under features/system/components/command-center/, replacing the monolithic VehicleCommandCenter with domain-grouped command browsing and a dedicated /vehicles/{id}/command endpoint contract.

Introduces useRangeState with shared cross-page localStorage persistence (SHARED_RANGE_STORAGE_KEY) so date-range selections propagate between pages, and migrates all range-picker consumers (StatisticsPage, EnergyPage, ChargingListPage, CostAnalysisPage, DriveScorePage, DrivesListPage, DrivetrainHealthPage, EfficiencyPage, RouteEfficiencyPage, TripListPage, MyActivityPage) off ad-hoc useUrlString/useUrlBatch date defaults.

Adds a refetchInterval to useCommandLatest, normalizes command-query invalidation keys via a shared commandKeys helper, fixes MediaPlayerPage volume formatting to respect global precision, and removes an unstable Tesla charging-history sort parameter. Also relaxes several Go/TS command types to optional/nullable fields and adds CollapsibleCommandGroup vehicleKey prop rename.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 internal/tesla/client_energy_charging.go      |   4 +-
 internal/tesla/client_energy_charging_test.go |  73 +++
 web/src/api/hooks/useCommands.ts              |   3 +-
 web/src/api/hooks/useVehicleCommand.test.tsx  |  12 +-
 web/src/api/hooks/useVehicleCommand.ts        |  11 +-
 .../forms/__tests__/RangePicker.test.tsx      |   1 +
 .../analytics/pages/StatisticsPage.tsx        |  17 +-
 .../battery/pages/EnergyPage.test.tsx         |   8 +
 web/src/features/battery/pages/EnergyPage.tsx |  19 +-
 .../charging/pages/ChargingListPage.tsx       |  18 +-
 .../charging/pages/CostAnalysisPage.tsx       |  26 +-
 .../driving/pages/DriveScorePage.test.tsx     |  28 +-
 .../features/driving/pages/DriveScorePage.tsx |  24 +-
 .../features/driving/pages/DrivesListPage.tsx |  18 +-
 .../pages/DrivetrainHealthPage.test.tsx       |  37 +-
 .../driving/pages/DrivetrainHealthPage.tsx    |  17 +-
 .../features/driving/pages/EfficiencyPage.tsx |  16 +-
 .../driving/pages/RouteEfficiencyPage.tsx     |  17 +-
 web/src/features/system/commands.ts           |  49 +-
 .../CollapsibleCommandGroup.test.tsx          |  14 +-
 .../components/CollapsibleCommandGroup.tsx    |  12 +-
 .../system/components/CommandSelectDialog.tsx |   9 +-
 .../system/components/CommandTile.tsx         |  12 +-
 .../system/components/InputCommandTile.tsx    |  10 +-
 .../system/components/ToggleCommandTile.tsx   |  12 +-
 .../components/VehicleCommandCenter.test.tsx  | 597 ++++++++++--------
 .../components/VehicleCommandCenter.tsx       | 519 +++++----------
 .../command-center/CommandCenterFallback.tsx  | 135 ++++
 .../command-center/CommandCenterHero.tsx      | 165 +++++
 .../command-center/CommandDialogs.tsx         |  99 +++
 .../command-center/CommandDomainBrowser.tsx   | 117 ++++
 .../command-center/CommandReadinessStrip.tsx  | 154 +++++
 .../command-center/CommandSafetyPanel.tsx     |  82 +++
 .../command-center/CommandWorkspace.tsx       | 192 ++++++
 .../command-center/RecentCommandActivity.tsx  | 126 ++++
 .../VehicleFreshnessWarning.tsx               |  38 ++
 .../command-center/commandDomains.test.ts     |  24 +
 .../command-center/commandDomains.ts          |  66 ++
 .../command-center/commandLabels.ts           |  47 ++
 .../system/components/command-center/index.ts |   6 +
 .../system/components/command-center/types.ts |   5 +
 .../command-center/useCommandFavorites.ts     |  43 ++
 .../system/pages/CommandsPage.test.tsx        | 457 +++++---------
 .../features/system/pages/CommandsPage.tsx    | 307 ++++-----
 .../system/pages/MyActivityPage.test.tsx      |   1 +
 .../features/system/pages/MyActivityPage.tsx  |  29 +-
 web/src/features/trips/pages/TripListPage.tsx |  25 +-
 .../pages/MediaPlayerPage.test.tsx            |  28 +
 .../vehicle-systems/pages/MediaPlayerPage.tsx |   6 +-
 .../hooks/__tests__/useRangeState.test.tsx    | 141 ++++-
 web/src/hooks/useRangeState.ts                | 205 ++++--
 web/src/i18n/en.json                          | 338 +++++++++-
 52 files changed, 3013 insertions(+), 1406 deletions(-)
 create mode 100644 internal/tesla/client_energy_charging_test.go
 create mode 100644 web/src/features/system/components/command-center/CommandCenterFallback.tsx
 create mode 100644 web/src/features/system/components/command-center/CommandCenterHero.tsx
 create mode 100644 web/src/features/system/components/command-center/CommandDialogs.tsx
 create mode 100644 web/src/features/system/components/command-center/CommandDomainBrowser.tsx
 create mode 100644 web/src/features/system/components/command-center/CommandReadinessStrip.tsx
 create mode 100644 web/src/features/system/components/command-center/CommandSafetyPanel.tsx
 create mode 100644 web/src/features/system/components/command-center/CommandWorkspace.tsx
 create mode 100644 web/src/features/system/components/command-center/RecentCommandActivity.tsx
 create mode 100644 web/src/features/system/components/command-center/VehicleFreshnessWarning.tsx
 create mode 100644 web/src/features/system/components/command-center/commandDomains.test.ts
 create mode 100644 web/src/features/system/components/command-center/commandDomains.ts
 create mode 100644 web/src/features/system/components/command-center/commandLabels.ts
 create mode 100644 web/src/features/system/components/command-center/index.ts
 create mode 100644 web/src/features/system/components/command-center/types.ts
 create mode 100644 web/src/features/system/components/command-center/useCommandFavorites.ts

diff --git a/internal/tesla/client_energy_charging.go b/internal/tesla/client_energy_charging.go
index 0cfd084887..62d66a0918 100644
--- a/internal/tesla/client_energy_charging.go
+++ b/internal/tesla/client_energy_charging.go
@@ -33,8 +33,8 @@ func (c *Client) GetChargingHistory(ctx context.Context, vin string, startTime,
 	}
 	params.Set("pageNo", strconv.Itoa(pageNo))
 	params.Set("pageSize", strconv.Itoa(pageSize))
-	params.Set("sortBy", "chargeStartDateTime")
-	params.Set("sortOrder", "DESC")
+	// Tesla's sort-field allowlist is not stable; omit optional server-side
+	// sorting and let the repository/page order the persisted results.
 
 	path := "/api/1/dx/charging/history?" + params.Encode()
 	return c.doRequest(ctx, http.MethodGet, path, nil)
diff --git a/internal/tesla/client_energy_charging_test.go b/internal/tesla/client_energy_charging_test.go
new file mode 100644
index 0000000000..3847e2caf5
--- /dev/null
+++ b/internal/tesla/client_energy_charging_test.go
@@ -0,0 +1,73 @@
+package tesla
+
+import (
+	"context"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+)
+
+func TestGetChargingHistoryOmitsUnsupportedSortParameters(t *testing.T) {
+	t.Parallel()
+
+	const (
+		vin       = "5YJ3E1EA1KF000001"
+		startTime = "2026-05-08T20:39:45Z"
+		endTime   = "2026-08-08T20:39:45Z"
+	)
+
+	server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet {
+			t.Errorf("method = %s, want GET", r.Method)
+		}
+		if r.URL.Path != "/api/1/dx/charging/history" {
+			t.Errorf("path = %q, want /api/1/dx/charging/history", r.URL.Path)
+		}
+
+		query := r.URL.Query()
+		if got := query.Get("vin"); got != vin {
+			t.Errorf("vin = %q, want %q", got, vin)
+		}
+		if got := query.Get("startTime"); got != startTime {
+			t.Errorf("startTime = %q, want %q", got, startTime)
+		}
+		if got := query.Get("endTime"); got != endTime {
+			t.Errorf("endTime = %q, want %q", got, endTime)
+		}
+		if got := query.Get("pageNo"); got != "1" {
+			t.Errorf("pageNo = %q, want 1", got)
+		}
+		if got := query.Get("pageSize"); got != "50" {
+			t.Errorf("pageSize = %q, want 50", got)
+		}
+		if query.Has("sortBy") {
+			t.Errorf("unsupported sortBy parameter sent: %q", query.Get("sortBy"))
+		}
+		if query.Has("sortOrder") {
+			t.Errorf("sortOrder sent without a supported sortBy: %q", query.Get("sortOrder"))
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		_, _ = w.Write([]byte(`{"response":{"data":[],"hasMoreData":false}}`))
+	}))
+	defer server.Close()
+
+	client := newTestClient(server)
+	body, status, err := client.GetChargingHistory(
+		context.Background(),
+		vin,
+		startTime,
+		endTime,
+		1,
+		50,
+	)
+	if err != nil {
+		t.Fatalf("GetChargingHistory() error = %v", err)
+	}
+	if status != http.StatusOK {
+		t.Fatalf("status = %d, want %d", status, http.StatusOK)
+	}
+	if len(body) == 0 {
+		t.Fatal("response body is empty")
+	}
+}
diff --git a/web/src/api/hooks/useCommands.ts b/web/src/api/hooks/useCommands.ts
index f4182df634..255f6ca1e8 100644
--- a/web/src/api/hooks/useCommands.ts
+++ b/web/src/api/hooks/useCommands.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { request } from '../client';
-import { STALE_TIMES } from '@/lib/constants';
+import { INTERVALS, STALE_TIMES } from '@/lib/constants';
 
 export interface CommandLogEntry {
   id: number;
@@ -64,5 +64,6 @@ export function useCommandLatest(vehicleId: string | number | undefined) {
     },
     enabled: !!vehicleId,
     staleTime: STALE_TIMES.MODERATE,
+    refetchInterval: INTERVALS.STANDARD,
   });
 }
diff --git a/web/src/api/hooks/useVehicleCommand.test.tsx b/web/src/api/hooks/useVehicleCommand.test.tsx
index 13107e3ec1..1b8e91a27a 100644
--- a/web/src/api/hooks/useVehicleCommand.test.tsx
+++ b/web/src/api/hooks/useVehicleCommand.test.tsx
@@ -47,9 +47,9 @@ vi.mock('../client', async () => {
   return { ...actual, request: vi.fn() };
 });
 
-vi.mock('@/components/feedback/Toast', async () => {
-  const actual = await vi.importActual<typeof import('@/components/feedback/Toast')>(
-    '@/components/feedback/Toast',
+vi.mock('@/components/feedback', async () => {
+  const actual = await vi.importActual<typeof import('@/components/feedback')>(
+    '@/components/feedback',
   );
   return {
     ...actual,
@@ -178,9 +178,9 @@ describe('useVehicleCommand — success', () => {
     const keys = invalidatedKeys(invalidateSpy);
     expect(invalidateSpy).toHaveBeenCalledTimes(4);
     expect(keys).toContainEqual(['vehicle-state', 7]);
-    expect(keys).toContainEqual(['command-latest', 7]);
-    // The command-history key is stringified so a numeric id invalidation still
-    // hits a query primed with the string route param.
+    // Both command query keys are normalized so numeric ids invalidate
+    // consumers initialized from string route params (and vice versa).
+    expect(keys).toContainEqual(['command-latest', '7']);
     expect(keys).toContainEqual(['command-history', '7']);
     expect(keys).toContainEqual(['vehicles']);
   });
diff --git a/web/src/api/hooks/useVehicleCommand.ts b/web/src/api/hooks/useVehicleCommand.ts
index 96089bf9c8..55d80d1827 100644
--- a/web/src/api/hooks/useVehicleCommand.ts
+++ b/web/src/api/hooks/useVehicleCommand.ts
@@ -1,8 +1,9 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { request } from '../client';
-import { useToast } from '@/components/feedback/Toast';
+import { useToast } from '@/components/feedback';
 import { vehicleKeys } from './useVehicles';
+import { commandKeys } from './useCommands';
 import { isTeslaAuthExpiredError } from '@/lib/resilience';
 import { queueTeslaMutation } from '@/lib/teslaAuthRecovery';
 
@@ -19,7 +20,7 @@ import { queueTeslaMutation } from '@/lib/teslaAuthRecovery';
  * forward-compatibility with a future handler revision that returns a
  * friendlier human string; today the failure reason lives in `error`.
  */
-interface CommandResult {
+export interface CommandResult {
   success?: boolean;
   /** Present on the success path (currently the literal `"success"`). */
   result?: string;
@@ -29,7 +30,7 @@ interface CommandResult {
   message?: string;
 }
 
-interface SendCommandParams {
+export interface SendCommandParams {
   vehicleId: number;
   command: string;
   params?: Record<string, unknown>;
@@ -60,8 +61,8 @@ export function useVehicleCommand() {
       }),
     onSuccess: (data, { vehicleId }) => {
       queryClient.invalidateQueries({ queryKey: vehicleKeys.state(vehicleId) });
-      queryClient.invalidateQueries({ queryKey: ['command-latest', vehicleId] });
-      queryClient.invalidateQueries({ queryKey: ['command-history', String(vehicleId)] });
+      queryClient.invalidateQueries({ queryKey: commandKeys.latest(vehicleId) });
+      queryClient.invalidateQueries({ queryKey: commandKeys.history(vehicleId) });
       queryClient.invalidateQueries({ queryKey: vehicleKeys.all });
       if (data?.success) {
         toast.success(data.message || t('commands.toast.success', 'Command sent successfully'));
diff --git a/web/src/components/forms/__tests__/RangePicker.test.tsx b/web/src/components/forms/__tests__/RangePicker.test.tsx
index 5c9e712907..acad7bb2c0 100644
--- a/web/src/components/forms/__tests__/RangePicker.test.tsx
+++ b/web/src/components/forms/__tests__/RangePicker.test.tsx
@@ -12,6 +12,7 @@ describe('<RangePicker /> trigger', () => {
     render(<RangePicker {...baseProps} onChange={vi.fn()} />);
     const trigger = screen.getByRole('button', { name: /date range/i });
     expect(trigger).toBeInTheDocument();
+    expect(trigger).toHaveTextContent('Custom range');
     // The readout always renders the resolved dates.
     expect(trigger).toHaveTextContent(/jan/i);
   });
diff --git a/web/src/features/analytics/pages/StatisticsPage.tsx b/web/src/features/analytics/pages/StatisticsPage.tsx
index 256fd1b1ae..939e9da0fe 100644
--- a/web/src/features/analytics/pages/StatisticsPage.tsx
+++ b/web/src/features/analytics/pages/StatisticsPage.tsx
@@ -27,7 +27,8 @@ import { useUnits } from '@/hooks/useUnits';
 import { useFormatting } from '@/hooks/useFormatting';
 import { useChartPalette } from '@/hooks/useChartPalette';
 import { useSavedViewUrl } from '@/hooks/useSavedViewUrl';
-import { useUrlBatch, useUrlString } from '@/hooks/useUrlState';
+import { useUrlString } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { useHiddenSeries } from '@/hooks/useHiddenSeries';
 import { convertDistanceFromSI } from '@/lib/unitConversion';
 import { fmtNumber, fmtInt } from '@/lib/numberFormat';
@@ -93,14 +94,10 @@ export default function StatisticsPage() {
     }
   };
 
-  const defaultStart = useMemo(() => {
-    const d = new Date(); d.setFullYear(d.getFullYear() - 1);
-    return d.toISOString().slice(0, 10);
-  }, []);
-  const defaultEnd = useMemo(() => new Date().toISOString().slice(0, 10), []);
-  const [startDate] = useUrlString('from', defaultStart);
-  const [endDate] = useUrlString('to', defaultEnd);
-  const setRangeBatch = useUrlBatch();
+  const { start: startDate, end: endDate, setRange } = useRangeState({
+    persistKey: 'statistics.range',
+    defaultPresetId: '1y',
+  });
 
   // Reactive chart palette: color-blind safe or neon per user preference.
   const palette = useChartPalette();
@@ -177,7 +174,7 @@ export default function StatisticsPage() {
       )}
       <RangePicker
         value={{ start: startDate, end: endDate }}
-        onChange={(r) => setRangeBatch({ from: r.start, to: r.end })}
+        onChange={setRange}
         align="end"
         triggerTestId="statistics-range"
       />
diff --git a/web/src/features/battery/pages/EnergyPage.test.tsx b/web/src/features/battery/pages/EnergyPage.test.tsx
index 5097778cec..5e04fb6fa8 100644
--- a/web/src/features/battery/pages/EnergyPage.test.tsx
+++ b/web/src/features/battery/pages/EnergyPage.test.tsx
@@ -76,6 +76,14 @@ vi.mock('react-i18next', async () => {
   }
 })
 
+vi.mock('@/hooks/useRangeState', () => ({
+  useRangeState: () => ({
+    start: '2025-06-01',
+    end: '2025-06-30',
+    setRange: vi.fn(),
+  }),
+}))
+
 import { request } from '@/api/client'
 import { ToastProvider } from '@/components/feedback/Toast'
 import { SelectedVehicleProvider } from '@/store/selectedVehicle'
diff --git a/web/src/features/battery/pages/EnergyPage.tsx b/web/src/features/battery/pages/EnergyPage.tsx
index cbfe24d498..c88618e4d9 100644
--- a/web/src/features/battery/pages/EnergyPage.tsx
+++ b/web/src/features/battery/pages/EnergyPage.tsx
@@ -32,7 +32,7 @@ import { useUnits } from '@/hooks/useUnits';
 import { useFormatting } from '@/hooks/useFormatting';
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { useSavedViewUrl } from '@/hooks/useSavedViewUrl';
-import { useUrlBatch, useUrlString } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { useHiddenSeries } from '@/hooks/useHiddenSeries';
 import { formatDateShort } from '@/lib/dateFormat';
 import { fmtNumber, fmtInt, fmtPercent } from '@/lib/numberFormat';
@@ -194,15 +194,10 @@ export default function EnergyPage() {
   const { vehicleId } = useSelectedVehicle();
 
   /* ── Date range ───────────────────────────────────────────────── */
-  const defaultStartDate = useMemo(() => {
-    const d = new Date();
-    d.setDate(d.getDate() - 30);
-    return d.toISOString().split('T')[0];
-  }, []);
-  const defaultEndDate = useMemo(() => new Date().toISOString().split('T')[0], []);
-  const [startDate] = useUrlString('from', defaultStartDate);
-  const [endDate] = useUrlString('to', defaultEndDate);
-  const setRangeBatch = useUrlBatch();
+  const { start: startDate, end: endDate, setRange } = useRangeState({
+    persistKey: 'energy.range',
+    defaultPresetId: '30d',
+  });
 
   /* URL-persisted hidden-series state for the two-series
      energy/efficiency composed chart. */
@@ -264,7 +259,7 @@ export default function EnergyPage() {
   const startMs = new Date(startDate).getTime();
   const endMs = new Date(endDate).getTime();
   const periodDays = Number.isFinite(startMs) && Number.isFinite(endMs)
-    ? Math.max(1, Math.ceil((endMs - startMs) / 86400000))
+    ? Math.max(1, Math.floor((endMs - startMs) / 86400000) + 1)
     : 30;
   const costPerKm = totalDistance > 0 ? totalCost / totalDistance : 0;
   const costPerKwh = totalEnergy > 0 ? totalCost / (totalEnergy / 1000) : 0;
@@ -481,7 +476,7 @@ export default function EnergyPage() {
           <VehicleSelect />
           <RangePicker
             value={{ start: startDate, end: endDate }}
-            onChange={(r) => setRangeBatch({ from: r.start, to: r.end })}
+            onChange={setRange}
             align="end"
             triggerTestId="energy-range"
           />
diff --git a/web/src/features/charging/pages/ChargingListPage.tsx b/web/src/features/charging/pages/ChargingListPage.tsx
index e423f131d2..b2d69e0601 100644
--- a/web/src/features/charging/pages/ChargingListPage.tsx
+++ b/web/src/features/charging/pages/ChargingListPage.tsx
@@ -30,6 +30,7 @@ import {
 import { MetricSwitcherChart, type MetricSwitcherMetric } from '@/components/charts';
 import { useSavedViewUrl } from '@/hooks/useSavedViewUrl';
 import { useUrlBatch, useUrlBoolean, useUrlEnum, useUrlNumber, useUrlString } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { parseSearchQuery, matchesTokens, compareNumeric, parseDurationToken, matchesYmdPrefix } from '@/lib/searchQuery';
 import { useChargingSessionsPaginated, useChargingOptimizer, useBulkDeleteCharging } from '@/api/hooks/useCharging';
 import { useUnits } from '@/hooks/useUnits';
@@ -102,13 +103,14 @@ export default function ChargingListPage() {
   const { formatCurrency, currencySymbol } = useFormatting();
 
   /* ── URL state ───────────────────────────────────────────────── */
-  const defaultStartDate = useMemo(() => {
-    const d = new Date(); d.setDate(d.getDate() - 30);
-    return d.toISOString().split('T')[0];
-  }, []);
-  const defaultEndDate = useMemo(() => new Date().toISOString().split('T')[0], []);
-  const [startDate] = useUrlString('from', defaultStartDate);
-  const [endDate] = useUrlString('to', defaultEndDate);
+  const {
+    start: startDate,
+    end: endDate,
+    setRangeWithUrlUpdates,
+  } = useRangeState({
+    persistKey: 'charging.list.range',
+    defaultPresetId: '30d',
+  });
   const [search] = useUrlString('q', '');
   const [collection] = useUrlEnum<Collection>('coll', COLLECTIONS, 'all');
   const [trendMetric, setTrendMetric] = useUrlEnum<ChargingTrendMetric>('trend', TREND_METRICS, 'sessions');
@@ -570,7 +572,7 @@ export default function ChargingListPage() {
           <RangePicker
             value={{ start: startDate, end: endDate }}
             onChange={(r) => {
-              setUrlBatch({ from: r.start, to: r.end, page: null });
+              setRangeWithUrlUpdates(r, { page: null });
             }}
             align="end"
             triggerTestId="charging-list-range"
diff --git a/web/src/features/charging/pages/CostAnalysisPage.tsx b/web/src/features/charging/pages/CostAnalysisPage.tsx
index a2b298960e..ef13ce04b9 100644
--- a/web/src/features/charging/pages/CostAnalysisPage.tsx
+++ b/web/src/features/charging/pages/CostAnalysisPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PageContainer } from '@/components/layout';
 import { FadeIn } from '@/components/motion';
@@ -12,7 +12,7 @@ import { useUnits } from '@/hooks/useUnits';
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { useSelectedVehicle } from '@/hooks/useSelectedVehicle';
 import { useSavedViewUrl } from '@/hooks/useSavedViewUrl';
-import { useUrlBatch, useUrlString } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { convertDistanceFromSI } from '@/lib/unitConversion';
 import { DEFAULT_GAS_PRICE, DEFAULT_MPG, DEFAULT_ELECTRICITY_RATE } from '../components/cost-analysis/constants';
 import { useCostAnalysisData } from '../components/cost-analysis/useCostAnalysisData';
@@ -48,15 +48,15 @@ export default function CostAnalysisPage() {
   const { vehicleId } = useSelectedVehicle();
 
   // ── Filters ──────────────────────────────────────────────────────────
-  const defaultStartDate = useMemo(() => {
-    const d = new Date();
-    d.setFullYear(d.getFullYear() - 1);
-    return d.toISOString().split('T')[0];
-  }, []);
-  const defaultEndDate = useMemo(() => new Date().toISOString().split('T')[0], []);
-  const [startDate] = useUrlString('from', defaultStartDate);
-  const [endDate] = useUrlString('to', defaultEndDate);
-  const setRangeBatch = useUrlBatch();
+  const {
+    start: startDate,
+    end: endDate,
+    setRange,
+    reset: resetRange,
+  } = useRangeState({
+    persistKey: 'cost-analysis.range',
+    defaultPresetId: '1y',
+  });
 
   // ── Gas calculator inputs ────────────────────────────────────────────
   const [gasPrice, setGasPrice] = useState(DEFAULT_GAS_PRICE);
@@ -89,7 +89,7 @@ export default function CostAnalysisPage() {
       <VehicleSelect />
       <RangePicker
         value={{ start: startDate, end: endDate }}
-        onChange={(r) => setRangeBatch({ from: r.start, to: r.end })}
+        onChange={setRange}
         align="end"
         triggerTestId="cost-analysis-range"
       />
@@ -120,7 +120,7 @@ export default function CostAnalysisPage() {
             isLoading={sessionsLoading}
             error={sessionsError}
             onRetry={retrySessions}
-            onResetRange={() => setRangeBatch({ from: null, to: null })}
+            onResetRange={resetRange}
           />
         </section>
       </FadeIn>
diff --git a/web/src/features/driving/pages/DriveScorePage.test.tsx b/web/src/features/driving/pages/DriveScorePage.test.tsx
index 22ada48e1c..56ab35bd6b 100644
--- a/web/src/features/driving/pages/DriveScorePage.test.tsx
+++ b/web/src/features/driving/pages/DriveScorePage.test.tsx
@@ -3,8 +3,7 @@
  *
  * DriveScorePage default-exports the page plus a set of pure helpers that are
  * unit-tested directly (the scoring algorithm, grade mapping, tip/achievement
- * builders, the default date window, and the newly-extracted
- * `computePeriodStats`). The page's file-local sub-components
+ * builders, and `computePeriodStats`). The page's file-local sub-components
  * (CategoryGaugeCard, the nine render bands) are exercised transitively through
  * the full page render.
  *
@@ -23,8 +22,8 @@
  *      (the date-filter + state wiring).
  *   7. REFRESH — the icon-only refresh control is labelled and calls refetch.
  *   8. HELPERS — scoreDrive branches (typical / null-fallbacks / floors),
- *      gradeFromScore boundaries, gradeVariant, gradeColor, the default date
- *      window, buildTips, buildAchievements checks, and computePeriodStats
+ *      gradeFromScore boundaries, gradeVariant, gradeColor, buildTips,
+ *      buildAchievements checks, and computePeriodStats
  *      including the cross-month "Best Week" collision fix.
  *
  * Network is never hit: the data hooks, vehicle picker, form controls, and the
@@ -134,8 +133,6 @@ import DriveScorePage, {
   gradeFromScore,
   gradeVariant,
   gradeColor,
-  getDefaultStartDate,
-  getDefaultEndDate,
   buildTips,
   buildAchievements,
   computePeriodStats,
@@ -541,25 +538,6 @@ describe('gradeVariant / gradeColor', () => {
   });
 });
 
-describe('default date window', () => {
-  it('returns a today→30-days-ago ISO window', () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date('2024-06-15T12:00:00Z'));
-    try {
-      const end = getDefaultEndDate();
-      const start = getDefaultStartDate();
-      // getDefaultEndDate is a pure UTC slice → deterministic across timezones.
-      expect(end).toBe('2024-06-15');
-      expect(start).toMatch(/^\d{4}-\d{2}-\d{2}$/);
-      const spanDays =
-        (Date.parse(`${end}T00:00:00Z`) - Date.parse(`${start}T00:00:00Z`)) / DAY_MS;
-      expect(spanDays).toBe(30);
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-});
-
 describe('buildTips', () => {
   const tips = buildTips((_k, fallback) => fallback);
 
diff --git a/web/src/features/driving/pages/DriveScorePage.tsx b/web/src/features/driving/pages/DriveScorePage.tsx
index 58ff8e2caf..506e384fff 100644
--- a/web/src/features/driving/pages/DriveScorePage.tsx
+++ b/web/src/features/driving/pages/DriveScorePage.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, type ReactNode } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PageContainer } from '@/components/layout';
@@ -49,6 +49,7 @@ import { useDriveScore, useDrives } from '@/api/hooks/useDriving';
 import { useUnits } from '@/hooks/useUnits';
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { useSelectedVehicle } from '@/hooks/useSelectedVehicle';
+import { useRangeState } from '@/hooks/useRangeState';
 import { formatDateShort, formatDurationMinutes } from '@/lib/dateFormat';
 import { fmtNumber, fmtInt } from '@/lib/numberFormat';
 import { cn } from '@/lib/cn';
@@ -212,16 +213,6 @@ function scoreTextClass(score: number | null): string {
   return 'text-rose-300';
 }
 
-export function getDefaultStartDate(): string {
-  const d = new Date();
-  d.setDate(d.getDate() - 30);
-  return d.toISOString().slice(0, 10);
-}
-
-export function getDefaultEndDate(): string {
-  return new Date().toISOString().slice(0, 10);
-}
-
 /* ------------------------------------------------------------------ */
 /*  Tips data                                                          */
 /* ------------------------------------------------------------------ */
@@ -603,8 +594,10 @@ export default function DriveScorePage() {
     `${fmtInt(efficiencyDisplay(whPerKm))} ${efficiencyUnit}`;
 
   /* ---- date filter ---- */
-  const [startDate, setStartDate] = useState<string>(getDefaultStartDate);
-  const [endDate, setEndDate] = useState<string>(getDefaultEndDate);
+  const { start: startDate, end: endDate, setRange } = useRangeState({
+    persistKey: 'drive-score.range',
+    defaultPresetId: '30d',
+  });
 
   /* ---- table sort (shared DataTable controlled sort) ---- */
   const { sortKey, sortDir, onSort, sortFn } = useSortToggle('date', 'desc');
@@ -1001,10 +994,7 @@ export default function DriveScorePage() {
       <VehicleSelect />
       <RangePicker
         value={{ start: startDate, end: endDate }}
-        onChange={(r) => {
-          setStartDate(r.start);
-          setEndDate(r.end);
-        }}
+        onChange={setRange}
         align="end"
         triggerTestId="drive-score-range"
       />
diff --git a/web/src/features/driving/pages/DrivesListPage.tsx b/web/src/features/driving/pages/DrivesListPage.tsx
index 3fc9dc80c6..5771030eb6 100644
--- a/web/src/features/driving/pages/DrivesListPage.tsx
+++ b/web/src/features/driving/pages/DrivesListPage.tsx
@@ -26,6 +26,7 @@ import { SearchInput } from '@/components/forms/SearchInput';
 import { FilterBar } from '@/components/forms/FilterBar';
 import { ActiveFilterChips, type FilterChipDescriptor } from '@/components/forms/ActiveFilterChips';
 import { useUrlBatch, useUrlEnum, useUrlString, useUrlNumber } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { parseSearchQuery, matchesTokens, compareNumeric } from '@/lib/searchQuery';
 import { FadeIn } from '@/components/motion/FadeIn';
 import { StaggerContainer } from '@/components/motion/StaggerContainer';
@@ -79,13 +80,14 @@ export default function DrivesListPage() {
    * the API applies a 50-row default page, so filtering client-side alone
    * capped this page at the 50 newest drives regardless of the chosen range
    * or page size. */
-  const defaultStart = useMemo(() => {
-    const d = new Date(); d.setDate(d.getDate() - 30);
-    return d.toISOString().split('T')[0];
-  }, []);
-  const defaultEnd = useMemo(() => new Date().toISOString().split('T')[0], []);
-  const [startDate] = useUrlString('from', defaultStart);
-  const [endDate] = useUrlString('to', defaultEnd);
+  const {
+    start: startDate,
+    end: endDate,
+    setRangeWithUrlUpdates,
+  } = useRangeState({
+    persistKey: 'drives.list.range',
+    defaultPresetId: '30d',
+  });
   const priorRange = useMemo(() => priorPeriod(startDate, endDate), [startDate, endDate]);
 
   /* Fetch window. It has to reach back over the prior period as well, because
@@ -532,7 +534,7 @@ export default function DrivesListPage() {
           <RangePicker
             value={{ start: startDate, end: endDate }}
             onChange={(r) => {
-              setUrlBatch({ from: r.start, to: r.end, page: null });
+              setRangeWithUrlUpdates(r, { page: null });
             }}
             align="end"
             triggerTestId="drives-range-picker"
diff --git a/web/src/features/driving/pages/DrivetrainHealthPage.test.tsx b/web/src/features/driving/pages/DrivetrainHealthPage.test.tsx
index 0be9ed3c38..653bf43a3d 100644
--- a/web/src/features/driving/pages/DrivetrainHealthPage.test.tsx
+++ b/web/src/features/driving/pages/DrivetrainHealthPage.test.tsx
@@ -20,11 +20,11 @@
  *      converters are `useCallback`-memoised, so equal inputs must yield the
  *      SAME array reference (a regression guard for the memo-defeat bug the
  *      inline closures used to cause).
- *   9. Live band wiring + range-picker → URL-batch write.
+ *   9. Live band wiring + range-picker → shared range write.
  *
  * Strategy (mirrors web/src/features/admin/pages/VehicleCostPage.test.tsx):
  *   - Every data hook + the vehicle selector + useUnits / useDateFormat /
- *     url-state are mocked with hoisted vi.fn()s so the network is never
+ *     range-state are mocked with hoisted vi.fn()s so the network is never
  *     touched and each render is deterministic. The REAL `HEALTH_SCORE`
  *     constant + REAL `convertDistanceFromSI` / `convertTempFromSI` run, so
  *     the conversions are genuinely exercised.
@@ -74,9 +74,9 @@ const {
   dateFormatMock,
   selectedVehicleMock,
   vehicleLiveMock,
-  urlStringMock,
+  rangeStateMock,
   refetchMock,
-  setRangeBatchMock,
+  setRangeMock,
   formatDateShort,
   formatTime,
   UNIT_PREFS_KM,
@@ -91,9 +91,9 @@ const {
   dateFormatMock: vi.fn(),
   selectedVehicleMock: vi.fn(),
   vehicleLiveMock: vi.fn(),
-  urlStringMock: vi.fn(),
+  rangeStateMock: vi.fn(),
   refetchMock: vi.fn(),
-  setRangeBatchMock: vi.fn(),
+  setRangeMock: vi.fn(),
   formatDateShort: (v: unknown) => `D:${String(v)}`,
   formatTime: (v: unknown) => `T:${String(v)}`,
   UNIT_PREFS_KM: {
@@ -160,10 +160,7 @@ vi.mock('@/hooks/useUnits', () => ({ useUnits: () => unitsMock() }));
 vi.mock('@/hooks/useDateFormat', () => ({ useDateFormat: () => dateFormatMock() }));
 vi.mock('@/hooks/useSelectedVehicle', () => ({ useSelectedVehicle: () => selectedVehicleMock() }));
 vi.mock('@/hooks/useVehicleLive', () => ({ useVehicleLive: (...args: unknown[]) => vehicleLiveMock(...args) }));
-vi.mock('@/hooks/useUrlState', () => ({
-  useUrlString: (key: string) => urlStringMock(key),
-  useUrlBatch: () => setRangeBatchMock,
-}));
+vi.mock('@/hooks/useRangeState', () => ({ useRangeState: () => rangeStateMock() }));
 
 // Stub the 12 sections so we can capture the exact props the page computed.
 vi.mock('../components/drivetrain-health', async () => {
@@ -190,7 +187,7 @@ vi.mock('../components/drivetrain-health', async () => {
 });
 
 // Stub the two toolbar controls; RangePicker forwards a fixed range on click so
-// the URL-batch wiring can be asserted.
+// the shared range wiring can be asserted.
 vi.mock('@/components/forms', async () => {
   const actual = await vi.importActual<typeof import('@/components/forms')>('@/components/forms');
   const React = await vi.importActual<typeof import('react')>('react');
@@ -344,11 +341,6 @@ const MOTOR_LATEST = makeMotor({ ts: 'latest', motor_temp_c_front: 45 });
 
 const LIVE_STATE = { isolationResistance: 987 };
 
-// Stable tuples so `[startDate]`/`[endDate]` reads keep identical primitives
-// across re-renders (memo-stability spec).
-const FROM_TUPLE: [string, () => void] = ['2024-01-01', () => {}];
-const TO_TUPLE: [string, () => void] = ['2024-01-31', () => {}];
-
 function renderPage() {
   const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   return render(
@@ -373,7 +365,11 @@ beforeEach(() => {
   dateFormatMock.mockReturnValue({ formatTime, formatDateShort });
   selectedVehicleMock.mockReturnValue({ vehicleId: 42, vehicle: null, vehicles: [], setVehicleId: vi.fn() });
   vehicleLiveMock.mockReturnValue({ state: LIVE_STATE, connected: true });
-  urlStringMock.mockImplementation((key: string) => (key === 'from' ? FROM_TUPLE : TO_TUPLE));
+  rangeStateMock.mockReturnValue({
+    start: '2024-01-01',
+    end: '2024-01-31',
+    setRange: setRangeMock,
+  });
 });
 
 /* ── Specs ────────────────────────────────────────────────────────── */
@@ -566,10 +562,13 @@ describe('DrivetrainHealthPage', () => {
     expect(captured.live.motorLatest).toBe(MOTOR_LATEST);
   });
 
-  it('pushes range-picker changes into the URL batch as from/to', () => {
+  it('commits range-picker changes through shared range state', () => {
     renderPage();
 
     fireEvent.click(screen.getByTestId('range-picker'));
-    expect(setRangeBatchMock).toHaveBeenCalledWith({ from: '2024-03-01', to: '2024-03-31' });
+    expect(setRangeMock).toHaveBeenCalledWith({
+      start: '2024-03-01',
+      end: '2024-03-31',
+    });
   });
 });
diff --git a/web/src/features/driving/pages/DrivetrainHealthPage.tsx b/web/src/features/driving/pages/DrivetrainHealthPage.tsx
index 2351db816f..b8c969cd71 100644
--- a/web/src/features/driving/pages/DrivetrainHealthPage.tsx
+++ b/web/src/features/driving/pages/DrivetrainHealthPage.tsx
@@ -12,7 +12,7 @@ import { useVehicleLive } from '@/hooks/useVehicleLive';
 import { useUnits } from '@/hooks/useUnits';
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { useDateFormat } from '@/hooks/useDateFormat';
-import { useUrlString, useUrlBatch } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { convertDistanceFromSI, convertTempFromSI } from '@/lib/unitConversion';
 
 import {
@@ -44,15 +44,10 @@ export default function DrivetrainHealthPage() {
   const { vehicleId } = useSelectedVehicle();
   const vehicleIdStr = vehicleId != null ? String(vehicleId) : undefined;
 
-  const defaultStartDate = useMemo(() => {
-    const d = new Date();
-    d.setDate(d.getDate() - 30);
-    return d.toISOString().split('T')[0];
-  }, []);
-  const defaultEndDate = useMemo(() => new Date().toISOString().split('T')[0], []);
-  const [startDate] = useUrlString('from', defaultStartDate);
-  const [endDate] = useUrlString('to', defaultEndDate);
-  const setRangeBatch = useUrlBatch();
+  const { start: startDate, end: endDate, setRange } = useRangeState({
+    persistKey: 'drivetrain-health.range',
+    defaultPresetId: '30d',
+  });
 
   const healthQuery = useDrivetrainHealth(vehicleIdStr);
   const {
@@ -161,7 +156,7 @@ export default function DrivetrainHealthPage() {
           <VehicleSelect />
           <RangePicker
             value={{ start: startDate, end: endDate }}
-            onChange={(r) => setRangeBatch({ from: r.start, to: r.end })}
+            onChange={setRange}
             align="end"
             triggerTestId="drivetrain-health-range-picker"
           />
diff --git a/web/src/features/driving/pages/EfficiencyPage.tsx b/web/src/features/driving/pages/EfficiencyPage.tsx
index 079e39f9e7..b8d6bd4ddb 100644
--- a/web/src/features/driving/pages/EfficiencyPage.tsx
+++ b/web/src/features/driving/pages/EfficiencyPage.tsx
@@ -24,7 +24,7 @@ import { useUnits } from '@/hooks/useUnits';
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { useSelectedVehicle } from '@/hooks/useSelectedVehicle';
 import { useSavedViewUrl } from '@/hooks/useSavedViewUrl';
-import { useUrlBatch, useUrlString } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { formatDateShort } from '@/lib/dateFormat';
 import { fmtNumber, fmtInt } from '@/lib/numberFormat';
 import { getErrorMessage } from '@/lib/errorMessage';
@@ -123,14 +123,10 @@ export default function EfficiencyPage() {
     [unitPrefs.speed],
   );
 
-  const defaultStartDate = useMemo(() => {
-    const d = new Date(); d.setDate(d.getDate() - 30);
-    return d.toISOString().split('T')[0];
-  }, []);
-  const defaultEndDate = useMemo(() => new Date().toISOString().split('T')[0], []);
-  const [startDate] = useUrlString('from', defaultStartDate);
-  const [endDate] = useUrlString('to', defaultEndDate);
-  const setRangeBatch = useUrlBatch();
+  const { start: startDate, end: endDate, setRange } = useRangeState({
+    persistKey: 'efficiency.range',
+    defaultPresetId: '30d',
+  });
 
   /* ---- Filtered drives ---- */
   const filteredDrives = useMemo(() => {
@@ -282,7 +278,7 @@ export default function EfficiencyPage() {
           <VehicleSelect />
           <RangePicker
             value={{ start: startDate, end: endDate }}
-            onChange={(r) => setRangeBatch({ from: r.start, to: r.end })}
+            onChange={setRange}
             align="end"
             triggerTestId="efficiency-range"
           />
diff --git a/web/src/features/driving/pages/RouteEfficiencyPage.tsx b/web/src/features/driving/pages/RouteEfficiencyPage.tsx
index 4bd56665c4..459e373621 100644
--- a/web/src/features/driving/pages/RouteEfficiencyPage.tsx
+++ b/web/src/features/driving/pages/RouteEfficiencyPage.tsx
@@ -16,7 +16,7 @@ import {
 import { AIRouteEfficiencySuggestions } from '@/components/ai/AIRouteEfficiencySuggestions';
 import { useRouteEfficiency } from '@/api/hooks/useDriving';
 import { useSelectedVehicle } from '@/hooks/useSelectedVehicle';
-import { useUrlString, useUrlBatch } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { useUnits } from '@/hooks/useUnits';
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { fmtInt } from '@/lib/numberFormat';
@@ -31,15 +31,10 @@ export default function RouteEfficiencyPage() {
   const { vehicleId } = useSelectedVehicle();
   const vehicleIdStr = vehicleId != null ? String(vehicleId) : undefined;
 
-  const defaultStartDate = useMemo(() => {
-    const d = new Date();
-    d.setDate(d.getDate() - 30);
-    return d.toISOString().split('T')[0];
-  }, []);
-  const defaultEndDate = useMemo(() => new Date().toISOString().split('T')[0], []);
-  const [startDate] = useUrlString('from', defaultStartDate);
-  const [endDate] = useUrlString('to', defaultEndDate);
-  const setRangeBatch = useUrlBatch();
+  const { start: startDate, end: endDate, setRange } = useRangeState({
+    persistKey: 'route-efficiency.range',
+    defaultPresetId: '30d',
+  });
 
   const routeQuery = useRouteEfficiency(vehicleIdStr, startDate, endDate);
   const { data, isLoading, error, refetch } = routeQuery;
@@ -97,7 +92,7 @@ export default function RouteEfficiencyPage() {
           <VehicleSelect />
           <RangePicker
             value={{ start: startDate, end: endDate }}
-            onChange={(r) => setRangeBatch({ from: r.start, to: r.end })}
+            onChange={setRange}
             align="end"
             triggerTestId="route-efficiency-range-picker"
           />
diff --git a/web/src/features/system/commands.ts b/web/src/features/system/commands.ts
index 7a8ae4da6d..5b09e3633e 100644
--- a/web/src/features/system/commands.ts
+++ b/web/src/features/system/commands.ts
@@ -49,6 +49,9 @@ export interface SelectOption {
   value: string;
   labelKey: string;
   labelFallback: string;
+  descriptionKey?: string;
+  descriptionFallback?: string;
+  /** @deprecated Prefer descriptionKey + descriptionFallback for visible copy. */
   description?: string;
 }
 
@@ -88,20 +91,22 @@ export interface Vehicle {
   display_name: string;
   model: string;
   state: string;
-  battery_level: number;
-  battery_range: number;
+  battery_level?: number | null;
+  battery_range?: number | null;
   updated_at: string;
 }
 
 export interface VehicleState {
-  battery_level: number;
-  rated_range: number;
-  is_locked: boolean;
-  is_charging: boolean;
-  is_climate_on: boolean;
-  sentry_mode: boolean;
-  inside_temp: number;
-  speed: number;
+  vehicle_id?: number;
+  state?: string;
+  battery_level?: number | null;
+  rated_range?: number | null;
+  is_locked?: boolean | null;
+  is_charging?: boolean | null;
+  is_climate_on?: boolean | null;
+  sentry_mode?: boolean | null;
+  inside_temp?: number | null;
+  speed?: number | null;
 }
 
 export interface CommandLogEntry {
@@ -357,9 +362,27 @@ export const COMMANDS: CommandDef[] = [
     selectConfig: {
       paramName: 'cop_temp',
       options: [
-        { value: '0', labelKey: 'commands.climate.copLow', labelFallback: 'Low', description: '90°F / 30°C' },
-        { value: '1', labelKey: 'commands.climate.copMedium', labelFallback: 'Medium', description: '95°F / 35°C' },
-        { value: '2', labelKey: 'commands.climate.copHigh', labelFallback: 'High', description: '100°F / 40°C' },
+        {
+          value: '0',
+          labelKey: 'commands.climate.copLow',
+          labelFallback: 'Low',
+          descriptionKey: 'commands.climate.copLowTemperature',
+          descriptionFallback: '90°F / 30°C',
+        },
+        {
+          value: '1',
+          labelKey: 'commands.climate.copMedium',
+          labelFallback: 'Medium',
+          descriptionKey: 'commands.climate.copMediumTemperature',
+          descriptionFallback: '95°F / 35°C',
+        },
+        {
+          value: '2',
+          labelKey: 'commands.climate.copHigh',
+          labelFallback: 'High',
+          descriptionKey: 'commands.climate.copHighTemperature',
+          descriptionFallback: '100°F / 40°C',
+        },
       ],
     },
   },
diff --git a/web/src/features/system/components/CollapsibleCommandGroup.test.tsx b/web/src/features/system/components/CollapsibleCommandGroup.test.tsx
index 6bf1f22a64..bbe1411263 100644
--- a/web/src/features/system/components/CollapsibleCommandGroup.test.tsx
+++ b/web/src/features/system/components/CollapsibleCommandGroup.test.tsx
@@ -20,7 +20,7 @@ type GroupProps = ComponentProps<typeof CollapsibleCommandGroup>;
 function renderGroup(overrides: Partial<GroupProps> = {}) {
   const props: GroupProps = {
     category: 'security',
-    vehicleId: 1,
+    vehicleKey: 1,
     count: 3,
     children: <span data-testid="cmd-child">CHILD TILE</span>,
     ...overrides,
@@ -48,7 +48,7 @@ describe('CollapsibleCommandGroup', () => {
   });
 
   it('expands on click: children mount, aria-expanded flips true, aria-controls points at the panel, state persisted', () => {
-    renderGroup({ vehicleId: 1, category: 'security' });
+    renderGroup({ vehicleKey: 1, category: 'security' });
     const button = screen.getByRole('button');
 
     fireEvent.click(button);
@@ -69,7 +69,7 @@ describe('CollapsibleCommandGroup', () => {
   });
 
   it('honours defaultOpen and collapses (persisting "false") on click', () => {
-    renderGroup({ vehicleId: 5, category: 'charging', defaultOpen: true });
+    renderGroup({ vehicleKey: 5, category: 'charging', defaultOpen: true });
     expect(screen.getByTestId('cmd-child')).toBeInTheDocument();
     const button = screen.getByRole('button');
     expect(button).toHaveAttribute('aria-expanded', 'true');
@@ -84,14 +84,14 @@ describe('CollapsibleCommandGroup', () => {
   it('restores a persisted OPEN state from sessionStorage, overriding defaultOpen=false', () => {
     sessionStorage.setItem('teslasync-cat-7-charging', 'true');
     // defaultOpen omitted → false, but the stored value wins.
-    renderGroup({ vehicleId: 7, category: 'charging' });
+    renderGroup({ vehicleKey: 7, category: 'charging' });
     expect(screen.getByTestId('cmd-child')).toBeInTheDocument();
     expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
   });
 
   it('restores a persisted CLOSED state from sessionStorage, overriding defaultOpen=true', () => {
     sessionStorage.setItem('teslasync-cat-2-climate', 'false');
-    renderGroup({ vehicleId: 2, category: 'climate', defaultOpen: true });
+    renderGroup({ vehicleKey: 2, category: 'climate', defaultOpen: true });
     expect(screen.queryByTestId('cmd-child')).toBeNull();
     expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
   });
@@ -122,7 +122,7 @@ describe('CollapsibleCommandGroup', () => {
     vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
       throw new Error('storage blocked');
     });
-    renderGroup({ vehicleId: 9, category: 'drive', defaultOpen: true });
+    renderGroup({ vehicleKey: 9, category: 'drive', defaultOpen: true });
     expect(screen.getByTestId('cmd-child')).toBeInTheDocument();
     expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
   });
@@ -131,7 +131,7 @@ describe('CollapsibleCommandGroup', () => {
     vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
       throw new Error('QuotaExceededError');
     });
-    renderGroup({ vehicleId: 3, category: 'doors' });
+    renderGroup({ vehicleKey: 3, category: 'doors' });
     const button = screen.getByRole('button');
 
     expect(() => fireEvent.click(button)).not.toThrow();
diff --git a/web/src/features/system/components/CollapsibleCommandGroup.tsx b/web/src/features/system/components/CollapsibleCommandGroup.tsx
index aed937bfbd..d1d96a1b72 100644
--- a/web/src/features/system/components/CollapsibleCommandGroup.tsx
+++ b/web/src/features/system/components/CollapsibleCommandGroup.tsx
@@ -8,7 +8,7 @@ import { CATEGORY_META, type CommandCategory } from '../commands';
 
 interface CollapsibleCommandGroupProps {
   category: CommandCategory;
-  vehicleId: number;
+  vehicleKey: number;
   children: ReactNode;
   count: number;
   defaultOpen?: boolean;
@@ -16,14 +16,14 @@ interface CollapsibleCommandGroupProps {
 
 export function CollapsibleCommandGroup({
   category,
-  vehicleId,
+  vehicleKey,
   children,
   count,
   defaultOpen = false,
 }: CollapsibleCommandGroupProps) {
   const { t } = useTranslation();
-  const storageKey = `teslasync-cat-${vehicleId}-${category}`;
-  const panelId = `teslasync-cmdgroup-${vehicleId}-${category}`;
+  const storageKey = `teslasync-cat-${vehicleKey}-${category}`;
+  const panelId = `teslasync-cmdgroup-${vehicleKey}-${category}`;
 
   const [open, setOpen] = useState(() => {
     try {
@@ -57,7 +57,7 @@ export function CollapsibleCommandGroup({
         onClick={toggle}
         aria-expanded={open}
         aria-controls={open ? panelId : undefined}
-        className="group h-auto w-full justify-start py-2 text-left font-normal hover:bg-transparent"
+        className="group h-auto min-h-11 w-full justify-start py-2 text-left font-normal hover:bg-transparent"
       >
         <Icon aria-hidden="true" className="h-4 w-4 text-[var(--text-muted)]" />
         <Text size="xs" weight="medium" className="uppercase tracking-wider text-[var(--text-secondary)]">
@@ -71,7 +71,7 @@ export function CollapsibleCommandGroup({
       </ControlButton>
       {open && (
         <FadeIn>
-          <div id={panelId} className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mt-2">
+          <div id={panelId} className="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
             {children}
           </div>
         </FadeIn>
diff --git a/web/src/features/system/components/CommandSelectDialog.tsx b/web/src/features/system/components/CommandSelectDialog.tsx
index fa8f197d48..efe2c4e60b 100644
--- a/web/src/features/system/components/CommandSelectDialog.tsx
+++ b/web/src/features/system/components/CommandSelectDialog.tsx
@@ -73,9 +73,14 @@ export function CommandSelectDialog({
                 <Text size="sm" weight="medium" color="primary">
                   {t(opt.labelKey, opt.labelFallback)}
                 </Text>
-                {opt.description && (
+                {(opt.descriptionKey || opt.descriptionFallback || opt.description) && (
                   <Caption className="block mt-0.5">
-                    {opt.description}
+                    {opt.descriptionKey
+                      ? t(
+                          opt.descriptionKey,
+                          opt.descriptionFallback ?? opt.description ?? '—',
+                        )
+                      : opt.descriptionFallback ?? opt.description}
                   </Caption>
                 )}
               </ControlButton>
diff --git a/web/src/features/system/components/CommandTile.tsx b/web/src/features/system/components/CommandTile.tsx
index 78a5b65093..b14afbb9e6 100644
--- a/web/src/features/system/components/CommandTile.tsx
+++ b/web/src/features/system/components/CommandTile.tsx
@@ -38,7 +38,7 @@ export function CommandTile({ def, onExecute, onRequestDialog, loading, lastStat
 
   // Keyboard parity for the sanctioned role="button" tile (see eslint.config.js:
   // click sites are remediated with role="button" + onKeyDown). Ignore key
-  // events that bubble up from the nested favorite <button> so pressing
+  // events that bubble up from the nested favorite control so pressing
   // Enter/Space while it is focused never also fires the command.
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLDivElement>) => {
@@ -59,7 +59,7 @@ export function CommandTile({ def, onExecute, onRequestDialog, loading, lastStat
       aria-busy={loading || undefined}
       aria-disabled={loading || undefined}
       className={cn(
-        'p-4 flex flex-col items-center gap-2 transition-all duration-normal text-center min-h-[100px] justify-center cursor-pointer relative group',
+        'p-3 sm:p-4 flex flex-col items-center gap-2 transition-all duration-normal text-center min-h-[116px] justify-center cursor-pointer relative group',
         'outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--theme-primary)]',
         hoverStyles[variant] ?? hoverStyles.default,
         loading && 'opacity-50 cursor-not-allowed',
@@ -74,12 +74,14 @@ export function CommandTile({ def, onExecute, onRequestDialog, loading, lastStat
         onClick={(e) => { e.stopPropagation(); onToggleFavorite(); }}
         aria-pressed={isFavorite}
         className={cn(
-          'absolute left-1.5 top-1.5 h-auto rounded p-0.5 transition-opacity hover:bg-transparent',
-          isFavorite ? 'opacity-100 text-amber-300' : 'opacity-0 group-hover:opacity-50 text-[var(--text-muted)]',
+          'absolute left-0 top-0 min-h-11 min-w-11 rounded p-0 transition-opacity hover:bg-transparent',
+          isFavorite
+            ? 'opacity-100 text-amber-300'
+            : 'opacity-60 text-[var(--text-muted)] focus-visible:opacity-100 sm:opacity-0 sm:group-hover:opacity-60',
         )}
         aria-label={t('commands.toggleFavorite', 'Toggle favorite')}
       >
-        <Star aria-hidden="true" className={cn('h-3 w-3', isFavorite && 'fill-current')} />
+        <Star aria-hidden="true" className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
       </ControlButton>
 
       {def.dangerous && (
diff --git a/web/src/features/system/components/InputCommandTile.tsx b/web/src/features/system/components/InputCommandTile.tsx
index 11fdf59e77..2ce8ba91e5 100644
--- a/web/src/features/system/components/InputCommandTile.tsx
+++ b/web/src/features/system/components/InputCommandTile.tsx
@@ -61,7 +61,7 @@ export function InputCommandTile({ def, onRequestDialog, loading, lastStatus, is
       onClick={handleActivate}
       onKeyDown={handleKeyDown}
       className={cn(
-        'p-4 flex flex-col items-center gap-2 transition-all duration-normal text-center min-h-[100px] justify-center cursor-pointer relative group select-none',
+        'p-3 sm:p-4 flex flex-col items-center gap-2 transition-all duration-normal text-center min-h-[116px] justify-center cursor-pointer relative group select-none',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--theme-primary)]',
         hoverStyles[variant] ?? hoverStyles.default,
         loading && 'opacity-50 cursor-not-allowed',
@@ -74,12 +74,14 @@ export function InputCommandTile({ def, onRequestDialog, loading, lastStatus, is
         onClick={handleToggleFavorite}
         aria-pressed={isFavorite}
         className={cn(
-          'absolute left-1.5 top-1.5 h-auto rounded p-0.5 transition-opacity hover:bg-transparent',
-          isFavorite ? 'opacity-100 text-amber-300' : 'opacity-0 group-hover:opacity-50 text-[var(--text-muted)]',
+          'absolute left-0 top-0 min-h-11 min-w-11 rounded p-0 transition-opacity hover:bg-transparent',
+          isFavorite
+            ? 'opacity-100 text-amber-300'
+            : 'opacity-60 text-[var(--text-muted)] focus-visible:opacity-100 sm:opacity-0 sm:group-hover:opacity-60',
         )}
         aria-label={t('commands.toggleFavorite', 'Toggle favorite')}
       >
-        <Star className={cn('h-3 w-3', isFavorite && 'fill-current')} aria-hidden="true" />
+        <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} aria-hidden="true" />
       </ControlButton>
 
       <div className="rounded-xl p-2.5 transition-colors bg-[var(--surface-2)] text-[var(--text-muted)]">
diff --git a/web/src/features/system/components/ToggleCommandTile.tsx b/web/src/features/system/components/ToggleCommandTile.tsx
index a271b6039c..f15cb056cd 100644
--- a/web/src/features/system/components/ToggleCommandTile.tsx
+++ b/web/src/features/system/components/ToggleCommandTile.tsx
@@ -55,7 +55,7 @@ export function ToggleCommandTile({ def, state, onExecute, onRequestDialog, load
   }, [loading, isOn, def, onExecute, onRequestDialog]);
 
   // Keyboard parity for the sanctioned role="button" tile (mirrors CommandTile).
-  // Ignore key events bubbling up from the nested favorite <button> so pressing
+  // Ignore key events bubbling up from the nested favorite control so pressing
   // Enter/Space while it is focused never also toggles the command.
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLDivElement>) => {
@@ -77,7 +77,7 @@ export function ToggleCommandTile({ def, state, onExecute, onRequestDialog, load
       aria-busy={loading || undefined}
       aria-disabled={loading || undefined}
       className={cn(
-        'p-4 flex flex-col items-center gap-2 transition-all duration-normal text-center min-h-[100px] justify-center cursor-pointer relative group',
+        'p-3 sm:p-4 flex flex-col items-center gap-2 transition-all duration-normal text-center min-h-[116px] justify-center cursor-pointer relative group',
         'outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--theme-primary)]',
         isOn ? styles.panel : 'hover:border-[var(--border-subtle)]',
         loading && 'opacity-50 cursor-not-allowed',
@@ -92,12 +92,14 @@ export function ToggleCommandTile({ def, state, onExecute, onRequestDialog, load
         onClick={(e) => { e.stopPropagation(); onToggleFavorite(); }}
         aria-pressed={isFavorite}
         className={cn(
-          'absolute left-1.5 top-1.5 h-auto rounded p-0.5 transition-opacity hover:bg-transparent',
-          isFavorite ? 'opacity-100 text-amber-300' : 'opacity-0 group-hover:opacity-50 text-[var(--text-muted)]',
+          'absolute left-0 top-0 min-h-11 min-w-11 rounded p-0 transition-opacity hover:bg-transparent',
+          isFavorite
+            ? 'opacity-100 text-amber-300'
+            : 'opacity-60 text-[var(--text-muted)] focus-visible:opacity-100 sm:opacity-0 sm:group-hover:opacity-60',
         )}
         aria-label={t('commands.toggleFavorite', 'Toggle favorite')}
       >
-        <Star aria-hidden="true" className={cn('h-3 w-3', isFavorite && 'fill-current')} />
+        <Star aria-hidden="true" className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
       </ControlButton>
 
       <div aria-hidden="true" className={cn('absolute top-2 right-2 h-2 w-2 rounded-full', isOn ? styles.dot : 'bg-[var(--surface-2)]')} />
diff --git a/web/src/features/system/components/VehicleCommandCenter.test.tsx b/web/src/features/system/components/VehicleCommandCenter.test.tsx
index d2ffa7f090..d2a2b57518 100644
--- a/web/src/features/system/components/VehicleCommandCenter.test.tsx
+++ b/web/src/features/system/components/VehicleCommandCenter.test.tsx
@@ -1,402 +1,445 @@
-/**
- * VehicleCommandCenter tests (Project Apex elevation).
- *
- * VehicleCommandCenter is the single-vehicle command surface. Its one export
- * orchestrates a lot of behaviour that these tests exercise end-to-end:
- *   - a header that prefers `display_name`, falls back to the VIN, shows a
- *     state Badge + FreshnessIndicator, and renders live battery / rated-range /
- *     cabin-temperature read from `state` at the operator's units (SI → display
- *     at the render boundary via `useUnits()`);
- *   - null-safety on the live metrics (a null `battery_level` must read `0%`,
- *     never a bare `%`; a null `rated_range` must read `0 <unit>`);
- *   - an "asleep / offline" callout and a separate "stale data" banner, gated so
- *     the stale banner never shows while the vehicle is asleep;
- *   - a favourites bar seeded from `localStorage` (or the `defaultFavorite`
- *     commands) plus a search box that flattens results and shows an empty
- *     state for no matches;
- *   - command execution: a plain action POSTs `/vehicles/{id}/command/{cmd}`,
- *     `wake_up` routes through the dedicated wake mutation, failures surface an
- *     error banner, and the latest-status query annotates each tile
- *     (`✓ 2m ago` / `✗ …`), degrading a malformed timestamp to an em dash
- *     rather than `NaN`;
- *   - the three centralised dialogs — confirm (dangerous), select, and input —
- *     open from the right tile and, for select/input, feed the chosen params
- *     back through the same POST.
- *
- * The shared `request` client is stubbed so the real TanStack Query hooks run
- * without a network. `useSettings` is left to the global test-setup stub
- * (metric / SI units, decimal_precision=2) so SI values format as km / °C.
- * i18n is stubbed to echo the English `defaultValue` with `{{var}}`
- * interpolation (and to echo the key when no default is given) so visible copy
- * is deterministic. user-event is not installed in this repo (see
- * DriveRepairForm.test.tsx); interactions go through `fireEvent`.
- */
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ToastProvider } from '@/components/feedback';
+import type { CommandLogEntry } from '@/api/hooks/useCommands';
+import type { Vehicle, VehicleState } from '../commands';
+import {
+  CATEGORY_META,
+  COMMANDS,
+} from '../commands';
 
-// Stub the resilient fetch client while preserving the rest of the module so
-// transitive consumers keep working.
 vi.mock('@/api/client', async () => {
-  const actual = await vi.importActual<typeof import('@/api/client')>('@/api/client');
+  const actual = await vi.importActual<typeof import('@/api/client')>(
+    '@/api/client',
+  );
   return { ...actual, request: vi.fn() };
 });
 
-// Deterministic i18n: return the English defaultValue (interpolating {{vars}}),
-// fall back to a nested `defaultValue`, and otherwise echo the key so the
-// component's key-only `t('Vehicle is')` calls render stable copy.
 vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  const interpolate = (tpl: string, vars?: Record<string, unknown>): string =>
-    vars
-      ? tpl.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, k: string) =>
-          k in vars ? String(vars[k]) : `{{${k}}}`,
+  const actual = await vi.importActual<typeof import('react-i18next')>(
+    'react-i18next',
+  );
+  const interpolate = (
+    template: string,
+    values?: Record<string, unknown>,
+  ): string =>
+    values
+      ? template.replace(/\{\{\s*(\w+)\s*\}\}/g, (_match, key: string) =>
+          String(values[key] ?? `{{${key}}}`),
         )
-      : tpl;
+      : template;
   return {
     ...actual,
     useTranslation: () => ({
-      t: (key: string, dflt?: unknown, opts?: unknown) => {
-        if (typeof dflt === 'string') {
-          const vars = opts && typeof opts === 'object' ? (opts as Record<string, unknown>) : undefined;
-          return interpolate(dflt, vars);
+      t: (key: string, fallback?: unknown, options?: unknown) => {
+        if (typeof fallback === 'string') {
+          return interpolate(
+            fallback,
+            options && typeof options === 'object'
+              ? options as Record<string, unknown>
+              : undefined,
+          );
         }
-        if (dflt && typeof dflt === 'object') {
-          const o = dflt as Record<string, unknown>;
-          if (typeof o.defaultValue === 'string') return interpolate(o.defaultValue, o);
+        if (fallback && typeof fallback === 'object') {
+          const values = fallback as Record<string, unknown>;
+          return typeof values.defaultValue === 'string'
+            ? interpolate(values.defaultValue, values)
+            : key;
         }
         return key;
       },
-      i18n: { language: 'en', changeLanguage: vi.fn() },
+      i18n: { language: 'en' },
     }),
     Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
   };
 });
 
 import { request } from '@/api/client';
-import { ToastProvider } from '@/components/feedback/Toast';
 import { VehicleCommandCenter } from './VehicleCommandCenter';
-import type { Vehicle, VehicleState, CommandLogEntry } from '../commands';
-
-const mockRequest = request as unknown as ReturnType<typeof vi.fn>;
-
-type RequestArgs = [string, RequestInit?];
 
+const requestMock = request as unknown as ReturnType<typeof vi.fn>;
 const VEHICLE_ID = 42;
-const FAV_KEY = `teslasync-cmd-favorites-${VEHICLE_ID}`;
 
-// Per-test-configurable responses, read lazily by the request router below.
-let latestEntries: CommandLogEntry[] = [];
-let commandResponse: () => Promise<unknown> = () =>
-  Promise.resolve({ success: true, message: 'OK' });
+type RequestCall = [string, RequestInit?];
+
+let stateResponse: unknown;
+let stateError: Error | null;
+let latestEntries: CommandLogEntry[];
+let historyEntries: CommandLogEntry[];
+let commandResponse: () => Promise<unknown>;
 
-function buildVehicle(overrides?: Partial<Vehicle>): Vehicle {
+function makeVehicle(overrides: Partial<Vehicle> = {}): Vehicle {
   return {
     id: VEHICLE_ID,
     vin: '5YJ3E1EA7KF000000',
     display_name: 'My Tesla',
     model: 'Model 3',
     state: 'online',
-    battery_level: 85,
-    battery_range: 400000,
     updated_at: new Date().toISOString(),
     ...overrides,
   };
 }
 
-function buildState(overrides?: Partial<VehicleState>): VehicleState {
+function makeState(overrides: Partial<VehicleState> = {}): VehicleState {
   return {
+    vehicle_id: VEHICLE_ID,
+    state: 'online',
     battery_level: 85,
-    rated_range: 400000, // 400 km
-    is_locked: false,
+    rated_range: 400_000,
+    is_locked: true,
     is_charging: false,
     is_climate_on: false,
     sentry_mode: false,
-    inside_temp: 21, // 21 °C
+    inside_temp: 21,
     speed: 0,
     ...overrides,
   };
 }
 
-function renderCenter(
-  vehicle: Vehicle = buildVehicle(),
-  state: VehicleState | null = buildState(),
-) {
-  const qc = new QueryClient({
+function makeEntry(
+  id: number,
+  overrides: Partial<CommandLogEntry> = {},
+): CommandLogEntry {
+  return {
+    id,
+    vehicle_id: VEHICLE_ID,
+    command: 'flash_lights',
+    params: '{}',
+    status: 'success',
+    error: '',
+    created_at: new Date(Date.now() - 120_000).toISOString(),
+    ...overrides,
+  };
+}
+
+function installRequestRouter() {
+  requestMock.mockImplementation((url: string, options?: RequestInit) => {
+    if (url === `/vehicles/${VEHICLE_ID}/state`) {
+      return stateError ? Promise.reject(stateError) : Promise.resolve(stateResponse);
+    }
+    if (url === `/vehicles/${VEHICLE_ID}/commands/latest`) {
+      return Promise.resolve(latestEntries);
+    }
+    if (url === `/vehicles/${VEHICLE_ID}/commands/history?limit=200`) {
+      return Promise.resolve(historyEntries);
+    }
+    if (
+      url === `/vehicles/${VEHICLE_ID}/command` &&
+      options?.method === 'POST'
+    ) {
+      return commandResponse();
+    }
+    return Promise.reject(new Error(`Unexpected request: ${url}`));
+  });
+}
+
+function renderCenter(vehicle: Vehicle = makeVehicle()) {
+  const queryClient = new QueryClient({
     defaultOptions: {
       queries: { retry: false },
       mutations: { retry: false },
     },
   });
-  const utils = render(
-    <QueryClientProvider client={qc}>
-      <ToastProvider>
-        <VehicleCommandCenter vehicle={vehicle} state={state} />
-      </ToastProvider>
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/commands']}>
+        <ToastProvider>
+          <VehicleCommandCenter vehicle={vehicle} />
+        </ToastProvider>
+      </MemoryRouter>
     </QueryClientProvider>,
   );
-  return { qc, ...utils };
 }
 
-/** First stubbed request issued with the given HTTP method. */
-function findCall(method: string): RequestArgs | undefined {
-  return (mockRequest.mock.calls as RequestArgs[]).find((c) => c[1]?.method === method);
+function searchFor(value: string) {
+  fireEvent.change(screen.getByLabelText('Search commands'), {
+    target: { value },
+  });
 }
 
-function bodyOf(call: RequestArgs | undefined): Record<string, unknown> {
-  return JSON.parse(String(call?.[1]?.body ?? '{}')) as Record<string, unknown>;
+function postCalls(): RequestCall[] {
+  return (requestMock.mock.calls as RequestCall[]).filter(
+    ([, options]) => options?.method === 'POST',
+  );
 }
 
-const typeSearch = (value: string) =>
-  fireEvent.change(screen.getByPlaceholderText('Search commands...'), { target: { value } });
+function lastPostBody(): Record<string, unknown> {
+  const call = postCalls().at(-1);
+  return JSON.parse(String(call?.[1]?.body ?? '{}')) as Record<string, unknown>;
+}
 
 beforeEach(() => {
   localStorage.clear();
   sessionStorage.clear();
+  requestMock.mockReset();
+  stateResponse = { state: makeState(), live: true };
+  stateError = null;
   latestEntries = [];
-  commandResponse = () => Promise.resolve({ success: true, message: 'OK' });
-  mockRequest.mockReset();
-  mockRequest.mockImplementation((url: string) => {
-    if (url.endsWith('/commands/latest')) return Promise.resolve(latestEntries);
-    if (url.includes('/command/')) return commandResponse();
-    return Promise.resolve({});
-  });
+  historyEntries = [];
+  commandResponse = () => Promise.resolve({ success: true, result: 'success' });
+  installRequestRouter();
 });
 
-describe('VehicleCommandCenter — header + live state', () => {
-  it('renders the vehicle name, model · VIN caption, and state badge', () => {
+describe('VehicleCommandCenter — summary and readiness', () => {
+  it('renders selected vehicle identity, converted telemetry, and all major sections', async () => {
     renderCenter();
+
     expect(screen.getByText('My Tesla')).toBeInTheDocument();
     expect(screen.getByText(/Model 3/)).toBeInTheDocument();
     expect(screen.getByText(/5YJ3E1EA7KF000000/)).toBeInTheDocument();
-    expect(screen.getByText('online')).toBeInTheDocument();
+    expect(await screen.findByText('85')).toBeInTheDocument();
+    expect(screen.getByText('400')).toBeInTheDocument();
+    expect(screen.getByText('21')).toBeInTheDocument();
+    expect(screen.getByTestId('command-readiness')).toBeInTheDocument();
+    expect(screen.getByTestId('command-workspace')).toBeInTheDocument();
+    expect(screen.getByTestId('command-safety')).toBeInTheDocument();
+    expect(screen.getByTestId('command-activity')).toBeInTheDocument();
   });
 
-  it('falls back to the VIN as the display name when display_name is blank', () => {
-    renderCenter(buildVehicle({ display_name: '' }));
-    // The VIN now appears twice: as the header name AND inside the caption.
-    expect(screen.getAllByText(/5YJ3E1EA7KF000000/).length).toBeGreaterThanOrEqual(2);
-  });
+  it('keeps commands usable when live state is unavailable and shows an honest error', async () => {
+    stateError = new Error('state endpoint unavailable');
+    installRequestRouter();
 
-  it('renders battery, rated range, and cabin temperature at the operator SI units', () => {
     renderCenter();
-    expect(screen.getByText('85%')).toBeInTheDocument();
-    expect(screen.getByText('400 km')).toBeInTheDocument();
-    expect(screen.getByText('21°C')).toBeInTheDocument();
-    // Decorative metric icons must be hidden from assistive tech.
-    expect(document.querySelectorAll('svg[aria-hidden="true"]').length).toBeGreaterThanOrEqual(3);
-  });
 
-  it('is null-safe: a null battery_level reads 0% (never a bare %) and null range reads 0 km', () => {
-    renderCenter(
-      buildVehicle(),
-      buildState({
-        battery_level: null as unknown as number,
-        rated_range: null as unknown as number,
-        inside_temp: null as unknown as number,
-      }),
-    );
-    expect(screen.getByText('0%')).toBeInTheDocument();
-    expect(screen.getByText('0 km')).toBeInTheDocument();
-    // The pre-hardening bug rendered a stranded "%" for a null battery_level.
-    expect(screen.queryByText('%')).toBeNull();
-    // A null cabin temperature suppresses the whole temperature chip.
-    expect(screen.queryByText(/°C/)).toBeNull();
-  });
-
-  it('omits the entire live-metric row when no state is available', () => {
-    renderCenter(buildVehicle(), null);
-    expect(screen.queryByText('85%')).toBeNull();
-    expect(screen.queryByText(/km/)).toBeNull();
-    // Commands still render — the surface is not gated behind state.
-    expect(screen.getByText('Quick Actions')).toBeInTheDocument();
+    expect(
+      await screen.findByText("Can't reach server"),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('command-workspace')).toBeInTheDocument();
+    expect(screen.getAllByText('Wake Up').length).toBeGreaterThan(0);
   });
-});
 
-describe('VehicleCommandCenter — asleep + stale banners', () => {
-  it('shows the wake-up callout when asleep and suppresses the stale banner', () => {
-    // Asleep AND stale: only the asleep callout should show.
-    renderCenter(
-      buildVehicle({ state: 'asleep', updated_at: new Date(Date.now() - 20 * 60_000).toISOString() }),
-      null,
-    );
-    expect(screen.getByText(/Wake it up first to send commands/i)).toBeInTheDocument();
-    expect(screen.queryByText(/Vehicle data is/i)).toBeNull();
-  });
+  it('shows the stale warning exactly once for extremely old telemetry', () => {
+    const veryOld = new Date(Date.now() - 2_501 * 60 * 60 * 1000).toISOString();
 
-  it('shows the stale-data banner for an online vehicle with an old timestamp', () => {
-    renderCenter(
-      buildVehicle({ state: 'online', updated_at: new Date(Date.now() - 20 * 60_000).toISOString() }),
-      buildState(),
-    );
-    expect(screen.getByText(/Vehicle data is .* old/i)).toBeInTheDocument();
-    expect(screen.queryByText(/Wake it up first/i)).toBeNull();
-  });
-});
+    renderCenter(makeVehicle({ updated_at: veryOld }));
 
-describe('VehicleCommandCenter — favourites + search', () => {
-  it('seeds the Quick Actions bar from the defaultFavorite commands', () => {
-    renderCenter();
-    expect(screen.getByText('Quick Actions')).toBeInTheDocument();
-    expect(screen.getByText('Wake Up')).toBeInTheDocument();
-    expect(screen.getByText('Lock')).toBeInTheDocument();
+    expect(screen.getAllByTestId('command-freshness-warning')).toHaveLength(1);
+    expect(
+      within(screen.getByTestId('command-freshness-warning')).getByText(
+        /Last vehicle update: 2501h ago\./,
+      ),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/ago old/i)).not.toBeInTheDocument();
   });
 
-  it('hydrates favourites from localStorage when present', () => {
-    localStorage.setItem(FAV_KEY, JSON.stringify(['lock']));
-    renderCenter();
-    // Only the persisted favourite is shown; other defaults are not favourites.
-    expect(screen.getByText('Lock')).toBeInTheDocument();
-    expect(screen.queryByText('Wake Up')).toBeNull();
+  it('still renders one stale warning when the last-known vehicle state is asleep', () => {
+    const stale = new Date(Date.now() - 30 * 60_000).toISOString();
+    stateResponse = { state: makeState({ state: 'asleep' }), live: false };
+    installRequestRouter();
+
+    renderCenter(makeVehicle({ state: 'asleep', updated_at: stale }));
+
+    expect(screen.getAllByTestId('command-freshness-warning')).toHaveLength(1);
+    expect(
+      screen.getByText(/The vehicle is asleep\. Commands remain selectable/i),
+    ).toBeInTheDocument();
+    searchFor('flash_lights');
+    expect(
+      screen.getByRole('button', { name: 'Flash Lights' }),
+    ).not.toHaveAttribute('aria-disabled');
   });
+});
 
-  it('persists a favourite toggle to localStorage', () => {
+describe('VehicleCommandCenter — complete command catalogue', () => {
+  it('keeps every domain, category, and configured action reachable', () => {
     renderCenter();
-    typeSearch('flash_lights'); // isolate a single, non-favourite tile
-    fireEvent.click(screen.getByRole('button', { name: 'Toggle favorite' }));
-    const stored = JSON.parse(localStorage.getItem(FAV_KEY) ?? '[]') as string[];
-    expect(Array.isArray(stored)).toBe(true);
-    expect(stored).toContain('flash_lights');
-  });
 
-  it('flattens search results and shows an empty state for no matches', () => {
-    renderCenter();
-    typeSearch('flash_lights');
-    expect(screen.getByText('Flash Lights')).toBeInTheDocument();
-    // The favourites bar collapses while searching.
-    expect(screen.queryByText('Quick Actions')).toBeNull();
-
-    typeSearch('zzzznope');
-    expect(screen.getByText('No commands match your search')).toBeInTheDocument();
-    expect(screen.queryByText('Flash Lights')).toBeNull();
+    for (const domain of ['Access & Security', 'Climate & Comfort', 'Charging & Schedules', 'Vehicle Controls']) {
+      expect(screen.getByRole('tab', { name: domain })).toBeInTheDocument();
+    }
+
+    const domainCategories = [
+      ['Access & Security', ['security', 'doors', 'drive', 'windows', 'sunroof']],
+      ['Climate & Comfort', ['climate', 'climate_protection']],
+      ['Charging & Schedules', ['charging', 'schedules']],
+      ['Vehicle Controls', ['alerts', 'navigation', 'software', 'vehicle', 'media']],
+    ] as const;
+
+    for (const [domain, categories] of domainCategories) {
+      fireEvent.click(screen.getByRole('tab', { name: domain }));
+      for (const category of categories) {
+        const escaped = CATEGORY_META[category].fallback.replace(
+          /[.*+?^${}()|[\]\\]/g,
+          '\\$&',
+        );
+        expect(
+          screen.getByRole('button', {
+            name: new RegExp(`^${escaped}\\s*\\(`, 'i'),
+          }),
+        ).toBeInTheDocument();
+      }
+    }
+
+    for (const command of COMMANDS) {
+      searchFor(command.command);
+      expect(screen.getAllByText(command.labelFallback).length).toBeGreaterThan(0);
+    }
   });
 });
 
 describe('VehicleCommandCenter — command execution', () => {
-  it('POSTs a plain action to the command route and surfaces the success banner', async () => {
+  it('preserves wake-up as a reachable command on the supported endpoint', async () => {
     renderCenter();
-    typeSearch('flash_lights');
-    fireEvent.click(screen.getByText('Flash Lights'));
 
-    await screen.findByText('OK'); // lastResult banner
-    const post = findCall('POST');
-    expect(post?.[0]).toBe('/vehicles/42/command/flash_lights');
-    expect(bodyOf(post)).toEqual({}); // no params for a bare action
+    fireEvent.click(screen.getAllByRole('button', { name: 'Wake Up' })[0]);
+
+    await waitFor(() => expect(postCalls()).toHaveLength(1));
+    expect(postCalls()[0][0]).toBe('/vehicles/42/command');
+    expect(lastPostBody()).toEqual({ command: 'wake_up' });
   });
 
-  it('routes wake_up through the dedicated wake mutation', async () => {
+  it('sends a direct command through the supported endpoint and payload', async () => {
     renderCenter();
-    fireEvent.click(screen.getByText('Wake Up'));
+    searchFor('flash_lights');
 
-    await waitFor(() =>
-      expect(mockRequest).toHaveBeenCalledWith(
-        '/vehicles/42/command/wake_up',
-        expect.objectContaining({ method: 'POST' }),
-      ),
-    );
-    // wake_up is a stamp-only POST with no JSON body.
-    expect(bodyOf(findCall('POST'))).toEqual({});
+    fireEvent.click(screen.getByRole('button', { name: 'Flash Lights' }));
+
+    await waitFor(() => expect(postCalls()).toHaveLength(1));
+    expect(postCalls()[0][0]).toBe('/vehicles/42/command');
+    expect(lastPostBody()).toEqual({ command: 'flash_lights' });
+    expect(
+      await screen.findByText('Flash Lights request sent to My Tesla.'),
+    ).toBeInTheDocument();
   });
 
-  it('surfaces an error banner when a command fails', async () => {
-    commandResponse = () => Promise.reject(new Error('boom'));
+  it('requires confirmation before sending a dangerous command', async () => {
     renderCenter();
-    typeSearch('flash_lights');
-    fireEvent.click(screen.getByText('Flash Lights'));
+    searchFor('speed_limit_clear_pin_admin');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Clear Speed PIN' }));
 
-    expect(await screen.findByText('boom')).toBeInTheDocument();
+    const dialog = screen.getByRole('dialog');
+    expect(
+      within(dialog).getByText(/without authentication/i),
+    ).toBeInTheDocument();
+    expect(postCalls()).toHaveLength(0);
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Confirm' }));
+
+    await waitFor(() => expect(postCalls()).toHaveLength(1));
+    expect(lastPostBody()).toEqual({
+      command: 'speed_limit_clear_pin_admin',
+    });
   });
 
-  it('annotates a tile with the latest command status (✓ + relative age)', async () => {
-    latestEntries = [
-      {
-        id: 1,
-        vehicle_id: VEHICLE_ID,
-        command: 'flash_lights',
-        params: '',
-        status: 'success',
-        error: '',
-        created_at: new Date(Date.now() - 125_000).toISOString(), // ~2 minutes
-      },
-    ];
+  it('preserves input and select command payloads', async () => {
     renderCenter();
-    typeSearch('flash_lights');
-
-    expect(await screen.findByText('✓ 2m ago')).toBeInTheDocument();
+    searchFor('set_charge_limit');
+    fireEvent.click(screen.getByRole('button', { name: 'Set Limit' }));
+
+    const inputDialog = screen.getByRole('dialog');
+    fireEvent.change(within(inputDialog).getByDisplayValue('80'), {
+      target: { value: '90' },
+    });
+    fireEvent.click(within(inputDialog).getByRole('button', { name: 'Send' }));
+
+    await waitFor(() => expect(postCalls()).toHaveLength(1));
+    expect(lastPostBody()).toEqual({
+      command: 'set_charge_limit',
+      params: { percent: '90' },
+    });
+
+    searchFor('set_cop_temp');
+    fireEvent.click(screen.getByRole('button', { name: 'COP Temp' }));
+    const selectDialog = screen.getByRole('dialog');
+    fireEvent.click(within(selectDialog).getByRole('button', { name: /Low/ }));
+
+    await waitFor(() => expect(postCalls()).toHaveLength(2));
+    expect(lastPostBody()).toEqual({
+      command: 'set_cop_temp',
+      params: { cop_temp: '0' },
+    });
   });
 
-  it('degrades a malformed command timestamp to an em dash instead of NaN', async () => {
-    latestEntries = [
-      {
-        id: 2,
-        vehicle_id: VEHICLE_ID,
-        command: 'flash_lights',
-        params: '',
-        status: 'success',
-        error: '',
-        created_at: 'not-a-real-date',
-      },
-    ];
+  it('shows pending progress and disables command activation until settled', async () => {
+    let resolveCommand: ((value: unknown) => void) | undefined;
+    commandResponse = () =>
+      new Promise((resolve) => {
+        resolveCommand = resolve;
+      });
+    installRequestRouter();
     renderCenter();
-    typeSearch('flash_lights');
+    searchFor('flash_lights');
+
+    const tile = screen.getByRole('button', { name: 'Flash Lights' });
+    fireEvent.click(tile);
 
-    expect(await screen.findByText('✓ —')).toBeInTheDocument();
-    expect(screen.queryByText(/NaN/)).toBeNull();
+    expect(await screen.findByTestId('command-pending-feedback')).toHaveTextContent(
+      'Sending Flash Lights…',
+    );
+    expect(tile).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.click(tile);
+    expect(postCalls()).toHaveLength(1);
+
+    await act(async () => {
+      resolveCommand?.({ success: true, result: 'success' });
+    });
+    expect(
+      await screen.findByText('Flash Lights request sent to My Tesla.'),
+    ).toBeInTheDocument();
   });
-});
 
-describe('VehicleCommandCenter — centralised dialogs', () => {
-  it('opens the confirm dialog for a dangerous command and cancels without executing', () => {
+  it('surfaces the backend reason for a soft failure', async () => {
+    commandResponse = () =>
+      Promise.resolve({ success: false, error: 'vehicle is offline' });
+    installRequestRouter();
     renderCenter();
-    typeSearch('remote_start_drive');
-    fireEvent.click(screen.getByText('Remote Start'));
+    searchFor('flash_lights');
 
-    const dialog = screen.getByRole('dialog');
-    expect(within(dialog).getByText(/keyless driving for 2 minutes/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Flash Lights' }));
 
-    fireEvent.click(within(dialog).getByRole('button', { name: /cancel/i }));
-    expect(screen.queryByRole('dialog')).toBeNull();
-    expect(mockRequest).not.toHaveBeenCalledWith(
-      '/vehicles/42/command/remote_start_drive',
-      expect.anything(),
+    expect(await screen.findByTestId('command-result-feedback')).toHaveTextContent(
+      'vehicle is offline',
     );
   });
 
-  it('opens the select dialog and POSTs the chosen option as a param', async () => {
+  it('surfaces a hard request error without claiming success', async () => {
+    commandResponse = () => Promise.reject(new Error('network down'));
+    installRequestRouter();
     renderCenter();
-    typeSearch('set_cop_temp');
-    fireEvent.click(screen.getByText('COP Temp'));
+    searchFor('flash_lights');
 
-    const dialog = screen.getByRole('dialog');
-    fireEvent.click(within(dialog).getByRole('button', { name: /Low/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Flash Lights' }));
 
-    await waitFor(() =>
-      expect(mockRequest).toHaveBeenCalledWith(
-        '/vehicles/42/command/set_cop_temp',
-        expect.objectContaining({ method: 'POST' }),
-      ),
+    expect(await screen.findByTestId('command-result-feedback')).toHaveTextContent(
+      'Flash Lights failed: network down',
     );
-    expect(bodyOf(findCall('POST'))).toEqual({ cop_temp: '0' });
-    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(
+      screen.queryByText('Flash Lights request sent to My Tesla.'),
+    ).not.toBeInTheDocument();
   });
+});
+
+describe('VehicleCommandCenter — recent activity', () => {
+  it('renders recent success and failure outcomes from command history', async () => {
+    historyEntries = [
+      makeEntry(1, { command: 'lock', status: 'success' }),
+      makeEntry(2, {
+        command: 'climate_on',
+        status: 'failed',
+        error: 'vehicle asleep',
+      }),
+    ];
+    installRequestRouter();
 
-  it('opens the input dialog and POSTs the edited value as a param', async () => {
     renderCenter();
-    typeSearch('set_charge_limit');
-    fireEvent.click(screen.getByText('Set Limit'));
 
-    const dialog = screen.getByRole('dialog');
-    const field = within(dialog).getByDisplayValue('80'); // seeded default
-    fireEvent.change(field, { target: { value: '90' } });
-    fireEvent.click(within(dialog).getByRole('button', { name: /send/i }));
-
-    await waitFor(() =>
-      expect(mockRequest).toHaveBeenCalledWith(
-        '/vehicles/42/command/set_charge_limit',
-        expect.objectContaining({ method: 'POST' }),
-      ),
-    );
-    expect(bodyOf(findCall('POST'))).toEqual({ percent: '90' });
+    const activity = screen.getByTestId('command-activity');
+    expect(await within(activity).findByText('Lock')).toBeInTheDocument();
+    expect(within(activity).getByText('Climate')).toBeInTheDocument();
+    expect(
+      within(activity).getByText(/Failed · vehicle asleep/),
+    ).toBeInTheDocument();
   });
 });
diff --git a/web/src/features/system/components/VehicleCommandCenter.tsx b/web/src/features/system/components/VehicleCommandCenter.tsx
index 3e001070fd..ae7035c9bf 100644
--- a/web/src/features/system/components/VehicleCommandCenter.tsx
+++ b/web/src/features/system/components/VehicleCommandCenter.tsx
@@ -1,390 +1,161 @@
-import { useState, useMemo, useCallback } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { cn } from '@/lib/cn';
-import { fmtNumber } from '@/lib/numberFormat';
-import { GlassPanel, Badge, Text, Caption } from '@/components/ui';
-import { useToast } from '@/components/feedback/Toast';
-import { useUnits } from '@/hooks/useUnits';
-import { convertDistanceFromSI, convertTempFromSI } from '@/lib/unitConversion';
-import { request } from '@/api/client';
+import { Grid, Stack } from '@/components/layout';
+import { useCommandHistory, useCommandLatest } from '@/api/hooks/useCommands';
 import {
-  Battery, Wifi, Thermometer, Power, CheckCircle, AlertTriangle, Clock,
-} from 'lucide-react';
+  type CommandResult,
+  useVehicleCommand,
+} from '@/api/hooks/useVehicleCommand';
+import { useVehicleState } from '@/api/hooks/useVehicles';
+import { isTeslaAuthExpiredError } from '@/lib/resilience';
+import type { Vehicle } from '../commands';
+import { CommandCenterHero } from './command-center/CommandCenterHero';
+import { CommandReadinessStrip } from './command-center/CommandReadinessStrip';
+import { CommandSafetyPanel } from './command-center/CommandSafetyPanel';
+import { CommandWorkspace } from './command-center/CommandWorkspace';
+import { RecentCommandActivity } from './command-center/RecentCommandActivity';
+import { VehicleFreshnessWarning } from './command-center/VehicleFreshnessWarning';
 import {
-  COMMANDS, CATEGORY_ORDER, type CommandDef, type CommandLogEntry,
-  type Vehicle, type VehicleState,
-} from '../commands';
-import { CommandTile } from './CommandTile';
-import { ToggleCommandTile } from './ToggleCommandTile';
-import { InputCommandTile } from './InputCommandTile';
-import { CollapsibleCommandGroup } from './CollapsibleCommandGroup';
-import { CommandSearch } from './CommandSearch';
-import { FavoritesBar } from './FavoritesBar';
-import { FreshnessIndicator, useIsStale } from '@/components/data-display';
-import { AlertBanner } from '@/components/feedback';
-import { CommandInputDialog } from './CommandInputDialog';
-import { CommandConfirmDialog } from './CommandConfirmDialog';
-import { CommandSelectDialog } from './CommandSelectDialog';
-
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
-function timeAgo(dateStr: string): string {
-  const parsed = new Date(dateStr).getTime();
-  if (!Number.isFinite(parsed)) return '—';
-  const diff = Date.now() - parsed;
-  const mins = Math.floor(diff / 60000);
-  if (mins < 1) return 'just now';
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ago`;
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
+  COMMAND_STATE_REFRESH_MS,
+} from './command-center/commandDomains';
+import { getCommandLabel } from './command-center/commandLabels';
+import type { CommandExecutionFeedback } from './command-center/types';
 
 interface VehicleCommandCenterProps {
   vehicle: Vehicle;
-  state: VehicleState | null;
 }
 
-export function VehicleCommandCenter({ vehicle, state }: VehicleCommandCenterProps) {
+const LOWER_GRID_COLUMNS = { default: 1, lg: 2 } as const;
+
+/**
+ * Selected-vehicle command orchestrator.
+ *
+ * Data comes exclusively from the shared TanStack Query hooks. Visual
+ * sections are intentionally split into focused components so hero,
+ * readiness, actions, safety, and activity each own their loading/error/empty
+ * presentation instead of disappearing behind one broad data guard.
+ */
+export function VehicleCommandCenter({ vehicle }: VehicleCommandCenterProps) {
   const { t } = useTranslation();
-  const qc = useQueryClient();
-  const toast = useToast();
-  const { unitPrefs } = useUnits();
-
-  const name = vehicle.display_name || vehicle.vin;
-  const isAsleep = vehicle.state === 'asleep' || vehicle.state === 'offline';
-  const { isStale, ageLabel } = useIsStale(vehicle.updated_at);
-
-  // ─── Command state ──────────────────────────────────────────────────────
-
-  const [lastResult, setLastResult] = useState<{ success: boolean; message: string } | null>(null);
-  const [search, setSearch] = useState('');
-  const [favorites, setFavorites] = useState<string[]>(() => {
-    try {
-      const stored = localStorage.getItem(`teslasync-cmd-favorites-${vehicle.id}`);
-      if (stored) return JSON.parse(stored) as string[];
-    } catch { /* noop */ }
-    return COMMANDS.filter(c => c.defaultFavorite).map(c => c.id);
+  const stateQuery = useVehicleState(vehicle.id, {
+    refetchInterval: COMMAND_STATE_REFRESH_MS,
   });
-
-  const toggleFavorite = useCallback((cmdId: string) => {
-    setFavorites(prev => {
-      const next = prev.includes(cmdId)
-        ? prev.filter(id => id !== cmdId)
-        : [...prev, cmdId];
-      try { localStorage.setItem(`teslasync-cmd-favorites-${vehicle.id}`, JSON.stringify(next)); } catch { /* noop */ }
-      return next;
-    });
-  }, [vehicle.id]);
-
-  // ─── Latest command statuses ────────────────────────────────────────────
-
-  const { data: latestCmds } = useQuery({
-    queryKey: ['command-latest', vehicle.id],
-    queryFn: () => request<CommandLogEntry[]>(`/vehicles/${vehicle.id}/commands/latest`),
-    refetchInterval: 30_000,
-  });
-
-  const cmdMap = useMemo(
-    () => new Map((latestCmds ?? []).map(c => [c.command, c])),
-    [latestCmds],
-  );
-
-  const cmdStatus = useCallback((command: string): string | undefined => {
-    const entry = cmdMap.get(command);
-    if (!entry) return undefined;
-    const ago = timeAgo(entry.created_at);
-    return entry.status === 'success' ? `✓ ${ago}` : `✗ ${ago}`;
-  }, [cmdMap]);
-
-  // ─── Mutations ──────────────────────────────────────────────────────────
-
-  const cmd = useMutation({
-    mutationFn: ({ command, params }: { command: string; params?: Record<string, unknown> }) =>
-      request<{ success: boolean; message: string }>(`/vehicles/${vehicle.id}/command/${command}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: params ? JSON.stringify(params) : undefined,
-      }),
-    onSuccess: (data) => {
-      setLastResult(data);
-      qc.invalidateQueries({ queryKey: ['command-vehicle-states'] });
-      qc.invalidateQueries({ queryKey: ['vehicle-state'] });
-      qc.invalidateQueries({ queryKey: ['command-latest', vehicle.id] });
-      qc.invalidateQueries({ queryKey: ['command-history', String(vehicle.id)] });
-      if (data.success) toast.success(`${t('Command sent to')} ${name}`);
-      else toast.error(data.message || `${t('Command failed on')} ${name}`);
-    },
-    onError: (err: Error) => {
-      setLastResult({ success: false, message: err.message });
-      toast.error(`${t('Command failed')}: ${err.message}`);
-    },
-  });
-
-  const wakeMut = useMutation({
-    mutationFn: () => request<{ success: boolean }>(`/vehicles/${vehicle.id}/command/wake_up`, { method: 'POST' }),
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: ['command-vehicle-states'] });
-      toast.success(`${name} ${t('is waking up')}`);
+  const latestQuery = useCommandLatest(vehicle.id);
+  const historyQuery = useCommandHistory(vehicle.id);
+  const {
+    mutate: sendCommand,
+    isPending: commandPending,
+  } = useVehicleCommand();
+
+  const [pendingCommand, setPendingCommand] = useState<string | null>(null);
+  const [feedback, setFeedback] = useState<CommandExecutionFeedback | null>(null);
+
+  const state = stateQuery.data?.state ?? null;
+  const latestCommands = latestQuery.data ?? [];
+  const history = historyQuery.data ?? [];
+  const pendingLabel = pendingCommand
+    ? getCommandLabel(pendingCommand, t)
+    : null;
+
+  const executeCommand = useCallback(
+    (command: string, params?: Record<string, unknown>) => {
+      const commandLabel = getCommandLabel(command, t);
+      const vehicleName =
+        vehicle.display_name?.trim() ||
+        vehicle.vin ||
+        t('commands.vehicle.fallbackName', 'Vehicle {{id}}', { id: vehicle.id });
+
+      setFeedback(null);
+      setPendingCommand(command);
+      sendCommand(
+        { vehicleId: vehicle.id, command, params },
+        {
+          onSuccess: (result: CommandResult | undefined) => {
+            if (result?.success) {
+              setFeedback({
+                command,
+                success: true,
+                message:
+                  result.message ||
+                  t(
+                    'commands.feedback.success',
+                    '{{command}} request sent to {{vehicle}}.',
+                    { command: commandLabel, vehicle: vehicleName },
+                  ),
+              });
+              return;
+            }
+
+            setFeedback({
+              command,
+              success: false,
+              message:
+                result?.error ||
+                result?.message ||
+                t(
+                  'commands.feedback.failed',
+                  '{{command}} was not accepted by {{vehicle}}.',
+                  { command: commandLabel, vehicle: vehicleName },
+                ),
+            });
+          },
+          onError: (error: Error) => {
+            if (isTeslaAuthExpiredError(error)) return;
+            setFeedback({
+              command,
+              success: false,
+              message: t(
+                'commands.feedback.error',
+                '{{command}} failed: {{message}}',
+                { command: commandLabel, message: error.message },
+              ),
+            });
+          },
+          onSettled: () => setPendingCommand(null),
+        },
+      );
     },
-    onError: (err: Error) => toast.error(`${t('Failed to wake')} ${name}: ${err.message}`),
-  });
-
-  const isLoading = cmd.isPending || wakeMut.isPending;
-
-  const executeCommand = useCallback((command: string, params?: Record<string, unknown>) => {
-    setLastResult(null);
-    if (command === 'wake_up') {
-      wakeMut.mutate();
-    } else {
-      cmd.mutate({ command, params });
-    }
-  }, []);
-
-  // ─── Centralized dialog state ──────────────────────────────────────────
-
-  interface DialogState {
-    kind: 'input' | 'select' | 'confirm';
-    def: CommandDef;
-  }
-
-  const [activeDialog, setActiveDialog] = useState<DialogState | null>(null);
-
-  const requestDialog = useCallback((def: CommandDef) => {
-    if (def.selectConfig) {
-      setActiveDialog({ kind: 'select', def });
-    } else if (def.inputConfig) {
-      setActiveDialog({ kind: 'input', def });
-    } else if (def.dangerous) {
-      setActiveDialog({ kind: 'confirm', def });
-    }
-  }, []);
-
-  const closeDialog = useCallback(() => {
-    setActiveDialog(null);
-  }, []);
-
-  const handleInputSubmit = useCallback((values: Record<string, string>) => {
-    if (!activeDialog) return;
-    const { def } = activeDialog;
-    const ic = def.inputConfig!;
-
-    let params: Record<string, unknown>;
-    if (ic.buildParams) {
-      params = ic.buildParams(values);
-    } else {
-      const rawValue = values[ic.paramName];
-      const finalValue = ic.transform ? ic.transform(rawValue) : rawValue;
-      params = { ...def.params, [ic.paramName]: finalValue };
-    }
-
-    executeCommand(def.command, params);
-    closeDialog();
-  }, [activeDialog, executeCommand, closeDialog]);
-
-  const handleSelectSubmit = useCallback((value: string) => {
-    if (!activeDialog) return;
-    const { def } = activeDialog;
-    const sc = def.selectConfig!;
-    executeCommand(def.command, { ...def.params, [sc.paramName]: value });
-    closeDialog();
-  }, [activeDialog, executeCommand, closeDialog]);
-
-  const handleConfirmSubmit = useCallback(() => {
-    if (!activeDialog) return;
-    const { def } = activeDialog;
-    executeCommand(def.command, def.params);
-    closeDialog();
-  }, [activeDialog, executeCommand, closeDialog]);
-
-  // ─── Filtering ──────────────────────────────────────────────────────────
-
-  const filteredCommands = useMemo(() => {
-    if (!search.trim()) return null;
-    const q = search.toLowerCase();
-    return COMMANDS.filter(c =>
-      t(c.labelKey, c.labelFallback).toLowerCase().includes(q) ||
-      c.category.includes(q) ||
-      c.command.includes(q)
-    );
-  }, [search, t]);
-
-  const commandsByCategory = useMemo(() => {
-    const groups = new Map<string, CommandDef[]>();
-    for (const cmd of COMMANDS) {
-      const list = groups.get(cmd.category) ?? [];
-      list.push(cmd);
-      groups.set(cmd.category, list);
-    }
-    return groups;
-  }, []);
-
-  // ─── Tile renderer ─────────────────────────────────────────────────────
-
-  const renderTile = useCallback((def: CommandDef) => {
-    const common = {
-      lastStatus: cmdStatus(def.command) ?? (def.commandOff ? cmdStatus(def.commandOff) : undefined),
-      loading: isLoading,
-      isFavorite: favorites.includes(def.id),
-      onToggleFavorite: () => toggleFavorite(def.id),
-      onRequestDialog: requestDialog,
-    };
-
-    switch (def.type) {
-      case 'toggle':
-        return <ToggleCommandTile key={def.id} {...common} def={def} state={state} onExecute={executeCommand} />;
-      case 'input':
-        return <InputCommandTile key={def.id} {...common} def={def} />;
-      default:
-        return <CommandTile key={def.id} {...common} def={def} onExecute={executeCommand} />;
-    }
-  }, [cmdStatus, isLoading, favorites, toggleFavorite, state, executeCommand, requestDialog]);
-
-  // ─── Render ─────────────────────────────────────────────────────────────
+    [sendCommand, t, vehicle],
+  );
 
   return (
-    <GlassPanel className="p-6">
-      {/* Vehicle header */}
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <div className="flex items-center gap-3 mb-1">
-            <Text size="lg" weight="semibold" color="primary">{name}</Text>
-            <Badge variant={isAsleep ? 'neutral' : 'success'} size="sm">{vehicle.state}</Badge>
-            <FreshnessIndicator timestamp={vehicle.updated_at} />
-          </div>
-          <Caption>{vehicle.model} · {vehicle.vin}</Caption>
-        </div>
-        {state && (
-          <div className="flex items-center gap-4 text-xs">
-            <span className="flex items-center gap-1">
-              <Battery className="h-3.5 w-3.5 text-[var(--text-muted)]" aria-hidden="true" />
-              <Text weight="semibold" className={(state.battery_level ?? 0) > 50 ? 'text-emerald-300' : 'text-amber-300'}>
-                {state.battery_level ?? 0}%
-              </Text>
-            </span>
-            <span className="flex items-center gap-1">
-              <Wifi className="h-3.5 w-3.5 text-[var(--text-muted)]" aria-hidden="true" />
-              <Text color="secondary">{fmtNumber(convertDistanceFromSI(state.rated_range ?? 0, unitPrefs.distance), 0)} {unitPrefs.distance}</Text>
-            </span>
-            {state.inside_temp != null && (
-              <span className="flex items-center gap-1">
-                <Thermometer className="h-3.5 w-3.5 text-[var(--text-muted)]" aria-hidden="true" />
-                <Text color="secondary">{fmtNumber(convertTempFromSI(state.inside_temp, unitPrefs.temperature), 0)}{unitPrefs.temperature}</Text>
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Status feedback */}
-      {lastResult && (
-        <GlassPanel className={cn('p-3 mb-4 flex items-center gap-2',
-          lastResult.success ? 'bg-neon-green/5 border-neon-green/20' : 'bg-neon-red/5 border-neon-red/20',
-        )}>
-          {lastResult.success
-            ? <CheckCircle className="h-4 w-4 text-neon-green" aria-hidden="true" />
-            : <AlertTriangle className="h-4 w-4 text-neon-red" aria-hidden="true" />
-          }
-          <Text size="xs" className={lastResult.success ? 'text-emerald-300' : 'text-rose-300'}>
-            {lastResult.message}
-          </Text>
-        </GlassPanel>
-      )}
-
-      {isAsleep && (
-        <GlassPanel className="p-3 mb-4 flex items-center gap-2 bg-neon-amber/5 border-neon-amber/20">
-          <Power className="h-4 w-4 text-neon-amber" aria-hidden="true" />
-          <Text size="xs" className="text-amber-300">
-            {t('Vehicle is')} {vehicle.state}. {t('Wake it up first to send commands.')}
-          </Text>
-        </GlassPanel>
-      )}
-
-      {isStale && !isAsleep && (
-        <AlertBanner variant="warning" icon={<Clock className="h-4 w-4" aria-hidden="true" />}>
-          {t('commands.staleData', 'Vehicle data is {{age}} old. The vehicle may be asleep or offline.', { age: ageLabel })}
-        </AlertBanner>
-      )}
-
-      {/* Search */}
-      <div className="mb-5">
-        <CommandSearch value={search} onChange={setSearch} />
-      </div>
-
-      {/* Commands */}
-      <div className="space-y-5">
-        {/* Favorites — always visible when not searching */}
-        {!filteredCommands && (
-          <FavoritesBar
-            favorites={favorites}
-            commands={COMMANDS}
-            renderTile={renderTile}
-          />
-        )}
-
-        {/* Search results — flat grid */}
-        {filteredCommands ? (
-          filteredCommands.length > 0 ? (
-            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
-              {filteredCommands.map(cmd => renderTile(cmd))}
-            </div>
-          ) : (
-            <div className="text-center py-8">
-              <Text size="sm" color="muted">{t('commands.search.noResults', 'No commands match your search')}</Text>
-            </div>
-          )
-        ) : (
-          /* Category groups — collapsible */
-          CATEGORY_ORDER.map(cat => {
-            const cmds = commandsByCategory.get(cat);
-            if (!cmds?.length) return null;
-            return (
-              <CollapsibleCommandGroup
-                key={cat}
-                category={cat}
-                vehicleId={vehicle.id}
-                count={cmds.length}
-              >
-                {cmds.map(cmd => renderTile(cmd))}
-              </CollapsibleCommandGroup>
-            );
-          })
-        )}
-      </div>
-
-      {/* Centralized command dialogs */}
-      {activeDialog?.kind === 'input' && (
-        <CommandInputDialog
-          open
-          onClose={closeDialog}
-          onSubmit={handleInputSubmit}
-          def={activeDialog.def}
-          vehicle={vehicle}
-          loading={isLoading}
-        />
-      )}
-      {activeDialog?.kind === 'select' && (
-        <CommandSelectDialog
-          open
-          onClose={closeDialog}
-          onSelect={handleSelectSubmit}
-          def={activeDialog.def}
-          loading={isLoading}
-        />
-      )}
-      {activeDialog?.kind === 'confirm' && (
-        <CommandConfirmDialog
-          open
-          onClose={closeDialog}
-          onConfirm={handleConfirmSubmit}
-          def={activeDialog.def}
-          loading={isLoading}
+    <Stack gap={4} data-testid="vehicle-command-center">
+      <CommandCenterHero
+        vehicle={vehicle}
+        state={state}
+        loading={stateQuery.isLoading}
+        error={stateQuery.error}
+        onRetry={() => void stateQuery.refetch()}
+      />
+
+      <VehicleFreshnessWarning timestamp={vehicle.updated_at} />
+
+      <CommandReadinessStrip
+        vehicle={vehicle}
+        state={state}
+        stateLoading={stateQuery.isLoading}
+        stateError={stateQuery.error}
+        pendingLabel={pendingLabel}
+        feedback={feedback}
+      />
+
+      <CommandWorkspace
+        vehicle={vehicle}
+        state={state}
+        latestCommands={latestCommands}
+        loading={commandPending}
+        onExecute={executeCommand}
+      />
+
+      <Grid cols={LOWER_GRID_COLUMNS} gap={4}>
+        <CommandSafetyPanel vehicleStatus={state?.state || vehicle.state} />
+        <RecentCommandActivity
+          entries={history}
+          loading={historyQuery.isLoading}
+          error={historyQuery.error}
+          onRetry={() => void historyQuery.refetch()}
         />
-      )}
-    </GlassPanel>
+      </Grid>
+    </Stack>
   );
 }
diff --git a/web/src/features/system/components/command-center/CommandCenterFallback.tsx b/web/src/features/system/components/command-center/CommandCenterFallback.tsx
new file mode 100644
index 0000000000..ada30031ae
--- /dev/null
+++ b/web/src/features/system/components/command-center/CommandCenterFallback.tsx
@@ -0,0 +1,135 @@
+import { useTranslation } from 'react-i18next';
+import { Car, Gauge, History, LayoutGrid } from 'lucide-react';
+import { GlassPanel, Heading } from '@/components/ui';
+import { Grid } from '@/components/layout';
+import { EmptyState, QueryError, Skeleton } from '@/components/feedback';
+import { CommandSafetyPanel } from './CommandSafetyPanel';
+
+export type CommandCenterFallbackStatus = 'loading' | 'error' | 'empty';
+
+interface CommandCenterFallbackProps {
+  status: CommandCenterFallbackStatus;
+  error?: unknown;
+  onRetry?: () => void;
+}
+
+const LOWER_GRID_COLUMNS = { default: 1, lg: 2 } as const;
+
+export function CommandCenterFallback({
+  status,
+  error,
+  onRetry,
+}: CommandCenterFallbackProps) {
+  const { t } = useTranslation();
+  const loading = status === 'loading';
+  const unavailableMessage =
+    status === 'error'
+      ? t(
+          'commands.fallback.unavailable',
+          'Vehicle controls are unavailable until fleet data can be loaded.',
+        )
+      : t(
+          'commands.connectFleet',
+          'Connect your Tesla account and sync your fleet to start sending commands.',
+        );
+
+  return (
+    <div className="space-y-4 sm:space-y-5" data-testid="command-center-fallback">
+      <GlassPanel className="p-4 sm:p-6">
+        <Heading level="section">
+          {t('commands.hero.title', 'Selected vehicle')}
+        </Heading>
+        {loading ? (
+          <div
+            role="status"
+            aria-label={t('commands.fallback.loadingFleet', 'Loading your fleet')}
+            className="mt-4 space-y-3"
+          >
+            <Skeleton height={32} width="45%" />
+            <Skeleton height={18} width="70%" />
+            <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+              {[1, 2, 3, 4].map((item) => (
+                <Skeleton key={item} height={82} />
+              ))}
+            </div>
+          </div>
+        ) : status === 'error' && error ? (
+          <div className="mt-4">
+            <QueryError
+              error={error}
+              onRetry={onRetry}
+              resourceName={t('commands.fallback.fleet', 'Vehicle fleet')}
+            />
+          </div>
+        ) : (
+          <EmptyState
+            icon={<Car className="h-8 w-8" aria-hidden="true" />}
+            title={t('commands.noVehicles', 'No vehicles found')}
+            message={unavailableMessage}
+            className="py-8"
+          />
+        )}
+      </GlassPanel>
+
+      <GlassPanel className="p-4 sm:p-5">
+        <Heading level="section">
+          {t('commands.readiness.title', 'Command readiness')}
+        </Heading>
+        {loading ? (
+          <div className="mt-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
+            {[1, 2, 3, 4].map((item) => (
+              <Skeleton key={item} height={72} />
+            ))}
+          </div>
+        ) : (
+          <EmptyState
+            icon={<Gauge className="h-8 w-8" aria-hidden="true" />}
+            message={unavailableMessage}
+            className="py-6"
+          />
+        )}
+      </GlassPanel>
+
+      <GlassPanel className="p-4 sm:p-5">
+        <Heading level="section">
+          {t('commands.workspace.title', 'Command workspace')}
+        </Heading>
+        {loading ? (
+          <div className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
+            {[1, 2, 3, 4].map((item) => (
+              <Skeleton key={item} height={112} />
+            ))}
+          </div>
+        ) : (
+          <EmptyState
+            icon={<LayoutGrid className="h-8 w-8" aria-hidden="true" />}
+            message={unavailableMessage}
+            className="py-8"
+          />
+        )}
+      </GlassPanel>
+
+      <Grid cols={LOWER_GRID_COLUMNS} gap={4}>
+        <CommandSafetyPanel />
+        <GlassPanel className="p-4 sm:p-5">
+          <Heading level="section">
+            {t('commands.activity.title', 'Recent command activity')}
+          </Heading>
+          {loading ? (
+            <div className="mt-4 space-y-3">
+              <Skeleton height={48} />
+              <Skeleton height={48} />
+              <Skeleton height={48} />
+            </div>
+          ) : (
+            <EmptyState
+              icon={<History className="h-8 w-8" aria-hidden="true" />}
+              message={unavailableMessage}
+              className="py-8"
+            />
+          )}
+        </GlassPanel>
+      </Grid>
+    </div>
+  );
+}
diff --git a/web/src/features/system/components/command-center/CommandCenterHero.tsx b/web/src/features/system/components/command-center/CommandCenterHero.tsx
new file mode 100644
index 0000000000..e2f264d299
--- /dev/null
+++ b/web/src/features/system/components/command-center/CommandCenterHero.tsx
@@ -0,0 +1,165 @@
+import { useTranslation } from 'react-i18next';
+import { Battery, Gauge, LockKeyhole, Thermometer } from 'lucide-react';
+import {
+  Badge,
+  Caption,
+  GlassPanel,
+  Heading,
+  StatusPill,
+} from '@/components/ui';
+import { MetricTile, FreshnessIndicator } from '@/components/data-display';
+import { EmptyState, QueryError, Skeleton } from '@/components/feedback';
+import { useUnits } from '@/hooks/useUnits';
+import { convertDistanceFromSI, convertTempFromSI } from '@/lib/unitConversion';
+import type { Vehicle, VehicleState } from '../../commands';
+
+interface CommandCenterHeroProps {
+  vehicle: Vehicle;
+  state: VehicleState | null;
+  loading: boolean;
+  error: unknown;
+  onRetry: () => void;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  online: 'bg-emerald-400',
+  driving: 'bg-cyan-400',
+  charging: 'bg-blue-400',
+  asleep: 'bg-amber-400',
+  offline: 'bg-red-400',
+};
+
+export function CommandCenterHero({
+  vehicle,
+  state,
+  loading,
+  error,
+  onRetry,
+}: CommandCenterHeroProps) {
+  const { t } = useTranslation();
+  const { unitPrefs } = useUnits();
+  const name =
+    vehicle.display_name?.trim() ||
+    vehicle.vin ||
+    t('commands.vehicle.fallbackName', 'Vehicle {{id}}', { id: vehicle.id });
+  const rawStatus = (state?.state || vehicle.state || 'offline').toLowerCase();
+  const statusLabel = t(
+    `commands.status.${rawStatus}`,
+    rawStatus.replace(/_/g, ' ').replace(/\b\w/g, (value) => value.toUpperCase()),
+  );
+
+  const battery = state?.battery_level != null ? state.battery_level : null;
+  const range =
+    state?.rated_range != null
+      ? convertDistanceFromSI(state.rated_range, unitPrefs.distance)
+      : null;
+  const cabinTemperature =
+    state?.inside_temp != null
+      ? convertTempFromSI(state.inside_temp, unitPrefs.temperature)
+      : null;
+  const lockState =
+    state?.is_locked == null
+      ? null
+      : state.is_locked
+        ? t('commands.readiness.locked', 'Locked')
+        : t('commands.readiness.unlocked', 'Unlocked');
+
+  return (
+    <GlassPanel
+      className="relative overflow-hidden p-4 sm:p-6"
+      data-testid="command-center-hero"
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-r from-cyan-500/10 via-transparent to-purple-500/10"
+      />
+      <div className="relative space-y-5">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div className="min-w-0 space-y-2">
+            <Badge variant="info" size="sm">
+              {t('commands.hero.selectedVehicle', 'Selected vehicle')}
+            </Badge>
+            <div>
+              <Heading level="page" as="h2" className="truncate">
+                {name}
+              </Heading>
+              <Caption className="mt-1 block break-all">
+                {[vehicle.model, vehicle.vin].filter(Boolean).join(' · ') || '—'}
+              </Caption>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <StatusPill
+              color={STATUS_COLORS[rawStatus] ?? 'bg-[var(--text-muted)]'}
+              pulse={rawStatus === 'online'}
+            >
+              {statusLabel}
+            </StatusPill>
+            <FreshnessIndicator timestamp={vehicle.updated_at} size="md" />
+          </div>
+        </div>
+
+        {error ? (
+          <QueryError
+            error={error}
+            onRetry={onRetry}
+            resourceName={t('commands.hero.vehicleState', 'Vehicle state')}
+          />
+        ) : loading ? (
+          <div
+            role="status"
+            aria-label={t('commands.hero.loadingState', 'Loading vehicle state')}
+            className="grid grid-cols-2 gap-3 lg:grid-cols-4"
+          >
+            {[1, 2, 3, 4].map((item) => (
+              <Skeleton key={item} height={82} className="rounded-xl" />
+            ))}
+          </div>
+        ) : state ? (
+          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+            <MetricTile
+              value={battery}
+              unit="%"
+              label={t('commands.hero.battery', 'Battery')}
+              accentClass="text-cyan-300"
+              sublabel={<Battery className="mx-auto h-3.5 w-3.5" aria-hidden="true" />}
+            />
+            <MetricTile
+              value={range}
+              decimals={0}
+              unit={unitPrefs.distance}
+              label={t('commands.hero.range', 'Estimated range')}
+              accentClass="text-emerald-300"
+              sublabel={<Gauge className="mx-auto h-3.5 w-3.5" aria-hidden="true" />}
+            />
+            <MetricTile
+              value={cabinTemperature}
+              decimals={0}
+              unit={unitPrefs.temperature}
+              label={t('commands.hero.cabin', 'Cabin')}
+              accentClass="text-amber-300"
+              sublabel={<Thermometer className="mx-auto h-3.5 w-3.5" aria-hidden="true" />}
+            />
+            <MetricTile
+              value={lockState}
+              label={t('commands.hero.access', 'Access state')}
+              accentClass="text-purple-300"
+              sublabel={<LockKeyhole className="mx-auto h-3.5 w-3.5" aria-hidden="true" />}
+            />
+          </div>
+        ) : (
+          <EmptyState
+            icon={<Gauge className="h-8 w-8" aria-hidden="true" />}
+            title={t('commands.hero.noTelemetryTitle', 'Live state unavailable')}
+            message={t(
+              'commands.hero.noTelemetry',
+              'Commands remain available, but state-dependent controls may not reflect the vehicle yet.',
+            )}
+            className="py-6"
+          />
+        )}
+      </div>
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/system/components/command-center/CommandDialogs.tsx b/web/src/features/system/components/command-center/CommandDialogs.tsx
new file mode 100644
index 0000000000..2a31ef9d02
--- /dev/null
+++ b/web/src/features/system/components/command-center/CommandDialogs.tsx
@@ -0,0 +1,99 @@
+import { useCallback } from 'react';
+import type { CommandDef, Vehicle } from '../../commands';
+import { CommandConfirmDialog } from '../CommandConfirmDialog';
+import { CommandInputDialog } from '../CommandInputDialog';
+import { CommandSelectDialog } from '../CommandSelectDialog';
+
+export interface ActiveCommandDialog {
+  kind: 'input' | 'select' | 'confirm';
+  definition: CommandDef;
+}
+
+interface CommandDialogsProps {
+  active: ActiveCommandDialog | null;
+  vehicle: Vehicle;
+  loading: boolean;
+  onClose: () => void;
+  onExecute: (command: string, params?: Record<string, unknown>) => void;
+}
+
+export function CommandDialogs({
+  active,
+  vehicle,
+  loading,
+  onClose,
+  onExecute,
+}: CommandDialogsProps) {
+  const handleInputSubmit = useCallback((values: Record<string, string>) => {
+    const definition = active?.definition;
+    const config = definition?.inputConfig;
+    if (!definition || !config) return;
+
+    const params = config.buildParams
+      ? config.buildParams(values)
+      : {
+          ...definition.params,
+          [config.paramName]: config.transform
+            ? config.transform(values[config.paramName] ?? '')
+            : values[config.paramName] ?? '',
+        };
+
+    onExecute(definition.command, params);
+    onClose();
+  }, [active, onClose, onExecute]);
+
+  const handleSelect = useCallback((value: string) => {
+    const definition = active?.definition;
+    const config = definition?.selectConfig;
+    if (!definition || !config) return;
+
+    onExecute(definition.command, {
+      ...definition.params,
+      [config.paramName]: value,
+    });
+    onClose();
+  }, [active, onClose, onExecute]);
+
+  const handleConfirm = useCallback(() => {
+    if (!active) return;
+    onExecute(active.definition.command, active.definition.params);
+    onClose();
+  }, [active, onClose, onExecute]);
+
+  if (!active) return null;
+
+  if (active.kind === 'input') {
+    return (
+      <CommandInputDialog
+        open
+        onClose={onClose}
+        onSubmit={handleInputSubmit}
+        def={active.definition}
+        vehicle={{ display_name: vehicle.display_name || vehicle.vin }}
+        loading={loading}
+      />
+    );
+  }
+
+  if (active.kind === 'select') {
+    return (
+      <CommandSelectDialog
+        open
+        onClose={onClose}
+        onSelect={handleSelect}
+        def={active.definition}
+        loading={loading}
+      />
+    );
+  }
+
+  return (
+    <CommandConfirmDialog
+      open
+      onClose={onClose}
+      onConfirm={handleConfirm}
+      def={active.definition}
+      loading={loading}
+    />
+  );
+}
diff --git a/web/src/features/system/components/command-center/CommandDomainBrowser.tsx b/web/src/features/system/components/command-center/CommandDomainBrowser.tsx
new file mode 100644
index 0000000000..d474bd9017
--- /dev/null
+++ b/web/src/features/system/components/command-center/CommandDomainBrowser.tsx
@@ -0,0 +1,117 @@
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Badge, Button, Heading, Text } from '@/components/ui';
+import { cn } from '@/lib/cn';
+import {
+  COMMANDS,
+  type CommandCategory,
+  type CommandDef,
+} from '../../commands';
+import { CollapsibleCommandGroup } from '../CollapsibleCommandGroup';
+import {
+  COMMAND_DOMAINS,
+  type CommandDomainId,
+} from './commandDomains';
+
+interface CommandDomainBrowserProps {
+  activeDomainId: CommandDomainId;
+  vehicleKey: number;
+  onDomainChange: (domain: CommandDomainId) => void;
+  renderTile: (definition: CommandDef) => ReactNode;
+}
+
+const COMMANDS_BY_CATEGORY = new Map<CommandCategory, CommandDef[]>();
+for (const command of COMMANDS) {
+  const categoryCommands = COMMANDS_BY_CATEGORY.get(command.category) ?? [];
+  categoryCommands.push(command);
+  COMMANDS_BY_CATEGORY.set(command.category, categoryCommands);
+}
+
+export function CommandDomainBrowser({
+  activeDomainId,
+  vehicleKey,
+  onDomainChange,
+  renderTile,
+}: CommandDomainBrowserProps) {
+  const { t } = useTranslation();
+  const activeDomain =
+    COMMAND_DOMAINS.find((domain) => domain.id === activeDomainId) ??
+    COMMAND_DOMAINS[0];
+  const activeCount = activeDomain.categories.reduce(
+    (total, category) => total + (COMMANDS_BY_CATEGORY.get(category)?.length ?? 0),
+    0,
+  );
+
+  return (
+    <div className="space-y-4">
+      <div
+        role="tablist"
+        aria-label={t('commands.domain.aria', 'Command domains')}
+        className="grid grid-cols-2 gap-2 xl:grid-cols-4"
+      >
+        {COMMAND_DOMAINS.map((domain) => {
+          const Icon = domain.icon;
+          const selected = domain.id === activeDomain.id;
+          return (
+            <Button
+              key={domain.id}
+              type="button"
+              role="tab"
+              size="lg"
+              variant={selected ? 'secondary' : 'ghost'}
+              aria-selected={selected}
+              aria-controls={`command-domain-${domain.id}`}
+              onClick={() => onDomainChange(domain.id)}
+              className={cn(
+                'h-auto min-h-12 justify-start px-3 text-left',
+                selected && 'border-cyan-400/30 bg-cyan-500/10',
+              )}
+            >
+              <Icon className="h-4 w-4 shrink-0" aria-hidden="true" />
+              <Text size="xs" weight="semibold">
+                {t(domain.labelKey, domain.labelFallback)}
+              </Text>
+            </Button>
+          );
+        })}
+      </div>
+
+      <div
+        id={`command-domain-${activeDomain.id}`}
+        role="tabpanel"
+        className="space-y-3 rounded-xl border border-[var(--border-subtle)] bg-white/[0.02] p-3 sm:p-4"
+      >
+        <div className="flex flex-col gap-1 border-b border-[var(--border-subtle)] pb-3 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <Heading level="panel">
+              {t(activeDomain.labelKey, activeDomain.labelFallback)}
+            </Heading>
+            <Text as="p" size="xs" color="muted" className="mt-1">
+              {t(activeDomain.descriptionKey, activeDomain.descriptionFallback)}
+            </Text>
+          </div>
+          <Badge variant="info" className="self-start">
+            {t('commands.workspace.domainCount', '{{count}} actions', {
+              count: activeCount,
+            })}
+          </Badge>
+        </div>
+
+        {activeDomain.categories.map((category, index) => {
+          const commands = COMMANDS_BY_CATEGORY.get(category) ?? [];
+          return (
+            <CollapsibleCommandGroup
+              key={category}
+              category={category}
+              vehicleKey={vehicleKey}
+              count={commands.length}
+              defaultOpen={index === 0}
+            >
+              {commands.map(renderTile)}
+            </CollapsibleCommandGroup>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/features/system/components/command-center/CommandReadinessStrip.tsx b/web/src/features/system/components/command-center/CommandReadinessStrip.tsx
new file mode 100644
index 0000000000..8cacbc4e30
--- /dev/null
+++ b/web/src/features/system/components/command-center/CommandReadinessStrip.tsx
@@ -0,0 +1,154 @@
+import { useTranslation } from 'react-i18next';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  LoaderCircle,
+  Radio,
+} from 'lucide-react';
+import { GlassPanel, Heading, Text } from '@/components/ui';
+import { MetricTile, useIsStale } from '@/components/data-display';
+import { InlineCallout } from '@/components/feedback';
+import type { Vehicle, VehicleState } from '../../commands';
+import type { CommandExecutionFeedback } from './types';
+
+interface CommandReadinessStripProps {
+  vehicle: Vehicle;
+  state: VehicleState | null;
+  stateLoading: boolean;
+  stateError: unknown;
+  pendingLabel: string | null;
+  feedback: CommandExecutionFeedback | null;
+}
+
+export function CommandReadinessStrip({
+  vehicle,
+  state,
+  stateLoading,
+  stateError,
+  pendingLabel,
+  feedback,
+}: CommandReadinessStripProps) {
+  const { t } = useTranslation();
+  const { isStale, ageLabel } = useIsStale(vehicle.updated_at);
+  const rawStatus = (state?.state || vehicle.state || 'offline').toLowerCase();
+  const asleep = rawStatus === 'asleep';
+  const offline = rawStatus === 'offline';
+  const moving = state?.speed != null ? Math.abs(state.speed) > 0 : null;
+
+  const connection = t(
+    `commands.status.${rawStatus}`,
+    rawStatus.replace(/_/g, ' ').replace(/\b\w/g, (value) => value.toUpperCase()),
+  );
+  const availability = stateLoading
+    ? t('commands.readiness.checking', 'Checking')
+    : stateError
+      ? t('commands.readiness.stateUnknown', 'State unknown')
+      : offline
+        ? t('commands.readiness.deliveryUncertain', 'Delivery uncertain')
+        : asleep
+          ? t('commands.readiness.wakeRecommended', 'Wake recommended')
+          : t('commands.readiness.ready', 'Ready');
+  const motion = moving == null
+    ? t('commands.readiness.motionUnknown', 'Motion unknown')
+    : moving
+      ? t('commands.readiness.moving', 'Vehicle moving')
+      : t('commands.readiness.stationary', 'No motion reported');
+  const freshness = !vehicle.updated_at
+    ? t('commands.readiness.freshnessUnknown', 'Unknown')
+    : isStale
+      ? t('commands.readiness.outdated', 'Outdated')
+      : t('commands.readiness.current', 'Current');
+
+  return (
+    <GlassPanel
+      className="space-y-4 p-4 sm:p-5"
+      data-testid="command-readiness"
+    >
+      <div>
+        <Heading level="section">
+          {t('commands.readiness.title', 'Command readiness')}
+        </Heading>
+        <Text as="p" variant="bodySm" className="mt-1">
+          {t(
+            'commands.readiness.description',
+            'Connection, telemetry, and motion context before a remote request is sent.',
+          )}
+        </Text>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <MetricTile
+          value={connection}
+          label={t('commands.readiness.connection', 'Connection')}
+          align="start"
+        />
+        <MetricTile
+          value={availability}
+          label={t('commands.readiness.availability', 'Command delivery')}
+          align="start"
+        />
+        <MetricTile
+          value={motion}
+          label={t('commands.readiness.motion', 'Motion context')}
+          align="start"
+        />
+        <MetricTile
+          value={freshness}
+          label={t('commands.readiness.telemetry', 'Telemetry')}
+          sublabel={vehicle.updated_at ? ageLabel : '—'}
+          align="start"
+        />
+      </div>
+
+      {(asleep || offline) && (
+        <InlineCallout
+          variant="warning"
+          icon={<Radio className="h-4 w-4" aria-hidden="true" />}
+        >
+          {asleep
+            ? t(
+                'commands.readiness.asleepHelp',
+                'The vehicle is asleep. Commands remain selectable; waking it first can improve delivery speed.',
+              )
+            : t(
+                'commands.readiness.offlineHelp',
+                'The vehicle reports offline. Commands remain selectable, but delivery may fail until connectivity returns.',
+              )}
+        </InlineCallout>
+      )}
+
+      <div aria-live="polite" aria-atomic="true">
+        {pendingLabel ? (
+          <InlineCallout
+            variant="info"
+            icon={<LoaderCircle className="h-4 w-4 animate-spin" aria-hidden="true" />}
+            testId="command-pending-feedback"
+          >
+            {t('commands.feedback.pending', 'Sending {{command}}…', {
+              command: pendingLabel,
+            })}
+          </InlineCallout>
+        ) : feedback ? (
+          <InlineCallout
+            variant={feedback.success ? 'success' : 'danger'}
+            icon={
+              feedback.success
+                ? <CheckCircle2 className="h-4 w-4" aria-hidden="true" />
+                : <AlertTriangle className="h-4 w-4" aria-hidden="true" />
+            }
+            testId="command-result-feedback"
+          >
+            {feedback.message}
+          </InlineCallout>
+        ) : (
+          <Text as="p" size="xs" color="muted">
+            {t(
+              'commands.feedback.idle',
+              'No command is currently running. Results will appear here.',
+            )}
+          </Text>
+        )}
+      </div>
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/system/components/command-center/CommandSafetyPanel.tsx b/web/src/features/system/components/command-center/CommandSafetyPanel.tsx
new file mode 100644
index 0000000000..c6aaca6d81
--- /dev/null
+++ b/web/src/features/system/components/command-center/CommandSafetyPanel.tsx
@@ -0,0 +1,82 @@
+import { useTranslation } from 'react-i18next';
+import { CircleAlert, Eye, ShieldCheck } from 'lucide-react';
+import { GlassPanel, Heading, Text } from '@/components/ui';
+
+interface CommandSafetyPanelProps {
+  vehicleStatus?: string | null;
+}
+
+export function CommandSafetyPanel({
+  vehicleStatus,
+}: CommandSafetyPanelProps) {
+  const { t } = useTranslation();
+  const asleepOrOffline =
+    vehicleStatus === 'asleep' || vehicleStatus === 'offline';
+
+  const guidance = [
+    {
+      icon: CircleAlert,
+      title: t('commands.safety.requestTitle', 'A request is not physical proof'),
+      body: t(
+        'commands.safety.requestBody',
+        'Confirm the resulting vehicle state after access, charging, or drive-sensitive actions.',
+      ),
+    },
+    {
+      icon: ShieldCheck,
+      title: t('commands.safety.confirmTitle', 'Sensitive actions add friction'),
+      body: t(
+        'commands.safety.confirmBody',
+        'High-impact commands require confirmation, a countdown, or typed acknowledgement.',
+      ),
+    },
+    {
+      icon: Eye,
+      title: t('commands.safety.contextTitle', 'Check the surroundings'),
+      body: asleepOrOffline
+        ? t(
+            'commands.safety.contextDisconnected',
+            'Current vehicle context may be unavailable while it is asleep or offline.',
+          )
+        : t(
+            'commands.safety.contextBody',
+            'Verify the vehicle is parked and clear before opening panels or enabling drive access.',
+          ),
+    },
+  ];
+
+  return (
+    <GlassPanel className="h-full p-4 sm:p-5" data-testid="command-safety">
+      <Heading level="section">
+        {t('commands.safety.title', 'Safety & execution')}
+      </Heading>
+      <Text as="p" variant="bodySm" className="mt-1">
+        {t(
+          'commands.safety.description',
+          'Remote commands can affect a physical vehicle. Review context before acting.',
+        )}
+      </Text>
+
+      <div className="mt-4 space-y-3">
+        {guidance.map(({ icon: Icon, title, body }) => (
+          <div
+            key={title}
+            className="flex gap-3 rounded-xl border border-[var(--border-subtle)] bg-white/[0.02] p-3"
+          >
+            <div className="mt-0.5 rounded-lg bg-amber-500/10 p-2 text-amber-300">
+              <Icon className="h-4 w-4" aria-hidden="true" />
+            </div>
+            <div>
+              <Text as="p" size="sm" weight="semibold" color="primary">
+                {title}
+              </Text>
+              <Text as="p" size="xs" color="muted" className="mt-0.5">
+                {body}
+              </Text>
+            </div>
+          </div>
+        ))}
+      </div>
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/system/components/command-center/CommandWorkspace.tsx b/web/src/features/system/components/command-center/CommandWorkspace.tsx
new file mode 100644
index 0000000000..a6148d5e82
--- /dev/null
+++ b/web/src/features/system/components/command-center/CommandWorkspace.tsx
@@ -0,0 +1,192 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SearchX } from 'lucide-react';
+import { Badge, GlassPanel, Heading, Text } from '@/components/ui';
+import { EmptyState } from '@/components/feedback';
+import type { CommandLogEntry } from '@/api/hooks/useCommands';
+import {
+  CATEGORY_META,
+  COMMANDS,
+  type CommandDef,
+  type Vehicle,
+  type VehicleState,
+} from '../../commands';
+import { CommandSearch } from '../CommandSearch';
+import { CommandTile } from '../CommandTile';
+import { FavoritesBar } from '../FavoritesBar';
+import { InputCommandTile } from '../InputCommandTile';
+import { ToggleCommandTile } from '../ToggleCommandTile';
+import { CommandDialogs, type ActiveCommandDialog } from './CommandDialogs';
+import { CommandDomainBrowser } from './CommandDomainBrowser';
+import type { CommandDomainId } from './commandDomains';
+import { getLatestCommandStatus } from './commandLabels';
+import { useCommandFavorites } from './useCommandFavorites';
+
+interface CommandWorkspaceProps {
+  vehicle: Vehicle;
+  state: VehicleState | null;
+  latestCommands: CommandLogEntry[];
+  loading: boolean;
+  onExecute: (command: string, params?: Record<string, unknown>) => void;
+}
+
+export function CommandWorkspace({
+  vehicle,
+  state,
+  latestCommands,
+  loading,
+  onExecute,
+}: CommandWorkspaceProps) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState('');
+  const [activeDomainId, setActiveDomainId] = useState<CommandDomainId>('access');
+  const [activeDialog, setActiveDialog] = useState<ActiveCommandDialog | null>(null);
+  const { favorites, toggleFavorite } = useCommandFavorites(vehicle.id);
+
+  const latestByCommand = useMemo(
+    () => new Map((latestCommands ?? []).map((entry) => [entry.command, entry])),
+    [latestCommands],
+  );
+
+  const filteredCommands = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return null;
+    return COMMANDS.filter((command) => {
+      const category = CATEGORY_META[command.category];
+      return (
+        t(command.labelKey, command.labelFallback).toLowerCase().includes(query) ||
+        t(category.labelKey, category.fallback).toLowerCase().includes(query) ||
+        command.command.toLowerCase().includes(query)
+      );
+    });
+  }, [search, t]);
+
+  const requestDialog = useCallback((definition: CommandDef) => {
+    const kind = definition.selectConfig
+      ? 'select'
+      : definition.inputConfig
+        ? 'input'
+        : 'confirm';
+    setActiveDialog({ kind, definition });
+  }, []);
+
+  const renderTile = useCallback((definition: CommandDef) => {
+    const latest =
+      latestByCommand.get(definition.command) ??
+      (definition.commandOff
+        ? latestByCommand.get(definition.commandOff)
+        : undefined);
+    const common = {
+      loading,
+      lastStatus: getLatestCommandStatus(latest),
+      isFavorite: favorites.includes(definition.id),
+      onToggleFavorite: () => toggleFavorite(definition.id),
+      onRequestDialog: requestDialog,
+    };
+
+    if (definition.type === 'toggle') {
+      return (
+        <ToggleCommandTile
+          key={definition.id}
+          {...common}
+          def={definition}
+          state={state}
+          onExecute={onExecute}
+        />
+      );
+    }
+    if (definition.type === 'input') {
+      return <InputCommandTile key={definition.id} {...common} def={definition} />;
+    }
+    return (
+      <CommandTile
+        key={definition.id}
+        {...common}
+        def={definition}
+        onExecute={onExecute}
+      />
+    );
+  }, [
+    favorites,
+    latestByCommand,
+    loading,
+    onExecute,
+    requestDialog,
+    state,
+    toggleFavorite,
+  ]);
+
+  return (
+    <>
+      <GlassPanel className="space-y-5 p-4 sm:p-5" data-testid="command-workspace">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+          <div className="space-y-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <Heading level="section">
+                {t('commands.workspace.title', 'Command workspace')}
+              </Heading>
+              <Badge variant="neutral">
+                {t('commands.workspace.count', '{{count}} actions', {
+                  count: COMMANDS.length,
+                })}
+              </Badge>
+            </div>
+            <Text as="p" variant="bodySm">
+              {t(
+                'commands.workspace.description',
+                'Find an action by domain or search the complete command catalogue.',
+              )}
+            </Text>
+          </div>
+          <div className="w-full lg:max-w-sm">
+            <CommandSearch value={search} onChange={setSearch} />
+          </div>
+        </div>
+
+        {!filteredCommands && (
+          <FavoritesBar
+            favorites={favorites}
+            commands={COMMANDS}
+            renderTile={renderTile}
+          />
+        )}
+
+        {filteredCommands ? (
+          filteredCommands.length > 0 ? (
+            <div
+              className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4"
+              aria-label={t('commands.search.results', 'Command search results')}
+            >
+              {filteredCommands.map(renderTile)}
+            </div>
+          ) : (
+            <EmptyState
+              icon={<SearchX className="h-8 w-8" aria-hidden="true" />}
+              title={t('commands.search.emptyTitle', 'No matching commands')}
+              message={t(
+                'commands.search.noResults',
+                'No commands match your search',
+              )}
+              className="py-8"
+            />
+          )
+        ) : (
+          <CommandDomainBrowser
+            activeDomainId={activeDomainId}
+            vehicleKey={vehicle.id}
+            onDomainChange={setActiveDomainId}
+            renderTile={renderTile}
+          />
+        )}
+      </GlassPanel>
+
+      <CommandDialogs
+        active={activeDialog}
+        vehicle={vehicle}
+        loading={loading}
+        onClose={() => setActiveDialog(null)}
+        onExecute={onExecute}
+      />
+    </>
+  );
+}
diff --git a/web/src/features/system/components/command-center/RecentCommandActivity.tsx b/web/src/features/system/components/command-center/RecentCommandActivity.tsx
new file mode 100644
index 0000000000..c17e70dbfa
--- /dev/null
+++ b/web/src/features/system/components/command-center/RecentCommandActivity.tsx
@@ -0,0 +1,126 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import {
+  CheckCircle2,
+  CircleEllipsis,
+  History,
+  XCircle,
+} from 'lucide-react';
+import { Badge, Button, GlassPanel, Heading, Text } from '@/components/ui';
+import { Timeline, type TimelineItemData } from '@/components/data-display';
+import { EmptyState, QueryError, Skeleton } from '@/components/feedback';
+import type { CommandLogEntry } from '@/api/hooks/useCommands';
+import { formatRelative } from '@/lib/dateFormat';
+import { getCommandLabel } from './commandLabels';
+
+interface RecentCommandActivityProps {
+  entries: CommandLogEntry[];
+  loading: boolean;
+  error: unknown;
+  onRetry: () => void;
+}
+
+export function RecentCommandActivity({
+  entries,
+  loading,
+  error,
+  onRetry,
+}: RecentCommandActivityProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const recent = entries.slice(0, 5);
+
+  const timelineItems = useMemo<TimelineItemData[]>(
+    () => recent.map((entry) => {
+      const success = entry.status === 'success';
+      const failed = entry.status === 'failed';
+      const status = success
+        ? t('commands.activity.succeeded', 'Succeeded')
+        : failed
+          ? t('commands.activity.failed', 'Failed')
+          : t('commands.activity.pending', 'Pending');
+      const subtitle = failed && entry.error
+        ? t('commands.activity.failedReason', '{{status}} · {{reason}}', {
+            status,
+            reason: entry.error,
+          })
+        : status;
+
+      return {
+        icon: success
+          ? <CheckCircle2 className="h-3.5 w-3.5" />
+          : failed
+            ? <XCircle className="h-3.5 w-3.5" />
+            : <CircleEllipsis className="h-3.5 w-3.5" />,
+        title: getCommandLabel(entry.command, t),
+        subtitle,
+        time: formatRelative(entry.created_at),
+        color: success ? '#22c55e' : failed ? '#ef4444' : '#f59e0b',
+      };
+    }),
+    [recent, t],
+  );
+
+  return (
+    <GlassPanel className="h-full p-4 sm:p-5" data-testid="command-activity">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <Heading level="section">
+            {t('commands.activity.title', 'Recent command activity')}
+          </Heading>
+          <Text as="p" variant="bodySm" className="mt-1">
+            {t(
+              'commands.activity.description',
+              'Latest delivery outcomes for the selected vehicle.',
+            )}
+          </Text>
+        </div>
+        <Badge variant="neutral">{entries.length}</Badge>
+      </div>
+
+      <div className="mt-4">
+        {error ? (
+          <QueryError
+            error={error}
+            onRetry={onRetry}
+            resourceName={t('commands.activity.resource', 'Command activity')}
+          />
+        ) : loading ? (
+          <div
+            role="status"
+            aria-label={t('commands.activity.loading', 'Loading command activity')}
+            className="space-y-3"
+          >
+            <Skeleton height={48} />
+            <Skeleton height={48} />
+            <Skeleton height={48} />
+          </div>
+        ) : recent.length > 0 ? (
+          <Timeline items={timelineItems} />
+        ) : (
+          <EmptyState
+            icon={<History className="h-8 w-8" aria-hidden="true" />}
+            title={t('commands.activity.emptyTitle', 'No commands sent yet')}
+            message={t(
+              'commands.activity.empty',
+              'Command outcomes will appear here after the first request.',
+            )}
+            className="py-6"
+          />
+        )}
+      </div>
+
+      <Button
+        type="button"
+        variant="ghost"
+        size="lg"
+        className="mt-3 w-full"
+        icon={<History className="h-4 w-4" aria-hidden="true" />}
+        onClick={() => navigate('/command-history')}
+      >
+        {t('commands.viewHistory', 'View history')}
+      </Button>
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/system/components/command-center/VehicleFreshnessWarning.tsx b/web/src/features/system/components/command-center/VehicleFreshnessWarning.tsx
new file mode 100644
index 0000000000..12142df4f6
--- /dev/null
+++ b/web/src/features/system/components/command-center/VehicleFreshnessWarning.tsx
@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+import { Clock3 } from 'lucide-react';
+import { useIsStale } from '@/components/data-display';
+import { AlertBanner } from '@/components/feedback';
+
+interface VehicleFreshnessWarningProps {
+  timestamp: string | null | undefined;
+}
+
+/**
+ * The command center's single canonical stale-telemetry warning.
+ * Keep freshness warning copy here so no vehicle/domain section can create a
+ * second rendering path.
+ */
+export function VehicleFreshnessWarning({
+  timestamp,
+}: VehicleFreshnessWarningProps) {
+  const { t } = useTranslation();
+  const { isStale, ageLabel } = useIsStale(timestamp);
+
+  if (!isStale) return null;
+
+  return (
+    <AlertBanner
+      variant="warning"
+      icon={<Clock3 className="h-4 w-4" aria-hidden="true" />}
+      title={t('commands.freshness.title', 'Telemetry may be outdated')}
+      data-testid="command-freshness-warning"
+      role="status"
+    >
+      {t(
+        'commands.freshness.message',
+        'Last vehicle update: {{age}}. Verify the car is awake and reachable before sending a safety-sensitive command.',
+        { age: ageLabel },
+      )}
+    </AlertBanner>
+  );
+}
diff --git a/web/src/features/system/components/command-center/commandDomains.test.ts b/web/src/features/system/components/command-center/commandDomains.test.ts
new file mode 100644
index 0000000000..ab48e6e7d1
--- /dev/null
+++ b/web/src/features/system/components/command-center/commandDomains.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { CATEGORY_ORDER, COMMANDS } from '../../commands';
+import { COMMAND_DOMAINS } from './commandDomains';
+
+describe('COMMAND_DOMAINS', () => {
+  it('covers every command category exactly once', () => {
+    const categories = COMMAND_DOMAINS.flatMap((domain) => domain.categories);
+
+    expect(categories).toHaveLength(CATEGORY_ORDER.length);
+    expect(new Set(categories).size).toBe(categories.length);
+    expect([...categories].sort()).toEqual([...CATEGORY_ORDER].sort());
+  });
+
+  it('keeps every configured command reachable through one domain', () => {
+    const categories = new Set(
+      COMMAND_DOMAINS.flatMap((domain) => domain.categories),
+    );
+
+    expect(COMMANDS).toHaveLength(67);
+    for (const command of COMMANDS) {
+      expect(categories.has(command.category)).toBe(true);
+    }
+  });
+});
diff --git a/web/src/features/system/components/command-center/commandDomains.ts b/web/src/features/system/components/command-center/commandDomains.ts
new file mode 100644
index 0000000000..98c1266459
--- /dev/null
+++ b/web/src/features/system/components/command-center/commandDomains.ts
@@ -0,0 +1,66 @@
+import {
+  BatteryCharging,
+  CarFront,
+  ShieldCheck,
+  ThermometerSun,
+  type LucideIcon,
+} from 'lucide-react';
+import type { CommandCategory } from '../../commands';
+
+export type CommandDomainId = 'access' | 'comfort' | 'charging' | 'vehicle';
+
+export interface CommandDomain {
+  id: CommandDomainId;
+  labelKey: string;
+  labelFallback: string;
+  descriptionKey: string;
+  descriptionFallback: string;
+  icon: LucideIcon;
+  categories: readonly CommandCategory[];
+}
+
+/**
+ * The command catalogue has intentionally granular Tesla-facing categories.
+ * The operator workspace groups those categories into four scan-friendly
+ * domains without removing or renaming any command.
+ */
+export const COMMAND_DOMAINS: readonly CommandDomain[] = [
+  {
+    id: 'access',
+    labelKey: 'commands.domain.access.title',
+    labelFallback: 'Access & Security',
+    descriptionKey: 'commands.domain.access.description',
+    descriptionFallback: 'Locks, security modes, openings, and drive authorization.',
+    icon: ShieldCheck,
+    categories: ['security', 'doors', 'drive', 'windows', 'sunroof'],
+  },
+  {
+    id: 'comfort',
+    labelKey: 'commands.domain.comfort.title',
+    labelFallback: 'Climate & Comfort',
+    descriptionKey: 'commands.domain.comfort.description',
+    descriptionFallback: 'Cabin temperature, seats, steering heat, and protection modes.',
+    icon: ThermometerSun,
+    categories: ['climate', 'climate_protection'],
+  },
+  {
+    id: 'charging',
+    labelKey: 'commands.domain.charging.title',
+    labelFallback: 'Charging & Schedules',
+    descriptionKey: 'commands.domain.charging.description',
+    descriptionFallback: 'Charge controls, limits, and recurring vehicle schedules.',
+    icon: BatteryCharging,
+    categories: ['charging', 'schedules'],
+  },
+  {
+    id: 'vehicle',
+    labelKey: 'commands.domain.vehicle.title',
+    labelFallback: 'Vehicle Controls',
+    descriptionKey: 'commands.domain.vehicle.description',
+    descriptionFallback: 'Location, navigation, software, identity, and media controls.',
+    icon: CarFront,
+    categories: ['alerts', 'navigation', 'software', 'vehicle', 'media'],
+  },
+] as const;
+
+export const COMMAND_STATE_REFRESH_MS = 15_000;
diff --git a/web/src/features/system/components/command-center/commandLabels.ts b/web/src/features/system/components/command-center/commandLabels.ts
new file mode 100644
index 0000000000..56d29cee1f
--- /dev/null
+++ b/web/src/features/system/components/command-center/commandLabels.ts
@@ -0,0 +1,47 @@
+import { formatRelative } from '@/lib/dateFormat';
+import type { CommandLogEntry } from '@/api/hooks/useCommands';
+import { COMMANDS, type CommandDef } from '../../commands';
+
+export type CommandTranslate = (
+  key: string,
+  fallback: string,
+  options?: Record<string, unknown>,
+) => string;
+
+const COMMAND_BY_WIRE_NAME = new Map<string, CommandDef>();
+
+for (const definition of COMMANDS) {
+  COMMAND_BY_WIRE_NAME.set(definition.command, definition);
+  if (definition.commandOff) {
+    COMMAND_BY_WIRE_NAME.set(definition.commandOff, definition);
+  }
+}
+
+export function getCommandDefinition(command: string): CommandDef | undefined {
+  return COMMAND_BY_WIRE_NAME.get(command);
+}
+
+export function getCommandLabel(command: string, t: CommandTranslate): string {
+  const definition = getCommandDefinition(command);
+  if (definition && definition.command === command) {
+    return t(definition.labelKey, definition.labelFallback);
+  }
+
+  const humanized = command
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (character) => character.toUpperCase());
+
+  if (definition?.commandOff === command) {
+    return t(`commands.activity.commands.${command}`, humanized);
+  }
+
+  return t('commands.activity.unknownCommand', '{{command}}', {
+    command: humanized || '—',
+  });
+}
+
+export function getLatestCommandStatus(entry: CommandLogEntry | undefined): string | undefined {
+  if (!entry) return undefined;
+  const marker = entry.status === 'success' ? '✓' : '✗';
+  return `${marker} ${formatRelative(entry.created_at)}`;
+}
diff --git a/web/src/features/system/components/command-center/index.ts b/web/src/features/system/components/command-center/index.ts
new file mode 100644
index 0000000000..6fa054dc17
--- /dev/null
+++ b/web/src/features/system/components/command-center/index.ts
@@ -0,0 +1,6 @@
+export { VehicleCommandCenter } from '../VehicleCommandCenter';
+export {
+  CommandCenterFallback,
+  type CommandCenterFallbackStatus,
+} from './CommandCenterFallback';
+export { COMMAND_DOMAINS, COMMAND_STATE_REFRESH_MS } from './commandDomains';
diff --git a/web/src/features/system/components/command-center/types.ts b/web/src/features/system/components/command-center/types.ts
new file mode 100644
index 0000000000..fe8f08a768
--- /dev/null
+++ b/web/src/features/system/components/command-center/types.ts
@@ -0,0 +1,5 @@
+export interface CommandExecutionFeedback {
+  command: string;
+  success: boolean;
+  message: string;
+}
diff --git a/web/src/features/system/components/command-center/useCommandFavorites.ts b/web/src/features/system/components/command-center/useCommandFavorites.ts
new file mode 100644
index 0000000000..4e00c30d08
--- /dev/null
+++ b/web/src/features/system/components/command-center/useCommandFavorites.ts
@@ -0,0 +1,43 @@
+import { useCallback, useState } from 'react';
+import { COMMANDS } from '../../commands';
+
+function defaultFavorites(): string[] {
+  return COMMANDS.filter((command) => command.defaultFavorite).map((command) => command.id);
+}
+
+function readFavorites(vehicleId: number): string[] {
+  try {
+    const stored = localStorage.getItem(`teslasync-cmd-favorites-${vehicleId}`);
+    if (!stored) return defaultFavorites();
+    const parsed: unknown = JSON.parse(stored);
+    return Array.isArray(parsed)
+      ? parsed.filter((value): value is string => typeof value === 'string')
+      : defaultFavorites();
+  } catch {
+    return defaultFavorites();
+  }
+}
+
+export function useCommandFavorites(vehicleId: number) {
+  const [favorites, setFavorites] = useState<string[]>(() => readFavorites(vehicleId));
+
+  const toggleFavorite = useCallback((commandId: string) => {
+    setFavorites((current) => {
+      const next = current.includes(commandId)
+        ? current.filter((id) => id !== commandId)
+        : [...current, commandId];
+      try {
+        localStorage.setItem(
+          `teslasync-cmd-favorites-${vehicleId}`,
+          JSON.stringify(next),
+        );
+      } catch {
+        // Storage can be unavailable in private mode. The in-memory state still
+        // provides a fully usable favorite control for the current session.
+      }
+      return next;
+    });
+  }, [vehicleId]);
+
+  return { favorites, toggleFavorite };
+}
diff --git a/web/src/features/system/pages/CommandsPage.test.tsx b/web/src/features/system/pages/CommandsPage.test.tsx
index eb70fcf5aa..d6cbd66d46 100644
--- a/web/src/features/system/pages/CommandsPage.test.tsx
+++ b/web/src/features/system/pages/CommandsPage.test.tsx
@@ -1,364 +1,257 @@
-/**
- * CommandsPage contract + hardening tests.
- *
- * CommandsPage is an orchestration shell: it owns two TanStack queries
- * (`/vehicles` roster + a fanned-out `/vehicles/{id}/state` poll), derives the
- * online/asleep KPI split, and renders one `VehicleCommandCenter` per vehicle.
- * The command-center child is a heavy, query-and-dialog-laden component, so it
- * is mocked with a prop-capturing stub — that isolates the page's own
- * behaviour (KPI band, header badge/actions, per-section loading/empty/error
- * states, state threading, navigation) without mounting the whole command
- * subtree.
- *
- * Facets covered:
- *   1. Loading   — roster pending → skeletons, no KPI labels, heading present.
- *   2. Empty     — zero vehicles → onboarding empty state + Vehicles KPI = 0.
- *   3. Loaded    — KPI values, "online/total" header badge, a VCC per vehicle,
- *                  and live state threaded down to the reachable car.
- *   4. Counting  — online = state ∉ {asleep, offline}; asleep = remainder.
- *   5. Roster err— rejected `/vehicles` → danger banner, no command centers.
- *   6. States err— EVERY `/state` fails → the (previously dead) warning banner
- *                  becomes reachable, and the board still renders degraded.
- *   7. Partial   — one `/state` fails, one succeeds → NO warning, state still
- *                  threads to the reachable car (per-vehicle degradation).
- *   8. a11y      — the two labelled regions + the History action are named.
- *   9. Navigate  — clicking "View History" routes to /command-history.
- *
- * Network is driven through the mocked `@/api/client` `request` seam (the same
- * seam DiagnosticPage / AnalyticsPage use) so nothing touches the real network.
- * `@testing-library/user-event` is intentionally not used — it is not a
- * dependency of this repo (see EditableText.test.tsx) — interactions go through
- * `fireEvent`.
- */
-
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, within, waitFor, fireEvent } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { MemoryRouter, useLocation } from 'react-router-dom';
 import type { ReactNode } from 'react';
-
-// i18n stub: return the fallback string, interpolating {{var}} tokens from the
-// options object so assertions can target the rendered English copy (the page
-// uses `t(key, '{{online}}/{{total}} online', { online, total })`).
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallbackOrOpts?: unknown, opts?: unknown) => {
-      if (typeof fallbackOrOpts === 'string') {
-        if (opts && typeof opts === 'object') {
-          const o = opts as Record<string, unknown>;
-          return fallbackOrOpts.replace(/{{(\w+)}}/g, (_m, name: string) =>
-            name in o ? String(o[name]) : `{{${name}}}`,
-          );
-        }
-        return fallbackOrOpts;
-      }
-      return key;
-    },
-    i18n: { language: 'en', changeLanguage: vi.fn() },
-  }),
-  Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
-  initReactI18next: { type: '3rdParty', init: () => undefined },
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  fireEvent,
+  render,
+  screen,
+  within,
+} from '@testing-library/react';
+import {
+  MemoryRouter,
+  useLocation,
+} from 'react-router-dom';
+import type { Vehicle } from '../commands';
+
+const { useVehiclesMock, useSelectedVehicleMock, setVehicleIdMock, refetchMock } =
+  vi.hoisted(() => ({
+    useVehiclesMock: vi.fn(),
+    useSelectedVehicleMock: vi.fn(),
+    setVehicleIdMock: vi.fn(),
+    refetchMock: vi.fn(),
+  }));
+
+vi.mock('@/api/hooks/useVehicles', () => ({
+  useVehicles: useVehiclesMock,
 }));
 
-vi.mock('@/api/client', async () => {
-  const actual = await vi.importActual<typeof import('@/api/client')>('@/api/client');
-  return { ...actual, request: vi.fn() };
-});
+vi.mock('@/hooks/useSelectedVehicle', () => ({
+  useSelectedVehicle: useSelectedVehicleMock,
+}));
 
-// The command center is a heavy, dialog/query-laden child. Stub it with a
-// prop-capturing marker so the page's roster wiring + state threading can be
-// asserted deterministically without mounting the whole command subtree.
-vi.mock('../components/VehicleCommandCenter', () => ({
-  VehicleCommandCenter: ({
-    vehicle,
-    state,
-  }: {
-    vehicle: { id: number; display_name: string };
-    state: unknown;
-  }) => (
-    <div data-testid={`vcc-${vehicle.id}`} data-has-state={state ? 'yes' : 'no'}>
-      {vehicle.display_name}
-    </div>
-  ),
+vi.mock('@/hooks/usePageTitle', () => ({
+  usePageTitle: vi.fn(),
 }));
 
-// jsdom lacks matchMedia; framer-motion (via <FadeIn>/<Stagger*>) reads it.
-// Guarded polyfill keeps the render deterministic.
-if (typeof window.matchMedia !== 'function') {
-  window.matchMedia = ((query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    addListener: () => {},
-    removeListener: () => {},
-    dispatchEvent: () => false,
-  })) as unknown as typeof window.matchMedia;
-}
+vi.mock('../components/command-center', async () => {
+  const actual = await vi.importActual<
+    typeof import('../components/command-center')
+  >('../components/command-center');
+  return {
+    ...actual,
+    VehicleCommandCenter: ({ vehicle }: { vehicle: Vehicle }) => (
+      <div data-testid="vehicle-command-center">{vehicle.display_name}</div>
+    ),
+  };
+});
 
-import { request } from '@/api/client';
-import { COMMANDS, CATEGORY_ORDER, type Vehicle } from '../commands';
-import CommandsPage from './CommandsPage';
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>(
+    'react-i18next',
+  );
+  const interpolate = (
+    template: string,
+    values?: Record<string, unknown>,
+  ): string =>
+    values
+      ? template.replace(/\{\{(\w+)\}\}/g, (_match, key: string) =>
+          String(values[key] ?? `{{${key}}}`),
+        )
+      : template;
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown, options?: unknown) => {
+        if (typeof fallback === 'string') {
+          return interpolate(
+            fallback,
+            options && typeof options === 'object'
+              ? options as Record<string, unknown>
+              : undefined,
+          );
+        }
+        return key;
+      },
+      i18n: { language: 'en' },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
 
-const mockedRequest = request as unknown as ReturnType<typeof vi.fn>;
+import CommandsPage from './CommandsPage';
 
-function makeVehicle(id: number, overrides: Partial<Vehicle> = {}): Vehicle {
+function makeVehicle(
+  id: number,
+  overrides: Partial<Vehicle> = {},
+): Vehicle {
   return {
     id,
     vin: `5YJ3E1EA0PF00000${id}`,
     display_name: `Car ${id}`,
     model: 'Model 3',
     state: 'online',
-    battery_level: 82,
-    battery_range: 300,
-    updated_at: '2025-01-15T12:00:00Z',
+    updated_at: '2026-08-08T20:00:00Z',
     ...overrides,
   };
 }
 
-/**
- * Route the mocked `request` by URL.
- *  - `/vehicles`            → resolves the roster (or rejects / hangs).
- *  - `/vehicles/{id}/state` → resolves `{ state }` from the per-id map, or
- *                             rejects when the entry is the string 'reject'.
- * Unspecified ids resolve to `{ state: null }` so tests never trip the
- * total-outage warning by accident.
- */
-function installNetwork(config: {
+function installHooks({
+  vehicles,
+  loading = false,
+  error = null,
+  selected = vehicles?.[0] ?? null,
+}: {
   vehicles?: Vehicle[];
-  vehiclesError?: Error;
-  vehiclesPending?: boolean;
-  states?: Record<number, Record<string, unknown> | 'reject'>;
+  loading?: boolean;
+  error?: Error | null;
+  selected?: Vehicle | null;
 }) {
-  mockedRequest.mockImplementation((path: string) => {
-    if (path === '/vehicles') {
-      if (config.vehiclesPending) return new Promise<Vehicle[]>(() => {});
-      if (config.vehiclesError) return Promise.reject(config.vehiclesError);
-      return Promise.resolve(config.vehicles ?? []);
-    }
-    const m = /^\/vehicles\/(\d+)\/state$/.exec(path);
-    if (m) {
-      const id = Number(m[1]);
-      const entry = config.states?.[id];
-      if (entry === 'reject') return Promise.reject(new Error('state endpoint down'));
-      return Promise.resolve({ state: entry ?? null });
-    }
-    return Promise.reject(new Error(`unexpected path ${path}`));
+  useVehiclesMock.mockReturnValue({
+    data: vehicles,
+    isLoading: loading,
+    error,
+    refetch: refetchMock,
+  });
+  useSelectedVehicleMock.mockReturnValue({
+    vehicleId: selected?.id ?? null,
+    vehicle: selected,
+    vehicles: vehicles ?? [],
+    setVehicleId: setVehicleIdMock,
   });
 }
 
-/** Renders the current pathname so navigation side-effects can be asserted. */
 function LocationProbe() {
-  const loc = useLocation();
-  return <div data-testid="location">{loc.pathname}</div>;
+  const location = useLocation();
+  return <div data-testid="location">{location.pathname}</div>;
 }
 
 function renderPage() {
-  const qc = new QueryClient({
-    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
-  });
   return render(
-    <QueryClientProvider client={qc}>
-      <MemoryRouter initialEntries={['/commands']}>
-        <CommandsPage />
-        <LocationProbe />
-      </MemoryRouter>
-    </QueryClientProvider>,
+    <MemoryRouter initialEntries={['/commands']}>
+      <CommandsPage />
+      <LocationProbe />
+    </MemoryRouter>,
   );
 }
 
-/** The MetricCard root (`.rounded-xl`) that owns the given KPI label. */
-function metricCard(label: string): HTMLElement {
-  const span = screen.getByText(label);
-  const root = span.closest('div.rounded-xl');
-  if (!root) throw new Error(`no MetricCard root for "${label}"`);
-  return root as HTMLElement;
-}
-
 beforeEach(() => {
-  mockedRequest.mockReset();
-});
-
-afterEach(() => {
-  vi.restoreAllMocks();
+  vi.clearAllMocks();
 });
 
 describe('CommandsPage', () => {
-  it('shows skeletons (and no KPI labels) while the roster is loading', () => {
-    installNetwork({ vehiclesPending: true });
+  it('renders useful section shells while the fleet is loading', () => {
+    installHooks({ loading: true, vehicles: undefined, selected: null });
 
-    const { container } = renderPage();
+    renderPage();
 
-    // Header chrome renders immediately even while data is pending.
-    expect(
-      screen.getByRole('heading', { level: 1, name: 'Vehicle Commands' }),
-    ).toBeInTheDocument();
     expect(
-      screen.getByText('Remote control center for your Tesla fleet'),
+      screen.getByRole('heading', {
+        level: 1,
+        name: 'Vehicle Command Center',
+      }),
     ).toBeInTheDocument();
-
-    // KPI band is skeletonised — the resolved MetricCard labels are absent.
-    expect(screen.queryByText('Vehicles')).not.toBeInTheDocument();
-    expect(screen.queryByText('Online')).not.toBeInTheDocument();
-
-    // 6 KPI skeletons + 2 command-center skeletons = 8 pulse placeholders.
-    const skeletons = container.querySelectorAll('.animate-pulse');
-    expect(skeletons.length).toBeGreaterThanOrEqual(6);
+    expect(screen.getByLabelText('Loading your fleet')).toBeInTheDocument();
+    expect(screen.getByText('Command readiness')).toBeInTheDocument();
+    expect(screen.getByText('Command workspace')).toBeInTheDocument();
+    expect(screen.getByText('Safety & execution')).toBeInTheDocument();
+    expect(screen.getByText('Recent command activity')).toBeInTheDocument();
+    expect(screen.queryByTestId('vehicle-command-center')).not.toBeInTheDocument();
   });
 
-  it('renders the onboarding empty state when the fleet is empty', async () => {
-    installNetwork({ vehicles: [] });
+  it('renders a useful no-vehicle state without hiding safety or activity', () => {
+    installHooks({ vehicles: [], selected: null });
 
     renderPage();
 
-    expect(await screen.findByText('No vehicles found')).toBeInTheDocument();
+    expect(screen.getByText('No vehicles found')).toBeInTheDocument();
     expect(
-      screen.getByText(/Connect your Tesla account and sync your fleet/i),
-    ).toBeInTheDocument();
-
-    // The KPI band still renders (never gated) with a zero vehicle count.
-    expect(metricCard('Vehicles')).toHaveTextContent('0');
-    // No command centers, and the online badge is hidden with no fleet.
-    expect(screen.queryByTestId('vcc-1')).not.toBeInTheDocument();
-    expect(screen.queryByText(/online/)).not.toBeInTheDocument();
+      screen.getAllByText(/Connect your Tesla account and sync your fleet/i),
+    ).not.toHaveLength(0);
+    expect(screen.getByTestId('command-safety')).toBeInTheDocument();
+    expect(screen.getByText('Recent command activity')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Select vehicle')).not.toBeInTheDocument();
   });
 
-  it('renders the KPI band, header badge, and a command center per vehicle', async () => {
-    installNetwork({
-      vehicles: [
-        makeVehicle(1, { state: 'online', display_name: 'Roadster' }),
-        makeVehicle(2, { state: 'asleep', display_name: 'Cybertruck' }),
-      ],
-      states: { 1: { battery_level: 74, rated_range: 250 } },
+  it('keeps all section shells visible when the roster query fails', () => {
+    installHooks({
+      vehicles: undefined,
+      selected: null,
+      error: new Error('fleet unavailable'),
     });
 
     renderPage();
 
-    // A command center per vehicle, echoing the display name.
-    expect(await screen.findByTestId('vcc-1')).toHaveTextContent('Roadster');
-    expect(screen.getByTestId('vcc-2')).toHaveTextContent('Cybertruck');
-
-    // KPI values: 2 vehicles, 1 online, 1 asleep, plus the config-driven ones.
-    expect(metricCard('Vehicles')).toHaveTextContent('2');
-    expect(metricCard('Online')).toHaveTextContent('1');
-    expect(metricCard('Asleep')).toHaveTextContent('1');
-    expect(metricCard('Commands')).toHaveTextContent(String(COMMANDS.length));
-    expect(metricCard('Categories')).toHaveTextContent(String(CATEGORY_ORDER.length));
-    expect(metricCard('Auto-refresh')).toHaveTextContent('15s');
-
-    // Header online badge reflects the online/total split.
-    expect(screen.getByText('1/2 online')).toBeInTheDocument();
-
-    // Live state fans out and threads to the reachable car; the asleep car
-    // never had a state resolved, so it stays null (degraded, not blanked).
-    await waitFor(() =>
-      expect(screen.getByTestId('vcc-1')).toHaveAttribute('data-has-state', 'yes'),
-    );
-    expect(screen.getByTestId('vcc-2')).toHaveAttribute('data-has-state', 'no');
-    expect(mockedRequest).toHaveBeenCalledWith('/vehicles/1/state');
+    expect(screen.getByTestId('command-center-fallback')).toBeInTheDocument();
+    expect(screen.getByText('Command readiness')).toBeInTheDocument();
+    expect(screen.getByText('Command workspace')).toBeInTheDocument();
+    expect(screen.getByText('Safety & execution')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
   });
 
-  it('counts online as state ∉ {asleep, offline} and asleep as the remainder', async () => {
-    installNetwork({
-      vehicles: [
-        makeVehicle(1, { state: 'online' }),
-        makeVehicle(2, { state: 'driving' }),
-        makeVehicle(3, { state: 'asleep' }),
-        makeVehicle(4, { state: 'offline' }),
-      ],
-      states: { 1: { battery_level: 50 }, 2: { battery_level: 50 } },
+  it('renders the selected vehicle and honest last-known fleet reachability', () => {
+    const roadster = makeVehicle(1, {
+      display_name: 'Roadster',
+      state: 'online',
+    });
+    const cybertruck = makeVehicle(2, {
+      display_name: 'Cybertruck',
+      state: 'asleep',
+    });
+    installHooks({
+      vehicles: [roadster, cybertruck],
+      selected: cybertruck,
     });
 
     renderPage();
 
-    // online + driving = 2 online; asleep + offline = 2 asleep.
-    expect(await screen.findByTestId('vcc-1')).toBeInTheDocument();
-    expect(metricCard('Vehicles')).toHaveTextContent('4');
-    expect(metricCard('Online')).toHaveTextContent('2');
-    expect(metricCard('Asleep')).toHaveTextContent('2');
-    expect(screen.getByText('2/4 online')).toBeInTheDocument();
-  });
-
-  it('surfaces a danger banner and no command centers when the roster fails', async () => {
-    installNetwork({ vehiclesError: new Error('fleet 500 Internal') });
-
-    renderPage();
+    expect(screen.getByTestId('vehicle-command-center')).toHaveTextContent(
+      'Cybertruck',
+    );
+    expect(screen.getByText('1/2 recently reachable')).toBeInTheDocument();
 
+    const picker = screen.getByLabelText('Select vehicle');
+    expect(picker).toHaveValue('2');
     expect(
-      await screen.findByText(/Failed to load your fleet: fleet 500 Internal/i),
+      within(picker).getByRole('option', { name: 'Roadster' }),
     ).toBeInTheDocument();
-    expect(screen.queryByTestId('vcc-1')).not.toBeInTheDocument();
-  });
-
-  it('surfaces the states warning when EVERY vehicle state fetch fails', async () => {
-    installNetwork({
-      vehicles: [makeVehicle(1), makeVehicle(2)],
-      states: { 1: 'reject', 2: 'reject' },
-    });
-
-    renderPage();
-
-    // The previously-dead warning branch is now reachable: a total fan-out
-    // outage flips the states query into an error state.
     expect(
-      await screen.findByText(/Failed to load vehicle states/i),
+      within(picker).getByRole('option', { name: 'Cybertruck' }),
     ).toBeInTheDocument();
-
-    // The board still renders — every car degrades to a stateless center.
-    expect(screen.getByTestId('vcc-1')).toHaveAttribute('data-has-state', 'no');
-    expect(screen.getByTestId('vcc-2')).toHaveAttribute('data-has-state', 'no');
   });
 
-  it('does NOT warn on a partial states failure and still threads the ok car', async () => {
-    installNetwork({
-      vehicles: [makeVehicle(1), makeVehicle(2)],
-      states: { 1: { battery_level: 60, rated_range: 200 }, 2: 'reject' },
-    });
+  it('updates the persistent selected vehicle from the page picker', () => {
+    const first = makeVehicle(1);
+    const second = makeVehicle(2);
+    installHooks({ vehicles: [first, second], selected: first });
 
     renderPage();
+    fireEvent.change(screen.getByLabelText('Select vehicle'), {
+      target: { value: '2' },
+    });
 
-    // Wait for both state fetches to have been attempted.
-    await waitFor(() =>
-      expect(mockedRequest).toHaveBeenCalledWith('/vehicles/2/state'),
-    );
-    // The reachable car receives its state; the failed one degrades to null.
-    await waitFor(() =>
-      expect(screen.getByTestId('vcc-1')).toHaveAttribute('data-has-state', 'yes'),
-    );
-    expect(screen.getByTestId('vcc-2')).toHaveAttribute('data-has-state', 'no');
-
-    // A partial failure must stay silent — no warning banner.
-    expect(screen.queryByText(/Failed to load vehicle states/i)).not.toBeInTheDocument();
+    expect(setVehicleIdMock).toHaveBeenCalledWith(2);
   });
 
-  it('exposes accessible names for the KPI region, centers region, and History action', async () => {
-    installNetwork({ vehicles: [makeVehicle(1)], states: { 1: { battery_level: 90 } } });
+  it('shows the single selected vehicle as a named badge', () => {
+    const only = makeVehicle(7, { display_name: 'Solo' });
+    installHooks({ vehicles: [only], selected: only });
 
     renderPage();
 
-    await screen.findByTestId('vcc-1');
-    const kpiRegion = screen.getByRole('region', { name: 'Fleet status' });
-    expect(within(kpiRegion).getByText('Vehicles')).toBeInTheDocument();
-
-    expect(
-      screen.getByRole('region', { name: 'Vehicle command centers' }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: 'View History' }),
-    ).toBeInTheDocument();
+    expect(screen.getAllByText('Solo')).toHaveLength(2);
+    expect(screen.queryByLabelText('Select vehicle')).not.toBeInTheDocument();
   });
 
-  it('navigates to /command-history when the History action is clicked', async () => {
-    installNetwork({ vehicles: [makeVehicle(1)], states: { 1: { battery_level: 40 } } });
+  it('navigates to command history from the header action', () => {
+    const vehicle = makeVehicle(1);
+    installHooks({ vehicles: [vehicle], selected: vehicle });
 
     renderPage();
-
-    await screen.findByTestId('vcc-1');
     expect(screen.getByTestId('location')).toHaveTextContent('/commands');
 
-    fireEvent.click(screen.getByRole('button', { name: 'View History' }));
+    fireEvent.click(screen.getByRole('button', { name: 'View history' }));
 
-    expect(screen.getByTestId('location')).toHaveTextContent('/command-history');
+    expect(screen.getByTestId('location')).toHaveTextContent(
+      '/command-history',
+    );
   });
 });
diff --git a/web/src/features/system/pages/CommandsPage.tsx b/web/src/features/system/pages/CommandsPage.tsx
index baa24c45b1..3d04207324 100644
--- a/web/src/features/system/pages/CommandsPage.tsx
+++ b/web/src/features/system/pages/CommandsPage.tsx
@@ -1,222 +1,179 @@
 /**
- * CommandsPage — modern-ui, full-width remote control center for the Tesla fleet.
+ * Vehicle Command Center route.
  *
- * Renders a fleet KPI band and a VehicleCommandCenter per vehicle. Each command
- * center handles search, favorites, collapsible categories, and command
- * execution via the config-driven command system. Data loads through TanStack
- * queries against /vehicles + /vehicles/{id}/state; every section owns its own
- * loading / empty / error state so nothing is gated behind a single guard.
+ * The page owns fleet selection and the route-level loading/error/empty
+ * experience. The selected-vehicle center owns live state, execution,
+ * categorized commands, safety guidance, and recent activity.
  */
 
 import { useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import {
-  Car, Wifi, Power, RefreshCw, Terminal, Layers, History, AlertTriangle,
-} from 'lucide-react';
-
+import { Car, History, Wifi } from 'lucide-react';
 import { PageContainer } from '@/components/layout';
-import { GlassPanel, Badge, Button, PanelTitle } from '@/components/ui';
-import { MetricCard } from '@/components/data-display';
-import { EmptyState, Skeleton, AlertBanner } from '@/components/feedback';
-import { FadeIn, StaggerContainer, StaggerItem } from '@/components/motion';
+import { Badge, Button, Select } from '@/components/ui';
+import { FadeIn } from '@/components/motion';
+import { useVehicles } from '@/api/hooks/useVehicles';
 import { usePageTitle } from '@/hooks/usePageTitle';
-import { getErrorMessage } from '@/lib/errorMessage';
-import { request } from '@/api/client';
-import { COMMANDS, CATEGORY_ORDER, type Vehicle, type VehicleState } from '../commands';
-import { VehicleCommandCenter } from '../components/VehicleCommandCenter';
-
-/** How often the live vehicle-state fan-out re-polls, in ms. */
-const STATE_REFRESH_MS = 15_000;
+import { useSelectedVehicle } from '@/hooks/useSelectedVehicle';
+import {
+  CommandCenterFallback,
+  VehicleCommandCenter,
+  type CommandCenterFallbackStatus,
+} from '../components/command-center';
 
 export default function CommandsPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   usePageTitle(t('commands.title', 'Commands'));
 
-  // Fleet roster — the command centers below are keyed off this list.
-  const vehiclesQuery = useQuery({
-    queryKey: ['vehicles'],
-    queryFn: ({ signal }) => request<Vehicle[]>('/vehicles', { signal }),
-  });
+  /**
+   * `useSelectedVehicle` and this route-level query share the same TanStack
+   * key. The former provides persisted selection; the latter exposes the
+   * loading/error/refetch state needed for explicit route placeholders.
+   */
+  const vehiclesQuery = useVehicles();
+  const {
+    vehicleId,
+    vehicle: selectedFromStore,
+    setVehicleId,
+  } = useSelectedVehicle();
   const vehicles = vehiclesQuery.data ?? [];
-  const vehiclesLoading = vehiclesQuery.isLoading;
-  const vehiclesError = vehiclesQuery.error;
 
-  // Live per-vehicle state, fanned out and polled. Individual failures degrade
-  // to `null` per vehicle so one unreachable car never blanks the whole board;
-  // a total fan-out outage (every car unreachable) surfaces as a query error
-  // so the non-blocking states warning below can render.
-  const statesQuery = useQuery({
-    queryKey: ['command-vehicle-states', vehicles.map((v) => v.id)],
-    queryFn: async () => {
-      let failures = 0;
-      const entries = await Promise.all(
-        vehicles.map(async (v) => {
-          try {
-            const data = await request<{ state: VehicleState }>(`/vehicles/${v.id}/state`);
-            return [v.id, data.state ?? null] as const;
-          } catch {
-            failures += 1;
-            return [v.id, null] as const;
-          }
-        }),
-      );
-      // A single unreachable car degrades to `null` for just that vehicle so
-      // the board keeps rendering. But if EVERY state fetch fails the fan-out
-      // is effectively down — surface that as a query error so the page shows
-      // its non-blocking warning banner instead of silently pretending every
-      // car simply has no live state.
-      if (vehicles.length > 0 && failures === vehicles.length) {
-        throw new Error(
-          t('commands.statesUnreachable', 'All {{count}} vehicles were unreachable', {
-            count: vehicles.length,
+  /**
+   * Selection can briefly resolve before the hook's memo catches up after a
+   * picker change. Resolve from the current roster as a synchronous fallback
+   * so the hero never flashes an unrelated empty state.
+   */
+  const selectedVehicle =
+    selectedFromStore ??
+    (vehicleId != null
+      ? vehicles.find((vehicle) => vehicle.id === vehicleId) ?? null
+      : null) ??
+    vehicles[0] ??
+    null;
+
+  const vehicleOptions = useMemo(
+    () =>
+      vehicles.map((vehicle) => ({
+        value: String(vehicle.id),
+        label:
+          vehicle.display_name?.trim() ||
+          vehicle.vin ||
+          t('commands.vehicle.fallbackName', 'Vehicle {{id}}', {
+            id: vehicle.id,
           }),
-        );
-      }
-      return Object.fromEntries(entries) as Record<number, VehicleState | null>;
-    },
-    enabled: vehicles.length > 0,
-    refetchInterval: STATE_REFRESH_MS,
-  });
-  const states = statesQuery.data ?? {};
-  const statesError = statesQuery.error;
+      })),
+    [t, vehicles],
+  );
 
-  const onlineCount = useMemo(
-    () => vehicles.filter((v) => v.state !== 'asleep' && v.state !== 'offline').length,
+  /**
+   * Keep the existing fleet readiness summary, but make the language honest:
+   * roster state is a last-known connection state, not proof that a command
+   * will execute now.
+   */
+  const reachableCount = useMemo(
+    () =>
+      vehicles.filter(
+        (vehicle) =>
+          vehicle.state !== 'asleep' && vehicle.state !== 'offline',
+      ).length,
     [vehicles],
   );
-  const asleepCount = Math.max(0, vehicles.length - onlineCount);
 
-  // Single-vehicle fleets stay full-bleed (a 2-col grid would leave dead space);
-  // multi-vehicle fleets reflow into two columns on very wide monitors.
-  const centersClass = vehicles.length > 1
-    ? 'grid grid-cols-1 gap-4 sm:gap-5 2xl:grid-cols-2'
-    : 'space-y-4 sm:space-y-5';
+  const fallbackStatus: CommandCenterFallbackStatus = vehiclesQuery.isLoading
+    ? 'loading'
+    : vehiclesQuery.error
+      ? 'error'
+      : 'empty';
+
+  const selectedName = selectedVehicle
+    ? selectedVehicle.display_name?.trim() ||
+      selectedVehicle.vin ||
+      t('commands.vehicle.fallbackName', 'Vehicle {{id}}', {
+        id: selectedVehicle.id,
+      })
+    : null;
 
   return (
     <PageContainer
-      title={t('commands.pageTitle', 'Vehicle Commands')}
-      subtitle={t('commands.subtitle', 'Remote control center for your Tesla fleet')}
-      query={[vehiclesQuery, statesQuery]}
+      title={t('commands.pageTitle', 'Vehicle Command Center')}
+      subtitle={t(
+        'commands.subtitle',
+        'Review vehicle readiness, send remote actions, and verify recent outcomes.',
+      )}
       actions={
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="flex w-full flex-wrap items-end gap-2 sm:w-auto sm:justify-end">
           {vehicles.length > 0 && (
-            <Badge variant="success" size="lg" className="min-h-11">
+            <Badge
+              variant={reachableCount > 0 ? 'success' : 'warning'}
+              size="lg"
+              className="min-h-11"
+            >
               <Wifi className="h-3.5 w-3.5" aria-hidden="true" />
-              {t('commands.onlineCount', '{{online}}/{{total}} online', {
-                online: onlineCount,
-                total: vehicles.length,
-              })}
+              {t(
+                'commands.reachableCount',
+                '{{reachable}}/{{total}} recently reachable',
+                {
+                  reachable: reachableCount,
+                  total: vehicles.length,
+                },
+              )}
             </Badge>
           )}
+
+          {vehicles.length > 1 ? (
+            <Select
+              id="commands-vehicle"
+              aria-label={t('commands.selectVehicle', 'Select vehicle')}
+              value={selectedVehicle ? String(selectedVehicle.id) : ''}
+              onChange={(event) => {
+                const next = Number(event.target.value);
+                if (Number.isFinite(next) && next > 0) {
+                  setVehicleId(next);
+                }
+              }}
+              options={vehicleOptions}
+              className="min-h-11 min-w-48"
+            />
+          ) : selectedName ? (
+            <Badge variant="neutral" size="lg" className="min-h-11">
+              <Car className="h-3.5 w-3.5" aria-hidden="true" />
+              {selectedName}
+            </Badge>
+          ) : null}
+
           <Button
+            type="button"
             variant="ghost"
-            size="sm"
+            size="lg"
             className="min-h-11"
             icon={<History className="h-4 w-4" aria-hidden="true" />}
             onClick={() => navigate('/command-history')}
           >
-            {t('commands.viewHistory', 'View History')}
+            {t('commands.viewHistory', 'View history')}
           </Button>
         </div>
       }
     >
-      {/* 1 — Fleet KPI band: full-width responsive metric grid */}
       <FadeIn>
         <section
-          aria-label={t('commands.fleetStats', 'Fleet status')}
-          className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 xl:grid-cols-6"
-        >
-          {vehiclesLoading ? (
-            Array.from({ length: 6 }).map((_, i) => (
-              <Skeleton key={i} height={86} className="rounded-xl" />
-            ))
-          ) : (
-            <>
-              <MetricCard
-                label={t('commands.kpi.vehicles', 'Vehicles')}
-                value={vehicles.length}
-                icon={<Car className="h-4 w-4" />}
-                color="cyan"
-              />
-              <MetricCard
-                label={t('commands.kpi.online', 'Online')}
-                value={onlineCount}
-                icon={<Wifi className="h-4 w-4" />}
-                color="green"
-              />
-              <MetricCard
-                label={t('commands.kpi.asleep', 'Asleep')}
-                value={asleepCount}
-                icon={<Power className="h-4 w-4" />}
-                color="amber"
-              />
-              <MetricCard
-                label={t('commands.kpi.commands', 'Commands')}
-                value={COMMANDS.length}
-                icon={<Terminal className="h-4 w-4" />}
-                color="purple"
-              />
-              <MetricCard
-                label={t('commands.kpi.categories', 'Categories')}
-                value={CATEGORY_ORDER.length}
-                icon={<Layers className="h-4 w-4" />}
-                color="blue"
-              />
-              <MetricCard
-                label={t('commands.kpi.refresh', 'Auto-refresh')}
-                value={`${STATE_REFRESH_MS / 1000}s`}
-                icon={<RefreshCw className="h-4 w-4" />}
-                color="cyan"
-              />
-            </>
+          aria-label={t(
+            'commands.centerRegion',
+            'Selected vehicle command center',
           )}
-        </section>
-      </FadeIn>
-
-      {/* 2 — Non-blocking notice when the live-state fan-out fails */}
-      {statesError && (
-        <FadeIn>
-          <AlertBanner variant="warning" icon={<AlertTriangle className="h-4 w-4" aria-hidden="true" />}>
-            {t('commands.statesError', 'Failed to load vehicle states')}: {getErrorMessage(statesError)}
-          </AlertBanner>
-        </FadeIn>
-      )}
-
-      {/* 3 — Vehicle command centers: full-width detail band */}
-      <FadeIn delay={0.1}>
-        <section aria-label={t('commands.centers', 'Vehicle command centers')}>
-          {vehiclesError ? (
-            <GlassPanel className="p-4 sm:p-5">
-              <PanelTitle className="mb-3">{t('commands.pageTitle', 'Vehicle Commands')}</PanelTitle>
-              <AlertBanner variant="danger" icon={<AlertTriangle className="h-4 w-4" aria-hidden="true" />}>
-                {t('commands.loadError', 'Failed to load your fleet')}: {getErrorMessage(vehiclesError)}
-              </AlertBanner>
-            </GlassPanel>
-          ) : vehiclesLoading ? (
-            <div className="grid grid-cols-1 gap-4 sm:gap-5 2xl:grid-cols-2">
-              {[1, 2].map((i) => (
-                <Skeleton key={i} height={288} className="rounded-2xl" />
-              ))}
-            </div>
-          ) : vehicles.length === 0 ? (
-            <GlassPanel className="p-4 sm:p-5">
-              <EmptyState /* no-action: onboarding empty state — the CTA copy already points users to Tesla account sync */
-                icon={<Car className="h-8 w-8" />}
-                title={t('commands.noVehicles', 'No vehicles found')}
-                message={t('commands.connectFleet', 'Connect your Tesla account and sync your fleet to start sending commands.')}
-              />
-            </GlassPanel>
+        >
+          {selectedVehicle ? (
+            <VehicleCommandCenter
+              key={selectedVehicle.id}
+              vehicle={selectedVehicle}
+            />
           ) : (
-            <StaggerContainer className={centersClass}>
-              {vehicles.map((v) => (
-                <StaggerItem key={v.id}>
-                  <VehicleCommandCenter vehicle={v} state={states[v.id] ?? null} />
-                </StaggerItem>
-              ))}
-            </StaggerContainer>
+            <CommandCenterFallback
+              status={fallbackStatus}
+              error={vehiclesQuery.error}
+              onRetry={() => void vehiclesQuery.refetch()}
+            />
           )}
         </section>
       </FadeIn>
diff --git a/web/src/features/system/pages/MyActivityPage.test.tsx b/web/src/features/system/pages/MyActivityPage.test.tsx
index 064c378c16..802591a653 100644
--- a/web/src/features/system/pages/MyActivityPage.test.tsx
+++ b/web/src/features/system/pages/MyActivityPage.test.tsx
@@ -165,6 +165,7 @@ beforeEach(() => {
   activityResult = baseEntries();
   activityError = null;
   pending = false;
+  window.localStorage.clear();
   mockedRequest.mockReset();
   mockedRequest.mockImplementation((url: string, opts?: ReqOpts) => routeRequest(url, opts));
 });
diff --git a/web/src/features/system/pages/MyActivityPage.tsx b/web/src/features/system/pages/MyActivityPage.tsx
index 55401fa6a1..82cf346ce9 100644
--- a/web/src/features/system/pages/MyActivityPage.tsx
+++ b/web/src/features/system/pages/MyActivityPage.tsx
@@ -23,7 +23,7 @@ import { FadeIn } from '@/components/motion';
 import { RangePicker } from '@/components/forms';
 import { Icons } from '@/lib/icons';
 import { usePageTitle } from '@/hooks/usePageTitle';
-import { useUrlBatch, useUrlString } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { ApiError } from '@/lib/resilience';
 import { useMyRecentActivity } from '@/api/hooks/useUser';
 import {
@@ -35,31 +35,18 @@ import {
   ActivityFeedPanel,
 } from '../components/my-activity';
 
-const DEFAULT_WINDOW_DAYS = 30;
 const ACTIVITY_LIMIT = 200;
 
-/** Returns a YYYY-MM-DD string for the given date, in local time. */
-function isoDate(d: Date): string {
-  const year = d.getFullYear();
-  const month = String(d.getMonth() + 1).padStart(2, '0');
-  const day = String(d.getDate()).padStart(2, '0');
-  return `${year}-${month}-${day}`;
-}
-
 export default function MyActivityPage() {
   const { t } = useTranslation();
   usePageTitle(t('activity.myActivity.title', 'My Activity'));
 
-  const defaults = useMemo(() => {
-    const today = new Date();
-    const startDay = new Date(today);
-    startDay.setDate(startDay.getDate() - (DEFAULT_WINDOW_DAYS - 1));
-    return { start: isoDate(startDay), end: isoDate(today) };
-  }, []);
-
-  const [start] = useUrlString('start', defaults.start);
-  const [end] = useUrlString('end', defaults.end);
-  const setRangeBatch = useUrlBatch();
+  const { start, end, setRange } = useRangeState({
+    persistKey: 'my-activity.range',
+    defaultPresetId: '30d',
+    fromKey: 'start',
+    toKey: 'end',
+  });
 
   const query = useMyRecentActivity({ start, end, limit: ACTIVITY_LIMIT });
   const { data, isLoading, isError, error, refetch } = query;
@@ -89,7 +76,7 @@ export default function MyActivityPage() {
   const actions = (
     <RangePicker
       value={{ start, end }}
-      onChange={(r) => setRangeBatch({ start: r.start, end: r.end })}
+      onChange={setRange}
       align="end"
       triggerTestId="my-activity-range"
     />
diff --git a/web/src/features/trips/pages/TripListPage.tsx b/web/src/features/trips/pages/TripListPage.tsx
index d71ef87cea..7a3d44cc21 100644
--- a/web/src/features/trips/pages/TripListPage.tsx
+++ b/web/src/features/trips/pages/TripListPage.tsx
@@ -26,7 +26,8 @@ import { useUnits } from '@/hooks/useUnits';
 import { useFormatting } from '@/hooks/useFormatting';
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { useSavedViewUrl } from '@/hooks/useSavedViewUrl';
-import { useUrlBatch, useUrlNumber, useUrlString } from '@/hooks/useUrlState';
+import { useUrlBatch, useUrlNumber } from '@/hooks/useUrlState';
+import { useRangeState } from '@/hooks/useRangeState';
 import { convertDistanceFromSI } from '@/lib/unitConversion';
 import { formatDate } from '@/lib/dateFormat';
 import { fmtInt } from '@/lib/numberFormat';
@@ -84,15 +85,15 @@ export default function TripListPage() {
 
   const [page, setPage] = useUrlNumber('page', 1);
   const [pageSize] = useUrlNumber('size', 50);
-  const defaultStart = useMemo(() => {
-    const d = new Date();
-    d.setDate(d.getDate() - 365);
-    return d.toISOString().split('T')[0];
-  }, []);
-  const defaultEnd = useMemo(() => new Date().toISOString().split('T')[0], []);
-  const [startDate] = useUrlString('from', defaultStart);
-  const [endDate] = useUrlString('to', defaultEnd);
-  const setRangeBatch = useUrlBatch();
+  const {
+    start: startDate,
+    end: endDate,
+    setRangeWithUrlUpdates,
+  } = useRangeState({
+    persistKey: 'trips.list.range',
+    defaultPresetId: '1y',
+  });
+  const setUrlBatch = useUrlBatch();
 
   const tripsQuery = useTrips({
     vehicle_id: vehicleId ?? undefined,
@@ -128,7 +129,7 @@ export default function TripListPage() {
           <RangePicker
             value={{ start: startDate, end: endDate }}
             onChange={(r) => {
-              setRangeBatch({ from: r.start, to: r.end, page: null });
+              setRangeWithUrlUpdates(r, { page: null });
             }}
             align="end"
             triggerTestId="trip-list-range"
@@ -207,7 +208,7 @@ export default function TripListPage() {
               total={estimatedTotal}
               onPageChange={setPage}
               onPageSizeChange={(s) => {
-                setRangeBatch({ size: String(s), page: null });
+                setUrlBatch({ size: String(s), page: null });
               }}
             />
           </FadeIn>
diff --git a/web/src/features/vehicle-systems/pages/MediaPlayerPage.test.tsx b/web/src/features/vehicle-systems/pages/MediaPlayerPage.test.tsx
index fa5954727a..0ccbcf2473 100644
--- a/web/src/features/vehicle-systems/pages/MediaPlayerPage.test.tsx
+++ b/web/src/features/vehicle-systems/pages/MediaPlayerPage.test.tsx
@@ -44,6 +44,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
 
 import type { MediaSnapshot } from '@/api/types';
+import { setGlobalPrecision } from '@/lib/numberFormat';
 
 // ── i18n stub: resolve the string fallback (or an options-bag defaultValue) and
 //    interpolate {{var}} placeholders so assertions read on human copy. ────────
@@ -259,6 +260,7 @@ beforeEach(() => {
   mockHistory.mockReset();
   mockSelected.mockReset();
   mockRange.mockReset();
+  setGlobalPrecision(2);
 
   mockRange.mockReturnValue({ start: RANGE.start, end: RANGE.end, setRange: vi.fn() });
   mockSelected.mockReturnValue(selected(7));
@@ -399,6 +401,32 @@ describe('MediaPlayerPage — populated happy path', () => {
     // Volume gauge Y-axis ceiling matches the known max (peak 8, latest max 10).
     expect(JSON.parse(screen.getByTestId('volume-yaxis').getAttribute('data-domain') ?? 'null')).toEqual([0, 10]);
   });
+
+  it('formats history volume levels with the configured precision and preserves missing values', () => {
+    setGlobalPrecision(1);
+    mockHistory.mockReturnValue(
+      makeQuery({
+        data: [
+          snapshot({
+            id: 1,
+            audio_volume: 5.666666507720947,
+            audio_volume_max: 10.333333015441895,
+          }),
+          snapshot({
+            id: 2,
+            audio_volume: undefined,
+            audio_volume_max: undefined,
+          }),
+        ],
+      }),
+    );
+
+    renderPage();
+
+    expect(screen.getByText('5.7/10.3')).toBeInTheDocument();
+    expect(screen.getByText('—/—')).toBeInTheDocument();
+    expect(screen.queryByText('5.666666507720947/10.333333015441895')).not.toBeInTheDocument();
+  });
 });
 
 describe('MediaPlayerPage — avgVolume excludes missing readings (bug fix)', () => {
diff --git a/web/src/features/vehicle-systems/pages/MediaPlayerPage.tsx b/web/src/features/vehicle-systems/pages/MediaPlayerPage.tsx
index f9805cc0b8..94a95049af 100644
--- a/web/src/features/vehicle-systems/pages/MediaPlayerPage.tsx
+++ b/web/src/features/vehicle-systems/pages/MediaPlayerPage.tsx
@@ -46,6 +46,10 @@ const VOLUME_FALLBACK_MAX = 11;
 
 /* ── Helpers ───────────────────────────────────────────────────── */
 
+function formatVolumeLevel(value: number | null | undefined): string {
+  return typeof value === 'number' && Number.isFinite(value) ? fmtNumber(value) : '—';
+}
+
 /** Milliseconds → `m:ss` play-time label. Non-finite/negative input clamps to
  *  `0:00` so a malformed elapsed/duration never renders `-1:-01`. */
 function fmtPlayTime(ms: number): string {
@@ -240,7 +244,7 @@ export default function MediaPlayerPage() {
         sortable: true,
         render: (row) => (
           <Text as="span" variant="body" className="tabular-nums text-cyan-300">
-            {row.audio_volume ?? '—'}/{row.audio_volume_max ?? '—'}
+            {formatVolumeLevel(row.audio_volume)}/{formatVolumeLevel(row.audio_volume_max)}
           </Text>
         ),
       },
diff --git a/web/src/hooks/__tests__/useRangeState.test.tsx b/web/src/hooks/__tests__/useRangeState.test.tsx
index 323af59701..2c634fedb7 100644
--- a/web/src/hooks/__tests__/useRangeState.test.tsx
+++ b/web/src/hooks/__tests__/useRangeState.test.tsx
@@ -1,8 +1,8 @@
 import { renderHook, act } from '@testing-library/react';
 import { describe, expect, it, beforeEach, vi } from 'vitest';
-import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { MemoryRouter, Routes, Route, useSearchParams } from 'react-router-dom';
 import type { ReactNode } from 'react';
-import { useRangeState } from '../useRangeState';
+import { SHARED_RANGE_STORAGE_KEY, useRangeState } from '../useRangeState';
 
 function withRouter(initialEntries: string[]) {
   return function Wrapper({ children }: { children: ReactNode }) {
@@ -123,6 +123,120 @@ describe('useRangeState — localStorage persistence', () => {
     // Should fall back to 7d default rather than crash.
     expect(result.current.start).toMatch(/^\d{4}-\d{2}-\d{2}$/);
   });
+
+  it('inherits the last selection across page-specific storage keys', () => {
+    const firstPage = renderHook(
+      () => useRangeState({ persistKey: 'charging.list.range' }),
+      { wrapper: withRouter(['/charging']) },
+    );
+    act(() => {
+      firstPage.result.current.setRange({
+        start: '2025-02-01',
+        end: '2025-02-28',
+      });
+    });
+    firstPage.unmount();
+
+    const secondPage = renderHook(
+      () => useRangeState({ persistKey: 'drives.list.range' }),
+      { wrapper: withRouter(['/charging']) },
+    );
+    expect(secondPage.result.current.start).toBe('2025-02-01');
+    expect(secondPage.result.current.end).toBe('2025-02-28');
+  });
+
+  it('uses an explicit URL instead of the shared selection', () => {
+    window.localStorage.setItem(
+      SHARED_RANGE_STORAGE_KEY,
+      JSON.stringify({ start: '2024-06-01', end: '2024-06-30' }),
+    );
+    const { result } = renderHook(
+      () => useRangeState({ persistKey: 'drives.list.range' }),
+      { wrapper: withRouter(['/charging?from=2025-03-01&to=2025-03-31']) },
+    );
+
+    expect(result.current.start).toBe('2025-03-01');
+    expect(result.current.end).toBe('2025-03-31');
+    expect(JSON.parse(window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY) ?? '{}'))
+      .toEqual({ start: '2025-03-01', end: '2025-03-31' });
+  });
+
+  it('prefers shared storage over a legacy page-specific selection', () => {
+    window.localStorage.setItem(
+      SHARED_RANGE_STORAGE_KEY,
+      JSON.stringify({ start: '2025-04-01', end: '2025-04-30' }),
+    );
+    window.localStorage.setItem(
+      'charging.list.range',
+      JSON.stringify({ start: '2024-06-01', end: '2024-06-30' }),
+    );
+    const { result } = renderHook(
+      () => useRangeState({ persistKey: 'charging.list.range' }),
+      { wrapper: withRouter(['/charging']) },
+    );
+
+    expect(result.current.start).toBe('2025-04-01');
+    expect(result.current.end).toBe('2025-04-30');
+  });
+
+  it('promotes a non-default legacy page selection when shared storage is empty', () => {
+    window.localStorage.setItem(
+      'charging.list.range',
+      JSON.stringify({ start: '2024-06-01', end: '2024-06-30' }),
+    );
+    renderHook(
+      () => useRangeState({ persistKey: 'charging.list.range', defaultPresetId: '30d' }),
+      { wrapper: withRouter(['/charging']) },
+    );
+
+    expect(JSON.parse(window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY) ?? '{}'))
+      .toEqual({ start: '2024-06-01', end: '2024-06-30' });
+  });
+
+  it('ignores malformed shared storage and falls back to the page selection', () => {
+    window.localStorage.setItem(SHARED_RANGE_STORAGE_KEY, '{not json');
+    window.localStorage.setItem(
+      'charging.list.range',
+      JSON.stringify({ start: '2024-07-01', end: '2024-07-31' }),
+    );
+    const { result } = renderHook(
+      () => useRangeState({ persistKey: 'charging.list.range' }),
+      { wrapper: withRouter(['/charging']) },
+    );
+
+    expect(result.current.start).toBe('2024-07-01');
+    expect(result.current.end).toBe('2024-07-31');
+  });
+
+  it('clamps the page range without shrinking the shared selection', () => {
+    const shared = { start: '2020-01-01', end: '2025-01-31' };
+    window.localStorage.setItem(SHARED_RANGE_STORAGE_KEY, JSON.stringify(shared));
+    const { result } = renderHook(
+      () => useRangeState({
+        persistKey: 'limited-data.range',
+        minDate: '2024-01-01',
+      }),
+      { wrapper: withRouter(['/charging']) },
+    );
+
+    expect(result.current.start).toBe('2024-01-01');
+    expect(result.current.end).toBe('2025-01-31');
+    expect(JSON.parse(window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY) ?? '{}'))
+      .toEqual(shared);
+  });
+
+  it('stores the page default as the shared range after an explicit reset', () => {
+    const { result } = renderHook(
+      () => useRangeState({ defaultPresetId: '7d' }),
+      { wrapper: withRouter(['/charging?from=2025-01-01&to=2025-01-31']) },
+    );
+    act(() => result.current.reset());
+
+    const stored = JSON.parse(
+      window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY) ?? '{}',
+    );
+    expect(stored).toEqual({ start: result.current.start, end: result.current.end });
+  });
 });
 
 describe('useRangeState — preset id derivation', () => {
@@ -236,6 +350,29 @@ describe('useRangeState — atomic updates', () => {
     expect(urlSnap).toMatch(/^\d{4}-\d{2}-\d{2}\|\d{4}-\d{2}-\d{2}$/);
   });
 
+  it('updates related URL keys in the same navigation as the range', () => {
+    const { result } = renderHook(() => {
+      const range = useRangeState();
+      const [params] = useSearchParams();
+      return { range, query: params.toString() };
+    }, {
+      wrapper: withRouter(['/charging?page=4']),
+    });
+
+    act(() => {
+      result.current.range.setRangeWithUrlUpdates(
+        { start: '2025-05-01', end: '2025-05-31' },
+        { page: null, q: 'roadtrip' },
+      );
+    });
+
+    const params = new URLSearchParams(result.current.query);
+    expect(params.get('from')).toBe('2025-05-01');
+    expect(params.get('to')).toBe('2025-05-31');
+    expect(params.get('page')).toBeNull();
+    expect(params.get('q')).toBe('roadtrip');
+  });
+
   it('reset removes from/to/compare from the URL', () => {
     const { result } = renderHook(() => useRangeState({ enableCompare: true }), {
       wrapper: withRouter(['/charging?from=2025-01-01&to=2025-01-31&compare=true']),
diff --git a/web/src/hooks/useRangeState.ts b/web/src/hooks/useRangeState.ts
index 1040cb1993..63cdc86c15 100644
--- a/web/src/hooks/useRangeState.ts
+++ b/web/src/hooks/useRangeState.ts
@@ -8,8 +8,9 @@
  *   const [endDate,   setEndDate]   = useUrlString('to',   defaultEnd);
  *   const setRangeBatch = useUrlBatch();
  *
- * Precedence on initial mount: **URL > localStorage > defaultPresetId > today**.
- * Restoring from localStorage is done with `replace` (no history entry).
+ * Precedence on initial mount:
+ * **URL > shared range > page localStorage > defaultPresetId > today**.
+ * Restoring from storage is done with `replace` (no history entry).
  *
  * Why the asymmetric preset/calendar semantics matter:
  *   - Preset clicks (`setRange`) write {from,to} atomically and call onApply.
@@ -31,6 +32,8 @@ import { calendarRangeToInstants } from '@/lib/dateRange';
 
 const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
 
+export const SHARED_RANGE_STORAGE_KEY = 'teslasync.date-range.v1';
+
 export interface UseRangeStateOptions {
   /**
    * Preset id to use when neither URL nor localStorage yields a range.
@@ -101,8 +104,13 @@ export interface UseRangeStateReturn {
   compare: boolean;
   /** When `compare` is true: the previous period of equal length. */
   comparePrev: RangeValue | undefined;
-  /** Atomic setter — writes from/to in a single navigation. */
+  /** Atomic setter — writes from/to in one navigation. */
   setRange: (range: RangeValue) => void;
+  /** Writes the range and related URL keys in one navigation. */
+  setRangeWithUrlUpdates: (
+    range: RangeValue,
+    urlUpdates: Record<string, string | null | undefined>,
+  ) => void;
   /** Set range by preset id; falls back to current range when id is unknown. */
   setPreset: (id: string) => void;
   /** Toggle/set the comparison flag. */
@@ -117,31 +125,55 @@ function isValidIsoDate(s: string | null | undefined): s is string {
   return !Number.isNaN(t);
 }
 
-function clampToMin(date: string, minDate: string | undefined): string {
-  if (!minDate) return date;
-  return date < minDate ? minDate : date;
+function clampRange(range: RangeValue, minDate: string | undefined): RangeValue {
+  if (!minDate || range.start >= minDate) return range;
+  if (range.end < minDate) return { start: minDate, end: minDate };
+  return { start: minDate, end: range.end };
 }
 
-function loadFromStorage(persistKey: string | undefined): RangeValue | null {
-  if (!persistKey || typeof window === 'undefined') return null;
+function loadFromStorage(storageKey: string | undefined): RangeValue | null {
+  if (!storageKey || typeof window === 'undefined') return null;
   try {
-    const raw = window.localStorage.getItem(persistKey);
+    const raw = window.localStorage.getItem(storageKey);
     if (!raw) return null;
-    const parsed = JSON.parse(raw) as Partial<RangeValue> | null;
-    if (!parsed || !isValidIsoDate(parsed.start) || !isValidIsoDate(parsed.end)) return null;
-    if (parsed.start > parsed.end) return null;
-    return { start: parsed.start, end: parsed.end };
+    const parsed: unknown = JSON.parse(raw);
+    if (typeof parsed !== 'object' || parsed === null) return null;
+    const record = parsed as Record<string, unknown>;
+    if (
+      typeof record.start !== 'string' ||
+      typeof record.end !== 'string' ||
+      !isValidIsoDate(record.start) ||
+      !isValidIsoDate(record.end) ||
+      record.start > record.end
+    ) {
+      return null;
+    }
+    return { start: record.start, end: record.end };
   } catch {
     return null;
   }
 }
 
-function saveToStorage(persistKey: string | undefined, value: RangeValue) {
-  if (!persistKey || typeof window === 'undefined') return;
+function saveToStorage(storageKey: string | undefined, value: RangeValue) {
+  if (!storageKey || typeof window === 'undefined') return;
   try {
-    window.localStorage.setItem(persistKey, JSON.stringify(value));
+    window.localStorage.setItem(storageKey, JSON.stringify(value));
   } catch {
-    /* storage full / disabled — silently ignore */
+    // URL state remains authoritative when browser storage is unavailable.
+  }
+}
+
+function applyUrlUpdates(
+  params: URLSearchParams,
+  updates?: Record<string, string | null | undefined>,
+) {
+  if (!updates) return;
+  for (const [key, value] of Object.entries(updates)) {
+    if (value == null || value === '') {
+      params.delete(key);
+    } else {
+      params.set(key, value);
+    }
   }
 }
 
@@ -197,74 +229,134 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
     return preset?.resolve() ?? DATE_PRESETS[3].resolve();
   }, [defaultPresetId, minDate]);
 
-  // Resolve the effective range using URL > localStorage > fallback.
+  const sharedStored = loadFromStorage(SHARED_RANGE_STORAGE_KEY);
+  const pageStored = loadFromStorage(persistKey);
+  const stored = sharedStored ?? pageStored;
+  const urlRange: RangeValue | null =
+    isValidIsoDate(urlStart) &&
+    isValidIsoDate(urlEnd) &&
+    urlStart <= urlEnd
+      ? { start: urlStart, end: urlEnd }
+      : null;
+
+  // Resolve the effective range synchronously to avoid rendering a page
+  // default before the inherited selection is restored into the URL.
   const effective = useMemo<RangeValue>(() => {
-    if (isValidIsoDate(urlStart) && isValidIsoDate(urlEnd) && urlStart <= urlEnd) {
-      return {
-        start: clampToMin(urlStart, minDate),
-        end: clampToMin(urlEnd, minDate),
-      };
-    }
+    if (urlRange) return clampRange(urlRange, minDate);
+    if (stored) return clampRange(stored, minDate);
     return fallback;
-  }, [urlStart, urlEnd, minDate, fallback]);
+  }, [
+    urlRange?.start,
+    urlRange?.end,
+    stored?.start,
+    stored?.end,
+    minDate,
+    fallback,
+  ]);
 
-  // Restore from localStorage exactly once on mount when URL is empty.
-  // The ref guard prevents re-restoration when the user later clears the URL.
+  // Seed the shared preference from explicit URLs or legacy page storage,
+  // then expose inherited storage in the URL for bookmarks and copied links.
   const restoredRef = useRef(false);
   useEffect(() => {
     if (restoredRef.current) return;
     restoredRef.current = true;
-    if (isValidIsoDate(urlStart) && isValidIsoDate(urlEnd)) return;
-    const stored = loadFromStorage(persistKey);
+
+    if (urlRange) {
+      saveToStorage(SHARED_RANGE_STORAGE_KEY, urlRange);
+      return;
+    }
+
     if (!stored) return;
-    const start = clampToMin(stored.start, minDate);
-    const end = clampToMin(stored.end, minDate);
-    if (start === fallback.start && end === fallback.end) return;
+    const pageStoredIsFallback =
+      pageStored?.start === fallback.start && pageStored?.end === fallback.end;
+    if (!sharedStored && pageStored && !pageStoredIsFallback) {
+      saveToStorage(SHARED_RANGE_STORAGE_KEY, pageStored);
+    }
+    const inherited = clampRange(stored, minDate);
     setParams(
       (prev) => {
         const next = new URLSearchParams(prev);
-        next.set(fromKey, start);
-        next.set(toKey, end);
+        next.set(fromKey, inherited.start);
+        next.set(toKey, inherited.end);
         return next;
       },
       { replace: true },
     );
-    // Intentionally only run on mount — see ref guard.
-  }, []);
+  }, [
+    urlRange?.start,
+    urlRange?.end,
+    stored?.start,
+    stored?.end,
+    sharedStored?.start,
+    sharedStored?.end,
+    pageStored?.start,
+    pageStored?.end,
+    fallback.start,
+    fallback.end,
+    minDate,
+    fromKey,
+    toKey,
+    setParams,
+  ]);
 
-  // Persist on every effective change.
+  // Keep the page key current as a backward-compatible migration fallback.
   useEffect(() => {
     saveToStorage(persistKey, effective);
   }, [persistKey, effective.start, effective.end]);
 
-  const setRange = useCallback(
-    (range: RangeValue) => {
-      const start = clampToMin(range.start, minDate);
-      const end = clampToMin(range.end, minDate);
+  const commitRange = useCallback(
+    (
+      range: RangeValue,
+      urlUpdates?: Record<string, string | null | undefined>,
+    ) => {
+      if (
+        !isValidIsoDate(range.start) ||
+        !isValidIsoDate(range.end) ||
+        range.start > range.end
+      ) {
+        throw new Error(
+          `useRangeState: invalid date range "${range.start}" to "${range.end}"`,
+        );
+      }
+
+      const pageRange = clampRange(range, minDate);
+      saveToStorage(SHARED_RANGE_STORAGE_KEY, range);
+      saveToStorage(persistKey, pageRange);
       setParams(
         (prev) => {
           const next = new URLSearchParams(prev);
-          next.set(fromKey, start);
-          next.set(toKey, end);
+          applyUrlUpdates(next, urlUpdates);
+          next.set(fromKey, pageRange.start);
+          next.set(toKey, pageRange.end);
           return next;
         },
         { replace: true },
       );
     },
-    [setParams, fromKey, toKey, minDate],
+    [setParams, fromKey, toKey, minDate, persistKey],
+  );
+
+  const setRange = useCallback(
+    (range: RangeValue) => commitRange(range),
+    [commitRange],
+  );
+
+  const setRangeWithUrlUpdates = useCallback(
+    (
+      range: RangeValue,
+      urlUpdates: Record<string, string | null | undefined>,
+    ) => commitRange(range, urlUpdates),
+    [commitRange],
   );
 
   const setPreset = useCallback(
     (id: string) => {
       const preset = getDatePreset(id);
       if (!preset) return;
-      const r: DatePresetRange =
-        preset.id === 'all'
-          ? { start: resolveAllTimeStart(minDate), end: preset.resolve().end }
-          : preset.resolve();
+      const r: DatePresetRange = preset.resolve();
       setRange(r);
     },
-    [setRange, minDate],
+    [setRange],
   );
 
   const setCompare = useCallback(
@@ -283,6 +375,10 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
   );
 
   const reset = useCallback(() => {
+    const preset = getDatePreset(defaultPresetId) ?? getDatePreset('30d');
+    const defaultRange = preset?.resolve() ?? DATE_PRESETS[3].resolve();
+    saveToStorage(SHARED_RANGE_STORAGE_KEY, defaultRange);
+    saveToStorage(persistKey, clampRange(defaultRange, minDate));
     setParams(
       (prev) => {
         const next = new URLSearchParams(prev);
@@ -293,7 +389,15 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
       },
       { replace: true },
     );
-  }, [setParams, fromKey, toKey, compareKey]);
+  }, [
+    setParams,
+    fromKey,
+    toKey,
+    compareKey,
+    defaultPresetId,
+    persistKey,
+    minDate,
+  ]);
 
   const compare = enableCompare && urlCompare === 'true';
   const comparePrev = useMemo(
@@ -335,6 +439,7 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
     compare,
     comparePrev,
     setRange,
+    setRangeWithUrlUpdates,
     setPreset,
     setCompare,
     reset,
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index c9677327d2..0281f8e1fe 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -3474,7 +3474,7 @@
       "apply": "Apply",
       "cancel": "Cancel",
       "trigger": "Date range",
-      "pickRange": "Pick a date range",
+      "pickRange": "Custom range",
       "selectStart": "Select start date",
       "selectEnd": "Select end date",
       "compare": "Compare to previous period",
@@ -13466,32 +13466,346 @@
     }
   },
   "commands": {
+    "title": "Commands",
+    "pageTitle": "Vehicle Command Center",
+    "subtitle": "Review vehicle readiness, send remote actions, and verify recent outcomes.",
+    "viewHistory": "View history",
+    "selectVehicle": "Select vehicle",
+    "centerRegion": "Selected vehicle command center",
+    "reachableCount": "{{reachable}}/{{total}} recently reachable",
+    "statesError": "Failed to load vehicle states",
+    "noVehicles": "No vehicles found",
+    "connectFleet": "Connect your Tesla account and sync your fleet to start sending commands.",
     "search": {
       "placeholder": "Search commands...",
       "noResults": "No commands match your search",
-      "aria": "Search commands"
+      "aria": "Search commands",
+      "results": "Command search results",
+      "emptyTitle": "No matching commands"
     },
     "toggleFavorite": "Toggle favorite",
     "cat": {
-      "quickActions": "Quick Actions"
+      "quickActions": "Quick Actions",
+      "alerts": "Alerts & Location",
+      "charging": "Charging",
+      "climate": "Climate & Comfort",
+      "climateProtect": "Climate Protection",
+      "doors": "Doors & Trunk",
+      "drive": "Drive",
+      "media": "Media",
+      "navigation": "Navigation",
+      "schedules": "Schedules",
+      "security": "Security & Access",
+      "software": "Software",
+      "sunroof": "Sunroof",
+      "vehicle": "Vehicle",
+      "windows": "Windows"
     },
     "on": "ON",
     "off": "OFF",
-    "staleData": "Vehicle data is {{age}} old. The vehicle may be asleep or offline.",
-    "title": "Commands",
-    "pageTitle": "Vehicle Commands",
-    "subtitle": "Remote control center for your Tesla fleet",
-    "viewHistory": "View History",
-    "statesError": "Failed to load vehicle states",
-    "noVehicles": "No vehicles found",
-    "connectFleet": "Connect your Tesla account and sync your fleet to start sending commands.",
+    "domain": {
+      "aria": "Command domains",
+      "access": {
+        "title": "Access & Security",
+        "description": "Locks, security modes, openings, and drive authorization."
+      },
+      "comfort": {
+        "title": "Climate & Comfort",
+        "description": "Cabin temperature, seats, steering heat, and protection modes."
+      },
+      "charging": {
+        "title": "Charging & Schedules",
+        "description": "Charge controls, limits, and recurring vehicle schedules."
+      },
+      "vehicle": {
+        "title": "Vehicle Controls",
+        "description": "Location, navigation, software, identity, and media controls."
+      }
+    },
+    "status": {
+      "online": "Online",
+      "driving": "Driving",
+      "charging": "Charging",
+      "asleep": "Asleep",
+      "offline": "Offline",
+      "updating": "Updating",
+      "unknown": "Unknown"
+    },
+    "hero": {
+      "title": "Selected vehicle",
+      "selectedVehicle": "Selected vehicle",
+      "vehicleState": "Vehicle state",
+      "loadingState": "Loading vehicle state",
+      "battery": "Battery",
+      "range": "Estimated range",
+      "cabin": "Cabin",
+      "access": "Access state",
+      "noTelemetryTitle": "Live state unavailable",
+      "noTelemetry": "Commands remain available, but state-dependent controls may not reflect the vehicle yet."
+    },
+    "readiness": {
+      "title": "Command readiness",
+      "description": "Connection, telemetry, and motion context before a remote request is sent.",
+      "connection": "Connection",
+      "availability": "Command delivery",
+      "motion": "Motion context",
+      "telemetry": "Telemetry",
+      "checking": "Checking",
+      "stateUnknown": "State unknown",
+      "deliveryUncertain": "Delivery uncertain",
+      "wakeRecommended": "Wake recommended",
+      "ready": "Ready",
+      "motionUnknown": "Motion unknown",
+      "moving": "Vehicle moving",
+      "stationary": "No motion reported",
+      "freshnessUnknown": "Unknown",
+      "outdated": "Outdated",
+      "current": "Current",
+      "locked": "Locked",
+      "unlocked": "Unlocked",
+      "asleepHelp": "The vehicle is asleep. Commands remain selectable; waking it first can improve delivery speed.",
+      "offlineHelp": "The vehicle reports offline. Commands remain selectable, but delivery may fail until connectivity returns."
+    },
+    "freshness": {
+      "title": "Telemetry may be outdated",
+      "message": "Last vehicle update: {{age}}. Verify the car is awake and reachable before sending a safety-sensitive command."
+    },
+    "workspace": {
+      "title": "Command workspace",
+      "description": "Find an action by domain or search the complete command catalogue.",
+      "count": "{{count}} actions",
+      "domainCount": "{{count}} actions"
+    },
+    "feedback": {
+      "pending": "Sending {{command}}…",
+      "success": "{{command}} request sent to {{vehicle}}.",
+      "failed": "{{command}} was not accepted by {{vehicle}}.",
+      "error": "{{command}} failed: {{message}}",
+      "idle": "No command is currently running. Results will appear here."
+    },
+    "safety": {
+      "title": "Safety & execution",
+      "description": "Remote commands can affect a physical vehicle. Review context before acting.",
+      "requestTitle": "A request is not physical proof",
+      "requestBody": "Confirm the resulting vehicle state after access, charging, or drive-sensitive actions.",
+      "confirmTitle": "Sensitive actions add friction",
+      "confirmBody": "High-impact commands require confirmation, a countdown, or typed acknowledgement.",
+      "contextTitle": "Check the surroundings",
+      "contextBody": "Verify the vehicle is parked and clear before opening panels or enabling drive access.",
+      "contextDisconnected": "Current vehicle context may be unavailable while it is asleep or offline."
+    },
+    "activity": {
+      "title": "Recent command activity",
+      "description": "Latest delivery outcomes for the selected vehicle.",
+      "resource": "Command activity",
+      "loading": "Loading command activity",
+      "emptyTitle": "No commands sent yet",
+      "empty": "Command outcomes will appear here after the first request.",
+      "succeeded": "Succeeded",
+      "failed": "Failed",
+      "pending": "Pending",
+      "failedReason": "{{status}} · {{reason}}",
+      "unknownCommand": "{{command}}",
+      "commands": {
+        "unlock": "Unlock",
+        "sentry_off": "Sentry Off",
+        "valet_off": "Valet Off",
+        "guest_mode_off": "Guest Mode Off",
+        "climate_off": "Climate Off",
+        "bioweapon_off": "Bioweapon Off",
+        "climate_keeper_off": "Climate Keeper Off",
+        "charge_stop": "Stop Charging"
+      }
+    },
+    "fallback": {
+      "unavailable": "Vehicle controls are unavailable until fleet data can be loaded.",
+      "loadingFleet": "Loading your fleet",
+      "fleet": "Vehicle fleet"
+    },
     "confirm": {
-      "typeToConfirm": "Type \"{{word}}\" to confirm:"
+      "default": "Are you sure?",
+      "typeToConfirm": "Type \"{{word}}\" to confirm:",
+      "countdown": "Confirm ({{seconds}}s)"
+    },
+    "input": {
+      "required": "Required",
+      "pin": "Enter a 4-digit PIN",
+      "wholeNumber": "Enter a whole number",
+      "min": "Minimum: {{min}}",
+      "max": "Maximum: {{max}}",
+      "decimal": "Enter a valid number"
+    },
+    "select": {
+      "noOptions": "No options available"
     },
     "toast": {
       "success": "Command sent successfully",
       "failed": "Command failed",
       "error": "Command failed: {{message}}"
+    },
+    "alerts": {
+      "boombox": "Boombox",
+      "findMyCar": "Find my car",
+      "flashLights": "Flash Lights",
+      "horn": "Horn",
+      "locatePing": "Locate Ping",
+      "randomFart": "Random fart"
+    },
+    "charging": {
+      "amperage": "Amperage",
+      "charge": "Charge",
+      "chargePort": "Charge Port",
+      "close": "Close",
+      "dailyMode": "Daily mode",
+      "enterAmps": "Enter charging amps (e.g., 16, 32, 48):",
+      "enterLimit": "Enter charge limit % (50–100):",
+      "maxRange": "Max Range",
+      "open": "Open",
+      "percent": "Charge %",
+      "setAmps": "Set Amps",
+      "setLimit": "Set Limit",
+      "standard": "Standard",
+      "tripMode": "Trip mode"
+    },
+    "climate": {
+      "bioweapon": "Bioweapon",
+      "campMode": "Camp Mode",
+      "climate": "Climate",
+      "climateKeeper": "Climate Keeper",
+      "cop": "Overheat Protect",
+      "copFan": "Overheat Protect",
+      "copHigh": "High",
+      "copHighTemperature": "100°F / 40°C",
+      "copLow": "Low",
+      "copLowTemperature": "90°F / 30°C",
+      "copMedium": "Medium",
+      "copMediumTemperature": "95°F / 35°C",
+      "copOff": "Overheat Protect",
+      "copOn": "On (AC)",
+      "copTemp": "COP Temp",
+      "default": "Default",
+      "defenseMode": "Defense Mode",
+      "dogMode": "Dog Mode",
+      "driver": "Driver",
+      "driverPassenger": "Driver/Passenger",
+      "enterTemp": "Enter temperature in °C (e.g., 21):",
+      "fanOnly": "Fan only",
+      "keepMode": "Keep",
+      "maxPrecondition": "Max Precondition",
+      "off": "OFF",
+      "override": "Override",
+      "resetPrecondition": "Reset Precondition",
+      "seatCool": "Seat Cool",
+      "seatHeat": "Seat Heat",
+      "setLevel": "Low/Med/High",
+      "setTemps": "Set Temps",
+      "steeringHeat": "Steering Heat",
+      "toggle": "Toggle"
+    },
+    "doors": {
+      "frunk": "Frunk",
+      "open": "Open",
+      "trunk": "Trunk"
+    },
+    "drive": {
+      "confirmRemoteStart": "This will enable keyless driving for 2 minutes. Continue?",
+      "keylessDrive": "Keyless drive",
+      "remoteStart": "Remote Start"
+    },
+    "homelink": {
+      "garage": "Garage door",
+      "latitude": "Latitude",
+      "longitude": "Longitude",
+      "trigger": "HomeLink",
+      "triggerTitle": "Enter vehicle coordinates"
+    },
+    "media": {
+      "enterVolume": "Enter volume level (0.0 – 11.0):",
+      "nextFav": "Next Favorite",
+      "nextTrack": "Next Track",
+      "playPause": "Play / Pause",
+      "prevFav": "Prev Favorite",
+      "prevTrack": "Prev Track",
+      "volumeDown": "Volume Down",
+      "volumeUp": "Volume Up"
+    },
+    "nav": {
+      "byId": "By ID",
+      "coordinates": "Lat / Lon",
+      "enterAddress": "Enter destination address:",
+      "enterScId": "Enter Supercharger ID:",
+      "latitude": "Latitude",
+      "longitude": "Longitude",
+      "sendAddress": "Send Address",
+      "sendGPS": "Send GPS",
+      "sendGPSTitle": "Enter GPS coordinates",
+      "supercharger": "Supercharger",
+      "toVehicleNav": "To vehicle nav"
+    },
+    "schedules": {
+      "addCharge": "Add Charge Schedule",
+      "addPrecondition": "Add Precondition",
+      "byId": "By ID",
+      "enterScheduleId": "Enter schedule ID to remove:",
+      "midnight": "Midnight daily",
+      "morning": "7 AM daily",
+      "removeCharge": "Remove Schedule",
+      "removePrecondition": "Remove Precondition"
+    },
+    "security": {
+      "admin": "Admin",
+      "clearPin": "Clear PIN",
+      "clearSpeedPin": "Clear Speed PIN",
+      "confirmClearDrivePin": "Clear PIN to Drive without authentication?",
+      "confirmClearPin": "Clear speed limit PIN without authentication?",
+      "confirmErase": "This will erase all user data from the vehicle touchscreen. Continue?",
+      "enable": "Enable",
+      "enterPin": "Enter 4-digit PIN:",
+      "enterSpeedLimit": "Enter speed limit (50-90 MPH):",
+      "enterSpeedPin": "Enter 4-digit PIN:",
+      "enterValetPin": "Enter 4-digit valet PIN:",
+      "eraseData": "Erase Data",
+      "guestMode": "Guest Mode",
+      "guestOnly": "Guest mode only",
+      "lock": "Lock",
+      "pinToDrive": "PIN to Drive",
+      "requiresPin": "Requires PIN",
+      "resetPin": "Reset PIN",
+      "resetValetPin": "Reset Valet PIN",
+      "sentry": "Sentry",
+      "setMph": "Set MPH",
+      "speedActivate": "Activate",
+      "speedDeactivate": "Deactivate",
+      "speedLimit": "Speed Limit",
+      "speedLimitMode": "Speed Limit",
+      "valetMode": "Valet Mode",
+      "wakeUp": "Wake Up",
+      "wakeVehicle": "Wake vehicle"
+    },
+    "software": {
+      "cancelUpdate": "Cancel Update",
+      "enterDelay": "Install in how many minutes? (0 = now, 120 = 2 hours)",
+      "installNow": "Install now",
+      "scheduleUpdate": "Schedule Update",
+      "stopPending": "Stop pending"
+    },
+    "sunroof": {
+      "close": "Sunroof",
+      "closeMode": "Close",
+      "stop": "Sunroof",
+      "stopMode": "Stop",
+      "vent": "Sunroof",
+      "ventMode": "Vent"
+    },
+    "vehicle": {
+      "fallbackName": "Vehicle {{id}}",
+      "changeName": "Change name",
+      "enterName": "Enter new vehicle name:",
+      "rename": "Rename"
+    },
+    "windows": {
+      "close": "Close Windows",
+      "vent": "Vent Windows"
     }
   },
   "fsm": {

From 81035a3ecd99f0c0ca72b5f4d29387bd4f5872d9 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sat, 8 Aug 2026 18:30:05 -0700
Subject: [PATCH 02/15] feat: add Tesla vehicle management

Adds vehicle management APIs, partner-token support, cached metadata, enterprise operations, privacy-safe audit logging, and a React workspace with confirmation flows for paid and state-changing requests.
---
 internal/api/api_call_log_middleware.go       |  11 +-
 internal/api/api_call_log_middleware_test.go  |  36 ++
 internal/api/router.go                        |  57 +-
 .../api/router_vehicle_management_test.go     | 122 +++++
 internal/api/vehicleinfo/handler.go           | 495 ++++++++++++++++--
 internal/api/vehicleinfo/handler_test.go      | 401 +++++++++++++-
 internal/tesla/client_auth.go                 | 163 +++++-
 internal/tesla/client_vehicle_data.go         | 134 ++++-
 .../tesla/client_vehicle_management_test.go   | 370 +++++++++++++
 slo/catalog.yaml                              |  10 +
 web/src/App.tsx                               |   2 +
 web/src/__tests__/lazyRoutes.list.ts          |   1 +
 web/src/api/hooks/useVehicles.test.tsx        |  86 +++
 web/src/api/hooks/useVehicles.ts              | 114 +++-
 web/src/api/types.ts                          |  32 ++
 web/src/components/layout/Layout.test.tsx     |  10 +
 web/src/components/layout/Layout.tsx          |   2 +
 .../system/pages/CommandsPage.test.tsx        |   3 +
 .../EnterprisePayerCard.tsx                   | 117 +++++
 .../EnterpriseRolesCard.tsx                   |  39 ++
 .../ManagementEndpointBody.tsx                | 139 +++++
 .../ManagementEndpointCard.tsx                | 137 +++++
 .../vehicle-management/OpaqueJsonDialog.tsx   | 113 ++++
 .../PaidVehicleSpecsCard.tsx                  |  79 +++
 .../vehicle-management/StructuredDataView.tsx | 125 +++++
 .../VehicleManagementWorkspace.test.tsx       | 410 +++++++++++++++
 .../VehicleManagementWorkspace.tsx            |  83 +++
 .../VehicleMetadataCards.tsx                  | 116 ++++
 .../vehicle-management/VehiclePricingCard.tsx |  57 ++
 .../components/vehicle-management/index.ts    |   1 +
 .../vehicle-management/managementJson.test.ts |  51 ++
 .../vehicle-management/managementJson.ts      | 124 +++++
 .../pages/VehicleManagementPage.test.tsx      | 185 +++++++
 .../vehicles/pages/VehicleManagementPage.tsx  | 154 ++++++
 web/src/i18n/en.json                          | 140 +++++
 web/src/lib/routeRegistry.ts                  |   1 +
 36 files changed, 4005 insertions(+), 115 deletions(-)
 create mode 100644 internal/api/router_vehicle_management_test.go
 create mode 100644 internal/tesla/client_vehicle_management_test.go
 create mode 100644 web/src/features/vehicles/components/vehicle-management/EnterprisePayerCard.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/EnterpriseRolesCard.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/OpaqueJsonDialog.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/PaidVehicleSpecsCard.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/StructuredDataView.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/VehicleMetadataCards.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/VehiclePricingCard.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/index.ts
 create mode 100644 web/src/features/vehicles/components/vehicle-management/managementJson.test.ts
 create mode 100644 web/src/features/vehicles/components/vehicle-management/managementJson.ts
 create mode 100644 web/src/features/vehicles/pages/VehicleManagementPage.test.tsx
 create mode 100644 web/src/features/vehicles/pages/VehicleManagementPage.tsx

diff --git a/internal/api/api_call_log_middleware.go b/internal/api/api_call_log_middleware.go
index 72aec3e8e2..3fa458f30a 100644
--- a/internal/api/api_call_log_middleware.go
+++ b/internal/api/api_call_log_middleware.go
@@ -61,6 +61,15 @@ const (
 // that may carry secret material; matching values are replaced with REDACTED.
 var redactKeyPattern = regexp.MustCompile(`(?i)token|key|secret|password|cookie`)
 
+// opaqueVehicleManagementPathPattern identifies pricing and state-changing
+// payer requests whose undocumented payloads and responses must never be
+// captured. An optional trailing slash is covered so a router redirect or 404
+// cannot persist a submitted opaque object. The local vehicle id remains
+// available to the handler's structured operation/status log.
+var opaqueVehicleManagementPathPattern = regexp.MustCompile(
+	`^/api/v1/(?:tesla/vehicle-pricing|vehicles/[^/]+/enterprise-payer)/?$`,
+)
+
 // APICallLogger is the writer port the middleware depends on.
 //
 // Deprecated: use apilog.Logger. Will be removed in phase-48.
@@ -134,7 +143,7 @@ func DefaultAPILogSkip(path string) bool {
 		"/api/v1/system/status":
 		return true
 	}
-	return false
+	return opaqueVehicleManagementPathPattern.MatchString(path)
 }
 
 // APICallLogMiddleware enqueues one sanitized log entry per non-skipped request.
diff --git a/internal/api/api_call_log_middleware_test.go b/internal/api/api_call_log_middleware_test.go
index 4571c736cc..53c0e40c69 100644
--- a/internal/api/api_call_log_middleware_test.go
+++ b/internal/api/api_call_log_middleware_test.go
@@ -149,6 +149,8 @@ func newTestRouterWithLogger(t *testing.T, store APICallLogger, captureBodies bo
 		r.Get("/events", func(w http.ResponseWriter, r *http.Request) { w.WriteHeader(http.StatusOK) })
 		r.Get("/sse-token", func(w http.ResponseWriter, r *http.Request) { w.WriteHeader(http.StatusOK) })
 		r.Get("/system/status", func(w http.ResponseWriter, r *http.Request) { w.WriteHeader(http.StatusOK) })
+		r.Post("/tesla/vehicle-pricing", echoBody)
+		r.Post("/vehicles/{vehicleID}/enterprise-payer", echoBody)
 
 		// Recorded paths
 		r.Get("/vehicles", func(w http.ResponseWriter, r *http.Request) {
@@ -349,6 +351,7 @@ func TestT04_SkippedPaths_NoRowsEnqueued(t *testing.T) {
 		"/api/v1/sse-token",
 		"/api/v1/system/status",
 	}
+
 	for _, p := range skipPaths {
 		resp, err := http.Get(srv.URL + p)
 		if err != nil {
@@ -361,6 +364,39 @@ func TestT04_SkippedPaths_NoRowsEnqueued(t *testing.T) {
 	}
 }
 
+func TestOpaqueVehicleManagementBodiesAreNeverCaptured(t *testing.T) {
+	store := &fakeAPILogStore{}
+	srv := httptest.NewServer(newTestRouterWithLogger(t, store, true))
+	defer srv.Close()
+
+	tests := []string{
+		"/api/v1/tesla/vehicle-pricing",
+		"/api/v1/tesla/vehicle-pricing/",
+		"/api/v1/vehicles/42/enterprise-payer",
+		"/api/v1/vehicles/42/enterprise-payer/",
+	}
+	for _, path := range tests {
+		req, err := http.NewRequest(
+			http.MethodPost,
+			srv.URL+path,
+			strings.NewReader(`{"payload":{"possible_pii":"must-not-persist"}}`),
+		)
+		if err != nil {
+			t.Fatalf("build request for %s: %v", path, err)
+		}
+		req.Header.Set("Content-Type", "application/json")
+		resp, err := http.DefaultClient.Do(req)
+		if err != nil {
+			t.Fatalf("POST %s: %v", path, err)
+		}
+		resp.Body.Close()
+	}
+
+	if got := len(store.Entries()); got != 0 {
+		t.Fatalf("opaque management requests enqueued %d audit row(s), want 0", got)
+	}
+}
+
 // T05: redaction of Authorization, Cookie, and ?api_key= query param.
 // Non-secret query params are kept; visible body-capture tokens never
 // appear in the stored body.
diff --git a/internal/api/router.go b/internal/api/router.go
index 535b11a80b..ab2b56c865 100644
--- a/internal/api/router.go
+++ b/internal/api/router.go
@@ -209,7 +209,6 @@ import (
 	"github.com/ev-dev-labs/teslasync/internal/database"
 	actioncenterdb "github.com/ev-dev-labs/teslasync/internal/database/actioncenter"
 	advancedintelligencedb "github.com/ev-dev-labs/teslasync/internal/database/advancedintelligence"
-	ownershipinteldb "github.com/ev-dev-labs/teslasync/internal/database/ownershipintel"
 	aidb "github.com/ev-dev-labs/teslasync/internal/database/ai"
 	dbalert "github.com/ev-dev-labs/teslasync/internal/database/alert"
 	auditdb "github.com/ev-dev-labs/teslasync/internal/database/audit"
@@ -221,6 +220,7 @@ import (
 	geofencedb "github.com/ev-dev-labs/teslasync/internal/database/geofence"
 	dbnotif "github.com/ev-dev-labs/teslasync/internal/database/notification"
 	dbobs "github.com/ev-dev-labs/teslasync/internal/database/observability"
+	ownershipinteldb "github.com/ev-dev-labs/teslasync/internal/database/ownershipintel"
 	quiethoursdb "github.com/ev-dev-labs/teslasync/internal/database/quiethours"
 	settingsdb "github.com/ev-dev-labs/teslasync/internal/database/settings"
 	signaldb "github.com/ev-dev-labs/teslasync/internal/database/signal"
@@ -376,12 +376,12 @@ import (
 	"github.com/ev-dev-labs/teslasync/internal/app/actioncentersvc"
 	"github.com/ev-dev-labs/teslasync/internal/app/adminobssvc"
 	"github.com/ev-dev-labs/teslasync/internal/app/advancedintelligencesvc"
-	"github.com/ev-dev-labs/teslasync/internal/app/ownershipintelsvc"
 	"github.com/ev-dev-labs/teslasync/internal/app/auditviewersvc"
 	"github.com/ev-dev-labs/teslasync/internal/app/chargingsvc"
 	"github.com/ev-dev-labs/teslasync/internal/app/dashboardsvc"
 	"github.com/ev-dev-labs/teslasync/internal/app/exportsvc"
 	"github.com/ev-dev-labs/teslasync/internal/app/gdprexportsvc"
+	"github.com/ev-dev-labs/teslasync/internal/app/ownershipintelsvc"
 	"github.com/ev-dev-labs/teslasync/internal/app/vehiclesvc"
 	handlermw "github.com/ev-dev-labs/teslasync/internal/handler/middleware"
 	v1handlers "github.com/ev-dev-labs/teslasync/internal/handler/v1"
@@ -391,6 +391,43 @@ import (
 	"github.com/ev-dev-labs/teslasync/internal/tracing"
 )
 
+type vehicleManagementRouteHandler interface {
+	VehicleOptions(http.ResponseWriter, *http.Request)
+	RefreshVehicleOptions(http.ResponseWriter, *http.Request)
+	VehicleSpecs(http.ResponseWriter, *http.Request)
+	RefreshVehicleSpecs(http.ResponseWriter, *http.Request)
+	SubscriptionEligibility(http.ResponseWriter, *http.Request)
+	RefreshSubscriptionEligibility(http.ResponseWriter, *http.Request)
+	UpgradeEligibility(http.ResponseWriter, *http.Request)
+	RefreshUpgradeEligibility(http.ResponseWriter, *http.Request)
+	WarrantyDetails(http.ResponseWriter, *http.Request)
+	RefreshWarrantyDetails(http.ResponseWriter, *http.Request)
+	VehiclePricing(http.ResponseWriter, *http.Request)
+	EnterpriseRoles(http.ResponseWriter, *http.Request)
+	RefreshEnterpriseRoles(http.ResponseWriter, *http.Request)
+	EnterprisePayer(http.ResponseWriter, *http.Request)
+}
+
+func mountVehicleScopedManagementRoutes(r chi.Router, h vehicleManagementRouteHandler) {
+	r.Get("/options", h.VehicleOptions)
+	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/options/refresh", h.RefreshVehicleOptions)
+	r.Get("/specs", h.VehicleSpecs)
+	r.With(httprate.LimitByIP(2, 1*time.Minute)).Post("/specs/refresh", h.RefreshVehicleSpecs)
+	r.Get("/subscriptions", h.SubscriptionEligibility)
+	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/subscriptions/refresh", h.RefreshSubscriptionEligibility)
+	r.Get("/upgrades", h.UpgradeEligibility)
+	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/upgrades/refresh", h.RefreshUpgradeEligibility)
+	r.Get("/enterprise-roles", h.EnterpriseRoles)
+	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/enterprise-roles/refresh", h.RefreshEnterpriseRoles)
+	r.With(httprate.LimitByIP(2, 1*time.Minute)).Post("/enterprise-payer", h.EnterprisePayer)
+}
+
+func mountAccountVehicleManagementRoutes(r chi.Router, h vehicleManagementRouteHandler) {
+	r.Get("/tesla/warranty", h.WarrantyDetails)
+	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/tesla/warranty/refresh", h.RefreshWarrantyDetails)
+	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/tesla/vehicle-pricing", h.VehiclePricing)
+}
+
 // NewRouter creates and configures the main HTTP router with all API routes,
 // middleware (logging, recovery, CORS, rate limiting, security headers), and
 // a static file server for the SPA frontend. It wires up handler dependencies
@@ -3053,16 +3090,7 @@ func NewRouter(db *database.DB, teslaClient *tesla.Client, mqttClient *mqtt.Clie
 				// Vehicle info: mobile access, options, specs
 				r.Get("/mobile-enabled", vehicleInfoHandler.MobileEnabled)
 				r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/mobile-enabled/refresh", vehicleInfoHandler.RefreshMobileEnabled)
-				r.Get("/options", vehicleInfoHandler.VehicleOptions)
-				r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/options/refresh", vehicleInfoHandler.RefreshVehicleOptions)
-				r.Get("/specs", vehicleInfoHandler.VehicleSpecs)
-				r.With(httprate.LimitByIP(2, 1*time.Minute)).Post("/specs/refresh", vehicleInfoHandler.RefreshVehicleSpecs)
-
-				// Vehicle lifecycle: subscriptions & upgrades
-				r.Get("/subscriptions", vehicleInfoHandler.SubscriptionEligibility)
-				r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/subscriptions/refresh", vehicleInfoHandler.RefreshSubscriptionEligibility)
-				r.Get("/upgrades", vehicleInfoHandler.UpgradeEligibility)
-				r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/upgrades/refresh", vehicleInfoHandler.RefreshUpgradeEligibility)
+				mountVehicleScopedManagementRoutes(r, vehicleInfoHandler)
 
 				// /guard endpoints restored.
 				// Status + Events are read-only and rate-limit-free
@@ -3224,9 +3252,8 @@ func NewRouter(db *database.DB, teslaClient *tesla.Client, mqttClient *mqtt.Clie
 			r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/profile/refresh", teslaUserProfileHandler.RefreshProfile)
 		})
 
-		// Tesla Warranty Details (account-level)
-		r.Get("/tesla/warranty", vehicleInfoHandler.WarrantyDetails)
-		r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/tesla/warranty/refresh", vehicleInfoHandler.RefreshWarrantyDetails)
+		// Tesla Vehicle Management account-level endpoints.
+		mountAccountVehicleManagementRoutes(r, vehicleInfoHandler)
 
 		// Geofences
 		r.Route("/geofences", func(r chi.Router) {
diff --git a/internal/api/router_vehicle_management_test.go b/internal/api/router_vehicle_management_test.go
new file mode 100644
index 0000000000..6be69661a4
--- /dev/null
+++ b/internal/api/router_vehicle_management_test.go
@@ -0,0 +1,122 @@
+package api
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"github.com/go-chi/chi/v5"
+)
+
+type vehicleManagementRouteFake struct {
+	operation string
+}
+
+func (f *vehicleManagementRouteFake) respond(operation string, w http.ResponseWriter) {
+	f.operation = operation
+	w.WriteHeader(http.StatusNoContent)
+}
+
+func (f *vehicleManagementRouteFake) VehicleOptions(w http.ResponseWriter, _ *http.Request) {
+	f.respond("options", w)
+}
+
+func (f *vehicleManagementRouteFake) RefreshVehicleOptions(w http.ResponseWriter, _ *http.Request) {
+	f.respond("options_refresh", w)
+}
+
+func (f *vehicleManagementRouteFake) VehicleSpecs(w http.ResponseWriter, _ *http.Request) {
+	f.respond("specs", w)
+}
+
+func (f *vehicleManagementRouteFake) RefreshVehicleSpecs(w http.ResponseWriter, _ *http.Request) {
+	f.respond("specs_refresh", w)
+}
+
+func (f *vehicleManagementRouteFake) SubscriptionEligibility(w http.ResponseWriter, _ *http.Request) {
+	f.respond("subscriptions", w)
+}
+
+func (f *vehicleManagementRouteFake) RefreshSubscriptionEligibility(w http.ResponseWriter, _ *http.Request) {
+	f.respond("subscriptions_refresh", w)
+}
+
+func (f *vehicleManagementRouteFake) UpgradeEligibility(w http.ResponseWriter, _ *http.Request) {
+	f.respond("upgrades", w)
+}
+
+func (f *vehicleManagementRouteFake) RefreshUpgradeEligibility(w http.ResponseWriter, _ *http.Request) {
+	f.respond("upgrades_refresh", w)
+}
+
+func (f *vehicleManagementRouteFake) WarrantyDetails(w http.ResponseWriter, _ *http.Request) {
+	f.respond("warranty", w)
+}
+
+func (f *vehicleManagementRouteFake) RefreshWarrantyDetails(w http.ResponseWriter, _ *http.Request) {
+	f.respond("warranty_refresh", w)
+}
+
+func (f *vehicleManagementRouteFake) VehiclePricing(w http.ResponseWriter, _ *http.Request) {
+	f.respond("pricing", w)
+}
+
+func (f *vehicleManagementRouteFake) EnterpriseRoles(w http.ResponseWriter, _ *http.Request) {
+	f.respond("enterprise_roles", w)
+}
+
+func (f *vehicleManagementRouteFake) RefreshEnterpriseRoles(w http.ResponseWriter, _ *http.Request) {
+	f.respond("enterprise_roles_refresh", w)
+}
+
+func (f *vehicleManagementRouteFake) EnterprisePayer(w http.ResponseWriter, _ *http.Request) {
+	f.respond("enterprise_payer", w)
+}
+
+func TestVehicleManagementRoutes(t *testing.T) {
+	tests := []struct {
+		name      string
+		method    string
+		path      string
+		operation string
+	}{
+		{"options cached GET", http.MethodGet, "/api/v1/vehicles/7/options", "options"},
+		{"options refresh", http.MethodPost, "/api/v1/vehicles/7/options/refresh", "options_refresh"},
+		{"paid specs cached GET", http.MethodGet, "/api/v1/vehicles/7/specs", "specs"},
+		{"paid specs refresh", http.MethodPost, "/api/v1/vehicles/7/specs/refresh", "specs_refresh"},
+		{"warranty cached GET", http.MethodGet, "/api/v1/tesla/warranty", "warranty"},
+		{"warranty refresh", http.MethodPost, "/api/v1/tesla/warranty/refresh", "warranty_refresh"},
+		{"subscriptions cached GET", http.MethodGet, "/api/v1/vehicles/7/subscriptions", "subscriptions"},
+		{"subscriptions refresh", http.MethodPost, "/api/v1/vehicles/7/subscriptions/refresh", "subscriptions_refresh"},
+		{"upgrades cached GET", http.MethodGet, "/api/v1/vehicles/7/upgrades", "upgrades"},
+		{"upgrades refresh", http.MethodPost, "/api/v1/vehicles/7/upgrades/refresh", "upgrades_refresh"},
+		{"pricing query", http.MethodPost, "/api/v1/tesla/vehicle-pricing", "pricing"},
+		{"enterprise roles cached GET", http.MethodGet, "/api/v1/vehicles/7/enterprise-roles", "enterprise_roles"},
+		{"enterprise roles refresh", http.MethodPost, "/api/v1/vehicles/7/enterprise-roles/refresh", "enterprise_roles_refresh"},
+		{"enterprise payer", http.MethodPost, "/api/v1/vehicles/7/enterprise-payer", "enterprise_payer"},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			handler := &vehicleManagementRouteFake{}
+			router := chi.NewRouter()
+			router.Route("/api/v1", func(r chi.Router) {
+				mountAccountVehicleManagementRoutes(r, handler)
+				r.Route("/vehicles/{vehicleID}", func(r chi.Router) {
+					mountVehicleScopedManagementRoutes(r, handler)
+				})
+			})
+
+			req := httptest.NewRequest(tt.method, tt.path, nil)
+			rec := httptest.NewRecorder()
+			router.ServeHTTP(rec, req)
+
+			if rec.Code != http.StatusNoContent {
+				t.Fatalf("status = %d, want 204", rec.Code)
+			}
+			if handler.operation != tt.operation {
+				t.Fatalf("operation = %q, want %q", handler.operation, tt.operation)
+			}
+		})
+	}
+}
diff --git a/internal/api/vehicleinfo/handler.go b/internal/api/vehicleinfo/handler.go
index fe9195ca66..5ffaf93831 100644
--- a/internal/api/vehicleinfo/handler.go
+++ b/internal/api/vehicleinfo/handler.go
@@ -3,7 +3,9 @@ package vehicleinfo
 import (
 	"context"
 	"encoding/json"
+	"errors"
 	"fmt"
+	"io"
 	"net/http"
 	"time"
 
@@ -17,6 +19,13 @@ import (
 	"github.com/ev-dev-labs/teslasync/internal/tesla"
 
 	"github.com/rs/zerolog/log"
+	"go.opentelemetry.io/otel"
+	"go.opentelemetry.io/otel/trace"
+)
+
+const (
+	maxOpaqueRequestBodyBytes int64 = 16 * 1024
+	teslaInfoRequestTimeout         = 30 * time.Second
 )
 
 // teslaInfoClient is the slice of *tesla.Client the handler needs to fetch
@@ -31,6 +40,9 @@ type teslaInfoClient interface {
 	GetSubscriptionEligibility(ctx context.Context, vin string) ([]byte, int, error)
 	GetUpgradeEligibility(ctx context.Context, vin string) ([]byte, int, error)
 	GetWarrantyDetails(ctx context.Context) ([]byte, int, error)
+	GetVehiclePricing(ctx context.Context, payload tesla.JSONRequestObject) ([]byte, int, error)
+	GetEnterpriseRoles(ctx context.Context, vin string) ([]byte, int, error)
+	SetEnterprisePayer(ctx context.Context, vin string, payload tesla.JSONRequestObject) ([]byte, int, error)
 }
 
 // userConfigStore is the subset of *tesladb.TeslaUserConfigRepo used to read
@@ -69,6 +81,56 @@ type vehicleInfoEnvelope struct {
 	FetchedAt *string         `json:"fetched_at"`
 }
 
+type operationResultEnvelope struct {
+	Data json.RawMessage `json:"data"`
+}
+
+type vehiclePricingRequest struct {
+	Payload tesla.JSONRequestObject `json:"payload"`
+}
+
+type enterprisePayerRequest struct {
+	Payload   tesla.JSONRequestObject `json:"payload"`
+	Confirmed bool                    `json:"confirmed"`
+}
+
+type paidRequest struct {
+	Confirmed bool `json:"confirmed"`
+}
+
+type tokenRequirement uint8
+
+const (
+	userTokenRequired tokenRequirement = iota
+	partnerTokenRequired
+)
+
+type requestValidationError struct {
+	status  int
+	message string
+}
+
+func startHandlerSpan(r *http.Request, name string) (*http.Request, trace.Span) {
+	ctx, span := otel.Tracer("api").Start(r.Context(), name)
+	return r.WithContext(ctx), span
+}
+
+func traceID(ctx context.Context) string {
+	spanContext := trace.SpanContextFromContext(ctx)
+	if !spanContext.IsValid() {
+		return ""
+	}
+	return spanContext.TraceID().String()
+}
+
+func localVehicleID(r *http.Request) int64 {
+	vehicleID, err := apiparams.URLParamInt64(r, "vehicleID")
+	if err != nil {
+		return 0
+	}
+	return vehicleID
+}
+
 // resolveVIN maps the {vehicleID} URL param to the vehicle's VIN and the
 // HTTP status a caller should surface on failure:
 //
@@ -103,7 +165,11 @@ func (h *Handler) resolveVINOrWriteError(w http.ResponseWriter, r *http.Request)
 		case http.StatusNotFound:
 			httpx.WriteError(w, status, "vehicle not found")
 		case http.StatusInternalServerError:
-			log.Error().Err(err).Msg("failed to resolve vehicle for vehicle-info endpoint")
+			trace.SpanFromContext(r.Context()).RecordError(err)
+			log.Error().
+				Err(err).
+				Str("trace_id", traceID(r.Context())).
+				Msg("failed to resolve vehicle for vehicle-info endpoint")
 			httpx.WriteError(w, status, "failed to resolve vehicle")
 		default:
 			httpx.WriteError(w, status, "invalid vehicle ID")
@@ -118,24 +184,30 @@ func (h *Handler) resolveVINOrWriteError(w http.ResponseWriter, r *http.Request)
 // MobileEnabled returns stored mobile_enabled status from DB.
 // GET /api/v1/vehicles/{vehicleID}/mobile-enabled
 func (h *Handler) MobileEnabled(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.mobile_enabled")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
-	h.getVehicleConfig(w, r, "mobile_enabled:"+vin)
+	h.getVehicleConfig(w, r, "mobile_enabled:"+vin, "mobile_enabled", localVehicleID(r))
 }
 
 // RefreshMobileEnabled fetches mobile_enabled from Tesla and saves to DB.
 // POST /api/v1/vehicles/{vehicleID}/mobile-enabled/refresh
 func (h *Handler) RefreshMobileEnabled(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.refresh_mobile_enabled")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
 	configKey := "mobile_enabled:" + vin
-	h.refreshVehicleConfig(w, r, configKey, "mobile_enabled", vin, func() ([]byte, int, error) {
-		return h.teslaClient.GetMobileEnabled(r.Context(), vin)
-	}, false)
+	h.refreshVehicleConfig(w, r, configKey, "mobile_enabled", localVehicleID(r), func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.GetMobileEnabled(ctx, vin)
+	}, userTokenRequired, false)
 }
 
 // ---------- Vehicle Options ----------
@@ -143,24 +215,30 @@ func (h *Handler) RefreshMobileEnabled(w http.ResponseWriter, r *http.Request) {
 // VehicleOptions returns stored option codes from DB.
 // GET /api/v1/vehicles/{vehicleID}/options
 func (h *Handler) VehicleOptions(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.options")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
-	h.getVehicleConfig(w, r, "vehicle_options:"+vin)
+	h.getVehicleConfig(w, r, "vehicle_options:"+vin, "vehicle_options", localVehicleID(r))
 }
 
 // RefreshVehicleOptions fetches options from Tesla and saves to DB.
 // POST /api/v1/vehicles/{vehicleID}/options/refresh
 func (h *Handler) RefreshVehicleOptions(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.refresh_options")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
 	configKey := "vehicle_options:" + vin
-	h.refreshVehicleConfig(w, r, configKey, "vehicle_options", vin, func() ([]byte, int, error) {
-		return h.teslaClient.GetVehicleOptions(r.Context(), vin)
-	}, false)
+	h.refreshVehicleConfig(w, r, configKey, "vehicle_options", localVehicleID(r), func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.GetVehicleOptions(ctx, vin)
+	}, userTokenRequired, false)
 }
 
 // ---------- Vehicle Specs ----------
@@ -168,11 +246,14 @@ func (h *Handler) RefreshVehicleOptions(w http.ResponseWriter, r *http.Request)
 // VehicleSpecs returns stored specs from DB.
 // GET /api/v1/vehicles/{vehicleID}/specs
 func (h *Handler) VehicleSpecs(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.specs")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
-	h.getVehicleConfig(w, r, "vehicle_specs:"+vin)
+	h.getVehicleConfig(w, r, "vehicle_specs:"+vin, "vehicle_specs", localVehicleID(r))
 }
 
 // RefreshVehicleSpecs fetches specs from Tesla using a partner token and saves to DB.
@@ -180,33 +261,53 @@ func (h *Handler) VehicleSpecs(w http.ResponseWriter, r *http.Request) {
 // redundant calls if specs were already fetched within the last 24 hours.
 // POST /api/v1/vehicles/{vehicleID}/specs/refresh
 func (h *Handler) RefreshVehicleSpecs(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.refresh_specs")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
+
+	var request paidRequest
+	if validationErr := decodeLimitedJSON(w, r, &request); validationErr != nil {
+		httpx.WriteError(w, validationErr.status, validationErr.message)
+		return
+	}
+	if !request.Confirmed {
+		httpx.WriteError(w, http.StatusBadRequest, "explicit confirmation is required for this paid Tesla request")
+		return
+	}
+
+	vehicleID := localVehicleID(r)
 	configKey := "vehicle_specs:" + vin
 
 	// Freshness guard: reject if already fetched within 24 hours
 	existing, err := h.configRepo.GetByType(r.Context(), configKey)
 	if err != nil {
-		log.Error().Err(err).Str("config_key", configKey).Msg("failed to check specs freshness")
+		span.RecordError(errors.New("vehicle specs freshness lookup failed"))
+		log.Error().
+			Str("trace_id", traceID(r.Context())).
+			Int64("vehicle_id", vehicleID).
+			Str("operation", "vehicle_specs").
+			Msg("failed to check specs freshness")
 		httpx.WriteError(w, http.StatusInternalServerError, "failed to check specs freshness")
 		return
 	}
 	if existing != nil && time.Since(existing.FetchedAt) < 24*time.Hour {
 		log.Warn().
-			Str("vin", vin).
+			Int64("vehicle_id", vehicleID).
 			Time("fetched_at", existing.FetchedAt).
 			Msg("vehicle specs refresh rejected — already fetched within 24 hours (costs $0.10/call)")
 		httpx.WriteError(w, http.StatusTooManyRequests, "specs were already fetched within the last 24 hours — this endpoint costs $0.10 per call")
 		return
 	}
 
-	log.Warn().Str("vin", vin).Msg("refreshing vehicle specs from Tesla — this call costs $0.10")
+	log.Warn().Int64("vehicle_id", vehicleID).Msg("refreshing vehicle specs from Tesla — this call costs $0.10")
 
-	h.refreshVehicleConfig(w, r, configKey, "vehicle_specs", vin, func() ([]byte, int, error) {
-		return h.teslaClient.GetVehicleSpecs(r.Context(), vin)
-	}, true)
+	h.refreshVehicleConfig(w, r, configKey, "vehicle_specs", vehicleID, func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.GetVehicleSpecs(ctx, vin)
+	}, partnerTokenRequired, true)
 }
 
 // ---------- Subscription Eligibility ----------
@@ -214,24 +315,30 @@ func (h *Handler) RefreshVehicleSpecs(w http.ResponseWriter, r *http.Request) {
 // SubscriptionEligibility returns stored subscription eligibility from DB.
 // GET /api/v1/vehicles/{vehicleID}/subscriptions
 func (h *Handler) SubscriptionEligibility(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.subscriptions")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
-	h.getVehicleConfig(w, r, "subscriptions:"+vin)
+	h.getVehicleConfig(w, r, "subscriptions:"+vin, "subscriptions", localVehicleID(r))
 }
 
 // RefreshSubscriptionEligibility fetches subscription eligibility from Tesla and saves to DB.
 // POST /api/v1/vehicles/{vehicleID}/subscriptions/refresh
 func (h *Handler) RefreshSubscriptionEligibility(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.refresh_subscriptions")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
 	configKey := "subscriptions:" + vin
-	h.refreshVehicleConfig(w, r, configKey, "subscriptions", vin, func() ([]byte, int, error) {
-		return h.teslaClient.GetSubscriptionEligibility(r.Context(), vin)
-	}, false)
+	h.refreshVehicleConfig(w, r, configKey, "subscriptions", localVehicleID(r), func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.GetSubscriptionEligibility(ctx, vin)
+	}, userTokenRequired, false)
 }
 
 // ---------- Upgrade Eligibility ----------
@@ -239,24 +346,30 @@ func (h *Handler) RefreshSubscriptionEligibility(w http.ResponseWriter, r *http.
 // UpgradeEligibility returns stored upgrade eligibility from DB.
 // GET /api/v1/vehicles/{vehicleID}/upgrades
 func (h *Handler) UpgradeEligibility(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.upgrades")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
-	h.getVehicleConfig(w, r, "upgrades:"+vin)
+	h.getVehicleConfig(w, r, "upgrades:"+vin, "upgrades", localVehicleID(r))
 }
 
 // RefreshUpgradeEligibility fetches upgrade eligibility from Tesla and saves to DB.
 // POST /api/v1/vehicles/{vehicleID}/upgrades/refresh
 func (h *Handler) RefreshUpgradeEligibility(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.refresh_upgrades")
+	defer span.End()
+
 	vin, ok := h.resolveVINOrWriteError(w, r)
 	if !ok {
 		return
 	}
 	configKey := "upgrades:" + vin
-	h.refreshVehicleConfig(w, r, configKey, "upgrades", vin, func() ([]byte, int, error) {
-		return h.teslaClient.GetUpgradeEligibility(r.Context(), vin)
-	}, false)
+	h.refreshVehicleConfig(w, r, configKey, "upgrades", localVehicleID(r), func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.GetUpgradeEligibility(ctx, vin)
+	}, userTokenRequired, false)
 }
 
 // ---------- Warranty Details ----------
@@ -264,25 +377,147 @@ func (h *Handler) RefreshUpgradeEligibility(w http.ResponseWriter, r *http.Reque
 // WarrantyDetails returns stored warranty details from DB.
 // GET /api/v1/tesla/warranty
 func (h *Handler) WarrantyDetails(w http.ResponseWriter, r *http.Request) {
-	h.getVehicleConfig(w, r, "warranty")
+	r, span := startHandlerSpan(r, "api.vehicle_info.warranty")
+	defer span.End()
+
+	h.getVehicleConfig(w, r, "warranty", "warranty", 0)
 }
 
 // RefreshWarrantyDetails fetches warranty details from Tesla and saves to DB.
 // POST /api/v1/tesla/warranty/refresh
 func (h *Handler) RefreshWarrantyDetails(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_info.refresh_warranty")
+	defer span.End()
+
 	configKey := "warranty"
-	h.refreshVehicleConfig(w, r, configKey, "warranty", "", func() ([]byte, int, error) {
-		return h.teslaClient.GetWarrantyDetails(r.Context())
-	}, false)
+	h.refreshVehicleConfig(w, r, configKey, "warranty", 0, func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.GetWarrantyDetails(ctx)
+	}, userTokenRequired, false)
+}
+
+// ---------- Vehicle Pricing ----------
+
+// VehiclePricing forwards a validated opaque JSON object to Tesla's
+// read-only pricing query. The undocumented request object is never persisted.
+// POST /api/v1/tesla/vehicle-pricing
+func (h *Handler) VehiclePricing(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_management.pricing")
+	defer span.End()
+
+	var req vehiclePricingRequest
+	if validationErr := decodeLimitedJSON(w, r, &req); validationErr != nil {
+		httpx.WriteError(w, validationErr.status, validationErr.message)
+		return
+	}
+	if len(req.Payload) == 0 {
+		httpx.WriteError(w, http.StatusBadRequest, "payload must be a non-empty JSON object")
+		return
+	}
+
+	h.executePartnerOperation(w, r, "vehicle_pricing", 0, func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.GetVehiclePricing(ctx, req.Payload)
+	})
+}
+
+// ---------- Enterprise Roles ----------
+
+// EnterpriseRoles returns cached enterprise roles for the selected vehicle.
+// GET /api/v1/vehicles/{vehicleID}/enterprise-roles
+func (h *Handler) EnterpriseRoles(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_management.enterprise_roles")
+	defer span.End()
+
+	vin, ok := h.resolveVINOrWriteError(w, r)
+	if !ok {
+		return
+	}
+	h.getVehicleConfig(
+		w,
+		r,
+		"enterprise_roles:"+vin,
+		"enterprise_roles",
+		localVehicleID(r),
+	)
+}
+
+// RefreshEnterpriseRoles fetches enterprise roles from Tesla and stores only
+// the response under the existing per-VIN tesla_user_config convention.
+// POST /api/v1/vehicles/{vehicleID}/enterprise-roles/refresh
+func (h *Handler) RefreshEnterpriseRoles(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_management.refresh_enterprise_roles")
+	defer span.End()
+
+	vin, ok := h.resolveVINOrWriteError(w, r)
+	if !ok {
+		return
+	}
+	h.refreshVehicleConfig(
+		w,
+		r,
+		"enterprise_roles:"+vin,
+		"enterprise_roles",
+		localVehicleID(r),
+		func(ctx context.Context) ([]byte, int, error) {
+			return h.teslaClient.GetEnterpriseRoles(ctx, vin)
+		},
+		partnerTokenRequired,
+		false,
+	)
+}
+
+// EnterprisePayer changes enterprise billing responsibility. The explicit
+// wrapper confirmation is checked before any Fleet API call, and neither the
+// request nor response is persisted.
+// POST /api/v1/vehicles/{vehicleID}/enterprise-payer
+func (h *Handler) EnterprisePayer(w http.ResponseWriter, r *http.Request) {
+	r, span := startHandlerSpan(r, "api.vehicle_management.enterprise_payer")
+	defer span.End()
+
+	vin, ok := h.resolveVINOrWriteError(w, r)
+	if !ok {
+		return
+	}
+	vehicleID := localVehicleID(r)
+
+	var req enterprisePayerRequest
+	if validationErr := decodeLimitedJSON(w, r, &req); validationErr != nil {
+		httpx.WriteError(w, validationErr.status, validationErr.message)
+		return
+	}
+	if !req.Confirmed {
+		httpx.WriteError(w, http.StatusPreconditionFailed, "explicit payer change confirmation is required")
+		return
+	}
+	if len(req.Payload) == 0 {
+		httpx.WriteError(w, http.StatusBadRequest, "payload must be a non-empty JSON object")
+		return
+	}
+
+	h.executePartnerOperation(w, r, "enterprise_payer", vehicleID, func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.SetEnterprisePayer(ctx, vin, req.Payload)
+	})
 }
 
 // ---------- Shared helpers ----------
 
-// getVehicleConfig returns stored per-vehicle config data with fetched_at metadata.
-func (h *Handler) getVehicleConfig(w http.ResponseWriter, r *http.Request, configKey string) {
+// getVehicleConfig returns stored per-vehicle config data with fetched_at
+// metadata. configKey may contain a VIN and must never be logged.
+func (h *Handler) getVehicleConfig(
+	w http.ResponseWriter,
+	r *http.Request,
+	configKey, operation string,
+	vehicleID int64,
+) {
 	cfg, err := h.configRepo.GetByType(r.Context(), configKey)
 	if err != nil {
-		log.Error().Err(err).Str("config_key", configKey).Msg("failed to fetch vehicle config")
+		trace.SpanFromContext(r.Context()).RecordError(errors.New("vehicle management cache read failed"))
+		event := log.Error().
+			Str("trace_id", traceID(r.Context())).
+			Str("operation", operation)
+		if vehicleID > 0 {
+			event = event.Int64("vehicle_id", vehicleID)
+		}
+		event.Msg("failed to fetch cached Tesla vehicle management data")
 		httpx.WriteError(w, http.StatusInternalServerError, "failed to fetch vehicle info")
 		return
 	}
@@ -305,40 +540,44 @@ func (h *Handler) getVehicleConfig(w http.ResponseWriter, r *http.Request, confi
 // wrapped as {"enabled": <bool>} before persisting.
 func (h *Handler) refreshVehicleConfig(
 	w http.ResponseWriter, r *http.Request,
-	configKey, configType, vin string,
-	fetch func() ([]byte, int, error),
+	configKey, configType string,
+	vehicleID int64,
+	fetch func(context.Context) ([]byte, int, error),
+	requirement tokenRequirement,
 	isPaidEndpoint bool,
 ) {
-	if !h.teslaClient.HasValidToken() {
-		httpx.WriteError(w, http.StatusUnauthorized, "not authenticated with Tesla")
+	if requirement == userTokenRequired && !h.teslaClient.HasValidToken() {
+		httpx.WriteTeslaTokenExpired(w)
 		return
 	}
 
-	log.Info().Str("config_type", configType).Str("vin", vin).Msg("refreshing vehicle info from Tesla")
-
-	body, status, err := fetch()
-	if err != nil {
-		log.Error().Err(err).Str("config_type", configType).Str("vin", vin).Msg("tesla vehicle info API error")
-		httpx.WriteError(w, http.StatusBadGateway, "failed to fetch from Tesla")
-		return
+	logEvent := log.Info().Str("operation", configType)
+	if vehicleID > 0 {
+		logEvent = logEvent.Int64("vehicle_id", vehicleID)
 	}
-	if status < 200 || status >= 300 {
-		log.Error().Int("status", status).Str("config_type", configType).Str("vin", vin).Msg("tesla vehicle info non-2xx")
-		httpx.WriteError(w, http.StatusBadGateway, fmt.Sprintf("Tesla API returned status %d", status))
+	logEvent.Msg("refreshing Tesla vehicle management data")
+
+	ctx, cancel := context.WithTimeout(r.Context(), teslaInfoRequestTimeout)
+	defer cancel()
+	body, status, err := fetch(ctx)
+	if err != nil || status < http.StatusOK || status >= http.StatusMultipleChoices {
+		h.writeTeslaFailure(w, r, configType, vehicleID, status, err, requirement)
 		return
 	}
 
-	// Unwrap Tesla envelope: {"response": ...}
-	var envelope struct {
-		Response json.RawMessage `json:"response"`
-	}
-	if err := json.Unmarshal(body, &envelope); err != nil {
-		log.Error().Err(err).Str("config_type", configType).Msg("failed to parse tesla response")
+	response, err := unwrapTeslaResponse(body)
+	if err != nil {
+		trace.SpanFromContext(r.Context()).RecordError(errors.New("invalid Tesla response"))
+		log.Error().
+			Str("trace_id", traceID(r.Context())).
+			Str("operation", configType).
+			Int("status", status).
+			Msg("failed to parse Tesla vehicle management response")
 		httpx.WriteError(w, http.StatusInternalServerError, "failed to parse Tesla response")
 		return
 	}
 
-	data := string(envelope.Response)
+	data := string(response)
 
 	// mobile_enabled returns a bare boolean (true/false) — wrap as
 	// {"enabled": <bool>}. The empty/null check below runs AFTER this guard,
@@ -354,14 +593,160 @@ func (h *Handler) refreshVehicleConfig(
 	}
 
 	if err := h.configRepo.Upsert(r.Context(), configKey, data); err != nil {
-		log.Error().Err(err).Str("config_key", configKey).Msg("failed to save vehicle info")
+		trace.SpanFromContext(r.Context()).RecordError(errors.New("vehicle management cache write failed"))
+		event := log.Error().
+			Str("trace_id", traceID(r.Context())).
+			Str("operation", configType)
+		if vehicleID > 0 {
+			event = event.Int64("vehicle_id", vehicleID)
+		}
+		event.Msg("failed to save Tesla vehicle management data")
 		httpx.WriteError(w, http.StatusInternalServerError, "failed to save vehicle info")
 		return
 	}
 
 	if isPaidEndpoint {
-		log.Info().Str("vin", vin).Str("config_type", configType).Msg("paid Tesla API call completed and persisted")
+		log.Info().
+			Int64("vehicle_id", vehicleID).
+			Str("operation", configType).
+			Int("status", status).
+			Msg("paid Tesla API call completed and persisted")
+	}
+
+	h.getVehicleConfig(w, r, configKey, configType, vehicleID)
+}
+
+func (h *Handler) executePartnerOperation(
+	w http.ResponseWriter,
+	r *http.Request,
+	operation string,
+	vehicleID int64,
+	fetch func(context.Context) ([]byte, int, error),
+) {
+	ctx, cancel := context.WithTimeout(r.Context(), teslaInfoRequestTimeout)
+	defer cancel()
+
+	body, status, err := fetch(ctx)
+	if err != nil || status < http.StatusOK || status >= http.StatusMultipleChoices {
+		h.writeTeslaFailure(w, r, operation, vehicleID, status, err, partnerTokenRequired)
+		return
+	}
+
+	response, err := unwrapTeslaResponse(body)
+	if err != nil {
+		trace.SpanFromContext(r.Context()).RecordError(errors.New("invalid private Tesla response"))
+		event := log.Error().
+			Str("trace_id", traceID(r.Context())).
+			Str("operation", operation).
+			Int("status", status)
+		if vehicleID > 0 {
+			event = event.Int64("vehicle_id", vehicleID)
+		}
+		event.Msg("failed to parse private Tesla vehicle management response")
+		httpx.WriteError(w, http.StatusBadGateway, "Tesla returned an invalid response")
+		return
+	}
+
+	event := log.Info().
+		Str("operation", operation).
+		Int("status", status)
+	if vehicleID > 0 {
+		event = event.Int64("vehicle_id", vehicleID)
+	}
+	event.Msg("Tesla vehicle management operation completed")
+	httpx.WriteJSON(w, http.StatusOK, operationResultEnvelope{Data: response})
+}
+
+func (h *Handler) writeTeslaFailure(
+	w http.ResponseWriter,
+	r *http.Request,
+	operation string,
+	vehicleID int64,
+	status int,
+	err error,
+	requirement tokenRequirement,
+) {
+	trace.SpanFromContext(r.Context()).RecordError(errors.New("Tesla vehicle management operation failed"))
+	event := log.Error().
+		Str("trace_id", traceID(r.Context())).
+		Str("operation", operation).
+		Int("status", status)
+	if vehicleID > 0 {
+		event = event.Int64("vehicle_id", vehicleID)
+	}
+	event.Msg("Tesla vehicle management operation failed")
+
+	if errors.Is(err, tesla.ErrPartnerCredentialsMissing) {
+		httpx.WriteError(w, http.StatusPreconditionFailed, "Tesla partner credentials are not configured")
+		return
+	}
+
+	switch status {
+	case http.StatusUnauthorized:
+		if requirement == userTokenRequired {
+			httpx.WriteTeslaTokenExpired(w)
+			return
+		}
+		httpx.WriteError(w, status, "Tesla partner authentication failed")
+	case http.StatusPaymentRequired:
+		httpx.WriteError(w, status, "Tesla requires payment or billing setup for this capability")
+	case http.StatusForbidden:
+		httpx.WriteError(w, status, "Tesla account lacks the required Fleet API scope or enterprise access")
+	case http.StatusPreconditionFailed:
+		httpx.WriteError(w, status, "Tesla account or vehicle does not meet this capability's prerequisites")
+	case http.StatusTooManyRequests:
+		httpx.WriteError(w, status, "Tesla rate limit reached; try again later")
+	default:
+		if status >= http.StatusBadRequest && status < http.StatusInternalServerError {
+			httpx.WriteError(w, status, "Tesla rejected the vehicle management request")
+			return
+		}
+		httpx.WriteError(w, http.StatusBadGateway, "failed to complete Tesla vehicle management request")
 	}
+}
 
-	h.getVehicleConfig(w, r, configKey)
+func unwrapTeslaResponse(body []byte) (json.RawMessage, error) {
+	var envelope struct {
+		Response json.RawMessage `json:"response"`
+	}
+	if err := json.Unmarshal(body, &envelope); err != nil {
+		return nil, fmt.Errorf("decode Tesla response envelope: %w", err)
+	}
+	if len(envelope.Response) == 0 {
+		return json.RawMessage("null"), nil
+	}
+	return envelope.Response, nil
+}
+
+func decodeLimitedJSON(
+	w http.ResponseWriter,
+	r *http.Request,
+	dst interface{},
+) *requestValidationError {
+	r.Body = http.MaxBytesReader(w, r.Body, maxOpaqueRequestBodyBytes)
+	decoder := json.NewDecoder(r.Body)
+	decoder.DisallowUnknownFields()
+
+	if err := decoder.Decode(dst); err != nil {
+		var maxBytesErr *http.MaxBytesError
+		if errors.As(err, &maxBytesErr) {
+			return &requestValidationError{
+				status:  http.StatusRequestEntityTooLarge,
+				message: "request body is too large",
+			}
+		}
+		if errors.Is(err, io.EOF) {
+			return &requestValidationError{status: http.StatusBadRequest, message: "request body is required"}
+		}
+		return &requestValidationError{status: http.StatusBadRequest, message: "invalid request body"}
+	}
+
+	var trailing json.RawMessage
+	if err := decoder.Decode(&trailing); !errors.Is(err, io.EOF) {
+		return &requestValidationError{
+			status:  http.StatusBadRequest,
+			message: "request body must contain a single JSON object",
+		}
+	}
+	return nil
 }
diff --git a/internal/api/vehicleinfo/handler_test.go b/internal/api/vehicleinfo/handler_test.go
index a5b5cb8760..b2d5a5bade 100644
--- a/internal/api/vehicleinfo/handler_test.go
+++ b/internal/api/vehicleinfo/handler_test.go
@@ -58,8 +58,9 @@ var (
 )
 
 type teslaCall struct {
-	method string
-	vin    string
+	method  string
+	vin     string
+	payload tesla.JSONRequestObject
 }
 
 // fakeTeslaClient returns the same canned (body,status,err) for every fetch
@@ -103,6 +104,27 @@ func (f *fakeTeslaClient) GetWarrantyDetails(_ context.Context) ([]byte, int, er
 	return f.record("warranty", "")
 }
 
+func (f *fakeTeslaClient) GetVehiclePricing(
+	_ context.Context,
+	payload tesla.JSONRequestObject,
+) ([]byte, int, error) {
+	f.calls = append(f.calls, teslaCall{method: "vehicle_pricing", payload: payload})
+	return f.body, f.status, f.err
+}
+
+func (f *fakeTeslaClient) GetEnterpriseRoles(_ context.Context, vin string) ([]byte, int, error) {
+	return f.record("enterprise_roles", vin)
+}
+
+func (f *fakeTeslaClient) SetEnterprisePayer(
+	_ context.Context,
+	vin string,
+	payload tesla.JSONRequestObject,
+) ([]byte, int, error) {
+	f.calls = append(f.calls, teslaCall{method: "enterprise_payer", vin: vin, payload: payload})
+	return f.body, f.status, f.err
+}
+
 type upsertCall struct {
 	configType string
 	data       string
@@ -176,6 +198,17 @@ func vehReq(method, vehicleID string) *http.Request {
 	return r
 }
 
+func vehJSONReq(method, vehicleID, body string) *http.Request {
+	r := httptest.NewRequest(method, "/x", strings.NewReader(body))
+	r.Header.Set("Content-Type", "application/json")
+	if vehicleID != "" {
+		rctx := chi.NewRouteContext()
+		rctx.URLParams.Add("vehicleID", vehicleID)
+		r = r.WithContext(context.WithValue(r.Context(), chi.RouteCtxKey, rctx))
+	}
+	return r
+}
+
 func decodeEnvelope(t *testing.T, rec *httptest.ResponseRecorder) vehicleInfoEnvelope {
 	t.Helper()
 	var env vehicleInfoEnvelope
@@ -329,6 +362,7 @@ func TestGetHandlers_ConfigKeyRouting(t *testing.T) {
 		{"specs", (*Handler).VehicleSpecs, "vehicle_specs:" + testVIN, true},
 		{"subscriptions", (*Handler).SubscriptionEligibility, "subscriptions:" + testVIN, true},
 		{"upgrades", (*Handler).UpgradeEligibility, "upgrades:" + testVIN, true},
+		{"enterprise-roles", (*Handler).EnterpriseRoles, "enterprise_roles:" + testVIN, true},
 		{"warranty", (*Handler).WarrantyDetails, "warranty", false},
 	}
 	for _, tt := range tests {
@@ -448,13 +482,15 @@ func TestRefresh_SuccessAndPersistence(t *testing.T) {
 		wantKey    string
 		wantData   string
 		needsVIN   bool
+		confirmed  bool
 	}{
-		{"mobile-enabled", (*Handler).RefreshMobileEnabled, `{"response":true}`, "mobile_enabled", "mobile_enabled:" + testVIN, `{"enabled":true}`, true},
-		{"options", (*Handler).RefreshVehicleOptions, `{"response":{"codes":["A"]}}`, "vehicle_options", "vehicle_options:" + testVIN, `{"codes":["A"]}`, true},
-		{"specs", (*Handler).RefreshVehicleSpecs, `{"response":{"weight":1000}}`, "vehicle_specs", "vehicle_specs:" + testVIN, `{"weight":1000}`, true},
-		{"subscriptions", (*Handler).RefreshSubscriptionEligibility, `{"response":{"eligible":true}}`, "subscriptions", "subscriptions:" + testVIN, `{"eligible":true}`, true},
-		{"upgrades", (*Handler).RefreshUpgradeEligibility, `{"response":{"tier":"x"}}`, "upgrades", "upgrades:" + testVIN, `{"tier":"x"}`, true},
-		{"warranty", (*Handler).RefreshWarrantyDetails, `{"response":{"active":true}}`, "warranty", "warranty", `{"active":true}`, false},
+		{"mobile-enabled", (*Handler).RefreshMobileEnabled, `{"response":true}`, "mobile_enabled", "mobile_enabled:" + testVIN, `{"enabled":true}`, true, false},
+		{"options", (*Handler).RefreshVehicleOptions, `{"response":{"codes":["A"]}}`, "vehicle_options", "vehicle_options:" + testVIN, `{"codes":["A"]}`, true, false},
+		{"specs", (*Handler).RefreshVehicleSpecs, `{"response":{"weight":1000}}`, "vehicle_specs", "vehicle_specs:" + testVIN, `{"weight":1000}`, true, true},
+		{"subscriptions", (*Handler).RefreshSubscriptionEligibility, `{"response":{"eligible":true}}`, "subscriptions", "subscriptions:" + testVIN, `{"eligible":true}`, true, false},
+		{"upgrades", (*Handler).RefreshUpgradeEligibility, `{"response":{"tier":"x"}}`, "upgrades", "upgrades:" + testVIN, `{"tier":"x"}`, true, false},
+		{"enterprise-roles", (*Handler).RefreshEnterpriseRoles, `{"response":{"roles":["fleet_manager"]}}`, "enterprise_roles", "enterprise_roles:" + testVIN, `{"roles":["fleet_manager"]}`, true, false},
+		{"warranty", (*Handler).RefreshWarrantyDetails, `{"response":{"active":true}}`, "warranty", "warranty", `{"active":true}`, false, false},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
@@ -467,7 +503,11 @@ func TestRefresh_SuccessAndPersistence(t *testing.T) {
 			if tt.needsVIN {
 				vehicleID = "7"
 			}
-			tt.call(h, rec, vehReq(http.MethodPost, vehicleID))
+			req := vehReq(http.MethodPost, vehicleID)
+			if tt.confirmed {
+				req = vehJSONReq(http.MethodPost, vehicleID, `{"confirmed":true}`)
+			}
+			tt.call(h, rec, req)
 
 			if rec.Code != http.StatusOK {
 				t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
@@ -528,10 +568,10 @@ func TestRefresh_ErrorPaths(t *testing.T) {
 			wantStatus: http.StatusBadGateway,
 		},
 		{
-			name:       "tesla non-2xx → 502",
+			name:       "tesla authorization failure remains 403",
 			tc:         &fakeTeslaClient{validToken: true, status: http.StatusForbidden, body: []byte(`{"error":"nope"}`)},
 			cfg:        newFakeConfigStore(),
-			wantStatus: http.StatusBadGateway,
+			wantStatus: http.StatusForbidden,
 		},
 		{
 			name:       "unparseable tesla json → 500",
@@ -684,7 +724,7 @@ func TestRefreshVehicleSpecs_FreshnessGuard(t *testing.T) {
 			h := newHandler(tc, cfg, &fakeVehicleFinder{vehicle: okVehicle()})
 
 			rec := httptest.NewRecorder()
-			h.RefreshVehicleSpecs(rec, vehReq(http.MethodPost, "7"))
+			h.RefreshVehicleSpecs(rec, vehJSONReq(http.MethodPost, "7", `{"confirmed":true}`))
 
 			if rec.Code != tt.wantStatus {
 				t.Fatalf("status = %d, want %d; body=%s", rec.Code, tt.wantStatus, rec.Body.String())
@@ -696,6 +736,25 @@ func TestRefreshVehicleSpecs_FreshnessGuard(t *testing.T) {
 	}
 }
 
+func TestRefreshVehicleSpecs_RequiresExplicitConfirmation(t *testing.T) {
+	tc := &fakeTeslaClient{validToken: true, status: http.StatusOK, body: []byte(`{"response":{}}`)}
+	cfg := newFakeConfigStore()
+	h := newHandler(tc, cfg, &fakeVehicleFinder{vehicle: okVehicle()})
+
+	rec := httptest.NewRecorder()
+	h.RefreshVehicleSpecs(rec, vehJSONReq(http.MethodPost, "7", `{"confirmed":false}`))
+
+	if rec.Code != http.StatusBadRequest {
+		t.Fatalf("status = %d, want 400; body=%s", rec.Code, rec.Body.String())
+	}
+	if len(tc.calls) != 0 {
+		t.Fatalf("Tesla calls = %d, want 0", len(tc.calls))
+	}
+	if len(cfg.upserts) != 0 {
+		t.Fatalf("upserts = %d, want 0", len(cfg.upserts))
+	}
+}
+
 // A specs refresh that is guarded away must persist nothing.
 func TestRefreshVehicleSpecs_GuardDoesNotPersist(t *testing.T) {
 	key := "vehicle_specs:" + testVIN
@@ -705,7 +764,7 @@ func TestRefreshVehicleSpecs_GuardDoesNotPersist(t *testing.T) {
 	h := newHandler(tc, cfg, &fakeVehicleFinder{vehicle: okVehicle()})
 
 	rec := httptest.NewRecorder()
-	h.RefreshVehicleSpecs(rec, vehReq(http.MethodPost, "7"))
+	h.RefreshVehicleSpecs(rec, vehJSONReq(http.MethodPost, "7", `{"confirmed":true}`))
 
 	if rec.Code != http.StatusTooManyRequests {
 		t.Fatalf("status = %d, want 429", rec.Code)
@@ -742,3 +801,319 @@ func TestWarranty_DoesNotRequireVehicleID(t *testing.T) {
 		t.Fatalf("warranty data = %s, want {\"active\":true}", env.Data)
 	}
 }
+
+func TestOpaqueManagementRequestsRejectInvalidBodiesWithoutTeslaCall(t *testing.T) {
+	oversized := `{"payload":{"blob":"` +
+		strings.Repeat("x", int(maxOpaqueRequestBodyBytes)) +
+		`"}}`
+	tests := []struct {
+		name       string
+		call       func(*Handler, http.ResponseWriter, *http.Request)
+		vehicleID  string
+		body       string
+		wantStatus int
+	}{
+		{
+			name:       "pricing body required",
+			call:       (*Handler).VehiclePricing,
+			body:       "",
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "pricing payload rejects array",
+			call:       (*Handler).VehiclePricing,
+			body:       `{"payload":[]}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "pricing payload rejects scalar",
+			call:       (*Handler).VehiclePricing,
+			body:       `{"payload":"unknown schema"}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "pricing payload rejects null",
+			call:       (*Handler).VehiclePricing,
+			body:       `{"payload":null}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "pricing payload rejects empty object",
+			call:       (*Handler).VehiclePricing,
+			body:       `{"payload":{}}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "pricing rejects trailing JSON",
+			call:       (*Handler).VehiclePricing,
+			body:       `{"payload":{"opaque":true}} {}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "pricing rejects unknown wrapper fields",
+			call:       (*Handler).VehiclePricing,
+			body:       `{"payload":{"opaque":true},"method":"DELETE"}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "pricing enforces small body limit",
+			call:       (*Handler).VehiclePricing,
+			body:       oversized,
+			wantStatus: http.StatusRequestEntityTooLarge,
+		},
+		{
+			name:       "payer requires explicit confirmation",
+			call:       (*Handler).EnterprisePayer,
+			vehicleID:  "7",
+			body:       `{"payload":{"opaque":true}}`,
+			wantStatus: http.StatusPreconditionFailed,
+		},
+		{
+			name:       "payer rejects false confirmation",
+			call:       (*Handler).EnterprisePayer,
+			vehicleID:  "7",
+			body:       `{"payload":{"opaque":true},"confirmed":false}`,
+			wantStatus: http.StatusPreconditionFailed,
+		},
+		{
+			name:       "payer rejects empty object",
+			call:       (*Handler).EnterprisePayer,
+			vehicleID:  "7",
+			body:       `{"payload":{},"confirmed":true}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "payer rejects array",
+			call:       (*Handler).EnterprisePayer,
+			vehicleID:  "7",
+			body:       `{"payload":[1],"confirmed":true}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "payer rejects scalar",
+			call:       (*Handler).EnterprisePayer,
+			vehicleID:  "7",
+			body:       `{"payload":"unknown schema","confirmed":true}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "payer rejects null",
+			call:       (*Handler).EnterprisePayer,
+			vehicleID:  "7",
+			body:       `{"payload":null,"confirmed":true}`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "payer rejects trailing JSON",
+			call:       (*Handler).EnterprisePayer,
+			vehicleID:  "7",
+			body:       `{"payload":{"opaque":true},"confirmed":true} null`,
+			wantStatus: http.StatusBadRequest,
+		},
+		{
+			name:       "payer enforces small body limit",
+			call:       (*Handler).EnterprisePayer,
+			vehicleID:  "7",
+			body:       strings.Replace(oversized, "}}", `},"confirmed":true}`, 1),
+			wantStatus: http.StatusRequestEntityTooLarge,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			tc := &fakeTeslaClient{
+				status: http.StatusOK,
+				body:   []byte(`{"response":{"ok":true}}`),
+			}
+			cfg := newFakeConfigStore()
+			h := newHandler(tc, cfg, &fakeVehicleFinder{vehicle: okVehicle()})
+			rec := httptest.NewRecorder()
+
+			tt.call(h, rec, vehJSONReq(http.MethodPost, tt.vehicleID, tt.body))
+
+			if rec.Code != tt.wantStatus {
+				t.Fatalf("status = %d, want %d; body=%s", rec.Code, tt.wantStatus, rec.Body.String())
+			}
+			if len(tc.calls) != 0 {
+				t.Fatalf("invalid request made %d Tesla call(s), want 0", len(tc.calls))
+			}
+			if len(cfg.upserts) != 0 {
+				t.Fatalf("invalid request persisted %d config row(s), want 0", len(cfg.upserts))
+			}
+		})
+	}
+}
+
+func TestVehiclePricingForwardsOnlyOpaqueObject(t *testing.T) {
+	tc := &fakeTeslaClient{
+		status: http.StatusOK,
+		body:   []byte(`{"response":{"currency":"USD","quote":17}}`),
+	}
+	cfg := newFakeConfigStore()
+	h := newHandler(tc, cfg, &fakeVehicleFinder{vehicle: okVehicle()})
+	rec := httptest.NewRecorder()
+
+	h.VehiclePricing(
+		rec,
+		vehJSONReq(
+			http.MethodPost,
+			"",
+			`{"payload":{"opaque":{"nested":[1,true]}}}`,
+		),
+	)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+	}
+	if len(tc.calls) != 1 || tc.calls[0].method != "vehicle_pricing" {
+		t.Fatalf("calls = %+v, want one vehicle_pricing call", tc.calls)
+	}
+	if got := string(tc.calls[0].payload["opaque"]); got != `{"nested":[1,true]}` {
+		t.Fatalf("opaque payload = %s", got)
+	}
+	if len(cfg.upserts) != 0 {
+		t.Fatalf("pricing persisted %d row(s), want 0", len(cfg.upserts))
+	}
+	var result operationResultEnvelope
+	if err := json.Unmarshal(rec.Body.Bytes(), &result); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	if string(result.Data) != `{"currency":"USD","quote":17}` {
+		t.Fatalf("response data = %s", result.Data)
+	}
+}
+
+func TestEnterpriseRolesCachedReadAndExplicitRefresh(t *testing.T) {
+	key := "enterprise_roles:" + testVIN
+	cfg := newFakeConfigStore()
+	cfg.byType[key] = &teslamodel.TeslaUserConfig{
+		ConfigType: key,
+		Data:       `{"roles":["cached_role"]}`,
+		FetchedAt:  time.Date(2026, 8, 8, 12, 0, 0, 0, time.UTC),
+	}
+	tc := &fakeTeslaClient{
+		validToken: false,
+		status:     http.StatusOK,
+		body:       []byte(`{"response":{"roles":["refreshed_role"]}}`),
+	}
+	h := newHandler(tc, cfg, &fakeVehicleFinder{vehicle: okVehicle()})
+
+	rec := httptest.NewRecorder()
+	h.EnterpriseRoles(rec, vehReq(http.MethodGet, "7"))
+	if rec.Code != http.StatusOK {
+		t.Fatalf("cached GET status = %d, want 200", rec.Code)
+	}
+	if len(tc.calls) != 0 {
+		t.Fatalf("cached GET made %d Tesla call(s), want 0", len(tc.calls))
+	}
+	if got := string(decodeEnvelope(t, rec).Data); got != `{"roles":["cached_role"]}` {
+		t.Fatalf("cached data = %s", got)
+	}
+
+	rec = httptest.NewRecorder()
+	h.RefreshEnterpriseRoles(rec, vehReq(http.MethodPost, "7"))
+	if rec.Code != http.StatusOK {
+		t.Fatalf("refresh status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+	}
+	if len(tc.calls) != 1 || tc.calls[0].method != "enterprise_roles" {
+		t.Fatalf("calls = %+v, want one enterprise_roles call", tc.calls)
+	}
+	if tc.calls[0].vin != testVIN {
+		t.Fatalf("roles VIN = %q, want test VIN", tc.calls[0].vin)
+	}
+	if len(cfg.upserts) != 1 || cfg.upserts[0].configType != key {
+		t.Fatalf("upserts = %+v, want enterprise roles cache row", cfg.upserts)
+	}
+}
+
+func TestPartnerOnlyRefreshDoesNotRequireUserToken(t *testing.T) {
+	tc := &fakeTeslaClient{
+		validToken: false,
+		status:     http.StatusOK,
+		body:       []byte(`{"response":{"mass_kg":1800}}`),
+	}
+	h := newHandler(tc, newFakeConfigStore(), &fakeVehicleFinder{vehicle: okVehicle()})
+	rec := httptest.NewRecorder()
+
+	h.RefreshVehicleSpecs(rec, vehJSONReq(http.MethodPost, "7", `{"confirmed":true}`))
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+	}
+	if len(tc.calls) != 1 || tc.calls[0].method != "vehicle_specs" {
+		t.Fatalf("calls = %+v, want partner-scoped specs call", tc.calls)
+	}
+}
+
+func TestEnterprisePayerRequiresConfirmationAndNeverPersistsPayload(t *testing.T) {
+	tc := &fakeTeslaClient{
+		status: http.StatusOK,
+		body:   []byte(`{"response":{"updated":true}}`),
+	}
+	cfg := newFakeConfigStore()
+	h := newHandler(tc, cfg, &fakeVehicleFinder{vehicle: okVehicle()})
+	rec := httptest.NewRecorder()
+
+	h.EnterprisePayer(
+		rec,
+		vehJSONReq(
+			http.MethodPost,
+			"7",
+			`{"payload":{"opaque":{"nested":[1,true]}},"confirmed":true}`,
+		),
+	)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+	}
+	if len(tc.calls) != 1 || tc.calls[0].method != "enterprise_payer" {
+		t.Fatalf("calls = %+v, want one enterprise_payer call", tc.calls)
+	}
+	if tc.calls[0].vin != testVIN {
+		t.Fatalf("payer VIN = %q, want test VIN", tc.calls[0].vin)
+	}
+	if got := string(tc.calls[0].payload["opaque"]); got != `{"nested":[1,true]}` {
+		t.Fatalf("payer payload = %s", got)
+	}
+	if len(cfg.upserts) != 0 {
+		t.Fatalf("payer persisted %d row(s), want 0", len(cfg.upserts))
+	}
+}
+
+func TestPartnerCapabilityFailuresPreserveExpectedStatus(t *testing.T) {
+	tests := []struct {
+		name       string
+		status     int
+		err        error
+		wantStatus int
+	}{
+		{"partner credentials missing", 0, tesla.ErrPartnerCredentialsMissing, http.StatusPreconditionFailed},
+		{"partner authentication", http.StatusUnauthorized, errors.New("unauthorized"), http.StatusUnauthorized},
+		{"payment required", http.StatusPaymentRequired, nil, http.StatusPaymentRequired},
+		{"scope forbidden", http.StatusForbidden, nil, http.StatusForbidden},
+		{"precondition", http.StatusPreconditionFailed, nil, http.StatusPreconditionFailed},
+		{"rate limited", http.StatusTooManyRequests, nil, http.StatusTooManyRequests},
+		{"upstream server error", http.StatusInternalServerError, errors.New("upstream"), http.StatusBadGateway},
+		{"transport error", 0, errors.New("timeout"), http.StatusBadGateway},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			tc := &fakeTeslaClient{status: tt.status, err: tt.err}
+			h := newHandler(tc, newFakeConfigStore(), &fakeVehicleFinder{vehicle: okVehicle()})
+			rec := httptest.NewRecorder()
+
+			h.VehiclePricing(
+				rec,
+				vehJSONReq(http.MethodPost, "", `{"payload":{"opaque":true}}`),
+			)
+
+			if rec.Code != tt.wantStatus {
+				t.Fatalf("status = %d, want %d; body=%s", rec.Code, tt.wantStatus, rec.Body.String())
+			}
+			if strings.Contains(rec.Body.String(), `"data"`) {
+				t.Fatalf("failure returned success-shaped data: %s", rec.Body.String())
+			}
+		})
+	}
+}
diff --git a/internal/tesla/client_auth.go b/internal/tesla/client_auth.go
index df33affe3f..58edf7bf63 100644
--- a/internal/tesla/client_auth.go
+++ b/internal/tesla/client_auth.go
@@ -4,10 +4,12 @@ import (
 	"bytes"
 	"context"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"io"
 	"net/http"
 	"net/url"
+	"strings"
 	"time"
 
 	"github.com/rs/zerolog/log"
@@ -50,6 +52,32 @@ func (c *Client) ExpiresWithin(d time.Duration) bool {
 // ErrUnauthorized is returned when the Tesla API rejects the current token.
 var ErrUnauthorized = fmt.Errorf("unauthorized (401): token expired or invalid")
 
+// ErrPartnerCredentialsMissing indicates that a partner-scoped Fleet API call
+// cannot be attempted because Tesla client credentials are not configured.
+// It is intentionally distinct from ErrUnauthorized, which represents the
+// user's OAuth token.
+var ErrPartnerCredentialsMissing = errors.New("Tesla partner credentials are not configured")
+
+type partnerScope string
+
+const (
+	partnerScopeDefault              partnerScope = "openid vehicle_device_data vehicle_location vehicle_cmds vehicle_charging_cmds"
+	partnerScopeVehicleSpecs         partnerScope = "vehicle_specs"
+	partnerScopeVehiclePricing       partnerScope = "vehicle_pricing_info"
+	partnerScopeEnterpriseManagement partnerScope = "enterprise_management"
+)
+
+// partnerTokenError reports only the Fleet Auth HTTP status. Tesla's response
+// body can contain authentication details and must never be propagated into
+// application logs or handler responses.
+type partnerTokenError struct {
+	statusCode int
+}
+
+func (e *partnerTokenError) Error() string {
+	return fmt.Sprintf("partner token request failed with status %d", e.statusCode)
+}
+
 // ClientID returns the configured OAuth client ID.
 func (c *Client) ClientID() string { return c.clientID }
 
@@ -59,9 +87,23 @@ func (c *Client) ClientSecret() string { return c.clientSec }
 // GetPartnerToken obtains a client_credentials token for partner-level API calls.
 // Partner tokens use a separate auth endpoint (fleet-auth) from the user OAuth flow.
 func (c *Client) GetPartnerToken(ctx context.Context) (token string, err error) {
-	ctx, span := startSpan(ctx, "tesla.GetPartnerToken")
+	return c.getPartnerToken(ctx, partnerScopeDefault)
+}
+
+// getPartnerToken obtains a client_credentials token with one fixed,
+// call-site-owned scope. Keeping this private prevents request callers from
+// supplying arbitrary scopes while preserving GetPartnerToken's historical
+// default scope set for partner registration and Fleet Telemetry operations.
+func (c *Client) getPartnerToken(ctx context.Context, scope partnerScope) (token string, err error) {
+	ctx, span := startSpan(ctx, "tesla.GetPartnerToken",
+		attribute.String("tesla.partner.scope", string(scope)),
+	)
 	defer endSpan(span, &err)
 
+	if strings.TrimSpace(c.clientID) == "" || strings.TrimSpace(c.clientSec) == "" {
+		return "", ErrPartnerCredentialsMissing
+	}
+
 	// Partner token endpoint is fleet-auth, not auth.tesla.com.
 	// Derive from base URL: https://fleet-api.prd.na.vn.cloud.tesla.com
 	//                     → https://fleet-auth.prd.vn.cloud.tesla.com
@@ -71,21 +113,17 @@ func (c *Client) GetPartnerToken(ctx context.Context) (token string, err error)
 		"grant_type":    {"client_credentials"},
 		"client_id":     {c.clientID},
 		"client_secret": {c.clientSec},
-		"scope":         {"openid vehicle_device_data vehicle_location vehicle_cmds vehicle_charging_cmds"},
+		"scope":         {string(scope)},
 		"audience":      {c.baseURL},
 	}
 
 	req, err := http.NewRequestWithContext(ctx, http.MethodPost, partnerAuthURL+"/oauth2/v3/token", bytes.NewReader([]byte(formData.Encode())))
 	if err != nil {
-		return "", err
+		return "", fmt.Errorf("create partner token request: %w", err)
 	}
 	req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
 
-	log.Debug().
-		Str("url", partnerAuthURL+"/oauth2/v3/token").
-		Str("client_id", c.clientID).
-		Str("audience", c.baseURL).
-		Msg("requesting partner token")
+	log.Debug().Str("scope", string(scope)).Msg("requesting Tesla partner token")
 
 	resp, err := c.httpClient.Do(req)
 	if err != nil {
@@ -93,9 +131,12 @@ func (c *Client) GetPartnerToken(ctx context.Context) (token string, err error)
 	}
 	defer resp.Body.Close()
 
-	respBody, _ := io.ReadAll(resp.Body)
+	respBody, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return "", fmt.Errorf("read partner token response: %w", err)
+	}
 	if resp.StatusCode != http.StatusOK {
-		return "", fmt.Errorf("partner token failed (%d): %s", resp.StatusCode, string(respBody))
+		return "", &partnerTokenError{statusCode: resp.StatusCode}
 	}
 
 	var result struct {
@@ -104,9 +145,20 @@ func (c *Client) GetPartnerToken(ctx context.Context) (token string, err error)
 	if err := json.Unmarshal(respBody, &result); err != nil {
 		return "", fmt.Errorf("decode partner token: %w", err)
 	}
+	if strings.TrimSpace(result.AccessToken) == "" {
+		return "", errors.New("partner token response did not include an access token")
+	}
 	return result.AccessToken, nil
 }
 
+func partnerTokenStatus(err error) int {
+	var tokenErr *partnerTokenError
+	if errors.As(err, &tokenErr) {
+		return tokenErr.statusCode
+	}
+	return 0
+}
+
 // partnerAuthURL derives the fleet-auth URL from the configured base URL.
 // e.g. https://fleet-api.prd.na.vn.cloud.tesla.com → https://fleet-auth.prd.vn.cloud.tesla.com
 // Falls back to https://fleet-auth.prd.vn.cloud.tesla.com if parsing fails.
@@ -125,13 +177,64 @@ func (c *Client) partnerAuthURL() string {
 // doRequestWithToken performs an API request using a custom bearer token (e.g. partner token)
 // instead of the stored user access token. Runs through the circuit breaker and logging.
 func (c *Client) doRequestWithToken(ctx context.Context, method, path string, body io.Reader, token string) (respBody []byte, statusCode int, err error) {
-	ctx, span := startSpan(ctx, "tesla.HTTP "+method+" "+path,
+	return c.doRequestWithTokenOptions(ctx, method, path, body, token, partnerRequestOptions{
+		telemetryPath: path,
+		captureBodies: true,
+	})
+}
+
+type partnerRequestOptions struct {
+	telemetryPath string
+	captureBodies bool
+}
+
+type privatePartnerRequestError struct {
+	cause error
+}
+
+func (e *privatePartnerRequestError) Error() string {
+	return "private Tesla partner request failed"
+}
+
+func (e *privatePartnerRequestError) Unwrap() error {
+	return e.cause
+}
+
+// doPrivateRequestWithToken performs a partner-token request without exposing
+// the request/response body or concrete VIN-bearing path to audit callbacks or
+// tracing. Opaque pricing/payer payloads and enterprise responses may contain
+// PII, so callers must use a fixed route template for telemetryPath.
+func (c *Client) doPrivateRequestWithToken(
+	ctx context.Context,
+	method, path string,
+	body io.Reader,
+	token, telemetryPath string,
+) ([]byte, int, error) {
+	return c.doRequestWithTokenOptions(ctx, method, path, body, token, partnerRequestOptions{
+		telemetryPath: telemetryPath,
+		captureBodies: false,
+	})
+}
+
+func (c *Client) doRequestWithTokenOptions(
+	ctx context.Context,
+	method, path string,
+	body io.Reader,
+	token string,
+	opts partnerRequestOptions,
+) (respBody []byte, statusCode int, err error) {
+	telemetryPath := opts.telemetryPath
+	if telemetryPath == "" {
+		telemetryPath = path
+	}
+
+	ctx, span := startSpan(ctx, "tesla.HTTP "+method+" "+telemetryPath,
 		attribute.String("http.request.method", method),
-		attribute.String("tesla.api.path", path),
+		attribute.String("tesla.api.path", telemetryPath),
 		attribute.String("tesla.token.kind", "partner"),
 	)
 	defer func() {
-		recordHTTPStatus(span, method, c.baseURL+path, statusCode)
+		recordHTTPStatus(span, method, c.baseURL+telemetryPath, statusCode)
 		endSpan(span, &err)
 	}()
 
@@ -144,13 +247,19 @@ func (c *Client) doRequestWithToken(ctx context.Context, method, path string, bo
 
 	var reqBodyBytes []byte
 	if body != nil {
-		reqBodyBytes, _ = io.ReadAll(body)
+		reqBodyBytes, err = io.ReadAll(body)
+		if err != nil {
+			return nil, 0, fmt.Errorf("read partner request body: %w", err)
+		}
 		body = bytes.NewReader(reqBodyBytes)
 	}
 
 	result, cbErr := c.cb.Execute(func() (interface{}, error) {
 		req, reqErr := http.NewRequestWithContext(ctx, method, url, body)
 		if reqErr != nil {
+			if !opts.captureBodies {
+				return nil, &privatePartnerRequestError{cause: reqErr}
+			}
 			return nil, fmt.Errorf("create request: %w", reqErr)
 		}
 
@@ -159,12 +268,18 @@ func (c *Client) doRequestWithToken(ctx context.Context, method, path string, bo
 
 		resp, doErr := c.httpClient.Do(req)
 		if doErr != nil {
+			if !opts.captureBodies {
+				return nil, &privatePartnerRequestError{cause: doErr}
+			}
 			return nil, fmt.Errorf("do request: %w", doErr)
 		}
 		defer resp.Body.Close()
 
 		data, readErr := io.ReadAll(resp.Body)
 		if readErr != nil {
+			if !opts.captureBodies {
+				return nil, &privatePartnerRequestError{cause: readErr}
+			}
 			return nil, fmt.Errorf("read body: %w", readErr)
 		}
 
@@ -193,7 +308,15 @@ func (c *Client) doRequestWithToken(ctx context.Context, method, path string, bo
 			}
 		}
 		if c.logCallback != nil {
-			c.logCallback(method, url, errStatus, reqBodyBytes, errRespBody, durationMs, cbErr)
+			callbackURL := url
+			callbackReqBody := reqBodyBytes
+			callbackRespBody := errRespBody
+			if !opts.captureBodies {
+				callbackURL = c.baseURL + telemetryPath
+				callbackReqBody = nil
+				callbackRespBody = nil
+			}
+			c.logCallback(method, callbackURL, errStatus, callbackReqBody, callbackRespBody, durationMs, cbErr)
 		}
 		err = cbErr
 		statusCode = errStatus
@@ -204,7 +327,15 @@ func (c *Client) doRequestWithToken(ctx context.Context, method, path string, bo
 	resp := result.(*apiResponse)
 
 	if c.logCallback != nil {
-		c.logCallback(method, url, resp.StatusCode, reqBodyBytes, resp.Body, durationMs, nil)
+		callbackURL := url
+		callbackReqBody := reqBodyBytes
+		callbackRespBody := resp.Body
+		if !opts.captureBodies {
+			callbackURL = c.baseURL + telemetryPath
+			callbackReqBody = nil
+			callbackRespBody = nil
+		}
+		c.logCallback(method, callbackURL, resp.StatusCode, callbackReqBody, callbackRespBody, durationMs, nil)
 	}
 
 	respBody = resp.Body
diff --git a/internal/tesla/client_vehicle_data.go b/internal/tesla/client_vehicle_data.go
index 7547311338..048d652665 100644
--- a/internal/tesla/client_vehicle_data.go
+++ b/internal/tesla/client_vehicle_data.go
@@ -4,13 +4,31 @@ import (
 	"bytes"
 	"context"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"net/http"
+	"net/url"
 	"strings"
 
 	"go.opentelemetry.io/otel/attribute"
 )
 
+const (
+	vehicleSpecsRouteTemplate    = "/api/1/vehicles/{vin}/specs"
+	enterpriseRolesRouteTemplate = "/api/1/dx/enterprise/v1/{vin}/roles"
+	enterprisePayerRouteTemplate = "/api/1/dx/enterprise/v1/{vin}/payer"
+	vehiclePricingPath           = "/api/1/dx/vehicles/pricing"
+)
+
+// JSONRequestObject is an opaque, non-empty JSON object accepted by Tesla
+// endpoints whose request schema is not publicly documented. RawMessage
+// values preserve nested JSON without resorting to map[string]interface{}.
+type JSONRequestObject map[string]json.RawMessage
+
+// ErrEmptyJSONRequestObject is returned before token acquisition or any Fleet
+// API call when an opaque request object contains no fields.
+var ErrEmptyJSONRequestObject = errors.New("Tesla request payload must be a non-empty JSON object")
+
 // GetNearbyChargingSites returns charging sites near the vehicle's current location.
 // GET /api/1/vehicles/{vin}/nearby_charging_sites
 func (c *Client) GetNearbyChargingSites(ctx context.Context, vin string) ([]byte, int, error) {
@@ -54,30 +72,40 @@ func (c *Client) GetMobileEnabled(ctx context.Context, vin string) ([]byte, int,
 
 // GetVehicleOptions calls GET /api/1/dx/vehicles/options?vin={vin}.
 func (c *Client) GetVehicleOptions(ctx context.Context, vin string) ([]byte, int, error) {
-	path := fmt.Sprintf("/api/1/dx/vehicles/options?vin=%s", vin)
+	path := fmt.Sprintf("/api/1/dx/vehicles/options?vin=%s", url.QueryEscape(vin))
 	return c.doRequest(ctx, http.MethodGet, path, nil)
 }
 
 // GetVehicleSpecs calls GET /api/1/vehicles/{vin}/specs using a partner token.
 // NOTE: This endpoint costs $0.10 per successful call — cache aggressively.
-func (c *Client) GetVehicleSpecs(ctx context.Context, vin string) ([]byte, int, error) {
-	partnerToken, err := c.GetPartnerToken(ctx)
+func (c *Client) GetVehicleSpecs(ctx context.Context, vin string) (body []byte, status int, err error) {
+	ctx, span := startSpan(ctx, "tesla.GetVehicleSpecs")
+	defer endSpan(span, &err)
+
+	partnerToken, err := c.getPartnerToken(ctx, partnerScopeVehicleSpecs)
 	if err != nil {
-		return nil, 0, fmt.Errorf("get partner token: %w", err)
+		return nil, partnerTokenStatus(err), fmt.Errorf("get vehicle specs partner token: %w", err)
 	}
-	path := fmt.Sprintf("/api/1/vehicles/%s/specs", vin)
-	return c.doRequestWithToken(ctx, http.MethodGet, path, nil, partnerToken)
+	path := fmt.Sprintf("/api/1/vehicles/%s/specs", url.PathEscape(vin))
+	return c.doPrivateRequestWithToken(
+		ctx,
+		http.MethodGet,
+		path,
+		nil,
+		partnerToken,
+		vehicleSpecsRouteTemplate,
+	)
 }
 
 // GetSubscriptionEligibility calls GET /api/1/dx/vehicles/subscriptions/eligibility?vin={vin}.
 func (c *Client) GetSubscriptionEligibility(ctx context.Context, vin string) ([]byte, int, error) {
-	path := fmt.Sprintf("/api/1/dx/vehicles/subscriptions/eligibility?vin=%s", vin)
+	path := fmt.Sprintf("/api/1/dx/vehicles/subscriptions/eligibility?vin=%s", url.QueryEscape(vin))
 	return c.doRequest(ctx, http.MethodGet, path, nil)
 }
 
 // GetUpgradeEligibility calls GET /api/1/dx/vehicles/upgrades/eligibility?vin={vin}.
 func (c *Client) GetUpgradeEligibility(ctx context.Context, vin string) ([]byte, int, error) {
-	path := fmt.Sprintf("/api/1/dx/vehicles/upgrades/eligibility?vin=%s", vin)
+	path := fmt.Sprintf("/api/1/dx/vehicles/upgrades/eligibility?vin=%s", url.QueryEscape(vin))
 	return c.doRequest(ctx, http.MethodGet, path, nil)
 }
 
@@ -86,6 +114,96 @@ func (c *Client) GetWarrantyDetails(ctx context.Context) ([]byte, int, error) {
 	return c.doRequest(ctx, http.MethodGet, "/api/1/dx/warranty/details", nil)
 }
 
+// GetVehiclePricing calls POST /api/1/dx/vehicles/pricing with an opaque
+// Tesla-controlled request object and the vehicle_pricing_info partner scope.
+// The endpoint is a read-only query despite using POST.
+func (c *Client) GetVehiclePricing(
+	ctx context.Context,
+	payload JSONRequestObject,
+) (body []byte, status int, err error) {
+	ctx, span := startSpan(ctx, "tesla.GetVehiclePricing")
+	defer endSpan(span, &err)
+
+	requestBody, err := marshalJSONRequestObject(payload)
+	if err != nil {
+		return nil, 0, err
+	}
+	partnerToken, err := c.getPartnerToken(ctx, partnerScopeVehiclePricing)
+	if err != nil {
+		return nil, partnerTokenStatus(err), fmt.Errorf("get vehicle pricing partner token: %w", err)
+	}
+	return c.doPrivateRequestWithToken(
+		ctx,
+		http.MethodPost,
+		vehiclePricingPath,
+		bytes.NewReader(requestBody),
+		partnerToken,
+		vehiclePricingPath,
+	)
+}
+
+// GetEnterpriseRoles calls GET /api/1/dx/enterprise/v1/{vin}/roles with the
+// enterprise_management partner scope.
+func (c *Client) GetEnterpriseRoles(ctx context.Context, vin string) (body []byte, status int, err error) {
+	ctx, span := startSpan(ctx, "tesla.GetEnterpriseRoles")
+	defer endSpan(span, &err)
+
+	partnerToken, err := c.getPartnerToken(ctx, partnerScopeEnterpriseManagement)
+	if err != nil {
+		return nil, partnerTokenStatus(err), fmt.Errorf("get enterprise roles partner token: %w", err)
+	}
+	path := fmt.Sprintf("/api/1/dx/enterprise/v1/%s/roles", url.PathEscape(vin))
+	return c.doPrivateRequestWithToken(
+		ctx,
+		http.MethodGet,
+		path,
+		nil,
+		partnerToken,
+		enterpriseRolesRouteTemplate,
+	)
+}
+
+// SetEnterprisePayer calls POST /api/1/dx/enterprise/v1/{vin}/payer with an
+// opaque Tesla-controlled object. Callers must enforce explicit confirmation
+// before invoking this state-changing operation.
+func (c *Client) SetEnterprisePayer(
+	ctx context.Context,
+	vin string,
+	payload JSONRequestObject,
+) (body []byte, status int, err error) {
+	ctx, span := startSpan(ctx, "tesla.SetEnterprisePayer")
+	defer endSpan(span, &err)
+
+	requestBody, err := marshalJSONRequestObject(payload)
+	if err != nil {
+		return nil, 0, err
+	}
+	partnerToken, err := c.getPartnerToken(ctx, partnerScopeEnterpriseManagement)
+	if err != nil {
+		return nil, partnerTokenStatus(err), fmt.Errorf("get enterprise payer partner token: %w", err)
+	}
+	path := fmt.Sprintf("/api/1/dx/enterprise/v1/%s/payer", url.PathEscape(vin))
+	return c.doPrivateRequestWithToken(
+		ctx,
+		http.MethodPost,
+		path,
+		bytes.NewReader(requestBody),
+		partnerToken,
+		enterprisePayerRouteTemplate,
+	)
+}
+
+func marshalJSONRequestObject(payload JSONRequestObject) ([]byte, error) {
+	if len(payload) == 0 {
+		return nil, ErrEmptyJSONRequestObject
+	}
+	body, err := json.Marshal(payload)
+	if err != nil {
+		return nil, fmt.Errorf("encode Tesla request object: %w", err)
+	}
+	return body, nil
+}
+
 // ListVehicles returns all vehicles associated with the authenticated Tesla account.
 func (c *Client) ListVehicles(ctx context.Context) ([]VehicleData, error) {
 	data, status, err := c.doRequest(ctx, http.MethodGet, "/api/1/vehicles", nil)
diff --git a/internal/tesla/client_vehicle_management_test.go b/internal/tesla/client_vehicle_management_test.go
new file mode 100644
index 0000000000..f8fcf79d9c
--- /dev/null
+++ b/internal/tesla/client_vehicle_management_test.go
@@ -0,0 +1,370 @@
+package tesla
+
+import (
+	"context"
+	"encoding/json"
+	"errors"
+	"io"
+	"net/http"
+	"net/url"
+	"reflect"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/ev-dev-labs/teslasync/internal/config"
+)
+
+type vehicleManagementRoundTripFunc func(*http.Request) (*http.Response, error)
+
+func (fn vehicleManagementRoundTripFunc) RoundTrip(req *http.Request) (*http.Response, error) {
+	return fn(req)
+}
+
+type capturedManagementRequest struct {
+	method        string
+	host          string
+	path          string
+	authorization string
+	body          string
+}
+
+type capturedAuditCall struct {
+	url      string
+	reqBody  []byte
+	respBody []byte
+	status   int
+}
+
+func newVehicleManagementClient(
+	t *testing.T,
+	tokenStatus int,
+	apiStatus int,
+) (*Client, *[]capturedManagementRequest) {
+	t.Helper()
+
+	requests := []capturedManagementRequest{}
+	client := NewClient(config.TeslaConfig{
+		BaseURL:      "https://fleet-api.prd.na.vn.cloud.tesla.com",
+		AuthURL:      "https://auth.tesla.com",
+		ClientID:     "partner-client",
+		ClientSecret: "partner-secret",
+		RedirectURI:  "https://example.test/callback",
+		Timeout:      5 * time.Second,
+	})
+	client.httpClient = &http.Client{
+		Timeout: 5 * time.Second,
+		Transport: vehicleManagementRoundTripFunc(func(req *http.Request) (*http.Response, error) {
+			var body []byte
+			if req.Body != nil {
+				var err error
+				body, err = io.ReadAll(req.Body)
+				if err != nil {
+					t.Fatalf("read outbound body: %v", err)
+				}
+			}
+			requests = append(requests, capturedManagementRequest{
+				method:        req.Method,
+				host:          req.URL.Host,
+				path:          req.URL.RequestURI(),
+				authorization: req.Header.Get("Authorization"),
+				body:          string(body),
+			})
+
+			status := apiStatus
+			responseBody := `{"response":{"ok":true}}`
+			if req.URL.Path == "/oauth2/v3/token" {
+				status = tokenStatus
+				responseBody = `{"access_token":"scoped-partner-token"}`
+				if status != http.StatusOK {
+					responseBody = `{"error":"sensitive-token-detail"}`
+				}
+			}
+			return &http.Response{
+				StatusCode: status,
+				Header:     make(http.Header),
+				Body:       io.NopCloser(strings.NewReader(responseBody)),
+				Request:    req,
+			}, nil
+		}),
+	}
+	return client, &requests
+}
+
+func TestVehicleManagementPartnerCallsUseExactScopeMethodPathAndBody(t *testing.T) {
+	payload := JSONRequestObject{
+		"opaque": json.RawMessage(`{"nested":[1,true]}`),
+	}
+	tests := []struct {
+		name       string
+		scope      string
+		method     string
+		path       string
+		wantBody   JSONRequestObject
+		invokeCall func(context.Context, *Client) ([]byte, int, error)
+	}{
+		{
+			name:   "paid specs",
+			scope:  "vehicle_specs",
+			method: http.MethodGet,
+			path:   "/api/1/vehicles/TESTVIN/specs",
+			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
+				return client.GetVehicleSpecs(ctx, "TESTVIN")
+			},
+		},
+		{
+			name:     "vehicle pricing",
+			scope:    "vehicle_pricing_info",
+			method:   http.MethodPost,
+			path:     "/api/1/dx/vehicles/pricing",
+			wantBody: payload,
+			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
+				return client.GetVehiclePricing(ctx, payload)
+			},
+		},
+		{
+			name:   "enterprise roles",
+			scope:  "enterprise_management",
+			method: http.MethodGet,
+			path:   "/api/1/dx/enterprise/v1/TESTVIN/roles",
+			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
+				return client.GetEnterpriseRoles(ctx, "TESTVIN")
+			},
+		},
+		{
+			name:     "enterprise payer",
+			scope:    "enterprise_management",
+			method:   http.MethodPost,
+			path:     "/api/1/dx/enterprise/v1/TESTVIN/payer",
+			wantBody: payload,
+			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
+				return client.SetEnterprisePayer(ctx, "TESTVIN", payload)
+			},
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			client, requests := newVehicleManagementClient(t, http.StatusOK, http.StatusOK)
+			auditCalls := []capturedAuditCall{}
+			client.SetLogCallback(func(_ string, requestURL string, statusCode int, reqBody, respBody []byte, _ int, _ error) {
+				auditCalls = append(auditCalls, capturedAuditCall{
+					url:      requestURL,
+					reqBody:  reqBody,
+					respBody: respBody,
+					status:   statusCode,
+				})
+			})
+
+			_, status, err := tt.invokeCall(context.Background(), client)
+			if err != nil {
+				t.Fatalf("call returned error: %v", err)
+			}
+			if status != http.StatusOK {
+				t.Fatalf("status = %d, want 200", status)
+			}
+			if len(*requests) != 2 {
+				t.Fatalf("requests = %d, want token + API request", len(*requests))
+			}
+
+			tokenReq := (*requests)[0]
+			if tokenReq.method != http.MethodPost || tokenReq.path != "/oauth2/v3/token" {
+				t.Fatalf("token request = %s %s", tokenReq.method, tokenReq.path)
+			}
+			form, err := url.ParseQuery(tokenReq.body)
+			if err != nil {
+				t.Fatalf("parse token form: %v", err)
+			}
+			if got := form.Get("scope"); got != tt.scope {
+				t.Fatalf("scope = %q, want %q", got, tt.scope)
+			}
+
+			apiReq := (*requests)[1]
+			if apiReq.method != tt.method || apiReq.path != tt.path {
+				t.Fatalf("API request = %s %s, want %s %s", apiReq.method, apiReq.path, tt.method, tt.path)
+			}
+			if apiReq.authorization != "Bearer scoped-partner-token" {
+				t.Fatalf("authorization = %q", apiReq.authorization)
+			}
+			if tt.wantBody == nil {
+				if apiReq.body != "" {
+					t.Fatalf("body = %q, want empty", apiReq.body)
+				}
+			} else {
+				var got JSONRequestObject
+				if err := json.Unmarshal([]byte(apiReq.body), &got); err != nil {
+					t.Fatalf("decode API body: %v", err)
+				}
+				if !reflect.DeepEqual(got, tt.wantBody) {
+					t.Fatalf("body = %#v, want %#v", got, tt.wantBody)
+				}
+			}
+
+			if len(auditCalls) != 1 {
+				t.Fatalf("audit calls = %d, want 1", len(auditCalls))
+			}
+			if auditCalls[0].status != http.StatusOK {
+				t.Fatalf("audit status = %d, want 200", auditCalls[0].status)
+			}
+			if len(auditCalls[0].reqBody) != 0 || len(auditCalls[0].respBody) != 0 {
+				t.Fatal("private management request or response body reached audit callback")
+			}
+			if strings.Contains(auditCalls[0].url, "TESTVIN") {
+				t.Fatalf("VIN reached audit callback URL: %q", auditCalls[0].url)
+			}
+		})
+	}
+}
+
+func TestVehicleManagementUserCallsUseExactMethodAndPath(t *testing.T) {
+	tests := []struct {
+		name       string
+		path       string
+		invokeCall func(context.Context, *Client) ([]byte, int, error)
+	}{
+		{
+			name: "vehicle options",
+			path: "/api/1/dx/vehicles/options?vin=TESTVIN",
+			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
+				return client.GetVehicleOptions(ctx, "TESTVIN")
+			},
+		},
+		{
+			name: "warranty details",
+			path: "/api/1/dx/warranty/details",
+			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
+				return client.GetWarrantyDetails(ctx)
+			},
+		},
+		{
+			name: "subscription eligibility",
+			path: "/api/1/dx/vehicles/subscriptions/eligibility?vin=TESTVIN",
+			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
+				return client.GetSubscriptionEligibility(ctx, "TESTVIN")
+			},
+		},
+		{
+			name: "upgrade eligibility",
+			path: "/api/1/dx/vehicles/upgrades/eligibility?vin=TESTVIN",
+			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
+				return client.GetUpgradeEligibility(ctx, "TESTVIN")
+			},
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			client, requests := newVehicleManagementClient(t, http.StatusOK, http.StatusOK)
+			client.SetTokens("user-access-token", "", time.Now().Add(time.Hour))
+
+			_, status, err := tt.invokeCall(context.Background(), client)
+			if err != nil {
+				t.Fatalf("call returned error: %v", err)
+			}
+			if status != http.StatusOK {
+				t.Fatalf("status = %d, want 200", status)
+			}
+			if len(*requests) != 1 {
+				t.Fatalf("requests = %d, want one Fleet API request", len(*requests))
+			}
+			request := (*requests)[0]
+			if request.method != http.MethodGet || request.path != tt.path {
+				t.Fatalf(
+					"API request = %s %s, want GET %s",
+					request.method,
+					request.path,
+					tt.path,
+				)
+			}
+			if request.authorization == "" {
+				t.Fatal("user-token request is missing authorization")
+			}
+		})
+	}
+}
+
+func TestGetPartnerTokenPreservesDefaultScopesAndUserOAuthScopes(t *testing.T) {
+	client, requests := newVehicleManagementClient(t, http.StatusOK, http.StatusOK)
+
+	if _, err := client.GetPartnerToken(context.Background()); err != nil {
+		t.Fatalf("GetPartnerToken: %v", err)
+	}
+	if len(*requests) != 1 {
+		t.Fatalf("requests = %d, want 1", len(*requests))
+	}
+	form, err := url.ParseQuery((*requests)[0].body)
+	if err != nil {
+		t.Fatalf("parse form: %v", err)
+	}
+	if got := form.Get("scope"); got != string(partnerScopeDefault) {
+		t.Fatalf("default scope = %q, want %q", got, partnerScopeDefault)
+	}
+
+	userAuthURL := client.GetAuthURL("state")
+	for _, partnerOnly := range []string{
+		"vehicle_specs",
+		"vehicle_pricing_info",
+		"enterprise_management",
+	} {
+		if strings.Contains(userAuthURL, partnerOnly) {
+			t.Fatalf("ordinary user OAuth URL contains partner-only scope %q: %s", partnerOnly, userAuthURL)
+		}
+	}
+}
+
+func TestVehicleManagementClientRejectsEmptyObjectBeforeTokenCall(t *testing.T) {
+	client, requests := newVehicleManagementClient(t, http.StatusOK, http.StatusOK)
+
+	_, _, err := client.SetEnterprisePayer(context.Background(), "TESTVIN", JSONRequestObject{})
+	if !errors.Is(err, ErrEmptyJSONRequestObject) {
+		t.Fatalf("error = %v, want ErrEmptyJSONRequestObject", err)
+	}
+	if len(*requests) != 0 {
+		t.Fatalf("requests = %d, want 0", len(*requests))
+	}
+}
+
+func TestVehicleManagementClientPreservesNon2xxStatusWithoutBodies(t *testing.T) {
+	client, _ := newVehicleManagementClient(t, http.StatusOK, http.StatusForbidden)
+	auditCalls := []capturedAuditCall{}
+	client.SetLogCallback(func(_ string, requestURL string, statusCode int, reqBody, respBody []byte, _ int, _ error) {
+		auditCalls = append(auditCalls, capturedAuditCall{
+			url: requestURL, reqBody: reqBody, respBody: respBody, status: statusCode,
+		})
+	})
+
+	body, status, err := client.GetEnterpriseRoles(context.Background(), "TESTVIN")
+	if err != nil {
+		t.Fatalf("403 should be returned for handler mapping, got error: %v", err)
+	}
+	if status != http.StatusForbidden {
+		t.Fatalf("status = %d, want 403", status)
+	}
+	if !strings.Contains(string(body), `"ok"`) {
+		t.Fatalf("unexpected response body: %s", body)
+	}
+	if len(auditCalls) != 1 || len(auditCalls[0].respBody) != 0 {
+		t.Fatalf("private non-2xx response reached audit callback: %+v", auditCalls)
+	}
+}
+
+func TestPartnerTokenFailureStatusFlowsToManagementCaller(t *testing.T) {
+	client, requests := newVehicleManagementClient(t, http.StatusForbidden, http.StatusOK)
+
+	_, status, err := client.GetVehiclePricing(
+		context.Background(),
+		JSONRequestObject{"opaque": json.RawMessage(`true`)},
+	)
+	if err == nil {
+		t.Fatal("expected partner token error")
+	}
+	if status != http.StatusForbidden {
+		t.Fatalf("status = %d, want 403", status)
+	}
+	if strings.Contains(err.Error(), "sensitive-token-detail") {
+		t.Fatalf("partner token response leaked through error: %v", err)
+	}
+	if len(*requests) != 1 {
+		t.Fatalf("requests = %d, want token request only", len(*requests))
+	}
+}
diff --git a/slo/catalog.yaml b/slo/catalog.yaml
index cd82c490bc..6be082e29a 100644
--- a/slo/catalog.yaml
+++ b/slo/catalog.yaml
@@ -34,6 +34,16 @@ slos:
     owner: platform
     tags: [http, latency]
 
+  - name: vehicle_management_availability
+    description: "Tesla Vehicle Management metadata and enterprise operations must complete without server errors."
+    sli:
+      good_events: "sum(rate(teslasync_red_http_requests_total{route=~\"/api/v1/(tesla/(warranty(|/refresh)|vehicle-pricing)|vehicles/\\\\{vehicleID\\\\}/((options|specs|subscriptions|upgrades|enterprise-roles)(|/refresh)|enterprise-payer))\",status_class!=\"5xx\"}[5m]))"
+      valid_events: "sum(rate(teslasync_red_http_requests_total{route=~\"/api/v1/(tesla/(warranty(|/refresh)|vehicle-pricing)|vehicles/\\\\{vehicleID\\\\}/((options|specs|subscriptions|upgrades|enterprise-roles)(|/refresh)|enterprise-payer))\"}[5m]))"
+    objective: 99.0
+    window: 30d
+    owner: platform
+    tags: [http, vehicle-management, upstream]
+
   - name: service_intelligence_availability
     description: "Recall and service-intelligence requests must return without a server or upstream-gateway failure."
     sli:
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 43c5ae4c93..5ffed0554a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -23,6 +23,7 @@ const GlancePage = lazy(() => import('./features/dashboard/pages/GlancePage'))
 const Vehicles = lazy(() => import('./features/vehicles/pages/VehicleListPage'))
 const VehicleDetail = lazy(() => import('./features/vehicles/pages/VehicleDetailPage'))
 const VehicleAccess = lazy(() => import('./features/vehicles/pages/VehicleAccessPage'))
+const VehicleManagement = lazy(() => import('./features/vehicles/pages/VehicleManagementPage'))
 const DigitalTwin = lazy(() => import('./features/vehicles/pages/DigitalTwinPage'))
 const TimeMachine = lazy(() => import('./features/vehicles/pages/TimeMachinePage'))
 
@@ -476,6 +477,7 @@ export default function App() {
         <Route path="vehicles" element={<SafeRoute name="Vehicles"><Vehicles /></SafeRoute>} />
         <Route path="vehicles/:id" element={<SafeRoute name="VehicleDetail"><VehicleDetail /></SafeRoute>} />
         <Route path="vehicles/:id/access" element={<SafeRoute name="VehicleAccess"><VehicleAccess /></SafeRoute>} />
+        <Route path="vehicle-management" element={<SafeRoute name="VehicleManagement"><VehicleManagement /></SafeRoute>} />
         <Route path="digital-twin" element={<SafeRoute name="DigitalTwin"><DigitalTwin /></SafeRoute>} />
         <Route path="time-machine" element={<SafeRoute name="TimeMachine"><TimeMachine /></SafeRoute>} />
         <Route path="energy" element={<SafeRoute name="Energy"><Energy /></SafeRoute>} />
diff --git a/web/src/__tests__/lazyRoutes.list.ts b/web/src/__tests__/lazyRoutes.list.ts
index c0ba72f89e..1a96c0be25 100644
--- a/web/src/__tests__/lazyRoutes.list.ts
+++ b/web/src/__tests__/lazyRoutes.list.ts
@@ -30,6 +30,7 @@ export const LAZY_ROUTE_IMPORTS: Array<{
   { name: 'Vehicles', load: () => import('../features/vehicles/pages/VehicleListPage') },
   { name: 'VehicleDetail', load: () => import('../features/vehicles/pages/VehicleDetailPage') },
   { name: 'VehicleAccess', load: () => import('../features/vehicles/pages/VehicleAccessPage') },
+  { name: 'VehicleManagement', load: () => import('../features/vehicles/pages/VehicleManagementPage') },
   { name: 'DigitalTwin', load: () => import('../features/vehicles/pages/DigitalTwinPage') },
 
   // Charging
diff --git a/web/src/api/hooks/useVehicles.test.tsx b/web/src/api/hooks/useVehicles.test.tsx
index c2d822371c..8fe1d0a675 100644
--- a/web/src/api/hooks/useVehicles.test.tsx
+++ b/web/src/api/hooks/useVehicles.test.tsx
@@ -94,6 +94,10 @@ import {
   useRefreshVehicleUpgrades,
   useWarrantyDetails,
   useRefreshWarrantyDetails,
+  useVehiclePricing,
+  useEnterpriseRoles,
+  useRefreshEnterpriseRoles,
+  useSetEnterprisePayer,
 } from './useVehicles';
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
@@ -602,6 +606,9 @@ describe.each(refreshFamily)('$label', ({ hook, segment, invalidateKey, toastKey
 
     expect(lastUrl()).toBe(`/vehicles/5/${segment}/refresh`);
     expect(lastOpts().method).toBe('POST');
+    if (segment === 'specs') {
+      expect(lastOpts().body).toBe(JSON.stringify({ confirmed: true }));
+    }
     expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: invalidateKey });
     await waitFor(() => expect(toastSuccess).toHaveBeenCalledWith(toastKey, expect.any(String)));
   });
@@ -771,3 +778,82 @@ describe('warranty details', () => {
     );
   });
 });
+
+describe('official vehicle-management partner hooks', () => {
+  it('submits pricing to the fixed route with only the opaque payload wrapper', async () => {
+    requestMock.mockResolvedValueOnce({ data: { quote: 17 } });
+    const { result } = renderH(() => useVehiclePricing());
+    const payload = { opaque: { nested: [1, true] } };
+
+    await result.current.mutateAsync({ payload });
+
+    expect(lastUrl()).toBe('/tesla/vehicle-pricing');
+    expect(lastOpts().method).toBe('POST');
+    expect(JSON.parse(String(lastOpts().body))).toEqual({ payload });
+    await waitFor(() =>
+      expect(toastSuccess).toHaveBeenCalledWith(
+        'toast.vehicles.pricing.success',
+        expect.any(String),
+      ),
+    );
+  });
+
+  it('reads cached enterprise roles only when a vehicle is selected', async () => {
+    requestMock.mockResolvedValueOnce({
+      data: { roles: ['fleet_manager'] },
+      fetched_at: '2026-08-08T12:00:00Z',
+    });
+    const { result } = renderH(() => useEnterpriseRoles('5'));
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(lastUrl()).toBe('/vehicles/5/enterprise-roles');
+    expect(lastOpts()).toHaveProperty('signal');
+
+    requestMock.mockClear();
+    renderH(() => useEnterpriseRoles(undefined));
+    await tick();
+    expect(requestMock).not.toHaveBeenCalled();
+  });
+
+  it('refreshes enterprise roles explicitly and invalidates the cached GET', async () => {
+    requestMock.mockResolvedValueOnce({
+      data: { roles: [] },
+      fetched_at: '2026-08-08T12:00:00Z',
+    });
+    const client = makeClient();
+    const invalidateQueries = vi.spyOn(client, 'invalidateQueries');
+    const { result } = renderHook(() => useRefreshEnterpriseRoles('5'), {
+      wrapper: makeWrapper(client),
+    });
+
+    await result.current.mutateAsync();
+
+    expect(lastUrl()).toBe('/vehicles/5/enterprise-roles/refresh');
+    expect(lastOpts().method).toBe('POST');
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['vehicle-enterprise-roles', '5'],
+    });
+  });
+
+  it('sends the exact payer object with explicit confirmation and invalidates roles', async () => {
+    requestMock.mockResolvedValueOnce({ data: { updated: true } });
+    const client = makeClient();
+    const invalidateQueries = vi.spyOn(client, 'invalidateQueries');
+    const { result } = renderHook(() => useSetEnterprisePayer('5'), {
+      wrapper: makeWrapper(client),
+    });
+    const payload = { opaque: { nested: [1, true] } };
+
+    await result.current.mutateAsync({ payload, confirmed: true });
+
+    expect(lastUrl()).toBe('/vehicles/5/enterprise-payer');
+    expect(lastOpts().method).toBe('POST');
+    expect(JSON.parse(String(lastOpts().body))).toEqual({
+      payload,
+      confirmed: true,
+    });
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['vehicle-enterprise-roles', '5'],
+    });
+  });
+});
diff --git a/web/src/api/hooks/useVehicles.ts b/web/src/api/hooks/useVehicles.ts
index 4ad05743dc..9355ecc21b 100644
--- a/web/src/api/hooks/useVehicles.ts
+++ b/web/src/api/hooks/useVehicles.ts
@@ -6,7 +6,14 @@ import { useMutationToast } from './_toastHelpers';
 import { invalidateAndBroadcast } from '@/lib/queryBroadcast';
 import { useAsOfDate, AS_OF_QUERY_PARAM } from '@/hooks/useAsOfDate';
 import type { Vehicle } from '@/types/vehicle';
-import type { VehicleState } from '../types';
+import type {
+  EnterprisePayerVariables,
+  TeslaJSONValue,
+  VehicleInfoEnvelope,
+  VehicleManagementResult,
+  VehiclePricingVariables,
+  VehicleState,
+} from '../types';
 export { deriveVehicleStatus as getVehicleStatus } from '../types';
 
 export const vehicleKeys = {
@@ -384,11 +391,6 @@ export function useFleetStates(vehicles: Vehicle[]) {
 
 // ---------- Vehicle Info (mobile enabled, options, specs) ----------
 
-interface VehicleInfoEnvelope<T> {
-  data: T | null;
-  fetched_at: string | null;
-}
-
 interface MobileEnabledData {
   enabled: boolean;
 }
@@ -450,7 +452,10 @@ export function useRefreshVehicleSpecs(vehicleId?: string) {
   const queryClient = useQueryClient();
   const { success, error } = useMutationToast();
   return useMutation({
-    mutationFn: () => request<VehicleInfoEnvelope<Record<string, unknown>>>(`/vehicles/${vehicleId}/specs/refresh`, { method: 'POST' }),
+    mutationFn: () => request<VehicleInfoEnvelope<Record<string, unknown>>>(`/vehicles/${vehicleId}/specs/refresh`, {
+      method: 'POST',
+      body: JSON.stringify({ confirmed: true }),
+    }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['vehicle-specs', vehicleId] });
       success('toast.vehicles.specs.refresh.success', 'Vehicle specs refreshed');
@@ -529,3 +534,98 @@ export function useRefreshWarrantyDetails() {
     onError: (e) => error(e, 'toast.vehicles.warranty.refresh.error', 'Failed to refresh warranty details'),
   });
 }
+
+// ---------- Official Vehicle Management: pricing + enterprise ----------
+
+export function useVehiclePricing() {
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: ({ payload }: VehiclePricingVariables) =>
+      request<VehicleManagementResult>('/tesla/vehicle-pricing', {
+        method: 'POST',
+        body: JSON.stringify({ payload }),
+      }),
+    onSuccess: () => {
+      success(
+        'toast.vehicles.pricing.success',
+        'Tesla vehicle pricing query completed',
+      );
+    },
+    onError: (e) =>
+      error(
+        e,
+        'toast.vehicles.pricing.error',
+        'Failed to query Tesla vehicle pricing',
+      ),
+  });
+}
+
+export function useEnterpriseRoles(vehicleId?: string) {
+  return useQuery({
+    queryKey: ['vehicle-enterprise-roles', vehicleId],
+    queryFn: ({ signal }) =>
+      request<VehicleInfoEnvelope<TeslaJSONValue>>(
+        `/vehicles/${vehicleId}/enterprise-roles`,
+        { signal },
+      ),
+    enabled: !!vehicleId,
+    staleTime: STALE_TIMES.RARE,
+  });
+}
+
+export function useRefreshEnterpriseRoles(vehicleId?: string) {
+  const queryClient = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: () =>
+      request<VehicleInfoEnvelope<TeslaJSONValue>>(
+        `/vehicles/${vehicleId}/enterprise-roles/refresh`,
+        { method: 'POST' },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['vehicle-enterprise-roles', vehicleId],
+      });
+      success(
+        'toast.vehicles.enterpriseRoles.refresh.success',
+        'Enterprise roles refreshed',
+      );
+    },
+    onError: (e) =>
+      error(
+        e,
+        'toast.vehicles.enterpriseRoles.refresh.error',
+        'Failed to refresh enterprise roles',
+      ),
+  });
+}
+
+export function useSetEnterprisePayer(vehicleId?: string) {
+  const queryClient = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: ({ payload, confirmed }: EnterprisePayerVariables) =>
+      request<VehicleManagementResult>(
+        `/vehicles/${vehicleId}/enterprise-payer`,
+        {
+          method: 'POST',
+          body: JSON.stringify({ payload, confirmed }),
+        },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['vehicle-enterprise-roles', vehicleId],
+      });
+      success(
+        'toast.vehicles.enterprisePayer.success',
+        'Enterprise payer updated',
+      );
+    },
+    onError: (e) =>
+      error(
+        e,
+        'toast.vehicles.enterprisePayer.error',
+        'Failed to update enterprise payer',
+      ),
+  });
+}
diff --git a/web/src/api/types.ts b/web/src/api/types.ts
index 4f0f47a3f9..8a22f7efec 100644
--- a/web/src/api/types.ts
+++ b/web/src/api/types.ts
@@ -63,6 +63,38 @@ export interface Vehicle {
   updated_at: string
 }
 
+/** JSON values returned by Tesla-controlled, undocumented Fleet API schemas. */
+export type TeslaJSONValue =
+  | string
+  | number
+  | boolean
+  | null
+  | TeslaJSONValue[]
+  | TeslaOpaqueObject
+
+/** Opaque Tesla-controlled JSON object for undocumented request schemas. */
+export type TeslaOpaqueObject = { [key: string]: TeslaJSONValue }
+
+/** Cached vehicle-management response stored in tesla_user_config. */
+export interface VehicleInfoEnvelope<T = TeslaOpaqueObject> {
+  data: T | null
+  fetched_at: string | null
+}
+
+/** Non-persisted response from an opaque Vehicle Management mutation. */
+export interface VehicleManagementResult {
+  data: TeslaJSONValue
+}
+
+export interface VehiclePricingVariables {
+  payload: TeslaOpaqueObject
+}
+
+export interface EnterprisePayerVariables {
+  payload: TeslaOpaqueObject
+  confirmed: boolean
+}
+
 // VehicleLiveState removed — vehicle_live_state table dropped.
 // Use VehicleState (from /vehicles/{id}/state via SignalStore) or
 // VehicleLiveState from hooks/useVehicleLive (SSE) instead.
diff --git a/web/src/components/layout/Layout.test.tsx b/web/src/components/layout/Layout.test.tsx
index 45621b4808..9b25b3c37c 100644
--- a/web/src/components/layout/Layout.test.tsx
+++ b/web/src/components/layout/Layout.test.tsx
@@ -396,6 +396,15 @@ describe('navSections (data export)', () => {
     expect(navSearchKeywords['/action-center']).toContain('decision inbox')
   })
 
+  it('places Vehicle Management in the Vehicles group', () => {
+    const vehiclesSection = navSections.find((section) => section.title === 'Vehicles')
+    const management = vehiclesSection?.items.find(
+      (item) => item.to === '/vehicle-management',
+    )
+    expect(management?.label).toBe('Vehicle Management')
+    expect(navSearchKeywords['/vehicle-management']).toContain('enterprise roles')
+  })
+
   it('every item has a rooted, unique path and a non-empty label', () => {
     const paths = allItems.map((i) => i.to)
     expect(paths.every((p) => typeof p === 'string' && p.startsWith('/'))).toBe(true)
@@ -426,6 +435,7 @@ describe('navSearchKeywords (data export)', () => {
     expect(navSearchKeywords['/charging']).toContain('charge')
     expect(navSearchKeywords['/battery']).toContain('soh')
     expect(navSearchKeywords['/action-center']).toContain('recommendations')
+    expect(navSearchKeywords['/vehicle-management']).toContain('pricing')
   })
 })
 
diff --git a/web/src/components/layout/Layout.tsx b/web/src/components/layout/Layout.tsx
index 0913014c9e..4870127960 100644
--- a/web/src/components/layout/Layout.tsx
+++ b/web/src/components/layout/Layout.tsx
@@ -89,6 +89,7 @@ export const navSearchKeywords: Record<string, string[]> = {
   '/action-center': ['action center', 'decision inbox', 'recommendations', 'priorities', 'findings', 'snooze'],
   '/live': ['map', 'location', 'tracking', 'realtime', 'vehicle position'],
   '/vehicles': ['cars', 'fleet', 'garage', 'vehicle list'],
+  '/vehicle-management': ['vehicle management', 'fleet api management', 'options', 'specs', 'warranty', 'pricing', 'enterprise roles', 'payer'],
   '/period-compare': ['comparison', 'period', 'time', 'this month vs last month', 'trends'],
   '/weekly-digest': ['digest', 'weekly', 'summary', 'report'],
   '/navigation': ['route', 'directions', 'map', 'nav'],
@@ -311,6 +312,7 @@ export const navSections = [
     title: 'Vehicles',
     items: [
       { to: '/vehicles', icon: Icons.vehicle, label: 'My Vehicles', color: 'text-sky-400', dataTour: 'vehicle-section' },
+      { to: '/vehicle-management', icon: Icons.database, label: 'Vehicle Management', color: 'text-violet-400' },
       { to: '/digital-twin', icon: Icons.monitor, label: 'Vehicle Live View', color: 'text-cyan-400' },
       { to: '/vehicle-comparison', icon: Icons.arrowLeftRight, label: 'Compare Vehicles', color: 'text-orange-400', minVehicles: 2 },
       { to: '/locations', icon: Icons.location, label: 'Saved Locations', color: 'text-emerald-400' },
diff --git a/web/src/features/system/pages/CommandsPage.test.tsx b/web/src/features/system/pages/CommandsPage.test.tsx
index d6cbd66d46..a83246a177 100644
--- a/web/src/features/system/pages/CommandsPage.test.tsx
+++ b/web/src/features/system/pages/CommandsPage.test.tsx
@@ -155,6 +155,7 @@ describe('CommandsPage', () => {
     expect(screen.getByText('Safety & execution')).toBeInTheDocument();
     expect(screen.getByText('Recent command activity')).toBeInTheDocument();
     expect(screen.queryByTestId('vehicle-command-center')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('vehicle-management-workspace')).not.toBeInTheDocument();
   });
 
   it('renders a useful no-vehicle state without hiding safety or activity', () => {
@@ -169,6 +170,7 @@ describe('CommandsPage', () => {
     expect(screen.getByTestId('command-safety')).toBeInTheDocument();
     expect(screen.getByText('Recent command activity')).toBeInTheDocument();
     expect(screen.queryByLabelText('Select vehicle')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('vehicle-management-workspace')).not.toBeInTheDocument();
   });
 
   it('keeps all section shells visible when the roster query fails', () => {
@@ -206,6 +208,7 @@ describe('CommandsPage', () => {
     expect(screen.getByTestId('vehicle-command-center')).toHaveTextContent(
       'Cybertruck',
     );
+    expect(screen.queryByTestId('vehicle-management-workspace')).not.toBeInTheDocument();
     expect(screen.getByText('1/2 recently reachable')).toBeInTheDocument();
 
     const picker = screen.getByLabelText('Select vehicle');
diff --git a/web/src/features/vehicles/components/vehicle-management/EnterprisePayerCard.tsx b/web/src/features/vehicles/components/vehicle-management/EnterprisePayerCard.tsx
new file mode 100644
index 0000000000..656f3206bc
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/EnterprisePayerCard.tsx
@@ -0,0 +1,117 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { TeslaOpaqueObject } from '@/api/types'
+import { useSetEnterprisePayer } from '@/api/hooks/useVehicles'
+import { AlertBanner } from '@/components/feedback'
+import { ConfirmDialog } from '@/components/ui'
+import { Icons } from '@/lib/icons'
+import { ManagementEndpointCard } from './ManagementEndpointCard'
+import { OpaqueJsonDialog } from './OpaqueJsonDialog'
+
+interface EnterprisePayerCardProps {
+  vehicleId?: number
+}
+
+const PAYER_CONFIRMATION = 'PAYER'
+
+export function EnterprisePayerCard({ vehicleId }: EnterprisePayerCardProps) {
+  const { t } = useTranslation()
+  const selectedId = vehicleId ? String(vehicleId) : undefined
+  const payer = useSetEnterprisePayer(selectedId)
+  const [jsonDialogOpen, setJSONDialogOpen] = useState(false)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [stagedPayload, setStagedPayload] =
+    useState<TeslaOpaqueObject | null>(null)
+
+  const clearConfirmation = () => {
+    setConfirmOpen(false)
+    setStagedPayload(null)
+  }
+
+  return (
+    <>
+      <ManagementEndpointCard
+        endpointId="enterprise-payer"
+        title={t('vehicleManagement.payer.title', 'Enterprise payer')}
+        description={t(
+          'vehicleManagement.payer.description',
+          'State-changing enterprise billing operation for the selected vehicle.',
+        )}
+        endpoint="POST /api/1/dx/enterprise/v1/{vin}/payer"
+        prerequisite="enterprise"
+        data={payer.data?.data}
+        error={payer.error}
+        refreshPending={payer.isPending}
+        operationSucceeded={payer.isSuccess}
+        unavailable={!selectedId}
+        actionLabel={t('vehicleManagement.payer.action', 'Configure payer change')}
+        emptyTitle={t('vehicleManagement.payer.empty', 'No payer change submitted')}
+        emptyMessage={t(
+          'vehicleManagement.payer.emptyDetail',
+          'Payer request objects are never cached. A successful response is shown only for the current session.',
+        )}
+        warning={
+          <AlertBanner
+            variant="danger"
+            icon={<Icons.wallet className="h-4 w-4" />}
+            title={t(
+              'vehicleManagement.payer.warningTitle',
+              'Changes enterprise billing responsibility',
+            )}
+          >
+            {t(
+              'vehicleManagement.payer.warning',
+              'Only continue with an object supplied by an authorized Tesla enterprise workflow. Access is not assumed.',
+            )}
+          </AlertBanner>
+        }
+        onRefresh={() => setJSONDialogOpen(true)}
+      />
+
+      <OpaqueJsonDialog
+        open={jsonDialogOpen}
+        title={t('vehicleManagement.payer.dialogTitle', 'Prepare payer change')}
+        description={t(
+          'vehicleManagement.payer.schema',
+          'Tesla controls this undocumented schema. TeslaSync validates only that the payload is a non-empty JSON object.',
+        )}
+        submitLabel={t('vehicleManagement.payer.continue', 'Continue to confirmation')}
+        destructive
+        onClose={() => setJSONDialogOpen(false)}
+        onSubmit={(payload) => {
+          setStagedPayload(payload)
+          setJSONDialogOpen(false)
+          setConfirmOpen(true)
+        }}
+      />
+
+      <ConfirmDialog
+        open={confirmOpen}
+        title={t(
+          'vehicleManagement.payer.confirmTitle',
+          'Confirm enterprise payer change',
+        )}
+        message={t(
+          'vehicleManagement.payer.confirmMessage',
+          'This changes enterprise billing responsibility for the selected vehicle. TeslaSync will send the staged object only after this confirmation.',
+        )}
+        confirmLabel={t('vehicleManagement.payer.confirmAction', 'Change enterprise payer')}
+        cancelLabel={t('common.cancel', 'Cancel')}
+        requireTypedConfirmation={PAYER_CONFIRMATION}
+        typedConfirmationLabel={t(
+          'vehicleManagement.payer.typeConfirmation',
+          'Type PAYER to confirm the billing change',
+        )}
+        variant="danger"
+        loading={payer.isPending}
+        onCancel={clearConfirmation}
+        onConfirm={() => {
+          if (!stagedPayload) return
+          const payload = stagedPayload
+          clearConfirmation()
+          payer.mutate({ payload, confirmed: true })
+        }}
+      />
+    </>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/EnterpriseRolesCard.tsx b/web/src/features/vehicles/components/vehicle-management/EnterpriseRolesCard.tsx
new file mode 100644
index 0000000000..5b4deb80e7
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/EnterpriseRolesCard.tsx
@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next'
+import {
+  useEnterpriseRoles,
+  useRefreshEnterpriseRoles,
+} from '@/api/hooks/useVehicles'
+import { ManagementEndpointCard } from './ManagementEndpointCard'
+
+interface EnterpriseRolesCardProps {
+  vehicleId?: number
+}
+
+export function EnterpriseRolesCard({ vehicleId }: EnterpriseRolesCardProps) {
+  const { t } = useTranslation()
+  const selectedId = vehicleId ? String(vehicleId) : undefined
+  const roles = useEnterpriseRoles(selectedId)
+  const refreshRoles = useRefreshEnterpriseRoles(selectedId)
+
+  return (
+    <ManagementEndpointCard
+      endpointId="enterprise-roles"
+      title={t('vehicleManagement.roles.title', 'Enterprise roles')}
+      description={t(
+        'vehicleManagement.roles.description',
+        'Cached business roles for the selected VIN. Refresh is the only action that contacts Tesla.',
+      )}
+      endpoint="GET /api/1/dx/enterprise/v1/{vin}/roles"
+      prerequisite="enterprise"
+      kind="roles"
+      data={roles.data?.data}
+      fetchedAt={roles.data?.fetched_at}
+      loading={roles.isLoading}
+      error={refreshRoles.error ?? roles.error}
+      refreshPending={refreshRoles.isPending}
+      operationSucceeded={refreshRoles.isSuccess}
+      unavailable={!selectedId}
+      onRefresh={() => refreshRoles.mutate()}
+    />
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
new file mode 100644
index 0000000000..733f530f2e
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
@@ -0,0 +1,139 @@
+import { useTranslation } from 'react-i18next'
+import { isApiError } from '@/api/client'
+import { AlertBanner, EmptyState, Spinner } from '@/components/feedback'
+import { Badge } from '@/components/ui'
+import {
+  managementErrorText,
+  summarizeManagementData,
+  type ManagementEndpointKind,
+} from './managementJson'
+import { StructuredDataView } from './StructuredDataView'
+
+interface ManagementEndpointBodyProps {
+  data: unknown
+  loading: boolean
+  error?: unknown
+  unavailable: boolean
+  kind: ManagementEndpointKind
+  emptyTitle?: string
+  emptyMessage?: string
+}
+
+function hasRenderableData(value: unknown): boolean {
+  if (value == null) return false
+  if (Array.isArray(value)) return value.length > 0
+  if (typeof value === 'object') return Object.keys(value).length > 0
+  if (typeof value === 'string') return value.trim().length > 0
+  return true
+}
+
+export function ManagementEndpointBody({
+  data,
+  loading,
+  error,
+  unavailable,
+  kind,
+  emptyTitle,
+  emptyMessage,
+}: ManagementEndpointBodyProps) {
+  const { t } = useTranslation()
+  const recordData =
+    data !== null && typeof data === 'object' && !Array.isArray(data)
+      ? data as Record<string, unknown>
+      : null
+  const summary = summarizeManagementData(recordData, kind)
+  const capabilityUnavailable =
+    isApiError(error) && [401, 402, 403, 412].includes(error.status)
+  const summaryLabels = {
+    model: t('vehicleManagement.summary.model', 'Model'),
+    trim: t('vehicleManagement.summary.trim', 'Trim'),
+    status: t('vehicleManagement.summary.status', 'Status'),
+    expiry: t('vehicleManagement.summary.expiry', 'Expiry'),
+    items: t('vehicleManagement.summary.items', 'Items'),
+    fields: t('vehicleManagement.summary.fields', 'Fields returned'),
+    roles: t('vehicleManagement.summary.roles', 'Roles'),
+  }
+
+  if (unavailable) {
+    return (
+      // no-action: Vehicle selection is owned by the workspace selector above the endpoint cards.
+      <EmptyState
+        title={t('vehicleManagement.state.vehicleRequired', 'Select a vehicle')}
+        message={t(
+          'vehicleManagement.state.vehicleRequiredDetail',
+          'This endpoint is unavailable until a vehicle is selected.',
+        )}
+        className="py-5"
+      />
+    )
+  }
+  if (loading) {
+    return (
+      <Spinner
+        size="sm"
+        label={t('vehicleManagement.state.loading', 'Loading cached data')}
+        className="py-5"
+      />
+    )
+  }
+  if (capabilityUnavailable) {
+    return (
+      <AlertBanner
+        variant="warning"
+        title={t('vehicleManagement.state.unavailable', 'Capability unavailable')}
+      >
+        {managementErrorText(
+          error,
+          t(
+            'vehicleManagement.state.prerequisiteError',
+            'Tesla did not confirm the required account scope or prerequisite.',
+          ),
+        )}
+      </AlertBanner>
+    )
+  }
+  if (error) {
+    return (
+      <AlertBanner
+        variant="danger"
+        title={t('vehicleManagement.state.error', 'Request failed')}
+      >
+        {managementErrorText(
+          error,
+          t(
+            'vehicleManagement.state.errorDetail',
+            'The request could not be completed.',
+          ),
+        )}
+      </AlertBanner>
+    )
+  }
+  if (hasRenderableData(data)) {
+    return (
+      <div className="space-y-3">
+        <div className="flex flex-wrap gap-2">
+          {summary.map((item) => (
+            <Badge key={`${item.label}-${item.value}`} variant="neutral">
+              {summaryLabels[item.label]}: {item.value}
+            </Badge>
+          ))}
+        </div>
+        <StructuredDataView value={data} />
+      </div>
+    )
+  }
+  return (
+    // no-action: Refresh and operation actions are already exposed in the endpoint card header.
+    <EmptyState
+      title={emptyTitle ?? t('vehicleManagement.state.empty', 'No cached data')}
+      message={
+        emptyMessage ??
+        t(
+          'vehicleManagement.state.emptyDetail',
+          'Use refresh to request this information from Tesla when the required access is available.',
+        )
+      }
+      className="py-5"
+    />
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
new file mode 100644
index 0000000000..291558dd0d
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
@@ -0,0 +1,137 @@
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Badge,
+  Button,
+  Code,
+  GlassPanel,
+  PanelTitle,
+  Text,
+} from '@/components/ui'
+import { AlertBanner } from '@/components/feedback'
+import { Icons } from '@/lib/icons'
+import type { ManagementEndpointKind } from './managementJson'
+import { ManagementEndpointBody } from './ManagementEndpointBody'
+
+type Prerequisite = 'user' | 'partner' | 'enterprise'
+
+interface ManagementEndpointCardProps {
+  endpointId: string
+  title: string
+  description: string
+  endpoint: string
+  prerequisite: Prerequisite
+  data: unknown
+  fetchedAt?: string | null
+  loading?: boolean
+  error?: unknown
+  refreshPending?: boolean
+  operationSucceeded?: boolean
+  refreshDisabled?: boolean
+  unavailable?: boolean
+  kind?: ManagementEndpointKind
+  warning?: ReactNode
+  actionLabel?: string
+  emptyTitle?: string
+  emptyMessage?: string
+  onRefresh?: () => void
+}
+
+const prerequisiteVariant = {
+  user: 'info',
+  partner: 'warning',
+  enterprise: 'danger',
+} as const
+
+export function ManagementEndpointCard({
+  endpointId,
+  title,
+  description,
+  endpoint,
+  prerequisite,
+  data,
+  fetchedAt,
+  loading = false,
+  error,
+  refreshPending = false,
+  operationSucceeded = false,
+  refreshDisabled = false,
+  unavailable = false,
+  kind = 'generic',
+  warning,
+  actionLabel,
+  emptyTitle,
+  emptyMessage,
+  onRefresh,
+}: ManagementEndpointCardProps) {
+  const { t } = useTranslation()
+  const prerequisiteLabel = {
+    user: t('vehicleManagement.prerequisite.user', 'User access'),
+    partner: t('vehicleManagement.prerequisite.partner', 'Partner token'),
+    enterprise: t('vehicleManagement.prerequisite.enterprise', 'Enterprise'),
+  }[prerequisite]
+
+  return (
+    <GlassPanel
+      className="flex min-h-72 flex-col gap-3 p-4"
+      data-management-endpoint={endpointId}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="min-w-0 space-y-1">
+          <PanelTitle>{title}</PanelTitle>
+          <Text variant="bodySm" as="p">{description}</Text>
+        </div>
+        <Badge variant={prerequisiteVariant[prerequisite]}>
+          {prerequisiteLabel}
+        </Badge>
+      </div>
+
+      <Code className="break-all text-[var(--text-secondary)]">{endpoint}</Code>
+      {warning}
+      {operationSucceeded && !error && (
+        <AlertBanner
+          variant="success"
+          title={t('vehicleManagement.state.success', 'Request completed')}
+        >
+          {t(
+            'vehicleManagement.state.successDetail',
+            'Tesla accepted the request. Any returned data is shown below.',
+          )}
+        </AlertBanner>
+      )}
+
+      <div className="min-h-24 flex-1">
+        <ManagementEndpointBody
+          data={data}
+          loading={loading}
+          error={error}
+          unavailable={unavailable}
+          kind={kind}
+          emptyTitle={emptyTitle}
+          emptyMessage={emptyMessage}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border-default)] pt-3">
+        <Text variant="caption">
+          {fetchedAt
+            ? t('vehicleManagement.state.fetchedAt', 'Cached {{time}}', { time: fetchedAt })
+            : t('vehicleManagement.state.notFetched', 'Not cached')}
+        </Text>
+        {onRefresh && (
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            loading={refreshPending}
+            disabled={refreshDisabled || unavailable}
+            icon={<Icons.refresh className="h-4 w-4" aria-hidden="true" />}
+            onClick={onRefresh}
+          >
+            {actionLabel ?? t('vehicleManagement.action.refresh', 'Refresh from Tesla')}
+          </Button>
+        )}
+      </div>
+    </GlassPanel>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/OpaqueJsonDialog.tsx b/web/src/features/vehicles/components/vehicle-management/OpaqueJsonDialog.tsx
new file mode 100644
index 0000000000..ec84fe62c5
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/OpaqueJsonDialog.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useState, type FormEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { TeslaOpaqueObject } from '@/api/types'
+import { AlertBanner } from '@/components/feedback'
+import { Button, Modal, Textarea } from '@/components/ui'
+import { Icons } from '@/lib/icons'
+import { parseNonEmptyJSONObject } from './managementJson'
+
+interface OpaqueJsonDialogProps {
+  open: boolean
+  title: string
+  description: string
+  submitLabel: string
+  pending?: boolean
+  destructive?: boolean
+  onClose: () => void
+  onSubmit: (payload: TeslaOpaqueObject) => void
+}
+
+export function OpaqueJsonDialog({
+  open,
+  title,
+  description,
+  submitLabel,
+  pending = false,
+  destructive = false,
+  onClose,
+  onSubmit,
+}: OpaqueJsonDialogProps) {
+  const { t } = useTranslation()
+  const [source, setSource] = useState('{}')
+  const [validationError, setValidationError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!open) return
+    setSource('{}')
+    setValidationError(null)
+  }, [open])
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault()
+    const parsed = parseNonEmptyJSONObject(source)
+    if (!parsed.ok) {
+      const messages = {
+        invalid: t(
+          'vehicleManagement.json.invalid',
+          'Enter valid JSON with no trailing content.',
+        ),
+        object_required: t(
+          'vehicleManagement.json.objectRequired',
+          'The payload must be a JSON object, not an array, scalar, or null.',
+        ),
+        empty: t(
+          'vehicleManagement.json.empty',
+          'The JSON object must contain at least one field.',
+        ),
+      }
+      setValidationError(messages[parsed.reason])
+      return
+    }
+    setValidationError(null)
+    onSubmit(parsed.value)
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title={title} size="lg">
+      <form className="space-y-4 p-4 sm:p-6" onSubmit={handleSubmit}>
+        <AlertBanner
+          variant={destructive ? 'danger' : 'info'}
+          icon={<Icons.fileJson className="h-4 w-4" />}
+          title={t(
+            'vehicleManagement.json.schemaTitle',
+            'Tesla-controlled undocumented schema',
+          )}
+        >
+          {description}
+        </AlertBanner>
+
+        <Textarea
+          id="vehicle-management-json"
+          label={t('vehicleManagement.json.label', 'JSON object')}
+          value={source}
+          onChange={(event) => setSource(event.target.value)}
+          rows={12}
+          spellCheck={false}
+          autoComplete="off"
+          className="font-mono"
+          error={validationError ?? undefined}
+          disabled={pending}
+          required
+        />
+
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={onClose}
+            disabled={pending}
+          >
+            {t('common.cancel', 'Cancel')}
+          </Button>
+          <Button
+            type="submit"
+            variant={destructive ? 'danger' : 'primary'}
+            loading={pending}
+          >
+            {submitLabel}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/PaidVehicleSpecsCard.tsx b/web/src/features/vehicles/components/vehicle-management/PaidVehicleSpecsCard.tsx
new file mode 100644
index 0000000000..deaf157b2c
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/PaidVehicleSpecsCard.tsx
@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  useRefreshVehicleSpecs,
+  useVehicleSpecs,
+} from '@/api/hooks/useVehicles'
+import { AlertBanner } from '@/components/feedback'
+import { ConfirmDialog } from '@/components/ui'
+import { Icons } from '@/lib/icons'
+import { ManagementEndpointCard } from './ManagementEndpointCard'
+
+interface PaidVehicleSpecsCardProps {
+  vehicleId?: number
+}
+
+export function PaidVehicleSpecsCard({ vehicleId }: PaidVehicleSpecsCardProps) {
+  const { t } = useTranslation()
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const selectedId = vehicleId ? String(vehicleId) : undefined
+  const specs = useVehicleSpecs(selectedId)
+  const refreshSpecs = useRefreshVehicleSpecs(selectedId)
+
+  return (
+    <>
+      <ManagementEndpointCard
+        endpointId="vehicle-specs"
+        title={t('vehicleManagement.specs.title', 'Vehicle specifications')}
+        description={t(
+          'vehicleManagement.specs.description',
+          'Partner-scoped vehicle specifications cached for 24 hours by TeslaSync.',
+        )}
+        endpoint="GET /api/1/vehicles/{vin}/specs"
+        prerequisite="partner"
+        kind="specs"
+        data={specs.data?.data}
+        fetchedAt={specs.data?.fetched_at}
+        loading={specs.isLoading}
+        error={refreshSpecs.error ?? specs.error}
+        refreshPending={refreshSpecs.isPending}
+        operationSucceeded={refreshSpecs.isSuccess}
+        unavailable={!selectedId}
+        warning={
+          <AlertBanner
+            variant="warning"
+            icon={<Icons.dollarSign className="h-4 w-4" />}
+            title={t('vehicleManagement.specs.costTitle', 'Paid Tesla API result')}
+          >
+            {t(
+              'vehicleManagement.specs.costWarning',
+              'Tesla bills $0.10 for each successful specifications result. TeslaSync also enforces a 24-hour refresh guard.',
+            )}
+          </AlertBanner>
+        }
+        onRefresh={() => setConfirmOpen(true)}
+      />
+
+      <ConfirmDialog
+        open={confirmOpen}
+        title={t(
+          'vehicleManagement.specs.confirmTitle',
+          'Request paid vehicle specifications?',
+        )}
+        message={t(
+          'vehicleManagement.specs.confirmMessage',
+          'A successful Tesla response costs $0.10. Continue only if the cached result needs updating.',
+        )}
+        confirmLabel={t('vehicleManagement.specs.confirmAction', 'Request $0.10 result')}
+        cancelLabel={t('common.cancel', 'Cancel')}
+        variant="warning"
+        loading={refreshSpecs.isPending}
+        onCancel={() => setConfirmOpen(false)}
+        onConfirm={() => {
+          setConfirmOpen(false)
+          refreshSpecs.mutate()
+        }}
+      />
+    </>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/StructuredDataView.tsx b/web/src/features/vehicles/components/vehicle-management/StructuredDataView.tsx
new file mode 100644
index 0000000000..0fc42828f5
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/StructuredDataView.tsx
@@ -0,0 +1,125 @@
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Code, Text } from '@/components/ui'
+import { isSensitiveManagementKey } from './managementJson'
+
+interface StructuredDataViewProps {
+  value: unknown
+}
+
+interface RendererLabels {
+  redacted: string
+  emptyObject: string
+  emptyArray: string
+  noData: string
+  trueValue: string
+  falseValue: string
+  maxDepth: string
+  item: (index: number) => string
+}
+
+const MAX_RENDER_DEPTH = 8
+
+function renderScalar(value: string | number | boolean | null, labels: RendererLabels): ReactNode {
+  if (value === null) {
+    return <Text variant="bodySm">{labels.noData}</Text>
+  }
+  if (typeof value === 'boolean') {
+    return (
+      <Text variant="bodySm">
+        {value ? labels.trueValue : labels.falseValue}
+      </Text>
+    )
+  }
+  return (
+    <Text
+      variant="bodySm"
+      mono={typeof value === 'number'}
+      className="break-words whitespace-pre-wrap"
+    >
+      {String(value)}
+    </Text>
+  )
+}
+
+function renderNode(value: unknown, depth: number, labels: RendererLabels): ReactNode {
+  if (depth >= MAX_RENDER_DEPTH) {
+    return <Text variant="helper">{labels.maxDepth}</Text>
+  }
+  if (
+    value === null ||
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  ) {
+    return renderScalar(value, labels)
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return <Text variant="helper">{labels.emptyArray}</Text>
+    }
+    return (
+      <div className="space-y-2 border-l border-[var(--border-default)] pl-3">
+        {value.map((item, index) => (
+          <div key={index} className="space-y-1">
+            <Text variant="label">{labels.item(index + 1)}</Text>
+            {renderNode(item, depth + 1, labels)}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>)
+    if (entries.length === 0) {
+      return <Text variant="helper">{labels.emptyObject}</Text>
+    }
+    return (
+      <dl className="space-y-2">
+        {entries.map(([key, nested]) => (
+          <div
+            key={key}
+            className="grid gap-1 rounded-lg border border-[var(--border-default)] bg-[var(--surface-1)] p-2 sm:grid-cols-[minmax(8rem,0.4fr)_minmax(0,1fr)]"
+          >
+            <dt className="min-w-0">
+              <Code className="break-all">{key}</Code>
+            </dt>
+            <dd className="min-w-0">
+              {isSensitiveManagementKey(key)
+                ? <Text variant="helper">{labels.redacted}</Text>
+                : renderNode(nested, depth + 1, labels)}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    )
+  }
+
+  return <Text variant="helper">{labels.noData}</Text>
+}
+
+export function StructuredDataView({ value }: StructuredDataViewProps) {
+  const { t } = useTranslation()
+  const labels: RendererLabels = {
+    redacted: t('vehicleManagement.data.redacted', 'Redacted'),
+    emptyObject: t('vehicleManagement.data.emptyObject', 'Empty object'),
+    emptyArray: t('vehicleManagement.data.emptyArray', 'Empty list'),
+    noData: t('vehicleManagement.data.noData', 'No value'),
+    trueValue: t('vehicleManagement.data.true', 'Yes'),
+    falseValue: t('vehicleManagement.data.false', 'No'),
+    maxDepth: t('vehicleManagement.data.maxDepth', 'Additional nested data'),
+    item: (index) =>
+      t('vehicleManagement.data.item', 'Item {{index}}', { index }),
+  }
+
+  return (
+    <div
+      className="max-h-80 overflow-auto pr-1"
+      data-testid="management-structured-data"
+    >
+      {renderNode(value, 0, labels)}
+    </div>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
new file mode 100644
index 0000000000..65b2abadf3
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
@@ -0,0 +1,410 @@
+import type { ReactNode } from 'react'
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ToastProvider } from '@/components/feedback'
+
+vi.mock('@/api/client', async () => {
+  const actual = await vi.importActual<typeof import('@/api/client')>(
+    '@/api/client',
+  )
+  return { ...actual, request: vi.fn() }
+})
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>(
+    'react-i18next',
+  )
+  const interpolate = (
+    template: string,
+    values?: Record<string, unknown>,
+  ): string =>
+    values
+      ? template.replace(/\{\{\s*(\w+)\s*\}\}/g, (_match, key: string) =>
+          String(values[key] ?? `{{${key}}}`),
+        )
+      : template
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown, options?: unknown) => {
+        if (typeof fallback === 'string') {
+          return interpolate(
+            fallback,
+            options && typeof options === 'object'
+              ? options as Record<string, unknown>
+              : undefined,
+          )
+        }
+        if (fallback && typeof fallback === 'object') {
+          const values = fallback as Record<string, unknown>
+          return typeof values.defaultValue === 'string'
+            ? interpolate(values.defaultValue, values)
+            : key
+        }
+        return key
+      },
+      i18n: { language: 'en' },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  }
+})
+
+import { ApiError, request } from '@/api/client'
+import { VehicleManagementWorkspace } from './VehicleManagementWorkspace'
+
+const requestMock = request as unknown as ReturnType<typeof vi.fn>
+const VEHICLE_ID = 42
+
+type RequestCall = [string, RequestInit?]
+
+let pricingError: Error | null
+let optionsError: Error | null
+let holdReads: boolean
+
+const cachedAt = '2026-08-08T12:00:00Z'
+
+function responseFor(url: string): unknown {
+  if (url.endsWith('/options')) {
+    if (optionsError) throw optionsError
+    return {
+      data: {
+        codes: ['A', 'B'],
+        api_token: 'must-never-render',
+        nested: { enabled: true },
+      },
+      fetched_at: cachedAt,
+    }
+  }
+  if (url.endsWith('/specs')) {
+    return {
+      data: { model: 'Model 3', trim_badging: 'Performance' },
+      fetched_at: cachedAt,
+    }
+  }
+  if (url.endsWith('/subscriptions')) {
+    return {
+      data: { subscriptions: [{ name: 'Premium' }], eligible: true },
+      fetched_at: cachedAt,
+    }
+  }
+  if (url.endsWith('/upgrades')) {
+    return {
+      data: { upgrades: [{ name: 'Acceleration Boost' }] },
+      fetched_at: cachedAt,
+    }
+  }
+  if (url === '/tesla/warranty') {
+    return {
+      data: { warranty_status: 'active', expiry_date: '2028-01-01' },
+      fetched_at: cachedAt,
+    }
+  }
+  if (url.endsWith('/enterprise-roles')) {
+    return {
+      data: { roles: ['fleet_manager'] },
+      fetched_at: cachedAt,
+    }
+  }
+  return { data: { ok: true }, fetched_at: cachedAt }
+}
+
+function installRequestRouter() {
+  requestMock.mockImplementation((url: string, options?: RequestInit) => {
+    const method = options?.method ?? 'GET'
+    if (method === 'GET') {
+      if (holdReads) return new Promise(() => undefined)
+      try {
+        return Promise.resolve(responseFor(url))
+      } catch (error) {
+        return Promise.reject(error)
+      }
+    }
+    if (url === '/tesla/vehicle-pricing' && pricingError) {
+      return Promise.reject(pricingError)
+    }
+    if (url === '/tesla/vehicle-pricing') {
+      return Promise.resolve({ data: { quote: 17, currency: 'USD' } })
+    }
+    if (url.endsWith('/enterprise-payer')) {
+      return Promise.resolve({ data: { updated: true } })
+    }
+    return Promise.resolve(responseFor(url.replace('/refresh', '')))
+  })
+}
+
+function renderWorkspace(vehicleId: number | null = VEHICLE_ID) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <ToastProvider>
+          <VehicleManagementWorkspace vehicleId={vehicleId ?? undefined} />
+        </ToastProvider>
+      </MemoryRouter>
+    </QueryClientProvider>,
+  )
+}
+
+function calls(method?: string): RequestCall[] {
+  return (requestMock.mock.calls as RequestCall[]).filter(([, options]) =>
+    method ? (options?.method ?? 'GET') === method : true,
+  )
+}
+
+function endpointCard(id: string): HTMLElement {
+  const card = document.querySelector<HTMLElement>(
+    `[data-management-endpoint="${id}"]`,
+  )
+  if (!card) throw new Error(`Missing endpoint card ${id}`)
+  return card
+}
+
+beforeEach(() => {
+  requestMock.mockReset()
+  pricingError = null
+  optionsError = null
+  holdReads = false
+  installRequestRouter()
+})
+
+describe('VehicleManagementWorkspace', () => {
+  it('shows all eight official endpoint cards, reuses cached reads, and never auto-refreshes', async () => {
+    renderWorkspace()
+
+    const expectedCards = [
+      'vehicle-options',
+      'vehicle-specs',
+      'warranty-details',
+      'subscription-eligibility',
+      'upgrade-eligibility',
+      'vehicle-pricing',
+      'enterprise-roles',
+      'enterprise-payer',
+    ]
+    for (const id of expectedCards) {
+      expect(endpointCard(id)).toBeInTheDocument()
+    }
+
+    await screen.findByText('Model 3')
+    const readURLs = calls('GET').map(([url]) => url)
+    expect(readURLs).toEqual(expect.arrayContaining([
+      `/vehicles/${VEHICLE_ID}/options`,
+      `/vehicles/${VEHICLE_ID}/specs`,
+      `/vehicles/${VEHICLE_ID}/subscriptions`,
+      `/vehicles/${VEHICLE_ID}/upgrades`,
+      '/tesla/warranty',
+      `/vehicles/${VEHICLE_ID}/enterprise-roles`,
+    ]))
+    expect(calls('POST')).toHaveLength(0)
+
+    expect(screen.queryByText('must-never-render')).not.toBeInTheDocument()
+    expect(screen.getByText('Redacted')).toBeInTheDocument()
+    expect(document.body).not.toHaveTextContent('[object Object]')
+  })
+
+  it('warns about the paid specs result and requires confirmation before refresh', async () => {
+    renderWorkspace()
+    await screen.findByText('Model 3')
+    const card = endpointCard('vehicle-specs')
+
+    expect(card).toHaveTextContent('$0.10')
+    fireEvent.click(
+      within(card).getByRole('button', { name: 'Refresh from Tesla' }),
+    )
+
+    const dialog = screen.getByRole('dialog')
+    expect(dialog).toHaveTextContent('A successful Tesla response costs $0.10')
+    expect(calls('POST')).toHaveLength(0)
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: 'Request $0.10 result' }),
+    )
+
+    await waitFor(() =>
+      expect(calls('POST').map(([url]) => url)).toContain(
+        `/vehicles/${VEHICLE_ID}/specs/refresh`,
+      ),
+    )
+  })
+
+  it('validates and submits the exact non-empty pricing object', async () => {
+    renderWorkspace()
+    const card = endpointCard('vehicle-pricing')
+    fireEvent.click(
+      within(card).getByRole('button', { name: 'Open pricing query' }),
+    )
+
+    let dialog = screen.getByRole('dialog')
+    const textarea = within(dialog).getByLabelText(/JSON object/)
+    fireEvent.change(textarea, { target: { value: '[]' } })
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: 'Submit pricing query' }),
+    )
+    expect(
+      within(dialog).getByText(/must be a JSON object/i),
+    ).toBeInTheDocument()
+    expect(calls('POST')).toHaveLength(0)
+
+    const payload = { opaque: { nested: [1, true] } }
+    fireEvent.change(textarea, { target: { value: JSON.stringify(payload) } })
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: 'Submit pricing query' }),
+    )
+
+    await waitFor(() => {
+      const pricingCall = calls('POST').find(
+        ([url]) => url === '/tesla/vehicle-pricing',
+      )
+      expect(pricingCall).toBeDefined()
+      expect(JSON.parse(String(pricingCall?.[1]?.body))).toEqual({ payload })
+    })
+    await waitFor(() => {
+      dialog = screen.queryByRole('dialog') as HTMLElement
+      expect(dialog).not.toBeInTheDocument()
+    })
+    expect(
+      within(endpointCard('vehicle-pricing')).getByText('Request completed'),
+    ).toBeInTheDocument()
+  })
+
+  it('refreshes cached enterprise roles only after the explicit action', async () => {
+    renderWorkspace()
+    await screen.findByText('fleet_manager')
+    const card = endpointCard('enterprise-roles')
+
+    fireEvent.click(
+      within(card).getByRole('button', { name: 'Refresh from Tesla' }),
+    )
+
+    await waitFor(() =>
+      expect(calls('POST').map(([url]) => url)).toContain(
+        `/vehicles/${VEHICLE_ID}/enterprise-roles/refresh`,
+      ),
+    )
+  })
+
+  it('requires a second destructive payer confirmation and sends the exact object', async () => {
+    renderWorkspace()
+    const card = endpointCard('enterprise-payer')
+    fireEvent.click(
+      within(card).getByRole('button', { name: 'Configure payer change' }),
+    )
+
+    let dialog = screen.getByRole('dialog')
+    const payload = { opaque: { nested: [1, true] } }
+    fireEvent.change(within(dialog).getByLabelText(/JSON object/), {
+      target: { value: JSON.stringify(payload) },
+    })
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: 'Continue to confirmation' }),
+    )
+
+    dialog = screen.getByRole('dialog')
+    expect(dialog).toHaveTextContent('changes enterprise billing responsibility')
+    expect(
+      calls('POST').some(([url]) => url.endsWith('/enterprise-payer')),
+    ).toBe(false)
+
+    const confirm = within(dialog).getByRole('button', {
+      name: 'Change enterprise payer',
+    })
+    expect(confirm).toBeDisabled()
+    fireEvent.change(
+      within(dialog).getByLabelText('Type PAYER to confirm the billing change'),
+      { target: { value: 'PAYER' } },
+    )
+    fireEvent.click(confirm)
+
+    await waitFor(() => {
+      const payerCall = calls('POST').find(([url]) =>
+        url.endsWith('/enterprise-payer'),
+      )
+      expect(payerCall).toBeDefined()
+      expect(JSON.parse(String(payerCall?.[1]?.body))).toEqual({
+        payload,
+        confirmed: true,
+      })
+    })
+    await waitFor(() => {
+      const roleReads = calls('GET').filter(([url]) =>
+        url.endsWith('/enterprise-roles'),
+      )
+      expect(roleReads.length).toBeGreaterThan(1)
+    })
+  })
+
+  it('keeps cards honest when no vehicle is selected', async () => {
+    renderWorkspace(null)
+
+    expect(screen.getByText('Vehicle selection required')).toBeInTheDocument()
+    expect(document.querySelectorAll('[data-management-endpoint]')).toHaveLength(8)
+    await waitFor(() => expect(calls('GET').length).toBeGreaterThan(0))
+    expect(
+      calls().some(([url]) => url.includes('/vehicles/undefined')),
+    ).toBe(false)
+    expect(screen.getAllByText('Select a vehicle').length).toBeGreaterThan(0)
+    expect(
+      within(endpointCard('enterprise-payer')).getByRole('button', {
+        name: 'Configure payer change',
+      }),
+    ).toBeDisabled()
+    expect(
+      within(endpointCard('warranty-details')).getByRole('button', {
+        name: 'Refresh from Tesla',
+      }),
+    ).toBeEnabled()
+    expect(
+      within(endpointCard('vehicle-pricing')).getByRole('button', {
+        name: 'Open pricing query',
+      }),
+    ).toBeEnabled()
+  })
+
+  it('renders loading, error, and prerequisite-unavailable states without hiding cards', async () => {
+    holdReads = true
+    installRequestRouter()
+    const view = renderWorkspace()
+    expect(screen.getAllByText('Loading cached data').length).toBeGreaterThan(0)
+    expect(document.querySelectorAll('[data-management-endpoint]')).toHaveLength(8)
+    view.unmount()
+
+    holdReads = false
+    optionsError = new Error('cached options unavailable')
+    pricingError = new ApiError(
+      'Tesla account lacks vehicle_pricing_info scope',
+      403,
+    )
+    installRequestRouter()
+    renderWorkspace()
+    expect(await screen.findByText('cached options unavailable')).toBeInTheDocument()
+
+    fireEvent.click(
+      within(endpointCard('vehicle-pricing')).getByRole('button', {
+        name: 'Open pricing query',
+      }),
+    )
+    const dialog = screen.getByRole('dialog')
+    fireEvent.change(within(dialog).getByLabelText(/JSON object/), {
+      target: { value: '{"opaque":true}' },
+    })
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: 'Submit pricing query' }),
+    )
+    expect(await screen.findByText('Capability unavailable')).toBeInTheDocument()
+    expect(
+      screen.getAllByText('Tesla account lacks vehicle_pricing_info scope'),
+    ).not.toHaveLength(0)
+  })
+})
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.tsx
new file mode 100644
index 0000000000..1fe9c063a3
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.tsx
@@ -0,0 +1,83 @@
+import { useTranslation } from 'react-i18next'
+import { Grid, Stack } from '@/components/layout'
+import { AlertBanner } from '@/components/feedback'
+import { Badge, GlassPanel, Heading, Text } from '@/components/ui'
+import { Icons } from '@/lib/icons'
+import { EnterprisePayerCard } from './EnterprisePayerCard'
+import { EnterpriseRolesCard } from './EnterpriseRolesCard'
+import { PaidVehicleSpecsCard } from './PaidVehicleSpecsCard'
+import { VehicleMetadataCards } from './VehicleMetadataCards'
+import { VehiclePricingCard } from './VehiclePricingCard'
+
+interface VehicleManagementWorkspaceProps {
+  vehicleId?: number
+}
+
+const MANAGEMENT_GRID_COLUMNS = { default: 1, xl: 2 } as const
+
+export function VehicleManagementWorkspace({
+  vehicleId,
+}: VehicleManagementWorkspaceProps) {
+  const { t } = useTranslation()
+
+  return (
+    <section
+      aria-labelledby="vehicle-management-title"
+      data-testid="vehicle-management-workspace"
+    >
+      <Stack gap={4}>
+        <GlassPanel className="p-4 sm:p-5">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="flex min-w-0 items-start gap-3">
+              <div className="rounded-xl bg-violet-500/10 p-2 text-violet-300">
+                <Icons.database className="h-5 w-5" aria-hidden="true" />
+              </div>
+              <div className="space-y-1">
+                <Heading level="section" as="h2" id="vehicle-management-title">
+                  {t(
+                    'vehicleManagement.title',
+                    'Vehicle Management workspace',
+                  )}
+                </Heading>
+                <Text variant="bodySm" as="p">
+                  {t(
+                    'vehicleManagement.description',
+                    'Account metadata, paid specifications, pricing, and enterprise controls are separate from physical vehicle commands.',
+                  )}
+                </Text>
+              </div>
+            </div>
+            <Badge variant="neutral" size="lg">
+              <Icons.users className="h-4 w-4" aria-hidden="true" />
+              {t('vehicleManagement.catalogBadge', '8 official endpoints')}
+            </Badge>
+          </div>
+
+          {!vehicleId && (
+            <AlertBanner
+              variant="info"
+              className="mt-4"
+              title={t(
+                'vehicleManagement.noVehicleTitle',
+                'Vehicle selection required',
+              )}
+            >
+              {t(
+                'vehicleManagement.noVehicle',
+                'All endpoint cards remain visible, but vehicle-scoped reads and mutations stay unavailable until a vehicle is selected.',
+              )}
+            </AlertBanner>
+          )}
+        </GlassPanel>
+
+        <Grid cols={MANAGEMENT_GRID_COLUMNS} gap={4}>
+          <VehicleMetadataCards vehicleId={vehicleId} />
+          <PaidVehicleSpecsCard vehicleId={vehicleId} />
+          <VehiclePricingCard />
+          <EnterpriseRolesCard vehicleId={vehicleId} />
+          <EnterprisePayerCard vehicleId={vehicleId} />
+        </Grid>
+      </Stack>
+    </section>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleMetadataCards.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleMetadataCards.tsx
new file mode 100644
index 0000000000..1b204b43c1
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleMetadataCards.tsx
@@ -0,0 +1,116 @@
+import { useTranslation } from 'react-i18next'
+import {
+  useRefreshVehicleOptions,
+  useRefreshVehicleSubscriptions,
+  useRefreshVehicleUpgrades,
+  useRefreshWarrantyDetails,
+  useVehicleOptions,
+  useVehicleSubscriptions,
+  useVehicleUpgrades,
+  useWarrantyDetails,
+} from '@/api/hooks/useVehicles'
+import { ManagementEndpointCard } from './ManagementEndpointCard'
+
+interface VehicleMetadataCardsProps {
+  vehicleId?: number
+}
+
+export function VehicleMetadataCards({ vehicleId }: VehicleMetadataCardsProps) {
+  const { t } = useTranslation()
+  const selectedId = vehicleId ? String(vehicleId) : undefined
+  const options = useVehicleOptions(selectedId)
+  const subscriptions = useVehicleSubscriptions(selectedId)
+  const upgrades = useVehicleUpgrades(selectedId)
+  const warranty = useWarrantyDetails()
+  const refreshOptions = useRefreshVehicleOptions(selectedId)
+  const refreshSubscriptions = useRefreshVehicleSubscriptions(selectedId)
+  const refreshUpgrades = useRefreshVehicleUpgrades(selectedId)
+  const refreshWarranty = useRefreshWarrantyDetails()
+  const vehicleUnavailable = !selectedId
+
+  return (
+    <>
+      <ManagementEndpointCard
+        endpointId="vehicle-options"
+        title={t('vehicleManagement.options.title', 'Vehicle options')}
+        description={t(
+          'vehicleManagement.options.description',
+          'Option codes and factory configuration available to the connected Tesla user.',
+        )}
+        endpoint="GET /api/1/dx/vehicles/options?vin={vin}"
+        prerequisite="user"
+        kind="options"
+        data={options.data?.data}
+        fetchedAt={options.data?.fetched_at}
+        loading={options.isLoading}
+        error={refreshOptions.error ?? options.error}
+        refreshPending={refreshOptions.isPending}
+        operationSucceeded={refreshOptions.isSuccess}
+        unavailable={vehicleUnavailable}
+        onRefresh={() => refreshOptions.mutate()}
+      />
+
+      <ManagementEndpointCard
+        endpointId="warranty-details"
+        title={t('vehicleManagement.warranty.title', 'Warranty details')}
+        description={t(
+          'vehicleManagement.warranty.description',
+          'Tesla account warranty coverage details; VIN behavior can vary by account.',
+        )}
+        endpoint="GET /api/1/dx/warranty/details"
+        prerequisite="user"
+        kind="warranty"
+        data={warranty.data?.data}
+        fetchedAt={warranty.data?.fetched_at}
+        loading={warranty.isLoading}
+        error={refreshWarranty.error ?? warranty.error}
+        refreshPending={refreshWarranty.isPending}
+        operationSucceeded={refreshWarranty.isSuccess}
+        onRefresh={() => refreshWarranty.mutate()}
+      />
+
+      <ManagementEndpointCard
+        endpointId="subscription-eligibility"
+        title={t(
+          'vehicleManagement.subscriptions.title',
+          'Subscription eligibility',
+        )}
+        description={t(
+          'vehicleManagement.subscriptions.description',
+          'Eligibility information for Tesla vehicle subscriptions.',
+        )}
+        endpoint="GET /api/1/dx/vehicles/subscriptions/eligibility?vin={vin}"
+        prerequisite="user"
+        kind="subscriptions"
+        data={subscriptions.data?.data}
+        fetchedAt={subscriptions.data?.fetched_at}
+        loading={subscriptions.isLoading}
+        error={refreshSubscriptions.error ?? subscriptions.error}
+        refreshPending={refreshSubscriptions.isPending}
+        operationSucceeded={refreshSubscriptions.isSuccess}
+        unavailable={vehicleUnavailable}
+        onRefresh={() => refreshSubscriptions.mutate()}
+      />
+
+      <ManagementEndpointCard
+        endpointId="upgrade-eligibility"
+        title={t('vehicleManagement.upgrades.title', 'Upgrade eligibility')}
+        description={t(
+          'vehicleManagement.upgrades.description',
+          'Available or eligible Tesla vehicle upgrades returned for the selected VIN.',
+        )}
+        endpoint="GET /api/1/dx/vehicles/upgrades/eligibility?vin={vin}"
+        prerequisite="user"
+        kind="upgrades"
+        data={upgrades.data?.data}
+        fetchedAt={upgrades.data?.fetched_at}
+        loading={upgrades.isLoading}
+        error={refreshUpgrades.error ?? upgrades.error}
+        refreshPending={refreshUpgrades.isPending}
+        operationSucceeded={refreshUpgrades.isSuccess}
+        unavailable={vehicleUnavailable}
+        onRefresh={() => refreshUpgrades.mutate()}
+      />
+    </>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/VehiclePricingCard.tsx b/web/src/features/vehicles/components/vehicle-management/VehiclePricingCard.tsx
new file mode 100644
index 0000000000..9e25e3c8dc
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/VehiclePricingCard.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useVehiclePricing } from '@/api/hooks/useVehicles'
+import { ManagementEndpointCard } from './ManagementEndpointCard'
+import { OpaqueJsonDialog } from './OpaqueJsonDialog'
+
+export function VehiclePricingCard() {
+  const { t } = useTranslation()
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const pricing = useVehiclePricing()
+
+  return (
+    <>
+      <ManagementEndpointCard
+        endpointId="vehicle-pricing"
+        title={t('vehicleManagement.pricing.title', 'Vehicle pricing')}
+        description={t(
+          'vehicleManagement.pricing.description',
+          'Read-only partner pricing query sent by POST with a Tesla-defined request object.',
+        )}
+        endpoint="POST /api/1/dx/vehicles/pricing"
+        prerequisite="partner"
+        data={pricing.data?.data}
+        error={pricing.error}
+        refreshPending={pricing.isPending}
+        operationSucceeded={pricing.isSuccess}
+        actionLabel={t('vehicleManagement.pricing.action', 'Open pricing query')}
+        emptyTitle={t('vehicleManagement.pricing.empty', 'No session result')}
+        emptyMessage={t(
+          'vehicleManagement.pricing.emptyDetail',
+          'Pricing payloads are not persisted. Submit a Tesla-controlled JSON object to view a result for this session.',
+        )}
+        onRefresh={() => setDialogOpen(true)}
+      />
+
+      <OpaqueJsonDialog
+        open={dialogOpen}
+        title={t('vehicleManagement.pricing.dialogTitle', 'Query vehicle pricing')}
+        description={t(
+          'vehicleManagement.pricing.schema',
+          'Tesla does not publish this request schema. Submit only an object obtained from a trusted Tesla workflow; TeslaSync forwards it unchanged in meaning.',
+        )}
+        submitLabel={t('vehicleManagement.pricing.submit', 'Submit pricing query')}
+        pending={pricing.isPending}
+        onClose={() => {
+          if (!pricing.isPending) setDialogOpen(false)
+        }}
+        onSubmit={(payload) => {
+          pricing.mutate(
+            { payload },
+            { onSuccess: () => setDialogOpen(false) },
+          )
+        }}
+      />
+    </>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/index.ts b/web/src/features/vehicles/components/vehicle-management/index.ts
new file mode 100644
index 0000000000..65bfaee6f2
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/index.ts
@@ -0,0 +1 @@
+export { VehicleManagementWorkspace } from './VehicleManagementWorkspace'
diff --git a/web/src/features/vehicles/components/vehicle-management/managementJson.test.ts b/web/src/features/vehicles/components/vehicle-management/managementJson.test.ts
new file mode 100644
index 0000000000..b765187ef4
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/managementJson.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+import {
+  isSensitiveManagementKey,
+  parseNonEmptyJSONObject,
+  summarizeManagementData,
+} from './managementJson'
+
+describe('parseNonEmptyJSONObject', () => {
+  it.each([
+    ['malformed', '{', 'invalid'],
+    ['trailing JSON', '{"x":1} {}', 'invalid'],
+    ['null', 'null', 'object_required'],
+    ['array', '[]', 'object_required'],
+    ['scalar', '"x"', 'object_required'],
+    ['empty object', '{}', 'empty'],
+  ] as const)('rejects %s', (_name, source, reason) => {
+    expect(parseNonEmptyJSONObject(source)).toEqual({ ok: false, reason })
+  })
+
+  it('returns the exact parsed object shape', () => {
+    expect(parseNonEmptyJSONObject('{"opaque":{"nested":[1,true]}}')).toEqual({
+      ok: true,
+      value: { opaque: { nested: [1, true] } },
+    })
+  })
+})
+
+describe('management JSON safety helpers', () => {
+  it.each([
+    'token',
+    'accessToken',
+    'client_secret',
+    'PASSWORD',
+    'payer_credential',
+    'authorization',
+  ])('redacts sensitive key %s', (key) => {
+    expect(isSensitiveManagementKey(key)).toBe(true)
+  })
+
+  it('normalizes known specs fields without stringifying objects', () => {
+    expect(
+      summarizeManagementData(
+        { model: 'Model 3', trim_badging: 'Performance', nested: { x: 1 } },
+        'specs',
+      ),
+    ).toEqual([
+      { label: 'model', value: 'Model 3' },
+      { label: 'trim', value: 'Performance' },
+    ])
+  })
+})
diff --git a/web/src/features/vehicles/components/vehicle-management/managementJson.ts b/web/src/features/vehicles/components/vehicle-management/managementJson.ts
new file mode 100644
index 0000000000..e93ed947a3
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/managementJson.ts
@@ -0,0 +1,124 @@
+import type { TeslaOpaqueObject } from '@/api/types'
+
+export type ManagementEndpointKind =
+  | 'options'
+  | 'specs'
+  | 'warranty'
+  | 'subscriptions'
+  | 'upgrades'
+  | 'roles'
+  | 'generic'
+
+export interface ManagementSummaryItem {
+  label: 'model' | 'trim' | 'status' | 'expiry' | 'items' | 'fields' | 'roles'
+  value: string
+}
+
+export type JSONObjectParseResult =
+  | { ok: true; value: TeslaOpaqueObject }
+  | { ok: false; reason: 'invalid' | 'object_required' | 'empty' }
+
+const SENSITIVE_KEY_PATTERN =
+  /token|secret|password|credential|authorization|cookie|api[_-]?key/i
+
+export function isSensitiveManagementKey(key: string): boolean {
+  return SENSITIVE_KEY_PATTERN.test(key)
+}
+
+export function managementErrorText(error: unknown, fallback: string): string {
+  if (error instanceof Error && error.message.trim()) return error.message
+  if (
+    typeof error === 'object' &&
+    error !== null &&
+    'message' in error &&
+    typeof error.message === 'string' &&
+    error.message.trim()
+  ) {
+    return error.message
+  }
+  return fallback
+}
+
+export function parseNonEmptyJSONObject(source: string): JSONObjectParseResult {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(source) as unknown
+  } catch {
+    return { ok: false, reason: 'invalid' }
+  }
+
+  if (parsed == null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    return { ok: false, reason: 'object_required' }
+  }
+  const value = parsed as TeslaOpaqueObject
+  if (Object.keys(value).length === 0) {
+    return { ok: false, reason: 'empty' }
+  }
+  return { ok: true, value }
+}
+
+function scalar(record: Record<string, unknown>, keys: readonly string[]): string | null {
+  for (const key of keys) {
+    const value = record[key]
+    if (typeof value === 'string' && value.trim() !== '') return value
+    if (typeof value === 'number' && Number.isFinite(value)) return String(value)
+    if (typeof value === 'boolean') return value ? 'true' : 'false'
+  }
+  return null
+}
+
+function arrayLength(record: Record<string, unknown>, keys: readonly string[]): number | null {
+  for (const key of keys) {
+    const value = record[key]
+    if (Array.isArray(value)) return value.length
+  }
+  return null
+}
+
+export function summarizeManagementData(
+  data: Record<string, unknown> | null | undefined,
+  kind: ManagementEndpointKind,
+): ManagementSummaryItem[] {
+  if (!data) return []
+
+  const summary: ManagementSummaryItem[] = []
+  if (kind === 'specs') {
+    const model = scalar(data, ['model', 'car_type'])
+    const trim = scalar(data, ['trim', 'trim_badging'])
+    if (model) summary.push({ label: 'model', value: model })
+    if (trim) summary.push({ label: 'trim', value: trim })
+  }
+
+  if (kind === 'warranty') {
+    const status = scalar(data, ['status', 'warranty_status', 'active', 'in_warranty'])
+    const expiry = scalar(data, [
+      'warranty_expiry_date',
+      'expiry_date',
+      'basic_expiry_date',
+    ])
+    if (status) summary.push({ label: 'status', value: status })
+    if (expiry) summary.push({ label: 'expiry', value: expiry })
+  }
+
+  if (kind === 'options') {
+    const count = arrayLength(data, ['option_codes', 'codes', 'options'])
+    if (count != null) summary.push({ label: 'items', value: String(count) })
+  }
+
+  if (kind === 'subscriptions' || kind === 'upgrades') {
+    const count = arrayLength(data, [kind])
+    const status = scalar(data, ['eligible', 'status'])
+    if (count != null) summary.push({ label: 'items', value: String(count) })
+    if (status) summary.push({ label: 'status', value: status })
+  }
+
+  if (kind === 'roles') {
+    const count = arrayLength(data, ['roles'])
+    if (count != null) summary.push({ label: 'roles', value: String(count) })
+  }
+
+  if (summary.length === 0) {
+    summary.push({ label: 'fields', value: String(Object.keys(data).length) })
+  }
+  return summary.slice(0, 3)
+}
diff --git a/web/src/features/vehicles/pages/VehicleManagementPage.test.tsx b/web/src/features/vehicles/pages/VehicleManagementPage.test.tsx
new file mode 100644
index 0000000000..e4a274d604
--- /dev/null
+++ b/web/src/features/vehicles/pages/VehicleManagementPage.test.tsx
@@ -0,0 +1,185 @@
+import type { ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import type { Vehicle } from '@/types/vehicle'
+
+const {
+  useVehiclesMock,
+  useSelectedVehicleMock,
+  setVehicleIdMock,
+  refetchMock,
+} = vi.hoisted(() => ({
+  useVehiclesMock: vi.fn(),
+  useSelectedVehicleMock: vi.fn(),
+  setVehicleIdMock: vi.fn(),
+  refetchMock: vi.fn(),
+}))
+
+vi.mock('@/api/hooks/useVehicles', () => ({
+  useVehicles: useVehiclesMock,
+}))
+
+vi.mock('@/hooks/useSelectedVehicle', () => ({
+  useSelectedVehicle: useSelectedVehicleMock,
+}))
+
+vi.mock('@/hooks/usePageTitle', () => ({
+  usePageTitle: vi.fn(),
+}))
+
+vi.mock('../components/vehicle-management', () => ({
+  VehicleManagementWorkspace: ({ vehicleId }: { vehicleId?: number }) => (
+    <div data-testid="vehicle-management-workspace">
+      {vehicleId ? `management:${vehicleId}` : 'management:no-vehicle'}
+    </div>
+  ),
+}))
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>(
+    'react-i18next',
+  )
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown, options?: unknown) => {
+        if (typeof fallback !== 'string') return key
+        if (!options || typeof options !== 'object') return fallback
+        const values = options as Record<string, unknown>
+        return fallback.replace(/\{\{(\w+)\}\}/g, (_match, name: string) =>
+          String(values[name] ?? `{{${name}}}`),
+        )
+      },
+      i18n: { language: 'en' },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  }
+})
+
+import VehicleManagementPage from './VehicleManagementPage'
+
+function makeVehicle(id: number, name: string): Vehicle {
+  return {
+    id,
+    vehicle_id: id,
+    vin: `5YJ3E1EA0PF00000${id}`,
+    display_name: name,
+    model: 'Model 3',
+    trim_badging: '',
+    exterior_color: '',
+    wheel_type: '',
+    state: 'online',
+    healthy: true,
+    created_at: '2026-08-08T20:00:00Z',
+    updated_at: '2026-08-08T20:00:00Z',
+  }
+}
+
+function installHooks({
+  vehicles,
+  selected = vehicles?.[0] ?? null,
+  loading = false,
+  error = null,
+}: {
+  vehicles?: Vehicle[]
+  selected?: Vehicle | null
+  loading?: boolean
+  error?: Error | null
+}) {
+  useVehiclesMock.mockReturnValue({
+    data: vehicles,
+    isLoading: loading,
+    error,
+    refetch: refetchMock,
+  })
+  useSelectedVehicleMock.mockReturnValue({
+    vehicleId: selected?.id ?? null,
+    vehicle: selected,
+    vehicles: vehicles ?? [],
+    setVehicleId: setVehicleIdMock,
+  })
+}
+
+function renderPage() {
+  return render(
+    <MemoryRouter initialEntries={['/vehicle-management']}>
+      <VehicleManagementPage />
+    </MemoryRouter>,
+  )
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('VehicleManagementPage', () => {
+  it('renders a standalone selected-vehicle workspace', () => {
+    const first = makeVehicle(1, 'Roadster')
+    const second = makeVehicle(2, 'Cybertruck')
+    installHooks({ vehicles: [first, second], selected: second })
+
+    renderPage()
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Vehicle Management' }),
+    ).toBeInTheDocument()
+    expect(screen.getByTestId('vehicle-management-workspace')).toHaveTextContent(
+      'management:2',
+    )
+    expect(screen.queryByText('Vehicle Command Center')).not.toBeInTheDocument()
+    expect(screen.getByLabelText('Select management vehicle')).toHaveValue('2')
+  })
+
+  it('updates persistent vehicle selection from the route-level picker', () => {
+    const first = makeVehicle(1, 'Roadster')
+    const second = makeVehicle(2, 'Cybertruck')
+    installHooks({ vehicles: [first, second], selected: first })
+
+    renderPage()
+    fireEvent.change(screen.getByLabelText('Select management vehicle'), {
+      target: { value: '2' },
+    })
+
+    expect(setVehicleIdMock).toHaveBeenCalledWith(2)
+  })
+
+  it('keeps the workspace visible while the fleet loads', () => {
+    installHooks({ vehicles: undefined, selected: null, loading: true })
+
+    renderPage()
+
+    expect(screen.getByText('Loading vehicle context')).toBeInTheDocument()
+    expect(screen.getByTestId('vehicle-management-workspace')).toHaveTextContent(
+      'management:no-vehicle',
+    )
+  })
+
+  it('keeps account-level management visible on roster error and retries', () => {
+    installHooks({
+      vehicles: undefined,
+      selected: null,
+      error: new Error('fleet unavailable'),
+    })
+
+    renderPage()
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }))
+
+    expect(screen.getByText('Vehicle context unavailable')).toBeInTheDocument()
+    expect(screen.getByTestId('vehicle-management-workspace')).toHaveTextContent(
+      'management:no-vehicle',
+    )
+    expect(refetchMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders an honest empty-fleet state without hiding endpoint cards', () => {
+    installHooks({ vehicles: [], selected: null })
+
+    renderPage()
+
+    expect(screen.getByText('No vehicles available')).toBeInTheDocument()
+    expect(screen.getByTestId('vehicle-management-workspace')).toHaveTextContent(
+      'management:no-vehicle',
+    )
+  })
+})
diff --git a/web/src/features/vehicles/pages/VehicleManagementPage.tsx b/web/src/features/vehicles/pages/VehicleManagementPage.tsx
new file mode 100644
index 0000000000..7fe48ddba5
--- /dev/null
+++ b/web/src/features/vehicles/pages/VehicleManagementPage.tsx
@@ -0,0 +1,154 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PageContainer } from '@/components/layout'
+import { AlertBanner } from '@/components/feedback'
+import { FadeIn } from '@/components/motion'
+import { Badge, Button, Select } from '@/components/ui'
+import { useVehicles } from '@/api/hooks/useVehicles'
+import { usePageTitle } from '@/hooks/usePageTitle'
+import { useSelectedVehicle } from '@/hooks/useSelectedVehicle'
+import { Icons } from '@/lib/icons'
+import { VehicleManagementWorkspace } from '../components/vehicle-management'
+
+export default function VehicleManagementPage() {
+  const { t } = useTranslation()
+  usePageTitle(t('vehicleManagement.pageTitle', 'Vehicle Management'))
+
+  const vehiclesQuery = useVehicles()
+  const {
+    vehicleId,
+    vehicle: selectedFromStore,
+    setVehicleId,
+  } = useSelectedVehicle()
+  const vehicles = vehiclesQuery.data ?? []
+  const selectedVehicle =
+    selectedFromStore ??
+    (vehicleId != null
+      ? vehicles.find((vehicle) => vehicle.id === vehicleId) ?? null
+      : null) ??
+    vehicles[0] ??
+    null
+
+  const vehicleOptions = useMemo(
+    () =>
+      vehicles.map((vehicle) => ({
+        value: String(vehicle.id),
+        label:
+          vehicle.display_name?.trim() ||
+          vehicle.vin ||
+          t('vehicleManagement.vehicle.fallbackName', 'Vehicle {{id}}', {
+            id: vehicle.id,
+          }),
+      })),
+    [t, vehicles],
+  )
+
+  const selectedName = selectedVehicle
+    ? selectedVehicle.display_name?.trim() ||
+      selectedVehicle.vin ||
+      t('vehicleManagement.vehicle.fallbackName', 'Vehicle {{id}}', {
+        id: selectedVehicle.id,
+      })
+    : null
+
+  return (
+    <PageContainer
+      title={t('vehicleManagement.pageTitle', 'Vehicle Management')}
+      subtitle={t(
+        'vehicleManagement.pageSubtitle',
+        'Review Tesla account metadata, paid specifications, pricing, and enterprise access separately from physical commands.',
+      )}
+      actions={
+        vehicles.length > 1 ? (
+          <Select
+            id="vehicle-management-vehicle"
+            aria-label={t(
+              'vehicleManagement.selectVehicle',
+              'Select management vehicle',
+            )}
+            value={selectedVehicle ? String(selectedVehicle.id) : ''}
+            onChange={(event) => {
+              const next = Number(event.target.value)
+              if (Number.isFinite(next) && next > 0) setVehicleId(next)
+            }}
+            options={vehicleOptions}
+            className="min-h-11 min-w-48"
+          />
+        ) : selectedName ? (
+          <Badge variant="neutral" size="lg" className="min-h-11">
+            <Icons.vehicle className="h-3.5 w-3.5" aria-hidden="true" />
+            {selectedName}
+          </Badge>
+        ) : null
+      }
+    >
+      <div className="space-y-4">
+        {vehiclesQuery.isLoading && (
+          <AlertBanner
+            variant="info"
+            title={t(
+              'vehicleManagement.roster.loadingTitle',
+              'Loading vehicle context',
+            )}
+          >
+            {t(
+              'vehicleManagement.roster.loading',
+              'Vehicle-scoped cards remain unavailable while the fleet loads. Cached account-level warranty data can still load.',
+            )}
+          </AlertBanner>
+        )}
+
+        {vehiclesQuery.error && (
+          <AlertBanner
+            variant="danger"
+            title={t(
+              'vehicleManagement.roster.errorTitle',
+              'Vehicle context unavailable',
+            )}
+          >
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <span>
+                {t(
+                  'vehicleManagement.roster.error',
+                  'The vehicle list could not be loaded. Account-level cached data remains available.',
+                )}
+              </span>
+              <Button
+                type="button"
+                variant="secondary"
+                size="sm"
+                onClick={() => void vehiclesQuery.refetch()}
+              >
+                {t('common.retry', 'Retry')}
+              </Button>
+            </div>
+          </AlertBanner>
+        )}
+
+        {!vehiclesQuery.isLoading &&
+          !vehiclesQuery.error &&
+          vehicles.length === 0 && (
+            <AlertBanner
+              variant="info"
+              title={t(
+                'vehicleManagement.roster.emptyTitle',
+                'No vehicles available',
+              )}
+            >
+              {t(
+                'vehicleManagement.roster.empty',
+                'Connect and sync a Tesla vehicle to enable vehicle-scoped management APIs. Account-level warranty data remains available.',
+              )}
+            </AlertBanner>
+          )}
+
+        <FadeIn>
+          <VehicleManagementWorkspace
+            key={selectedVehicle?.id ?? 'no-vehicle'}
+            vehicleId={selectedVehicle?.id}
+          />
+        </FadeIn>
+      </div>
+    </PageContainer>
+  )
+}
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index 0281f8e1fe..2539f6a35e 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -3628,6 +3628,7 @@
     "historyAria": "Location history"
   },
   "routes": {
+    "vehicleManagement": "Vehicle Management",
     "twinLab": "Vehicle Twin Lab",
     "firmwareCanary": "Firmware Canary",
     "componentSurvival": "Component Survival",
@@ -5028,6 +5029,20 @@
           "success": "Warranty details refreshed",
           "error": "Failed to refresh warranty details"
         }
+      },
+      "pricing": {
+        "success": "Tesla vehicle pricing query completed",
+        "error": "Failed to query Tesla vehicle pricing"
+      },
+      "enterpriseRoles": {
+        "refresh": {
+          "success": "Enterprise roles refreshed",
+          "error": "Failed to refresh enterprise roles"
+        }
+      },
+      "enterprisePayer": {
+        "success": "Enterprise payer updated",
+        "error": "Failed to update enterprise payer"
       }
     },
     "ordersRefreshed": "Orders refreshed",
@@ -13465,6 +13480,131 @@
       "unknown": "Reauthentication failed."
     }
   },
+  "vehicleManagement": {
+    "pageTitle": "Vehicle Management",
+    "pageSubtitle": "Review Tesla account metadata, paid specifications, pricing, and enterprise access separately from physical commands.",
+    "selectVehicle": "Select management vehicle",
+    "vehicle": {
+      "fallbackName": "Vehicle {{id}}"
+    },
+    "roster": {
+      "loadingTitle": "Loading vehicle context",
+      "loading": "Vehicle-scoped cards remain unavailable while the fleet loads. Cached account-level warranty data can still load.",
+      "errorTitle": "Vehicle context unavailable",
+      "error": "The vehicle list could not be loaded. Account-level cached data remains available.",
+      "emptyTitle": "No vehicles available",
+      "empty": "Connect and sync a Tesla vehicle to enable vehicle-scoped management APIs. Account-level warranty data remains available."
+    },
+    "title": "Vehicle Management workspace",
+    "description": "Account metadata, paid specifications, pricing, and enterprise controls are separate from physical vehicle commands.",
+    "catalogBadge": "8 official endpoints",
+    "noVehicleTitle": "Vehicle selection required",
+    "noVehicle": "All endpoint cards remain visible, but vehicle-scoped reads and mutations stay unavailable until a vehicle is selected.",
+    "prerequisite": {
+      "user": "User access",
+      "partner": "Partner token",
+      "enterprise": "Enterprise"
+    },
+    "summary": {
+      "model": "Model",
+      "trim": "Trim",
+      "status": "Status",
+      "expiry": "Expiry",
+      "items": "Items",
+      "fields": "Fields returned",
+      "roles": "Roles"
+    },
+    "data": {
+      "redacted": "Redacted",
+      "emptyObject": "Empty object",
+      "emptyArray": "Empty list",
+      "noData": "No value",
+      "true": "Yes",
+      "false": "No",
+      "maxDepth": "Additional nested data",
+      "item": "Item {{index}}"
+    },
+    "state": {
+      "vehicleRequired": "Select a vehicle",
+      "vehicleRequiredDetail": "This endpoint is unavailable until a vehicle is selected.",
+      "loading": "Loading cached data",
+      "unavailable": "Capability unavailable",
+      "prerequisiteError": "Tesla did not confirm the required account scope or prerequisite.",
+      "error": "Request failed",
+      "errorDetail": "The request could not be completed.",
+      "success": "Request completed",
+      "successDetail": "Tesla accepted the request. Any returned data is shown below.",
+      "empty": "No cached data",
+      "emptyDetail": "Use refresh to request this information from Tesla when the required access is available.",
+      "fetchedAt": "Cached {{time}}",
+      "notFetched": "Not cached"
+    },
+    "action": {
+      "refresh": "Refresh from Tesla"
+    },
+    "json": {
+      "schemaTitle": "Tesla-controlled undocumented schema",
+      "label": "JSON object",
+      "invalid": "Enter valid JSON with no trailing content.",
+      "objectRequired": "The payload must be a JSON object, not an array, scalar, or null.",
+      "empty": "The JSON object must contain at least one field."
+    },
+    "options": {
+      "title": "Vehicle options",
+      "description": "Option codes and factory configuration available to the connected Tesla user."
+    },
+    "specs": {
+      "title": "Vehicle specifications",
+      "description": "Partner-scoped vehicle specifications cached for 24 hours by TeslaSync.",
+      "costTitle": "Paid Tesla API result",
+      "costWarning": "Tesla bills $0.10 for each successful specifications result. TeslaSync also enforces a 24-hour refresh guard.",
+      "confirmTitle": "Request paid vehicle specifications?",
+      "confirmMessage": "A successful Tesla response costs $0.10. Continue only if the cached result needs updating.",
+      "confirmAction": "Request $0.10 result"
+    },
+    "warranty": {
+      "title": "Warranty details",
+      "description": "Tesla account warranty coverage details; VIN behavior can vary by account."
+    },
+    "subscriptions": {
+      "title": "Subscription eligibility",
+      "description": "Eligibility information for Tesla vehicle subscriptions."
+    },
+    "upgrades": {
+      "title": "Upgrade eligibility",
+      "description": "Available or eligible Tesla vehicle upgrades returned for the selected VIN."
+    },
+    "pricing": {
+      "title": "Vehicle pricing",
+      "description": "Read-only partner pricing query sent by POST with a Tesla-defined request object.",
+      "action": "Open pricing query",
+      "empty": "No session result",
+      "emptyDetail": "Pricing payloads are not persisted. Submit a Tesla-controlled JSON object to view a result for this session.",
+      "dialogTitle": "Query vehicle pricing",
+      "schema": "Tesla does not publish this request schema. Submit only an object obtained from a trusted Tesla workflow; TeslaSync forwards it unchanged in meaning.",
+      "submit": "Submit pricing query"
+    },
+    "roles": {
+      "title": "Enterprise roles",
+      "description": "Cached business roles for the selected VIN. Refresh is the only action that contacts Tesla."
+    },
+    "payer": {
+      "title": "Enterprise payer",
+      "description": "State-changing enterprise billing operation for the selected vehicle.",
+      "action": "Configure payer change",
+      "empty": "No payer change submitted",
+      "emptyDetail": "Payer request objects are never cached. A successful response is shown only for the current session.",
+      "warningTitle": "Changes enterprise billing responsibility",
+      "warning": "Only continue with an object supplied by an authorized Tesla enterprise workflow. Access is not assumed.",
+      "dialogTitle": "Prepare payer change",
+      "schema": "Tesla controls this undocumented schema. TeslaSync validates only that the payload is a non-empty JSON object.",
+      "continue": "Continue to confirmation",
+      "confirmTitle": "Confirm enterprise payer change",
+      "confirmMessage": "This changes enterprise billing responsibility for the selected vehicle. TeslaSync will send the staged object only after this confirmation.",
+      "confirmAction": "Change enterprise payer",
+      "typeConfirmation": "Type PAYER to confirm the billing change"
+    }
+  },
   "commands": {
     "title": "Commands",
     "pageTitle": "Vehicle Command Center",
diff --git a/web/src/lib/routeRegistry.ts b/web/src/lib/routeRegistry.ts
index 50c7736ca0..fdd2157ab7 100644
--- a/web/src/lib/routeRegistry.ts
+++ b/web/src/lib/routeRegistry.ts
@@ -248,6 +248,7 @@ export const ROUTE_REGISTRY: readonly RouteEntry[] = [
   { path: '/utilization', name: 'Utilization', label: 'Utilization', i18nKey: 'routes.utilization' },
   { path: '/vampire-drain', name: 'VampireDrain', label: 'Vampire Drain', i18nKey: 'routes.vampireDrain' },
   { path: '/vehicle-comparison', name: 'FleetCompare', label: 'Fleet Compare', i18nKey: 'routes.fleetCompare' },
+  { path: '/vehicle-management', name: 'VehicleManagement', label: 'Vehicle Management', i18nKey: 'routes.vehicleManagement' },
   { path: '/vehicle-systems/software', name: 'SoftwareUpdates', label: 'Software Updates', i18nKey: 'routes.softwareUpdates' },
   { path: '/vehicles', name: 'Vehicles', label: 'Vehicles', i18nKey: 'routes.vehicles' },
   { path: '/vehicles/:id', name: 'VehicleDetail', label: 'Vehicle Detail', i18nKey: 'routes.vehicleDetail', hidden: true },

From 3087194a2873794d6860ef79ff92069cb5383ac1 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sat, 8 Aug 2026 19:59:43 -0700
Subject: [PATCH 03/15] fix: scope warranty data by vehicle

Move warranty API routes and Tesla requests to vehicle/VIN-scoped endpoints, update frontend hooks and widgets, and handle empty management responses with updated tests and SLO routes.
---
 internal/api/router.go                        |  4 +-
 .../api/router_vehicle_management_test.go     |  4 +-
 internal/api/vehicleinfo/handler.go           | 58 +++++++++++--------
 internal/api/vehicleinfo/handler_test.go      | 33 ++++++-----
 internal/tesla/client_vehicle_data.go         |  7 ++-
 .../tesla/client_vehicle_management_test.go   |  4 +-
 slo/catalog.yaml                              |  4 +-
 web/src/api/hooks/useVehicles.test.tsx        | 19 ++++--
 web/src/api/hooks/useVehicles.ts              | 13 +++--
 .../dashboard/components/DashboardGrid.tsx    | 12 +++-
 .../widgets/WarrantyStatusWidget.test.tsx     | 12 +++-
 .../widgets/WarrantyStatusWidget.tsx          |  4 +-
 .../components/WarrantySummaryPanel.test.tsx  |  4 +-
 .../components/WarrantySummaryPanel.tsx       |  7 +--
 .../hooks/useVaultEvidence.test.tsx           |  2 +-
 .../resale-vault/hooks/useVaultEvidence.ts    |  2 +-
 .../resale-vault/lib/evidenceNormalizers.ts   |  2 +-
 .../resale-vault/lib/reportBuilder.test.ts    |  7 ---
 .../resale-vault/lib/reportBuilder.ts         |  7 +--
 .../pages/WarrantyResaleVaultPage.test.tsx    |  2 +-
 .../ManagementEndpointBody.tsx                | 18 ++++++
 .../ManagementEndpointCard.tsx                |  1 +
 .../VehicleManagementWorkspace.test.tsx       | 44 +++++++++++---
 .../VehicleMetadataCards.tsx                  |  9 +--
 .../vehicle-management/managementJson.ts      |  2 +-
 .../vehicles/pages/VehicleManagementPage.tsx  |  6 +-
 web/src/i18n/en.json                          | 12 ++--
 27 files changed, 187 insertions(+), 112 deletions(-)

diff --git a/internal/api/router.go b/internal/api/router.go
index ab2b56c865..feb454f01b 100644
--- a/internal/api/router.go
+++ b/internal/api/router.go
@@ -417,14 +417,14 @@ func mountVehicleScopedManagementRoutes(r chi.Router, h vehicleManagementRouteHa
 	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/subscriptions/refresh", h.RefreshSubscriptionEligibility)
 	r.Get("/upgrades", h.UpgradeEligibility)
 	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/upgrades/refresh", h.RefreshUpgradeEligibility)
+	r.Get("/warranty", h.WarrantyDetails)
+	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/warranty/refresh", h.RefreshWarrantyDetails)
 	r.Get("/enterprise-roles", h.EnterpriseRoles)
 	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/enterprise-roles/refresh", h.RefreshEnterpriseRoles)
 	r.With(httprate.LimitByIP(2, 1*time.Minute)).Post("/enterprise-payer", h.EnterprisePayer)
 }
 
 func mountAccountVehicleManagementRoutes(r chi.Router, h vehicleManagementRouteHandler) {
-	r.Get("/tesla/warranty", h.WarrantyDetails)
-	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/tesla/warranty/refresh", h.RefreshWarrantyDetails)
 	r.With(httprate.LimitByIP(5, 1*time.Minute)).Post("/tesla/vehicle-pricing", h.VehiclePricing)
 }
 
diff --git a/internal/api/router_vehicle_management_test.go b/internal/api/router_vehicle_management_test.go
index 6be69661a4..38bab6b852 100644
--- a/internal/api/router_vehicle_management_test.go
+++ b/internal/api/router_vehicle_management_test.go
@@ -84,8 +84,8 @@ func TestVehicleManagementRoutes(t *testing.T) {
 		{"options refresh", http.MethodPost, "/api/v1/vehicles/7/options/refresh", "options_refresh"},
 		{"paid specs cached GET", http.MethodGet, "/api/v1/vehicles/7/specs", "specs"},
 		{"paid specs refresh", http.MethodPost, "/api/v1/vehicles/7/specs/refresh", "specs_refresh"},
-		{"warranty cached GET", http.MethodGet, "/api/v1/tesla/warranty", "warranty"},
-		{"warranty refresh", http.MethodPost, "/api/v1/tesla/warranty/refresh", "warranty_refresh"},
+		{"warranty cached GET", http.MethodGet, "/api/v1/vehicles/7/warranty", "warranty"},
+		{"warranty refresh", http.MethodPost, "/api/v1/vehicles/7/warranty/refresh", "warranty_refresh"},
 		{"subscriptions cached GET", http.MethodGet, "/api/v1/vehicles/7/subscriptions", "subscriptions"},
 		{"subscriptions refresh", http.MethodPost, "/api/v1/vehicles/7/subscriptions/refresh", "subscriptions_refresh"},
 		{"upgrades cached GET", http.MethodGet, "/api/v1/vehicles/7/upgrades", "upgrades"},
diff --git a/internal/api/vehicleinfo/handler.go b/internal/api/vehicleinfo/handler.go
index 5ffaf93831..61b74179bf 100644
--- a/internal/api/vehicleinfo/handler.go
+++ b/internal/api/vehicleinfo/handler.go
@@ -1,6 +1,7 @@
 package vehicleinfo
 
 import (
+	"bytes"
 	"context"
 	"encoding/json"
 	"errors"
@@ -39,7 +40,7 @@ type teslaInfoClient interface {
 	GetVehicleSpecs(ctx context.Context, vin string) ([]byte, int, error)
 	GetSubscriptionEligibility(ctx context.Context, vin string) ([]byte, int, error)
 	GetUpgradeEligibility(ctx context.Context, vin string) ([]byte, int, error)
-	GetWarrantyDetails(ctx context.Context) ([]byte, int, error)
+	GetWarrantyDetails(ctx context.Context, vin string) ([]byte, int, error)
 	GetVehiclePricing(ctx context.Context, payload tesla.JSONRequestObject) ([]byte, int, error)
 	GetEnterpriseRoles(ctx context.Context, vin string) ([]byte, int, error)
 	SetEnterprisePayer(ctx context.Context, vin string, payload tesla.JSONRequestObject) ([]byte, int, error)
@@ -374,24 +375,32 @@ func (h *Handler) RefreshUpgradeEligibility(w http.ResponseWriter, r *http.Reque
 
 // ---------- Warranty Details ----------
 
-// WarrantyDetails returns stored warranty details from DB.
-// GET /api/v1/tesla/warranty
+// WarrantyDetails returns stored warranty details for a vehicle from DB.
+// GET /api/v1/vehicles/{vehicleID}/warranty
 func (h *Handler) WarrantyDetails(w http.ResponseWriter, r *http.Request) {
 	r, span := startHandlerSpan(r, "api.vehicle_info.warranty")
 	defer span.End()
 
-	h.getVehicleConfig(w, r, "warranty", "warranty", 0)
+	vin, ok := h.resolveVINOrWriteError(w, r)
+	if !ok {
+		return
+	}
+	h.getVehicleConfig(w, r, "warranty:"+vin, "warranty", localVehicleID(r))
 }
 
-// RefreshWarrantyDetails fetches warranty details from Tesla and saves to DB.
-// POST /api/v1/tesla/warranty/refresh
+// RefreshWarrantyDetails fetches VIN-scoped warranty details from Tesla and saves to DB.
+// POST /api/v1/vehicles/{vehicleID}/warranty/refresh
 func (h *Handler) RefreshWarrantyDetails(w http.ResponseWriter, r *http.Request) {
 	r, span := startHandlerSpan(r, "api.vehicle_info.refresh_warranty")
 	defer span.End()
 
-	configKey := "warranty"
-	h.refreshVehicleConfig(w, r, configKey, "warranty", 0, func(ctx context.Context) ([]byte, int, error) {
-		return h.teslaClient.GetWarrantyDetails(ctx)
+	vin, ok := h.resolveVINOrWriteError(w, r)
+	if !ok {
+		return
+	}
+	configKey := "warranty:" + vin
+	h.refreshVehicleConfig(w, r, configKey, "warranty", localVehicleID(r), func(ctx context.Context) ([]byte, int, error) {
+		return h.teslaClient.GetWarrantyDetails(ctx, vin)
 	}, userTokenRequired, false)
 }
 
@@ -579,12 +588,9 @@ func (h *Handler) refreshVehicleConfig(
 
 	data := string(response)
 
-	// mobile_enabled returns a bare boolean (true/false) — wrap as
-	// {"enabled": <bool>}. The empty/null check below runs AFTER this guard,
-	// so we must skip wrapping when the response is missing/null; otherwise a
-	// blank Tesla response would produce syntactically invalid JSON such as
-	// {"enabled":} that later fails to parse on read.
-	if configType == "mobile_enabled" && data != "" && data != "null" {
+	// mobile_enabled returns a bare boolean (true/false). Wrap only those
+	// literals; direct JSON objects from other response variants stay intact.
+	if configType == "mobile_enabled" && (data == "true" || data == "false") {
 		data = fmt.Sprintf(`{"enabled":%s}`, data)
 	}
 
@@ -706,16 +712,22 @@ func (h *Handler) writeTeslaFailure(
 }
 
 func unwrapTeslaResponse(body []byte) (json.RawMessage, error) {
-	var envelope struct {
-		Response json.RawMessage `json:"response"`
-	}
-	if err := json.Unmarshal(body, &envelope); err != nil {
-		return nil, fmt.Errorf("decode Tesla response envelope: %w", err)
+	trimmed := bytes.TrimSpace(body)
+	if !json.Valid(trimmed) {
+		return nil, errors.New("decode Tesla response: invalid JSON")
 	}
-	if len(envelope.Response) == 0 {
-		return json.RawMessage("null"), nil
+
+	if len(trimmed) > 0 && trimmed[0] == '{' {
+		var object map[string]json.RawMessage
+		if err := json.Unmarshal(trimmed, &object); err != nil {
+			return nil, fmt.Errorf("decode Tesla response object: %w", err)
+		}
+		if response, ok := object["response"]; ok {
+			return response, nil
+		}
 	}
-	return envelope.Response, nil
+
+	return json.RawMessage(append([]byte(nil), trimmed...)), nil
 }
 
 func decodeLimitedJSON(
diff --git a/internal/api/vehicleinfo/handler_test.go b/internal/api/vehicleinfo/handler_test.go
index b2d5a5bade..729524797d 100644
--- a/internal/api/vehicleinfo/handler_test.go
+++ b/internal/api/vehicleinfo/handler_test.go
@@ -100,8 +100,8 @@ func (f *fakeTeslaClient) GetUpgradeEligibility(_ context.Context, vin string) (
 	return f.record("upgrades", vin)
 }
 
-func (f *fakeTeslaClient) GetWarrantyDetails(_ context.Context) ([]byte, int, error) {
-	return f.record("warranty", "")
+func (f *fakeTeslaClient) GetWarrantyDetails(_ context.Context, vin string) ([]byte, int, error) {
+	return f.record("warranty", vin)
 }
 
 func (f *fakeTeslaClient) GetVehiclePricing(
@@ -363,7 +363,7 @@ func TestGetHandlers_ConfigKeyRouting(t *testing.T) {
 		{"subscriptions", (*Handler).SubscriptionEligibility, "subscriptions:" + testVIN, true},
 		{"upgrades", (*Handler).UpgradeEligibility, "upgrades:" + testVIN, true},
 		{"enterprise-roles", (*Handler).EnterpriseRoles, "enterprise_roles:" + testVIN, true},
-		{"warranty", (*Handler).WarrantyDetails, "warranty", false},
+		{"warranty", (*Handler).WarrantyDetails, "warranty:" + testVIN, true},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
@@ -485,12 +485,12 @@ func TestRefresh_SuccessAndPersistence(t *testing.T) {
 		confirmed  bool
 	}{
 		{"mobile-enabled", (*Handler).RefreshMobileEnabled, `{"response":true}`, "mobile_enabled", "mobile_enabled:" + testVIN, `{"enabled":true}`, true, false},
-		{"options", (*Handler).RefreshVehicleOptions, `{"response":{"codes":["A"]}}`, "vehicle_options", "vehicle_options:" + testVIN, `{"codes":["A"]}`, true, false},
+		{"options", (*Handler).RefreshVehicleOptions, `{"codes":[{"code":"$APF2","displayName":"Full Self-Driving (Supervised)","isActive":true}]}`, "vehicle_options", "vehicle_options:" + testVIN, `{"codes":[{"code":"$APF2","displayName":"Full Self-Driving (Supervised)","isActive":true}]}`, true, false},
 		{"specs", (*Handler).RefreshVehicleSpecs, `{"response":{"weight":1000}}`, "vehicle_specs", "vehicle_specs:" + testVIN, `{"weight":1000}`, true, true},
-		{"subscriptions", (*Handler).RefreshSubscriptionEligibility, `{"response":{"eligible":true}}`, "subscriptions", "subscriptions:" + testVIN, `{"eligible":true}`, true, false},
-		{"upgrades", (*Handler).RefreshUpgradeEligibility, `{"response":{"tier":"x"}}`, "upgrades", "upgrades:" + testVIN, `{"tier":"x"}`, true, false},
+		{"subscriptions", (*Handler).RefreshSubscriptionEligibility, `{"vin":"TESTVIN","country":"US","eligible":[{"product":"EXTENDED_WARRANTY"}]}`, "subscriptions", "subscriptions:" + testVIN, `{"vin":"TESTVIN","country":"US","eligible":[{"product":"EXTENDED_WARRANTY"}]}`, true, false},
+		{"upgrades", (*Handler).RefreshUpgradeEligibility, `{}`, "upgrades", "upgrades:" + testVIN, `{}`, true, false},
 		{"enterprise-roles", (*Handler).RefreshEnterpriseRoles, `{"response":{"roles":["fleet_manager"]}}`, "enterprise_roles", "enterprise_roles:" + testVIN, `{"roles":["fleet_manager"]}`, true, false},
-		{"warranty", (*Handler).RefreshWarrantyDetails, `{"response":{"active":true}}`, "warranty", "warranty", `{"active":true}`, false, false},
+		{"warranty", (*Handler).RefreshWarrantyDetails, `{"active":true}`, "warranty", "warranty:" + testVIN, `{"active":true}`, true, false},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
@@ -774,25 +774,26 @@ func TestRefreshVehicleSpecs_GuardDoesNotPersist(t *testing.T) {
 	}
 }
 
-// The warranty endpoints are account-level and must not require a vehicle id.
-func TestWarranty_DoesNotRequireVehicleID(t *testing.T) {
-	tc := &fakeTeslaClient{validToken: true, status: http.StatusOK, body: []byte(`{"response":{"active":true}}`)}
+func TestWarranty_RequiresVehicleAndUsesVIN(t *testing.T) {
+	tc := &fakeTeslaClient{validToken: true, status: http.StatusOK, body: []byte(`{"active":true}`)}
 	cfg := newFakeConfigStore()
-	// A finder that would fail if consulted proves warranty never resolves a VIN.
-	veh := &fakeVehicleFinder{err: errors.New("should not be called")}
+	veh := &fakeVehicleFinder{vehicle: okVehicle()}
 	h := newHandler(tc, cfg, veh)
 
 	rec := httptest.NewRecorder()
-	h.RefreshWarrantyDetails(rec, vehReq(http.MethodPost, ""))
+	h.RefreshWarrantyDetails(rec, vehReq(http.MethodPost, "7"))
 	if rec.Code != http.StatusOK {
 		t.Fatalf("refresh status = %d, want 200; body=%s", rec.Code, rec.Body.String())
 	}
-	if veh.gotID != 0 {
-		t.Fatalf("vehicle finder was consulted for account-level warranty")
+	if veh.gotID != 7 {
+		t.Fatalf("vehicle finder got id = %d, want 7", veh.gotID)
+	}
+	if len(tc.calls) != 1 || tc.calls[0].vin != testVIN {
+		t.Fatalf("Tesla calls = %+v, want warranty call for selected VIN", tc.calls)
 	}
 
 	rec = httptest.NewRecorder()
-	h.WarrantyDetails(rec, vehReq(http.MethodGet, ""))
+	h.WarrantyDetails(rec, vehReq(http.MethodGet, "7"))
 	if rec.Code != http.StatusOK {
 		t.Fatalf("get status = %d, want 200; body=%s", rec.Code, rec.Body.String())
 	}
diff --git a/internal/tesla/client_vehicle_data.go b/internal/tesla/client_vehicle_data.go
index 048d652665..2545e024d2 100644
--- a/internal/tesla/client_vehicle_data.go
+++ b/internal/tesla/client_vehicle_data.go
@@ -109,9 +109,10 @@ func (c *Client) GetUpgradeEligibility(ctx context.Context, vin string) ([]byte,
 	return c.doRequest(ctx, http.MethodGet, path, nil)
 }
 
-// GetWarrantyDetails calls GET /api/1/dx/warranty/details.
-func (c *Client) GetWarrantyDetails(ctx context.Context) ([]byte, int, error) {
-	return c.doRequest(ctx, http.MethodGet, "/api/1/dx/warranty/details", nil)
+// GetWarrantyDetails calls GET /api/1/dx/warranty/details?vin={vin}.
+func (c *Client) GetWarrantyDetails(ctx context.Context, vin string) ([]byte, int, error) {
+	path := fmt.Sprintf("/api/1/dx/warranty/details?vin=%s", url.QueryEscape(vin))
+	return c.doRequest(ctx, http.MethodGet, path, nil)
 }
 
 // GetVehiclePricing calls POST /api/1/dx/vehicles/pricing with an opaque
diff --git a/internal/tesla/client_vehicle_management_test.go b/internal/tesla/client_vehicle_management_test.go
index f8fcf79d9c..2a58a02d86 100644
--- a/internal/tesla/client_vehicle_management_test.go
+++ b/internal/tesla/client_vehicle_management_test.go
@@ -231,9 +231,9 @@ func TestVehicleManagementUserCallsUseExactMethodAndPath(t *testing.T) {
 		},
 		{
 			name: "warranty details",
-			path: "/api/1/dx/warranty/details",
+			path: "/api/1/dx/warranty/details?vin=TESTVIN",
 			invokeCall: func(ctx context.Context, client *Client) ([]byte, int, error) {
-				return client.GetWarrantyDetails(ctx)
+				return client.GetWarrantyDetails(ctx, "TESTVIN")
 			},
 		},
 		{
diff --git a/slo/catalog.yaml b/slo/catalog.yaml
index 6be082e29a..755222736a 100644
--- a/slo/catalog.yaml
+++ b/slo/catalog.yaml
@@ -37,8 +37,8 @@ slos:
   - name: vehicle_management_availability
     description: "Tesla Vehicle Management metadata and enterprise operations must complete without server errors."
     sli:
-      good_events: "sum(rate(teslasync_red_http_requests_total{route=~\"/api/v1/(tesla/(warranty(|/refresh)|vehicle-pricing)|vehicles/\\\\{vehicleID\\\\}/((options|specs|subscriptions|upgrades|enterprise-roles)(|/refresh)|enterprise-payer))\",status_class!=\"5xx\"}[5m]))"
-      valid_events: "sum(rate(teslasync_red_http_requests_total{route=~\"/api/v1/(tesla/(warranty(|/refresh)|vehicle-pricing)|vehicles/\\\\{vehicleID\\\\}/((options|specs|subscriptions|upgrades|enterprise-roles)(|/refresh)|enterprise-payer))\"}[5m]))"
+      good_events: "sum(rate(teslasync_red_http_requests_total{route=~\"/api/v1/(tesla/vehicle-pricing|vehicles/\\\\{vehicleID\\\\}/((options|specs|subscriptions|upgrades|warranty|enterprise-roles)(|/refresh)|enterprise-payer))\",status_class!=\"5xx\"}[5m]))"
+      valid_events: "sum(rate(teslasync_red_http_requests_total{route=~\"/api/v1/(tesla/vehicle-pricing|vehicles/\\\\{vehicleID\\\\}/((options|specs|subscriptions|upgrades|warranty|enterprise-roles)(|/refresh)|enterprise-payer))\"}[5m]))"
     objective: 99.0
     window: 30d
     owner: platform
diff --git a/web/src/api/hooks/useVehicles.test.tsx b/web/src/api/hooks/useVehicles.test.tsx
index 8fe1d0a675..01def2198d 100644
--- a/web/src/api/hooks/useVehicles.test.tsx
+++ b/web/src/api/hooks/useVehicles.test.tsx
@@ -749,27 +749,34 @@ describe('useWakeVehicle', () => {
 
 // ─────────────────────────────────────────────────────────────────────────────
 describe('warranty details', () => {
-  it('useWarrantyDetails GETs /tesla/warranty', async () => {
+  it('useWarrantyDetails GETs the selected vehicle warranty route', async () => {
     requestMock.mockResolvedValueOnce({ data: { in_warranty: true }, fetched_at: null });
-    const { result } = renderH(() => useWarrantyDetails());
+    const { result } = renderH(() => useWarrantyDetails('5'));
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
-    expect(lastUrl()).toBe('/tesla/warranty');
+    expect(lastUrl()).toBe('/vehicles/5/warranty');
     expect(lastOpts()).toHaveProperty('signal');
   });
 
+  it('useWarrantyDetails stays idle without a selected vehicle', async () => {
+    const { result } = renderH(() => useWarrantyDetails());
+    await tick();
+    expect(requestMock).not.toHaveBeenCalled();
+    expect(result.current.fetchStatus).toBe('idle');
+  });
+
   it('useRefreshWarrantyDetails POSTs the refresh route, invalidates, and toasts', async () => {
     requestMock.mockResolvedValueOnce({ data: {}, fetched_at: '2025-01-01T00:00:00Z' });
     const client = makeClient();
     const invalidateQueries = vi.spyOn(client, 'invalidateQueries');
-    const { result } = renderHook(() => useRefreshWarrantyDetails(), {
+    const { result } = renderHook(() => useRefreshWarrantyDetails('5'), {
       wrapper: makeWrapper(client),
     });
 
     await result.current.mutateAsync();
 
-    expect(lastUrl()).toBe('/tesla/warranty/refresh');
+    expect(lastUrl()).toBe('/vehicles/5/warranty/refresh');
     expect(lastOpts().method).toBe('POST');
-    expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['warranty-details'] });
+    expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['warranty-details', '5'] });
     await waitFor(() =>
       expect(toastSuccess).toHaveBeenCalledWith(
         'toast.vehicles.warranty.refresh.success',
diff --git a/web/src/api/hooks/useVehicles.ts b/web/src/api/hooks/useVehicles.ts
index 9355ecc21b..8e5961ed9e 100644
--- a/web/src/api/hooks/useVehicles.ts
+++ b/web/src/api/hooks/useVehicles.ts
@@ -514,21 +514,22 @@ export function useRefreshVehicleUpgrades(vehicleId?: string) {
 
 // ---------- Warranty Details ----------
 
-export function useWarrantyDetails() {
+export function useWarrantyDetails(vehicleId?: string) {
   return useQuery({
-    queryKey: ['warranty-details'],
-    queryFn: ({ signal }) => request<VehicleInfoEnvelope<Record<string, unknown>>>('/tesla/warranty', { signal }),
+    queryKey: ['warranty-details', vehicleId],
+    queryFn: ({ signal }) => request<VehicleInfoEnvelope<Record<string, unknown>>>(`/vehicles/${vehicleId}/warranty`, { signal }),
+    enabled: !!vehicleId,
     staleTime: STALE_TIMES.DAILY,
   });
 }
 
-export function useRefreshWarrantyDetails() {
+export function useRefreshWarrantyDetails(vehicleId?: string) {
   const queryClient = useQueryClient();
   const { success, error } = useMutationToast();
   return useMutation({
-    mutationFn: () => request<VehicleInfoEnvelope<Record<string, unknown>>>('/tesla/warranty/refresh', { method: 'POST' }),
+    mutationFn: () => request<VehicleInfoEnvelope<Record<string, unknown>>>(`/vehicles/${vehicleId}/warranty/refresh`, { method: 'POST' }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['warranty-details'] });
+      queryClient.invalidateQueries({ queryKey: ['warranty-details', vehicleId] });
       success('toast.vehicles.warranty.refresh.success', 'Warranty details refreshed');
     },
     onError: (e) => error(e, 'toast.vehicles.warranty.refresh.error', 'Failed to refresh warranty details'),
diff --git a/web/src/features/dashboard/components/DashboardGrid.tsx b/web/src/features/dashboard/components/DashboardGrid.tsx
index fb77188f52..9ac80776b8 100644
--- a/web/src/features/dashboard/components/DashboardGrid.tsx
+++ b/web/src/features/dashboard/components/DashboardGrid.tsx
@@ -110,11 +110,18 @@ function WidgetChrome({
 interface FullscreenOverlayProps {
   widget: WidgetInstance;
   def: WidgetDef;
+  dashboardVehicleId?: number;
   onClose: () => void;
   getWidgetSize: (id: string) => { cols: number; rows: number };
 }
 
-function FullscreenOverlay({ widget, def, onClose, getWidgetSize }: FullscreenOverlayProps) {
+function FullscreenOverlay({
+  widget,
+  def,
+  dashboardVehicleId,
+  onClose,
+  getWidgetSize,
+}: FullscreenOverlayProps) {
   const Component = def.component;
   const size = getWidgetSize(widget.id);
   const { t } = useTranslation();
@@ -130,7 +137,7 @@ function FullscreenOverlay({ widget, def, onClose, getWidgetSize }: FullscreenOv
       <GlassPanel className="flex-1 overflow-hidden">
         <Suspense fallback={<Skeleton className="h-full" />}>
           <Component
-            vehicleId={widget.config?.vehicleId}
+            vehicleId={widget.config?.vehicleId ?? dashboardVehicleId}
             config={widget.config}
             size={{ cols: size.cols, rows: Math.max(size.rows, 4) }}
           />
@@ -479,6 +486,7 @@ export function DashboardGrid({
         <FullscreenOverlay
           widget={fullscreenInstance}
           def={fullscreenDef}
+          dashboardVehicleId={dashboardVehicleId}
           onClose={() => setFullscreenWidget(null)}
           getWidgetSize={getWidgetSizeLive}
         />
diff --git a/web/src/features/dashboard/widgets/WarrantyStatusWidget.test.tsx b/web/src/features/dashboard/widgets/WarrantyStatusWidget.test.tsx
index cbced437ea..36773aee9d 100644
--- a/web/src/features/dashboard/widgets/WarrantyStatusWidget.test.tsx
+++ b/web/src/features/dashboard/widgets/WarrantyStatusWidget.test.tsx
@@ -51,14 +51,18 @@ vi.mock('react-i18next', () => ({
   }),
 }));
 
-const { warrantyMock, unitsMock, dateFormatMock } = vi.hoisted(() => ({
+const { warrantyMock, warrantyVehicleIdMock, unitsMock, dateFormatMock } = vi.hoisted(() => ({
   warrantyMock: vi.fn(),
+  warrantyVehicleIdMock: vi.fn(),
   unitsMock: vi.fn(),
   dateFormatMock: vi.fn(),
 }));
 
 vi.mock('@/api/hooks/useVehicles', () => ({
-  useWarrantyDetails: () => warrantyMock(),
+  useWarrantyDetails: (vehicleId?: string) => {
+    warrantyVehicleIdMock(vehicleId);
+    return warrantyMock();
+  },
 }));
 
 vi.mock('@/hooks/useUnits', () => ({
@@ -114,13 +118,14 @@ function makeResult(over: Partial<QueryResult> = {}): QueryResult {
 function renderWidget(size: WidgetSize = { cols: 2, rows: 2 }) {
   return render(
     <MemoryRouter>
-      <WarrantyStatusWidget size={size} />
+      <WarrantyStatusWidget size={size} vehicleId={7} />
     </MemoryRouter>,
   );
 }
 
 beforeEach(() => {
   warrantyMock.mockReset();
+  warrantyVehicleIdMock.mockReset();
   unitsMock.mockReset();
   dateFormatMock.mockReset();
   warrantyMock.mockReturnValue(makeResult());
@@ -243,6 +248,7 @@ describe('WarrantyStatusWidget — states', () => {
   it('renders a loading skeleton while the query is pending', () => {
     warrantyMock.mockReturnValue(makeResult({ isLoading: true, data: undefined }));
     const { container } = renderWidget();
+    expect(warrantyVehicleIdMock).toHaveBeenCalledWith('7');
     expect(container.querySelector('.animate-pulse')).not.toBeNull();
     expect(screen.queryByText('Warranty Status')).toBeNull();
     expect(screen.queryByText('No warranty data')).toBeNull();
diff --git a/web/src/features/dashboard/widgets/WarrantyStatusWidget.tsx b/web/src/features/dashboard/widgets/WarrantyStatusWidget.tsx
index 8822497c64..836092518d 100644
--- a/web/src/features/dashboard/widgets/WarrantyStatusWidget.tsx
+++ b/web/src/features/dashboard/widgets/WarrantyStatusWidget.tsx
@@ -71,7 +71,7 @@ const COVERAGE_TYPES = [
   { key: 'body', labelKey: 'widget.warranty.body', fallback: 'Body' },
 ] as const;
 
-export default function WarrantyStatusWidget({ size }: WidgetProps) {
+export default function WarrantyStatusWidget({ size, vehicleId }: WidgetProps) {
   const { t } = useTranslation('dashboard');
   const { unitPrefs } = useUnits();
   const { formatDate, locale } = useDateFormat();
@@ -90,7 +90,7 @@ export default function WarrantyStatusWidget({ size }: WidgetProps) {
     isError,
     dataUpdatedAt,
     refetch,
-  } = useWarrantyDetails();
+  } = useWarrantyDetails(vehicleId ? String(vehicleId) : undefined);
 
   const warrantyData = envelope?.data ?? null;
   const isCompact = size.cols <= 1;
diff --git a/web/src/features/resale-vault/components/WarrantySummaryPanel.test.tsx b/web/src/features/resale-vault/components/WarrantySummaryPanel.test.tsx
index 7e5e693ff0..a8be08d3d8 100644
--- a/web/src/features/resale-vault/components/WarrantySummaryPanel.test.tsx
+++ b/web/src/features/resale-vault/components/WarrantySummaryPanel.test.tsx
@@ -14,13 +14,13 @@ describe('WarrantySummaryPanel', () => {
     expect(screen.getByText(/No warranty evidence/i)).toBeInTheDocument();
   });
 
-  it('renders the account-level scope note and scrubbed data as key/value rows', () => {
+  it('renders the vehicle scope note and scrubbed data as key/value rows', () => {
     const warranty: WarrantyEvidence = {
       fetched_at: '2024-01-01',
       data: { plan_name: 'New Vehicle Limited Warranty', expires_at: '2028-01-01' },
     };
     render(<WarrantySummaryPanel warranty={warranty} />);
-    expect(screen.getByText(/account level/i)).toBeInTheDocument();
+    expect(screen.getByText(/vehicle selected for this report/i)).toBeInTheDocument();
     expect(screen.getByText('plan_name')).toBeInTheDocument();
     expect(screen.getByText('New Vehicle Limited Warranty')).toBeInTheDocument();
   });
diff --git a/web/src/features/resale-vault/components/WarrantySummaryPanel.tsx b/web/src/features/resale-vault/components/WarrantySummaryPanel.tsx
index b2ea7b370e..9434c4889e 100644
--- a/web/src/features/resale-vault/components/WarrantySummaryPanel.tsx
+++ b/web/src/features/resale-vault/components/WarrantySummaryPanel.tsx
@@ -1,7 +1,6 @@
 /**
  * Warranty summary — renders the already-scrubbed Tesla warranty payload
- * (see `redaction.ts::scrubSensitiveRecord`) as a flat key/value list, plus
- * the account-level (not vehicle-scoped) backend limitation note.
+ * (see `redaction.ts::scrubSensitiveRecord`) as a flat key/value list.
  */
 import { useTranslation } from 'react-i18next';
 import { GlassPanel } from '@/components/ui';
@@ -38,14 +37,14 @@ export function WarrantySummaryPanel({ warranty }: WarrantySummaryPanelProps) {
       <PanelTitle>{t('resaleVault.warranty.title', 'Warranty')}</PanelTitle>
 
       {!warranty || !warranty.data ? (
-        // no-action: mirrors Tesla's account-level warranty endpoint as currently cached; the panel receives no refetch handler and the Evidence tab has no manual sync control.
+        // no-action: the panel receives no refetch handler and the Evidence tab has no manual sync control.
         <EmptyState message={t('resaleVault.warranty.empty', 'No warranty evidence in this report.')} />
       ) : (
         <>
           <InlineCallout variant="info" icon={<Info />}>
             {t(
               'resaleVault.warranty.scopeNote',
-              'Warranty details are fetched at the Tesla account level, not scoped to an individual vehicle.',
+              'Warranty details are scoped to the vehicle selected for this report.',
             )}
           </InlineCallout>
           <KVList
diff --git a/web/src/features/resale-vault/hooks/useVaultEvidence.test.tsx b/web/src/features/resale-vault/hooks/useVaultEvidence.test.tsx
index 3c947962a5..c1267f19c2 100644
--- a/web/src/features/resale-vault/hooks/useVaultEvidence.test.tsx
+++ b/web/src/features/resale-vault/hooks/useVaultEvidence.test.tsx
@@ -35,7 +35,7 @@ function routeResponse(path: string): unknown {
   if (path.startsWith('/maintenance/records')) return [];
   if (path.startsWith('/maintenance')) return [];
   if (path.startsWith('/software-updates')) return [];
-  if (path === '/tesla/warranty') return { data: { plan: 'Basic' }, fetched_at: '2024-01-01T00:00:00Z' };
+  if (path === '/vehicles/1/warranty') return { data: { plan: 'Basic' }, fetched_at: '2024-01-01T00:00:00Z' };
   if (path.startsWith('/drives/score')) return { overall: 90, efficiency: 90, smoothness: 90, speedDiscipline: 90, grade: 'A', totalDrives: 1, trend: 'up' };
   if (path.startsWith('/drives/stats')) return { totalDrives: 1, totalDistanceKm: 10, totalDurationS: 600, avgEfficiencyWhKm: 150, avgSpeedKmh: 40, topSpeedKmh: 80, regenRatio: 0.1, regenEnergyWh: 100, co2SavedKg: 1 };
   if (path.startsWith('/drives')) return [];
diff --git a/web/src/features/resale-vault/hooks/useVaultEvidence.ts b/web/src/features/resale-vault/hooks/useVaultEvidence.ts
index 50a17ad0d9..3b247ff6ad 100644
--- a/web/src/features/resale-vault/hooks/useVaultEvidence.ts
+++ b/web/src/features/resale-vault/hooks/useVaultEvidence.ts
@@ -50,7 +50,7 @@ export function useVaultEvidence(vehicleId: string | null, sensitive: SensitiveF
   const maintenanceQuery = useMaintenance();
   const serviceRecordsQuery = useServiceRecords();
   const softwareUpdatesQuery = useSoftwareUpdates(vehicleId ?? '');
-  const warrantyQuery = useWarrantyDetails();
+  const warrantyQuery = useWarrantyDetails(vehicleId ?? undefined);
   const driveHistoryQuery = useDriveHistory(vehicleId ?? undefined);
   const drivingStatsQuery = useDrivingStats(vehicleId ?? undefined);
   const driveScoreQuery = useDriveScore(vehicleId ?? undefined);
diff --git a/web/src/features/resale-vault/lib/evidenceNormalizers.ts b/web/src/features/resale-vault/lib/evidenceNormalizers.ts
index 28f51178d2..59281e79a7 100644
--- a/web/src/features/resale-vault/lib/evidenceNormalizers.ts
+++ b/web/src/features/resale-vault/lib/evidenceNormalizers.ts
@@ -149,7 +149,7 @@ export function normalizeSoftwareUpdates(updates: SoftwareUpdate[] | undefined):
   };
 }
 
-/** Opaque, untyped Tesla warranty payload → scrubbed `WarrantyEvidence`. Account-level (not vehicle-scoped) per `/tesla/warranty` — surfaced as a limitation by `reportBuilder.ts`. */
+/** Opaque, untyped Tesla warranty payload for the selected vehicle → scrubbed `WarrantyEvidence`. */
 export function normalizeWarranty(
   envelope: { data: Record<string, unknown> | null; fetched_at: string | null } | null | undefined,
   precision: DatePrecision,
diff --git a/web/src/features/resale-vault/lib/reportBuilder.test.ts b/web/src/features/resale-vault/lib/reportBuilder.test.ts
index f5612e304f..ef2dd017ef 100644
--- a/web/src/features/resale-vault/lib/reportBuilder.test.ts
+++ b/web/src/features/resale-vault/lib/reportBuilder.test.ts
@@ -163,13 +163,6 @@ describe('buildVaultReport — limitations', () => {
     expect(without.limitations.some((l) => /fleet-wide backend endpoint/i.test(l))).toBe(false);
   });
 
-  it('includes the warranty account-level-scope limitation only when warranty evidence is present', () => {
-    const withWarranty = emptyEvidence();
-    withWarranty.warranty = { fetched_at: '2024-01-01', data: {} };
-    const report = buildVaultReport({ disclosure: baseSelection, evidence: withWarranty });
-    expect(report.limitations.some((l) => /Tesla account level/i.test(l))).toBe(true);
-  });
-
   it('includes the observed-window limitation when driving OR charging history is present', () => {
     const withDriving = emptyEvidence();
     withDriving.driving_history = {
diff --git a/web/src/features/resale-vault/lib/reportBuilder.ts b/web/src/features/resale-vault/lib/reportBuilder.ts
index 269df590a2..971a03462e 100644
--- a/web/src/features/resale-vault/lib/reportBuilder.ts
+++ b/web/src/features/resale-vault/lib/reportBuilder.ts
@@ -14,7 +14,7 @@
  *     dates survived filtering/redaction.
  *   - Attaches the fixed, honest limitations that apply given which
  *     sections are present (e.g. the fleet-wide, non-vehicle-scoped
- *     maintenance/warranty backend endpoints), plus the general
+ *     maintenance backend endpoint), plus the general
  *     "observed window, not lifetime" caveat already documented on the
  *     underlying `useDriveHistory`/`useChargingHistory` hooks.
  *   - Is fully deterministic given an injected `now`/`reportId` (both
@@ -82,10 +82,6 @@ const MAINTENANCE_SCOPE_LIMITATION =
   'vehicle. If this TeslaSync account has more than one vehicle, some entries may not belong to the vehicle this ' +
   'report is otherwise about.';
 
-const WARRANTY_SCOPE_LIMITATION =
-  'Warranty details are fetched at the Tesla account level, not scoped to an individual vehicle. If this account ' +
-  'has more than one vehicle, this data may not correspond 1:1 with the vehicle this report is otherwise about.';
-
 const OBSERVED_WINDOW_LIMITATION =
   'Driving and charging history reflect an observed window of up to the most recent 1,000 records per category, ' +
   'as returned by the backend — not a guaranteed complete lifetime history of the vehicle.';
@@ -97,7 +93,6 @@ const LOCAL_ONLY_LIMITATION =
 function buildLimitations(evidence: VaultEvidence): string[] {
   const limitations = [LOCAL_ONLY_LIMITATION];
   if (evidence.maintenance) limitations.push(MAINTENANCE_SCOPE_LIMITATION);
-  if (evidence.warranty) limitations.push(WARRANTY_SCOPE_LIMITATION);
   if (evidence.driving_history || evidence.charging_history) limitations.push(OBSERVED_WINDOW_LIMITATION);
   return limitations;
 }
diff --git a/web/src/features/resale-vault/pages/WarrantyResaleVaultPage.test.tsx b/web/src/features/resale-vault/pages/WarrantyResaleVaultPage.test.tsx
index cfaf182a9a..d657bdbcdc 100644
--- a/web/src/features/resale-vault/pages/WarrantyResaleVaultPage.test.tsx
+++ b/web/src/features/resale-vault/pages/WarrantyResaleVaultPage.test.tsx
@@ -41,7 +41,7 @@ function routeResponse(path: string): unknown {
   if (path.startsWith('/maintenance/records')) return [];
   if (path.startsWith('/maintenance')) return [];
   if (path.startsWith('/software-updates')) return [];
-  if (path === '/tesla/warranty') return { data: { plan: 'Basic' }, fetched_at: '2024-01-01T00:00:00Z' };
+  if (path === '/vehicles/1/warranty') return { data: { plan: 'Basic' }, fetched_at: '2024-01-01T00:00:00Z' };
   if (path.startsWith('/drives/score')) return { overall: 90, efficiency: 90, smoothness: 90, speedDiscipline: 90, grade: 'A', totalDrives: 1, trend: 'up' };
   if (path.startsWith('/drives/stats')) return { totalDrives: 1, totalDistanceKm: 10, totalDurationS: 600, avgEfficiencyWhKm: 150, avgSpeedKmh: 40, topSpeedKmh: 80, regenRatio: 0.1, regenEnergyWh: 100, co2SavedKg: 1 };
   if (path.startsWith('/drives')) return [];
diff --git a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
index 733f530f2e..e164d99541 100644
--- a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
@@ -15,6 +15,7 @@ interface ManagementEndpointBodyProps {
   error?: unknown
   unavailable: boolean
   kind: ManagementEndpointKind
+  hasCompletedResult?: boolean
   emptyTitle?: string
   emptyMessage?: string
 }
@@ -33,6 +34,7 @@ export function ManagementEndpointBody({
   error,
   unavailable,
   kind,
+  hasCompletedResult = false,
   emptyTitle,
   emptyMessage,
 }: ManagementEndpointBodyProps) {
@@ -122,6 +124,22 @@ export function ManagementEndpointBody({
       </div>
     )
   }
+  if (hasCompletedResult) {
+    return (
+      // no-action: Refresh and operation actions are already exposed in the endpoint card header.
+      <EmptyState
+        title={t(
+          'vehicleManagement.state.emptyResult',
+          'No matching data returned',
+        )}
+        message={t(
+          'vehicleManagement.state.emptyResultDetail',
+          'Tesla completed the request but returned no matching data for this vehicle.',
+        )}
+        className="py-5"
+      />
+    )
+  }
   return (
     // no-action: Refresh and operation actions are already exposed in the endpoint card header.
     <EmptyState
diff --git a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
index 291558dd0d..445bfe7d4b 100644
--- a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
@@ -107,6 +107,7 @@ export function ManagementEndpointCard({
           error={error}
           unavailable={unavailable}
           kind={kind}
+          hasCompletedResult={Boolean(fetchedAt) || operationSucceeded}
           emptyTitle={emptyTitle}
           emptyMessage={emptyMessage}
         />
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
index 65b2abadf3..60e4201ada 100644
--- a/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
@@ -76,7 +76,13 @@ function responseFor(url: string): unknown {
     if (optionsError) throw optionsError
     return {
       data: {
-        codes: ['A', 'B'],
+        codes: [
+          {
+            code: '$APF2',
+            displayName: 'Full Self-Driving (Supervised)',
+            isActive: true,
+          },
+        ],
         api_token: 'must-never-render',
         nested: { enabled: true },
       },
@@ -91,17 +97,34 @@ function responseFor(url: string): unknown {
   }
   if (url.endsWith('/subscriptions')) {
     return {
-      data: { subscriptions: [{ name: 'Premium' }], eligible: true },
+      data: {
+        vin: 'MASKED',
+        country: 'US',
+        eligible: [
+          {
+            optionCode: '$ESASUB',
+            product: 'EXTENDED_WARRANTY',
+            billingOptions: [
+              {
+                price: 60,
+                total: 60,
+                currencyCode: 'USD',
+                billingPeriod: 'MONTHLY',
+              },
+            ],
+          },
+        ],
+      },
       fetched_at: cachedAt,
     }
   }
   if (url.endsWith('/upgrades')) {
     return {
-      data: { upgrades: [{ name: 'Acceleration Boost' }] },
+      data: {},
       fetched_at: cachedAt,
     }
   }
-  if (url === '/tesla/warranty') {
+  if (url.endsWith('/warranty')) {
     return {
       data: { warranty_status: 'active', expiry_date: '2028-01-01' },
       fetched_at: cachedAt,
@@ -205,13 +228,20 @@ describe('VehicleManagementWorkspace', () => {
       `/vehicles/${VEHICLE_ID}/specs`,
       `/vehicles/${VEHICLE_ID}/subscriptions`,
       `/vehicles/${VEHICLE_ID}/upgrades`,
-      '/tesla/warranty',
+      `/vehicles/${VEHICLE_ID}/warranty`,
       `/vehicles/${VEHICLE_ID}/enterprise-roles`,
     ]))
     expect(calls('POST')).toHaveLength(0)
 
     expect(screen.queryByText('must-never-render')).not.toBeInTheDocument()
     expect(screen.getByText('Redacted')).toBeInTheDocument()
+    expect(screen.getByText('Full Self-Driving (Supervised)')).toBeInTheDocument()
+    expect(screen.getByText('EXTENDED_WARRANTY')).toBeInTheDocument()
+    expect(
+      within(endpointCard('upgrade-eligibility')).getByText(
+        'No matching data returned',
+      ),
+    ).toBeInTheDocument()
     expect(document.body).not.toHaveTextContent('[object Object]')
   })
 
@@ -350,7 +380,7 @@ describe('VehicleManagementWorkspace', () => {
 
     expect(screen.getByText('Vehicle selection required')).toBeInTheDocument()
     expect(document.querySelectorAll('[data-management-endpoint]')).toHaveLength(8)
-    await waitFor(() => expect(calls('GET').length).toBeGreaterThan(0))
+    expect(calls('GET')).toHaveLength(0)
     expect(
       calls().some(([url]) => url.includes('/vehicles/undefined')),
     ).toBe(false)
@@ -364,7 +394,7 @@ describe('VehicleManagementWorkspace', () => {
       within(endpointCard('warranty-details')).getByRole('button', {
         name: 'Refresh from Tesla',
       }),
-    ).toBeEnabled()
+    ).toBeDisabled()
     expect(
       within(endpointCard('vehicle-pricing')).getByRole('button', {
         name: 'Open pricing query',
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleMetadataCards.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleMetadataCards.tsx
index 1b204b43c1..4c0602717f 100644
--- a/web/src/features/vehicles/components/vehicle-management/VehicleMetadataCards.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleMetadataCards.tsx
@@ -21,11 +21,11 @@ export function VehicleMetadataCards({ vehicleId }: VehicleMetadataCardsProps) {
   const options = useVehicleOptions(selectedId)
   const subscriptions = useVehicleSubscriptions(selectedId)
   const upgrades = useVehicleUpgrades(selectedId)
-  const warranty = useWarrantyDetails()
+  const warranty = useWarrantyDetails(selectedId)
   const refreshOptions = useRefreshVehicleOptions(selectedId)
   const refreshSubscriptions = useRefreshVehicleSubscriptions(selectedId)
   const refreshUpgrades = useRefreshVehicleUpgrades(selectedId)
-  const refreshWarranty = useRefreshWarrantyDetails()
+  const refreshWarranty = useRefreshWarrantyDetails(selectedId)
   const vehicleUnavailable = !selectedId
 
   return (
@@ -55,9 +55,9 @@ export function VehicleMetadataCards({ vehicleId }: VehicleMetadataCardsProps) {
         title={t('vehicleManagement.warranty.title', 'Warranty details')}
         description={t(
           'vehicleManagement.warranty.description',
-          'Tesla account warranty coverage details; VIN behavior can vary by account.',
+          'Warranty coverage details for the selected Tesla VIN.',
         )}
-        endpoint="GET /api/1/dx/warranty/details"
+        endpoint="GET /api/1/dx/warranty/details?vin={vin}"
         prerequisite="user"
         kind="warranty"
         data={warranty.data?.data}
@@ -66,6 +66,7 @@ export function VehicleMetadataCards({ vehicleId }: VehicleMetadataCardsProps) {
         error={refreshWarranty.error ?? warranty.error}
         refreshPending={refreshWarranty.isPending}
         operationSucceeded={refreshWarranty.isSuccess}
+        unavailable={vehicleUnavailable}
         onRefresh={() => refreshWarranty.mutate()}
       />
 
diff --git a/web/src/features/vehicles/components/vehicle-management/managementJson.ts b/web/src/features/vehicles/components/vehicle-management/managementJson.ts
index e93ed947a3..6df9045fc6 100644
--- a/web/src/features/vehicles/components/vehicle-management/managementJson.ts
+++ b/web/src/features/vehicles/components/vehicle-management/managementJson.ts
@@ -106,7 +106,7 @@ export function summarizeManagementData(
   }
 
   if (kind === 'subscriptions' || kind === 'upgrades') {
-    const count = arrayLength(data, [kind])
+    const count = arrayLength(data, [kind, 'eligible'])
     const status = scalar(data, ['eligible', 'status'])
     if (count != null) summary.push({ label: 'items', value: String(count) })
     if (status) summary.push({ label: 'status', value: status })
diff --git a/web/src/features/vehicles/pages/VehicleManagementPage.tsx b/web/src/features/vehicles/pages/VehicleManagementPage.tsx
index 7fe48ddba5..276a10fae1 100644
--- a/web/src/features/vehicles/pages/VehicleManagementPage.tsx
+++ b/web/src/features/vehicles/pages/VehicleManagementPage.tsx
@@ -93,7 +93,7 @@ export default function VehicleManagementPage() {
           >
             {t(
               'vehicleManagement.roster.loading',
-              'Vehicle-scoped cards remain unavailable while the fleet loads. Cached account-level warranty data can still load.',
+              'Vehicle-scoped management data remains unavailable while the fleet loads.',
             )}
           </AlertBanner>
         )}
@@ -110,7 +110,7 @@ export default function VehicleManagementPage() {
               <span>
                 {t(
                   'vehicleManagement.roster.error',
-                  'The vehicle list could not be loaded. Account-level cached data remains available.',
+                  'The vehicle list could not be loaded, so vehicle-scoped management data is unavailable.',
                 )}
               </span>
               <Button
@@ -137,7 +137,7 @@ export default function VehicleManagementPage() {
             >
               {t(
                 'vehicleManagement.roster.empty',
-                'Connect and sync a Tesla vehicle to enable vehicle-scoped management APIs. Account-level warranty data remains available.',
+                'Connect and sync a Tesla vehicle to enable vehicle-scoped management APIs.',
               )}
             </AlertBanner>
           )}
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index 2539f6a35e..bd7fb9b553 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -13489,11 +13489,11 @@
     },
     "roster": {
       "loadingTitle": "Loading vehicle context",
-      "loading": "Vehicle-scoped cards remain unavailable while the fleet loads. Cached account-level warranty data can still load.",
+      "loading": "Vehicle-scoped management data remains unavailable while the fleet loads.",
       "errorTitle": "Vehicle context unavailable",
-      "error": "The vehicle list could not be loaded. Account-level cached data remains available.",
+      "error": "The vehicle list could not be loaded, so vehicle-scoped management data is unavailable.",
       "emptyTitle": "No vehicles available",
-      "empty": "Connect and sync a Tesla vehicle to enable vehicle-scoped management APIs. Account-level warranty data remains available."
+      "empty": "Connect and sync a Tesla vehicle to enable vehicle-scoped management APIs."
     },
     "title": "Vehicle Management workspace",
     "description": "Account metadata, paid specifications, pricing, and enterprise controls are separate from physical vehicle commands.",
@@ -13536,6 +13536,8 @@
       "successDetail": "Tesla accepted the request. Any returned data is shown below.",
       "empty": "No cached data",
       "emptyDetail": "Use refresh to request this information from Tesla when the required access is available.",
+      "emptyResult": "No matching data returned",
+      "emptyResultDetail": "Tesla completed the request but returned no matching data for this vehicle.",
       "fetchedAt": "Cached {{time}}",
       "notFetched": "Not cached"
     },
@@ -13564,7 +13566,7 @@
     },
     "warranty": {
       "title": "Warranty details",
-      "description": "Tesla account warranty coverage details; VIN behavior can vary by account."
+      "description": "Warranty coverage details for the selected Tesla VIN."
     },
     "subscriptions": {
       "title": "Subscription eligibility",
@@ -20834,7 +20836,7 @@
     "warranty": {
       "empty": "No warranty evidence in this report.",
       "fetchedAt": "Fetched at",
-      "scopeNote": "Warranty details are fetched at the Tesla account level, not scoped to an individual vehicle.",
+      "scopeNote": "Warranty details are scoped to the vehicle selected for this report.",
       "title": "Warranty"
     }
   },

From 058d7c8f48d444d7d85e8cb2fc0ba169adedb80f Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sat, 8 Aug 2026 20:14:59 -0700
Subject: [PATCH 04/15] refactor(web): use shared VehicleSelect in management
 page

Replace VehicleManagementPage's inline Select/Badge vehicle picker with the shared VehicleSelect component from @/components/forms, always showing the dropdown even for single-vehicle fleets. Removes now-unused useMemo-based option building and manual selected-name logic. Adds a test asserting the dropdown remains visible with one vehicle.
---
 .../pages/VehicleManagementPage.test.tsx      | 12 ++++
 .../vehicles/pages/VehicleManagementPage.tsx  | 58 ++++---------------
 2 files changed, 23 insertions(+), 47 deletions(-)

diff --git a/web/src/features/vehicles/pages/VehicleManagementPage.test.tsx b/web/src/features/vehicles/pages/VehicleManagementPage.test.tsx
index e4a274d604..bff5686f38 100644
--- a/web/src/features/vehicles/pages/VehicleManagementPage.test.tsx
+++ b/web/src/features/vehicles/pages/VehicleManagementPage.test.tsx
@@ -144,6 +144,18 @@ describe('VehicleManagementPage', () => {
     expect(setVehicleIdMock).toHaveBeenCalledWith(2)
   })
 
+  it('keeps the vehicle dropdown visible for a single-vehicle fleet', () => {
+    const vehicle = makeVehicle(1, 'Falcon')
+    installHooks({ vehicles: [vehicle], selected: vehicle })
+
+    renderPage()
+
+    expect(screen.getByLabelText('Select management vehicle')).toHaveValue('1')
+    expect(
+      screen.getByRole('option', { name: 'Falcon' }),
+    ).toBeInTheDocument()
+  })
+
   it('keeps the workspace visible while the fleet loads', () => {
     installHooks({ vehicles: undefined, selected: null, loading: true })
 
diff --git a/web/src/features/vehicles/pages/VehicleManagementPage.tsx b/web/src/features/vehicles/pages/VehicleManagementPage.tsx
index 276a10fae1..b06f9107f0 100644
--- a/web/src/features/vehicles/pages/VehicleManagementPage.tsx
+++ b/web/src/features/vehicles/pages/VehicleManagementPage.tsx
@@ -1,13 +1,12 @@
-import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { VehicleSelect } from '@/components/forms'
 import { PageContainer } from '@/components/layout'
 import { AlertBanner } from '@/components/feedback'
 import { FadeIn } from '@/components/motion'
-import { Badge, Button, Select } from '@/components/ui'
+import { Button } from '@/components/ui'
 import { useVehicles } from '@/api/hooks/useVehicles'
 import { usePageTitle } from '@/hooks/usePageTitle'
 import { useSelectedVehicle } from '@/hooks/useSelectedVehicle'
-import { Icons } from '@/lib/icons'
 import { VehicleManagementWorkspace } from '../components/vehicle-management'
 
 export default function VehicleManagementPage() {
@@ -18,7 +17,6 @@ export default function VehicleManagementPage() {
   const {
     vehicleId,
     vehicle: selectedFromStore,
-    setVehicleId,
   } = useSelectedVehicle()
   const vehicles = vehiclesQuery.data ?? []
   const selectedVehicle =
@@ -29,28 +27,6 @@ export default function VehicleManagementPage() {
     vehicles[0] ??
     null
 
-  const vehicleOptions = useMemo(
-    () =>
-      vehicles.map((vehicle) => ({
-        value: String(vehicle.id),
-        label:
-          vehicle.display_name?.trim() ||
-          vehicle.vin ||
-          t('vehicleManagement.vehicle.fallbackName', 'Vehicle {{id}}', {
-            id: vehicle.id,
-          }),
-      })),
-    [t, vehicles],
-  )
-
-  const selectedName = selectedVehicle
-    ? selectedVehicle.display_name?.trim() ||
-      selectedVehicle.vin ||
-      t('vehicleManagement.vehicle.fallbackName', 'Vehicle {{id}}', {
-        id: selectedVehicle.id,
-      })
-    : null
-
   return (
     <PageContainer
       title={t('vehicleManagement.pageTitle', 'Vehicle Management')}
@@ -59,27 +35,15 @@ export default function VehicleManagementPage() {
         'Review Tesla account metadata, paid specifications, pricing, and enterprise access separately from physical commands.',
       )}
       actions={
-        vehicles.length > 1 ? (
-          <Select
-            id="vehicle-management-vehicle"
-            aria-label={t(
-              'vehicleManagement.selectVehicle',
-              'Select management vehicle',
-            )}
-            value={selectedVehicle ? String(selectedVehicle.id) : ''}
-            onChange={(event) => {
-              const next = Number(event.target.value)
-              if (Number.isFinite(next) && next > 0) setVehicleId(next)
-            }}
-            options={vehicleOptions}
-            className="min-h-11 min-w-48"
-          />
-        ) : selectedName ? (
-          <Badge variant="neutral" size="lg" className="min-h-11">
-            <Icons.vehicle className="h-3.5 w-3.5" aria-hidden="true" />
-            {selectedName}
-          </Badge>
-        ) : null
+        <VehicleSelect
+          id="vehicle-management-vehicle"
+          ariaLabel={t(
+            'vehicleManagement.selectVehicle',
+            'Select management vehicle',
+          )}
+          className="min-h-11 min-w-48"
+          withIcon
+        />
       }
     >
       <div className="space-y-4">

From 81af949e62e3ff2679638d0b79ccce46e59187fb Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sat, 8 Aug 2026 23:40:59 -0700
Subject: [PATCH 05/15] feat(web): improve vehicle management views

Add structured views for options, specifications, warranties, subscriptions, and enterprise roles, with technical response details, improved endpoint cards, and expanded test coverage. Keep vehicle selection visible for single-vehicle fleets.
---
 .../system/pages/CommandsPage.test.tsx        |  10 +-
 .../features/system/pages/CommandsPage.tsx    |  63 +--
 .../EnterprisePayerCard.tsx                   |   1 +
 .../EnterpriseRolesDataView.tsx               |  60 +++
 .../vehicle-management/ManagementDataView.tsx |  58 +++
 .../ManagementEndpointBody.tsx                |  31 +-
 .../ManagementEndpointCard.tsx                |  37 +-
 .../ManagementRawDetails.tsx                  |  24 +
 .../vehicle-management/StructuredDataView.tsx |  27 +-
 .../SubscriptionDataView.tsx                  | 182 ++++++++
 .../VehicleManagementWorkspace.test.tsx       |  48 +-
 .../VehicleManagementWorkspace.tsx            |  11 +-
 .../VehicleOptionsDataView.tsx                | 127 ++++++
 .../vehicle-management/VehiclePricingCard.tsx |   1 +
 .../VehicleSpecsDataView.tsx                  |  78 ++++
 .../vehicle-management/WarrantyDataView.tsx   | 189 ++++++++
 .../vehicle-management/managementData.ts      | 419 ++++++++++++++++++
 .../vehicle-management/managementJson.test.ts | 133 ++++++
 .../vehicle-management/managementJson.ts      |   2 +
 web/src/i18n/en.json                          |  61 ++-
 20 files changed, 1444 insertions(+), 118 deletions(-)
 create mode 100644 web/src/features/vehicles/components/vehicle-management/EnterpriseRolesDataView.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/ManagementDataView.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/ManagementRawDetails.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/SubscriptionDataView.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/VehicleOptionsDataView.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/VehicleSpecsDataView.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/WarrantyDataView.tsx
 create mode 100644 web/src/features/vehicles/components/vehicle-management/managementData.ts

diff --git a/web/src/features/system/pages/CommandsPage.test.tsx b/web/src/features/system/pages/CommandsPage.test.tsx
index a83246a177..ffb3c56f70 100644
--- a/web/src/features/system/pages/CommandsPage.test.tsx
+++ b/web/src/features/system/pages/CommandsPage.test.tsx
@@ -234,14 +234,18 @@ describe('CommandsPage', () => {
     expect(setVehicleIdMock).toHaveBeenCalledWith(2);
   });
 
-  it('shows the single selected vehicle as a named badge', () => {
+  it('keeps the vehicle dropdown visible for a single-vehicle fleet', () => {
     const only = makeVehicle(7, { display_name: 'Solo' });
     installHooks({ vehicles: [only], selected: only });
 
     renderPage();
 
-    expect(screen.getAllByText('Solo')).toHaveLength(2);
-    expect(screen.queryByLabelText('Select vehicle')).not.toBeInTheDocument();
+    expect(screen.getByLabelText('Select vehicle')).toHaveValue('7');
+    expect(
+      within(screen.getByLabelText('Select vehicle')).getByRole('option', {
+        name: 'Solo',
+      }),
+    ).toBeInTheDocument();
   });
 
   it('navigates to command history from the header action', () => {
diff --git a/web/src/features/system/pages/CommandsPage.tsx b/web/src/features/system/pages/CommandsPage.tsx
index 3d04207324..30565086f8 100644
--- a/web/src/features/system/pages/CommandsPage.tsx
+++ b/web/src/features/system/pages/CommandsPage.tsx
@@ -9,13 +9,14 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Car, History, Wifi } from 'lucide-react';
+import { VehicleSelect } from '@/components/forms';
 import { PageContainer } from '@/components/layout';
-import { Badge, Button, Select } from '@/components/ui';
+import { Badge, Button } from '@/components/ui';
 import { FadeIn } from '@/components/motion';
 import { useVehicles } from '@/api/hooks/useVehicles';
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { useSelectedVehicle } from '@/hooks/useSelectedVehicle';
+import { Icons } from '@/lib/icons';
 import {
   CommandCenterFallback,
   VehicleCommandCenter,
@@ -33,11 +34,7 @@ export default function CommandsPage() {
    * loading/error/refetch state needed for explicit route placeholders.
    */
   const vehiclesQuery = useVehicles();
-  const {
-    vehicleId,
-    vehicle: selectedFromStore,
-    setVehicleId,
-  } = useSelectedVehicle();
+  const { vehicleId, vehicle: selectedFromStore } = useSelectedVehicle();
   const vehicles = vehiclesQuery.data ?? [];
 
   /**
@@ -53,20 +50,6 @@ export default function CommandsPage() {
     vehicles[0] ??
     null;
 
-  const vehicleOptions = useMemo(
-    () =>
-      vehicles.map((vehicle) => ({
-        value: String(vehicle.id),
-        label:
-          vehicle.display_name?.trim() ||
-          vehicle.vin ||
-          t('commands.vehicle.fallbackName', 'Vehicle {{id}}', {
-            id: vehicle.id,
-          }),
-      })),
-    [t, vehicles],
-  );
-
   /**
    * Keep the existing fleet readiness summary, but make the language honest:
    * roster state is a last-known connection state, not proof that a command
@@ -87,14 +70,6 @@ export default function CommandsPage() {
       ? 'error'
       : 'empty';
 
-  const selectedName = selectedVehicle
-    ? selectedVehicle.display_name?.trim() ||
-      selectedVehicle.vin ||
-      t('commands.vehicle.fallbackName', 'Vehicle {{id}}', {
-        id: selectedVehicle.id,
-      })
-    : null;
-
   return (
     <PageContainer
       title={t('commands.pageTitle', 'Vehicle Command Center')}
@@ -110,7 +85,7 @@ export default function CommandsPage() {
               size="lg"
               className="min-h-11"
             >
-              <Wifi className="h-3.5 w-3.5" aria-hidden="true" />
+              <Icons.wifi className="h-3.5 w-3.5" aria-hidden="true" />
               {t(
                 'commands.reachableCount',
                 '{{reachable}}/{{total}} recently reachable',
@@ -122,33 +97,19 @@ export default function CommandsPage() {
             </Badge>
           )}
 
-          {vehicles.length > 1 ? (
-            <Select
-              id="commands-vehicle"
-              aria-label={t('commands.selectVehicle', 'Select vehicle')}
-              value={selectedVehicle ? String(selectedVehicle.id) : ''}
-              onChange={(event) => {
-                const next = Number(event.target.value);
-                if (Number.isFinite(next) && next > 0) {
-                  setVehicleId(next);
-                }
-              }}
-              options={vehicleOptions}
-              className="min-h-11 min-w-48"
-            />
-          ) : selectedName ? (
-            <Badge variant="neutral" size="lg" className="min-h-11">
-              <Car className="h-3.5 w-3.5" aria-hidden="true" />
-              {selectedName}
-            </Badge>
-          ) : null}
+          <VehicleSelect
+            id="commands-vehicle"
+            ariaLabel={t('commands.selectVehicle', 'Select vehicle')}
+            className="min-h-11 min-w-48"
+            withIcon
+          />
 
           <Button
             type="button"
             variant="ghost"
             size="lg"
             className="min-h-11"
-            icon={<History className="h-4 w-4" aria-hidden="true" />}
+            icon={<Icons.history className="h-4 w-4" aria-hidden="true" />}
             onClick={() => navigate('/command-history')}
           >
             {t('commands.viewHistory', 'View history')}
diff --git a/web/src/features/vehicles/components/vehicle-management/EnterprisePayerCard.tsx b/web/src/features/vehicles/components/vehicle-management/EnterprisePayerCard.tsx
index 656f3206bc..a0076008d9 100644
--- a/web/src/features/vehicles/components/vehicle-management/EnterprisePayerCard.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/EnterprisePayerCard.tsx
@@ -39,6 +39,7 @@ export function EnterprisePayerCard({ vehicleId }: EnterprisePayerCardProps) {
         )}
         endpoint="POST /api/1/dx/enterprise/v1/{vin}/payer"
         prerequisite="enterprise"
+        kind="payer"
         data={payer.data?.data}
         error={payer.error}
         refreshPending={payer.isPending}
diff --git a/web/src/features/vehicles/components/vehicle-management/EnterpriseRolesDataView.tsx b/web/src/features/vehicles/components/vehicle-management/EnterpriseRolesDataView.tsx
new file mode 100644
index 0000000000..989bdb503c
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/EnterpriseRolesDataView.tsx
@@ -0,0 +1,60 @@
+import { useTranslation } from 'react-i18next'
+import { EmptyState } from '@/components/feedback'
+import { Badge, Text } from '@/components/ui'
+import { Icons } from '@/lib/icons'
+import {
+  humanizeManagementLabel,
+  parseEnterpriseRoles,
+} from './managementData'
+import { ManagementRawDetails } from './ManagementRawDetails'
+
+interface EnterpriseRolesDataViewProps {
+  data: unknown
+}
+
+export function EnterpriseRolesDataView({
+  data,
+}: EnterpriseRolesDataViewProps) {
+  const { t } = useTranslation()
+  const roles = parseEnterpriseRoles(data)
+
+  if (roles.length === 0) {
+    return (
+      <div>
+        <EmptyState
+          title={t(
+            'vehicleManagement.roles.emptyTitle',
+            'No enterprise roles returned',
+          )}
+          message={t(
+            'vehicleManagement.roles.emptyDetail',
+            'Tesla returned a response, but it did not include enterprise roles for this vehicle.',
+          )}
+          className="py-5"
+        />
+        <ManagementRawDetails value={data} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <Text variant="bodySm" as="p">
+        {t(
+          'vehicleManagement.roles.resultSummary',
+          '{{count}} enterprise roles returned',
+          { count: roles.length },
+        )}
+      </Text>
+      <div className="flex flex-wrap gap-2">
+        {roles.map((role) => (
+          <Badge key={role} variant="info" size="lg">
+            <Icons.securityCheck className="h-4 w-4" aria-hidden="true" />
+            {humanizeManagementLabel(role)}
+          </Badge>
+        ))}
+      </div>
+      <ManagementRawDetails value={data} />
+    </div>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/ManagementDataView.tsx b/web/src/features/vehicles/components/vehicle-management/ManagementDataView.tsx
new file mode 100644
index 0000000000..a60d02b349
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/ManagementDataView.tsx
@@ -0,0 +1,58 @@
+import { useTranslation } from 'react-i18next'
+import { Badge } from '@/components/ui'
+import {
+  summarizeManagementData,
+  type ManagementEndpointKind,
+} from './managementJson'
+import { EnterpriseRolesDataView } from './EnterpriseRolesDataView'
+import { StructuredDataView } from './StructuredDataView'
+import { SubscriptionDataView } from './SubscriptionDataView'
+import { VehicleOptionsDataView } from './VehicleOptionsDataView'
+import { VehicleSpecsDataView } from './VehicleSpecsDataView'
+import { WarrantyDataView } from './WarrantyDataView'
+
+interface ManagementDataViewProps {
+  data: unknown
+  kind: ManagementEndpointKind
+}
+
+export function ManagementDataView({
+  data,
+  kind,
+}: ManagementDataViewProps) {
+  const { t } = useTranslation()
+
+  if (kind === 'options') return <VehicleOptionsDataView data={data} />
+  if (kind === 'specs') return <VehicleSpecsDataView data={data} />
+  if (kind === 'warranty') return <WarrantyDataView data={data} />
+  if (kind === 'subscriptions') return <SubscriptionDataView data={data} />
+  if (kind === 'roles') return <EnterpriseRolesDataView data={data} />
+
+  const recordData =
+    data !== null && typeof data === 'object' && !Array.isArray(data)
+      ? data as Record<string, unknown>
+      : null
+  const summary = summarizeManagementData(recordData, kind)
+  const summaryLabels = {
+    model: t('vehicleManagement.summary.model', 'Model'),
+    trim: t('vehicleManagement.summary.trim', 'Trim'),
+    status: t('vehicleManagement.summary.status', 'Status'),
+    expiry: t('vehicleManagement.summary.expiry', 'Expiry'),
+    items: t('vehicleManagement.summary.items', 'Items'),
+    fields: t('vehicleManagement.summary.fields', 'Fields returned'),
+    roles: t('vehicleManagement.summary.roles', 'Roles'),
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap gap-2">
+        {summary.map((item) => (
+          <Badge key={`${item.label}-${item.value}`} variant="neutral">
+            {summaryLabels[item.label]}: {item.value}
+          </Badge>
+        ))}
+      </div>
+      <StructuredDataView value={data} />
+    </div>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
index e164d99541..79566a8b7c 100644
--- a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointBody.tsx
@@ -1,13 +1,11 @@
 import { useTranslation } from 'react-i18next'
 import { isApiError } from '@/api/client'
 import { AlertBanner, EmptyState, Spinner } from '@/components/feedback'
-import { Badge } from '@/components/ui'
 import {
   managementErrorText,
-  summarizeManagementData,
   type ManagementEndpointKind,
 } from './managementJson'
-import { StructuredDataView } from './StructuredDataView'
+import { ManagementDataView } from './ManagementDataView'
 
 interface ManagementEndpointBodyProps {
   data: unknown
@@ -39,22 +37,8 @@ export function ManagementEndpointBody({
   emptyMessage,
 }: ManagementEndpointBodyProps) {
   const { t } = useTranslation()
-  const recordData =
-    data !== null && typeof data === 'object' && !Array.isArray(data)
-      ? data as Record<string, unknown>
-      : null
-  const summary = summarizeManagementData(recordData, kind)
   const capabilityUnavailable =
     isApiError(error) && [401, 402, 403, 412].includes(error.status)
-  const summaryLabels = {
-    model: t('vehicleManagement.summary.model', 'Model'),
-    trim: t('vehicleManagement.summary.trim', 'Trim'),
-    status: t('vehicleManagement.summary.status', 'Status'),
-    expiry: t('vehicleManagement.summary.expiry', 'Expiry'),
-    items: t('vehicleManagement.summary.items', 'Items'),
-    fields: t('vehicleManagement.summary.fields', 'Fields returned'),
-    roles: t('vehicleManagement.summary.roles', 'Roles'),
-  }
 
   if (unavailable) {
     return (
@@ -111,18 +95,7 @@ export function ManagementEndpointBody({
     )
   }
   if (hasRenderableData(data)) {
-    return (
-      <div className="space-y-3">
-        <div className="flex flex-wrap gap-2">
-          {summary.map((item) => (
-            <Badge key={`${item.label}-${item.value}`} variant="neutral">
-              {summaryLabels[item.label]}: {item.value}
-            </Badge>
-          ))}
-        </div>
-        <StructuredDataView value={data} />
-      </div>
-    )
+    return <ManagementDataView data={data} kind={kind} />
   }
   if (hasCompletedResult) {
     return (
diff --git a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
index 445bfe7d4b..330c70c56e 100644
--- a/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/ManagementEndpointCard.tsx
@@ -9,6 +9,7 @@ import {
   Text,
 } from '@/components/ui'
 import { AlertBanner } from '@/components/feedback'
+import { formatDateTime } from '@/lib/dateFormat'
 import { Icons } from '@/lib/icons'
 import type { ManagementEndpointKind } from './managementJson'
 import { ManagementEndpointBody } from './ManagementEndpointBody'
@@ -43,6 +44,18 @@ const prerequisiteVariant = {
   enterprise: 'danger',
 } as const
 
+const endpointIcon = {
+  options: Icons.settings,
+  specs: Icons.vehicle,
+  warranty: Icons.securityCheck,
+  subscriptions: Icons.receipt,
+  upgrades: Icons.sparkles,
+  roles: Icons.users,
+  pricing: Icons.shoppingCart,
+  payer: Icons.wallet,
+  generic: Icons.database,
+} as const
+
 export function ManagementEndpointCard({
   endpointId,
   title,
@@ -70,23 +83,31 @@ export function ManagementEndpointCard({
     partner: t('vehicleManagement.prerequisite.partner', 'Partner token'),
     enterprise: t('vehicleManagement.prerequisite.enterprise', 'Enterprise'),
   }[prerequisite]
+  const EndpointIcon = endpointIcon[kind]
 
   return (
     <GlassPanel
-      className="flex min-h-72 flex-col gap-3 p-4"
+      className="flex flex-col gap-4 p-4 sm:p-5"
       data-management-endpoint={endpointId}
     >
       <div className="flex flex-wrap items-start justify-between gap-2">
-        <div className="min-w-0 space-y-1">
-          <PanelTitle>{title}</PanelTitle>
-          <Text variant="bodySm" as="p">{description}</Text>
+        <div className="flex min-w-0 flex-1 items-start gap-3">
+          <div className="rounded-xl bg-cyan-500/10 p-2 text-cyan-300">
+            <EndpointIcon className="h-4 w-4" aria-hidden="true" />
+          </div>
+          <div className="min-w-0 space-y-1">
+            <PanelTitle>{title}</PanelTitle>
+            <Text variant="bodySm" as="p">{description}</Text>
+          </div>
         </div>
         <Badge variant={prerequisiteVariant[prerequisite]}>
           {prerequisiteLabel}
         </Badge>
       </div>
 
-      <Code className="break-all text-[var(--text-secondary)]">{endpoint}</Code>
+      <Code className="w-fit max-w-full break-all rounded-md bg-[var(--surface-2)] px-2 py-1 text-[var(--text-secondary)]">
+        {endpoint}
+      </Code>
       {warning}
       {operationSucceeded && !error && (
         <AlertBanner
@@ -100,7 +121,7 @@ export function ManagementEndpointCard({
         </AlertBanner>
       )}
 
-      <div className="min-h-24 flex-1">
+      <div className="flex-1">
         <ManagementEndpointBody
           data={data}
           loading={loading}
@@ -116,7 +137,9 @@ export function ManagementEndpointCard({
       <div className="flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border-default)] pt-3">
         <Text variant="caption">
           {fetchedAt
-            ? t('vehicleManagement.state.fetchedAt', 'Cached {{time}}', { time: fetchedAt })
+            ? t('vehicleManagement.state.fetchedAt', 'Cached {{time}}', {
+                time: formatDateTime(fetchedAt),
+              })
             : t('vehicleManagement.state.notFetched', 'Not cached')}
         </Text>
         {onRefresh && (
diff --git a/web/src/features/vehicles/components/vehicle-management/ManagementRawDetails.tsx b/web/src/features/vehicles/components/vehicle-management/ManagementRawDetails.tsx
new file mode 100644
index 0000000000..89cccaf2d9
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/ManagementRawDetails.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+import { Accordion } from '@/components/ui'
+import { StructuredDataView } from './StructuredDataView'
+
+interface ManagementRawDetailsProps {
+  value: unknown
+}
+
+export function ManagementRawDetails({ value }: ManagementRawDetailsProps) {
+  const { t } = useTranslation()
+
+  return (
+    <Accordion
+      title={t(
+        'vehicleManagement.data.technicalDetails',
+        'Technical response details',
+      )}
+      className="mt-3"
+      bodyClassName="max-h-80 overflow-auto p-3"
+    >
+      <StructuredDataView value={value} />
+    </Accordion>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/StructuredDataView.tsx b/web/src/features/vehicles/components/vehicle-management/StructuredDataView.tsx
index 0fc42828f5..39cb537848 100644
--- a/web/src/features/vehicles/components/vehicle-management/StructuredDataView.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/StructuredDataView.tsx
@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Code, Text } from '@/components/ui'
+import { Badge, Text } from '@/components/ui'
 import { isSensitiveManagementKey } from './managementJson'
+import { humanizeManagementLabel } from './managementData'
 
 interface StructuredDataViewProps {
   value: unknown
@@ -26,9 +27,9 @@ function renderScalar(value: string | number | boolean | null, labels: RendererL
   }
   if (typeof value === 'boolean') {
     return (
-      <Text variant="bodySm">
+      <Badge variant={value ? 'success' : 'neutral'}>
         {value ? labels.trueValue : labels.falseValue}
-      </Text>
+      </Badge>
     )
   }
   return (
@@ -60,9 +61,12 @@ function renderNode(value: unknown, depth: number, labels: RendererLabels): Reac
       return <Text variant="helper">{labels.emptyArray}</Text>
     }
     return (
-      <div className="space-y-2 border-l border-[var(--border-default)] pl-3">
+      <div className="grid gap-2">
         {value.map((item, index) => (
-          <div key={index} className="space-y-1">
+          <div
+            key={index}
+            className="space-y-2 rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-2)] p-3"
+          >
             <Text variant="label">{labels.item(index + 1)}</Text>
             {renderNode(item, depth + 1, labels)}
           </div>
@@ -77,14 +81,16 @@ function renderNode(value: unknown, depth: number, labels: RendererLabels): Reac
       return <Text variant="helper">{labels.emptyObject}</Text>
     }
     return (
-      <dl className="space-y-2">
+      <dl className="grid gap-2">
         {entries.map(([key, nested]) => (
           <div
             key={key}
-            className="grid gap-1 rounded-lg border border-[var(--border-default)] bg-[var(--surface-1)] p-2 sm:grid-cols-[minmax(8rem,0.4fr)_minmax(0,1fr)]"
+            className="grid gap-2 rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-1)] p-3 sm:grid-cols-[minmax(9rem,0.35fr)_minmax(0,1fr)]"
           >
             <dt className="min-w-0">
-              <Code className="break-all">{key}</Code>
+              <Text variant="label" title={key}>
+                {humanizeManagementLabel(key)}
+              </Text>
             </dt>
             <dd className="min-w-0">
               {isSensitiveManagementKey(key)
@@ -115,10 +121,7 @@ export function StructuredDataView({ value }: StructuredDataViewProps) {
   }
 
   return (
-    <div
-      className="max-h-80 overflow-auto pr-1"
-      data-testid="management-structured-data"
-    >
+    <div data-testid="management-structured-data">
       {renderNode(value, 0, labels)}
     </div>
   )
diff --git a/web/src/features/vehicles/components/vehicle-management/SubscriptionDataView.tsx b/web/src/features/vehicles/components/vehicle-management/SubscriptionDataView.tsx
new file mode 100644
index 0000000000..4990cb1dfa
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/SubscriptionDataView.tsx
@@ -0,0 +1,182 @@
+import { useTranslation } from 'react-i18next'
+import { EmptyState } from '@/components/feedback'
+import { Badge, Code, Heading, Text } from '@/components/ui'
+import { formatCurrencyValue } from '@/lib/currencyFormat'
+import { Icons } from '@/lib/icons'
+import { fmtNumber, getGlobalLocale } from '@/lib/numberFormat'
+import {
+  humanizeManagementLabel,
+  parseSubscriptionEligibility,
+  type SubscriptionBillingData,
+} from './managementData'
+import { ManagementRawDetails } from './ManagementRawDetails'
+
+interface SubscriptionDataViewProps {
+  data: unknown
+}
+
+function formatReportedPrice(option: SubscriptionBillingData): string {
+  if (option.price == null) return '—'
+  if (!option.currencyCode) {
+    return fmtNumber(option.price, Number.isInteger(option.price) ? 0 : 2)
+  }
+  return formatCurrencyValue(
+    option.price,
+    option.currencyCode,
+    getGlobalLocale(),
+    Number.isInteger(option.price) ? 0 : 2,
+    { useGrouping: true },
+  )
+}
+
+function formatReportedTotal(option: SubscriptionBillingData): string {
+  if (option.total == null) return '—'
+  if (!option.currencyCode) {
+    return fmtNumber(option.total, Number.isInteger(option.total) ? 0 : 2)
+  }
+  return formatCurrencyValue(
+    option.total,
+    option.currencyCode,
+    getGlobalLocale(),
+    Number.isInteger(option.total) ? 0 : 2,
+    { useGrouping: true },
+  )
+}
+
+function BillingOption({ option }: { option: SubscriptionBillingData }) {
+  const { t } = useTranslation()
+  const periodKey = option.billingPeriod?.trim().toUpperCase()
+  const period = {
+    DAILY: t('vehicleManagement.subscriptions.period.day', 'day'),
+    WEEKLY: t('vehicleManagement.subscriptions.period.week', 'week'),
+    MONTHLY: t('vehicleManagement.subscriptions.period.month', 'month'),
+    YEARLY: t('vehicleManagement.subscriptions.period.year', 'year'),
+    ANNUAL: t('vehicleManagement.subscriptions.period.year', 'year'),
+    ONE_TIME: t('vehicleManagement.subscriptions.period.oneTime', 'one time'),
+  }[periodKey ?? '']
+
+  return (
+    <div className="rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-1)] p-3">
+      <Text variant="label" as="p">
+        {option.billingPeriod
+          ? humanizeManagementLabel(option.billingPeriod)
+          : t('vehicleManagement.subscriptions.billingOption', 'Billing option')}
+      </Text>
+      <Text variant="metricValue" as="p" className="mt-1">
+        {formatReportedPrice(option)}
+        {period && (
+          <Text variant="bodySm">
+            {t('vehicleManagement.subscriptions.perPeriod', ' / {{period}}', {
+              period,
+            })}
+          </Text>
+        )}
+      </Text>
+      {option.total != null && (
+        <Text variant="helper" as="p" className="mt-1">
+          {t('vehicleManagement.subscriptions.total', 'Total {{amount}}', {
+            amount: formatReportedTotal(option),
+          })}
+        </Text>
+      )}
+    </div>
+  )
+}
+
+export function SubscriptionDataView({
+  data,
+}: SubscriptionDataViewProps) {
+  const { t } = useTranslation()
+  const eligibility = parseSubscriptionEligibility(data)
+
+  if (eligibility.offers.length === 0) {
+    return (
+      <div>
+        <EmptyState
+          title={t(
+            'vehicleManagement.subscriptions.emptyTitle',
+            'No eligible subscriptions returned',
+          )}
+          message={t(
+            'vehicleManagement.subscriptions.emptyDetail',
+            'Tesla returned a response, but it did not include any eligible subscription offers.',
+          )}
+          className="py-5"
+        />
+        <ManagementRawDetails value={data} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Text variant="bodySm">
+          {t(
+            'vehicleManagement.subscriptions.resultSummary',
+            '{{count}} eligible subscription offers',
+            { count: eligibility.offers.length },
+          )}
+        </Text>
+        {eligibility.country && (
+          <Badge variant="info">
+            {t('vehicleManagement.subscriptions.market', 'Market {{country}}', {
+              country: eligibility.country,
+            })}
+          </Badge>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        {eligibility.offers.map((offer, index) => (
+          <div
+            key={`${offer.optionCode ?? offer.product ?? index}`}
+            className="rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] p-3"
+          >
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div className="flex min-w-0 items-start gap-3">
+                <div className="rounded-lg bg-blue-500/10 p-2 text-blue-300">
+                  <Icons.receipt className="h-4 w-4" aria-hidden="true" />
+                </div>
+                <div className="min-w-0 space-y-1">
+                  <Heading level="sub" as="h4">
+                    {offer.product
+                      ? humanizeManagementLabel(offer.product)
+                      : t(
+                          'vehicleManagement.subscriptions.unnamedOffer',
+                          'Tesla subscription',
+                        )}
+                  </Heading>
+                  {offer.optionCode && <Code>{offer.optionCode}</Code>}
+                </div>
+              </div>
+              <Badge variant="success" dot>
+                {t('vehicleManagement.subscriptions.eligible', 'Eligible')}
+              </Badge>
+            </div>
+
+            {offer.billingOptions.length > 0 ? (
+              <div className="mt-3 grid gap-2 sm:grid-cols-2">
+                {offer.billingOptions.map((option, billingIndex) => (
+                  <BillingOption
+                    key={`${option.currencyCode ?? 'currency'}-${option.billingPeriod ?? billingIndex}`}
+                    option={option}
+                  />
+                ))}
+              </div>
+            ) : (
+              <Text variant="helper" as="p" className="mt-3">
+                {t(
+                  'vehicleManagement.subscriptions.noBilling',
+                  'Tesla returned no billing options for this offer.',
+                )}
+              </Text>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <ManagementRawDetails value={data} />
+    </div>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
index 60e4201ada..cedd8519e1 100644
--- a/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.test.tsx
@@ -91,7 +91,12 @@ function responseFor(url: string): unknown {
   }
   if (url.endsWith('/specs')) {
     return {
-      data: { model: 'Model 3', trim_badging: 'Performance' },
+      data: {
+        model: 'Model 3',
+        trim_badging: 'Performance',
+        exterior_color: 'Midnight Silver Metallic',
+        wheel_type: 'Uberturbine',
+      },
       fetched_at: cachedAt,
     }
   }
@@ -126,7 +131,18 @@ function responseFor(url: string): unknown {
   }
   if (url.endsWith('/warranty')) {
     return {
-      data: { warranty_status: 'active', expiry_date: '2028-01-01' },
+      data: {
+        activeWarranty: [
+          {
+            warrantyDisplayName: 'Drive Unit Limited Warranty',
+            coverageAgeInYears: 8,
+            expirationOdometer: 120000,
+            warrantyExpiredOn: null,
+          },
+        ],
+        expiredWarranty: [],
+        upcomingWarranty: [],
+      },
       fetched_at: cachedAt,
     }
   }
@@ -233,15 +249,37 @@ describe('VehicleManagementWorkspace', () => {
     ]))
     expect(calls('POST')).toHaveLength(0)
 
+    expect(screen.getByText('Full Self-Driving (Supervised)')).toBeInTheDocument()
+    expect(screen.getByText('1 active of 1 options returned')).toBeInTheDocument()
+    expect(screen.getByText('Drive Unit Limited Warranty')).toBeInTheDocument()
+    expect(screen.getByText('8 years')).toBeInTheDocument()
+    expect(screen.getByText('120,000')).toBeInTheDocument()
+    expect(screen.getByText('Extended Warranty')).toBeInTheDocument()
+    expect(endpointCard('subscription-eligibility')).toHaveTextContent(
+      '$60 / month',
+    )
+    expect(screen.queryByText('warrantyDisplayName')).not.toBeInTheDocument()
     expect(screen.queryByText('must-never-render')).not.toBeInTheDocument()
+    expect(screen.getByText('4 specification fields returned')).toBeInTheDocument()
+    expect(screen.getByText('Fleet Manager')).toBeInTheDocument()
+
+    fireEvent.click(
+      within(endpointCard('vehicle-options')).getByRole('button', {
+        name: 'Technical response details',
+      }),
+    )
     expect(screen.getByText('Redacted')).toBeInTheDocument()
-    expect(screen.getByText('Full Self-Driving (Supervised)')).toBeInTheDocument()
-    expect(screen.getByText('EXTENDED_WARRANTY')).toBeInTheDocument()
+    expect(screen.queryByText('must-never-render')).not.toBeInTheDocument()
+
     expect(
       within(endpointCard('upgrade-eligibility')).getByText(
         'No matching data returned',
       ),
     ).toBeInTheDocument()
+    expect(screen.getByTestId('vehicle-management-endpoints')).toHaveClass(
+      'columns-1',
+      'xl:columns-2',
+    )
     expect(document.body).not.toHaveTextContent('[object Object]')
   })
 
@@ -311,7 +349,7 @@ describe('VehicleManagementWorkspace', () => {
 
   it('refreshes cached enterprise roles only after the explicit action', async () => {
     renderWorkspace()
-    await screen.findByText('fleet_manager')
+    await screen.findByText('Fleet Manager')
     const card = endpointCard('enterprise-roles')
 
     fireEvent.click(
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.tsx
index 1fe9c063a3..8db12980de 100644
--- a/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleManagementWorkspace.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { Grid, Stack } from '@/components/layout'
+import { Masonry, Stack } from '@/components/layout'
 import { AlertBanner } from '@/components/feedback'
 import { Badge, GlassPanel, Heading, Text } from '@/components/ui'
 import { Icons } from '@/lib/icons'
@@ -13,8 +13,6 @@ interface VehicleManagementWorkspaceProps {
   vehicleId?: number
 }
 
-const MANAGEMENT_GRID_COLUMNS = { default: 1, xl: 2 } as const
-
 export function VehicleManagementWorkspace({
   vehicleId,
 }: VehicleManagementWorkspaceProps) {
@@ -70,13 +68,16 @@ export function VehicleManagementWorkspace({
           )}
         </GlassPanel>
 
-        <Grid cols={MANAGEMENT_GRID_COLUMNS} gap={4}>
+        <Masonry
+          className="columns-1 xl:columns-2"
+          data-testid="vehicle-management-endpoints"
+        >
           <VehicleMetadataCards vehicleId={vehicleId} />
           <PaidVehicleSpecsCard vehicleId={vehicleId} />
           <VehiclePricingCard />
           <EnterpriseRolesCard vehicleId={vehicleId} />
           <EnterprisePayerCard vehicleId={vehicleId} />
-        </Grid>
+        </Masonry>
       </Stack>
     </section>
   )
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleOptionsDataView.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleOptionsDataView.tsx
new file mode 100644
index 0000000000..8515069926
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleOptionsDataView.tsx
@@ -0,0 +1,127 @@
+import { useTranslation } from 'react-i18next'
+import { EmptyState } from '@/components/feedback'
+import { Badge, Code, Heading, Text } from '@/components/ui'
+import { Icons } from '@/lib/icons'
+import { parseVehicleOptions } from './managementData'
+import { ManagementRawDetails } from './ManagementRawDetails'
+
+interface VehicleOptionsDataViewProps {
+  data: unknown
+}
+
+export function VehicleOptionsDataView({
+  data,
+}: VehicleOptionsDataViewProps) {
+  const { t } = useTranslation()
+  const options = parseVehicleOptions(data)
+  const activeCount = options.filter((option) => option.isActive === true).length
+
+  if (options.length === 0) {
+    return (
+      <div>
+        <EmptyState
+          title={t(
+            'vehicleManagement.options.emptyTitle',
+            'No vehicle options returned',
+          )}
+          message={t(
+            'vehicleManagement.options.emptyDetail',
+            'Tesla returned a response, but it did not contain recognizable option records.',
+          )}
+          className="py-5"
+        />
+        <ManagementRawDetails value={data} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Text variant="bodySm">
+          {t(
+            'vehicleManagement.options.resultSummary',
+            '{{active}} active of {{total}} options returned',
+            { active: activeCount, total: options.length },
+          )}
+        </Text>
+        <Badge variant="success" dot>
+          {t('vehicleManagement.options.factoryConfiguration', 'Factory configuration')}
+        </Badge>
+      </div>
+
+      <div className="grid gap-2 sm:grid-cols-2">
+        {options.map((option, index) => {
+          const title =
+            option.displayName ??
+            option.code ??
+            t('vehicleManagement.options.unnamed', 'Option {{index}}', {
+              index: index + 1,
+            })
+          const statusLabel =
+            option.isActive === true
+              ? t('vehicleManagement.options.active', 'Active')
+              : option.isActive === false
+                ? t('vehicleManagement.options.inactive', 'Inactive')
+                : t(
+                    'vehicleManagement.options.unknownStatus',
+                    'Status unknown',
+                  )
+
+          return (
+            <div
+              key={`${option.code ?? title}-${index}`}
+              className="rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] p-3"
+            >
+              <div className="flex items-start gap-3">
+                <div
+                  className={
+                    option.isActive === true
+                      ? 'rounded-lg bg-emerald-500/10 p-2 text-emerald-300'
+                      : 'rounded-lg bg-[var(--control-bg)] p-2 text-[var(--text-muted)]'
+                  }
+                >
+                  {option.isActive === false ? (
+                    <Icons.close className="h-4 w-4" aria-hidden="true" />
+                  ) : option.isActive === true ? (
+                    <Icons.confirm className="h-4 w-4" aria-hidden="true" />
+                  ) : (
+                    <Icons.helpCircle className="h-4 w-4" aria-hidden="true" />
+                  )}
+                </div>
+                <div className="min-w-0 flex-1 space-y-2">
+                  <div className="flex flex-wrap items-start justify-between gap-2">
+                    <Heading level="sub" as="h4">
+                      {title}
+                    </Heading>
+                    <Badge
+                      variant={
+                        option.isActive === true ? 'success' : 'neutral'
+                      }
+                    >
+                      {statusLabel}
+                    </Badge>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2">
+                    {option.code && <Code>{option.code}</Code>}
+                    {option.colorCode && (
+                      <Badge variant="neutral">
+                        {t(
+                          'vehicleManagement.options.paintCode',
+                          'Paint {{code}}',
+                          { code: option.colorCode },
+                        )}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      <ManagementRawDetails value={data} />
+    </div>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/VehiclePricingCard.tsx b/web/src/features/vehicles/components/vehicle-management/VehiclePricingCard.tsx
index 9e25e3c8dc..42700a8329 100644
--- a/web/src/features/vehicles/components/vehicle-management/VehiclePricingCard.tsx
+++ b/web/src/features/vehicles/components/vehicle-management/VehiclePricingCard.tsx
@@ -20,6 +20,7 @@ export function VehiclePricingCard() {
         )}
         endpoint="POST /api/1/dx/vehicles/pricing"
         prerequisite="partner"
+        kind="pricing"
         data={pricing.data?.data}
         error={pricing.error}
         refreshPending={pricing.isPending}
diff --git a/web/src/features/vehicles/components/vehicle-management/VehicleSpecsDataView.tsx b/web/src/features/vehicles/components/vehicle-management/VehicleSpecsDataView.tsx
new file mode 100644
index 0000000000..24876f4f94
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/VehicleSpecsDataView.tsx
@@ -0,0 +1,78 @@
+import { useTranslation } from 'react-i18next'
+import { EmptyState } from '@/components/feedback'
+import { Badge, Text } from '@/components/ui'
+import { isSensitiveManagementKey } from './managementJson'
+import { parseManagementScalarFields } from './managementData'
+import { ManagementRawDetails } from './ManagementRawDetails'
+
+interface VehicleSpecsDataViewProps {
+  data: unknown
+}
+
+export function VehicleSpecsDataView({ data }: VehicleSpecsDataViewProps) {
+  const { t } = useTranslation()
+  const fields = parseManagementScalarFields(data).filter(
+    (field) => !isSensitiveManagementKey(field.key),
+  )
+
+  if (fields.length === 0) {
+    return (
+      <div>
+        <EmptyState
+          title={t(
+            'vehicleManagement.specs.emptyTitle',
+            'No specifications returned',
+          )}
+          message={t(
+            'vehicleManagement.specs.emptyDetail',
+            'Tesla returned a response, but it did not contain recognizable specification fields.',
+          )}
+          className="py-5"
+        />
+        <ManagementRawDetails value={data} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <Text variant="bodySm" as="p">
+        {t(
+          'vehicleManagement.specs.resultSummary',
+          '{{count}} specification fields returned',
+          { count: fields.length },
+        )}
+      </Text>
+      <dl className="grid gap-2 sm:grid-cols-2">
+        {fields.map((field) => (
+          <div
+            key={field.key}
+            className="rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] p-3"
+          >
+            <dt>
+              <Text variant="label">{field.label}</Text>
+            </dt>
+            <dd className="mt-1">
+              {typeof field.value === 'boolean' ? (
+                <Badge variant={field.value ? 'success' : 'neutral'}>
+                  {field.value
+                    ? t('vehicleManagement.data.true', 'Yes')
+                    : t('vehicleManagement.data.false', 'No')}
+                </Badge>
+              ) : (
+                <Text
+                  variant="body"
+                  weight="semibold"
+                  mono={typeof field.value === 'number'}
+                >
+                  {String(field.value)}
+                </Text>
+              )}
+            </dd>
+          </div>
+        ))}
+      </dl>
+      <ManagementRawDetails value={data} />
+    </div>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/WarrantyDataView.tsx b/web/src/features/vehicles/components/vehicle-management/WarrantyDataView.tsx
new file mode 100644
index 0000000000..c4e39e9103
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/WarrantyDataView.tsx
@@ -0,0 +1,189 @@
+import { useTranslation } from 'react-i18next'
+import { EmptyState } from '@/components/feedback'
+import { Badge, Code, Heading, Text } from '@/components/ui'
+import { formatDate } from '@/lib/dateFormat'
+import { Icons } from '@/lib/icons'
+import { fmtInt } from '@/lib/numberFormat'
+import {
+  parseWarrantyDetails,
+  type WarrantyCoverageData,
+  type WarrantyCoverageState,
+} from './managementData'
+import { ManagementRawDetails } from './ManagementRawDetails'
+
+interface WarrantyDataViewProps {
+  data: unknown
+}
+
+const stateVariant = {
+  active: 'success',
+  upcoming: 'info',
+  expired: 'neutral',
+} as const
+
+function coverageIcon(state: WarrantyCoverageState) {
+  if (state === 'active') return Icons.securityCheck
+  if (state === 'upcoming') return Icons.calendarClock
+  return Icons.history
+}
+
+function CoverageCard({ coverage }: { coverage: WarrantyCoverageData }) {
+  const { t } = useTranslation()
+  const CoverageIcon = coverageIcon(coverage.state)
+  const stateLabel = {
+    active: t('vehicleManagement.warranty.active', 'Active'),
+    upcoming: t('vehicleManagement.warranty.upcoming', 'Upcoming'),
+    expired: t('vehicleManagement.warranty.expired', 'Expired'),
+  }[coverage.state]
+  const coverageTerm =
+    coverage.coverageAgeYears != null
+      ? t('vehicleManagement.warranty.years', '{{count}} years', {
+          count: coverage.coverageAgeYears,
+        })
+      : coverage.coverageAgeMonths != null
+        ? t('vehicleManagement.warranty.months', '{{count}} months', {
+            count: coverage.coverageAgeMonths,
+          })
+        : t('vehicleManagement.warranty.notProvided', 'Not provided')
+
+  return (
+    <div className="rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] p-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex min-w-0 items-start gap-3">
+          <div className="rounded-lg bg-violet-500/10 p-2 text-violet-300">
+            <CoverageIcon className="h-4 w-4" aria-hidden="true" />
+          </div>
+          <div className="min-w-0 space-y-1">
+            <Heading level="sub" as="h4">
+              {coverage.displayName ??
+                t(
+                  'vehicleManagement.warranty.unnamedCoverage',
+                  'Warranty coverage',
+                )}
+            </Heading>
+            {coverage.code && <Code>{coverage.code}</Code>}
+          </div>
+        </div>
+        <Badge variant={stateVariant[coverage.state]} dot>
+          {stateLabel}
+        </Badge>
+      </div>
+
+      <dl className="mt-3 grid gap-2 sm:grid-cols-3">
+        <div className="rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-1)] p-2">
+          <dt>
+            <Text variant="label">
+              {t('vehicleManagement.warranty.coverageTerm', 'Coverage term')}
+            </Text>
+          </dt>
+          <dd>
+            <Text variant="body" weight="semibold">
+              {coverageTerm}
+            </Text>
+          </dd>
+        </div>
+        <div className="rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-1)] p-2">
+          <dt>
+            <Text variant="label">
+              {t(
+                'vehicleManagement.warranty.odometerLimit',
+                'Odometer limit',
+              )}
+            </Text>
+          </dt>
+          <dd>
+            <Text variant="body" weight="semibold" mono>
+              {coverage.expirationOdometer != null
+                ? fmtInt(coverage.expirationOdometer)
+                : t('vehicleManagement.warranty.notProvided', 'Not provided')}
+            </Text>
+          </dd>
+        </div>
+        <div className="rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-1)] p-2">
+          <dt>
+            <Text variant="label">
+              {t('vehicleManagement.warranty.expiration', 'Expiration')}
+            </Text>
+          </dt>
+          <dd>
+            <Text variant="body" weight="semibold">
+              {coverage.expirationDate
+                ? formatDate(coverage.expirationDate)
+                : t('vehicleManagement.warranty.notProvided', 'Not provided')}
+            </Text>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  )
+}
+
+export function WarrantyDataView({ data }: WarrantyDataViewProps) {
+  const { t } = useTranslation()
+  const warranty = parseWarrantyDetails(data)
+  const coverages = [
+    ...warranty.active,
+    ...warranty.upcoming,
+    ...warranty.expired,
+  ]
+
+  if (coverages.length === 0) {
+    return (
+      <div>
+        <EmptyState
+          title={t(
+            'vehicleManagement.warranty.emptyTitle',
+            'No warranty coverage returned',
+          )}
+          message={t(
+            'vehicleManagement.warranty.emptyDetail',
+            'Tesla returned a response, but it did not include active, upcoming, or expired coverage records.',
+          )}
+          className="py-5"
+        />
+        <ManagementRawDetails value={data} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap gap-2">
+        <Badge variant="success">
+          {t('vehicleManagement.warranty.activeCount', '{{count}} active', {
+            count: warranty.active.length,
+          })}
+        </Badge>
+        <Badge variant="info">
+          {t(
+            'vehicleManagement.warranty.upcomingCount',
+            '{{count}} upcoming',
+            { count: warranty.upcoming.length },
+          )}
+        </Badge>
+        <Badge variant="neutral">
+          {t('vehicleManagement.warranty.expiredCount', '{{count}} expired', {
+            count: warranty.expired.length,
+          })}
+        </Badge>
+      </div>
+
+      <div className="space-y-2">
+        {coverages.map((coverage, index) => (
+          <CoverageCard
+            key={`${coverage.state}-${coverage.code ?? coverage.displayName ?? index}`}
+            coverage={coverage}
+          />
+        ))}
+      </div>
+
+      <Text variant="helper" as="p">
+        {t(
+          'vehicleManagement.warranty.odometerNote',
+          'Odometer limits are shown exactly as Tesla reports them because this response does not identify a unit.',
+        )}
+      </Text>
+      <ManagementRawDetails value={data} />
+    </div>
+  )
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/managementData.ts b/web/src/features/vehicles/components/vehicle-management/managementData.ts
new file mode 100644
index 0000000000..393588d2d7
--- /dev/null
+++ b/web/src/features/vehicles/components/vehicle-management/managementData.ts
@@ -0,0 +1,419 @@
+export type ManagementRecord = Record<string, unknown>
+
+export interface VehicleOptionData {
+  code: string | null
+  displayName: string | null
+  isActive: boolean | null
+  colorCode: string | null
+}
+
+export type WarrantyCoverageState = 'active' | 'upcoming' | 'expired'
+
+export interface WarrantyCoverageData {
+  state: WarrantyCoverageState
+  displayName: string | null
+  code: string | null
+  coverageAgeYears: number | null
+  coverageAgeMonths: number | null
+  expirationOdometer: number | null
+  expirationDate: string | null
+}
+
+export interface WarrantyDetailsData {
+  active: WarrantyCoverageData[]
+  upcoming: WarrantyCoverageData[]
+  expired: WarrantyCoverageData[]
+}
+
+export interface SubscriptionBillingData {
+  price: number | null
+  total: number | null
+  currencyCode: string | null
+  billingPeriod: string | null
+}
+
+export interface SubscriptionOfferData {
+  product: string | null
+  optionCode: string | null
+  billingOptions: SubscriptionBillingData[]
+}
+
+export interface SubscriptionEligibilityData {
+  country: string | null
+  offers: SubscriptionOfferData[]
+}
+
+export interface ManagementScalarField {
+  key: string
+  label: string
+  value: string | number | boolean
+}
+
+export function asManagementRecord(value: unknown): ManagementRecord | null {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+    return null
+  }
+  return value as ManagementRecord
+}
+
+function firstValue(
+  record: ManagementRecord,
+  keys: readonly string[],
+): unknown {
+  for (const key of keys) {
+    if (key in record) return record[key]
+  }
+  return undefined
+}
+
+function readString(
+  record: ManagementRecord,
+  keys: readonly string[],
+): string | null {
+  const value = firstValue(record, keys)
+  if (typeof value === 'string' && value.trim()) return value.trim()
+  if (typeof value === 'number' && Number.isFinite(value)) return String(value)
+  return null
+}
+
+function readNumber(
+  record: ManagementRecord,
+  keys: readonly string[],
+): number | null {
+  const value = firstValue(record, keys)
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string' && value.trim()) {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+  return null
+}
+
+function readBoolean(
+  record: ManagementRecord,
+  keys: readonly string[],
+): boolean | null {
+  const value = firstValue(record, keys)
+  if (typeof value === 'boolean') return value
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase()
+    if (normalized === 'true') return true
+    if (normalized === 'false') return false
+  }
+  return null
+}
+
+function recordArray(value: unknown): ManagementRecord[] {
+  if (Array.isArray(value)) {
+    return value
+      .map(asManagementRecord)
+      .filter((item): item is ManagementRecord => item !== null)
+  }
+  const record = asManagementRecord(value)
+  return record ? [record] : []
+}
+
+function readRecordArray(
+  record: ManagementRecord,
+  keys: readonly string[],
+): ManagementRecord[] {
+  return recordArray(firstValue(record, keys))
+}
+
+export function humanizeManagementLabel(value: string): string {
+  const words = value
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+
+  return words
+    .map((word) => {
+      const upper = word.toUpperCase()
+      if (['API', 'FSD', 'ID', 'VIN', 'USD'].includes(upper)) return upper
+      return `${word.charAt(0).toUpperCase()}${word.slice(1).toLowerCase()}`
+    })
+    .join(' ')
+}
+
+export function parseManagementScalarFields(
+  value: unknown,
+): ManagementScalarField[] {
+  const record = asManagementRecord(value)
+  if (!record) return []
+
+  const seen = new Set<string>()
+  const fields: ManagementScalarField[] = []
+  for (const [key, fieldValue] of Object.entries(record)) {
+    if (
+      typeof fieldValue !== 'string' &&
+      !(typeof fieldValue === 'number' && Number.isFinite(fieldValue)) &&
+      typeof fieldValue !== 'boolean'
+    ) {
+      continue
+    }
+
+    // camelCaseKeys preserves the original Tesla key and adds a camelCase
+    // alias. Collapse both shapes into one visual field.
+    const canonicalKey = key.replace(/[_-]/g, '').toLowerCase()
+    if (seen.has(canonicalKey)) continue
+    seen.add(canonicalKey)
+    fields.push({
+      key,
+      label: humanizeManagementLabel(key),
+      value: fieldValue,
+    })
+  }
+  return fields
+}
+
+export function parseEnterpriseRoles(value: unknown): string[] {
+  const record = asManagementRecord(value)
+  const rawRoles = record
+    ? firstValue(record, ['roles', 'items', 'permissions'])
+    : value
+  if (!Array.isArray(rawRoles)) return []
+
+  return rawRoles
+    .map((role) => {
+      if (typeof role === 'string' && role.trim()) return role.trim()
+      const roleRecord = asManagementRecord(role)
+      return roleRecord
+        ? readString(roleRecord, [
+            'displayName',
+            'display_name',
+            'role',
+            'name',
+            'code',
+          ])
+        : null
+    })
+    .filter((role): role is string => role !== null)
+}
+
+export function parseVehicleOptions(value: unknown): VehicleOptionData[] {
+  const record = asManagementRecord(value)
+  const rows = Array.isArray(value)
+    ? recordArray(value)
+    : record
+      ? readRecordArray(record, [
+          'codes',
+          'optionCodes',
+          'option_codes',
+          'options',
+        ])
+      : []
+
+  return rows
+    .map((item) => ({
+      code: readString(item, ['code', 'optionCode', 'option_code']),
+      displayName: readString(item, [
+        'displayName',
+        'display_name',
+        'name',
+        'title',
+      ]),
+      isActive: readBoolean(item, ['isActive', 'is_active', 'active']),
+      colorCode: readString(item, ['colorCode', 'color_code']),
+    }))
+    .filter((item) => item.code !== null || item.displayName !== null)
+}
+
+function parseWarrantyGroup(
+  record: ManagementRecord,
+  state: WarrantyCoverageState,
+  keys: readonly string[],
+): WarrantyCoverageData[] {
+  return readRecordArray(record, keys).map((item) => ({
+    state,
+    displayName: readString(item, [
+      'warrantyDisplayName',
+      'warranty_display_name',
+      'displayName',
+      'display_name',
+      'name',
+    ]),
+    code: readString(item, [
+      'warrantyCode',
+      'warranty_code',
+      'code',
+      'type',
+    ]),
+    coverageAgeYears: readNumber(item, [
+      'coverageAgeInYears',
+      'coverage_age_in_years',
+      'coverageYears',
+      'coverage_years',
+    ]),
+    coverageAgeMonths: readNumber(item, [
+      'coverageAgeInMonths',
+      'coverage_age_in_months',
+      'coverageMonths',
+      'coverage_months',
+    ]),
+    expirationOdometer: readNumber(item, [
+      'expirationOdometer',
+      'expiration_odometer',
+      'odometerLimit',
+      'odometer_limit',
+    ]),
+    expirationDate: readString(item, [
+      'warrantyExpiredOn',
+      'warranty_expired_on',
+      'warrantyExpirationDate',
+      'warranty_expiration_date',
+      'expirationDate',
+      'expiration_date',
+      'expiryDate',
+      'expiry_date',
+      'endDate',
+      'end_date',
+    ]),
+  }))
+}
+
+export function parseWarrantyDetails(value: unknown): WarrantyDetailsData {
+  const record = asManagementRecord(value)
+  if (!record) return { active: [], upcoming: [], expired: [] }
+
+  const active = parseWarrantyGroup(record, 'active', [
+    'activeWarranty',
+    'active_warranty',
+    'activeWarranties',
+    'active_warranties',
+  ])
+  const upcoming = parseWarrantyGroup(record, 'upcoming', [
+    'upcomingWarranty',
+    'upcoming_warranty',
+    'upcomingWarranties',
+    'upcoming_warranties',
+  ])
+  const expired = parseWarrantyGroup(record, 'expired', [
+    'expiredWarranty',
+    'expired_warranty',
+    'expiredWarranties',
+    'expired_warranties',
+  ])
+
+  if (
+    active.length === 0 &&
+    upcoming.length === 0 &&
+    expired.length === 0 &&
+    readString(record, [
+      'warrantyDisplayName',
+      'warranty_display_name',
+      'displayName',
+      'display_name',
+    ])
+  ) {
+    return {
+      active: [
+        {
+          state: 'active',
+          displayName: readString(record, [
+            'warrantyDisplayName',
+            'warranty_display_name',
+            'displayName',
+            'display_name',
+          ]),
+          code: readString(record, [
+            'warrantyCode',
+            'warranty_code',
+            'code',
+            'type',
+          ]),
+          coverageAgeYears: readNumber(record, [
+            'coverageAgeInYears',
+            'coverage_age_in_years',
+            'coverageYears',
+            'coverage_years',
+          ]),
+          coverageAgeMonths: readNumber(record, [
+            'coverageAgeInMonths',
+            'coverage_age_in_months',
+            'coverageMonths',
+            'coverage_months',
+          ]),
+          expirationOdometer: readNumber(record, [
+            'expirationOdometer',
+            'expiration_odometer',
+            'odometerLimit',
+            'odometer_limit',
+          ]),
+          expirationDate: readString(record, [
+            'warrantyExpiredOn',
+            'warranty_expired_on',
+            'warrantyExpirationDate',
+            'warranty_expiration_date',
+            'expirationDate',
+            'expiration_date',
+            'expiryDate',
+            'expiry_date',
+          ]),
+        },
+      ],
+      upcoming: [],
+      expired: [],
+    }
+  }
+
+  return { active, upcoming, expired }
+}
+
+function parseBillingOptions(value: unknown): SubscriptionBillingData[] {
+  return recordArray(value).map((item) => ({
+    price: readNumber(item, ['price', 'amount']),
+    total: readNumber(item, ['total', 'totalPrice', 'total_price']),
+    currencyCode: readString(item, [
+      'currencyCode',
+      'currency_code',
+      'currency',
+    ]),
+    billingPeriod: readString(item, [
+      'billingPeriod',
+      'billing_period',
+      'period',
+    ]),
+  }))
+}
+
+export function parseSubscriptionEligibility(
+  value: unknown,
+): SubscriptionEligibilityData {
+  const record = asManagementRecord(value)
+  if (!record) return { country: null, offers: [] }
+
+  const offerRows = readRecordArray(record, [
+    'eligible',
+    'subscriptions',
+    'offers',
+    'products',
+  ])
+  return {
+    country: readString(record, ['country', 'countryCode', 'country_code']),
+    offers: offerRows.map((item) => ({
+      product: readString(item, [
+        'product',
+        'productName',
+        'product_name',
+        'displayName',
+        'display_name',
+        'name',
+      ]),
+      optionCode: readString(item, [
+        'optionCode',
+        'option_code',
+        'code',
+      ]),
+      billingOptions: parseBillingOptions(
+        firstValue(item, [
+          'billingOptions',
+          'billing_options',
+          'pricing',
+          'prices',
+        ]),
+      ),
+    })),
+  }
+}
diff --git a/web/src/features/vehicles/components/vehicle-management/managementJson.test.ts b/web/src/features/vehicles/components/vehicle-management/managementJson.test.ts
index b765187ef4..4af4f9cdb6 100644
--- a/web/src/features/vehicles/components/vehicle-management/managementJson.test.ts
+++ b/web/src/features/vehicles/components/vehicle-management/managementJson.test.ts
@@ -4,6 +4,14 @@ import {
   parseNonEmptyJSONObject,
   summarizeManagementData,
 } from './managementJson'
+import {
+  humanizeManagementLabel,
+  parseEnterpriseRoles,
+  parseManagementScalarFields,
+  parseSubscriptionEligibility,
+  parseVehicleOptions,
+  parseWarrantyDetails,
+} from './managementData'
 
 describe('parseNonEmptyJSONObject', () => {
   it.each([
@@ -49,3 +57,128 @@ describe('management JSON safety helpers', () => {
     ])
   })
 })
+
+describe('vehicle management response normalization', () => {
+  it('normalizes Tesla option codes without inventing missing values', () => {
+    expect(
+      parseVehicleOptions({
+        codes: [
+          {
+            code: '$PMNG',
+            colorCode: 'PMNG',
+            displayName: 'Midnight Silver Metallic',
+            isActive: true,
+          },
+        ],
+      }),
+    ).toEqual([
+      {
+        code: '$PMNG',
+        colorCode: 'PMNG',
+        displayName: 'Midnight Silver Metallic',
+        isActive: true,
+      },
+    ])
+  })
+
+  it('normalizes grouped warranty coverage from Tesla camelCase fields', () => {
+    expect(
+      parseWarrantyDetails({
+        activeWarranty: [
+          {
+            warrantyDisplayName: 'Drive Unit Limited Warranty',
+            coverageAgeInYears: 8,
+            expirationOdometer: 120000,
+            warrantyExpiredOn: null,
+          },
+        ],
+        expiredWarranty: [],
+        upcomingWarranty: [],
+      }),
+    ).toEqual({
+      active: [
+        {
+          state: 'active',
+          displayName: 'Drive Unit Limited Warranty',
+          code: null,
+          coverageAgeYears: 8,
+          coverageAgeMonths: null,
+          expirationOdometer: 120000,
+          expirationDate: null,
+        },
+      ],
+      upcoming: [],
+      expired: [],
+    })
+  })
+
+  it('normalizes subscription offers and reported billing terms', () => {
+    expect(
+      parseSubscriptionEligibility({
+        country: 'US',
+        eligible: [
+          {
+            optionCode: '$ESASUB',
+            product: 'EXTENDED_WARRANTY',
+            billingOptions: [
+              {
+                price: 60,
+                total: 60,
+                currencyCode: 'USD',
+                billingPeriod: 'MONTHLY',
+              },
+            ],
+          },
+        ],
+      }),
+    ).toEqual({
+      country: 'US',
+      offers: [
+        {
+          optionCode: '$ESASUB',
+          product: 'EXTENDED_WARRANTY',
+          billingOptions: [
+            {
+              price: 60,
+              total: 60,
+              currencyCode: 'USD',
+              billingPeriod: 'MONTHLY',
+            },
+          ],
+        },
+      ],
+    })
+  })
+
+  it('humanizes Tesla identifiers for display without changing source data', () => {
+    expect(humanizeManagementLabel('EXTENDED_WARRANTY')).toBe(
+      'Extended Warranty',
+    )
+    expect(humanizeManagementLabel('warrantyDisplayName')).toBe(
+      'Warranty Display Name',
+    )
+  })
+
+  it('normalizes scalar specifications and role objects', () => {
+    expect(
+      parseManagementScalarFields({
+        model: 'Model Y',
+        trim_badging: 'Performance',
+        trimBadging: 'Performance',
+        nested: { ignored: true },
+      }),
+    ).toEqual([
+      { key: 'model', label: 'Model', value: 'Model Y' },
+      {
+        key: 'trim_badging',
+        label: 'Trim Badging',
+        value: 'Performance',
+      },
+    ])
+    expect(
+      parseEnterpriseRoles({
+        roles: ['fleet_manager', { displayName: 'Billing Admin' }],
+      }),
+    ).toEqual(['fleet_manager', 'Billing Admin'])
+  })
+})
diff --git a/web/src/features/vehicles/components/vehicle-management/managementJson.ts b/web/src/features/vehicles/components/vehicle-management/managementJson.ts
index 6df9045fc6..b74f612d51 100644
--- a/web/src/features/vehicles/components/vehicle-management/managementJson.ts
+++ b/web/src/features/vehicles/components/vehicle-management/managementJson.ts
@@ -7,6 +7,8 @@ export type ManagementEndpointKind =
   | 'subscriptions'
   | 'upgrades'
   | 'roles'
+  | 'pricing'
+  | 'payer'
   | 'generic'
 
 export interface ManagementSummaryItem {
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index bd7fb9b553..f01d61b1b4 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -13522,7 +13522,8 @@
       "true": "Yes",
       "false": "No",
       "maxDepth": "Additional nested data",
-      "item": "Item {{index}}"
+      "item": "Item {{index}}",
+      "technicalDetails": "Technical response details"
     },
     "state": {
       "vehicleRequired": "Select a vehicle",
@@ -13553,7 +13554,16 @@
     },
     "options": {
       "title": "Vehicle options",
-      "description": "Option codes and factory configuration available to the connected Tesla user."
+      "description": "Option codes and factory configuration available to the connected Tesla user.",
+      "resultSummary": "{{active}} active of {{total}} options returned",
+      "factoryConfiguration": "Factory configuration",
+      "active": "Active",
+      "inactive": "Inactive",
+      "unknownStatus": "Status unknown",
+      "paintCode": "Paint {{code}}",
+      "unnamed": "Option {{index}}",
+      "emptyTitle": "No vehicle options returned",
+      "emptyDetail": "Tesla returned a response, but it did not contain recognizable option records."
     },
     "specs": {
       "title": "Vehicle specifications",
@@ -13562,15 +13572,51 @@
       "costWarning": "Tesla bills $0.10 for each successful specifications result. TeslaSync also enforces a 24-hour refresh guard.",
       "confirmTitle": "Request paid vehicle specifications?",
       "confirmMessage": "A successful Tesla response costs $0.10. Continue only if the cached result needs updating.",
-      "confirmAction": "Request $0.10 result"
+      "confirmAction": "Request $0.10 result",
+      "resultSummary": "{{count}} specification fields returned",
+      "emptyTitle": "No specifications returned",
+      "emptyDetail": "Tesla returned a response, but it did not contain recognizable specification fields."
     },
     "warranty": {
       "title": "Warranty details",
-      "description": "Warranty coverage details for the selected Tesla VIN."
+      "description": "Warranty coverage details for the selected Tesla VIN.",
+      "active": "Active",
+      "upcoming": "Upcoming",
+      "expired": "Expired",
+      "activeCount": "{{count}} active",
+      "upcomingCount": "{{count}} upcoming",
+      "expiredCount": "{{count}} expired",
+      "unnamedCoverage": "Warranty coverage",
+      "coverageTerm": "Coverage term",
+      "odometerLimit": "Odometer limit",
+      "expiration": "Expiration",
+      "years": "{{count}} years",
+      "months": "{{count}} months",
+      "notProvided": "Not provided",
+      "odometerNote": "Odometer limits are shown exactly as Tesla reports them because this response does not identify a unit.",
+      "emptyTitle": "No warranty coverage returned",
+      "emptyDetail": "Tesla returned a response, but it did not include active, upcoming, or expired coverage records."
     },
     "subscriptions": {
       "title": "Subscription eligibility",
-      "description": "Eligibility information for Tesla vehicle subscriptions."
+      "description": "Eligibility information for Tesla vehicle subscriptions.",
+      "resultSummary": "{{count}} eligible subscription offers",
+      "market": "Market {{country}}",
+      "unnamedOffer": "Tesla subscription",
+      "eligible": "Eligible",
+      "billingOption": "Billing option",
+      "perPeriod": " / {{period}}",
+      "total": "Total {{amount}}",
+      "noBilling": "Tesla returned no billing options for this offer.",
+      "emptyTitle": "No eligible subscriptions returned",
+      "emptyDetail": "Tesla returned a response, but it did not include any eligible subscription offers.",
+      "period": {
+        "day": "day",
+        "week": "week",
+        "month": "month",
+        "year": "year",
+        "oneTime": "one time"
+      }
     },
     "upgrades": {
       "title": "Upgrade eligibility",
@@ -13588,7 +13634,10 @@
     },
     "roles": {
       "title": "Enterprise roles",
-      "description": "Cached business roles for the selected VIN. Refresh is the only action that contacts Tesla."
+      "description": "Cached business roles for the selected VIN. Refresh is the only action that contacts Tesla.",
+      "resultSummary": "{{count}} enterprise roles returned",
+      "emptyTitle": "No enterprise roles returned",
+      "emptyDetail": "Tesla returned a response, but it did not include enterprise roles for this vehicle."
     },
     "payer": {
       "title": "Enterprise payer",

From b93a85ef28eea79511db11078f1cee518dba2022 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sun, 9 Aug 2026 00:49:38 -0700
Subject: [PATCH 06/15] refactor(web): SI-canonical fields in weekly digest

Converts the weekly-digest feature (types, useWeeklyDigest, and all section components) from mixed display-unit fields (km, kWh, min, Wh/km) to SI-canonical fields (m, Wh, s, Wh/m), converting only at the render boundary via useUnits(). Adds a shared formatEfficiencyFromSI helper and a useAlertHistory hook backed by a bounded /alerts?limit= query. Drive/charging fetches are now scoped to an explicit two-week analytical window instead of relying on default pagination, and alerts are filtered by vehicle_id. Updates all associated tests and i18n strings to match.
---
 web/src/api/hooks/useNotifications.ts         |  16 ++
 .../weekly-digest/AlertsSection.test.tsx      |  20 +-
 .../BatteryHealthSection.test.tsx             |  34 +--
 .../weekly-digest/BatteryHealthSection.tsx    |  15 +-
 .../weekly-digest/ChargingSection.test.tsx    |  50 ++--
 .../weekly-digest/ChargingSection.tsx         |  26 +-
 .../weekly-digest/DrivingSection.test.tsx     |  99 ++++---
 .../weekly-digest/DrivingSection.tsx          |  56 +++-
 .../components/weekly-digest/MiniStat.tsx     |   2 +-
 .../weekly-digest/SummaryHeroCards.test.tsx   |  36 +--
 .../weekly-digest/SummaryHeroCards.tsx        |  10 +-
 .../WeekOverWeekSummary.test.tsx              |  71 +++--
 .../weekly-digest/WeekOverWeekSummary.tsx     |  22 +-
 .../weekly-digest/WeekSelector.test.tsx       |   4 +-
 .../weekly-digest/constants.test.ts           |   4 +-
 .../components/weekly-digest/display.ts       |  17 ++
 .../components/weekly-digest/types.test.ts    |  98 ++++---
 .../components/weekly-digest/types.ts         |  87 +++----
 .../weekly-digest/useWeeklyDigest.test.tsx    | 160 +++++++-----
 .../weekly-digest/useWeeklyDigest.ts          | 243 +++++++++++-------
 .../analytics/pages/WeeklyDigestPage.test.tsx |  20 +-
 web/src/i18n/en.json                          |   4 +-
 22 files changed, 632 insertions(+), 462 deletions(-)
 create mode 100644 web/src/features/analytics/components/weekly-digest/display.ts

diff --git a/web/src/api/hooks/useNotifications.ts b/web/src/api/hooks/useNotifications.ts
index 7438f4edb1..15fb21fe61 100644
--- a/web/src/api/hooks/useNotifications.ts
+++ b/web/src/api/hooks/useNotifications.ts
@@ -68,6 +68,7 @@ export type NotificationChannelInput =
 
 export const notificationKeys = {
   alerts: ['alerts'] as const,
+  alertHistory: (limit: number) => ['alerts', 'history', limit] as const,
   alertDetail: (id: number) => ['alerts', 'detail', id] as const,
   alertRules: ['alert-rules'] as const,
   alertMetrics: ['alert-metrics'] as const,
@@ -138,6 +139,21 @@ export function useAlerts() {
   });
 }
 
+/**
+ * Fetches the largest backend-supported alert page for analytical views.
+ * Ordinary inbox consumers keep the lightweight polling query above.
+ */
+export function useAlertHistory(limit = 1000) {
+  const boundedLimit = Math.max(1, Math.min(1000, Math.floor(limit)));
+  return useQuery({
+    queryKey: notificationKeys.alertHistory(boundedLimit),
+    queryFn: ({ signal }) =>
+      request<Alert[]>(`/alerts?limit=${boundedLimit}`, { signal }),
+    staleTime: STALE_TIMES.MODERATE,
+    select: safeArray,
+  });
+}
+
 export function useMarkAlertRead() {
   const { success, error } = useMutationToast();
   return useOptimisticMutation<void, string, Alert[]>({
diff --git a/web/src/features/analytics/components/weekly-digest/AlertsSection.test.tsx b/web/src/features/analytics/components/weekly-digest/AlertsSection.test.tsx
index a079324c61..20f783711e 100644
--- a/web/src/features/analytics/components/weekly-digest/AlertsSection.test.tsx
+++ b/web/src/features/analytics/components/weekly-digest/AlertsSection.test.tsx
@@ -63,23 +63,23 @@ vi.mock('react-i18next', async () => {
 // ── Fixtures ────────────────────────────────────────────────────────────────
 
 const baseMetrics: DigestMetrics = {
-  totalDistance: 0,
-  prevDistance: 0,
+  totalDistanceM: 0,
+  prevDistanceM: 0,
   totalDrives: 0,
   prevDriveCount: 0,
-  energyUsed: 0,
-  prevEnergy: 0,
+  energyUsedWh: 0,
+  prevEnergyWh: 0,
   chargingCost: 0,
   prevChargingCost: 0,
   co2Saved: 0,
   prevCo2: 0,
-  avgEfficiency: 0,
-  prevAvgEfficiency: 0,
-  totalDuration: 0,
+  avgEfficiencyWhPerM: 0,
+  prevAvgEfficiencyWhPerM: 0,
+  totalDurationS: 0,
   topDrive: undefined,
-  chargeEnergyAdded: 0,
-  prevChargeEnergy: 0,
-  avgChargeRate: 0,
+  chargeEnergyAddedWh: 0,
+  prevChargeEnergyWh: 0,
+  avgChargePowerW: 0,
   chargingSessionCount: 0,
   batteryStart: 0,
   batteryEnd: 0,
diff --git a/web/src/features/analytics/components/weekly-digest/BatteryHealthSection.test.tsx b/web/src/features/analytics/components/weekly-digest/BatteryHealthSection.test.tsx
index bd4fb1a1c4..9a03c0f868 100644
--- a/web/src/features/analytics/components/weekly-digest/BatteryHealthSection.test.tsx
+++ b/web/src/features/analytics/components/weekly-digest/BatteryHealthSection.test.tsx
@@ -83,26 +83,26 @@ import { ApiError } from '@/lib/resilience';
 
 // A fully-zeroed DigestMetrics so each test overrides only the fields the
 // battery section actually reads (chargingSessionCount, batteryStart,
-// batteryEnd, chargeEnergyAdded) — the prop type demands the whole shape.
+// batteryEnd, chargeEnergyAddedWh) — the prop type demands the whole shape.
 function makeMetrics(over: Partial<DigestMetrics> = {}): DigestMetrics {
   return {
-    totalDistance: 0,
-    prevDistance: 0,
+    totalDistanceM: 0,
+    prevDistanceM: 0,
     totalDrives: 0,
     prevDriveCount: 0,
-    energyUsed: 0,
-    prevEnergy: 0,
+    energyUsedWh: 0,
+    prevEnergyWh: 0,
     chargingCost: 0,
     prevChargingCost: 0,
     co2Saved: 0,
     prevCo2: 0,
-    avgEfficiency: 0,
-    prevAvgEfficiency: 0,
-    totalDuration: 0,
+    avgEfficiencyWhPerM: 0,
+    prevAvgEfficiencyWhPerM: 0,
+    totalDurationS: 0,
     topDrive: undefined,
-    chargeEnergyAdded: 0,
-    prevChargeEnergy: 0,
-    avgChargeRate: 0,
+    chargeEnergyAddedWh: 0,
+    prevChargeEnergyWh: 0,
+    avgChargePowerW: 0,
     chargingSessionCount: 0,
     batteryStart: 0,
     batteryEnd: 0,
@@ -147,7 +147,7 @@ describe('BatteryHealthSection — populated', () => {
 
   it('renders both battery pills with their labels and rounded SoC values', () => {
     renderSection(
-      makeMetrics({ chargingSessionCount: 12, batteryStart: 20, batteryEnd: 80, chargeEnergyAdded: 40 }),
+      makeMetrics({ chargingSessionCount: 12, batteryStart: 20, batteryEnd: 80, chargeEnergyAddedWh: 40_000 }),
     );
 
     expect(screen.getByText('Avg Battery at Charge Start')).toBeInTheDocument();
@@ -159,7 +159,7 @@ describe('BatteryHealthSection — populated', () => {
 
   it('derives the three mini-stats: gain = end − start, fmtInt session count, range = energy × 5.5 km', () => {
     renderSection(
-      makeMetrics({ chargingSessionCount: 12, batteryStart: 20, batteryEnd: 80, chargeEnergyAdded: 40 }),
+      makeMetrics({ chargingSessionCount: 12, batteryStart: 20, batteryEnd: 80, chargeEnergyAddedWh: 40_000 }),
     );
 
     // Avg Charge Gain: fmtNumber(80 - 20, 1) → "60.0%".
@@ -177,7 +177,7 @@ describe('BatteryHealthSection — populated', () => {
 
   it('does not render the loading / error / empty bodies when data is present', () => {
     const { container } = renderSection(
-      makeMetrics({ chargingSessionCount: 3, batteryStart: 50, batteryEnd: 70, chargeEnergyAdded: 10 }),
+      makeMetrics({ chargingSessionCount: 3, batteryStart: 50, batteryEnd: 70, chargeEnergyAddedWh: 10_000 }),
     );
 
     expect(container.querySelector('.animate-pulse')).toBeNull();
@@ -192,7 +192,7 @@ describe('BatteryHealthSection — computation & rounding', () => {
   it('rounds each pill independently but computes the gain from the RAW (unrounded) values', () => {
     // start 54.6 → pill 55%, end 90.4 → pill 90%; gain uses raw 90.4 − 54.6.
     renderSection(
-      makeMetrics({ chargingSessionCount: 4, batteryStart: 54.6, batteryEnd: 90.4, chargeEnergyAdded: 0 }),
+      makeMetrics({ chargingSessionCount: 4, batteryStart: 54.6, batteryEnd: 90.4, chargeEnergyAddedWh: 0 }),
     );
 
     expect(screen.getByText('55%')).toBeInTheDocument();
@@ -203,7 +203,7 @@ describe('BatteryHealthSection — computation & rounding', () => {
 
   it('scales estimated range linearly with charge energy (× 5.5 km per unit)', () => {
     renderSection(
-      makeMetrics({ chargingSessionCount: 1, batteryStart: 10, batteryEnd: 20, chargeEnergyAdded: 100 }),
+      makeMetrics({ chargingSessionCount: 1, batteryStart: 10, batteryEnd: 20, chargeEnergyAddedWh: 100_000 }),
     );
     // 100 × 5.5 = 550, rounded to 0 dp.
     expect(screen.getByText('550 km')).toBeInTheDocument();
@@ -305,7 +305,7 @@ describe('BatteryHealthSection — null safety', () => {
     const holes = sparse as Record<string, unknown>;
     holes.batteryStart = undefined;
     holes.batteryEnd = undefined;
-    holes.chargeEnergyAdded = undefined;
+    holes.chargeEnergyAddedWh = undefined;
 
     renderSection(sparse);
 
diff --git a/web/src/features/analytics/components/weekly-digest/BatteryHealthSection.tsx b/web/src/features/analytics/components/weekly-digest/BatteryHealthSection.tsx
index 237318ad9d..c06f4a4e6c 100644
--- a/web/src/features/analytics/components/weekly-digest/BatteryHealthSection.tsx
+++ b/web/src/features/analytics/components/weekly-digest/BatteryHealthSection.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useUnits } from '@/hooks/useUnits';
 import { Battery, TrendingUp, Zap, MapPin } from 'lucide-react';
 import { GlassPanel, PanelTitle } from '@/components/ui';
 import { EmptyState, Skeleton, QueryError } from '@/components/feedback';
@@ -7,12 +8,8 @@ import { BatteryPill } from './BatteryPill';
 import { MiniStat } from './MiniStat';
 import type { DigestMetrics } from './types';
 
-// Rough driving-range estimate: ~5.5 km of range gained per unit of charge
-// energy added. The weekly-digest feature treats `chargeEnergyAdded` on the
-// kWh scale (ChargingSection labels the same value "kWh"), so this factor is
-// km-per-kWh and stays consistent with the sibling section — it is deliberately
-// NOT a Wh→km conversion despite the underlying `total_energy_added_wh` field.
-const EST_RANGE_KM_PER_ENERGY_UNIT = 5.5;
+// Rough driving-range estimate: 5.5 km/kWh is dimensionally 5.5 m/Wh.
+const EST_RANGE_M_PER_WH = 5.5;
 
 interface BatteryHealthSectionProps {
   metrics: DigestMetrics;
@@ -30,6 +27,7 @@ export function BatteryHealthSection({
   onRetry,
 }: BatteryHealthSectionProps) {
   const { t } = useTranslation();
+  const { formatDistance } = useUnits();
   const hasData = (metrics.chargingSessionCount ?? 0) > 0;
 
   return (
@@ -76,7 +74,10 @@ export function BatteryHealthSection({
             />
             <MiniStat
               label={t('analytics.weeklyDigest.estRangeAdded', 'Est. Range Added')}
-              value={`${fmtNumber((metrics.chargeEnergyAdded ?? 0) * EST_RANGE_KM_PER_ENERGY_UNIT, 0)} km`}
+              value={formatDistance(
+                (metrics.chargeEnergyAddedWh ?? 0) * EST_RANGE_M_PER_WH,
+                { precision: 0 },
+              )}
               icon={<MapPin className="h-4 w-4" />}
             />
           </div>
diff --git a/web/src/features/analytics/components/weekly-digest/ChargingSection.test.tsx b/web/src/features/analytics/components/weekly-digest/ChargingSection.test.tsx
index 4f2082dddb..e6e013bb0f 100644
--- a/web/src/features/analytics/components/weekly-digest/ChargingSection.test.tsx
+++ b/web/src/features/analytics/components/weekly-digest/ChargingSection.test.tsx
@@ -9,7 +9,7 @@
  * The elevation this file locks in fixes a real SI-cutover display bug. The
  * `/charging` API delivers energy in **watt-hours** (`total_energy_added_wh`,
  * documented SI-canonical in api/types.ts) and charge rate in **watts**, so the
- * digest's aggregated `chargeEnergyAdded` / `avgChargeRate` / daily-energy bars
+ * digest's aggregated `chargeEnergyAddedWh` / `avgChargePowerW` / daily-energy bars
  * are all SI magnitudes. The panel previously slapped a raw `" kWh"` / `" kW"`
  * suffix on those numbers (and a "(kWh)" caption on Wh bars) — a silent 1000×
  * overstatement. The source now converts at the render boundary via
@@ -114,23 +114,23 @@ vi.mock('@/components/charts', () => ({
 /* ── Fixtures ─────────────────────────────────────────────────────────────── */
 function baseMetrics(overrides: Partial<DigestMetrics> = {}): DigestMetrics {
   return {
-    totalDistance: 0,
-    prevDistance: 0,
+    totalDistanceM: 0,
+    prevDistanceM: 0,
     totalDrives: 0,
     prevDriveCount: 0,
-    energyUsed: 0,
-    prevEnergy: 0,
+    energyUsedWh: 0,
+    prevEnergyWh: 0,
     chargingCost: 0,
     prevChargingCost: 0,
     co2Saved: 0,
     prevCo2: 0,
-    avgEfficiency: 0,
-    prevAvgEfficiency: 0,
-    totalDuration: 0,
+    avgEfficiencyWhPerM: 0,
+    prevAvgEfficiencyWhPerM: 0,
+    totalDurationS: 0,
     topDrive: undefined,
-    chargeEnergyAdded: 0,
-    prevChargeEnergy: 0,
-    avgChargeRate: 0,
+    chargeEnergyAddedWh: 0,
+    prevChargeEnergyWh: 0,
+    avgChargePowerW: 0,
     chargingSessionCount: 0,
     batteryStart: 0,
     batteryEnd: 0,
@@ -142,14 +142,14 @@ function baseMetrics(overrides: Partial<DigestMetrics> = {}): DigestMetrics {
 
 // Energy fixtures are in SI watt-hours, exactly as the API/hook deliver them.
 const populatedEnergy: DailyEnergyEntry[] = [
-  { day: 'Mon', energy: 12_000 },
-  { day: 'Tue', energy: 0 },
-  { day: 'Wed', energy: 3_000 },
+  { day: 'Mon', energyWh: 12_000 },
+  { day: 'Tue', energyWh: 0 },
+  { day: 'Wed', energyWh: 3_000 },
 ];
 
 const zeroEnergy: DailyEnergyEntry[] = [
-  { day: 'Mon', energy: 0 },
-  { day: 'Tue', energy: 0 },
+  { day: 'Mon', energyWh: 0 },
+  { day: 'Tue', energyWh: 0 },
 ];
 
 interface RenderOverrides {
@@ -250,8 +250,8 @@ describe('ChargingSection — daily-energy chart converts SI watt-hours to kWh',
 
   it('tolerates malformed series rows without crashing (null day/energy)', () => {
     const dirty = [
-      { day: 'Mon', energy: 5_000 },
-      { day: undefined, energy: undefined },
+      { day: 'Mon', energyWh: 5_000 },
+      { day: undefined, energyWh: undefined },
     ] as unknown as DailyEnergyEntry[];
     renderSection({ dailyEnergyData: dirty });
 
@@ -268,8 +268,8 @@ describe('ChargingSection — stat row values', () => {
   it('converts SI energy (Wh) and power (W) into kWh / kW for display', () => {
     renderSection({
       metrics: {
-        chargeEnergyAdded: 50_000, // 50 kWh
-        avgChargeRate: 7_000, // 7 kW
+        chargeEnergyAddedWh: 50_000, // 50 kWh
+        avgChargePowerW: 7_000, // 7 kW
         chargingCost: 12.5,
         chargingSessionCount: 3,
       },
@@ -286,8 +286,8 @@ describe('ChargingSection — stat row values', () => {
   it('null-safe defaults render zeroed stats rather than NaN / blank tiles', () => {
     renderSection({
       metrics: {
-        chargeEnergyAdded: undefined as unknown as number,
-        avgChargeRate: undefined as unknown as number,
+        chargeEnergyAddedWh: undefined as unknown as number,
+        avgChargePowerW: undefined as unknown as number,
         chargingCost: undefined as unknown as number,
         chargingSessionCount: undefined as unknown as number,
       },
@@ -316,7 +316,7 @@ describe('ChargingSection — stat row values', () => {
 describe('ChargingSection — energy-vs-last-week badge', () => {
   it('is a success badge with a signed-free percentage when energy is up', () => {
     renderSection({
-      metrics: { chargeEnergyAdded: 60_000, prevChargeEnergy: 50_000 },
+      metrics: { chargeEnergyAddedWh: 60_000, prevChargeEnergyWh: 50_000 },
     });
 
     const badge = screen.getByText('20.0%');
@@ -327,7 +327,7 @@ describe('ChargingSection — energy-vs-last-week badge', () => {
 
   it('is a warning badge with a negative percentage when energy is down', () => {
     renderSection({
-      metrics: { chargeEnergyAdded: 40_000, prevChargeEnergy: 50_000 },
+      metrics: { chargeEnergyAddedWh: 40_000, prevChargeEnergyWh: 50_000 },
     });
 
     const badge = screen.getByText('-20.0%');
@@ -337,7 +337,7 @@ describe('ChargingSection — energy-vs-last-week badge', () => {
 
   it('falls back to an em-dash when there is no prior-week baseline', () => {
     renderSection({
-      metrics: { chargeEnergyAdded: 50_000, prevChargeEnergy: 0 },
+      metrics: { chargeEnergyAddedWh: 50_000, prevChargeEnergyWh: 0 },
     });
 
     // No prior baseline → no misleading "Infinity%" — just the placeholder.
diff --git a/web/src/features/analytics/components/weekly-digest/ChargingSection.tsx b/web/src/features/analytics/components/weekly-digest/ChargingSection.tsx
index 4e2cd9ed7b..c8e401ccbd 100644
--- a/web/src/features/analytics/components/weekly-digest/ChargingSection.tsx
+++ b/web/src/features/analytics/components/weekly-digest/ChargingSection.tsx
@@ -37,7 +37,7 @@ export function ChargingSection({
   const { formatCurrency } = useFormatting();
   const { formatEnergy, formatPower, unitPrefs } = useUnits();
   const energyData = dailyEnergyData ?? [];
-  const hasChart = energyData.some((d) => (d?.energy ?? 0) > 0);
+  const hasChart = energyData.some((entry) => (entry?.energyWh ?? 0) > 0);
 
   // The API delivers charge energy in SI watt-hours; convert to the user's
   // energy unit at the render boundary so the bars, axis, and tooltip agree
@@ -46,7 +46,7 @@ export function ChargingSection({
     () =>
       energyData.map((d) => ({
         day: d?.day ?? '',
-        energy: convertEnergyFromSI(d?.energy ?? 0, unitPrefs.energy),
+        energy: convertEnergyFromSI(d?.energyWh ?? 0, unitPrefs.energy),
       })),
     [energyData, unitPrefs.energy],
   );
@@ -61,7 +61,9 @@ export function ChargingSection({
       {/* Daily Energy Added bar chart */}
       <div>
         <Caption className="mb-2 block">
-          {t('analytics.weeklyDigest.dailyEnergyAdded', 'Daily Energy Added (kWh)')}
+          {t('analytics.weeklyDigest.dailyEnergyAdded', 'Daily Energy Added ({{unit}})', {
+            unit: unitPrefs.energy,
+          })}
         </Caption>
         {isLoading ? (
           <Skeleton height={220} />
@@ -102,12 +104,12 @@ export function ChargingSection({
         />
         <MiniStat
           label={t('analytics.weeklyDigest.totalEnergyAdded', 'Total Energy Added')}
-          value={formatEnergy(metrics.chargeEnergyAdded ?? 0, { precision: 1 })}
+          value={formatEnergy(metrics.chargeEnergyAddedWh ?? 0, { precision: 1 })}
           icon={<Zap className="h-4 w-4" />}
         />
         <MiniStat
           label={t('analytics.weeklyDigest.avgChargeRate', 'Avg Charge Rate')}
-          value={formatPower(metrics.avgChargeRate ?? 0, { precision: 1 })}
+          value={formatPower(metrics.avgChargePowerW ?? 0, { precision: 1 })}
           icon={<Activity className="h-4 w-4" />}
         />
         <MiniStat
@@ -122,12 +124,20 @@ export function ChargingSection({
         <Caption>{t('analytics.weeklyDigest.energyVsLastWeek', 'Energy vs. Last Week')}</Caption>
         <Badge
           variant={
-            (metrics.chargeEnergyAdded ?? 0) >= (metrics.prevChargeEnergy ?? 0) ? 'success' : 'warning'
+            (metrics.chargeEnergyAddedWh ?? 0) >= (metrics.prevChargeEnergyWh ?? 0)
+              ? 'success'
+              : 'warning'
           }
           size="sm"
         >
-          {(metrics.prevChargeEnergy ?? 0) > 0
-            ? `${fmtNumber(pctChange(metrics.chargeEnergyAdded ?? 0, metrics.prevChargeEnergy ?? 0), 1)}%`
+          {(metrics.prevChargeEnergyWh ?? 0) > 0
+            ? `${fmtNumber(
+                pctChange(
+                  metrics.chargeEnergyAddedWh ?? 0,
+                  metrics.prevChargeEnergyWh ?? 0,
+                ),
+                1,
+              )}%`
             : '—'}
         </Badge>
       </GlassPanel>
diff --git a/web/src/features/analytics/components/weekly-digest/DrivingSection.test.tsx b/web/src/features/analytics/components/weekly-digest/DrivingSection.test.tsx
index 7cf7c4a4fc..19d780583a 100644
--- a/web/src/features/analytics/components/weekly-digest/DrivingSection.test.tsx
+++ b/web/src/features/analytics/components/weekly-digest/DrivingSection.test.tsx
@@ -91,27 +91,27 @@ import { formatDate } from '@/lib/dateFormat';
 import { ApiError } from '@/lib/resilience';
 
 // A fully-zeroed DigestMetrics so each test overrides only the fields the
-// driving section actually reads (avgEfficiency, prevAvgEfficiency,
-// totalDuration, totalDrives, topDrive) — the prop type demands the whole shape.
+// driving section actually reads (avgEfficiencyWhPerM,
+// prevAvgEfficiencyWhPerM, totalDurationS, totalDrives, topDrive).
 function makeMetrics(over: Partial<DigestMetrics> = {}): DigestMetrics {
   return {
-    totalDistance: 0,
-    prevDistance: 0,
+    totalDistanceM: 0,
+    prevDistanceM: 0,
     totalDrives: 0,
     prevDriveCount: 0,
-    energyUsed: 0,
-    prevEnergy: 0,
+    energyUsedWh: 0,
+    prevEnergyWh: 0,
     chargingCost: 0,
     prevChargingCost: 0,
     co2Saved: 0,
     prevCo2: 0,
-    avgEfficiency: 0,
-    prevAvgEfficiency: 0,
-    totalDuration: 0,
+    avgEfficiencyWhPerM: 0,
+    prevAvgEfficiencyWhPerM: 0,
+    totalDurationS: 0,
     topDrive: undefined,
-    chargeEnergyAdded: 0,
-    prevChargeEnergy: 0,
-    avgChargeRate: 0,
+    chargeEnergyAddedWh: 0,
+    prevChargeEnergyWh: 0,
+    avgChargePowerW: 0,
     chargingSessionCount: 0,
     batteryStart: 0,
     batteryEnd: 0,
@@ -124,11 +124,10 @@ function makeMetrics(over: Partial<DigestMetrics> = {}): DigestMetrics {
 function makeTopDrive(over: Partial<Drive> = {}): Drive {
   return {
     id: 1,
-    start_date: '2026-04-04T12:00:00Z',
-    distance: 120.6,
-    duration_min: 87,
-    efficiency_wh_km: 158.2,
-    energy_used: 19.1,
+    startTs: '2026-04-04T12:00:00Z',
+    distanceM: 120_600,
+    durationS: 5_220,
+    energyUsedWh: 19_078.92,
     ...over,
   };
 }
@@ -136,13 +135,13 @@ function makeTopDrive(over: Partial<Drive> = {}): Drive {
 // Seven weekday bins is the real shape (see useWeeklyDigest.dailyDistanceData);
 // only the total-across-days matters to `hasChart`, so a short array is enough.
 const CHART_DATA: DailyDistanceEntry[] = [
-  { day: 'Mon', distance: 10 },
-  { day: 'Tue', distance: 25 },
-  { day: 'Wed', distance: 0 },
+  { day: 'Mon', distanceM: 10_000 },
+  { day: 'Tue', distanceM: 25_000 },
+  { day: 'Wed', distanceM: 0 },
 ];
 const ZERO_CHART_DATA: DailyDistanceEntry[] = [
-  { day: 'Mon', distance: 0 },
-  { day: 'Tue', distance: 0 },
+  { day: 'Mon', distanceM: 0 },
+  { day: 'Tue', distanceM: 0 },
 ];
 
 interface RenderOverrides {
@@ -208,9 +207,9 @@ describe('DrivingSection — populated', () => {
   it('renders the labelled chart region and pins every derived stat + the top-drive card', () => {
     const { container } = renderSection(
       makeMetrics({
-        avgEfficiency: 152.4,
-        prevAvgEfficiency: 190.5, // (152.4 − 190.5) / 190.5 × 100 = −20.0
-        totalDuration: 150, // 150 min → 2h 30m
+        avgEfficiencyWhPerM: 0.1524,
+        prevAvgEfficiencyWhPerM: 0.1905,
+        totalDurationS: 9_000,
         totalDrives: 42,
         topDrive: makeTopDrive(),
       }),
@@ -226,7 +225,7 @@ describe('DrivingSection — populated', () => {
 
     // MiniStats: efficiency, h/m split, pctChange (sign preserved), fmtInt count.
     expect(screen.getByText('152.4 Wh/km')).toBeInTheDocument();
-    expect(screen.getByText('2h 30m')).toBeInTheDocument();
+    expect(screen.getByText('2.5 h')).toBeInTheDocument();
     expect(screen.getByText('-20.0%')).toBeInTheDocument();
     expect(screen.getByText('42')).toBeInTheDocument();
 
@@ -234,14 +233,14 @@ describe('DrivingSection — populated', () => {
     expect(screen.getByText('Top Drive')).toBeInTheDocument();
     expect(screen.getByText(formatDate('2026-04-04T12:00:00Z'))).toBeInTheDocument();
     expect(screen.getByText('120.6 km')).toBeInTheDocument();
-    expect(screen.getByText('87 min')).toBeInTheDocument();
+    expect(screen.getByText('1.5 h')).toBeInTheDocument();
     expect(screen.getByText('158.2 Wh/km')).toBeInTheDocument();
   });
 
   it('shows a green TrendingDown glyph when efficiency improved (lower Wh/km than last week)', () => {
-    // avgEfficiency <= prevAvgEfficiency → efficiency got better (less energy/km).
+    // Lower Wh/m means efficiency improved.
     const { container } = renderSection(
-      makeMetrics({ avgEfficiency: 150, prevAvgEfficiency: 200 }),
+      makeMetrics({ avgEfficiencyWhPerM: 0.15, prevAvgEfficiencyWhPerM: 0.2 }),
     );
 
     // pctChange((150−200)/200) = −25 → "-25.0%".
@@ -253,7 +252,7 @@ describe('DrivingSection — populated', () => {
 
   it('shows a rose TrendingUp glyph when efficiency worsened (higher Wh/km than last week)', () => {
     const { container } = renderSection(
-      makeMetrics({ avgEfficiency: 220, prevAvgEfficiency: 200 }),
+      makeMetrics({ avgEfficiencyWhPerM: 0.22, prevAvgEfficiencyWhPerM: 0.2 }),
     );
 
     // pctChange((220−200)/200) = +10 → "10.0%".
@@ -263,8 +262,7 @@ describe('DrivingSection — populated', () => {
   });
 
   it('renders an em-dash for efficiency change when there is no prior-week baseline', () => {
-    renderSection(makeMetrics({ avgEfficiency: 175, prevAvgEfficiency: 0 }));
-    // prevAvgEfficiency <= 0 → the pctChange is not meaningful, so "—".
+    renderSection(makeMetrics({ avgEfficiencyWhPerM: 0.175, prevAvgEfficiencyWhPerM: 0 }));
     expect(screen.getByText('—')).toBeInTheDocument();
     expect(screen.queryByText('0.0%')).toBeNull();
   });
@@ -319,7 +317,7 @@ describe('DrivingSection — daily-distance chart branch', () => {
 describe('DrivingSection — loading', () => {
   it('shows a skeleton (no chart, no empty copy) but keeps the title + mini-stats mounted', () => {
     const { container } = renderSection(
-      makeMetrics({ avgEfficiency: 152.4, totalDrives: 42 }),
+      makeMetrics({ avgEfficiencyWhPerM: 0.1524, totalDrives: 42 }),
       { isLoading: true },
     );
 
@@ -350,7 +348,7 @@ describe('DrivingSection — loading', () => {
 describe('DrivingSection — error + retry', () => {
   it('surfaces a retryable 5xx error in the chart slot and wires Retry to onRetry', () => {
     const onRetry = vi.fn();
-    renderSection(makeMetrics({ avgEfficiency: 152.4 }), {
+    renderSection(makeMetrics({ avgEfficiencyWhPerM: 0.1524 }), {
       isError: true,
       error: new ApiError('drives feed exploded', 500),
       onRetry,
@@ -367,7 +365,7 @@ describe('DrivingSection — error + retry', () => {
   });
 
   it('keeps the title + always-on mini-stats mounted through the error branch', () => {
-    renderSection(makeMetrics({ avgEfficiency: 152.4 }), {
+    renderSection(makeMetrics({ avgEfficiencyWhPerM: 0.1524 }), {
       isError: true,
       error: new ApiError('down', 503),
     });
@@ -390,7 +388,11 @@ describe('DrivingSection — top-drive card', () => {
   it('renders each top-drive field with its unit label when a drive is present', () => {
     renderSection(
       makeMetrics({
-        topDrive: makeTopDrive({ distance: 88.4, duration_min: 61, efficiency_wh_km: 141.7 }),
+        topDrive: makeTopDrive({
+          distanceM: 88_400,
+          durationS: 3_660,
+          energyUsedWh: 12_526.28,
+        }),
       }),
     );
 
@@ -398,7 +400,7 @@ describe('DrivingSection — top-drive card', () => {
     expect(screen.getByText('Date')).toBeInTheDocument();
     expect(screen.getByText('Duration')).toBeInTheDocument();
     expect(screen.getByText('88.4 km')).toBeInTheDocument();
-    expect(screen.getByText('61 min')).toBeInTheDocument();
+    expect(screen.getByText('1.0 h')).toBeInTheDocument();
     expect(screen.getByText('141.7 Wh/km')).toBeInTheDocument();
   });
 });
@@ -407,16 +409,15 @@ describe('DrivingSection — null safety', () => {
   it('renders zeroed stats without crashing when the numeric metric fields are undefined', () => {
     const sparse = makeMetrics();
     const holes = sparse as Record<string, unknown>;
-    holes.avgEfficiency = undefined;
-    holes.prevAvgEfficiency = undefined;
-    holes.totalDuration = undefined;
+    holes.avgEfficiencyWhPerM = undefined;
+    holes.prevAvgEfficiencyWhPerM = undefined;
+    holes.totalDurationS = undefined;
     holes.totalDrives = undefined;
 
     renderSection(sparse, { dailyDistanceData: ZERO_CHART_DATA });
 
-    // avgEfficiency ?? 0 → "0.0 Wh/km"; totalDuration ?? 0 → "0h 0m"; count → "0".
     expect(screen.getByText('0.0 Wh/km')).toBeInTheDocument();
-    expect(screen.getByText('0h 0m')).toBeInTheDocument();
+    expect(screen.getByText('0.0 h')).toBeInTheDocument();
     expect(screen.getByText('0')).toBeInTheDocument();
     // prevAvgEfficiency ?? 0 = 0 → efficiency change collapses to "—".
     expect(screen.getByText('—')).toBeInTheDocument();
@@ -425,17 +426,15 @@ describe('DrivingSection — null safety', () => {
   it('guards a present top drive whose numeric fields are undefined (zeros + em-dash date)', () => {
     const drive = makeTopDrive();
     const holes = drive as Record<string, unknown>;
-    holes.distance = undefined;
-    holes.duration_min = undefined;
-    holes.efficiency_wh_km = undefined;
-    holes.start_date = undefined;
+    holes.distanceM = undefined;
+    holes.durationS = undefined;
+    holes.energyUsedWh = undefined;
+    holes.startTs = undefined;
 
-    renderSection(makeMetrics({ topDrive: drive, avgEfficiency: 200 }));
+    renderSection(makeMetrics({ topDrive: drive, avgEfficiencyWhPerM: 0.2 }));
 
-    // distance ?? 0 → "0.0 km"; duration_min ?? 0 → "0 min"; eff ?? 0 → "0.0 Wh/km".
-    // avgEfficiency=200 keeps the stat row's "200.0 Wh/km" distinct from the card.
     expect(screen.getByText('0.0 km')).toBeInTheDocument();
-    expect(screen.getByText('0 min')).toBeInTheDocument();
+    expect(screen.getAllByText('0.0 h')).toHaveLength(2);
     expect(screen.getByText('0.0 Wh/km')).toBeInTheDocument();
     // formatDate(undefined) → "—" placeholder, never "Invalid Date".
     expect(screen.getAllByText('—').length).toBeGreaterThanOrEqual(1);
diff --git a/web/src/features/analytics/components/weekly-digest/DrivingSection.tsx b/web/src/features/analytics/components/weekly-digest/DrivingSection.tsx
index 4e17e4761f..1456c62efa 100644
--- a/web/src/features/analytics/components/weekly-digest/DrivingSection.tsx
+++ b/web/src/features/analytics/components/weekly-digest/DrivingSection.tsx
@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useUnits } from '@/hooks/useUnits';
 import { Car, BarChart3, Clock, TrendingDown, TrendingUp, Activity } from 'lucide-react';
 import { GlassPanel, Badge, PanelTitle, Text, Caption } from '@/components/ui';
 import { EmptyState, Skeleton, QueryError } from '@/components/feedback';
@@ -9,7 +11,9 @@ import {
 } from '@/components/charts';
 import { fmtNumber, fmtInt } from '@/lib/numberFormat';
 import { formatDate } from '@/lib/dateFormat';
+import { convertDistanceFromSI } from '@/lib/unitConversion';
 import { MiniStat } from './MiniStat';
+import { formatEfficiencyFromSI } from './display';
 import { pctChange } from './helpers';
 import type { DigestMetrics, DailyDistanceEntry } from './types';
 
@@ -31,8 +35,21 @@ export function DrivingSection({
   onRetry,
 }: DrivingSectionProps) {
   const { t } = useTranslation();
+  const { unitPrefs, formatDistance, formatDuration } = useUnits();
   const distanceData = dailyDistanceData ?? [];
-  const hasChart = distanceData.some((d) => (d.distance ?? 0) > 0);
+  const hasChart = distanceData.some((entry) => (entry.distanceM ?? 0) > 0);
+  const distanceChartData = useMemo(
+    () =>
+      distanceData.map((entry) => ({
+        day: entry.day,
+        distance: convertDistanceFromSI(entry.distanceM ?? 0, unitPrefs.distance),
+      })),
+    [distanceData, unitPrefs.distance],
+  );
+  const topDriveEfficiencyWhPerM =
+    metrics.topDrive && (metrics.topDrive.distanceM ?? 0) > 0
+      ? (metrics.topDrive.energyUsedWh ?? 0) / metrics.topDrive.distanceM
+      : 0;
 
   return (
     <GlassPanel className="flex h-full flex-col gap-5 p-4 sm:p-5">
@@ -44,7 +61,9 @@ export function DrivingSection({
       {/* Daily Distance bar chart */}
       <div>
         <Caption className="mb-2 block">
-          {t('analytics.weeklyDigest.dailyDistance', 'Daily Distance (km)')}
+          {t('analytics.weeklyDigest.dailyDistance', 'Daily Distance ({{unit}})', {
+            unit: unitPrefs.distance,
+          })}
         </Caption>
         {isLoading ? (
           <Skeleton height={220} />
@@ -54,10 +73,14 @@ export function DrivingSection({
           <div
             className="h-56 sm:h-64 xl:h-72"
             role="img"
-            aria-label={t('analytics.weeklyDigest.dailyDistanceChartLabel', 'Bar chart of daily driving distance in kilometres')}
+            aria-label={t(
+              'analytics.weeklyDigest.dailyDistanceChartLabel',
+              'Bar chart of daily driving distance in {{unit}}',
+              { unit: unitPrefs.distance },
+            )}
           >
             <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={distanceData} margin={chartMarginLabeled}>
+              <BarChart data={distanceChartData} margin={chartMarginLabeled}>
                 {chartGrid}
                 <XAxis dataKey="day" {...axisTickSm} />
                 <YAxis {...axisTickSm} tickFormatter={(v: number) => fmtInt(v)} />
@@ -84,23 +107,30 @@ export function DrivingSection({
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
         <MiniStat
           label={t('analytics.weeklyDigest.avgEfficiency', 'Avg Efficiency')}
-          value={`${fmtNumber(metrics.avgEfficiency ?? 0, 1)} Wh/km`}
+          value={formatEfficiencyFromSI(metrics.avgEfficiencyWhPerM ?? 0, unitPrefs)}
           icon={<BarChart3 className="h-4 w-4" />}
         />
         <MiniStat
           label={t('analytics.weeklyDigest.totalDrivingTime', 'Total Driving Time')}
-          value={`${fmtInt(Math.floor((metrics.totalDuration ?? 0) / 60))}h ${fmtInt((metrics.totalDuration ?? 0) % 60)}m`}
+          value={formatDuration(metrics.totalDurationS ?? 0, { precision: 1 })}
           icon={<Clock className="h-4 w-4" />}
         />
         <MiniStat
           label={t('analytics.weeklyDigest.efficiencyChange', 'Efficiency Change')}
           value={
-            (metrics.prevAvgEfficiency ?? 0) > 0
-              ? `${fmtNumber(pctChange(metrics.avgEfficiency ?? 0, metrics.prevAvgEfficiency ?? 0), 1)}%`
+            (metrics.prevAvgEfficiencyWhPerM ?? 0) > 0
+              ? `${fmtNumber(
+                  pctChange(
+                    metrics.avgEfficiencyWhPerM ?? 0,
+                    metrics.prevAvgEfficiencyWhPerM ?? 0,
+                  ),
+                  1,
+                )}%`
               : '—'
           }
           icon={
-            (metrics.avgEfficiency ?? 0) <= (metrics.prevAvgEfficiency ?? 0) ? (
+            (metrics.avgEfficiencyWhPerM ?? 0) <=
+            (metrics.prevAvgEfficiencyWhPerM ?? 0) ? (
               <TrendingDown className="h-4 w-4 text-emerald-300" />
             ) : (
               <TrendingUp className="h-4 w-4 text-rose-300" />
@@ -125,25 +155,25 @@ export function DrivingSection({
               <div className="flex min-w-0 flex-col">
                 <Caption>{t('analytics.weeklyDigest.date', 'Date')}</Caption>
                 <Text size="sm" weight="semibold" color="primary" className="truncate">
-                  {formatDate(metrics.topDrive.start_date)}
+                {formatDate(metrics.topDrive.startTs)}
                 </Text>
               </div>
               <div className="flex min-w-0 flex-col">
                 <Caption>{t('analytics.weeklyDigest.distance', 'Distance')}</Caption>
                 <Text size="sm" weight="semibold" color="primary" className="truncate">
-                  {fmtNumber(metrics.topDrive.distance ?? 0, 1)} km
+                  {formatDistance(metrics.topDrive.distanceM ?? 0, { precision: 1 })}
                 </Text>
               </div>
               <div className="flex min-w-0 flex-col">
                 <Caption>{t('analytics.weeklyDigest.duration', 'Duration')}</Caption>
                 <Text size="sm" weight="semibold" color="primary" className="truncate">
-                  {fmtInt(metrics.topDrive.duration_min ?? 0)} min
+                  {formatDuration(metrics.topDrive.durationS ?? 0, { precision: 1 })}
                 </Text>
               </div>
               <div className="flex min-w-0 flex-col">
                 <Caption>{t('analytics.weeklyDigest.efficiency', 'Efficiency')}</Caption>
                 <Text size="sm" weight="semibold" color="primary" className="truncate">
-                  {fmtNumber(metrics.topDrive.efficiency_wh_km ?? 0, 1)} Wh/km
+                  {formatEfficiencyFromSI(topDriveEfficiencyWhPerM, unitPrefs)}
                 </Text>
               </div>
             </div>
diff --git a/web/src/features/analytics/components/weekly-digest/MiniStat.tsx b/web/src/features/analytics/components/weekly-digest/MiniStat.tsx
index 0c7bbd3454..45d217648d 100644
--- a/web/src/features/analytics/components/weekly-digest/MiniStat.tsx
+++ b/web/src/features/analytics/components/weekly-digest/MiniStat.tsx
@@ -12,7 +12,7 @@ interface MiniStatProps {
 export function MiniStat({ label, value, icon, className }: MiniStatProps) {
   // Guard against a nullish `value` leaking the literal string "undefined" /
   // "null" as the headline figure: callers derive it from optional telemetry
-  // (e.g. `fmtNumber(metrics.avgEfficiency ?? 0)`), and a missing metric that
+  // (e.g. `formatEfficiency(metrics.avgEfficiencyWhPerM ?? 0)`), and a missing metric that
   // slips past those guards would otherwise be stringified verbatim.
   const displayValue = String(value ?? '—');
   return (
diff --git a/web/src/features/analytics/components/weekly-digest/SummaryHeroCards.test.tsx b/web/src/features/analytics/components/weekly-digest/SummaryHeroCards.test.tsx
index b4ac7c951f..f3bfd627bc 100644
--- a/web/src/features/analytics/components/weekly-digest/SummaryHeroCards.test.tsx
+++ b/web/src/features/analytics/components/weekly-digest/SummaryHeroCards.test.tsx
@@ -75,23 +75,23 @@ vi.mock('@/hooks/useFormatting', () => ({
 // ── Fixtures ────────────────────────────────────────────────────────────────
 
 const baseMetrics: DigestMetrics = {
-  totalDistance: 0,
-  prevDistance: 0,
+  totalDistanceM: 0,
+  prevDistanceM: 0,
   totalDrives: 0,
   prevDriveCount: 0,
-  energyUsed: 0,
-  prevEnergy: 0,
+  energyUsedWh: 0,
+  prevEnergyWh: 0,
   chargingCost: 0,
   prevChargingCost: 0,
   co2Saved: 0,
   prevCo2: 0,
-  avgEfficiency: 0,
-  prevAvgEfficiency: 0,
-  totalDuration: 0,
+  avgEfficiencyWhPerM: 0,
+  prevAvgEfficiencyWhPerM: 0,
+  totalDurationS: 0,
   topDrive: undefined,
-  chargeEnergyAdded: 0,
-  prevChargeEnergy: 0,
-  avgChargeRate: 0,
+  chargeEnergyAddedWh: 0,
+  prevChargeEnergyWh: 0,
+  avgChargePowerW: 0,
   chargingSessionCount: 0,
   batteryStart: 0,
   batteryEnd: 0,
@@ -114,12 +114,12 @@ function makeMetrics(overrides: Partial<DigestMetrics> = {}): DigestMetrics {
  */
 function populatedMetrics(): DigestMetrics {
   return makeMetrics({
-    totalDistance: 120,
-    prevDistance: 100,
+    totalDistanceM: 120_000,
+    prevDistanceM: 100_000,
     totalDrives: 8,
     prevDriveCount: 10,
-    energyUsed: 200,
-    prevEnergy: 100,
+    energyUsedWh: 200_000,
+    prevEnergyWh: 100_000,
     chargingCost: 12.5,
     prevChargingCost: 12.5,
     co2Saved: 42,
@@ -313,14 +313,14 @@ describe('SummaryHeroCards — null-safety hardening', () => {
   it('coalesces undefined metric fields to 0 instead of throwing', () => {
     const sparse = {
       ...baseMetrics,
-      totalDistance: undefined,
+      totalDistanceM: undefined,
       totalDrives: undefined,
-      energyUsed: undefined,
+      energyUsedWh: undefined,
       chargingCost: undefined,
       co2Saved: undefined,
-      prevDistance: undefined,
+      prevDistanceM: undefined,
       prevDriveCount: undefined,
-      prevEnergy: undefined,
+      prevEnergyWh: undefined,
       prevChargingCost: undefined,
       prevCo2: undefined,
     } as unknown as DigestMetrics;
diff --git a/web/src/features/analytics/components/weekly-digest/SummaryHeroCards.tsx b/web/src/features/analytics/components/weekly-digest/SummaryHeroCards.tsx
index fc7895fe42..51eee2beb7 100644
--- a/web/src/features/analytics/components/weekly-digest/SummaryHeroCards.tsx
+++ b/web/src/features/analytics/components/weekly-digest/SummaryHeroCards.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useFormatting } from '@/hooks/useFormatting';
+import { useUnits } from '@/hooks/useUnits';
 import { Car, Activity, Zap, Fuel, Leaf, MapPin } from 'lucide-react';
 import { SectionTitle, GlassPanel } from '@/components/ui';
 import { Skeleton, QueryError } from '@/components/feedback';
@@ -29,6 +30,7 @@ export function SummaryHeroCards({
 }: SummaryHeroCardsProps) {
   const { t } = useTranslation();
   const { formatCurrency } = useFormatting();
+  const { formatDistance, formatEnergy } = useUnits();
 
   return (
     <section
@@ -54,8 +56,8 @@ export function SummaryHeroCards({
           <HighlightCard
             icon={<Car className="h-5 w-5" />}
             label={t('analytics.weeklyDigest.totalDistance', 'Total Distance')}
-            value={`${fmtNumber(metrics.totalDistance ?? 0, 1)} km`}
-            change={trendFor(metrics.totalDistance ?? 0, metrics.prevDistance ?? 0)}
+            value={formatDistance(metrics.totalDistanceM ?? 0, { precision: 1 })}
+            change={trendFor(metrics.totalDistanceM ?? 0, metrics.prevDistanceM ?? 0)}
             color="cyan"
           />
           <HighlightCard
@@ -68,8 +70,8 @@ export function SummaryHeroCards({
           <HighlightCard
             icon={<Zap className="h-5 w-5" />}
             label={t('analytics.weeklyDigest.energyUsed', 'Energy Used')}
-            value={`${fmtNumber(metrics.energyUsed ?? 0, 1)} kWh`}
-            change={trendFor(metrics.energyUsed ?? 0, metrics.prevEnergy ?? 0, true)}
+            value={formatEnergy(metrics.energyUsedWh ?? 0, { precision: 1 })}
+            change={trendFor(metrics.energyUsedWh ?? 0, metrics.prevEnergyWh ?? 0, true)}
             color="purple"
           />
           <HighlightCard
diff --git a/web/src/features/analytics/components/weekly-digest/WeekOverWeekSummary.test.tsx b/web/src/features/analytics/components/weekly-digest/WeekOverWeekSummary.test.tsx
index 131b63a3b3..f96408ed09 100644
--- a/web/src/features/analytics/components/weekly-digest/WeekOverWeekSummary.test.tsx
+++ b/web/src/features/analytics/components/weekly-digest/WeekOverWeekSummary.test.tsx
@@ -24,13 +24,7 @@
  *   - a11y: the `<section>` is exposed as a labelled region and the six leading
  *     stat icons are decorative (`aria-hidden`).
  *
- * Deliberately NOT tested here: SI→display unit conversion. `totalDistance`
- * (m), `energyUsed` (Wh) and `avgEfficiency` are rendered with the SAME raw
- * "km" / "kWh" / "Wh/km" labels by the (still-untested) sibling components
- * SummaryHeroCards and DrivingSection. Converting them in this file alone would
- * make the same page disagree with itself, so the driving-metrics SI port is a
- * cross-component effort left to its own slice — this elevation preserves the
- * shared display contract.
+ * SI values are converted through `useUnits()` at the render boundary.
  *
  * Conventions (mirror ChargingSection.test.tsx in this folder):
  *   - `react-i18next` is stubbed to echo the inline English fallback;
@@ -65,23 +59,23 @@ vi.mock('react-i18next', async () => {
 /* ── Fixtures ─────────────────────────────────────────────────────────────── */
 function baseMetrics(overrides: Partial<DigestMetrics> = {}): DigestMetrics {
   return {
-    totalDistance: 0,
-    prevDistance: 0,
+    totalDistanceM: 0,
+    prevDistanceM: 0,
     totalDrives: 0,
     prevDriveCount: 0,
-    energyUsed: 0,
-    prevEnergy: 0,
+    energyUsedWh: 0,
+    prevEnergyWh: 0,
     chargingCost: 0,
     prevChargingCost: 0,
     co2Saved: 0,
     prevCo2: 0,
-    avgEfficiency: 0,
-    prevAvgEfficiency: 0,
-    totalDuration: 0,
+    avgEfficiencyWhPerM: 0,
+    prevAvgEfficiencyWhPerM: 0,
+    totalDurationS: 0,
     topDrive: undefined,
-    chargeEnergyAdded: 0,
-    prevChargeEnergy: 0,
-    avgChargeRate: 0,
+    chargeEnergyAddedWh: 0,
+    prevChargeEnergyWh: 0,
+    avgChargePowerW: 0,
     chargingSessionCount: 0,
     batteryStart: 0,
     batteryEnd: 0,
@@ -94,16 +88,16 @@ function baseMetrics(overrides: Partial<DigestMetrics> = {}): DigestMetrics {
 // A populated week whose six trend percentages are all distinct, so each card's
 // trend badge can be selected unambiguously by its signed-percentage text.
 const POPULATED: Partial<DigestMetrics> = {
-  totalDistance: 130,
-  prevDistance: 100, // +30.0% — up, not inverted → green ↑
+  totalDistanceM: 130_000,
+  prevDistanceM: 100_000, // +30.0% — up, not inverted → green ↑
   totalDrives: 10,
   prevDriveCount: 8, // +25.0% — up → green ↑
-  energyUsed: 55,
-  prevEnergy: 40, // +37.5% — up, inverted → red ↑
+  energyUsedWh: 55_000,
+  prevEnergyWh: 40_000, // +37.5% — up, inverted → red ↑
   chargingCost: 12,
   prevChargingCost: 10, // +20.0% — up, inverted → red ↑
-  avgEfficiency: 140,
-  prevAvgEfficiency: 160, // -12.5% — down, inverted → green ↓
+  avgEfficiencyWhPerM: 0.14,
+  prevAvgEfficiencyWhPerM: 0.16, // -12.5% — down, inverted → green ↓
   co2Saved: 8,
   prevCo2: 5, // +60.0% — up → green ↑
 };
@@ -154,12 +148,9 @@ describe('WeekOverWeekSummary — populated rendering', () => {
   it('formats each metric value with its unit suffix', () => {
     renderSummary({ metrics: POPULATED });
 
-    expect(screen.getByText('130.0')).toBeInTheDocument();
-    expect(screen.getByText('km')).toBeInTheDocument();
-    expect(screen.getByText('55.0')).toBeInTheDocument();
-    expect(screen.getByText('kWh')).toBeInTheDocument();
-    expect(screen.getByText('140.0')).toBeInTheDocument();
-    expect(screen.getByText('Wh/km')).toBeInTheDocument();
+    expect(screen.getByText('130.0 km')).toBeInTheDocument();
+    expect(screen.getByText('55.0 kWh')).toBeInTheDocument();
+    expect(screen.getByText('140.0 Wh/km')).toBeInTheDocument();
     expect(screen.getByText('8.0')).toBeInTheDocument();
     expect(screen.getByText('kg')).toBeInTheDocument();
   });
@@ -215,9 +206,9 @@ describe('WeekOverWeekSummary — trend direction + positivity', () => {
 
   it('renders a flat 0% trend with an em-dash arrow for an unchanged metric', () => {
     // Distance is unchanged (100 vs 100); every other metric is 0 vs 0 — all flat.
-    renderSummary({ metrics: { totalDistance: 100, prevDistance: 100 } });
+    renderSummary({ metrics: { totalDistanceM: 100_000, prevDistanceM: 100_000 } });
 
-    expect(screen.getByText('100.0')).toBeInTheDocument();
+    expect(screen.getByText('100.0 km')).toBeInTheDocument();
     expect(screen.getAllByText('0%')).toHaveLength(6);
     expect(screen.getAllByText('\u2014')).toHaveLength(6); // — flat arrows
   });
@@ -227,16 +218,16 @@ describe('WeekOverWeekSummary — trend direction + positivity', () => {
 describe('WeekOverWeekSummary — null-safety', () => {
   it('defaults undefined metric fields to zeroed values without crashing', () => {
     const undefinedMetrics: Partial<DigestMetrics> = {
-      totalDistance: undefined,
-      prevDistance: undefined,
+      totalDistanceM: undefined,
+      prevDistanceM: undefined,
       totalDrives: undefined,
       prevDriveCount: undefined,
-      energyUsed: undefined,
-      prevEnergy: undefined,
+      energyUsedWh: undefined,
+      prevEnergyWh: undefined,
       chargingCost: undefined,
       prevChargingCost: undefined,
-      avgEfficiency: undefined,
-      prevAvgEfficiency: undefined,
+      avgEfficiencyWhPerM: undefined,
+      prevAvgEfficiencyWhPerM: undefined,
       co2Saved: undefined,
       prevCo2: undefined,
     };
@@ -245,8 +236,10 @@ describe('WeekOverWeekSummary — null-safety', () => {
 
     // Labels still render — the panel is never blank.
     expect(screen.getByText('Distance')).toBeInTheDocument();
-    // Distance / Energy / Efficiency / CO₂ all degrade to "0.0".
-    expect(screen.getAllByText('0.0')).toHaveLength(4);
+    expect(screen.getByText('0.0 km')).toBeInTheDocument();
+    expect(screen.getByText('0.0 kWh')).toBeInTheDocument();
+    expect(screen.getByText('0.0 Wh/km')).toBeInTheDocument();
+    expect(screen.getByText('0.0')).toBeInTheDocument();
     // Drives → fmtInt(0) → "0"; Cost → formatCurrency(0) → "$0.00".
     expect(screen.getByText('0')).toBeInTheDocument();
     expect(screen.getByText('$0.00')).toBeInTheDocument();
diff --git a/web/src/features/analytics/components/weekly-digest/WeekOverWeekSummary.tsx b/web/src/features/analytics/components/weekly-digest/WeekOverWeekSummary.tsx
index 588820fbc0..7510352b6d 100644
--- a/web/src/features/analytics/components/weekly-digest/WeekOverWeekSummary.tsx
+++ b/web/src/features/analytics/components/weekly-digest/WeekOverWeekSummary.tsx
@@ -1,11 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import { useFormatting } from '@/hooks/useFormatting';
+import { useUnits } from '@/hooks/useUnits';
 import { Car, Activity, Zap, Fuel, BarChart3, Leaf } from 'lucide-react';
 import { SectionTitle, GlassPanel } from '@/components/ui';
 import { StatCard } from '@/components/data-display';
 import { QueryError } from '@/components/feedback';
 import { fmtNumber, fmtInt } from '@/lib/numberFormat';
 import { trendFor } from './helpers';
+import { formatEfficiencyFromSI } from './display';
 import type { DigestMetrics } from './types';
 
 interface WeekOverWeekSummaryProps {
@@ -25,6 +27,7 @@ export function WeekOverWeekSummary({
 }: WeekOverWeekSummaryProps) {
   const { t } = useTranslation();
   const { formatCurrency } = useFormatting();
+  const { unitPrefs, formatDistance, formatEnergy } = useUnits();
 
   return (
     <section
@@ -43,10 +46,9 @@ export function WeekOverWeekSummary({
           <StatCard
             loading={isLoading}
             label={t('analytics.weeklyDigest.distance', 'Distance')}
-            value={fmtNumber(metrics.totalDistance ?? 0, 1)}
-            unit="km"
+            value={formatDistance(metrics.totalDistanceM ?? 0, { precision: 1 })}
             icon={<Car className="h-4 w-4" aria-hidden="true" />}
-            trend={trendFor(metrics.totalDistance ?? 0, metrics.prevDistance ?? 0)}
+            trend={trendFor(metrics.totalDistanceM ?? 0, metrics.prevDistanceM ?? 0)}
           />
           <StatCard
             loading={isLoading}
@@ -58,10 +60,9 @@ export function WeekOverWeekSummary({
           <StatCard
             loading={isLoading}
             label={t('analytics.weeklyDigest.energy', 'Energy')}
-            value={fmtNumber(metrics.energyUsed ?? 0, 1)}
-            unit="kWh"
+            value={formatEnergy(metrics.energyUsedWh ?? 0, { precision: 1 })}
             icon={<Zap className="h-4 w-4" aria-hidden="true" />}
-            trend={trendFor(metrics.energyUsed ?? 0, metrics.prevEnergy ?? 0, true)}
+            trend={trendFor(metrics.energyUsedWh ?? 0, metrics.prevEnergyWh ?? 0, true)}
           />
           <StatCard
             loading={isLoading}
@@ -73,10 +74,13 @@ export function WeekOverWeekSummary({
           <StatCard
             loading={isLoading}
             label={t('analytics.weeklyDigest.efficiency', 'Efficiency')}
-            value={fmtNumber(metrics.avgEfficiency ?? 0, 1)}
-            unit="Wh/km"
+            value={formatEfficiencyFromSI(metrics.avgEfficiencyWhPerM ?? 0, unitPrefs)}
             icon={<BarChart3 className="h-4 w-4" aria-hidden="true" />}
-            trend={trendFor(metrics.avgEfficiency ?? 0, metrics.prevAvgEfficiency ?? 0, true)}
+            trend={trendFor(
+              metrics.avgEfficiencyWhPerM ?? 0,
+              metrics.prevAvgEfficiencyWhPerM ?? 0,
+              true,
+            )}
           />
           <StatCard
             loading={isLoading}
diff --git a/web/src/features/analytics/components/weekly-digest/WeekSelector.test.tsx b/web/src/features/analytics/components/weekly-digest/WeekSelector.test.tsx
index c988d456c0..4d1bcfb844 100644
--- a/web/src/features/analytics/components/weekly-digest/WeekSelector.test.tsx
+++ b/web/src/features/analytics/components/weekly-digest/WeekSelector.test.tsx
@@ -23,7 +23,7 @@
  *   6. A11Y        — the icon-only-on-mobile buttons expose real text accessible
  *                    names via aria-label, the calendar glyph is decorative
  *                    (aria-hidden), and the label is never hidden from AT.
- *   7. KEYBOARD    — Previous is a genuine native <button>, so it is focusable
+ *   7. KEYBOARD    — Previous is a genuine native button, so it is focusable
  *                    and keyboard-operable (Enter/Space) out of the box.
  *   8. HARDENING   — an empty label degrades to an em-dash placeholder instead of
  *                    collapsing the band into a blank strip.
@@ -142,7 +142,7 @@ describe('WeekSelector', () => {
     setup();
 
     const prev = prevButton();
-    // Native <button> semantics guarantee Enter/Space activation + tab focus.
+    // Native button semantics guarantee Enter/Space activation + tab focus.
     expect(prev.tagName).toBe('BUTTON');
     prev.focus();
     expect(prev).toHaveFocus();
diff --git a/web/src/features/analytics/components/weekly-digest/constants.test.ts b/web/src/features/analytics/components/weekly-digest/constants.test.ts
index f43b27fd47..373dd9df57 100644
--- a/web/src/features/analytics/components/weekly-digest/constants.test.ts
+++ b/web/src/features/analytics/components/weekly-digest/constants.test.ts
@@ -68,10 +68,10 @@ describe('DAY_LABELS', () => {
   });
 
   it('maps to one zeroed bin per weekday in order (digest binning shape)', () => {
-    const bins = DAY_LABELS.map((day) => ({ day, distance: 0 }));
+    const bins = DAY_LABELS.map((day) => ({ day, distanceM: 0 }));
     expect(bins).toHaveLength(7);
     expect(bins.map((b) => b.day)).toEqual([...DAY_LABELS]);
-    expect(bins.every((b) => b.distance === 0)).toBe(true);
+    expect(bins.every((b) => b.distanceM === 0)).toBe(true);
   });
 
   it('is a frozen singleton that rejects mutation', () => {
diff --git a/web/src/features/analytics/components/weekly-digest/display.ts b/web/src/features/analytics/components/weekly-digest/display.ts
new file mode 100644
index 0000000000..3f38957b9e
--- /dev/null
+++ b/web/src/features/analytics/components/weekly-digest/display.ts
@@ -0,0 +1,17 @@
+import { fmtNumber } from '@/lib/numberFormat';
+import { convertDistanceToSI, type UnitPref } from '@/lib/unitConversion';
+
+export function formatEfficiencyFromSI(
+  valueWhPerM: number | null | undefined,
+  unitPrefs: UnitPref,
+  precision = 1,
+): string {
+  if (valueWhPerM == null || !Number.isFinite(valueWhPerM)) return '—';
+  const whPerDisplayDistance =
+    valueWhPerM * convertDistanceToSI(1, unitPrefs.distance);
+  return `${fmtNumber(
+    whPerDisplayDistance,
+    precision,
+    unitPrefs.locale,
+  )} Wh/${unitPrefs.distance}`;
+}
diff --git a/web/src/features/analytics/components/weekly-digest/types.test.ts b/web/src/features/analytics/components/weekly-digest/types.test.ts
index 2d21054497..0bbe22efb0 100644
--- a/web/src/features/analytics/components/weekly-digest/types.test.ts
+++ b/web/src/features/analytics/components/weekly-digest/types.test.ts
@@ -77,35 +77,35 @@ const mockedRequest = request as unknown as ReturnType<typeof vi.fn>;
 
 function assertDriveShape(d: Drive): void {
   expect(typeof d.id).toBe('number');
-  expect(typeof d.start_date).toBe('string');
-  expect(typeof d.distance).toBe('number');
-  expect(typeof d.duration_min).toBe('number');
-  expect(typeof d.efficiency_wh_km).toBe('number');
-  expect(typeof d.energy_used).toBe('number');
+  expect(typeof d.startTs).toBe('string');
+  expect(typeof d.distanceM).toBe('number');
+  expect(typeof d.durationS).toBe('number');
+  expect(typeof d.energyUsedWh).toBe('number');
 }
 
 function assertChargingSessionShape(c: ChargingSession): void {
   expect(typeof c.id).toBe('number');
-  expect(typeof c.start_ts).toBe('string');
+  expect(typeof c.started_at).toBe('string');
+  expect(typeof c.ended_at).toBe('string');
   expect(typeof c.total_energy_added_wh).toBe('number');
-  expect(typeof c.cost).toBe('number');
-  expect(typeof c.duration_min).toBe('number');
-  expect(typeof c.start_battery_pct).toBe('number');
-  expect(typeof c.end_battery_pct).toBe('number');
+  expect(typeof c.cost_decimal).toBe('number');
+  expect(typeof c.start_soc_pct).toBe('number');
+  expect(typeof c.end_soc_pct).toBe('number');
 }
 
 function assertAlertShape(a: Alert): void {
   expect(typeof a.id).toBe('number');
+  expect(typeof a.vehicle_id).toBe('number');
   expect(typeof a.severity).toBe('string');
   expect(typeof a.created_at).toBe('string');
 }
 
 function assertDigestMetricsShape(m: DigestMetrics): void {
   const numericKeys: Array<keyof DigestMetrics> = [
-    'totalDistance', 'prevDistance', 'totalDrives', 'prevDriveCount',
-    'energyUsed', 'prevEnergy', 'chargingCost', 'prevChargingCost',
-    'co2Saved', 'prevCo2', 'avgEfficiency', 'prevAvgEfficiency',
-    'totalDuration', 'chargeEnergyAdded', 'prevChargeEnergy', 'avgChargeRate',
+    'totalDistanceM', 'prevDistanceM', 'totalDrives', 'prevDriveCount',
+    'energyUsedWh', 'prevEnergyWh', 'chargingCost', 'prevChargingCost',
+    'co2Saved', 'prevCo2', 'avgEfficiencyWhPerM', 'prevAvgEfficiencyWhPerM',
+    'totalDurationS', 'chargeEnergyAddedWh', 'prevChargeEnergyWh', 'avgChargePowerW',
     'chargingSessionCount', 'batteryStart', 'batteryEnd', 'alertTotal',
   ];
   for (const key of numericKeys) {
@@ -126,12 +126,12 @@ function assertFunFactShape(f: FunFact): void {
 
 function assertDailyDistanceEntryShape(e: DailyDistanceEntry): void {
   expect(typeof e.day).toBe('string');
-  expect(typeof e.distance).toBe('number');
+  expect(typeof e.distanceM).toBe('number');
 }
 
 function assertDailyEnergyEntryShape(e: DailyEnergyEntry): void {
   expect(typeof e.day).toBe('string');
-  expect(typeof e.energy).toBe('number');
+  expect(typeof e.energyWh).toBe('number');
 }
 
 function assertAlertPieEntryShape(e: AlertPieEntry): void {
@@ -203,21 +203,21 @@ function renderDigest() {
  */
 function populatedNetwork(a: WeekAnchors): Network {
   const drives: Drive[] = [
-    { id: 2, start_date: a.thisWed, distance: 50, duration_min: 30, efficiency_wh_km: 200, energy_used: 10 },
-    { id: 1, start_date: a.thisMon, distance: 100, duration_min: 60, efficiency_wh_km: 150, energy_used: 15 },
-    { id: 3, start_date: a.lastWeek, distance: 80, duration_min: 40, efficiency_wh_km: 180, energy_used: 12 },
-    { id: 4, start_date: a.longAgo, distance: 999, duration_min: 99, efficiency_wh_km: 999, energy_used: 99 },
+    { id: 2, startTs: a.thisWed, distanceM: 50_000, durationS: 1_800, energyUsedWh: 10_000 },
+    { id: 1, startTs: a.thisMon, distanceM: 100_000, durationS: 3_600, energyUsedWh: 15_000 },
+    { id: 3, startTs: a.lastWeek, distanceM: 80_000, durationS: 2_400, energyUsedWh: 12_000 },
+    { id: 4, startTs: a.longAgo, distanceM: 999_000, durationS: 5_940, energyUsedWh: 99_000 },
   ];
   const charging: ChargingSession[] = [
-    { id: 11, start_ts: a.thisMon, total_energy_added_wh: 20, cost: 5, duration_min: 60, start_battery_pct: 20, end_battery_pct: 60 },
-    { id: 12, start_ts: a.thisWed, total_energy_added_wh: 30, cost: 8, duration_min: 30, start_battery_pct: 40, end_battery_pct: 80 },
-    { id: 13, start_ts: a.lastWeek, total_energy_added_wh: 10, cost: 3, duration_min: 20, start_battery_pct: 10, end_battery_pct: 30 },
+    { id: 11, started_at: a.thisMon, ended_at: new Date(Date.parse(a.thisMon) + HOUR_MS).toISOString(), total_energy_added_wh: 20_000, cost_decimal: 5, avg_power_w: null, start_soc_pct: 20, end_soc_pct: 60 },
+    { id: 12, started_at: a.thisWed, ended_at: new Date(Date.parse(a.thisWed) + 30 * 60_000).toISOString(), total_energy_added_wh: 30_000, cost_decimal: 8, avg_power_w: null, start_soc_pct: 40, end_soc_pct: 80 },
+    { id: 13, started_at: a.lastWeek, ended_at: new Date(Date.parse(a.lastWeek) + 20 * 60_000).toISOString(), total_energy_added_wh: 10_000, cost_decimal: 3, avg_power_w: null, start_soc_pct: 10, end_soc_pct: 30 },
   ];
   const alerts: Alert[] = [
-    { id: 21, severity: 'warning', created_at: a.thisMon },
-    { id: 22, severity: 'warning', created_at: a.thisWed },
-    { id: 23, severity: 'critical', created_at: a.thisMon },
-    { id: 24, severity: 'info', created_at: a.lastWeek }, // prior week → excluded
+    { id: 21, vehicle_id: 7, severity: 'warning', created_at: a.thisMon },
+    { id: 22, vehicle_id: 7, severity: 'warning', created_at: a.thisWed },
+    { id: 23, vehicle_id: 7, severity: 'critical', created_at: a.thisMon },
+    { id: 24, vehicle_id: 7, severity: 'info', created_at: a.lastWeek },
   ];
   return { drives, charging, alerts };
 }
@@ -257,29 +257,27 @@ describe('useWeeklyDigest → DigestMetrics (the derived aggregate contract)', (
     assertDigestMetricsShape(m);
 
     // Distance / drives / energy for THIS week (drives 1 + 2).
-    expect(m.totalDistance).toBe(150);
-    expect(m.energyUsed).toBe(25);
-    expect(m.totalDuration).toBe(90);
-    // Efficiency is the simple mean of the two per-drive efficiencies.
-    expect(m.avgEfficiency).toBeCloseTo(175, 6);
+    expect(m.totalDistanceM).toBe(150_000);
+    expect(m.energyUsedWh).toBe(25_000);
+    expect(m.totalDurationS).toBe(5_400);
+    expect(m.avgEfficiencyWhPerM).toBeCloseTo(1 / 6, 6);
     // CO₂ scales linearly with energy via the shared constant.
     expect(m.co2Saved).toBeCloseTo(25 * CO2_PER_KWH_GASOLINE_KG, 6);
 
     // Prior-week baselines (drive 3 / session 13) — never mixed with this week.
-    expect(m.prevDistance).toBe(80);
+    expect(m.prevDistanceM).toBe(80_000);
     expect(m.prevDriveCount).toBe(1);
-    expect(m.prevEnergy).toBe(12);
-    expect(m.prevAvgEfficiency).toBeCloseTo(180, 6);
+    expect(m.prevEnergyWh).toBe(12_000);
+    expect(m.prevAvgEfficiencyWhPerM).toBeCloseTo(0.15, 6);
     expect(m.prevChargingCost).toBe(3);
-    expect(m.prevChargeEnergy).toBe(10);
+    expect(m.prevChargeEnergyWh).toBe(10_000);
 
     // Charging aggregates.
     expect(m.chargingCost).toBe(13);
-    expect(m.chargeEnergyAdded).toBe(50);
+    expect(m.chargeEnergyAddedWh).toBe(50_000);
     expect(m.batteryStart).toBeCloseTo(30, 6); // (20 + 40) / 2
     expect(m.batteryEnd).toBeCloseTo(70, 6); // (60 + 80) / 2
-    // Rate = mean of (energy / minutes * 60): (20 + 60) / 2.
-    expect(m.avgChargeRate).toBeCloseTo(40, 5);
+    expect(m.avgChargePowerW).toBeCloseTo(40_000, 5);
   });
 
   it('selects the longest drive of the week as topDrive (max by distance, not first seen)', async () => {
@@ -294,7 +292,7 @@ describe('useWeeklyDigest → DigestMetrics (the derived aggregate contract)', (
     assertDriveShape(top as Drive);
     // Drive #1 (100 km) is second in the input array but must win over #2 (50 km).
     expect(top?.id).toBe(1);
-    expect(top?.distance).toBe(100);
+    expect(top?.distanceM).toBe(100_000);
   });
 
   it('buckets alerts by severity and totals them (prior-week alerts excluded)', async () => {
@@ -317,7 +315,7 @@ describe('useWeeklyDigest → chart series (Daily* + AlertPieEntry contracts)',
     primeNetwork(populatedNetwork(a));
     const { result } = renderDigest();
 
-    await waitFor(() => expect(result.current.metrics.totalDistance).toBe(150));
+    await waitFor(() => expect(result.current.metrics.totalDistanceM).toBe(150_000));
 
     const { dailyDistanceData, dailyEnergyData } = result.current;
     // Exactly one bucket per weekday label, in DAY_LABELS order.
@@ -329,13 +327,13 @@ describe('useWeeklyDigest → chart series (Daily* + AlertPieEntry contracts)',
 
     const monIdx = dayOfWeekIndex(a.thisMon); // 0
     const wedIdx = dayOfWeekIndex(a.thisWed); // 2
-    expect(dailyDistanceData[monIdx].distance).toBe(100);
-    expect(dailyDistanceData[wedIdx].distance).toBe(50);
-    expect(dailyEnergyData[monIdx].energy).toBe(20);
-    expect(dailyEnergyData[wedIdx].energy).toBe(30);
+    expect(dailyDistanceData[monIdx].distanceM).toBe(100_000);
+    expect(dailyDistanceData[wedIdx].distanceM).toBe(50_000);
+    expect(dailyEnergyData[monIdx].energyWh).toBe(20_000);
+    expect(dailyEnergyData[wedIdx].energyWh).toBe(30_000);
     // Series total reconciles with the aggregate metric.
-    expect(dailyDistanceData.reduce((s, e) => s + e.distance, 0)).toBe(150);
-    expect(dailyEnergyData.reduce((s, e) => s + e.energy, 0)).toBe(50);
+    expect(dailyDistanceData.reduce((s, e) => s + e.distanceM, 0)).toBe(150_000);
+    expect(dailyEnergyData.reduce((s, e) => s + e.energyWh, 0)).toBe(50_000);
   });
 
   it('maps alert buckets to labelled, coloured pie slices via ALERT_SEVERITY_COLORS', async () => {
@@ -382,7 +380,7 @@ describe('useWeeklyDigest — empty + null-safety guards', () => {
 
     const m = result.current.metrics;
     assertDigestMetricsShape(m); // includes the "no NaN" invariant
-    expect(m.totalDistance).toBe(0);
+    expect(m.totalDistanceM).toBe(0);
     expect(m.chargingSessionCount).toBe(0);
     expect(m.alertTotal).toBe(0);
     expect(m.topDrive).toBeUndefined();
@@ -390,7 +388,7 @@ describe('useWeeklyDigest — empty + null-safety guards', () => {
 
     // Chart series stay well-formed (seven zeroed distance/energy buckets).
     expect(result.current.dailyDistanceData).toHaveLength(7);
-    expect(result.current.dailyDistanceData.every((e) => e.distance === 0)).toBe(true);
+    expect(result.current.dailyDistanceData.every((e) => e.distanceM === 0)).toBe(true);
     expect(result.current.alertPieData).toEqual([]);
     // Below the 10 km floor → no headline.
     expect(result.current.funFact).toBeUndefined();
@@ -407,7 +405,7 @@ describe('useWeeklyDigest — empty + null-safety guards', () => {
     const m = result.current.metrics;
     assertDigestMetricsShape(m);
     expect(m.totalDrives).toBe(0);
-    expect(m.chargeEnergyAdded).toBe(0);
+    expect(m.chargeEnergyAddedWh).toBe(0);
     expect(m.alertTotal).toBe(0);
     expect(result.current.dailyEnergyData).toHaveLength(7);
     expect(result.current.hasData).toBe(false);
diff --git a/web/src/features/analytics/components/weekly-digest/types.ts b/web/src/features/analytics/components/weekly-digest/types.ts
index 05f611f7b2..263297c8a8 100644
--- a/web/src/features/analytics/components/weekly-digest/types.ts
+++ b/web/src/features/analytics/components/weekly-digest/types.ts
@@ -11,48 +11,49 @@
  * ({@link DailyDistanceEntry} / {@link DailyEnergyEntry} / {@link AlertPieEntry})
  * and the optional {@link FunFact} headline.
  *
- * Every quantity here is expressed in the DISPLAY units the section components
- * render directly (km, minutes, Wh/km, kWh, %, currency); this module works on
- * its own normalised view-model, distinct from the raw SI wire shapes in
- * `@/api/types`. Keep this file free of behaviour — it is a pure type contract
- * shared by the producer (useWeeklyDigest) and the consumers (the sections).
+ * Every physical quantity remains SI-canonical through this view-model. Section
+ * components convert only at the render boundary through `useUnits()`. Keep this
+ * file free of behaviour — it is a pure type contract shared by the producer
+ * (`useWeeklyDigest`) and the consumers (the sections).
  */
 
 /** A single completed drive, as consumed by the digest's driving aggregates. */
 export interface Drive {
   id: number;
   /** ISO-8601 timestamp the drive started; used for week bucketing. */
-  start_date: string;
-  /** Distance travelled, in kilometres. */
-  distance: number;
-  /** Elapsed driving time, in minutes. */
-  duration_min: number;
-  /** Energy efficiency, in watt-hours per kilometre. */
-  efficiency_wh_km: number;
-  /** Energy consumed, in kilowatt-hours. */
-  energy_used: number;
+  startTs: string;
+  /** Distance travelled, in metres. */
+  distanceM: number;
+  /** Elapsed driving time, in seconds. */
+  durationS: number;
+  /** Energy consumed, in watt-hours. */
+  energyUsedWh: number | null;
 }
 
 /** A single charging session, as consumed by the digest's charging aggregates. */
 export interface ChargingSession {
   id: number;
   /** ISO-8601 timestamp the session started; used for week bucketing. */
-  start_ts: string;
-  /** Energy delivered to the battery this session, in kilowatt-hours. */
-  total_energy_added_wh: number;
+  started_at: string;
+  /** ISO-8601 timestamp the session ended; null while charging is active. */
+  ended_at: string | null;
+  /** Energy delivered to the battery this session, in watt-hours. */
+  total_energy_added_wh: number | null;
   /** Session cost, in the user's currency. */
-  cost: number;
-  /** Session duration, in minutes (drives the avg-charge-rate derivation). */
-  duration_min: number;
+  cost_decimal: number | null;
+  /** Mean session power, in watts. */
+  avg_power_w?: number | null;
   /** Battery state of charge at session start, as a percentage (0–100). */
-  start_battery_pct: number;
+  start_soc_pct: number | null;
   /** Battery state of charge at session end, as a percentage (0–100). */
-  end_battery_pct: number;
+  end_soc_pct: number | null;
 }
 
 /** A single alert; the digest only needs its severity + timestamp to bucket it. */
 export interface Alert {
   id: number;
+  /** Owning vehicle; zero denotes a notification from an all-vehicle rule. */
+  vehicle_id: number;
   /** Severity slug — typically `info` | `warning` | `critical`. */
   severity: string;
   /** ISO-8601 timestamp the alert fired; used for week bucketing. */
@@ -67,33 +68,33 @@ export interface Alert {
  * only `topDrive` is optional.
  */
 export interface DigestMetrics {
-  /** Total distance driven this week, in kilometres. */
-  totalDistance: number;
-  /** Total distance driven the prior week, in kilometres. */
-  prevDistance: number;
+  /** Total distance driven this week, in metres. */
+  totalDistanceM: number;
+  /** Total distance driven the prior week, in metres. */
+  prevDistanceM: number;
   totalDrives: number;
   prevDriveCount: number;
-  /** Total drive energy this week, in kilowatt-hours. */
-  energyUsed: number;
-  prevEnergy: number;
+  /** Total drive energy this week, in watt-hours. */
+  energyUsedWh: number;
+  prevEnergyWh: number;
   /** Total charging cost this week, in the user's currency. */
   chargingCost: number;
   prevChargingCost: number;
   /** Estimated CO₂ saved this week, in kilograms. */
   co2Saved: number;
   prevCo2: number;
-  /** Mean drive efficiency this week, in watt-hours per kilometre. */
-  avgEfficiency: number;
-  prevAvgEfficiency: number;
-  /** Total time driven this week, in minutes. */
-  totalDuration: number;
+  /** Distance-weighted drive efficiency this week, in watt-hours per metre. */
+  avgEfficiencyWhPerM: number;
+  prevAvgEfficiencyWhPerM: number;
+  /** Total time driven this week, in seconds. */
+  totalDurationS: number;
   /** The longest drive of the week by distance, or `undefined` when none. */
   topDrive: Drive | undefined;
-  /** Total energy added while charging this week, in kilowatt-hours. */
-  chargeEnergyAdded: number;
-  prevChargeEnergy: number;
-  /** Mean charging power this week, in kilowatts. */
-  avgChargeRate: number;
+  /** Total energy added while charging this week, in watt-hours. */
+  chargeEnergyAddedWh: number;
+  prevChargeEnergyWh: number;
+  /** Mean charging power this week, in watts. */
+  avgChargePowerW: number;
   chargingSessionCount: number;
   /** Mean battery % at charge start across the week's sessions. */
   batteryStart: number;
@@ -113,18 +114,18 @@ export interface FunFact {
   times: string;
 }
 
-/** One weekday bucket of driving distance (km) for the daily-distance bar chart. */
+/** One weekday bucket of driving distance (m) for the daily-distance bar chart. */
 export interface DailyDistanceEntry {
   /** Short weekday label (`Mon`…`Sun`). */
   day: string;
-  distance: number;
+  distanceM: number;
 }
 
-/** One weekday bucket of charging energy (kWh) for the daily-energy bar chart. */
+/** One weekday bucket of charging energy (Wh) for the daily-energy bar chart. */
 export interface DailyEnergyEntry {
   /** Short weekday label (`Mon`…`Sun`). */
   day: string;
-  energy: number;
+  energyWh: number;
 }
 
 /** One slice of the alerts-by-severity pie chart. */
diff --git a/web/src/features/analytics/components/weekly-digest/useWeeklyDigest.test.tsx b/web/src/features/analytics/components/weekly-digest/useWeeklyDigest.test.tsx
index 17d586805d..5cda5cf29d 100644
--- a/web/src/features/analytics/components/weekly-digest/useWeeklyDigest.test.tsx
+++ b/web/src/features/analytics/components/weekly-digest/useWeeklyDigest.test.tsx
@@ -10,7 +10,7 @@
 //                              fallback), default selectedVehicleId, setVehicleId
 //                              re-scoping the domain queries.
 //   • request wiring          — snake_case `vehicle_id` params, no `/api/v1`
-//                              prefix, `/alerts` fired without a vehicle param.
+//                              prefix, and analytical window limits.
 //   • week-scoped metrics     — sums / averages / co2 / battery deltas for the
 //                              current week, previous-week comparison values,
 //                              and topDrive selection.
@@ -93,29 +93,33 @@ function atNoon(base: Date, dayOffset: number): string {
   return d.toISOString();
 }
 
-function makeDrive(over: Partial<Drive> & Pick<Drive, 'id' | 'start_date'>): Drive {
+function makeDrive(over: Partial<Drive> & Pick<Drive, 'id' | 'startTs'>): Drive {
   return {
-    distance: 0,
-    duration_min: 0,
-    efficiency_wh_km: 0,
-    energy_used: 0,
+    distanceM: 0,
+    durationS: 0,
+    energyUsedWh: 0,
     ...over,
   };
 }
 
 function makeCharge(
-  over: Partial<ChargingSession> & Pick<ChargingSession, 'id' | 'start_ts'>,
+  over: Partial<ChargingSession> & Pick<ChargingSession, 'id' | 'started_at'>,
 ): ChargingSession {
   return {
+    ended_at: null,
     total_energy_added_wh: 0,
-    cost: 0,
-    duration_min: 0,
-    start_battery_pct: 0,
-    end_battery_pct: 0,
+    cost_decimal: 0,
+    avg_power_w: null,
+    start_soc_pct: 0,
+    end_soc_pct: 0,
     ...over,
   };
 }
 
+function endAfter(start: string, minutes: number): string {
+  return new Date(Date.parse(start) + minutes * 60_000).toISOString();
+}
+
 const DEFAULT_VEHICLES: Vehicle[] = [
   makeVehicle({ id: 1, vin: 'VIN1', display_name: 'Model 3' }),
   makeVehicle({ id: 2, vin: 'VIN2', display_name: '' }), // empty name → vin fallback
@@ -154,21 +158,25 @@ function seedFullWeek() {
 
   const drives: Drive[] = [
     // current week
-    makeDrive({ id: 1, start_date: atNoon(curStart, 0), distance: 100, duration_min: 60, efficiency_wh_km: 200, energy_used: 20 }),
-    makeDrive({ id: 2, start_date: atNoon(curStart, 2), distance: 50, duration_min: 30, efficiency_wh_km: 180, energy_used: 10 }),
+    makeDrive({ id: 1, startTs: atNoon(curStart, 0), distanceM: 100_000, durationS: 3_600, energyUsedWh: 20_000 }),
+    makeDrive({ id: 2, startTs: atNoon(curStart, 2), distanceM: 50_000, durationS: 1_800, energyUsedWh: 10_000 }),
     // previous week
-    makeDrive({ id: 3, start_date: atNoon(prevStart, 1), distance: 60, duration_min: 40, efficiency_wh_km: 210, energy_used: 12 }),
+    makeDrive({ id: 3, startTs: atNoon(prevStart, 1), distanceM: 60_000, durationS: 2_400, energyUsedWh: 12_000 }),
   ];
+  const charge1Start = atNoon(curStart, 0);
+  const charge2Start = atNoon(curStart, 1);
+  const charge3Start = atNoon(prevStart, 2);
   const charging: ChargingSession[] = [
-    makeCharge({ id: 1, start_ts: atNoon(curStart, 0), total_energy_added_wh: 10000, cost: 5, duration_min: 60, start_battery_pct: 20, end_battery_pct: 80 }),
-    makeCharge({ id: 2, start_ts: atNoon(curStart, 1), total_energy_added_wh: 5000, cost: 2.5, duration_min: 30, start_battery_pct: 50, end_battery_pct: 90 }),
-    makeCharge({ id: 3, start_ts: atNoon(prevStart, 2), total_energy_added_wh: 8000, cost: 4, duration_min: 50, start_battery_pct: 30, end_battery_pct: 70 }),
+    makeCharge({ id: 1, started_at: charge1Start, ended_at: endAfter(charge1Start, 60), total_energy_added_wh: 10_000, cost_decimal: 5, start_soc_pct: 20, end_soc_pct: 80 }),
+    makeCharge({ id: 2, started_at: charge2Start, ended_at: endAfter(charge2Start, 30), total_energy_added_wh: 5_000, cost_decimal: 2.5, start_soc_pct: 50, end_soc_pct: 90 }),
+    makeCharge({ id: 3, started_at: charge3Start, ended_at: endAfter(charge3Start, 50), total_energy_added_wh: 8_000, cost_decimal: 4, start_soc_pct: 30, end_soc_pct: 70 }),
   ];
   const alerts: Alert[] = [
-    { id: 1, severity: 'info', created_at: atNoon(curStart, 0) },
-    { id: 2, severity: 'warning', created_at: atNoon(curStart, 1) },
-    { id: 3, severity: 'critical', created_at: atNoon(curStart, 2) },
-    { id: 4, severity: 'info', created_at: atNoon(prevStart, 0) }, // prev week — excluded
+    { id: 1, vehicle_id: 1, severity: 'info', created_at: atNoon(curStart, 0) },
+    { id: 2, vehicle_id: 1, severity: 'warning', created_at: atNoon(curStart, 1) },
+    { id: 3, vehicle_id: 1, severity: 'critical', created_at: atNoon(curStart, 2) },
+    { id: 4, vehicle_id: 1, severity: 'info', created_at: atNoon(prevStart, 0) }, // prev week — excluded
+    { id: 5, vehicle_id: 2, severity: 'critical', created_at: atNoon(curStart, 3) }, // another vehicle — excluded
   ];
   return { drives, charging, alerts };
 }
@@ -208,28 +216,35 @@ describe('vehicle selection', () => {
     act(() => result.current.setVehicleId('2'));
 
     await waitFor(() =>
-      expect(urlsCalled()).toContain('/drives?vehicle_id=2'),
+      expect(urlsCalled().some((url) => url.startsWith('/drives?vehicle_id=2&'))).toBe(true),
     );
     expect(result.current.selectedVehicleId).toBe('2');
-    expect(urlsCalled()).toContain('/charging?vehicle_id=2');
+    expect(urlsCalled().some((url) => url.startsWith('/charging?vehicle_id=2&'))).toBe(true);
   });
 });
 
 /* ── Request wiring ── */
 describe('request wiring', () => {
-  it('fetches drives + charging with snake_case vehicle_id and alerts unscoped, no /api/v1 prefix', async () => {
+  it('fetches a two-week analytical window with canonical params and no /api/v1 prefix', async () => {
     installRoutes();
     const { result } = renderHook(() => useWeeklyDigest(), { wrapper: makeWrapper() });
 
     await waitFor(() => {
       const u = urlsCalled();
-      expect(u).toContain('/drives?vehicle_id=1');
-      expect(u).toContain('/charging?vehicle_id=1');
-      expect(u).toContain('/alerts'); // alerts endpoint is not vehicle-scoped
+      expect(u.some((url) => url.startsWith('/drives?vehicle_id=1&'))).toBe(true);
+      expect(u.some((url) => url.startsWith('/charging?vehicle_id=1&'))).toBe(true);
+      expect(u).toContain('/alerts?limit=1000');
     });
 
     const urls = urlsCalled();
     expect(urls).toContain('/vehicles');
+    for (const url of urls.filter((value) => /^\/(drives|charging)\?/.test(value))) {
+      const params = new URLSearchParams(url.split('?')[1]);
+      expect(params.get('vehicle_id')).toBe('1');
+      expect(params.get('start')).toMatch(/T/);
+      expect(params.get('end')).toMatch(/T/);
+      expect(params.get('limit')).toBe('1000');
+    }
     // The vehicle_id in the drive/charge URLs is the derived default selection.
     expect(result.current.selectedVehicleId).toBe('1');
     // No hook may double-prefix; the client injects /api/v1 itself.
@@ -248,7 +263,7 @@ describe('request wiring', () => {
     expect(result.current.hasData).toBe(false);
     expect(callsFor('/drives')).toBe(0);
     expect(callsFor('/charging')).toBe(0);
-    expect(result.current.metrics.totalDistance).toBe(0);
+    expect(result.current.metrics.totalDistanceM).toBe(0);
   });
 });
 
@@ -263,26 +278,26 @@ describe('aggregated metrics', () => {
     const m = result.current.metrics;
 
     // Drives (current week: 100 + 50).
-    expect(m.totalDistance).toBe(150);
-    expect(m.energyUsed).toBe(30);
-    expect(m.totalDuration).toBe(90);
-    expect(m.avgEfficiency).toBe(190); // (200 + 180) / 2
+    expect(m.totalDistanceM).toBe(150_000);
+    expect(m.energyUsedWh).toBe(30_000);
+    expect(m.totalDurationS).toBe(5_400);
+    expect(m.avgEfficiencyWhPerM).toBe(0.2);
     expect(m.co2Saved).toBeCloseTo(6.3, 5); // 30 * 0.21
     expect(m.topDrive?.id).toBe(1); // the 100 km drive wins
 
     // Previous week comparison (a single 60 km drive).
-    expect(m.prevDistance).toBe(60);
+    expect(m.prevDistanceM).toBe(60_000);
     expect(m.prevDriveCount).toBe(1);
-    expect(m.prevEnergy).toBe(12);
+    expect(m.prevEnergyWh).toBe(12_000);
 
     // Charging (current week: two sessions).
     expect(m.chargingSessionCount).toBe(2);
-    expect(m.chargeEnergyAdded).toBe(15000);
+    expect(m.chargeEnergyAddedWh).toBe(15_000);
     expect(m.chargingCost).toBe(7.5);
-    expect(m.avgChargeRate).toBe(10000); // both sessions == 10000 Wh/h
+    expect(m.avgChargePowerW).toBe(10_000);
     expect(m.batteryStart).toBe(35); // (20 + 50) / 2
     expect(m.batteryEnd).toBe(85); // (80 + 90) / 2
-    expect(m.prevChargeEnergy).toBe(8000);
+    expect(m.prevChargeEnergyWh).toBe(8_000);
 
     // Alerts (prev-week info alert excluded).
     expect(m.alertTotal).toBe(3);
@@ -301,12 +316,12 @@ describe('aggregated metrics', () => {
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     const m = result.current.metrics;
 
-    expect(m.totalDistance).toBe(0);
-    expect(m.avgEfficiency).toBe(0);
-    expect(m.avgChargeRate).toBe(0);
+    expect(m.totalDistanceM).toBe(0);
+    expect(m.avgEfficiencyWhPerM).toBe(0);
+    expect(m.avgChargePowerW).toBe(0);
     expect(m.batteryStart).toBe(0);
     expect(m.topDrive).toBeUndefined();
-    expect(Number.isNaN(m.avgEfficiency)).toBe(false);
+    expect(Number.isNaN(m.avgEfficiencyWhPerM)).toBe(false);
     expect(result.current.hasData).toBe(false);
   });
 });
@@ -315,15 +330,20 @@ describe('aggregated metrics', () => {
 describe('malformed-row hardening', () => {
   it('coerces NaN / undefined numeric fields to 0 instead of poisoning the aggregate', async () => {
     const [curStart] = getWeekRange(0);
-    const good = makeDrive({ id: 1, start_date: atNoon(curStart, 0), distance: 100, duration_min: 60, efficiency_wh_km: 200, energy_used: 20 });
+    const good = makeDrive({
+      id: 1,
+      startTs: atNoon(curStart, 0),
+      distanceM: 100_000,
+      durationS: 3_600,
+      energyUsedWh: 20_000,
+    });
     // A partial telemetry row: typed `number`, but the values are missing.
     const bad = {
       id: 2,
-      start_date: atNoon(curStart, 3),
-      distance: NaN,
-      duration_min: undefined,
-      efficiency_wh_km: NaN,
-      energy_used: undefined,
+      startTs: atNoon(curStart, 3),
+      distanceM: NaN,
+      durationS: undefined,
+      energyUsedWh: undefined,
     } as unknown as Drive;
 
     installRoutes({ drives: [good, bad], charging: [], alerts: [] });
@@ -332,13 +352,13 @@ describe('malformed-row hardening', () => {
     await waitFor(() => expect(result.current.metrics.totalDrives).toBe(2));
     const m = result.current.metrics;
 
-    expect(Number.isNaN(m.totalDistance)).toBe(false);
-    expect(m.totalDistance).toBe(100); // 100 + safeNumber(NaN)
-    expect(m.energyUsed).toBe(20); // 20 + safeNumber(undefined)
-    expect(m.totalDuration).toBe(60);
-    expect(m.avgEfficiency).toBe(100); // (200 + 0) / 2
+    expect(Number.isNaN(m.totalDistanceM)).toBe(false);
+    expect(m.totalDistanceM).toBe(100_000);
+    expect(m.energyUsedWh).toBe(20_000);
+    expect(m.totalDurationS).toBe(3_600);
+    expect(m.avgEfficiencyWhPerM).toBe(0.2);
     // The Thursday bin for the malformed drive stays a real number, not NaN.
-    expect(result.current.dailyDistanceData[3].distance).toBe(0);
+    expect(result.current.dailyDistanceData[3].distanceM).toBe(0);
   });
 });
 
@@ -354,21 +374,21 @@ describe('chart series', () => {
     const dist = result.current.dailyDistanceData;
     expect(dist).toHaveLength(7);
     expect(dist.map((b) => b.day)).toEqual(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
-    expect(dist[0].distance).toBe(100); // Monday drive
-    expect(dist[2].distance).toBe(50); // Wednesday drive
-    expect(dist[4].distance).toBe(0); // Friday empty
+    expect(dist[0].distanceM).toBe(100_000);
+    expect(dist[2].distanceM).toBe(50_000);
+    expect(dist[4].distanceM).toBe(0);
 
     const energy = result.current.dailyEnergyData;
-    expect(energy[0].energy).toBe(10000); // Monday charge
-    expect(energy[1].energy).toBe(5000); // Tuesday charge
-    expect(energy[6].energy).toBe(0); // Sunday empty
+    expect(energy[0].energyWh).toBe(10_000);
+    expect(energy[1].energyWh).toBe(5_000);
+    expect(energy[6].energyWh).toBe(0);
   });
 
   it('builds alert pie slices with severity colours and a CHART_COLORS fallback', async () => {
     const [curStart] = getWeekRange(0);
     const alerts: Alert[] = [
-      { id: 1, severity: 'warning', created_at: atNoon(curStart, 0) },
-      { id: 2, severity: 'mystery', created_at: atNoon(curStart, 1) }, // unknown severity
+      { id: 1, vehicle_id: 1, severity: 'warning', created_at: atNoon(curStart, 0) },
+      { id: 2, vehicle_id: 1, severity: 'mystery', created_at: atNoon(curStart, 1) },
     ];
     installRoutes({ drives: [], charging: [], alerts });
     const { result } = renderHook(() => useWeeklyDigest(), { wrapper: makeWrapper() });
@@ -404,13 +424,13 @@ describe('fun fact', () => {
   it('suppresses the fun fact below the 10 km floor', async () => {
     const [curStart] = getWeekRange(0);
     installRoutes({
-      drives: [makeDrive({ id: 1, start_date: atNoon(curStart, 0), distance: 3 })],
+      drives: [makeDrive({ id: 1, startTs: atNoon(curStart, 0), distanceM: 3_000 })],
       charging: [],
       alerts: [],
     });
     const { result } = renderHook(() => useWeeklyDigest(), { wrapper: makeWrapper() });
 
-    await waitFor(() => expect(result.current.metrics.totalDistance).toBe(3));
+    await waitFor(() => expect(result.current.metrics.totalDistanceM).toBe(3_000));
     expect(result.current.funFact).toBeUndefined();
   });
 });
@@ -422,18 +442,26 @@ describe('week navigation', () => {
     installRoutes({ drives, charging, alerts });
     const { result } = renderHook(() => useWeeklyDigest(), { wrapper: makeWrapper() });
 
-    await waitFor(() => expect(result.current.metrics.totalDistance).toBe(150));
+    await waitFor(() => expect(result.current.metrics.totalDistanceM).toBe(150_000));
     expect(result.current.isCurrentWeek).toBe(true);
     const currentLabel = result.current.weekLabel;
+    const currentDriveUrl = urlsCalled().filter((url) => url.startsWith('/drives?')).at(-1);
     expect(currentLabel).toContain('–');
 
     act(() => result.current.goToPrevWeek());
-    await waitFor(() => expect(result.current.metrics.totalDistance).toBe(60));
+    await waitFor(() => expect(result.current.metrics.totalDistanceM).toBe(60_000));
     expect(result.current.isCurrentWeek).toBe(false);
     expect(result.current.weekLabel).not.toBe(currentLabel);
+    const previousDriveUrl = urlsCalled().filter((url) => url.startsWith('/drives?')).at(-1);
+    expect(previousDriveUrl).not.toBe(currentDriveUrl);
+    expect(
+      Date.parse(new URLSearchParams(previousDriveUrl?.split('?')[1]).get('start') ?? ''),
+    ).toBeLessThan(
+      Date.parse(new URLSearchParams(currentDriveUrl?.split('?')[1]).get('start') ?? ''),
+    );
 
     act(() => result.current.goToNextWeek());
-    await waitFor(() => expect(result.current.metrics.totalDistance).toBe(150));
+    await waitFor(() => expect(result.current.metrics.totalDistanceM).toBe(150_000));
     expect(result.current.isCurrentWeek).toBe(true);
   });
 
diff --git a/web/src/features/analytics/components/weekly-digest/useWeeklyDigest.ts b/web/src/features/analytics/components/weekly-digest/useWeeklyDigest.ts
index c79dabf883..cbe4b743b1 100644
--- a/web/src/features/analytics/components/weekly-digest/useWeeklyDigest.ts
+++ b/web/src/features/analytics/components/weekly-digest/useWeeklyDigest.ts
@@ -1,18 +1,65 @@
 import { useState, useMemo, useCallback } from 'react';
-import { useQuery } from '@tanstack/react-query';
 import { useVehicles } from '@/api/hooks/useVehicles';
-import { request } from '@/api/client';
+import { useDrives } from '@/api/hooks/useDriving';
+import { useChargingSessionsPaginated } from '@/api/hooks/useCharging';
+import { useAlertHistory } from '@/api/hooks/useNotifications';
 import { formatDateShort } from '@/lib/dateFormat';
 import { fmtNumber, safeNumber } from '@/lib/numberFormat';
+import { convertDistanceFromSI, convertEnergyFromSI } from '@/lib/unitConversion';
 
 import type {
-  Drive, ChargingSession, Alert,
+  Drive, ChargingSession,
   DigestMetrics, FunFact, DailyDistanceEntry, DailyEnergyEntry, AlertPieEntry,
 } from './types';
 import { DAY_LABELS, ALERT_SEVERITY_COLORS, CO2_PER_KWH_GASOLINE_KG } from './constants';
 import { CHART_COLORS } from '@/components/charts';
 import { getWeekRange, isInRange, dayOfWeekIndex, findCityPair } from './helpers';
 
+const ANALYTICS_WINDOW_LIMIT = 1000;
+
+function averagePresent(values: Array<number | null | undefined>): number {
+  const present = values.filter(
+    (value): value is number => typeof value === 'number' && Number.isFinite(value),
+  );
+  return present.length > 0
+    ? present.reduce((sum, value) => sum + value, 0) / present.length
+    : 0;
+}
+
+function efficiencyWhPerM(drives: readonly Drive[]): number {
+  const measuredDrives = drives.filter(
+    (drive) =>
+      Number.isFinite(drive.distanceM)
+      && drive.distanceM > 0
+      && typeof drive.energyUsedWh === 'number'
+      && Number.isFinite(drive.energyUsedWh),
+  );
+  const distanceM = measuredDrives.reduce(
+    (sum, drive) => sum + safeNumber(drive.distanceM),
+    0,
+  );
+  if (distanceM <= 0) return 0;
+  const energyWh = measuredDrives.reduce(
+    (sum, drive) => sum + safeNumber(drive.energyUsedWh),
+    0,
+  );
+  return energyWh / distanceM;
+}
+
+function chargingPowerW(session: ChargingSession): number {
+  const reportedPowerW = safeNumber(session.avg_power_w);
+  if (reportedPowerW > 0) return reportedPowerW;
+
+  const startMs = Date.parse(session.started_at);
+  const endMs = session.ended_at ? Date.parse(session.ended_at) : Number.NaN;
+  if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs <= startMs) return 0;
+
+  const durationHours = (endMs - startMs) / 3_600_000;
+  return durationHours > 0
+    ? safeNumber(session.total_energy_added_wh) / durationHours
+    : 0;
+}
+
 export function useWeeklyDigest() {
   const [weekOffset, setWeekOffset] = useState(0);
   const [vehicleId, setVehicleId] = useState<string>('');
@@ -40,15 +87,27 @@ export function useWeeklyDigest() {
   );
 
   const selectedVehicleId = vehicleId || String(vehicles?.[0]?.id ?? '');
+  const selectedVehicleNumber = useMemo(() => {
+    const parsed = Number(selectedVehicleId);
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+  }, [selectedVehicleId]);
+
+  const queryStart = useMemo(() => prevStart.toISOString(), [prevStart]);
+  const queryEndExclusive = useMemo(
+    () => new Date(weekEnd.getTime() + 1).toISOString(),
+    [weekEnd],
+  );
 
   /* ── Data queries ──
    * Each domain query is surfaced independently so every page section can own
    * its loading / empty / error state (modern-ui §8) instead of gating the
-   * whole page behind one combined flag. */
-  const drivesQuery = useQuery({
-    queryKey: ['drives', selectedVehicleId],
-    queryFn: () => request<Drive[]>(`/drives?vehicle_id=${selectedVehicleId}`),
-    enabled: !!selectedVehicleId,
+   * whole page behind one combined flag. The drive and charge requests cover
+   * exactly the selected + comparison weeks, avoiding the list endpoints'
+   * default 50-row page silently dropping older weeks. */
+  const drivesQuery = useDrives(selectedVehicleId || undefined, {
+    start: queryStart,
+    end: queryEndExclusive,
+    limit: ANALYTICS_WINDOW_LIMIT,
   });
   const {
     data: drives,
@@ -57,10 +116,10 @@ export function useWeeklyDigest() {
     refetch: refetchDrives,
   } = drivesQuery;
 
-  const chargingQuery = useQuery({
-    queryKey: ['charging', selectedVehicleId],
-    queryFn: () => request<ChargingSession[]>(`/charging?vehicle_id=${selectedVehicleId}`),
-    enabled: !!selectedVehicleId,
+  const chargingQuery = useChargingSessionsPaginated(selectedVehicleNumber, {
+    start: queryStart,
+    end: queryEndExclusive,
+    limit: ANALYTICS_WINDOW_LIMIT,
   });
   const {
     data: chargingSessions,
@@ -69,11 +128,7 @@ export function useWeeklyDigest() {
     refetch: refetchCharging,
   } = chargingQuery;
 
-  const alertsQuery = useQuery({
-    queryKey: ['alerts', selectedVehicleId],
-    queryFn: () => request<Alert[]>('/alerts'),
-    enabled: !!selectedVehicleId,
-  });
+  const alertsQuery = useAlertHistory(ANALYTICS_WINDOW_LIMIT);
   const {
     data: alerts,
     isLoading: alertsLoading,
@@ -106,28 +161,37 @@ export function useWeeklyDigest() {
 
   /* ── Filter data by week ── */
   const weekDrives = useMemo(
-    () => (drives ?? []).filter((d) => isInRange(d.start_date, weekStart, weekEnd)),
+    () => (drives ?? []).filter((drive) => isInRange(drive.startTs, weekStart, weekEnd)),
     [drives, weekStart, weekEnd],
   );
 
   const prevWeekDrives = useMemo(
-    () => (drives ?? []).filter((d) => isInRange(d.start_date, prevStart, prevEnd)),
+    () => (drives ?? []).filter((drive) => isInRange(drive.startTs, prevStart, prevEnd)),
     [drives, prevStart, prevEnd],
   );
 
   const weekCharging = useMemo(
-    () => (chargingSessions ?? []).filter((c) => isInRange(c.start_ts, weekStart, weekEnd)),
+    () => (chargingSessions ?? []).filter(
+      (session) => isInRange(session.started_at, weekStart, weekEnd),
+    ),
     [chargingSessions, weekStart, weekEnd],
   );
 
   const prevWeekCharging = useMemo(
-    () => (chargingSessions ?? []).filter((c) => isInRange(c.start_ts, prevStart, prevEnd)),
+    () => (chargingSessions ?? []).filter(
+      (session) => isInRange(session.started_at, prevStart, prevEnd),
+    ),
     [chargingSessions, prevStart, prevEnd],
   );
 
   const weekAlerts = useMemo(
-    () => (alerts ?? []).filter((a) => isInRange(a.created_at, weekStart, weekEnd)),
-    [alerts, weekStart, weekEnd],
+    () => (alerts ?? []).filter(
+      (alert) =>
+        isInRange(alert.created_at, weekStart, weekEnd)
+        && selectedVehicleNumber !== null
+        && (alert.vehicle_id === selectedVehicleNumber || alert.vehicle_id === 0),
+    ),
+    [alerts, selectedVehicleNumber, weekStart, weekEnd],
   );
 
   /* ── Aggregated metrics ── */
@@ -135,55 +199,61 @@ export function useWeeklyDigest() {
     // safeNumber() coerces null / undefined / NaN / ±Infinity to 0 so a single
     // malformed API row can't poison an aggregate into NaN (the fields are typed
     // `number`, but partial telemetry rows can arrive with missing values).
-    const totalDistance = weekDrives.reduce((s, d) => s + safeNumber(d.distance), 0);
-    const prevDistance = prevWeekDrives.reduce((s, d) => s + safeNumber(d.distance), 0);
+    const totalDistanceM = weekDrives.reduce((sum, drive) => sum + safeNumber(drive.distanceM), 0);
+    const prevDistanceM = prevWeekDrives.reduce(
+      (sum, drive) => sum + safeNumber(drive.distanceM),
+      0,
+    );
     const totalDrives = weekDrives.length;
     const prevDriveCount = prevWeekDrives.length;
-    const energyUsed = weekDrives.reduce((s, d) => s + safeNumber(d.energy_used), 0);
-    const prevEnergy = prevWeekDrives.reduce((s, d) => s + safeNumber(d.energy_used), 0);
-    const chargingCost = weekCharging.reduce((s, c) => s + safeNumber(c.cost), 0);
-    const prevChargingCost = prevWeekCharging.reduce((s, c) => s + safeNumber(c.cost), 0);
-    const co2Saved = energyUsed * CO2_PER_KWH_GASOLINE_KG;
-    const prevCo2 = prevEnergy * CO2_PER_KWH_GASOLINE_KG;
-    const avgEfficiency =
-      totalDrives > 0
-        ? weekDrives.reduce((s, d) => s + safeNumber(d.efficiency_wh_km), 0) / totalDrives
-        : 0;
-    const prevAvgEfficiency =
-      prevDriveCount > 0
-        ? prevWeekDrives.reduce((s, d) => s + safeNumber(d.efficiency_wh_km), 0) / prevDriveCount
-        : 0;
-    const totalDuration = weekDrives.reduce((s, d) => s + safeNumber(d.duration_min), 0);
+    const energyUsedWh = weekDrives.reduce(
+      (sum, drive) => sum + safeNumber(drive.energyUsedWh),
+      0,
+    );
+    const prevEnergyWh = prevWeekDrives.reduce(
+      (sum, drive) => sum + safeNumber(drive.energyUsedWh),
+      0,
+    );
+    const chargingCost = weekCharging.reduce(
+      (sum, session) => sum + safeNumber(session.cost_decimal),
+      0,
+    );
+    const prevChargingCost = prevWeekCharging.reduce(
+      (sum, session) => sum + safeNumber(session.cost_decimal),
+      0,
+    );
+    const co2Saved =
+      convertEnergyFromSI(energyUsedWh, 'kWh') * CO2_PER_KWH_GASOLINE_KG;
+    const prevCo2 =
+      convertEnergyFromSI(prevEnergyWh, 'kWh') * CO2_PER_KWH_GASOLINE_KG;
+    const avgEfficiencyWhPerM = efficiencyWhPerM(weekDrives);
+    const prevAvgEfficiencyWhPerM = efficiencyWhPerM(prevWeekDrives);
+    const totalDurationS = weekDrives.reduce(
+      (sum, drive) => sum + safeNumber(drive.durationS),
+      0,
+    );
     const topDrive =
       weekDrives.length > 0
-        ? weekDrives.reduce((best, d) =>
-            safeNumber(d.distance) > safeNumber(best.distance) ? d : best,
+        ? weekDrives.reduce((best, drive) =>
+            safeNumber(drive.distanceM) > safeNumber(best.distanceM) ? drive : best,
           )
         : undefined;
-    const chargeEnergyAdded = weekCharging.reduce(
-      (s, c) => s + safeNumber(c.total_energy_added_wh),
+    const chargeEnergyAddedWh = weekCharging.reduce(
+      (sum, session) => sum + safeNumber(session.total_energy_added_wh),
       0,
     );
-    const prevChargeEnergy = prevWeekCharging.reduce(
-      (s, c) => s + safeNumber(c.total_energy_added_wh),
+    const prevChargeEnergyWh = prevWeekCharging.reduce(
+      (sum, session) => sum + safeNumber(session.total_energy_added_wh),
       0,
     );
-    const avgChargeRate =
-      weekCharging.length > 0
-        ? weekCharging.reduce(
-            (s, c) =>
-              s + (c.duration_min > 0 ? (safeNumber(c.total_energy_added_wh) / c.duration_min) * 60 : 0),
-            0,
-          ) / weekCharging.length
-        : 0;
-    const batteryStart =
-      weekCharging.length > 0
-        ? weekCharging.reduce((s, c) => s + safeNumber(c.start_battery_pct), 0) / weekCharging.length
-        : 0;
-    const batteryEnd =
-      weekCharging.length > 0
-        ? weekCharging.reduce((s, c) => s + safeNumber(c.end_battery_pct), 0) / weekCharging.length
-        : 0;
+    const chargingPowersW = weekCharging
+      .map((session) => chargingPowerW(session))
+      .filter((powerW) => powerW > 0);
+    const avgChargePowerW = chargingPowersW.length > 0
+      ? chargingPowersW.reduce((sum, powerW) => sum + powerW, 0) / chargingPowersW.length
+      : 0;
+    const batteryStart = averagePresent(weekCharging.map((session) => session.start_soc_pct));
+    const batteryEnd = averagePresent(weekCharging.map((session) => session.end_soc_pct));
 
     const alertsByType: Record<string, number> = {};
     for (const a of weekAlerts) {
@@ -191,23 +261,23 @@ export function useWeeklyDigest() {
     }
 
     return {
-      totalDistance,
-      prevDistance,
+      totalDistanceM,
+      prevDistanceM,
       totalDrives,
       prevDriveCount,
-      energyUsed,
-      prevEnergy,
+      energyUsedWh,
+      prevEnergyWh,
       chargingCost,
       prevChargingCost,
       co2Saved,
       prevCo2,
-      avgEfficiency,
-      prevAvgEfficiency,
-      totalDuration,
+      avgEfficiencyWhPerM,
+      prevAvgEfficiencyWhPerM,
+      totalDurationS,
       topDrive,
-      chargeEnergyAdded,
-      prevChargeEnergy,
-      avgChargeRate,
+      chargeEnergyAddedWh,
+      prevChargeEnergyWh,
+      avgChargePowerW,
       chargingSessionCount: weekCharging.length,
       batteryStart,
       batteryEnd,
@@ -218,22 +288,22 @@ export function useWeeklyDigest() {
 
   /* ── Daily distance chart data ── */
   const dailyDistanceData: DailyDistanceEntry[] = useMemo(() => {
-    const bins = DAY_LABELS.map((label) => ({ day: label, distance: 0 }));
-    for (const d of weekDrives) {
-      const idx = dayOfWeekIndex(d.start_date);
-      if (idx < 0) continue; // unparseable start_date — skip rather than crash
-      bins[idx].distance += safeNumber(d.distance);
+    const bins = DAY_LABELS.map((label) => ({ day: label, distanceM: 0 }));
+    for (const drive of weekDrives) {
+      const idx = dayOfWeekIndex(drive.startTs);
+      if (idx < 0) continue;
+      bins[idx].distanceM += safeNumber(drive.distanceM);
     }
     return bins;
   }, [weekDrives]);
 
   /* ── Daily energy added chart data ── */
   const dailyEnergyData: DailyEnergyEntry[] = useMemo(() => {
-    const bins = DAY_LABELS.map((label) => ({ day: label, energy: 0 }));
-    for (const c of weekCharging) {
-      const idx = dayOfWeekIndex(c.start_ts);
-      if (idx < 0) continue; // unparseable start_ts — skip rather than crash
-      bins[idx].energy += safeNumber(c.total_energy_added_wh);
+    const bins = DAY_LABELS.map((label) => ({ day: label, energyWh: 0 }));
+    for (const session of weekCharging) {
+      const idx = dayOfWeekIndex(session.started_at);
+      if (idx < 0) continue;
+      bins[idx].energyWh += safeNumber(session.total_energy_added_wh);
     }
     return bins;
   }, [weekCharging]);
@@ -249,12 +319,13 @@ export function useWeeklyDigest() {
 
   /* ── Fun fact ── */
   const funFact: FunFact | undefined = useMemo(() => {
-    if (metrics.totalDistance < 10) return undefined;
-    const pair = findCityPair(metrics.totalDistance);
+    const totalDistanceKm = convertDistanceFromSI(metrics.totalDistanceM, 'km');
+    if (totalDistanceKm < 10) return undefined;
+    const pair = findCityPair(totalDistanceKm);
     if (!pair) return undefined;
-    const times = metrics.totalDistance / pair.km;
+    const times = totalDistanceKm / pair.km;
     return { from: pair.from, to: pair.to, times: fmtNumber(times, 1) };
-  }, [metrics.totalDistance]);
+  }, [metrics.totalDistanceM]);
 
   /* ── Navigation callbacks ── */
   const goToPrevWeek = useCallback(() => setWeekOffset((o) => o - 1), []);
diff --git a/web/src/features/analytics/pages/WeeklyDigestPage.test.tsx b/web/src/features/analytics/pages/WeeklyDigestPage.test.tsx
index c9edaa0576..5a6bafaeac 100644
--- a/web/src/features/analytics/pages/WeeklyDigestPage.test.tsx
+++ b/web/src/features/analytics/pages/WeeklyDigestPage.test.tsx
@@ -136,23 +136,23 @@ const mockHook = useWeeklyDigest as unknown as ReturnType<typeof vi.fn>;
 type HookReturn = ReturnType<typeof useWeeklyDigest>;
 
 const baseMetrics: DigestMetrics = {
-  totalDistance: 0,
-  prevDistance: 0,
+  totalDistanceM: 0,
+  prevDistanceM: 0,
   totalDrives: 0,
   prevDriveCount: 0,
-  energyUsed: 0,
-  prevEnergy: 0,
+  energyUsedWh: 0,
+  prevEnergyWh: 0,
   chargingCost: 0,
   prevChargingCost: 0,
   co2Saved: 0,
   prevCo2: 0,
-  avgEfficiency: 0,
-  prevAvgEfficiency: 0,
-  totalDuration: 0,
+  avgEfficiencyWhPerM: 0,
+  prevAvgEfficiencyWhPerM: 0,
+  totalDurationS: 0,
   topDrive: undefined,
-  chargeEnergyAdded: 0,
-  prevChargeEnergy: 0,
-  avgChargeRate: 0,
+  chargeEnergyAddedWh: 0,
+  prevChargeEnergyWh: 0,
+  avgChargePowerW: 0,
   chargingSessionCount: 0,
   batteryStart: 0,
   batteryEnd: 0,
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index f01d61b1b4..f1b847f64e 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -7461,7 +7461,7 @@
       "chargeSessions": "Charge Sessions",
       "estRangeAdded": "Est. Range Added",
       "chargingSection": "Charging",
-      "dailyEnergyAdded": "Daily Energy Added (kWh)",
+      "dailyEnergyAdded": "Daily Energy Added ({{unit}})",
       "energyAdded": "Energy Added",
       "sessions": "Sessions",
       "totalEnergyAdded": "Total Energy Added",
@@ -7469,7 +7469,7 @@
       "totalCost": "Total Cost",
       "energyVsLastWeek": "Energy vs. Last Week",
       "drivingSection": "Driving",
-      "dailyDistance": "Daily Distance (km)",
+      "dailyDistance": "Daily Distance ({{unit}})",
       "distance": "Distance",
       "noDailyDistance": "No driving distance data is available for this week.",
       "avgEfficiency": "Avg Efficiency",

From 03ef76eaa678b95b79ec4830d15a419a290fae59 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sun, 9 Aug 2026 08:28:00 -0700
Subject: [PATCH 07/15] feat(geofences): add charging place pricing

Add discovered charging places, effective-dated geofence rates, protected cost provenance, historical backfill, and drive/charge geofence attribution.

Expose pricing lifecycle, rate preview/apply, summaries, and activity APIs with a complete Charging Places workspace. Add migration, metrics, tracing, SLO dashboards, alerts, and coverage audit updates.
---
 cmd/trace-coverage-audit/main.go              |   6 +-
 .../runbooks/phase-44-trace-coverage-audit.md |   5 +-
 ...lo-geofence_pricing_read_availability.json | 235 +++++
 ...o-geofence_pricing_write_availability.json | 236 +++++
 .../grafana/dashboards/slo-overview.json      |  86 ++
 .../files/prometheus/alerting-rules.yaml      |  60 ++
 .../files/prometheus/recording-rules.yaml     |  62 ++
 internal/adapter/postgres/queries/charging.go |  10 +-
 internal/api/apperror/apperror.go             |  11 +
 internal/api/datarepair/handler.go            |  28 +
 internal/api/datarepair/handler_test.go       |  52 +-
 internal/api/geofence/handler.go              |  91 +-
 internal/api/geofence/handler_test.go         |   2 +-
 internal/api/geofence/rate_handler.go         | 568 +++++++++++
 internal/api/geofence/rate_handler_test.go    | 940 ++++++++++++++++++
 internal/api/router.go                        |  28 +-
 ...emetry_sessions_charge_geofence_pricing.go | 380 +++++++
 ...y_sessions_charge_geofence_pricing_test.go | 726 ++++++++++++++
 .../telemetry_sessions_charge_tracking.go     | 181 +++-
 ...sessions_drive_geofence_attachment_test.go | 155 +++
 .../telemetry_sessions_drive_tracking.go      |  21 +-
 internal/app/new.go                           |  18 +-
 internal/app/wiring_test.go                   |  25 +
 internal/database/charging/repo.go            | 123 ++-
 internal/database/drive/repo.go               | 103 +-
 .../drive/repo_geofence_names_test.go         | 197 ++++
 internal/database/geofence/fakes_test.go      |  36 +-
 internal/database/geofence/repo.go            |  90 +-
 internal/database/geofence/repo_archive.go    |  85 ++
 .../database/geofence/repo_archive_test.go    | 182 ++++
 .../geofence/repo_charging_summary.go         | 408 ++++++++
 .../geofence/repo_charging_summary_test.go    | 628 ++++++++++++
 internal/database/geofence/repo_discovery.go  | 279 ++++++
 .../database/geofence/repo_discovery_test.go  | 387 +++++++
 internal/database/geofence/repo_rates.go      | 406 ++++++++
 internal/database/geofence/repo_rates_test.go | 606 +++++++++++
 internal/database/geofence/repo_test.go       |  45 +-
 internal/metrics/metrics_geofence_pricing.go  |  61 ++
 internal/models/charging/charging.go          |  19 +
 internal/models/drive/drive.go                |  12 +
 internal/models/system/geofence_geometry.go   |  37 +
 internal/models/system/geofence_rate.go       | 146 +++
 internal/models/system/system.go              |  32 +
 internal/tracing/span.go                      |   2 +
 ...8_geofence_charging_place_pricing.down.sql |  38 +
 ...228_geofence_charging_place_pricing.up.sql | 216 ++++
 slo/catalog.yaml                              |  20 +
 web/src/api/hooks/useLocations.test.tsx       | 528 +++++++++-
 web/src/api/hooks/useLocations.ts             | 396 +++++++-
 web/src/api/types.ts                          | 147 ++-
 .../dashboard/widgets/GeofenceWidget.test.tsx |   3 +-
 .../ChargingActivityList.test.tsx             | 206 ++++
 .../charging-places/ChargingActivityList.tsx  | 154 +++
 .../ChargingPlacesWorkspace.test.tsx          | 275 +++++
 .../ChargingPlacesWorkspace.tsx               |  85 ++
 .../ChargingSummaryPanel.test.tsx             | 115 +++
 .../charging-places/ChargingSummaryPanel.tsx  |  86 ++
 .../charging-places/NeedsSetupQueue.test.tsx  | 132 +++
 .../charging-places/NeedsSetupQueue.tsx       |  88 ++
 .../charging-places/PlaceDetailPanel.test.tsx | 381 +++++++
 .../charging-places/PlaceDetailPanel.tsx      | 188 ++++
 .../charging-places/PlacesTable.test.tsx      | 185 ++++
 .../charging-places/PlacesTable.tsx           | 208 ++++
 .../PreviewApplyPanel.test.tsx                | 235 +++++
 .../charging-places/PreviewApplyPanel.tsx     | 183 ++++
 .../charging-places/RateForm.test.tsx         | 225 +++++
 .../components/charging-places/RateForm.tsx   | 196 ++++
 .../charging-places/RateHistoryPanel.test.tsx | 204 ++++
 .../charging-places/RateHistoryPanel.tsx      | 195 ++++
 .../charging-places/helpers.test.ts           | 128 +++
 .../components/charging-places/helpers.ts     |  93 ++
 .../maps/components/charging-places/index.ts  |  17 +
 .../maps/pages/GeofencesPage.test.tsx         |   5 +-
 web/src/features/maps/pages/GeofencesPage.tsx |  28 +-
 .../pages/GuardModePage.test.tsx              |   3 +-
 web/src/i18n/en.json                          | 152 +++
 web/src/types/location.test.ts                |  51 +-
 web/src/types/location.ts                     |  29 +-
 78 files changed, 12835 insertions(+), 170 deletions(-)
 create mode 100644 helm/teslasync/files/grafana/dashboards/slo-geofence_pricing_read_availability.json
 create mode 100644 helm/teslasync/files/grafana/dashboards/slo-geofence_pricing_write_availability.json
 create mode 100644 internal/api/geofence/rate_handler.go
 create mode 100644 internal/api/geofence/rate_handler_test.go
 create mode 100644 internal/api/telemetry/telemetry_sessions_charge_geofence_pricing.go
 create mode 100644 internal/api/telemetry/telemetry_sessions_charge_geofence_pricing_test.go
 create mode 100644 internal/api/telemetry/telemetry_sessions_drive_geofence_attachment_test.go
 create mode 100644 internal/database/drive/repo_geofence_names_test.go
 create mode 100644 internal/database/geofence/repo_archive.go
 create mode 100644 internal/database/geofence/repo_archive_test.go
 create mode 100644 internal/database/geofence/repo_charging_summary.go
 create mode 100644 internal/database/geofence/repo_charging_summary_test.go
 create mode 100644 internal/database/geofence/repo_discovery.go
 create mode 100644 internal/database/geofence/repo_discovery_test.go
 create mode 100644 internal/database/geofence/repo_rates.go
 create mode 100644 internal/database/geofence/repo_rates_test.go
 create mode 100644 internal/metrics/metrics_geofence_pricing.go
 create mode 100644 internal/models/system/geofence_geometry.go
 create mode 100644 internal/models/system/geofence_rate.go
 create mode 100644 migrations/000228_geofence_charging_place_pricing.down.sql
 create mode 100644 migrations/000228_geofence_charging_place_pricing.up.sql
 create mode 100644 web/src/features/maps/components/charging-places/ChargingActivityList.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/ChargingActivityList.tsx
 create mode 100644 web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.tsx
 create mode 100644 web/src/features/maps/components/charging-places/ChargingSummaryPanel.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/ChargingSummaryPanel.tsx
 create mode 100644 web/src/features/maps/components/charging-places/NeedsSetupQueue.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/NeedsSetupQueue.tsx
 create mode 100644 web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
 create mode 100644 web/src/features/maps/components/charging-places/PlacesTable.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/PlacesTable.tsx
 create mode 100644 web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
 create mode 100644 web/src/features/maps/components/charging-places/RateForm.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/RateForm.tsx
 create mode 100644 web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
 create mode 100644 web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
 create mode 100644 web/src/features/maps/components/charging-places/helpers.test.ts
 create mode 100644 web/src/features/maps/components/charging-places/helpers.ts
 create mode 100644 web/src/features/maps/components/charging-places/index.ts

diff --git a/cmd/trace-coverage-audit/main.go b/cmd/trace-coverage-audit/main.go
index 030a1eb8ee..533f0a45ac 100644
--- a/cmd/trace-coverage-audit/main.go
+++ b/cmd/trace-coverage-audit/main.go
@@ -183,19 +183,21 @@ var flows = []flow{
 	},
 	{
 		Name:        "in_api_workers",
-		Description: "Per-iteration spans for in-API background tickers",
+		Description: "Spans for in-API background workers",
 		GlobPatterns: []string{
 			"internal/worker/gas_price_worker.go",
 			"internal/worker/maintenance_worker.go",
 			"internal/worker/unit_drift_validator.go",
 			"internal/app/new.go",
+			"internal/api/telemetry/telemetry_sessions_charge_geofence_pricing.go",
 		},
-		MinSpanFiles: 4,
+		MinSpanFiles: 5,
 		RequiredFiles: []string{
 			"internal/worker/gas_price_worker.go",
 			"internal/worker/maintenance_worker.go",
 			"internal/worker/unit_drift_validator.go",
 			"internal/app/new.go",
+			"internal/api/telemetry/telemetry_sessions_charge_geofence_pricing.go",
 		},
 	},
 	{
diff --git a/docs/runbooks/phase-44-trace-coverage-audit.md b/docs/runbooks/phase-44-trace-coverage-audit.md
index 18f69b6214..61a328d82c 100644
--- a/docs/runbooks/phase-44-trace-coverage-audit.md
+++ b/docs/runbooks/phase-44-trace-coverage-audit.md
@@ -89,11 +89,12 @@ go run ./cmd/trace-coverage-audit -report docs/runbooks/phase-44-trace-coverage-
 - Matched files:
   - `internal/tracing/fsmtracer.go`
 
-## Per-iteration spans for in-API background tickers — `in_api_workers`
+## Spans for in-API background workers — `in_api_workers`
 
 - Status: **OK**
-- Instrumented files matched: 4 (threshold ≥ 4)
+- Instrumented files matched: 5 (threshold ≥ 5)
 - Matched files:
+  - `internal/api/telemetry/telemetry_sessions_charge_geofence_pricing.go`
   - `internal/app/new.go`
   - `internal/worker/gas_price_worker.go`
   - `internal/worker/maintenance_worker.go`
diff --git a/helm/teslasync/files/grafana/dashboards/slo-geofence_pricing_read_availability.json b/helm/teslasync/files/grafana/dashboards/slo-geofence_pricing_read_availability.json
new file mode 100644
index 0000000000..446605cb9e
--- /dev/null
+++ b/helm/teslasync/files/grafana/dashboards/slo-geofence_pricing_read_availability.json
@@ -0,0 +1,235 @@
+{
+  "uid": "slo-geofence_pricing_read_availability",
+  "title": "SLO: geofence_pricing_read_availability",
+  "description": "Charging-place rate history, preview, and activity reads must avoid server errors.",
+  "tags": [
+    "slo",
+    "owner:platform",
+    "http",
+    "geofences",
+    "pricing"
+  ],
+  "schemaVersion": 38,
+  "version": 1,
+  "time": {
+    "from": "now-24h",
+    "to": "now"
+  },
+  "refresh": "30s",
+  "panels": [
+    {
+      "id": 1,
+      "type": "stat",
+      "title": "SLI (5m)",
+      "description": "Current good/valid ratio.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 0,
+        "w": 6,
+        "h": 4
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "slo:geofence_pricing_read_availability:ratio_rate5m",
+          "legendFormat": "ratio_5m"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 2,
+      "type": "stat",
+      "title": "Objective",
+      "description": "SLO target.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 6,
+        "y": 0,
+        "w": 6,
+        "h": 4
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "vector(0.995)",
+          "legendFormat": "objective"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 3,
+      "type": "stat",
+      "title": "Error budget remaining (30d)",
+      "description": "1 - (1 - SLI_30d) / (1 - objective). Negative = budget blown.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 12,
+        "y": 0,
+        "w": 12,
+        "h": 4
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "1 - ((1 - slo:geofence_pricing_read_availability:ratio_rate30d) / (1 - 0.995))",
+          "legendFormat": "budget_remaining"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 4,
+      "type": "timeseries",
+      "title": "SLI over time (5m / 1h / 6h)",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 4,
+        "w": 24,
+        "h": 8
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "slo:geofence_pricing_read_availability:ratio_rate5m",
+          "legendFormat": "5m"
+        },
+        {
+          "refId": "B",
+          "expr": "slo:geofence_pricing_read_availability:ratio_rate1h",
+          "legendFormat": "1h"
+        },
+        {
+          "refId": "C",
+          "expr": "slo:geofence_pricing_read_availability:ratio_rate6h",
+          "legendFormat": "6h"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 5,
+      "type": "timeseries",
+      "title": "Burn rate (1h / 6h)",
+      "description": "Bad-event ratio multiplied so the y-axis is in 'budgets per hour' units.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 12,
+        "w": 24,
+        "h": 8
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "(1 - slo:geofence_pricing_read_availability:ratio_rate1h) / (1 - 0.995)",
+          "legendFormat": "1h"
+        },
+        {
+          "refId": "B",
+          "expr": "(1 - slo:geofence_pricing_read_availability:ratio_rate6h) / (1 - 0.995)",
+          "legendFormat": "6h"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 6,
+      "type": "timeseries",
+      "title": "Latency (with Tempo exemplars)",
+      "description": "Histogram of the underlying SLI denominator. Exemplars link to Tempo for trace IDs that touched the latency bucket.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 20,
+        "w": 24,
+        "h": 8
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "histogram_quantile(0.99, sum by (le) (rate(teslasync_red_http_request_duration_seconds_bucket[5m])))",
+          "legendFormat": "p99",
+          "exemplar": true
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "s"
+        },
+        "overrides": null
+      }
+    }
+  ],
+  "templating": {
+    "list": []
+  },
+  "links": [
+    {
+      "title": "Tempo (traces)",
+      "type": "link",
+      "url": "/explore?left=%7B%22datasource%22:%22tempo%22%7D"
+    }
+  ],
+  "annotations": {
+    "list": []
+  }
+}
diff --git a/helm/teslasync/files/grafana/dashboards/slo-geofence_pricing_write_availability.json b/helm/teslasync/files/grafana/dashboards/slo-geofence_pricing_write_availability.json
new file mode 100644
index 0000000000..2b85774c70
--- /dev/null
+++ b/helm/teslasync/files/grafana/dashboards/slo-geofence_pricing_write_availability.json
@@ -0,0 +1,236 @@
+{
+  "uid": "slo-geofence_pricing_write_availability",
+  "title": "SLO: geofence_pricing_write_availability",
+  "description": "Charging-place rate creation, apply/backfill, and lifecycle writes must avoid server errors.",
+  "tags": [
+    "slo",
+    "owner:platform",
+    "http",
+    "geofences",
+    "pricing",
+    "writes"
+  ],
+  "schemaVersion": 38,
+  "version": 1,
+  "time": {
+    "from": "now-24h",
+    "to": "now"
+  },
+  "refresh": "30s",
+  "panels": [
+    {
+      "id": 1,
+      "type": "stat",
+      "title": "SLI (5m)",
+      "description": "Current good/valid ratio.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 0,
+        "w": 6,
+        "h": 4
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "slo:geofence_pricing_write_availability:ratio_rate5m",
+          "legendFormat": "ratio_5m"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 2,
+      "type": "stat",
+      "title": "Objective",
+      "description": "SLO target.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 6,
+        "y": 0,
+        "w": 6,
+        "h": 4
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "vector(0.99)",
+          "legendFormat": "objective"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 3,
+      "type": "stat",
+      "title": "Error budget remaining (30d)",
+      "description": "1 - (1 - SLI_30d) / (1 - objective). Negative = budget blown.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 12,
+        "y": 0,
+        "w": 12,
+        "h": 4
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "1 - ((1 - slo:geofence_pricing_write_availability:ratio_rate30d) / (1 - 0.99))",
+          "legendFormat": "budget_remaining"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 4,
+      "type": "timeseries",
+      "title": "SLI over time (5m / 1h / 6h)",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 4,
+        "w": 24,
+        "h": 8
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "slo:geofence_pricing_write_availability:ratio_rate5m",
+          "legendFormat": "5m"
+        },
+        {
+          "refId": "B",
+          "expr": "slo:geofence_pricing_write_availability:ratio_rate1h",
+          "legendFormat": "1h"
+        },
+        {
+          "refId": "C",
+          "expr": "slo:geofence_pricing_write_availability:ratio_rate6h",
+          "legendFormat": "6h"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 5,
+      "type": "timeseries",
+      "title": "Burn rate (1h / 6h)",
+      "description": "Bad-event ratio multiplied so the y-axis is in 'budgets per hour' units.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 12,
+        "w": 24,
+        "h": 8
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "(1 - slo:geofence_pricing_write_availability:ratio_rate1h) / (1 - 0.99)",
+          "legendFormat": "1h"
+        },
+        {
+          "refId": "B",
+          "expr": "(1 - slo:geofence_pricing_write_availability:ratio_rate6h) / (1 - 0.99)",
+          "legendFormat": "6h"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "decimals": 3
+        },
+        "overrides": null
+      }
+    },
+    {
+      "id": 6,
+      "type": "timeseries",
+      "title": "Latency (with Tempo exemplars)",
+      "description": "Histogram of the underlying SLI denominator. Exemplars link to Tempo for trace IDs that touched the latency bucket.",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 20,
+        "w": 24,
+        "h": 8
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "histogram_quantile(0.99, sum by (le) (rate(teslasync_red_http_request_duration_seconds_bucket[5m])))",
+          "legendFormat": "p99",
+          "exemplar": true
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "s"
+        },
+        "overrides": null
+      }
+    }
+  ],
+  "templating": {
+    "list": []
+  },
+  "links": [
+    {
+      "title": "Tempo (traces)",
+      "type": "link",
+      "url": "/explore?left=%7B%22datasource%22:%22tempo%22%7D"
+    }
+  ],
+  "annotations": {
+    "list": []
+  }
+}
diff --git a/helm/teslasync/files/grafana/dashboards/slo-overview.json b/helm/teslasync/files/grafana/dashboards/slo-overview.json
index 0578b84c52..02dd3118db 100644
--- a/helm/teslasync/files/grafana/dashboards/slo-overview.json
+++ b/helm/teslasync/files/grafana/dashboards/slo-overview.json
@@ -357,6 +357,92 @@
           "values": false
         }
       }
+    },
+    {
+      "id": 9,
+      "type": "stat",
+      "title": "geofence_pricing_read_availability",
+      "description": "Objective: 99.5%; owner: platform",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 0,
+        "y": 8,
+        "w": 6,
+        "h": 4
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "slo:geofence_pricing_read_availability:ratio_rate1h",
+          "legendFormat": "1h"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      },
+      "options": {
+        "colorMode": "value",
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        }
+      }
+    },
+    {
+      "id": 10,
+      "type": "stat",
+      "title": "geofence_pricing_write_availability",
+      "description": "Objective: 99%; owner: platform",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "gridPos": {
+        "x": 6,
+        "y": 8,
+        "w": 6,
+        "h": 4
+      },
+      "targets": [
+        {
+          "refId": "A",
+          "expr": "slo:geofence_pricing_write_availability:ratio_rate1h",
+          "legendFormat": "1h"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "unit": "percentunit",
+          "min": 0,
+          "max": 1,
+          "decimals": 3
+        },
+        "overrides": null
+      },
+      "options": {
+        "colorMode": "value",
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        }
+      }
     }
   ],
   "templating": {
diff --git a/helm/teslasync/files/prometheus/alerting-rules.yaml b/helm/teslasync/files/prometheus/alerting-rules.yaml
index c09df94ed0..a79cd41e90 100644
--- a/helm/teslasync/files/prometheus/alerting-rules.yaml
+++ b/helm/teslasync/files/prometheus/alerting-rules.yaml
@@ -242,3 +242,63 @@ groups:
           summary: "SLO frontend_lcp slow burn: error budget consumed at >=6x sustainable rate over the last 6h"
           description: "Error budget for SLO \"frontend_lcp\" (objective 90%, owner frontend) is burning at >=6x the sustainable rate on both the 6h and 30m windows."
           runbook_url: "docs/runbooks/phase-44-respond-to-burn-alert.md"
+  - name: slo_geofence_pricing_read_availability_burn
+    rules:
+      - alert: SLOGeofencePricingReadAvailabilityFastBurn
+        expr: "(1 - slo:geofence_pricing_read_availability:ratio_rate1h) > 0.072000 and (1 - slo:geofence_pricing_read_availability:ratio_rate5m) > 0.072000"
+        for: 2m
+        labels:
+          severity: page
+          slo: "geofence_pricing_read_availability"
+          owner: "platform"
+          burn_rate: "14.4"
+          long_window: "1h"
+          short_window: "5m"
+        annotations:
+          summary: "SLO geofence_pricing_read_availability fast burn: error budget consumed at >=14.4x sustainable rate over the last 1h"
+          description: "Error budget for SLO \"geofence_pricing_read_availability\" (objective 99.5%, owner platform) is burning at >=14.4x the sustainable rate on both the 1h and 5m windows."
+          runbook_url: "docs/runbooks/phase-44-respond-to-burn-alert.md"
+      - alert: SLOGeofencePricingReadAvailabilitySlowBurn
+        expr: "(1 - slo:geofence_pricing_read_availability:ratio_rate6h) > 0.030000 and (1 - (sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\",status_class!=\"5xx\"}[30m]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\"}[30m]))), 1)) > 0.030000"
+        for: 15m
+        labels:
+          severity: ticket
+          slo: "geofence_pricing_read_availability"
+          owner: "platform"
+          burn_rate: "6"
+          long_window: "6h"
+          short_window: "30m"
+        annotations:
+          summary: "SLO geofence_pricing_read_availability slow burn: error budget consumed at >=6x sustainable rate over the last 6h"
+          description: "Error budget for SLO \"geofence_pricing_read_availability\" (objective 99.5%, owner platform) is burning at >=6x the sustainable rate on both the 6h and 30m windows."
+          runbook_url: "docs/runbooks/phase-44-respond-to-burn-alert.md"
+  - name: slo_geofence_pricing_write_availability_burn
+    rules:
+      - alert: SLOGeofencePricingWriteAvailabilityFastBurn
+        expr: "(1 - slo:geofence_pricing_write_availability:ratio_rate1h) > 0.144000 and (1 - slo:geofence_pricing_write_availability:ratio_rate5m) > 0.144000"
+        for: 2m
+        labels:
+          severity: page
+          slo: "geofence_pricing_write_availability"
+          owner: "platform"
+          burn_rate: "14.4"
+          long_window: "1h"
+          short_window: "5m"
+        annotations:
+          summary: "SLO geofence_pricing_write_availability fast burn: error budget consumed at >=14.4x sustainable rate over the last 1h"
+          description: "Error budget for SLO \"geofence_pricing_write_availability\" (objective 99%, owner platform) is burning at >=14.4x the sustainable rate on both the 1h and 5m windows."
+          runbook_url: "docs/runbooks/phase-44-respond-to-burn-alert.md"
+      - alert: SLOGeofencePricingWriteAvailabilitySlowBurn
+        expr: "(1 - slo:geofence_pricing_write_availability:ratio_rate6h) > 0.060000 and (1 - (sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\",status_class!=\"5xx\"}[30m]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\"}[30m]))), 1)) > 0.060000"
+        for: 15m
+        labels:
+          severity: ticket
+          slo: "geofence_pricing_write_availability"
+          owner: "platform"
+          burn_rate: "6"
+          long_window: "6h"
+          short_window: "30m"
+        annotations:
+          summary: "SLO geofence_pricing_write_availability slow burn: error budget consumed at >=6x sustainable rate over the last 6h"
+          description: "Error budget for SLO \"geofence_pricing_write_availability\" (objective 99%, owner platform) is burning at >=6x the sustainable rate on both the 6h and 30m windows."
+          runbook_url: "docs/runbooks/phase-44-respond-to-burn-alert.md"
diff --git a/helm/teslasync/files/prometheus/recording-rules.yaml b/helm/teslasync/files/prometheus/recording-rules.yaml
index 3c7751ca2f..16d9931a92 100644
--- a/helm/teslasync/files/prometheus/recording-rules.yaml
+++ b/helm/teslasync/files/prometheus/recording-rules.yaml
@@ -249,3 +249,65 @@ groups:
           window: "30d"
           owner: "frontend"
           objective: "90"
+  - name: slo_geofence_pricing_read_availability
+    interval: 30s
+    rules:
+      - record: slo:geofence_pricing_read_availability:ratio_rate5m
+        expr: "(sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\",status_class!=\"5xx\"}[5m]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\"}[5m]))), 1)"
+        labels:
+          slo: "geofence_pricing_read_availability"
+          window: "5m"
+          owner: "platform"
+          objective: "99.5"
+      - record: slo:geofence_pricing_read_availability:ratio_rate1h
+        expr: "(sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\",status_class!=\"5xx\"}[1h]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\"}[1h]))), 1)"
+        labels:
+          slo: "geofence_pricing_read_availability"
+          window: "1h"
+          owner: "platform"
+          objective: "99.5"
+      - record: slo:geofence_pricing_read_availability:ratio_rate6h
+        expr: "(sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\",status_class!=\"5xx\"}[6h]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\"}[6h]))), 1)"
+        labels:
+          slo: "geofence_pricing_read_availability"
+          window: "6h"
+          owner: "platform"
+          objective: "99.5"
+      - record: slo:geofence_pricing_read_availability:ratio_rate30d
+        expr: "(sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\",status_class!=\"5xx\"}[30d]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\"}[30d]))), 1)"
+        labels:
+          slo: "geofence_pricing_read_availability"
+          window: "30d"
+          owner: "platform"
+          objective: "99.5"
+  - name: slo_geofence_pricing_write_availability
+    interval: 30s
+    rules:
+      - record: slo:geofence_pricing_write_availability:ratio_rate5m
+        expr: "(sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\",status_class!=\"5xx\"}[5m]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\"}[5m]))), 1)"
+        labels:
+          slo: "geofence_pricing_write_availability"
+          window: "5m"
+          owner: "platform"
+          objective: "99"
+      - record: slo:geofence_pricing_write_availability:ratio_rate1h
+        expr: "(sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\",status_class!=\"5xx\"}[1h]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\"}[1h]))), 1)"
+        labels:
+          slo: "geofence_pricing_write_availability"
+          window: "1h"
+          owner: "platform"
+          objective: "99"
+      - record: slo:geofence_pricing_write_availability:ratio_rate6h
+        expr: "(sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\",status_class!=\"5xx\"}[6h]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\"}[6h]))), 1)"
+        labels:
+          slo: "geofence_pricing_write_availability"
+          window: "6h"
+          owner: "platform"
+          objective: "99"
+      - record: slo:geofence_pricing_write_availability:ratio_rate30d
+        expr: "(sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\",status_class!=\"5xx\"}[30d]))) / clamp_min((sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\"}[30d]))), 1)"
+        labels:
+          slo: "geofence_pricing_write_availability"
+          window: "30d"
+          owner: "platform"
+          objective: "99"
diff --git a/internal/adapter/postgres/queries/charging.go b/internal/adapter/postgres/queries/charging.go
index 66f9bf0603..c3dcbc2a1d 100644
--- a/internal/adapter/postgres/queries/charging.go
+++ b/internal/adapter/postgres/queries/charging.go
@@ -58,12 +58,13 @@ const (
 		INSERT INTO charging_sessions (
 			id, vehicle_id, charger_type, start_soc_pct, end_soc_pct,
 			total_energy_added_wh, peak_power_w, cost_decimal,
-			started_at, ended_at
+			cost_source, started_at, ended_at
 		) VALUES (
 			$1::bigint, $2::bigint, $3,
 			$4::double precision, $5::double precision,
 			$6::double precision, $7::double precision,
 			$8::numeric / 100.0,
+			'unknown',
 			$9, $10
 		)
 		ON CONFLICT (id) DO UPDATE SET
@@ -72,6 +73,11 @@ const (
 			end_soc_pct = EXCLUDED.end_soc_pct,
 			total_energy_added_wh = EXCLUDED.total_energy_added_wh,
 			peak_power_w = EXCLUDED.peak_power_w,
-			cost_decimal = EXCLUDED.cost_decimal,
+			cost_decimal = CASE
+				WHEN charging_sessions.cost_source IS NULL
+					THEN EXCLUDED.cost_decimal
+				ELSE charging_sessions.cost_decimal
+			END,
+			cost_source = COALESCE(charging_sessions.cost_source, EXCLUDED.cost_source),
 			ended_at = EXCLUDED.ended_at`
 )
diff --git a/internal/api/apperror/apperror.go b/internal/api/apperror/apperror.go
index ea914bbc06..46737d5eb0 100644
--- a/internal/api/apperror/apperror.go
+++ b/internal/api/apperror/apperror.go
@@ -129,6 +129,15 @@ var (
 	ErrGeofenceNotFound      = &AppError{"GEOFENCE_NOT_FOUND", "geofence not found", http.StatusNotFound, ErrCatGeofence}
 	ErrGeofenceInvalidCoords = &AppError{"GEOFENCE_INVALID_COORDINATES", "invalid geofence coordinates", http.StatusBadRequest, ErrCatGeofence}
 	ErrGeofenceInvalidRadius = &AppError{"GEOFENCE_INVALID_RADIUS", "geofence radius must be positive", http.StatusBadRequest, ErrCatGeofence}
+
+	// Charging-place pricing (migration 000228_geofence_charging_place_pricing).
+	ErrGeofenceRateNotFound  = &AppError{"GEOFENCE_RATE_NOT_FOUND", "geofence rate not found", http.StatusNotFound, ErrCatGeofence}
+	ErrGeofenceRateConflict  = &AppError{"GEOFENCE_RATE_CONFLICT", "rate interval overlaps an existing rate for this geofence", http.StatusConflict, ErrCatGeofence}
+	ErrGeofenceRateInvalid   = &AppError{"GEOFENCE_RATE_INVALID", "invalid geofence rate", http.StatusBadRequest, ErrCatGeofence}
+	ErrGeofenceRateInUse     = &AppError{"GEOFENCE_RATE_IN_USE", "rate is already referenced by charging history", http.StatusConflict, ErrCatGeofence}
+	ErrGeofenceRateImmutable = &AppError{"GEOFENCE_RATE_IMMUTABLE", "effective rates are immutable; add a new dated rate instead", http.StatusConflict, ErrCatGeofence}
+	ErrGeofenceArchived      = &AppError{"GEOFENCE_ARCHIVED", "geofence is archived", http.StatusConflict, ErrCatGeofence}
+	ErrGeofenceHasHistory    = &AppError{"GEOFENCE_HAS_HISTORY", "geofence has associated charging/drive history; archive instead of deleting", http.StatusConflict, ErrCatGeofence}
 )
 
 // --- Commands ---
@@ -198,6 +207,8 @@ func ErrorCatalog() []*AppError {
 		ErrInvalidInput, ErrInvalidJSON, ErrMissingField, ErrInvalidRange,
 		ErrInvalidID, ErrPayloadTooLarge,
 		ErrGeofenceNotFound, ErrGeofenceInvalidCoords, ErrGeofenceInvalidRadius,
+		ErrGeofenceRateNotFound, ErrGeofenceRateConflict, ErrGeofenceRateInvalid,
+		ErrGeofenceRateInUse, ErrGeofenceRateImmutable, ErrGeofenceArchived, ErrGeofenceHasHistory,
 		ErrCommandNotSupported, ErrCommandFailed, ErrCommandTimeout,
 		ErrBackupConfigNotFound, ErrBackupRunNotFound, ErrBackupFailed,
 		ErrBackupStorageError, ErrRestoreFailed,
diff --git a/internal/api/datarepair/handler.go b/internal/api/datarepair/handler.go
index 89611d4c98..5b7ee30494 100644
--- a/internal/api/datarepair/handler.go
+++ b/internal/api/datarepair/handler.go
@@ -13,6 +13,7 @@ import (
 	drivedb "github.com/ev-dev-labs/teslasync/internal/database/drive"
 	chargingmodel "github.com/ev-dev-labs/teslasync/internal/models/charging"
 	drivemodel "github.com/ev-dev-labs/teslasync/internal/models/drive"
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
 	"github.com/rs/zerolog/log"
 )
 
@@ -71,6 +72,32 @@ func (h *DataRepairHandler) now() time.Time {
 	return time.Now().UTC()
 }
 
+// applyManualCostProvenance prevents the public repair endpoint from forging
+// system-owned pricing provenance. A user-supplied cost becomes a manual
+// actual and no longer points at the tariff it may have replaced. Clearing a
+// cost clears its provenance so a later explicit tariff apply can price it.
+func applyManualCostProvenance(existing *chargingmodel.ChargingSession, patch map[string]interface{}) {
+	delete(patch, "cost_source")
+	delete(patch, "rate_id")
+	delete(patch, "geofence_id")
+
+	if cost, supplied := patch["cost_decimal"]; supplied {
+		patch["rate_id"] = nil
+		if cost == nil {
+			patch["cost_currency"] = nil
+			patch["cost_source"] = nil
+			return
+		}
+		patch["cost_source"] = systemmodel.CostSourceManual
+		return
+	}
+	if _, supplied := patch["cost_currency"]; supplied &&
+		existing != nil && existing.CostDecimal != nil {
+		patch["rate_id"] = nil
+		patch["cost_source"] = systemmodel.CostSourceManual
+	}
+}
+
 // StaleSessionsResponse contains charging sessions and drives that are still open.
 type StaleSessionsResponse struct {
 	StaleCharging []*chargingmodel.ChargingSession `json:"stale_charging"`
@@ -134,6 +161,7 @@ func (h *DataRepairHandler) UpdateCharging(w http.ResponseWriter, r *http.Reques
 		httpx.WriteError(w, http.StatusBadRequest, "invalid JSON body")
 		return
 	}
+	applyManualCostProvenance(existing, patch)
 
 	if err := h.chargingRepo.PartialUpdate(ctx, id, patch); err != nil {
 		log.Error().Err(err).Int64("id", id).Msg("failed to update charging session")
diff --git a/internal/api/datarepair/handler_test.go b/internal/api/datarepair/handler_test.go
index 2d12b27563..7f0ed48610 100644
--- a/internal/api/datarepair/handler_test.go
+++ b/internal/api/datarepair/handler_test.go
@@ -255,7 +255,7 @@ func TestGetStaleSessions_HappyPath(t *testing.T) {
 	}
 	drive := &fakeDriveRepo{
 		getStaleFn: func(context.Context, time.Time) ([]*drivemodel.Drive, error) {
-			return []*drivemodel.Drive{sampleDrive(21, testNow.Add(-48 * time.Hour))}, nil
+			return []*drivemodel.Drive{sampleDrive(21, testNow.Add(-48*time.Hour))}, nil
 		},
 	}
 	h := newTestHandler(charging, drive)
@@ -414,6 +414,56 @@ func TestUpdateCharging_HappyPath(t *testing.T) {
 	}
 }
 
+func TestUpdateCharging_CostProvenance(t *testing.T) {
+	t.Parallel()
+
+	t.Run("manual cost overrides system provenance", func(t *testing.T) {
+		fake := &fakeChargingRepo{
+			getByIDFn: func(_ context.Context, id int64) (*chargingmodel.ChargingSession, error) {
+				return sampleCharging(id), nil
+			},
+		}
+		h := newTestHandler(fake, &fakeDriveRepo{})
+
+		rec := doReq(t, h, http.MethodPut, "/data-repair/charging/42",
+			strings.NewReader(`{"cost_decimal":12.5,"cost_currency":"USD","cost_source":"tesla_actual","rate_id":9,"geofence_id":8}`))
+
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200. body=%s", rec.Code, rec.Body.String())
+		}
+		if got := fake.partialFields["cost_source"]; got != "manual" {
+			t.Fatalf("cost_source = %v, want manual", got)
+		}
+		if got, ok := fake.partialFields["rate_id"]; !ok || got != nil {
+			t.Fatalf("rate_id = %v (present=%v), want explicit nil", got, ok)
+		}
+		if _, ok := fake.partialFields["geofence_id"]; ok {
+			t.Fatalf("public update must not accept geofence_id: %v", fake.partialFields)
+		}
+	})
+
+	t.Run("clearing cost makes it eligible for a later tariff apply", func(t *testing.T) {
+		fake := &fakeChargingRepo{
+			getByIDFn: func(_ context.Context, id int64) (*chargingmodel.ChargingSession, error) {
+				return sampleCharging(id), nil
+			},
+		}
+		h := newTestHandler(fake, &fakeDriveRepo{})
+
+		rec := doReq(t, h, http.MethodPut, "/data-repair/charging/42",
+			strings.NewReader(`{"cost_decimal":null,"cost_source":"manual","rate_id":9}`))
+
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200. body=%s", rec.Code, rec.Body.String())
+		}
+		for _, key := range []string{"cost_decimal", "cost_currency", "cost_source", "rate_id"} {
+			if got, ok := fake.partialFields[key]; !ok || got != nil {
+				t.Errorf("%s = %v (present=%v), want explicit nil", key, got, ok)
+			}
+		}
+	})
+}
+
 func TestUpdateCharging_Errors(t *testing.T) {
 	t.Parallel()
 
diff --git a/internal/api/geofence/handler.go b/internal/api/geofence/handler.go
index bdaf02d5a8..a72b523b25 100644
--- a/internal/api/geofence/handler.go
+++ b/internal/api/geofence/handler.go
@@ -4,7 +4,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
-	"math"
 	"net/http"
 	"strings"
 
@@ -68,47 +67,6 @@ func coalesceGeofenceRequestSpellings(req *geofenceCreateRequest) {
 	}
 }
 
-// geofenceCircleSegments controls the smoothness of the synthesized
-// polygon. 32 segments keeps the WKT compact while staying visually round
-// at typical city-block radii.
-const geofenceCircleSegments = 32
-
-// circleToPolygonWKT approximates a geodetic circle with a regular N-gon.
-// Coordinates are emitted in WKT order: `POLYGON((lon lat, ..., lon lat))`,
-// closing on the first vertex per the OGC spec.
-func circleToPolygonWKT(latDeg, lonDeg, radiusMeters float64, segments int) string {
-	if segments < 3 {
-		segments = 3
-	}
-	const metersPerDegLat = 111_320.0
-	latRad := latDeg * math.Pi / 180.0
-	metersPerDegLon := metersPerDegLat * math.Cos(latRad)
-	if metersPerDegLon < 1 {
-		// At the poles longitude collapses; clamp so we never divide by ~0.
-		metersPerDegLon = 1
-	}
-	dLat := radiusMeters / metersPerDegLat
-	dLon := radiusMeters / metersPerDegLon
-
-	var b strings.Builder
-	b.WriteString("POLYGON((")
-	for i := 0; i < segments; i++ {
-		theta := 2 * math.Pi * float64(i) / float64(segments)
-		lon := lonDeg + dLon*math.Sin(theta)
-		lat := latDeg + dLat*math.Cos(theta)
-		if i > 0 {
-			b.WriteByte(',')
-		}
-		fmt.Fprintf(&b, "%.7f %.7f", lon, lat)
-	}
-	// Close the ring by repeating the first vertex.
-	lonClose := lonDeg + dLon*math.Sin(0)
-	latClose := latDeg + dLat*math.Cos(0)
-	fmt.Fprintf(&b, ",%.7f %.7f", lonClose, latClose)
-	b.WriteString("))")
-	return b.String()
-}
-
 // decodeGeofenceWriteBody unmarshals the request and resolves whichever
 // geometry the client supplied into a populated *systemmodel.Geofence.
 //
@@ -141,7 +99,7 @@ func decodeGeofenceWriteBody(body io.Reader) (*systemmodel.Geofence, *geofenceCr
 	}
 
 	if req.Latitude != nil && req.Longitude != nil && req.Radius != nil {
-		g.PolygonWKT = circleToPolygonWKT(*req.Latitude, *req.Longitude, *req.Radius, geofenceCircleSegments)
+		g.PolygonWKT = systemmodel.CircleToPolygonWKT(*req.Latitude, *req.Longitude, *req.Radius)
 	}
 
 	return g, &req, nil
@@ -179,6 +137,16 @@ type Handler struct {
 	// WithBulkStore overrides for tests. Never nil after NewHandler
 	// unless both db and WithBulkStore(nil) were passed.
 	bulk BulkStore
+	// rateRepo is the resolved charging-place discovery-review, archive,
+	// rate-CRUD, and preview/apply-repricing store used by
+	// rate_handler.go. Defaults to geofenceRepo; WithRateStore overrides
+	// for tests. See geofenceRateRepo in rate_handler.go for the exact
+	// method subset and rationale (same "small interface + Option +
+	// default-wire the concrete repo" idiom as BulkStore above, applied
+	// to the endpoints added for the geofence charging-place pricing
+	// feature so they get real route/validation/response-shape test
+	// coverage instead of a hand-duplicated "mirror").
+	rateRepo geofenceRateRepo
 	// audit is the optional per-mutation audit callback. nil → no-op.
 	// Bound to "geofence" entity_type at the call site so the subpackage
 	// does not need to know about the parent's audit categorization.
@@ -201,6 +169,12 @@ type AuditFunc func(r *http.Request, action string, entityID *int64, detail stri
 // the constructor wire the repo.
 func WithBulkStore(s BulkStore) Option { return func(h *Handler) { h.bulk = s } }
 
+// WithRateStore overrides the default rate/discovery/repricing store
+// (which is the same *geofencedb.GeofenceRepo used by the CRUD methods
+// and bulk store). Intended for tests; production code should construct
+// via NewHandler(db) and let the constructor wire the repo.
+func WithRateStore(s geofenceRateRepo) Option { return func(h *Handler) { h.rateRepo = s } }
+
 // WithAuditFunc installs the audit callback invoked after a successful
 // bulk_delete. Without it, BulkUpdate skips the audit row but still
 // performs the delete.
@@ -214,6 +188,7 @@ func NewHandler(db *database.DB, opts ...Option) *Handler {
 	if db != nil {
 		h.geofenceRepo = geofencedb.NewGeofenceRepo(db)
 		h.bulk = h.geofenceRepo
+		h.rateRepo = h.geofenceRepo
 	}
 	for _, opt := range opts {
 		opt(h)
@@ -222,7 +197,15 @@ func NewHandler(db *database.DB, opts ...Option) *Handler {
 }
 
 func (h *Handler) List(w http.ResponseWriter, r *http.Request) {
-	geofences, err := h.geofenceRepo.GetAll(r.Context())
+	var (
+		geofences []*systemmodel.Geofence
+		err       error
+	)
+	if strings.EqualFold(strings.TrimSpace(r.URL.Query().Get("include_archived")), "true") {
+		geofences, err = h.geofenceRepo.GetAllIncludingArchived(r.Context())
+	} else {
+		geofences, err = h.geofenceRepo.GetAll(r.Context())
+	}
 	if err != nil {
 		log.Error().Err(err).Msg("failed to list geofences")
 		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to list geofences"))
@@ -350,6 +333,15 @@ func (h *Handler) Update(w http.ResponseWriter, r *http.Request) {
 	httpx.WriteJSON(w, http.StatusOK, &merged)
 }
 
+// Delete hard-deletes a geofence with no charging/drive history. A place
+// that has ever been referenced by a charging session, rate, or drive
+// endpoint (geofence_id / rate_id / start_geofence_id / end_geofence_id —
+// none of which carry a DB-level FK, by design, to keep the telemetry hot
+// path unblocked) is NEVER hard-deleted: the historical-integrity rule
+// requires those places to go through POST /{geofenceID}/archive instead,
+// so already-priced sessions keep resolving their place by id forever. A
+// place with no history at all keeps working exactly as before this
+// feature.
 func (h *Handler) Delete(w http.ResponseWriter, r *http.Request) {
 	id, err := apiparams.URLParamInt64(r, "geofenceID")
 	if err != nil {
@@ -357,6 +349,17 @@ func (h *Handler) Delete(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	hasHistory, err := h.geofenceRepo.HasChargingHistory(r.Context(), id)
+	if err != nil {
+		log.Error().Err(err).Int64("id", id).Msg("failed to check geofence charging history")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to check geofence history"))
+		return
+	}
+	if hasHistory {
+		apperror.Write(w, r, apperror.ErrGeofenceHasHistory)
+		return
+	}
+
 	if err := h.geofenceRepo.Delete(r.Context(), id); err != nil {
 		log.Error().Err(err).Int64("id", id).Msg("failed to delete geofence")
 		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to delete geofence"))
diff --git a/internal/api/geofence/handler_test.go b/internal/api/geofence/handler_test.go
index 5bcd10ca07..407a6305ae 100644
--- a/internal/api/geofence/handler_test.go
+++ b/internal/api/geofence/handler_test.go
@@ -25,7 +25,7 @@ func TestCircleToPolygonWKT_RoundTripsCenterAndRadius(t *testing.T) {
 		lon    = -122.208886
 		radius = 100.0
 	)
-	wkt := circleToPolygonWKT(lat, lon, radius, geofenceCircleSegments)
+	wkt := systemmodel.CircleToPolygonWKT(lat, lon, radius)
 	if !strings.HasPrefix(wkt, "POLYGON((") || !strings.HasSuffix(wkt, "))") {
 		t.Fatalf("WKT not well-formed: %q", wkt)
 	}
diff --git a/internal/api/geofence/rate_handler.go b/internal/api/geofence/rate_handler.go
new file mode 100644
index 0000000000..e8e6feea26
--- /dev/null
+++ b/internal/api/geofence/rate_handler.go
@@ -0,0 +1,568 @@
+package geofence
+
+import (
+	"context"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"math"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/ev-dev-labs/teslasync/internal/api/apiparams"
+	"github.com/ev-dev-labs/teslasync/internal/api/apperror"
+	"github.com/ev-dev-labs/teslasync/internal/api/httpx"
+	geofencedb "github.com/ev-dev-labs/teslasync/internal/database/geofence"
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+	"github.com/ev-dev-labs/teslasync/internal/tracing"
+
+	"github.com/rs/zerolog/log"
+)
+
+// =============================================================================
+// rate_handler.go — charging-place discovery-review, archive, time-versioned
+// rate CRUD, and preview/apply-repricing HTTP endpoints for the
+// geofence-based charging-place pricing feature (migration
+// 000228_geofence_charging_place_pricing). See internal/database/geofence's
+// repo_discovery.go, repo_archive.go, repo_rates.go, repo_charging_summary.go
+// for the business rules each endpoint delegates to.
+//
+// Every mutating handler here re-derives its response from the database
+// after the write (rather than trusting the in-memory request) so the
+// caller's optimistic cache update always reflects the authoritative row —
+// same discipline as the existing Update handler in handler.go.
+// =============================================================================
+
+// geofenceRateRepo is the subset of *geofencedb.GeofenceRepo's methods used
+// by this file's discovery-review, archive, rate-CRUD, and
+// preview/apply-repricing endpoints.
+//
+// Declaring a narrow interface here — rather than referencing the
+// concrete *geofencedb.GeofenceRepo type directly, as the pre-existing CRUD
+// handlers in handler.go do — lets tests substitute a fake and get full
+// route+validation+response-shape coverage without a live Postgres
+// connection or a hand-duplicated "mirror" of each handler body (the
+// approach handler_test.go's fakeGeofenceUpdateRepo had to fall back to
+// for the one existing repo-touching CRUD handler). See rate_handler_test.go
+// for the fake.
+//
+// Handler.rateRepo defaults to the same *geofencedb.GeofenceRepo instance
+// used everywhere else (see NewHandler); WithRateStore overrides it in
+// tests. Every method here is a 1:1 copy of a *geofencedb.GeofenceRepo
+// method signature — keep this list in sync if repo signatures change.
+type geofenceRateRepo interface {
+	GetByID(ctx context.Context, id int64) (*systemmodel.Geofence, error)
+	ListNeedsReview(ctx context.Context) ([]*systemmodel.Geofence, error)
+	ListActiveRatesNow(ctx context.Context) ([]*systemmodel.GeofenceRate, error)
+	Archive(ctx context.Context, id int64) error
+	Unarchive(ctx context.Context, id int64) error
+	MarkReviewed(ctx context.Context, id int64) error
+	ListRates(ctx context.Context, geofenceID int64) ([]*systemmodel.GeofenceRate, error)
+	CreateRate(ctx context.Context, gr *systemmodel.GeofenceRate) error
+	DeleteRate(ctx context.Context, geofenceID, rateID int64) error
+	PreviewApplyRate(ctx context.Context, scope systemmodel.GeofenceRateApplyScope) (*systemmodel.GeofenceRateImpactPreview, error)
+	ApplyRate(ctx context.Context, scope systemmodel.GeofenceRateApplyScope) (*systemmodel.GeofenceRateApplyResult, error)
+	ChargingSummaryByCurrency(ctx context.Context, geofenceID int64) ([]*systemmodel.GeofenceChargingSummary, error)
+	ChargingActivity(ctx context.Context, geofenceID int64, limit, offset int) ([]*systemmodel.GeofenceChargingActivity, error)
+}
+
+// NeedsReview serves GET /geofences/needs-review — the "Needs Setup" queue
+// of auto-discovered charging-place geofences awaiting a human to confirm
+// name/type/location, oldest first.
+func (h *Handler) NeedsReview(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.needs_review")
+	defer span.End()
+
+	list, err := h.rateRepo.ListNeedsReview(ctx)
+	if err != nil {
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Msg("failed to list geofences needing review")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to list geofences needing review"))
+		return
+	}
+	httpx.WriteJSON(w, http.StatusOK, list)
+}
+
+// CurrentRates serves GET /geofences/rates/current — the currently-active
+// rate (if any) for every geofence in one round trip, powering the Charging
+// Places list view's rate column without a per-row N+1 lookup.
+func (h *Handler) CurrentRates(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.rates_current")
+	defer span.End()
+
+	list, err := h.rateRepo.ListActiveRatesNow(ctx)
+	if err != nil {
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Msg("failed to list current geofence rates")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to list current geofence rates"))
+		return
+	}
+	httpx.WriteJSON(w, http.StatusOK, list)
+}
+
+// loadGeofenceOr404 fetches a geofence by URL param id, writing a
+// structured 400/404/500 response and returning ok=false when the caller
+// must stop. Deliberately resolves archived places too (GetByID has no
+// archived_at filter) so rate-history/charging-activity/summary endpoints
+// keep working for a retired place per the historical-integrity rule.
+func (h *Handler) loadGeofenceOr404(ctx context.Context, w http.ResponseWriter, r *http.Request, id int64) (*systemmodel.Geofence, bool) {
+	g, err := h.rateRepo.GetByID(ctx, id)
+	if err != nil {
+		log.Error().Err(err).Int64("id", id).Msg("failed to load geofence")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to load geofence"))
+		return nil, false
+	}
+	if g == nil {
+		apperror.Write(w, r, apperror.ErrGeofenceNotFound)
+		return nil, false
+	}
+	return g, true
+}
+
+// respondWithGeofence re-fetches and returns the geofence at 200 after a
+// successful state-changing action (Archive/Unarchive/MarkReviewed) so the
+// caller's optimistic cache update has the authoritative row without a
+// second client-issued round trip. Falls back to 204 (the mutation itself
+// already succeeded) on the — unexpected — case that the re-fetch fails.
+func (h *Handler) respondWithGeofence(ctx context.Context, w http.ResponseWriter, id int64) {
+	g, err := h.rateRepo.GetByID(ctx, id)
+	if err != nil || g == nil {
+		log.Warn().Err(err).Int64("geofence_id", id).
+			Msg("geofence mutation succeeded but response refresh failed")
+		w.WriteHeader(http.StatusNoContent)
+		return
+	}
+	httpx.WriteJSON(w, http.StatusOK, g)
+}
+
+// Archive serves POST /geofences/{geofenceID}/archive. Idempotent: archiving
+// an already-archived place is a no-op success.
+func (h *Handler) Archive(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.archive")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id))
+
+	if err := h.rateRepo.Archive(ctx, id); err != nil {
+		if errors.Is(err, geofencedb.ErrGeofenceNotFound) {
+			apperror.Write(w, r, apperror.ErrGeofenceNotFound)
+			return
+		}
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("id", id).Msg("failed to archive geofence")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to archive geofence"))
+		return
+	}
+	h.respondWithGeofence(ctx, w, id)
+}
+
+// Unarchive serves POST /geofences/{geofenceID}/unarchive. Idempotent:
+// unarchiving an already-active place is a no-op success.
+func (h *Handler) Unarchive(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.unarchive")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id))
+
+	if err := h.rateRepo.Unarchive(ctx, id); err != nil {
+		if errors.Is(err, geofencedb.ErrGeofenceNotFound) {
+			apperror.Write(w, r, apperror.ErrGeofenceNotFound)
+			return
+		}
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("id", id).Msg("failed to unarchive geofence")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to unarchive geofence"))
+		return
+	}
+	h.respondWithGeofence(ctx, w, id)
+}
+
+// MarkReviewed serves POST /geofences/{geofenceID}/reviewed — clears
+// needs_review once a human has confirmed/edited an auto-discovered
+// place's name, type, or location.
+func (h *Handler) MarkReviewed(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.mark_reviewed")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id))
+
+	if err := h.rateRepo.MarkReviewed(ctx, id); err != nil {
+		if errors.Is(err, geofencedb.ErrGeofenceNotFound) {
+			apperror.Write(w, r, apperror.ErrGeofenceNotFound)
+			return
+		}
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("id", id).Msg("failed to mark geofence reviewed")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to mark geofence reviewed"))
+		return
+	}
+	h.respondWithGeofence(ctx, w, id)
+}
+
+// ListRates serves GET /geofences/{geofenceID}/rates — every rate version,
+// newest effective_from first, the shape the rate-history UI panel renders
+// directly.
+func (h *Handler) ListRates(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.rates_list")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id))
+
+	if _, ok := h.loadGeofenceOr404(ctx, w, r, id); !ok {
+		return
+	}
+	rates, err := h.rateRepo.ListRates(ctx, id)
+	if err != nil {
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("geofence_id", id).Msg("failed to list geofence rates")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to list geofence rates"))
+		return
+	}
+	httpx.WriteJSON(w, http.StatusOK, rates)
+}
+
+// geofenceRateCreateRequest is the wire shape accepted by CreateRate.
+// RatePerWh/EffectiveFrom are pointers so omission (nil) can be
+// distinguished from an explicit zero value.
+type geofenceRateCreateRequest struct {
+	RatePerWh     *float64   `json:"rate_per_wh"`
+	Currency      string     `json:"currency"`
+	EffectiveFrom *time.Time `json:"effective_from"`
+	EffectiveTo   *time.Time `json:"effective_to,omitempty"`
+}
+
+// validateRateRequestFields duplicates the repository-level rate-integrity
+// checks (non-negative finite rate, uppercase ISO-4217 currency, ordered
+// interval) at the handler boundary so a malformed request gets a precise
+// 400 GEOFENCE_RATE_INVALID instead of a generic 500 from deep inside
+// CreateRate — mirrors the existing validateGeofence/decodeGeofenceWriteBody
+// split in handler.go.
+func validateRateRequestFields(ratePerWh float64, currency string, effectiveFrom time.Time, effectiveTo *time.Time) error {
+	if math.IsNaN(ratePerWh) || math.IsInf(ratePerWh, 0) ||
+		ratePerWh < 0 || ratePerWh >= 1_000_000 {
+		return fmt.Errorf("rate_per_wh must be finite and between 0 (inclusive) and 1000000 (exclusive)")
+	}
+	if len(currency) != 3 {
+		return fmt.Errorf("currency must be a 3-letter ISO 4217 code")
+	}
+	for _, c := range currency {
+		if c < 'A' || c > 'Z' {
+			return fmt.Errorf("currency must be an uppercase ISO 4217 code (got %q)", currency)
+		}
+	}
+	if effectiveFrom.IsZero() {
+		return fmt.Errorf("effective_from is required")
+	}
+	if effectiveTo != nil && !effectiveTo.After(effectiveFrom) {
+		return fmt.Errorf("effective_to must be after effective_from")
+	}
+	return nil
+}
+
+// CreateRate serves POST /geofences/{geofenceID}/rates. Handles both
+// "first-time setup" (no prior rate) and "add a new version" (a later
+// effective_from that closes the prior unbounded interval) — see
+// GeofenceRepo.CreateRate for the exact auto-close/no-overlap semantics.
+// There is deliberately no separate "replace" endpoint: a correction is
+// just another CreateRate call with an effective_from at or after the
+// point the correction should take hold.
+func (h *Handler) CreateRate(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.rates_create")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id))
+
+	var req geofenceRateCreateRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidJSON)
+		return
+	}
+	if req.RatePerWh == nil || req.EffectiveFrom == nil {
+		apperror.Write(w, r, apperror.ErrMissingField.WithMessage("rate_per_wh and effective_from are required"))
+		return
+	}
+	currency := strings.ToUpper(strings.TrimSpace(req.Currency))
+	if err := validateRateRequestFields(*req.RatePerWh, currency, *req.EffectiveFrom, req.EffectiveTo); err != nil {
+		apperror.Write(w, r, apperror.ErrGeofenceRateInvalid.WithMessage(err.Error()))
+		return
+	}
+
+	if _, ok := h.loadGeofenceOr404(ctx, w, r, id); !ok {
+		return
+	}
+
+	gr := &systemmodel.GeofenceRate{
+		GeofenceID:    id,
+		RatePerWh:     *req.RatePerWh,
+		Currency:      currency,
+		EffectiveFrom: req.EffectiveFrom.UTC(),
+	}
+	if req.EffectiveTo != nil {
+		t := req.EffectiveTo.UTC()
+		gr.EffectiveTo = &t
+	}
+
+	if err := h.rateRepo.CreateRate(ctx, gr); err != nil {
+		if errors.Is(err, geofencedb.ErrRateConflict) {
+			apperror.Write(w, r, apperror.ErrGeofenceRateConflict)
+			return
+		}
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("geofence_id", id).Msg("failed to create geofence rate")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to create geofence rate"))
+		return
+	}
+	log.Info().Int64("geofence_id", id).Int64("rate_id", gr.ID).Str("currency", gr.Currency).
+		Time("effective_from", gr.EffectiveFrom).Msg("geofence rate created")
+	httpx.WriteJSON(w, http.StatusCreated, gr)
+}
+
+// DeleteRate serves DELETE /geofences/{geofenceID}/rates/{rateID}. Only an
+// unused future schedule can be cancelled; effective history is immutable.
+func (h *Handler) DeleteRate(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.rates_delete")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	rateID, err := apiparams.URLParamInt64(r, "rateID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid rate ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id), tracing.RateID(rateID))
+
+	if err := h.rateRepo.DeleteRate(ctx, id, rateID); err != nil {
+		switch {
+		case errors.Is(err, geofencedb.ErrRateNotFound):
+			apperror.Write(w, r, apperror.ErrGeofenceRateNotFound)
+			return
+		case errors.Is(err, geofencedb.ErrRateInUse):
+			apperror.Write(w, r, apperror.ErrGeofenceRateInUse)
+			return
+		case errors.Is(err, geofencedb.ErrRateImmutable):
+			apperror.Write(w, r, apperror.ErrGeofenceRateImmutable)
+			return
+		}
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("geofence_id", id).Int64("rate_id", rateID).Msg("failed to delete geofence rate")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to delete geofence rate"))
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}
+
+// parseApplyScope resolves a preview/apply request's optional `from`/`to`
+// RFC3339 query params into a systemmodel.GeofenceRateApplyScope. Both are
+// optional; when absent the scope defaults to the rate's own effective
+// interval (resolved downstream by the repository). Errors on unparseable
+// timestamps or an inverted/empty [from, to) window.
+func parseApplyScope(r *http.Request, geofenceID, rateID int64) (systemmodel.GeofenceRateApplyScope, error) {
+	scope := systemmodel.GeofenceRateApplyScope{GeofenceID: geofenceID, RateID: rateID}
+	if v := strings.TrimSpace(r.URL.Query().Get("from")); v != "" {
+		t, err := time.Parse(time.RFC3339, v)
+		if err != nil {
+			return scope, fmt.Errorf("invalid from: %w", err)
+		}
+		t = t.UTC()
+		scope.From = &t
+	}
+	if v := strings.TrimSpace(r.URL.Query().Get("to")); v != "" {
+		t, err := time.Parse(time.RFC3339, v)
+		if err != nil {
+			return scope, fmt.Errorf("invalid to: %w", err)
+		}
+		t = t.UTC()
+		scope.To = &t
+	}
+	if scope.From != nil && scope.To != nil && !scope.To.After(*scope.From) {
+		return scope, fmt.Errorf("to must be after from")
+	}
+	return scope, nil
+}
+
+// writeApplyScopeRepoError maps the shared PreviewApplyRate/ApplyRate error
+// cases to structured responses. Returns true when it wrote a response
+// (caller must stop); false means the error is an unexpected internal
+// failure the caller should still handle (log + 500).
+func writeApplyScopeRepoError(w http.ResponseWriter, r *http.Request, err error) bool {
+	switch {
+	case errors.Is(err, geofencedb.ErrGeofenceNotFound):
+		apperror.Write(w, r, apperror.ErrGeofenceNotFound)
+		return true
+	case errors.Is(err, geofencedb.ErrRateNotFound):
+		apperror.Write(w, r, apperror.ErrGeofenceRateNotFound)
+		return true
+	default:
+		return false
+	}
+}
+
+// PreviewApplyRate serves GET /geofences/{geofenceID}/rates/{rateID}/preview
+// — read-only, writes nothing. Reports how many sessions are matched (in
+// scope by place + time), eligible (would actually be repriced), and
+// protected (in scope but carry a manual/Tesla-actual cost or an existing
+// cost with unknown provenance), plus the estimated total cost at this rate.
+func (h *Handler) PreviewApplyRate(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.rate_preview_apply")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	rateID, err := apiparams.URLParamInt64(r, "rateID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid rate ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id), tracing.RateID(rateID))
+
+	scope, err := parseApplyScope(r, id, rateID)
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidInput.WithMessage(err.Error()))
+		return
+	}
+
+	preview, err := h.rateRepo.PreviewApplyRate(ctx, scope)
+	if err != nil {
+		if writeApplyScopeRepoError(w, r, err) {
+			return
+		}
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("geofence_id", id).Int64("rate_id", rateID).Msg("failed to preview geofence rate apply")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to preview rate apply"))
+		return
+	}
+	httpx.WriteJSON(w, http.StatusOK, preview)
+}
+
+// ApplyRate serves POST /geofences/{geofenceID}/rates/{rateID}/apply — the
+// write-performing, explicit backfill/reprice action. Bounded to this
+// geofence + rate's interval (optionally narrowed further by `from`/`to`),
+// idempotent, and never overwrites a manual/Tesla-actual cost or an existing
+// cost with unknown provenance. Matched legacy sessions are still attributed
+// to the place so they appear in its activity and summaries — see
+// GeofenceRepo.ApplyRate.
+func (h *Handler) ApplyRate(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.rate_apply")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	rateID, err := apiparams.URLParamInt64(r, "rateID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid rate ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id), tracing.RateID(rateID))
+
+	scope, err := parseApplyScope(r, id, rateID)
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidInput.WithMessage(err.Error()))
+		return
+	}
+
+	result, err := h.rateRepo.ApplyRate(ctx, scope)
+	if err != nil {
+		if writeApplyScopeRepoError(w, r, err) {
+			return
+		}
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("geofence_id", id).Int64("rate_id", rateID).Msg("failed to apply geofence rate")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to apply rate"))
+		return
+	}
+	log.Info().Int64("geofence_id", id).Int64("rate_id", rateID).
+		Int64("priced", result.PricedSessions).Int64("skipped", result.SkippedSessions).
+		Msg("geofence rate applied/backfilled")
+	httpx.WriteJSON(w, http.StatusOK, result)
+}
+
+// ChargingSummary serves GET /geofences/{geofenceID}/charging-summary —
+// priced-session totals grouped by currency (never summed across
+// currencies).
+func (h *Handler) ChargingSummary(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.charging_summary")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id))
+
+	if _, ok := h.loadGeofenceOr404(ctx, w, r, id); !ok {
+		return
+	}
+	summary, err := h.rateRepo.ChargingSummaryByCurrency(ctx, id)
+	if err != nil {
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("geofence_id", id).Msg("failed to load geofence charging summary")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to load charging summary"))
+		return
+	}
+	httpx.WriteJSON(w, http.StatusOK, summary)
+}
+
+// ChargingActivity serves GET /geofences/{geofenceID}/charging-activity —
+// paginated session-level feed (any pricing state) backing the
+// rate-history / affected-sessions UI panels.
+func (h *Handler) ChargingActivity(w http.ResponseWriter, r *http.Request) {
+	ctx, span := tracing.HandlerSpan(r.Context(), "geofence.charging_activity")
+	defer span.End()
+
+	id, err := apiparams.URLParamInt64(r, "geofenceID")
+	if err != nil {
+		apperror.Write(w, r, apperror.ErrInvalidID.WithMessage("invalid geofence ID"))
+		return
+	}
+	span.SetAttributes(tracing.GeofenceID(id))
+
+	if _, ok := h.loadGeofenceOr404(ctx, w, r, id); !ok {
+		return
+	}
+	limit, offset := apiparams.Pagination(r)
+	activity, err := h.rateRepo.ChargingActivity(ctx, id, limit, offset)
+	if err != nil {
+		tracing.EndSpan(span, err)
+		log.Error().Err(err).Int64("geofence_id", id).Msg("failed to load geofence charging activity")
+		apperror.Write(w, r, apperror.ErrDBQuery.WithMessage("failed to load charging activity"))
+		return
+	}
+	httpx.WriteJSON(w, http.StatusOK, activity)
+}
diff --git a/internal/api/geofence/rate_handler_test.go b/internal/api/geofence/rate_handler_test.go
new file mode 100644
index 0000000000..859729573a
--- /dev/null
+++ b/internal/api/geofence/rate_handler_test.go
@@ -0,0 +1,940 @@
+package geofence
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"errors"
+	"io"
+	"math"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+	"time"
+
+	geofencedb "github.com/ev-dev-labs/teslasync/internal/database/geofence"
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+
+	"github.com/go-chi/chi/v5"
+)
+
+// =============================================================================
+// rate_handler_test.go — route/validation/response tests for the
+// charging-place discovery-review, archive, rate-CRUD, and
+// preview/apply-repricing endpoints added in rate_handler.go.
+//
+// Two testing techniques are used, deliberately kept separate:
+//
+//  1. Real production code, NO repo at all (h := NewHandler(nil)): every
+//     handler here validates URL params / request body / query params
+//     BEFORE touching h.rateRepo, so exercising ONLY the validation-failure
+//     branch is 100% safe against a nil rateRepo and requires zero fakes.
+//     This covers "route" (param wiring) and "validation" thoroughly using
+//     the exact shipped code path — not a mirror.
+//  2. Real production code, WithRateStore(fake): geofenceRateRepo (defined
+//     in rate_handler.go) is a narrow, additive interface seam — the
+//     concrete *geofencedb.GeofenceRepo satisfies it structurally with zero
+//     changes, and Handler.rateRepo defaults to it in NewHandler. Swapping
+//     it for fakeRateRepo here exercises the REAL handler bodies end to end
+//     (decode → validate → repo call → error mapping → response envelope)
+//     without a live Postgres connection and without hand-duplicating any
+//     handler logic into the test file (contrast with handler_test.go's
+//     fakeGeofenceUpdateRepo/runGeofenceUpdateMerge mirror, which predates
+//     this seam and was the only option available for the CRUD handlers).
+// =============================================================================
+
+// ---------------------------------------------------------------------------
+// fakeRateRepo — implements geofenceRateRepo in full.
+// ---------------------------------------------------------------------------
+
+type fakeRateRepo struct {
+	getByIDResult *systemmodel.Geofence
+	getByIDErr    error
+	getByIDCalls  []int64
+
+	needsReviewResult []*systemmodel.Geofence
+	needsReviewErr    error
+
+	activeRatesNowResult []*systemmodel.GeofenceRate
+	activeRatesNowErr    error
+
+	archiveErr   error
+	archiveCalls []int64
+
+	unarchiveErr   error
+	unarchiveCalls []int64
+
+	markReviewedErr   error
+	markReviewedCalls []int64
+
+	listRatesResult []*systemmodel.GeofenceRate
+	listRatesErr    error
+
+	createRateErr      error
+	createRateCalls    []systemmodel.GeofenceRate
+	createRateAssignID int64
+
+	deleteRateErr   error
+	deleteRateCalls [][2]int64
+
+	previewResult *systemmodel.GeofenceRateImpactPreview
+	previewErr    error
+	previewCalls  []systemmodel.GeofenceRateApplyScope
+
+	applyResult *systemmodel.GeofenceRateApplyResult
+	applyErr    error
+	applyCalls  []systemmodel.GeofenceRateApplyScope
+
+	summaryResult []*systemmodel.GeofenceChargingSummary
+	summaryErr    error
+
+	activityResult []*systemmodel.GeofenceChargingActivity
+	activityErr    error
+	activityCalls  []struct{ limit, offset int }
+}
+
+func (f *fakeRateRepo) GetByID(_ context.Context, id int64) (*systemmodel.Geofence, error) {
+	f.getByIDCalls = append(f.getByIDCalls, id)
+	if f.getByIDErr != nil {
+		return nil, f.getByIDErr
+	}
+	return f.getByIDResult, nil
+}
+
+func (f *fakeRateRepo) ListNeedsReview(_ context.Context) ([]*systemmodel.Geofence, error) {
+	return f.needsReviewResult, f.needsReviewErr
+}
+
+func (f *fakeRateRepo) ListActiveRatesNow(_ context.Context) ([]*systemmodel.GeofenceRate, error) {
+	return f.activeRatesNowResult, f.activeRatesNowErr
+}
+
+func (f *fakeRateRepo) Archive(_ context.Context, id int64) error {
+	f.archiveCalls = append(f.archiveCalls, id)
+	return f.archiveErr
+}
+
+func (f *fakeRateRepo) Unarchive(_ context.Context, id int64) error {
+	f.unarchiveCalls = append(f.unarchiveCalls, id)
+	return f.unarchiveErr
+}
+
+func (f *fakeRateRepo) MarkReviewed(_ context.Context, id int64) error {
+	f.markReviewedCalls = append(f.markReviewedCalls, id)
+	return f.markReviewedErr
+}
+
+func (f *fakeRateRepo) ListRates(_ context.Context, _ int64) ([]*systemmodel.GeofenceRate, error) {
+	return f.listRatesResult, f.listRatesErr
+}
+
+func (f *fakeRateRepo) CreateRate(_ context.Context, gr *systemmodel.GeofenceRate) error {
+	f.createRateCalls = append(f.createRateCalls, *gr)
+	if f.createRateErr != nil {
+		return f.createRateErr
+	}
+	if f.createRateAssignID != 0 {
+		gr.ID = f.createRateAssignID
+	}
+	return nil
+}
+
+func (f *fakeRateRepo) DeleteRate(_ context.Context, geofenceID, rateID int64) error {
+	f.deleteRateCalls = append(f.deleteRateCalls, [2]int64{geofenceID, rateID})
+	return f.deleteRateErr
+}
+
+func (f *fakeRateRepo) PreviewApplyRate(_ context.Context, scope systemmodel.GeofenceRateApplyScope) (*systemmodel.GeofenceRateImpactPreview, error) {
+	f.previewCalls = append(f.previewCalls, scope)
+	if f.previewErr != nil {
+		return nil, f.previewErr
+	}
+	return f.previewResult, nil
+}
+
+func (f *fakeRateRepo) ApplyRate(_ context.Context, scope systemmodel.GeofenceRateApplyScope) (*systemmodel.GeofenceRateApplyResult, error) {
+	f.applyCalls = append(f.applyCalls, scope)
+	if f.applyErr != nil {
+		return nil, f.applyErr
+	}
+	return f.applyResult, nil
+}
+
+func (f *fakeRateRepo) ChargingSummaryByCurrency(_ context.Context, _ int64) ([]*systemmodel.GeofenceChargingSummary, error) {
+	return f.summaryResult, f.summaryErr
+}
+
+func (f *fakeRateRepo) ChargingActivity(_ context.Context, _ int64, limit, offset int) ([]*systemmodel.GeofenceChargingActivity, error) {
+	f.activityCalls = append(f.activityCalls, struct{ limit, offset int }{limit, offset})
+	return f.activityResult, f.activityErr
+}
+
+// ---------------------------------------------------------------------------
+// shared test helpers
+// ---------------------------------------------------------------------------
+
+// newRateRequest builds an httptest.Request with the given chi URL params
+// injected, matching the router.go mount shape (/geofences/{geofenceID}/...).
+func newRateRequest(method, target string, body io.Reader, params map[string]string) *http.Request {
+	r := httptest.NewRequest(method, target, body)
+	rctx := chi.NewRouteContext()
+	for k, v := range params {
+		rctx.URLParams.Add(k, v)
+	}
+	return r.WithContext(context.WithValue(r.Context(), chi.RouteCtxKey, rctx))
+}
+
+func decodeErrorBody(t *testing.T, w *httptest.ResponseRecorder) map[string]string {
+	t.Helper()
+	var out map[string]string
+	if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+		t.Fatalf("decode error body: %v; body=%s", err, w.Body.String())
+	}
+	return out
+}
+
+func wantErrorResponse(t *testing.T, w *httptest.ResponseRecorder, status int, code string) {
+	t.Helper()
+	if w.Code != status {
+		t.Fatalf("status = %d, want %d; body=%s", w.Code, status, w.Body.String())
+	}
+	body := decodeErrorBody(t, w)
+	if body["code"] != code {
+		t.Errorf("code = %q, want %q (body=%s)", body["code"], code, w.Body.String())
+	}
+}
+
+func sampleGeofence(id int64) *systemmodel.Geofence {
+	return &systemmodel.Geofence{
+		ID:         id,
+		Name:       "Test Place",
+		PolygonWKT: "POLYGON((-74.0 40.0,-74.001 40.0,-74.001 40.001,-74.0 40.001,-74.0 40.0))",
+		Origin:     systemmodel.GeofenceOriginManual,
+	}
+}
+
+// ---------------------------------------------------------------------------
+// (1) Route + validation tests — real handler code, NewHandler(nil), no repo
+// touch. These assert the exact shipped validation branch, not a mirror.
+// ---------------------------------------------------------------------------
+
+func TestRateEndpoints_InvalidGeofenceID(t *testing.T) {
+	h := NewHandler(nil)
+	cases := []struct {
+		name string
+		fn   http.HandlerFunc
+	}{
+		{"Archive", h.Archive},
+		{"Unarchive", h.Unarchive},
+		{"MarkReviewed", h.MarkReviewed},
+		{"ListRates", h.ListRates},
+		{"CreateRate", h.CreateRate},
+		{"DeleteRate", h.DeleteRate},
+		{"PreviewApplyRate", h.PreviewApplyRate},
+		{"ApplyRate", h.ApplyRate},
+		{"ChargingSummary", h.ChargingSummary},
+		{"ChargingActivity", h.ChargingActivity},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			w := httptest.NewRecorder()
+			r := newRateRequest(http.MethodGet, "/x", nil, map[string]string{"geofenceID": "not-a-number", "rateID": "1"})
+			tc.fn(w, r)
+			wantErrorResponse(t, w, http.StatusBadRequest, "VALIDATION_INVALID_ID")
+		})
+	}
+}
+
+func TestRateScopedEndpoints_InvalidRateID(t *testing.T) {
+	h := NewHandler(nil)
+	cases := []struct {
+		name string
+		fn   http.HandlerFunc
+	}{
+		{"DeleteRate", h.DeleteRate},
+		{"PreviewApplyRate", h.PreviewApplyRate},
+		{"ApplyRate", h.ApplyRate},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			w := httptest.NewRecorder()
+			r := newRateRequest(http.MethodGet, "/x", nil, map[string]string{"geofenceID": "1", "rateID": "not-a-number"})
+			tc.fn(w, r)
+			wantErrorResponse(t, w, http.StatusBadRequest, "VALIDATION_INVALID_ID")
+		})
+	}
+}
+
+func TestCreateRate_InvalidJSON(t *testing.T) {
+	h := NewHandler(nil)
+	w := httptest.NewRecorder()
+	r := newRateRequest(http.MethodPost, "/x", bytes.NewReader([]byte(`{not json`)), map[string]string{"geofenceID": "1"})
+	h.CreateRate(w, r)
+	wantErrorResponse(t, w, http.StatusBadRequest, "VALIDATION_INVALID_JSON")
+}
+
+func TestCreateRate_MissingRequiredFields(t *testing.T) {
+	h := NewHandler(nil)
+	cases := []struct {
+		name string
+		body string
+	}{
+		{"missing rate_per_wh", `{"currency":"USD","effective_from":"2026-01-01T00:00:00Z"}`},
+		{"missing effective_from", `{"rate_per_wh":0.0001,"currency":"USD"}`},
+		{"empty body", `{}`},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			w := httptest.NewRecorder()
+			r := newRateRequest(http.MethodPost, "/x", bytes.NewReader([]byte(tc.body)), map[string]string{"geofenceID": "1"})
+			h.CreateRate(w, r)
+			wantErrorResponse(t, w, http.StatusBadRequest, "VALIDATION_MISSING_FIELD")
+		})
+	}
+}
+
+func TestCreateRate_InvalidFieldValues(t *testing.T) {
+	h := NewHandler(nil)
+	cases := []struct {
+		name string
+		body string
+	}{
+		{"negative rate", `{"rate_per_wh":-0.0001,"currency":"USD","effective_from":"2026-01-01T00:00:00Z"}`},
+		{"rate exceeds database precision bound", `{"rate_per_wh":1000000,"currency":"USD","effective_from":"2026-01-01T00:00:00Z"}`},
+		{"currency too short", `{"rate_per_wh":0.0001,"currency":"US","effective_from":"2026-01-01T00:00:00Z"}`},
+		{"currency too long", `{"rate_per_wh":0.0001,"currency":"USDD","effective_from":"2026-01-01T00:00:00Z"}`},
+		{"currency with digit (still invalid after uppercasing)", `{"rate_per_wh":0.0001,"currency":"us1","effective_from":"2026-01-01T00:00:00Z"}`},
+		{"effective_to before effective_from", `{"rate_per_wh":0.0001,"currency":"USD","effective_from":"2026-06-01T00:00:00Z","effective_to":"2026-01-01T00:00:00Z"}`},
+		{"effective_to equal effective_from", `{"rate_per_wh":0.0001,"currency":"USD","effective_from":"2026-06-01T00:00:00Z","effective_to":"2026-06-01T00:00:00Z"}`},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			w := httptest.NewRecorder()
+			r := newRateRequest(http.MethodPost, "/x", bytes.NewReader([]byte(tc.body)), map[string]string{"geofenceID": "1"})
+			h.CreateRate(w, r)
+			wantErrorResponse(t, w, http.StatusBadRequest, "GEOFENCE_RATE_INVALID")
+		})
+	}
+}
+
+func TestPreviewApplyRate_InvalidQueryParams(t *testing.T) {
+	h := NewHandler(nil)
+	cases := []struct {
+		name  string
+		query string
+	}{
+		{"unparseable from", "from=not-a-date"},
+		{"unparseable to", "to=not-a-date"},
+		{"to before from", "from=2026-06-01T00:00:00Z&to=2026-01-01T00:00:00Z"},
+		{"to equal from", "from=2026-01-01T00:00:00Z&to=2026-01-01T00:00:00Z"},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			w := httptest.NewRecorder()
+			r := newRateRequest(http.MethodGet, "/x?"+tc.query, nil, map[string]string{"geofenceID": "1", "rateID": "2"})
+			h.PreviewApplyRate(w, r)
+			wantErrorResponse(t, w, http.StatusBadRequest, "VALIDATION_INVALID_INPUT")
+		})
+	}
+}
+
+func TestApplyRate_InvalidQueryParams(t *testing.T) {
+	h := NewHandler(nil)
+	w := httptest.NewRecorder()
+	r := newRateRequest(http.MethodPost, "/x?from=garbage", nil, map[string]string{"geofenceID": "1", "rateID": "2"})
+	h.ApplyRate(w, r)
+	wantErrorResponse(t, w, http.StatusBadRequest, "VALIDATION_INVALID_INPUT")
+}
+
+// ---------------------------------------------------------------------------
+// (2) Pure function unit tests — no HTTP, no repo.
+// ---------------------------------------------------------------------------
+
+func TestValidateRateRequestFields(t *testing.T) {
+	base := time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC)
+	later := base.Add(24 * time.Hour)
+	earlier := base.Add(-24 * time.Hour)
+	cases := []struct {
+		name     string
+		rate     float64
+		currency string
+		from     time.Time
+		to       *time.Time
+		wantErr  bool
+	}{
+		{"valid open interval", 0.0001, "USD", base, nil, false},
+		{"valid closed interval", 0.0001, "USD", base, &later, false},
+		{"valid zero rate", 0, "USD", base, nil, false},
+		{"negative rate", -0.0001, "USD", base, nil, true},
+		{"NaN rate", math.NaN(), "USD", base, nil, true},
+		{"+Inf rate", math.Inf(1), "USD", base, nil, true},
+		{"currency too short", 0.0001, "US", base, nil, true},
+		{"currency too long", 0.0001, "USDD", base, nil, true},
+		{"currency lowercase", 0.0001, "usd", base, nil, true},
+		{"currency with digit", 0.0001, "US1", base, nil, true},
+		{"zero effective_from", 0.0001, "USD", time.Time{}, nil, true},
+		{"effective_to equal effective_from", 0.0001, "USD", base, &base, true},
+		{"effective_to before effective_from", 0.0001, "USD", base, &earlier, true},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			err := validateRateRequestFields(tc.rate, tc.currency, tc.from, tc.to)
+			if tc.wantErr && err == nil {
+				t.Fatal("expected error, got nil")
+			}
+			if !tc.wantErr && err != nil {
+				t.Fatalf("unexpected error: %v", err)
+			}
+		})
+	}
+}
+
+func TestParseApplyScope(t *testing.T) {
+	cases := []struct {
+		name     string
+		query    string
+		wantErr  bool
+		wantFrom bool
+		wantTo   bool
+	}{
+		{"no params", "", false, false, false},
+		{"valid from only", "from=2026-01-01T00:00:00Z", false, true, false},
+		{"valid to only", "to=2026-01-01T00:00:00Z", false, false, true},
+		{"valid from and to", "from=2026-01-01T00:00:00Z&to=2026-02-01T00:00:00Z", false, true, true},
+		{"invalid from", "from=not-a-date", true, false, false},
+		{"invalid to", "to=not-a-date", true, false, false},
+		{"to before from", "from=2026-02-01T00:00:00Z&to=2026-01-01T00:00:00Z", true, false, false},
+		{"to equal from", "from=2026-01-01T00:00:00Z&to=2026-01-01T00:00:00Z", true, false, false},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			r := httptest.NewRequest(http.MethodGet, "/x?"+tc.query, nil)
+			scope, err := parseApplyScope(r, 7, 9)
+			if tc.wantErr {
+				if err == nil {
+					t.Fatal("expected error, got nil")
+				}
+				return
+			}
+			if err != nil {
+				t.Fatalf("unexpected error: %v", err)
+			}
+			if scope.GeofenceID != 7 || scope.RateID != 9 {
+				t.Errorf("scope ids = (%d,%d), want (7,9)", scope.GeofenceID, scope.RateID)
+			}
+			if tc.wantFrom && scope.From == nil {
+				t.Error("expected From to be set")
+			}
+			if !tc.wantFrom && scope.From != nil {
+				t.Errorf("expected From nil, got %v", scope.From)
+			}
+			if tc.wantTo && scope.To == nil {
+				t.Error("expected To to be set")
+			}
+			if !tc.wantTo && scope.To != nil {
+				t.Errorf("expected To nil, got %v", scope.To)
+			}
+			if scope.From != nil && scope.From.Location() != time.UTC {
+				t.Errorf("From not normalized to UTC: %v", scope.From.Location())
+			}
+		})
+	}
+}
+
+func TestWriteApplyScopeRepoError(t *testing.T) {
+	cases := []struct {
+		name        string
+		err         error
+		wantHandled bool
+		wantStatus  int
+		wantCode    string
+	}{
+		{"geofence not found", geofencedb.ErrGeofenceNotFound, true, http.StatusNotFound, "GEOFENCE_NOT_FOUND"},
+		{"rate not found", geofencedb.ErrRateNotFound, true, http.StatusNotFound, "GEOFENCE_RATE_NOT_FOUND"},
+		{"unrelated error is not handled here", errors.New("boom"), false, 0, ""},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			w := httptest.NewRecorder()
+			r := httptest.NewRequest(http.MethodGet, "/x", nil)
+			handled := writeApplyScopeRepoError(w, r, tc.err)
+			if handled != tc.wantHandled {
+				t.Fatalf("handled = %v, want %v", handled, tc.wantHandled)
+			}
+			if tc.wantHandled {
+				wantErrorResponse(t, w, tc.wantStatus, tc.wantCode)
+			} else if w.Body.Len() != 0 {
+				t.Errorf("unhandled error case wrote a response body: %s", w.Body.String())
+			}
+		})
+	}
+}
+
+// ---------------------------------------------------------------------------
+// (3) Full response-shape tests via WithRateStore(fake) — real handler
+// bodies, real HTTP round trip, no mirror.
+// ---------------------------------------------------------------------------
+
+func TestNeedsReview(t *testing.T) {
+	t.Run("success", func(t *testing.T) {
+		fake := &fakeRateRepo{needsReviewResult: []*systemmodel.Geofence{sampleGeofence(1), sampleGeofence(2)}}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		h.NeedsReview(w, httptest.NewRequest(http.MethodGet, "/geofences/needs-review", nil))
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		var out []systemmodel.Geofence
+		if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+			t.Fatalf("decode: %v", err)
+		}
+		if len(out) != 2 {
+			t.Errorf("len(out) = %d, want 2", len(out))
+		}
+	})
+	t.Run("repo error surfaces as 500", func(t *testing.T) {
+		fake := &fakeRateRepo{needsReviewErr: errors.New("db down")}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		h.NeedsReview(w, httptest.NewRequest(http.MethodGet, "/geofences/needs-review", nil))
+		wantErrorResponse(t, w, http.StatusInternalServerError, "DB_QUERY_FAILED")
+	})
+}
+
+func TestCurrentRates(t *testing.T) {
+	t.Run("success", func(t *testing.T) {
+		fake := &fakeRateRepo{activeRatesNowResult: []*systemmodel.GeofenceRate{{ID: 1, GeofenceID: 1, RatePerWh: 0.0001, Currency: "USD"}}}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		h.CurrentRates(w, httptest.NewRequest(http.MethodGet, "/geofences/rates/current", nil))
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+	})
+	t.Run("repo error surfaces as 500", func(t *testing.T) {
+		fake := &fakeRateRepo{activeRatesNowErr: errors.New("db down")}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		h.CurrentRates(w, httptest.NewRequest(http.MethodGet, "/geofences/rates/current", nil))
+		wantErrorResponse(t, w, http.StatusInternalServerError, "DB_QUERY_FAILED")
+	})
+}
+
+func TestArchive(t *testing.T) {
+	t.Run("success returns the updated geofence", func(t *testing.T) {
+		archived := sampleGeofence(1)
+		now := time.Now().UTC()
+		archived.ArchivedAt = &now
+		fake := &fakeRateRepo{getByIDResult: archived}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/1/archive", nil, map[string]string{"geofenceID": "1"})
+		h.Archive(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		if len(fake.archiveCalls) != 1 || fake.archiveCalls[0] != 1 {
+			t.Errorf("Archive calls = %v, want [1]", fake.archiveCalls)
+		}
+		var out systemmodel.Geofence
+		if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+			t.Fatalf("decode: %v", err)
+		}
+		if out.ArchivedAt == nil {
+			t.Error("response geofence missing archived_at")
+		}
+	})
+	t.Run("idempotent re-archive is still a 200 success", func(t *testing.T) {
+		archived := sampleGeofence(1)
+		now := time.Now().UTC()
+		archived.ArchivedAt = &now
+		fake := &fakeRateRepo{getByIDResult: archived} // Archive() itself is a no-op idempotent success per repo contract
+		h := NewHandler(nil, WithRateStore(fake))
+		for i := 0; i < 2; i++ {
+			w := httptest.NewRecorder()
+			r := newRateRequest(http.MethodPost, "/geofences/1/archive", nil, map[string]string{"geofenceID": "1"})
+			h.Archive(w, r)
+			if w.Code != http.StatusOK {
+				t.Fatalf("iteration %d: status = %d, want 200", i, w.Code)
+			}
+		}
+	})
+	t.Run("not found maps to 404", func(t *testing.T) {
+		fake := &fakeRateRepo{archiveErr: geofencedb.ErrGeofenceNotFound}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/99/archive", nil, map[string]string{"geofenceID": "99"})
+		h.Archive(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_NOT_FOUND")
+	})
+	t.Run("repo error surfaces as 500", func(t *testing.T) {
+		fake := &fakeRateRepo{archiveErr: errors.New("db down")}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/1/archive", nil, map[string]string{"geofenceID": "1"})
+		h.Archive(w, r)
+		wantErrorResponse(t, w, http.StatusInternalServerError, "DB_QUERY_FAILED")
+	})
+	t.Run("re-fetch failure after a successful mutation still reports success via 204", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDErr: errors.New("transient")}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/1/archive", nil, map[string]string{"geofenceID": "1"})
+		h.Archive(w, r)
+		if w.Code != http.StatusNoContent {
+			t.Fatalf("status = %d, want 204; body=%s", w.Code, w.Body.String())
+		}
+	})
+}
+
+func TestUnarchive(t *testing.T) {
+	t.Run("success", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDResult: sampleGeofence(1)}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/1/unarchive", nil, map[string]string{"geofenceID": "1"})
+		h.Unarchive(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		if len(fake.unarchiveCalls) != 1 || fake.unarchiveCalls[0] != 1 {
+			t.Errorf("Unarchive calls = %v, want [1]", fake.unarchiveCalls)
+		}
+	})
+	t.Run("not found maps to 404", func(t *testing.T) {
+		fake := &fakeRateRepo{unarchiveErr: geofencedb.ErrGeofenceNotFound}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/99/unarchive", nil, map[string]string{"geofenceID": "99"})
+		h.Unarchive(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_NOT_FOUND")
+	})
+}
+
+func TestMarkReviewed(t *testing.T) {
+	t.Run("success", func(t *testing.T) {
+		reviewed := sampleGeofence(1)
+		reviewed.NeedsReview = false
+		fake := &fakeRateRepo{getByIDResult: reviewed}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/1/reviewed", nil, map[string]string{"geofenceID": "1"})
+		h.MarkReviewed(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		if len(fake.markReviewedCalls) != 1 || fake.markReviewedCalls[0] != 1 {
+			t.Errorf("MarkReviewed calls = %v, want [1]", fake.markReviewedCalls)
+		}
+	})
+	t.Run("not found maps to 404", func(t *testing.T) {
+		fake := &fakeRateRepo{markReviewedErr: geofencedb.ErrGeofenceNotFound}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/99/reviewed", nil, map[string]string{"geofenceID": "99"})
+		h.MarkReviewed(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_NOT_FOUND")
+	})
+}
+
+func TestListRates(t *testing.T) {
+	t.Run("success", func(t *testing.T) {
+		fake := &fakeRateRepo{
+			getByIDResult:   sampleGeofence(1),
+			listRatesResult: []*systemmodel.GeofenceRate{{ID: 1, GeofenceID: 1, RatePerWh: 0.0001, Currency: "USD"}},
+		}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/1/rates", nil, map[string]string{"geofenceID": "1"})
+		h.ListRates(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		var out []systemmodel.GeofenceRate
+		if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+			t.Fatalf("decode: %v", err)
+		}
+		if len(out) != 1 {
+			t.Fatalf("len(out) = %d, want 1", len(out))
+		}
+	})
+	t.Run("geofence not found maps to 404 without calling ListRates", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDResult: nil}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/99/rates", nil, map[string]string{"geofenceID": "99"})
+		h.ListRates(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_NOT_FOUND")
+	})
+}
+
+func TestCreateRate(t *testing.T) {
+	t.Run("success normalizes currency and UTC-normalizes timestamps", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDResult: sampleGeofence(1), createRateAssignID: 42}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		body := bytes.NewReader([]byte(`{"rate_per_wh":0.00012345,"currency":"usd","effective_from":"2026-01-01T00:00:00-05:00"}`))
+		r := newRateRequest(http.MethodPost, "/geofences/1/rates", body, map[string]string{"geofenceID": "1"})
+		h.CreateRate(w, r)
+		if w.Code != http.StatusCreated {
+			t.Fatalf("status = %d, want 201; body=%s", w.Code, w.Body.String())
+		}
+		if len(fake.createRateCalls) != 1 {
+			t.Fatalf("CreateRate calls = %d, want 1", len(fake.createRateCalls))
+		}
+		got := fake.createRateCalls[0]
+		if got.Currency != "USD" {
+			t.Errorf("currency = %q, want normalized %q", got.Currency, "USD")
+		}
+		if got.EffectiveFrom.Location() != time.UTC {
+			t.Errorf("effective_from not normalized to UTC: %v", got.EffectiveFrom.Location())
+		}
+		if got.GeofenceID != 1 {
+			t.Errorf("geofence_id = %d, want 1", got.GeofenceID)
+		}
+		var out systemmodel.GeofenceRate
+		if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+			t.Fatalf("decode: %v", err)
+		}
+		if out.ID != 42 {
+			t.Errorf("response id = %d, want 42", out.ID)
+		}
+	})
+	t.Run("geofence not found maps to 404 without calling CreateRate", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDResult: nil}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		body := bytes.NewReader([]byte(`{"rate_per_wh":0.0001,"currency":"USD","effective_from":"2026-01-01T00:00:00Z"}`))
+		r := newRateRequest(http.MethodPost, "/geofences/99/rates", body, map[string]string{"geofenceID": "99"})
+		h.CreateRate(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_NOT_FOUND")
+		if len(fake.createRateCalls) != 0 {
+			t.Errorf("CreateRate was called despite missing geofence: %v", fake.createRateCalls)
+		}
+	})
+	t.Run("conflict maps to 409", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDResult: sampleGeofence(1), createRateErr: geofencedb.ErrRateConflict}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		body := bytes.NewReader([]byte(`{"rate_per_wh":0.0001,"currency":"USD","effective_from":"2026-01-01T00:00:00Z"}`))
+		r := newRateRequest(http.MethodPost, "/geofences/1/rates", body, map[string]string{"geofenceID": "1"})
+		h.CreateRate(w, r)
+		wantErrorResponse(t, w, http.StatusConflict, "GEOFENCE_RATE_CONFLICT")
+	})
+	t.Run("repository failure maps to 500", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDResult: sampleGeofence(1), createRateErr: errors.New("boom")}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		body := bytes.NewReader([]byte(`{"rate_per_wh":0.0001,"currency":"USD","effective_from":"2026-01-01T00:00:00Z"}`))
+		r := newRateRequest(http.MethodPost, "/geofences/1/rates", body, map[string]string{"geofenceID": "1"})
+		h.CreateRate(w, r)
+		wantErrorResponse(t, w, http.StatusInternalServerError, "DB_QUERY_FAILED")
+	})
+}
+
+func TestDeleteRate(t *testing.T) {
+	t.Run("success returns 204", func(t *testing.T) {
+		fake := &fakeRateRepo{}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodDelete, "/geofences/1/rates/5", nil, map[string]string{"geofenceID": "1", "rateID": "5"})
+		h.DeleteRate(w, r)
+		if w.Code != http.StatusNoContent {
+			t.Fatalf("status = %d, want 204; body=%s", w.Code, w.Body.String())
+		}
+		if len(fake.deleteRateCalls) != 1 || fake.deleteRateCalls[0] != [2]int64{1, 5} {
+			t.Errorf("DeleteRate calls = %v, want [[1 5]]", fake.deleteRateCalls)
+		}
+	})
+	t.Run("not found maps to 404", func(t *testing.T) {
+		fake := &fakeRateRepo{deleteRateErr: geofencedb.ErrRateNotFound}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodDelete, "/geofences/1/rates/99", nil, map[string]string{"geofenceID": "1", "rateID": "99"})
+		h.DeleteRate(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_RATE_NOT_FOUND")
+	})
+}
+
+func TestPreviewApplyRate(t *testing.T) {
+	t.Run("success", func(t *testing.T) {
+		fake := &fakeRateRepo{previewResult: &systemmodel.GeofenceRateImpactPreview{
+			GeofenceID: 1, RateID: 5, Currency: "USD",
+			MatchedSessions: 10, EligibleSessions: 7, ProtectedSessions: 3,
+			TotalEnergyWh: 50000, EstimatedCostDecimal: 5.5,
+		}}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/1/rates/5/preview", nil, map[string]string{"geofenceID": "1", "rateID": "5"})
+		h.PreviewApplyRate(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		var out systemmodel.GeofenceRateImpactPreview
+		if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+			t.Fatalf("decode: %v", err)
+		}
+		if out.EligibleSessions != 7 || out.ProtectedSessions != 3 {
+			t.Errorf("preview = %+v, want eligible=7 protected=3", out)
+		}
+		if len(fake.previewCalls) != 1 || fake.previewCalls[0].GeofenceID != 1 || fake.previewCalls[0].RateID != 5 {
+			t.Errorf("PreviewApplyRate scope = %+v", fake.previewCalls)
+		}
+	})
+	t.Run("rate not found maps to 404", func(t *testing.T) {
+		fake := &fakeRateRepo{previewErr: geofencedb.ErrRateNotFound}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/1/rates/99/preview", nil, map[string]string{"geofenceID": "1", "rateID": "99"})
+		h.PreviewApplyRate(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_RATE_NOT_FOUND")
+	})
+	t.Run("geofence not found maps to 404", func(t *testing.T) {
+		fake := &fakeRateRepo{previewErr: geofencedb.ErrGeofenceNotFound}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/99/rates/5/preview", nil, map[string]string{"geofenceID": "99", "rateID": "5"})
+		h.PreviewApplyRate(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_NOT_FOUND")
+	})
+	t.Run("scope from/to query params flow through to the repo call", func(t *testing.T) {
+		fake := &fakeRateRepo{previewResult: &systemmodel.GeofenceRateImpactPreview{}}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/1/rates/5/preview?from=2026-01-01T00:00:00Z&to=2026-02-01T00:00:00Z", nil, map[string]string{"geofenceID": "1", "rateID": "5"})
+		h.PreviewApplyRate(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		if len(fake.previewCalls) != 1 {
+			t.Fatalf("expected exactly one PreviewApplyRate call")
+		}
+		got := fake.previewCalls[0]
+		if got.From == nil || !got.From.Equal(time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC)) {
+			t.Errorf("scope.From = %v, want 2026-01-01T00:00:00Z", got.From)
+		}
+		if got.To == nil || !got.To.Equal(time.Date(2026, 2, 1, 0, 0, 0, 0, time.UTC)) {
+			t.Errorf("scope.To = %v, want 2026-02-01T00:00:00Z", got.To)
+		}
+	})
+}
+
+func TestApplyRate(t *testing.T) {
+	t.Run("success", func(t *testing.T) {
+		fake := &fakeRateRepo{applyResult: &systemmodel.GeofenceRateApplyResult{
+			GeofenceID: 1, RateID: 5, Currency: "USD",
+			MatchedSessions: 10, PricedSessions: 7, SkippedSessions: 3,
+			TotalEnergyWh: 50000, TotalCostDecimal: 5.5,
+		}}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/1/rates/5/apply", nil, map[string]string{"geofenceID": "1", "rateID": "5"})
+		h.ApplyRate(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		var out systemmodel.GeofenceRateApplyResult
+		if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+			t.Fatalf("decode: %v", err)
+		}
+		if out.PricedSessions != 7 || out.SkippedSessions != 3 {
+			t.Errorf("result = %+v, want priced=7 skipped=3", out)
+		}
+	})
+	t.Run("rate not found maps to 404", func(t *testing.T) {
+		fake := &fakeRateRepo{applyErr: geofencedb.ErrRateNotFound}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/1/rates/99/apply", nil, map[string]string{"geofenceID": "1", "rateID": "99"})
+		h.ApplyRate(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_RATE_NOT_FOUND")
+	})
+	t.Run("unexpected repo error surfaces as 500", func(t *testing.T) {
+		fake := &fakeRateRepo{applyErr: errors.New("db down")}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodPost, "/geofences/1/rates/5/apply", nil, map[string]string{"geofenceID": "1", "rateID": "5"})
+		h.ApplyRate(w, r)
+		wantErrorResponse(t, w, http.StatusInternalServerError, "DB_QUERY_FAILED")
+	})
+}
+
+func TestChargingSummary(t *testing.T) {
+	t.Run("success groups by currency", func(t *testing.T) {
+		fake := &fakeRateRepo{
+			getByIDResult: sampleGeofence(1),
+			summaryResult: []*systemmodel.GeofenceChargingSummary{
+				{GeofenceID: 1, Currency: "USD", SessionCount: 3, TotalEnergyWh: 10000, TotalCostDecimal: 1.5},
+				{GeofenceID: 1, Currency: "EUR", SessionCount: 1, TotalEnergyWh: 2000, TotalCostDecimal: 0.3},
+			},
+		}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/1/charging-summary", nil, map[string]string{"geofenceID": "1"})
+		h.ChargingSummary(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		var out []systemmodel.GeofenceChargingSummary
+		if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+			t.Fatalf("decode: %v", err)
+		}
+		if len(out) != 2 {
+			t.Fatalf("len(out) = %d, want 2 (one per currency, never summed)", len(out))
+		}
+	})
+	t.Run("geofence not found maps to 404", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDResult: nil}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/99/charging-summary", nil, map[string]string{"geofenceID": "99"})
+		h.ChargingSummary(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_NOT_FOUND")
+	})
+}
+
+func TestChargingActivity(t *testing.T) {
+	t.Run("success passes pagination through", func(t *testing.T) {
+		fake := &fakeRateRepo{
+			getByIDResult:  sampleGeofence(1),
+			activityResult: []*systemmodel.GeofenceChargingActivity{{SessionID: 1, VehicleID: 2}},
+		}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/1/charging-activity?limit=10&offset=20", nil, map[string]string{"geofenceID": "1"})
+		h.ChargingActivity(w, r)
+		if w.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", w.Code, w.Body.String())
+		}
+		if len(fake.activityCalls) != 1 || fake.activityCalls[0].limit != 10 || fake.activityCalls[0].offset != 20 {
+			t.Errorf("activityCalls = %+v, want limit=10 offset=20", fake.activityCalls)
+		}
+	})
+	t.Run("geofence not found maps to 404 without calling ChargingActivity", func(t *testing.T) {
+		fake := &fakeRateRepo{getByIDResult: nil}
+		h := NewHandler(nil, WithRateStore(fake))
+		w := httptest.NewRecorder()
+		r := newRateRequest(http.MethodGet, "/geofences/99/charging-activity", nil, map[string]string{"geofenceID": "99"})
+		h.ChargingActivity(w, r)
+		wantErrorResponse(t, w, http.StatusNotFound, "GEOFENCE_NOT_FOUND")
+		if len(fake.activityCalls) != 0 {
+			t.Errorf("ChargingActivity was called despite missing geofence: %v", fake.activityCalls)
+		}
+	})
+}
+
+// TestNewHandler_RateStoreDefaultsToGeofenceRepo pins that a production
+// NewHandler(db) call wires rateRepo to the SAME concrete instance as
+// geofenceRepo/bulk — i.e. WithRateStore is test-only surface area, not a
+// second production code path that could silently drift from the CRUD repo.
+func TestNewHandler_RateStoreDefaultsToGeofenceRepo(t *testing.T) {
+	h := NewHandler(nil)
+	if h.rateRepo != nil {
+		t.Fatalf("with db=nil, rateRepo should stay nil (no fake installed); got %#v", h.rateRepo)
+	}
+	fake := &fakeRateRepo{}
+	h2 := NewHandler(nil, WithRateStore(fake))
+	if h2.rateRepo != fake {
+		t.Fatal("WithRateStore did not install the fake")
+	}
+}
diff --git a/internal/api/router.go b/internal/api/router.go
index feb454f01b..53d0bea0c9 100644
--- a/internal/api/router.go
+++ b/internal/api/router.go
@@ -3259,13 +3259,39 @@ func NewRouter(db *database.DB, teslaClient *tesla.Client, mqttClient *mqtt.Clie
 		r.Route("/geofences", func(r chi.Router) {
 			r.Get("/", geofenceHandler.List)
 			r.Post("/", geofenceHandler.Create)
-			// Bulk operations — kept ahead of the
+			// Bulk operations, the "Needs Setup" queue, and the bulk
+			// current-rates lookup are all kept ahead of the
 			// {geofenceID} subrouter so chi matches the static path first.
 			r.With(httprate.LimitByIP(20, 1*time.Minute)).Post("/bulk", geofenceHandler.BulkUpdate)
+			r.Get("/needs-review", geofenceHandler.NeedsReview)
+			r.Get("/rates/current", geofenceHandler.CurrentRates)
 			r.Route("/{geofenceID}", func(r chi.Router) {
 				r.Get("/", geofenceHandler.Get)
 				r.Put("/", geofenceHandler.Update)
 				r.Delete("/", geofenceHandler.Delete)
+
+				// Charging-place discovery review + archive lifecycle
+				// (migration 000228_geofence_charging_place_pricing).
+				r.With(httprate.LimitByIP(20, 1*time.Minute)).Post("/archive", geofenceHandler.Archive)
+				r.With(httprate.LimitByIP(20, 1*time.Minute)).Post("/unarchive", geofenceHandler.Unarchive)
+				r.With(httprate.LimitByIP(20, 1*time.Minute)).Post("/reviewed", geofenceHandler.MarkReviewed)
+
+				// Time-versioned electricity rates.
+				r.Get("/rates", geofenceHandler.ListRates)
+				r.With(httprate.LimitByIP(20, 1*time.Minute)).Post("/rates", geofenceHandler.CreateRate)
+				r.Route("/rates/{rateID}", func(r chi.Router) {
+					r.With(httprate.LimitByIP(20, 1*time.Minute)).Delete("/", geofenceHandler.DeleteRate)
+					// Preview is read-only (no DB writes) but still
+					// rate-limited: it runs the same candidate-session
+					// scan ApplyRate does and must not become a free DoS
+					// vector against charging_sessions.
+					r.With(httprate.LimitByIP(30, 1*time.Minute)).Get("/preview", geofenceHandler.PreviewApplyRate)
+					r.With(httprate.LimitByIP(10, 1*time.Minute)).Post("/apply", geofenceHandler.ApplyRate)
+				})
+
+				// Read-only charging-activity views for this place.
+				r.Get("/charging-summary", geofenceHandler.ChargingSummary)
+				r.Get("/charging-activity", geofenceHandler.ChargingActivity)
 			})
 		})
 
diff --git a/internal/api/telemetry/telemetry_sessions_charge_geofence_pricing.go b/internal/api/telemetry/telemetry_sessions_charge_geofence_pricing.go
new file mode 100644
index 0000000000..79b7a9d309
--- /dev/null
+++ b/internal/api/telemetry/telemetry_sessions_charge_geofence_pricing.go
@@ -0,0 +1,380 @@
+package telemetry
+
+import (
+	"context"
+	"fmt"
+	"strings"
+	"time"
+
+	dbadmin "github.com/ev-dev-labs/teslasync/internal/database/admin"
+	"github.com/ev-dev-labs/teslasync/internal/metrics"
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+	"github.com/ev-dev-labs/teslasync/internal/tracing"
+
+	"github.com/rs/zerolog/log"
+	"go.opentelemetry.io/otel/attribute"
+	"go.opentelemetry.io/otel/codes"
+)
+
+// =============================================================================
+// telemetry_sessions_charge_geofence_pricing.go — charging-place geofence
+// discovery + rate-based cost calculation for the geofence-based
+// charging-place pricing feature (migration
+// 000228_geofence_charging_place_pricing).
+//
+// Live-session entry points are invoked via safeGo after a confirmed session
+// row commits. The legacy-history path runs once at startup in its own safeGo.
+// A raw cable-attached event never reaches either path, so discovery latency
+// and failures cannot block or fail MQTT/telemetry ingest.
+// =============================================================================
+
+// applyGeofencePricingAsync resolves the charging-place geofence for a
+// confirmed charging session and, when energy is available plus a rate is
+// configured for the instant the session STARTED (never "now"), computes its
+// cost. Calling it at session start creates/attaches the place promptly;
+// calling it again at completion performs the monetary calculation.
+//
+// Sequence:
+//  1. Match an existing geofence (any origin) containing (lat, lon) — see
+//     resolveChargingGeofence. Reuses the exact matching behavior that
+//     previously only fed `start_place` naming.
+//  2. If nothing matches, idempotently discover a provisional
+//     charging-place geofence (75m circle, needs_review=true) via
+//     GeofenceRepo.FindOrCreateForCharging, deduplicated by an in-database
+//     advisory lock so concurrent completions at the same spot (e.g. two
+//     vehicles finishing a charge at the same Supercharger at once) can
+//     never create more than one place.
+//  3. Whichever geofence resolved, attach its id + display name to the
+//     session, then look up the rate active at the session's StartedAt via
+//     GeofenceRepo.GetActiveRateAt and, if found, apply it via
+//     ChargingRepo.ApplyGeofenceTariff — which computes cost with
+//     PostgreSQL NUMERIC arithmetic and is guarded to only ever
+//     (re)write a session whose cost is unset or geofence/default-derived,
+//     NEVER a manual, Tesla-actual, or existing unknown-provenance cost.
+//
+// Retry-safety: every database operation this method calls
+// (FindOrCreateForCharging, ApplyGeofenceTariff) is independently
+// idempotent, so re-running this exact sequence for the same session after
+// a transient failure can never create a duplicate geofence or replace a
+// historical tariff with a different rate version.
+func (t *TelemetrySessionTracker) applyGeofencePricingAsync(sessionID, vehicleID int64, lat, lon float64, startedAt time.Time, fields map[string]interface{}) {
+	gctx, cancel := context.WithTimeout(context.Background(), 15*time.Second)
+	defer cancel()
+	gctx, span := tracing.StartSpan(gctx, "telemetry.charge_geofence_pricing",
+		tracing.ChargeID(sessionID), tracing.VehicleID(vehicleID))
+	defer span.End()
+
+	geofenceID, geofenceName, err := t.resolveChargingGeofence(gctx, sessionID, lat, lon)
+	if err != nil {
+		log.Warn().Err(err).Int64("session_id", sessionID).Int64("vehicle_id", vehicleID).
+			Msg("telemetry: geofence match/discovery failed for charging session; left unattributed")
+		span.RecordError(err)
+		span.SetStatus(codes.Error, err.Error())
+		if uerr := t.chargeRepo.PartialUpdate(gctx, sessionID, fields); uerr != nil {
+			log.Warn().Err(uerr).Int64("session_id", sessionID).
+				Msg("telemetry: failed to persist charge enhanced fields after geofence resolution failure")
+		}
+		return
+	}
+
+	fields["start_place"] = geofenceName
+	fields["geofence_id"] = geofenceID
+	if err := t.chargeRepo.PartialUpdate(gctx, sessionID, fields); err != nil {
+		log.Warn().Err(err).Int64("session_id", sessionID).Int64("geofence_id", geofenceID).
+			Msg("telemetry: failed to attach geofence to charging session")
+	}
+
+	rate, err := t.geofenceRepo.GetActiveRateAt(gctx, geofenceID, startedAt)
+	if err != nil {
+		metrics.GeofenceRateApplyTotal.WithLabelValues("error").Inc()
+		log.Warn().Err(err).Int64("session_id", sessionID).Int64("geofence_id", geofenceID).
+			Msg("telemetry: geofence rate lookup failed")
+		span.RecordError(err)
+		span.SetStatus(codes.Error, err.Error())
+		return
+	}
+	if rate == nil {
+		// No rate configured for this place/instant yet — leave
+		// cost_source/cost_decimal/cost_currency unset (implicitly
+		// "unknown"); the Charging Places UI surfaces this as a place
+		// needing rate setup, not an error.
+		metrics.GeofenceRateApplyTotal.WithLabelValues("no_rate").Inc()
+		return
+	}
+
+	applied, err := t.chargeRepo.ApplyGeofenceTariff(gctx, sessionID, geofenceID, rate.ID, rate.RatePerWh, rate.Currency)
+	if err != nil {
+		metrics.GeofenceRateApplyTotal.WithLabelValues("error").Inc()
+		log.Warn().Err(err).Int64("session_id", sessionID).Int64("geofence_id", geofenceID).Int64("rate_id", rate.ID).
+			Msg("telemetry: failed to apply geofence tariff to charging session")
+		span.RecordError(err)
+		span.SetStatus(codes.Error, err.Error())
+		return
+	}
+	if applied {
+		metrics.GeofenceRateApplyTotal.WithLabelValues("applied").Inc()
+	} else {
+		// ApplyGeofenceTariff's WHERE guard correctly declined to touch a
+		// session that already carries a protected cost, or has no
+		// energy-added value yet — expected, not an error.
+		metrics.GeofenceRateApplyTotal.WithLabelValues("skipped").Inc()
+	}
+}
+
+const chargingPlaceHistoryBackfillBatch = 100
+
+// StartChargingPlaceHistoryBackfill starts the one-shot, panic-isolated
+// startup pass that discovers places for completed sessions predating the
+// Charging Places feature.
+func (t *TelemetrySessionTracker) StartChargingPlaceHistoryBackfill(ctx context.Context) {
+	if t == nil {
+		return
+	}
+	safeGo("charging_place_history_backfill", func() {
+		t.BackfillChargingPlaces(ctx)
+	})
+}
+
+// BackfillChargingPlaces attaches completed legacy charging sessions to an
+// existing or newly-discovered place. The rate active at session start wins;
+// when no historical interval exists, the rate active at startup is applied
+// as default_estimate provenance. Existing actual or unknown-provenance costs
+// remain protected by the repository write guards.
+func (t *TelemetrySessionTracker) BackfillChargingPlaces(ctx context.Context) {
+	if t == nil || t.geofenceRepo == nil || t.chargeRepo == nil {
+		return
+	}
+
+	ctx, span := tracing.StartSpan(ctx, "telemetry.charging_place_history_backfill")
+	var runErr error
+	defer func() { tracing.EndSpan(span, runErr) }()
+
+	now := time.Now().UTC()
+	var afterID int64
+	processed := 0
+	outcomes := map[string]int{}
+
+	for {
+		if ctx.Err() != nil {
+			break
+		}
+		candidates, err := t.geofenceRepo.ListChargingPlaceBackfillCandidates(
+			ctx,
+			afterID,
+			chargingPlaceHistoryBackfillBatch,
+		)
+		if err != nil {
+			runErr = err
+			log.Error().
+				Err(err).
+				Str("trace_id", span.SpanContext().TraceID().String()).
+				Msg("charging place history backfill: failed to load candidates")
+			break
+		}
+		if len(candidates) == 0 {
+			break
+		}
+
+		for _, candidate := range candidates {
+			if ctx.Err() != nil {
+				break
+			}
+			afterID = candidate.SessionID
+			outcome, err := t.backfillChargingPlace(ctx, candidate, now)
+			if err != nil {
+				outcome = "error"
+				log.Warn().
+					Err(err).
+					Int64("session_id", candidate.SessionID).
+					Int64("vehicle_id", candidate.VehicleID).
+					Msg("charging place history backfill: session deferred until next startup")
+			}
+			processed++
+			outcomes[outcome]++
+			metrics.GeofenceHistoricalBackfillTotal.WithLabelValues(outcome).Inc()
+		}
+
+		if len(candidates) < chargingPlaceHistoryBackfillBatch {
+			break
+		}
+	}
+
+	span.SetAttributes(
+		attribute.Int("charging_place_backfill.processed", processed),
+		attribute.Int("charging_place_backfill.historical_rate", outcomes["historical_rate"]),
+		attribute.Int("charging_place_backfill.current_estimate", outcomes["current_estimate"]),
+		attribute.Int("charging_place_backfill.attributed_only", outcomes["attributed_only"]),
+		attribute.Int("charging_place_backfill.skipped", outcomes["skipped"]),
+		attribute.Int("charging_place_backfill.errors", outcomes["error"]),
+	)
+	if runErr != nil {
+		log.Warn().
+			Int("processed", processed).
+			Int("historical_rate", outcomes["historical_rate"]).
+			Int("current_estimate", outcomes["current_estimate"]).
+			Int("attributed_only", outcomes["attributed_only"]).
+			Int("skipped", outcomes["skipped"]).
+			Int("errors", outcomes["error"]).
+			Msg("charging place history backfill stopped before backlog drained")
+		return
+	}
+	log.Info().
+		Int("processed", processed).
+		Int("historical_rate", outcomes["historical_rate"]).
+		Int("current_estimate", outcomes["current_estimate"]).
+		Int("attributed_only", outcomes["attributed_only"]).
+		Int("skipped", outcomes["skipped"]).
+		Int("errors", outcomes["error"]).
+		Msg("charging place history backfill complete")
+}
+
+func (t *TelemetrySessionTracker) backfillChargingPlace(ctx context.Context, candidate *systemmodel.ChargingPlaceBackfillCandidate, now time.Time) (string, error) {
+	if candidate == nil {
+		return "", fmt.Errorf("charging place history backfill: nil candidate")
+	}
+	suggestedName := ""
+	if candidate.StartPlace != nil {
+		suggestedName = strings.TrimSpace(*candidate.StartPlace)
+	}
+	geofenceID, geofenceName, err := t.resolveChargingGeofenceWithName(
+		ctx,
+		candidate.SessionID,
+		candidate.StartLat,
+		candidate.StartLng,
+		suggestedName,
+		false,
+	)
+	if err != nil {
+		return "", err
+	}
+	if err := t.chargeRepo.PartialUpdate(ctx, candidate.SessionID, map[string]interface{}{
+		"start_place": geofenceName,
+		"geofence_id": geofenceID,
+	}); err != nil {
+		return "", err
+	}
+
+	historicalRate, err := t.geofenceRepo.GetActiveRateAt(ctx, geofenceID, candidate.StartedAt)
+	if err != nil {
+		return "", err
+	}
+	if historicalRate != nil {
+		applied, err := t.chargeRepo.ApplyGeofenceTariff(
+			ctx,
+			candidate.SessionID,
+			geofenceID,
+			historicalRate.ID,
+			historicalRate.RatePerWh,
+			historicalRate.Currency,
+		)
+		if err != nil {
+			return "", err
+		}
+		if applied {
+			return "historical_rate", nil
+		}
+		return "skipped", nil
+	}
+
+	currentRate, err := t.geofenceRepo.GetActiveRateAt(ctx, geofenceID, now)
+	if err != nil {
+		return "", err
+	}
+	if currentRate == nil {
+		return "attributed_only", nil
+	}
+	applied, err := t.geofenceRepo.ApplyCurrentRateEstimate(
+		ctx,
+		candidate.SessionID,
+		geofenceID,
+		currentRate.ID,
+		now,
+	)
+	if err != nil {
+		return "", err
+	}
+	if applied {
+		return "current_estimate", nil
+	}
+	return "skipped", nil
+}
+
+// resolveChargingGeofence matches (or, failing that, discovers) the
+// charging-place geofence for (lat, lon), returning its id and display
+// name. Counts the outcome via metrics.GeofenceDiscoveryTotal.
+func (t *TelemetrySessionTracker) resolveChargingGeofence(ctx context.Context, sessionID int64, lat, lon float64) (int64, string, error) {
+	return t.resolveChargingGeofenceWithName(ctx, sessionID, lat, lon, "", true)
+}
+
+func (t *TelemetrySessionTracker) resolveChargingGeofenceWithName(
+	ctx context.Context,
+	sessionID int64,
+	lat, lon float64,
+	suggestedName string,
+	allowReverseGeocode bool,
+) (int64, string, error) {
+	if geofences, err := t.geofenceRepo.FindByCoordinates(ctx, lat, lon); err == nil && len(geofences) > 0 {
+		metrics.GeofenceDiscoveryTotal.WithLabelValues("matched").Inc()
+		return geofences[0].ID, geofences[0].Name, nil
+	}
+
+	if strings.TrimSpace(suggestedName) == "" && allowReverseGeocode {
+		suggestedName = t.suggestChargingPlaceName(ctx, lat, lon)
+	}
+	discovered, created, err := t.geofenceRepo.FindOrCreateForCharging(ctx, lat, lon, suggestedName)
+	if err != nil {
+		metrics.GeofenceDiscoveryTotal.WithLabelValues("error").Inc()
+		return 0, "", err
+	}
+	if created {
+		metrics.GeofenceDiscoveryTotal.WithLabelValues("created").Inc()
+		log.Info().Int64("session_id", sessionID).Int64("geofence_id", discovered.ID).Str("name", discovered.Name).
+			Msg("telemetry: auto-discovered charging-place geofence")
+	} else {
+		// Lost the discovery race to a concurrent caller (or a previous
+		// attempt for this exact session already created it) — the
+		// advisory-lock re-check inside FindOrCreateForCharging returned
+		// the winner's place instead of creating a duplicate.
+		metrics.GeofenceDiscoveryTotal.WithLabelValues("matched").Inc()
+	}
+	return discovered.ID, discovered.Name, nil
+}
+
+// suggestChargingPlaceName resolves a friendly name for a possibly-new
+// charging place: the places cache first (no external call), else reverse
+// geocoding (cached afterward for next time). Returns "" — NOT an error —
+// when neither source has an answer; FindOrCreateForCharging substitutes a
+// safe neutral name in that case.
+func (t *TelemetrySessionTracker) suggestChargingPlaceName(ctx context.Context, lat, lon float64) string {
+	if t.placesCache != nil {
+		if cached, err := t.placesCache.FindNearby(ctx, lat, lon, 50); err == nil && cached != nil {
+			_ = t.placesCache.IncrementHitCount(ctx, cached.ID)
+			return cached.DisplayName
+		}
+	}
+	if t.geocoder == nil {
+		return ""
+	}
+
+	result, err := t.geocoder.ReverseGeocode(ctx, lat, lon)
+	if err != nil {
+		return ""
+	}
+	if result == nil {
+		// A Geocoder implementation returning (nil, nil) — "no result, no
+		// error" — is a valid, common outcome (see resolveAndUpdateAddress's
+		// identical guard in telemetry_sessions_drive_tracking.go), not an
+		// error: fall back to the safe neutral name FindOrCreateForCharging
+		// substitutes for an empty string.
+		return ""
+	}
+	name := result.ShortName()
+	if t.placesCache != nil {
+		_ = t.placesCache.Upsert(ctx, &dbadmin.PlaceCacheEntry{
+			Latitude: lat, Longitude: lon, DisplayName: name, Source: "geocoding",
+			City: ptrStrOrNil(result.City), State: ptrStrOrNil(result.State),
+			Country: ptrStrOrNil(result.Country), Postcode: ptrStrOrNil(result.PostCode),
+		})
+	}
+	return name
+}
diff --git a/internal/api/telemetry/telemetry_sessions_charge_geofence_pricing_test.go b/internal/api/telemetry/telemetry_sessions_charge_geofence_pricing_test.go
new file mode 100644
index 0000000000..b1da7fcd4b
--- /dev/null
+++ b/internal/api/telemetry/telemetry_sessions_charge_geofence_pricing_test.go
@@ -0,0 +1,726 @@
+package telemetry
+
+import (
+	"context"
+	"testing"
+	"time"
+
+	"github.com/jackc/pgx/v5/pgxpool"
+	dto "github.com/prometheus/client_model/go"
+
+	"github.com/ev-dev-labs/teslasync/internal/database"
+	"github.com/ev-dev-labs/teslasync/internal/metrics"
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+)
+
+// =============================================================================
+// telemetry_sessions_charge_geofence_pricing_test.go — tracker-layer tests for
+// applyGeofencePricingAsync (migration 000228_geofence_charging_place_pricing).
+//
+// Two contracts are pinned here, per the feature's non-negotiable design:
+//
+//  1. Rate attribution keys off the session's STARTED_AT, never "now" — a
+//     session that began before a rate's cutover must retain the OLD rate
+//     forever, even though "now" (when this async leg actually runs, which
+//     may be seconds after the session started, and is always long after
+//     any historical cutover in these fixtures) falls inside a newer rate's
+//     window.
+//  2. Discovery/pricing failures — including a fully unreachable database —
+//     are logged/counted and NEVER propagated to the caller: the function
+//     has no return value, cannot block indefinitely (its context carries a
+//     15s deadline), and (via the safeGo wrapper installed at its only call
+//     site in telemetry_sessions_charge_tracking.go) cannot crash the
+//     process even if something inside it were to panic.
+//  3. An automatic retry can reapply the same pinned rate, but cannot replace
+//     an existing geofence-tariff cost with a different rate version.
+//     Historical repricing remains exclusive to the explicit preview/apply
+//     endpoint.
+//
+// TelemetrySessionTracker's repo fields (chargeRepo, geofenceRepo, ...) are
+// concrete *xxxdb.XxxRepo types, not interfaces — there is no fake-pool test
+// seam for this package (see place_label_repair_test.go's identical
+// rationale). These tests reuse that file's DATABASE_URL/TESLASYNC_TEST_DSN
+// gating (repairDSNOrSkip) and skip cleanly wherever no reachable database
+// with migration 000228 applied is configured, mirroring
+// database/energy/roundtrip_test.go and place_label_repair_test.go.
+// =============================================================================
+
+// openGeofencePricingDB mirrors openRepairDB but asserts on the columns this
+// feature's migration (000228) adds instead of place_label_version.
+func openGeofencePricingDB(t *testing.T) *database.DB {
+	t.Helper()
+	pool, err := pgxpool.New(context.Background(), repairDSNOrSkip(t))
+	if err != nil {
+		t.Skipf("cannot open pool: %v", err)
+	}
+	t.Cleanup(pool.Close)
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+	if err := pool.Ping(ctx); err != nil {
+		t.Skipf("cannot reach database: %v", err)
+	}
+	db := &database.DB{Pool: pool}
+	if _, err := pool.Exec(ctx, `SELECT geofence_id, rate_id, cost_source FROM charging_sessions LIMIT 0`); err != nil {
+		t.Skipf("charging_sessions geofence-pricing columns missing; migration 000228 not applied: %v", err)
+	}
+	if _, err := pool.Exec(ctx, `SELECT rate_per_wh, currency, effective_from, effective_to FROM geofence_rates LIMIT 0`); err != nil {
+		t.Skipf("geofence_rates table missing; migration 000228 not applied: %v", err)
+	}
+	return db
+}
+
+// counterValue reads the current scalar value of a prometheus Counter without
+// pulling in the prometheus/client_golang/prometheus/testutil package. Local
+// copy of the identically-named helper in internal/api/api_call_log_middleware_test.go
+// (that package is not importable from this subpackage's test binary).
+func counterValue(c interface {
+	Write(*dto.Metric) error
+}) float64 {
+	pb := &dto.Metric{}
+	if err := c.Write(pb); err != nil {
+		return 0
+	}
+	return pb.GetCounter().GetValue()
+}
+
+// seedPricingGeofence inserts one geofence centered at (lat, lon) with a 75m
+// circle (the same radius FindOrCreateForCharging uses), removed via
+// t.Cleanup. FindByCoordinates has no spatial index — it scans every
+// non-archived geofence row and filters in Go — so distinct, deliberately
+// improbable test coordinates keep concurrently-run tests in this file from
+// ever matching each other's fixtures.
+func seedPricingGeofence(t *testing.T, db *database.DB, lat, lon float64, name string) int64 {
+	t.Helper()
+	ctx := context.Background()
+	wkt := systemmodel.CircleToPolygonWKT(lat, lon, 75)
+	var id int64
+	err := db.Pool.QueryRow(ctx, `
+INSERT INTO geofences (name, polygon_wkt, category, enabled, origin, needs_review)
+VALUES ($1, $2, 'custom', true, 'manual', false)
+RETURNING id`, name, wkt).Scan(&id)
+	if err != nil {
+		t.Fatalf("seed geofence: %v", err)
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM geofences WHERE id = $1`, id)
+	})
+	return id
+}
+
+// seedPricingRate inserts one geofence_rates version, removed via t.Cleanup.
+// effectiveTo may be zero-value (time.Time{}) to mean "open-ended" (NULL).
+func seedPricingRate(t *testing.T, db *database.DB, geofenceID int64, ratePerWh float64, currency string, effectiveFrom, effectiveTo time.Time) int64 {
+	t.Helper()
+	ctx := context.Background()
+	var effTo *time.Time
+	if !effectiveTo.IsZero() {
+		effTo = &effectiveTo
+	}
+	var id int64
+	err := db.Pool.QueryRow(ctx, `
+INSERT INTO geofence_rates (geofence_id, rate_per_wh, currency, effective_from, effective_to)
+VALUES ($1, $2, $3, $4, $5)
+RETURNING id`, geofenceID, ratePerWh, currency, effectiveFrom, effTo).Scan(&id)
+	if err != nil {
+		t.Fatalf("seed rate: %v", err)
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM geofence_rates WHERE id = $1`, id)
+	})
+	return id
+}
+
+// seedPricingSession inserts one charging_sessions row started at startedAt
+// with the given energy (nil for "no energy yet"), removed via t.Cleanup.
+func seedPricingSession(t *testing.T, db *database.DB, vehicleID int64, startedAt time.Time, energyWh *float64) int64 {
+	t.Helper()
+	ctx := context.Background()
+	var id int64
+	err := db.Pool.QueryRow(ctx, `
+INSERT INTO charging_sessions (vehicle_id, started_at, total_energy_added_wh)
+VALUES ($1, $2, $3)
+RETURNING id`, vehicleID, startedAt, energyWh).Scan(&id)
+	if err != nil {
+		t.Fatalf("seed charging session: %v", err)
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM charging_sessions WHERE id = $1`, id)
+	})
+	return id
+}
+
+func seedCompletedLegacyPricingSession(
+	t *testing.T,
+	db *database.DB,
+	vehicleID int64,
+	startedAt time.Time,
+	lat, lon float64,
+	startPlace string,
+	energyWh float64,
+) int64 {
+	t.Helper()
+	var id int64
+	err := db.Pool.QueryRow(context.Background(), `
+INSERT INTO charging_sessions (
+    vehicle_id, started_at, ended_at, start_lat, start_lng,
+    start_place, total_energy_added_wh
+)
+VALUES ($1, $2, $3, $4, $5, $6, $7)
+RETURNING id`,
+		vehicleID,
+		startedAt,
+		startedAt.Add(time.Hour),
+		lat,
+		lon,
+		startPlace,
+		energyWh,
+	).Scan(&id)
+	if err != nil {
+		t.Fatalf("seed completed legacy charging session: %v", err)
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM charging_sessions WHERE id = $1`, id)
+	})
+	return id
+}
+
+// pricingSessionRow is what the tests read back from charging_sessions after
+// calling applyGeofencePricingAsync.
+type pricingSessionRow struct {
+	geofenceID  *int64
+	rateID      *int64
+	costSource  *string
+	costDecimal *string // read as text to assert exact NUMERIC output, no float parsing
+	costCurr    *string
+}
+
+func readPricingSession(t *testing.T, db *database.DB, sessionID int64) pricingSessionRow {
+	t.Helper()
+	var row pricingSessionRow
+	err := db.Pool.QueryRow(context.Background(), `
+SELECT geofence_id, rate_id, cost_source, cost_decimal::text, cost_currency
+  FROM charging_sessions WHERE id = $1`, sessionID).
+		Scan(&row.geofenceID, &row.rateID, &row.costSource, &row.costDecimal, &row.costCurr)
+	if err != nil {
+		t.Fatalf("read charging session %d: %v", sessionID, err)
+	}
+	return row
+}
+
+func countGeofences(t *testing.T, db *database.DB) int {
+	t.Helper()
+	var n int
+	if err := db.Pool.QueryRow(context.Background(), `SELECT count(*) FROM geofences`).Scan(&n); err != nil {
+		t.Fatalf("count geofences: %v", err)
+	}
+	return n
+}
+
+// Deliberately-improbable, far-apart fixture coordinates so this file's
+// tests (and any concurrent geofence created by a genuinely different
+// process on a shared dev database) cannot spatially collide with one
+// another. Each constant is used by exactly one test below.
+const (
+	pricingLatBeforeCutover = 12.1000
+	pricingLonBeforeCutover = -45.1000
+	pricingLatNoRate        = 13.2000
+	pricingLonNoRate        = -46.2000
+	pricingLatDiscover      = 14.3000
+	pricingLonDiscover      = -47.3000
+	pricingLatPinnedRate    = 15.4000
+	pricingLonPinnedRate    = -48.4000
+	pricingLatLegacyCurrent = 16.5000
+	pricingLonLegacyCurrent = -49.5000
+	pricingLatLegacyHistory = 17.6000
+	pricingLonLegacyHistory = -50.6000
+	pricingLatLegacyActual  = 18.7000
+	pricingLonLegacyActual  = -51.7000
+)
+
+// TestApplyGeofencePricingAsync_UsesStartedAt_NotNow is the central proof
+// required by this feature: a session that STARTED before a rate cutover
+// must be priced with the OLD rate, even though the async pricing leg
+// always actually executes well after that historical cutover (i.e. "now"
+// falls inside the newer, open-ended rate's window in every one of these
+// fixtures). A regression that swapped GetActiveRateAt's instant argument
+// for time.Now() would silently apply the NEW rate/rate_id instead — this
+// test fails loudly if that happens.
+func TestApplyGeofencePricingAsync_UsesStartedAt_NotNow(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	geofenceID := seedPricingGeofence(t, db, pricingLatBeforeCutover, pricingLonBeforeCutover, "Old Rate Fixture Place")
+
+	cutover := time.Date(2021, 6, 15, 0, 0, 0, 0, time.UTC)
+	rateOldID := seedPricingRate(t, db, geofenceID, 0.0001, "USD", time.Date(2020, 1, 1, 0, 0, 0, 0, time.UTC), cutover)
+	rateNewID := seedPricingRate(t, db, geofenceID, 0.00012, "USD", cutover, time.Time{})
+	if rateOldID == rateNewID {
+		t.Fatalf("fixture bug: old and new rate ids must differ")
+	}
+
+	startedAt := time.Date(2020, 6, 1, 0, 0, 0, 0, time.UTC) // squarely inside the OLD rate's window
+	sessionID := seedPricingSession(t, db, 810001, startedAt, floatPtr(10000))
+
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	tracker.applyGeofencePricingAsync(sessionID, 810001, pricingLatBeforeCutover, pricingLonBeforeCutover, startedAt, map[string]interface{}{})
+
+	row := readPricingSession(t, db, sessionID)
+	if row.rateID == nil || *row.rateID != rateOldID {
+		t.Fatalf("rate_id = %v, want the OLD rate %d (session started before the cutover)", row.rateID, rateOldID)
+	}
+	if row.geofenceID == nil || *row.geofenceID != geofenceID {
+		t.Fatalf("geofence_id = %v, want %d", row.geofenceID, geofenceID)
+	}
+	if row.costSource == nil || *row.costSource != "geofence_tariff" {
+		t.Fatalf("cost_source = %v, want geofence_tariff", row.costSource)
+	}
+	// 10000 Wh * 0.0001 currency/Wh = 1.0000 exactly.
+	if row.costDecimal == nil || *row.costDecimal != "1.0000" {
+		t.Fatalf("cost_decimal = %v, want 1.0000 (10000 Wh at the OLD 0.0001/Wh rate)", row.costDecimal)
+	}
+	if row.costCurr == nil || *row.costCurr != "USD" {
+		t.Fatalf("cost_currency = %v, want USD", row.costCurr)
+	}
+}
+
+// TestApplyGeofencePricingAsync_UsesStartedAt_AtAndAfterCutover is the
+// companion boundary case: a session starting exactly AT (or after) the
+// cutover instant must get the NEW rate — pinning the half-open
+// [effective_from, effective_to) semantics end-to-end through the tracker,
+// not just at the repository layer (already covered by
+// internal/database/geofence's own rate tests).
+func TestApplyGeofencePricingAsync_UsesStartedAt_AtAndAfterCutover(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	geofenceID := seedPricingGeofence(t, db, pricingLatBeforeCutover+0.5, pricingLonBeforeCutover-0.5, "New Rate Fixture Place")
+
+	cutover := time.Date(2021, 6, 15, 0, 0, 0, 0, time.UTC)
+	_ = seedPricingRate(t, db, geofenceID, 0.0001, "USD", time.Date(2020, 1, 1, 0, 0, 0, 0, time.UTC), cutover)
+	rateNewID := seedPricingRate(t, db, geofenceID, 0.00012, "USD", cutover, time.Time{})
+
+	sessionID := seedPricingSession(t, db, 810002, cutover, floatPtr(10000)) // exactly at the boundary
+
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	tracker.applyGeofencePricingAsync(sessionID, 810002, pricingLatBeforeCutover+0.5, pricingLonBeforeCutover-0.5, cutover, map[string]interface{}{})
+
+	row := readPricingSession(t, db, sessionID)
+	if row.rateID == nil || *row.rateID != rateNewID {
+		t.Fatalf("rate_id = %v, want the NEW rate %d (session started exactly at the cutover, which is inclusive of the new period)", row.rateID, rateNewID)
+	}
+	// 10000 Wh * 0.00012 currency/Wh = 1.2000 exactly.
+	if row.costDecimal == nil || *row.costDecimal != "1.2000" {
+		t.Fatalf("cost_decimal = %v, want 1.2000 (10000 Wh at the NEW 0.00012/Wh rate)", row.costDecimal)
+	}
+}
+
+func TestApplyGeofencePricingAsync_DifferentPinnedRateRequiresExplicitApply(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	geofenceID := seedPricingGeofence(t, db, pricingLatPinnedRate, pricingLonPinnedRate, "Pinned Rate Fixture Place")
+	startedAt := time.Date(2026, 4, 1, 0, 0, 0, 0, time.UTC)
+	activeRateID := seedPricingRate(t, db, geofenceID, 0.00012, "USD", time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC), time.Time{})
+	sessionID := seedPricingSession(t, db, 810006, startedAt, floatPtr(10000))
+	pinnedRateID := activeRateID + 1_000_000
+
+	if _, err := db.Pool.Exec(context.Background(), `
+UPDATE charging_sessions
+SET geofence_id = $2,
+    rate_id = $3,
+    cost_source = 'geofence_tariff',
+    cost_decimal = 9.99,
+    cost_currency = 'USD'
+WHERE id = $1`, sessionID, geofenceID, pinnedRateID); err != nil {
+		t.Fatalf("seed pinned tariff: %v", err)
+	}
+
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	tracker.applyGeofencePricingAsync(
+		sessionID,
+		810006,
+		pricingLatPinnedRate,
+		pricingLonPinnedRate,
+		startedAt,
+		map[string]interface{}{},
+	)
+
+	row := readPricingSession(t, db, sessionID)
+	if row.rateID == nil || *row.rateID != pinnedRateID {
+		t.Fatalf("rate_id = %v, want pinned historical rate %d", row.rateID, pinnedRateID)
+	}
+	if row.costDecimal == nil || *row.costDecimal != "9.9900" {
+		t.Fatalf("cost_decimal = %v, want protected historical cost 9.9900", row.costDecimal)
+	}
+}
+
+func TestBackfillChargingPlace_UsesCurrentRateAsLegacyEstimate(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	geofenceID := seedPricingGeofence(
+		t,
+		db,
+		pricingLatLegacyCurrent,
+		pricingLonLegacyCurrent,
+		"Legacy Current-Rate Place",
+	)
+	now := time.Now().UTC().Truncate(time.Second)
+	currentRateID := seedPricingRate(t, db, geofenceID, 0.00012, "USD", now.Add(-24*time.Hour), time.Time{})
+	startedAt := time.Date(2020, 4, 1, 0, 0, 0, 0, time.UTC)
+	sessionID := seedCompletedLegacyPricingSession(
+		t,
+		db,
+		810007,
+		startedAt,
+		pricingLatLegacyCurrent,
+		pricingLonLegacyCurrent,
+		"Old Garage Label",
+		10000,
+	)
+
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	outcome, err := tracker.backfillChargingPlace(context.Background(), &systemmodel.ChargingPlaceBackfillCandidate{
+		SessionID:  sessionID,
+		VehicleID:  810007,
+		StartedAt:  startedAt,
+		StartLat:   pricingLatLegacyCurrent,
+		StartLng:   pricingLonLegacyCurrent,
+		StartPlace: strPtr("Old Garage Label"),
+	}, now)
+	if err != nil {
+		t.Fatalf("backfillChargingPlace: %v", err)
+	}
+	if outcome != "current_estimate" {
+		t.Fatalf("outcome=%q, want current_estimate", outcome)
+	}
+
+	row := readPricingSession(t, db, sessionID)
+	if row.geofenceID == nil || *row.geofenceID != geofenceID {
+		t.Fatalf("geofence_id=%v, want %d", row.geofenceID, geofenceID)
+	}
+	if row.rateID == nil || *row.rateID != currentRateID {
+		t.Fatalf("rate_id=%v, want today's rate %d", row.rateID, currentRateID)
+	}
+	if row.costSource == nil || *row.costSource != systemmodel.CostSourceDefaultEstimate {
+		t.Fatalf("cost_source=%v, want default_estimate", row.costSource)
+	}
+	if row.costDecimal == nil || *row.costDecimal != "1.2000" {
+		t.Fatalf("cost_decimal=%v, want 1.2000", row.costDecimal)
+	}
+}
+
+func TestBackfillChargingPlace_HistoricalRateWinsOverCurrentEstimate(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	geofenceID := seedPricingGeofence(
+		t,
+		db,
+		pricingLatLegacyHistory,
+		pricingLonLegacyHistory,
+		"Legacy Historical-Rate Place",
+	)
+	cutover := time.Date(2021, 1, 1, 0, 0, 0, 0, time.UTC)
+	historicalRateID := seedPricingRate(
+		t,
+		db,
+		geofenceID,
+		0.00010,
+		"USD",
+		time.Date(2019, 1, 1, 0, 0, 0, 0, time.UTC),
+		cutover,
+	)
+	_ = seedPricingRate(t, db, geofenceID, 0.00020, "USD", cutover, time.Time{})
+	startedAt := time.Date(2020, 4, 1, 0, 0, 0, 0, time.UTC)
+	sessionID := seedCompletedLegacyPricingSession(
+		t,
+		db,
+		810008,
+		startedAt,
+		pricingLatLegacyHistory,
+		pricingLonLegacyHistory,
+		"Historical Garage",
+		10000,
+	)
+
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	outcome, err := tracker.backfillChargingPlace(context.Background(), &systemmodel.ChargingPlaceBackfillCandidate{
+		SessionID:  sessionID,
+		VehicleID:  810008,
+		StartedAt:  startedAt,
+		StartLat:   pricingLatLegacyHistory,
+		StartLng:   pricingLonLegacyHistory,
+		StartPlace: strPtr("Historical Garage"),
+	}, time.Now().UTC())
+	if err != nil {
+		t.Fatalf("backfillChargingPlace: %v", err)
+	}
+	if outcome != "historical_rate" {
+		t.Fatalf("outcome=%q, want historical_rate", outcome)
+	}
+
+	row := readPricingSession(t, db, sessionID)
+	if row.rateID == nil || *row.rateID != historicalRateID {
+		t.Fatalf("rate_id=%v, want historical rate %d", row.rateID, historicalRateID)
+	}
+	if row.costSource == nil || *row.costSource != systemmodel.CostSourceGeofenceTariff {
+		t.Fatalf("cost_source=%v, want geofence_tariff", row.costSource)
+	}
+	if row.costDecimal == nil || *row.costDecimal != "1.0000" {
+		t.Fatalf("cost_decimal=%v, want 1.0000", row.costDecimal)
+	}
+}
+
+func TestBackfillChargingPlace_PreservesActualCostWhileAttachingPlace(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	geofenceID := seedPricingGeofence(
+		t,
+		db,
+		pricingLatLegacyActual,
+		pricingLonLegacyActual,
+		"Legacy Actual-Cost Place",
+	)
+	now := time.Now().UTC().Truncate(time.Second)
+	_ = seedPricingRate(t, db, geofenceID, 0.00012, "USD", now.Add(-24*time.Hour), time.Time{})
+	startedAt := time.Date(2020, 4, 1, 0, 0, 0, 0, time.UTC)
+	sessionID := seedCompletedLegacyPricingSession(
+		t,
+		db,
+		810009,
+		startedAt,
+		pricingLatLegacyActual,
+		pricingLonLegacyActual,
+		"Actual Cost Garage",
+		10000,
+	)
+	if _, err := db.Pool.Exec(context.Background(), `
+UPDATE charging_sessions
+SET cost_decimal = 7.25,
+    cost_currency = 'USD',
+    cost_source = 'manual'
+WHERE id = $1`, sessionID); err != nil {
+		t.Fatalf("seed manual cost: %v", err)
+	}
+
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	outcome, err := tracker.backfillChargingPlace(context.Background(), &systemmodel.ChargingPlaceBackfillCandidate{
+		SessionID:  sessionID,
+		VehicleID:  810009,
+		StartedAt:  startedAt,
+		StartLat:   pricingLatLegacyActual,
+		StartLng:   pricingLonLegacyActual,
+		StartPlace: strPtr("Actual Cost Garage"),
+	}, now)
+	if err != nil {
+		t.Fatalf("backfillChargingPlace: %v", err)
+	}
+	if outcome != "skipped" {
+		t.Fatalf("outcome=%q, want skipped", outcome)
+	}
+
+	row := readPricingSession(t, db, sessionID)
+	if row.geofenceID == nil || *row.geofenceID != geofenceID {
+		t.Fatalf("geofence_id=%v, want %d", row.geofenceID, geofenceID)
+	}
+	if row.rateID != nil {
+		t.Fatalf("rate_id=%v, want nil for protected actual cost", row.rateID)
+	}
+	if row.costSource == nil || *row.costSource != systemmodel.CostSourceManual {
+		t.Fatalf("cost_source=%v, want manual", row.costSource)
+	}
+	if row.costDecimal == nil || *row.costDecimal != "7.2500" {
+		t.Fatalf("cost_decimal=%v, want protected 7.2500", row.costDecimal)
+	}
+}
+
+// TestApplyGeofencePricingAsync_NoRateConfigured_LeavesSessionUnpriced
+// proves a matched geofence with no rate at all leaves the session's cost
+// fields untouched (implicitly "unknown", not an error) and is observable
+// via the no_rate metrics outcome — the Charging Places UI's "needs rate
+// setup" signal depends on this being silent, not a thrown error.
+func TestApplyGeofencePricingAsync_NoRateConfigured_LeavesSessionUnpriced(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	geofenceID := seedPricingGeofence(t, db, pricingLatNoRate, pricingLonNoRate, "No Rate Fixture Place")
+	sessionID := seedPricingSession(t, db, 810003, time.Now().UTC(), floatPtr(5000))
+
+	before := counterValue(metrics.GeofenceRateApplyTotal.WithLabelValues("no_rate"))
+
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	tracker.applyGeofencePricingAsync(sessionID, 810003, pricingLatNoRate, pricingLonNoRate, time.Now().UTC(), map[string]interface{}{})
+
+	after := counterValue(metrics.GeofenceRateApplyTotal.WithLabelValues("no_rate"))
+	if after != before+1 {
+		t.Fatalf("GeofenceRateApplyTotal{no_rate} = %v -> %v, want +1", before, after)
+	}
+
+	row := readPricingSession(t, db, sessionID)
+	if row.costSource != nil {
+		t.Fatalf("cost_source = %v, want nil/unset (no rate configured)", row.costSource)
+	}
+	if row.geofenceID == nil || *row.geofenceID != geofenceID {
+		t.Fatalf("geofence_id = %v, want %d (geofence still attaches even without a rate)", row.geofenceID, geofenceID)
+	}
+}
+
+// TestApplyGeofencePricingAsync_DiscoversNewGeofenceWhenNoneMatches proves
+// the tracker's full match-or-discover pipeline: with no existing geofence
+// at these coordinates, a provisional charging-place geofence is created
+// (origin=charging_discovery, needs_review=true) and attached to the
+// session, exercising the "auto-create" half of "match vs auto-create".
+func TestApplyGeofencePricingAsync_DiscoversNewGeofenceWhenNoneMatches(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	sessionID := seedPricingSession(t, db, 810004, time.Now().UTC(), floatPtr(5000))
+
+	before := countGeofences(t, db)
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	tracker.applyGeofencePricingAsync(sessionID, 810004, pricingLatDiscover, pricingLonDiscover, time.Now().UTC(), map[string]interface{}{})
+	after := countGeofences(t, db)
+	if after != before+1 {
+		t.Fatalf("geofence count = %d -> %d, want +1 (exactly one provisional place created)", before, after)
+	}
+
+	row := readPricingSession(t, db, sessionID)
+	if row.geofenceID == nil {
+		t.Fatalf("geofence_id = nil, want the newly-discovered geofence attached")
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM geofences WHERE id = $1`, *row.geofenceID)
+	})
+
+	var origin string
+	var needsReview bool
+	if err := db.Pool.QueryRow(context.Background(),
+		`SELECT origin, needs_review FROM geofences WHERE id = $1`, *row.geofenceID).Scan(&origin, &needsReview); err != nil {
+		t.Fatalf("read discovered geofence: %v", err)
+	}
+	if origin != "charging_discovery" {
+		t.Fatalf("origin = %q, want charging_discovery", origin)
+	}
+	if !needsReview {
+		t.Fatalf("needs_review = false, want true for an auto-discovered place")
+	}
+}
+
+// TestApplyGeofencePricingAsync_ZeroCoordinates_NeverCreatesGeofence proves
+// the "no position behavior" requirement at the tracker layer: (0,0) (the
+// null-island sentinel for "no GPS fix yet") must never create a geofence,
+// and the resulting discovery failure must not prevent the session's other
+// enhanced fields from being persisted or otherwise fail the caller.
+func TestApplyGeofencePricingAsync_ZeroCoordinates_NeverCreatesGeofence(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	sessionID := seedPricingSession(t, db, 810005, time.Now().UTC(), floatPtr(5000))
+
+	beforeGeofences := countGeofences(t, db)
+	beforeErrors := counterValue(metrics.GeofenceDiscoveryTotal.WithLabelValues("error"))
+
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{}, nil)
+	tracker.applyGeofencePricingAsync(sessionID, 810005, 0, 0, time.Now().UTC(), map[string]interface{}{"charger_type": "AC"})
+
+	afterGeofences := countGeofences(t, db)
+	if afterGeofences != beforeGeofences {
+		t.Fatalf("geofence count = %d -> %d, want unchanged for (0,0) coordinates", beforeGeofences, afterGeofences)
+	}
+	afterErrors := counterValue(metrics.GeofenceDiscoveryTotal.WithLabelValues("error"))
+	if afterErrors != beforeErrors+1 {
+		t.Fatalf("GeofenceDiscoveryTotal{error} = %v -> %v, want +1", beforeErrors, afterErrors)
+	}
+
+	row := readPricingSession(t, db, sessionID)
+	if row.geofenceID != nil {
+		t.Fatalf("geofence_id = %v, want nil (discovery must fail closed for (0,0))", row.geofenceID)
+	}
+	// The other enhanced fields passed in by the caller must still make it
+	// to the row even though geofence resolution failed — this is the
+	// "discovery failure does not fail charge completion" contract: the
+	// function falls back to persisting fields as-is instead of losing them.
+	var chargerType *string
+	if err := db.Pool.QueryRow(context.Background(), `SELECT charger_type FROM charging_sessions WHERE id = $1`, sessionID).Scan(&chargerType); err != nil {
+		t.Fatalf("read charger_type: %v", err)
+	}
+	if chargerType == nil || *chargerType != "AC" {
+		t.Fatalf("charger_type = %v, want AC (fields must still be persisted after a discovery failure)", chargerType)
+	}
+}
+
+// TestApplyGeofencePricingAsync_BrokenDatabaseNeverPanics is the strongest
+// form of "discovery/pricing failure does not fail charge completion": with
+// every underlying database call failing (a closed connection pool), the
+// function must still return normally — no panic, no propagated error (it
+// has no return value to propagate one through), and no indefinite block.
+// Needs no reachable database at all — pgxpool.New connects lazily, so a
+// pool pointed at a deliberately-unused local port opens successfully and
+// then fails fast on first use, letting this test run in any environment
+// without DATABASE_URL/TESLASYNC_TEST_DSN configured.
+func TestApplyGeofencePricingAsync_BrokenDatabaseNeverPanics(t *testing.T) {
+	pool, err := pgxpool.New(context.Background(), "postgres://nope:nope@127.0.0.1:1/nonexistent?connect_timeout=1")
+	if err != nil {
+		t.Fatalf("pgxpool.New (lazy connect) unexpectedly failed: %v", err)
+	}
+	defer pool.Close()
+
+	db := &database.DB{Pool: pool}
+	tracker := NewTelemetrySessionTracker(db, nil, &stubGeocoder{err: context.DeadlineExceeded}, nil)
+
+	beforeErrors := counterValue(metrics.GeofenceDiscoveryTotal.WithLabelValues("error"))
+
+	panicked := callAndRecover(func() {
+		tracker.applyGeofencePricingAsync(999999001, 999999001, 37.7749, -122.4194, time.Now().UTC(), map[string]interface{}{"charger_type": "DC"})
+	})
+	if panicked != nil {
+		t.Fatalf("applyGeofencePricingAsync panicked with every DB call failing: %v", panicked)
+	}
+
+	afterErrors := counterValue(metrics.GeofenceDiscoveryTotal.WithLabelValues("error"))
+	if afterErrors != beforeErrors+1 {
+		t.Fatalf("GeofenceDiscoveryTotal{error} = %v -> %v, want +1 (failure must still be observable)", beforeErrors, afterErrors)
+	}
+}
+
+// callAndRecover runs fn and returns the recovered panic value, or nil if fn
+// returned normally. Used to make "this call must not panic" an explicit,
+// readable assertion instead of relying on the test runner's own implicit
+// panic-equals-failure behavior.
+func callAndRecover(fn func()) (recovered interface{}) {
+	defer func() {
+		recovered = recover()
+	}()
+	fn()
+	return nil
+}
+
+// TestSafeGo_RecoversPanicAndReturnsImmediately pins the panic-recovery
+// wrapper installed around the real call site (completeChargeLocked's
+// `safeGo("charge_geofence_pricing", func() { t.applyGeofencePricingAsync(...) })`
+// in telemetry_sessions_charge_tracking.go): a panicking background
+// goroutine must never crash the process, and the caller (standing in for
+// completeChargeLocked, which must finish and release its lock regardless
+// of what the fire-and-forget pricing leg does) must not block waiting for
+// it.
+func TestSafeGo_RecoversPanicAndReturnsImmediately(t *testing.T) {
+	const label = "test_charge_geofence_pricing_panic"
+	before := counterValue(metrics.PanicsRecovered.WithLabelValues(label))
+
+	done := make(chan struct{})
+	start := time.Now()
+	safeGo(label, func() {
+		defer close(done)
+		panic("boom: simulated geofence pricing panic")
+	})
+	elapsed := time.Since(start)
+	if elapsed > time.Second {
+		t.Fatalf("safeGo blocked its caller for %v — it must return immediately", elapsed)
+	}
+
+	select {
+	case <-done:
+	case <-time.After(2 * time.Second):
+		t.Fatal("panicking goroutine never completed its deferred cleanup — recover() did not run")
+	}
+
+	// Poll briefly: close(done) unwinds as part of fn's own deferred calls,
+	// which run BEFORE the panic propagates up to safeGo's recover() (and
+	// thus before the metrics increment) — so done closing only proves fn's
+	// frame unwound, not that the outer recover has run yet.
+	deadline := time.Now().Add(2 * time.Second)
+	for {
+		after := counterValue(metrics.PanicsRecovered.WithLabelValues(label))
+		if after == before+1 {
+			break
+		}
+		if time.Now().After(deadline) {
+			t.Fatalf("PanicsRecovered{%s} = %v -> %v, want +1", label, before, after)
+		}
+		time.Sleep(10 * time.Millisecond)
+	}
+}
diff --git a/internal/api/telemetry/telemetry_sessions_charge_tracking.go b/internal/api/telemetry/telemetry_sessions_charge_tracking.go
index 22018afaf6..175402ba1f 100644
--- a/internal/api/telemetry/telemetry_sessions_charge_tracking.go
+++ b/internal/api/telemetry/telemetry_sessions_charge_tracking.go
@@ -11,7 +11,6 @@ import (
 	"github.com/jackc/pgx/v5"
 	"github.com/rs/zerolog/log"
 
-	dbadmin "github.com/ev-dev-labs/teslasync/internal/database/admin"
 	"github.com/ev-dev-labs/teslasync/internal/enums"
 	"github.com/ev-dev-labs/teslasync/internal/events"
 	"github.com/ev-dev-labs/teslasync/internal/signal"
@@ -92,8 +91,9 @@ type streamingCharge struct {
 	lastTelemetryWrite time.Time
 
 	// Location
-	Latitude  *float64
-	Longitude *float64
+	Latitude      *float64
+	Longitude     *float64
+	LocationFresh bool
 
 	// Temperature accumulators
 	InsideTempSum, OutsideTempSum float64
@@ -122,6 +122,64 @@ type streamingCharge struct {
 	state signal.StateReader
 }
 
+func freshChargeCoordinateValue(v *signal.Value, at time.Time) bool {
+	if at.IsZero() {
+		at = time.Now().UTC()
+	}
+	return signal.IsLiveSignalFresh(v, at) &&
+		!v.Timestamp.After(at.Add(signal.LiveSignalFreshnessThreshold))
+}
+
+func firstStoredSignal(store *signal.Store, vehicleID int64, keys ...string) *signal.Value {
+	if store == nil {
+		return nil
+	}
+	for _, key := range keys {
+		if value := store.Get(vehicleID, key); value != nil {
+			return value
+		}
+	}
+	return nil
+}
+
+// chargeLocationIsFresh confirms that the coordinates resolved for a charge
+// came from the current telemetry window. Auto-discovery must never act on a
+// forward-folded location from a prior drive.
+func (t *TelemetrySessionTracker) chargeLocationIsFresh(
+	vehicleID int64,
+	signals map[string]interface{},
+	fieldTs map[string]time.Time,
+	payloadTs, at time.Time,
+) bool {
+	if _, _, ok := signalLatLon(signals); ok {
+		observedAt := time.Time{}
+		for _, key := range []string{
+			"Location",
+			"LocationLatitude",
+			"LocationLongitude",
+			"Latitude",
+			"Longitude",
+		} {
+			if ts := fieldTs[key]; !ts.IsZero() &&
+				(observedAt.IsZero() || ts.Before(observedAt)) {
+				observedAt = ts
+			}
+		}
+		if observedAt.IsZero() {
+			observedAt = payloadTs
+		}
+		if observedAt.IsZero() {
+			observedAt = at
+		}
+		return freshChargeCoordinateValue(&signal.Value{Timestamp: observedAt}, at)
+	}
+
+	latValue := firstStoredSignal(t.localSignals, vehicleID, "LocationLatitude", "Latitude")
+	lonValue := firstStoredSignal(t.localSignals, vehicleID, "LocationLongitude", "Longitude")
+	return freshChargeCoordinateValue(latValue, at) &&
+		freshChargeCoordinateValue(lonValue, at)
+}
+
 func (t *TelemetrySessionTracker) trackCharging(ctx context.Context, vehicleID int64, vin string, signals map[string]interface{}, accumulatedSignals map[string]interface{}, payloadTs time.Time, fieldTs map[string]time.Time) {
 	chargeState, hasChargeState := signalStr(signals, "DetailedChargeState", "ChargeState")
 	if !hasChargeState {
@@ -165,12 +223,18 @@ func (t *TelemetrySessionTracker) trackCharging(ctx context.Context, vehicleID i
 			startTs = payloadTs
 		}
 		startTs = eventTimeOrNow(startTs)
+		locationFresh := hasLoc &&
+			t.chargeLocationIsFresh(vehicleID, signals, fieldTs, payloadTs, startTs)
 
 		session := &chargingmodel.ChargingSession{
 			VehicleID:   vehicleID,
 			StartedAt:   startTs,
 			StartSocPct: floatPtr(float64(batteryLevel)),
 		}
+		if locationFresh {
+			session.StartLat = floatPtr(lat)
+			session.StartLng = floatPtr(lon)
+		}
 
 		if err := t.chargeRepo.Create(ctx, session); err != nil {
 			log.Error().Err(err).Int64("vehicle_id", vehicleID).Msg("telemetry: failed to create charge session")
@@ -190,6 +254,7 @@ func (t *TelemetrySessionTracker) trackCharging(ctx context.Context, vehicleID i
 		if hasLoc {
 			sc.Latitude = floatPtr(lat)
 			sc.Longitude = floatPtr(lon)
+			sc.LocationFresh = locationFresh
 		}
 		if startRange > 0 {
 			sc.StartRangeKm = floatPtr(startRange)
@@ -198,6 +263,23 @@ func (t *TelemetrySessionTracker) trackCharging(ctx context.Context, vehicleID i
 		t.activeCharges[vehicleID] = sc
 		metrics.ChargeSessionsActive.Inc()
 
+		// Surface a newly discovered charging place as soon as a confirmed
+		// charge starts. The same idempotent routine runs again at completion
+		// once energy is known, when it can also calculate the session cost.
+		if sc.LocationFresh && t.geofenceRepo != nil {
+			sessionID, startLat, startLon := sc.SessionID, *sc.Latitude, *sc.Longitude
+			safeGo("charge_geofence_discovery", func() {
+				t.applyGeofencePricingAsync(
+					sessionID,
+					vehicleID,
+					startLat,
+					startLon,
+					startTs,
+					map[string]interface{}{},
+				)
+			})
+		}
+
 		// Accumulate and flush first reading immediately
 		sc.accumulatedSignals = accumulateSignals(sc.accumulatedSignals, signals)
 		t.flushChargeTelemetry(ctx, sc)
@@ -211,6 +293,18 @@ func (t *TelemetrySessionTracker) trackCharging(ctx context.Context, vehicleID i
 	} else if isCharging && hasCharge {
 		// === UPDATE ACTIVE CHARGE ===
 		active.LastSeen = time.Now().UTC()
+		if lat, lon, ok := t.resolveLatLon(vehicleID, signals, accumulatedSignals); ok &&
+			t.chargeLocationIsFresh(
+				vehicleID,
+				signals,
+				fieldTs,
+				payloadTs,
+				eventTimeOrNow(payloadTs),
+			) {
+			active.Latitude = floatPtr(lat)
+			active.Longitude = floatPtr(lon)
+			active.LocationFresh = true
+		}
 
 		// Track energy
 		if ea, ok := signalFloat(signals, "DCChargingEnergyIn"); ok {
@@ -265,6 +359,18 @@ func (t *TelemetrySessionTracker) trackCharging(ctx context.Context, vehicleID i
 
 	} else if !isCharging && hasCharge {
 		// === CHARGE ENDED ===
+		if lat, lon, ok := t.resolveLatLon(vehicleID, signals, accumulatedSignals); ok &&
+			t.chargeLocationIsFresh(
+				vehicleID,
+				signals,
+				fieldTs,
+				payloadTs,
+				eventTimeOrNow(payloadTs),
+			) {
+			active.Latitude = floatPtr(lat)
+			active.Longitude = floatPtr(lon)
+			active.LocationFresh = true
+		}
 		t.completeChargeLocked(ctx, vehicleID, active, signals, payloadTs)
 	}
 }
@@ -511,9 +617,16 @@ func (t *TelemetrySessionTracker) completeChargeLocked(ctx context.Context, vehi
 		}
 	}
 
-	// Default cost_currency — will be overridden when geofence electricity pricing is implemented
-	// TODO: Set from geofence.ElectricityCurrency when Geofence model gains that field
-	enhancedFields["cost_currency"] = "USD"
+	// cost_currency / cost_decimal / geofence_id / rate_id / cost_source are
+	// intentionally NOT defaulted here. Charging-place pricing (see
+	// applyGeofencePricingAsync below) resolves/creates the session's
+	// geofence and looks up its rate keyed on StartTime — that can only
+	// happen after this function knows a location, and per the hot-path
+	// rule it must never block synchronous charge completion, so it always
+	// runs in the async leg alongside the existing place-name resolution. A
+	// session with no location, or a geofence with no rate configured yet,
+	// is left with cost_source unset (implicitly "unknown") rather than a
+	// fabricated currency — see repriceEligibleCostSources precedence.
 
 	if err := t.db.WithTx(ctx, func(tx pgx.Tx) error {
 		var endSocPct *float64
@@ -590,57 +703,31 @@ func (t *TelemetrySessionTracker) completeChargeLocked(ctx context.Context, vehi
 			}
 		}
 
-		// TODO: Auto-calculate charge cost from geofence electricity rate.
-		// Geofence model does not yet have ElectricityRate/ElectricityCurrency fields.
-		// When added, compute: cost_decimal = energyAddedWh * ratePerWh, cost_currency = geofence.ElectricityCurrency.
+		// Geofence attribution + rate-based cost calculation happen in the
+		// async leg below (applyGeofencePricingAsync) — never inside this
+		// transaction: discovery involves an advisory-lock round trip and
+		// must not add latency/failure surface to charge completion itself.
 
 		return nil
 	}); err != nil {
 		log.Error().Err(err).Int64("session_id", active.SessionID).Msg("telemetry: failed to complete charge")
 	}
 
-	// Resolve location name async — geocoding stays outside the transaction
-	if len(enhancedFields) > 0 && active.Latitude != nil && active.Longitude != nil {
+	// Resolve place name + charging-place geofence/rate attribution async —
+	// geocoding, discovery, and pricing all stay outside the completion
+	// transaction. Guarded on location alone (NOT len(enhancedFields) > 0 —
+	// removing the old blanket cost_currency default made enhancedFields
+	// legitimately empty on many sessions, and we must still attempt place
+	// resolution + geofence pricing whenever coordinates are available).
+	if active.LocationFresh && active.Latitude != nil && active.Longitude != nil {
 		fieldsCopy := make(map[string]interface{}, len(enhancedFields)+1)
 		for k, v := range enhancedFields {
 			fieldsCopy[k] = v
 		}
-		go func(sessionID int64, lat, lon float64, fields map[string]interface{}) {
-			gctx, cancel := context.WithTimeout(context.Background(), 15*time.Second)
-			defer cancel()
-
-			// 1. Check geofences first (user-defined name)
-			if geofences, err := t.geofenceRepo.FindByCoordinates(gctx, lat, lon); err == nil && len(geofences) > 0 {
-				fields["start_place"] = geofences[0].Name
-				_ = t.chargeRepo.PartialUpdate(gctx, sessionID, fields)
-				return
-			}
-
-			// 2. Check places cache (previously resolved, within 50m)
-			if cached, err := t.placesCache.FindNearby(gctx, lat, lon, 50); err == nil && cached != nil {
-				_ = t.placesCache.IncrementHitCount(gctx, cached.ID)
-				fields["start_place"] = cached.DisplayName
-				_ = t.chargeRepo.PartialUpdate(gctx, sessionID, fields)
-				return
-			}
-
-			// 3. Reverse geocode and cache the result
-			result, err := t.geocoder.ReverseGeocode(gctx, lat, lon)
-			if err != nil {
-				_ = t.chargeRepo.PartialUpdate(gctx, sessionID, fields)
-				return
-			}
-			name := result.ShortName()
-			fields["start_place"] = name
-			_ = t.chargeRepo.PartialUpdate(gctx, sessionID, fields)
-
-			// Save to cache
-			_ = t.placesCache.Upsert(gctx, &dbadmin.PlaceCacheEntry{
-				Latitude: lat, Longitude: lon, DisplayName: name, Source: "geocoding",
-				City: ptrStrOrNil(result.City), State: ptrStrOrNil(result.State),
-				Country: ptrStrOrNil(result.Country), Postcode: ptrStrOrNil(result.PostCode),
-			})
-		}(active.SessionID, *active.Latitude, *active.Longitude, fieldsCopy)
+		sessionID, lat, lon, startedAt := active.SessionID, *active.Latitude, *active.Longitude, active.StartTime
+		safeGo("charge_geofence_pricing", func() {
+			t.applyGeofencePricingAsync(sessionID, vehicleID, lat, lon, startedAt, fieldsCopy)
+		})
 	}
 
 	log.Info().Int64("vehicle_id", vehicleID).Int64("session_id", active.SessionID).
diff --git a/internal/api/telemetry/telemetry_sessions_drive_geofence_attachment_test.go b/internal/api/telemetry/telemetry_sessions_drive_geofence_attachment_test.go
new file mode 100644
index 0000000000..5f75192929
--- /dev/null
+++ b/internal/api/telemetry/telemetry_sessions_drive_geofence_attachment_test.go
@@ -0,0 +1,155 @@
+package telemetry
+
+import (
+	"context"
+	"errors"
+	"testing"
+
+	"github.com/ev-dev-labs/teslasync/internal/database"
+	"github.com/ev-dev-labs/teslasync/internal/geocoding"
+)
+
+// =============================================================================
+// telemetry_sessions_drive_geofence_attachment_test.go — tracker-layer tests
+// for resolveAndUpdateAddress's geofence attachment behavior (migration
+// 000228_geofence_charging_place_pricing).
+//
+// Business requirement #5 ("drive start/end naming... existing place text
+// retained as fallback") and the auto-discovery design's explicit "match vs
+// auto-create" split are pinned here:
+//   - A drive endpoint that falls inside an existing geofence attaches that
+//     geofence's id (start_geofence_id/end_geofence_id) AND uses its name
+//     for start_place/end_place, same as before this feature except for the
+//     new id attachment.
+//   - A drive endpoint NEVER auto-creates a geofence — that is exclusive to
+//     a confirmed charging session (see
+//     telemetry_sessions_charge_geofence_pricing_test.go). No match simply
+//     falls through to the pre-existing places-cache/geocoder resolution
+//     chain, exactly as before this feature.
+//
+// Reuses this package's existing openGeofencePricingDB/seedPricingGeofence/
+// countGeofences helpers (telemetry_sessions_charge_geofence_pricing_test.go)
+// and the stubGeocoder type (place_label_repair_test.go).
+// =============================================================================
+
+const (
+	driveGeofenceLat = 15.4000
+	driveGeofenceLon = -48.4000
+	driveNoMatchLat  = 16.5000
+	driveNoMatchLon  = -49.5000
+)
+
+// errDriveGeocoderMustNotBeCalled documents intent: a stubGeocoder wired
+// with this error makes "the geocoder must never be reached" an explicit,
+// named failure mode instead of an unexplained generic error string.
+var errDriveGeocoderMustNotBeCalled = errors.New("geocoder must not be called when an existing geofence already matched")
+
+// seedDriveRow inserts one bare drives row (no place/coords yet) for
+// vehicleID, removed via t.Cleanup.
+func seedDriveRow(t *testing.T, db *database.DB, vehicleID int64) int64 {
+	t.Helper()
+	var id int64
+	err := db.Pool.QueryRow(context.Background(),
+		`INSERT INTO drives (vehicle_id, started_at) VALUES ($1, now()) RETURNING id`, vehicleID).Scan(&id)
+	if err != nil {
+		t.Fatalf("seed drive: %v", err)
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM drives WHERE id = $1`, id)
+	})
+	return id
+}
+
+// geocoderWithResult returns a stubGeocoder that answers exactly one
+// coordinate with a named result, using ShortName()'s Name-preferred branch.
+func geocoderWithResult(lat, lon float64, name string) *stubGeocoder {
+	return &stubGeocoder{results: map[string]*geocoding.GeoResult{
+		coordKey(lat, lon): {Name: name},
+	}}
+}
+
+// readDriveGeofenceFields reads back one place/geofence-id column pair
+// (start_place+start_geofence_id, or end_place+end_geofence_id) for a drive.
+func readDriveGeofenceFields(t *testing.T, db *database.DB, driveID int64, placeCol, geofenceCol string) (*string, *int64) {
+	t.Helper()
+	var place *string
+	var geofenceID *int64
+	query := `SELECT ` + placeCol + `, ` + geofenceCol + ` FROM drives WHERE id = $1`
+	if err := db.Pool.QueryRow(context.Background(), query, driveID).Scan(&place, &geofenceID); err != nil {
+		t.Fatalf("read drive %d (%s, %s): %v", driveID, placeCol, geofenceCol, err)
+	}
+	return place, geofenceID
+}
+
+// TestResolveAndUpdateAddress_MatchesGeofence_SetsPlaceAndGeofenceID proves
+// the match half of "match vs auto-create" at the tracker layer: a drive
+// endpoint whose coordinates fall inside an existing geofence gets both its
+// place text AND its new start_geofence_id/end_geofence_id column set from
+// that match — never from the places cache or geocoder (which the stub
+// below would fail loudly if reached, since it returns an error).
+func TestResolveAndUpdateAddress_MatchesGeofence_SetsPlaceAndGeofenceID(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	geofenceID := seedPricingGeofence(t, db, driveGeofenceLat, driveGeofenceLon, "Matched Drive Endpoint Place")
+
+	startDriveID := seedDriveRow(t, db, 820001)
+	endDriveID := seedDriveRow(t, db, 820002)
+
+	geo := &stubGeocoder{err: errDriveGeocoderMustNotBeCalled}
+	tracker := NewTelemetrySessionTracker(db, nil, geo, nil)
+
+	if ok := tracker.resolveAndUpdateAddress(startDriveID, driveGeofenceLat, driveGeofenceLon, true, resolveUseCache); !ok {
+		t.Fatalf("resolveAndUpdateAddress(start) = false, want true (geofence match)")
+	}
+	if ok := tracker.resolveAndUpdateAddress(endDriveID, driveGeofenceLat, driveGeofenceLon, false, resolveUseCache); !ok {
+		t.Fatalf("resolveAndUpdateAddress(end) = false, want true (geofence match)")
+	}
+
+	startPlace, startGeofenceID := readDriveGeofenceFields(t, db, startDriveID, "start_place", "start_geofence_id")
+	if startPlace == nil || *startPlace != "Matched Drive Endpoint Place" {
+		t.Fatalf("start_place = %v, want the matched geofence's name", startPlace)
+	}
+	if startGeofenceID == nil || *startGeofenceID != geofenceID {
+		t.Fatalf("start_geofence_id = %v, want %d", startGeofenceID, geofenceID)
+	}
+
+	endPlace, endGeofenceID := readDriveGeofenceFields(t, db, endDriveID, "end_place", "end_geofence_id")
+	if endPlace == nil || *endPlace != "Matched Drive Endpoint Place" {
+		t.Fatalf("end_place = %v, want the matched geofence's name", endPlace)
+	}
+	if endGeofenceID == nil || *endGeofenceID != geofenceID {
+		t.Fatalf("end_geofence_id = %v, want %d", endGeofenceID, geofenceID)
+	}
+}
+
+// TestResolveAndUpdateAddress_NoMatch_NeverCreatesGeofence proves the other
+// half: with no existing geofence at these coordinates, the function must
+// (a) leave start_geofence_id/end_geofence_id nil, (b) never insert a new
+// geofence row (auto-create is exclusive to confirmed charging sessions),
+// and (c) still fall through to the pre-existing geocoder resolution chain
+// so place naming keeps working exactly as it did before this feature.
+func TestResolveAndUpdateAddress_NoMatch_NeverCreatesGeofence(t *testing.T) {
+	db := openGeofencePricingDB(t)
+	driveID := seedDriveRow(t, db, 820003)
+
+	geo := geocoderWithResult(driveNoMatchLat, driveNoMatchLon, "Fallback Geocoded Place")
+	tracker := NewTelemetrySessionTracker(db, nil, geo, nil)
+
+	before := countGeofences(t, db)
+	ok := tracker.resolveAndUpdateAddress(driveID, driveNoMatchLat, driveNoMatchLon, true, resolveUseCache)
+	after := countGeofences(t, db)
+
+	if !ok {
+		t.Fatalf("resolveAndUpdateAddress = false, want true (geocoder fallback succeeds)")
+	}
+	if after != before {
+		t.Fatalf("geofence count = %d -> %d, want unchanged (drive endpoints never auto-create)", before, after)
+	}
+
+	startPlace, startGeofenceID := readDriveGeofenceFields(t, db, driveID, "start_place", "start_geofence_id")
+	if startGeofenceID != nil {
+		t.Fatalf("start_geofence_id = %v, want nil (no geofence matched)", startGeofenceID)
+	}
+	if startPlace == nil || *startPlace != "Fallback Geocoded Place" {
+		t.Fatalf("start_place = %v, want the geocoder's fallback name", startPlace)
+	}
+}
diff --git a/internal/api/telemetry/telemetry_sessions_drive_tracking.go b/internal/api/telemetry/telemetry_sessions_drive_tracking.go
index c9063f606f..5c0e5dbfc4 100644
--- a/internal/api/telemetry/telemetry_sessions_drive_tracking.go
+++ b/internal/api/telemetry/telemetry_sessions_drive_tracking.go
@@ -1364,13 +1364,26 @@ func (t *TelemetrySessionTracker) resolveAndUpdateAddress(driveID int64, lat, lo
 	// skips fields not in the allowlist, leaving end_place permanently NULL
 	// and the Visited Locations page empty.
 	field := "end_place"
+	geofenceField := "end_geofence_id"
 	if isStart {
 		field = "start_place"
-	}
-
-	// 1. Check geofences first (user-defined names like "Home", "Office")
+		geofenceField = "start_geofence_id"
+	}
+
+	// 1. Check geofences first (user-defined names like "Home", "Office").
+	// Match-only — a drive endpoint NEVER auto-creates a geofence (that is
+	// exclusive to a confirmed charging session; see
+	// telemetry_sessions_charge_geofence_pricing.go). Attaching
+	// start_geofence_id/end_geofence_id lets a later place rename
+	// retroactively improve this drive's displayed name — see
+	// DriveRepo.resolveCurrentGeofenceNames and the StartGeofenceID doc on
+	// drivemodel.Drive — while start_place/end_place keep storing today's
+	// name as the permanent fallback.
 	if geofences, err := t.geofenceRepo.FindByCoordinates(ctx, lat, lon); err == nil && len(geofences) > 0 {
-		_ = t.driveRepo.PartialUpdate(ctx, driveID, map[string]interface{}{field: geofences[0].Name})
+		_ = t.driveRepo.PartialUpdate(ctx, driveID, map[string]interface{}{
+			field:         geofences[0].Name,
+			geofenceField: geofences[0].ID,
+		})
 		metrics.GeocodingTotal.WithLabelValues("geofence").Inc()
 		return true
 	}
diff --git a/internal/app/new.go b/internal/app/new.go
index 72c1a5f07f..893847e165 100644
--- a/internal/app/new.go
+++ b/internal/app/new.go
@@ -123,6 +123,7 @@ func New(ctx context.Context, cfg *config.Config, build BuildInfo) (*App, error)
 	if err := a.initTelemetryHandler(ctx); err != nil {
 		return a, err
 	}
+	a.initChargingPlaceHistoryBackfill(ctx)
 
 	a.initWorker(ctx)
 	a.initNotificationWorker(ctx)
@@ -786,7 +787,9 @@ func (a *App) initTelemetryHandler(ctx context.Context) error {
 
 	a.TelemetryHandler.StartCleanup(ctx)
 
-	go a.TelemetryHandler.SessionTracker().BackfillAddresses(ctx)
+	if sessionTracker != nil {
+		go sessionTracker.BackfillAddresses(ctx)
+	}
 
 	if a.MQTT != nil && a.Cfg.FleetTelemetry.TopicBase != "" {
 		if err := a.initPipelineSubscriber(ctx, vehicleRepo); err != nil {
@@ -796,6 +799,19 @@ func (a *App) initTelemetryHandler(ctx context.Context) error {
 	return nil
 }
 
+// initChargingPlaceHistoryBackfill runs independently of Fleet Telemetry.
+// Polling-only installations still have historical charging sessions that
+// need place attribution and current-rate estimates.
+func (a *App) initChargingPlaceHistoryBackfill(ctx context.Context) {
+	var sessionTracker *apitelem.TelemetrySessionTracker
+	if a.TelemetryHandler != nil {
+		sessionTracker = a.TelemetryHandler.SessionTracker()
+	} else {
+		sessionTracker = apitelem.NewTelemetrySessionTracker(a.DB, a.EventBus, nil, nil)
+	}
+	sessionTracker.StartChargingPlaceHistoryBackfill(ctx)
+}
+
 // initPipelineSubscriber wires the telemetry ingest stack:
 // 12 writers → router.New → unit-history cache+repo → SideEffectsObserver
 // + SoftwareUpdateObserver → normalize.Pipeline → MQTT PipelineSubscriber.
diff --git a/internal/app/wiring_test.go b/internal/app/wiring_test.go
index 903b3342e4..471ce15b16 100644
--- a/internal/app/wiring_test.go
+++ b/internal/app/wiring_test.go
@@ -143,3 +143,28 @@ func TestCutover_ProductionMQTTHelperWired(t *testing.T) {
 		t.Fatal("phase-42a/0050 cutover incomplete: mqtt.NewProductionPipelineMQTT( missing from internal/app; the PipelineSubscriber requires the auto-ack-disabled paho client + DLQ produced by this helper (added in phase-42a/0040)")
 	}
 }
+
+func TestChargingPlaceHistoryBackfillRunsWithoutFleetTelemetry(t *testing.T) {
+	src := readAppSources(t)
+	for _, required := range []string{
+		"a.initChargingPlaceHistoryBackfill(ctx)",
+		"sessionTracker = apitelem.NewTelemetrySessionTracker(a.DB, a.EventBus, nil, nil)",
+		"sessionTracker.StartChargingPlaceHistoryBackfill(ctx)",
+	} {
+		if !strings.Contains(src, required) {
+			t.Errorf("charging-place history backfill wiring missing %q", required)
+		}
+	}
+
+	initTelemetryAt := strings.Index(src, "if err := a.initTelemetryHandler(ctx); err != nil")
+	backfillAt := strings.Index(src, "a.initChargingPlaceHistoryBackfill(ctx)")
+	initWorkerAt := strings.Index(src, "a.initWorker(ctx)")
+	if initTelemetryAt < 0 || backfillAt < initTelemetryAt || initWorkerAt < backfillAt {
+		t.Fatalf(
+			"charging-place backfill must start after telemetry initialization and before workers: telemetry=%d backfill=%d worker=%d",
+			initTelemetryAt,
+			backfillAt,
+			initWorkerAt,
+		)
+	}
+}
diff --git a/internal/database/charging/repo.go b/internal/database/charging/repo.go
index 1f871d59ab..429adf17e4 100644
--- a/internal/database/charging/repo.go
+++ b/internal/database/charging/repo.go
@@ -9,6 +9,7 @@ import (
 	chargingmodel "github.com/ev-dev-labs/teslasync/internal/models/charging"
 
 	"github.com/jackc/pgx/v5"
+	"github.com/rs/zerolog/log"
 )
 
 // ChargingRepo provides charging session data access against the SI canonical
@@ -26,7 +27,8 @@ const chargingColumns = `id, vehicle_id, started_at, ended_at,
 start_soc_pct, end_soc_pct, delta_soc_pct,
 start_odometer_m, end_odometer_m, start_lat, start_lng,
 start_place, total_energy_added_wh, peak_power_w, avg_power_w,
-cost_decimal, cost_currency, cable_type, charger_type`
+cost_decimal, cost_currency, cable_type, charger_type,
+geofence_id, rate_id, cost_source`
 
 func scanChargingSession(row interface{ Scan(dest ...any) error }) (*chargingmodel.ChargingSession, error) {
 	c := &chargingmodel.ChargingSession{}
@@ -36,6 +38,7 @@ func scanChargingSession(row interface{ Scan(dest ...any) error }) (*chargingmod
 		&c.StartOdometerM, &c.EndOdometerM, &c.StartLat, &c.StartLng,
 		&c.StartPlace, &c.TotalEnergyAddedWh, &c.PeakPowerW, &c.AvgPowerW,
 		&c.CostDecimal, &c.CostCurrency, &c.CableType, &c.ChargerType,
+		&c.GeofenceID, &c.RateID, &c.CostSource,
 	)
 	if err != nil {
 		return nil, err
@@ -61,7 +64,8 @@ UPDATE charging_sessions SET
 ended_at=$2, total_energy_added_wh=$3, end_soc_pct=$4,
 delta_soc_pct = CASE WHEN start_soc_pct IS NOT NULL AND $4::double precision IS NOT NULL THEN $4::double precision - start_soc_pct ELSE delta_soc_pct END,
 peak_power_w=$5, avg_power_w=$6,
-cost_decimal=$7, cost_currency=$8
+cost_decimal=COALESCE($7, cost_decimal),
+cost_currency=COALESCE($8, cost_currency)
 WHERE id=$1`
 	_, err := r.db.Pool.Exec(ctx, query, id, endTs,
 		totalEnergyAddedWh, endSocPct, peakPowerW, avgPowerW, costDecimal, costCurrency)
@@ -98,7 +102,14 @@ func (r *ChargingRepo) GetByVehicle(ctx context.Context, vehicleID int64, limit,
 		}
 		sessions = append(sessions, c)
 	}
-	return sessions, rows.Err()
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	if err := r.resolveCurrentGeofenceNames(ctx, sessions); err != nil {
+		log.Warn().Err(err).Int64("vehicle_id", vehicleID).
+			Msg("charging sessions: failed to resolve current geofence names")
+	}
+	return sessions, nil
 }
 
 func (r *ChargingRepo) GetByID(ctx context.Context, id int64) (*chargingmodel.ChargingSession, error) {
@@ -110,6 +121,10 @@ func (r *ChargingRepo) GetByID(ctx context.Context, id int64) (*chargingmodel.Ch
 	if err != nil {
 		return nil, err
 	}
+	if err := r.resolveCurrentGeofenceNames(ctx, []*chargingmodel.ChargingSession{c}); err != nil {
+		log.Warn().Err(err).Int64("session_id", id).
+			Msg("charging session: failed to resolve current geofence name")
+	}
 	return c, nil
 }
 
@@ -131,7 +146,62 @@ ORDER BY started_at DESC`
 		}
 		sessions = append(sessions, c)
 	}
-	return sessions, rows.Err()
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	if err := r.resolveCurrentGeofenceNames(ctx, sessions); err != nil {
+		log.Warn().Err(err).Msg("stale charging sessions: failed to resolve current geofence names")
+	}
+	return sessions, nil
+}
+
+// resolveCurrentGeofenceNames overlays the latest user-defined geofence name
+// onto a session's stored start_place fallback. Renaming an auto-discovered
+// place therefore improves historical charging labels without rewriting
+// session rows; if the geofence cannot be resolved, the original text stays.
+func (r *ChargingRepo) resolveCurrentGeofenceNames(ctx context.Context, sessions []*chargingmodel.ChargingSession) error {
+	ids := make(map[int64]struct{})
+	for _, session := range sessions {
+		if session != nil && session.GeofenceID != nil {
+			ids[*session.GeofenceID] = struct{}{}
+		}
+	}
+	if len(ids) == 0 {
+		return nil
+	}
+
+	idList := make([]int64, 0, len(ids))
+	for id := range ids {
+		idList = append(idList, id)
+	}
+	rows, err := r.db.Pool.Query(ctx, `SELECT id, name FROM geofences WHERE id = ANY($1)`, idList)
+	if err != nil {
+		return err
+	}
+	defer rows.Close()
+
+	names := make(map[int64]string, len(ids))
+	for rows.Next() {
+		var id int64
+		var name string
+		if err := rows.Scan(&id, &name); err != nil {
+			return err
+		}
+		names[id] = name
+	}
+	if err := rows.Err(); err != nil {
+		return err
+	}
+
+	for _, session := range sessions {
+		if session == nil || session.GeofenceID == nil {
+			continue
+		}
+		if name, ok := names[*session.GeofenceID]; ok {
+			session.StartPlace = &name
+		}
+	}
+	return nil
 }
 
 var ChargingPartialAllowed = map[string]string{
@@ -151,6 +221,9 @@ var ChargingPartialAllowed = map[string]string{
 	"start_lng":             "start_lng",
 	"start_odometer_m":      "start_odometer_m",
 	"end_odometer_m":        "end_odometer_m",
+	"geofence_id":           "geofence_id",
+	"rate_id":               "rate_id",
+	"cost_source":           "cost_source",
 }
 
 func filterChargingPartialFields(in map[string]interface{}) map[string]interface{} {
@@ -225,7 +298,8 @@ UPDATE charging_sessions SET
 ended_at=$2, total_energy_added_wh=$3, end_soc_pct=$4,
 delta_soc_pct = CASE WHEN start_soc_pct IS NOT NULL AND $4::double precision IS NOT NULL THEN $4::double precision - start_soc_pct ELSE delta_soc_pct END,
 peak_power_w=$5, avg_power_w=$6,
-cost_decimal=$7, cost_currency=$8
+cost_decimal=COALESCE($7, cost_decimal),
+cost_currency=COALESCE($8, cost_currency)
 WHERE id=$1`
 	_, err := tx.Exec(ctx, query, id, endTs,
 		totalEnergyAddedWh, endSocPct, peakPowerW, avgPowerW, costDecimal, costCurrency)
@@ -256,3 +330,42 @@ UPDATE charging_telemetry
 	}
 	return tag.RowsAffected(), nil
 }
+
+// ApplyGeofenceTariff prices a single completed charging session using one
+// specific geofence rate version, computing cost_decimal via PostgreSQL
+// NUMERIC arithmetic (never Go float64 multiplication) per the SI /
+// no-binary-float-money design rule. total_energy_added_wh is already SI
+// watt-hours, so no unit conversion is needed — only a currency-safe decimal
+// multiply.
+//
+// It is idempotent and safe to call repeatedly (e.g. from the async
+// post-completion telemetry leg, which may retry): the WHERE clause can
+// replace a default estimate and reapply the SAME pinned geofence rate, while
+// NULL/unknown provenance is only eligible when cost_decimal is also NULL.
+// A different geofence rate can only replace history through the explicit
+// preview/apply flow. It never touches manual, Tesla-actual, or pre-feature
+// costs with unknown provenance. Returns whether a row was actually updated
+// (false means the session already has a protected cost, is missing energy
+// data, or does not exist).
+func (r *ChargingRepo) ApplyGeofenceTariff(ctx context.Context, sessionID, geofenceID, rateID int64, ratePerWh float64, currency string) (bool, error) {
+	const query = `
+UPDATE charging_sessions
+   SET cost_decimal  = ROUND((COALESCE(total_energy_added_wh, 0)::numeric * $4::numeric), 6),
+       cost_currency = $5,
+       geofence_id   = $2,
+       rate_id       = $3,
+       cost_source   = 'geofence_tariff'
+ WHERE id = $1
+   AND total_energy_added_wh IS NOT NULL
+   AND (
+       cost_source = 'default_estimate'
+       OR (cost_source = 'geofence_tariff' AND rate_id = $3)
+       OR (cost_source IS NULL AND cost_decimal IS NULL)
+       OR (cost_source = 'unknown' AND cost_decimal IS NULL)
+   )`
+	tag, err := r.db.Pool.Exec(ctx, query, sessionID, geofenceID, rateID, ratePerWh, currency)
+	if err != nil {
+		return false, fmt.Errorf("apply geofence tariff to session %d: %w", sessionID, err)
+	}
+	return tag.RowsAffected() > 0, nil
+}
diff --git a/internal/database/drive/repo.go b/internal/database/drive/repo.go
index 7a4934da5e..1f92ba1f74 100644
--- a/internal/database/drive/repo.go
+++ b/internal/database/drive/repo.go
@@ -11,6 +11,7 @@ import (
 
 	"github.com/ev-dev-labs/teslasync/internal/tracing"
 	"github.com/jackc/pgx/v5"
+	"github.com/rs/zerolog/log"
 )
 
 // SI canonical schema (migration 000185_drives_si). The drives table is
@@ -47,7 +48,7 @@ const driveColumns = `id, vehicle_id, started_at, ended_at, duration_s, distance
 	start_place, end_place, start_lat, start_lng, end_lat, end_lng,
 	start_soc_pct, end_soc_pct,
 	energy_used_wh, regen_energy_wh, avg_speed_mps, max_speed_mps, avg_power_w,
-	ambient_temp_c_avg`
+	ambient_temp_c_avg, start_geofence_id, end_geofence_id`
 
 // scanDrive scans the SI canonical column list into a drivemodel.Drive. No unit
 // conversion is performed — both struct and DB are SI canonical.
@@ -64,7 +65,7 @@ func scanDrive(row interface{ Scan(dest ...any) error }) (*drivemodel.Drive, err
 		&d.StartAddress, &d.EndAddress, &d.StartLat, &d.StartLon, &d.EndLat, &d.EndLon,
 		&startSocPct, &endSocPct,
 		&d.EnergyUsedWh, &d.RegenEnergyWh, &d.AvgSpeedMps, &d.MaxSpeedMps, &d.AvgPowerW,
-		&d.OutsideTempAvgC,
+		&d.OutsideTempAvgC, &d.StartGeofenceID, &d.EndGeofenceID,
 	)
 	if err != nil {
 		return nil, err
@@ -191,7 +192,15 @@ func (r *DriveRepo) GetByVehicle(ctx context.Context, vehicleID int64, limit, of
 		}
 		drives = append(drives, d)
 	}
-	return drives, rows.Err()
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	if err := r.resolveCurrentGeofenceNames(ctx, drives); err != nil {
+		// Non-fatal: the list is still correct using stored start_place/
+		// end_place text, just not refreshed with a since-renamed place.
+		log.Warn().Err(err).Int64("vehicle_id", vehicleID).Msg("drives: failed to resolve current geofence names")
+	}
+	return drives, nil
 }
 
 func (r *DriveRepo) GetByID(ctx context.Context, id int64) (*drivemodel.Drive, error) {
@@ -203,7 +212,88 @@ func (r *DriveRepo) GetByID(ctx context.Context, id int64) (*drivemodel.Drive, e
 		return nil, nil
 	}
 	tracing.EndSpan(span, err)
-	return d, err
+	if err != nil {
+		return nil, err
+	}
+	if err := r.resolveCurrentGeofenceNames(ctx, []*drivemodel.Drive{d}); err != nil {
+		log.Warn().Err(err).Int64("drive_id", id).Msg("drives: failed to resolve current geofence names")
+	}
+	return d, nil
+}
+
+// resolveCurrentGeofenceNames overlays each drive's StartAddress/EndAddress
+// with the CURRENT name of its attached geofence (StartGeofenceID /
+// EndGeofenceID), leaving the originally-stored start_place/end_place text
+// untouched as the fallback when no geofence is attached or the batch
+// lookup comes up empty for that id. This is what lets a place rename
+// (e.g. "Unnamed Charging Place" → "Grandma's House") retroactively improve
+// historical drive display without rewriting any stored row.
+//
+// Deliberately does NOT filter on archived_at: "archived places... remain
+// resolvable for history" means an archived place's current (possibly
+// renamed) name is still preferred over the frozen fallback text — only a
+// truly nonexistent id (never possible today; ids are never hard-deleted)
+// would fail to resolve and fall back silently.
+//
+// One batched `id = ANY($1)` query regardless of how many drives are
+// passed in, so GetByVehicle's page of (up to) LIMIT rows costs one extra
+// round trip, not one per row.
+func (r *DriveRepo) resolveCurrentGeofenceNames(ctx context.Context, drives []*drivemodel.Drive) error {
+	ids := make(map[int64]struct{})
+	for _, d := range drives {
+		if d == nil {
+			continue
+		}
+		if d.StartGeofenceID != nil {
+			ids[*d.StartGeofenceID] = struct{}{}
+		}
+		if d.EndGeofenceID != nil {
+			ids[*d.EndGeofenceID] = struct{}{}
+		}
+	}
+	if len(ids) == 0 {
+		return nil
+	}
+	idList := make([]int64, 0, len(ids))
+	for id := range ids {
+		idList = append(idList, id)
+	}
+
+	rows, err := r.db.Pool.Query(ctx, `SELECT id, name FROM geofences WHERE id = ANY($1)`, idList)
+	if err != nil {
+		return fmt.Errorf("drives resolve_geofence_names query: %w", err)
+	}
+	defer rows.Close()
+
+	names := make(map[int64]string, len(idList))
+	for rows.Next() {
+		var id int64
+		var name string
+		if err := rows.Scan(&id, &name); err != nil {
+			return fmt.Errorf("drives resolve_geofence_names scan: %w", err)
+		}
+		names[id] = name
+	}
+	if err := rows.Err(); err != nil {
+		return fmt.Errorf("drives resolve_geofence_names iter: %w", err)
+	}
+
+	for _, d := range drives {
+		if d == nil {
+			continue
+		}
+		if d.StartGeofenceID != nil {
+			if name, ok := names[*d.StartGeofenceID]; ok {
+				d.StartAddress = &name
+			}
+		}
+		if d.EndGeofenceID != nil {
+			if name, ok := names[*d.EndGeofenceID]; ok {
+				d.EndAddress = &name
+			}
+		}
+	}
+	return nil
 }
 
 // GetStale returns drives that have no end timestamp and started before the
@@ -295,6 +385,11 @@ var DrivePartialAllowed = map[string]string{
 	// values in meters directly.
 	"start_odometer_m": "start_odometer_m",
 	"end_odometer_m":   "end_odometer_m",
+	// Charging-place geofence attribution (migration
+	// 000228_geofence_charging_place_pricing). Match-only, no DB FK — see
+	// drivemodel.Drive.StartGeofenceID / EndGeofenceID doc comment.
+	"start_geofence_id": "start_geofence_id",
+	"end_geofence_id":   "end_geofence_id",
 }
 
 // PartialUpdate updates only the provided fields on a drive. The fields map
diff --git a/internal/database/drive/repo_geofence_names_test.go b/internal/database/drive/repo_geofence_names_test.go
new file mode 100644
index 0000000000..c128ce4e0a
--- /dev/null
+++ b/internal/database/drive/repo_geofence_names_test.go
@@ -0,0 +1,197 @@
+package drive
+
+import (
+	"context"
+	"testing"
+	"time"
+
+	"github.com/ev-dev-labs/teslasync/internal/database"
+)
+
+// =============================================================================
+// repo_geofence_names_test.go — proves resolveCurrentGeofenceNames' central
+// contract for the geofence-based charging-place pricing feature (migration
+// 000228_geofence_charging_place_pricing), business requirement #5: "The
+// same geofence identity should support drive start/end naming so renames
+// can improve historical display, with existing place text retained as
+// fallback."
+//
+// DriveRepo has no fake-pool test seam (concrete db *database.DB field, not
+// an interface) — same architectural gap as ChargingRepo — so this reuses
+// the file's own established live-database pattern
+// (repairDSNOrSkip/openRepairTestDB, already defined in
+// place_label_repair_test.go in this package) rather than inventing a new
+// mocking approach.
+// =============================================================================
+
+// seedGeofenceNameFixture inserts one geofence directly (this package does
+// not import internal/database/geofence to avoid a needless cross-package
+// dependency for a single fixture row), returning its id. Removed via
+// t.Cleanup.
+func seedGeofenceNameFixture(t *testing.T, db *database.DB, name string) int64 {
+	t.Helper()
+	ctx := context.Background()
+	var id int64
+	err := db.Pool.QueryRow(ctx, `
+INSERT INTO geofences (name, polygon_wkt, category, enabled, origin, needs_review)
+VALUES ($1, 'POLYGON((0 0,0 0.001,0.001 0.001,0.001 0,0 0))', 'custom', true, 'manual', false)
+RETURNING id`, name).Scan(&id)
+	if err != nil {
+		t.Fatalf("seed geofence: %v", err)
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM geofences WHERE id = $1`, id)
+	})
+	return id
+}
+
+func renameGeofence(t *testing.T, db *database.DB, geofenceID int64, newName string) {
+	t.Helper()
+	if _, err := db.Pool.Exec(context.Background(), `UPDATE geofences SET name = $1 WHERE id = $2`, newName, geofenceID); err != nil {
+		t.Fatalf("rename geofence %d: %v", geofenceID, err)
+	}
+}
+
+// TestGetByID_GeofenceRename_RetroactivelyImprovesDisplay is the direct
+// regression test for business requirement #5: renaming a geofence must
+// change what GetByID returns for a drive attached to it — on the NEXT
+// read, with no rewrite of the drive row itself — while the originally
+// stored start_place/end_place text remains in the database as the
+// permanent fallback (proven by the "no geofence attached" drive in the
+// same test never changing).
+func TestGetByID_GeofenceRename_RetroactivelyImprovesDisplay(t *testing.T) {
+	db := openRepairTestDB(t, repairDSNOrSkip(t))
+	repo := NewDriveRepo(db)
+	vehicleID := seedRepairFixture(t, db)
+
+	geofenceID := seedGeofenceNameFixture(t, db, "Unnamed Charging Place")
+
+	var attachedDriveID int64
+	err := db.Pool.QueryRow(context.Background(), `
+INSERT INTO drives (vehicle_id, started_at, start_place, start_geofence_id, place_label_version)
+VALUES ($1, now(), 'stored fallback text from discovery time', $2, $3)
+RETURNING id`, vehicleID, geofenceID, PlaceLabelVersion).Scan(&attachedDriveID)
+	if err != nil {
+		t.Fatalf("seed attached drive: %v", err)
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM drives WHERE id = $1`, attachedDriveID)
+	})
+
+	// A sibling drive with NO geofence attached — its stored start_place
+	// must never be overlaid by anything, proving the fallback path is
+	// untouched by the rename below.
+	var unattachedDriveID int64
+	err = db.Pool.QueryRow(context.Background(), `
+INSERT INTO drives (vehicle_id, started_at, start_place, place_label_version)
+VALUES ($1, now(), 'permanent fallback text', $2)
+RETURNING id`, vehicleID, PlaceLabelVersion).Scan(&unattachedDriveID)
+	if err != nil {
+		t.Fatalf("seed unattached drive: %v", err)
+	}
+	t.Cleanup(func() {
+		_, _ = db.Pool.Exec(context.Background(), `DELETE FROM drives WHERE id = $1`, unattachedDriveID)
+	})
+
+	// Before any rename: the attached drive's displayed name is the
+	// geofence's original name (an overlay, not the stored fallback text) —
+	// resolveCurrentGeofenceNames already prefers the live geofence name
+	// even on the very first read.
+	before, err := repo.GetByID(context.Background(), attachedDriveID)
+	if err != nil {
+		t.Fatalf("GetByID (before rename): %v", err)
+	}
+	if before.StartAddress == nil || *before.StartAddress != "Unnamed Charging Place" {
+		t.Fatalf("StartAddress before rename = %v, want the geofence's current name %q", before.StartAddress, "Unnamed Charging Place")
+	}
+
+	// Rename the geofence — simulating a user editing "Unnamed Charging
+	// Place" to a friendly name once they review it in the Charging Places
+	// UI. No drive row is touched by this statement.
+	renameGeofence(t, db, geofenceID, "Grandma's House")
+
+	after, err := repo.GetByID(context.Background(), attachedDriveID)
+	if err != nil {
+		t.Fatalf("GetByID (after rename): %v", err)
+	}
+	if after.StartAddress == nil || *after.StartAddress != "Grandma's House" {
+		t.Fatalf("StartAddress after rename = %v, want the NEW geofence name %q — rename must retroactively improve display", after.StartAddress, "Grandma's House")
+	}
+
+	// The unattached sibling drive's stored text must be completely
+	// unaffected by the rename — it has no geofence to overlay from.
+	unattached, err := repo.GetByID(context.Background(), unattachedDriveID)
+	if err != nil {
+		t.Fatalf("GetByID (unattached): %v", err)
+	}
+	if unattached.StartAddress == nil || *unattached.StartAddress != "permanent fallback text" {
+		t.Fatalf("unattached drive StartAddress = %v, want unchanged stored fallback text", unattached.StartAddress)
+	}
+	if unattached.StartGeofenceID != nil {
+		t.Fatalf("unattached drive StartGeofenceID = %v, want nil", unattached.StartGeofenceID)
+	}
+}
+
+// TestGetByVehicle_BatchesGeofenceNameResolution proves
+// resolveCurrentGeofenceNames' batched (single query regardless of row
+// count) contract still resolves correctly across a page of many drives —
+// a regression that broke the ANY($1) batching (e.g. only resolving the
+// first match) would surface as silently-stale names for every drive after
+// the first.
+func TestGetByVehicle_BatchesGeofenceNameResolution(t *testing.T) {
+	db := openRepairTestDB(t, repairDSNOrSkip(t))
+	repo := NewDriveRepo(db)
+	vehicleID := seedRepairFixture(t, db)
+
+	geofenceA := seedGeofenceNameFixture(t, db, "Place A")
+	geofenceB := seedGeofenceNameFixture(t, db, "Place B")
+
+	insertDriveWithGeofence := func(startGeofenceID, endGeofenceID *int64, offset time.Duration) int64 {
+		var id int64
+		err := db.Pool.QueryRow(context.Background(), `
+INSERT INTO drives (vehicle_id, started_at, start_place, end_place, start_geofence_id, end_geofence_id, place_label_version)
+VALUES ($1, now() - $2::interval, 'fallback start', 'fallback end', $3, $4, $5)
+RETURNING id`, vehicleID, fdur(offset), startGeofenceID, endGeofenceID, PlaceLabelVersion).Scan(&id)
+		if err != nil {
+			t.Fatalf("seed drive: %v", err)
+		}
+		t.Cleanup(func() {
+			_, _ = db.Pool.Exec(context.Background(), `DELETE FROM drives WHERE id = $1`, id)
+		})
+		return id
+	}
+
+	driveA := insertDriveWithGeofence(&geofenceA, nil, time.Hour)
+	driveB := insertDriveWithGeofence(nil, &geofenceB, 2*time.Hour)
+	driveBoth := insertDriveWithGeofence(&geofenceA, &geofenceB, 3*time.Hour)
+
+	drives, err := repo.GetByVehicle(context.Background(), vehicleID, 50, 0, time.Time{}, time.Time{})
+	if err != nil {
+		t.Fatalf("GetByVehicle: %v", err)
+	}
+	byID := make(map[int64]*driveByIDResult, len(drives))
+	for _, d := range drives {
+		byID[d.ID] = &driveByIDResult{startAddr: d.StartAddress, endAddr: d.EndAddress}
+	}
+
+	if got := byID[driveA]; got == nil || got.startAddr == nil || *got.startAddr != "Place A" {
+		t.Errorf("driveA StartAddress = %v, want Place A", got)
+	}
+	if got := byID[driveB]; got == nil || got.endAddr == nil || *got.endAddr != "Place B" {
+		t.Errorf("driveB EndAddress = %v, want Place B", got)
+	}
+	if got := byID[driveBoth]; got == nil || got.startAddr == nil || *got.startAddr != "Place A" || got.endAddr == nil || *got.endAddr != "Place B" {
+		t.Errorf("driveBoth = %v, want start=Place A end=Place B", got)
+	}
+}
+
+type driveByIDResult struct {
+	startAddr *string
+	endAddr   *string
+}
+
+// fdur renders a time.Duration as a Postgres interval literal understood by
+// `::interval`.
+func fdur(d time.Duration) string {
+	return d.String()
+}
diff --git a/internal/database/geofence/fakes_test.go b/internal/database/geofence/fakes_test.go
index f936bb2440..beaf04b228 100644
--- a/internal/database/geofence/fakes_test.go
+++ b/internal/database/geofence/fakes_test.go
@@ -125,12 +125,16 @@ var _ geofencePool = (*fakePool)(nil)
 type fakeTx struct {
 	pgx.Tx
 
-	execQueue []execResult
+	execQueue     []execResult
+	queryQueue    []queryResult
+	queryRowQueue []pgx.Row
 
 	commitErr   error
 	rollbackErr error
 
 	execCalls     []recordedCall
+	queryCalls    []recordedCall
+	queryRowCalls []recordedCall
 	commitCalls   int
 	rollbackCalls int
 }
@@ -147,6 +151,26 @@ func (t *fakeTx) Exec(_ context.Context, sql string, args ...any) (pgconn.Comman
 	return pgconn.CommandTag{}, nil
 }
 
+func (t *fakeTx) Query(_ context.Context, sql string, args ...any) (pgx.Rows, error) {
+	t.queryCalls = append(t.queryCalls, recordedCall{sql: sql, args: cloneArgs(args)})
+	if len(t.queryQueue) > 0 {
+		r := t.queryQueue[0]
+		t.queryQueue = t.queryQueue[1:]
+		return r.rows, r.err
+	}
+	return newFakeRows(nil), nil
+}
+
+func (t *fakeTx) QueryRow(_ context.Context, sql string, args ...any) pgx.Row {
+	t.queryRowCalls = append(t.queryRowCalls, recordedCall{sql: sql, args: cloneArgs(args)})
+	if len(t.queryRowQueue) > 0 {
+		r := t.queryRowQueue[0]
+		t.queryRowQueue = t.queryRowQueue[1:]
+		return r
+	}
+	return fakeRow{}
+}
+
 func (t *fakeTx) Commit(_ context.Context) error {
 	t.commitCalls++
 	return t.commitErr
@@ -263,6 +287,16 @@ func geofenceRowVals(g *systemmodel.Geofence) []any {
 		g.ID, g.Name, g.PolygonWKT, g.Category,
 		g.Enabled, g.AlertOnEntry, g.AlertOnExit,
 		g.CreatedAt, g.UpdatedAt,
+		g.Origin, g.NeedsReview, g.ArchivedAt,
+	}
+}
+
+// geofenceRateRowVals renders a GeofenceRate into the column-ordered []any
+// that scanGeofenceRate expects (see geofenceRateColumns).
+func geofenceRateRowVals(gr *systemmodel.GeofenceRate) []any {
+	return []any{
+		gr.ID, gr.GeofenceID, gr.RatePerWh, gr.Currency,
+		gr.EffectiveFrom, gr.EffectiveTo, gr.CreatedAt,
 	}
 }
 
diff --git a/internal/database/geofence/repo.go b/internal/database/geofence/repo.go
index aab47df2a0..dd4714bf2a 100644
--- a/internal/database/geofence/repo.go
+++ b/internal/database/geofence/repo.go
@@ -5,6 +5,7 @@ import (
 	"errors"
 	"fmt"
 	"math"
+	"sort"
 	"time"
 
 	"github.com/ev-dev-labs/teslasync/internal/database"
@@ -16,7 +17,7 @@ import (
 // geofenceColumns is the canonical projection for every SELECT in this file.
 // Column order MUST match scanGeofence() arg order; keep them in sync or
 // pgx scan errors will surface at first list/get.
-const geofenceColumns = `id, name, polygon_wkt, category, enabled, alert_on_entry, alert_on_exit, created_at, updated_at`
+const geofenceColumns = `id, name, polygon_wkt, category, enabled, alert_on_entry, alert_on_exit, created_at, updated_at, origin, needs_review, archived_at`
 
 // scanGeofence is the single point of truth for geofences row → struct
 // mapping so a column rename only requires one edit.
@@ -31,6 +32,9 @@ func scanGeofence(row pgx.Row, g *systemmodel.Geofence) error {
 		&g.AlertOnExit,
 		&g.CreatedAt,
 		&g.UpdatedAt,
+		&g.Origin,
+		&g.NeedsReview,
+		&g.ArchivedAt,
 	)
 }
 
@@ -44,21 +48,43 @@ func NewGeofenceRepo(db *database.DB) *GeofenceRepo {
 }
 
 func (r *GeofenceRepo) Create(ctx context.Context, g *systemmodel.Geofence) error {
-	query := `INSERT INTO geofences (name, polygon_wkt, category, enabled, alert_on_entry, alert_on_exit, created_at, updated_at)
-		VALUES ($1, $2, $3, $4, $5, $6, $7, $7) RETURNING id`
+	if g.Origin == "" {
+		g.Origin = systemmodel.GeofenceOriginManual
+	}
+	query := `INSERT INTO geofences (name, polygon_wkt, category, enabled, alert_on_entry, alert_on_exit, created_at, updated_at, origin, needs_review)
+		VALUES ($1, $2, $3, $4, $5, $6, $7, $7, $8, $9) RETURNING id`
 	now := time.Now().UTC()
 	if err := r.pool.QueryRow(ctx, query,
 		g.Name, g.PolygonWKT, g.Category,
 		g.Enabled, g.AlertOnEntry, g.AlertOnExit,
-		now,
+		now, g.Origin, g.NeedsReview,
 	).Scan(&g.ID); err != nil {
 		return fmt.Errorf("geofences create: %w", err)
 	}
+	g.CreatedAt, g.UpdatedAt = now, now
 	return nil
 }
 
+// GetAll lists active (non-archived) geofences. Archived places are excluded
+// from this default listing per the historical-integrity rule — they remain
+// individually resolvable via GetByID for history, but never appear in the
+// general management list.
 func (r *GeofenceRepo) GetAll(ctx context.Context) ([]*systemmodel.Geofence, error) {
-	query := `SELECT ` + geofenceColumns + ` FROM geofences ORDER BY name LIMIT 500`
+	return r.getAll(ctx, false)
+}
+
+// GetAllIncludingArchived lists active and archived geofences for management
+// surfaces that explicitly request historical places.
+func (r *GeofenceRepo) GetAllIncludingArchived(ctx context.Context) ([]*systemmodel.Geofence, error) {
+	return r.getAll(ctx, true)
+}
+
+func (r *GeofenceRepo) getAll(ctx context.Context, includeArchived bool) ([]*systemmodel.Geofence, error) {
+	query := `SELECT ` + geofenceColumns + ` FROM geofences`
+	if !includeArchived {
+		query += ` WHERE archived_at IS NULL`
+	}
+	query += ` ORDER BY archived_at NULLS FIRST, name LIMIT 500`
 	rows, err := r.pool.Query(ctx, query)
 	if err != nil {
 		return nil, fmt.Errorf("geofences get_all query: %w", err)
@@ -92,20 +118,26 @@ func (r *GeofenceRepo) GetByID(ctx context.Context, id int64) (*systemmodel.Geof
 	return g, nil
 }
 
+// Update applies the CRUD/alert-relevant fields (name, geometry, category,
+// enabled, alert flags, needs_review). It deliberately does NOT touch Origin
+// (immutable provenance set once at creation) or ArchivedAt (owned
+// exclusively by Archive/Unarchive so a routine merge-PUT can never
+// accidentally resurrect or retire a place).
 func (r *GeofenceRepo) Update(ctx context.Context, g *systemmodel.Geofence) error {
 	query := `UPDATE geofences
 		SET name=$2, polygon_wkt=$3, category=$4,
 		    enabled=$5, alert_on_entry=$6, alert_on_exit=$7,
-		    updated_at=$8
+		    needs_review=$8, updated_at=$9
 		WHERE id=$1`
 	now := time.Now().UTC()
 	if _, err := r.pool.Exec(ctx, query,
 		g.ID, g.Name, g.PolygonWKT, g.Category,
 		g.Enabled, g.AlertOnEntry, g.AlertOnExit,
-		now,
+		g.NeedsReview, now,
 	); err != nil {
 		return fmt.Errorf("geofences update %d: %w", g.ID, err)
 	}
+	g.UpdatedAt = now
 	return nil
 }
 
@@ -116,16 +148,37 @@ func (r *GeofenceRepo) Delete(ctx context.Context, id int64) error {
 	return nil
 }
 
-// FindByCoordinates finds geofences containing the given point.
-// Loads all geofences and filters in Go using Haversine against the
-// polygon centroid + derived radius (columns removed from table).
+// rowQueryer is the minimal "run a SELECT" seam shared by geofencePool and
+// pgx.Tx, letting findActiveGeofencesNear run identically inside or outside
+// a transaction (needed by the discovery advisory-lock flow in
+// repo_discovery.go, which must re-check for a match INSIDE its lock/tx).
+type rowQueryer interface {
+	Query(ctx context.Context, sql string, args ...any) (pgx.Rows, error)
+}
+
+// FindByCoordinates finds active (non-archived) geofences containing the
+// given point. Loads all active geofences and filters in Go using Haversine
+// against the polygon centroid + derived radius (columns removed from
+// table).
+//
+// Archived places are excluded here (unlike GetByID, which resolves any ID
+// including archived ones for history) because this method backs *active*
+// matching: charging/drive place-name lookup and automation
+// entry/exit-alert evaluation. Matching against a retired place identity
+// would silently resurrect it from the user's perspective.
 //
 // NOTE: this intentionally does NOT filter on `enabled`. The reverse-geocoder
 // and friendly-name lookups want every fence; alert evaluators (FSM,
 // notification dispatcher) MUST filter g.Enabled themselves.
 func (r *GeofenceRepo) FindByCoordinates(ctx context.Context, lat, lng float64) ([]*systemmodel.Geofence, error) {
-	query := `SELECT ` + geofenceColumns + ` FROM geofences`
-	rows, err := r.pool.Query(ctx, query)
+	return findActiveGeofencesNear(ctx, r.pool, lat, lng)
+}
+
+// findActiveGeofencesNear is the shared implementation behind
+// FindByCoordinates; see that method's doc for behavior.
+func findActiveGeofencesNear(ctx context.Context, q rowQueryer, lat, lng float64) ([]*systemmodel.Geofence, error) {
+	query := `SELECT ` + geofenceColumns + ` FROM geofences WHERE archived_at IS NULL`
+	rows, err := q.Query(ctx, query)
 	if err != nil {
 		return nil, fmt.Errorf("geofences find_by_coordinates query: %w", err)
 	}
@@ -146,6 +199,19 @@ func (r *GeofenceRepo) FindByCoordinates(ctx context.Context, lat, lng float64)
 	if err := rows.Err(); err != nil {
 		return nil, fmt.Errorf("geofences find_by_coordinates iter: %w", err)
 	}
+	sort.SliceStable(geofences, func(i, j int) bool {
+		leftManual := geofences[i].Origin == systemmodel.GeofenceOriginManual
+		rightManual := geofences[j].Origin == systemmodel.GeofenceOriginManual
+		if leftManual != rightManual {
+			return leftManual
+		}
+		leftRadius := geofences[i].Radius()
+		rightRadius := geofences[j].Radius()
+		if leftRadius != rightRadius {
+			return leftRadius < rightRadius
+		}
+		return geofences[i].ID < geofences[j].ID
+	})
 	return geofences, nil
 }
 
diff --git a/internal/database/geofence/repo_archive.go b/internal/database/geofence/repo_archive.go
new file mode 100644
index 0000000000..d7802accfa
--- /dev/null
+++ b/internal/database/geofence/repo_archive.go
@@ -0,0 +1,85 @@
+package geofence
+
+import (
+	"context"
+	"fmt"
+)
+
+// =============================================================================
+// repo_archive.go — soft-delete (archive/unarchive) for the charging-place
+// pricing feature (migration 000228_geofence_charging_place_pricing).
+//
+// Historical-integrity rule: geofences with sessions/rates are archived
+// rather than hard-deleted. Archived places are excluded from the default
+// active listing (GetAll, FindByCoordinates, ListNeedsReview) but remain
+// individually resolvable via GetByID for historical display (a past
+// session's stored geofence_id must always resolve to *something*, even
+// after the place is retired).
+// =============================================================================
+
+// Archive soft-deletes a geofence by stamping archived_at. Idempotent:
+// archiving an already-archived geofence updates nothing (the original
+// archive timestamp is preserved) and still returns success.
+func (r *GeofenceRepo) Archive(ctx context.Context, id int64) error {
+	tag, err := r.pool.Exec(ctx, `UPDATE geofences SET archived_at = now(), updated_at = now() WHERE id = $1 AND archived_at IS NULL`, id)
+	if err != nil {
+		return fmt.Errorf("geofences archive %d: %w", id, err)
+	}
+	if tag.RowsAffected() == 0 {
+		// Either already archived (no-op success) or the id does not exist.
+		// Disambiguate with a lightweight existence check so callers get an
+		// honest 404 for a bad id while a re-archive stays a silent success.
+		g, err := r.GetByID(ctx, id)
+		if err != nil {
+			return fmt.Errorf("geofences archive %d: %w", id, err)
+		}
+		if g == nil {
+			return fmt.Errorf("geofences archive %d: %w", id, ErrGeofenceNotFound)
+		}
+	}
+	return nil
+}
+
+// Unarchive restores a previously-archived geofence back into the active
+// listing. Idempotent: unarchiving an already-active geofence is a no-op
+// success.
+func (r *GeofenceRepo) Unarchive(ctx context.Context, id int64) error {
+	tag, err := r.pool.Exec(ctx, `UPDATE geofences SET archived_at = NULL, updated_at = now() WHERE id = $1 AND archived_at IS NOT NULL`, id)
+	if err != nil {
+		return fmt.Errorf("geofences unarchive %d: %w", id, err)
+	}
+	if tag.RowsAffected() == 0 {
+		g, err := r.GetByID(ctx, id)
+		if err != nil {
+			return fmt.Errorf("geofences unarchive %d: %w", id, err)
+		}
+		if g == nil {
+			return fmt.Errorf("geofences unarchive %d: %w", id, ErrGeofenceNotFound)
+		}
+	}
+	return nil
+}
+
+// HasChargingHistory reports whether any charging session, rate, or drive
+// endpoint still references this geofence id. The handler layer uses this
+// to decide whether a delete request must be redirected to Archive instead
+// — geofence_id/rate_id/start_geofence_id/end_geofence_id have no DB-level
+// FK (by design, to keep the telemetry hot path unblocked), so a hard
+// DELETE on a referenced geofence would silently orphan those ids rather
+// than fail loudly. A place with zero history can still be hard-deleted
+// exactly as before this feature.
+func (r *GeofenceRepo) HasChargingHistory(ctx context.Context, id int64) (bool, error) {
+	const q = `
+SELECT EXISTS (
+	SELECT 1 FROM charging_sessions WHERE geofence_id = $1
+	UNION ALL
+	SELECT 1 FROM geofence_rates WHERE geofence_id = $1
+	UNION ALL
+	SELECT 1 FROM drives WHERE start_geofence_id = $1 OR end_geofence_id = $1
+)`
+	var exists bool
+	if err := r.pool.QueryRow(ctx, q, id).Scan(&exists); err != nil {
+		return false, fmt.Errorf("geofences has_charging_history %d: %w", id, err)
+	}
+	return exists, nil
+}
diff --git a/internal/database/geofence/repo_archive_test.go b/internal/database/geofence/repo_archive_test.go
new file mode 100644
index 0000000000..49c1de0e1e
--- /dev/null
+++ b/internal/database/geofence/repo_archive_test.go
@@ -0,0 +1,182 @@
+package geofence
+
+import (
+	"context"
+	"errors"
+	"strings"
+	"testing"
+
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+
+	"github.com/jackc/pgx/v5"
+)
+
+// ---------------------------------------------------------------------------
+// Archive
+// ---------------------------------------------------------------------------
+
+func TestArchive(t *testing.T) {
+	t.Run("success stamps archived_at", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{tag: tag(1)}}}
+		if err := newRepo(pool).Archive(context.Background(), 1); err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		call := pool.execCalls[0]
+		for _, sub := range []string{"archived_at = now()", "archived_at IS NULL"} {
+			if !strings.Contains(call.sql, sub) {
+				t.Errorf("SQL missing %q:\n%s", sub, call.sql)
+			}
+		}
+		// Idempotency check must not fire a second round trip on success.
+		if len(pool.queryRowCalls) != 0 {
+			t.Errorf("successful archive must not issue a GetByID lookup, got %d", len(pool.queryRowCalls))
+		}
+	})
+
+	t.Run("already archived is idempotent success", func(t *testing.T) {
+		// 0 rows affected (already archived) but the id genuinely exists —
+		// GetByID must be consulted and return non-nil, and Archive must
+		// still report success (not an error).
+		pool := &fakePool{
+			execQueue:     []execResult{{tag: tag(0)}},
+			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(&archivedFixture)}},
+		}
+		if err := newRepo(pool).Archive(context.Background(), 1); err != nil {
+			t.Fatalf("want idempotent success, got err: %v", err)
+		}
+	})
+
+	t.Run("nonexistent id returns ErrGeofenceNotFound", func(t *testing.T) {
+		pool := &fakePool{
+			execQueue:     []execResult{{tag: tag(0)}},
+			queryRowQueue: []pgx.Row{noRow()},
+		}
+		err := newRepo(pool).Archive(context.Background(), 999)
+		if !errors.Is(err, ErrGeofenceNotFound) {
+			t.Fatalf("err=%v, want ErrGeofenceNotFound", err)
+		}
+	})
+
+	t.Run("exec error wrapped", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{err: errBoom}}}
+		err := newRepo(pool).Archive(context.Background(), 1)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+
+	t.Run("existence-check error wrapped", func(t *testing.T) {
+		pool := &fakePool{
+			execQueue:     []execResult{{tag: tag(0)}},
+			queryRowQueue: []pgx.Row{fakeRow{scanErr: errBoom}},
+		}
+		err := newRepo(pool).Archive(context.Background(), 1)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// Unarchive
+// ---------------------------------------------------------------------------
+
+func TestUnarchive(t *testing.T) {
+	t.Run("success clears archived_at", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{tag: tag(1)}}}
+		if err := newRepo(pool).Unarchive(context.Background(), 1); err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		call := pool.execCalls[0]
+		for _, sub := range []string{"archived_at = NULL", "archived_at IS NOT NULL"} {
+			if !strings.Contains(call.sql, sub) {
+				t.Errorf("SQL missing %q:\n%s", sub, call.sql)
+			}
+		}
+	})
+
+	t.Run("already active is idempotent success", func(t *testing.T) {
+		pool := &fakePool{
+			execQueue:     []execResult{{tag: tag(0)}},
+			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(&activeFixture)}},
+		}
+		if err := newRepo(pool).Unarchive(context.Background(), 1); err != nil {
+			t.Fatalf("want idempotent success, got err: %v", err)
+		}
+	})
+
+	t.Run("nonexistent id returns ErrGeofenceNotFound", func(t *testing.T) {
+		pool := &fakePool{
+			execQueue:     []execResult{{tag: tag(0)}},
+			queryRowQueue: []pgx.Row{noRow()},
+		}
+		err := newRepo(pool).Unarchive(context.Background(), 999)
+		if !errors.Is(err, ErrGeofenceNotFound) {
+			t.Fatalf("err=%v, want ErrGeofenceNotFound", err)
+		}
+	})
+
+	t.Run("exec error wrapped", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{err: errBoom}}}
+		err := newRepo(pool).Unarchive(context.Background(), 1)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// HasChargingHistory
+// ---------------------------------------------------------------------------
+
+func TestHasChargingHistory(t *testing.T) {
+	t.Run("true when referenced", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{vals: []any{true}}}}
+		got, err := newRepo(pool).HasChargingHistory(context.Background(), 1)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if !got {
+			t.Fatal("want true")
+		}
+		call := pool.queryRowCalls[0]
+		for _, sub := range []string{"charging_sessions WHERE geofence_id", "geofence_rates WHERE geofence_id", "start_geofence_id = $1 OR end_geofence_id = $1"} {
+			if !strings.Contains(call.sql, sub) {
+				t.Errorf("SQL missing %q:\n%s", sub, call.sql)
+			}
+		}
+	})
+
+	t.Run("false when unreferenced", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{vals: []any{false}}}}
+		got, err := newRepo(pool).HasChargingHistory(context.Background(), 1)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if got {
+			t.Fatal("want false")
+		}
+	})
+
+	t.Run("query error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{scanErr: errBoom}}}
+		_, err := newRepo(pool).HasChargingHistory(context.Background(), 1)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+var archivedFixture = mustArchivedGeofence()
+var activeFixture = mustActiveGeofence()
+
+func mustArchivedGeofence() systemmodel.Geofence {
+	g := systemmodel.Geofence{ID: 1, Name: "Retired Place", PolygonWKT: squareWKT(1, 1), CreatedAt: fixedTime, UpdatedAt: fixedTime}
+	t := fixedTime
+	g.ArchivedAt = &t
+	return g
+}
+
+func mustActiveGeofence() systemmodel.Geofence {
+	return systemmodel.Geofence{ID: 1, Name: "Active Place", PolygonWKT: squareWKT(1, 1), CreatedAt: fixedTime, UpdatedAt: fixedTime}
+}
diff --git a/internal/database/geofence/repo_charging_summary.go b/internal/database/geofence/repo_charging_summary.go
new file mode 100644
index 0000000000..32e7f2a87f
--- /dev/null
+++ b/internal/database/geofence/repo_charging_summary.go
@@ -0,0 +1,408 @@
+package geofence
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+)
+
+// =============================================================================
+// repo_charging_summary.go — read-only charging-activity summaries plus the
+// explicit preview/apply repricing flow for the charging-place pricing
+// feature (migration 000228_geofence_charging_place_pricing).
+//
+// Cost precedence (highest to lowest): manual actual > Tesla-reported actual
+// > geofence tariff > default/global estimate > unknown. PreviewApplyRate /
+// ApplyRate never touch manual/Tesla-actual costs or an existing cost whose
+// provenance is NULL/unknown.
+// =============================================================================
+
+// repriceEligibleCostSources lists sources that may be considered for
+// repricing. NULL/unknown remain eligible only when cost_decimal is NULL;
+// classifyRepriceCandidates protects an existing value with either source.
+// "manual" and "tesla_actual" never appear here.
+var repriceEligibleCostSources = map[string]bool{
+	"":                                    true, // NULL scanned into "" via COALESCE below
+	systemmodel.CostSourceGeofenceTariff:  true,
+	systemmodel.CostSourceDefaultEstimate: true,
+	systemmodel.CostSourceUnknown:         true,
+}
+
+// ChargingSummaryByCurrency aggregates a geofence's PRICED charging activity
+// (cost_decimal IS NOT NULL), grouped by currency. Different currencies are
+// NEVER summed into a single total — a place that has seen both USD and EUR
+// sessions (e.g. after a currency correction) returns two rows.
+func (r *GeofenceRepo) ChargingSummaryByCurrency(ctx context.Context, geofenceID int64) ([]*systemmodel.GeofenceChargingSummary, error) {
+	const q = `
+SELECT cost_currency,
+       COUNT(*),
+       COALESCE(SUM(total_energy_added_wh), 0),
+       COALESCE(SUM(cost_decimal), 0)
+FROM charging_sessions
+WHERE geofence_id = $1 AND cost_decimal IS NOT NULL AND cost_currency IS NOT NULL
+GROUP BY cost_currency
+ORDER BY cost_currency`
+	rows, err := r.pool.Query(ctx, q, geofenceID)
+	if err != nil {
+		return nil, fmt.Errorf("geofence charging summary query: %w", err)
+	}
+	defer rows.Close()
+
+	var out []*systemmodel.GeofenceChargingSummary
+	for rows.Next() {
+		s := &systemmodel.GeofenceChargingSummary{GeofenceID: geofenceID}
+		if err := rows.Scan(&s.Currency, &s.SessionCount, &s.TotalEnergyWh, &s.TotalCostDecimal); err != nil {
+			return nil, fmt.Errorf("geofence charging summary scan: %w", err)
+		}
+		out = append(out, s)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("geofence charging summary iter: %w", err)
+	}
+	return out, nil
+}
+
+// ChargingActivity lists a geofence's charging sessions (any pricing state),
+// newest first — the feed backing the rate-history / affected-sessions UI
+// panels. limit is clamped to [1, 200]; offset floors at 0.
+func (r *GeofenceRepo) ChargingActivity(ctx context.Context, geofenceID int64, limit, offset int) ([]*systemmodel.GeofenceChargingActivity, error) {
+	if limit <= 0 || limit > 200 {
+		limit = 50
+	}
+	if offset < 0 {
+		offset = 0
+	}
+	const q = `
+SELECT id, vehicle_id, started_at, ended_at, total_energy_added_wh, cost_decimal, cost_currency, cost_source, rate_id
+FROM charging_sessions
+WHERE geofence_id = $1
+ORDER BY started_at DESC
+LIMIT $2 OFFSET $3`
+	rows, err := r.pool.Query(ctx, q, geofenceID, limit, offset)
+	if err != nil {
+		return nil, fmt.Errorf("geofence charging activity query: %w", err)
+	}
+	defer rows.Close()
+
+	var out []*systemmodel.GeofenceChargingActivity
+	for rows.Next() {
+		a := &systemmodel.GeofenceChargingActivity{}
+		if err := rows.Scan(&a.SessionID, &a.VehicleID, &a.StartedAt, &a.EndedAt, &a.EnergyWh, &a.CostDecimal, &a.CostCurrency, &a.CostSource, &a.RateID); err != nil {
+			return nil, fmt.Errorf("geofence charging activity scan: %w", err)
+		}
+		out = append(out, a)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("geofence charging activity iter: %w", err)
+	}
+	return out, nil
+}
+
+// repriceCandidate is the minimal projection needed to decide whether a
+// charging session is in scope for a geofence rate preview/apply operation.
+type repriceCandidate struct {
+	id          int64
+	geofenceID  *int64
+	startLat    *float64
+	startLng    *float64
+	energyWh    *float64
+	costDecimal *float64
+	costSource  *string
+}
+
+// loadRepriceCandidates loads every charging session started within
+// [from, to) that is either already attributed to geofenceID or has no
+// geofence attribution yet (geofence_id IS NULL — the historical-backfill
+// case for sessions that predate this feature or predate this place's
+// discovery). Spatial membership for the NULL-geofence_id rows is decided
+// by the caller in Go (see classifyRepriceCandidates) since this codebase
+// has no PostGIS geometry types, only WKT text + Go Haversine math.
+func (r *GeofenceRepo) loadRepriceCandidates(ctx context.Context, geofenceID int64, from time.Time, to *time.Time) ([]repriceCandidate, error) {
+	query := `
+SELECT id, geofence_id, start_lat, start_lng, total_energy_added_wh, cost_decimal, cost_source
+FROM charging_sessions
+WHERE (geofence_id = $1 OR geofence_id IS NULL)
+  AND started_at >= $2`
+	args := []any{geofenceID, from}
+	if to != nil {
+		query += ` AND started_at < $3`
+		args = append(args, *to)
+	}
+	rows, err := r.pool.Query(ctx, query, args...)
+	if err != nil {
+		return nil, fmt.Errorf("geofence reprice candidates query: %w", err)
+	}
+	defer rows.Close()
+
+	var out []repriceCandidate
+	for rows.Next() {
+		var c repriceCandidate
+		if err := rows.Scan(
+			&c.id,
+			&c.geofenceID,
+			&c.startLat,
+			&c.startLng,
+			&c.energyWh,
+			&c.costDecimal,
+			&c.costSource,
+		); err != nil {
+			return nil, fmt.Errorf("geofence reprice candidates scan: %w", err)
+		}
+		out = append(out, c)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("geofence reprice candidates iter: %w", err)
+	}
+	return out, nil
+}
+
+// classifyRepriceCandidates partitions loadRepriceCandidates' output into
+// (matched, eligible, protected) against one geofence's circle:
+//   - matched: already attributed to this geofence, OR unattributed but
+//     spatially inside this geofence's circle.
+//   - eligible (subset of matched): cost_source is geofence_tariff or
+//     default_estimate, or it is empty/unknown with no existing cost, AND
+//     total_energy_added_wh is known. These are the ids ApplyRate may write.
+//   - protected (subset of matched): cost_source is manual/tesla_actual, or
+//     an existing cost has empty/unknown provenance. They are surfaced
+//     separately so the UI can explain a preview total smaller than matched.
+//
+// A matched session with unknown energy (still charging, or otherwise
+// incomplete) is neither eligible nor protected — it simply is not
+// priceable yet; MatchedSessions - EligibleSessions - ProtectedSessions
+// in the preview DTO represents exactly this remainder.
+func classifyRepriceCandidates(candidates []repriceCandidate, g *systemmodel.Geofence) (matched, eligible, protected []repriceCandidate) {
+	cLat, cLon := g.Centroid()
+	radius := g.Radius()
+	for _, c := range candidates {
+		inScope := false
+		switch {
+		case c.geofenceID != nil && *c.geofenceID == g.ID:
+			inScope = true
+		case c.geofenceID == nil && c.startLat != nil && c.startLng != nil && radius > 0:
+			inScope = haversineMeters(*c.startLat, *c.startLng, cLat, cLon) <= radius
+		}
+		if !inScope {
+			continue
+		}
+		matched = append(matched, c)
+
+		source := ""
+		if c.costSource != nil {
+			source = *c.costSource
+		}
+		if source == systemmodel.CostSourceManual || source == systemmodel.CostSourceTeslaActual {
+			protected = append(protected, c)
+			continue
+		}
+		// Pre-feature rows can carry a real cost_decimal while cost_source is
+		// NULL. Unknown provenance must be protected rather than treated as
+		// unpriced, otherwise a historical backfill could overwrite an actual
+		// bill imported before provenance existed.
+		if c.costDecimal != nil &&
+			(source == "" || source == systemmodel.CostSourceUnknown) {
+			protected = append(protected, c)
+			continue
+		}
+		if repriceEligibleCostSources[source] && c.energyWh != nil {
+			eligible = append(eligible, c)
+		}
+	}
+	return matched, eligible, protected
+}
+
+// resolveApplyWindow resolves a GeofenceRateApplyScope + the target rate
+// into a concrete [from, to) window: the rate's own effective interval,
+// narrowed by the scope's optional From/To bounds (the later lower bound
+// and the earlier non-nil upper bound win) — "Applying must be bounded to
+// the selected geofence and interval" per the design rules.
+func resolveApplyWindow(scope systemmodel.GeofenceRateApplyScope, rate *systemmodel.GeofenceRate) (time.Time, *time.Time) {
+	from := rate.EffectiveFrom
+	if scope.From != nil && scope.From.After(from) {
+		from = *scope.From
+	}
+	to := rate.EffectiveTo
+	if scope.To != nil && (to == nil || scope.To.Before(*to)) {
+		to = scope.To
+	}
+	return from, to
+}
+
+// PreviewApplyRate computes — WITHOUT writing anything — the effect of
+// applying scope.RateID to scope.GeofenceID's charging sessions. See
+// classifyRepriceCandidates for exactly which sessions are matched/
+// eligible/protected.
+func (r *GeofenceRepo) PreviewApplyRate(ctx context.Context, scope systemmodel.GeofenceRateApplyScope) (*systemmodel.GeofenceRateImpactPreview, error) {
+	g, rate, err := r.loadGeofenceAndRate(ctx, scope.GeofenceID, scope.RateID)
+	if err != nil {
+		return nil, err
+	}
+
+	from, to := resolveApplyWindow(scope, rate)
+	candidates, err := r.loadRepriceCandidates(ctx, scope.GeofenceID, from, to)
+	if err != nil {
+		return nil, err
+	}
+	matched, eligible, protected := classifyRepriceCandidates(candidates, g)
+
+	preview := &systemmodel.GeofenceRateImpactPreview{
+		GeofenceID:        scope.GeofenceID,
+		RateID:            scope.RateID,
+		Currency:          rate.Currency,
+		MatchedSessions:   int64(len(matched)),
+		EligibleSessions:  int64(len(eligible)),
+		ProtectedSessions: int64(len(protected)),
+	}
+	if len(eligible) == 0 {
+		return preview, nil
+	}
+
+	ids := candidateIDs(eligible)
+	const q = `
+SELECT COALESCE(SUM(total_energy_added_wh), 0),
+       COALESCE(SUM(ROUND(total_energy_added_wh::numeric * $2::numeric, 6)), 0)
+FROM charging_sessions
+WHERE id = ANY($1)`
+	if err := r.pool.QueryRow(ctx, q, ids, rate.RatePerWh).Scan(&preview.TotalEnergyWh, &preview.EstimatedCostDecimal); err != nil {
+		return nil, fmt.Errorf("geofence rate preview aggregate: %w", err)
+	}
+	return preview, nil
+}
+
+// ApplyRate is the write-performing counterpart of PreviewApplyRate. It
+// (re)prices exactly the eligible session ids classifyRepriceCandidates
+// selects, via one bounded UPDATE using PostgreSQL NUMERIC arithmetic
+// (never Go float64 multiplication). Matched historical sessions without a
+// geofence_id are attributed to the place in the same statement even when
+// their manual, Tesla-actual, or unknown-provenance cost is protected.
+// Re-running after a rate correction converges every eligible session to the
+// current rate while protected monetary fields remain unchanged.
+func (r *GeofenceRepo) ApplyRate(ctx context.Context, scope systemmodel.GeofenceRateApplyScope) (*systemmodel.GeofenceRateApplyResult, error) {
+	g, rate, err := r.loadGeofenceAndRate(ctx, scope.GeofenceID, scope.RateID)
+	if err != nil {
+		return nil, err
+	}
+
+	from, to := resolveApplyWindow(scope, rate)
+	candidates, err := r.loadRepriceCandidates(ctx, scope.GeofenceID, from, to)
+	if err != nil {
+		return nil, err
+	}
+	matched, eligible, _ := classifyRepriceCandidates(candidates, g)
+
+	result := &systemmodel.GeofenceRateApplyResult{
+		GeofenceID:      scope.GeofenceID,
+		RateID:          scope.RateID,
+		Currency:        rate.Currency,
+		MatchedSessions: int64(len(matched)),
+		SkippedSessions: int64(len(matched) - len(eligible)),
+	}
+	needsAttribution := false
+	for _, candidate := range matched {
+		if candidate.geofenceID == nil {
+			needsAttribution = true
+			break
+		}
+	}
+	if len(eligible) == 0 && !needsAttribution {
+		return result, nil
+	}
+
+	matchedIDs := candidateIDs(matched)
+	eligibleIDs := candidateIDs(eligible)
+	const q = `
+WITH scoped AS (
+    SELECT id,
+           total_energy_added_wh,
+           id = ANY($3)
+               AND total_energy_added_wh IS NOT NULL
+               AND (
+                   cost_source IN ('geofence_tariff', 'default_estimate')
+                   OR (cost_source IS NULL AND cost_decimal IS NULL)
+                   OR (cost_source = 'unknown' AND cost_decimal IS NULL)
+               ) AS should_price
+      FROM charging_sessions
+     WHERE id = ANY($1)
+       AND (geofence_id = $2 OR geofence_id IS NULL)
+),
+updated AS (
+    UPDATE charging_sessions AS cs
+       SET geofence_id = $2,
+           cost_decimal = CASE
+               WHEN scoped.should_price THEN ROUND(cs.total_energy_added_wh::numeric * $4::numeric, 6)
+               ELSE cs.cost_decimal
+           END,
+           cost_currency = CASE WHEN scoped.should_price THEN $5 ELSE cs.cost_currency END,
+           rate_id = CASE WHEN scoped.should_price THEN $6 ELSE cs.rate_id END,
+           cost_source = CASE WHEN scoped.should_price THEN 'geofence_tariff' ELSE cs.cost_source END
+      FROM scoped
+     WHERE cs.id = scoped.id
+    RETURNING scoped.should_price, cs.total_energy_added_wh, cs.cost_decimal
+)
+SELECT total_energy_added_wh, cost_decimal
+  FROM updated
+ WHERE should_price`
+	rows, err := r.pool.Query(
+		ctx,
+		q,
+		matchedIDs,
+		scope.GeofenceID,
+		eligibleIDs,
+		rate.RatePerWh,
+		rate.Currency,
+		scope.RateID,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("geofence rate apply update: %w", err)
+	}
+	defer rows.Close()
+	var priced int64
+	for rows.Next() {
+		var energyWh, cost float64
+		if err := rows.Scan(&energyWh, &cost); err != nil {
+			return nil, fmt.Errorf("geofence rate apply scan: %w", err)
+		}
+		priced++
+		result.TotalEnergyWh += energyWh
+		result.TotalCostDecimal += cost
+	}
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("geofence rate apply iter: %w", err)
+	}
+	result.PricedSessions = priced
+	result.SkippedSessions = int64(len(matched)) - priced
+	return result, nil
+}
+
+// loadGeofenceAndRate fetches and validates the (geofence, rate) pair a
+// preview/apply scope refers to, returning a descriptive error when either
+// side is missing or the rate does not belong to the geofence.
+func (r *GeofenceRepo) loadGeofenceAndRate(ctx context.Context, geofenceID, rateID int64) (*systemmodel.Geofence, *systemmodel.GeofenceRate, error) {
+	g, err := r.GetByID(ctx, geofenceID)
+	if err != nil {
+		return nil, nil, fmt.Errorf("load geofence %d: %w", geofenceID, err)
+	}
+	if g == nil {
+		return nil, nil, fmt.Errorf("load geofence %d: %w", geofenceID, ErrGeofenceNotFound)
+	}
+	rate, err := r.GetRateByID(ctx, geofenceID, rateID)
+	if err != nil {
+		return nil, nil, fmt.Errorf("load geofence rate %d: %w", rateID, err)
+	}
+	if rate == nil {
+		return nil, nil, fmt.Errorf("load geofence rate %d: %w", rateID, ErrRateNotFound)
+	}
+	return g, rate, nil
+}
+
+// candidateIDs projects a []repriceCandidate down to its []int64 ids for
+// the ANY($1) bind in the aggregate/UPDATE queries above.
+func candidateIDs(cs []repriceCandidate) []int64 {
+	ids := make([]int64, len(cs))
+	for i, c := range cs {
+		ids[i] = c.id
+	}
+	return ids
+}
diff --git a/internal/database/geofence/repo_charging_summary_test.go b/internal/database/geofence/repo_charging_summary_test.go
new file mode 100644
index 0000000000..45152dddb8
--- /dev/null
+++ b/internal/database/geofence/repo_charging_summary_test.go
@@ -0,0 +1,628 @@
+package geofence
+
+import (
+	"context"
+	"errors"
+	"strings"
+	"testing"
+	"time"
+
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+
+	"github.com/jackc/pgx/v5"
+)
+
+// ---------------------------------------------------------------------------
+// ChargingSummaryByCurrency — multiple currencies must never be summed into
+// one total: a place seen in both USD and EUR returns two independent rows.
+// ---------------------------------------------------------------------------
+
+func TestChargingSummaryByCurrency(t *testing.T) {
+	t.Run("groups by currency, never sums across currencies", func(t *testing.T) {
+		rows := newFakeRows([][]any{
+			{"USD", int64(10), 50_000.0, 12.5},
+			{"EUR", int64(3), 9_000.0, 3.75},
+		})
+		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
+
+		got, err := newRepo(pool).ChargingSummaryByCurrency(context.Background(), 1)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if len(got) != 2 {
+			t.Fatalf("want 2 currency groups, got %d: %+v", len(got), got)
+		}
+		if got[0].Currency != "USD" || got[0].SessionCount != 10 || got[0].TotalEnergyWh != 50_000.0 || got[0].TotalCostDecimal != 12.5 {
+			t.Errorf("USD row mismatch: %+v", got[0])
+		}
+		if got[1].Currency != "EUR" || got[1].SessionCount != 3 {
+			t.Errorf("EUR row mismatch: %+v", got[1])
+		}
+		// Every row must carry the geofence id the caller asked about.
+		for _, s := range got {
+			if s.GeofenceID != 1 {
+				t.Errorf("GeofenceID not stamped: %+v", s)
+			}
+		}
+		call := pool.queryCalls[0]
+		for _, sub := range []string{"cost_decimal IS NOT NULL", "cost_currency IS NOT NULL", "GROUP BY cost_currency"} {
+			if !strings.Contains(call.sql, sub) {
+				t.Errorf("SQL missing %q:\n%s", sub, call.sql)
+			}
+		}
+	})
+
+	t.Run("query error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{err: errBoom}}}
+		_, err := newRepo(pool).ChargingSummaryByCurrency(context.Background(), 1)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+
+	t.Run("scan error wrapped", func(t *testing.T) {
+		rows := newFakeRows([][]any{{"USD", int64(1), 1.0, 1.0}})
+		rows.scanErrAt = 0
+		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
+		_, err := newRepo(pool).ChargingSummaryByCurrency(context.Background(), 1)
+		if err == nil || !strings.Contains(err.Error(), "scan") {
+			t.Fatalf("err=%v, want scan error", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// ChargingActivity — pagination clamping
+// ---------------------------------------------------------------------------
+
+func TestChargingActivity(t *testing.T) {
+	t.Run("passes through valid limit/offset", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows(nil)}}}
+		_, err := newRepo(pool).ChargingActivity(context.Background(), 1, 25, 10)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		call := pool.queryCalls[0]
+		if call.args[1] != 25 || call.args[2] != 10 {
+			t.Errorf("args: want [1 25 10], got %v", call.args)
+		}
+	})
+
+	t.Run("non-positive limit clamps to default 50", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows(nil)}}}
+		_, _ = newRepo(pool).ChargingActivity(context.Background(), 1, 0, 0)
+		if pool.queryCalls[0].args[1] != 50 {
+			t.Errorf("limit not clamped to 50: %v", pool.queryCalls[0].args[1])
+		}
+	})
+
+	t.Run("over-cap limit clamps to default 50", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows(nil)}}}
+		_, _ = newRepo(pool).ChargingActivity(context.Background(), 1, 500, 0)
+		if pool.queryCalls[0].args[1] != 50 {
+			t.Errorf("over-cap limit not clamped to 50: %v", pool.queryCalls[0].args[1])
+		}
+	})
+
+	t.Run("negative offset floors at 0", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows(nil)}}}
+		_, _ = newRepo(pool).ChargingActivity(context.Background(), 1, 10, -5)
+		if pool.queryCalls[0].args[2] != 0 {
+			t.Errorf("negative offset not floored: %v", pool.queryCalls[0].args[2])
+		}
+	})
+
+	t.Run("scans full activity row shape", func(t *testing.T) {
+		ended := fixedTime.Add(time.Hour)
+		energy := 12_000.0
+		cost := 1.25
+		currency := "USD"
+		source := systemmodel.CostSourceGeofenceTariff
+		rateID := int64(9)
+		rows := newFakeRows([][]any{
+			{int64(100), int64(1), fixedTime, &ended, &energy, &cost, &currency, &source, &rateID},
+		})
+		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
+		got, err := newRepo(pool).ChargingActivity(context.Background(), 1, 10, 0)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if len(got) != 1 || got[0].SessionID != 100 || got[0].CostSource == nil || *got[0].CostSource != systemmodel.CostSourceGeofenceTariff {
+			t.Fatalf("unexpected activity row: %+v", got)
+		}
+	})
+
+	t.Run("query error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{err: errBoom}}}
+		_, err := newRepo(pool).ChargingActivity(context.Background(), 1, 10, 0)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// resolveApplyWindow
+// ---------------------------------------------------------------------------
+
+func TestResolveApplyWindow(t *testing.T) {
+	rateFrom := time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC)
+	rateTo := time.Date(2026, 12, 31, 0, 0, 0, 0, time.UTC)
+
+	t.Run("no scope bounds uses the rate's own interval", func(t *testing.T) {
+		rate := &systemmodel.GeofenceRate{EffectiveFrom: rateFrom, EffectiveTo: &rateTo}
+		from, to := resolveApplyWindow(systemmodel.GeofenceRateApplyScope{}, rate)
+		if !from.Equal(rateFrom) || to == nil || !to.Equal(rateTo) {
+			t.Fatalf("from=%v to=%v, want rate's own interval", from, to)
+		}
+	})
+
+	t.Run("scope.From earlier than rate.EffectiveFrom is ignored (later lower bound wins)", func(t *testing.T) {
+		earlier := rateFrom.Add(-24 * time.Hour)
+		rate := &systemmodel.GeofenceRate{EffectiveFrom: rateFrom}
+		from, _ := resolveApplyWindow(systemmodel.GeofenceRateApplyScope{From: &earlier}, rate)
+		if !from.Equal(rateFrom) {
+			t.Fatalf("from=%v, want rate.EffectiveFrom (later bound) to win", from)
+		}
+	})
+
+	t.Run("scope.From later than rate.EffectiveFrom narrows the window", func(t *testing.T) {
+		later := rateFrom.Add(24 * time.Hour)
+		rate := &systemmodel.GeofenceRate{EffectiveFrom: rateFrom}
+		from, _ := resolveApplyWindow(systemmodel.GeofenceRateApplyScope{From: &later}, rate)
+		if !from.Equal(later) {
+			t.Fatalf("from=%v, want scope.From (narrower) to win", from)
+		}
+	})
+
+	t.Run("open rate + scope.To narrows to scope.To", func(t *testing.T) {
+		rate := &systemmodel.GeofenceRate{EffectiveFrom: rateFrom} // EffectiveTo nil (open)
+		bound := rateFrom.Add(48 * time.Hour)
+		_, to := resolveApplyWindow(systemmodel.GeofenceRateApplyScope{To: &bound}, rate)
+		if to == nil || !to.Equal(bound) {
+			t.Fatalf("to=%v, want scope.To since the rate itself is open", to)
+		}
+	})
+
+	t.Run("scope.To earlier than rate.EffectiveTo narrows the window", func(t *testing.T) {
+		earlier := rateTo.Add(-24 * time.Hour)
+		rate := &systemmodel.GeofenceRate{EffectiveFrom: rateFrom, EffectiveTo: &rateTo}
+		_, to := resolveApplyWindow(systemmodel.GeofenceRateApplyScope{To: &earlier}, rate)
+		if to == nil || !to.Equal(earlier) {
+			t.Fatalf("to=%v, want the earlier scope.To to win", to)
+		}
+	})
+
+	t.Run("scope.To later than rate.EffectiveTo is ignored (earlier upper bound wins)", func(t *testing.T) {
+		later := rateTo.Add(24 * time.Hour)
+		rate := &systemmodel.GeofenceRate{EffectiveFrom: rateFrom, EffectiveTo: &rateTo}
+		_, to := resolveApplyWindow(systemmodel.GeofenceRateApplyScope{To: &later}, rate)
+		if to == nil || !to.Equal(rateTo) {
+			t.Fatalf("to=%v, want rate.EffectiveTo (earlier bound) to win", to)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// classifyRepriceCandidates — the core matched/eligible/protected split that
+// guarantees a manual or Tesla-actual cost is NEVER touched by repricing,
+// and an out-of-scope session is never even considered.
+// ---------------------------------------------------------------------------
+
+func testGeofenceAt(id int64, lat, lon float64) *systemmodel.Geofence {
+	return &systemmodel.Geofence{ID: id, Name: "Test Place", PolygonWKT: squareWKT(lat, lon)}
+}
+
+func f64ptr(v float64) *float64 { return &v }
+func strptr(v string) *string   { return &v }
+func TestClassifyRepriceCandidates(t *testing.T) {
+	g := testGeofenceAt(1, 37.7749, -122.4194)
+	cLat, cLon := g.Centroid()
+
+	candidates := []repriceCandidate{
+		// 1: already attributed to this geofence, no cost yet, has energy -> eligible.
+		{id: 1, geofenceID: int64Ptr(1), energyWh: f64ptr(5000)},
+		// 2: unattributed but spatially inside -> matched + eligible (default_estimate).
+		{id: 2, startLat: f64ptr(cLat), startLng: f64ptr(cLon), energyWh: f64ptr(3000), costSource: strptr(systemmodel.CostSourceDefaultEstimate)},
+		// 3: unattributed and spatially far away (~1 degree ~111km) -> never matched.
+		{id: 3, startLat: f64ptr(cLat + 1), startLng: f64ptr(cLon), energyWh: f64ptr(1000)},
+		// 4: attributed to this geofence but manual cost -> matched + protected, never eligible.
+		{id: 4, geofenceID: int64Ptr(1), energyWh: f64ptr(2000), costSource: strptr(systemmodel.CostSourceManual)},
+		// 5: attributed to this geofence but tesla_actual cost -> matched + protected.
+		{id: 5, geofenceID: int64Ptr(1), energyWh: f64ptr(2000), costSource: strptr(systemmodel.CostSourceTeslaActual)},
+		// 6: attributed to this geofence, eligible cost_source, but NO energy yet
+		//    (still charging / incomplete) -> matched, but neither eligible nor protected.
+		{id: 6, geofenceID: int64Ptr(1), costSource: strptr(systemmodel.CostSourceUnknown)},
+		// 7: attributed to a DIFFERENT geofence -> never matched, even though it's "in the list".
+		{id: 7, geofenceID: int64Ptr(2), energyWh: f64ptr(4000)},
+		// 8: unattributed, no lat/lng at all -> never matched (can't spatially resolve).
+		{id: 8, energyWh: f64ptr(1000)},
+		// 9: already attributed to this geofence, previously geofence_tariff-priced -> eligible (repriced again).
+		{id: 9, geofenceID: int64Ptr(1), energyWh: f64ptr(6000), costSource: strptr(systemmodel.CostSourceGeofenceTariff)},
+		// 10: pre-feature row with a real cost but no provenance -> protected.
+		{id: 10, geofenceID: int64Ptr(1), energyWh: f64ptr(6000), costDecimal: f64ptr(7.25)},
+	}
+
+	matched, eligible, protected := classifyRepriceCandidates(candidates, g)
+
+	assertIDs := func(t *testing.T, label string, got []repriceCandidate, want []int64) {
+		t.Helper()
+		if len(got) != len(want) {
+			t.Fatalf("%s: got %d ids, want %d (got=%v want=%v)", label, len(got), len(want), idsOf(got), want)
+		}
+		for i, c := range got {
+			if c.id != want[i] {
+				t.Fatalf("%s[%d]=%d, want %d (full got=%v)", label, i, c.id, want[i], idsOf(got))
+			}
+		}
+	}
+
+	assertIDs(t, "matched", matched, []int64{1, 2, 4, 5, 6, 9, 10})
+	assertIDs(t, "eligible", eligible, []int64{1, 2, 9})
+	assertIDs(t, "protected", protected, []int64{4, 5, 10})
+
+	// The remainder (matched - eligible - protected) must be exactly {6}:
+	// in-scope by place, but not yet priceable because energy is unknown.
+	remainder := len(matched) - len(eligible) - len(protected)
+	if remainder != 1 {
+		t.Fatalf("remainder = %d, want 1 (session #6, matched but not priceable yet)", remainder)
+	}
+}
+
+func idsOf(cs []repriceCandidate) []int64 {
+	ids := make([]int64, len(cs))
+	for i, c := range cs {
+		ids[i] = c.id
+	}
+	return ids
+}
+
+func int64Ptr(v int64) *int64 { return &v }
+
+// ---------------------------------------------------------------------------
+// loadRepriceCandidates — query shape
+// ---------------------------------------------------------------------------
+
+func TestLoadRepriceCandidates(t *testing.T) {
+	from := time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC)
+
+	t.Run("open window omits the upper bound clause", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows(nil)}}}
+		_, err := newRepo(pool).loadRepriceCandidates(context.Background(), 1, from, nil)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		call := pool.queryCalls[0]
+		if strings.Contains(call.sql, "started_at < $3") {
+			t.Errorf("open window must not bind an upper bound: %s", call.sql)
+		}
+		if len(call.args) != 2 {
+			t.Fatalf("want 2 args for an open window, got %v", call.args)
+		}
+	})
+
+	t.Run("closed window adds the upper bound clause", func(t *testing.T) {
+		to := from.Add(30 * 24 * time.Hour)
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows(nil)}}}
+		_, err := newRepo(pool).loadRepriceCandidates(context.Background(), 1, from, &to)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		call := pool.queryCalls[0]
+		if !strings.Contains(call.sql, "started_at < $3") {
+			t.Errorf("closed window must bind an upper bound: %s", call.sql)
+		}
+		if len(call.args) != 3 || call.args[2] != to {
+			t.Fatalf("args mismatch: %v", call.args)
+		}
+	})
+
+	t.Run("matches unattributed OR this geofence", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows(nil)}}}
+		_, _ = newRepo(pool).loadRepriceCandidates(context.Background(), 1, from, nil)
+		if !strings.Contains(pool.queryCalls[0].sql, "geofence_id = $1 OR geofence_id IS NULL") {
+			t.Errorf("unexpected SQL: %s", pool.queryCalls[0].sql)
+		}
+	})
+
+	t.Run("query error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{err: errBoom}}}
+		_, err := newRepo(pool).loadRepriceCandidates(context.Background(), 1, from, nil)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+
+	t.Run("scan error wrapped", func(t *testing.T) {
+		rows := newFakeRows([][]any{{int64(1), (*int64)(nil), (*float64)(nil), (*float64)(nil), (*float64)(nil), (*string)(nil)}})
+		rows.scanErrAt = 0
+		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
+		_, err := newRepo(pool).loadRepriceCandidates(context.Background(), 1, from, nil)
+		if err == nil || !strings.Contains(err.Error(), "scan") {
+			t.Fatalf("err=%v, want scan error", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// candidateIDs
+// ---------------------------------------------------------------------------
+
+func TestCandidateIDs(t *testing.T) {
+	got := candidateIDs([]repriceCandidate{{id: 3}, {id: 1}, {id: 2}})
+	want := []int64{3, 1, 2}
+	if len(got) != len(want) {
+		t.Fatalf("got %v, want %v", got, want)
+	}
+	for i := range want {
+		if got[i] != want[i] {
+			t.Fatalf("got %v, want %v", got, want)
+		}
+	}
+}
+
+// ---------------------------------------------------------------------------
+// loadGeofenceAndRate
+// ---------------------------------------------------------------------------
+
+func TestLoadGeofenceAndRate(t *testing.T) {
+	g := &systemmodel.Geofence{ID: 1, Name: "Home", PolygonWKT: squareWKT(1, 1), CreatedAt: fixedTime, UpdatedAt: fixedTime}
+	rt := &systemmodel.GeofenceRate{ID: 9, GeofenceID: 1, RatePerWh: 0.0001, Currency: "USD", EffectiveFrom: fixedTime, CreatedAt: fixedTime}
+
+	t.Run("success", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}}}
+		gotG, gotR, err := newRepo(pool).loadGeofenceAndRate(context.Background(), 1, 9)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if gotG.ID != 1 || gotR.ID != 9 {
+			t.Fatalf("got g=%+v r=%+v", gotG, gotR)
+		}
+	})
+
+	t.Run("missing geofence", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{noRow()}}
+		_, _, err := newRepo(pool).loadGeofenceAndRate(context.Background(), 999, 9)
+		if !errors.Is(err, ErrGeofenceNotFound) {
+			t.Fatalf("err=%v, want ErrGeofenceNotFound", err)
+		}
+	})
+
+	t.Run("missing rate", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, noRow()}}
+		_, _, err := newRepo(pool).loadGeofenceAndRate(context.Background(), 1, 999)
+		if !errors.Is(err, ErrRateNotFound) {
+			t.Fatalf("err=%v, want ErrRateNotFound", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// PreviewApplyRate / ApplyRate — end-to-end through the fake pool.
+// ---------------------------------------------------------------------------
+
+// scenarioCandidatesRows builds the loadRepriceCandidates row shape for one
+// eligible, in-scope session (id=10, unattributed-but-inside, no prior cost)
+// plus one protected session (id=11, manual cost) so Preview/Apply must
+// report MatchedSessions=2, EligibleSessions/PricedSessions=1,
+// ProtectedSessions=1/SkippedSessions=1.
+func scenarioCandidatesRows(g *systemmodel.Geofence) [][]any {
+	cLat, cLon := g.Centroid()
+	manual := systemmodel.CostSourceManual
+	return [][]any{
+		{int64(10), (*int64)(nil), &cLat, &cLon, f64ptr(10_000), (*float64)(nil), (*string)(nil)},
+		{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), f64ptr(5_000), f64ptr(4.25), &manual},
+	}
+}
+
+func TestPreviewApplyRate(t *testing.T) {
+	g := &systemmodel.Geofence{ID: 1, Name: "Home", PolygonWKT: squareWKT(37.7749, -122.4194), CreatedAt: fixedTime, UpdatedAt: fixedTime}
+	rt := &systemmodel.GeofenceRate{ID: 9, GeofenceID: 1, RatePerWh: 0.0001005, Currency: "USD", EffectiveFrom: fixedTime, CreatedAt: fixedTime}
+
+	t.Run("aggregates only the eligible subset", func(t *testing.T) {
+		pool := &fakePool{
+			queryRowQueue: []pgx.Row{
+				fakeRow{vals: geofenceRowVals(g)},      // loadGeofenceAndRate: GetByID
+				fakeRow{vals: geofenceRateRowVals(rt)}, // loadGeofenceAndRate: GetRateByID
+				fakeRow{vals: []any{10_000.0, 1.005}},  // aggregate SUM
+			},
+			queryQueue: []queryResult{{rows: newFakeRows(scenarioCandidatesRows(g))}},
+		}
+		scope := systemmodel.GeofenceRateApplyScope{GeofenceID: 1, RateID: 9}
+		preview, err := newRepo(pool).PreviewApplyRate(context.Background(), scope)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if preview.MatchedSessions != 2 {
+			t.Errorf("MatchedSessions=%d, want 2", preview.MatchedSessions)
+		}
+		if preview.EligibleSessions != 1 {
+			t.Errorf("EligibleSessions=%d, want 1", preview.EligibleSessions)
+		}
+		if preview.ProtectedSessions != 1 {
+			t.Errorf("ProtectedSessions=%d, want 1", preview.ProtectedSessions)
+		}
+		if preview.Currency != "USD" {
+			t.Errorf("Currency=%q, want USD", preview.Currency)
+		}
+		if preview.TotalEnergyWh != 10_000.0 || preview.EstimatedCostDecimal != 1.005 {
+			t.Errorf("aggregate mismatch: %+v", preview)
+		}
+		// The aggregate query must scope to exactly the eligible ids (10),
+		// never the protected one (11).
+		aggCall := pool.queryRowCalls[2]
+		ids, ok := aggCall.args[0].([]int64)
+		if !ok || len(ids) != 1 || ids[0] != 10 {
+			t.Errorf("aggregate ids: want [10], got %v", aggCall.args[0])
+		}
+	})
+
+	t.Run("zero eligible sessions skips the aggregate round trip", func(t *testing.T) {
+		manual := systemmodel.CostSourceManual
+		onlyProtected := [][]any{{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), f64ptr(5_000), f64ptr(4.25), &manual}}
+		pool := &fakePool{
+			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
+			queryQueue:    []queryResult{{rows: newFakeRows(onlyProtected)}},
+		}
+		scope := systemmodel.GeofenceRateApplyScope{GeofenceID: 1, RateID: 9}
+		preview, err := newRepo(pool).PreviewApplyRate(context.Background(), scope)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if preview.EligibleSessions != 0 || preview.EstimatedCostDecimal != 0 {
+			t.Fatalf("want zero eligible/cost, got %+v", preview)
+		}
+		if len(pool.queryRowCalls) != 2 {
+			t.Fatalf("must skip the aggregate QueryRow when nothing is eligible, got %d calls", len(pool.queryRowCalls))
+		}
+	})
+
+	t.Run("missing geofence propagates ErrGeofenceNotFound", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{noRow()}}
+		scope := systemmodel.GeofenceRateApplyScope{GeofenceID: 999, RateID: 9}
+		_, err := newRepo(pool).PreviewApplyRate(context.Background(), scope)
+		if !errors.Is(err, ErrGeofenceNotFound) {
+			t.Fatalf("err=%v, want ErrGeofenceNotFound", err)
+		}
+	})
+}
+
+func TestApplyRate(t *testing.T) {
+	g := &systemmodel.Geofence{ID: 1, Name: "Home", PolygonWKT: squareWKT(37.7749, -122.4194), CreatedAt: fixedTime, UpdatedAt: fixedTime}
+	rt := &systemmodel.GeofenceRate{ID: 9, GeofenceID: 1, RatePerWh: 0.0001005, Currency: "USD", EffectiveFrom: fixedTime, CreatedAt: fixedTime}
+
+	t.Run("prices only the eligible subset, never the protected one", func(t *testing.T) {
+		updateRows := newFakeRows([][]any{{10_000.0, 1.005}}) // one UPDATE...RETURNING row (session 10 only)
+		pool := &fakePool{
+			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
+			queryQueue: []queryResult{
+				{rows: newFakeRows(scenarioCandidatesRows(g))}, // loadRepriceCandidates
+				{rows: updateRows}, // UPDATE ... RETURNING
+			},
+		}
+		scope := systemmodel.GeofenceRateApplyScope{GeofenceID: 1, RateID: 9}
+		result, err := newRepo(pool).ApplyRate(context.Background(), scope)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if result.MatchedSessions != 2 {
+			t.Errorf("MatchedSessions=%d, want 2", result.MatchedSessions)
+		}
+		if result.PricedSessions != 1 {
+			t.Errorf("PricedSessions=%d, want 1", result.PricedSessions)
+		}
+		if result.SkippedSessions != 1 {
+			t.Errorf("SkippedSessions=%d, want 1 (the protected manual-cost session)", result.SkippedSessions)
+		}
+		if result.TotalEnergyWh != 10_000.0 || result.TotalCostDecimal != 1.005 {
+			t.Errorf("totals mismatch: %+v", result)
+		}
+		updateCall := pool.queryCalls[1]
+		for _, sub := range []string{
+			"UPDATE charging_sessions",
+			"cost_source = CASE WHEN scoped.should_price THEN 'geofence_tariff' ELSE cs.cost_source END",
+			"cost_source IS NULL AND cost_decimal IS NULL",
+		} {
+			if !strings.Contains(updateCall.sql, sub) {
+				t.Errorf("UPDATE SQL missing %q:\n%s", sub, updateCall.sql)
+			}
+		}
+		matchedIDs, ok := updateCall.args[0].([]int64)
+		if !ok || len(matchedIDs) != 2 || matchedIDs[0] != 10 || matchedIDs[1] != 11 {
+			t.Errorf("matched UPDATE ids: want [10 11], got %v", updateCall.args[0])
+		}
+		eligibleIDs, ok := updateCall.args[2].([]int64)
+		if !ok || len(eligibleIDs) != 1 || eligibleIDs[0] != 10 {
+			t.Errorf("eligible UPDATE ids: want [10] (never reprice protected id 11), got %v", updateCall.args[2])
+		}
+	})
+
+	t.Run("zero eligible sessions skips the UPDATE round trip", func(t *testing.T) {
+		manual := systemmodel.CostSourceManual
+		onlyProtected := [][]any{{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), f64ptr(5_000), f64ptr(4.25), &manual}}
+		pool := &fakePool{
+			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
+			queryQueue:    []queryResult{{rows: newFakeRows(onlyProtected)}},
+		}
+		scope := systemmodel.GeofenceRateApplyScope{GeofenceID: 1, RateID: 9}
+		result, err := newRepo(pool).ApplyRate(context.Background(), scope)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if result.PricedSessions != 0 || result.SkippedSessions != 1 {
+			t.Fatalf("want 0 priced / 1 skipped, got %+v", result)
+		}
+		if len(pool.queryCalls) != 1 {
+			t.Fatalf("must skip the UPDATE when nothing is eligible, got %d Query calls", len(pool.queryCalls))
+		}
+	})
+
+	t.Run("attributes an unattributed protected session without repricing it", func(t *testing.T) {
+		cLat, cLon := g.Centroid()
+		manual := systemmodel.CostSourceManual
+		unattributedProtected := [][]any{
+			{int64(11), (*int64)(nil), &cLat, &cLon, f64ptr(5_000), f64ptr(4.25), &manual},
+		}
+		pool := &fakePool{
+			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
+			queryQueue: []queryResult{
+				{rows: newFakeRows(unattributedProtected)},
+				{rows: newFakeRows(nil)},
+			},
+		}
+		scope := systemmodel.GeofenceRateApplyScope{GeofenceID: 1, RateID: 9}
+		result, err := newRepo(pool).ApplyRate(context.Background(), scope)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if result.PricedSessions != 0 || result.SkippedSessions != 1 {
+			t.Fatalf("want protected cost skipped while place is attributed, got %+v", result)
+		}
+		if len(pool.queryCalls) != 2 {
+			t.Fatalf("want candidate SELECT plus attribution UPDATE, got %d Query calls", len(pool.queryCalls))
+		}
+		updateCall := pool.queryCalls[1]
+		if !strings.Contains(updateCall.sql, "SET geofence_id = $2") {
+			t.Fatalf("UPDATE must attach the historical session to the place:\n%s", updateCall.sql)
+		}
+		eligibleIDs, ok := updateCall.args[2].([]int64)
+		if !ok || len(eligibleIDs) != 0 {
+			t.Fatalf("protected session must not be eligible for repricing, got %v", updateCall.args[2])
+		}
+	})
+
+	t.Run("idempotent: re-running after all sessions already priced prices zero more", func(t *testing.T) {
+		// Second run: the UPDATE's own WHERE guard (cost_source already
+		// geofence_tariff is still eligible, so this models a scenario
+		// where nothing further changes) returns zero rows because the
+		// classifier decided there was nothing new to do — modeled here by
+		// an eligible candidate set that yields an UPDATE returning zero
+		// rows (e.g. concurrent apply already converged it to a manual
+		// cost between classification and the UPDATE).
+		alreadyDone := [][]any{{int64(10), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), f64ptr(10_000), f64ptr(1.005), strptr(systemmodel.CostSourceGeofenceTariff)}}
+		pool := &fakePool{
+			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
+			queryQueue: []queryResult{
+				{rows: newFakeRows(alreadyDone)},
+				{rows: newFakeRows(nil)}, // UPDATE matched 0 rows this time
+			},
+		}
+		scope := systemmodel.GeofenceRateApplyScope{GeofenceID: 1, RateID: 9}
+		result, err := newRepo(pool).ApplyRate(context.Background(), scope)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if result.PricedSessions != 0 {
+			t.Fatalf("want 0 priced, got %d", result.PricedSessions)
+		}
+	})
+
+	t.Run("missing rate propagates ErrRateNotFound", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, noRow()}}
+		scope := systemmodel.GeofenceRateApplyScope{GeofenceID: 1, RateID: 999}
+		_, err := newRepo(pool).ApplyRate(context.Background(), scope)
+		if !errors.Is(err, ErrRateNotFound) {
+			t.Fatalf("err=%v, want ErrRateNotFound", err)
+		}
+	})
+}
diff --git a/internal/database/geofence/repo_discovery.go b/internal/database/geofence/repo_discovery.go
new file mode 100644
index 0000000000..2ac49f32fa
--- /dev/null
+++ b/internal/database/geofence/repo_discovery.go
@@ -0,0 +1,279 @@
+package geofence
+
+import (
+	"context"
+	"fmt"
+	"math"
+	"strings"
+	"time"
+
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+)
+
+// =============================================================================
+// repo_discovery.go — auto-discovery of charging-place geofences from
+// confirmed charging sessions (migration
+// 000228_geofence_charging_place_pricing).
+//
+// This file is invoked from the async post-commit telemetry leg and the
+// one-shot startup legacy-history backfill — never from the MQTT/SignalStore
+// hot path — so discovery latency or a transient DB failure cannot trigger
+// telemetry redelivery or block ingest.
+// =============================================================================
+
+// DiscoveryRadiusMeters is the fixed radius (in meters) of a provisional
+// geofence synthesized by FindOrCreateForCharging. 75m comfortably covers a
+// Supercharger stall's or driveway's GPS jitter without swallowing an
+// unrelated nearby place, and matches the business requirement exactly.
+const DiscoveryRadiusMeters = 75.0
+
+// geofenceDiscoveryLockKey is the single global PostgreSQL advisory-lock
+// key serializing "match-or-create a provisional charging-place geofence"
+// across all concurrent callers (e.g. two vehicles finishing a charge at
+// the same moment, or a retried async attempt). Charge-completion discovery
+// is inherently low-frequency (bounded by concurrently-completing charge
+// sessions, not by telemetry tick volume), so a single global lock is
+// simpler and strictly more correct than a coordinate-grid-bucketed lock
+// (which has boundary edge cases where two nearby points hash to different
+// cells and race each other). The lock is transaction-scoped
+// (pg_advisory_xact_lock) so it always releases at commit/rollback/crash —
+// it can never be leaked or require manual cleanup.
+const geofenceDiscoveryLockKey = "geofence:discovery"
+
+// ListChargingPlaceBackfillCandidates returns one cursor-paginated batch of
+// completed legacy charging sessions that have usable start coordinates but
+// no geofence attribution yet. The ID cursor ensures a bad row cannot make a
+// startup pass spin forever; failed rows remain eligible for the next boot.
+func (r *GeofenceRepo) ListChargingPlaceBackfillCandidates(ctx context.Context, afterID int64, limit int) ([]*systemmodel.ChargingPlaceBackfillCandidate, error) {
+	if limit <= 0 || limit > 500 {
+		limit = 100
+	}
+	const query = `
+SELECT id, vehicle_id, started_at, start_lat, start_lng, start_place
+FROM charging_sessions
+WHERE id > $1
+  AND geofence_id IS NULL
+  AND ended_at IS NOT NULL
+  AND start_lat IS NOT NULL
+  AND start_lng IS NOT NULL
+  AND start_lat BETWEEN -90 AND 90
+  AND start_lng BETWEEN -180 AND 180
+  AND NOT (start_lat = 0 AND start_lng = 0)
+ORDER BY id
+LIMIT $2`
+	rows, err := r.pool.Query(ctx, query, afterID, limit)
+	if err != nil {
+		return nil, fmt.Errorf("geofence charging backfill candidates query: %w", err)
+	}
+	defer rows.Close()
+
+	var out []*systemmodel.ChargingPlaceBackfillCandidate
+	for rows.Next() {
+		candidate := &systemmodel.ChargingPlaceBackfillCandidate{}
+		if err := rows.Scan(
+			&candidate.SessionID,
+			&candidate.VehicleID,
+			&candidate.StartedAt,
+			&candidate.StartLat,
+			&candidate.StartLng,
+			&candidate.StartPlace,
+		); err != nil {
+			return nil, fmt.Errorf("geofence charging backfill candidates scan: %w", err)
+		}
+		out = append(out, candidate)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("geofence charging backfill candidates iter: %w", err)
+	}
+	return out, nil
+}
+
+// ApplyCurrentRateEstimate prices one completed legacy session with the rate
+// active at `at` only when no configured rate covers the session's started_at.
+// The provenance is default_estimate rather than geofence_tariff so a later
+// explicit historical-rate apply can replace it. Actual/manual/unknown costs
+// and estimates already pinned to another rate remain untouched.
+func (r *GeofenceRepo) ApplyCurrentRateEstimate(ctx context.Context, sessionID, geofenceID, rateID int64, at time.Time) (bool, error) {
+	const query = `
+UPDATE charging_sessions AS cs
+   SET cost_decimal  = ROUND(cs.total_energy_added_wh::numeric * rate.rate_per_wh, 6),
+       cost_currency = rate.currency,
+       rate_id       = rate.id,
+       cost_source   = 'default_estimate'
+  FROM geofence_rates AS rate
+ WHERE cs.id = $1
+   AND cs.geofence_id = $2
+   AND cs.ended_at IS NOT NULL
+   AND cs.total_energy_added_wh IS NOT NULL
+   AND rate.id = $3
+   AND rate.geofence_id = $2
+   AND rate.effective_from <= $4
+   AND (rate.effective_to IS NULL OR rate.effective_to > $4)
+   AND NOT EXISTS (
+       SELECT 1
+         FROM geofence_rates AS historical
+        WHERE historical.geofence_id = cs.geofence_id
+          AND historical.effective_from <= cs.started_at
+          AND (historical.effective_to IS NULL OR historical.effective_to > cs.started_at)
+   )
+   AND (
+       (cs.cost_source IS NULL AND cs.cost_decimal IS NULL)
+       OR (cs.cost_source = 'unknown' AND cs.cost_decimal IS NULL)
+       OR (
+           cs.cost_source = 'default_estimate'
+           AND (cs.rate_id IS NULL OR cs.rate_id = rate.id)
+       )
+   )`
+	tag, err := r.pool.Exec(ctx, query, sessionID, geofenceID, rateID, at.UTC())
+	if err != nil {
+		return false, fmt.Errorf("geofence current-rate legacy estimate: %w", err)
+	}
+	return tag.RowsAffected() > 0, nil
+}
+
+// validCoordinate reports whether (lat, lon) is usable for geofence
+// discovery: finite, in-range, and not the (0,0) null-island sentinel that
+// signals "no GPS fix yet" on most trackers. Coordinate freshness is a caller
+// concern: the telemetry tracker verifies the timestamped L1 value before it
+// invokes discovery and never passes an unverified forward-folded location.
+func validCoordinate(lat, lon float64) bool {
+	if math.IsNaN(lat) || math.IsNaN(lon) || math.IsInf(lat, 0) || math.IsInf(lon, 0) {
+		return false
+	}
+	if lat == 0 && lon == 0 {
+		return false
+	}
+	return lat >= -90 && lat <= 90 && lon >= -180 && lon <= 180
+}
+
+// FindOrCreateForCharging resolves the charging-place geofence for a
+// confirmed charging session at (lat, lon). It first matches an existing
+// active geofence containing the point (of either origin — a
+// manually-created "Home" geofence is matched just as readily as a
+// previously auto-discovered one); if none matches, it idempotently creates
+// one provisional 75m-radius circle with:
+//   - Origin = charging_discovery
+//   - NeedsReview = true
+//   - Enabled = false, AlertOnEntry = false, AlertOnExit = false (safe
+//     defaults — no surprise entry/exit notifications until a human
+//     reviews/configures the place)
+//   - Name = suggestedName (already reverse-geocoded by the caller) or a
+//     neutral fallback when empty/unavailable
+//
+// Returns an error without creating anything when the coordinates are
+// missing, zero, or out of range — this method NEVER creates a (0,0) or
+// out-of-range geofence.
+//
+// Concurrency / dedup: the whole match-or-create sequence runs inside one
+// DB transaction holding a single global advisory lock
+// (geofenceDiscoveryLockKey), and the match check is repeated INSIDE the
+// lock/tx immediately before any insert. This makes the method safe to call
+// concurrently and repeatedly (e.g. on retry after a transient failure)
+// without ever creating more than one place per physical location: any
+// caller that loses the race to acquire the lock will, upon acquiring it
+// afterward, find the winner's newly-committed geofence via the re-check
+// and return it instead of creating a duplicate.
+//
+// Returns (geofence, created, error) where created reports whether a new
+// provisional geofence was inserted (false when an existing place already
+// matched).
+func (r *GeofenceRepo) FindOrCreateForCharging(ctx context.Context, lat, lon float64, suggestedName string) (*systemmodel.Geofence, bool, error) {
+	if !validCoordinate(lat, lon) {
+		return nil, false, fmt.Errorf("geofence discovery: invalid, missing, or (0,0) coordinates (%v, %v)", lat, lon)
+	}
+
+	tx, err := r.pool.Begin(ctx)
+	if err != nil {
+		return nil, false, fmt.Errorf("geofence discovery begin: %w", err)
+	}
+	defer func() { _ = tx.Rollback(ctx) }()
+
+	if _, err := tx.Exec(ctx, `SELECT pg_advisory_xact_lock(hashtextextended($1, 0))`, geofenceDiscoveryLockKey); err != nil {
+		return nil, false, fmt.Errorf("geofence discovery lock: %w", err)
+	}
+
+	// Re-check for a match INSIDE the lock — a concurrent caller may have
+	// just committed a new geofence for this exact neighborhood while we
+	// were waiting for the lock.
+	existing, err := findActiveGeofencesNear(ctx, tx, lat, lon)
+	if err != nil {
+		return nil, false, fmt.Errorf("geofence discovery match: %w", err)
+	}
+	if len(existing) > 0 {
+		if err := tx.Commit(ctx); err != nil {
+			return nil, false, fmt.Errorf("geofence discovery commit (matched): %w", err)
+		}
+		return existing[0], false, nil
+	}
+
+	name := strings.TrimSpace(suggestedName)
+	if name == "" {
+		name = "Unnamed Charging Place"
+	}
+	g := &systemmodel.Geofence{
+		Name:         name,
+		PolygonWKT:   systemmodel.CircleToPolygonWKT(lat, lon, DiscoveryRadiusMeters),
+		Enabled:      false,
+		AlertOnEntry: false,
+		AlertOnExit:  false,
+		Origin:       systemmodel.GeofenceOriginChargingDiscovery,
+		NeedsReview:  true,
+	}
+	now := time.Now().UTC()
+	const insertSQL = `
+INSERT INTO geofences (name, polygon_wkt, category, enabled, alert_on_entry, alert_on_exit, created_at, updated_at, origin, needs_review)
+VALUES ($1, $2, NULL, $3, $4, $5, $6, $6, $7, $8)
+RETURNING id`
+	if err := tx.QueryRow(ctx, insertSQL,
+		g.Name, g.PolygonWKT, g.Enabled, g.AlertOnEntry, g.AlertOnExit, now, g.Origin, g.NeedsReview,
+	).Scan(&g.ID); err != nil {
+		return nil, false, fmt.Errorf("geofence discovery insert: %w", err)
+	}
+	g.CreatedAt, g.UpdatedAt = now, now
+
+	if err := tx.Commit(ctx); err != nil {
+		return nil, false, fmt.Errorf("geofence discovery commit (created): %w", err)
+	}
+	return g, true, nil
+}
+
+// ListNeedsReview returns active geofences awaiting human review — the
+// "Needs Setup" queue surfaced by the Charging Places UI. Ordered oldest
+// first so the longest-neglected provisional places surface at the top.
+func (r *GeofenceRepo) ListNeedsReview(ctx context.Context) ([]*systemmodel.Geofence, error) {
+	query := `SELECT ` + geofenceColumns + ` FROM geofences WHERE needs_review = true AND archived_at IS NULL ORDER BY created_at ASC`
+	rows, err := r.pool.Query(ctx, query)
+	if err != nil {
+		return nil, fmt.Errorf("geofences list_needs_review query: %w", err)
+	}
+	defer rows.Close()
+
+	var out []*systemmodel.Geofence
+	for rows.Next() {
+		g := &systemmodel.Geofence{}
+		if err := scanGeofence(rows, g); err != nil {
+			return nil, fmt.Errorf("geofences list_needs_review scan: %w", err)
+		}
+		out = append(out, g)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("geofences list_needs_review iter: %w", err)
+	}
+	return out, nil
+}
+
+// MarkReviewed clears the NeedsReview flag for a geofence — called once a
+// human has confirmed/edited an auto-discovered place's name, type, or
+// location. It intentionally does not touch any other column (in particular
+// never Origin, which stays "charging_discovery" forever as a provenance
+// record even after review).
+func (r *GeofenceRepo) MarkReviewed(ctx context.Context, id int64) error {
+	tag, err := r.pool.Exec(ctx, `UPDATE geofences SET needs_review = false, updated_at = now() WHERE id = $1`, id)
+	if err != nil {
+		return fmt.Errorf("geofences mark_reviewed %d: %w", id, err)
+	}
+	if tag.RowsAffected() == 0 {
+		return fmt.Errorf("geofences mark_reviewed %d: %w", id, ErrGeofenceNotFound)
+	}
+	return nil
+}
diff --git a/internal/database/geofence/repo_discovery_test.go b/internal/database/geofence/repo_discovery_test.go
new file mode 100644
index 0000000000..8d7a2299d5
--- /dev/null
+++ b/internal/database/geofence/repo_discovery_test.go
@@ -0,0 +1,387 @@
+package geofence
+
+import (
+	"context"
+	"errors"
+	"math"
+	"strings"
+	"testing"
+	"time"
+
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+
+	"github.com/jackc/pgx/v5"
+)
+
+// ---------------------------------------------------------------------------
+// Legacy charging-place startup backfill.
+// ---------------------------------------------------------------------------
+
+func TestListChargingPlaceBackfillCandidates(t *testing.T) {
+	name := "Office Garage"
+	startedAt := time.Date(2025, 8, 1, 9, 0, 0, 0, time.UTC)
+	pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows([][]any{{
+		int64(41), int64(7), startedAt, 37.7749, -122.4194, &name,
+	}})}}}
+
+	got, err := newRepo(pool).ListChargingPlaceBackfillCandidates(context.Background(), 30, 25)
+	if err != nil {
+		t.Fatalf("unexpected err: %v", err)
+	}
+	if len(got) != 1 {
+		t.Fatalf("got %d candidates, want 1", len(got))
+	}
+	if got[0].SessionID != 41 || got[0].VehicleID != 7 ||
+		got[0].StartPlace == nil || *got[0].StartPlace != name {
+		t.Fatalf("unexpected candidate: %+v", got[0])
+	}
+	call := pool.queryCalls[0]
+	for _, sub := range []string{
+		"geofence_id IS NULL",
+		"ended_at IS NOT NULL",
+		"start_lat IS NOT NULL",
+		"start_lng IS NOT NULL",
+		"NOT (start_lat = 0 AND start_lng = 0)",
+		"ORDER BY id",
+	} {
+		if !strings.Contains(call.sql, sub) {
+			t.Errorf("candidate SQL missing %q:\n%s", sub, call.sql)
+		}
+	}
+	if call.args[0] != int64(30) || call.args[1] != 25 {
+		t.Errorf("candidate args = %v, want [30 25]", call.args)
+	}
+}
+
+func TestListChargingPlaceBackfillCandidates_QueryError(t *testing.T) {
+	pool := &fakePool{queryQueue: []queryResult{{err: errBoom}}}
+	_, err := newRepo(pool).ListChargingPlaceBackfillCandidates(context.Background(), 0, 100)
+	if !errors.Is(err, errBoom) {
+		t.Fatalf("err=%v, want wrapped errBoom", err)
+	}
+}
+
+func TestApplyCurrentRateEstimate(t *testing.T) {
+	now := time.Date(2026, 8, 9, 12, 0, 0, 0, time.UTC)
+
+	t.Run("applies only an active current fallback", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{tag: tag(1)}}}
+		applied, err := newRepo(pool).ApplyCurrentRateEstimate(context.Background(), 41, 5, 9, now)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if !applied {
+			t.Fatal("want applied=true")
+		}
+		call := pool.execCalls[0]
+		for _, sub := range []string{
+			"cost_source   = 'default_estimate'",
+			"rate.effective_from <= $4",
+			"historical.effective_from <= cs.started_at",
+			"cs.cost_source IS NULL AND cs.cost_decimal IS NULL",
+			"cs.rate_id IS NULL OR cs.rate_id = rate.id",
+		} {
+			if !strings.Contains(call.sql, sub) {
+				t.Errorf("estimate SQL missing %q:\n%s", sub, call.sql)
+			}
+		}
+		if call.args[0] != int64(41) || call.args[1] != int64(5) ||
+			call.args[2] != int64(9) || call.args[3] != now {
+			t.Errorf("estimate args = %v", call.args)
+		}
+	})
+
+	t.Run("protected or already covered session is skipped", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{tag: tag(0)}}}
+		applied, err := newRepo(pool).ApplyCurrentRateEstimate(context.Background(), 41, 5, 9, now)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if applied {
+			t.Fatal("want applied=false")
+		}
+	})
+
+	t.Run("database error is wrapped", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{err: errBoom}}}
+		_, err := newRepo(pool).ApplyCurrentRateEstimate(context.Background(), 41, 5, 9, now)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// validCoordinate — never create a (0,0) or out-of-range/NaN/Inf geofence.
+// ---------------------------------------------------------------------------
+
+func TestValidCoordinate(t *testing.T) {
+	tests := []struct {
+		name     string
+		lat, lon float64
+		want     bool
+	}{
+		{name: "typical valid point", lat: 37.7749, lon: -122.4194, want: true},
+		{name: "boundary north pole", lat: 90, lon: 0, want: true},
+		{name: "boundary south pole", lat: -90, lon: 0, want: true},
+		{name: "boundary antimeridian east", lat: 0, lon: 180, want: true},
+		{name: "boundary antimeridian west", lat: 0, lon: -180, want: true},
+		{name: "null island (0,0) rejected", lat: 0, lon: 0, want: false},
+		{name: "lat out of range high", lat: 90.0001, lon: 0, want: false},
+		{name: "lat out of range low", lat: -90.0001, lon: 0, want: false},
+		{name: "lon out of range high", lat: 0, lon: 180.0001, want: false},
+		{name: "lon out of range low", lat: 0, lon: -180.0001, want: false},
+		{name: "NaN lat", lat: math.NaN(), lon: 0, want: false},
+		{name: "NaN lon", lat: 0, lon: math.NaN(), want: false},
+		{name: "Inf lat", lat: math.Inf(1), lon: 0, want: false},
+		{name: "Inf lon", lat: 0, lon: math.Inf(-1), want: false},
+		{name: "zero lat non-zero lon is valid", lat: 0, lon: 45, want: true},
+		{name: "zero lon non-zero lat is valid", lat: 45, lon: 0, want: true},
+	}
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			if got := validCoordinate(tc.lat, tc.lon); got != tc.want {
+				t.Fatalf("validCoordinate(%v, %v) = %v, want %v", tc.lat, tc.lon, got, tc.want)
+			}
+		})
+	}
+}
+
+// ---------------------------------------------------------------------------
+// FindOrCreateForCharging
+// ---------------------------------------------------------------------------
+
+func TestFindOrCreateForCharging_InvalidCoordinatesNeverOpensTransaction(t *testing.T) {
+	pool := &fakePool{}
+	_, created, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 0, 0, "Somewhere")
+	if err == nil {
+		t.Fatal("want error for (0,0) coordinates")
+	}
+	if created {
+		t.Fatal("must not report created=true on invalid coordinates")
+	}
+	if pool.beginCalls != 0 {
+		t.Fatalf("invalid coordinates must never open a transaction, got %d Begin calls", pool.beginCalls)
+	}
+}
+
+func TestFindOrCreateForCharging_MatchesExistingInsideLock(t *testing.T) {
+	existing := &systemmodel.Geofence{ID: 7, Name: "Home", PolygonWKT: squareWKT(37.7749, -122.4194), Enabled: true, CreatedAt: fixedTime, UpdatedAt: fixedTime}
+	tx := &fakeTx{
+		execQueue:  []execResult{{tag: tag(0)}}, // pg_advisory_xact_lock
+		queryQueue: []queryResult{{rows: newFakeRows([][]any{geofenceRowVals(existing)})}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+
+	g, created, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 37.7749, -122.4194, "New Suggested Name")
+	if err != nil {
+		t.Fatalf("unexpected err: %v", err)
+	}
+	if created {
+		t.Fatal("want created=false when an existing geofence matches")
+	}
+	if g == nil || g.ID != 7 {
+		t.Fatalf("want the matched geofence (id=7), got %+v", g)
+	}
+	if tx.commitCalls != 1 {
+		t.Fatalf("want 1 commit, got %d", tx.commitCalls)
+	}
+	// Must never fall through to the INSERT path when a match is found.
+	if len(tx.queryRowCalls) != 0 {
+		t.Fatalf("must not INSERT when a match exists, got %d QueryRow calls", len(tx.queryRowCalls))
+	}
+	lockCall := tx.execCalls[0]
+	if !strings.Contains(lockCall.sql, "pg_advisory_xact_lock") {
+		t.Errorf("first Exec must acquire the advisory lock: %s", lockCall.sql)
+	}
+}
+
+func TestFindOrCreateForCharging_CreatesProvisionalWhenNoMatch(t *testing.T) {
+	tx := &fakeTx{
+		execQueue:     []execResult{{tag: tag(0)}},             // advisory lock
+		queryQueue:    []queryResult{{rows: newFakeRows(nil)}}, // no match
+		queryRowQueue: []pgx.Row{fakeRow{vals: []any{int64(55)}}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+
+	g, created, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 37.7749, -122.4194, "Joe's Diner")
+	if err != nil {
+		t.Fatalf("unexpected err: %v", err)
+	}
+	if !created {
+		t.Fatal("want created=true when nothing matches")
+	}
+	if g == nil || g.ID != 55 {
+		t.Fatalf("want new geofence id=55, got %+v", g)
+	}
+	if g.Name != "Joe's Diner" {
+		t.Errorf("name: want suggested name, got %q", g.Name)
+	}
+	if g.Origin != systemmodel.GeofenceOriginChargingDiscovery {
+		t.Errorf("origin: want charging_discovery, got %q", g.Origin)
+	}
+	if !g.NeedsReview {
+		t.Error("want NeedsReview=true for a freshly discovered place")
+	}
+	if g.Enabled || g.AlertOnEntry || g.AlertOnExit {
+		t.Errorf("want safe disabled defaults for a provisional place, got %+v", g)
+	}
+	insertCall := tx.queryRowCalls[0]
+	for _, sub := range []string{"INSERT INTO geofences", "RETURNING id"} {
+		if !strings.Contains(insertCall.sql, sub) {
+			t.Errorf("insert SQL missing %q:\n%s", sub, insertCall.sql)
+		}
+	}
+	if tx.commitCalls != 1 {
+		t.Fatalf("want 1 commit, got %d", tx.commitCalls)
+	}
+}
+
+func TestFindOrCreateForCharging_EmptySuggestedNameFallsBackToNeutralName(t *testing.T) {
+	tx := &fakeTx{
+		execQueue:     []execResult{{tag: tag(0)}},
+		queryQueue:    []queryResult{{rows: newFakeRows(nil)}},
+		queryRowQueue: []pgx.Row{fakeRow{vals: []any{int64(1)}}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+
+	g, _, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 37.7749, -122.4194, "   ")
+	if err != nil {
+		t.Fatalf("unexpected err: %v", err)
+	}
+	if g.Name == "" || strings.TrimSpace(g.Name) == "" {
+		t.Fatalf("want a non-blank neutral fallback name, got %q", g.Name)
+	}
+}
+
+func TestFindOrCreateForCharging_BeginError(t *testing.T) {
+	pool := &fakePool{beginQueue: []beginResult{{err: errBoom}}}
+	_, _, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 37.7749, -122.4194, "x")
+	if !errors.Is(err, errBoom) {
+		t.Fatalf("err=%v, want wrapped errBoom", err)
+	}
+}
+
+func TestFindOrCreateForCharging_LockError(t *testing.T) {
+	tx := &fakeTx{execQueue: []execResult{{err: errBoom}}}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	_, _, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 37.7749, -122.4194, "x")
+	if !errors.Is(err, errBoom) {
+		t.Fatalf("err=%v, want wrapped errBoom", err)
+	}
+}
+
+func TestFindOrCreateForCharging_MatchQueryError(t *testing.T) {
+	tx := &fakeTx{
+		execQueue:  []execResult{{tag: tag(0)}},
+		queryQueue: []queryResult{{err: errBoom}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	_, _, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 37.7749, -122.4194, "x")
+	if !errors.Is(err, errBoom) {
+		t.Fatalf("err=%v, want wrapped errBoom", err)
+	}
+}
+
+func TestFindOrCreateForCharging_InsertError(t *testing.T) {
+	tx := &fakeTx{
+		execQueue:     []execResult{{tag: tag(0)}},
+		queryQueue:    []queryResult{{rows: newFakeRows(nil)}},
+		queryRowQueue: []pgx.Row{fakeRow{scanErr: errBoom}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	_, _, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 37.7749, -122.4194, "x")
+	if !errors.Is(err, errBoom) {
+		t.Fatalf("err=%v, want wrapped errBoom", err)
+	}
+}
+
+func TestFindOrCreateForCharging_CommitError(t *testing.T) {
+	tx := &fakeTx{
+		execQueue:     []execResult{{tag: tag(0)}},
+		queryQueue:    []queryResult{{rows: newFakeRows(nil)}},
+		queryRowQueue: []pgx.Row{fakeRow{vals: []any{int64(1)}}},
+		commitErr:     errBoom,
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	_, _, err := newRepo(pool).FindOrCreateForCharging(context.Background(), 37.7749, -122.4194, "x")
+	if !errors.Is(err, errBoom) {
+		t.Fatalf("err=%v, want wrapped errBoom", err)
+	}
+}
+
+// TestFindOrCreateForCharging_DiscoveryRadiusMatchesBusinessRule pins the
+// documented 75m provisional-circle radius so an accidental future edit is
+// caught immediately by a test failure rather than silently shrinking or
+// growing every auto-discovered place's coverage.
+func TestFindOrCreateForCharging_DiscoveryRadiusMatchesBusinessRule(t *testing.T) {
+	if DiscoveryRadiusMeters != 75.0 {
+		t.Fatalf("DiscoveryRadiusMeters=%v, want 75.0 per business rule", DiscoveryRadiusMeters)
+	}
+}
+
+// ---------------------------------------------------------------------------
+// ListNeedsReview
+// ---------------------------------------------------------------------------
+
+func TestListNeedsReview(t *testing.T) {
+	pending := &systemmodel.Geofence{ID: 1, Name: "Unnamed Charging Place", PolygonWKT: squareWKT(1, 1), Origin: systemmodel.GeofenceOriginChargingDiscovery, NeedsReview: true, CreatedAt: fixedTime, UpdatedAt: fixedTime}
+
+	t.Run("returns pending rows", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows([][]any{geofenceRowVals(pending)})}}}
+		got, err := newRepo(pool).ListNeedsReview(context.Background())
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if len(got) != 1 || got[0].ID != 1 {
+			t.Fatalf("unexpected result: %+v", got)
+		}
+		call := pool.queryCalls[0]
+		for _, sub := range []string{"needs_review = true", "archived_at IS NULL", "ORDER BY created_at ASC"} {
+			if !strings.Contains(call.sql, sub) {
+				t.Errorf("SQL missing %q:\n%s", sub, call.sql)
+			}
+		}
+	})
+
+	t.Run("query error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{err: errBoom}}}
+		_, err := newRepo(pool).ListNeedsReview(context.Background())
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// MarkReviewed
+// ---------------------------------------------------------------------------
+
+func TestMarkReviewed(t *testing.T) {
+	t.Run("success", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{tag: tag(1)}}}
+		if err := newRepo(pool).MarkReviewed(context.Background(), 1); err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		call := pool.execCalls[0]
+		if !strings.Contains(call.sql, "needs_review = false") {
+			t.Errorf("unexpected SQL: %s", call.sql)
+		}
+	})
+
+	t.Run("not found", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{tag: tag(0)}}}
+		err := newRepo(pool).MarkReviewed(context.Background(), 999)
+		if !errors.Is(err, ErrGeofenceNotFound) {
+			t.Fatalf("err=%v, want ErrGeofenceNotFound", err)
+		}
+	})
+
+	t.Run("exec error wrapped", func(t *testing.T) {
+		pool := &fakePool{execQueue: []execResult{{err: errBoom}}}
+		err := newRepo(pool).MarkReviewed(context.Background(), 1)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
diff --git a/internal/database/geofence/repo_rates.go b/internal/database/geofence/repo_rates.go
new file mode 100644
index 0000000000..a2be349d93
--- /dev/null
+++ b/internal/database/geofence/repo_rates.go
@@ -0,0 +1,406 @@
+package geofence
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"math"
+	"time"
+
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+
+	"github.com/jackc/pgx/v5"
+	"github.com/jackc/pgx/v5/pgconn"
+)
+
+// =============================================================================
+// repo_rates.go — time-versioned electricity-rate CRUD for the
+// charging-place pricing feature (migration
+// 000228_geofence_charging_place_pricing).
+//
+// geofence_rates is the ONE normalized, effective-dated source of truth for a
+// place's rate history: there is deliberately no separate mutable
+// "current rate" column on geofences. "The current rate" is simply whichever
+// row's half-open [effective_from, effective_to) interval contains the
+// query instant. Non-overlap per geofence is enforced by the
+// database (a GIST exclusion constraint), not just application code, so a
+// concurrent double-write can never silently corrupt history.
+// =============================================================================
+
+// ErrRateConflict is returned when creating/replacing a rate would overlap
+// an existing interval for the same geofence — mapped from the underlying
+// PostgreSQL exclusion-constraint violation (SQLSTATE 23P01).
+var ErrRateConflict = errors.New("geofence rate interval conflicts with an existing rate")
+
+// ErrRateNotFound is returned when a rate id does not exist for the given
+// (or any) geofence.
+var ErrRateNotFound = errors.New("geofence rate not found")
+
+// ErrRateInUse is returned when a rate is already referenced by one or more
+// charging sessions. Historical tariff provenance is immutable once used.
+var ErrRateInUse = errors.New("geofence rate is referenced by charging sessions")
+
+// ErrRateImmutable is returned when deleting a rate that has already become
+// effective. Only unused future schedules may be cancelled.
+var ErrRateImmutable = errors.New("effective geofence rates are immutable")
+
+// ErrGeofenceNotFound is returned by mutation-only methods (MarkReviewed,
+// Archive, Unarchive) that have nothing else to return when the targeted
+// geofence id does not exist.
+var ErrGeofenceNotFound = errors.New("geofence not found")
+
+// classifyRateConflict maps a PostgreSQL exclusion/unique-violation error
+// into ErrRateConflict, mirroring the classifyPGError pattern used by
+// internal/database/fleetops for the same class of problem.
+func classifyRateConflict(err error) error {
+	if err == nil {
+		return nil
+	}
+	var pgErr *pgconn.PgError
+	if errors.As(err, &pgErr) {
+		switch pgErr.Code {
+		case "23P01", "23505":
+			return fmt.Errorf("%w: %v", ErrRateConflict, err)
+		}
+	}
+	return err
+}
+
+const geofenceRateColumns = `id, geofence_id, rate_per_wh, currency, effective_from, effective_to, created_at`
+
+func scanGeofenceRate(row pgx.Row) (*systemmodel.GeofenceRate, error) {
+	gr := &systemmodel.GeofenceRate{}
+	err := row.Scan(&gr.ID, &gr.GeofenceID, &gr.RatePerWh, &gr.Currency, &gr.EffectiveFrom, &gr.EffectiveTo, &gr.CreatedAt)
+	if err != nil {
+		return nil, err
+	}
+	return gr, nil
+}
+
+// CreateRate inserts a new rate version for a geofence.
+//
+// If the geofence currently has an open interval (effective_to IS NULL), and
+// the new rate is also open-ended, the old interval is auto-closed
+// (effective_to := new.EffectiveFrom) in the same transaction — this is the
+// primary "add a new version, the old one silently ends where the new one
+// begins" business flow (e.g. $0.10/kWh before 2026-08-27, $0.12/kWh from
+// then on) and produces adjacent, non-overlapping half-open intervals so the
+// exclusion constraint never trips for this common case.
+//
+// A bounded interval never auto-closes an existing open rate. If it overlaps
+// one, the database rejects it rather than silently truncating the current
+// rate and leaving a pricing gap after the bounded interval ends.
+//
+// Any other overlap (e.g. a backdated insert into the middle of history) is
+// rejected by the database's GIST exclusion constraint and surfaced as
+// ErrRateConflict — arbitrary
+// insert-in-the-middle-and-cascade-shift is intentionally not supported.
+func (r *GeofenceRepo) CreateRate(ctx context.Context, gr *systemmodel.GeofenceRate) error {
+	if err := validateGeofenceRate(gr); err != nil {
+		return err
+	}
+
+	tx, err := r.pool.Begin(ctx)
+	if err != nil {
+		return fmt.Errorf("geofence rates create begin: %w", err)
+	}
+	defer func() { _ = tx.Rollback(ctx) }()
+
+	if gr.EffectiveTo == nil {
+		const closeOpenSQL = `
+UPDATE geofence_rates
+   SET effective_to = $2
+ WHERE geofence_id = $1
+   AND effective_to IS NULL
+   AND effective_from < $2`
+		if _, err := tx.Exec(ctx, closeOpenSQL, gr.GeofenceID, gr.EffectiveFrom); err != nil {
+			return fmt.Errorf("geofence rates create close-open: %w", err)
+		}
+	}
+
+	const insertSQL = `
+INSERT INTO geofence_rates (geofence_id, rate_per_wh, currency, effective_from, effective_to)
+VALUES ($1, $2, $3, $4, $5)
+RETURNING id, created_at`
+	if err := tx.QueryRow(ctx, insertSQL, gr.GeofenceID, gr.RatePerWh, gr.Currency, gr.EffectiveFrom, gr.EffectiveTo).
+		Scan(&gr.ID, &gr.CreatedAt); err != nil {
+		return classifyRateConflict(fmt.Errorf("geofence rates create insert: %w", err))
+	}
+
+	now := time.Now().UTC()
+	if gr.IsActiveAt(now) {
+		if err := applyCreatedCurrentRateToSessions(ctx, tx, gr); err != nil {
+			return err
+		}
+	}
+
+	if err := tx.Commit(ctx); err != nil {
+		return fmt.Errorf("geofence rates create commit: %w", err)
+	}
+	return nil
+}
+
+// applyCreatedCurrentRateToSessions applies a newly-created rate to eligible,
+// completed sessions already attributed to the place. Sessions inside the
+// rate's interval receive authoritative geofence_tariff provenance. Older
+// sessions not covered by any configured interval receive today's rate as a
+// default_estimate, preserving the ability to replace it later with explicit
+// historical pricing. Both updates share CreateRate's transaction.
+func applyCreatedCurrentRateToSessions(ctx context.Context, tx pgx.Tx, gr *systemmodel.GeofenceRate) error {
+	const applyExact = `
+UPDATE charging_sessions
+   SET cost_decimal  = ROUND(total_energy_added_wh::numeric * $3::numeric, 6),
+       cost_currency = $4,
+       rate_id       = $2,
+       cost_source   = 'geofence_tariff'
+ WHERE geofence_id = $1
+   AND ended_at IS NOT NULL
+   AND total_energy_added_wh IS NOT NULL
+   AND started_at >= $5
+   AND ($6::timestamptz IS NULL OR started_at < $6)
+   AND (
+       cost_source = 'default_estimate'
+       OR (cost_source IS NULL AND cost_decimal IS NULL)
+       OR (cost_source = 'unknown' AND cost_decimal IS NULL)
+       OR (cost_source = 'geofence_tariff' AND rate_id = $2)
+   )`
+	if _, err := tx.Exec(
+		ctx,
+		applyExact,
+		gr.GeofenceID,
+		gr.ID,
+		gr.RatePerWh,
+		gr.Currency,
+		gr.EffectiveFrom,
+		gr.EffectiveTo,
+	); err != nil {
+		return fmt.Errorf("geofence rates create apply exact sessions: %w", err)
+	}
+
+	const applyUncovered = `
+UPDATE charging_sessions AS cs
+   SET cost_decimal  = ROUND(cs.total_energy_added_wh::numeric * $3::numeric, 6),
+       cost_currency = $4,
+       rate_id       = $2,
+       cost_source   = 'default_estimate'
+ WHERE cs.geofence_id = $1
+   AND cs.ended_at IS NOT NULL
+   AND cs.total_energy_added_wh IS NOT NULL
+   AND NOT EXISTS (
+       SELECT 1
+         FROM geofence_rates AS historical
+        WHERE historical.geofence_id = cs.geofence_id
+          AND historical.effective_from <= cs.started_at
+          AND (historical.effective_to IS NULL OR historical.effective_to > cs.started_at)
+   )
+   AND (
+       (cs.cost_source IS NULL AND cs.cost_decimal IS NULL)
+       OR (cs.cost_source = 'unknown' AND cs.cost_decimal IS NULL)
+       OR (
+           cs.cost_source = 'default_estimate'
+           AND (cs.rate_id IS NULL OR cs.rate_id = $2)
+       )
+   )`
+	if _, err := tx.Exec(ctx, applyUncovered, gr.GeofenceID, gr.ID, gr.RatePerWh, gr.Currency); err != nil {
+		return fmt.Errorf("geofence rates create apply current estimate: %w", err)
+	}
+	return nil
+}
+
+// validateGeofenceRate applies the non-negotiable rate-integrity checks
+// (non-negative finite rate, ISO-4217-shaped currency, well-formed interval)
+// at the repository boundary so every write path — handler-driven create,
+// discovery enrichment, future import — gets the same guarantees regardless
+// of caller.
+func validateGeofenceRate(gr *systemmodel.GeofenceRate) error {
+	if gr == nil {
+		return fmt.Errorf("geofence rate: nil")
+	}
+	if gr.GeofenceID <= 0 {
+		return fmt.Errorf("geofence rate: geofence_id required")
+	}
+	if math.IsNaN(gr.RatePerWh) || math.IsInf(gr.RatePerWh, 0) ||
+		gr.RatePerWh < 0 || gr.RatePerWh >= 1_000_000 {
+		return fmt.Errorf("geofence rate: rate_per_wh must be finite and between 0 (inclusive) and 1000000 (exclusive)")
+	}
+	if len(gr.Currency) != 3 {
+		return fmt.Errorf("geofence rate: currency must be a 3-letter ISO 4217 code")
+	}
+	for _, c := range gr.Currency {
+		if c < 'A' || c > 'Z' {
+			return fmt.Errorf("geofence rate: currency must be uppercase ISO 4217 (got %q)", gr.Currency)
+		}
+	}
+	if gr.EffectiveFrom.IsZero() {
+		return fmt.Errorf("geofence rate: effective_from required")
+	}
+	if gr.EffectiveTo != nil && !gr.EffectiveTo.After(gr.EffectiveFrom) {
+		return fmt.Errorf("geofence rate: effective_to must be after effective_from")
+	}
+	return nil
+}
+
+// ListRates returns every rate version for a geofence, newest
+// effective_from first — the shape the rate-history UI panel renders
+// directly.
+func (r *GeofenceRepo) ListRates(ctx context.Context, geofenceID int64) ([]*systemmodel.GeofenceRate, error) {
+	query := `SELECT ` + geofenceRateColumns + ` FROM geofence_rates WHERE geofence_id=$1 ORDER BY effective_from DESC`
+	rows, err := r.pool.Query(ctx, query, geofenceID)
+	if err != nil {
+		return nil, fmt.Errorf("geofence rates list query: %w", err)
+	}
+	defer rows.Close()
+
+	var out []*systemmodel.GeofenceRate
+	for rows.Next() {
+		gr, err := scanGeofenceRate(rows)
+		if err != nil {
+			return nil, fmt.Errorf("geofence rates list scan: %w", err)
+		}
+		out = append(out, gr)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("geofence rates list iter: %w", err)
+	}
+	return out, nil
+}
+
+// GetRateByID fetches a single rate version, scoped to a geofence so a
+// caller can never accidentally address another place's rate by guessing an
+// id. Returns (nil, nil) when not found.
+func (r *GeofenceRepo) GetRateByID(ctx context.Context, geofenceID, rateID int64) (*systemmodel.GeofenceRate, error) {
+	query := `SELECT ` + geofenceRateColumns + ` FROM geofence_rates WHERE id=$1 AND geofence_id=$2`
+	gr, err := scanGeofenceRate(r.pool.QueryRow(ctx, query, rateID, geofenceID))
+	if errors.Is(err, pgx.ErrNoRows) {
+		return nil, nil
+	}
+	if err != nil {
+		return nil, fmt.Errorf("geofence rates get %d: %w", rateID, err)
+	}
+	return gr, nil
+}
+
+// GetActiveRateAt returns the rate version whose half-open interval
+// contains instant `at` for the given geofence, or (nil, nil) when no rate
+// has been configured for that instant. Normal pricing resolves with the
+// charging session's started_at so historical rates remain stable. The
+// legacy startup backfill performs a second lookup at "now" only when the
+// first lookup finds no historical interval, and records that fallback as
+// default_estimate rather than authoritative geofence_tariff provenance.
+func (r *GeofenceRepo) GetActiveRateAt(ctx context.Context, geofenceID int64, at time.Time) (*systemmodel.GeofenceRate, error) {
+	query := `SELECT ` + geofenceRateColumns + ` FROM geofence_rates
+WHERE geofence_id=$1 AND effective_from <= $2 AND (effective_to IS NULL OR effective_to > $2)
+ORDER BY effective_from DESC
+LIMIT 1`
+	gr, err := scanGeofenceRate(r.pool.QueryRow(ctx, query, geofenceID, at))
+	if errors.Is(err, pgx.ErrNoRows) {
+		return nil, nil
+	}
+	if err != nil {
+		return nil, fmt.Errorf("geofence rates get_active_at: %w", err)
+	}
+	return gr, nil
+}
+
+// ListActiveRatesNow returns the currently-active rate for every geofence
+// that has one configured — i.e. the row whose half-open interval contains
+// this instant, which (thanks to the no-overlap exclusion constraint) is
+// never more than one row per geofence, and is NOT always the row with
+// effective_to IS NULL (a geofence with a future-dated rate already queued
+// has its "now-active" row closed at that future effective_from). This
+// powers the Charging Places list/summary view's "current rate" column in
+// one query instead of one round trip per place.
+func (r *GeofenceRepo) ListActiveRatesNow(ctx context.Context) ([]*systemmodel.GeofenceRate, error) {
+	query := `SELECT ` + geofenceRateColumns + ` FROM geofence_rates
+WHERE effective_from <= now() AND (effective_to IS NULL OR effective_to > now())
+ORDER BY geofence_id`
+	rows, err := r.pool.Query(ctx, query)
+	if err != nil {
+		return nil, fmt.Errorf("geofence rates list_active_now query: %w", err)
+	}
+	defer rows.Close()
+
+	var out []*systemmodel.GeofenceRate
+	for rows.Next() {
+		gr, err := scanGeofenceRate(rows)
+		if err != nil {
+			return nil, fmt.Errorf("geofence rates list_active_now scan: %w", err)
+		}
+		out = append(out, gr)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("geofence rates list_active_now iter: %w", err)
+	}
+	return out, nil
+}
+
+// DeleteRate cancels an unused future rate schedule. Once a rate has become
+// effective or is referenced by any charging session it is immutable.
+//
+// Cancelling a future rate also extends its immediately preceding adjacent
+// interval through the cancelled interval, so removing a scheduled change
+// cannot leave a silent pricing gap.
+func (r *GeofenceRepo) DeleteRate(ctx context.Context, geofenceID, rateID int64) error {
+	tx, err := r.pool.Begin(ctx)
+	if err != nil {
+		return fmt.Errorf("geofence rates delete begin: %w", err)
+	}
+	defer func() { _ = tx.Rollback(ctx) }()
+
+	const loadSQL = `
+SELECT ` + geofenceRateColumns + `, effective_from > now()
+FROM geofence_rates
+WHERE id=$1 AND geofence_id=$2
+FOR UPDATE`
+	rate := &systemmodel.GeofenceRate{}
+	var future bool
+	err = tx.QueryRow(ctx, loadSQL, rateID, geofenceID).Scan(
+		&rate.ID, &rate.GeofenceID, &rate.RatePerWh, &rate.Currency,
+		&rate.EffectiveFrom, &rate.EffectiveTo, &rate.CreatedAt, &future,
+	)
+	if errors.Is(err, pgx.ErrNoRows) {
+		return ErrRateNotFound
+	}
+	if err != nil {
+		return fmt.Errorf("geofence rates delete load %d: %w", rateID, err)
+	}
+	if !future {
+		return ErrRateImmutable
+	}
+
+	var inUse bool
+	if err := tx.QueryRow(ctx,
+		`SELECT EXISTS (SELECT 1 FROM charging_sessions WHERE rate_id=$1)`,
+		rateID,
+	).Scan(&inUse); err != nil {
+		return fmt.Errorf("geofence rates delete usage check %d: %w", rateID, err)
+	}
+	if inUse {
+		return ErrRateInUse
+	}
+
+	if _, err := tx.Exec(ctx,
+		`DELETE FROM geofence_rates WHERE id=$1 AND geofence_id=$2`,
+		rateID, geofenceID,
+	); err != nil {
+		return fmt.Errorf("geofence rates delete %d: %w", rateID, err)
+	}
+
+	// Restore continuity by extending the adjacent predecessor through the
+	// cancelled interval. If no predecessor exists, the place simply remains
+	// unpriced until the next configured interval.
+	if _, err := tx.Exec(ctx, `
+UPDATE geofence_rates
+   SET effective_to = $3
+ WHERE geofence_id = $1
+   AND effective_to = $2`,
+		geofenceID, rate.EffectiveFrom, rate.EffectiveTo,
+	); err != nil {
+		return fmt.Errorf("geofence rates delete restore predecessor %d: %w", rateID, err)
+	}
+
+	if err := tx.Commit(ctx); err != nil {
+		return fmt.Errorf("geofence rates delete commit: %w", err)
+	}
+	return nil
+}
diff --git a/internal/database/geofence/repo_rates_test.go b/internal/database/geofence/repo_rates_test.go
new file mode 100644
index 0000000000..47a1115559
--- /dev/null
+++ b/internal/database/geofence/repo_rates_test.go
@@ -0,0 +1,606 @@
+package geofence
+
+import (
+	"context"
+	"errors"
+	"math"
+	"strings"
+	"testing"
+	"time"
+
+	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
+
+	"github.com/jackc/pgx/v5"
+	"github.com/jackc/pgx/v5/pgconn"
+)
+
+// ---------------------------------------------------------------------------
+// validateGeofenceRate
+// ---------------------------------------------------------------------------
+
+func TestValidateGeofenceRate(t *testing.T) {
+	from := time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC)
+	to := time.Date(2026, 8, 27, 0, 0, 0, 0, time.UTC)
+
+	valid := func() *systemmodel.GeofenceRate {
+		return &systemmodel.GeofenceRate{GeofenceID: 1, RatePerWh: 0.0001005, Currency: "USD", EffectiveFrom: from}
+	}
+
+	tests := []struct {
+		name    string
+		mutate  func(*systemmodel.GeofenceRate)
+		nilRate bool
+		wantErr string
+	}{
+		{name: "valid open interval", mutate: func(gr *systemmodel.GeofenceRate) {}},
+		{name: "valid closed interval", mutate: func(gr *systemmodel.GeofenceRate) { gr.EffectiveTo = &to }},
+		{name: "valid zero rate", mutate: func(gr *systemmodel.GeofenceRate) { gr.RatePerWh = 0 }},
+		{name: "rate exceeds database precision bound", mutate: func(gr *systemmodel.GeofenceRate) { gr.RatePerWh = 1_000_000 }, wantErr: "1000000"},
+		{name: "nil rate", nilRate: true, wantErr: "nil"},
+		{name: "geofence id zero", mutate: func(gr *systemmodel.GeofenceRate) { gr.GeofenceID = 0 }, wantErr: "geofence_id required"},
+		{name: "geofence id negative", mutate: func(gr *systemmodel.GeofenceRate) { gr.GeofenceID = -1 }, wantErr: "geofence_id required"},
+		{name: "NaN rate", mutate: func(gr *systemmodel.GeofenceRate) { gr.RatePerWh = math.NaN() }, wantErr: "must be finite"},
+		{name: "Inf rate", mutate: func(gr *systemmodel.GeofenceRate) { gr.RatePerWh = math.Inf(1) }, wantErr: "must be finite"},
+		{name: "negative rate", mutate: func(gr *systemmodel.GeofenceRate) { gr.RatePerWh = -0.0001 }, wantErr: "must be finite"},
+		{name: "currency too short", mutate: func(gr *systemmodel.GeofenceRate) { gr.Currency = "US" }, wantErr: "3-letter ISO 4217"},
+		{name: "currency too long", mutate: func(gr *systemmodel.GeofenceRate) { gr.Currency = "USDD" }, wantErr: "3-letter ISO 4217"},
+		{name: "currency lowercase", mutate: func(gr *systemmodel.GeofenceRate) { gr.Currency = "usd" }, wantErr: "uppercase ISO 4217"},
+		{name: "currency mixed case", mutate: func(gr *systemmodel.GeofenceRate) { gr.Currency = "Usd" }, wantErr: "uppercase ISO 4217"},
+		{name: "currency with digit", mutate: func(gr *systemmodel.GeofenceRate) { gr.Currency = "US1" }, wantErr: "uppercase ISO 4217"},
+		{name: "effective_from zero", mutate: func(gr *systemmodel.GeofenceRate) { gr.EffectiveFrom = time.Time{} }, wantErr: "effective_from required"},
+		{name: "effective_to equal effective_from", mutate: func(gr *systemmodel.GeofenceRate) { t := from; gr.EffectiveTo = &t }, wantErr: "effective_to must be after"},
+		{name: "effective_to before effective_from", mutate: func(gr *systemmodel.GeofenceRate) { t := from.Add(-time.Hour); gr.EffectiveTo = &t }, wantErr: "effective_to must be after"},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			var gr *systemmodel.GeofenceRate
+			if !tc.nilRate {
+				gr = valid()
+				tc.mutate(gr)
+			}
+			err := validateGeofenceRate(gr)
+			if tc.wantErr == "" {
+				if err != nil {
+					t.Fatalf("unexpected error: %v", err)
+				}
+				return
+			}
+			if err == nil || !strings.Contains(err.Error(), tc.wantErr) {
+				t.Fatalf("error=%v, want substring %q", err, tc.wantErr)
+			}
+		})
+	}
+}
+
+// ---------------------------------------------------------------------------
+// classifyRateConflict
+// ---------------------------------------------------------------------------
+
+func TestClassifyRateConflict(t *testing.T) {
+	t.Run("nil passthrough", func(t *testing.T) {
+		if err := classifyRateConflict(nil); err != nil {
+			t.Fatalf("want nil, got %v", err)
+		}
+	})
+	t.Run("exclusion violation 23P01 maps to ErrRateConflict", func(t *testing.T) {
+		err := classifyRateConflict(&pgconn.PgError{Code: "23P01", Message: "conflicting key value"})
+		if !errors.Is(err, ErrRateConflict) {
+			t.Fatalf("err=%v, want wrapped ErrRateConflict", err)
+		}
+	})
+	t.Run("unique violation 23505 maps to ErrRateConflict", func(t *testing.T) {
+		err := classifyRateConflict(&pgconn.PgError{Code: "23505", Message: "duplicate key value"})
+		if !errors.Is(err, ErrRateConflict) {
+			t.Fatalf("err=%v, want wrapped ErrRateConflict", err)
+		}
+	})
+	t.Run("unrelated pg error passes through unchanged", func(t *testing.T) {
+		orig := &pgconn.PgError{Code: "42P01", Message: "relation does not exist"}
+		err := classifyRateConflict(orig)
+		if !errors.Is(err, orig) || errors.Is(err, ErrRateConflict) {
+			t.Fatalf("err=%v, want unchanged passthrough (not ErrRateConflict)", err)
+		}
+	})
+	t.Run("non-pg error passes through unchanged", func(t *testing.T) {
+		if err := classifyRateConflict(errBoom); !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want errBoom passthrough", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// CreateRate
+// ---------------------------------------------------------------------------
+
+func sampleRate() *systemmodel.GeofenceRate {
+	return &systemmodel.GeofenceRate{
+		GeofenceID:    1,
+		RatePerWh:     0.0001005,
+		Currency:      "USD",
+		EffectiveFrom: time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC),
+	}
+}
+
+func TestCreateRate_ValidationRejectedBeforeAnyDBCall(t *testing.T) {
+	pool := &fakePool{}
+	gr := sampleRate()
+	gr.Currency = "us" // invalid
+	err := newRepo(pool).CreateRate(context.Background(), gr)
+	if err == nil {
+		t.Fatal("want validation error")
+	}
+	if pool.beginCalls != 0 {
+		t.Fatalf("validation failure must not open a transaction, got %d Begin calls", pool.beginCalls)
+	}
+}
+
+func TestCreateRate_Success(t *testing.T) {
+	tx := &fakeTx{
+		execQueue: []execResult{
+			{tag: tag(0)}, // close-open UPDATE (no prior open interval)
+			{tag: tag(2)}, // exact-interval sessions
+			{tag: tag(3)}, // uncovered legacy estimates
+		},
+		queryRowQueue: []pgx.Row{fakeRow{vals: []any{int64(99), fixedTime}}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	gr := sampleRate()
+
+	if err := newRepo(pool).CreateRate(context.Background(), gr); err != nil {
+		t.Fatalf("unexpected err: %v", err)
+	}
+	if gr.ID != 99 || !gr.CreatedAt.Equal(fixedTime) {
+		t.Fatalf("rate not populated from RETURNING: %+v", gr)
+	}
+	if tx.commitCalls != 1 {
+		t.Fatalf("want 1 commit, got %d", tx.commitCalls)
+	}
+	if len(tx.execCalls) != 3 {
+		t.Fatalf("want close-open + exact + uncovered Exec calls, got %d", len(tx.execCalls))
+	}
+	closeCall := tx.execCalls[0]
+	for _, sub := range []string{"UPDATE geofence_rates", "effective_to IS NULL", "effective_from < $2"} {
+		if !strings.Contains(closeCall.sql, sub) {
+			t.Errorf("close-open SQL missing %q:\n%s", sub, closeCall.sql)
+		}
+	}
+	if closeCall.args[0] != gr.GeofenceID || closeCall.args[1] != gr.EffectiveFrom {
+		t.Errorf("close-open args mismatch: %v", closeCall.args)
+	}
+	exactCall := tx.execCalls[1]
+	for _, sub := range []string{
+		"cost_source   = 'geofence_tariff'",
+		"started_at >= $5",
+		"cost_source = 'default_estimate'",
+		"cost_source = 'geofence_tariff' AND rate_id = $2",
+	} {
+		if !strings.Contains(exactCall.sql, sub) {
+			t.Errorf("exact-session SQL missing %q:\n%s", sub, exactCall.sql)
+		}
+	}
+	uncoveredCall := tx.execCalls[2]
+	for _, sub := range []string{
+		"cost_source   = 'default_estimate'",
+		"NOT EXISTS",
+		"historical.effective_from <= cs.started_at",
+		"cs.rate_id IS NULL OR cs.rate_id = $2",
+	} {
+		if !strings.Contains(uncoveredCall.sql, sub) {
+			t.Errorf("uncovered-session SQL missing %q:\n%s", sub, uncoveredCall.sql)
+		}
+	}
+	insertCall := tx.queryRowCalls[0]
+	for _, sub := range []string{"INSERT INTO geofence_rates", "RETURNING id, created_at"} {
+		if !strings.Contains(insertCall.sql, sub) {
+			t.Errorf("insert SQL missing %q:\n%s", sub, insertCall.sql)
+		}
+	}
+	if insertCall.args[0] != gr.GeofenceID || insertCall.args[1] != gr.RatePerWh || insertCall.args[2] != gr.Currency {
+		t.Errorf("insert args mismatch: %v", insertCall.args)
+	}
+}
+
+func TestCreateRate_BoundedIntervalDoesNotTruncateOpenRate(t *testing.T) {
+	to := sampleRate().EffectiveFrom.Add(24 * time.Hour)
+	tx := &fakeTx{
+		queryRowQueue: []pgx.Row{fakeRow{vals: []any{int64(100), fixedTime}}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	gr := sampleRate()
+	gr.EffectiveTo = &to
+
+	if err := newRepo(pool).CreateRate(context.Background(), gr); err != nil {
+		t.Fatalf("unexpected err: %v", err)
+	}
+	if len(tx.execCalls) != 0 {
+		t.Fatalf("bounded rate must not truncate an open-ended rate, got %d UPDATE calls", len(tx.execCalls))
+	}
+	if tx.commitCalls != 1 {
+		t.Fatalf("want 1 commit, got %d", tx.commitCalls)
+	}
+}
+
+func TestCreateRate_ConflictMapped(t *testing.T) {
+	tx := &fakeTx{
+		execQueue:     []execResult{{tag: tag(0)}},
+		queryRowQueue: []pgx.Row{fakeRow{scanErr: &pgconn.PgError{Code: "23P01", Message: "conflicting key value"}}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+
+	err := newRepo(pool).CreateRate(context.Background(), sampleRate())
+	if !errors.Is(err, ErrRateConflict) {
+		t.Fatalf("err=%v, want wrapped ErrRateConflict", err)
+	}
+}
+
+func TestCreateRate_BeginError(t *testing.T) {
+	pool := &fakePool{beginQueue: []beginResult{{err: errBoom}}}
+	err := newRepo(pool).CreateRate(context.Background(), sampleRate())
+	if !errors.Is(err, errBoom) {
+		t.Fatalf("err=%v, want wrapped errBoom", err)
+	}
+}
+
+func TestCreateRate_CloseOpenExecError(t *testing.T) {
+	tx := &fakeTx{execQueue: []execResult{{err: errBoom}}}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	err := newRepo(pool).CreateRate(context.Background(), sampleRate())
+	if !errors.Is(err, errBoom) || !strings.Contains(err.Error(), "close-open") {
+		t.Fatalf("err=%v, want wrapped close-open errBoom", err)
+	}
+}
+
+func TestCreateRate_ExactSessionBackfillErrorRollsBack(t *testing.T) {
+	tx := &fakeTx{
+		execQueue: []execResult{
+			{tag: tag(0)},
+			{err: errBoom},
+		},
+		queryRowQueue: []pgx.Row{fakeRow{vals: []any{int64(1), fixedTime}}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	err := newRepo(pool).CreateRate(context.Background(), sampleRate())
+	if !errors.Is(err, errBoom) || !strings.Contains(err.Error(), "apply exact sessions") {
+		t.Fatalf("err=%v, want wrapped exact-session errBoom", err)
+	}
+	if tx.commitCalls != 0 {
+		t.Fatalf("failed backfill must not commit, got %d commits", tx.commitCalls)
+	}
+}
+
+func TestCreateRate_CurrentEstimateBackfillErrorRollsBack(t *testing.T) {
+	tx := &fakeTx{
+		execQueue: []execResult{
+			{tag: tag(0)},
+			{tag: tag(1)},
+			{err: errBoom},
+		},
+		queryRowQueue: []pgx.Row{fakeRow{vals: []any{int64(1), fixedTime}}},
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	err := newRepo(pool).CreateRate(context.Background(), sampleRate())
+	if !errors.Is(err, errBoom) || !strings.Contains(err.Error(), "apply current estimate") {
+		t.Fatalf("err=%v, want wrapped current-estimate errBoom", err)
+	}
+	if tx.commitCalls != 0 {
+		t.Fatalf("failed backfill must not commit, got %d commits", tx.commitCalls)
+	}
+}
+
+func TestCreateRate_CommitError(t *testing.T) {
+	tx := &fakeTx{
+		execQueue:     []execResult{{tag: tag(0)}},
+		queryRowQueue: []pgx.Row{fakeRow{vals: []any{int64(1), fixedTime}}},
+		commitErr:     errBoom,
+	}
+	pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+	err := newRepo(pool).CreateRate(context.Background(), sampleRate())
+	if !errors.Is(err, errBoom) || !strings.Contains(err.Error(), "commit") {
+		t.Fatalf("err=%v, want wrapped commit errBoom", err)
+	}
+}
+
+// ---------------------------------------------------------------------------
+// ListRates
+// ---------------------------------------------------------------------------
+
+func TestListRates(t *testing.T) {
+	r1 := &systemmodel.GeofenceRate{ID: 2, GeofenceID: 1, RatePerWh: 0.00012, Currency: "USD", EffectiveFrom: fixedTime, CreatedAt: fixedTime}
+	r2 := &systemmodel.GeofenceRate{ID: 1, GeofenceID: 1, RatePerWh: 0.0001, Currency: "USD", EffectiveFrom: fixedTime.Add(-24 * time.Hour), CreatedAt: fixedTime}
+
+	t.Run("returns rows newest first as scripted", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows([][]any{geofenceRateRowVals(r1), geofenceRateRowVals(r2)})}}}
+		got, err := newRepo(pool).ListRates(context.Background(), 1)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if len(got) != 2 || got[0].ID != 2 || got[1].ID != 1 {
+			t.Fatalf("unexpected rates: %+v", got)
+		}
+		call := pool.queryCalls[0]
+		if !strings.Contains(call.sql, "WHERE geofence_id=$1") || !strings.Contains(call.sql, "ORDER BY effective_from DESC") {
+			t.Errorf("unexpected SQL: %s", call.sql)
+		}
+		if len(call.args) != 1 || call.args[0] != int64(1) {
+			t.Errorf("args: want [1], got %v", call.args)
+		}
+	})
+
+	t.Run("query error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{err: errBoom}}}
+		_, err := newRepo(pool).ListRates(context.Background(), 1)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+
+	t.Run("scan error wrapped", func(t *testing.T) {
+		rows := newFakeRows([][]any{geofenceRateRowVals(r1)})
+		rows.scanErrAt = 0
+		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
+		_, err := newRepo(pool).ListRates(context.Background(), 1)
+		if err == nil || !strings.Contains(err.Error(), "list scan") {
+			t.Fatalf("err=%v, want list scan error", err)
+		}
+	})
+
+	t.Run("iteration error wrapped", func(t *testing.T) {
+		rows := newFakeRows([][]any{geofenceRateRowVals(r1)})
+		rows.iterErr = errBoom
+		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
+		_, err := newRepo(pool).ListRates(context.Background(), 1)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// GetRateByID
+// ---------------------------------------------------------------------------
+
+func TestGetRateByID(t *testing.T) {
+	want := &systemmodel.GeofenceRate{ID: 5, GeofenceID: 1, RatePerWh: 0.00012, Currency: "USD", EffectiveFrom: fixedTime, CreatedAt: fixedTime}
+
+	t.Run("found", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRateRowVals(want)}}}
+		got, err := newRepo(pool).GetRateByID(context.Background(), 1, 5)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if got == nil || got.ID != 5 {
+			t.Fatalf("got=%+v, want id=5", got)
+		}
+		call := pool.queryRowCalls[0]
+		if !strings.Contains(call.sql, "WHERE id=$1 AND geofence_id=$2") {
+			t.Errorf("unexpected SQL: %s", call.sql)
+		}
+		if call.args[0] != int64(5) || call.args[1] != int64(1) {
+			t.Errorf("args: want [5 1], got %v", call.args)
+		}
+	})
+
+	t.Run("no rows returns nil,nil", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{noRow()}}
+		got, err := newRepo(pool).GetRateByID(context.Background(), 1, 999)
+		if err != nil || got != nil {
+			t.Fatalf("got=%v err=%v, want nil,nil", got, err)
+		}
+	})
+
+	t.Run("scan error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{scanErr: errBoom}}}
+		_, err := newRepo(pool).GetRateByID(context.Background(), 1, 5)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// GetActiveRateAt — exact cutoff-boundary keying (must query by the given
+// instant, never "now()", so a session's own started_at always resolves the
+// rate that was active when IT started).
+// ---------------------------------------------------------------------------
+
+func TestGetActiveRateAt(t *testing.T) {
+	at := time.Date(2026, 8, 27, 0, 0, 0, 0, time.UTC)
+	want := &systemmodel.GeofenceRate{ID: 2, GeofenceID: 1, RatePerWh: 0.00012, Currency: "USD", EffectiveFrom: at, CreatedAt: fixedTime}
+
+	t.Run("queries by the supplied instant, not now()", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRateRowVals(want)}}}
+		got, err := newRepo(pool).GetActiveRateAt(context.Background(), 1, at)
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if got == nil || got.ID != 2 {
+			t.Fatalf("got=%+v, want id=2", got)
+		}
+		call := pool.queryRowCalls[0]
+		if strings.Contains(strings.ToLower(call.sql), "now()") {
+			t.Errorf("GetActiveRateAt must key off the passed instant, not now(): %s", call.sql)
+		}
+		for _, sub := range []string{"effective_from <= $2", "effective_to IS NULL OR effective_to > $2", "ORDER BY effective_from DESC", "LIMIT 1"} {
+			if !strings.Contains(call.sql, sub) {
+				t.Errorf("SQL missing %q:\n%s", sub, call.sql)
+			}
+		}
+		if call.args[0] != int64(1) || call.args[1] != at {
+			t.Errorf("args: want [1 %v], got %v", at, call.args)
+		}
+	})
+
+	t.Run("no matching interval returns nil,nil", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{noRow()}}
+		got, err := newRepo(pool).GetActiveRateAt(context.Background(), 1, at)
+		if err != nil || got != nil {
+			t.Fatalf("got=%v err=%v, want nil,nil", got, err)
+		}
+	})
+
+	t.Run("scan error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryRowQueue: []pgx.Row{fakeRow{scanErr: errBoom}}}
+		_, err := newRepo(pool).GetActiveRateAt(context.Background(), 1, at)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// ListActiveRatesNow
+// ---------------------------------------------------------------------------
+
+func TestListActiveRatesNow(t *testing.T) {
+	r1 := &systemmodel.GeofenceRate{ID: 1, GeofenceID: 1, RatePerWh: 0.0001, Currency: "USD", EffectiveFrom: fixedTime, CreatedAt: fixedTime}
+
+	t.Run("queries the now()-open interval across all geofences", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows([][]any{geofenceRateRowVals(r1)})}}}
+		got, err := newRepo(pool).ListActiveRatesNow(context.Background())
+		if err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if len(got) != 1 || got[0].ID != 1 {
+			t.Fatalf("unexpected rates: %+v", got)
+		}
+		call := pool.queryCalls[0]
+		for _, sub := range []string{"effective_from <= now()", "effective_to IS NULL OR effective_to > now()", "ORDER BY geofence_id"} {
+			if !strings.Contains(call.sql, sub) {
+				t.Errorf("SQL missing %q:\n%s", sub, call.sql)
+			}
+		}
+		if len(call.args) != 0 {
+			t.Errorf("ListActiveRatesNow should take no args, got %v", call.args)
+		}
+	})
+
+	t.Run("query error wrapped", func(t *testing.T) {
+		pool := &fakePool{queryQueue: []queryResult{{err: errBoom}}}
+		_, err := newRepo(pool).ListActiveRatesNow(context.Background())
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+
+	t.Run("scan error wrapped", func(t *testing.T) {
+		rows := newFakeRows([][]any{geofenceRateRowVals(r1)})
+		rows.scanErrAt = 0
+		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
+		_, err := newRepo(pool).ListActiveRatesNow(context.Background())
+		if err == nil || !strings.Contains(err.Error(), "list_active_now scan") {
+			t.Fatalf("err=%v, want list_active_now scan error", err)
+		}
+	})
+
+	t.Run("iteration error wrapped", func(t *testing.T) {
+		rows := newFakeRows([][]any{geofenceRateRowVals(r1)})
+		rows.iterErr = errBoom
+		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
+		_, err := newRepo(pool).ListActiveRatesNow(context.Background())
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
+
+// ---------------------------------------------------------------------------
+// DeleteRate
+// ---------------------------------------------------------------------------
+
+func TestDeleteRate(t *testing.T) {
+	future := time.Now().UTC().Add(24 * time.Hour)
+	futureRateRow := func(id int64) []any {
+		return []any{id, int64(1), 0.0001005, "USD", future, (*time.Time)(nil), fixedTime, true}
+	}
+
+	t.Run("cancels unused future schedule", func(t *testing.T) {
+		tx := &fakeTx{
+			queryRowQueue: []pgx.Row{
+				fakeRow{vals: futureRateRow(5)},
+				fakeRow{vals: []any{false}},
+			},
+			execQueue: []execResult{{tag: tag(1)}, {tag: tag(1)}},
+		}
+		pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+		if err := newRepo(pool).DeleteRate(context.Background(), 1, 5); err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		call := tx.execCalls[0]
+		if !strings.Contains(call.sql, "DELETE FROM geofence_rates") {
+			t.Errorf("unexpected SQL: %s", call.sql)
+		}
+		if call.args[0] != int64(5) || call.args[1] != int64(1) {
+			t.Errorf("args: want [5 1], got %v", call.args)
+		}
+		if tx.commitCalls != 1 {
+			t.Fatalf("want 1 commit, got %d", tx.commitCalls)
+		}
+	})
+
+	t.Run("missing rate returns ErrRateNotFound", func(t *testing.T) {
+		tx := &fakeTx{queryRowQueue: []pgx.Row{noRow()}}
+		pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+		err := newRepo(pool).DeleteRate(context.Background(), 1, 999)
+		if !errors.Is(err, ErrRateNotFound) {
+			t.Fatalf("err=%v, want ErrRateNotFound", err)
+		}
+	})
+
+	t.Run("effective rate is immutable", func(t *testing.T) {
+		effective := time.Now().UTC().Add(-time.Hour)
+		row := futureRateRow(5)
+		row[4] = effective
+		row[7] = false
+		tx := &fakeTx{queryRowQueue: []pgx.Row{fakeRow{vals: row}}}
+		pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+		err := newRepo(pool).DeleteRate(context.Background(), 1, 5)
+		if !errors.Is(err, ErrRateImmutable) {
+			t.Fatalf("err=%v, want ErrRateImmutable", err)
+		}
+	})
+
+	t.Run("referenced future rate cannot be cancelled", func(t *testing.T) {
+		tx := &fakeTx{queryRowQueue: []pgx.Row{
+			fakeRow{vals: futureRateRow(5)},
+			fakeRow{vals: []any{true}},
+		}}
+		pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+		err := newRepo(pool).DeleteRate(context.Background(), 1, 5)
+		if !errors.Is(err, ErrRateInUse) {
+			t.Fatalf("err=%v, want ErrRateInUse", err)
+		}
+	})
+
+	t.Run("restores adjacent predecessor before deleting schedule", func(t *testing.T) {
+		tx := &fakeTx{
+			queryRowQueue: []pgx.Row{
+				fakeRow{vals: futureRateRow(5)},
+				fakeRow{vals: []any{false}},
+			},
+			execQueue: []execResult{{tag: tag(1)}, {tag: tag(1)}},
+		}
+		pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+		if err := newRepo(pool).DeleteRate(context.Background(), 1, 5); err != nil {
+			t.Fatalf("unexpected err: %v", err)
+		}
+		if len(tx.execCalls) != 2 || !strings.Contains(tx.execCalls[1].sql, "UPDATE geofence_rates") {
+			t.Fatalf("expected DELETE then predecessor UPDATE, got %+v", tx.execCalls)
+		}
+		if tx.execCalls[1].args[2] != (*time.Time)(nil) {
+			t.Errorf("open schedule cancellation must restore predecessor to open-ended")
+		}
+	})
+
+	t.Run("delete error is wrapped", func(t *testing.T) {
+		tx := &fakeTx{
+			queryRowQueue: []pgx.Row{fakeRow{vals: futureRateRow(5)}, fakeRow{vals: []any{false}}},
+			execQueue:     []execResult{{err: errBoom}},
+		}
+		pool := &fakePool{beginQueue: []beginResult{{tx: tx}}}
+		err := newRepo(pool).DeleteRate(context.Background(), 1, 5)
+		if !errors.Is(err, errBoom) {
+			t.Fatalf("err=%v, want wrapped errBoom", err)
+		}
+	})
+}
diff --git a/internal/database/geofence/repo_test.go b/internal/database/geofence/repo_test.go
index 70b76f326c..7eb0934c96 100644
--- a/internal/database/geofence/repo_test.go
+++ b/internal/database/geofence/repo_test.go
@@ -126,8 +126,8 @@ func TestCreate(t *testing.T) {
 					t.Errorf("SQL missing %q:\n%s", sub, got.sql)
 				}
 			}
-			if len(got.args) != 7 {
-				t.Fatalf("want 7 args, got %d (%v)", len(got.args), got.args)
+			if len(got.args) != 9 {
+				t.Fatalf("want 9 args, got %d (%v)", len(got.args), got.args)
 			}
 			if got.args[0] != tc.input.Name {
 				t.Errorf("args[0] name: want %q got %v", tc.input.Name, got.args[0])
@@ -161,7 +161,7 @@ func TestGetAll(t *testing.T) {
 		}
 		assertGeofenceEqual(t, got[0], g1)
 		assertGeofenceEqual(t, got[1], g2)
-		if sql := pool.queryCalls[0].sql; !strings.Contains(sql, "FROM geofences") || !strings.Contains(sql, "ORDER BY name LIMIT 500") {
+		if sql := pool.queryCalls[0].sql; !strings.Contains(sql, "FROM geofences") || !strings.Contains(sql, "ORDER BY archived_at NULLS FIRST, name LIMIT 500") {
 			t.Errorf("unexpected SQL: %s", sql)
 		}
 		if len(pool.queryCalls[0].args) != 0 {
@@ -272,13 +272,13 @@ func TestUpdate(t *testing.T) {
 			t.Fatalf("want 1 Exec, got %d", len(pool.execCalls))
 		}
 		call := pool.execCalls[0]
-		for _, sub := range []string{"UPDATE geofences", "WHERE id=$1", "updated_at=$8"} {
+		for _, sub := range []string{"UPDATE geofences", "WHERE id=$1", "updated_at=$9"} {
 			if !strings.Contains(call.sql, sub) {
 				t.Errorf("SQL missing %q:\n%s", sub, call.sql)
 			}
 		}
-		if len(call.args) != 8 {
-			t.Fatalf("want 8 args, got %d (%v)", len(call.args), call.args)
+		if len(call.args) != 9 {
+			t.Fatalf("want 9 args, got %d (%v)", len(call.args), call.args)
 		}
 		if call.args[0] != int64(5) {
 			t.Errorf("args[0] id: want 5 got %v", call.args[0])
@@ -360,10 +360,37 @@ func TestFindByCoordinates_FiltersByRadiusNotEnabled(t *testing.T) {
 	if got[1].Enabled {
 		t.Fatalf("expected the second hit to be the DISABLED fence")
 	}
-	// FindByCoordinates loads every row: no WHERE clause, no bound args.
+	// FindByCoordinates loads every active row: a WHERE archived_at IS NULL
+	// clause is expected (see method doc), but still no bound args since the
+	// filter is a static NULL check, not a parameter.
 	call := pool.queryCalls[0]
-	if strings.Contains(call.sql, "WHERE") || len(call.args) != 0 {
-		t.Errorf("expected argument-free full scan, got sql=%q args=%v", call.sql, call.args)
+	if !strings.Contains(call.sql, "WHERE archived_at IS NULL") || len(call.args) != 0 {
+		t.Errorf("expected archived-filtered argument-free full scan, got sql=%q args=%v", call.sql, call.args)
+	}
+}
+
+func TestFindByCoordinates_PrefersManualPlaceWhenGeofencesOverlap(t *testing.T) {
+	discovered := &systemmodel.Geofence{
+		ID: 2, Name: "Auto", PolygonWKT: squareWKT(40, -75),
+		Origin:    systemmodel.GeofenceOriginChargingDiscovery,
+		CreatedAt: fixedTime, UpdatedAt: fixedTime,
+	}
+	manual := &systemmodel.Geofence{
+		ID: 9, Name: "Home", PolygonWKT: squareWKT(40, -75),
+		Origin:    systemmodel.GeofenceOriginManual,
+		CreatedAt: fixedTime, UpdatedAt: fixedTime,
+	}
+	pool := &fakePool{queryQueue: []queryResult{{rows: newFakeRows([][]any{
+		geofenceRowVals(discovered),
+		geofenceRowVals(manual),
+	})}}}
+
+	got, err := newRepo(pool).FindByCoordinates(context.Background(), 40, -75)
+	if err != nil {
+		t.Fatalf("unexpected err: %v", err)
+	}
+	if len(got) != 2 || got[0].ID != manual.ID {
+		t.Fatalf("manual place must win overlap matching, got %+v", got)
 	}
 }
 
diff --git a/internal/metrics/metrics_geofence_pricing.go b/internal/metrics/metrics_geofence_pricing.go
new file mode 100644
index 0000000000..f404275a67
--- /dev/null
+++ b/internal/metrics/metrics_geofence_pricing.go
@@ -0,0 +1,61 @@
+// Package metrics — charging-place (geofence) discovery + rate-based
+// pricing counters for the geofence-based charging-place pricing feature
+// (migration 000228_geofence_charging_place_pricing).
+package metrics
+
+import (
+	"github.com/prometheus/client_golang/prometheus"
+	"github.com/prometheus/client_golang/prometheus/promauto"
+)
+
+// ── Charging-place discovery/pricing ──────────────────────────────────────
+//
+// These counters are incremented from the async post-completion tracker and
+// the one-shot startup history backfill. They make discovery/pricing trouble
+// visible even though neither path may fail charge completion or MQTT ingest.
+
+var (
+	// GeofenceDiscoveryTotal counts charging-session geofence resolution
+	// attempts by outcome:
+	//   - matched: an existing (manual or previously-discovered) geofence
+	//     already contained the session's coordinates.
+	//   - created: no geofence matched, so a new provisional
+	//     charging-place geofence was created (origin=charging_discovery).
+	//   - error: coordinates were invalid/missing, or the match-or-create
+	//     database operation failed; the session is left unattributed.
+	GeofenceDiscoveryTotal = promauto.NewCounterVec(prometheus.CounterOpts{
+		Namespace: "teslasync",
+		Name:      "geofence_discovery_total",
+		Help:      "Charging-place geofence discovery attempts from confirmed charging sessions, by outcome",
+	}, []string{"result"})
+
+	// GeofenceRateApplyTotal counts charging-session rate-based cost
+	// application attempts by outcome:
+	//   - applied: a configured rate was found and the session was priced
+	//     (or re-priced) via PostgreSQL NUMERIC arithmetic.
+	//   - no_rate: the geofence resolved but has no rate configured for
+	//     the session's started_at yet.
+	//   - skipped: a rate was found but the session was not updated
+	//     because it already carries a manual/Tesla-actual cost, or has
+	//     no energy-added value yet to price against.
+	//   - error: the rate lookup or apply database operation failed.
+	GeofenceRateApplyTotal = promauto.NewCounterVec(prometheus.CounterOpts{
+		Namespace: "teslasync",
+		Name:      "geofence_rate_apply_total",
+		Help:      "Charging session geofence-tariff pricing attempts, by outcome",
+	}, []string{"result"})
+
+	// GeofenceHistoricalBackfillTotal counts completed legacy charging
+	// sessions processed by the startup Charging Places backfill:
+	//   - historical_rate: priced with the rate active at session start.
+	//   - current_estimate: no historical rate existed, so today's rate was
+	//     applied with default_estimate provenance.
+	//   - attributed_only: place attached but no usable rate was configured.
+	//   - skipped: place attached, monetary fields protected or incomplete.
+	//   - error: discovery, attribution, lookup, or pricing failed.
+	GeofenceHistoricalBackfillTotal = promauto.NewCounterVec(prometheus.CounterOpts{
+		Namespace: "teslasync",
+		Name:      "geofence_historical_backfill_total",
+		Help:      "Legacy charging sessions processed by Charging Places startup backfill, by outcome",
+	}, []string{"result"})
+)
diff --git a/internal/models/charging/charging.go b/internal/models/charging/charging.go
index e98053349a..5af13e8204 100644
--- a/internal/models/charging/charging.go
+++ b/internal/models/charging/charging.go
@@ -27,6 +27,25 @@ type ChargingSession struct {
 	CostCurrency       *string    `db:"cost_currency" json:"cost_currency,omitempty"`
 	ChargerType        *string    `db:"charger_type" json:"charger_type,omitempty"`
 	CableType          *string    `db:"cable_type" json:"cable_type,omitempty"`
+
+	// Charging-place pricing provenance (migration
+	// 000228_geofence_charging_place_pricing). No DB-level FK on
+	// GeofenceID/RateID — these are written from the async (post-completion)
+	// leg of the telemetry charge tracker and must never be blocked by a
+	// synchronous FK check, mirroring the existing no-FK precedent between
+	// charging_telemetry and charging_sessions.id.
+	//
+	// GeofenceID is the charging place this session was matched (or
+	// auto-discovered) to. RateID is the EXACT geofence_rates version whose
+	// [effective_from, effective_to) interval contained StartedAt at the
+	// moment cost was computed — pinning it (rather than re-deriving it from
+	// StartedAt on every read) is what keeps a session's price frozen forever
+	// even after the place's rate is corrected or superseded. CostSource
+	// records provenance/precedence: "manual" > "tesla_actual" >
+	// "geofence_tariff" > "default_estimate" > "unknown".
+	GeofenceID *int64  `db:"geofence_id" json:"geofence_id,omitempty"`
+	RateID     *int64  `db:"rate_id" json:"rate_id,omitempty"`
+	CostSource *string `db:"cost_source" json:"cost_source,omitempty"`
 }
 
 // IsActive reports whether the charging session is still in progress
diff --git a/internal/models/drive/drive.go b/internal/models/drive/drive.go
index d84940d385..8938b2b12b 100644
--- a/internal/models/drive/drive.go
+++ b/internal/models/drive/drive.go
@@ -42,6 +42,18 @@ type Drive struct {
 	EndLat       *float64 `db:"end_lat"       json:"end_lat,omitempty"`
 	EndLon       *float64 `db:"end_lon"       json:"end_lon,omitempty"`
 
+	// StartGeofenceID / EndGeofenceID identify the charging-place geofence
+	// (if any) matched at each drive endpoint (migration
+	// 000228_geofence_charging_place_pricing). Match-only — a drive never
+	// auto-creates a geofence. No DB-level FK, for the same hot-path-adjacent
+	// reason as StartAddress/EndAddress resolution: written from
+	// resolveAndUpdateAddress, which must not be blocked by a synchronous FK
+	// check. Renaming the geofence later improves historical display because
+	// readers resolve the CURRENT geofence name at read time, falling back to
+	// the stored StartAddress/EndAddress text when no geofence matched.
+	StartGeofenceID *int64 `db:"start_geofence_id" json:"start_geofence_id,omitempty"`
+	EndGeofenceID   *int64 `db:"end_geofence_id"   json:"end_geofence_id,omitempty"`
+
 	StartBatteryPct *int16 `db:"start_battery_pct" json:"start_battery_pct,omitempty"`
 	EndBatteryPct   *int16 `db:"end_battery_pct"   json:"end_battery_pct,omitempty"`
 
diff --git a/internal/models/system/geofence_geometry.go b/internal/models/system/geofence_geometry.go
new file mode 100644
index 0000000000..3b3e6cef58
--- /dev/null
+++ b/internal/models/system/geofence_geometry.go
@@ -0,0 +1,37 @@
+package system
+
+import (
+	"fmt"
+	"math"
+	"strings"
+)
+
+const geofenceCircleSegments = 32
+
+// CircleToPolygonWKT approximates a geodetic circle with a regular polygon
+// and emits WKT longitude/latitude coordinates, closing the ring.
+func CircleToPolygonWKT(latDeg, lonDeg, radiusMeters float64) string {
+	const metersPerDegLat = 111_320.0
+	latRad := latDeg * math.Pi / 180.0
+	metersPerDegLon := metersPerDegLat * math.Cos(latRad)
+	if metersPerDegLon < 1 {
+		metersPerDegLon = 1
+	}
+	dLat := radiusMeters / metersPerDegLat
+	dLon := radiusMeters / metersPerDegLon
+
+	var b strings.Builder
+	b.WriteString("POLYGON((")
+	for i := 0; i < geofenceCircleSegments; i++ {
+		theta := 2 * math.Pi * float64(i) / float64(geofenceCircleSegments)
+		lon := lonDeg + dLon*math.Sin(theta)
+		lat := latDeg + dLat*math.Cos(theta)
+		if i > 0 {
+			b.WriteByte(',')
+		}
+		fmt.Fprintf(&b, "%.7f %.7f", lon, lat)
+	}
+	fmt.Fprintf(&b, ",%.7f %.7f", lonDeg, latDeg+dLat)
+	b.WriteString("))")
+	return b.String()
+}
diff --git a/internal/models/system/geofence_rate.go b/internal/models/system/geofence_rate.go
new file mode 100644
index 0000000000..7a3d79bbe4
--- /dev/null
+++ b/internal/models/system/geofence_rate.go
@@ -0,0 +1,146 @@
+package system
+
+import (
+	"time"
+)
+
+// =============================================================================
+// geofence_rate.go — Go models for the charging-place pricing feature
+// (migration 000228_geofence_charging_place_pricing).
+//
+// GeofenceRate is the single normalized, effective-dated source of truth for
+// a geofence's electricity rate over time — there is no separate mutable
+// "current rate" column anywhere. The "current" rate for a geofence is
+// simply whichever row's [EffectiveFrom, EffectiveTo) interval contains the
+// query instant (typically "now", or a charging session's StartedAt for
+// historical pricing).
+//
+// RatePerWh is SI-canonical: currency units per **watt-hour**, never
+// per-kWh. The UI converts to currency/kWh only at the render/request
+// boundary (ADR-001 typed-by-default, ADR-005 frontend SI cutover).
+// =============================================================================
+
+// GeofenceRate mirrors one row of the `geofence_rates` table.
+type GeofenceRate struct {
+	ID            int64      `db:"id" json:"id"`
+	GeofenceID    int64      `db:"geofence_id" json:"geofence_id"`
+	RatePerWh     float64    `db:"rate_per_wh" json:"rate_per_wh"`
+	Currency      string     `db:"currency" json:"currency"`
+	EffectiveFrom time.Time  `db:"effective_from" json:"effective_from"`
+	EffectiveTo   *time.Time `db:"effective_to" json:"effective_to,omitempty"`
+	CreatedAt     time.Time  `db:"created_at" json:"created_at"`
+}
+
+// IsActiveAt reports whether this rate version was in force at instant t,
+// using the canonical half-open [EffectiveFrom, EffectiveTo) interval.
+func (r *GeofenceRate) IsActiveAt(t time.Time) bool {
+	if r == nil {
+		return false
+	}
+	if t.Before(r.EffectiveFrom) {
+		return false
+	}
+	return r.EffectiveTo == nil || t.Before(*r.EffectiveTo)
+}
+
+// IsOpen reports whether this rate version has no end date yet (the
+// currently-in-force version, absent a future-dated successor).
+func (r *GeofenceRate) IsOpen() bool { return r != nil && r.EffectiveTo == nil }
+
+// Charging-session cost provenance. Mirrors the values allowed by the
+// charging_sessions.cost_source CHECK constraint (migration 000228).
+//
+// Precedence (highest to lowest confidence): manual actual costs entered by
+// a user, then Tesla-reported actual costs, then geofence-tariff-derived
+// costs, then a legacy/global default estimate, then unknown (unpriced).
+const (
+	CostSourceManual          = "manual"
+	CostSourceTeslaActual     = "tesla_actual"
+	CostSourceGeofenceTariff  = "geofence_tariff"
+	CostSourceDefaultEstimate = "default_estimate"
+	CostSourceUnknown         = "unknown"
+)
+
+// GeofenceRateApplyScope bounds a preview/apply operation to a geofence +
+// rate version, optionally narrowed further by an explicit time window. The
+// zero value (nil bounds) means "the rate's own effective interval".
+//
+// This is an internal argument bag passed between the handler and repo
+// layers (never persisted or unmarshaled from a request body directly), but
+// it still carries json tags per ADR-006's blanket models-package rule and
+// so it serializes sensibly if ever logged or echoed back.
+type GeofenceRateApplyScope struct {
+	GeofenceID int64      `json:"geofence_id"`
+	RateID     int64      `json:"rate_id"`
+	From       *time.Time `json:"from,omitempty"`
+	To         *time.Time `json:"to,omitempty"`
+}
+
+// GeofenceRateImpactPreview is the read-only "what would applying this rate
+// do" response — no rows are written. EligibleSessions is the subset of
+// MatchedSessions that repricing is actually allowed to touch (unpriced or
+// previously geofence-derived); sessions already carrying a manual,
+// Tesla-actual, or unknown-provenance cost are matched (in-scope by place +
+// time) but never eligible, and are surfaced separately so the UI can
+// explain why the preview total is smaller than the raw session count.
+type GeofenceRateImpactPreview struct {
+	GeofenceID           int64   `json:"geofence_id"`
+	RateID               int64   `json:"rate_id"`
+	Currency             string  `json:"currency"`
+	MatchedSessions      int64   `json:"matched_sessions"`
+	EligibleSessions     int64   `json:"eligible_sessions"`
+	ProtectedSessions    int64   `json:"protected_sessions"`
+	TotalEnergyWh        float64 `json:"total_energy_wh"`
+	EstimatedCostDecimal float64 `json:"estimated_cost_decimal"`
+}
+
+// GeofenceRateApplyResult is the outcome of an explicit apply/backfill
+// action — the write-performing counterpart of GeofenceRateImpactPreview.
+type GeofenceRateApplyResult struct {
+	GeofenceID       int64   `json:"geofence_id"`
+	RateID           int64   `json:"rate_id"`
+	Currency         string  `json:"currency"`
+	MatchedSessions  int64   `json:"matched_sessions"`
+	PricedSessions   int64   `json:"priced_sessions"`
+	SkippedSessions  int64   `json:"skipped_sessions"`
+	TotalEnergyWh    float64 `json:"total_energy_wh"`
+	TotalCostDecimal float64 `json:"total_cost_decimal"`
+}
+
+// ChargingPlaceBackfillCandidate is the minimal completed-session projection
+// needed by the startup Charging Places backfill. Only sessions with valid
+// coordinates and no geofence attribution are returned by the repository.
+type ChargingPlaceBackfillCandidate struct {
+	SessionID  int64     `db:"id" json:"session_id"`
+	VehicleID  int64     `db:"vehicle_id" json:"vehicle_id"`
+	StartedAt  time.Time `db:"started_at" json:"started_at"`
+	StartLat   float64   `db:"start_lat" json:"start_lat"`
+	StartLng   float64   `db:"start_lng" json:"start_lng"`
+	StartPlace *string   `db:"start_place" json:"start_place,omitempty"`
+}
+
+// GeofenceChargingSummary aggregates a geofence's priced charging activity
+// for one currency. Different currencies are NEVER summed into one total —
+// callers always receive a slice grouped by currency, even when a place has
+// only ever seen one.
+type GeofenceChargingSummary struct {
+	GeofenceID       int64   `json:"geofence_id"`
+	Currency         string  `json:"currency"`
+	SessionCount     int64   `json:"session_count"`
+	TotalEnergyWh    float64 `json:"total_energy_wh"`
+	TotalCostDecimal float64 `json:"total_cost_decimal"`
+}
+
+// GeofenceChargingActivity is one line item in a geofence's charging session
+// activity feed (used by the rate-history / affected-sessions UI panels).
+type GeofenceChargingActivity struct {
+	SessionID    int64      `json:"session_id"`
+	VehicleID    int64      `json:"vehicle_id"`
+	StartedAt    time.Time  `json:"started_at"`
+	EndedAt      *time.Time `json:"ended_at,omitempty"`
+	EnergyWh     *float64   `json:"energy_wh,omitempty"`
+	CostDecimal  *float64   `json:"cost_decimal,omitempty"`
+	CostCurrency *string    `json:"cost_currency,omitempty"`
+	CostSource   *string    `json:"cost_source,omitempty"`
+	RateID       *int64     `json:"rate_id,omitempty"`
+}
diff --git a/internal/models/system/system.go b/internal/models/system/system.go
index b92afefeb4..8a17b0a090 100644
--- a/internal/models/system/system.go
+++ b/internal/models/system/system.go
@@ -84,6 +84,18 @@ const (
 	GeofenceCategoryCustom     GeofenceCategory = "custom"
 )
 
+// GeofenceOrigin enumerates how a geofence came to exist.
+type GeofenceOrigin string
+
+const (
+	// GeofenceOriginManual is the default: a user created the place directly
+	// (Add Geofence modal, import, API).
+	GeofenceOriginManual GeofenceOrigin = "manual"
+	// GeofenceOriginChargingDiscovery marks a place that was auto-created from
+	// a confirmed charging session's coordinates (see AUTO-DISCOVERY rules).
+	GeofenceOriginChargingDiscovery GeofenceOrigin = "charging_discovery"
+)
+
 // Geofence mirrors the post-migration `geofences` schema. PolygonWKT is a
 // Well-Known Text POLYGON((lon lat, ...)) parsed at runtime — not server-side.
 //
@@ -92,6 +104,18 @@ const (
 // `enabled=false`; alert consumers (FSM transitions, notification dispatcher)
 // MUST filter on Enabled themselves — FindByCoordinates intentionally returns
 // disabled fences too because the reverse-geocoder uses it for friendly naming.
+//
+// Origin / NeedsReview / ArchivedAt were added by migration
+// 000228_geofence_charging_place_pricing (charging-place pricing feature):
+//   - Origin distinguishes a user-created place from one auto-discovered off
+//     a confirmed charging session (see internal/database/geofence's
+//     discovery repo). Existing manual geofences default to "manual".
+//   - NeedsReview flags a provisional/auto-discovered place awaiting a
+//     human to confirm name/type/location — surfaced as the "Needs Setup"
+//     queue in the Charging Places UI.
+//   - ArchivedAt marks a place as retired without hard-deleting it: places
+//     with sessions/rates keep their history resolvable, but are excluded
+//     from default active listings (GetAll).
 type Geofence struct {
 	ID           int64             `db:"id" json:"id"`
 	Name         string            `db:"name" json:"name"`
@@ -100,10 +124,18 @@ type Geofence struct {
 	Enabled      bool              `db:"enabled" json:"enabled"`
 	AlertOnEntry bool              `db:"alert_on_entry" json:"alert_on_entry"`
 	AlertOnExit  bool              `db:"alert_on_exit" json:"alert_on_exit"`
+	Origin       GeofenceOrigin    `db:"origin" json:"origin"`
+	NeedsReview  bool              `db:"needs_review" json:"needs_review"`
+	ArchivedAt   *time.Time        `db:"archived_at" json:"archived_at,omitempty"`
 	CreatedAt    time.Time         `db:"created_at" json:"created_at"`
 	UpdatedAt    time.Time         `db:"updated_at" json:"updated_at"`
 }
 
+// IsArchived reports whether this geofence has been archived (soft-deleted).
+// Archived places are excluded from default active listings but remain
+// resolvable by ID for historical display.
+func (g *Geofence) IsArchived() bool { return g != nil && g.ArchivedAt != nil }
+
 // Centroid computes the arithmetic mean of the polygon vertices.
 // Returns (0, 0) for a nil receiver or if PolygonWKT is empty or unparseable.
 // WKT convention: coordinates are (longitude latitude).
diff --git a/internal/tracing/span.go b/internal/tracing/span.go
index 749faf421d..4d7742fa3c 100644
--- a/internal/tracing/span.go
+++ b/internal/tracing/span.go
@@ -67,3 +67,5 @@ func DriveID(id int64) attribute.KeyValue      { return attribute.Int64("drive.i
 func ChargeID(id int64) attribute.KeyValue     { return attribute.Int64("charge.id", id) }
 func TableName(t string) attribute.KeyValue    { return attribute.String("db.sql.table", t) }
 func RowCount(n int) attribute.KeyValue        { return attribute.Int("db.row_count", n) }
+func GeofenceID(id int64) attribute.KeyValue   { return attribute.Int64("geofence.id", id) }
+func RateID(id int64) attribute.KeyValue       { return attribute.Int64("geofence.rate_id", id) }
diff --git a/migrations/000228_geofence_charging_place_pricing.down.sql b/migrations/000228_geofence_charging_place_pricing.down.sql
new file mode 100644
index 0000000000..4c7c33dc7d
--- /dev/null
+++ b/migrations/000228_geofence_charging_place_pricing.down.sql
@@ -0,0 +1,38 @@
+-- Down migration for 000228_geofence_charging_place_pricing.
+--
+-- Reversing the legacy geofence_electricity_rates_legacy_000004 reconciliation
+-- is intentionally NOT attempted: that data now lives in geofence_rates
+-- (SI canonical) and dropping this migration's schema does not resurrect the
+-- pre-canonical shape or byte-identical legacy rows. This mirrors the
+-- project-wide convention that forward-only SI migrations are not
+-- round-trip lossless (see migrations/000184_charging_si, 000185_drives_si).
+--
+-- btree_gist is NOT dropped here — it was installed by, and is owned by,
+-- migrations/000221_small_fleet_operations.
+
+DROP INDEX IF EXISTS drives_end_geofence_idx;
+DROP INDEX IF EXISTS drives_start_geofence_idx;
+ALTER TABLE drives
+    DROP COLUMN IF EXISTS end_geofence_id,
+    DROP COLUMN IF EXISTS start_geofence_id;
+
+DROP INDEX IF EXISTS charging_sessions_cost_source_idx;
+DROP INDEX IF EXISTS charging_sessions_rate_idx;
+DROP INDEX IF EXISTS charging_sessions_geofence_idx;
+ALTER TABLE charging_sessions
+    DROP CONSTRAINT IF EXISTS charging_sessions_cost_source_valid;
+ALTER TABLE charging_sessions
+    DROP COLUMN IF EXISTS cost_source,
+    DROP COLUMN IF EXISTS rate_id,
+    DROP COLUMN IF EXISTS geofence_id;
+
+DROP TABLE IF EXISTS geofence_rates;
+
+DROP INDEX IF EXISTS geofences_archived_idx;
+DROP INDEX IF EXISTS geofences_needs_review_idx;
+ALTER TABLE geofences
+    DROP CONSTRAINT IF EXISTS geofences_origin_valid;
+ALTER TABLE geofences
+    DROP COLUMN IF EXISTS archived_at,
+    DROP COLUMN IF EXISTS needs_review,
+    DROP COLUMN IF EXISTS origin;
diff --git a/migrations/000228_geofence_charging_place_pricing.up.sql b/migrations/000228_geofence_charging_place_pricing.up.sql
new file mode 100644
index 0000000000..a3d00429b5
--- /dev/null
+++ b/migrations/000228_geofence_charging_place_pricing.up.sql
@@ -0,0 +1,216 @@
+-- Geofence-based charging-place pricing.
+--
+-- Geofences become first-class "charging places": they gain discovery
+-- provenance (origin/needs_review/archived_at) and an effective-dated,
+-- immutable-once-active electricity-rate history (geofence_rates) so a session
+-- priced under an old rate keeps that price forever after the rate changes.
+--
+-- SI discipline: the canonical rate column is `rate_per_wh` (NOT
+-- `rate_per_kwh` / `cost_per_kwh`). The UI converts to currency/kWh only at
+-- the render/request boundary (ADR-001/ADR-005).
+--
+-- btree_gist was installed by migration 000221_small_fleet_operations; this
+-- migration reuses it for the no-overlap exclusion constraint below and does
+-- NOT re-drop it in the down migration (owned by 000221).
+CREATE EXTENSION IF NOT EXISTS btree_gist;
+
+-- ---------------------------------------------------------------------------
+-- 1. Reconcile the abandoned migrations/000004_geofence_electricity_cost
+--    precursor. Every database migrates sequentially from 000001, so 000004
+--    always runs and creates the legacy `geofence_electricity_rates` table
+--    (no `currency` column, `cost_per_kwh` instead of `rate_per_wh`).
+--    migrations/000142_baseline_typed then DROPped+recreated `geofences`
+--    (CASCADE), which removes the `cost_per_kwh` column and the FK from
+--    `geofence_electricity_rates` onto `geofences`, but does NOT drop
+--    `geofence_electricity_rates` itself — CASCADE on the *referenced* table
+--    only drops constraints that depend on it, not the dependent table, so
+--    the orphaned (FK-less) legacy table survives into every database that
+--    has migrated through 000142+. Both this expected path and a
+--    hypothetical already-reconciled database (this migration re-run, or a
+--    hand-rolled schema with neither artifact) are handled so the migration
+--    is idempotent and safe regardless of prior state.
+-- ---------------------------------------------------------------------------
+DO $$
+DECLARE
+    legacy_rate_table_exists boolean;
+    legacy_rate_has_currency boolean;
+BEGIN
+    SELECT EXISTS (
+        SELECT 1 FROM information_schema.tables
+        WHERE table_schema = current_schema()
+          AND table_name = 'geofence_electricity_rates'
+    ) INTO legacy_rate_table_exists;
+
+    IF legacy_rate_table_exists THEN
+        SELECT EXISTS (
+            SELECT 1 FROM information_schema.columns
+            WHERE table_schema = current_schema()
+              AND table_name = 'geofence_electricity_rates'
+              AND column_name = 'currency'
+        ) INTO legacy_rate_has_currency;
+
+        -- Only the pre-canonical shape (no `currency` column, `cost_per_kwh`
+        -- instead of `rate_per_wh`) needs a data migration. If a later run of
+        -- this same migration already renamed it to the canonical shape,
+        -- legacy_rate_has_currency is true and nothing further happens here.
+        IF NOT legacy_rate_has_currency THEN
+            ALTER TABLE geofence_electricity_rates
+                RENAME TO geofence_electricity_rates_legacy_000004;
+        END IF;
+    END IF;
+
+    -- `geofences.cost_per_kwh` cannot survive migration 000142's
+    -- DROP+recreate on any sequentially-migrated database, but a defensive
+    -- drop documents the intent and protects a hand-rolled/partial schema.
+    IF EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_schema = current_schema()
+          AND table_name = 'geofences'
+          AND column_name = 'cost_per_kwh'
+    ) THEN
+        ALTER TABLE geofences DROP COLUMN cost_per_kwh;
+    END IF;
+END $$;
+
+-- ---------------------------------------------------------------------------
+-- 2. Geofence discovery/lifecycle metadata.
+-- ---------------------------------------------------------------------------
+ALTER TABLE geofences
+    ADD COLUMN IF NOT EXISTS origin text NOT NULL DEFAULT 'manual',
+    ADD COLUMN IF NOT EXISTS needs_review boolean NOT NULL DEFAULT false,
+    ADD COLUMN IF NOT EXISTS archived_at timestamptz;
+
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM pg_constraint WHERE conname = 'geofences_origin_valid'
+    ) THEN
+        ALTER TABLE geofences
+            ADD CONSTRAINT geofences_origin_valid
+            CHECK (origin IN ('manual', 'charging_discovery'));
+    END IF;
+END $$;
+
+CREATE INDEX IF NOT EXISTS geofences_needs_review_idx
+    ON geofences (id) WHERE needs_review AND archived_at IS NULL;
+CREATE INDEX IF NOT EXISTS geofences_archived_idx
+    ON geofences (archived_at) WHERE archived_at IS NOT NULL;
+
+-- ---------------------------------------------------------------------------
+-- 3. Canonical effective-dated electricity rate history.
+--
+--    Half-open [effective_from, effective_to) intervals with a GIST
+--    exclusion constraint preventing overlapping versions per geofence —
+--    same pattern as fleet_charging_policies (migration 000221). The
+--    current rate for a geofence is simply the row where effective_to IS
+--    NULL (or the row whose interval contains "now"); there is deliberately
+--    no separate mutable "current rate" column to keep one source of truth.
+-- ---------------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS geofence_rates (
+    id              bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
+    geofence_id     bigint      NOT NULL REFERENCES geofences(id) ON DELETE CASCADE,
+    -- NUMERIC(20,10): a currency/kWh rate as small as 0.0001 (=1e-7/Wh) and
+    -- as large as a hyperinflated-currency rate both fit comfortably, and
+    -- Postgres NUMERIC arithmetic (not Go float64) is used for cost math.
+    rate_per_wh     NUMERIC(20,10) NOT NULL CHECK (rate_per_wh >= 0 AND rate_per_wh < 1000000),
+    currency        char(3)     NOT NULL CHECK (currency ~ '^[A-Z]{3}$'),
+    effective_from  timestamptz NOT NULL,
+    effective_to    timestamptz,
+    created_at      timestamptz NOT NULL DEFAULT now(),
+    CONSTRAINT geofence_rates_period_valid
+        CHECK (effective_to IS NULL OR effective_to > effective_from),
+    CONSTRAINT geofence_rates_no_overlap EXCLUDE USING gist (
+        geofence_id WITH =,
+        tstzrange(effective_from, COALESCE(effective_to, 'infinity'::timestamptz), '[)') WITH &&
+    )
+);
+
+CREATE INDEX IF NOT EXISTS geofence_rates_geofence_effective_idx
+    ON geofence_rates (geofence_id, effective_from DESC);
+-- Fast lookup of the unbounded interval. It may be future-scheduled, so
+-- callers still test effective_from <= their query instant.
+CREATE INDEX IF NOT EXISTS geofence_rates_open_idx
+    ON geofence_rates (geofence_id) WHERE effective_to IS NULL;
+
+-- Import any usable rows from the legacy pre-canonical shape now that the
+-- canonical table exists. cost_per_kwh / 1000 = rate_per_wh (Wh = kWh/1000).
+-- The legacy schema had no currency column, so imported rows default to USD
+-- — the historical global default before this feature existed. Orphaned
+-- rows (geofence_id no longer present, because 000142's CASCADE dropped the
+-- old FK without deleting dependent rows) are skipped via the join.
+DO $$
+BEGIN
+    IF EXISTS (
+        SELECT 1 FROM information_schema.tables
+        WHERE table_schema = current_schema()
+          AND table_name = 'geofence_electricity_rates_legacy_000004'
+    ) THEN
+        INSERT INTO geofence_rates (geofence_id, rate_per_wh, currency, effective_from, effective_to, created_at)
+        SELECT g.id,
+               LEAST(GREATEST(legacy.cost_per_kwh / 1000.0, 0), 999999.9999999999),
+               'USD',
+               legacy.effective_from,
+               legacy.effective_to,
+               COALESCE(legacy.created_at, legacy.effective_from)
+        FROM geofence_electricity_rates_legacy_000004 legacy
+        JOIN geofences g ON g.id = legacy.geofence_id
+        WHERE legacy.cost_per_kwh IS NOT NULL
+        ON CONFLICT DO NOTHING;
+
+        DROP TABLE geofence_electricity_rates_legacy_000004;
+    END IF;
+END $$;
+
+-- ---------------------------------------------------------------------------
+-- 4. Charging-session provenance. No FK on geofence_id/rate_id: these columns
+--    are written from the async (post-completion) leg of the telemetry
+--    charge tracker, which must never be blocked by a synchronous FK check
+--    against a table it does not otherwise touch on the hot path (mirrors
+--    the existing no-FK precedent between charging_telemetry and
+--    charging_sessions.id).
+-- ---------------------------------------------------------------------------
+ALTER TABLE charging_sessions
+    ADD COLUMN IF NOT EXISTS geofence_id bigint,
+    ADD COLUMN IF NOT EXISTS rate_id bigint,
+    ADD COLUMN IF NOT EXISTS cost_source text;
+
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM pg_constraint WHERE conname = 'charging_sessions_cost_source_valid'
+    ) THEN
+        ALTER TABLE charging_sessions
+            ADD CONSTRAINT charging_sessions_cost_source_valid
+            CHECK (cost_source IS NULL OR cost_source IN
+                ('manual', 'tesla_actual', 'geofence_tariff', 'default_estimate', 'unknown'));
+    END IF;
+END $$;
+
+CREATE INDEX IF NOT EXISTS charging_sessions_geofence_idx
+    ON charging_sessions (geofence_id) WHERE geofence_id IS NOT NULL;
+CREATE INDEX IF NOT EXISTS charging_sessions_rate_idx
+    ON charging_sessions (rate_id) WHERE rate_id IS NOT NULL;
+CREATE INDEX IF NOT EXISTS charging_sessions_cost_source_idx
+    ON charging_sessions (cost_source) WHERE cost_source IS NOT NULL;
+
+-- Preserve pre-feature costs whose exact origin was not recorded. They are
+-- deliberately marked unknown (not geofence-derived), so repricing tools
+-- treat them as protected actuals rather than overwriting them.
+UPDATE charging_sessions
+SET cost_source = 'unknown'
+WHERE cost_decimal IS NOT NULL
+  AND cost_source IS NULL;
+
+-- ---------------------------------------------------------------------------
+-- 5. Drive start/end geofence attribution (match-only; no auto-create). No
+--    FK for the same hot-path-adjacency reason as charging_sessions above —
+--    drive endpoint resolution also runs off the synchronous ingest path.
+-- ---------------------------------------------------------------------------
+ALTER TABLE drives
+    ADD COLUMN IF NOT EXISTS start_geofence_id bigint,
+    ADD COLUMN IF NOT EXISTS end_geofence_id bigint;
+
+CREATE INDEX IF NOT EXISTS drives_start_geofence_idx
+    ON drives (start_geofence_id) WHERE start_geofence_id IS NOT NULL;
+CREATE INDEX IF NOT EXISTS drives_end_geofence_idx
+    ON drives (end_geofence_id) WHERE end_geofence_id IS NOT NULL;
diff --git a/slo/catalog.yaml b/slo/catalog.yaml
index 755222736a..2a62b1b588 100644
--- a/slo/catalog.yaml
+++ b/slo/catalog.yaml
@@ -223,3 +223,23 @@ slos:
     window: 30d
     owner: analytics
     tags: [http, privacy, benchmarks]
+
+  - name: geofence_pricing_read_availability
+    description: "Charging-place rate history, preview, and activity reads must avoid server errors."
+    sli:
+      good_events: "sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\",status_class!=\"5xx\"}[5m]))"
+      valid_events: "sum(rate(teslasync_red_http_requests_total{method=\"GET\",route=~\"/api/v1/geofences/(needs-review|rates/current|\\\\{geofenceID\\\\}/(rates(|/\\\\{rateID\\\\}/preview)|charging-summary|charging-activity))\"}[5m]))"
+    objective: 99.5
+    window: 30d
+    owner: platform
+    tags: [http, geofences, pricing]
+
+  - name: geofence_pricing_write_availability
+    description: "Charging-place rate creation, apply/backfill, and lifecycle writes must avoid server errors."
+    sli:
+      good_events: "sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\",status_class!=\"5xx\"}[5m]))"
+      valid_events: "sum(rate(teslasync_red_http_requests_total{method=~\"POST|DELETE\",route=~\"/api/v1/geofences/\\\\{geofenceID\\\\}/(archive|unarchive|reviewed|rates(|/\\\\{rateID\\\\}(|/apply)))\"}[5m]))"
+    objective: 99.0
+    window: 30d
+    owner: platform
+    tags: [http, geofences, pricing, writes]
diff --git a/web/src/api/hooks/useLocations.test.tsx b/web/src/api/hooks/useLocations.test.tsx
index 7873de5e01..31b5690743 100644
--- a/web/src/api/hooks/useLocations.test.tsx
+++ b/web/src/api/hooks/useLocations.test.tsx
@@ -46,11 +46,33 @@ vi.mock('./_toastHelpers', () => ({
 import { request } from '@/api/client';
 import { __flushQueryBroadcastForTests } from '@/lib/queryBroadcast';
 import type { Location, Geofence } from '@/types/location';
+import type {
+  Geofence as ApiGeofence,
+  GeofenceRate,
+  GeofenceRateImpactPreview,
+  GeofenceRateApplyResult,
+  GeofenceChargingSummary,
+  GeofenceChargingActivity,
+} from '@/api/types';
 import {
   locationKeys,
   useLocations,
   useGeofences,
+  useGeofencesFull,
   useBulkGeofencesDelete,
+  useGeofenceNeedsReview,
+  useGeofenceCurrentRates,
+  useArchiveGeofence,
+  useUnarchiveGeofence,
+  useMarkGeofenceReviewed,
+  useRenameGeofence,
+  useGeofenceRates,
+  useCreateGeofenceRate,
+  useDeleteGeofenceRate,
+  useGeofenceRatePreview,
+  useApplyGeofenceRate,
+  useGeofenceChargingSummary,
+  useGeofenceChargingActivity,
   type GeofenceBulkResult,
 } from './useLocations';
 
@@ -92,12 +114,45 @@ function makeGeofence(overrides: Partial<Geofence> = {}): Geofence {
     alertOnEntry: true,
     alertOnExit: false,
     enabled: true,
-    costPerKwh: null,
+    origin: 'manual',
+    needsReview: false,
     createdAt: '2026-06-01T00:00:00Z',
     ...overrides,
   };
 }
 
+function makeApiGeofence(overrides: Partial<ApiGeofence> = {}): ApiGeofence {
+  return {
+    id: 1,
+    name: 'Home',
+    polygon_wkt: 'POLYGON((-122.2 37.5, -122.2 37.5, -122.2 37.5, -122.2 37.5))',
+    enabled: true,
+    alert_on_entry: true,
+    alert_on_exit: false,
+    origin: 'manual',
+    needs_review: false,
+    created_at: '2026-06-01T00:00:00Z',
+    updated_at: '2026-06-01T00:00:00Z',
+    latitude: 37.5,
+    longitude: -122.2,
+    radius: 20,
+    ...overrides,
+  };
+}
+
+function makeGeofenceRate(overrides: Partial<GeofenceRate> = {}): GeofenceRate {
+  return {
+    id: 10,
+    geofence_id: 1,
+    rate_per_wh: 0.0001,
+    currency: 'USD',
+    effective_from: '2026-01-01T00:00:00Z',
+    effective_to: null,
+    created_at: '2026-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
 beforeEach(() => {
   mockedRequest.mockReset();
   successToast.mockReset();
@@ -305,3 +360,474 @@ describe('useBulkGeofencesDelete', () => {
     expect(invalidate).not.toHaveBeenCalled();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Charging Places — geofence-based charging-place pricing feature
+// ---------------------------------------------------------------------------
+
+describe('useGeofencesFull', () => {
+  it('GETs /geofences (shares the useGeofences query key) and returns the canonical snake_case shape', async () => {
+    const payload = [makeApiGeofence({ id: 1 }), makeApiGeofence({ id: 2, name: 'Office' })];
+    mockedRequest.mockResolvedValueOnce(payload);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofencesFull(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual(payload);
+    expect(result.current.data?.[0].needs_review).toBe(false);
+
+    const [url] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences');
+    expect(url).not.toContain('/api/v1');
+  });
+
+  it('coerces a non-array response to [] via the safeArray select guard', async () => {
+    mockedRequest.mockResolvedValueOnce(null);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofencesFull(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual([]);
+  });
+
+  it('requests archived rows explicitly when includeArchived is true', async () => {
+    mockedRequest.mockResolvedValueOnce([]);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofencesFull(true), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(mockedRequest.mock.calls[0][0]).toBe('/geofences?include_archived=true');
+  });
+});
+
+describe('useGeofenceNeedsReview', () => {
+  it('GETs /geofences/needs-review and returns the provisional-place queue', async () => {
+    const payload = [
+      makeApiGeofence({ id: 5, origin: 'charging_discovery', needs_review: true, name: '' }),
+    ];
+    mockedRequest.mockResolvedValueOnce(payload);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceNeedsReview(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual(payload);
+    expect(mockedRequest.mock.calls[0][0]).toBe('/geofences/needs-review');
+  });
+
+  it('coerces a non-array response to []', async () => {
+    mockedRequest.mockResolvedValueOnce(null);
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceNeedsReview(), { wrapper: Wrapper });
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual([]);
+  });
+});
+
+describe('useGeofenceCurrentRates', () => {
+  it('GETs /geofences/rates/current — the bulk current-rate lookup for every geofence', async () => {
+    const payload = [makeGeofenceRate({ geofence_id: 1 }), makeGeofenceRate({ geofence_id: 2, id: 11 })];
+    mockedRequest.mockResolvedValueOnce(payload);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceCurrentRates(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual(payload);
+    expect(mockedRequest.mock.calls[0][0]).toBe('/geofences/rates/current');
+  });
+});
+
+describe('useRenameGeofence', () => {
+  it('PUTs the new name and invalidates place lifecycle queries', async () => {
+    mockedRequest.mockResolvedValueOnce(makeApiGeofence({ id: 7, name: 'Office Charger' }));
+
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useRenameGeofence(), { wrapper: Wrapper });
+
+    await result.current.mutateAsync({ geofenceId: 7, name: 'Office Charger' });
+
+    const [url, opts] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences/7');
+    expect(opts.method).toBe('PUT');
+    expect(JSON.parse(opts.body as string)).toEqual({ name: 'Office Charger' });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofences });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofencesNeedsReview });
+    expect(successToast).toHaveBeenCalledWith(
+      'toast.geofence.rename.success',
+      'Place renamed',
+    );
+  });
+});
+
+describe('useArchiveGeofence', () => {
+  it('POSTs /geofences/{id}/archive, invalidates the lifecycle caches, and toasts success', async () => {
+    mockedRequest.mockResolvedValueOnce(makeApiGeofence({ id: 3, archived_at: '2026-08-01T00:00:00Z' }));
+
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useArchiveGeofence(), { wrapper: Wrapper });
+
+    await result.current.mutateAsync(3);
+
+    const [url, opts] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences/3/archive');
+    expect(opts.method).toBe('POST');
+
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofences });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofencesNeedsReview });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofenceRatesCurrent });
+    expect(successToast).toHaveBeenCalledWith('toast.geofence.archive.success', 'Place archived');
+  });
+
+  it('toasts the error and does not invalidate when the archive POST fails', async () => {
+    mockedRequest.mockRejectedValueOnce(new Error('archive boom'));
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useArchiveGeofence(), { wrapper: Wrapper });
+
+    await expect(result.current.mutateAsync(3)).rejects.toThrow('archive boom');
+    expect(errorToast).toHaveBeenCalledWith(expect.any(Error), 'toast.geofence.archive.error', 'Failed to archive place');
+    expect(invalidate).not.toHaveBeenCalled();
+  });
+});
+
+describe('useUnarchiveGeofence', () => {
+  it('POSTs /geofences/{id}/unarchive, invalidates the lifecycle caches, and toasts success', async () => {
+    mockedRequest.mockResolvedValueOnce(makeApiGeofence({ id: 3, archived_at: null }));
+
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useUnarchiveGeofence(), { wrapper: Wrapper });
+
+    await result.current.mutateAsync(3);
+
+    const [url, opts] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences/3/unarchive');
+    expect(opts.method).toBe('POST');
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofences });
+    expect(successToast).toHaveBeenCalledWith('toast.geofence.unarchive.success', 'Place restored');
+  });
+});
+
+describe('useMarkGeofenceReviewed', () => {
+  it('POSTs /geofences/{id}/reviewed, invalidates the needs-review queue, and toasts success', async () => {
+    mockedRequest.mockResolvedValueOnce(makeApiGeofence({ id: 3, needs_review: false }));
+
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useMarkGeofenceReviewed(), { wrapper: Wrapper });
+
+    await result.current.mutateAsync(3);
+
+    const [url, opts] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences/3/reviewed');
+    expect(opts.method).toBe('POST');
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofencesNeedsReview });
+    expect(successToast).toHaveBeenCalledWith('toast.geofence.reviewed.success', 'Marked reviewed');
+  });
+});
+
+describe('useGeofenceRates', () => {
+  it('GETs /geofences/{id}/rates and returns every time-versioned row', async () => {
+    const payload = [makeGeofenceRate({ id: 1 }), makeGeofenceRate({ id: 2, effective_from: '2025-01-01T00:00:00Z' })];
+    mockedRequest.mockResolvedValueOnce(payload);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceRates(7), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual(payload);
+    expect(mockedRequest.mock.calls[0][0]).toBe('/geofences/7/rates');
+  });
+
+  it('is disabled (no fetch) when geofenceId is undefined', async () => {
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceRates(undefined), { wrapper: Wrapper });
+
+    await new Promise((r) => setTimeout(r, 10));
+    expect(mockedRequest).not.toHaveBeenCalled();
+    expect(result.current.fetchStatus).toBe('idle');
+  });
+});
+
+describe('useCreateGeofenceRate', () => {
+  it('POSTs the canonical rate_per_wh body to /geofences/{id}/rates and invalidates rates + current + geofences', async () => {
+    const created = makeGeofenceRate({ id: 99 });
+    mockedRequest.mockResolvedValueOnce(created);
+
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useCreateGeofenceRate(), { wrapper: Wrapper });
+
+    const resolved = await result.current.mutateAsync({
+      geofenceId: 7,
+      rate_per_wh: 0.00012,
+      currency: 'USD',
+      effective_from: '2026-08-27T00:00:00.000Z',
+    });
+
+    expect(resolved).toEqual(created);
+    const [url, opts] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences/7/rates');
+    expect(opts.method).toBe('POST');
+    // The body must carry rate_per_wh (SI canonical), never a *_kwh field,
+    // and must NOT include geofenceId (a path param, not a body field).
+    const body = JSON.parse(opts.body as string);
+    expect(body).toEqual({
+      rate_per_wh: 0.00012,
+      currency: 'USD',
+      effective_from: '2026-08-27T00:00:00.000Z',
+    });
+    expect(body).not.toHaveProperty('geofenceId');
+    expect(Object.keys(body).some((k) => /kwh/i.test(k))).toBe(false);
+
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofenceRates(7) });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofenceRatesCurrent });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofences });
+    expect(successToast).toHaveBeenCalledWith('toast.geofenceRate.create.success', 'Rate saved');
+  });
+
+  it('includes effective_to in the body only when provided', async () => {
+    mockedRequest.mockResolvedValueOnce(makeGeofenceRate());
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useCreateGeofenceRate(), { wrapper: Wrapper });
+
+    await result.current.mutateAsync({
+      geofenceId: 7,
+      rate_per_wh: 0.0001,
+      currency: 'USD',
+      effective_from: '2025-01-01T00:00:00.000Z',
+      effective_to: '2026-08-27T00:00:00.000Z',
+    });
+
+    const body = JSON.parse(mockedRequest.mock.calls[0][1].body as string);
+    expect(body.effective_to).toBe('2026-08-27T00:00:00.000Z');
+  });
+
+  it('toasts the error and does not invalidate when the create POST fails', async () => {
+    mockedRequest.mockRejectedValueOnce(new Error('create rate boom'));
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useCreateGeofenceRate(), { wrapper: Wrapper });
+
+    await expect(
+      result.current.mutateAsync({
+        geofenceId: 7,
+        rate_per_wh: 0.0001,
+        currency: 'USD',
+        effective_from: '2026-01-01T00:00:00.000Z',
+      }),
+    ).rejects.toThrow('create rate boom');
+
+    expect(errorToast).toHaveBeenCalledWith(expect.any(Error), 'toast.geofenceRate.create.error', 'Failed to save rate');
+    expect(invalidate).not.toHaveBeenCalled();
+  });
+});
+
+describe('useDeleteGeofenceRate', () => {
+  it('DELETEs /geofences/{id}/rates/{rateId}, invalidates rates + current, and toasts success', async () => {
+    mockedRequest.mockResolvedValueOnce(undefined);
+
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useDeleteGeofenceRate(), { wrapper: Wrapper });
+
+    await result.current.mutateAsync({ geofenceId: 7, rateId: 99 });
+
+    const [url, opts] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences/7/rates/99');
+    expect(opts.method).toBe('DELETE');
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofenceRates(7) });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofenceRatesCurrent });
+    expect(successToast).toHaveBeenCalledWith(
+      'toast.geofenceRate.delete.success',
+      'Scheduled rate cancelled',
+    );
+  });
+});
+
+describe('useGeofenceRatePreview', () => {
+  it('GETs the preview endpoint with no query string when from/to are omitted', async () => {
+    const preview: GeofenceRateImpactPreview = {
+      matched_sessions: 10,
+      eligible_sessions: 6,
+      protected_sessions: 4,
+      total_energy_wh: 50_000,
+      estimated_cost_decimal: 5.5,
+      currency: 'USD',
+    };
+    mockedRequest.mockResolvedValueOnce(preview);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceRatePreview(7, 99), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual(preview);
+    expect(mockedRequest.mock.calls[0][0]).toBe('/geofences/7/rates/99/preview');
+  });
+
+  it('appends from/to as query params when narrowing the window', async () => {
+    mockedRequest.mockResolvedValueOnce({
+      matched_sessions: 1,
+      eligible_sessions: 1,
+      protected_sessions: 0,
+      total_energy_wh: 1000,
+      estimated_cost_decimal: 0.1,
+      currency: 'USD',
+    });
+
+    const { Wrapper } = makeWrapper();
+    renderHook(
+      () => useGeofenceRatePreview(7, 99, { from: '2026-01-01T00:00:00.000Z', to: '2026-02-01T00:00:00.000Z' }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() => expect(mockedRequest).toHaveBeenCalledTimes(1));
+    const url = mockedRequest.mock.calls[0][0] as string;
+    expect(url).toBe('/geofences/7/rates/99/preview?from=2026-01-01T00%3A00%3A00.000Z&to=2026-02-01T00%3A00%3A00.000Z');
+  });
+
+  it('is disabled until both geofenceId and rateId are known', async () => {
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceRatePreview(7, undefined), { wrapper: Wrapper });
+
+    await new Promise((r) => setTimeout(r, 10));
+    expect(mockedRequest).not.toHaveBeenCalled();
+    expect(result.current.fetchStatus).toBe('idle');
+  });
+});
+
+describe('useApplyGeofenceRate', () => {
+  it('POSTs the apply endpoint and invalidates this place\'s summary/activity AND the global charging-sessions cache', async () => {
+    const applyResult: GeofenceRateApplyResult = {
+      priced_sessions: 6,
+      skipped_sessions: 4,
+      total_cost_decimal: 5.5,
+      currency: 'USD',
+    };
+    mockedRequest.mockResolvedValueOnce(applyResult);
+
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useApplyGeofenceRate(), { wrapper: Wrapper });
+
+    const resolved = await result.current.mutateAsync({ geofenceId: 7, rateId: 99 });
+
+    expect(resolved).toEqual(applyResult);
+    const [url, opts] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences/7/rates/99/apply');
+    expect(opts.method).toBe('POST');
+
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofenceChargingSummary(7) });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: ['geofences', 7, 'charging-activity'] });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: ['charging-sessions'] });
+    expect(successToast).toHaveBeenCalledWith('toast.geofenceRate.apply.success', 'Rate applied to matching sessions');
+  });
+
+  it('appends from/to as query params when narrowing the applied interval', async () => {
+    mockedRequest.mockResolvedValueOnce({
+      priced_sessions: 1,
+      skipped_sessions: 0,
+      total_cost_decimal: 1,
+      currency: 'USD',
+    });
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useApplyGeofenceRate(), { wrapper: Wrapper });
+
+    await result.current.mutateAsync({
+      geofenceId: 7,
+      rateId: 99,
+      from: '2026-01-01T00:00:00.000Z',
+      to: '2026-02-01T00:00:00.000Z',
+    });
+
+    const url = mockedRequest.mock.calls[0][0] as string;
+    expect(url).toBe('/geofences/7/rates/99/apply?from=2026-01-01T00%3A00%3A00.000Z&to=2026-02-01T00%3A00%3A00.000Z');
+  });
+
+  it('toasts the error and does not invalidate when the apply POST fails', async () => {
+    mockedRequest.mockRejectedValueOnce(new Error('apply boom'));
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useApplyGeofenceRate(), { wrapper: Wrapper });
+
+    await expect(result.current.mutateAsync({ geofenceId: 7, rateId: 99 })).rejects.toThrow('apply boom');
+    expect(errorToast).toHaveBeenCalledWith(expect.any(Error), 'toast.geofenceRate.apply.error', 'Failed to apply rate');
+    expect(invalidate).not.toHaveBeenCalled();
+  });
+});
+
+describe('useGeofenceChargingSummary', () => {
+  it('GETs /geofences/{id}/charging-summary and returns the per-currency rows', async () => {
+    const payload: GeofenceChargingSummary[] = [
+      { currency: 'USD', session_count: 5, total_energy_wh: 40_000, total_cost_decimal: 4.4 },
+      { currency: 'EUR', session_count: 2, total_energy_wh: 10_000, total_cost_decimal: 1.1 },
+    ];
+    mockedRequest.mockResolvedValueOnce(payload);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceChargingSummary(7), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    // Multiple currencies must stay as separate rows, never summed together.
+    expect(result.current.data).toEqual(payload);
+    expect(result.current.data).toHaveLength(2);
+    expect(mockedRequest.mock.calls[0][0]).toBe('/geofences/7/charging-summary');
+  });
+
+  it('is disabled (no fetch) when geofenceId is undefined', async () => {
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceChargingSummary(undefined), { wrapper: Wrapper });
+    await new Promise((r) => setTimeout(r, 10));
+    expect(mockedRequest).not.toHaveBeenCalled();
+    expect(result.current.fetchStatus).toBe('idle');
+  });
+});
+
+describe('useGeofenceChargingActivity', () => {
+  it('GETs /geofences/{id}/charging-activity with default limit=50 & offset=0', async () => {
+    const payload: GeofenceChargingActivity[] = [
+      {
+        session_id: 1,
+        started_at: '2026-08-01T00:00:00Z',
+        ended_at: '2026-08-01T01:00:00Z',
+        energy_wh: 10_000,
+        cost_decimal: 1.2,
+        cost_currency: 'USD',
+        cost_source: 'geofence_tariff',
+        rate_id: 99,
+      },
+    ];
+    mockedRequest.mockResolvedValueOnce(payload);
+
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceChargingActivity(7), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual(payload);
+    expect(mockedRequest.mock.calls[0][0]).toBe('/geofences/7/charging-activity?limit=50&offset=0');
+  });
+
+  it('threads a custom limit/offset through to the query string', async () => {
+    mockedRequest.mockResolvedValueOnce([]);
+    const { Wrapper } = makeWrapper();
+    renderHook(() => useGeofenceChargingActivity(7, 25, 25), { wrapper: Wrapper });
+
+    await waitFor(() => expect(mockedRequest).toHaveBeenCalledTimes(1));
+    expect(mockedRequest.mock.calls[0][0]).toBe('/geofences/7/charging-activity?limit=25&offset=25');
+  });
+
+  it('is disabled (no fetch) when geofenceId is undefined', async () => {
+    const { Wrapper } = makeWrapper();
+    const { result } = renderHook(() => useGeofenceChargingActivity(undefined), { wrapper: Wrapper });
+    await new Promise((r) => setTimeout(r, 10));
+    expect(mockedRequest).not.toHaveBeenCalled();
+    expect(result.current.fetchStatus).toBe('idle');
+  });
+});
diff --git a/web/src/api/hooks/useLocations.ts b/web/src/api/hooks/useLocations.ts
index 2877ced922..ce08e11b20 100644
--- a/web/src/api/hooks/useLocations.ts
+++ b/web/src/api/hooks/useLocations.ts
@@ -3,11 +3,35 @@ import { request } from '../client';
 import { safeArray } from '@/lib/safeArray';
 import { useMutationToast } from './_toastHelpers';
 import { invalidateAndBroadcast } from '@/lib/queryBroadcast';
+import { chargingKeys } from './useCharging';
 import type { Location, Geofence } from '@/types/location';
+// Canonical snake_case Charging Places DTOs (@/api/types). Aliased to avoid
+// colliding with the legacy camelCase `Geofence` above — same split, and
+// same reasoning, as `ChargingSession`/`ApiChargingSession` in useCharging.ts.
+import type {
+  Geofence as ApiGeofence,
+  GeofenceRate,
+  GeofenceRateCreateRequest,
+  GeofenceRateImpactPreview,
+  GeofenceRateApplyResult,
+  GeofenceChargingSummary,
+  GeofenceChargingActivity,
+} from '../types';
 
 export const locationKeys = {
   all: (vehicleId?: string) => ['locations', vehicleId ?? 'all'] as const,
   geofences: ['geofences'] as const,
+  geofencesFull: (includeArchived: boolean) =>
+    ['geofences', 'full', includeArchived ? 'with-archived' : 'active'] as const,
+  geofencesNeedsReview: ['geofences', 'needs-review'] as const,
+  geofenceRatesCurrent: ['geofences', 'rates', 'current'] as const,
+  geofenceRates: (geofenceId: number) => ['geofences', geofenceId, 'rates'] as const,
+  geofenceRatePreview: (geofenceId: number, rateId: number, from?: string, to?: string) =>
+    ['geofences', geofenceId, 'rates', rateId, 'preview', from ?? '', to ?? ''] as const,
+  geofenceChargingSummary: (geofenceId: number) =>
+    ['geofences', geofenceId, 'charging-summary'] as const,
+  geofenceChargingActivity: (geofenceId: number, limit: number, offset: number) =>
+    ['geofences', geofenceId, 'charging-activity', limit, offset] as const,
 };
 
 /**
@@ -38,16 +62,22 @@ export function useLocations(vehicleId?: string) {
 /**
  * useGeofences — GET /geofences
  *
- * @deprecated The legacy `Geofence` type in `@/types/location` declares
- * `enabled`, `alertOnEntry`, `alertOnExit`, `costPerKwh` — none of which
+ * The legacy camelCase `Geofence` type in `@/types/location` now matches
  * the post-migration backend `models.Geofence` (internal/models/system.go)
- * persists or emits. Backend MarshalJSON augments the response with
- * `latitude`, `longitude`, `radius` (centroid + max-vertex meters) only.
- * Pages reading the missing fields render fall-through defaults
- * (Inactive / None / blank) — pre-existing UI/contract drift.
- * Reconciliation requires a backend migration to add the missing columns
- * plus a coordinated update to internal/models/system.go,
- * internal/api/geofence_handler.go, and the frontend type+pages.
+ * field-for-field: `enabled`, `alertOnEntry`, `alertOnExit`, `origin`,
+ * `needsReview`, optional `category`/`archivedAt`. Backend MarshalJSON
+ * augments the response with `latitude`, `longitude`, `radius` (centroid +
+ * max-vertex meters, derived from the stored polygon) alongside the raw
+ * `polygon_wkt`. The legacy type intentionally omits `polygon_wkt` and
+ * `updated_at` since no consumer of this hook needs them — reach for the
+ * canonical snake_case `Geofence` in `@/api/types` (used by the newer
+ * Charging Places hooks below) if a future page needs the full wire shape.
+ *
+ * The one field this backend model never persisted or emitted —
+ * `cost_per_kwh` — has been fully removed from the frontend type too. A
+ * geofence's electricity rate is a first-class, time-versioned resource
+ * (`GeofenceRate` / `rate_per_wh`) fetched via the dedicated Charging
+ * Places hooks below, never a field on the geofence itself.
  */
 export function useGeofences() {
   return useQuery({
@@ -57,6 +87,28 @@ export function useGeofences() {
   });
 }
 
+/**
+ * useGeofencesFull — GET /geofences (canonical snake_case shape)
+ *
+ * Uses a dedicated cache key because the Charging Places workspace can
+ * explicitly request archived rows while the legacy geofence-management
+ * surface must continue receiving active rows only. The workspace also
+ * polls so a newly discovered charging place appears without a page reload.
+ */
+export function useGeofencesFull(includeArchived = false) {
+  return useQuery({
+    queryKey: locationKeys.geofencesFull(includeArchived),
+    queryFn: ({ signal }) =>
+      request<ApiGeofence[]>(
+        includeArchived ? '/geofences?include_archived=true' : '/geofences',
+        { signal },
+      ),
+    select: safeArray,
+    staleTime: 15_000,
+    refetchInterval: 30_000,
+  });
+}
+
 export interface GeofenceBulkResult {
   deleted: number;
   failed: { id: number; reason: string }[];
@@ -84,3 +136,329 @@ export function useBulkGeofencesDelete() {
       error(err, 'toast.geofence.bulkDelete.error', 'Failed to delete geofences'),
   });
 }
+
+// =============================================================================
+// Charging Places — geofence-based charging-place pricing feature
+// (migration 000228_geofence_charging_place_pricing;
+// internal/api/geofence/rate_handler.go is the wire-contract source of
+// truth). All rate amounts on the wire are `rate_per_wh` — SI-canonical
+// currency-per-watt-hour, never per-kWh. Convert to currency/kWh only at
+// the render/request boundary (see
+// features/maps/components/charging-places/helpers.ts).
+// =============================================================================
+
+/**
+ * useGeofenceNeedsReview — GET /geofences/needs-review
+ *
+ * The auto-discovered "Needs Setup" queue: provisional charging-place
+ * geofences (`origin: 'charging_discovery'`, `needs_review: true`) awaiting
+ * a human to confirm/edit their name, category, or location.
+ */
+export function useGeofenceNeedsReview() {
+  return useQuery({
+    queryKey: locationKeys.geofencesNeedsReview,
+    queryFn: ({ signal }) => request<ApiGeofence[]>('/geofences/needs-review', { signal }),
+    select: safeArray,
+    staleTime: 15_000,
+    refetchInterval: 30_000,
+  });
+}
+
+/**
+ * useGeofenceCurrentRates — GET /geofences/rates/current
+ *
+ * The currently-active rate (if any) for every geofence in one round trip
+ * — powers the Charging Places list's rate column without a per-row N+1
+ * lookup. A geofence with no row here has never had a rate configured.
+ */
+export function useGeofenceCurrentRates() {
+  return useQuery({
+    queryKey: locationKeys.geofenceRatesCurrent,
+    queryFn: ({ signal }) => request<GeofenceRate[]>('/geofences/rates/current', { signal }),
+    select: safeArray,
+    staleTime: 15_000,
+    refetchInterval: 30_000,
+  });
+}
+
+/** Shared invalidation for the three archive-lifecycle mutations below. */
+function invalidateGeofenceLifecycle(qc: ReturnType<typeof useQueryClient>) {
+  invalidateAndBroadcast(qc, { queryKey: locationKeys.geofences });
+  invalidateAndBroadcast(qc, { queryKey: locationKeys.geofencesNeedsReview });
+  invalidateAndBroadcast(qc, { queryKey: locationKeys.geofenceRatesCurrent });
+}
+
+/**
+ * useArchiveGeofence — POST /geofences/{geofenceID}/archive
+ *
+ * Soft-deletes a charging place: idempotent, excludes it from default
+ * active listings, but keeps it resolvable by id for historical charging
+ * activity (never a hard delete once a place has sessions/rates).
+ */
+export function useArchiveGeofence() {
+  const qc = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: (geofenceId: number) =>
+      request<ApiGeofence>(`/geofences/${geofenceId}/archive`, { method: 'POST' }),
+    onSuccess: () => {
+      invalidateGeofenceLifecycle(qc);
+      success('toast.geofence.archive.success', 'Place archived');
+    },
+    onError: (err) => error(err, 'toast.geofence.archive.error', 'Failed to archive place'),
+  });
+}
+
+/**
+ * useUnarchiveGeofence — POST /geofences/{geofenceID}/unarchive
+ *
+ * Restores a previously archived place to the default active listings.
+ * Idempotent.
+ */
+export function useUnarchiveGeofence() {
+  const qc = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: (geofenceId: number) =>
+      request<ApiGeofence>(`/geofences/${geofenceId}/unarchive`, { method: 'POST' }),
+    onSuccess: () => {
+      invalidateGeofenceLifecycle(qc);
+      success('toast.geofence.unarchive.success', 'Place restored');
+    },
+    onError: (err) => error(err, 'toast.geofence.unarchive.error', 'Failed to restore place'),
+  });
+}
+
+/**
+ * useMarkGeofenceReviewed — POST /geofences/{geofenceID}/reviewed
+ *
+ * Clears `needs_review` once a human has confirmed/edited an
+ * auto-discovered place's name, category, or location — removes it from
+ * the "Needs Setup" queue without any other change.
+ */
+export function useMarkGeofenceReviewed() {
+  const qc = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: (geofenceId: number) =>
+      request<ApiGeofence>(`/geofences/${geofenceId}/reviewed`, { method: 'POST' }),
+    onSuccess: () => {
+      invalidateGeofenceLifecycle(qc);
+      success('toast.geofence.reviewed.success', 'Marked reviewed');
+    },
+    onError: (err) => error(err, 'toast.geofence.reviewed.error', 'Failed to mark reviewed'),
+  });
+}
+
+/** Rename a charging place without requiring the caller to resend geometry. */
+export function useRenameGeofence() {
+  const qc = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: ({ geofenceId, name }: { geofenceId: number; name: string }) =>
+      request<ApiGeofence>(`/geofences/${geofenceId}`, {
+        method: 'PUT',
+        body: JSON.stringify({ name }),
+      }),
+    onSuccess: () => {
+      invalidateGeofenceLifecycle(qc);
+      success('toast.geofence.rename.success', 'Place renamed');
+    },
+    onError: (err) => error(err, 'toast.geofence.rename.error', 'Failed to rename place'),
+  });
+}
+
+/**
+ * useGeofenceRates — GET /geofences/{geofenceID}/rates
+ *
+ * Every time-versioned rate row for one place, newest `effective_from`
+ * first — the shape the rate-history panel renders directly.
+ */
+export function useGeofenceRates(geofenceId?: number) {
+  return useQuery({
+    queryKey: locationKeys.geofenceRates(geofenceId ?? 0),
+    queryFn: ({ signal }) => request<GeofenceRate[]>(`/geofences/${geofenceId}/rates`, { signal }),
+    enabled: !!geofenceId,
+    select: safeArray,
+  });
+}
+
+/**
+ * useCreateGeofenceRate — POST /geofences/{geofenceID}/rates
+ *
+ * Adds a new time-versioned rate for a place — first-time setup, a future
+ * scheduled change, or a correction. There is no separate "replace"
+ * endpoint: a correction is just another call with an `effective_from` at
+ * or after the point the correction should take hold; an open-ended new
+ * version closes the existing unbounded interval. Callers pass `rate_per_wh`
+ * (never a per-kWh value) — convert user-entered currency/kWh at the call
+ * site (see charging-places/helpers.ts).
+ */
+export function useCreateGeofenceRate() {
+  const qc = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: ({ geofenceId, ...body }: { geofenceId: number } & GeofenceRateCreateRequest) =>
+      request<GeofenceRate>(`/geofences/${geofenceId}/rates`, {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    onSuccess: (_data, vars) => {
+      invalidateAndBroadcast(qc, { queryKey: locationKeys.geofenceRates(vars.geofenceId) });
+      invalidateAndBroadcast(qc, { queryKey: locationKeys.geofenceRatesCurrent });
+      invalidateAndBroadcast(qc, { queryKey: locationKeys.geofences });
+      success('toast.geofenceRate.create.success', 'Rate saved');
+    },
+    onError: (err) => error(err, 'toast.geofenceRate.create.error', 'Failed to save rate'),
+  });
+}
+
+/**
+ * useDeleteGeofenceRate — DELETE /geofences/{geofenceID}/rates/{rateID}
+ *
+ * Cancels an unused future schedule. Effective or referenced rates are
+ * immutable; the backend restores the prior adjacent interval so no future
+ * pricing gap is introduced.
+ */
+export function useDeleteGeofenceRate() {
+  const qc = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: ({ geofenceId, rateId }: { geofenceId: number; rateId: number }) =>
+      request<void>(`/geofences/${geofenceId}/rates/${rateId}`, { method: 'DELETE' }),
+    onSuccess: (_data, vars) => {
+      invalidateAndBroadcast(qc, { queryKey: locationKeys.geofenceRates(vars.geofenceId) });
+      invalidateAndBroadcast(qc, { queryKey: locationKeys.geofenceRatesCurrent });
+      success('toast.geofenceRate.delete.success', 'Scheduled rate cancelled');
+    },
+    onError: (err) =>
+      error(err, 'toast.geofenceRate.delete.error', 'Failed to cancel scheduled rate'),
+  });
+}
+
+/**
+ * useGeofenceRatePreview — GET
+ * /geofences/{geofenceID}/rates/{rateID}/preview[?from&to]
+ *
+ * Read-only: reports how many charging sessions are matched (in scope by
+ * place + time), eligible (would actually be repriced — unpriced or
+ * previously geofence-derived), and protected (in scope but already carry
+ * a manual/Tesla-actual cost or an existing cost with unknown provenance),
+ * plus the estimated total cost at this rate. `from`/`to` optionally narrow
+ * the scope further; both default to the rate's own effective interval.
+ * Disabled until both ids are known (e.g. before a rate row is selected).
+ */
+export function useGeofenceRatePreview(
+  geofenceId?: number,
+  rateId?: number,
+  range: { from?: string; to?: string } = {},
+) {
+  return useQuery({
+    queryKey: locationKeys.geofenceRatePreview(geofenceId ?? 0, rateId ?? 0, range.from, range.to),
+    queryFn: ({ signal }) => {
+      const params = new URLSearchParams();
+      if (range.from) params.set('from', range.from);
+      if (range.to) params.set('to', range.to);
+      const qs = params.toString();
+      return request<GeofenceRateImpactPreview>(
+        `/geofences/${geofenceId}/rates/${rateId}/preview${qs ? `?${qs}` : ''}`,
+        { signal },
+      );
+    },
+    enabled: !!geofenceId && !!rateId,
+  });
+}
+
+/**
+ * useApplyGeofenceRate — POST
+ * /geofences/{geofenceID}/rates/{rateID}/apply[?from&to]
+ *
+ * The write-performing, explicit backfill/reprice action — the only way
+ * historical sessions are ever repriced. Bounded to this geofence + rate's
+ * interval (optionally narrowed further by `from`/`to`), idempotent, and
+ * never overwrites a manual/Tesla-actual cost or an existing cost with
+ * unknown provenance. On success, invalidates this place's charging
+ * summary/activity AND the global charging-sessions cache, since an apply
+ * can change `cost_decimal`/`cost_source` on many rows at once.
+ */
+export function useApplyGeofenceRate() {
+  const qc = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: ({
+      geofenceId,
+      rateId,
+      from,
+      to,
+    }: {
+      geofenceId: number;
+      rateId: number;
+      from?: string;
+      to?: string;
+    }) => {
+      const params = new URLSearchParams();
+      if (from) params.set('from', from);
+      if (to) params.set('to', to);
+      const qs = params.toString();
+      return request<GeofenceRateApplyResult>(
+        `/geofences/${geofenceId}/rates/${rateId}/apply${qs ? `?${qs}` : ''}`,
+        { method: 'POST' },
+      );
+    },
+    onSuccess: (_data, vars) => {
+      invalidateAndBroadcast(qc, { queryKey: locationKeys.geofenceChargingSummary(vars.geofenceId) });
+      // charging-activity keys are parameterized by limit/offset per page;
+      // invalidate the whole ['geofences', id, 'charging-activity'] subtree
+      // (TanStack matches by prefix) rather than enumerate every page.
+      invalidateAndBroadcast(qc, {
+        queryKey: ['geofences', vars.geofenceId, 'charging-activity'],
+      });
+      invalidateAndBroadcast(qc, { queryKey: chargingKeys.all });
+      success('toast.geofenceRate.apply.success', 'Rate applied to matching sessions');
+    },
+    onError: (err) => error(err, 'toast.geofenceRate.apply.error', 'Failed to apply rate'),
+  });
+}
+
+/**
+ * useGeofenceChargingSummary — GET /geofences/{geofenceID}/charging-summary
+ *
+ * Priced charging-activity totals for one place, ALWAYS grouped by
+ * currency (never summed across currencies) — one array entry per
+ * currency this place has ever billed in.
+ */
+export function useGeofenceChargingSummary(geofenceId?: number) {
+  return useQuery({
+    queryKey: locationKeys.geofenceChargingSummary(geofenceId ?? 0),
+    queryFn: ({ signal }) =>
+      request<GeofenceChargingSummary[]>(`/geofences/${geofenceId}/charging-summary`, { signal }),
+    enabled: !!geofenceId,
+    select: safeArray,
+  });
+}
+
+/**
+ * useGeofenceChargingActivity — GET
+ * /geofences/{geofenceID}/charging-activity[?limit&offset]
+ *
+ * Paginated session-level activity feed for one place (any pricing
+ * state — not just priced rows) backing the rate-history /
+ * affected-sessions UI panel. Mirrors the backend's `apiparams.Pagination`
+ * defaults (limit 50, offset 0) when not given explicitly.
+ */
+export function useGeofenceChargingActivity(
+  geofenceId?: number,
+  limit = 50,
+  offset = 0,
+) {
+  return useQuery({
+    queryKey: locationKeys.geofenceChargingActivity(geofenceId ?? 0, limit, offset),
+    queryFn: ({ signal }) =>
+      request<GeofenceChargingActivity[]>(
+        `/geofences/${geofenceId}/charging-activity?limit=${limit}&offset=${offset}`,
+        { signal },
+      ),
+    enabled: !!geofenceId,
+    select: safeArray,
+  });
+}
diff --git a/web/src/api/types.ts b/web/src/api/types.ts
index 8a22f7efec..bae1917811 100644
--- a/web/src/api/types.ts
+++ b/web/src/api/types.ts
@@ -249,15 +249,158 @@ export interface ChargeTelemetryReading {
   current_amps?: number | null
 }
 
+// === Geofences / Charging Places ===
+//
+// Canonical snake_case wire shape for GET/POST/PUT /geofences and the
+// charging-place pricing feature's endpoints beneath
+// /geofences/{geofenceID}/... (see internal/api/geofence/rate_handler.go
+// and internal/models/system/{system,geofence_rate}.go — the source of
+// truth for every field below).
+//
+// `rate_per_wh` is the ONLY canonical electricity-rate unit on the wire —
+// never `_kwh`. Convert to currency/kWh strictly at the render/request
+// boundary (see features/maps/components/charging-places/helpers.ts).
+
+/** How a geofence came to exist. */
+export type GeofenceOrigin = 'manual' | 'charging_discovery'
+
+/** Optional category tag a geofence may carry. */
+export type GeofenceCategory = 'home' | 'work' | 'restricted' | 'custom'
+
+/**
+ * A geofence ("charging place" once it has rates/sessions attached).
+ *
+ * `latitude` / `longitude` / `radius` are NOT stored columns — the backend's
+ * `Geofence.MarshalJSON` derives them on every read from `polygon_wkt`
+ * (centroid + max-vertex-distance in meters) so the web client never parses
+ * WKT itself. `category` / `archived_at` use `omitempty` on the Go side:
+ * they are ABSENT from the payload (not `null`) when unset.
+ */
 export interface Geofence {
   id: number
   name: string
+  polygon_wkt: string
+  category?: GeofenceCategory | null
+  enabled: boolean
+  alert_on_entry: boolean
+  alert_on_exit: boolean
+  origin: GeofenceOrigin
+  needs_review: boolean
+  archived_at?: string | null
+  created_at: string
+  updated_at: string
+  /** Computed centroid latitude, degrees — see MarshalJSON note above. */
   latitude: number
+  /** Computed centroid longitude, degrees — see MarshalJSON note above. */
   longitude: number
+  /** Computed bounding radius, meters — see MarshalJSON note above. */
   radius: number
-  cost_per_kwh: number | null
+}
+
+/**
+ * One time-versioned electricity-rate row for a geofence. The canonical,
+ * append-only source of truth — there is no separate mutable "current
+ * rate" column anywhere. The active rate for any instant `t` is whichever
+ * row's half-open `[effective_from, effective_to)` interval contains `t`;
+ * `effective_to: null` means "still open" (the current version).
+ */
+export interface GeofenceRate {
+  id: number
+  geofence_id: number
+  /** Currency units per **watt-hour** — SI-canonical, never per-kWh. */
+  rate_per_wh: number
+  /** ISO-4217 currency code, e.g. "USD". */
+  currency: string
+  effective_from: string
+  effective_to?: string | null
   created_at: string
-  updated_at?: string
+}
+
+/** Request body for `POST /geofences/{geofenceID}/rates`. */
+export interface GeofenceRateCreateRequest {
+  rate_per_wh: number
+  currency: string
+  effective_from: string
+  effective_to?: string | null
+}
+
+/**
+ * Charging-session cost provenance values, mirroring the
+ * `charging_sessions.cost_source` CHECK constraint. Precedence (highest to
+ * lowest confidence): manual actual > tesla_actual > geofence_tariff >
+ * default_estimate > unknown.
+ */
+export type CostSource =
+  | 'manual'
+  | 'tesla_actual'
+  | 'geofence_tariff'
+  | 'default_estimate'
+  | 'unknown'
+
+/**
+ * Read-only "what would applying this rate do" response for
+ * `GET /geofences/{geofenceID}/rates/{rateID}/preview` — no rows written.
+ * `eligible_sessions` is the subset of `matched_sessions` an apply call is
+ * actually allowed to touch (unpriced or previously geofence-derived);
+ * `protected_sessions` already carry a manual/Tesla-actual cost and are
+ * matched (in scope by place + time) but will never be overwritten.
+ */
+export interface GeofenceRateImpactPreview {
+  geofence_id: number
+  rate_id: number
+  currency: string
+  matched_sessions: number
+  eligible_sessions: number
+  protected_sessions: number
+  total_energy_wh: number
+  estimated_cost_decimal: number
+}
+
+/**
+ * Outcome of an explicit apply/backfill action —
+ * `POST /geofences/{geofenceID}/rates/{rateID}/apply`. The
+ * write-performing counterpart of {@link GeofenceRateImpactPreview}.
+ */
+export interface GeofenceRateApplyResult {
+  geofence_id: number
+  rate_id: number
+  currency: string
+  matched_sessions: number
+  priced_sessions: number
+  skipped_sessions: number
+  total_energy_wh: number
+  total_cost_decimal: number
+}
+
+/**
+ * A geofence's priced charging activity totals for ONE currency —
+ * `GET /geofences/{geofenceID}/charging-summary` always returns an array,
+ * one entry per currency ever seen at this place. Different currencies are
+ * NEVER summed into a single total; callers must group/scope by currency.
+ */
+export interface GeofenceChargingSummary {
+  geofence_id: number
+  currency: string
+  session_count: number
+  total_energy_wh: number
+  total_cost_decimal: number
+}
+
+/**
+ * One line item in a geofence's charging-session activity feed —
+ * `GET /geofences/{geofenceID}/charging-activity` (paginated via
+ * `limit`/`offset` query params; any pricing state, not just priced rows).
+ */
+export interface GeofenceChargingActivity {
+  session_id: number
+  vehicle_id: number
+  started_at: string
+  ended_at?: string | null
+  energy_wh?: number | null
+  cost_decimal?: number | null
+  cost_currency?: string | null
+  cost_source?: CostSource | null
+  rate_id?: number | null
 }
 
 export interface AppSettings {
diff --git a/web/src/features/dashboard/widgets/GeofenceWidget.test.tsx b/web/src/features/dashboard/widgets/GeofenceWidget.test.tsx
index d1595561ac..f716eafef5 100644
--- a/web/src/features/dashboard/widgets/GeofenceWidget.test.tsx
+++ b/web/src/features/dashboard/widgets/GeofenceWidget.test.tsx
@@ -199,7 +199,8 @@ function makeFence(over: Partial<Geofence> = {}): Geofence {
     alertOnEntry: false,
     alertOnExit: false,
     enabled: true,
-    costPerKwh: null,
+    origin: 'manual',
+    needsReview: false,
     createdAt: '2024-01-01T00:00:00Z',
     ...over,
   };
diff --git a/web/src/features/maps/components/charging-places/ChargingActivityList.test.tsx b/web/src/features/maps/components/charging-places/ChargingActivityList.test.tsx
new file mode 100644
index 0000000000..c0ab6244fd
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/ChargingActivityList.test.tsx
@@ -0,0 +1,206 @@
+/**
+ * ChargingActivityList — paginated session-level activity feed for one
+ * place (any pricing state, not just already-priced rows).
+ *
+ * Coverage:
+ *   1. Loading skeleton, error → QueryError + retry, empty state (offset 0
+ *      only).
+ *   2. Renders started/ended, energy, cost, and a cost_source badge per
+ *      row — including the "—" fallbacks for null ended_at/energy/cost and
+ *      an Unknown badge for unpriced (`cost_source: null`) rows.
+ *   3. Pagination: Previous disabled at offset 0; Next disabled once a page
+ *      comes back shorter than the page size (last page); clicking Next/
+ *      Previous advances/retreats the offset passed to the hook.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import type { ReactNode } from 'react';
+import type { UseQueryResult } from '@tanstack/react-query';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallbackOrOpts?: unknown, opts?: unknown) => {
+        if (typeof fallbackOrOpts === 'string') {
+          if (opts && typeof opts === 'object') {
+            const o = opts as Record<string, unknown>;
+            return fallbackOrOpts.replace(/{{(\w+)}}/g, (_, name) => (name in o ? String(o[name]) : `{{${name}}}`));
+          }
+          return fallbackOrOpts;
+        }
+        return key;
+      },
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/hooks/useSettings', () => ({
+  useSettings: () => ({ locale: 'en-US' }),
+}));
+
+vi.mock('@/hooks/useUnits', () => ({
+  useUnits: () => ({ formatEnergy: (wh: number) => `${(wh / 1000).toFixed(1)} kWh` }),
+}));
+
+vi.mock('@/components/data-display', () => ({
+  TimeStamp: ({ value }: { value: unknown }) => <span data-testid="ts">{String(value)}</span>,
+}));
+
+vi.mock('@/api/hooks/useLocations', () => ({
+  useGeofenceChargingActivity: vi.fn(),
+}));
+
+import { useGeofenceChargingActivity } from '@/api/hooks/useLocations';
+import { ChargingActivityList } from './ChargingActivityList';
+import type { GeofenceChargingActivity } from '@/api/types';
+
+const mockedActivity = useGeofenceChargingActivity as unknown as ReturnType<typeof vi.fn>;
+let refetch: ReturnType<typeof vi.fn>;
+
+type ActivityQuery = UseQueryResult<GeofenceChargingActivity[], Error> & { isFetching: boolean };
+
+function makeRow(overrides: Partial<GeofenceChargingActivity> = {}): GeofenceChargingActivity {
+  return {
+    session_id: 1,
+    vehicle_id: 1,
+    started_at: '2026-09-01T12:00:00Z',
+    ended_at: '2026-09-01T13:00:00Z',
+    energy_wh: 10_000,
+    cost_decimal: 1.2,
+    cost_currency: 'USD',
+    cost_source: 'geofence_tariff',
+    rate_id: 5,
+    ...overrides,
+  };
+}
+
+function makeQuery(overrides: Partial<ActivityQuery> = {}): ActivityQuery {
+  return {
+    data: [],
+    isLoading: false,
+    isError: false,
+    error: null,
+    isFetching: false,
+    refetch,
+    ...overrides,
+  } as unknown as ActivityQuery;
+}
+
+beforeEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  refetch = vi.fn();
+  mockedActivity.mockReturnValue(makeQuery());
+});
+
+function renderList() {
+  return render(
+    <MemoryRouter>
+      <ChargingActivityList geofenceId={7} />
+    </MemoryRouter>,
+  );
+}
+
+describe('ChargingActivityList — loading/error/empty', () => {
+  it('shows a loading skeleton', () => {
+    mockedActivity.mockReturnValue(makeQuery({ isLoading: true, data: undefined }));
+    const { container } = renderList();
+    expect(container.querySelector('.animate-pulse')).not.toBeNull();
+  });
+
+  it('surfaces a QueryError with a working retry on failure', () => {
+    mockedActivity.mockReturnValue(makeQuery({ isError: true, error: new Error('boom') }));
+    renderList();
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+    expect(refetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows the empty message when there are no sessions at offset 0', () => {
+    mockedActivity.mockReturnValue(makeQuery({ data: [] }));
+    renderList();
+    expect(screen.getByText('No charging sessions recorded at this place yet.')).toBeInTheDocument();
+  });
+});
+
+describe('ChargingActivityList — rows', () => {
+  it('renders started/ended, energy, cost, and the cost_source badge for a priced row', () => {
+    mockedActivity.mockReturnValue(makeQuery({ data: [makeRow()] }));
+    renderList();
+
+    expect(screen.getAllByTestId('ts')).toHaveLength(2);
+    expect(screen.getByText('10.0 kWh')).toBeInTheDocument();
+    expect(screen.getByText('$1.20')).toBeInTheDocument();
+    expect(screen.getByText('geofence_tariff')).toBeInTheDocument();
+  });
+
+  it('falls back for null ended_at/energy/cost and labels a null cost_source as Unknown', () => {
+    mockedActivity.mockReturnValue(
+      makeQuery({
+        data: [
+          makeRow({
+            ended_at: null,
+            energy_wh: null,
+            cost_decimal: null,
+            cost_currency: null,
+            cost_source: null,
+            rate_id: null,
+          }),
+        ],
+      }),
+    );
+    renderList();
+
+    expect(screen.getAllByText('—')).toHaveLength(3);
+    expect(screen.getByText('Unknown')).toBeInTheDocument();
+  });
+});
+
+describe('ChargingActivityList — pagination', () => {
+  it('disables Previous at offset 0 and calls the hook with offset 0 / limit 25 initially', () => {
+    mockedActivity.mockReturnValue(makeQuery({ data: Array.from({ length: 25 }, (_, i) => makeRow({ session_id: i })) }));
+    renderList();
+
+    expect(mockedActivity).toHaveBeenCalledWith(7, 25, 0);
+    expect(screen.getByRole('button', { name: 'Previous' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next' })).not.toBeDisabled();
+  });
+
+  it('disables Next once a page comes back shorter than the page size (last page)', () => {
+    mockedActivity.mockReturnValue(makeQuery({ data: [makeRow()] }));
+    renderList();
+    expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled();
+  });
+
+  it('advances the offset by the page size when Next is clicked', () => {
+    mockedActivity.mockReturnValue(makeQuery({ data: Array.from({ length: 25 }, (_, i) => makeRow({ session_id: i })) }));
+    renderList();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    expect(mockedActivity).toHaveBeenLastCalledWith(7, 25, 25);
+  });
+
+  it('retreats the offset by the page size when Previous is clicked, never below 0', () => {
+    mockedActivity.mockReturnValue(makeQuery({ data: Array.from({ length: 25 }, (_, i) => makeRow({ session_id: i })) }));
+    renderList();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
+    expect(mockedActivity).toHaveBeenLastCalledWith(7, 25, 0);
+  });
+
+  it('disables both buttons while a page is being fetched', () => {
+    mockedActivity.mockReturnValue(
+      makeQuery({ data: Array.from({ length: 25 }, (_, i) => makeRow({ session_id: i })), isFetching: true }),
+    );
+    renderList();
+
+    expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled();
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/ChargingActivityList.tsx b/web/src/features/maps/components/charging-places/ChargingActivityList.tsx
new file mode 100644
index 0000000000..58f127de8e
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/ChargingActivityList.tsx
@@ -0,0 +1,154 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ListChecks } from 'lucide-react';
+
+import { GlassPanel, PanelTitle, Badge, Button, Text, DataTable, type Column } from '@/components/ui';
+import { Skeleton, EmptyState, QueryError } from '@/components/feedback';
+import { TimeStamp } from '@/components/data-display';
+import { useSettings } from '@/hooks/useSettings';
+import { useUnits } from '@/hooks/useUnits';
+import { formatCurrencyValue } from '@/lib/currencyFormat';
+import { useGeofenceChargingActivity } from '@/api/hooks/useLocations';
+import type { GeofenceChargingActivity, CostSource } from '@/api/types';
+
+export interface ChargingActivityListProps {
+  geofenceId: number;
+}
+
+const PAGE_SIZE = 25;
+
+const SOURCE_BADGE: Record<CostSource, 'success' | 'info' | 'warning' | 'neutral'> = {
+  manual: 'success',
+  tesla_actual: 'success',
+  geofence_tariff: 'info',
+  default_estimate: 'warning',
+  unknown: 'neutral',
+};
+
+/**
+ * Paginated, session-level charging activity feed for one place — any
+ * pricing state, not just already-priced rows, so a user can see exactly
+ * which sessions a rate would (or did) touch. `cost_source` surfaces the
+ * provenance precedence directly (manual/Tesla-actual outrank a
+ * geofence-derived estimate, which outranks the legacy default, which
+ * outranks unknown/unpriced).
+ */
+export function ChargingActivityList({ geofenceId }: ChargingActivityListProps) {
+  const { t } = useTranslation();
+  const { locale } = useSettings();
+  const { formatEnergy } = useUnits();
+  const [offset, setOffset] = useState(0);
+
+  const { data, isLoading, isError, error, refetch, isFetching } = useGeofenceChargingActivity(
+    geofenceId,
+    PAGE_SIZE,
+    offset,
+  );
+  const rows = data ?? [];
+
+  useEffect(() => {
+    setOffset(0);
+  }, [geofenceId]);
+
+  const columns = useMemo<Column<GeofenceChargingActivity>[]>(
+    () => [
+      {
+        key: 'started_at',
+        header: t('chargingPlaces.activity.startedAt', 'Started'),
+        render: (r) => <TimeStamp value={r.started_at} format="absolute" />,
+      },
+      {
+        key: 'ended_at',
+        header: t('chargingPlaces.activity.endedAt', 'Ended'),
+        render: (r) => (r.ended_at ? <TimeStamp value={r.ended_at} format="absolute" /> : <Text size="sm" color="muted">—</Text>),
+      },
+      {
+        key: 'energy_wh',
+        header: t('chargingPlaces.activity.energy', 'Energy'),
+        render: (r) => <Text size="sm" className="tabular-nums">{r.energy_wh != null ? formatEnergy(r.energy_wh) : '—'}</Text>,
+      },
+      {
+        key: 'cost_decimal',
+        header: t('chargingPlaces.activity.cost', 'Cost'),
+        render: (r) => (
+          <Text size="sm" className="tabular-nums">
+            {r.cost_decimal != null && r.cost_currency
+              ? formatCurrencyValue(r.cost_decimal, r.cost_currency, locale, 2, { useGrouping: true })
+              : '—'}
+          </Text>
+        ),
+      },
+      {
+        key: 'cost_source',
+        header: t('chargingPlaces.activity.source', 'Source'),
+        render: (r) =>
+          r.cost_source ? (
+            <Badge variant={SOURCE_BADGE[r.cost_source] ?? 'neutral'} size="sm">
+              {t(`chargingPlaces.costSource.${r.cost_source}`, r.cost_source)}
+            </Badge>
+          ) : (
+            <Badge variant="neutral" size="sm">
+              {t('chargingPlaces.costSource.unknown', 'Unknown')}
+            </Badge>
+          ),
+      },
+    ],
+    [t, locale, formatEnergy],
+  );
+
+  return (
+    <GlassPanel className="p-4 sm:p-5">
+      <PanelTitle className="mb-3 flex items-center gap-2">
+        <ListChecks className="h-4 w-4 text-cyan-300" aria-hidden="true" />
+        {t('chargingPlaces.activity.title', 'Charging Activity')}
+      </PanelTitle>
+
+      {isError ? (
+        <QueryError error={error} onRetry={() => void refetch()} resourceName={t('chargingPlaces.activity.title', 'Charging Activity')} />
+      ) : isLoading && rows.length === 0 ? (
+        <Skeleton className="h-48 w-full" />
+      ) : rows.length === 0 && offset === 0 ? (
+        <>
+          {/* no-action: charging sessions appear here automatically after the vehicle charges at this place. */}
+          <EmptyState message={t('chargingPlaces.activity.empty', 'No charging sessions recorded at this place yet.')} />
+        </>
+      ) : (
+        <>
+          <DataTable
+            tableId="maps:charging-place-activity"
+            columns={columns}
+            data={rows}
+            keyExtractor={(r) => r.session_id}
+            emptyMessage={t('chargingPlaces.activity.empty', 'No charging sessions recorded at this place yet.')}
+          />
+          <div className="mt-3 flex items-center justify-between">
+            <Text size="sm" color="muted">
+              {t('chargingPlaces.activity.pageInfo', 'Showing {{from}}–{{to}}', {
+                from: rows.length > 0 ? offset + 1 : 0,
+                to: offset + rows.length,
+              })}
+            </Text>
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant="secondary"
+                disabled={offset === 0 || isFetching}
+                onClick={() => setOffset((o) => Math.max(0, o - PAGE_SIZE))}
+              >
+                {t('common.previous', 'Previous')}
+              </Button>
+              <Button
+                size="sm"
+                variant="secondary"
+                disabled={rows.length < PAGE_SIZE || isFetching}
+                onClick={() => setOffset((o) => o + PAGE_SIZE)}
+              >
+                {t('common.next', 'Next')}
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.test.tsx b/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.test.tsx
new file mode 100644
index 0000000000..4fb5e5e5a7
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.test.tsx
@@ -0,0 +1,275 @@
+/**
+ * ChargingPlacesWorkspace — the top-level Charging Places section: the
+ * "Needs Setup" queue, the archived-places toggle, the full places table,
+ * and the detail panel for whichever place is selected.
+ *
+ * NeedsSetupQueue / PlacesTable / PlaceDetailPanel each carry their own
+ * dedicated test suite — here they are replaced with prop-echoing stubs so
+ * these tests stay focused on the workspace's OWN orchestration contract:
+ * data threading, the archived-places filter, opening the detail panel
+ * from either child, and keeping the open panel's place "live" as the
+ * underlying list refetches.
+ *
+ * Coverage:
+ *   1. Threads places/loading/error/currentRates into the two list panels.
+ *   2. Archived filter: excluded by default; the toggle includes them and
+ *      is passed through to PlacesTable as `includesArchived`.
+ *   3. Opening the detail panel from NeedsSetupQueue's onReview.
+ *   4. Opening the detail panel from PlacesTable's onSelect.
+ *   5. Closing the detail panel clears the selection.
+ *   6. The open detail panel's `place` prop stays live — re-derived from
+ *      the latest list query result rather than a stale snapshot from the
+ *      moment it was opened.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import type { ReactNode } from 'react';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown) => (typeof fallback === 'string' ? fallback : key),
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/api/hooks/useLocations', () => ({
+  useGeofencesFull: vi.fn(),
+  useGeofenceNeedsReview: vi.fn(),
+  useGeofenceCurrentRates: vi.fn(),
+}));
+
+interface StubPlace {
+  id: number;
+  archived_at?: string | null;
+}
+
+vi.mock('./NeedsSetupQueue', () => ({
+  NeedsSetupQueue: ({
+    places,
+    isLoading,
+    error,
+    onReview,
+  }: {
+    places?: StubPlace[];
+    isLoading: boolean;
+    error?: unknown;
+    onReview: (p: StubPlace) => void;
+  }) => (
+    <div data-testid="stub-needs-setup">
+      {`NeedsSetupQueue places=${places?.length ?? 0} loading=${isLoading} error=${Boolean(error)}`}
+      <a href="#review-first" onClick={() => places?.[0] && onReview(places[0])}>stub-review-first</a>
+    </div>
+  ),
+}));
+
+vi.mock('./PlacesTable', () => ({
+  PlacesTable: ({
+    places,
+    currentRates,
+    isLoading,
+    error,
+    onSelect,
+    includesArchived,
+  }: {
+    places?: StubPlace[];
+    currentRates?: unknown[];
+    isLoading: boolean;
+    error?: unknown;
+    onSelect: (p: StubPlace) => void;
+    includesArchived?: boolean;
+  }) => (
+    <div data-testid="stub-places-table">
+      {`PlacesTable places=${places?.length ?? 0} rates=${currentRates?.length ?? 0} loading=${isLoading} error=${Boolean(error)} archived=${Boolean(includesArchived)}`}
+      <a href="#select-first" onClick={() => places?.[0] && onSelect(places[0])}>stub-select-first</a>
+    </div>
+  ),
+}));
+
+vi.mock('./PlaceDetailPanel', () => ({
+  PlaceDetailPanel: ({ place, onClose }: { place: StubPlace | null; onClose: () => void }) =>
+    place ? (
+      <div data-testid="stub-detail-panel">
+        {`PlaceDetailPanel place=${place.id} archived=${Boolean(place.archived_at)}`}
+        <a href="#close-detail" onClick={onClose}>stub-close-detail</a>
+      </div>
+    ) : null,
+}));
+
+import {
+  useGeofencesFull,
+  useGeofenceNeedsReview,
+  useGeofenceCurrentRates,
+} from '@/api/hooks/useLocations';
+import { ChargingPlacesWorkspace } from './ChargingPlacesWorkspace';
+import type { Geofence, GeofenceRate } from '@/api/types';
+
+const mockedPlaces = useGeofencesFull as unknown as ReturnType<typeof vi.fn>;
+const mockedNeedsReview = useGeofenceNeedsReview as unknown as ReturnType<typeof vi.fn>;
+const mockedCurrentRates = useGeofenceCurrentRates as unknown as ReturnType<typeof vi.fn>;
+
+function makePlace(overrides: Partial<Geofence> = {}): Geofence {
+  return {
+    id: 1,
+    name: 'Home',
+    polygon_wkt: 'POLYGON((0 0,0 0,0 0,0 0))',
+    category: 'home',
+    enabled: true,
+    alert_on_entry: false,
+    alert_on_exit: false,
+    origin: 'manual',
+    needs_review: false,
+    archived_at: null,
+    created_at: '2020-01-01T00:00:00Z',
+    updated_at: '2020-01-01T00:00:00Z',
+    latitude: 40,
+    longitude: -74,
+    radius: 50,
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  mockedPlaces.mockReturnValue({ data: [], isLoading: false, error: null, refetch: vi.fn() });
+  mockedNeedsReview.mockReturnValue({ data: [], isLoading: false, error: null, refetch: vi.fn() });
+  mockedCurrentRates.mockReturnValue({ data: [], isLoading: false, error: null, refetch: vi.fn() });
+});
+
+describe('ChargingPlacesWorkspace — data threading', () => {
+  it('threads places/currentRates/needs-review into the two list panels', () => {
+    mockedPlaces.mockReturnValue({
+      data: [makePlace({ id: 1 }), makePlace({ id: 2 })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    mockedNeedsReview.mockReturnValue({
+      data: [makePlace({ id: 3, needs_review: true, origin: 'charging_discovery' })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    mockedCurrentRates.mockReturnValue({
+      data: [{ id: 1, geofence_id: 1 } as GeofenceRate],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<ChargingPlacesWorkspace />);
+
+    expect(screen.getByTestId('stub-needs-setup')).toHaveTextContent('places=1');
+    expect(screen.getByTestId('stub-places-table')).toHaveTextContent('places=2');
+    expect(screen.getByTestId('stub-places-table')).toHaveTextContent('rates=1');
+  });
+
+  it('propagates loading/error from the places query into PlacesTable', () => {
+    mockedPlaces.mockReturnValue({ data: undefined, isLoading: true, error: null, refetch: vi.fn() });
+    render(<ChargingPlacesWorkspace />);
+    expect(screen.getByTestId('stub-places-table')).toHaveTextContent('loading=true');
+  });
+});
+
+describe('ChargingPlacesWorkspace — archived filter', () => {
+  it('excludes archived places by default', () => {
+    mockedPlaces.mockReturnValue({
+      data: [makePlace({ id: 1, archived_at: null }), makePlace({ id: 2, archived_at: '2026-06-01T00:00:00Z' })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<ChargingPlacesWorkspace />);
+
+    expect(screen.getByTestId('stub-places-table')).toHaveTextContent('places=1');
+    expect(screen.getByTestId('stub-places-table')).toHaveTextContent('archived=false');
+  });
+
+  it('includes archived places once "Show archived" is toggled on', () => {
+    mockedPlaces.mockReturnValue({
+      data: [makePlace({ id: 1, archived_at: null }), makePlace({ id: 2, archived_at: '2026-06-01T00:00:00Z' })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<ChargingPlacesWorkspace />);
+    fireEvent.click(screen.getByRole('switch', { name: 'Show archived' }));
+
+    expect(screen.getByTestId('stub-places-table')).toHaveTextContent('places=2');
+    expect(screen.getByTestId('stub-places-table')).toHaveTextContent('archived=true');
+  });
+});
+
+describe('ChargingPlacesWorkspace — detail panel', () => {
+  it('opens the detail panel from NeedsSetupQueue\'s onReview', () => {
+    mockedNeedsReview.mockReturnValue({
+      data: [makePlace({ id: 9, needs_review: true })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<ChargingPlacesWorkspace />);
+    expect(screen.queryByTestId('stub-detail-panel')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('stub-review-first'));
+    expect(screen.getByTestId('stub-detail-panel')).toHaveTextContent('place=9');
+  });
+
+  it('opens the detail panel from PlacesTable\'s onSelect', () => {
+    mockedPlaces.mockReturnValue({
+      data: [makePlace({ id: 4 })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<ChargingPlacesWorkspace />);
+    fireEvent.click(screen.getByText('stub-select-first'));
+    expect(screen.getByTestId('stub-detail-panel')).toHaveTextContent('place=4');
+  });
+
+  it('clears the selection when the detail panel is closed', () => {
+    mockedPlaces.mockReturnValue({ data: [makePlace({ id: 4 })], isLoading: false, error: null, refetch: vi.fn() });
+
+    render(<ChargingPlacesWorkspace />);
+    fireEvent.click(screen.getByText('stub-select-first'));
+    expect(screen.getByTestId('stub-detail-panel')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('stub-close-detail'));
+    expect(screen.queryByTestId('stub-detail-panel')).not.toBeInTheDocument();
+  });
+
+  it('keeps the open panel\'s place live — re-deriving from the latest list query, not a stale snapshot', () => {
+    const { rerender } = render(<ChargingPlacesWorkspace />);
+    mockedPlaces.mockReturnValue({
+      data: [makePlace({ id: 4, archived_at: null })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    rerender(<ChargingPlacesWorkspace />);
+
+    fireEvent.click(screen.getByText('stub-select-first'));
+    expect(screen.getByTestId('stub-detail-panel')).toHaveTextContent('archived=false');
+
+    // Simulate the list refetching with the SAME place now archived (e.g.
+    // an archive mutation elsewhere invalidated the shared query cache).
+    mockedPlaces.mockReturnValue({
+      data: [makePlace({ id: 4, archived_at: '2026-06-01T00:00:00Z' })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    rerender(<ChargingPlacesWorkspace />);
+
+    expect(screen.getByTestId('stub-detail-panel')).toHaveTextContent('place=4 archived=true');
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.tsx b/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.tsx
new file mode 100644
index 0000000000..907bddc2f0
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.tsx
@@ -0,0 +1,85 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Zap } from 'lucide-react';
+
+import { GlassPanel, PanelTitle, Toggle } from '@/components/ui';
+import {
+  useGeofencesFull,
+  useGeofenceNeedsReview,
+  useGeofenceCurrentRates,
+} from '@/api/hooks/useLocations';
+import { NeedsSetupQueue } from './NeedsSetupQueue';
+import { PlacesTable } from './PlacesTable';
+import { PlaceDetailPanel } from './PlaceDetailPanel';
+import type { Geofence } from '@/api/types';
+
+/**
+ * Top-level Charging Places workspace — the "Needs Setup" queue for
+ * auto-discovered places, the full places list with each place's current
+ * rate, and (via {@link PlaceDetailPanel}) the rate history / add-a-rate
+ * / preview-apply / charging-activity detail view for whichever place is
+ * selected. Mounted as a section of `GeofencesPage`, alongside (not
+ * replacing) the existing zones/geofence management UI.
+ */
+export function ChargingPlacesWorkspace() {
+  const { t } = useTranslation();
+  const [selectedPlace, setSelectedPlace] = useState<Geofence | null>(null);
+  const [showArchived, setShowArchived] = useState(false);
+
+  const placesQuery = useGeofencesFull(showArchived);
+  const needsReviewQuery = useGeofenceNeedsReview();
+  const currentRatesQuery = useGeofenceCurrentRates();
+
+  const visiblePlaces = useMemo(() => {
+    const all = placesQuery.data ?? [];
+    return showArchived ? all : all.filter((p) => !p.archived_at);
+  }, [placesQuery.data, showArchived]);
+
+  // Keep the open detail panel's data fresh as the underlying list
+  // refetches (e.g. right after an archive/unarchive/reviewed mutation)
+  // instead of holding a stale snapshot from the moment it was opened.
+  const liveSelectedPlace = useMemo(() => {
+    if (!selectedPlace) return null;
+    return placesQuery.data?.find((p) => p.id === selectedPlace.id) ?? selectedPlace;
+  }, [selectedPlace, placesQuery.data]);
+
+  return (
+    <GlassPanel className="p-4 sm:p-6">
+      <PanelTitle className="mb-4 flex items-center gap-2 text-lg">
+        <Zap className="h-5 w-5 text-amber-300" aria-hidden="true" />
+        {t('chargingPlaces.workspace.title', 'Charging Places')}
+      </PanelTitle>
+
+      <div className="flex flex-col gap-4">
+        <NeedsSetupQueue
+          places={needsReviewQuery.data}
+          isLoading={needsReviewQuery.isLoading}
+          error={needsReviewQuery.error}
+          onRetry={() => void needsReviewQuery.refetch()}
+          onReview={setSelectedPlace}
+        />
+
+        <div className="flex items-center justify-end">
+          <Toggle
+            label={t('chargingPlaces.workspace.showArchived', 'Show archived')}
+            checked={showArchived}
+            onChange={setShowArchived}
+            size="sm"
+          />
+        </div>
+
+        <PlacesTable
+          places={visiblePlaces}
+          currentRates={currentRatesQuery.data}
+          isLoading={placesQuery.isLoading}
+          error={placesQuery.error}
+          onRetry={() => void placesQuery.refetch()}
+          onSelect={setSelectedPlace}
+          includesArchived={showArchived}
+        />
+      </div>
+
+      <PlaceDetailPanel place={liveSelectedPlace} onClose={() => setSelectedPlace(null)} />
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/ChargingSummaryPanel.test.tsx b/web/src/features/maps/components/charging-places/ChargingSummaryPanel.test.tsx
new file mode 100644
index 0000000000..1c0c8bf5bf
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/ChargingSummaryPanel.test.tsx
@@ -0,0 +1,115 @@
+/**
+ * ChargingSummaryPanel — priced charging-activity totals for one place,
+ * ALWAYS grouped by currency.
+ *
+ * Coverage:
+ *   1. Loading skeleton, error → QueryError + retry, empty state.
+ *   2. Renders one card per currency with its own session count / energy /
+ *      spend — and, critically, NEVER sums totals across currencies into a
+ *      single combined figure.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import type { ReactNode } from 'react';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown) => (typeof fallback === 'string' ? fallback : key),
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/hooks/useSettings', () => ({
+  useSettings: () => ({ locale: 'en-US' }),
+}));
+
+vi.mock('@/hooks/useUnits', () => ({
+  useUnits: () => ({ formatEnergy: (wh: number) => `${(wh / 1000).toFixed(1)} kWh` }),
+}));
+
+import { ChargingSummaryPanel } from './ChargingSummaryPanel';
+import type { GeofenceChargingSummary } from '@/api/types';
+
+function makeSummary(overrides: Partial<GeofenceChargingSummary> = {}): GeofenceChargingSummary {
+  return {
+    geofence_id: 7,
+    currency: 'USD',
+    session_count: 12,
+    total_energy_wh: 180_000,
+    total_cost_decimal: 21.6,
+    ...overrides,
+  };
+}
+
+function renderPanel(props: Partial<Parameters<typeof ChargingSummaryPanel>[0]> = {}) {
+  return render(
+    <MemoryRouter>
+      <ChargingSummaryPanel isLoading={false} {...props} />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  cleanup();
+});
+
+describe('ChargingSummaryPanel — loading/error/empty', () => {
+  it('shows a loading skeleton', () => {
+    const { container } = renderPanel({ isLoading: true });
+    expect(container.querySelector('.animate-pulse')).not.toBeNull();
+  });
+
+  it('surfaces a QueryError with a working retry on failure', () => {
+    const onRetry = vi.fn();
+    renderPanel({ error: new Error('boom'), onRetry });
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows the empty message when there is no priced activity yet', () => {
+    renderPanel({ summary: [] });
+    expect(screen.getByText('No priced charging activity at this place yet.')).toBeInTheDocument();
+  });
+});
+
+describe('ChargingSummaryPanel — currency grouping', () => {
+  it('renders session count, energy, and spend for a single currency', () => {
+    renderPanel({ summary: [makeSummary()] });
+
+    expect(screen.getByText('USD')).toBeInTheDocument();
+    expect(screen.getByText('12')).toBeInTheDocument();
+    expect(screen.getByText('180.0 kWh')).toBeInTheDocument();
+    expect(screen.getByText('$21.60')).toBeInTheDocument();
+  });
+
+  it('renders one card per currency and NEVER sums totals across currencies', () => {
+    renderPanel({
+      summary: [
+        makeSummary({ currency: 'USD', session_count: 10, total_energy_wh: 100_000, total_cost_decimal: 12 }),
+        makeSummary({ currency: 'EUR', session_count: 5, total_energy_wh: 50_000, total_cost_decimal: 6 }),
+      ],
+    });
+
+    expect(screen.getByText('USD')).toBeInTheDocument();
+    expect(screen.getByText('EUR')).toBeInTheDocument();
+    // Each currency keeps its own count/energy/spend...
+    expect(screen.getByText('10')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('100.0 kWh')).toBeInTheDocument();
+    expect(screen.getByText('50.0 kWh')).toBeInTheDocument();
+    expect(screen.getByText('$12.00')).toBeInTheDocument();
+    expect(screen.getByText('€6.00')).toBeInTheDocument();
+    // ...and no combined 15-session / 150 kWh / 18-unit figure appears anywhere.
+    expect(screen.queryByText('15')).not.toBeInTheDocument();
+    expect(screen.queryByText('150.0 kWh')).not.toBeInTheDocument();
+    expect(screen.queryByText('$18.00')).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/ChargingSummaryPanel.tsx b/web/src/features/maps/components/charging-places/ChargingSummaryPanel.tsx
new file mode 100644
index 0000000000..7354a85c6c
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/ChargingSummaryPanel.tsx
@@ -0,0 +1,86 @@
+import { useTranslation } from 'react-i18next';
+import { Coins } from 'lucide-react';
+
+import { GlassPanel, PanelTitle, Badge } from '@/components/ui';
+import { Skeleton, EmptyState, QueryError } from '@/components/feedback';
+import { MetricTile } from '@/components/data-display';
+import { useSettings } from '@/hooks/useSettings';
+import { useUnits } from '@/hooks/useUnits';
+import { formatCurrencyValue } from '@/lib/currencyFormat';
+import type { GeofenceChargingSummary } from '@/api/types';
+
+export interface ChargingSummaryPanelProps {
+  summary?: GeofenceChargingSummary[];
+  isLoading: boolean;
+  error?: unknown;
+  onRetry?: () => void;
+}
+
+/**
+ * Priced charging-activity totals for one place, ALWAYS grouped by
+ * currency — every currency this place has ever billed in gets its own
+ * card. Different currencies are never summed into a single total (a
+ * multi-currency place — e.g. relocated hardware, or rate corrections
+ * mid-trip abroad — would otherwise silently misreport spend).
+ */
+export function ChargingSummaryPanel({ summary, isLoading, error, onRetry }: ChargingSummaryPanelProps) {
+  const { t } = useTranslation();
+  const { locale } = useSettings();
+  const { formatEnergy } = useUnits();
+  const rows = summary ?? [];
+
+  return (
+    <GlassPanel className="p-4 sm:p-5">
+      <PanelTitle className="mb-3 flex items-center gap-2">
+        <Coins className="h-4 w-4 text-emerald-300" aria-hidden="true" />
+        {t('chargingPlaces.summary.title', 'Charging Summary')}
+      </PanelTitle>
+
+      {error ? (
+        <QueryError error={error} onRetry={onRetry} resourceName={t('chargingPlaces.summary.title', 'Charging Summary')} />
+      ) : isLoading ? (
+        <Skeleton className="h-24 w-full" />
+      ) : rows.length === 0 ? (
+        <>
+          {/* no-action: the summary fills automatically as sessions at this place are priced. */}
+          <EmptyState
+            message={t('chargingPlaces.summary.empty', 'No priced charging activity at this place yet.')}
+          />
+        </>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {rows.map((row) => (
+            <div
+              key={row.currency}
+              className="rounded-lg border border-[var(--glass-border)] bg-[var(--surface-2)] p-3"
+            >
+              <div className="mb-2 flex items-center gap-2">
+                <Badge variant="neutral" size="sm">
+                  {row.currency}
+                </Badge>
+              </div>
+              <div className="grid grid-cols-3 gap-3">
+                <MetricTile
+                  value={row.session_count}
+                  label={t('chargingPlaces.summary.sessions', 'Sessions')}
+                  align="start"
+                />
+                <MetricTile
+                  value={formatEnergy(row.total_energy_wh)}
+                  label={t('chargingPlaces.summary.energy', 'Energy')}
+                  align="start"
+                />
+                <MetricTile
+                  value={formatCurrencyValue(row.total_cost_decimal, row.currency, locale, 2, { useGrouping: true })}
+                  label={t('chargingPlaces.summary.spend', 'Spend')}
+                  align="start"
+                  accentClass="text-emerald-300"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/NeedsSetupQueue.test.tsx b/web/src/features/maps/components/charging-places/NeedsSetupQueue.test.tsx
new file mode 100644
index 0000000000..b144ebee14
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/NeedsSetupQueue.test.tsx
@@ -0,0 +1,132 @@
+/**
+ * NeedsSetupQueue — the auto-discovered "Needs Setup" queue.
+ *
+ * Coverage:
+ *   1. Loading skeleton, no rows/count badge rendered.
+ *   2. Error → QueryError with a working retry.
+ *   3. Empty → the "all caught up" EmptyState message, no count badge.
+ *   4. Rows: name (with "Unnamed place" fallback), category badge (with
+ *      "Uncategorized" fallback for a null category), relative discovered-at
+ *      timestamp, and the queue-length count badge.
+ *   5. Clicking "Review" invokes `onReview` with the exact row's place object.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import type { ReactNode } from 'react';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown) => (typeof fallback === 'string' ? fallback : key),
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/components/data-display', () => ({
+  TimeStamp: ({ value }: { value: unknown }) => <span data-testid="discovered-at">{String(value)}</span>,
+}));
+
+import { NeedsSetupQueue } from './NeedsSetupQueue';
+import type { Geofence } from '@/api/types';
+
+function makePlace(overrides: Partial<Geofence> = {}): Geofence {
+  return {
+    id: 1,
+    name: 'Provisional Place',
+    polygon_wkt: 'POLYGON((0 0,0 0,0 0,0 0))',
+    category: null,
+    enabled: true,
+    alert_on_entry: false,
+    alert_on_exit: false,
+    origin: 'charging_discovery',
+    needs_review: true,
+    archived_at: null,
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z',
+    latitude: 40,
+    longitude: -74,
+    radius: 75,
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  cleanup();
+});
+
+function renderQueue(props: Partial<Parameters<typeof NeedsSetupQueue>[0]> = {}) {
+  return render(
+    <MemoryRouter>
+      <NeedsSetupQueue isLoading={false} onReview={vi.fn()} {...props} />
+    </MemoryRouter>,
+  );
+}
+
+describe('NeedsSetupQueue — loading/error/empty', () => {
+  it('shows a loading skeleton with no rows or count badge', () => {
+    const { container } = renderQueue({ isLoading: true });
+    expect(container.querySelector('.animate-pulse')).not.toBeNull();
+    expect(screen.queryByText('Review')).not.toBeInTheDocument();
+  });
+
+  it('surfaces a QueryError with a working retry on failure', () => {
+    const onRetry = vi.fn();
+    renderQueue({ isLoading: false, error: new Error('boom'), onRetry });
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows the "all caught up" empty state and no count badge when there are no rows', () => {
+    renderQueue({ isLoading: false, places: [] });
+
+    expect(
+      screen.getByText('All caught up — no auto-discovered places need review.'),
+    ).toBeInTheDocument();
+    // The title itself always renders; only the numeric count Badge is conditional.
+    expect(screen.queryByText('0')).not.toBeInTheDocument();
+  });
+});
+
+describe('NeedsSetupQueue — rows', () => {
+  it('renders name, category fallback, discovered-at, and the queue count badge', () => {
+    renderQueue({ places: [makePlace({ name: '', category: null })] });
+
+    expect(screen.getByText('Unnamed place')).toBeInTheDocument();
+    expect(screen.getByText('Uncategorized')).toBeInTheDocument();
+    expect(screen.getByTestId('discovered-at')).toHaveTextContent('2026-01-01T00:00:00Z');
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('renders a localized category label when the place has one', () => {
+    renderQueue({ places: [makePlace({ category: 'home' })] });
+    // The i18n stub falls back to the fallback string ("home") since no
+    // translation catalog is loaded in this test.
+    expect(screen.getByText('home')).toBeInTheDocument();
+  });
+
+  it('invokes onReview with the exact place object when "Review" is clicked', () => {
+    const onReview = vi.fn();
+    const place = makePlace({ id: 42, name: 'Costco Supercharger' });
+    renderQueue({ places: [place], onReview });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Review' }));
+    expect(onReview).toHaveBeenCalledTimes(1);
+    expect(onReview).toHaveBeenCalledWith(place);
+  });
+
+  it('renders one row + one Review button per place, and a count badge matching the row count', () => {
+    renderQueue({
+      places: [makePlace({ id: 1, name: 'Place A' }), makePlace({ id: 2, name: 'Place B' })],
+    });
+
+    expect(screen.getAllByRole('button', { name: 'Review' })).toHaveLength(2);
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/NeedsSetupQueue.tsx b/web/src/features/maps/components/charging-places/NeedsSetupQueue.tsx
new file mode 100644
index 0000000000..6e4a9a8b5e
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/NeedsSetupQueue.tsx
@@ -0,0 +1,88 @@
+import { useTranslation } from 'react-i18next';
+import { Sparkles } from 'lucide-react';
+
+import { GlassPanel, PanelTitle, Badge, Button, Text } from '@/components/ui';
+import { InlineCallout, Skeleton, QueryError } from '@/components/feedback';
+import { TimeStamp } from '@/components/data-display';
+import type { Geofence } from '@/api/types';
+
+export interface NeedsSetupQueueProps {
+  places?: Geofence[];
+  isLoading: boolean;
+  error?: unknown;
+  onRetry?: () => void;
+  /** Opens the place-detail panel focused on this auto-discovered place. */
+  onReview: (place: Geofence) => void;
+}
+
+/**
+ * "Needs Setup" queue — auto-discovered charging-place geofences
+ * (`origin: 'charging_discovery'`, `needs_review: true`) awaiting a human
+ * to confirm/edit name, category, and location. Oldest first (matches the
+ * backend's `ListNeedsReview` ordering) so the longest-unreviewed
+ * provisional place surfaces at the top.
+ */
+export function NeedsSetupQueue({ places, isLoading, error, onRetry, onReview }: NeedsSetupQueueProps) {
+  const { t } = useTranslation();
+  const rows = places ?? [];
+
+  return (
+    <GlassPanel className="p-4 sm:p-5">
+      <PanelTitle className="mb-3 flex items-center gap-2">
+        <Sparkles className="h-4 w-4 text-amber-300" aria-hidden="true" />
+        {t('chargingPlaces.needsSetup.title', 'Needs Setup')}
+        {rows.length > 0 && (
+          <Badge variant="warning" size="sm">
+            {rows.length}
+          </Badge>
+        )}
+      </PanelTitle>
+
+      {error ? (
+        <QueryError
+          error={error}
+          onRetry={onRetry}
+          resourceName={t('chargingPlaces.needsSetup.title', 'Needs Setup')}
+        />
+      ) : isLoading ? (
+        <Skeleton className="h-24 w-full" />
+      ) : rows.length === 0 ? (
+        <InlineCallout variant="success">
+          {t(
+            'chargingPlaces.needsSetup.empty',
+            'All caught up — no auto-discovered places need review.',
+          )}
+        </InlineCallout>
+      ) : (
+        <ul className="flex flex-col gap-2" aria-label={t('chargingPlaces.needsSetup.title', 'Needs Setup')}>
+          {rows.map((place) => (
+            <li
+              key={place.id}
+              className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-[var(--glass-border)] bg-[var(--surface-2)] px-3 py-2"
+            >
+              <div className="flex min-w-0 flex-col">
+                <Text variant="body" className="truncate font-medium">
+                  {place.name || t('chargingPlaces.unnamed', 'Unnamed place')}
+                </Text>
+                <Text size="sm" color="muted">
+                  {t('chargingPlaces.discoveredAt', 'Discovered')}{' '}
+                  <TimeStamp value={place.created_at} format="relative" />
+                </Text>
+              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                <Badge variant="neutral" size="sm">
+                  {place.category
+                    ? t(`chargingPlaces.category.${place.category}`, place.category)
+                    : t('chargingPlaces.category.unset', 'Uncategorized')}
+                </Badge>
+                <Button size="sm" variant="primary" onClick={() => onReview(place)}>
+                  {t('chargingPlaces.needsSetup.review', 'Review')}
+                </Button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx b/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
new file mode 100644
index 0000000000..898e72ccf8
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
@@ -0,0 +1,381 @@
+/**
+ * PlaceDetailPanel — the per-place detail workspace (Modal + Tabs) wiring
+ * rate history / add-a-rate / preview-apply / charging-activity for ONE
+ * geofence, plus archive/unarchive/mark-reviewed lifecycle actions.
+ *
+ * The five content panels (RateForm, RateHistoryPanel, PreviewApplyPanel,
+ * ChargingSummaryPanel, ChargingActivityList) each carry their own
+ * dedicated test suite — here they are replaced with prop-echoing stubs so
+ * these tests stay focused on PlaceDetailPanel's OWN contract: which panel
+ * renders under which tab, the auto-select-open-rate behaviour, delete
+ * wiring, and the archive/unarchive/mark-reviewed lifecycle buttons.
+ *
+ * Coverage:
+ *   1. Renders nothing when `place` is null.
+ *   2. Modal title uses the place name (with "Unnamed place" fallback).
+ *   3. "Needs review" badge + "Mark reviewed" only when `needs_review`;
+ *      clicking invokes the mutation with the place id.
+ *   4. Archive/Restore toggle based on `archived_at`; clicking invokes the
+ *      matching mutation with the place id.
+ *   5. Tab switching: "Rates & Pricing" (default) shows RateForm/
+ *      RateHistoryPanel/PreviewApplyPanel; "Charging Activity" shows
+ *      ChargingSummaryPanel/ChargingActivityList.
+ *   6. Auto-selects the rate active now. A future open-ended schedule is
+ *      available for preview but is not passed to RateForm as current.
+ *   7. RateHistoryPanel's onDelete wiring calls the delete mutation with
+ *      `{ geofenceId, rateId }`.
+ *   8. Selecting a different rate from history feeds PreviewApplyPanel.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, cleanup, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown, options?: Record<string, unknown>) => {
+        if (typeof fallback !== 'string') return key;
+        return fallback.replace(/\{\{(\w+)\}\}/g, (_, name: string) =>
+          String(options?.[name] ?? `{{${name}}}`),
+        );
+      },
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/api/hooks/useLocations', () => ({
+  useGeofenceRates: vi.fn(),
+  useDeleteGeofenceRate: vi.fn(),
+  useArchiveGeofence: vi.fn(),
+  useUnarchiveGeofence: vi.fn(),
+  useMarkGeofenceReviewed: vi.fn(),
+  useGeofenceChargingSummary: vi.fn(),
+  useRenameGeofence: vi.fn(),
+}));
+
+vi.mock('@/components/feedback/Toast', () => ({
+  useToast: () => ({
+    toast: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warning: vi.fn(),
+    dismiss: vi.fn(),
+  }),
+}));
+
+vi.mock('./RateForm', () => ({
+  RateForm: ({ geofenceId, currentRate }: { geofenceId: number; currentRate?: { id: number } | null }) => (
+    <div data-testid="stub-rate-form">{`RateForm geofenceId=${geofenceId} currentRate=${currentRate?.id ?? 'none'}`}</div>
+  ),
+}));
+
+vi.mock('./RateHistoryPanel', () => ({
+  RateHistoryPanel: ({
+    rates,
+    selectedRateId,
+    onSelectRate,
+    onDelete,
+  }: {
+    rates?: { id: number }[];
+    selectedRateId?: number | null;
+    onSelectRate: (r: { id: number }) => void;
+    onDelete: (r: { id: number }) => void;
+  }) => (
+    <div data-testid="stub-rate-history">
+      {`RateHistoryPanel rates=${rates?.length ?? 0} selected=${selectedRateId ?? 'none'}`}
+      <a href="#select-second-rate" onClick={() => rates?.[1] && onSelectRate(rates[1])}>stub-select-second-rate</a>
+      <a href="#delete-first-rate" onClick={() => rates?.[0] && onDelete(rates[0])}>stub-delete-first-rate</a>
+    </div>
+  ),
+}));
+
+vi.mock('./PreviewApplyPanel', () => ({
+  PreviewApplyPanel: ({ geofenceId, rate }: { geofenceId: number; rate: { id: number } | null }) => (
+    <div data-testid="stub-preview-apply">{`PreviewApplyPanel geofenceId=${geofenceId} rate=${rate?.id ?? 'none'}`}</div>
+  ),
+}));
+
+vi.mock('./ChargingSummaryPanel', () => ({
+  ChargingSummaryPanel: ({ summary }: { summary?: unknown[] }) => (
+    <div data-testid="stub-summary">{`ChargingSummaryPanel rows=${summary?.length ?? 0}`}</div>
+  ),
+}));
+
+vi.mock('./ChargingActivityList', () => ({
+  ChargingActivityList: ({ geofenceId }: { geofenceId: number }) => (
+    <div data-testid="stub-activity">{`ChargingActivityList geofenceId=${geofenceId}`}</div>
+  ),
+}));
+
+import {
+  useGeofenceRates,
+  useDeleteGeofenceRate,
+  useArchiveGeofence,
+  useUnarchiveGeofence,
+  useMarkGeofenceReviewed,
+  useGeofenceChargingSummary,
+  useRenameGeofence,
+} from '@/api/hooks/useLocations';
+import { PlaceDetailPanel } from './PlaceDetailPanel';
+import type { Geofence, GeofenceRate } from '@/api/types';
+
+const mockedRates = useGeofenceRates as unknown as ReturnType<typeof vi.fn>;
+const mockedDeleteRate = useDeleteGeofenceRate as unknown as ReturnType<typeof vi.fn>;
+const mockedArchive = useArchiveGeofence as unknown as ReturnType<typeof vi.fn>;
+const mockedUnarchive = useUnarchiveGeofence as unknown as ReturnType<typeof vi.fn>;
+const mockedMarkReviewed = useMarkGeofenceReviewed as unknown as ReturnType<typeof vi.fn>;
+const mockedSummary = useGeofenceChargingSummary as unknown as ReturnType<typeof vi.fn>;
+const mockedRename = useRenameGeofence as unknown as ReturnType<typeof vi.fn>;
+
+let deleteMutate: ReturnType<typeof vi.fn>;
+let archiveMutate: ReturnType<typeof vi.fn>;
+let unarchiveMutate: ReturnType<typeof vi.fn>;
+let markReviewedMutate: ReturnType<typeof vi.fn>;
+let renameMutateAsync: ReturnType<typeof vi.fn>;
+
+function makePlace(overrides: Partial<Geofence> = {}): Geofence {
+  return {
+    id: 7,
+    name: 'Home',
+    polygon_wkt: 'POLYGON((0 0,0 0,0 0,0 0))',
+    category: 'home',
+    enabled: true,
+    alert_on_entry: false,
+    alert_on_exit: false,
+    origin: 'manual',
+    needs_review: false,
+    archived_at: null,
+    created_at: '2020-01-01T00:00:00Z',
+    updated_at: '2020-01-01T00:00:00Z',
+    latitude: 40,
+    longitude: -74,
+    radius: 50,
+    ...overrides,
+  };
+}
+
+function makeRate(overrides: Partial<GeofenceRate> = {}): GeofenceRate {
+  return {
+    id: 1,
+    geofence_id: 7,
+    rate_per_wh: 0.0001,
+    currency: 'USD',
+    effective_from: '2020-01-01T00:00:00Z',
+    effective_to: null,
+    created_at: '2020-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  deleteMutate = vi.fn();
+  archiveMutate = vi.fn();
+  unarchiveMutate = vi.fn();
+  markReviewedMutate = vi.fn();
+  renameMutateAsync = vi.fn().mockResolvedValue(undefined);
+
+  mockedRates.mockReturnValue({ data: [], isLoading: false, error: null, refetch: vi.fn() });
+  mockedSummary.mockReturnValue({ data: [], isLoading: false, error: null, refetch: vi.fn() });
+  mockedDeleteRate.mockReturnValue({ mutate: deleteMutate, isPending: false });
+  mockedArchive.mockReturnValue({ mutate: archiveMutate, isPending: false });
+  mockedUnarchive.mockReturnValue({ mutate: unarchiveMutate, isPending: false });
+  mockedMarkReviewed.mockReturnValue({ mutate: markReviewedMutate, isPending: false });
+  mockedRename.mockReturnValue({ mutateAsync: renameMutateAsync, isPending: false });
+});
+
+describe('PlaceDetailPanel — closed state', () => {
+  it('renders nothing when place is null', () => {
+    const { container } = render(<PlaceDetailPanel place={null} onClose={vi.fn()} />);
+    expect(container.firstChild).toBeNull();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});
+
+describe('PlaceDetailPanel — header', () => {
+  it('titles the modal with the place name', () => {
+    render(<PlaceDetailPanel place={makePlace({ name: 'Costco Supercharger' })} onClose={vi.fn()} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Costco Supercharger' }),
+    ).toBeInTheDocument();
+  });
+
+  it('falls back to "Unnamed place" when the name is empty', () => {
+    render(<PlaceDetailPanel place={makePlace({ name: '' })} onClose={vi.fn()} />);
+    expect(screen.getByText('Unnamed place')).toBeInTheDocument();
+  });
+
+  it('renames the place through the canonical geofence mutation', async () => {
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Rename Home' }));
+    const input = screen.getByRole('textbox', { name: 'Rename Home' });
+    fireEvent.change(input, { target: { value: 'Office Charger' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    await waitFor(() =>
+      expect(renameMutateAsync).toHaveBeenCalledWith({
+        geofenceId: 7,
+        name: 'Office Charger',
+      }),
+    );
+  });
+});
+
+describe('PlaceDetailPanel — needs-review lifecycle', () => {
+  it('shows the needs-review badge and Mark reviewed button when needs_review is true', () => {
+    render(<PlaceDetailPanel place={makePlace({ needs_review: true })} onClose={vi.fn()} />);
+    expect(screen.getByText('Needs review')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Mark reviewed' })).toBeInTheDocument();
+  });
+
+  it('omits the needs-review badge/button when needs_review is false', () => {
+    render(<PlaceDetailPanel place={makePlace({ needs_review: false })} onClose={vi.fn()} />);
+    expect(screen.queryByText('Needs review')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Mark reviewed' })).not.toBeInTheDocument();
+  });
+
+  it('calls the mark-reviewed mutation with the place id when clicked', () => {
+    render(<PlaceDetailPanel place={makePlace({ id: 42, needs_review: true })} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Mark reviewed' }));
+    expect(markReviewedMutate).toHaveBeenCalledWith(42);
+  });
+});
+
+describe('PlaceDetailPanel — archive lifecycle', () => {
+  it('shows an Archive button for an active place and calls the archive mutation with its id', () => {
+    const onClose = vi.fn();
+    archiveMutate.mockImplementation((_id, options) => options?.onSuccess?.());
+    render(<PlaceDetailPanel place={makePlace({ id: 5, archived_at: null })} onClose={onClose} />);
+    const btn = screen.getByRole('button', { name: 'Archive' });
+    fireEvent.click(btn);
+    expect(archiveMutate).toHaveBeenCalledWith(5, expect.objectContaining({ onSuccess: onClose }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole('button', { name: 'Restore' })).not.toBeInTheDocument();
+  });
+
+  it('shows a Restore button for an archived place and calls the unarchive mutation with its id', () => {
+    render(<PlaceDetailPanel place={makePlace({ id: 5, archived_at: '2026-06-01T00:00:00Z' })} onClose={vi.fn()} />);
+    const btn = screen.getByRole('button', { name: 'Restore' });
+    fireEvent.click(btn);
+    expect(unarchiveMutate).toHaveBeenCalledWith(5);
+    expect(screen.queryByRole('button', { name: 'Archive' })).not.toBeInTheDocument();
+  });
+});
+
+describe('PlaceDetailPanel — tabs', () => {
+  it('defaults to the Rates & Pricing tab, showing rate form/history/preview panels', () => {
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+
+    expect(screen.getByTestId('stub-rate-form')).toBeInTheDocument();
+    expect(screen.getByTestId('stub-rate-history')).toBeInTheDocument();
+    expect(screen.getByTestId('stub-preview-apply')).toBeInTheDocument();
+    expect(screen.queryByTestId('stub-summary')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('stub-activity')).not.toBeInTheDocument();
+  });
+
+  it('switches to the Charging Activity tab, showing summary/activity panels', () => {
+    render(<PlaceDetailPanel place={makePlace({ id: 11 })} onClose={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Charging Activity' }));
+
+    expect(screen.getByTestId('stub-summary')).toBeInTheDocument();
+    expect(screen.getByTestId('stub-activity')).toHaveTextContent('geofenceId=11');
+    expect(screen.queryByTestId('stub-rate-form')).not.toBeInTheDocument();
+  });
+});
+
+describe('PlaceDetailPanel — rate selection', () => {
+  it('prefers the rate active now over a future open-ended schedule', () => {
+    mockedRates.mockReturnValue({
+      data: [
+        makeRate({
+          id: 1,
+          effective_from: '2020-01-01T00:00:00Z',
+          effective_to: '2021-01-01T00:00:00Z',
+        }),
+        makeRate({
+          id: 2,
+          effective_from: '2099-01-01T00:00:00Z',
+          effective_to: null,
+        }),
+        makeRate({
+          id: 3,
+          effective_from: '2021-01-01T00:00:00Z',
+          effective_to: '2098-01-01T00:00:00Z',
+        }),
+      ],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+
+    expect(screen.getByTestId('stub-rate-form')).toHaveTextContent('currentRate=3');
+    expect(screen.getByTestId('stub-preview-apply')).toHaveTextContent('rate=3');
+  });
+
+  it('previews a future schedule without treating it as the current rate', () => {
+    mockedRates.mockReturnValue({
+      data: [makeRate({ id: 2, effective_from: '2099-01-01T00:00:00Z', effective_to: null })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+
+    expect(screen.getByTestId('stub-rate-form')).toHaveTextContent('currentRate=none');
+    expect(screen.getByTestId('stub-preview-apply')).toHaveTextContent('rate=2');
+  });
+
+  it('does not auto-select a rate when all intervals are historical', () => {
+    mockedRates.mockReturnValue({
+      data: [makeRate({ id: 1, effective_to: '2021-01-01T00:00:00Z' })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+
+    expect(screen.getByTestId('stub-rate-form')).toHaveTextContent('currentRate=none');
+    expect(screen.getByTestId('stub-preview-apply')).toHaveTextContent('rate=none');
+  });
+
+  it('feeds a manually-selected rate from history into PreviewApplyPanel', () => {
+    mockedRates.mockReturnValue({
+      data: [makeRate({ id: 1, effective_to: '2026-08-27T00:00:00Z' }), makeRate({ id: 2, effective_to: null })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByText('stub-select-second-rate'));
+
+    expect(screen.getByTestId('stub-preview-apply')).toHaveTextContent('rate=2');
+  });
+
+  it('wires RateHistoryPanel\'s onDelete to the delete mutation with {geofenceId, rateId}', () => {
+    mockedRates.mockReturnValue({
+      data: [makeRate({ id: 3 })],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    render(<PlaceDetailPanel place={makePlace({ id: 77 })} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByText('stub-delete-first-rate'));
+
+    expect(deleteMutate).toHaveBeenCalledWith({ geofenceId: 77, rateId: 3 });
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx b/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
new file mode 100644
index 0000000000..8540bf604b
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Archive, ArchiveRestore, CheckCircle2 } from 'lucide-react';
+
+import { Modal, Button, Tabs, Badge, Text, EditableText, Label } from '@/components/ui';
+import {
+  useGeofenceRates,
+  useDeleteGeofenceRate,
+  useArchiveGeofence,
+  useUnarchiveGeofence,
+  useMarkGeofenceReviewed,
+  useGeofenceChargingSummary,
+  useRenameGeofence,
+} from '@/api/hooks/useLocations';
+import { RateHistoryPanel } from './RateHistoryPanel';
+import { RateForm } from './RateForm';
+import { PreviewApplyPanel } from './PreviewApplyPanel';
+import { ChargingSummaryPanel } from './ChargingSummaryPanel';
+import { ChargingActivityList } from './ChargingActivityList';
+import { isRateActiveAt, isRateOpen } from './helpers';
+import type { Geofence, GeofenceRate } from '@/api/types';
+
+export interface PlaceDetailPanelProps {
+  /** The place being configured, or `null` when the panel is closed. */
+  place: Geofence | null;
+  onClose: () => void;
+}
+
+type DetailTab = 'pricing' | 'activity';
+
+/**
+ * The Charging Place detail workspace — opened from either the "Needs
+ * Setup" queue or the main places table. Combines rate history, the
+ * add-a-rate form, the explicit preview/apply backfill flow, and
+ * read-only charging activity/summary views for ONE geofence, plus the
+ * archive/unarchive/mark-reviewed lifecycle actions.
+ */
+export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
+  const { t } = useTranslation();
+  const [tab, setTab] = useState<DetailTab>('pricing');
+  const [selectedRate, setSelectedRate] = useState<GeofenceRate | null>(null);
+
+  const ratesQuery = useGeofenceRates(place?.id);
+  const summaryQuery = useGeofenceChargingSummary(place?.id);
+  const deleteRate = useDeleteGeofenceRate();
+  const archive = useArchiveGeofence();
+  const unarchive = useUnarchiveGeofence();
+  const markReviewed = useMarkGeofenceReviewed();
+  const rename = useRenameGeofence();
+
+  // Reset per-place UI state whenever a different place opens, and default
+  // to the rate active now. A future open-ended schedule is only a fallback
+  // preview selection; it is not treated as the current rate.
+  useEffect(() => {
+    setTab('pricing');
+    setSelectedRate(null);
+  }, [place?.id]);
+
+  useEffect(() => {
+    const rates = ratesQuery.data ?? [];
+    if (selectedRate != null && rates.some((rate) => rate.id === selectedRate.id)) {
+      return;
+    }
+    const preferred = rates.find((rate) => isRateActiveAt(rate)) ??
+      rates.find(isRateOpen) ??
+      null;
+    setSelectedRate(preferred);
+  }, [ratesQuery.data, selectedRate]);
+
+  if (!place) return null;
+
+  const currentRate = (ratesQuery.data ?? []).find((rate) => isRateActiveAt(rate)) ?? null;
+
+  const handleMarkReviewed = () => {
+    markReviewed.mutate(place.id);
+  };
+
+  return (
+    <Modal
+      open={place != null}
+      onClose={onClose}
+      size="lg"
+      title={place.name || t('chargingPlaces.unnamed', 'Unnamed place')}
+    >
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        {place.needs_review && (
+          <>
+            <Badge variant="warning" size="sm">
+              {t('chargingPlaces.detail.needsReviewBadge', 'Needs review')}
+            </Badge>
+            <Button
+              size="sm"
+              variant="secondary"
+              icon={<CheckCircle2 className="h-4 w-4" aria-hidden="true" />}
+              onClick={handleMarkReviewed}
+              loading={markReviewed.isPending}
+            >
+              {t('chargingPlaces.detail.markReviewed', 'Mark reviewed')}
+            </Button>
+          </>
+        )}
+        {place.archived_at ? (
+          <Button
+            size="sm"
+            variant="secondary"
+            icon={<ArchiveRestore className="h-4 w-4" aria-hidden="true" />}
+            onClick={() => unarchive.mutate(place.id)}
+            loading={unarchive.isPending}
+          >
+            {t('chargingPlaces.detail.unarchive', 'Restore')}
+          </Button>
+        ) : (
+          <Button
+            size="sm"
+            variant="outline"
+            icon={<Archive className="h-4 w-4" aria-hidden="true" />}
+            onClick={() => archive.mutate(place.id, { onSuccess: onClose })}
+            loading={archive.isPending}
+          >
+            {t('chargingPlaces.detail.archive', 'Archive')}
+          </Button>
+        )}
+      </div>
+
+      <div className="mb-4">
+        <Label>{t('chargingPlaces.detail.placeName', 'Place name')}</Label>
+        <EditableText
+          value={place.name}
+          variant="heading"
+          maxLength={120}
+          ariaLabel={t('chargingPlaces.detail.rename', 'Rename {{name}}', { name: place.name })}
+          validate={(next) =>
+            next.length > 120
+              ? t('geofences.error.nameTooLong', 'Max 120 characters')
+              : null
+          }
+          onSave={async (name) => {
+            await rename.mutateAsync({ geofenceId: place.id, name });
+          }}
+        />
+      </div>
+
+      <Tabs
+        className="mb-4"
+        tabs={[
+          { key: 'pricing', label: t('chargingPlaces.detail.pricingTab', 'Rates & Pricing') },
+          { key: 'activity', label: t('chargingPlaces.detail.activityTab', 'Charging Activity') },
+        ]}
+        activeTab={tab}
+        onChange={(k) => setTab(k as DetailTab)}
+        ariaLabel={t('chargingPlaces.detail.tabsLabel', 'Charging place detail sections')}
+      />
+
+      {tab === 'pricing' ? (
+        <div className="flex flex-col gap-4">
+          <Text size="sm" color="muted">
+            {t(
+              'chargingPlaces.detail.pricingIntro',
+              'Rate changes never rewrite protected actual costs. The rate active today estimates older unpriced sessions automatically; use preview and apply when you have exact historical rates.',
+            )}
+          </Text>
+          <RateForm geofenceId={place.id} currentRate={currentRate} />
+          <RateHistoryPanel
+            rates={ratesQuery.data}
+            isLoading={ratesQuery.isLoading}
+            error={ratesQuery.error}
+            onRetry={() => void ratesQuery.refetch()}
+            selectedRateId={selectedRate?.id}
+            onSelectRate={setSelectedRate}
+            onDelete={(r) => deleteRate.mutate({ geofenceId: place.id, rateId: r.id })}
+            deletePending={deleteRate.isPending}
+          />
+          <PreviewApplyPanel geofenceId={place.id} rate={selectedRate} />
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4">
+          <ChargingSummaryPanel
+            summary={summaryQuery.data}
+            isLoading={summaryQuery.isLoading}
+            error={summaryQuery.error}
+            onRetry={() => void summaryQuery.refetch()}
+          />
+          <ChargingActivityList geofenceId={place.id} />
+        </div>
+      )}
+    </Modal>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/PlacesTable.test.tsx b/web/src/features/maps/components/charging-places/PlacesTable.test.tsx
new file mode 100644
index 0000000000..44ba364db4
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/PlacesTable.test.tsx
@@ -0,0 +1,185 @@
+/**
+ * PlacesTable — the full Charging Places list with each place's currently
+ * -active rate resolved from a bulk lookup (never a per-row fetch).
+ *
+ * Coverage:
+ *   1. Loading skeleton, error → QueryError + retry, empty (both the
+ *      active-only and includes-archived empty copies).
+ *   2. Renders name (with "Unnamed place" fallback), an "Archived" badge
+ *      only for archived rows, origin badge (manual vs auto-discovered),
+ *      category (with "Uncategorized" fallback), and "Manage" per row.
+ *   3. Resolves each row's rate via `currentRates` keyed by `geofence_id`
+ *      — "Not set" when a place has no row in the bulk lookup.
+ *   4. Clicking "Manage" invokes `onSelect` with the exact place.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import type { ReactNode } from 'react';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown) => (typeof fallback === 'string' ? fallback : key),
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/hooks/useSettings', () => ({
+  useSettings: () => ({ locale: 'en-US' }),
+}));
+
+vi.mock('@/components/data-display', () => ({
+  TimeStamp: ({ value }: { value: unknown }) => <span data-testid="effective-since">{String(value)}</span>,
+}));
+
+import { PlacesTable } from './PlacesTable';
+import type { Geofence, GeofenceRate } from '@/api/types';
+
+function makePlace(overrides: Partial<Geofence> = {}): Geofence {
+  return {
+    id: 1,
+    name: 'Home',
+    polygon_wkt: 'POLYGON((0 0,0 0,0 0,0 0))',
+    category: 'home',
+    enabled: true,
+    alert_on_entry: false,
+    alert_on_exit: false,
+    origin: 'manual',
+    needs_review: false,
+    archived_at: null,
+    created_at: '2020-01-01T00:00:00Z',
+    updated_at: '2020-01-01T00:00:00Z',
+    latitude: 40,
+    longitude: -74,
+    radius: 50,
+    ...overrides,
+  };
+}
+
+function makeRate(overrides: Partial<GeofenceRate> = {}): GeofenceRate {
+  return {
+    id: 1,
+    geofence_id: 1,
+    rate_per_wh: 0.00012,
+    currency: 'USD',
+    effective_from: '2026-08-27T00:00:00Z',
+    effective_to: null,
+    created_at: '2026-08-27T00:00:00Z',
+    ...overrides,
+  };
+}
+
+function renderTable(props: Partial<Parameters<typeof PlacesTable>[0]> = {}) {
+  return render(
+    <MemoryRouter>
+      <PlacesTable isLoading={false} onSelect={vi.fn()} {...props} />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  cleanup();
+});
+
+describe('PlacesTable — loading/error/empty', () => {
+  it('shows a loading skeleton when loading with no rows yet', () => {
+    const { container } = renderTable({ isLoading: true });
+    expect(container.querySelector('.animate-pulse')).not.toBeNull();
+  });
+
+  it('surfaces a QueryError with a working retry on failure', () => {
+    const onRetry = vi.fn();
+    renderTable({ error: new Error('boom'), onRetry });
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows the active-only empty copy by default', () => {
+    renderTable({ places: [] });
+    expect(
+      screen.getByText(
+        'No active charging places yet. Existing and future confirmed charging locations appear automatically.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('shows the includes-archived empty copy when includesArchived is true', () => {
+    renderTable({ places: [], includesArchived: true });
+    expect(
+      screen.getByText(
+        'No charging places yet. Charge somewhere or create a geofence above to start tracking costs.',
+      ),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('PlacesTable — rows', () => {
+  it('renders name, origin, category, and Manage for a manual place with no rate', () => {
+    renderTable({ places: [makePlace()] });
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Manual')).toBeInTheDocument();
+    expect(screen.getByText('home')).toBeInTheDocument();
+    expect(screen.getByText('Not set')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Manage' })).toBeInTheDocument();
+  });
+
+  it('falls back to "Unnamed place" and "Uncategorized" when both are empty', () => {
+    renderTable({ places: [makePlace({ name: '', category: null })] });
+    expect(screen.getByText('Unnamed place')).toBeInTheDocument();
+    expect(screen.getByText('Uncategorized')).toBeInTheDocument();
+  });
+
+  it('badges an auto-discovered place distinctly from a manual one', () => {
+    renderTable({ places: [makePlace({ origin: 'charging_discovery' })] });
+    expect(screen.getByText('Auto-discovered')).toBeInTheDocument();
+  });
+
+  it('shows an "Archived" badge only for archived rows', () => {
+    renderTable({
+      places: [
+        makePlace({ id: 1, name: 'Active One', archived_at: null }),
+        makePlace({ id: 2, name: 'Retired One', archived_at: '2026-06-01T00:00:00Z' }),
+      ],
+    });
+    expect(screen.getByText('Archived')).toBeInTheDocument();
+    // Exactly one archived badge for two rows, one archived.
+    expect(screen.getAllByText('Archived')).toHaveLength(1);
+  });
+
+  it('resolves each row\'s rate from the bulk currentRates lookup keyed by geofence_id', () => {
+    renderTable({
+      places: [makePlace({ id: 1, name: 'Home' }), makePlace({ id: 2, name: 'Office' })],
+      currentRates: [makeRate({ geofence_id: 1, rate_per_wh: 0.00012, currency: 'USD' })],
+    });
+
+    // Home (id 1) has a resolved rate string; Office (id 2) shows "Not set".
+    expect(screen.getByText('$0.120')).toBeInTheDocument();
+    expect(screen.getByText('Not set')).toBeInTheDocument();
+    expect(screen.getByTestId('effective-since')).toHaveTextContent('2026-08-27T00:00:00Z');
+  });
+
+  it('invokes onSelect with the exact place when Manage is clicked', () => {
+    const onSelect = vi.fn();
+    const place = makePlace({ id: 7, name: 'Costco Supercharger' });
+    renderTable({ places: [place], onSelect });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Manage' }));
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(place);
+  });
+
+  it('renders the row-count badge matching the number of places', () => {
+    renderTable({
+      places: [makePlace({ id: 1, name: 'A' }), makePlace({ id: 2, name: 'B' }), makePlace({ id: 3, name: 'C' })],
+    });
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/PlacesTable.tsx b/web/src/features/maps/components/charging-places/PlacesTable.tsx
new file mode 100644
index 0000000000..350318eb58
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/PlacesTable.tsx
@@ -0,0 +1,208 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MapPin, Zap } from 'lucide-react';
+
+import { GlassPanel, PanelTitle, Badge, Button, Text, DataTable, useSortToggle, type Column } from '@/components/ui';
+import { InlineCallout, Skeleton, QueryError } from '@/components/feedback';
+import { TimeStamp } from '@/components/data-display';
+import { useSettings } from '@/hooks/useSettings';
+import { formatRatePerWh } from './helpers';
+import type { Geofence, GeofenceRate } from '@/api/types';
+
+export interface PlacesTableProps {
+  places?: Geofence[];
+  /** Bulk current-rate lookup (one row per geofence with an active rate). */
+  currentRates?: GeofenceRate[];
+  isLoading: boolean;
+  error?: unknown;
+  onRetry?: () => void;
+  onSelect: (place: Geofence) => void;
+  /** True while the "Show archived" toggle is on — only affects the empty-state copy. */
+  includesArchived?: boolean;
+}
+
+/**
+ * The Charging Places list — every geofence the user can configure
+ * pricing for, with its currently-active rate (if any) resolved from the
+ * bulk `/geofences/rates/current` lookup rather than a per-row fetch.
+ */
+export function PlacesTable({
+  places,
+  currentRates,
+  isLoading,
+  error,
+  onRetry,
+  onSelect,
+  includesArchived = false,
+}: PlacesTableProps) {
+  const { t } = useTranslation();
+  const { locale } = useSettings();
+  const { sortKey, sortDir, onSort } = useSortToggle('name', 'asc');
+
+  const rateByGeofenceId = useMemo(() => {
+    const m = new Map<number, GeofenceRate>();
+    for (const r of currentRates ?? []) m.set(r.geofence_id, r);
+    return m;
+  }, [currentRates]);
+
+  const rows = places ?? [];
+
+  const sortedRows = useMemo(() => {
+    const dir = sortDir === 'asc' ? 1 : -1;
+    return [...rows].sort((a, b) => {
+      switch (sortKey) {
+        case 'name':
+          return a.name.localeCompare(b.name) * dir;
+        case 'origin':
+          return a.origin.localeCompare(b.origin) * dir;
+        case 'rate': {
+          const ra = rateByGeofenceId.get(a.id)?.rate_per_wh ?? -1;
+          const rb = rateByGeofenceId.get(b.id)?.rate_per_wh ?? -1;
+          return (ra - rb) * dir;
+        }
+        default:
+          return 0;
+      }
+    });
+  }, [rows, sortKey, sortDir, rateByGeofenceId]);
+
+  const columns = useMemo<Column<Geofence>[]>(
+    () => [
+      {
+        key: 'name',
+        header: t('chargingPlaces.table.name', 'Place'),
+        sortable: true,
+        render: (g) => (
+          <div className="flex items-center gap-2">
+            <MapPin className="h-4 w-4 shrink-0 text-[var(--text-muted)]" aria-hidden="true" />
+            <div className="flex min-w-0 flex-col">
+              <Text variant="body" className="truncate font-medium">
+                {g.name || t('chargingPlaces.unnamed', 'Unnamed place')}
+              </Text>
+              {g.archived_at && (
+                <Badge variant="neutral" size="sm" className="mt-0.5 w-fit">
+                  {t('chargingPlaces.archived', 'Archived')}
+                </Badge>
+              )}
+            </div>
+          </div>
+        ),
+      },
+      {
+        key: 'origin',
+        header: t('chargingPlaces.table.origin', 'Origin'),
+        sortable: true,
+        render: (g) => (
+          <Badge variant={g.origin === 'charging_discovery' ? 'info' : 'neutral'} size="sm">
+            {g.origin === 'charging_discovery'
+              ? t('chargingPlaces.origin.discovered', 'Auto-discovered')
+              : t('chargingPlaces.origin.manual', 'Manual')}
+          </Badge>
+        ),
+      },
+      {
+        key: 'category',
+        header: t('chargingPlaces.table.category', 'Category'),
+        sortable: false,
+        render: (g) => (
+          <Text size="sm" color="secondary">
+            {g.category
+              ? t(`chargingPlaces.category.${g.category}`, g.category)
+              : t('chargingPlaces.category.unset', 'Uncategorized')}
+          </Text>
+        ),
+      },
+      {
+        key: 'rate',
+        header: t('chargingPlaces.table.rate', 'Rate / kWh'),
+        sortable: true,
+        render: (g) => {
+          const rate = rateByGeofenceId.get(g.id);
+          if (!rate) {
+            return (
+              <Text size="sm" color="muted">
+                {t('chargingPlaces.noRate', 'Not set')}
+              </Text>
+            );
+          }
+          return (
+            <div className="flex items-center gap-1.5">
+              <Zap className="h-3.5 w-3.5 text-amber-300" aria-hidden="true" />
+              <Text variant="body" className="tabular-nums">
+                {formatRatePerWh(rate.rate_per_wh, rate.currency, locale) || '—'}
+              </Text>
+            </div>
+          );
+        },
+      },
+      {
+        key: 'effective_from',
+        header: t('chargingPlaces.table.effectiveSince', 'Effective since'),
+        sortable: false,
+        render: (g) => {
+          const rate = rateByGeofenceId.get(g.id);
+          return rate ? (
+            <TimeStamp value={rate.effective_from} format="absolute" />
+          ) : (
+            <Text size="sm" color="muted">—</Text>
+          );
+        },
+      },
+      {
+        key: 'actions',
+        header: '',
+        sortable: false,
+        render: (g) => (
+          <Button size="sm" variant="secondary" onClick={() => onSelect(g)}>
+            {t('chargingPlaces.table.manage', 'Manage')}
+          </Button>
+        ),
+      },
+    ],
+    [t, rateByGeofenceId, locale, onSelect],
+  );
+
+  return (
+    <GlassPanel className="p-4 sm:p-5">
+      <PanelTitle className="mb-3 flex items-center gap-2">
+        <Zap className="h-4 w-4 text-amber-300" aria-hidden="true" />
+        {t('chargingPlaces.table.title', 'Place Directory')}
+        {rows.length > 0 && (
+          <Badge variant="neutral" size="sm">
+            {rows.length}
+          </Badge>
+        )}
+      </PanelTitle>
+
+      {error ? (
+        <QueryError error={error} onRetry={onRetry} resourceName={t('chargingPlaces.table.title', 'Place Directory')} />
+      ) : isLoading && rows.length === 0 ? (
+        <Skeleton className="h-48 w-full" />
+      ) : rows.length === 0 ? (
+        <InlineCallout variant="info">
+          {includesArchived
+            ? t(
+                'chargingPlaces.emptyAll',
+                'No charging places yet. Charge somewhere or create a geofence above to start tracking costs.',
+              )
+            : t(
+                'chargingPlaces.empty',
+                'No active charging places yet. Existing and future confirmed charging locations appear automatically.',
+              )}
+        </InlineCallout>
+      ) : (
+        <DataTable
+          tableId="maps:charging-places"
+          columns={columns}
+          data={sortedRows}
+          keyExtractor={(g) => g.id}
+          sortKey={sortKey}
+          sortDir={sortDir}
+          onSort={onSort}
+          emptyMessage={t('chargingPlaces.empty', 'No active charging places yet.')}
+          pagination
+        />
+      )}
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx b/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
new file mode 100644
index 0000000000..b42f70731e
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
@@ -0,0 +1,235 @@
+/**
+ * PreviewApplyPanel — the explicit preview -> apply backfill/reprice flow.
+ *
+ * This is the ONLY write path that ever reprices already-existing sessions,
+ * so its guardrails are the most safety-critical UI in the feature:
+ *
+ *   1. Empty state when no rate is selected yet (nothing to preview).
+ *   2. Renders matched/eligible/protected/energy/estimated-cost once a rate
+ *      is selected and its preview has loaded.
+ *   3. Apply is gated behind a confirm dialog and disabled until there is
+ *      at least one eligible session.
+ *   4. Narrowing from/to re-queries the preview with the converted ISO range.
+ *   5. A successful apply shows the priced/skipped/total result inline.
+ *   6. Loading and error states for the preview query.
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import type { ReactNode } from 'react';
+import type { UseQueryResult } from '@tanstack/react-query';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallbackOrOpts?: unknown, opts?: unknown) => {
+        if (typeof fallbackOrOpts === 'string') {
+          if (opts && typeof opts === 'object') {
+            const o = opts as Record<string, unknown>;
+            return fallbackOrOpts.replace(/{{(\w+)}}/g, (_, name) => (name in o ? String(o[name]) : `{{${name}}}`));
+          }
+          return fallbackOrOpts;
+        }
+        if (fallbackOrOpts && typeof fallbackOrOpts === 'object') {
+          const o = fallbackOrOpts as Record<string, unknown>;
+          if (typeof o.defaultValue === 'string') return o.defaultValue;
+        }
+        return key;
+      },
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/hooks/useSettings', () => ({
+  useSettings: () => ({ locale: 'en-US' }),
+}));
+
+vi.mock('@/hooks/useUnits', () => ({
+  useUnits: () => ({ formatEnergy: (wh: number) => `${(wh / 1000).toFixed(1)} kWh` }),
+}));
+
+vi.mock('@/api/hooks/useLocations', () => ({
+  useGeofenceRatePreview: vi.fn(),
+  useApplyGeofenceRate: vi.fn(),
+}));
+
+import { useGeofenceRatePreview, useApplyGeofenceRate } from '@/api/hooks/useLocations';
+import { PreviewApplyPanel } from './PreviewApplyPanel';
+import type { GeofenceRate, GeofenceRateImpactPreview, GeofenceRateApplyResult } from '@/api/types';
+
+const mockedPreview = useGeofenceRatePreview as unknown as ReturnType<typeof vi.fn>;
+const mockedApply = useApplyGeofenceRate as unknown as ReturnType<typeof vi.fn>;
+
+type PreviewQuery = UseQueryResult<GeofenceRateImpactPreview, Error>;
+
+let applyMutate: ReturnType<typeof vi.fn>;
+let applyReset: ReturnType<typeof vi.fn>;
+let previewRefetch: ReturnType<typeof vi.fn>;
+
+const rate: GeofenceRate = {
+  id: 99,
+  geofence_id: 7,
+  rate_per_wh: 0.00012,
+  currency: 'USD',
+  effective_from: '2026-08-27T00:00:00Z',
+  effective_to: null,
+  created_at: '2026-08-27T00:00:00Z',
+};
+
+function makePreviewQuery(overrides: Partial<PreviewQuery> = {}): PreviewQuery {
+  return {
+    data: undefined,
+    isLoading: false,
+    isError: false,
+    error: null,
+    refetch: previewRefetch,
+    ...overrides,
+  } as unknown as PreviewQuery;
+}
+
+function makePreview(overrides: Partial<GeofenceRateImpactPreview> = {}): GeofenceRateImpactPreview {
+  return {
+    matched_sessions: 10,
+    eligible_sessions: 6,
+    protected_sessions: 4,
+    total_energy_wh: 60_000,
+    estimated_cost_decimal: 7.2,
+    currency: 'USD',
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  applyMutate = vi.fn();
+  applyReset = vi.fn();
+  previewRefetch = vi.fn();
+  mockedApply.mockReturnValue({ mutate: applyMutate, reset: applyReset, isPending: false, data: undefined });
+  mockedPreview.mockReturnValue(makePreviewQuery({ data: makePreview() }));
+});
+
+// QueryError (rendered on the error path) calls useNavigate(), so every
+// render needs a Router ancestor even for tests that never hit that path.
+function renderPanel(props: { geofenceId: number; rate: GeofenceRate | null }) {
+  return render(
+    <MemoryRouter>
+      <PreviewApplyPanel {...props} />
+    </MemoryRouter>,
+  );
+}
+
+describe('PreviewApplyPanel — no rate selected', () => {
+  it('shows an empty state prompting the user to pick a rate, with no metrics rendered', () => {
+    renderPanel({ geofenceId: 7, rate: null });
+
+    expect(
+      screen.getByText('Select a rate from the history table above to preview its impact.'),
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Matched')).not.toBeInTheDocument();
+  });
+});
+
+describe('PreviewApplyPanel — preview metrics', () => {
+  it('renders matched/eligible/protected/energy/estimated-cost for the selected rate', () => {
+    renderPanel({ geofenceId: 7, rate });
+
+    expect(screen.getByText('Matched')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+    expect(screen.getByText('Eligible')).toBeInTheDocument();
+    expect(screen.getByText('6')).toBeInTheDocument();
+    expect(screen.getByText('Protected')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('60.0 kWh')).toBeInTheDocument();
+    expect(screen.getByText('$7.20')).toBeInTheDocument();
+  });
+
+  it('shows a loading skeleton while the preview query is in flight', () => {
+    mockedPreview.mockReturnValue(makePreviewQuery({ isLoading: true, data: undefined }));
+    const { container } = renderPanel({ geofenceId: 7, rate });
+    expect(container.querySelector('.animate-pulse')).not.toBeNull();
+  });
+
+  it('surfaces a QueryError with a working retry when the preview fails', () => {
+    mockedPreview.mockReturnValue(makePreviewQuery({ isError: true, error: new Error('preview boom') }));
+    renderPanel({ geofenceId: 7, rate });
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+    expect(previewRefetch).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('PreviewApplyPanel — narrowing the window', () => {
+  it('re-queries the preview hook with the converted ISO from/to once both fields are set', () => {
+    renderPanel({ geofenceId: 7, rate });
+
+    fireEvent.change(screen.getByLabelText('Narrow from (optional)'), { target: { value: '2026-09-01T00:00' } });
+    fireEvent.change(screen.getByLabelText('Narrow to (optional)'), { target: { value: '2026-10-01T00:00' } });
+
+    const lastCall = mockedPreview.mock.calls.at(-1);
+    expect(lastCall?.[0]).toBe(7);
+    expect(lastCall?.[1]).toBe(99);
+    expect(lastCall?.[2]).toEqual({
+      from: new Date('2026-09-01T00:00').toISOString(),
+      to: new Date('2026-10-01T00:00').toISOString(),
+    });
+  });
+
+  it('clears a narrowed window and prior apply state when a different rate is selected', () => {
+    const { rerender } = renderPanel({ geofenceId: 7, rate });
+    fireEvent.change(screen.getByLabelText('Narrow from (optional)'), {
+      target: { value: '2026-09-01T00:00' },
+    });
+
+    rerender(
+      <MemoryRouter>
+        <PreviewApplyPanel
+          geofenceId={7}
+          rate={{ ...rate, id: 100, effective_from: '2026-10-01T00:00:00Z' }}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByLabelText('Narrow from (optional)')).toHaveValue('');
+    expect(applyReset).toHaveBeenCalled();
+  });
+});
+
+describe('PreviewApplyPanel — apply gating', () => {
+  it('disables Apply when there are zero eligible sessions', () => {
+    mockedPreview.mockReturnValue(makePreviewQuery({ data: makePreview({ eligible_sessions: 0 }) }));
+    renderPanel({ geofenceId: 7, rate });
+
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+  });
+
+  it('requires confirmation before calling the apply mutation', async () => {
+    renderPanel({ geofenceId: 7, rate });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    // The confirm dialog must appear before the mutation fires.
+    await waitFor(() => expect(screen.getByText('Apply this rate to matching sessions?')).toBeInTheDocument());
+    expect(applyMutate).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getAllByRole('button', { name: 'Apply' })[1]);
+    await waitFor(() => expect(applyMutate).toHaveBeenCalledTimes(1));
+    expect(applyMutate).toHaveBeenCalledWith({ geofenceId: 7, rateId: 99, from: undefined, to: undefined });
+  });
+
+  it('shows the applied result inline once the mutation has data', () => {
+    mockedApply.mockReturnValue({
+      mutate: applyMutate,
+      reset: applyReset,
+      isPending: false,
+      data: { priced_sessions: 6, skipped_sessions: 4, total_cost_decimal: 7.2, currency: 'USD' } satisfies GeofenceRateApplyResult,
+    });
+    renderPanel({ geofenceId: 7, rate });
+
+    expect(screen.getByText('Applied: 6 priced, 4 skipped, $7.20 total.')).toBeInTheDocument();
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx b/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
new file mode 100644
index 0000000000..202068eb0b
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
@@ -0,0 +1,183 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calculator, Play } from 'lucide-react';
+
+import { GlassPanel, PanelTitle, Button, Input, ConfirmDialog, Badge } from '@/components/ui';
+import { Skeleton, EmptyState, QueryError, InlineCallout } from '@/components/feedback';
+import { MetricTile } from '@/components/data-display';
+import { useSettings } from '@/hooks/useSettings';
+import { useConfirm } from '@/hooks/useConfirm';
+import { useUnits } from '@/hooks/useUnits';
+import { formatCurrencyValue } from '@/lib/currencyFormat';
+import { useGeofenceRatePreview, useApplyGeofenceRate } from '@/api/hooks/useLocations';
+import { formatRatePerWh } from './helpers';
+import type { GeofenceRate } from '@/api/types';
+
+export interface PreviewApplyPanelProps {
+  geofenceId: number;
+  /** The rate row selected in the history table, or `null` before any pick. */
+  rate: GeofenceRate | null;
+}
+
+function localToIso(local: string): string | undefined {
+  if (!local) return undefined;
+  const ms = Date.parse(local);
+  return Number.isNaN(ms) ? undefined : new Date(ms).toISOString();
+}
+
+/**
+ * Explicit preview → apply flow for backfilling/repricing historical
+ * sessions at this place's selected rate. Preview is read-only (fired
+ * automatically once a rate is selected); Apply is the ONLY write path
+ * that ever reprices already-existing sessions, is bounded to this
+ * geofence + rate's interval, and never touches a session that already
+ * carries a manual/Tesla-actual cost — see
+ * `internal/database/geofence/repo_rates.go`'s `ApplyRate`.
+ */
+export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps) {
+  const { t } = useTranslation();
+  const { locale } = useSettings();
+  const { formatEnergy } = useUnits();
+  const { confirm, dialogProps } = useConfirm();
+
+  const [fromLocal, setFromLocal] = useState('');
+  const [toLocal, setToLocal] = useState('');
+
+  const range = useMemo(
+    () => ({ from: localToIso(fromLocal), to: localToIso(toLocal) }),
+    [fromLocal, toLocal],
+  );
+
+  const preview = useGeofenceRatePreview(geofenceId, rate?.id, range);
+  const apply = useApplyGeofenceRate();
+
+  useEffect(() => {
+    setFromLocal('');
+    setToLocal('');
+    apply.reset();
+  }, [apply.reset, rate?.id]);
+
+  const handleApply = async () => {
+    if (!rate) return;
+    const ok = await confirm({
+      title: t('chargingPlaces.previewApply.confirmTitle', 'Apply this rate to matching sessions?'),
+      message: t(
+        'chargingPlaces.previewApply.confirmMessage',
+        'This backfills/reprices unpriced or previously geofence-derived sessions in scope. Manual, Tesla-reported, and existing costs with unknown provenance are never overwritten.',
+      ),
+      confirmLabel: t('chargingPlaces.previewApply.applyAction', 'Apply'),
+      variant: 'warning',
+    });
+    if (!ok) return;
+    apply.mutate({ geofenceId, rateId: rate.id, from: range.from, to: range.to });
+  };
+
+  if (!rate) {
+    return (
+      <GlassPanel className="p-4 sm:p-5">
+        <PanelTitle className="mb-3 flex items-center gap-2">
+          <Calculator className="h-4 w-4 text-violet-300" aria-hidden="true" />
+          {t('chargingPlaces.previewApply.title', 'Preview & Apply')}
+        </PanelTitle>
+        <>
+          {/* no-action: rate selection is provided directly above this panel in the same workspace. */}
+          <EmptyState
+            message={t(
+              'chargingPlaces.previewApply.selectRate',
+              'Select a rate from the history table above to preview its impact.',
+            )}
+          />
+        </>
+      </GlassPanel>
+    );
+  }
+
+  const p = preview.data;
+
+  return (
+    <GlassPanel className="p-4 sm:p-5">
+      <PanelTitle className="mb-3 flex items-center gap-2">
+        <Calculator className="h-4 w-4 text-violet-300" aria-hidden="true" />
+        {t('chargingPlaces.previewApply.title', 'Preview & Apply')}
+        <Badge variant="neutral" size="sm">
+          {formatRatePerWh(rate.rate_per_wh, rate.currency, locale)} / {t('chargingPlaces.kwh', 'kWh')}
+        </Badge>
+      </PanelTitle>
+
+      <div className="mb-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <Input
+          type="datetime-local"
+          label={t('chargingPlaces.previewApply.from', 'Narrow from (optional)')}
+          value={fromLocal}
+          onChange={(e) => setFromLocal(e.target.value)}
+        />
+        <Input
+          type="datetime-local"
+          label={t('chargingPlaces.previewApply.to', 'Narrow to (optional)')}
+          value={toLocal}
+          onChange={(e) => setToLocal(e.target.value)}
+        />
+      </div>
+
+      {preview.isError ? (
+        <QueryError error={preview.error} onRetry={() => void preview.refetch()} />
+      ) : preview.isLoading ? (
+        <Skeleton className="h-24 w-full" />
+      ) : (
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
+          <MetricTile value={p?.matched_sessions ?? 0} label={t('chargingPlaces.previewApply.matched', 'Matched')} />
+          <MetricTile
+            value={p?.eligible_sessions ?? 0}
+            label={t('chargingPlaces.previewApply.eligible', 'Eligible')}
+            accentClass="text-emerald-300"
+          />
+          <MetricTile
+            value={p?.protected_sessions ?? 0}
+            label={t('chargingPlaces.previewApply.protected', 'Protected')}
+            accentClass="text-amber-300"
+          />
+          <MetricTile
+            value={p ? formatEnergy(p.total_energy_wh) : '—'}
+            label={t('chargingPlaces.previewApply.energy', 'Energy')}
+          />
+          <MetricTile
+            value={
+              p ? formatCurrencyValue(p.estimated_cost_decimal, p.currency, locale, 2, { useGrouping: true }) : '—'
+            }
+            label={t('chargingPlaces.previewApply.estimatedCost', 'Estimated Cost')}
+          />
+        </div>
+      )}
+
+      {apply.data && (
+        <InlineCallout variant="success" className="mt-3">
+          {t(
+            'chargingPlaces.previewApply.applied',
+            'Applied: {{priced}} priced, {{skipped}} skipped, {{cost}} total.',
+            {
+              priced: apply.data.priced_sessions,
+              skipped: apply.data.skipped_sessions,
+              cost: formatCurrencyValue(apply.data.total_cost_decimal, apply.data.currency, locale, 2, {
+                useGrouping: true,
+              }),
+            },
+          )}
+        </InlineCallout>
+      )}
+
+      <div className="mt-3 flex justify-end">
+        <Button
+          variant="primary"
+          icon={<Play className="h-4 w-4" aria-hidden="true" />}
+          onClick={() => void handleApply()}
+          loading={apply.isPending}
+          disabled={!p || p.eligible_sessions === 0}
+        >
+          {t('chargingPlaces.previewApply.applyAction', 'Apply')}
+        </Button>
+      </div>
+
+      {dialogProps && <ConfirmDialog {...dialogProps} />}
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/RateForm.test.tsx b/web/src/features/maps/components/charging-places/RateForm.test.tsx
new file mode 100644
index 0000000000..9366954158
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/RateForm.test.tsx
@@ -0,0 +1,225 @@
+/**
+ * RateForm — add-a-rate form for one charging place.
+ *
+ * The form's entire reason to exist is the ONE conversion boundary between
+ * the user-facing currency/kWh entry and the canonical `rate_per_wh` sent
+ * on the wire (never a *_kwh field). Coverage:
+ *
+ *   1. Renders all four fields (currency, rate, effective-from, effective-to)
+ *      plus a pre-seeded effective-from (now) and an open-ended hint.
+ *   2. Submits rate_per_wh = rate/kWh ÷ 1000 — the SI conversion boundary —
+ *      and never a *_kwh key on the mutation payload.
+ *   3. Blocks submit with an inline error when the rate is missing/negative.
+ *   4. Blocks submit when effective_to <= effective_from.
+ *   5. Resets the rate/effective-to fields after a successful save (keeps
+ *      currency/effective-from so the next entry doesn't start from scratch).
+ *   6. Seeds the currency default from the rate active now, if any.
+ *   7. Explains that today's rate estimates eligible legacy sessions without
+ *      replacing actual costs.
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import type { ReactNode } from 'react';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallbackOrOpts?: unknown, opts?: unknown) => {
+        if (typeof fallbackOrOpts === 'string') {
+          if (opts && typeof opts === 'object') {
+            const o = opts as Record<string, unknown>;
+            return fallbackOrOpts.replace(/{{(\w+)}}/g, (_, name) => (name in o ? String(o[name]) : `{{${name}}}`));
+          }
+          return fallbackOrOpts;
+        }
+        if (fallbackOrOpts && typeof fallbackOrOpts === 'object') {
+          const o = fallbackOrOpts as Record<string, unknown>;
+          if (typeof o.defaultValue === 'string') return o.defaultValue;
+        }
+        return key;
+      },
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/hooks/useSettings', () => ({
+  useSettings: () => ({
+    locale: 'en-US',
+    settings: { currency_symbol: '$' },
+  }),
+}));
+
+vi.mock('@/api/hooks/useLocations', () => ({
+  useCreateGeofenceRate: vi.fn(),
+}));
+
+import { useCreateGeofenceRate } from '@/api/hooks/useLocations';
+import { RateForm } from './RateForm';
+import type { GeofenceRate } from '@/api/types';
+
+const mockedCreate = useCreateGeofenceRate as unknown as ReturnType<typeof vi.fn>;
+let createMutate: ReturnType<typeof vi.fn>;
+
+function makeRate(overrides: Partial<GeofenceRate> = {}): GeofenceRate {
+  return {
+    id: 1,
+    geofence_id: 7,
+    rate_per_wh: 0.0001,
+    currency: 'USD',
+    effective_from: '2020-01-01T00:00:00Z',
+    effective_to: null,
+    created_at: '2020-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  createMutate = vi.fn();
+  mockedCreate.mockReturnValue({ mutate: createMutate, isPending: false });
+});
+
+function rateInput(): HTMLInputElement {
+  return screen.getByLabelText('Rate per kWh') as HTMLInputElement;
+}
+
+function typeRate(value: string) {
+  const input = rateInput();
+  fireEvent.change(input, { target: { value } });
+  fireEvent.blur(input);
+}
+
+describe('RateForm — structure', () => {
+  it('renders the currency select, rate field, and both effective-date fields', () => {
+    render(<RateForm geofenceId={7} />);
+
+    expect(screen.getByText('Add a Rate')).toBeInTheDocument();
+    expect(screen.getByLabelText('Currency')).toBeInTheDocument();
+    expect(rateInput()).toBeInTheDocument();
+    expect(screen.getByLabelText('Effective from')).toBeInTheDocument();
+    expect(screen.getByLabelText('Effective to (optional)')).toBeInTheDocument();
+    expect(screen.getByText('Leave blank for an open-ended rate.')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'If this rate is active today, it also estimates older unpriced sessions at this place. Existing actual costs stay unchanged.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('pre-seeds effective-from with a non-empty local datetime value', () => {
+    render(<RateForm geofenceId={7} />);
+    const input = screen.getByLabelText('Effective from') as HTMLInputElement;
+    expect(input.value).not.toBe('');
+    // datetime-local shape: YYYY-MM-DDTHH:mm
+    expect(input.value).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/);
+  });
+
+  it('seeds the currency default from the active rate when provided', () => {
+    render(<RateForm geofenceId={7} currentRate={makeRate({ currency: 'EUR' })} />);
+    const select = screen.getByLabelText('Currency') as HTMLSelectElement;
+    expect(select.value).toBe('EUR');
+  });
+
+  it('updates the currency when the active rate finishes loading', () => {
+    const { rerender } = render(<RateForm geofenceId={7} />);
+
+    rerender(<RateForm geofenceId={7} currentRate={makeRate({ currency: 'CAD' })} />);
+
+    expect((screen.getByLabelText('Currency') as HTMLSelectElement).value).toBe('CAD');
+  });
+});
+
+describe('RateForm — the SI conversion boundary', () => {
+  it('converts a typed currency/kWh rate to rate_per_wh (÷1000) on submit', () => {
+    render(<RateForm geofenceId={7} />);
+
+    typeRate('0.12');
+    fireEvent.click(screen.getByRole('button', { name: 'Save Rate' }));
+
+    expect(createMutate).toHaveBeenCalledTimes(1);
+    const [payload] = createMutate.mock.calls[0];
+    expect(payload.geofenceId).toBe(7);
+    expect(payload.rate_per_wh).toBeCloseTo(0.00012, 10);
+    expect(payload.currency).toBe('USD');
+    // Never a *_kwh field anywhere in the wire payload.
+    expect(Object.keys(payload).some((k) => /kwh/i.test(k))).toBe(false);
+  });
+
+  it('omits effective_to from the payload when left blank (open-ended rate)', () => {
+    render(<RateForm geofenceId={7} />);
+    typeRate('0.1');
+    fireEvent.click(screen.getByRole('button', { name: 'Save Rate' }));
+
+    const [payload] = createMutate.mock.calls[0];
+    expect(payload).not.toHaveProperty('effective_to');
+  });
+
+  it('includes effective_to in the payload when set, after the effective-from', () => {
+    render(<RateForm geofenceId={7} />);
+    typeRate('0.1');
+    fireEvent.change(screen.getByLabelText('Effective from'), { target: { value: '2026-01-01T00:00' } });
+    fireEvent.change(screen.getByLabelText('Effective to (optional)'), { target: { value: '2026-08-27T00:00' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save Rate' }));
+
+    const [payload] = createMutate.mock.calls[0];
+    expect(payload.effective_from).toBe(new Date('2026-01-01T00:00').toISOString());
+    expect(payload.effective_to).toBe(new Date('2026-08-27T00:00').toISOString());
+  });
+});
+
+describe('RateForm — validation', () => {
+  it('blocks submit and shows an inline error when no rate has been entered', () => {
+    render(<RateForm geofenceId={7} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Save Rate' }));
+
+    expect(createMutate).not.toHaveBeenCalled();
+  });
+
+  it('the Save button stays disabled until a rate value is entered', () => {
+    render(<RateForm geofenceId={7} />);
+    expect(screen.getByRole('button', { name: 'Save Rate' })).toBeDisabled();
+    typeRate('0.1');
+    expect(screen.getByRole('button', { name: 'Save Rate' })).not.toBeDisabled();
+  });
+
+  it('blocks submit and shows an error when effective_to is not after effective_from', () => {
+    render(<RateForm geofenceId={7} />);
+    typeRate('0.1');
+    fireEvent.change(screen.getByLabelText('Effective from'), { target: { value: '2026-08-27T00:00' } });
+    fireEvent.change(screen.getByLabelText('Effective to (optional)'), { target: { value: '2026-01-01T00:00' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save Rate' }));
+
+    expect(screen.getByText('Effective-to must be after effective-from.')).toBeInTheDocument();
+    expect(createMutate).not.toHaveBeenCalled();
+  });
+});
+
+describe('RateForm — after a successful save', () => {
+  it('resets the rate and effective-to fields but keeps currency/effective-from', () => {
+    createMutate.mockImplementation((_payload, opts) => opts?.onSuccess?.());
+
+    render(<RateForm geofenceId={7} />);
+    typeRate('0.15');
+    fireEvent.change(screen.getByLabelText('Effective to (optional)'), { target: { value: '2027-01-01T00:00' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save Rate' }));
+
+    expect((screen.getByLabelText('Effective to (optional)') as HTMLInputElement).value).toBe('');
+    // The rate field re-renders back to empty ("") once valueMicro resets to null.
+    expect(rateInput().value).toBe('');
+  });
+});
+
+describe('RateForm — loading state', () => {
+  it('shows the Save button as loading while the mutation is pending', () => {
+    mockedCreate.mockReturnValue({ mutate: createMutate, isPending: true });
+    render(<RateForm geofenceId={7} />);
+
+    const button = screen.getByRole('button', { name: 'Save Rate' });
+    expect(button).toHaveAttribute('aria-busy', 'true');
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/RateForm.tsx b/web/src/features/maps/components/charging-places/RateForm.tsx
new file mode 100644
index 0000000000..f32a699a56
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/RateForm.tsx
@@ -0,0 +1,196 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Plus } from 'lucide-react';
+
+import { GlassPanel, PanelTitle, Button, Select, Input, HelperText, type SelectOption } from '@/components/ui';
+import { CurrencyInput } from '@/components/forms';
+import { AlertBanner } from '@/components/feedback';
+import { useSettings } from '@/hooks/useSettings';
+import { currencyCodeFromSymbol, microToValue } from '@/lib/currencyFormat';
+import { useCreateGeofenceRate } from '@/api/hooks/useLocations';
+import { currencyPerKwhToRatePerWh } from './helpers';
+import type { GeofenceRate, GeofenceRateCreateRequest } from '@/api/types';
+
+export interface RateFormProps {
+  geofenceId: number;
+  /** The rate active now (if any) — seeds the currency default. */
+  currentRate?: GeofenceRate | null;
+}
+
+/** A reasonably broad, curated set of ISO-4217 currencies for the picker. */
+const CURRENCY_OPTIONS: SelectOption[] = [
+  { value: 'USD', label: 'USD ($)' },
+  { value: 'EUR', label: 'EUR (€)' },
+  { value: 'GBP', label: 'GBP (£)' },
+  { value: 'CAD', label: 'CAD (C$)' },
+  { value: 'AUD', label: 'AUD (A$)' },
+  { value: 'JPY', label: 'JPY (¥)' },
+  { value: 'CNY', label: 'CNY (元)' },
+  { value: 'CHF', label: 'CHF' },
+  { value: 'SEK', label: 'SEK (kr)' },
+  { value: 'NOK', label: 'NOK (kr)' },
+  { value: 'DKK', label: 'DKK (kr)' },
+  { value: 'INR', label: 'INR (₹)' },
+  { value: 'BRL', label: 'BRL (R$)' },
+  { value: 'ZAR', label: 'ZAR (R)' },
+  { value: 'NZD', label: 'NZD (NZ$)' },
+  { value: 'MXN', label: 'MXN (Mex$)' },
+];
+
+/**
+ * Convert a `datetime-local` input value (`YYYY-MM-DDTHH:mm`, local time)
+ * to an ISO-8601 UTC string. Returns `null` for empty/unparseable input so
+ * a malformed value never throws mid-render — mirrors
+ * `AuditLogPage.tsx`'s `toIsoOrUndefined`.
+ */
+function localToIso(local: string): string | null {
+  if (!local) return null;
+  const ms = Date.parse(local);
+  return Number.isNaN(ms) ? null : new Date(ms).toISOString();
+}
+
+/** `YYYY-MM-DDTHH:mm` for the current instant, seeding the effective-from field. */
+function nowAsLocalInput(): string {
+  const d = new Date();
+  d.setSeconds(0, 0);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/**
+ * Add-a-rate form — first-time setup, a future scheduled change, or a
+ * correction (there is no separate "replace" endpoint: a correction is
+ * just another submission with an `effective_from` at or after the point
+ * the correction should take hold; an open-ended version closes the prior
+ * unbounded interval). Accepts a user-friendly currency/kWh value
+ * and converts to the canonical `rate_per_wh` strictly at the request
+ * boundary — never sends a per-kWh value on the wire.
+ */
+export function RateForm({ geofenceId, currentRate }: RateFormProps) {
+  const { t } = useTranslation();
+  const { locale, settings } = useSettings();
+  const defaultCurrency = currentRate?.currency ?? currencyCodeFromSymbol(settings.currency_symbol);
+
+  const [currency, setCurrency] = useState(defaultCurrency);
+  const [rateMicro, setRateMicro] = useState<number | null>(null);
+  const [effectiveFrom, setEffectiveFrom] = useState(nowAsLocalInput());
+  const [effectiveTo, setEffectiveTo] = useState('');
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const createRate = useCreateGeofenceRate();
+
+  useEffect(() => {
+    setCurrency(defaultCurrency);
+  }, [defaultCurrency, geofenceId]);
+
+  const currencyOptions = useMemo(() => {
+    if (CURRENCY_OPTIONS.some((o) => o.value === currency)) return CURRENCY_OPTIONS;
+    // Preserve an already-selected currency outside the curated list
+    // (e.g. inherited from an existing rate) rather than silently
+    // swapping it out from under the user.
+    return [{ value: currency, label: currency }, ...CURRENCY_OPTIONS];
+  }, [currency]);
+
+  const handleSubmit = () => {
+    setFormError(null);
+    const perKwh = microToValue(rateMicro);
+    if (perKwh == null || perKwh < 0) {
+      setFormError(t('chargingPlaces.rateForm.errors.rate', 'Enter a non-negative rate.'));
+      return;
+    }
+    const fromIso = localToIso(effectiveFrom);
+    if (!fromIso) {
+      setFormError(t('chargingPlaces.rateForm.errors.effectiveFrom', 'Enter a valid effective-from date/time.'));
+      return;
+    }
+    const toIso = effectiveTo ? localToIso(effectiveTo) : null;
+    if (effectiveTo && !toIso) {
+      setFormError(t('chargingPlaces.rateForm.errors.effectiveTo', 'Effective-to date/time is invalid.'));
+      return;
+    }
+    if (toIso && new Date(toIso) <= new Date(fromIso)) {
+      setFormError(t('chargingPlaces.rateForm.errors.order', 'Effective-to must be after effective-from.'));
+      return;
+    }
+
+    const body: GeofenceRateCreateRequest = {
+      rate_per_wh: currencyPerKwhToRatePerWh(perKwh),
+      currency,
+      effective_from: fromIso,
+      ...(toIso ? { effective_to: toIso } : {}),
+    };
+    createRate.mutate(
+      { geofenceId, ...body },
+      {
+        onSuccess: () => {
+          setRateMicro(null);
+          setEffectiveTo('');
+        },
+      },
+    );
+  };
+
+  return (
+    <GlassPanel className="p-4 sm:p-5">
+      <PanelTitle className="mb-3 flex items-center gap-2">
+        <Plus className="h-4 w-4 text-emerald-300" aria-hidden="true" />
+        {t('chargingPlaces.rateForm.title', 'Add a Rate')}
+      </PanelTitle>
+
+      {formError && (
+        <AlertBanner variant="warning" className="mb-3">
+          {formError}
+        </AlertBanner>
+      )}
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <Select
+          label={t('chargingPlaces.rateForm.currency', 'Currency')}
+          value={currency}
+          onChange={(e) => setCurrency(e.target.value)}
+          options={currencyOptions}
+        />
+        <CurrencyInput
+          label={t('chargingPlaces.rateForm.rate', 'Rate per kWh')}
+          ariaLabel={t('chargingPlaces.rateForm.rate', 'Rate per kWh')}
+          currency={currency}
+          locale={locale}
+          precision={3}
+          valueMicro={rateMicro}
+          onChange={({ valueMicro }) => setRateMicro(valueMicro)}
+        />
+        <Input
+          type="datetime-local"
+          label={t('chargingPlaces.rateForm.effectiveFrom', 'Effective from')}
+          value={effectiveFrom}
+          onChange={(e) => setEffectiveFrom(e.target.value)}
+        />
+        <Input
+          type="datetime-local"
+          label={t('chargingPlaces.rateForm.effectiveTo', 'Effective to (optional)')}
+          value={effectiveTo}
+          onChange={(e) => setEffectiveTo(e.target.value)}
+          hint={t('chargingPlaces.rateForm.effectiveToHint', 'Leave blank for an open-ended rate.')}
+        />
+      </div>
+
+      <HelperText className="mt-3">
+        {t(
+          'chargingPlaces.rateForm.legacyEstimateHint',
+          'If this rate is active today, it also estimates older unpriced sessions at this place. Existing actual costs stay unchanged.',
+        )}
+      </HelperText>
+
+      <div className="mt-3 flex justify-end">
+        <Button
+          variant="primary"
+          onClick={handleSubmit}
+          loading={createRate.isPending}
+          disabled={rateMicro == null}
+        >
+          {t('chargingPlaces.rateForm.submit', 'Save Rate')}
+        </Button>
+      </div>
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx b/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
new file mode 100644
index 0000000000..0e59005909
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
@@ -0,0 +1,204 @@
+/**
+ * RateHistoryPanel — every time-versioned rate row for one place, newest
+ * `effective_from` first (the single normalized, effective-dated source of
+ * truth — no separate "current rate" column anywhere).
+ *
+ * Coverage:
+ *   1. Loading skeleton, error → QueryError + retry, empty state.
+ *   2. Renders effective-from/to, rate/kWh, currency badge per row; the
+ *      interval containing now shows "Current", while a future open-ended
+ *      row shows "Scheduled".
+ *   3. Selecting a row for preview highlights it (primary variant) and
+ *      calls `onSelectRate`.
+ *   4. Only future schedules can be cancelled, gated behind confirmation.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, within, cleanup } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import type { ReactNode } from 'react';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, fallback?: unknown) => (typeof fallback === 'string' ? fallback : key),
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@/hooks/useSettings', () => ({
+  useSettings: () => ({ locale: 'en-US' }),
+}));
+
+vi.mock('@/components/data-display', () => ({
+  TimeStamp: ({ value }: { value: unknown }) => <span data-testid="ts">{String(value)}</span>,
+}));
+
+import { RateHistoryPanel } from './RateHistoryPanel';
+import type { GeofenceRate } from '@/api/types';
+
+function makeRate(overrides: Partial<GeofenceRate> = {}): GeofenceRate {
+  return {
+    id: 1,
+    geofence_id: 7,
+    rate_per_wh: 0.0001,
+    currency: 'USD',
+    effective_from: '2020-01-01T00:00:00Z',
+    effective_to: '2021-01-01T00:00:00Z',
+    created_at: '2020-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+function futureIso(hours = 24): string {
+  return new Date(Date.now() + hours * 60 * 60 * 1000).toISOString();
+}
+
+function pastIso(hours = 24): string {
+  return new Date(Date.now() - hours * 60 * 60 * 1000).toISOString();
+}
+
+function renderPanel(props: Partial<Parameters<typeof RateHistoryPanel>[0]> = {}) {
+  return render(
+    <MemoryRouter>
+      <RateHistoryPanel isLoading={false} onSelectRate={vi.fn()} onDelete={vi.fn()} {...props} />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  cleanup();
+});
+
+describe('RateHistoryPanel — loading/error/empty', () => {
+  it('shows a loading skeleton when loading with no rows yet', () => {
+    const { container } = renderPanel({ isLoading: true });
+    expect(container.querySelector('.animate-pulse')).not.toBeNull();
+  });
+
+  it('surfaces a QueryError with a working retry on failure', () => {
+    const onRetry = vi.fn();
+    renderPanel({ error: new Error('boom'), onRetry });
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows the empty-history message when there are no rates yet', () => {
+    renderPanel({ rates: [] });
+    expect(
+      screen.getByText(
+        'No rate configured yet — add one below to start pricing sessions at this place.',
+      ),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('RateHistoryPanel — rows', () => {
+  it('renders rate/kWh and currency for a closed historical row', () => {
+    renderPanel({ rates: [makeRate({ rate_per_wh: 0.0001, currency: 'USD' })] });
+
+    expect(screen.getByText('$0.100')).toBeInTheDocument();
+    expect(screen.getByText('USD')).toBeInTheDocument();
+    expect(screen.getAllByTestId('ts').length).toBeGreaterThan(0);
+  });
+
+  it('shows a "Current" badge for the interval containing now', () => {
+    renderPanel({
+      rates: [makeRate({ effective_from: pastIso(), effective_to: futureIso() })],
+    });
+    expect(screen.getByText('Current')).toBeInTheDocument();
+  });
+
+  it('labels a future open-ended rate as scheduled rather than current', () => {
+    renderPanel({
+      rates: [makeRate({ effective_from: futureIso(), effective_to: null })],
+    });
+    expect(screen.getByText('Scheduled')).toBeInTheDocument();
+    expect(screen.queryByText('Current')).not.toBeInTheDocument();
+  });
+
+  it('does not expose cancellation for current or historical rates', () => {
+    renderPanel({
+      rates: [
+        makeRate({ id: 1 }),
+        makeRate({ id: 2, effective_from: pastIso(), effective_to: futureIso() }),
+      ],
+    });
+    expect(
+      screen.queryByRole('button', { name: 'Cancel scheduled rate' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('highlights the selected row\'s Preview/Apply button as primary', () => {
+    const rate = makeRate({ id: 5 });
+    renderPanel({ rates: [rate], selectedRateId: 5 });
+
+    const btn = screen.getByRole('button', { name: 'Preview / Apply' });
+    // Button component maps variant to a class; "primary" is the
+    // selected-row highlight this panel switches to (see component source).
+    expect(btn.className).toMatch(/primary|bg-/);
+  });
+
+  it('invokes onSelectRate with the exact rate when Preview/Apply is clicked', () => {
+    const onSelectRate = vi.fn();
+    const rate = makeRate({ id: 9 });
+    renderPanel({ rates: [rate], onSelectRate });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Preview / Apply' }));
+    expect(onSelectRate).toHaveBeenCalledWith(rate);
+  });
+});
+
+describe('RateHistoryPanel — delete flow', () => {
+  it('requires confirmation before calling onDelete, and calls it with the exact rate on confirm', async () => {
+    const onDelete = vi.fn();
+    const rate = makeRate({ id: 3, effective_from: futureIso(), effective_to: null });
+    renderPanel({ rates: [rate], onDelete });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel scheduled rate' }));
+    await waitFor(() =>
+      expect(screen.getByText('Cancel this scheduled rate?')).toBeInTheDocument(),
+    );
+    expect(onDelete).not.toHaveBeenCalled();
+
+    const dialog = screen.getByRole('dialog');
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel Rate' }));
+
+    await waitFor(() => expect(onDelete).toHaveBeenCalledTimes(1));
+    expect(onDelete).toHaveBeenCalledWith(rate);
+  });
+
+  it('does not call onDelete when the confirmation is cancelled', async () => {
+    const onDelete = vi.fn();
+    renderPanel({
+      rates: [makeRate({ effective_from: futureIso(), effective_to: null })],
+      onDelete,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel scheduled rate' }));
+    await waitFor(() =>
+      expect(screen.getByText('Cancel this scheduled rate?')).toBeInTheDocument(),
+    );
+
+    const dialog = screen.getByRole('dialog');
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel' }));
+
+    await waitFor(() =>
+      expect(screen.queryByText('Cancel this scheduled rate?')).not.toBeInTheDocument(),
+    );
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+
+  it('disables the delete button while a delete mutation is pending', () => {
+    renderPanel({
+      rates: [makeRate({ effective_from: futureIso(), effective_to: null })],
+      deletePending: true,
+    });
+    expect(screen.getByRole('button', { name: 'Cancel scheduled rate' })).toBeDisabled();
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx b/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
new file mode 100644
index 0000000000..2a60ba4ca8
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
@@ -0,0 +1,195 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { History, Trash2 } from 'lucide-react';
+
+import { GlassPanel, PanelTitle, Badge, Button, Text, DataTable, useSortToggle, ConfirmDialog, type Column } from '@/components/ui';
+import { Skeleton, EmptyState, QueryError } from '@/components/feedback';
+import { TimeStamp } from '@/components/data-display';
+import { useSettings } from '@/hooks/useSettings';
+import { useConfirm } from '@/hooks/useConfirm';
+import { formatRatePerWh, isRateActiveAt, isRateOpen } from './helpers';
+import type { GeofenceRate } from '@/api/types';
+
+export interface RateHistoryPanelProps {
+  rates?: GeofenceRate[];
+  isLoading: boolean;
+  error?: unknown;
+  onRetry?: () => void;
+  /** Currently selected rate for the preview/apply panel, if any. */
+  selectedRateId?: number | null;
+  onSelectRate: (rate: GeofenceRate) => void;
+  onDelete: (rate: GeofenceRate) => void;
+  deletePending?: boolean;
+}
+
+/**
+ * Every time-versioned rate for one charging place, newest first — the
+ * single normalized source of truth (there is no separate "current rate"
+ * column anywhere). The row whose interval contains now is current.
+ * Selecting a row wires it into the preview/apply panel. Effective history
+ * is immutable; only an unused future schedule can be cancelled.
+ */
+export function RateHistoryPanel({
+  rates,
+  isLoading,
+  error,
+  onRetry,
+  selectedRateId,
+  onSelectRate,
+  onDelete,
+  deletePending = false,
+}: RateHistoryPanelProps) {
+  const { t } = useTranslation();
+  const { locale } = useSettings();
+  const { sortKey, sortDir, onSort } = useSortToggle('effective_from', 'desc');
+  const { confirm, dialogProps } = useConfirm();
+
+  const rows = rates ?? [];
+
+  const sortedRows = useMemo(() => {
+    const dir = sortDir === 'asc' ? 1 : -1;
+    return [...rows].sort((a, b) => {
+      switch (sortKey) {
+        case 'effective_from': {
+          const ta = Date.parse(a.effective_from);
+          const tb = Date.parse(b.effective_from);
+          return ((Number.isNaN(ta) ? 0 : ta) - (Number.isNaN(tb) ? 0 : tb)) * dir;
+        }
+        case 'rate_per_wh':
+          return (a.rate_per_wh - b.rate_per_wh) * dir;
+        default:
+          return 0;
+      }
+    });
+  }, [rows, sortKey, sortDir]);
+
+  const handleDelete = async (rate: GeofenceRate) => {
+    const ok = await confirm({
+      title: t('chargingPlaces.rateHistory.deleteTitle', 'Cancel this scheduled rate?'),
+      message: t(
+        'chargingPlaces.rateHistory.deleteMessage',
+        'The previous rate will continue through this cancelled schedule. Effective rate history cannot be deleted.',
+      ),
+      variant: 'danger',
+      confirmLabel: t('chargingPlaces.rateHistory.cancel', 'Cancel Rate'),
+    });
+    if (ok) onDelete(rate);
+  };
+
+  const columns = useMemo<Column<GeofenceRate>[]>(
+    () => [
+      {
+        key: 'effective_from',
+        header: t('chargingPlaces.rateHistory.effectiveFrom', 'Effective From'),
+        sortable: true,
+        render: (r) => <TimeStamp value={r.effective_from} format="absolute" />,
+      },
+      {
+        key: 'rate_per_wh',
+        header: t('chargingPlaces.rateHistory.rate', 'Rate / kWh'),
+        sortable: true,
+        render: (r) => (
+          <Text variant="body" className="tabular-nums">
+            {formatRatePerWh(r.rate_per_wh, r.currency, locale) || '—'}
+          </Text>
+        ),
+      },
+      {
+        key: 'currency',
+        header: t('chargingPlaces.rateHistory.currency', 'Currency'),
+        sortable: false,
+        render: (r) => (
+          <Badge variant="neutral" size="sm">
+            {r.currency}
+          </Badge>
+        ),
+      },
+      {
+        key: 'effective_to',
+        header: t('chargingPlaces.rateHistory.effectiveTo', 'Effective To'),
+        sortable: false,
+        render: (r) =>
+          isRateActiveAt(r) ? (
+            <Badge variant="success" size="sm">
+              {t('chargingPlaces.rateHistory.current', 'Current')}
+            </Badge>
+          ) : isRateOpen(r) && Date.parse(r.effective_from) > Date.now() ? (
+            <Badge variant="info" size="sm">
+              {t('chargingPlaces.rateHistory.scheduled', 'Scheduled')}
+            </Badge>
+          ) : (
+            <TimeStamp value={r.effective_to} format="absolute" />
+          ),
+      },
+      {
+        key: 'actions',
+        header: '',
+        sortable: false,
+        render: (r) => (
+          <div className="flex items-center gap-2">
+            <Button
+              size="sm"
+              variant={selectedRateId === r.id ? 'primary' : 'secondary'}
+              onClick={() => onSelectRate(r)}
+            >
+              {t('chargingPlaces.rateHistory.previewApply', 'Preview / Apply')}
+            </Button>
+            {Date.parse(r.effective_from) > Date.now() && (
+              <Button
+                size="sm"
+                variant="outline"
+                aria-label={t('chargingPlaces.rateHistory.cancelScheduled', 'Cancel scheduled rate')}
+                disabled={deletePending}
+                onClick={() => void handleDelete(r)}
+              >
+                <Trash2 className="h-3.5 w-3.5" aria-hidden="true" />
+              </Button>
+            )}
+          </div>
+        ),
+      },
+    ],
+    [t, locale, selectedRateId, onSelectRate, deletePending],
+  );
+
+  return (
+    <GlassPanel className="p-4 sm:p-5">
+      <PanelTitle className="mb-3 flex items-center gap-2">
+        <History className="h-4 w-4 text-cyan-300" aria-hidden="true" />
+        {t('chargingPlaces.rateHistory.title', 'Rate History')}
+      </PanelTitle>
+
+      {error ? (
+        <QueryError error={error} onRetry={onRetry} resourceName={t('chargingPlaces.rateHistory.title', 'Rate History')} />
+      ) : isLoading && rows.length === 0 ? (
+        <Skeleton className="h-40 w-full" />
+      ) : rows.length === 0 ? (
+        <>
+          {/* no-action: the adjacent rate form is the action for this empty state. */}
+          <EmptyState
+            message={t(
+              'chargingPlaces.rateHistory.empty',
+              'No rate configured yet — add one below to start pricing sessions at this place.',
+            )}
+          />
+        </>
+      ) : (
+        <DataTable
+          tableId="maps:charging-place-rate-history"
+          columns={columns}
+          data={sortedRows}
+          keyExtractor={(r) => r.id}
+          sortKey={sortKey}
+          sortDir={sortDir}
+          onSort={onSort}
+          emptyMessage={t(
+            'chargingPlaces.rateHistory.empty',
+            'No rate configured yet — add one below to start pricing sessions at this place.',
+          )}
+        />
+      )}
+
+      {dialogProps && <ConfirmDialog {...dialogProps} />}
+    </GlassPanel>
+  );
+}
diff --git a/web/src/features/maps/components/charging-places/helpers.test.ts b/web/src/features/maps/components/charging-places/helpers.test.ts
new file mode 100644
index 0000000000..64d1b3fbd6
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/helpers.test.ts
@@ -0,0 +1,128 @@
+/**
+ * Pure helper tests for the Charging Places rate-conversion boundary.
+ *
+ * These are the ONLY place currency/kWh <-> rate_per_wh conversion math
+ * lives, so correctness here is load-bearing for the whole feature: every
+ * component (RateForm, PlacesTable, RateHistoryPanel, PreviewApplyPanel)
+ * converts through these functions rather than reimplementing the scaling
+ * inline. Also covers the half-open `[effective_from, effective_to)`
+ * interval semantics mirrored from the backend's `GeofenceRate.IsActiveAt`.
+ */
+import { describe, it, expect } from 'vitest';
+import {
+  currencyPerKwhToRatePerWh,
+  ratePerWhToCurrencyPerKwh,
+  formatRatePerWh,
+  parseRatePerWhFromCurrencyPerKwh,
+  isRateOpen,
+  isRateActiveAt,
+} from './helpers';
+
+describe('currencyPerKwhToRatePerWh / ratePerWhToCurrencyPerKwh', () => {
+  it('converts 0.10 currency/kWh to 0.0001 currency/Wh', () => {
+    expect(currencyPerKwhToRatePerWh(0.1)).toBeCloseTo(0.0001, 10);
+  });
+
+  it('converts 0.12 currency/kWh (the post-cutoff example rate) to 0.00012 currency/Wh', () => {
+    expect(currencyPerKwhToRatePerWh(0.12)).toBeCloseTo(0.00012, 10);
+  });
+
+  it('is the exact inverse of ratePerWhToCurrencyPerKwh (round-trips without drift)', () => {
+    for (const perKwh of [0, 0.1, 0.12, 1, 3.456, 0.0005]) {
+      const ratePerWh = currencyPerKwhToRatePerWh(perKwh);
+      expect(ratePerWhToCurrencyPerKwh(ratePerWh)).toBeCloseTo(perKwh, 10);
+    }
+  });
+
+  it('scales by exactly 1000 in each direction (Wh <-> kWh), not any other factor', () => {
+    expect(currencyPerKwhToRatePerWh(1)).toBeCloseTo(0.001, 10);
+    expect(ratePerWhToCurrencyPerKwh(1)).toBeCloseTo(1000, 10);
+  });
+
+  it('maps zero to zero', () => {
+    expect(currencyPerKwhToRatePerWh(0)).toBe(0);
+    expect(ratePerWhToCurrencyPerKwh(0)).toBe(0);
+  });
+});
+
+describe('formatRatePerWh', () => {
+  it('formats a canonical rate_per_wh value as localized currency/kWh text', () => {
+    // 0.00012 USD/Wh -> 0.12 USD/kWh -> "$0.120" at 3-digit precision.
+    expect(formatRatePerWh(0.00012, 'USD', 'en-US')).toBe('$0.120');
+  });
+
+  it('defaults to 3 fractional digits (rates need more precision than plain money)', () => {
+    const formatted = formatRatePerWh(0.0001, 'USD', 'en-US');
+    expect(formatted).toBe('$0.100');
+  });
+
+  it('honors an explicit precision override', () => {
+    const formatted = formatRatePerWh(0.0001234, 'USD', 'en-US', 5);
+    expect(formatted).toBe('$0.12340');
+  });
+
+  it('returns "" for null/undefined/non-finite input so callers can render a placeholder', () => {
+    expect(formatRatePerWh(null, 'USD', 'en-US')).toBe('');
+    expect(formatRatePerWh(undefined, 'USD', 'en-US')).toBe('');
+    expect(formatRatePerWh(Number.NaN, 'USD', 'en-US')).toBe('');
+    expect(formatRatePerWh(Number.POSITIVE_INFINITY, 'USD', 'en-US')).toBe('');
+  });
+});
+
+describe('parseRatePerWhFromCurrencyPerKwh', () => {
+  it('parses a plain typed rate and converts it to rate_per_wh', () => {
+    const parsed = parseRatePerWhFromCurrencyPerKwh('0.12', 'USD', 'en-US');
+    expect(parsed).toBeCloseTo(0.00012, 10);
+  });
+
+  it('parses a currency-symbol-prefixed value', () => {
+    const parsed = parseRatePerWhFromCurrencyPerKwh('$0.10', 'USD', 'en-US');
+    expect(parsed).toBeCloseTo(0.0001, 10);
+  });
+
+  it('returns null for empty/unparseable text instead of silently coercing to 0', () => {
+    expect(parseRatePerWhFromCurrencyPerKwh('', 'USD', 'en-US')).toBeNull();
+    expect(parseRatePerWhFromCurrencyPerKwh('not a number', 'USD', 'en-US')).toBeNull();
+  });
+});
+
+describe('isRateOpen', () => {
+  it('is true when effective_to is null/undefined (the unbounded version)', () => {
+    expect(isRateOpen({ effective_to: null })).toBe(true);
+    expect(isRateOpen({ effective_to: undefined })).toBe(true);
+  });
+
+  it('is false once effective_to is set (a superseded version)', () => {
+    expect(isRateOpen({ effective_to: '2026-08-27T00:00:00Z' })).toBe(false);
+  });
+});
+
+describe('isRateActiveAt — half-open [effective_from, effective_to) interval semantics', () => {
+  const oldRate = { effective_from: '2020-01-01T00:00:00Z', effective_to: '2026-08-27T00:00:00Z' };
+  const newRate = { effective_from: '2026-08-27T00:00:00Z', effective_to: null };
+
+  it('the exact cutoff instant belongs to the NEW rate, not the old one (half-open [from, to))', () => {
+    const cutoff = new Date('2026-08-27T00:00:00Z');
+    expect(isRateActiveAt(oldRate, cutoff)).toBe(false);
+    expect(isRateActiveAt(newRate, cutoff)).toBe(true);
+  });
+
+  it('one millisecond before the cutoff still belongs to the old rate', () => {
+    const justBefore = new Date('2026-08-26T23:59:59.999Z');
+    expect(isRateActiveAt(oldRate, justBefore)).toBe(true);
+    expect(isRateActiveAt(newRate, justBefore)).toBe(false);
+  });
+
+  it('an open-ended rate (effective_to null) is active arbitrarily far in the future', () => {
+    expect(isRateActiveAt(newRate, new Date('2099-01-01T00:00:00Z'))).toBe(true);
+  });
+
+  it('is false before effective_from', () => {
+    expect(isRateActiveAt(oldRate, new Date('2019-01-01T00:00:00Z'))).toBe(false);
+  });
+
+  it('defaults `at` to now when omitted', () => {
+    const alwaysOpenRate = { effective_from: '2000-01-01T00:00:00Z', effective_to: null };
+    expect(isRateActiveAt(alwaysOpenRate)).toBe(true);
+  });
+});
diff --git a/web/src/features/maps/components/charging-places/helpers.ts b/web/src/features/maps/components/charging-places/helpers.ts
new file mode 100644
index 0000000000..8846b31365
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/helpers.ts
@@ -0,0 +1,93 @@
+/**
+ * Pure helpers for the Charging Places workspace.
+ *
+ * Every rate on the wire is `rate_per_wh` — SI-canonical currency units
+ * per **watt-hour** (see `internal/models/system/geofence_rate.go`). The
+ * UI always displays/edits currency **per kWh** (the business requirement
+ * explicitly calls for this), so this module owns the one conversion
+ * boundary between the two.
+ *
+ * `unitConversion.ts`'s `convertEnergyFromSI`/`EnergyUnitPref` is the
+ * wrong tool here: that converts an energy AMOUNT (Wh → kWh by dividing
+ * by 1000), whereas a price PER unit energy needs the inverse scaling
+ * (currency/Wh → currency/kWh by MULTIPLYING by 1000, since the per-unit
+ * price grows as the unit shrinks). These helpers are intentionally small,
+ * local, and dedicated rather than bolted onto the generic energy-amount
+ * conversion module. Energy AMOUNTS elsewhere in this feature (e.g.
+ * `total_energy_wh`) still go through `useUnits().formatEnergy` as usual.
+ */
+
+import { formatCurrencyValue, parseCurrencyText } from '@/lib/currencyFormat';
+
+/** Watt-hours per kilowatt-hour — the one constant this module exists for. */
+const WH_PER_KWH = 1000;
+
+/** Convert a user-facing currency/kWh rate into the canonical `rate_per_wh`. */
+export function currencyPerKwhToRatePerWh(perKwh: number): number {
+  return perKwh / WH_PER_KWH;
+}
+
+/** Convert a canonical `rate_per_wh` value into currency/kWh for display/editing. */
+export function ratePerWhToCurrencyPerKwh(ratePerWh: number): number {
+  return ratePerWh * WH_PER_KWH;
+}
+
+/**
+ * Format a canonical `rate_per_wh` value as a localized currency/kWh
+ * string, e.g. `0.00012` USD/Wh → `"$0.120"`. Returns `''` for a
+ * null/non-finite input so callers can render a placeholder dash.
+ *
+ * Rates commonly need more precision than money (0.10 vs 0.12 currency/kWh
+ * is a meaningful difference), so this defaults to 3 fractional digits
+ * rather than the 2 used for plain costs — override via `precision` if a
+ * given currency needs more.
+ */
+export function formatRatePerWh(
+  ratePerWh: number | null | undefined,
+  currency: string,
+  locale: string,
+  precision = 3,
+): string {
+  if (ratePerWh == null || !Number.isFinite(ratePerWh)) return '';
+  return formatCurrencyValue(ratePerWhToCurrencyPerKwh(ratePerWh), currency, locale, precision, {
+    useGrouping: true,
+  });
+}
+
+/**
+ * Parse a user-typed currency/kWh string (locale-aware, symbol-tolerant —
+ * see `parseCurrencyText`) into a canonical `rate_per_wh` value. Returns
+ * `null` for empty/unparseable input so the caller's form validation can
+ * surface a precise "required"/"invalid" message rather than silently
+ * coercing to 0.
+ */
+export function parseRatePerWhFromCurrencyPerKwh(
+  text: string,
+  currency: string,
+  locale: string,
+): number | null {
+  const perKwh = parseCurrencyText(text, currency, locale);
+  if (perKwh == null) return null;
+  return currencyPerKwhToRatePerWh(perKwh);
+}
+
+/** Whether a rate version's half-open interval is unbounded at the end. */
+export function isRateOpen(rate: { effective_to?: string | null }): boolean {
+  return rate.effective_to == null;
+}
+
+/**
+ * Whether a rate version was active at instant `at` (defaults to now),
+ * mirroring the backend's `GeofenceRate.IsActiveAt` half-open interval
+ * semantics exactly so the frontend never disagrees with pricing history.
+ */
+export function isRateActiveAt(
+  rate: { effective_from: string; effective_to?: string | null },
+  at: Date = new Date(),
+): boolean {
+  const from = new Date(rate.effective_from).getTime();
+  if (Number.isNaN(from) || at.getTime() < from) return false;
+  if (rate.effective_to == null) return true;
+  const to = new Date(rate.effective_to).getTime();
+  return Number.isNaN(to) ? true : at.getTime() < to;
+}
diff --git a/web/src/features/maps/components/charging-places/index.ts b/web/src/features/maps/components/charging-places/index.ts
new file mode 100644
index 0000000000..a702e9e696
--- /dev/null
+++ b/web/src/features/maps/components/charging-places/index.ts
@@ -0,0 +1,17 @@
+export { ChargingPlacesWorkspace } from './ChargingPlacesWorkspace';
+export { NeedsSetupQueue, type NeedsSetupQueueProps } from './NeedsSetupQueue';
+export { PlacesTable, type PlacesTableProps } from './PlacesTable';
+export { PlaceDetailPanel, type PlaceDetailPanelProps } from './PlaceDetailPanel';
+export { RateHistoryPanel, type RateHistoryPanelProps } from './RateHistoryPanel';
+export { RateForm, type RateFormProps } from './RateForm';
+export { PreviewApplyPanel, type PreviewApplyPanelProps } from './PreviewApplyPanel';
+export { ChargingSummaryPanel, type ChargingSummaryPanelProps } from './ChargingSummaryPanel';
+export { ChargingActivityList, type ChargingActivityListProps } from './ChargingActivityList';
+export {
+  currencyPerKwhToRatePerWh,
+  ratePerWhToCurrencyPerKwh,
+  formatRatePerWh,
+  parseRatePerWhFromCurrencyPerKwh,
+  isRateOpen,
+  isRateActiveAt,
+} from './helpers';
diff --git a/web/src/features/maps/pages/GeofencesPage.test.tsx b/web/src/features/maps/pages/GeofencesPage.test.tsx
index d629b33158..74cdb897d7 100644
--- a/web/src/features/maps/pages/GeofencesPage.test.tsx
+++ b/web/src/features/maps/pages/GeofencesPage.test.tsx
@@ -180,7 +180,8 @@ function makeGeofence(o: Partial<Geofence> & { id: string; name: string }): Geof
     alertOnEntry: false,
     alertOnExit: false,
     enabled: true,
-    costPerKwh: null,
+    origin: 'manual',
+    needsReview: false,
     createdAt: '2024-01-01T00:00:00Z',
     ...o,
   };
@@ -565,8 +566,8 @@ describe('GeofencesPage — create modal', () => {
       alertOnEntry: true,
       alertOnExit: true,
       enabled: true,
-      costPerKwh: null,
     });
+    expect(body).not.toHaveProperty('costPerKwh');
     expect(toastMock.success).toHaveBeenCalledWith('Geofence created');
   });
 
diff --git a/web/src/features/maps/pages/GeofencesPage.tsx b/web/src/features/maps/pages/GeofencesPage.tsx
index 4462efd3b4..3daf089369 100644
--- a/web/src/features/maps/pages/GeofencesPage.tsx
+++ b/web/src/features/maps/pages/GeofencesPage.tsx
@@ -51,6 +51,7 @@ import { request } from '@/api/client';
 import type { Geofence } from '@/types/location';
 import type { Position } from '@/api/types';
 import { AISuggestNewGeofences } from '@/components/ai/AISuggestNewGeofences';
+import { ChargingPlacesWorkspace } from '@/features/maps/components/charging-places';
 import {
   geofenceFormSchema,
   toGeofencePayload,
@@ -224,7 +225,10 @@ export default function GeofencesPage() {
   const { data: vehicles } = useVehicles();
 
   const createMut = useMutation({
-    mutationFn: (body: Omit<Geofence, 'id' | 'createdAt'>) =>
+    // origin/needsReview are server-managed (defaulted on create, untouched
+    // on update) — the write form never submits them; only the fields the
+    // backend's geofenceCreateRequest actually declares belong here.
+    mutationFn: (body: Omit<Geofence, 'id' | 'createdAt' | 'origin' | 'needsReview'>) =>
       request<Geofence>('/geofences', { method: 'POST', body: JSON.stringify(body) }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['geofences'] });
@@ -235,8 +239,13 @@ export default function GeofencesPage() {
   });
 
   const updateMut = useMutation({
-    mutationFn: ({ id, body }: { id: string; body: Omit<Geofence, 'id' | 'createdAt'> }) =>
-      request<Geofence>(`/geofences/${id}`, { method: 'PUT', body: JSON.stringify(body) }),
+    mutationFn: ({
+      id,
+      body,
+    }: {
+      id: string;
+      body: Omit<Geofence, 'id' | 'createdAt' | 'origin' | 'needsReview'>;
+    }) => request<Geofence>(`/geofences/${id}`, { method: 'PUT', body: JSON.stringify(body) }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['geofences'] });
       toast.success(t('Geofence updated'));
@@ -545,7 +554,7 @@ export default function GeofencesPage() {
       return;
     }
     setFieldErrors({});
-    const payload = { ...toGeofencePayload(parsed.data), costPerKwh: null };
+    const payload = toGeofencePayload(parsed.data);
     if (editingId) {
       updateMut.mutate({ id: editingId, body: payload });
     } else {
@@ -880,6 +889,17 @@ export default function GeofencesPage() {
         </section>
       </FadeIn>
 
+      {/* 4 — Charging Places: geofence-based charging-place pricing. A
+          self-contained workspace (Needs Setup queue, places list with
+          current rate, and per-place rate history/preview-apply/activity
+          detail) — decomposed into features/maps/components/charging-places
+          rather than adding more bulk to this file directly. */}
+      <FadeIn delay={0.3}>
+        <section aria-label={t('chargingPlaces.workspace.title', 'Charging Places')}>
+          <ChargingPlacesWorkspace />
+        </section>
+      </FadeIn>
+
       {/* Create / Edit Modal */}
       <Modal
         open={modalOpen}
diff --git a/web/src/features/vehicle-systems/pages/GuardModePage.test.tsx b/web/src/features/vehicle-systems/pages/GuardModePage.test.tsx
index d5345d1cef..89d5db3a04 100644
--- a/web/src/features/vehicle-systems/pages/GuardModePage.test.tsx
+++ b/web/src/features/vehicle-systems/pages/GuardModePage.test.tsx
@@ -189,7 +189,8 @@ function makeGeofence(over: Partial<Geofence> = {}): Geofence {
     alertOnEntry: true,
     alertOnExit: false,
     enabled: true,
-    costPerKwh: null,
+    origin: 'manual',
+    needsReview: false,
     createdAt: '2026-01-01T00:00:00Z',
     ...over,
   };
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index f1b847f64e..3d633b39dd 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -4871,6 +4871,38 @@
         "error": "Failed to remove browser push"
       }
     },
+    "geofence": {
+      "archive": {
+        "success": "Place archived",
+        "error": "Failed to archive place"
+      },
+      "unarchive": {
+        "success": "Place restored",
+        "error": "Failed to restore place"
+      },
+      "reviewed": {
+        "success": "Marked reviewed",
+        "error": "Failed to mark reviewed"
+      },
+      "rename": {
+        "success": "Place renamed",
+        "error": "Failed to rename place"
+      }
+    },
+    "geofenceRate": {
+      "create": {
+        "success": "Rate saved",
+        "error": "Failed to save rate"
+      },
+      "delete": {
+        "success": "Scheduled rate cancelled",
+        "error": "Failed to cancel scheduled rate"
+      },
+      "apply": {
+        "success": "Rate applied to matching sessions",
+        "error": "Failed to apply rate"
+      }
+    },
     "settings": {
       "save": {
         "success": "Settings saved",
@@ -22765,5 +22797,125 @@
       "days": "{{count}} days",
       "label": "Analysis window"
     }
+  },
+  "chargingPlaces": {
+    "workspace": {
+      "title": "Charging Places",
+      "showArchived": "Show archived"
+    },
+    "needsSetup": {
+      "title": "Needs Setup",
+      "empty": "All caught up — no auto-discovered places need review.",
+      "review": "Review"
+    },
+    "table": {
+      "title": "Place Directory",
+      "name": "Place",
+      "origin": "Origin",
+      "category": "Category",
+      "rate": "Rate / kWh",
+      "effectiveSince": "Effective since",
+      "manage": "Manage"
+    },
+    "unnamed": "Unnamed place",
+    "archived": "Archived",
+    "origin": {
+      "discovered": "Auto-discovered",
+      "manual": "Manual"
+    },
+    "category": {
+      "unset": "Uncategorized",
+      "home": "Home",
+      "work": "Work",
+      "restricted": "Restricted",
+      "custom": "Custom"
+    },
+    "noRate": "Not set",
+    "empty": "No active charging places yet. Existing and future confirmed charging locations appear automatically.",
+    "emptyAll": "No charging places yet. Charge somewhere or create a geofence above to start tracking costs.",
+    "kwh": "kWh",
+    "discoveredAt": "Discovered",
+    "detail": {
+      "needsReviewBadge": "Needs review",
+      "markReviewed": "Mark reviewed",
+      "unarchive": "Restore",
+      "archive": "Archive",
+      "placeName": "Place name",
+      "rename": "Rename {{name}}",
+      "pricingTab": "Rates & Pricing",
+      "activityTab": "Charging Activity",
+      "tabsLabel": "Charging place detail sections",
+      "pricingIntro": "Rate changes never rewrite protected actual costs. The rate active today estimates older unpriced sessions automatically; use preview and apply when you have exact historical rates."
+    },
+    "rateForm": {
+      "title": "Add a Rate",
+      "currency": "Currency",
+      "rate": "Rate per kWh",
+      "effectiveFrom": "Effective from",
+      "effectiveTo": "Effective to (optional)",
+      "effectiveToHint": "Leave blank for an open-ended rate.",
+      "legacyEstimateHint": "If this rate is active today, it also estimates older unpriced sessions at this place. Existing actual costs stay unchanged.",
+      "submit": "Save Rate",
+      "errors": {
+        "rate": "Enter a non-negative rate.",
+        "effectiveFrom": "Enter a valid effective-from date/time.",
+        "effectiveTo": "Effective-to date/time is invalid.",
+        "order": "Effective-to must be after effective-from."
+      }
+    },
+    "rateHistory": {
+      "title": "Rate History",
+      "empty": "No rate configured yet — add one below to start pricing sessions at this place.",
+      "effectiveFrom": "Effective From",
+      "rate": "Rate / kWh",
+      "currency": "Currency",
+      "effectiveTo": "Effective To",
+      "current": "Current",
+      "scheduled": "Scheduled",
+      "cancelScheduled": "Cancel scheduled rate",
+      "cancel": "Cancel Rate",
+      "previewApply": "Preview / Apply",
+      "deleteTitle": "Cancel this scheduled rate?",
+      "deleteMessage": "The previous rate will continue through this cancelled schedule. Effective rate history cannot be deleted."
+    },
+    "previewApply": {
+      "title": "Preview & Apply",
+      "selectRate": "Select a rate from the history table above to preview its impact.",
+      "confirmTitle": "Apply this rate to matching sessions?",
+      "confirmMessage": "This backfills/reprices unpriced or previously geofence-derived sessions in scope. Manual and Tesla-reported actual costs are never overwritten.",
+      "applyAction": "Apply",
+      "from": "Narrow from (optional)",
+      "to": "Narrow to (optional)",
+      "matched": "Matched",
+      "eligible": "Eligible",
+      "protected": "Protected",
+      "energy": "Energy",
+      "estimatedCost": "Estimated Cost",
+      "applied": "Applied: {{priced}} priced, {{skipped}} skipped, {{cost}} total."
+    },
+    "summary": {
+      "title": "Charging Summary",
+      "empty": "No priced charging activity at this place yet.",
+      "sessions": "Sessions",
+      "energy": "Energy",
+      "spend": "Spend"
+    },
+    "activity": {
+      "title": "Charging Activity",
+      "empty": "No charging sessions recorded at this place yet.",
+      "startedAt": "Started",
+      "endedAt": "Ended",
+      "energy": "Energy",
+      "cost": "Cost",
+      "source": "Source",
+      "pageInfo": "Showing {{from}}–{{to}}"
+    },
+    "costSource": {
+      "manual": "Manual",
+      "tesla_actual": "Tesla Reported",
+      "geofence_tariff": "Place Rate",
+      "default_estimate": "Default Estimate",
+      "unknown": "Unknown"
+    }
   }
 }
diff --git a/web/src/types/location.test.ts b/web/src/types/location.test.ts
index 6f9e1939ac..9a07c2d933 100644
--- a/web/src/types/location.test.ts
+++ b/web/src/types/location.test.ts
@@ -54,7 +54,8 @@ function makeGeofence(overrides: Partial<Geofence> = {}): Geofence {
     alertOnEntry: true,
     alertOnExit: false,
     enabled: true,
-    costPerKwh: null,
+    origin: 'manual',
+    needsReview: false,
     createdAt: '2026-06-01T00:00:00Z',
     ...overrides,
   };
@@ -168,27 +169,30 @@ describe('Location', () => {
 // ---------------------------------------------------------------------------
 
 describe('Geofence', () => {
-  it('carries exactly the ten circular-geofence fields with the right primitive types', () => {
+  it('carries exactly the eleven base circular-geofence fields (plus optional category/archivedAt) with the right primitive types', () => {
     const g = makeGeofence();
 
     expect(Object.keys(g).sort()).toEqual([
       'alertOnEntry',
       'alertOnExit',
-      'costPerKwh',
       'createdAt',
       'enabled',
       'id',
       'latitude',
       'longitude',
       'name',
+      'needsReview',
+      'origin',
       'radius',
     ]);
     expect(typeof g.id).toBe('string');
     expect(typeof g.name).toBe('string');
     expect(typeof g.radius).toBe('number');
     expect(typeof g.createdAt).toBe('string');
+    expect(typeof g.origin).toBe('string');
+    expect(typeof g.needsReview).toBe('boolean');
 
-    expectTypeOf<Geofence>().toEqualTypeOf<{
+    expectTypeOf<Geofence>().toMatchTypeOf<{
       id: string;
       name: string;
       latitude: number;
@@ -197,7 +201,8 @@ describe('Geofence', () => {
       alertOnEntry: boolean;
       alertOnExit: boolean;
       enabled: boolean;
-      costPerKwh: number | null;
+      origin: 'manual' | 'charging_discovery';
+      needsReview: boolean;
       createdAt: string;
     }>();
   });
@@ -218,13 +223,35 @@ describe('Geofence', () => {
     expectTypeOf<Geofence['enabled']>().toEqualTypeOf<boolean>();
   });
 
-  it('models costPerKwh as a nullable number and folds null to 0 at use sites', () => {
-    const untariffed = makeGeofence({ costPerKwh: null });
-    const tariffed = makeGeofence({ costPerKwh: 0.32 });
+  it('models origin as manual by default and charging_discovery for auto-discovered places', () => {
+    const manual = makeGeofence({ origin: 'manual' });
+    const discovered = makeGeofence({ origin: 'charging_discovery' });
 
-    expect(untariffed.costPerKwh).toBeNull();
-    expect(untariffed.costPerKwh ?? 0).toBe(0);
-    expect(tariffed.costPerKwh).toBeCloseTo(0.32, 5);
-    expectTypeOf<Geofence['costPerKwh']>().toEqualTypeOf<number | null>();
+    expect(manual.origin).toBe('manual');
+    expect(discovered.origin).toBe('charging_discovery');
+    expectTypeOf<Geofence['origin']>().toEqualTypeOf<'manual' | 'charging_discovery'>();
+  });
+
+  it('models needsReview as an independent boolean gating the Needs Setup queue', () => {
+    expect(makeGeofence({ needsReview: true }).needsReview).toBe(true);
+    expect(makeGeofence({ needsReview: false }).needsReview).toBe(false);
+    expectTypeOf<Geofence['needsReview']>().toEqualTypeOf<boolean>();
+  });
+
+  it('treats category and archivedAt as optional — absent (not null) when the backend omits them', () => {
+    const bare = makeGeofence();
+    expect('category' in bare).toBe(false);
+    expect('archivedAt' in bare).toBe(false);
+
+    const categorized = makeGeofence({ category: 'home' });
+    expect(categorized.category).toBe('home');
+
+    const archived = makeGeofence({ archivedAt: '2026-08-01T00:00:00Z' });
+    expect(archived.archivedAt).toBe('2026-08-01T00:00:00Z');
+
+    expectTypeOf<Geofence['category']>().toEqualTypeOf<
+      'home' | 'work' | 'restricted' | 'custom' | null | undefined
+    >();
+    expectTypeOf<Geofence['archivedAt']>().toEqualTypeOf<string | null | undefined>();
   });
 });
diff --git a/web/src/types/location.ts b/web/src/types/location.ts
index 2c3582613c..d66e02a3b2 100644
--- a/web/src/types/location.ts
+++ b/web/src/types/location.ts
@@ -26,6 +26,12 @@ export interface Location {
   lastVisited: string | null;
 }
 
+/** How a geofence came to exist (charging-place pricing feature). */
+export type GeofenceOrigin = 'manual' | 'charging_discovery';
+
+/** Optional category tag a geofence may carry. */
+export type GeofenceCategory = 'home' | 'work' | 'restricted' | 'custom';
+
 /** A user-defined circular geofence (centroid + bounding radius in meters). */
 export interface Geofence {
   /** Stable identifier for the geofence. */
@@ -41,8 +47,27 @@ export interface Geofence {
   alertOnExit: boolean;
   /** Whether the geofence is currently active. */
   enabled: boolean;
-  /** Charging tariff for this location in $/kWh, or `null` when unset. */
-  costPerKwh: number | null;
+  /**
+   * How this place came to exist: user-created, or auto-discovered off a
+   * confirmed charging session's coordinates. Existing manual geofences
+   * predate this field and still resolve to `'manual'`.
+   */
+  origin: GeofenceOrigin;
+  /**
+   * True while an auto-discovered place awaits a human to confirm its
+   * name/type/location — surfaced as the "Needs Setup" queue in the
+   * Charging Places workspace.
+   */
+  needsReview: boolean;
+  /** Optional category tag; absent (not merely `null`) when unset — mirrors the backend's `omitempty`. */
+  category?: GeofenceCategory | null;
+  /**
+   * ISO-8601 archive timestamp; absent while active. An archived place is
+   * excluded from default active listings but stays resolvable by id for
+   * historical charging-session display (never hard-deleted once it has
+   * sessions or rates attached).
+   */
+  archivedAt?: string | null;
   /** ISO-8601 creation timestamp. */
   createdAt: string;
 }

From 30d20e0d4e4965ac274d4ef497d16271304d2529 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sun, 9 Aug 2026 08:47:59 -0700
Subject: [PATCH 08/15] fix(web): show breadcrumbs on all routes

Render Home and the current page for registered top-level routes, and move the quick-search hint into the global breadcrumb chrome. Update layout and breadcrumb tests accordingly.
---
 web/src/components/layout/Breadcrumbs.tsx     |  2 +-
 web/src/components/layout/Layout.test.tsx     |  7 +++++++
 web/src/components/layout/Layout.tsx          |  9 +--------
 .../components/layout/LayoutBreadcrumbs.tsx   | 19 +++++++++++++++----
 .../layout/__tests__/Breadcrumbs.test.tsx     |  6 ++++--
 .../__tests__/LayoutBreadcrumbs.test.tsx      | 11 ++++++-----
 web/src/hooks/useBreadcrumbs.ts               |  7 +++----
 web/src/lib/routeMeta.ts                      |  7 +++----
 8 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/web/src/components/layout/Breadcrumbs.tsx b/web/src/components/layout/Breadcrumbs.tsx
index f10009005e..c1d1a992bd 100644
--- a/web/src/components/layout/Breadcrumbs.tsx
+++ b/web/src/components/layout/Breadcrumbs.tsx
@@ -32,7 +32,7 @@ export function Breadcrumbs({
   homeAriaLabel,
 }: BreadcrumbsProps) {
   const { t } = useTranslation();
-  if (items.length <= 1) return null;
+  if (items.length === 0) return null;
 
   return (
     <nav
diff --git a/web/src/components/layout/Layout.test.tsx b/web/src/components/layout/Layout.test.tsx
index 9b25b3c37c..c3d0e287c9 100644
--- a/web/src/components/layout/Layout.test.tsx
+++ b/web/src/components/layout/Layout.test.tsx
@@ -468,6 +468,13 @@ describe('Layout — sidebar style selection', () => {
   })
 })
 
+describe('Layout — global page chrome', () => {
+  it('mounts breadcrumbs for a registered route that is not a sidebar entry', () => {
+    renderLayout('/notifications/archived')
+    expect(screen.getByTestId('breadcrumbs')).toBeInTheDocument()
+  })
+})
+
 // ══════════════════════════════════════════════════════════════════════
 // Legacy sidebar navigation + active state
 // ══════════════════════════════════════════════════════════════════════
diff --git a/web/src/components/layout/Layout.tsx b/web/src/components/layout/Layout.tsx
index 4870127960..7a5f8dbd1a 100644
--- a/web/src/components/layout/Layout.tsx
+++ b/web/src/components/layout/Layout.tsx
@@ -1669,14 +1669,7 @@ export default function Layout() {
           )}
         >
           <div className="w-full px-3 py-4 pb-safe sm:px-5 sm:py-5 lg:px-8 lg:py-8 2xl:px-10 3xl:px-12">
-            {activeNavEntry && (
-              <div className="mb-3 flex min-h-8 items-center justify-between gap-3 border-b border-white/[0.06] pb-2">
-                <LayoutBreadcrumbs className="min-w-0 text-xs" />
-                <p className="hidden shrink-0 text-2xs text-[var(--text-muted)] lg:block">
-                  {t('nav.quickSearchHint', 'Ctrl+K to jump')}
-                </p>
-              </div>
-            )}
+            <LayoutBreadcrumbs className="min-w-0 text-xs" />
             <RouteTransition>
               <Outlet />
             </RouteTransition>
diff --git a/web/src/components/layout/LayoutBreadcrumbs.tsx b/web/src/components/layout/LayoutBreadcrumbs.tsx
index 788ed9c6ae..2529c5a9ea 100644
--- a/web/src/components/layout/LayoutBreadcrumbs.tsx
+++ b/web/src/components/layout/LayoutBreadcrumbs.tsx
@@ -1,6 +1,7 @@
 import { Breadcrumbs } from './Breadcrumbs';
 import { useBreadcrumbs } from '@/hooks/useBreadcrumbs';
 import { useBreadcrumbOverrides } from './BreadcrumbOverridesContext';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Single canonical breadcrumb row mounted in the global Layout chrome.
@@ -8,12 +9,22 @@ import { useBreadcrumbOverrides } from './BreadcrumbOverridesContext';
  * Reads per-page label overrides from `BreadcrumbOverridesContext` (which
  * `<PageContainer>` populates via the `breadcrumbLabels` prop) and
  * resolves the full parent chain via `useBreadcrumbs`. `<Breadcrumbs>`
- * self-suppresses when the chain has <= 1 items so top-level pages
- * render an empty slot — the surrounding row keeps the "Ctrl+K to jump"
- * hint visible.
+ * renders every registered route, including a one-item chain for top-level
+ * pages. This component owns the complete top bar so routes that are not
+ * sidebar entries still receive the same breadcrumb and quick-jump hint.
  */
 export function LayoutBreadcrumbs({ className }: { className?: string }) {
+  const { t } = useTranslation();
   const overrides = useBreadcrumbOverrides();
   const items = useBreadcrumbs(overrides);
-  return <Breadcrumbs items={items} className={className} />;
+  if (items.length === 0) return null;
+
+  return (
+    <div className="mb-3 flex min-h-8 items-center justify-between gap-3 border-b border-white/[0.06] pb-2">
+      <Breadcrumbs items={items} className={className} />
+      <p className="hidden shrink-0 text-2xs text-[var(--text-muted)] lg:block">
+        {t('nav.quickSearchHint', 'Ctrl+K to jump')}
+      </p>
+    </div>
+  );
 }
diff --git a/web/src/components/layout/__tests__/Breadcrumbs.test.tsx b/web/src/components/layout/__tests__/Breadcrumbs.test.tsx
index 6470cf9941..75d43b8585 100644
--- a/web/src/components/layout/__tests__/Breadcrumbs.test.tsx
+++ b/web/src/components/layout/__tests__/Breadcrumbs.test.tsx
@@ -11,9 +11,11 @@ const renderItems = (items: BreadcrumbItem[], homeHref?: string) =>
   );
 
 describe('Breadcrumbs', () => {
-  it('renders nothing when items.length <= 1', () => {
+  it('renders Home and the current page for a single top-level item', () => {
     const { container } = renderItems([{ label: 'Drives' }]);
-    expect(container.querySelector('nav')).toBeNull();
+    expect(container.querySelector('nav')).toBeInTheDocument();
+    expect(container.querySelector('a[href="/"]')).toBeInTheDocument();
+    expect(screen.getByText('Drives').closest('a')).toBeNull();
   });
 
   it('renders nothing when items is empty', () => {
diff --git a/web/src/components/layout/__tests__/LayoutBreadcrumbs.test.tsx b/web/src/components/layout/__tests__/LayoutBreadcrumbs.test.tsx
index f458e93bc8..ff86181583 100644
--- a/web/src/components/layout/__tests__/LayoutBreadcrumbs.test.tsx
+++ b/web/src/components/layout/__tests__/LayoutBreadcrumbs.test.tsx
@@ -60,12 +60,12 @@ function renderCrumbs({
 }
 
 describe('LayoutBreadcrumbs', () => {
-  it('renders nothing for a top-level route (single-item chain self-suppresses)', () => {
+  it('renders Home and the current page for a top-level route', () => {
     const { container } = renderCrumbs({ url: '/drives', pattern: '/drives' });
-    // <Breadcrumbs> returns null when the chain has <= 1 items, so the whole
-    // row collapses — no nav landmark and no crumb text leaks into the DOM.
-    expect(container.querySelector('nav')).toBeNull();
-    expect(screen.queryByText('Drives')).toBeNull();
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument();
+    expect(container.querySelector('a[href="/"]')).toBeInTheDocument();
+    expect(screen.getByText('Drives').closest('a')).toBeNull();
+    expect(screen.getByText('Ctrl+K to jump')).toBeInTheDocument();
   });
 
   it('renders nothing for an unknown / chrome-less route (empty chain)', () => {
@@ -73,6 +73,7 @@ describe('LayoutBreadcrumbs', () => {
     expect(container.querySelector('nav')).toBeNull();
     // Not even the leading Home link renders when there is no matched route.
     expect(container.querySelector('a')).toBeNull();
+    expect(screen.queryByText('Ctrl+K to jump')).toBeNull();
   });
 
   it('resolves and renders the full parent chain for a nested route', () => {
diff --git a/web/src/hooks/useBreadcrumbs.ts b/web/src/hooks/useBreadcrumbs.ts
index e959dad487..150086451d 100644
--- a/web/src/hooks/useBreadcrumbs.ts
+++ b/web/src/hooks/useBreadcrumbs.ts
@@ -17,9 +17,9 @@ import { ROUTE_META, type RouteMeta } from '@/lib/routeMeta';
  * overrides is the `breadcrumbLabels` prop on `<PageContainer>`, which
  * passes them straight through to this hook.
  *
- * Returns an empty array for unknown / chrome-less routes; `<Breadcrumbs>`
- * also self-suppresses when there are <= 1 items, so top-level pages render
- * nothing without per-page wiring.
+ * Returns an empty array only for unknown / chrome-less routes. Registered
+ * top-level routes return one current-page item so the global Layout can
+ * render Home > Current Page everywhere without per-page wiring.
  */
 export function useBreadcrumbs(overrides?: Partial<Record<string, string>>): BreadcrumbItem[] {
   const location = useLocation();
@@ -83,4 +83,3 @@ export function useBreadcrumbs(overrides?: Partial<Record<string, string>>): Bre
     return items;
   }, [location.pathname, params, overrides, t]);
 }
-
diff --git a/web/src/lib/routeMeta.ts b/web/src/lib/routeMeta.ts
index 42a99cfca0..8b431dcff9 100644
--- a/web/src/lib/routeMeta.ts
+++ b/web/src/lib/routeMeta.ts
@@ -3,9 +3,8 @@
 // Single source of truth for breadcrumb hierarchy. Every entry in
 // `routeRegistry.ts` MUST have a matching entry here (enforced by the unit
 // test in `__tests__/routeMeta.test.ts`). Most top-level pages have NO
-// `parent` — their breadcrumb chain is a single item, so `<Breadcrumbs>`
-// suppresses itself (length <= 1). Only nested / detail routes declare a
-// parent; those produce a >=2-item chain that actually renders.
+// `parent` and render as Home > Current Page. Nested/detail routes declare a
+// parent and render the complete hierarchy.
 
 // Pages can supply per-render label overrides (e.g. "Drive #4421" → "Trip to
 // office") via the `breadcrumbLabels` prop on `<PageContainer>`, which
@@ -23,7 +22,7 @@ export interface RouteMeta {
   defaultLabel: string;
   /**
  * Parent route pattern. The breadcrumb hook walks this chain to compose
- * the trail. Omit for top-level routes (no breadcrumb is rendered).
+ * the trail. Omit for top-level routes.
  */
   parent?: string;
 }

From 1c5504977291f9982b2580b48907e1769c09ddd1 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sun, 9 Aug 2026 10:56:59 -0700
Subject: [PATCH 09/15] fix: repair charging SI values and geofences

Normalize Tesla charging energy and power to Wh/W, repair historical data, and preserve display-boundary conversions. Unify geofence and charging-place management with categories, alerts, bulk actions, search, and protected-session attribution.
---
 internal/api/chargetelem/handler.go           |  30 +-
 internal/api/chargetelem/handler_test.go      |  45 +-
 internal/api/charging/handler.go              |  52 ++-
 internal/api/charging/handler_test.go         |  80 ++++
 internal/api/energyflow/handler.go            |   8 +-
 internal/api/energyflow/handler_test.go       |   8 +-
 ...telemetry_sessions_charge_tracking_test.go |  10 +-
 .../telemetry_sessions_recovery_test.go       |  18 +-
 .../geofence/repo_charging_summary.go         |  17 +-
 .../geofence/repo_charging_summary_test.go    |  24 +-
 internal/fsm/charge/machine_test.go           |  24 +-
 internal/fsm/charge/state.go                  |  12 +-
 internal/service/vehicle_service.go           |   6 +-
 internal/service/vehicle_service_test.go      |   2 +-
 internal/tesla/normalize/normalize.go         |  38 +-
 internal/tesla/normalize/normalize_test.go    |  55 +++
 internal/tesla/router/routing.yaml            |   2 +
 internal/tesla/units/conversions.go           |  21 +
 internal/tesla/units/units.go                 |  11 +-
 internal/tesla/units/units_test.go            |   8 +
 ...0229_fix_charging_energy_power_si.down.sql |   2 +
 ...000229_fix_charging_energy_power_si.up.sql | 139 ++++++
 web/src/api/hooks/useLocations.test.tsx       |  33 ++
 web/src/api/hooks/useLocations.ts             |  29 ++
 .../pages/ChargingDetailPage.test.tsx         |   7 +-
 .../charging/pages/ChargingDetailPage.tsx     |  12 +-
 .../ChargingPlacesWorkspace.test.tsx          |  33 ++
 .../ChargingPlacesWorkspace.tsx               | 206 +++++++--
 .../charging-places/PlaceDetailPanel.test.tsx |  19 +
 .../charging-places/PlaceDetailPanel.tsx      |  84 +++-
 .../charging-places/PlacesTable.test.tsx      |  22 +-
 .../charging-places/PlacesTable.tsx           | 361 +++++++++++-----
 .../PreviewApplyPanel.test.tsx                |  38 +-
 .../charging-places/PreviewApplyPanel.tsx     | 124 ++++--
 .../charging-places/RateHistoryPanel.test.tsx |  10 +-
 .../charging-places/RateHistoryPanel.tsx      |   8 +-
 web/src/features/maps/geofenceCategories.ts   |  18 +
 .../maps/pages/GeofencesPage.test.tsx         |  97 +++--
 web/src/features/maps/pages/GeofencesPage.tsx | 394 ++++--------------
 .../features/maps/schemas/geofence.test.ts    |   5 +
 web/src/features/maps/schemas/geofence.ts     |   4 +
 web/src/i18n/en.json                          |  39 +-
 42 files changed, 1473 insertions(+), 682 deletions(-)
 create mode 100644 migrations/000229_fix_charging_energy_power_si.down.sql
 create mode 100644 migrations/000229_fix_charging_energy_power_si.up.sql
 create mode 100644 web/src/features/maps/geofenceCategories.ts

diff --git a/internal/api/chargetelem/handler.go b/internal/api/chargetelem/handler.go
index bf2dc7d4dc..f5e0dc9beb 100644
--- a/internal/api/chargetelem/handler.go
+++ b/internal/api/chargetelem/handler.go
@@ -27,8 +27,9 @@ type ChargingTelemetryHandler struct {
 	live  signal.LiveStateReader
 }
 
-// Signal → JSON field mappings for charging telemetry projection.
-// Field names match the frontend ChargingTelemetry interface in api/types.ts.
+// Signal → JSON field mappings for charging telemetry projection. Temporary
+// DC fields are merged into the frontend ChargingTelemetry shape before the
+// response is written.
 var chargingTelemetryMappings = []signal.FieldMapping{
 	{Signal: "ChargerVoltage", Field: "charger_voltage"},
 	{Signal: "ChargerActualCurrent", Field: "charger_actual_current"},
@@ -38,11 +39,12 @@ var chargingTelemetryMappings = []signal.FieldMapping{
 	{Signal: "Soc", Field: "soc"},
 	{Signal: "BatteryLevel", Field: "battery_level"},
 	{Signal: "ACChargingEnergyIn", Field: "charge_energy_added_wh"},
-	{Signal: "DCChargingEnergyIn", Field: "energy_added_dc"},
+	{Signal: "DCChargingEnergyIn", Field: "dc_charge_energy_added_wh"},
 	{Signal: "TimeToFullCharge", Field: "time_to_full_charge"},
 	{Signal: "BrickVoltageMax", Field: "brick_voltage_max"},
 	{Signal: "BrickVoltageMin", Field: "brick_voltage_min"},
 	{Signal: "ACChargingPower", Field: "charger_power_w"},
+	{Signal: "DCChargingPower", Field: "dc_charger_power_w"},
 	{Signal: "ChargerPhases", Field: "charger_phases"},
 	{Signal: "IdealBatteryRange", Field: "battery_range_mi"},
 	{Signal: "ChargeState", Field: "charging_state"},
@@ -80,6 +82,9 @@ func (h *ChargingTelemetryHandler) List(w http.ResponseWriter, r *http.Request)
 		return
 	}
 	rows := timelineRowsToFlat(timelineRows)
+	for _, row := range rows {
+		mergeDCChargingValues(row)
+	}
 	httpx.WriteJSON(w, http.StatusOK, rows)
 }
 
@@ -105,13 +110,22 @@ func (h *ChargingTelemetryHandler) Latest(w http.ResponseWriter, r *http.Request
 			result[m.Field] = v
 		}
 	}
-	// DC fast-charging reports DCChargingPower; override the AC field only when positive.
-	if dcVal, ok := snap["DCChargingPower"]; ok {
-		if dc, dcOk := signal.Float64(dcVal); dcOk && dc > 0 {
-			result["charger_power_w"] = dcVal
+	mergeDCChargingValues(result)
+	httpx.WriteJSON(w, http.StatusOK, result)
+}
+
+func mergeDCChargingValues(row map[string]interface{}) {
+	preferPositiveDCValue(row, "charger_power_w", "dc_charger_power_w")
+	preferPositiveDCValue(row, "charge_energy_added_wh", "dc_charge_energy_added_wh")
+}
+
+func preferPositiveDCValue(row map[string]interface{}, canonicalKey, dcKey string) {
+	if value, ok := row[dcKey]; ok {
+		if numeric, numericOK := signal.Float64(value); numericOK && numeric > 0 {
+			row[canonicalKey] = value
 		}
 	}
-	httpx.WriteJSON(w, http.StatusOK, result)
+	delete(row, dcKey)
 }
 
 // timelineRowsToFlat preserves the legacy flat-pivot response shape.
diff --git a/internal/api/chargetelem/handler_test.go b/internal/api/chargetelem/handler_test.go
index 9e158a6e4d..bd6ef83137 100644
--- a/internal/api/chargetelem/handler_test.go
+++ b/internal/api/chargetelem/handler_test.go
@@ -27,27 +27,30 @@ func newChargingTelemetryRequest(vehicleID string, target string) *http.Request
 // the charging-detail page depends on consecutive emissions surviving even
 // when their projected fields are identical to the previous row — collapsing
 // would drop "still 200V, still 65%" tuples and break the time-series
-// rendering. Also asserts the canonical 16-mapping field set is forwarded
-// so the wire shape (charger_voltage, charger_power_kw, ...) stays stable.
+// rendering. Also asserts the canonical mapping set is forwarded so the wire
+// shape (charger_voltage, charger_power_w, ...) stays stable.
 func TestChargingTelemetry_Chart_NoCollapse(t *testing.T) {
 	t0 := time.Date(2026, 4, 30, 10, 0, 0, 0, time.UTC)
 	rows := []signal.TimelineRow{
 		{Timestamp: t0, Fields: map[string]signal.SignalValue{
-			"charger_voltage":        240.0,
-			"charger_actual_current": 32.0,
-			"charger_power_kw":       7.7,
-			"battery_level":          55.0,
+			"charger_voltage":           240.0,
+			"charger_actual_current":    32.0,
+			"charger_power_w":           7700.0,
+			"dc_charger_power_w":        150000.0,
+			"charge_energy_added_wh":    10000.0,
+			"dc_charge_energy_added_wh": 12000.0,
+			"battery_level":             55.0,
 		}},
 		{Timestamp: t0.Add(30 * time.Second), Fields: map[string]signal.SignalValue{
 			"charger_voltage":        240.0,
 			"charger_actual_current": 32.0,
-			"charger_power_kw":       7.7,
+			"charger_power_w":        7700.0,
 			"battery_level":          55.0,
 		}},
 		{Timestamp: t0.Add(60 * time.Second), Fields: map[string]signal.SignalValue{
 			"charger_voltage":        240.0,
 			"charger_actual_current": 32.0,
-			"charger_power_kw":       7.7,
+			"charger_power_w":        7700.0,
 			"battery_level":          56.0,
 		}},
 	}
@@ -86,6 +89,15 @@ func TestChargingTelemetry_Chart_NoCollapse(t *testing.T) {
 			t.Fatalf("row[%d] missing ts key; got %v", i, row)
 		}
 	}
+	if got[0]["charger_power_w"] != 150000.0 || got[0]["charge_energy_added_wh"] != 12000.0 {
+		t.Fatalf("DC values were not merged into canonical fields: %v", got[0])
+	}
+	if _, ok := got[0]["dc_charger_power_w"]; ok {
+		t.Fatalf("temporary DC power field leaked into response: %v", got[0])
+	}
+	if _, ok := got[0]["dc_charge_energy_added_wh"]; ok {
+		t.Fatalf("temporary DC energy field leaked into response: %v", got[0])
+	}
 }
 
 // TestChargingTelemetry_Latest_UsesNow verifies that Latest derives the
@@ -94,7 +106,7 @@ func TestChargingTelemetry_Chart_NoCollapse(t *testing.T) {
 // signal under its JSON field name; the special DCChargingPower override
 // stays in this handler (DC fast-charge sessions report DCChargingPower
 // instead of ACChargingPower, and the frontend exposes a single
-// charger_power_kw field).
+// charger_power_w field).
 func TestChargingTelemetry_Latest_UsesNow(t *testing.T) {
 	var gotAt time.Time
 	var gotVehicleID int64
@@ -107,8 +119,10 @@ func TestChargingTelemetry_Latest_UsesNow(t *testing.T) {
 			return signal.State{
 				"ChargerVoltage":       240.0,
 				"ChargerActualCurrent": 32.0,
-				"ACChargingPower":      7.7,
-				"DCChargingPower":      150.0, // active DC charge — must override AC
+				"ACChargingPower":      7700.0,
+				"DCChargingPower":      150000.0, // active DC charge — must override AC
+				"ACChargingEnergyIn":   10000.0,
+				"DCChargingEnergyIn":   12000.0,
 				"BatteryLevel":         65.0,
 				"ChargeState":          "Charging",
 				"IdealBatteryRange":    250.0,
@@ -145,9 +159,12 @@ func TestChargingTelemetry_Latest_UsesNow(t *testing.T) {
 	if v, ok := got["charging_state"].(string); !ok || v != "Charging" {
 		t.Fatalf("charging_state = %v, want Charging", got["charging_state"])
 	}
-	// DCChargingPower=150 must override AC power and be returned under the SI key.
-	if v, ok := got["charger_power_w"].(float64); !ok || v != 150.0 {
-		t.Fatalf("charger_power_w = %v, want 150 (DC override active)", got["charger_power_w"])
+	// DCChargingPower=150000 W must override AC power under the SI key.
+	if v, ok := got["charger_power_w"].(float64); !ok || v != 150000.0 {
+		t.Fatalf("charger_power_w = %v, want 150000 (DC override active)", got["charger_power_w"])
+	}
+	if v, ok := got["charge_energy_added_wh"].(float64); !ok || v != 12000.0 {
+		t.Fatalf("charge_energy_added_wh = %v, want 12000 (DC override active)", got["charge_energy_added_wh"])
 	}
 }
 
diff --git a/internal/api/charging/handler.go b/internal/api/charging/handler.go
index 22a8e1b159..8931d11d33 100644
--- a/internal/api/charging/handler.go
+++ b/internal/api/charging/handler.go
@@ -68,15 +68,16 @@ func (h *ChargingHandler) WithForwardAuthHeader(name string) *ChargingHandler {
 // chargeTelemetryFieldMappings projects the signal_log change feed into the
 // legacy ChargeTelemetryReading JSON shape. Field names match the old
 // pivot-mapping signal/field pairs so the wire contract is unchanged.
-// AC/DC power is merged into a canonical "power_kw" by the
+// AC/DC power is merged into the existing "power_kw" chart field by the
 // TelemetryReadings handler post-processing.
 var chargeTelemetryFieldMappings = []signal.FieldMapping{
 	{Signal: "BatteryLevel", Field: "battery_level"},
 	{Signal: "ChargerVoltage", Field: "voltage"},
 	{Signal: "ChargerActualCurrent", Field: "current_amps"},
 	{Signal: "ACChargingPower", Field: "power_kw"},
-	{Signal: "DCChargingPower", Field: "dc_power_kw"},
+	{Signal: "DCChargingPower", Field: "dc_power_w"},
 	{Signal: "ACChargingEnergyIn", Field: "energy_added"},
+	{Signal: "DCChargingEnergyIn", Field: "dc_energy_wh"},
 	{Signal: "ChargeRateMilePerHour", Field: "range_added_meters_per_hour"},
 	{Signal: "BatteryHeaterOn", Field: "battery_heater_on"},
 	{Signal: "InsideTemp", Field: "inside_temp"},
@@ -206,14 +207,20 @@ func (h *ChargingHandler) enrichLiveCharge(ctx context.Context, session *chargin
 		}
 	}
 
-	startEnergy, startOk := signalFloat(startSnap, "ACChargingEnergyIn")
-	currentEnergy, currentOk := signalFloat(currentSnap, "ACChargingEnergyIn")
-	if startOk && currentOk && currentEnergy > startEnergy {
-		delta := safeFloat(currentEnergy - startEnergy)
-		session.TotalEnergyAddedWh = &delta
+	for _, field := range []string{"DCChargingEnergyIn", "ACChargingEnergyIn"} {
+		startEnergy, startOK := signalFloat(startSnap, field)
+		currentEnergy, currentOK := signalFloat(currentSnap, field)
+		if startOK && currentOK && currentEnergy > startEnergy {
+			delta := safeFloat(currentEnergy - startEnergy)
+			session.TotalEnergyAddedWh = &delta
+			break
+		}
 	}
 
-	if power, ok := signalFloat(currentSnap, "ACChargingPower"); ok {
+	if power, ok := signalFloat(currentSnap, "DCChargingPower"); ok && power > 0 {
+		v := safeFloat(power)
+		session.PeakPowerW = &v
+	} else if power, ok := signalFloat(currentSnap, "ACChargingPower"); ok {
 		v := safeFloat(power)
 		session.PeakPowerW = &v
 	}
@@ -269,18 +276,27 @@ func (h *ChargingHandler) TelemetryReadings(w http.ResponseWriter, r *http.Reque
 		return
 	}
 	rows := timelineRowsToFlat(timelineRows)
-	// Merge AC/DC power into a canonical power_kw field.
-	// DC fast-charging sessions report DCChargingPower, not ACChargingPower.
-	// Per ADR-002: if neither is present, leave power_kw as nil (not zero).
+	// The signal change feed is canonical W/Wh. Preserve this endpoint's
+	// established legacy chart contract (power_kw / energy_added in kW/kWh)
+	// strictly at the HTTP boundary; session summaries remain Wh/W.
 	for _, row := range rows {
-		ac, acOk := signal.Float64(row["power_kw"])
-		dc, dcOk := signal.Float64(row["dc_power_kw"])
-		if dcOk && dc > 0 {
-			row["power_kw"] = dc
-		} else if !acOk || ac == 0 {
-			// Neither AC nor DC has a positive value — leave power_kw as-is (nil)
+		acPowerW, acPowerOK := signal.Float64(row["power_kw"])
+		dcPowerW, dcPowerOK := signal.Float64(row["dc_power_w"])
+		if dcPowerOK && dcPowerW > 0 {
+			row["power_kw"] = safeFloat(dcPowerW / 1000.0)
+		} else if acPowerOK {
+			row["power_kw"] = safeFloat(acPowerW / 1000.0)
+		}
+
+		acEnergyWh, acEnergyOK := signal.Float64(row["energy_added"])
+		dcEnergyWh, dcEnergyOK := signal.Float64(row["dc_energy_wh"])
+		if dcEnergyOK && dcEnergyWh > 0 {
+			row["energy_added"] = safeFloat(dcEnergyWh / 1000.0)
+		} else if acEnergyOK {
+			row["energy_added"] = safeFloat(acEnergyWh / 1000.0)
 		}
-		delete(row, "dc_power_kw")
+		delete(row, "dc_power_w")
+		delete(row, "dc_energy_wh")
 	}
 	// Rename "ts" → "created_at" to match old ChargeTelemetryReading JSON shape
 	for _, row := range rows {
diff --git a/internal/api/charging/handler_test.go b/internal/api/charging/handler_test.go
index ca67b389c8..e2fe9d81f6 100644
--- a/internal/api/charging/handler_test.go
+++ b/internal/api/charging/handler_test.go
@@ -186,6 +186,46 @@ func TestChargingHandler_Latest_UsesNowSnapshot(t *testing.T) {
 	}
 }
 
+func TestChargingHandler_LiveDCSessionUsesCanonicalWhAndW(t *testing.T) {
+	startTs := time.Date(2026, 8, 9, 9, 30, 0, 0, time.UTC)
+	session := inProgressChargingSession(11, 42, startTs)
+	fake := &fakeStateReader{
+		stateFn: func(_ context.Context, _ int64, at time.Time) (signal.State, error) {
+			if at.Equal(startTs) {
+				return signal.State{
+					"DCChargingEnergyIn": 100000.0,
+					"BatteryLevel":       40.0,
+				}, nil
+			}
+			return signal.State{
+				"DCChargingEnergyIn": 112000.0,
+				"DCChargingPower":    150000.0,
+				"ACChargingPower":    7200.0,
+				"BatteryLevel":       55.0,
+			}, nil
+		},
+	}
+	charging := &fakeChargingByIDFetcher{session: session}
+	h := &ChargingHandler{state: fake, live: newTestLiveStateReader(fake), charging: charging}
+
+	rec := httptest.NewRecorder()
+	h.Get(rec, newChargingRequest(t, "11", ""))
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+	}
+
+	var got chargingmodel.ChargingSession
+	if err := json.Unmarshal(rec.Body.Bytes(), &got); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	if got.TotalEnergyAddedWh == nil || *got.TotalEnergyAddedWh != 12000 {
+		t.Fatalf("total_energy_added_wh = %v, want 12000", got.TotalEnergyAddedWh)
+	}
+	if got.PeakPowerW == nil || *got.PeakPowerW != 150000 {
+		t.Fatalf("peak_power_w = %v, want 150000", got.PeakPowerW)
+	}
+}
+
 // TestChargingHandler_Telemetry_ChartMode locks in the chart-mode contract:
 // TelemetryReadings MUST call Timeline with an empty CollapseBy slice so
 // every change-feed emission becomes one row (forward-folded values appear
@@ -223,6 +263,46 @@ func TestChargingHandler_Telemetry_ChartMode(t *testing.T) {
 	}
 }
 
+func TestChargingHandler_Telemetry_ConvertsCanonicalSIToLegacyChartUnits(t *testing.T) {
+	t0 := time.Date(2026, 8, 9, 10, 0, 0, 0, time.UTC)
+	t1 := t0.Add(15 * time.Minute)
+	fake := &fakeStateReader{
+		timelineFn: func(_ context.Context, _ int64, _ []signal.FieldMapping, _, _ time.Time, _ signal.TimelineOptions) ([]signal.TimelineRow, error) {
+			return []signal.TimelineRow{{
+				Timestamp: t0,
+				Fields: map[string]signal.SignalValue{
+					"power_kw":      7200.0,
+					"dc_power_w":    0.0,
+					"energy_added":  15089.164733886719,
+					"battery_level": 65.0,
+				},
+			}}, nil
+		},
+	}
+	charging := &fakeChargingByIDFetcher{session: completedChargingSession(7, 42, t0, t1)}
+	h := &ChargingHandler{state: fake, live: newTestLiveStateReader(fake), charging: charging}
+
+	rec := httptest.NewRecorder()
+	h.TelemetryReadings(rec, newChargingRequest(t, "7", "/charging/7/telemetry"))
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+	}
+
+	var rows []map[string]any
+	if err := json.Unmarshal(rec.Body.Bytes(), &rows); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	if len(rows) != 1 {
+		t.Fatalf("row count = %d, want 1", len(rows))
+	}
+	if got := rows[0]["power_kw"]; got != 7.2 {
+		t.Fatalf("power_kw = %v, want 7.2", got)
+	}
+	if got := rows[0]["energy_added"]; got != 15.089164733886718 {
+		t.Fatalf("energy_added = %v, want 15.089164733886718", got)
+	}
+}
+
 // TestChargingHandler_Telemetry_PropagatesError verifies that a Timeline
 // transport error (e.g. pgx connection drop) becomes a 500 to the client.
 // The legacy handler also returned 500 here; this test locks the contract
diff --git a/internal/api/energyflow/handler.go b/internal/api/energyflow/handler.go
index 0a5f4a6fd5..d895a7aa19 100644
--- a/internal/api/energyflow/handler.go
+++ b/internal/api/energyflow/handler.go
@@ -57,10 +57,14 @@ func (h *EnergyFlowHandler) Get(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if v, ok := signal.Float64(snap["DCChargingPower"]); ok {
-		dcPower = &v
+		// Preserve this endpoint's established kW response contract while
+		// live signal state remains canonical W.
+		kw := v / 1000.0
+		dcPower = &kw
 	}
 	if v, ok := signal.Float64(snap["ACChargingPower"]); ok {
-		acPower = &v
+		kw := v / 1000.0
+		acPower = &kw
 	}
 	if v, ok := signal.Float64(snap["EnergyRemaining"]); ok {
 		energyRemaining = &v
diff --git a/internal/api/energyflow/handler_test.go b/internal/api/energyflow/handler_test.go
index 4ab547d738..684a52e139 100644
--- a/internal/api/energyflow/handler_test.go
+++ b/internal/api/energyflow/handler_test.go
@@ -72,8 +72,8 @@ func TestEnergyFlow_Latest_UsesNow(t *testing.T) {
 		stateFn: func(_ context.Context, v int64, at time.Time) (signal.State, error) {
 			calls = append(calls, stateCallRecord{vehicleID: v, at: at})
 			return signal.State{
-				"DCChargingPower": 48.5,
-				"ACChargingPower": 7.2,
+				"DCChargingPower": 48500.0,
+				"ACChargingPower": 7200.0,
 				"EnergyRemaining": 62.3,
 				"PackVoltage":     396.8,
 				"PackCurrent":     -120.4,
@@ -126,6 +126,10 @@ func TestEnergyFlow_Latest_UsesNow(t *testing.T) {
 	if body["charge_state"] != "Charging" {
 		t.Fatalf("charge_state = %#v, want \"Charging\"", body["charge_state"])
 	}
+	if body["dc_charging_power"] != 48.5 || body["ac_charging_power"] != 7.2 {
+		t.Fatalf("charging power = (%v, %v), want (48.5, 7.2) kW",
+			body["dc_charging_power"], body["ac_charging_power"])
+	}
 }
 
 // TestEnergyFlow_PropagatesError verifies that a StateReader.State
diff --git a/internal/api/telemetry/telemetry_sessions_charge_tracking_test.go b/internal/api/telemetry/telemetry_sessions_charge_tracking_test.go
index f7e2f95bda..788cc70a3e 100644
--- a/internal/api/telemetry/telemetry_sessions_charge_tracking_test.go
+++ b/internal/api/telemetry/telemetry_sessions_charge_tracking_test.go
@@ -132,7 +132,7 @@ func TestChargeTracking_StartSnapshot_UsesState(t *testing.T) {
 	startTime := time.Date(2026, 4, 30, 12, 0, 0, 0, time.UTC)
 	wantSnap := signal.State{
 		"BatteryLevel":       18.0,
-		"ACChargingEnergyIn": 100.0,
+		"ACChargingEnergyIn": 100000.0,
 		"BatteryRange":       95.0,
 	}
 
@@ -201,9 +201,9 @@ func TestChargeTracking_EndSnapshot_UsesState(t *testing.T) {
 			// Distinct payloads so the test can confirm the test-side
 			// caller plumbed each at-anchor through to the right call.
 			if at.Equal(startTime) {
-				return signal.State{"ACChargingEnergyIn": 100.0, "BatteryRange": 95.0}, nil
+				return signal.State{"ACChargingEnergyIn": 100000.0, "BatteryRange": 95.0}, nil
 			}
-			return signal.State{"ACChargingEnergyIn": 130.5, "BatteryRange": 215.0}, nil
+			return signal.State{"ACChargingEnergyIn": 130500.0, "BatteryRange": 215.0}, nil
 		},
 	}
 	tracker := &TelemetrySessionTracker{}
@@ -247,8 +247,8 @@ func TestChargeTracking_EndSnapshot_UsesState(t *testing.T) {
 	// would yield a negative delta the production code drops.
 	startEnergy, _ := snapFloat(stateToLegacyMap(startSnap), "ACChargingEnergyIn")
 	endEnergy, _ := snapFloat(stateToLegacyMap(endSnap), "ACChargingEnergyIn")
-	if delta := endEnergy - startEnergy; delta != 30.5 {
-		t.Fatalf("energy delta from snapshots = %v, want 30.5", delta)
+	if delta := endEnergy - startEnergy; delta != 30500 {
+		t.Fatalf("energy delta from snapshots = %v, want 30500 Wh", delta)
 	}
 }
 
diff --git a/internal/api/telemetry/telemetry_sessions_recovery_test.go b/internal/api/telemetry/telemetry_sessions_recovery_test.go
index c1a5bd9805..6c91fd58af 100644
--- a/internal/api/telemetry/telemetry_sessions_recovery_test.go
+++ b/internal/api/telemetry/telemetry_sessions_recovery_test.go
@@ -132,13 +132,13 @@ func TestRecovery_RebuildsStateFromForwardFold(t *testing.T) {
 			case vehicleID == chargeVehicleID && at.Equal(chargeStart):
 				return signal.State{
 					"BatteryLevel":       18.0,
-					"ACChargingEnergyIn": 100.0,
+					"ACChargingEnergyIn": 100000.0,
 					"BatteryRange":       95.0,
 				}, nil
 			case vehicleID == chargeVehicleID && at.Equal(chargeEnd):
 				return signal.State{
 					"BatteryLevel":       80.0,
-					"ACChargingEnergyIn": 130.5,
+					"ACChargingEnergyIn": 130500.0,
 					"BatteryRange":       215.0,
 				}, nil
 			}
@@ -233,19 +233,19 @@ func TestRecovery_RebuildsStateFromForwardFold(t *testing.T) {
 
 	// Charge energy delta: a regression that swapped start/end would
 	// yield a negative delta the production code drops on the > 0 guard,
-	// silently dropping every recovered charge's energy_added_kwh.
+	// silently dropping every recovered charge's energy total.
 	chargeStartLegacy := stateToLegacyMap(chargeStartSnap)
 	chargeEndLegacy := stateToLegacyMap(chargeEndSnap)
 	startEnergy, ok := snapFloat(chargeStartLegacy, "ACChargingEnergyIn")
-	if !ok || startEnergy != 100.0 {
-		t.Fatalf("charge start ACChargingEnergyIn = (%v, %v), want (100.0, true)", startEnergy, ok)
+	if !ok || startEnergy != 100000.0 {
+		t.Fatalf("charge start ACChargingEnergyIn = (%v, %v), want (100000.0, true)", startEnergy, ok)
 	}
 	endEnergy, ok := snapFloat(chargeEndLegacy, "ACChargingEnergyIn")
-	if !ok || endEnergy != 130.5 {
-		t.Fatalf("charge end ACChargingEnergyIn = (%v, %v), want (130.5, true)", endEnergy, ok)
+	if !ok || endEnergy != 130500.0 {
+		t.Fatalf("charge end ACChargingEnergyIn = (%v, %v), want (130500.0, true)", endEnergy, ok)
 	}
-	if delta := endEnergy - startEnergy; delta != 30.5 {
-		t.Fatalf("charge energy delta from snapshots = %v, want 30.5", delta)
+	if delta := endEnergy - startEnergy; delta != 30500 {
+		t.Fatalf("charge energy delta from snapshots = %v, want 30500 Wh", delta)
 	}
 
 	// Nil-state degradation: when SetDriveStateReader has not run yet
diff --git a/internal/database/geofence/repo_charging_summary.go b/internal/database/geofence/repo_charging_summary.go
index 32e7f2a87f..43dce097ba 100644
--- a/internal/database/geofence/repo_charging_summary.go
+++ b/internal/database/geofence/repo_charging_summary.go
@@ -3,6 +3,7 @@ package geofence
 import (
 	"context"
 	"fmt"
+	"strings"
 	"time"
 
 	systemmodel "github.com/ev-dev-labs/teslasync/internal/models/system"
@@ -107,6 +108,7 @@ type repriceCandidate struct {
 	geofenceID  *int64
 	startLat    *float64
 	startLng    *float64
+	startPlace  *string
 	energyWh    *float64
 	costDecimal *float64
 	costSource  *string
@@ -121,7 +123,7 @@ type repriceCandidate struct {
 // has no PostGIS geometry types, only WKT text + Go Haversine math.
 func (r *GeofenceRepo) loadRepriceCandidates(ctx context.Context, geofenceID int64, from time.Time, to *time.Time) ([]repriceCandidate, error) {
 	query := `
-SELECT id, geofence_id, start_lat, start_lng, total_energy_added_wh, cost_decimal, cost_source
+SELECT id, geofence_id, start_lat, start_lng, start_place, total_energy_added_wh, cost_decimal, cost_source
 FROM charging_sessions
 WHERE (geofence_id = $1 OR geofence_id IS NULL)
   AND started_at >= $2`
@@ -144,6 +146,7 @@ WHERE (geofence_id = $1 OR geofence_id IS NULL)
 			&c.geofenceID,
 			&c.startLat,
 			&c.startLng,
+			&c.startPlace,
 			&c.energyWh,
 			&c.costDecimal,
 			&c.costSource,
@@ -161,7 +164,9 @@ WHERE (geofence_id = $1 OR geofence_id IS NULL)
 // classifyRepriceCandidates partitions loadRepriceCandidates' output into
 // (matched, eligible, protected) against one geofence's circle:
 //   - matched: already attributed to this geofence, OR unattributed but
-//     spatially inside this geofence's circle.
+//     spatially inside this geofence's circle. Legacy sessions without usable
+//     coordinates also match an identical saved start-place name; explicit
+//     preview/apply remains the write gate for this conservative fallback.
 //   - eligible (subset of matched): cost_source is geofence_tariff or
 //     default_estimate, or it is empty/unknown with no existing cost, AND
 //     total_energy_added_wh is known. These are the ids ApplyRate may write.
@@ -181,8 +186,14 @@ func classifyRepriceCandidates(candidates []repriceCandidate, g *systemmodel.Geo
 		switch {
 		case c.geofenceID != nil && *c.geofenceID == g.ID:
 			inScope = true
-		case c.geofenceID == nil && c.startLat != nil && c.startLng != nil && radius > 0:
+		case c.geofenceID == nil &&
+			c.startLat != nil &&
+			c.startLng != nil &&
+			validCoordinate(*c.startLat, *c.startLng) &&
+			radius > 0:
 			inScope = haversineMeters(*c.startLat, *c.startLng, cLat, cLon) <= radius
+		case c.geofenceID == nil && c.startPlace != nil && strings.TrimSpace(g.Name) != "":
+			inScope = strings.EqualFold(strings.TrimSpace(*c.startPlace), strings.TrimSpace(g.Name))
 		}
 		if !inScope {
 			continue
diff --git a/internal/database/geofence/repo_charging_summary_test.go b/internal/database/geofence/repo_charging_summary_test.go
index 45152dddb8..ea2929883f 100644
--- a/internal/database/geofence/repo_charging_summary_test.go
+++ b/internal/database/geofence/repo_charging_summary_test.go
@@ -241,6 +241,12 @@ func TestClassifyRepriceCandidates(t *testing.T) {
 		{id: 9, geofenceID: int64Ptr(1), energyWh: f64ptr(6000), costSource: strptr(systemmodel.CostSourceGeofenceTariff)},
 		// 10: pre-feature row with a real cost but no provenance -> protected.
 		{id: 10, geofenceID: int64Ptr(1), energyWh: f64ptr(6000), costDecimal: f64ptr(7.25)},
+		// 11: legacy unattributed row without coordinates but with an exact saved place name -> eligible.
+		{id: 11, startPlace: strptr("  test PLACE  "), energyWh: f64ptr(2500)},
+		// 12: a different legacy place name must not match.
+		{id: 12, startPlace: strptr("Different Place"), energyWh: f64ptr(2500)},
+		// 13: placeholder (0,0) coordinates are unusable, so the exact-name fallback applies.
+		{id: 13, startLat: f64ptr(0), startLng: f64ptr(0), startPlace: strptr("Test Place"), energyWh: f64ptr(1500)},
 	}
 
 	matched, eligible, protected := classifyRepriceCandidates(candidates, g)
@@ -257,8 +263,8 @@ func TestClassifyRepriceCandidates(t *testing.T) {
 		}
 	}
 
-	assertIDs(t, "matched", matched, []int64{1, 2, 4, 5, 6, 9, 10})
-	assertIDs(t, "eligible", eligible, []int64{1, 2, 9})
+	assertIDs(t, "matched", matched, []int64{1, 2, 4, 5, 6, 9, 10, 11, 13})
+	assertIDs(t, "eligible", eligible, []int64{1, 2, 9, 11, 13})
 	assertIDs(t, "protected", protected, []int64{4, 5, 10})
 
 	// The remainder (matched - eligible - protected) must be exactly {6}:
@@ -334,7 +340,7 @@ func TestLoadRepriceCandidates(t *testing.T) {
 	})
 
 	t.Run("scan error wrapped", func(t *testing.T) {
-		rows := newFakeRows([][]any{{int64(1), (*int64)(nil), (*float64)(nil), (*float64)(nil), (*float64)(nil), (*string)(nil)}})
+		rows := newFakeRows([][]any{{int64(1), (*int64)(nil), (*float64)(nil), (*float64)(nil), (*string)(nil), (*float64)(nil), (*float64)(nil), (*string)(nil)}})
 		rows.scanErrAt = 0
 		pool := &fakePool{queryQueue: []queryResult{{rows: rows}}}
 		_, err := newRepo(pool).loadRepriceCandidates(context.Background(), 1, from, nil)
@@ -410,8 +416,8 @@ func scenarioCandidatesRows(g *systemmodel.Geofence) [][]any {
 	cLat, cLon := g.Centroid()
 	manual := systemmodel.CostSourceManual
 	return [][]any{
-		{int64(10), (*int64)(nil), &cLat, &cLon, f64ptr(10_000), (*float64)(nil), (*string)(nil)},
-		{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), f64ptr(5_000), f64ptr(4.25), &manual},
+		{int64(10), (*int64)(nil), &cLat, &cLon, (*string)(nil), f64ptr(10_000), (*float64)(nil), (*string)(nil)},
+		{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), (*string)(nil), f64ptr(5_000), f64ptr(4.25), &manual},
 	}
 }
 
@@ -459,7 +465,7 @@ func TestPreviewApplyRate(t *testing.T) {
 
 	t.Run("zero eligible sessions skips the aggregate round trip", func(t *testing.T) {
 		manual := systemmodel.CostSourceManual
-		onlyProtected := [][]any{{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), f64ptr(5_000), f64ptr(4.25), &manual}}
+		onlyProtected := [][]any{{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), (*string)(nil), f64ptr(5_000), f64ptr(4.25), &manual}}
 		pool := &fakePool{
 			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
 			queryQueue:    []queryResult{{rows: newFakeRows(onlyProtected)}},
@@ -539,7 +545,7 @@ func TestApplyRate(t *testing.T) {
 
 	t.Run("zero eligible sessions skips the UPDATE round trip", func(t *testing.T) {
 		manual := systemmodel.CostSourceManual
-		onlyProtected := [][]any{{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), f64ptr(5_000), f64ptr(4.25), &manual}}
+		onlyProtected := [][]any{{int64(11), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), (*string)(nil), f64ptr(5_000), f64ptr(4.25), &manual}}
 		pool := &fakePool{
 			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
 			queryQueue:    []queryResult{{rows: newFakeRows(onlyProtected)}},
@@ -561,7 +567,7 @@ func TestApplyRate(t *testing.T) {
 		cLat, cLon := g.Centroid()
 		manual := systemmodel.CostSourceManual
 		unattributedProtected := [][]any{
-			{int64(11), (*int64)(nil), &cLat, &cLon, f64ptr(5_000), f64ptr(4.25), &manual},
+			{int64(11), (*int64)(nil), &cLat, &cLon, (*string)(nil), f64ptr(5_000), f64ptr(4.25), &manual},
 		}
 		pool := &fakePool{
 			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
@@ -599,7 +605,7 @@ func TestApplyRate(t *testing.T) {
 		// an eligible candidate set that yields an UPDATE returning zero
 		// rows (e.g. concurrent apply already converged it to a manual
 		// cost between classification and the UPDATE).
-		alreadyDone := [][]any{{int64(10), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), f64ptr(10_000), f64ptr(1.005), strptr(systemmodel.CostSourceGeofenceTariff)}}
+		alreadyDone := [][]any{{int64(10), int64Ptr(g.ID), (*float64)(nil), (*float64)(nil), (*string)(nil), f64ptr(10_000), f64ptr(1.005), strptr(systemmodel.CostSourceGeofenceTariff)}}
 		pool := &fakePool{
 			queryRowQueue: []pgx.Row{fakeRow{vals: geofenceRowVals(g)}, fakeRow{vals: geofenceRateRowVals(rt)}},
 			queryQueue: []queryResult{
diff --git a/internal/fsm/charge/machine_test.go b/internal/fsm/charge/machine_test.go
index 21fa05058d..c724627195 100644
--- a/internal/fsm/charge/machine_test.go
+++ b/internal/fsm/charge/machine_test.go
@@ -56,11 +56,11 @@ func TestPending_ChargerInfoCaptured(t *testing.T) {
 
 func TestActive_AccumulatesEnergy(t *testing.T) {
 	m := newActiveFSM()
-	m.ProcessSignals(map[string]interface{}{"DCChargingEnergyIn": 5.2})
-	m.ProcessSignals(map[string]interface{}{"DCChargingEnergyIn": 10.4})
+	m.ProcessSignals(map[string]interface{}{"DCChargingEnergyIn": 5200.0})
+	m.ProcessSignals(map[string]interface{}{"DCChargingEnergyIn": 10400.0})
 	ctx := m.Context()
-	if ctx.EnergyAdded != 10.4 {
-		t.Fatalf("expected 10.4 kWh, got %f", ctx.EnergyAdded)
+	if ctx.EnergyAdded != 10400 {
+		t.Fatalf("expected 10400 Wh, got %f", ctx.EnergyAdded)
 	}
 }
 
@@ -69,12 +69,12 @@ func TestActive_AccumulatesVoltageCurrentPower(t *testing.T) {
 	m.ProcessSignals(map[string]interface{}{
 		"ChargerVoltage":       240,
 		"ChargerActualCurrent": 32,
-		"ACChargingPower":      7.6,
+		"ACChargingPower":      7600.0,
 	})
 	m.ProcessSignals(map[string]interface{}{
 		"ChargerVoltage":       241,
 		"ChargerActualCurrent": 31,
-		"ACChargingPower":      7.4,
+		"ACChargingPower":      7400.0,
 	})
 	ctx := m.Context()
 	if ctx.VoltageSamples != 2 {
@@ -119,7 +119,7 @@ func TestCompleting_EndFieldsPresent_TransitionsToDone(t *testing.T) {
 	m := newCompletingFSM()
 	m.ProcessSignals(map[string]interface{}{
 		"BatteryLevel":       80,
-		"DCChargingEnergyIn": 25.0,
+		"DCChargingEnergyIn": 25000.0,
 	})
 	if m.State() != Done {
 		t.Fatalf("expected Done, got %s", m.State())
@@ -158,7 +158,7 @@ func TestRecovered_ChargeStillActive_TransitionsToActive(t *testing.T) {
 	if m.State() != Recovered {
 		t.Fatalf("expected Recovered, got %s", m.State())
 	}
-	m.ProcessSignals(map[string]interface{}{"DCChargingEnergyIn": 12.0})
+	m.ProcessSignals(map[string]interface{}{"DCChargingEnergyIn": 12000.0})
 	if m.State() != Active {
 		t.Fatalf("expected Active, got %s", m.State())
 	}
@@ -186,7 +186,7 @@ func TestValidation_NoEnergyIn5Min(t *testing.T) {
 }
 
 func TestValidation_Energy150kWh(t *testing.T) {
-	c := &Context{StartBattery: 10, EndBattery: 100, EnergyAdded: 200,
+	c := &Context{StartBattery: 10, EndBattery: 100, EnergyAdded: 200_000,
 		StartTime: time.Now().Add(-time.Hour), EndTime: time.Now()}
 	issues := Validate(c)
 	assertContains(t, issues, "energy > 150 kWh")
@@ -194,7 +194,7 @@ func TestValidation_Energy150kWh(t *testing.T) {
 
 func TestValidation_AllGood(t *testing.T) {
 	c := &Context{
-		StartBattery: 45, EndBattery: 80, EnergyAdded: 25,
+		StartBattery: 45, EndBattery: 80, EnergyAdded: 25_000,
 		StartTime: time.Now().Add(-45 * time.Minute), EndTime: time.Now(),
 	}
 	issues := Validate(c)
@@ -223,10 +223,10 @@ func newDoneFSM() *SessionFSM {
 	m.mu.Lock()
 	m.ctx.StartTime = time.Now().UTC().Add(-45 * time.Minute)
 	m.mu.Unlock()
-	m.ProcessSignals(map[string]interface{}{"DCChargingEnergyIn": 20.0, "BatteryLevel": 65})
+	m.ProcessSignals(map[string]interface{}{"DCChargingEnergyIn": 20000.0, "BatteryLevel": 65})
 	m.TriggerEnding(map[string]interface{}{
 		"BatteryLevel":       80,
-		"DCChargingEnergyIn": 25.0,
+		"DCChargingEnergyIn": 25000.0,
 	}, false)
 	return m
 }
diff --git a/internal/fsm/charge/state.go b/internal/fsm/charge/state.go
index 345fdc3fa2..fd5160b57f 100644
--- a/internal/fsm/charge/state.go
+++ b/internal/fsm/charge/state.go
@@ -67,15 +67,15 @@ type Context struct {
 	Phases           int
 	MaxVoltage       int
 	MaxCurrent       int
-	MaxPower         float64
+	MaxPower         float64 // W
 
 	// Accumulation
-	EnergyAdded    float64 // kWh
+	EnergyAdded    float64 // Wh
 	VoltageSum     float64
 	VoltageSamples int
 	CurrentSum     float64
 	CurrentSamples int
-	PowerSum       float64
+	PowerSum       float64 // sum of W samples
 	PowerSamples   int
 	InsideTempSum  float64
 	OutsideTempSum float64
@@ -112,7 +112,7 @@ func (c *Context) BatteryGain() int {
 	return c.EndBattery - c.StartBattery
 }
 
-// AvgPower returns average charge power in kW.
+// AvgPower returns average charge power in W.
 func (c *Context) AvgPower() float64 {
 	if c.PowerSamples == 0 {
 		return 0
@@ -131,7 +131,7 @@ func Validate(c *Context) []string {
 	if c.EnergyAdded <= 0 && dur > 5*time.Minute {
 		issues = append(issues, "no energy added in >5min charge")
 	}
-	if c.EnergyAdded > 150 {
+	if c.EnergyAdded > 150_000 {
 		issues = append(issues, "energy > 150 kWh — suspicious")
 	}
 	if dur < 1*time.Minute {
@@ -139,7 +139,7 @@ func Validate(c *Context) []string {
 	}
 	if dur.Hours() > 0 && c.EnergyAdded > 0 {
 		rate := c.EnergyAdded / dur.Hours()
-		if rate > 350 {
+		if rate > 350_000 {
 			issues = append(issues, "charge rate > 350 kW — suspicious")
 		}
 	}
diff --git a/internal/service/vehicle_service.go b/internal/service/vehicle_service.go
index 73a13b7a60..1d1a357758 100644
--- a/internal/service/vehicle_service.go
+++ b/internal/service/vehicle_service.go
@@ -222,10 +222,12 @@ func (s *VehicleService) BuildStateFromSignalStore(store *signal.Store, vehicle
 		}
 	}
 	if f, ok := signal.Float64Value(all["ACChargingPower"]); ok {
-		state.ChargerPower = f
+		// VehicleState's established JSON contract exposes charger_power in
+		// kW; signal.Store is canonical W after telemetry normalization.
+		state.ChargerPower = f / 1000.0
 	}
 	if f, ok := signal.Float64Value(all["DCChargingPower"]); ok && f > 0 {
-		state.ChargerPower = f
+		state.ChargerPower = f / 1000.0
 	}
 	if f, ok := signal.Float64Value(all["ChargeRateMilePerHour"]); ok {
 		state.ChargeRate = f
diff --git a/internal/service/vehicle_service_test.go b/internal/service/vehicle_service_test.go
index e4269dbc08..bdd65bb1ad 100644
--- a/internal/service/vehicle_service_test.go
+++ b/internal/service/vehicle_service_test.go
@@ -439,7 +439,7 @@ func TestBuildStateFromSignalStore_AcceptsPhase42CodecNumericTypes(t *testing.T)
 		"OutsideTemp":           float32(14.5),
 		"Latitude":              float32(37.4419),
 		"Longitude":             float32(-122.143),
-		"ACChargingPower":       float32(7.2),
+		"ACChargingPower":       float32(7200),
 		"ChargeRateMilePerHour": float32(28.5),
 		"TimeToFullCharge":      float32(2.5),
 		// Int3/Int4 codec fields → int32 in the live store
diff --git a/internal/tesla/normalize/normalize.go b/internal/tesla/normalize/normalize.go
index 9b61928b3a..e3170516d4 100644
--- a/internal/tesla/normalize/normalize.go
+++ b/internal/tesla/normalize/normalize.go
@@ -107,12 +107,11 @@ var defaultMetrics = &Metrics{
 	}, []string{"field"}),
 }
 
-// toSI converts a unit-bearing atomic to canonical SI given the
-// active unit at the atomic's EmittedAt. For atomics whose Field is
-// dimensionless (UnitKindNone and not on the speed-override list)
-// or whose Field is UnitKindCharge (SoC scalars are always %), the
-// function returns the atomic unchanged — these flow through the
-// router with the producer-original Value.
+// toSI converts a unit-bearing atomic to canonical SI given the active unit
+// at the atomic's EmittedAt. Fixed-wire charging fields bypass unit history
+// and convert kWh/kW to Wh/W directly. For atomics whose Field is dimensionless
+// (UnitKindNone and not on an override list) or whose Field is UnitKindCharge
+// (SoC scalars are always %), the function returns the atomic unchanged.
 //
 // Errors:
 //
@@ -145,23 +144,19 @@ func (p *Pipeline) toSI(ctx context.Context, atomic codec.Atomic, vehicleIntID i
 		return atomic, nil
 	}
 
-	// Fixed-wire-unit fields (Odometer, RatedRange, etc.) bypass the
-	// unit-history lookup entirely: their wire value is always in
-	// miles regardless of SettingDistanceUnit, so units.ToSI applies
-	// the miles conversion with active="" and the atomic MUST NOT be
-	// dropped on unithistory.ErrNotFound. Without this bypass a
-	// fresh vehicle with no unit_history rows would silently drop
-	// every Odometer / range sample. See units.IsFixedMileDistanceField
-	// and the empirical evidence in conversions.go for why these
-	// fields do not follow the user setting.
-	if units.IsFixedMileDistanceField(atomic.Field) {
+	// Fixed-wire-unit fields bypass unit history entirely. Distance/range
+	// fields are always miles; charging energy/power fields are always
+	// kWh/kW. Neither family may be dropped because a vehicle has no
+	// unit_history row.
+	if units.IsFixedMileDistanceField(atomic.Field) ||
+		units.IsFixedKiloToBaseField(atomic.Field) {
 		raw, ok := coerceFloat(atomic.Value)
 		if !ok {
 			return codec.Atomic{}, fmt.Errorf("%w: %s value of type %T not coercible to float64", units.ErrUnsupportedField, atomic.Field, atomic.Value)
 		}
 		siValue, err := units.ToSI(atomic.Field, raw, "")
 		if err != nil {
-			return codec.Atomic{}, fmt.Errorf("normalize: units.ToSI(%s, %v, fixed-mile): %w", atomic.Field, raw, err)
+			return codec.Atomic{}, fmt.Errorf("normalize: units.ToSI(%s, %v, fixed-wire): %w", atomic.Field, raw, err)
 		}
 		atomic.Value = siValue
 		return atomic, nil
@@ -202,8 +197,8 @@ func (p *Pipeline) toSI(ctx context.Context, atomic codec.Atomic, vehicleIntID i
 	return atomic, nil
 }
 
-// needsConversion reports whether toSI should perform a unit lookup
-// + conversion for the field. The two cases that DO need conversion:
+// needsConversion reports whether toSI should perform a conversion for the
+// field. The cases that DO need conversion:
 //
 //   - UnitKindDistance / UnitKindTemperature / UnitKindPressure: the
 //     value is in the wire-format unit and must be converted to SI
@@ -215,12 +210,15 @@ func (p *Pipeline) toSI(ctx context.Context, atomic codec.Atomic, vehicleIntID i
 //     overloading), but units.ToSI handles them via an internal
 //     speed-conversions table given the active distance unit.
 //
+//   - fixed kWh/kW charging fields: UnitKindNone metadata, but Tesla's
+//     documented wire unit must be scaled to Wh/W without unit history.
+//
 // UnitKindCharge is intentionally a pass-through: SoC scalars are
 // always emitted in % and units.ToSI returns ErrUnsupportedUnit for
 // them. The SettingChargeUnit signal is recorded for UI display
 // preference only.
 func needsConversion(field string, meta *protomodel.SignalMeta) bool {
-	if isSpeedField(field) {
+	if isSpeedField(field) || units.IsFixedKiloToBaseField(field) {
 		return true
 	}
 	if meta == nil {
diff --git a/internal/tesla/normalize/normalize_test.go b/internal/tesla/normalize/normalize_test.go
index ad411811e4..53b42eb98d 100644
--- a/internal/tesla/normalize/normalize_test.go
+++ b/internal/tesla/normalize/normalize_test.go
@@ -285,6 +285,61 @@ func TestPipeline_FixedMileNoUnitHistory(t *testing.T) {
 	}
 }
 
+// TestPipeline_FixedChargingKiloUnits verifies that Tesla's fixed kWh/kW
+// charging fields bypass unit history and reach every downstream writer as
+// canonical Wh/W values. This is the regression net for charging sessions
+// that previously displayed 0.02 kWh for a real 15.09 kWh charge.
+func TestPipeline_FixedChargingKiloUnits(t *testing.T) {
+	t.Parallel()
+
+	const vehicleID int64 = 102
+	tNow := time.Date(2026, 8, 9, 12, 0, 0, 0, time.UTC)
+	cases := []struct {
+		field string
+		raw   float32
+		want  float64
+	}{
+		{field: "ACChargingEnergyIn", raw: 15.089165, want: float64(float32(15.089165)) * 1000},
+		{field: "DCChargingEnergyIn", raw: 42.5, want: 42500},
+		{field: "ACChargingPower", raw: 7.2, want: float64(float32(7.2)) * 1000},
+		{field: "DCChargingPower", raw: 250, want: 250000},
+	}
+
+	for _, tc := range cases {
+		tc := tc
+		t.Run(tc.field, func(t *testing.T) {
+			t.Parallel()
+			repo := &fakeRepo{}
+			rt := &fakeRouter{}
+			p := New(repo, rt, zerolog.Nop())
+
+			err := p.processAtomics(context.Background(), []codec.Atomic{{
+				Field: tc.field, Value: tc.raw, EmittedAt: tNow, VehicleID: "VIN-CHARGE-SI",
+			}}, vehicleID)
+			if err != nil {
+				t.Fatalf("processAtomics returned error: %v", err)
+			}
+
+			for _, op := range repo.opsCopy() {
+				if op.kind == "at" {
+					t.Fatalf("histRepo.At called for fixed-wire field %s", tc.field)
+				}
+			}
+			routes := rt.routesCopy()
+			if len(routes) != 1 {
+				t.Fatalf("router received %d routes, want 1: %+v", len(routes), routes)
+			}
+			got, ok := routes[0].Value.(float64)
+			if !ok {
+				t.Fatalf("routed value type = %T, want float64", routes[0].Value)
+			}
+			if math.Abs(got-tc.want) > 1e-6 {
+				t.Fatalf("%s SI value = %v, want %v", tc.field, got, tc.want)
+			}
+		})
+	}
+}
+
 // TestPipelineHappyPath exercises the three primary dispatch arms in
 // one payload:
 //
diff --git a/internal/tesla/router/routing.yaml b/internal/tesla/router/routing.yaml
index b8f97615cd..39d1e6ed47 100644
--- a/internal/tesla/router/routing.yaml
+++ b/internal/tesla/router/routing.yaml
@@ -37,6 +37,7 @@ routes:
   - field: ACChargingPower
     dest: charging_telemetry
     column: ac_charging_power_w
+    also_signal_log: true
   - field: AutoSeatClimateLeft
     dest: climate_snapshot
     column: auto_seat_climate_left
@@ -166,6 +167,7 @@ routes:
   - field: DCChargingPower
     dest: charging_telemetry
     column: dc_charging_power_w
+    also_signal_log: true
   - field: DCDCEnable
     dest: signal_log
   - field: DefrostForPreconditioning
diff --git a/internal/tesla/units/conversions.go b/internal/tesla/units/conversions.go
index 56090ef313..5f76c382e3 100644
--- a/internal/tesla/units/conversions.go
+++ b/internal/tesla/units/conversions.go
@@ -174,3 +174,24 @@ var fixedMileDistanceFields = map[string]bool{
 func IsFixedMileDistanceField(field string) bool {
 	return fixedMileDistanceFields[field]
 }
+
+// fixedKiloToBaseFields lists Tesla charging fields whose wire values use
+// kilo-units independent of every Setting*Unit preference. The canonical
+// pipeline stores energy in Wh and power in W, so each value must be scaled
+// by 1000 before it reaches signal.Store, signal_log, or charging_telemetry.
+//
+// Source: Tesla Fleet Telemetry "Available Data" documents
+// AC/DCChargingEnergyIn in kWh and AC/DCChargingPower in kW:
+// https://developer.tesla.com/docs/fleet-api/fleet-telemetry/available-data
+var fixedKiloToBaseFields = map[string]bool{
+	"ACChargingEnergyIn": true,
+	"DCChargingEnergyIn": true,
+	"ACChargingPower":    true,
+	"DCChargingPower":    true,
+}
+
+// IsFixedKiloToBaseField reports whether a Tesla field has a fixed kWh/kW
+// wire unit that must be converted to Wh/W without consulting unit history.
+func IsFixedKiloToBaseField(field string) bool {
+	return fixedKiloToBaseFields[field]
+}
diff --git a/internal/tesla/units/units.go b/internal/tesla/units/units.go
index 7703df8474..a552403dd6 100644
--- a/internal/tesla/units/units.go
+++ b/internal/tesla/units/units.go
@@ -12,12 +12,14 @@ import (
 // callers (signal.Store writers, signal_log inserts, analytics) consume
 // SI values exclusively.
 //
-// Canonical SI forms by UnitKind (and the speed-override list):
+// Canonical SI forms by UnitKind (and the fixed-wire override lists):
 //
 //	UnitKindDistance       -> meters
 //	UnitKindTemperature    -> Celsius
 //	UnitKindPressure       -> Pascals
 //	{VehicleSpeed,CruiseSetSpeed} -> meters per second
+//	{AC,DC}ChargingEnergyIn       -> Watt-hours
+//	{AC,DC}ChargingPower          -> Watts
 //
 // Errors:
 //
@@ -76,6 +78,13 @@ func ToSI(field string, raw float64, active ActiveUnit) (float64, error) {
 		return raw * 1609.344, nil
 	}
 
+	// Tesla reports charging energy in kWh and charging power in kW over
+	// Fleet Telemetry. These wire units are fixed and do not depend on any
+	// Setting*Unit signal, so convert directly to canonical Wh/W.
+	if IsFixedKiloToBaseField(field) {
+		return raw * 1000.0, nil
+	}
+
 	if meta.UnitKind == protomodel.UnitKindNone {
 		return 0, fmt.Errorf("%w: %q", ErrUnsupportedField, field)
 	}
diff --git a/internal/tesla/units/units_test.go b/internal/tesla/units/units_test.go
index f64e012566..6b8788d612 100644
--- a/internal/tesla/units/units_test.go
+++ b/internal/tesla/units/units_test.go
@@ -67,6 +67,14 @@ func TestToSI(t *testing.T) {
 		{name: "SelfDrivingMilesSinceReset/active=mi_treated_as_mi", field: "SelfDrivingMilesSinceReset", raw: 25, active: ActiveUnitMiles, want: 25 * 1609.344, eps: epsTight},
 		{name: "SelfDrivingMilesSinceReset/active=km_treated_as_mi", field: "SelfDrivingMilesSinceReset", raw: 25, active: ActiveUnitKilometers, want: 25 * 1609.344, eps: epsTight},
 
+		// Fixed charging kilo-units: Tesla emits energy in kWh and power in
+		// kW regardless of vehicle unit preferences. They bypass unit
+		// history and land in the canonical pipeline as Wh/W.
+		{name: "ACChargingEnergyIn/kWh_to_Wh", field: "ACChargingEnergyIn", raw: 15.089164733886719, active: "", want: 15089.164733886719, eps: epsLoose},
+		{name: "DCChargingEnergyIn/kWh_to_Wh", field: "DCChargingEnergyIn", raw: 42.5, active: ActiveUnitMiles, want: 42500, eps: epsTight},
+		{name: "ACChargingPower/kW_to_W", field: "ACChargingPower", raw: 7.2, active: "", want: 7200, eps: epsTight},
+		{name: "DCChargingPower/kW_to_W", field: "DCChargingPower", raw: 250, active: ActiveUnitPSI, want: 250000, eps: epsTight},
+
 		// Temperature fields.
 		{name: "DiHeatsinkTR/F", field: "DiHeatsinkTR", raw: 32, active: ActiveUnitFahrenheit, want: 0, eps: epsTight},
 		{name: "DiHeatsinkTR/C", field: "DiHeatsinkTR", raw: 25, active: ActiveUnitCelsius, want: 25, eps: epsTight},
diff --git a/migrations/000229_fix_charging_energy_power_si.down.sql b/migrations/000229_fix_charging_energy_power_si.down.sql
new file mode 100644
index 0000000000..cd6aef686d
--- /dev/null
+++ b/migrations/000229_fix_charging_energy_power_si.down.sql
@@ -0,0 +1,2 @@
+-- Intentional no-op: this is a data repair. Dividing all values on rollback
+-- would corrupt rows written in canonical Wh/W after the up migration ran.
diff --git a/migrations/000229_fix_charging_energy_power_si.up.sql b/migrations/000229_fix_charging_energy_power_si.up.sql
new file mode 100644
index 0000000000..c09200308a
--- /dev/null
+++ b/migrations/000229_fix_charging_energy_power_si.up.sql
@@ -0,0 +1,139 @@
+-- Repair Tesla Fleet Telemetry charging values that were persisted with
+-- their fixed wire units (kWh/kW) in SI-canonical Wh/W columns.
+--
+-- The normalize pipeline now scales AC/DCChargingEnergyIn and
+-- AC/DCChargingPower by 1000 before routing. This migration performs the
+-- equivalent one-time correction for rows written before that fix, restores
+-- missing power history in signal_log, rebuilds session peak/average power,
+-- and recalculates only rate-derived costs. Manual, Tesla-actual, and unknown
+-- provenance costs remain untouched.
+
+-- Attribute old hot-table rows before aggregating them into session metrics.
+UPDATE charging_telemetry AS telemetry
+   SET session_id = session.id
+  FROM charging_sessions AS session
+ WHERE telemetry.session_id IS NULL
+   AND session.ended_at IS NOT NULL
+   AND telemetry.vehicle_id = session.vehicle_id
+   AND telemetry.ts >= session.started_at
+   AND telemetry.ts <= session.ended_at;
+
+-- Hot telemetry columns were named Wh/W but held Tesla's kWh/kW values.
+UPDATE charging_telemetry
+   SET ac_charging_energy_in_wh =
+           CASE WHEN ac_charging_energy_in_wh IS NULL
+                THEN NULL ELSE ac_charging_energy_in_wh * 1000.0 END,
+       dc_charging_energy_in_wh =
+           CASE WHEN dc_charging_energy_in_wh IS NULL
+                THEN NULL ELSE dc_charging_energy_in_wh * 1000.0 END,
+       ac_charging_power_w =
+           CASE WHEN ac_charging_power_w IS NULL
+                THEN NULL ELSE ac_charging_power_w * 1000.0 END,
+       dc_charging_power_w =
+           CASE WHEN dc_charging_power_w IS NULL
+                THEN NULL ELSE dc_charging_power_w * 1000.0 END
+ WHERE ac_charging_energy_in_wh IS NOT NULL
+    OR dc_charging_energy_in_wh IS NOT NULL
+    OR ac_charging_power_w IS NOT NULL
+    OR dc_charging_power_w IS NOT NULL;
+
+-- Energy was already dual-written to signal_log; power may exist there on a
+-- database that briefly ran an intermediate route. Correct either case.
+UPDATE signal_log
+   SET float_value = float_value * 1000.0
+ WHERE field IN (
+           'ACChargingEnergyIn',
+           'DCChargingEnergyIn',
+           'ACChargingPower',
+           'DCChargingPower'
+       )
+   AND float_value IS NOT NULL;
+
+-- Power was not historically dual-written. Backfill it from the corrected
+-- hot table so charge charts and completion aggregates have a durable source.
+INSERT INTO signal_log (
+    vehicle_id,
+    ts,
+    field,
+    value_kind,
+    float_value
+)
+SELECT vehicle_id, ts, 'ACChargingPower', 5, ac_charging_power_w
+  FROM charging_telemetry
+ WHERE ac_charging_power_w IS NOT NULL
+ON CONFLICT (vehicle_id, ts, field) DO NOTHING;
+
+INSERT INTO signal_log (
+    vehicle_id,
+    ts,
+    field,
+    value_kind,
+    float_value
+)
+SELECT vehicle_id, ts, 'DCChargingPower', 5, dc_charging_power_w
+  FROM charging_telemetry
+ WHERE dc_charging_power_w IS NOT NULL
+ON CONFLICT (vehicle_id, ts, field) DO NOTHING;
+
+-- Direct Fleet Telemetry totals were stored as kWh. Battery-delta fallback
+-- estimates start at 750 Wh, so the <500 guard distinguishes the malformed
+-- direct totals while the telemetry existence check excludes imports and the
+-- API-polling path, which already wrote Wh correctly.
+UPDATE charging_sessions AS session
+   SET total_energy_added_wh = session.total_energy_added_wh * 1000.0
+ WHERE session.total_energy_added_wh > 0
+   AND session.total_energy_added_wh < 500.0
+   AND EXISTS (
+       SELECT 1
+         FROM charging_telemetry AS telemetry
+        WHERE telemetry.session_id = session.id
+   );
+
+-- Rebuild peak/average power from corrected W telemetry. DC takes precedence
+-- when a session contains DC samples, matching SignalLogReader semantics.
+WITH power_rollup AS (
+    SELECT
+        session_id,
+        CASE
+            WHEN COUNT(dc_charging_power_w)
+                 FILTER (WHERE dc_charging_power_w > 0) > 0
+                THEN MAX(dc_charging_power_w)
+                     FILTER (WHERE dc_charging_power_w > 0)
+            ELSE MAX(ac_charging_power_w)
+                 FILTER (WHERE ac_charging_power_w > 0)
+        END AS peak_power_w,
+        CASE
+            WHEN COUNT(dc_charging_power_w)
+                 FILTER (WHERE dc_charging_power_w > 0) > 0
+                THEN AVG(dc_charging_power_w)
+                     FILTER (WHERE dc_charging_power_w > 0)
+            ELSE AVG(ac_charging_power_w)
+                 FILTER (WHERE ac_charging_power_w > 0)
+        END AS avg_power_w
+      FROM charging_telemetry
+     WHERE session_id IS NOT NULL
+     GROUP BY session_id
+)
+UPDATE charging_sessions AS session
+   SET peak_power_w = rollup.peak_power_w,
+       avg_power_w = rollup.avg_power_w
+  FROM power_rollup AS rollup
+ WHERE session.id = rollup.session_id
+   AND rollup.peak_power_w IS NOT NULL;
+
+-- Tariff/default estimates are deterministic derivatives of energy and may be
+-- safely recomputed. Protected actual/manual/unknown costs are never changed.
+UPDATE charging_sessions AS session
+   SET cost_decimal = ROUND(
+           session.total_energy_added_wh::numeric * rate.rate_per_wh,
+           6
+       ),
+       cost_currency = rate.currency
+  FROM geofence_rates AS rate
+ WHERE session.rate_id = rate.id
+   AND session.cost_source IN ('geofence_tariff', 'default_estimate')
+   AND session.total_energy_added_wh IS NOT NULL;
+
+-- These regular materialized views cache charging_sessions values.
+REFRESH MATERIALIZED VIEW cagg_charging_summary;
+REFRESH MATERIALIZED VIEW mv_energy_daily;
diff --git a/web/src/api/hooks/useLocations.test.tsx b/web/src/api/hooks/useLocations.test.tsx
index 31b5690743..e44e2d8f08 100644
--- a/web/src/api/hooks/useLocations.test.tsx
+++ b/web/src/api/hooks/useLocations.test.tsx
@@ -66,6 +66,7 @@ import {
   useUnarchiveGeofence,
   useMarkGeofenceReviewed,
   useRenameGeofence,
+  useUpdateGeofenceCategory,
   useGeofenceRates,
   useCreateGeofenceRate,
   useDeleteGeofenceRate,
@@ -464,6 +465,31 @@ describe('useRenameGeofence', () => {
   });
 });
 
+describe('useUpdateGeofenceCategory', () => {
+  it('PUTs the category and invalidates place lifecycle queries', async () => {
+    mockedRequest.mockResolvedValueOnce(makeApiGeofence({ id: 7, category: 'work' }));
+
+    const { Wrapper, qc } = makeWrapper();
+    const invalidate = vi.spyOn(qc, 'invalidateQueries');
+    const { result } = renderHook(() => useUpdateGeofenceCategory(), {
+      wrapper: Wrapper,
+    });
+
+    await result.current.mutateAsync({ geofenceId: 7, category: 'work' });
+
+    const [url, opts] = mockedRequest.mock.calls[0];
+    expect(url).toBe('/geofences/7');
+    expect(opts.method).toBe('PUT');
+    expect(JSON.parse(opts.body as string)).toEqual({ category: 'work' });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofences });
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofencesNeedsReview });
+    expect(successToast).toHaveBeenCalledWith(
+      'toast.geofence.category.success',
+      'Category updated',
+    );
+  });
+});
+
 describe('useArchiveGeofence', () => {
   it('POSTs /geofences/{id}/archive, invalidates the lifecycle caches, and toasts success', async () => {
     mockedRequest.mockResolvedValueOnce(makeApiGeofence({ id: 3, archived_at: '2026-08-01T00:00:00Z' }));
@@ -705,8 +731,12 @@ describe('useGeofenceRatePreview', () => {
 describe('useApplyGeofenceRate', () => {
   it('POSTs the apply endpoint and invalidates this place\'s summary/activity AND the global charging-sessions cache', async () => {
     const applyResult: GeofenceRateApplyResult = {
+      geofence_id: 7,
+      rate_id: 99,
+      matched_sessions: 10,
       priced_sessions: 6,
       skipped_sessions: 4,
+      total_energy_wh: 55_000,
       total_cost_decimal: 5.5,
       currency: 'USD',
     };
@@ -723,6 +753,9 @@ describe('useApplyGeofenceRate', () => {
     expect(url).toBe('/geofences/7/rates/99/apply');
     expect(opts.method).toBe('POST');
 
+    expect(invalidate).toHaveBeenCalledWith({
+      queryKey: ['geofences', 7, 'rates', 99, 'preview'],
+    });
     expect(invalidate).toHaveBeenCalledWith({ queryKey: locationKeys.geofenceChargingSummary(7) });
     expect(invalidate).toHaveBeenCalledWith({ queryKey: ['geofences', 7, 'charging-activity'] });
     expect(invalidate).toHaveBeenCalledWith({ queryKey: ['charging-sessions'] });
diff --git a/web/src/api/hooks/useLocations.ts b/web/src/api/hooks/useLocations.ts
index ce08e11b20..64565d328a 100644
--- a/web/src/api/hooks/useLocations.ts
+++ b/web/src/api/hooks/useLocations.ts
@@ -16,6 +16,7 @@ import type {
   GeofenceRateApplyResult,
   GeofenceChargingSummary,
   GeofenceChargingActivity,
+  GeofenceCategory,
 } from '../types';
 
 export const locationKeys = {
@@ -268,6 +269,31 @@ export function useRenameGeofence() {
   });
 }
 
+/** Update a charging place category without resending its geometry. */
+export function useUpdateGeofenceCategory() {
+  const qc = useQueryClient();
+  const { success, error } = useMutationToast();
+  return useMutation({
+    mutationFn: ({
+      geofenceId,
+      category,
+    }: {
+      geofenceId: number;
+      category: GeofenceCategory;
+    }) =>
+      request<ApiGeofence>(`/geofences/${geofenceId}`, {
+        method: 'PUT',
+        body: JSON.stringify({ category }),
+      }),
+    onSuccess: () => {
+      invalidateGeofenceLifecycle(qc);
+      success('toast.geofence.category.success', 'Category updated');
+    },
+    onError: (err) =>
+      error(err, 'toast.geofence.category.error', 'Failed to update category'),
+  });
+}
+
 /**
  * useGeofenceRates — GET /geofences/{geofenceID}/rates
  *
@@ -406,6 +432,9 @@ export function useApplyGeofenceRate() {
       );
     },
     onSuccess: (_data, vars) => {
+      invalidateAndBroadcast(qc, {
+        queryKey: ['geofences', vars.geofenceId, 'rates', vars.rateId, 'preview'],
+      });
       invalidateAndBroadcast(qc, { queryKey: locationKeys.geofenceChargingSummary(vars.geofenceId) });
       // charging-activity keys are parameterized by limit/offset per page;
       // invalidate the whole ['geofences', id, 'charging-activity'] subtree
diff --git a/web/src/features/charging/pages/ChargingDetailPage.test.tsx b/web/src/features/charging/pages/ChargingDetailPage.test.tsx
index f2b77252e3..714682346a 100644
--- a/web/src/features/charging/pages/ChargingDetailPage.test.tsx
+++ b/web/src/features/charging/pages/ChargingDetailPage.test.tsx
@@ -310,7 +310,7 @@ const unitReturn = (distance: 'km' | 'mi' = 'km') => ({
   formatTemperature: (v: number) => String(v),
   formatPressure: (v: number) => String(v),
   formatDuration: (v: number) => String(v),
-  formatPower: (v: number) => String(v),
+  formatPower: (w: number | null | undefined) => `${(Number(w ?? 0) / 1000).toFixed(1)} kW`,
 });
 
 function renderPage() {
@@ -333,7 +333,8 @@ function cardValue(scope: HTMLElement, label: string): string {
 
 /** The <dd> paired with a KVList <dt> label. */
 function kvValue(label: string): string {
-  return screen.getByText(label).closest('div')?.querySelector('dd')?.textContent ?? '';
+  const term = screen.getAllByText(label).find((element) => element.tagName === 'DT');
+  return term?.closest('div')?.querySelector('dd')?.textContent ?? '';
 }
 
 /** The LinearGauge double carrying a given label. */
@@ -460,6 +461,8 @@ describe('ChargingDetailPage — populated DC session', () => {
     expect(kvValue('Charger Voltage')).toBe('240 V');
     expect(kvValue('Active Charge Current')).toBe('24.5 A');
     expect(kvValue('Pilot Current')).toBe('32.0 A');
+    expect(kvValue('Charger Power')).toBe('11.0 kW');
+    expect(kvValue('Energy Added')).toBe('12.0 kWh');
     expect(kvValue('Phases')).toBe('3');
     // battery_range_mi is SI meters despite the suffix → 320 km.
     expect(kvValue('Battery Range')).toBe('320 km');
diff --git a/web/src/features/charging/pages/ChargingDetailPage.tsx b/web/src/features/charging/pages/ChargingDetailPage.tsx
index b431fcd012..37e4de938b 100644
--- a/web/src/features/charging/pages/ChargingDetailPage.tsx
+++ b/web/src/features/charging/pages/ChargingDetailPage.tsx
@@ -153,11 +153,9 @@ export default function ChargingDetailPage() {
   const sessionId = Number(id);
 
   // ChargingSession distance delta comes through the repo adapter as miles.
-  // Live ChargingTelemetry fields with misleading suffixes are SI values. Keep
-  // these conversions at the display boundary until the backend fields are
-  // renamed — the exact expressions below are preserved from the prior page so
-  // displayed values do not change during this layout redesign.
-  const { unitPrefs, formatEnergy } = useUnits();
+  // Live charging telemetry is canonical SI and is converted only at the
+  // display boundary.
+  const { unitPrefs, formatEnergy, formatPower } = useUnits();
   const toDistanceDisplay = (value: number) => convertDistanceFromSI(value, unitPrefs.distance);
 
   const distanceUnit = unitPrefs.distance;
@@ -959,7 +957,7 @@ export default function ChargingDetailPage() {
                       label: t('charging.detail.chargerPowerKw', 'Charger Power'),
                       value:
                         liveCharging.charger_power_w != null
-                          ? fmtWithUnit(liveCharging.charger_power_w, 'kW', 1)
+                          ? formatPower(liveCharging.charger_power_w, { precision: 1 })
                           : '—',
                     },
                     {
@@ -987,7 +985,7 @@ export default function ChargingDetailPage() {
                       label: t('charging.detail.chargeEnergyAdded', 'Energy Added'),
                       value:
                         liveCharging.charge_energy_added_wh != null
-                          ? fmtWithUnit(liveCharging.charge_energy_added_wh, 'kWh', 2)
+                          ? formatEnergy(liveCharging.charge_energy_added_wh, { precision: 2 })
                           : '—',
                     },
                     {
diff --git a/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.test.tsx b/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.test.tsx
index 4fb5e5e5a7..b0d8415444 100644
--- a/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.test.tsx
+++ b/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.test.tsx
@@ -24,6 +24,9 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import type { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+const { emptyPins } = vi.hoisted(() => ({ emptyPins: [] as never[] }));
 
 vi.mock('react-i18next', async () => {
   const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
@@ -43,6 +46,10 @@ vi.mock('@/api/hooks/useLocations', () => ({
   useGeofenceCurrentRates: vi.fn(),
 }));
 
+vi.mock('@/api/hooks/usePinned', () => ({
+  usePinned: () => ({ data: emptyPins }),
+}));
+
 interface StubPlace {
   id: number;
   archived_at?: string | null;
@@ -174,6 +181,32 @@ describe('ChargingPlacesWorkspace — data threading', () => {
     render(<ChargingPlacesWorkspace />);
     expect(screen.getByTestId('stub-places-table')).toHaveTextContent('loading=true');
   });
+
+  it('keeps the place directory usable when only current-rate loading fails', () => {
+    mockedPlaces.mockReturnValue({
+      data: [makePlace()],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    mockedCurrentRates.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: new Error('rates unavailable'),
+      refetch: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter>
+        <ChargingPlacesWorkspace />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByTestId('stub-places-table')).toHaveTextContent(
+      'places=1 rates=0 loading=false error=false',
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
 });
 
 describe('ChargingPlacesWorkspace — archived filter', () => {
diff --git a/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.tsx b/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.tsx
index 907bddc2f0..6e5b43e52b 100644
--- a/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.tsx
+++ b/web/src/features/maps/components/charging-places/ChargingPlacesWorkspace.tsx
@@ -1,54 +1,159 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Zap } from 'lucide-react';
+import { Plus, RefreshCw, Trash2, Zap } from 'lucide-react';
 
-import { GlassPanel, PanelTitle, Toggle } from '@/components/ui';
+import {
+  Button,
+  Caption,
+  ConfirmDialog,
+  GlassPanel,
+  PanelTitle,
+  Toggle,
+} from '@/components/ui';
+import { SearchInput } from '@/components/forms';
+import { QueryError } from '@/components/feedback';
 import {
   useGeofencesFull,
   useGeofenceNeedsReview,
   useGeofenceCurrentRates,
 } from '@/api/hooks/useLocations';
+import { usePinned } from '@/api/hooks/usePinned';
+import { useConfirm } from '@/hooks/useConfirm';
 import { NeedsSetupQueue } from './NeedsSetupQueue';
-import { PlacesTable } from './PlacesTable';
+import {
+  PlacesTable,
+  type GeofenceQuickPatch,
+} from './PlacesTable';
 import { PlaceDetailPanel } from './PlaceDetailPanel';
 import type { Geofence } from '@/api/types';
 
-/**
- * Top-level Charging Places workspace — the "Needs Setup" queue for
- * auto-discovered places, the full places list with each place's current
- * rate, and (via {@link PlaceDetailPanel}) the rate history / add-a-rate
- * / preview-apply / charging-activity detail view for whichever place is
- * selected. Mounted as a section of `GeofencesPage`, alongside (not
- * replacing) the existing zones/geofence management UI.
- */
-export function ChargingPlacesWorkspace() {
+export interface ChargingPlacesWorkspaceProps {
+  onAdd?: () => void;
+  onEdit?: (place: Geofence) => void;
+  onDelete?: (place: Geofence) => void;
+  onUpdate?: (place: Geofence, patch: GeofenceQuickPatch) => void;
+  onBulkDelete?: (places: Geofence[]) => Promise<void>;
+  updatePending?: boolean;
+  deletePending?: boolean;
+}
+
+export function ChargingPlacesWorkspace({
+  onAdd,
+  onEdit,
+  onDelete,
+  onUpdate,
+  onBulkDelete,
+  updatePending = false,
+  deletePending = false,
+}: ChargingPlacesWorkspaceProps) {
   const { t } = useTranslation();
+  const { confirm, dialogProps } = useConfirm();
   const [selectedPlace, setSelectedPlace] = useState<Geofence | null>(null);
+  const [selectedKeys, setSelectedKeys] = useState<number[]>([]);
   const [showArchived, setShowArchived] = useState(false);
+  const [search, setSearch] = useState('');
 
   const placesQuery = useGeofencesFull(showArchived);
   const needsReviewQuery = useGeofenceNeedsReview();
   const currentRatesQuery = useGeofenceCurrentRates();
+  const { data: pins = [] } = usePinned('geofence');
 
   const visiblePlaces = useMemo(() => {
-    const all = placesQuery.data ?? [];
-    return showArchived ? all : all.filter((p) => !p.archived_at);
-  }, [placesQuery.data, showArchived]);
+    const query = search.trim().toLocaleLowerCase();
+    const all = (placesQuery.data ?? []).filter(
+      (place) => showArchived || !place.archived_at,
+    );
+    const filtered = query
+      ? all.filter((place) =>
+          [place.name, place.category ?? '', place.origin]
+            .some((value) => value.toLocaleLowerCase().includes(query)),
+        )
+      : all;
+
+    if (pins.length === 0) return filtered;
+    const pinOrder = new Map(pins.map((pin) => [Number(pin.item_id), pin.position]));
+    return [...filtered].sort((a, b) => {
+      const aPosition = pinOrder.get(a.id);
+      const bPosition = pinOrder.get(b.id);
+      if (aPosition != null && bPosition != null) return aPosition - bPosition;
+      if (aPosition != null) return -1;
+      if (bPosition != null) return 1;
+      return 0;
+    });
+  }, [placesQuery.data, showArchived, search, pins]);
 
-  // Keep the open detail panel's data fresh as the underlying list
-  // refetches (e.g. right after an archive/unarchive/reviewed mutation)
-  // instead of holding a stale snapshot from the moment it was opened.
   const liveSelectedPlace = useMemo(() => {
     if (!selectedPlace) return null;
-    return placesQuery.data?.find((p) => p.id === selectedPlace.id) ?? selectedPlace;
+    return placesQuery.data?.find((place) => place.id === selectedPlace.id) ?? selectedPlace;
   }, [selectedPlace, placesQuery.data]);
 
+  useEffect(() => {
+    const visibleIds = new Set(visiblePlaces.map((place) => place.id));
+    setSelectedKeys((current) => {
+      const next = current.filter((id) => visibleIds.has(id));
+      return next.length === current.length ? current : next;
+    });
+  }, [visiblePlaces]);
+
+  const refreshAll = () => {
+    void placesQuery.refetch();
+    void needsReviewQuery.refetch();
+    void currentRatesQuery.refetch();
+  };
+
+  const handleBulkDelete = async (places: Geofence[]) => {
+    if (!onBulkDelete || places.length === 0) return;
+    const ok = await confirm({
+      title: t('geofences.bulk.deleteConfirm.title', 'Delete geofences?'),
+      message: t(
+        'geofences.bulk.deleteConfirm.body',
+        'Selected places will be removed permanently. Places with charging or drive history must be archived instead.',
+      ),
+      confirmLabel: t('common.delete', 'Delete'),
+      variant: 'danger',
+    });
+    if (!ok) return;
+    await onBulkDelete(places);
+    setSelectedKeys([]);
+  };
+
   return (
     <GlassPanel className="p-4 sm:p-6">
-      <PanelTitle className="mb-4 flex items-center gap-2 text-lg">
-        <Zap className="h-5 w-5 text-amber-300" aria-hidden="true" />
-        {t('chargingPlaces.workspace.title', 'Charging Places')}
-      </PanelTitle>
+      <div className="mb-4 flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
+        <div>
+          <PanelTitle className="flex items-center gap-2">
+            <Zap className="h-5 w-5 text-amber-300" aria-hidden="true" />
+            {t('chargingPlaces.workspace.unifiedTitle', 'Places & Charging Zones')}
+          </PanelTitle>
+          <Caption className="mt-1">
+            {t(
+              'chargingPlaces.workspace.unifiedDescription',
+              'Manage zone boundaries, alerts, categories, charging rates, and session history in one place.',
+            )}
+          </Caption>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            icon={<RefreshCw className={placesQuery.isFetching ? 'h-4 w-4 animate-spin' : 'h-4 w-4'} aria-hidden="true" />}
+            onClick={refreshAll}
+            disabled={placesQuery.isFetching}
+          >
+            {t('common.refresh', 'Refresh')}
+          </Button>
+          {onAdd && (
+            <Button
+              size="sm"
+              variant="primary"
+              icon={<Plus className="h-4 w-4" aria-hidden="true" />}
+              onClick={onAdd}
+            >
+              {t('chargingPlaces.workspace.addPlace', 'Add Place')}
+            </Button>
+          )}
+        </div>
+      </div>
 
       <div className="flex flex-col gap-4">
         <NeedsSetupQueue
@@ -59,7 +164,18 @@ export function ChargingPlacesWorkspace() {
           onReview={setSelectedPlace}
         />
 
-        <div className="flex items-center justify-end">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+          <SearchInput
+            value={search}
+            onChange={setSearch}
+            placeholder={t(
+              'chargingPlaces.workspace.search',
+              'Search places, categories, or origin…',
+            )}
+            clearLabel={t('chargingPlaces.workspace.clearSearch', 'Clear search')}
+            className="w-full sm:max-w-md"
+            historyScope="charging-places"
+          />
           <Toggle
             label={t('chargingPlaces.workspace.showArchived', 'Show archived')}
             checked={showArchived}
@@ -68,18 +184,56 @@ export function ChargingPlacesWorkspace() {
           />
         </div>
 
+        {currentRatesQuery.error && (
+          <QueryError
+            error={currentRatesQuery.error}
+            onRetry={() => void currentRatesQuery.refetch()}
+            resourceName={t('chargingPlaces.table.rates', 'charging rates')}
+          />
+        )}
+
         <PlacesTable
           places={visiblePlaces}
           currentRates={currentRatesQuery.data}
           isLoading={placesQuery.isLoading}
           error={placesQuery.error}
-          onRetry={() => void placesQuery.refetch()}
+          onRetry={refreshAll}
           onSelect={setSelectedPlace}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onUpdate={onUpdate}
+          updatePending={updatePending}
+          selectedKeys={selectedKeys}
+          onSelectionChange={onBulkDelete ? setSelectedKeys : undefined}
+          bulkActions={
+            onBulkDelete
+              ? (selected) => (
+                  <Button
+                    size="sm"
+                    variant="danger"
+                    icon={<Trash2 className="h-4 w-4" aria-hidden="true" />}
+                    onClick={() => void handleBulkDelete(selected)}
+                    loading={deletePending}
+                  >
+                    {t('geofences.bulk.delete', 'Delete')}
+                  </Button>
+                )
+              : undefined
+          }
           includesArchived={showArchived}
+          emptyMessage={
+            search
+              ? t(
+                  'chargingPlaces.workspace.noSearchMatches',
+                  'No places match this search. Clear the search to see all places.',
+                )
+              : undefined
+          }
         />
       </div>
 
       <PlaceDetailPanel place={liveSelectedPlace} onClose={() => setSelectedPlace(null)} />
+      {dialogProps && <ConfirmDialog {...dialogProps} />}
     </GlassPanel>
   );
 }
diff --git a/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx b/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
index 898e72ccf8..7f30914c49 100644
--- a/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
+++ b/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
@@ -55,6 +55,7 @@ vi.mock('@/api/hooks/useLocations', () => ({
   useMarkGeofenceReviewed: vi.fn(),
   useGeofenceChargingSummary: vi.fn(),
   useRenameGeofence: vi.fn(),
+  useUpdateGeofenceCategory: vi.fn(),
 }));
 
 vi.mock('@/components/feedback/Toast', () => ({
@@ -120,6 +121,7 @@ import {
   useMarkGeofenceReviewed,
   useGeofenceChargingSummary,
   useRenameGeofence,
+  useUpdateGeofenceCategory,
 } from '@/api/hooks/useLocations';
 import { PlaceDetailPanel } from './PlaceDetailPanel';
 import type { Geofence, GeofenceRate } from '@/api/types';
@@ -131,12 +133,14 @@ const mockedUnarchive = useUnarchiveGeofence as unknown as ReturnType<typeof vi.
 const mockedMarkReviewed = useMarkGeofenceReviewed as unknown as ReturnType<typeof vi.fn>;
 const mockedSummary = useGeofenceChargingSummary as unknown as ReturnType<typeof vi.fn>;
 const mockedRename = useRenameGeofence as unknown as ReturnType<typeof vi.fn>;
+const mockedUpdateCategory = useUpdateGeofenceCategory as unknown as ReturnType<typeof vi.fn>;
 
 let deleteMutate: ReturnType<typeof vi.fn>;
 let archiveMutate: ReturnType<typeof vi.fn>;
 let unarchiveMutate: ReturnType<typeof vi.fn>;
 let markReviewedMutate: ReturnType<typeof vi.fn>;
 let renameMutateAsync: ReturnType<typeof vi.fn>;
+let categoryMutate: ReturnType<typeof vi.fn>;
 
 function makePlace(overrides: Partial<Geofence> = {}): Geofence {
   return {
@@ -180,6 +184,7 @@ beforeEach(() => {
   unarchiveMutate = vi.fn();
   markReviewedMutate = vi.fn();
   renameMutateAsync = vi.fn().mockResolvedValue(undefined);
+  categoryMutate = vi.fn();
 
   mockedRates.mockReturnValue({ data: [], isLoading: false, error: null, refetch: vi.fn() });
   mockedSummary.mockReturnValue({ data: [], isLoading: false, error: null, refetch: vi.fn() });
@@ -188,6 +193,7 @@ beforeEach(() => {
   mockedUnarchive.mockReturnValue({ mutate: unarchiveMutate, isPending: false });
   mockedMarkReviewed.mockReturnValue({ mutate: markReviewedMutate, isPending: false });
   mockedRename.mockReturnValue({ mutateAsync: renameMutateAsync, isPending: false });
+  mockedUpdateCategory.mockReturnValue({ mutate: categoryMutate, isPending: false });
 });
 
 describe('PlaceDetailPanel — closed state', () => {
@@ -227,6 +233,19 @@ describe('PlaceDetailPanel — header', () => {
       }),
     );
   });
+
+  it('updates the category without resending place geometry', () => {
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+
+    fireEvent.change(screen.getByLabelText('Category'), {
+      target: { value: 'work' },
+    });
+
+    expect(categoryMutate).toHaveBeenCalledWith(
+      { geofenceId: 7, category: 'work' },
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+  });
 });
 
 describe('PlaceDetailPanel — needs-review lifecycle', () => {
diff --git a/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx b/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
index 8540bf604b..94481781f6 100644
--- a/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
+++ b/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Archive, ArchiveRestore, CheckCircle2 } from 'lucide-react';
 
-import { Modal, Button, Tabs, Badge, Text, EditableText, Label } from '@/components/ui';
+import { Modal, Button, Tabs, Badge, Text, EditableText, Label, Select } from '@/components/ui';
 import {
   useGeofenceRates,
   useDeleteGeofenceRate,
@@ -11,6 +11,7 @@ import {
   useMarkGeofenceReviewed,
   useGeofenceChargingSummary,
   useRenameGeofence,
+  useUpdateGeofenceCategory,
 } from '@/api/hooks/useLocations';
 import { RateHistoryPanel } from './RateHistoryPanel';
 import { RateForm } from './RateForm';
@@ -18,7 +19,12 @@ import { PreviewApplyPanel } from './PreviewApplyPanel';
 import { ChargingSummaryPanel } from './ChargingSummaryPanel';
 import { ChargingActivityList } from './ChargingActivityList';
 import { isRateActiveAt, isRateOpen } from './helpers';
-import type { Geofence, GeofenceRate } from '@/api/types';
+import {
+  GEOFENCE_CATEGORY_LABELS,
+  GEOFENCE_CATEGORY_VALUES,
+  type GeofenceCategoryValue,
+} from '../../geofenceCategories';
+import type { Geofence, GeofenceCategory, GeofenceRate } from '@/api/types';
 
 export interface PlaceDetailPanelProps {
   /** The place being configured, or `null` when the panel is closed. */
@@ -39,6 +45,8 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
   const { t } = useTranslation();
   const [tab, setTab] = useState<DetailTab>('pricing');
   const [selectedRate, setSelectedRate] = useState<GeofenceRate | null>(null);
+  const [category, setCategory] = useState<GeofenceCategoryValue>('custom');
+  const previewPanelRef = useRef<HTMLDivElement>(null);
 
   const ratesQuery = useGeofenceRates(place?.id);
   const summaryQuery = useGeofenceChargingSummary(place?.id);
@@ -47,6 +55,14 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
   const unarchive = useUnarchiveGeofence();
   const markReviewed = useMarkGeofenceReviewed();
   const rename = useRenameGeofence();
+  const updateCategory = useUpdateGeofenceCategory();
+  const handleSelectRate = useCallback((rate: GeofenceRate) => {
+    setSelectedRate(rate);
+    queueMicrotask(() => {
+      previewPanelRef.current?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
+      previewPanelRef.current?.focus?.({ preventScroll: true });
+    });
+  }, []);
 
   // Reset per-place UI state whenever a different place opens, and default
   // to the rate active now. A future open-ended schedule is only a fallback
@@ -56,6 +72,10 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
     setSelectedRate(null);
   }, [place?.id]);
 
+  useEffect(() => {
+    setCategory(place?.category ?? 'custom');
+  }, [place?.id, place?.category]);
+
   useEffect(() => {
     const rates = ratesQuery.data ?? [];
     if (selectedRate != null && rates.some((rate) => rate.id === selectedRate.id)) {
@@ -75,6 +95,14 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
     markReviewed.mutate(place.id);
   };
 
+  const categoryOptions = GEOFENCE_CATEGORY_VALUES.map((value) => ({
+    value,
+    label: t(
+      GEOFENCE_CATEGORY_LABELS[value].key,
+      GEOFENCE_CATEGORY_LABELS[value].fallback,
+    ),
+  }));
+
   return (
     <Modal
       open={place != null}
@@ -122,20 +150,36 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
         )}
       </div>
 
-      <div className="mb-4">
-        <Label>{t('chargingPlaces.detail.placeName', 'Place name')}</Label>
-        <EditableText
-          value={place.name}
-          variant="heading"
-          maxLength={120}
-          ariaLabel={t('chargingPlaces.detail.rename', 'Rename {{name}}', { name: place.name })}
-          validate={(next) =>
-            next.length > 120
-              ? t('geofences.error.nameTooLong', 'Max 120 characters')
-              : null
-          }
-          onSave={async (name) => {
-            await rename.mutateAsync({ geofenceId: place.id, name });
+      <div className="mb-4 grid gap-4 sm:grid-cols-2">
+        <div>
+          <Label>{t('chargingPlaces.detail.placeName', 'Place name')}</Label>
+          <EditableText
+            value={place.name}
+            variant="heading"
+            maxLength={120}
+            ariaLabel={t('chargingPlaces.detail.rename', 'Rename {{name}}', { name: place.name })}
+            validate={(next) =>
+              next.length > 120
+                ? t('geofences.error.nameTooLong', 'Max 120 characters')
+                : null
+            }
+            onSave={async (name) => {
+              await rename.mutateAsync({ geofenceId: place.id, name });
+            }}
+          />
+        </div>
+        <Select
+          label={t('chargingPlaces.detail.category', 'Category')}
+          options={categoryOptions}
+          value={category}
+          disabled={updateCategory.isPending}
+          onChange={(event) => {
+            const next = event.target.value as GeofenceCategory;
+            setCategory(next);
+            updateCategory.mutate(
+              { geofenceId: place.id, category: next },
+              { onError: () => setCategory(place.category ?? 'custom') },
+            );
           }}
         />
       </div>
@@ -166,11 +210,13 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
             error={ratesQuery.error}
             onRetry={() => void ratesQuery.refetch()}
             selectedRateId={selectedRate?.id}
-            onSelectRate={setSelectedRate}
+            onSelectRate={handleSelectRate}
             onDelete={(r) => deleteRate.mutate({ geofenceId: place.id, rateId: r.id })}
             deletePending={deleteRate.isPending}
           />
-          <PreviewApplyPanel geofenceId={place.id} rate={selectedRate} />
+          <div ref={previewPanelRef} tabIndex={-1} className="scroll-mt-4 outline-none">
+            <PreviewApplyPanel geofenceId={place.id} rate={selectedRate} />
+          </div>
         </div>
       ) : (
         <div className="flex flex-col gap-4">
diff --git a/web/src/features/maps/components/charging-places/PlacesTable.test.tsx b/web/src/features/maps/components/charging-places/PlacesTable.test.tsx
index 44ba364db4..4d36732a81 100644
--- a/web/src/features/maps/components/charging-places/PlacesTable.test.tsx
+++ b/web/src/features/maps/components/charging-places/PlacesTable.test.tsx
@@ -37,6 +37,14 @@ vi.mock('@/components/data-display', () => ({
   TimeStamp: ({ value }: { value: unknown }) => <span data-testid="effective-since">{String(value)}</span>,
 }));
 
+vi.mock('@/components/ui', async () => {
+  const actual = await vi.importActual<typeof import('@/components/ui')>('@/components/ui');
+  return {
+    ...actual,
+    PinButton: () => <span data-testid="pin-button" />,
+  };
+});
+
 import { PlacesTable } from './PlacesTable';
 import type { Geofence, GeofenceRate } from '@/api/types';
 
@@ -92,6 +100,13 @@ describe('PlacesTable — loading/error/empty', () => {
     expect(container.querySelector('.animate-pulse')).not.toBeNull();
   });
 
+  describe('PlacesTable — selection', () => {
+    it('does not expose row-selection controls without a bulk-selection handler', () => {
+      renderTable({ places: [makePlace()] });
+      expect(screen.queryByRole('checkbox', { name: 'Select row' })).toBeNull();
+    });
+  });
+
   it('surfaces a QueryError with a working retry on failure', () => {
     const onRetry = vi.fn();
     renderTable({ error: new Error('boom'), onRetry });
@@ -105,7 +120,7 @@ describe('PlacesTable — loading/error/empty', () => {
     renderTable({ places: [] });
     expect(
       screen.getByText(
-        'No active charging places yet. Existing and future confirmed charging locations appear automatically.',
+        'No active places yet. Existing and future confirmed charging locations appear automatically.',
       ),
     ).toBeInTheDocument();
   });
@@ -114,7 +129,7 @@ describe('PlacesTable — loading/error/empty', () => {
     renderTable({ places: [], includesArchived: true });
     expect(
       screen.getByText(
-        'No charging places yet. Charge somewhere or create a geofence above to start tracking costs.',
+        'No places or zones yet. Charge somewhere or add a place to start.',
       ),
     ).toBeInTheDocument();
   });
@@ -124,9 +139,8 @@ describe('PlacesTable — rows', () => {
   it('renders name, origin, category, and Manage for a manual place with no rate', () => {
     renderTable({ places: [makePlace()] });
 
-    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getAllByText('Home')).toHaveLength(2);
     expect(screen.getByText('Manual')).toBeInTheDocument();
-    expect(screen.getByText('home')).toBeInTheDocument();
     expect(screen.getByText('Not set')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Manage' })).toBeInTheDocument();
   });
diff --git a/web/src/features/maps/components/charging-places/PlacesTable.tsx b/web/src/features/maps/components/charging-places/PlacesTable.tsx
index 350318eb58..5ccbb8ee6d 100644
--- a/web/src/features/maps/components/charging-places/PlacesTable.tsx
+++ b/web/src/features/maps/components/charging-places/PlacesTable.tsx
@@ -1,31 +1,51 @@
-import { useMemo } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MapPin, Zap } from 'lucide-react';
+import { Bell, Globe, MapPin, Pencil, Ruler, Trash2, Zap } from 'lucide-react';
 
-import { GlassPanel, PanelTitle, Badge, Button, Text, DataTable, useSortToggle, type Column } from '@/components/ui';
-import { InlineCallout, Skeleton, QueryError } from '@/components/feedback';
+import {
+  Badge,
+  Button,
+  DataTable,
+  PanelTitle,
+  PinButton,
+  Text,
+  Toggle,
+  useSortToggle,
+  type Column,
+} from '@/components/ui';
+import { InlineCallout, QueryError, Skeleton } from '@/components/feedback';
 import { TimeStamp } from '@/components/data-display';
 import { useSettings } from '@/hooks/useSettings';
+import { fmtNumber } from '@/lib/numberFormat';
+import {
+  GEOFENCE_CATEGORY_LABELS,
+  type GeofenceCategoryValue,
+} from '../../geofenceCategories';
 import { formatRatePerWh } from './helpers';
 import type { Geofence, GeofenceRate } from '@/api/types';
 
+export type GeofenceQuickPatch = Partial<
+  Pick<Geofence, 'enabled' | 'alert_on_entry' | 'alert_on_exit'>
+>;
+
 export interface PlacesTableProps {
   places?: Geofence[];
-  /** Bulk current-rate lookup (one row per geofence with an active rate). */
   currentRates?: GeofenceRate[];
   isLoading: boolean;
   error?: unknown;
   onRetry?: () => void;
   onSelect: (place: Geofence) => void;
-  /** True while the "Show archived" toggle is on — only affects the empty-state copy. */
+  onEdit?: (place: Geofence) => void;
+  onDelete?: (place: Geofence) => void;
+  onUpdate?: (place: Geofence, patch: GeofenceQuickPatch) => void;
+  updatePending?: boolean;
+  selectedKeys?: number[];
+  onSelectionChange?: (keys: number[]) => void;
+  bulkActions?: (selected: Geofence[]) => ReactNode;
   includesArchived?: boolean;
+  emptyMessage?: string;
 }
 
-/**
- * The Charging Places list — every geofence the user can configure
- * pricing for, with its currently-active rate (if any) resolved from the
- * bulk `/geofences/rates/current` lookup rather than a per-row fetch.
- */
 export function PlacesTable({
   places,
   currentRates,
@@ -33,16 +53,24 @@ export function PlacesTable({
   error,
   onRetry,
   onSelect,
+  onEdit,
+  onDelete,
+  onUpdate,
+  updatePending = false,
+  selectedKeys,
+  onSelectionChange,
+  bulkActions,
   includesArchived = false,
+  emptyMessage,
 }: PlacesTableProps) {
   const { t } = useTranslation();
   const { locale } = useSettings();
   const { sortKey, sortDir, onSort } = useSortToggle('name', 'asc');
 
   const rateByGeofenceId = useMemo(() => {
-    const m = new Map<number, GeofenceRate>();
-    for (const r of currentRates ?? []) m.set(r.geofence_id, r);
-    return m;
+    const rates = new Map<number, GeofenceRate>();
+    for (const rate of currentRates ?? []) rates.set(rate.geofence_id, rate);
+    return rates;
   }, [currentRates]);
 
   const rows = places ?? [];
@@ -53,12 +81,14 @@ export function PlacesTable({
       switch (sortKey) {
         case 'name':
           return a.name.localeCompare(b.name) * dir;
-        case 'origin':
-          return a.origin.localeCompare(b.origin) * dir;
+        case 'category':
+          return (a.category ?? '').localeCompare(b.category ?? '') * dir;
+        case 'radius':
+          return (a.radius - b.radius) * dir;
         case 'rate': {
-          const ra = rateByGeofenceId.get(a.id)?.rate_per_wh ?? -1;
-          const rb = rateByGeofenceId.get(b.id)?.rate_per_wh ?? -1;
-          return (ra - rb) * dir;
+          const aRate = rateByGeofenceId.get(a.id)?.rate_per_wh ?? -1;
+          const bRate = rateByGeofenceId.get(b.id)?.rate_per_wh ?? -1;
+          return (aRate - bRate) * dir;
         }
         default:
           return 0;
@@ -72,52 +102,141 @@ export function PlacesTable({
         key: 'name',
         header: t('chargingPlaces.table.name', 'Place'),
         sortable: true,
-        render: (g) => (
-          <div className="flex items-center gap-2">
-            <MapPin className="h-4 w-4 shrink-0 text-[var(--text-muted)]" aria-hidden="true" />
-            <div className="flex min-w-0 flex-col">
-              <Text variant="body" className="truncate font-medium">
-                {g.name || t('chargingPlaces.unnamed', 'Unnamed place')}
-              </Text>
-              {g.archived_at && (
-                <Badge variant="neutral" size="sm" className="mt-0.5 w-fit">
-                  {t('chargingPlaces.archived', 'Archived')}
+        render: (place) => (
+          <div className="flex min-w-0 items-start gap-2">
+            <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-[var(--text-muted)]" aria-hidden="true" />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-1.5">
+                <Text variant="body" className="truncate font-medium">
+                  {place.name || t('chargingPlaces.unnamed', 'Unnamed place')}
+                </Text>
+                <PinButton itemType="geofence" itemId={String(place.id)} size="sm" />
+              </div>
+              <div className="mt-1 flex flex-wrap items-center gap-1.5">
+                <Badge
+                  variant={place.origin === 'charging_discovery' ? 'info' : 'neutral'}
+                  size="sm"
+                >
+                  {place.origin === 'charging_discovery'
+                    ? t('chargingPlaces.origin.discovered', 'Auto-discovered')
+                    : t('chargingPlaces.origin.manual', 'Manual')}
                 </Badge>
-              )}
+                {place.needs_review && (
+                  <Badge variant="warning" size="sm">
+                    {t('chargingPlaces.detail.needsReviewBadge', 'Needs review')}
+                  </Badge>
+                )}
+                {place.archived_at && (
+                  <Badge variant="neutral" size="sm">
+                    {t('chargingPlaces.archived', 'Archived')}
+                  </Badge>
+                )}
+              </div>
+              <Text size="xs" color="muted" mono className="mt-1 flex items-center gap-1">
+                <Globe className="h-3 w-3" aria-hidden="true" />
+                {fmtNumber(place.latitude ?? 0, 5)}, {fmtNumber(place.longitude ?? 0, 5)}
+              </Text>
             </div>
           </div>
         ),
       },
       {
-        key: 'origin',
-        header: t('chargingPlaces.table.origin', 'Origin'),
+        key: 'category',
+        header: t('chargingPlaces.table.category', 'Category'),
+        sortable: true,
+        render: (place) => {
+          const category = place.category as GeofenceCategoryValue | null | undefined;
+          return (
+            <Text size="sm" color="secondary">
+              {category
+                ? t(
+                    GEOFENCE_CATEGORY_LABELS[category].key,
+                    GEOFENCE_CATEGORY_LABELS[category].fallback,
+                  )
+                : t('chargingPlaces.category.unset', 'Uncategorized')}
+            </Text>
+          );
+        },
+      },
+      {
+        key: 'radius',
+        header: t('chargingPlaces.table.zone', 'Zone'),
         sortable: true,
-        render: (g) => (
-          <Badge variant={g.origin === 'charging_discovery' ? 'info' : 'neutral'} size="sm">
-            {g.origin === 'charging_discovery'
-              ? t('chargingPlaces.origin.discovered', 'Auto-discovered')
-              : t('chargingPlaces.origin.manual', 'Manual')}
-          </Badge>
+        render: (place) => (
+          <Text size="sm" color="secondary" className="flex items-center gap-1 tabular-nums">
+            <Ruler className="h-3.5 w-3.5" aria-hidden="true" />
+            {fmtNumber(place.radius ?? 0)} {t('common.units.meterShort', 'm')}
+          </Text>
         ),
       },
       {
-        key: 'category',
-        header: t('chargingPlaces.table.category', 'Category'),
+        key: 'enabled',
+        header: t('chargingPlaces.table.status', 'Status'),
         sortable: false,
-        render: (g) => (
-          <Text size="sm" color="secondary">
-            {g.category
-              ? t(`chargingPlaces.category.${g.category}`, g.category)
-              : t('chargingPlaces.category.unset', 'Uncategorized')}
-          </Text>
+        render: (place) => (
+          <Toggle
+            checked={place.enabled}
+            onChange={(enabled) => {
+              if (!updatePending && !place.archived_at) onUpdate?.(place, { enabled });
+            }}
+            size="sm"
+            aria-disabled={updatePending || Boolean(place.archived_at)}
+            className={updatePending || place.archived_at ? 'pointer-events-none opacity-50' : undefined}
+            aria-label={t('geofences.toggleGeofence', 'Toggle geofence {{name}}', {
+              name: place.name,
+            })}
+          />
+        ),
+      },
+      {
+        key: 'alerts',
+        header: t('chargingPlaces.table.alerts', 'Alerts'),
+        sortable: false,
+        render: (place) => (
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center gap-1.5">
+              <Toggle
+                checked={place.alert_on_entry}
+                onChange={(alert_on_entry) => {
+                  if (!updatePending && !place.archived_at) onUpdate?.(place, { alert_on_entry });
+                }}
+                size="sm"
+                aria-disabled={updatePending || Boolean(place.archived_at)}
+                className={updatePending || place.archived_at ? 'pointer-events-none opacity-50' : undefined}
+                aria-label={t('chargingPlaces.table.entryAlertLabel', 'Entry alert for {{name}}', {
+                  name: place.name,
+                })}
+              />
+              <Text size="xs" color="muted">
+                {t('chargingPlaces.table.entry', 'Entry')}
+              </Text>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <Toggle
+                checked={place.alert_on_exit}
+                onChange={(alert_on_exit) => {
+                  if (!updatePending && !place.archived_at) onUpdate?.(place, { alert_on_exit });
+                }}
+                size="sm"
+                aria-disabled={updatePending || Boolean(place.archived_at)}
+                className={updatePending || place.archived_at ? 'pointer-events-none opacity-50' : undefined}
+                aria-label={t('chargingPlaces.table.exitAlertLabel', 'Exit alert for {{name}}', {
+                  name: place.name,
+                })}
+              />
+              <Text size="xs" color="muted">
+                {t('chargingPlaces.table.exit', 'Exit')}
+              </Text>
+            </div>
+          </div>
         ),
       },
       {
         key: 'rate',
         header: t('chargingPlaces.table.rate', 'Rate / kWh'),
         sortable: true,
-        render: (g) => {
-          const rate = rateByGeofenceId.get(g.id);
+        render: (place) => {
+          const rate = rateByGeofenceId.get(place.id);
           if (!rate) {
             return (
               <Text size="sm" color="muted">
@@ -126,83 +245,115 @@ export function PlacesTable({
             );
           }
           return (
-            <div className="flex items-center gap-1.5">
-              <Zap className="h-3.5 w-3.5 text-amber-300" aria-hidden="true" />
-              <Text variant="body" className="tabular-nums">
+            <div>
+              <Text variant="body" className="flex items-center gap-1.5 tabular-nums">
+                <Zap className="h-3.5 w-3.5 text-amber-300" aria-hidden="true" />
                 {formatRatePerWh(rate.rate_per_wh, rate.currency, locale) || '—'}
               </Text>
+              <TimeStamp value={rate.effective_from} format="absolute" />
             </div>
           );
         },
       },
-      {
-        key: 'effective_from',
-        header: t('chargingPlaces.table.effectiveSince', 'Effective since'),
-        sortable: false,
-        render: (g) => {
-          const rate = rateByGeofenceId.get(g.id);
-          return rate ? (
-            <TimeStamp value={rate.effective_from} format="absolute" />
-          ) : (
-            <Text size="sm" color="muted">—</Text>
-          );
-        },
-      },
       {
         key: 'actions',
         header: '',
         sortable: false,
-        render: (g) => (
-          <Button size="sm" variant="secondary" onClick={() => onSelect(g)}>
-            {t('chargingPlaces.table.manage', 'Manage')}
-          </Button>
+        render: (place) => (
+          <div className="flex items-center justify-end gap-1">
+            <Button
+              size="sm"
+              variant="secondary"
+              icon={<Bell className="h-3.5 w-3.5" aria-hidden="true" />}
+              onClick={() => onSelect(place)}
+            >
+              {t('chargingPlaces.table.manage', 'Manage')}
+            </Button>
+            {onEdit && (
+              <Button
+                size="sm"
+                variant="ghost"
+                icon={<Pencil className="h-3.5 w-3.5" aria-hidden="true" />}
+                onClick={() => onEdit(place)}
+                aria-label={t('geofences.editGeofence', 'Edit geofence {{name}}', {
+                  name: place.name,
+                })}
+              />
+            )}
+            {onDelete && !place.archived_at && (
+              <Button
+                size="sm"
+                variant="ghost"
+                icon={<Trash2 className="h-3.5 w-3.5" aria-hidden="true" />}
+                onClick={() => onDelete(place)}
+                aria-label={t('geofences.deleteGeofence', 'Delete geofence {{name}}', {
+                  name: place.name,
+                })}
+              />
+            )}
+          </div>
         ),
       },
     ],
-    [t, rateByGeofenceId, locale, onSelect],
+    [t, rateByGeofenceId, locale, onSelect, onEdit, onDelete, onUpdate, updatePending],
   );
 
-  return (
-    <GlassPanel className="p-4 sm:p-5">
-      <PanelTitle className="mb-3 flex items-center gap-2">
-        <Zap className="h-4 w-4 text-amber-300" aria-hidden="true" />
-        {t('chargingPlaces.table.title', 'Place Directory')}
-        {rows.length > 0 && (
-          <Badge variant="neutral" size="sm">
-            {rows.length}
-          </Badge>
-        )}
-      </PanelTitle>
+  if (error) {
+    return (
+      <QueryError
+        error={error}
+        onRetry={onRetry}
+        resourceName={t('chargingPlaces.table.title', 'Place Directory')}
+      />
+    );
+  }
+
+  if (isLoading && rows.length === 0) {
+    return <Skeleton className="h-48 w-full" />;
+  }
 
-      {error ? (
-        <QueryError error={error} onRetry={onRetry} resourceName={t('chargingPlaces.table.title', 'Place Directory')} />
-      ) : isLoading && rows.length === 0 ? (
-        <Skeleton className="h-48 w-full" />
-      ) : rows.length === 0 ? (
-        <InlineCallout variant="info">
-          {includesArchived
+  if (rows.length === 0) {
+    return (
+      <InlineCallout variant="info">
+        {emptyMessage ??
+          (includesArchived
             ? t(
                 'chargingPlaces.emptyAll',
-                'No charging places yet. Charge somewhere or create a geofence above to start tracking costs.',
+                'No places or zones yet. Charge somewhere or add a place to start.',
               )
             : t(
                 'chargingPlaces.empty',
-                'No active charging places yet. Existing and future confirmed charging locations appear automatically.',
-              )}
-        </InlineCallout>
-      ) : (
-        <DataTable
-          tableId="maps:charging-places"
-          columns={columns}
-          data={sortedRows}
-          keyExtractor={(g) => g.id}
-          sortKey={sortKey}
-          sortDir={sortDir}
-          onSort={onSort}
-          emptyMessage={t('chargingPlaces.empty', 'No active charging places yet.')}
-          pagination
-        />
-      )}
-    </GlassPanel>
+                'No active places yet. Existing and future confirmed charging locations appear automatically.',
+              ))}
+      </InlineCallout>
+    );
+  }
+
+  return (
+    <div>
+      <PanelTitle className="mb-3 flex items-center gap-2">
+        <MapPin className="h-4 w-4 text-cyan-300" aria-hidden="true" />
+        {t('chargingPlaces.table.title', 'Place Directory')}
+        <Badge variant="neutral" size="sm">
+          {rows.length}
+        </Badge>
+      </PanelTitle>
+      <DataTable
+        tableId="maps:places-zones"
+        columns={columns}
+        data={sortedRows}
+        keyExtractor={(place) => place.id}
+        sortKey={sortKey}
+        sortDir={sortDir}
+        onSort={onSort}
+        selectable={onSelectionChange ? 'multi' : 'none'}
+        selectedKeys={selectedKeys}
+        onSelectionChange={(keys) => onSelectionChange?.(keys.map(Number))}
+        bulkActions={bulkActions}
+        mobileColumns={['name', 'rate', 'actions']}
+        columnVisibility
+        pagination
+      />
+    </div>
   );
 }
diff --git a/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx b/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
index b42f70731e..e23f48a873 100644
--- a/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
+++ b/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
@@ -201,11 +201,30 @@ describe('PreviewApplyPanel — narrowing the window', () => {
 });
 
 describe('PreviewApplyPanel — apply gating', () => {
-  it('disables Apply when there are zero eligible sessions', () => {
+  it('allows attribution-only apply when matched sessions have protected costs', () => {
     mockedPreview.mockReturnValue(makePreviewQuery({ data: makePreview({ eligible_sessions: 0 }) }));
     renderPanel({ geofenceId: 7, rate });
 
+    expect(screen.getByRole('button', { name: 'Assign Sessions' })).toBeEnabled();
+    expect(
+      screen.getByText(/All matched costs are protected/),
+    ).toBeInTheDocument();
+  });
+
+  it('disables Apply and explains the fix when no sessions match', () => {
+    mockedPreview.mockReturnValue(
+      makePreviewQuery({
+        data: makePreview({
+          matched_sessions: 0,
+          eligible_sessions: 0,
+          protected_sessions: 0,
+        }),
+      }),
+    );
+    renderPanel({ geofenceId: 7, rate });
+
     expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+    expect(screen.getByText(/No sessions match this place and rate period/)).toBeInTheDocument();
   });
 
   it('requires confirmation before calling the apply mutation', async () => {
@@ -226,10 +245,23 @@ describe('PreviewApplyPanel — apply gating', () => {
       mutate: applyMutate,
       reset: applyReset,
       isPending: false,
-      data: { priced_sessions: 6, skipped_sessions: 4, total_cost_decimal: 7.2, currency: 'USD' } satisfies GeofenceRateApplyResult,
+      data: {
+        geofence_id: 7,
+        rate_id: 99,
+        matched_sessions: 10,
+        priced_sessions: 6,
+        skipped_sessions: 4,
+        total_energy_wh: 60_000,
+        total_cost_decimal: 7.2,
+        currency: 'USD',
+      } satisfies GeofenceRateApplyResult,
     });
     renderPanel({ geofenceId: 7, rate });
 
-    expect(screen.getByText('Applied: 6 priced, 4 skipped, $7.20 total.')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'Processed 10 matched sessions: 6 priced, 4 protected or unchanged, $7.20 total.',
+      ),
+    ).toBeInTheDocument();
   });
 });
diff --git a/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx b/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
index 202068eb0b..dd550d4e56 100644
--- a/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
+++ b/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Calculator, Play } from 'lucide-react';
+import { Calculator, Play, RefreshCw } from 'lucide-react';
 
 import { GlassPanel, PanelTitle, Button, Input, ConfirmDialog, Badge } from '@/components/ui';
 import { Skeleton, EmptyState, QueryError, InlineCallout } from '@/components/feedback';
@@ -58,14 +58,24 @@ export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps)
   }, [apply.reset, rate?.id]);
 
   const handleApply = async () => {
-    if (!rate) return;
+    if (!rate || !preview.data || preview.data.matched_sessions === 0) return;
+    const attributionOnly = preview.data.eligible_sessions === 0;
     const ok = await confirm({
-      title: t('chargingPlaces.previewApply.confirmTitle', 'Apply this rate to matching sessions?'),
-      message: t(
-        'chargingPlaces.previewApply.confirmMessage',
-        'This backfills/reprices unpriced or previously geofence-derived sessions in scope. Manual, Tesla-reported, and existing costs with unknown provenance are never overwritten.',
-      ),
-      confirmLabel: t('chargingPlaces.previewApply.applyAction', 'Apply'),
+      title: attributionOnly
+        ? t('chargingPlaces.previewApply.confirmAttributionTitle', 'Assign matching sessions to this place?')
+        : t('chargingPlaces.previewApply.confirmTitle', 'Apply this rate to matching sessions?'),
+      message: attributionOnly
+        ? t(
+            'chargingPlaces.previewApply.confirmAttributionMessage',
+            'Matching sessions will be linked to this place. Their protected costs will remain unchanged.',
+          )
+        : t(
+            'chargingPlaces.previewApply.confirmMessage',
+            'This backfills/reprices unpriced or previously geofence-derived sessions in scope. Manual, Tesla-reported, and existing costs with unknown provenance are never overwritten.',
+          ),
+      confirmLabel: attributionOnly
+        ? t('chargingPlaces.previewApply.assignAction', 'Assign Sessions')
+        : t('chargingPlaces.previewApply.applyAction', 'Apply'),
       variant: 'warning',
     });
     if (!ok) return;
@@ -96,13 +106,24 @@ export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps)
 
   return (
     <GlassPanel className="p-4 sm:p-5">
-      <PanelTitle className="mb-3 flex items-center gap-2">
-        <Calculator className="h-4 w-4 text-violet-300" aria-hidden="true" />
-        {t('chargingPlaces.previewApply.title', 'Preview & Apply')}
-        <Badge variant="neutral" size="sm">
-          {formatRatePerWh(rate.rate_per_wh, rate.currency, locale)} / {t('chargingPlaces.kwh', 'kWh')}
-        </Badge>
-      </PanelTitle>
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <PanelTitle className="flex items-center gap-2">
+          <Calculator className="h-4 w-4 text-violet-300" aria-hidden="true" />
+          {t('chargingPlaces.previewApply.title', 'Preview & Apply')}
+          <Badge variant="neutral" size="sm">
+            {formatRatePerWh(rate.rate_per_wh, rate.currency, locale)} / {t('chargingPlaces.kwh', 'kWh')}
+          </Badge>
+        </PanelTitle>
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={<RefreshCw className={preview.isFetching ? 'h-4 w-4 animate-spin' : 'h-4 w-4'} aria-hidden="true" />}
+          onClick={() => void preview.refetch()}
+          disabled={preview.isFetching}
+        >
+          {t('chargingPlaces.previewApply.refresh', 'Refresh preview')}
+        </Button>
+      </div>
 
       <div className="mb-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
         <Input
@@ -124,37 +145,56 @@ export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps)
       ) : preview.isLoading ? (
         <Skeleton className="h-24 w-full" />
       ) : (
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
-          <MetricTile value={p?.matched_sessions ?? 0} label={t('chargingPlaces.previewApply.matched', 'Matched')} />
-          <MetricTile
-            value={p?.eligible_sessions ?? 0}
-            label={t('chargingPlaces.previewApply.eligible', 'Eligible')}
-            accentClass="text-emerald-300"
-          />
-          <MetricTile
-            value={p?.protected_sessions ?? 0}
-            label={t('chargingPlaces.previewApply.protected', 'Protected')}
-            accentClass="text-amber-300"
-          />
-          <MetricTile
-            value={p ? formatEnergy(p.total_energy_wh) : '—'}
-            label={t('chargingPlaces.previewApply.energy', 'Energy')}
-          />
-          <MetricTile
-            value={
-              p ? formatCurrencyValue(p.estimated_cost_decimal, p.currency, locale, 2, { useGrouping: true }) : '—'
-            }
-            label={t('chargingPlaces.previewApply.estimatedCost', 'Estimated Cost')}
-          />
-        </div>
+        <>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
+            <MetricTile value={p?.matched_sessions ?? 0} label={t('chargingPlaces.previewApply.matched', 'Matched')} />
+            <MetricTile
+              value={p?.eligible_sessions ?? 0}
+              label={t('chargingPlaces.previewApply.eligible', 'Eligible')}
+              accentClass="text-emerald-300"
+            />
+            <MetricTile
+              value={p?.protected_sessions ?? 0}
+              label={t('chargingPlaces.previewApply.protected', 'Protected')}
+              accentClass="text-amber-300"
+            />
+            <MetricTile
+              value={p ? formatEnergy(p.total_energy_wh) : '—'}
+              label={t('chargingPlaces.previewApply.energy', 'Energy')}
+            />
+            <MetricTile
+              value={
+                p ? formatCurrencyValue(p.estimated_cost_decimal, p.currency, locale, 2, { useGrouping: true }) : '—'
+              }
+              label={t('chargingPlaces.previewApply.estimatedCost', 'Estimated Cost')}
+            />
+          </div>
+          {p?.matched_sessions === 0 && (
+            <InlineCallout variant="warning" className="mt-3">
+              {t(
+                'chargingPlaces.previewApply.noMatches',
+                'No sessions match this place and rate period. Check the zone location and radius, or broaden the optional date range. Sessions without coordinates can match an identical saved place name.',
+              )}
+            </InlineCallout>
+          )}
+          {p && p.matched_sessions > 0 && p.eligible_sessions === 0 && (
+            <InlineCallout variant="info" className="mt-3">
+              {t(
+                'chargingPlaces.previewApply.attributionOnly',
+                'All matched costs are protected. Apply can still assign unlinked sessions to this place without changing their cost.',
+              )}
+            </InlineCallout>
+          )}
+        </>
       )}
 
       {apply.data && (
         <InlineCallout variant="success" className="mt-3">
           {t(
             'chargingPlaces.previewApply.applied',
-            'Applied: {{priced}} priced, {{skipped}} skipped, {{cost}} total.',
+            'Processed {{matched}} matched sessions: {{priced}} priced, {{skipped}} protected or unchanged, {{cost}} total.',
             {
+              matched: apply.data.matched_sessions,
               priced: apply.data.priced_sessions,
               skipped: apply.data.skipped_sessions,
               cost: formatCurrencyValue(apply.data.total_cost_decimal, apply.data.currency, locale, 2, {
@@ -171,9 +211,11 @@ export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps)
           icon={<Play className="h-4 w-4" aria-hidden="true" />}
           onClick={() => void handleApply()}
           loading={apply.isPending}
-          disabled={!p || p.eligible_sessions === 0}
+          disabled={!p || p.matched_sessions === 0}
         >
-          {t('chargingPlaces.previewApply.applyAction', 'Apply')}
+          {p && p.matched_sessions > 0 && p.eligible_sessions === 0
+            ? t('chargingPlaces.previewApply.assignAction', 'Assign Sessions')
+            : t('chargingPlaces.previewApply.applyAction', 'Apply')}
         </Button>
       </div>
 
diff --git a/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx b/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
index 0e59005909..9a01dfcd7b 100644
--- a/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
+++ b/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
@@ -92,7 +92,7 @@ describe('RateHistoryPanel — loading/error/empty', () => {
     renderPanel({ rates: [] });
     expect(
       screen.getByText(
-        'No rate configured yet — add one below to start pricing sessions at this place.',
+        'No rate configured yet — use the form above to start pricing sessions at this place.',
       ),
     ).toBeInTheDocument();
   });
@@ -134,22 +134,22 @@ describe('RateHistoryPanel — rows', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('highlights the selected row\'s Preview/Apply button as primary', () => {
+  it('highlights the selected row and labels its impact as shown', () => {
     const rate = makeRate({ id: 5 });
     renderPanel({ rates: [rate], selectedRateId: 5 });
 
-    const btn = screen.getByRole('button', { name: 'Preview / Apply' });
+    const btn = screen.getByRole('button', { name: 'Impact shown' });
     // Button component maps variant to a class; "primary" is the
     // selected-row highlight this panel switches to (see component source).
     expect(btn.className).toMatch(/primary|bg-/);
   });
 
-  it('invokes onSelectRate with the exact rate when Preview/Apply is clicked', () => {
+  it('invokes onSelectRate with the exact rate when Review impact is clicked', () => {
     const onSelectRate = vi.fn();
     const rate = makeRate({ id: 9 });
     renderPanel({ rates: [rate], onSelectRate });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Preview / Apply' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Review impact' }));
     expect(onSelectRate).toHaveBeenCalledWith(rate);
   });
 });
diff --git a/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx b/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
index 2a60ba4ca8..f01accd7e0 100644
--- a/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
+++ b/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
@@ -132,7 +132,9 @@ export function RateHistoryPanel({
               variant={selectedRateId === r.id ? 'primary' : 'secondary'}
               onClick={() => onSelectRate(r)}
             >
-              {t('chargingPlaces.rateHistory.previewApply', 'Preview / Apply')}
+              {selectedRateId === r.id
+                ? t('chargingPlaces.rateHistory.impactShown', 'Impact shown')
+                : t('chargingPlaces.rateHistory.reviewImpact', 'Review impact')}
             </Button>
             {Date.parse(r.effective_from) > Date.now() && (
               <Button
@@ -169,7 +171,7 @@ export function RateHistoryPanel({
           <EmptyState
             message={t(
               'chargingPlaces.rateHistory.empty',
-              'No rate configured yet — add one below to start pricing sessions at this place.',
+              'No rate configured yet — use the form above to start pricing sessions at this place.',
             )}
           />
         </>
@@ -184,7 +186,7 @@ export function RateHistoryPanel({
           onSort={onSort}
           emptyMessage={t(
             'chargingPlaces.rateHistory.empty',
-            'No rate configured yet — add one below to start pricing sessions at this place.',
+            'No rate configured yet — use the form above to start pricing sessions at this place.',
           )}
         />
       )}
diff --git a/web/src/features/maps/geofenceCategories.ts b/web/src/features/maps/geofenceCategories.ts
new file mode 100644
index 0000000000..9ca2f65260
--- /dev/null
+++ b/web/src/features/maps/geofenceCategories.ts
@@ -0,0 +1,18 @@
+export const GEOFENCE_CATEGORY_VALUES = [
+  'home',
+  'work',
+  'restricted',
+  'custom',
+] as const;
+
+export type GeofenceCategoryValue = (typeof GEOFENCE_CATEGORY_VALUES)[number];
+
+export const GEOFENCE_CATEGORY_LABELS: Record<
+  GeofenceCategoryValue,
+  { key: string; fallback: string }
+> = {
+  home: { key: 'chargingPlaces.category.home', fallback: 'Home' },
+  work: { key: 'chargingPlaces.category.work', fallback: 'Work' },
+  restricted: { key: 'chargingPlaces.category.restricted', fallback: 'Restricted' },
+  custom: { key: 'chargingPlaces.category.custom', fallback: 'Custom' },
+};
diff --git a/web/src/features/maps/pages/GeofencesPage.test.tsx b/web/src/features/maps/pages/GeofencesPage.test.tsx
index 74cdb897d7..c7563868a6 100644
--- a/web/src/features/maps/pages/GeofencesPage.test.tsx
+++ b/web/src/features/maps/pages/GeofencesPage.test.tsx
@@ -180,6 +180,7 @@ function makeGeofence(o: Partial<Geofence> & { id: string; name: string }): Geof
     alertOnEntry: false,
     alertOnExit: false,
     enabled: true,
+    category: 'custom',
     origin: 'manual',
     needsReview: false,
     createdAt: '2024-01-01T00:00:00Z',
@@ -229,13 +230,27 @@ function installRequest() {
     if (u === '/geofences' && method === 'GET') {
       if (store.mode === 'pending') return new Promise(() => {});
       if (store.mode === 'reject') return Promise.reject(store.error ?? new Error('boom'));
-      return Promise.resolve(store.geofences);
+      return Promise.resolve(
+        store.geofences.map((geofence) => ({
+          ...geofence,
+          id: Number(geofence.id),
+          polygon_wkt: 'POLYGON((0 0,0 0,0 0,0 0))',
+          alert_on_entry: geofence.alertOnEntry,
+          alert_on_exit: geofence.alertOnExit,
+          needs_review: geofence.needsReview,
+          archived_at: geofence.archivedAt ?? null,
+          created_at: geofence.createdAt,
+          updated_at: geofence.createdAt,
+        })),
+      );
     }
     if (u === '/geofences' && method === 'POST') {
       return Promise.resolve(
         makeGeofence({ id: '99', name: 'Created', latitude: 1, longitude: 2, radius: 100 }),
       );
     }
+    if (u === '/geofences/needs-review' && method === 'GET') return Promise.resolve([]);
+    if (u === '/geofences/rates/current' && method === 'GET') return Promise.resolve([]);
     if (u === '/geofences/bulk' && method === 'POST') {
       return Promise.resolve({ deleted: 1, failed: [] });
     }
@@ -291,7 +306,7 @@ function renderPage() {
 }
 
 const summary = () => within(screen.getByRole('region', { name: 'Geofence summary' }));
-const zones = () => within(screen.getByRole('region', { name: 'Geofence zones' }));
+const zones = () => within(screen.getByRole('region', { name: 'Places and charging zones' }));
 
 // Read a KPI card's value <p> by its label text.
 function kpiValue(label: string): string {
@@ -364,16 +379,24 @@ describe('GeofencesPage — KPI band', () => {
 
 // ── Zones panel states ───────────────────────────────────────────────────────
 describe('GeofencesPage — zones panel states', () => {
-  it('renders one card per geofence with the correct alert-type badge', async () => {
+  it('renders every place with its entry and exit alert controls', async () => {
     renderPage();
     await zones().findByText('Home');
 
     expect(zones().getByText('Work')).toBeInTheDocument();
     expect(zones().getByText('Gym')).toBeInTheDocument();
-    // alertBadgeLabel: both → "Entry & Exit", entry → "Entry", none → "None".
-    expect(zones().getByText('Entry & Exit')).toBeInTheDocument();
-    expect(zones().getByText('Entry')).toBeInTheDocument();
-    expect(zones().getByText('None')).toBeInTheDocument();
+    expect(
+      zones().getByRole('switch', { name: 'Entry alert for Home' }),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      zones().getByRole('switch', { name: 'Exit alert for Home' }),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      zones().getByRole('switch', { name: 'Entry alert for Work' }),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      zones().getByRole('switch', { name: 'Exit alert for Work' }),
+    ).toHaveAttribute('aria-checked', 'false');
   });
 
   it('renders a retry-able QueryError (not cards) when the feed fails', async () => {
@@ -394,44 +417,45 @@ describe('GeofencesPage — zones panel states', () => {
     store.geofences = [];
     renderPage();
 
-    expect(await zones().findByText('No geofences defined')).toBeInTheDocument();
-    // The empty state offers its own "Add Geofence" action (plus the header one).
-    expect(screen.getAllByRole('button', { name: 'Add Geofence' }).length).toBeGreaterThanOrEqual(1);
+    expect(
+      await zones().findByText(
+        'No active places yet. Existing and future confirmed charging locations appear automatically.',
+      ),
+    ).toBeInTheDocument();
+    expect(zones().getByRole('button', { name: 'Add Place' })).toBeInTheDocument();
     expect(zones().queryByText('Home')).toBeNull();
   });
 });
 
 // ── Search + filters ─────────────────────────────────────────────────────────
 describe('GeofencesPage — search and filtering', () => {
-  it('filters the visible cards by name and surfaces an active-filter chip', async () => {
+  it('filters the unified place directory by name', async () => {
     renderPage();
     await zones().findByText('Home');
 
-    fireEvent.change(screen.getByPlaceholderText(/Search by name/i), {
+    fireEvent.change(screen.getByPlaceholderText(/Search places, categories, or origin/i), {
       target: { value: 'Work' },
     });
 
     // Debounced — wait for the non-matching cards to drop out.
     await waitFor(() => expect(zones().queryByText('Home')).toBeNull());
-    // The Work card survives (identified by its rename control, which is
-    // unambiguous even though the filter chip also echoes "Work").
-    expect(zones().getByRole('button', { name: 'Rename geofence Work' })).toBeInTheDocument();
+    expect(zones().getByRole('button', { name: 'Edit geofence Work' })).toBeInTheDocument();
     expect(zones().queryByText('Gym')).toBeNull();
-    // The active-filter chip echoes the query.
-    expect(
-      within(screen.getByTestId('active-filter-chips')).getByText('Work'),
-    ).toBeInTheDocument();
   });
 
   it('shows a "no matches" empty state with a clear action for an unmatched query', async () => {
     renderPage();
     await zones().findByText('Home');
 
-    fireEvent.change(screen.getByPlaceholderText(/Search by name/i), {
+    fireEvent.change(screen.getByPlaceholderText(/Search places, categories, or origin/i), {
       target: { value: 'zzz-nothing' },
     });
 
-    expect(await zones().findByText('No geofences match your search.')).toBeInTheDocument();
+    expect(
+      await zones().findByText(
+        'No places match this search. Clear the search to see all places.',
+      ),
+    ).toBeInTheDocument();
     expect(zones().getByRole('button', { name: 'Clear search' })).toBeInTheDocument();
   });
 });
@@ -471,23 +495,25 @@ describe('GeofencesPage — card mutations', () => {
     );
   });
 
-  it('renames a geofence inline via a full-payload PUT', async () => {
+  it('updates a place category through the shared edit modal', async () => {
     renderPage();
     await zones().findByText('Home');
 
-    fireEvent.click(screen.getByRole('button', { name: 'Rename geofence Home' }));
-    const input = await screen.findByTestId('editable-text-input');
-    fireEvent.change(input, { target: { value: 'Casa' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
+    fireEvent.click(screen.getByRole('button', { name: 'Edit geofence Home' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Edit Geofence' });
+    fireEvent.change(within(dialog).getByLabelText('Category'), {
+      target: { value: 'work' },
+    });
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Update' }));
 
     await waitFor(() => {
       expect(callsMatching('PUT', (u) => u === '/geofences/1').length).toBeGreaterThan(0);
     });
     const put = callsMatching('PUT', (u) => u === '/geofences/1')[0];
     const body = JSON.parse((put[1] as { body: string }).body);
-    // Full merged payload — name plus the untouched fields (never a bare {name}).
-    expect(body.name).toBe('Casa');
+    expect(body.name).toBe('Home');
     expect(body.radius).toBe(100);
+    expect(body.category).toBe('work');
     expect(body).not.toHaveProperty('id');
   });
 });
@@ -495,17 +521,19 @@ describe('GeofencesPage — card mutations', () => {
 // ── Bulk selection ───────────────────────────────────────────────────────────
 describe('GeofencesPage — bulk selection', () => {
   it('reveals the bulk toolbar on selection and bulk-deletes after confirmation', async () => {
-    const { container } = renderPage();
+    renderPage();
     await zones().findByText('Home');
 
     // No toolbar until something is selected.
-    expect(screen.queryByRole('region', { name: 'Bulk actions for selected items' })).toBeNull();
+    expect(screen.queryByRole('region', { name: 'Bulk actions' })).toBeNull();
 
-    fireEvent.click(screen.getByRole('checkbox', { name: 'Select geofence Home' }));
-    const toolbar = await screen.findByRole('region', { name: 'Bulk actions for selected items' });
+    const homeRow = zones().getByText('Home').closest('tr');
+    expect(homeRow).not.toBeNull();
+    fireEvent.click(within(homeRow as HTMLElement).getByRole('checkbox', { name: 'Select row' }));
+    const toolbar = await screen.findByRole('region', { name: 'Bulk actions' });
     expect(within(toolbar).getByText('1 selected')).toBeInTheDocument();
 
-    fireEvent.click(container.querySelector('[data-bulk-action="delete"]') as HTMLElement);
+    fireEvent.click(within(toolbar).getByRole('button', { name: 'Delete' }));
     const dialog = await screen.findByRole('dialog', { name: 'Delete geofences?' });
     fireEvent.click(within(dialog).getByRole('button', { name: 'Delete' }));
 
@@ -563,6 +591,7 @@ describe('GeofencesPage — create modal', () => {
       latitude: 37.5,
       longitude: -122.5,
       radius: 150,
+      category: 'custom',
       alertOnEntry: true,
       alertOnExit: true,
       enabled: true,
@@ -722,7 +751,7 @@ describe('GeofencesPage — a11y & data contract', () => {
     await zones().findByText('Home');
 
     expect(screen.getByRole('region', { name: 'Geofence summary' })).toBeInTheDocument();
-    expect(screen.getByRole('region', { name: 'Geofence zones' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'Places and charging zones' })).toBeInTheDocument();
     // The switch's accessible name must live ON the switch button, not the wrapper.
     expect(screen.getByRole('switch', { name: 'Toggle geofence Home' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Edit geofence Gym' })).toBeInTheDocument();
diff --git a/web/src/features/maps/pages/GeofencesPage.tsx b/web/src/features/maps/pages/GeofencesPage.tsx
index 3daf089369..e0ace55b8d 100644
--- a/web/src/features/maps/pages/GeofencesPage.tsx
+++ b/web/src/features/maps/pages/GeofencesPage.tsx
@@ -1,36 +1,32 @@
 /**
  * GeofencesPage — modern-ui full-width redesign.
  *
- * Full-bleed responsive bento: a KPI band, an (AI-gated) Helix draft
- * assistant, and a hero "Zones" panel whose geofence cards flow into an
- * auto-fit grid that fills every column on wide monitors. Each data
- * section owns its loading / empty / error state; a modal handles
- * create/edit with vehicle / browser / map-drawn location capture.
+ * Full-bleed responsive workspace: a KPI band, an (AI-gated) Helix draft
+ * assistant, and one directory for zone controls, charging rates, and
+ * session history. Each data section owns its loading / empty / error
+ * state; a modal handles create/edit with vehicle, browser, or map-drawn
+ * location capture.
  */
 
 import { useState, useMemo, useCallback } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import {
-  MapPin, Plus, Pencil, Trash2, Globe, Ruler, Shield,
-  LogIn, LogOut, Check, X, Activity, Navigation, RefreshCw,
+  MapPin, Plus, Globe, Ruler,
+  LogIn, LogOut, Check, X, Navigation, RefreshCw,
 } from 'lucide-react';
 
 import { PageContainer } from '@/components/layout';
 import {
-  GlassPanel, Badge, Button, Input, Select, Modal, Toggle, ConfirmDialog,
-  Tabs, PinButton, EditableText, Checkbox, PanelTitle, Caption, Label,
-  Text, HelperText,
+  GlassPanel, Button, Input, Select, Modal, Toggle, ConfirmDialog,
+  Tabs, PanelTitle, Caption, Label, HelperText,
 } from '@/components/ui';
-import { MetricCard, BulkActionToolbar } from '@/components/data-display';
-import { Skeleton, EmptyState, Spinner, AlertBanner, QueryError } from '@/components/feedback';
+import { MetricCard } from '@/components/data-display';
+import { Skeleton, Spinner, AlertBanner } from '@/components/feedback';
 import { useToast } from '@/components/feedback/Toast';
-import { FadeIn, StaggerContainer, StaggerItem } from '@/components/motion';
-import { SearchInput, FilterBar, ActiveFilterChips, type FilterChipDescriptor } from '@/components/forms';
-import { useFilteredList } from '@/hooks/useFilteredList';
+import { FadeIn } from '@/components/motion';
 import { useDirtyForm } from '@/hooks/useDirtyForm';
 import { useConfirm } from '@/hooks/useConfirm';
-import { useBulkSelection } from '@/hooks/useBulkSelection';
 import { useAiEnabled } from '@/hooks/useAiEnabled';
 import { useBulkGeofencesDelete } from '@/api/hooks/useLocations';
 import {
@@ -44,14 +40,17 @@ import {
 
 import { usePageTitle } from '@/hooks/usePageTitle';
 import { useVehicles } from '@/api/hooks/useVehicles';
-import { usePinned } from '@/api/hooks/usePinned';
 import { fmtNumber } from '@/lib/numberFormat';
 import { cn } from '@/lib/cn';
 import { request } from '@/api/client';
 import type { Geofence } from '@/types/location';
-import type { Position } from '@/api/types';
+import type { Geofence as ApiGeofence, Position } from '@/api/types';
 import { AISuggestNewGeofences } from '@/components/ai/AISuggestNewGeofences';
 import { ChargingPlacesWorkspace } from '@/features/maps/components/charging-places';
+import {
+  GEOFENCE_CATEGORY_LABELS,
+  GEOFENCE_CATEGORY_VALUES,
+} from '../geofenceCategories';
 import {
   geofenceFormSchema,
   toGeofencePayload,
@@ -78,6 +77,7 @@ const EMPTY_FORM: GeofenceFormData = {
   latitude: '',
   longitude: '',
   radius: '100',
+  category: 'custom',
   alertType: 'both',
   enabled: true,
 };
@@ -89,38 +89,15 @@ const ALERT_OPTIONS = [
   { value: 'none', label: 'None' },
 ];
 
-// Auto-fit bento: cards flow and fill every available column on wide
-// monitors, collapsing to a single column on phones — the strongest
-// "use the whole screen on any monitor" tool per the design language.
-const CARD_GRID = 'grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))]';
-
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
-function getAlertType(g: Geofence): AlertType {
-  if (g.alertOnEntry && g.alertOnExit) return 'both';
-  if (g.alertOnEntry) return 'entry';
-  if (g.alertOnExit) return 'exit';
+function getAlertType(g: ApiGeofence): AlertType {
+  if (g.alert_on_entry && g.alert_on_exit) return 'both';
+  if (g.alert_on_entry) return 'entry';
+  if (g.alert_on_exit) return 'exit';
   return 'none';
 }
 
-function alertBadgeVariant(type: AlertType): 'success' | 'warning' | 'info' | 'neutral' {
-  switch (type) {
-    case 'both': return 'success';
-    case 'entry': return 'info';
-    case 'exit': return 'warning';
-    default: return 'neutral';
-  }
-}
-
-function alertBadgeLabel(type: AlertType, t: (k: string) => string): string {
-  switch (type) {
-    case 'both': return t('Entry & Exit');
-    case 'entry': return t('Entry');
-    case 'exit': return t('Exit');
-    default: return t('None');
-  }
-}
-
 /**
  * Robustly detect a W3C Geolocation error.
  *
@@ -169,11 +146,10 @@ export default function GeofencesPage() {
   const [initialForm, setInitialForm] = useState<GeofenceFormData>(EMPTY_FORM);
   const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof GeofenceFormData, string>>>({});
   const [formError, setFormError] = useState<string | null>(null);
-  const [deleteTarget, setDeleteTarget] = useState<Geofence | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<ApiGeofence | null>(null);
   const [locationSource, setLocationSource] = useState<LocationSource>('vehicle');
   const [selectedVehicleId, setSelectedVehicleId] = useState<number>(0);
   const [locationLoading, setLocationLoading] = useState(false);
-  const [search, setSearch] = useState('');
   // The AI geofence suggestion panel needs a candidate visited-location ID.
   // We expose
   // a small numeric input so the user can paste the ID copied from
@@ -187,11 +163,6 @@ export default function GeofencesPage() {
     return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
   }, [aiLocationIdRaw]);
 
-  // Bulk selection keys off geofence ids and clears when the filtered list
-  // changes so users don't carry stale selections.
-  // The frontend Geofence type carries id as string (legacy) but the
-  // backend bulk endpoint expects int64s — we convert at the call site.
-  const sel = useBulkSelection<string>();
   const bulkDelete = useBulkGeofencesDelete();
 
   // Dirty when the modal is open AND the form diverges from the initial
@@ -204,6 +175,7 @@ export default function GeofencesPage() {
       form.latitude !== initialForm.latitude ||
       form.longitude !== initialForm.longitude ||
       form.radius !== initialForm.radius ||
+      form.category !== initialForm.category ||
       form.alertType !== initialForm.alertType ||
       form.enabled !== initialForm.enabled
     );
@@ -220,7 +192,6 @@ export default function GeofencesPage() {
   });
   const geofences = geofencesQuery.data;
   const isLoading = geofencesQuery.isLoading;
-  const error = geofencesQuery.error as Error | null;
 
   const { data: vehicles } = useVehicles();
 
@@ -265,31 +236,20 @@ export default function GeofencesPage() {
     onError: (err: Error) => toast.error(t('Failed to delete geofence'), err.message),
   });
 
-  const toggleMut = useMutation({
-    mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) =>
+  const quickUpdateMut = useMutation({
+    mutationFn: ({
+      id,
+      patch,
+    }: {
+      id: number;
+      patch: Partial<Pick<ApiGeofence, 'enabled' | 'alert_on_entry' | 'alert_on_exit'>>;
+    }) =>
       request<Geofence>(`/geofences/${id}`, {
         method: 'PUT',
-        body: JSON.stringify({ enabled }),
+        body: JSON.stringify(patch),
       }),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['geofences'] }),
-    onError: (err: Error) => toast.error(t('Failed to toggle geofence'), err.message),
-  });
-
-  // Inline rename sends a full merged payload rather than a partial `{ name }`
-  // so the backend's PUT semantics
-  // are unambiguous regardless of whether it does field-level merge.
-  // Errors are surfaced inline by EditableText, so no toast here.
-  const renameMut = useMutation({
-    mutationFn: ({ g, name }: { g: Geofence; name: string }) => {
-      const { id: _id, createdAt: _createdAt, ...rest } = g;
-      void _id;
-      void _createdAt;
-      return request<Geofence>(`/geofences/${g.id}`, {
-        method: 'PUT',
-        body: JSON.stringify({ ...rest, name }),
-      });
-    },
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['geofences'] }),
+    onError: (err: Error) => toast.error(t('Failed to update geofence'), err.message),
   });
 
   // ─── Computed stats ──────────────────────────────────────────────────────
@@ -304,29 +264,6 @@ export default function GeofencesPage() {
     };
   }, [geofences]);
 
-  const geofenceSearchFields = useMemo(
-    () => ['name'] as const satisfies ReadonlyArray<keyof Geofence>,
-    [],
-  );
-  const filteredGeofences = useFilteredList(geofences, search, geofenceSearchFields);
-  const { data: geofencePins = [] } = usePinned('geofence');
-  const sortedGeofences = useMemo(() => {
-    if (geofencePins.length === 0) return filteredGeofences;
-    const order = new Map<string, number>();
-    geofencePins.forEach((p) => order.set(String(p.item_id), p.position));
-    return [...filteredGeofences].sort((a, b) => {
-      const ap = order.get(String(a.id));
-      const bp = order.get(String(b.id));
-      if (ap != null && bp != null) return ap - bp;
-      if (ap != null) return -1;
-      if (bp != null) return 1;
-      return 0;
-    });
-  }, [filteredGeofences, geofencePins]);
-
-  const list = geofences ?? [];
-  const hasGeofences = list.length > 0;
-
   // ─── Drawer integration ──────────────────────────────────────────────────
 
   /* Center the picker map on the form's current coords or fall back to
@@ -438,6 +375,7 @@ export default function GeofencesPage() {
         latitude: String(draft.latitude),
         longitude: String(draft.longitude),
         radius: String(Math.round(draft.radius)),
+        category: EMPTY_FORM.category,
         alertType: EMPTY_FORM.alertType,
         enabled: EMPTY_FORM.enabled,
       };
@@ -452,13 +390,14 @@ export default function GeofencesPage() {
     [],
   );
 
-  const openEdit = useCallback((g: Geofence) => {
-    setEditingId(g.id);
+  const openEdit = useCallback((g: ApiGeofence) => {
+    setEditingId(String(g.id));
     const next: GeofenceFormData = {
       name: g.name,
       latitude: String(g.latitude),
       longitude: String(g.longitude),
       radius: String(g.radius),
+      category: g.category ?? 'custom',
       alertType: getAlertType(g),
       enabled: g.enabled,
     };
@@ -573,17 +512,6 @@ export default function GeofencesPage() {
 
   const isSaving = createMut.isPending || updateMut.isPending;
 
-  const searchChips = (search
-    ? [
-        {
-          key: 'q',
-          label: t('geofences.filterLabel.search', 'Search'),
-          value: search,
-          onRemove: () => setSearch(''),
-        } satisfies FilterChipDescriptor,
-      ]
-    : []) as readonly FilterChipDescriptor[];
-
   // ─── Render ──────────────────────────────────────────────────────────────
 
   return (
@@ -692,211 +620,28 @@ export default function GeofencesPage() {
         </FadeIn>
       )}
 
-      {/* 3 — Zones: hero panel. Toolbar + search live in the header; the cards
-          flow into a full-width auto-fit bento. Loading / empty / error are
-          handled independently inside the panel body. */}
+      {/* 3 — One directory for geofence boundaries, alert controls, charging
+          pricing, and session history. */}
       <FadeIn delay={0.2}>
-        <section aria-label={t('geofences.zonesAria', 'Geofence zones')}>
-          <GlassPanel className="space-y-4 p-4 sm:p-5">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <div className="min-w-0">
-                <PanelTitle className="flex items-center gap-2">
-                  <MapPin className="h-4 w-4 text-cyan-300" aria-hidden="true" />
-                  {t('geofences.zonesTitle', 'Zones')}
-                </PanelTitle>
-                <Caption>
-                  {t('geofences.zonesCount', '{{count}} defined', { count: list.length })}
-                </Caption>
-              </div>
-              {hasGeofences && (
-                <FilterBar>
-                  <SearchInput
-                    value={search}
-                    onChange={setSearch}
-                    placeholder={t('geofences.searchPlaceholder', 'Search by name…')}
-                    className="w-full sm:w-72"
-                    historyScope="geofences"
-                  />
-                </FilterBar>
-              )}
-            </div>
-
-            {hasGeofences && searchChips.length > 0 && (
-              <ActiveFilterChips
-                filters={searchChips}
-                onClearAll={() => setSearch('')}
-              />
-            )}
-
-            {hasGeofences && (
-              <BulkActionToolbar
-                selectedIds={Array.from(sel.selectedIds)}
-                total={sortedGeofences.length}
-                onClear={sel.clear}
-                itemNoun={{
-                  one: t('geofences.noun.one', 'geofence'),
-                  other: t('geofences.noun.other', 'geofences'),
-                }}
-                actions={[
-                  {
-                    id: 'delete',
-                    label: t('geofences.bulk.delete', 'Delete'),
-                    variant: 'danger',
-                    icon: <Trash2 className="h-4 w-4" aria-hidden="true" />,
-                    confirm: {
-                      title: t('geofences.bulk.deleteConfirm.title', 'Delete geofences?'),
-                      description: t(
-                        'geofences.bulk.deleteConfirm.body',
-                        'Selected geofences will be removed permanently. Linked alert rules and automations will continue to reference their old IDs.',
-                      ),
-                      confirmLabel: t('common.delete', 'Delete'),
-                    },
-                    onClick: async (ids) => {
-                      await bulkDelete.mutateAsync(ids.map((i) => Number(i)));
-                      sel.clear();
-                    },
-                  },
-                ]}
-              />
-            )}
-
-            {isLoading ? (
-              <div className={CARD_GRID}>
-                {Array.from({ length: 6 }).map((_, i) => (
-                  <GlassPanel key={i} className="space-y-3 p-4">
-                    <Skeleton height={22} width="60%" />
-                    <Skeleton height={14} />
-                    <Skeleton height={14} width="80%" />
-                    <Skeleton height={32} />
-                  </GlassPanel>
-                ))}
-              </div>
-            ) : error ? (
-              <QueryError
-                error={geofencesQuery.error}
-                onRetry={() => geofencesQuery.refetch()}
-                resourceName={t('geofences.noun.one', 'geofence')}
-              />
-            ) : !hasGeofences ? (
-              <EmptyState
-                icon={<Shield className="h-12 w-12" aria-hidden="true" />}
-                title={t('No geofences defined')}
-                message={t('Add a geofence to track when your vehicle arrives or leaves a location.')}
-                action={{ label: t('Add Geofence'), onClick: openCreate }}
-                className="py-10"
-              />
-            ) : filteredGeofences.length === 0 ? (
-              <EmptyState
-                icon={<Activity className="h-8 w-8 opacity-20" aria-hidden="true" />}
-                message={t('geofences.noMatches', 'No geofences match your search.')}
-                action={{ label: t('Clear search'), onClick: () => setSearch('') }}
-                className="py-8"
-              />
-            ) : (
-              <StaggerContainer className={CARD_GRID}>
-                {sortedGeofences.map((g) => {
-                  const alertType = getAlertType(g);
-                  return (
-                    <StaggerItem key={g.id}>
-                      <GlassPanel hover glow="purple" className="flex h-full flex-col gap-3 p-4">
-                        {/* Header: select + icon + name + badges + pin */}
-                        <div className="flex items-start gap-3">
-                          <Checkbox
-                            checked={sel.isSelected(g.id)}
-                            onChange={() => sel.toggle(g.id)}
-                            className="mt-1"
-                            aria-label={t('geofences.selectGeofence', 'Select geofence {{name}}', { name: g.name })}
-                          />
-                          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--surface-2)]">
-                            <MapPin className="h-5 w-5 text-[var(--text-muted)]" aria-hidden="true" />
-                          </div>
-                          <div className="min-w-0 flex-1">
-                            <EditableText
-                              value={g.name}
-                              variant="heading"
-                              ariaLabel={t('editableText.rename.geofence', 'Rename geofence {{name}}', { name: g.name })}
-                              maxLength={120}
-                              validate={(next) =>
-                                next.length > 120
-                                  ? t('geofences.error.nameTooLong', 'Max 120 characters')
-                                  : null
-                              }
-                              onSave={async (next) => {
-                                await renameMut.mutateAsync({ g, name: next });
-                              }}
-                            />
-                            <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
-                              <Badge variant={g.enabled ? 'success' : 'neutral'} size="sm">
-                                {g.enabled ? t('Active') : t('Inactive')}
-                              </Badge>
-                              <Badge variant={alertBadgeVariant(alertType)} size="sm">
-                                {alertBadgeLabel(alertType, t)}
-                              </Badge>
-                            </div>
-                          </div>
-                          <PinButton itemType="geofence" itemId={g.id} size="sm" />
-                        </div>
-
-                        {/* Meta: coordinates + radius */}
-                        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-                          <Text as="span" size="xs" color="muted" mono className="flex items-center gap-1">
-                            <Globe className="h-3 w-3" aria-hidden="true" />
-                            {fmtNumber(g.latitude ?? 0, 6)}, {fmtNumber(g.longitude ?? 0, 6)}
-                          </Text>
-                          <Text as="span" size="xs" color="muted" className="flex items-center gap-1">
-                            <Ruler className="h-3 w-3" aria-hidden="true" />
-                            {fmtNumber(g.radius ?? 0)} {t('m')}
-                          </Text>
-                        </div>
-
-                        {/* Footer: enable toggle + edit / delete actions */}
-                        <div className="mt-auto flex items-center justify-between gap-2 border-t border-white/[0.06] pt-3">
-                          <div className="flex items-center gap-2">
-                            <Toggle
-                              checked={g.enabled}
-                              onChange={(checked) => toggleMut.mutate({ id: g.id, enabled: checked })}
-                              size="sm"
-                              aria-label={t('geofences.toggleGeofence', 'Toggle geofence {{name}}', { name: g.name })}
-                            />
-                            <Text as="span" variant="bodySm">
-                              {g.enabled ? t('Active') : t('Inactive')}
-                            </Text>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              icon={<Pencil className="h-4 w-4" aria-hidden="true" />}
-                              onClick={() => openEdit(g)}
-                              aria-label={t('geofences.editGeofence', 'Edit geofence {{name}}', { name: g.name })}
-                            />
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              icon={<Trash2 className="h-4 w-4" aria-hidden="true" />}
-                              onClick={() => setDeleteTarget(g)}
-                              aria-label={t('geofences.deleteGeofence', 'Delete geofence {{name}}', { name: g.name })}
-                            />
-                          </div>
-                        </div>
-                      </GlassPanel>
-                    </StaggerItem>
-                  );
-                })}
-              </StaggerContainer>
-            )}
-          </GlassPanel>
-        </section>
-      </FadeIn>
-
-      {/* 4 — Charging Places: geofence-based charging-place pricing. A
-          self-contained workspace (Needs Setup queue, places list with
-          current rate, and per-place rate history/preview-apply/activity
-          detail) — decomposed into features/maps/components/charging-places
-          rather than adding more bulk to this file directly. */}
-      <FadeIn delay={0.3}>
-        <section aria-label={t('chargingPlaces.workspace.title', 'Charging Places')}>
-          <ChargingPlacesWorkspace />
+        <section
+          aria-label={t(
+            'chargingPlaces.workspace.unifiedAria',
+            'Places and charging zones',
+          )}
+        >
+          <ChargingPlacesWorkspace
+            onAdd={openCreate}
+            onEdit={openEdit}
+            onDelete={setDeleteTarget}
+            onUpdate={(place, patch) =>
+              quickUpdateMut.mutate({ id: place.id, patch })
+            }
+            onBulkDelete={async (places) => {
+              await bulkDelete.mutateAsync(places.map((place) => place.id));
+            }}
+            updatePending={quickUpdateMut.isPending}
+            deletePending={bulkDelete.isPending}
+          />
         </section>
       </FadeIn>
 
@@ -1030,6 +775,25 @@ export default function GeofencesPage() {
             error={fieldErrors.radius}
           />
 
+          <Select
+            label={t('chargingPlaces.detail.category', 'Category')}
+            options={GEOFENCE_CATEGORY_VALUES.map((value) => ({
+              value,
+              label: t(
+                GEOFENCE_CATEGORY_LABELS[value].key,
+                GEOFENCE_CATEGORY_LABELS[value].fallback,
+              ),
+            }))}
+            value={form.category}
+            onChange={(e) =>
+              setForm({
+                ...form,
+                category: e.target.value as GeofenceFormData['category'],
+              })
+            }
+            error={fieldErrors.category}
+          />
+
           <Select
             label={t('Alert Type')}
             options={ALERT_OPTIONS.map((o) => ({ ...o, label: t(o.label) }))}
@@ -1077,7 +841,7 @@ export default function GeofencesPage() {
         cancelLabel={t('Cancel')}
         variant="danger"
         onConfirm={() => {
-          if (deleteTarget) deleteMut.mutate(deleteTarget.id);
+          if (deleteTarget) deleteMut.mutate(String(deleteTarget.id));
         }}
         onCancel={() => setDeleteTarget(null)}
       />
diff --git a/web/src/features/maps/schemas/geofence.test.ts b/web/src/features/maps/schemas/geofence.test.ts
index 66dcd33483..bf531b4648 100644
--- a/web/src/features/maps/schemas/geofence.test.ts
+++ b/web/src/features/maps/schemas/geofence.test.ts
@@ -29,6 +29,7 @@ const VALID_FORM: GeofenceFormData = {
   latitude: '37.7749',
   longitude: '-122.4194',
   radius: '150',
+  category: 'home',
   alertType: 'both',
   enabled: true,
 }
@@ -188,6 +189,7 @@ describe('geofenceFormSchema — alertType & enabled', () => {
       latitude: '200',
       longitude: 'x',
       radius: '1',
+      category: 'custom',
       alertType: 'both',
       enabled: true,
     })
@@ -221,6 +223,7 @@ describe('toGeofencePayload', () => {
       latitude: '12.5',
       longitude: '-34.25',
       radius: '250',
+      category: 'work',
       alertType: 'entry',
       enabled: false,
     })
@@ -229,6 +232,7 @@ describe('toGeofencePayload', () => {
       latitude: 12.5,
       longitude: -34.25,
       radius: 250,
+      category: 'work',
       alertOnEntry: true,
       alertOnExit: false,
       enabled: false,
@@ -256,6 +260,7 @@ describe('toGeofencePayload', () => {
       latitude: 40,
       longitude: -70,
       radius: 500,
+      category: 'home',
       alertOnEntry: false,
       alertOnExit: false,
       enabled: true,
diff --git a/web/src/features/maps/schemas/geofence.ts b/web/src/features/maps/schemas/geofence.ts
index 0a63e76dcb..b2f6830ac2 100644
--- a/web/src/features/maps/schemas/geofence.ts
+++ b/web/src/features/maps/schemas/geofence.ts
@@ -7,6 +7,7 @@
  */
 
 import { z } from 'zod'
+import { GEOFENCE_CATEGORY_VALUES } from '../geofenceCategories'
 
 export const GEOFENCE_ALERT_TYPES = ['entry', 'exit', 'both', 'none'] as const
 
@@ -51,6 +52,7 @@ export const geofenceFormSchema = z.object({
   latitude: numericString('Latitude', { min: -90, max: 90 }),
   longitude: numericString('Longitude', { min: -180, max: 180 }),
   radius: numericString('Radius', { min: 10, max: 50000 }),
+  category: z.enum(GEOFENCE_CATEGORY_VALUES),
   alertType: z.enum(GEOFENCE_ALERT_TYPES),
   enabled: z.boolean(),
 })
@@ -63,6 +65,7 @@ export interface GeofencePayload {
   latitude: number
   longitude: number
   radius: number
+  category: (typeof GEOFENCE_CATEGORY_VALUES)[number]
   alertOnEntry: boolean
   alertOnExit: boolean
   enabled: boolean
@@ -77,6 +80,7 @@ export function toGeofencePayload(form: GeofenceFormData): GeofencePayload {
     latitude: Number(form.latitude),
     longitude: Number(form.longitude),
     radius: Number(form.radius),
+    category: form.category,
     alertOnEntry,
     alertOnExit,
     enabled: form.enabled,
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index 3d633b39dd..b839dbdfce 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -4887,6 +4887,10 @@
       "rename": {
         "success": "Place renamed",
         "error": "Failed to rename place"
+      },
+      "category": {
+        "success": "Category updated",
+        "error": "Failed to update category"
       }
     },
     "geofenceRate": {
@@ -22801,7 +22805,14 @@
   "chargingPlaces": {
     "workspace": {
       "title": "Charging Places",
-      "showArchived": "Show archived"
+      "unifiedTitle": "Places & Charging Zones",
+      "unifiedAria": "Places and charging zones",
+      "unifiedDescription": "Manage zone boundaries, alerts, categories, charging rates, and session history in one place.",
+      "showArchived": "Show archived",
+      "addPlace": "Add Place",
+      "search": "Search places, categories, or origin…",
+      "clearSearch": "Clear search",
+      "noSearchMatches": "No places match this search. Clear the search to see all places."
     },
     "needsSetup": {
       "title": "Needs Setup",
@@ -22813,6 +22824,13 @@
       "name": "Place",
       "origin": "Origin",
       "category": "Category",
+      "zone": "Zone",
+      "status": "Status",
+      "alerts": "Alerts",
+      "entry": "Entry",
+      "exit": "Exit",
+      "entryAlertLabel": "Entry alert for {{name}}",
+      "exitAlertLabel": "Exit alert for {{name}}",
       "rate": "Rate / kWh",
       "effectiveSince": "Effective since",
       "manage": "Manage"
@@ -22831,8 +22849,8 @@
       "custom": "Custom"
     },
     "noRate": "Not set",
-    "empty": "No active charging places yet. Existing and future confirmed charging locations appear automatically.",
-    "emptyAll": "No charging places yet. Charge somewhere or create a geofence above to start tracking costs.",
+    "empty": "No active places yet. Existing and future confirmed charging locations appear automatically.",
+    "emptyAll": "No places or zones yet. Charge somewhere or add a place to start.",
     "kwh": "kWh",
     "discoveredAt": "Discovered",
     "detail": {
@@ -22841,6 +22859,7 @@
       "unarchive": "Restore",
       "archive": "Archive",
       "placeName": "Place name",
+      "category": "Category",
       "rename": "Rename {{name}}",
       "pricingTab": "Rates & Pricing",
       "activityTab": "Charging Activity",
@@ -22865,7 +22884,7 @@
     },
     "rateHistory": {
       "title": "Rate History",
-      "empty": "No rate configured yet — add one below to start pricing sessions at this place.",
+      "empty": "No rate configured yet — use the form above to start pricing sessions at this place.",
       "effectiveFrom": "Effective From",
       "rate": "Rate / kWh",
       "currency": "Currency",
@@ -22875,6 +22894,8 @@
       "cancelScheduled": "Cancel scheduled rate",
       "cancel": "Cancel Rate",
       "previewApply": "Preview / Apply",
+      "reviewImpact": "Review impact",
+      "impactShown": "Impact shown",
       "deleteTitle": "Cancel this scheduled rate?",
       "deleteMessage": "The previous rate will continue through this cancelled schedule. Effective rate history cannot be deleted."
     },
@@ -22882,8 +22903,12 @@
       "title": "Preview & Apply",
       "selectRate": "Select a rate from the history table above to preview its impact.",
       "confirmTitle": "Apply this rate to matching sessions?",
-      "confirmMessage": "This backfills/reprices unpriced or previously geofence-derived sessions in scope. Manual and Tesla-reported actual costs are never overwritten.",
+      "confirmMessage": "This backfills/reprices unpriced or previously geofence-derived sessions in scope. Manual, Tesla-reported, and existing costs with unknown provenance are never overwritten.",
+      "confirmAttributionTitle": "Assign matching sessions to this place?",
+      "confirmAttributionMessage": "Matching sessions will be linked to this place. Their protected costs will remain unchanged.",
       "applyAction": "Apply",
+      "assignAction": "Assign Sessions",
+      "refresh": "Refresh preview",
       "from": "Narrow from (optional)",
       "to": "Narrow to (optional)",
       "matched": "Matched",
@@ -22891,7 +22916,9 @@
       "protected": "Protected",
       "energy": "Energy",
       "estimatedCost": "Estimated Cost",
-      "applied": "Applied: {{priced}} priced, {{skipped}} skipped, {{cost}} total."
+      "noMatches": "No sessions match this place and rate period. Check the zone location and radius, or broaden the optional date range. Sessions without coordinates can match an identical saved place name.",
+      "attributionOnly": "All matched costs are protected. Apply can still assign unlinked sessions to this place without changing their cost.",
+      "applied": "Processed {{matched}} matched sessions: {{priced}} priced, {{skipped}} protected or unchanged, {{cost}} total."
     },
     "summary": {
       "title": "Charging Summary",

From 8e87a868b891b6389b63d5d7c192d09d6854ec35 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Sun, 9 Aug 2026 13:03:33 -0700
Subject: [PATCH 10/15] fix(web): refine range persistence and previews

Use rolling seven-day defaults with versioned shared date-range preferences, and improve charging-rate preview actions with clearer guidance, focus, and modal scrolling.
---
 web/src/components/ui/Modal.tsx               |   5 +-
 .../analytics/pages/AnalyticsPage.tsx         |   1 -
 web/src/features/battery/pages/EnergyPage.tsx |   1 -
 .../battery/pages/SleepEfficiencyPage.tsx     |   1 -
 .../charging/pages/ChargingListPage.tsx       |   1 -
 .../DriveAnalyticsSection.tsx                 |  14 +-
 .../__tests__/DriveAnalyticsSection.test.tsx  |  25 +-
 .../features/driving/pages/DriveScorePage.tsx |   1 -
 .../features/driving/pages/DrivesListPage.tsx |   1 -
 .../driving/pages/DrivetrainHealthPage.tsx    |   1 -
 .../pages/DrivingDynamicsPage.test.tsx        |  19 +-
 .../driving/pages/DrivingDynamicsPage.tsx     |  21 +-
 .../features/driving/pages/EfficiencyPage.tsx |   1 -
 .../driving/pages/RouteEfficiencyPage.tsx     |   1 -
 .../charging-places/PlaceDetailPanel.test.tsx |  67 ++++++
 .../charging-places/PlaceDetailPanel.tsx      |  80 +++++--
 .../PreviewApplyPanel.test.tsx                |   9 +-
 .../charging-places/PreviewApplyPanel.tsx     |  20 +-
 .../charging-places/RateHistoryPanel.test.tsx |  22 +-
 .../charging-places/RateHistoryPanel.tsx      |  13 +-
 .../components/InboxBody.test.tsx             |  23 ++
 .../notifications/components/InboxBody.tsx    |  75 ++++--
 .../components/NotificationFilterBar.test.tsx |  57 ++---
 .../components/NotificationFilterBar.tsx      |  53 ++---
 .../features/sharing/pages/ShareCardPage.tsx  |   1 -
 .../features/system/pages/MyActivityPage.tsx  |   1 -
 .../pages/TirePressurePage.tsx                |   1 -
 .../vehicles/pages/ParkingAnalyticsPage.tsx   |   1 -
 .../hooks/__tests__/useRangeState.test.tsx    | 163 ++++++++++++--
 web/src/hooks/useRangeState.ts                | 213 ++++++++++--------
 web/src/i18n/en.json                          |  12 +-
 31 files changed, 596 insertions(+), 308 deletions(-)

diff --git a/web/src/components/ui/Modal.tsx b/web/src/components/ui/Modal.tsx
index 523cf4e8e8..72091c2123 100644
--- a/web/src/components/ui/Modal.tsx
+++ b/web/src/components/ui/Modal.tsx
@@ -186,7 +186,10 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
                 </button>
               </div>
             )}
-            <div className="flex-1 overflow-y-auto px-4 pb-4 pt-3 sm:px-6 sm:pb-6 safe-bottom">
+            <div
+              data-modal-scroll-body="true"
+              className="flex-1 overflow-y-auto px-4 pb-4 pt-3 sm:px-6 sm:pb-6 safe-bottom"
+            >
               {children}
             </div>
           </div>
diff --git a/web/src/features/analytics/pages/AnalyticsPage.tsx b/web/src/features/analytics/pages/AnalyticsPage.tsx
index a72b5b51e0..a98ae921c1 100644
--- a/web/src/features/analytics/pages/AnalyticsPage.tsx
+++ b/web/src/features/analytics/pages/AnalyticsPage.tsx
@@ -21,7 +21,6 @@ export default function AnalyticsPage() {
 
   const { start, end, setRange } = useRangeState({
     persistKey: 'analytics.range',
-    defaultPresetId: '30d',
   });
 
   const fleetQuery = useFleetAnalytics({ start, end });
diff --git a/web/src/features/battery/pages/EnergyPage.tsx b/web/src/features/battery/pages/EnergyPage.tsx
index c88618e4d9..6402ffcbb8 100644
--- a/web/src/features/battery/pages/EnergyPage.tsx
+++ b/web/src/features/battery/pages/EnergyPage.tsx
@@ -196,7 +196,6 @@ export default function EnergyPage() {
   /* ── Date range ───────────────────────────────────────────────── */
   const { start: startDate, end: endDate, setRange } = useRangeState({
     persistKey: 'energy.range',
-    defaultPresetId: '30d',
   });
 
   /* URL-persisted hidden-series state for the two-series
diff --git a/web/src/features/battery/pages/SleepEfficiencyPage.tsx b/web/src/features/battery/pages/SleepEfficiencyPage.tsx
index f343f21e58..ab5f13ec9d 100644
--- a/web/src/features/battery/pages/SleepEfficiencyPage.tsx
+++ b/web/src/features/battery/pages/SleepEfficiencyPage.tsx
@@ -45,7 +45,6 @@ export default function SleepEfficiencyPage() {
   const vehicleIdStr = vehicleId != null ? String(vehicleId) : null;
   const { start, end, setRange } = useRangeState({
     persistKey: 'sleep-efficiency.range',
-    defaultPresetId: '30d',
   });
   const requestedRange = useMemo(
     () => analyzeSleepRange(start, end),
diff --git a/web/src/features/charging/pages/ChargingListPage.tsx b/web/src/features/charging/pages/ChargingListPage.tsx
index b2d69e0601..c7e83d5483 100644
--- a/web/src/features/charging/pages/ChargingListPage.tsx
+++ b/web/src/features/charging/pages/ChargingListPage.tsx
@@ -109,7 +109,6 @@ export default function ChargingListPage() {
     setRangeWithUrlUpdates,
   } = useRangeState({
     persistKey: 'charging.list.range',
-    defaultPresetId: '30d',
   });
   const [search] = useUrlString('q', '');
   const [collection] = useUrlEnum<Collection>('coll', COLLECTIONS, 'all');
diff --git a/web/src/features/driving/components/driving-dynamics/DriveAnalyticsSection.tsx b/web/src/features/driving/components/driving-dynamics/DriveAnalyticsSection.tsx
index 1567c8980f..750a6f1562 100644
--- a/web/src/features/driving/components/driving-dynamics/DriveAnalyticsSection.tsx
+++ b/web/src/features/driving/components/driving-dynamics/DriveAnalyticsSection.tsx
@@ -54,8 +54,10 @@ interface DriveAnalyticsSectionProps {
   filteredDrives: Drive[];
   startDate: string;
   endDate: string;
-  onStartDateChange: (d: string) => void;
-  onEndDateChange: (d: string) => void;
+  onRangeChange: (
+    range: { start: string; end: string },
+    presetId?: string,
+  ) => void;
   toDistanceDisplay: (v: number) => number;
   toSpeedDisplay: (v: number) => number;
   distanceUnit: string;
@@ -66,8 +68,7 @@ export default function DriveAnalyticsSection({
   filteredDrives,
   startDate,
   endDate,
-  onStartDateChange,
-  onEndDateChange,
+  onRangeChange,
   toDistanceDisplay,
   toSpeedDisplay,
   distanceUnit,
@@ -145,10 +146,7 @@ export default function DriveAnalyticsSection({
         </div>
         <RangePicker
           value={{ start: startDate, end: endDate }}
-          onChange={(r) => {
-            onStartDateChange(r.start);
-            onEndDateChange(r.end);
-          }}
+          onChange={onRangeChange}
         />
       </FadeIn>
 
diff --git a/web/src/features/driving/components/driving-dynamics/__tests__/DriveAnalyticsSection.test.tsx b/web/src/features/driving/components/driving-dynamics/__tests__/DriveAnalyticsSection.test.tsx
index d85ae21b70..a3fdf3c2e4 100644
--- a/web/src/features/driving/components/driving-dynamics/__tests__/DriveAnalyticsSection.test.tsx
+++ b/web/src/features/driving/components/driving-dynamics/__tests__/DriveAnalyticsSection.test.tsx
@@ -18,8 +18,7 @@
  * Also covered: null-speed drives are skipped (not coerced into 0–30),
  * every panel shows a "No data available" placeholder instead of a blank
  * axis-only chart, the Power Profile fallback table renders the recent-20
- * window, and the date-range filter wires BOTH `onStartDateChange` and
- * `onEndDateChange`.
+ * window, and the date-range filter commits both bounds atomically.
  *
  * The chart annotation hooks are stubbed (the real ones hit `/annotations`)
  * and i18n falls back to the `defaultValue` argument, matching the
@@ -100,8 +99,7 @@ function baseProps(overrides: Partial<Props> = {}): Props {
     filteredDrives: [],
     startDate: '2026-05-01',
     endDate: '2026-05-31',
-    onStartDateChange: vi.fn(),
-    onEndDateChange: vi.fn(),
+    onRangeChange: vi.fn(),
     toDistanceDisplay: (m: number) => m / 1000,
     toSpeedDisplay: toMph,
     distanceUnit: 'mi',
@@ -253,19 +251,22 @@ describe('DriveAnalyticsSection — power profile', () => {
 })
 
 describe('DriveAnalyticsSection — date range filter', () => {
-  it('forwards a preset selection to BOTH date-change callbacks', () => {
-    const onStartDateChange = vi.fn()
-    const onEndDateChange = vi.fn()
-    renderSection({ onStartDateChange, onEndDateChange })
+  it('forwards a preset selection as one atomic range change', () => {
+    const onRangeChange = vi.fn()
+    renderSection({ onRangeChange })
 
     fireEvent.click(screen.getByRole('button', { name: /date range/i }))
     const dialog = screen.getByRole('dialog')
     fireEvent.click(within(dialog).getByRole('option', { name: /last 7 days/i }))
 
-    expect(onStartDateChange).toHaveBeenCalledTimes(1)
-    expect(onEndDateChange).toHaveBeenCalledTimes(1)
-    expect(onStartDateChange.mock.calls[0][0]).toMatch(/^\d{4}-\d{2}-\d{2}$/)
-    expect(onEndDateChange.mock.calls[0][0]).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+    expect(onRangeChange).toHaveBeenCalledTimes(1)
+    expect(onRangeChange).toHaveBeenCalledWith(
+      {
+        start: expect.stringMatching(/^\d{4}-\d{2}-\d{2}$/),
+        end: expect.stringMatching(/^\d{4}-\d{2}-\d{2}$/),
+      },
+      '7d',
+    )
   })
 
   it('toggles the range popover open and closed', () => {
diff --git a/web/src/features/driving/pages/DriveScorePage.tsx b/web/src/features/driving/pages/DriveScorePage.tsx
index 506e384fff..9bd47a4f2c 100644
--- a/web/src/features/driving/pages/DriveScorePage.tsx
+++ b/web/src/features/driving/pages/DriveScorePage.tsx
@@ -596,7 +596,6 @@ export default function DriveScorePage() {
   /* ---- date filter ---- */
   const { start: startDate, end: endDate, setRange } = useRangeState({
     persistKey: 'drive-score.range',
-    defaultPresetId: '30d',
   });
 
   /* ---- table sort (shared DataTable controlled sort) ---- */
diff --git a/web/src/features/driving/pages/DrivesListPage.tsx b/web/src/features/driving/pages/DrivesListPage.tsx
index 5771030eb6..3df34cf91b 100644
--- a/web/src/features/driving/pages/DrivesListPage.tsx
+++ b/web/src/features/driving/pages/DrivesListPage.tsx
@@ -86,7 +86,6 @@ export default function DrivesListPage() {
     setRangeWithUrlUpdates,
   } = useRangeState({
     persistKey: 'drives.list.range',
-    defaultPresetId: '30d',
   });
   const priorRange = useMemo(() => priorPeriod(startDate, endDate), [startDate, endDate]);
 
diff --git a/web/src/features/driving/pages/DrivetrainHealthPage.tsx b/web/src/features/driving/pages/DrivetrainHealthPage.tsx
index b8c969cd71..f7dd193ba2 100644
--- a/web/src/features/driving/pages/DrivetrainHealthPage.tsx
+++ b/web/src/features/driving/pages/DrivetrainHealthPage.tsx
@@ -46,7 +46,6 @@ export default function DrivetrainHealthPage() {
 
   const { start: startDate, end: endDate, setRange } = useRangeState({
     persistKey: 'drivetrain-health.range',
-    defaultPresetId: '30d',
   });
 
   const healthQuery = useDrivetrainHealth(vehicleIdStr);
diff --git a/web/src/features/driving/pages/DrivingDynamicsPage.test.tsx b/web/src/features/driving/pages/DrivingDynamicsPage.test.tsx
index d6097a8be2..2afa79aeff 100644
--- a/web/src/features/driving/pages/DrivingDynamicsPage.test.tsx
+++ b/web/src/features/driving/pages/DrivingDynamicsPage.test.tsx
@@ -5,7 +5,7 @@
  * fans four data hooks (`useMotorLatest`, `useMotorHistory`, `useDrives`,
  * `useDrivingCoach`) into eleven presentational sections, derives cross-section
  * state (motor stats + throttle style via the real `helpers`), filters drives to
- * a page-scoped date window, and threads SI→display unit converters down to the
+ * a shared date window, and threads SI→display unit converters down to the
  * children.
  *
  * Strategy:
@@ -25,7 +25,7 @@
  *     imperial (mi / mph / °F) preferences.
  *
  * System time is pinned (Date only — timers stay real so userEvent works) so
- * the default 30-day window resolves to a fixed [2025-05-16, 2025-06-15].
+ * the default 7-day window resolves to a fixed [2025-06-09, 2025-06-15].
  */
 
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
@@ -195,8 +195,7 @@ vi.mock('../components/driving-dynamics', () => ({
         type="button"
         data-testid="widen-range"
         onClick={() => {
-          p.onStartDateChange('2000-01-01');
-          p.onEndDateChange('2999-12-31');
+          p.onRangeChange({ start: '2000-01-01', end: '2999-12-31' });
         }}
       >
         widen
@@ -293,7 +292,7 @@ function drive(over: Record<string, unknown> = {}): any {
 // One in the default window, one before it, one after it, and one with a
 // missing timestamp (exercises the `?? ''` guard — always excluded).
 const DRIVES = [
-  drive({ id: 1, startTs: '2025-06-01T10:00:00Z' }), // in window
+  drive({ id: 1, startTs: '2025-06-12T10:00:00Z' }), // in window
   drive({ id: 2, startTs: '2025-03-01T10:00:00Z' }), // before window
   drive({ id: 3, startTs: '2025-12-01T10:00:00Z' }), // after window
   drive({ id: 4, startTs: null }), // undated — never in any window
@@ -376,7 +375,7 @@ describe('DrivingDynamicsPage — structure & a11y', () => {
     renderPage();
     // Only two queries stay at page level: the live-motor query (PageContainer
     // needs it for the header freshness chip) and the drives list (the
-    // page-scoped date filter narrows it for two different panels). Everything
+    // shared date filter narrows it for two different panels). Everything
     // else is owned by the panel that renders it, at its own cadence.
     expect(mockMotorLatest).toHaveBeenCalledWith(1, 5000);
     expect(mockDrives).toHaveBeenCalledWith('1', 30000);
@@ -436,12 +435,12 @@ describe('DrivingDynamicsPage — live push bridge', () => {
 });
 
 describe('DrivingDynamicsPage — drive date filtering', () => {
-  it('filters drives to the default 30-day window', () => {
+  it('filters drives to the default 7-day window', () => {
     renderPage();
-    // Fixed now = 2025-06-15 → window [2025-05-16, 2025-06-15].
-    expect(screen.getByTestId('da-start')).toHaveTextContent('2025-05-16');
+    // Fixed now = 2025-06-15 → window [2025-06-09, 2025-06-15].
+    expect(screen.getByTestId('da-start')).toHaveTextContent('2025-06-09');
     expect(screen.getByTestId('da-end')).toHaveTextContent('2025-06-15');
-    // Only drive #1 (2025-06-01) falls inside; #2 before, #3 after, #4 undated.
+    // Only drive #1 (2025-06-12) falls inside; #2 before, #3 after, #4 undated.
     expect(num('da-count')).toBe(1);
     expect(num('sg-count')).toBe(1);
   });
diff --git a/web/src/features/driving/pages/DrivingDynamicsPage.tsx b/web/src/features/driving/pages/DrivingDynamicsPage.tsx
index 67a4851344..0b4de4d5f6 100644
--- a/web/src/features/driving/pages/DrivingDynamicsPage.tsx
+++ b/web/src/features/driving/pages/DrivingDynamicsPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PageContainer } from '@/components/layout';
@@ -11,6 +11,7 @@ import { useSelectedVehicle } from '@/hooks/useSelectedVehicle';
 import { useSignalQueryInvalidation } from '@/hooks/useSignalQueryInvalidation';
 import { useUnits } from '@/hooks/useUnits';
 import { usePageTitle } from '@/hooks/usePageTitle';
+import { useRangeState } from '@/hooks/useRangeState';
 import { INTERVALS } from '@/lib/constants';
 import { convertDistanceFromSI, convertSpeedFromSI, convertTempFromSI } from '@/lib/unitConversion';
 import {
@@ -122,15 +123,14 @@ export default function DrivingDynamicsPage() {
     [tempUnit],
   );
 
-  /* ---- date filter (page-scoped: used by SpeedGear + DriveAnalytics) ---- */
-  const [startDate, setStartDate] = useState(() => {
-    const d = new Date();
-    d.setDate(d.getDate() - 30);
-    return d.toISOString().slice(0, 10);
+  /* ---- shared date filter (used by SpeedGear + DriveAnalytics) ---- */
+  const {
+    start: startDate,
+    end: endDate,
+    setRange,
+  } = useRangeState({
+    persistKey: 'driving-dynamics.range',
   });
-  const [endDate, setEndDate] = useState(
-    () => new Date().toISOString().slice(0, 10),
-  );
 
   /* ---- filtered drives ---- */
   const filteredDrives = useMemo(() => {
@@ -226,8 +226,7 @@ export default function DrivingDynamicsPage() {
             filteredDrives={filteredDrives}
             startDate={startDate}
             endDate={endDate}
-            onStartDateChange={setStartDate}
-            onEndDateChange={setEndDate}
+            onRangeChange={setRange}
             toDistanceDisplay={toDistanceDisplay}
             toSpeedDisplay={toSpeedDisplay}
             distanceUnit={distanceUnit}
diff --git a/web/src/features/driving/pages/EfficiencyPage.tsx b/web/src/features/driving/pages/EfficiencyPage.tsx
index b8d6bd4ddb..67630f2465 100644
--- a/web/src/features/driving/pages/EfficiencyPage.tsx
+++ b/web/src/features/driving/pages/EfficiencyPage.tsx
@@ -125,7 +125,6 @@ export default function EfficiencyPage() {
 
   const { start: startDate, end: endDate, setRange } = useRangeState({
     persistKey: 'efficiency.range',
-    defaultPresetId: '30d',
   });
 
   /* ---- Filtered drives ---- */
diff --git a/web/src/features/driving/pages/RouteEfficiencyPage.tsx b/web/src/features/driving/pages/RouteEfficiencyPage.tsx
index 459e373621..98892c556e 100644
--- a/web/src/features/driving/pages/RouteEfficiencyPage.tsx
+++ b/web/src/features/driving/pages/RouteEfficiencyPage.tsx
@@ -33,7 +33,6 @@ export default function RouteEfficiencyPage() {
 
   const { start: startDate, end: endDate, setRange } = useRangeState({
     persistKey: 'route-efficiency.range',
-    defaultPresetId: '30d',
   });
 
   const routeQuery = useRouteEfficiency(vehicleIdStr, startDate, endDate);
diff --git a/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx b/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
index 7f30914c49..57e4f17989 100644
--- a/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
+++ b/web/src/features/maps/components/charging-places/PlaceDetailPanel.test.tsx
@@ -218,6 +218,17 @@ describe('PlaceDetailPanel — header', () => {
     expect(screen.getByText('Unnamed place')).toBeInTheDocument();
   });
 
+  it('stacks the place-name label and editor using the same field rhythm as Category', () => {
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+
+    const label = screen.getByText('Place name');
+    const editor = screen.getByRole('button', { name: 'Rename Home' });
+
+    expect(label).toHaveClass('block');
+    expect(label.parentElement).toHaveClass('space-y-1');
+    expect(editor.parentElement).toHaveClass('min-h-10', 'items-center');
+  });
+
   it('renames the place through the canonical geofence mutation', async () => {
     render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
 
@@ -384,6 +395,62 @@ describe('PlaceDetailPanel — rate selection', () => {
     expect(screen.getByTestId('stub-preview-apply')).toHaveTextContent('rate=2');
   });
 
+  it('scrolls and focuses the pricing preview when a rate is selected', () => {
+    mockedRates.mockReturnValue({
+      data: [
+        makeRate({ id: 1, effective_to: '2026-08-27T00:00:00Z' }),
+        makeRate({ id: 2, effective_to: null }),
+      ],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    const requestAnimationFrameSpy = vi
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((callback) => {
+        callback(0);
+        return 1;
+      });
+
+    render(<PlaceDetailPanel place={makePlace()} onClose={vi.fn()} />);
+    const dialog = screen.getByRole('dialog');
+    const scrollBody = dialog.querySelector<HTMLElement>('[data-modal-scroll-body="true"]');
+    const previewRegion = screen.getByRole('region', { name: 'Session pricing preview' });
+    expect(scrollBody).not.toBeNull();
+
+    const scrollTo = vi.fn();
+    Object.defineProperty(scrollBody, 'scrollTop', { configurable: true, value: 20 });
+    Object.defineProperty(scrollBody, 'scrollTo', { configurable: true, value: scrollTo });
+    vi.spyOn(scrollBody as HTMLElement, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 100,
+      top: 100,
+      right: 600,
+      bottom: 700,
+      left: 0,
+      width: 600,
+      height: 600,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(previewRegion, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 500,
+      top: 500,
+      right: 600,
+      bottom: 700,
+      left: 0,
+      width: 600,
+      height: 200,
+      toJSON: () => ({}),
+    });
+
+    fireEvent.click(screen.getByText('stub-select-second-rate'));
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 404, behavior: 'smooth' });
+    expect(document.activeElement).toBe(previewRegion);
+    requestAnimationFrameSpy.mockRestore();
+  });
+
   it('wires RateHistoryPanel\'s onDelete to the delete mutation with {geofenceId, rateId}', () => {
     mockedRates.mockReturnValue({
       data: [makeRate({ id: 3 })],
diff --git a/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx b/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
index 94481781f6..82bafb682e 100644
--- a/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
+++ b/web/src/features/maps/components/charging-places/PlaceDetailPanel.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Archive, ArchiveRestore, CheckCircle2 } from 'lucide-react';
 
-import { Modal, Button, Tabs, Badge, Text, EditableText, Label, Select } from '@/components/ui';
+import { Modal, Button, Tabs, Badge, Text, EditableText, Select } from '@/components/ui';
 import {
   useGeofenceRates,
   useDeleteGeofenceRate,
@@ -56,13 +56,31 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
   const markReviewed = useMarkGeofenceReviewed();
   const rename = useRenameGeofence();
   const updateCategory = useUpdateGeofenceCategory();
+  const scrollToPreview = useCallback(() => {
+    const target = previewPanelRef.current;
+    if (!target) return;
+
+    const reduceMotion =
+      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+    const behavior: ScrollBehavior = reduceMotion ? 'auto' : 'smooth';
+    const scrollBody = target.closest<HTMLElement>('[data-modal-scroll-body="true"]');
+
+    if (scrollBody && typeof scrollBody.scrollTo === 'function') {
+      const targetTop =
+        scrollBody.scrollTop +
+        target.getBoundingClientRect().top -
+        scrollBody.getBoundingClientRect().top -
+        16;
+      scrollBody.scrollTo({ top: Math.max(0, targetTop), behavior });
+    } else {
+      target.scrollIntoView?.({ behavior, block: 'start' });
+    }
+    target.focus({ preventScroll: true });
+  }, []);
   const handleSelectRate = useCallback((rate: GeofenceRate) => {
     setSelectedRate(rate);
-    queueMicrotask(() => {
-      previewPanelRef.current?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
-      previewPanelRef.current?.focus?.({ preventScroll: true });
-    });
-  }, []);
+    requestAnimationFrame(scrollToPreview);
+  }, [scrollToPreview]);
 
   // Reset per-place UI state whenever a different place opens, and default
   // to the rate active now. A future open-ended schedule is only a fallback
@@ -150,23 +168,28 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
         )}
       </div>
 
-      <div className="mb-4 grid gap-4 sm:grid-cols-2">
-        <div>
-          <Label>{t('chargingPlaces.detail.placeName', 'Place name')}</Label>
-          <EditableText
-            value={place.name}
-            variant="heading"
-            maxLength={120}
-            ariaLabel={t('chargingPlaces.detail.rename', 'Rename {{name}}', { name: place.name })}
-            validate={(next) =>
-              next.length > 120
-                ? t('geofences.error.nameTooLong', 'Max 120 characters')
-                : null
-            }
-            onSave={async (name) => {
-              await rename.mutateAsync({ geofenceId: place.id, name });
-            }}
-          />
+      <div className="mb-4 grid items-start gap-4 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Text as="span" size="sm" weight="medium" color="secondary" className="block">
+            {t('chargingPlaces.detail.placeName', 'Place name')}
+          </Text>
+          <div className="flex min-h-10 items-center">
+            <EditableText
+              value={place.name}
+              variant="heading"
+              maxLength={120}
+              className="max-w-full"
+              ariaLabel={t('chargingPlaces.detail.rename', 'Rename {{name}}', { name: place.name })}
+              validate={(next) =>
+                next.length > 120
+                  ? t('geofences.error.nameTooLong', 'Max 120 characters')
+                  : null
+              }
+              onSave={async (name) => {
+                await rename.mutateAsync({ geofenceId: place.id, name });
+              }}
+            />
+          </div>
         </div>
         <Select
           label={t('chargingPlaces.detail.category', 'Category')}
@@ -214,7 +237,16 @@ export function PlaceDetailPanel({ place, onClose }: PlaceDetailPanelProps) {
             onDelete={(r) => deleteRate.mutate({ geofenceId: place.id, rateId: r.id })}
             deletePending={deleteRate.isPending}
           />
-          <div ref={previewPanelRef} tabIndex={-1} className="scroll-mt-4 outline-none">
+          <div
+            ref={previewPanelRef}
+            role="region"
+            aria-label={t(
+              'chargingPlaces.previewApply.regionLabel',
+              'Session pricing preview',
+            )}
+            tabIndex={-1}
+            className="scroll-mt-4 rounded-xl outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:ring-offset-2 focus:ring-offset-[var(--bg-app)]"
+          >
             <PreviewApplyPanel geofenceId={place.id} rate={selectedRate} />
           </div>
         </div>
diff --git a/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx b/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
index e23f48a873..009f3dab32 100644
--- a/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
+++ b/web/src/features/maps/components/charging-places/PreviewApplyPanel.test.tsx
@@ -128,7 +128,9 @@ describe('PreviewApplyPanel — no rate selected', () => {
     renderPanel({ geofenceId: 7, rate: null });
 
     expect(
-      screen.getByText('Select a rate from the history table above to preview its impact.'),
+      screen.getByText(
+        'Choose Preview sessions on a rate to see affected charging sessions and estimated cost.',
+      ),
     ).toBeInTheDocument();
     expect(screen.queryByText('Matched')).not.toBeInTheDocument();
   });
@@ -146,6 +148,11 @@ describe('PreviewApplyPanel — preview metrics', () => {
     expect(screen.getByText('4')).toBeInTheDocument();
     expect(screen.getByText('60.0 kWh')).toBeInTheDocument();
     expect(screen.getByText('$7.20')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'This preview is read-only. It shows matching historical sessions and estimated cost; nothing changes until you choose Apply.',
+      ),
+    ).toBeInTheDocument();
   });
 
   it('shows a loading skeleton while the preview query is in flight', () => {
diff --git a/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx b/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
index dd550d4e56..0460bc3e59 100644
--- a/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
+++ b/web/src/features/maps/components/charging-places/PreviewApplyPanel.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Calculator, Play, RefreshCw } from 'lucide-react';
 
-import { GlassPanel, PanelTitle, Button, Input, ConfirmDialog, Badge } from '@/components/ui';
+import { GlassPanel, PanelTitle, Button, Input, ConfirmDialog, Badge, Text } from '@/components/ui';
 import { Skeleton, EmptyState, QueryError, InlineCallout } from '@/components/feedback';
 import { MetricTile } from '@/components/data-display';
 import { useSettings } from '@/hooks/useSettings';
@@ -87,14 +87,14 @@ export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps)
       <GlassPanel className="p-4 sm:p-5">
         <PanelTitle className="mb-3 flex items-center gap-2">
           <Calculator className="h-4 w-4 text-violet-300" aria-hidden="true" />
-          {t('chargingPlaces.previewApply.title', 'Preview & Apply')}
+          {t('chargingPlaces.previewApply.title', 'Session Pricing Preview')}
         </PanelTitle>
         <>
           {/* no-action: rate selection is provided directly above this panel in the same workspace. */}
           <EmptyState
             message={t(
               'chargingPlaces.previewApply.selectRate',
-              'Select a rate from the history table above to preview its impact.',
+              'Choose Preview sessions on a rate to see affected charging sessions and estimated cost.',
             )}
           />
         </>
@@ -109,7 +109,7 @@ export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps)
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
         <PanelTitle className="flex items-center gap-2">
           <Calculator className="h-4 w-4 text-violet-300" aria-hidden="true" />
-          {t('chargingPlaces.previewApply.title', 'Preview & Apply')}
+          {t('chargingPlaces.previewApply.title', 'Session Pricing Preview')}
           <Badge variant="neutral" size="sm">
             {formatRatePerWh(rate.rate_per_wh, rate.currency, locale)} / {t('chargingPlaces.kwh', 'kWh')}
           </Badge>
@@ -124,6 +124,12 @@ export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps)
           {t('chargingPlaces.previewApply.refresh', 'Refresh preview')}
         </Button>
       </div>
+      <Text as="p" size="sm" color="muted" className="mb-3">
+        {t(
+          'chargingPlaces.previewApply.help',
+          'This preview is read-only. It shows matching historical sessions and estimated cost; nothing changes until you choose Apply.',
+        )}
+      </Text>
 
       <div className="mb-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
         <Input
@@ -169,6 +175,12 @@ export function PreviewApplyPanel({ geofenceId, rate }: PreviewApplyPanelProps)
               label={t('chargingPlaces.previewApply.estimatedCost', 'Estimated Cost')}
             />
           </div>
+          <Text as="p" size="xs" color="muted" className="mt-3">
+            {t(
+              'chargingPlaces.previewApply.metricsHelp',
+              'Matched sessions are in this place and rate period. Eligible sessions can be priced; protected sessions keep their existing cost.',
+            )}
+          </Text>
           {p?.matched_sessions === 0 && (
             <InlineCallout variant="warning" className="mt-3">
               {t(
diff --git a/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx b/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
index 9a01dfcd7b..195cdec043 100644
--- a/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
+++ b/web/src/features/maps/components/charging-places/RateHistoryPanel.test.tsx
@@ -8,8 +8,8 @@
  *   2. Renders effective-from/to, rate/kWh, currency badge per row; the
  *      interval containing now shows "Current", while a future open-ended
  *      row shows "Scheduled".
- *   3. Selecting a row for preview highlights it (primary variant) and
- *      calls `onSelectRate`.
+ *   3. Preview sessions remains an action for selected/unselected rows,
+ *      highlights the selected row, and calls `onSelectRate`.
  *   4. Only future schedules can be cancelled, gated behind confirmation.
  */
 import { describe, it, expect, vi, beforeEach } from 'vitest';
@@ -134,24 +134,34 @@ describe('RateHistoryPanel — rows', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('highlights the selected row and labels its impact as shown', () => {
+  it('keeps Preview sessions actionable while highlighting the selected row', () => {
     const rate = makeRate({ id: 5 });
     renderPanel({ rates: [rate], selectedRateId: 5 });
 
-    const btn = screen.getByRole('button', { name: 'Impact shown' });
+    const btn = screen.getByRole('button', { name: 'Preview sessions' });
     // Button component maps variant to a class; "primary" is the
     // selected-row highlight this panel switches to (see component source).
     expect(btn.className).toMatch(/primary|bg-/);
   });
 
-  it('invokes onSelectRate with the exact rate when Review impact is clicked', () => {
+  it('invokes onSelectRate with the exact rate when Preview sessions is clicked', () => {
     const onSelectRate = vi.fn();
     const rate = makeRate({ id: 9 });
     renderPanel({ rates: [rate], onSelectRate });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Review impact' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Preview sessions' }));
     expect(onSelectRate).toHaveBeenCalledWith(rate);
   });
+
+  it('explains that previewing does not apply any changes', () => {
+    renderPanel({ rates: [makeRate()] });
+
+    expect(
+      screen.getByText(
+        'Preview sessions shows which historical charges match a rate and what would change before anything is applied.',
+      ),
+    ).toBeInTheDocument();
+  });
 });
 
 describe('RateHistoryPanel — delete flow', () => {
diff --git a/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx b/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
index f01accd7e0..ab01a57f30 100644
--- a/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
+++ b/web/src/features/maps/components/charging-places/RateHistoryPanel.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { History, Trash2 } from 'lucide-react';
+import { History, ListChecks, Trash2 } from 'lucide-react';
 
 import { GlassPanel, PanelTitle, Badge, Button, Text, DataTable, useSortToggle, ConfirmDialog, type Column } from '@/components/ui';
 import { Skeleton, EmptyState, QueryError } from '@/components/feedback';
@@ -130,11 +130,10 @@ export function RateHistoryPanel({
             <Button
               size="sm"
               variant={selectedRateId === r.id ? 'primary' : 'secondary'}
+              icon={<ListChecks className="h-3.5 w-3.5" aria-hidden="true" />}
               onClick={() => onSelectRate(r)}
             >
-              {selectedRateId === r.id
-                ? t('chargingPlaces.rateHistory.impactShown', 'Impact shown')
-                : t('chargingPlaces.rateHistory.reviewImpact', 'Review impact')}
+              {t('chargingPlaces.rateHistory.previewSessions', 'Preview sessions')}
             </Button>
             {Date.parse(r.effective_from) > Date.now() && (
               <Button
@@ -160,6 +159,12 @@ export function RateHistoryPanel({
         <History className="h-4 w-4 text-cyan-300" aria-hidden="true" />
         {t('chargingPlaces.rateHistory.title', 'Rate History')}
       </PanelTitle>
+      <Text as="p" size="sm" color="muted" className="mb-3">
+        {t(
+          'chargingPlaces.rateHistory.previewHelp',
+          'Preview sessions shows which historical charges match a rate and what would change before anything is applied.',
+        )}
+      </Text>
 
       {error ? (
         <QueryError error={error} onRetry={onRetry} resourceName={t('chargingPlaces.rateHistory.title', 'Rate History')} />
diff --git a/web/src/features/notifications/components/InboxBody.test.tsx b/web/src/features/notifications/components/InboxBody.test.tsx
index 30ae5ea019..e812441984 100644
--- a/web/src/features/notifications/components/InboxBody.test.tsx
+++ b/web/src/features/notifications/components/InboxBody.test.tsx
@@ -504,6 +504,29 @@ describe('InboxBody — mark all read', () => {
 /* ── 8. URL-backed filters ────────────────────────────── */
 
 describe('InboxBody — URL filters', () => {
+  it('applies a visible seven-day range when the URL has no dates', async () => {
+    installRequest({ logs: () => Promise.resolve([]) });
+    renderInbox({ route: '/notifications/inbox?view=flat' });
+
+    await waitFor(() => expect(flatCalls().length).toBeGreaterThanOrEqual(1));
+    const params = new URL(
+      String(flatCalls()[0][0]),
+      'http://teslasync.local',
+    ).searchParams;
+    const from = params.get('from');
+    const to = params.get('to');
+
+    expect(from).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    expect(to).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    const inclusiveDays =
+      Math.round(
+        (Date.parse(`${to}T00:00:00Z`) - Date.parse(`${from}T00:00:00Z`)) /
+          86_400_000,
+      ) + 1;
+    expect(inclusiveDays).toBe(7);
+    expect(screen.getByText('Last 7 days')).toBeInTheDocument();
+  });
+
   it('threads URL filters into the request as snake_case params without the /api/v1 prefix', async () => {
     installRequest({ logs: () => Promise.resolve([]) });
     renderInbox({ route: '/notifications/inbox?view=flat&severity=critical&vehicle_id=1' });
diff --git a/web/src/features/notifications/components/InboxBody.tsx b/web/src/features/notifications/components/InboxBody.tsx
index 8444a7369c..4f84274722 100644
--- a/web/src/features/notifications/components/InboxBody.tsx
+++ b/web/src/features/notifications/components/InboxBody.tsx
@@ -36,7 +36,13 @@ import {
   ExternalLink,
 } from 'lucide-react';
 import { cn } from '@/lib/cn';
-import { Button, GlassPanel, useContextMenu, type ContextMenuItem } from '@/components/ui';
+import {
+  Button,
+  Checkbox,
+  GlassPanel,
+  useContextMenu,
+  type ContextMenuItem,
+} from '@/components/ui';
 import { BulkActionsToolbar, type BulkAction } from '@/components/data-display';
 import { EmptyState } from '@/components/feedback/EmptyState';
 import { Skeleton } from '@/components/feedback/Skeleton';
@@ -44,6 +50,7 @@ import { useToast } from '@/components/feedback/Toast';
 import { FadeIn } from '@/components/motion/FadeIn';
 import { useBulkSelection } from '@/hooks/useBulkSelection';
 import { useAnnouncer } from '@/hooks/useAnnouncer';
+import { useRangeState } from '@/hooks/useRangeState';
 import { useUrlEnum, useUrlString, useUrlArray, useUrlBatch } from '@/hooks/useUrlState';
 import {
   useNotificationLogs,
@@ -149,8 +156,15 @@ export function InboxBody({ archived, vehicles, rules }: InboxBodyProps) {
   const [ruleIdsRaw] = useUrlArray('rule_id');
   const [search] = useUrlString('q', '');
   const [readState] = useUrlEnum<ReadValue>('read', READ_VALUES, 'all');
-  const [from] = useUrlString('from', '');
-  const [to] = useUrlString('to', '');
+  const {
+    start: from,
+    end: to,
+    setRange: setDateRange,
+    setRangeWithUrlUpdates,
+    resetWithUrlUpdates: resetRangeWithUrlUpdates,
+  } = useRangeState({
+    persistKey: 'notifications.inbox.range',
+  });
   // View mode is URL-backed too so a deep link can
   // express "Inbox, grouped" vs "Inbox, flat" independent of filter state.
   const [view, setView] = useUrlEnum<ViewValue>('view', VIEW_VALUES, 'grouped');
@@ -193,16 +207,34 @@ export function InboxBody({ archived, vehicles, rules }: InboxBodyProps) {
     // updates whenever a saved view applied multi-key filters.
     const readValue =
       next.read === undefined ? null : next.read ? 'read' : 'unread';
-    setFiltersBatch({
+    const urlUpdates = {
       severity: (next.severity ?? []).join(',') || null,
       vehicle_id: (next.vehicle_id ?? []).map(String).join(',') || null,
       rule_id: (next.rule_id ?? []).map(String).join(',') || null,
       q: next.q ?? null,
-      from: next.from ?? null,
-      to: next.to ?? null,
       read: readValue,
-    });
-  }, [setFiltersBatch]);
+    };
+    const nextFrom = next.from?.slice(0, 10);
+    const nextTo = next.to?.slice(0, 10);
+    if (!nextFrom || !nextTo) {
+      resetRangeWithUrlUpdates(urlUpdates);
+      return;
+    }
+    if (nextFrom !== from || nextTo !== to) {
+      setRangeWithUrlUpdates(
+        { start: nextFrom, end: nextTo },
+        urlUpdates,
+      );
+      return;
+    }
+    setFiltersBatch(urlUpdates);
+  }, [
+    from,
+    resetRangeWithUrlUpdates,
+    setFiltersBatch,
+    setRangeWithUrlUpdates,
+    to,
+  ]);
 
   // Inbox auto-categorization apply callback.
   // The AI panel's "Apply categories as filter" button passes a
@@ -514,6 +546,7 @@ export function InboxBody({ archived, vehicles, rules }: InboxBodyProps) {
         <NotificationFilterBar
           filters={filters}
           onChange={handleFiltersChange}
+          onRangeChange={setDateRange}
           vehicles={vehicles}
           rules={rules}
         />
@@ -546,15 +579,11 @@ export function InboxBody({ archived, vehicles, rules }: InboxBodyProps) {
       <GlassPanel className="p-3 sm:p-4">
         <div className="mb-2 flex items-center gap-3 px-1 pb-2 border-b border-white/[0.04]">
           {!isGrouped && (
-            <input
-              type="checkbox"
-              ref={el => {
-                if (el) el.indeterminate = someVisibleSelected;
-              }}
+            <Checkbox
               checked={allVisibleSelected}
-              onChange={e => (e.target.checked ? selectAllVisible() : clearSelection())}
+              indeterminate={someVisibleSelected}
+              onChange={checked => (checked ? selectAllVisible() : clearSelection())}
               aria-label={t('notifications.inbox.selectAll', 'Select all visible')}
-              className="h-4 w-4 cursor-pointer rounded border-[var(--border-strong)] bg-white/[0.04] text-cyan-500 focus:ring-2 focus:ring-cyan-500"
             />
           )}
           <span className="text-xs text-[var(--text-muted)]">
@@ -568,13 +597,15 @@ export function InboxBody({ archived, vehicles, rules }: InboxBodyProps) {
               role="group"
               aria-label={t('notifications.view.label', 'View')}
             >
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="sm"
                 onClick={() => setView('grouped')}
                 aria-pressed={view === 'grouped'}
                 aria-label={t('notifications.view.grouped', 'Grouped')}
                 className={cn(
-                  'inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs',
+                  'h-auto rounded-full px-2 py-1',
                   view === 'grouped'
                     ? 'bg-cyan-400/15 text-cyan-200'
                     : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]',
@@ -585,14 +616,16 @@ export function InboxBody({ archived, vehicles, rules }: InboxBodyProps) {
                 <span className="hidden sm:inline">
                   {t('notifications.view.grouped', 'Grouped')}
                 </span>
-              </button>
-              <button
+              </Button>
+              <Button
                 type="button"
+                variant="ghost"
+                size="sm"
                 onClick={() => setView('flat')}
                 aria-pressed={view === 'flat'}
                 aria-label={t('notifications.view.flat', 'Flat')}
                 className={cn(
-                  'inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs',
+                  'h-auto rounded-full px-2 py-1',
                   view === 'flat'
                     ? 'bg-cyan-400/15 text-cyan-200'
                     : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]',
@@ -603,7 +636,7 @@ export function InboxBody({ archived, vehicles, rules }: InboxBodyProps) {
                 <span className="hidden sm:inline">
                   {t('notifications.view.flat', 'Flat')}
                 </span>
-              </button>
+              </Button>
             </div>
           )}
           {!archived && !isGrouped && unreadCount > 0 && (
diff --git a/web/src/features/notifications/components/NotificationFilterBar.test.tsx b/web/src/features/notifications/components/NotificationFilterBar.test.tsx
index 170034ce16..9c00b4480f 100644
--- a/web/src/features/notifications/components/NotificationFilterBar.test.tsx
+++ b/web/src/features/notifications/components/NotificationFilterBar.test.tsx
@@ -5,18 +5,17 @@
  * and receives a complete next-state object on every change. These tests drive
  * the real sub-components (severity chips, vehicle/rule <Select>, the debounced
  * SearchInput, ActiveFilterChips) and stub only the heavy RangePicker popover
- * so the from/to commit path can be exercised deterministically.
+ * so the shared range commit path can be exercised deterministically.
  *
  * Coverage:
  *   1. Severity chips — labelled group, pressed state, add / remove / clear-last.
  *   2. Vehicle + rule selects — value reflection, emit on change, "All" clears,
  *      #id fallback label for nameless vehicles.
  *   3. SearchInput — debounced emit, whitespace-only treated as cleared.
- *   4. RangePicker — from+to committed atomically in ONE onChange (regression:
- *      two sequential patches raced the controlled merge and dropped `from`),
- *      reset clears both, and the ISO value is sliced to YYYY-MM-DD.
+ *   4. RangePicker — range + preset metadata are forwarded atomically, and
+ *      the ISO value is sliced to YYYY-MM-DD.
  *   5. ActiveFilterChips — render, single-chip removal preserves siblings,
- *      Clear-all wipes every key.
+ *      and Clear-all preserves the shared date preference.
  *   6. Null-safety / a11y — empty filters render no chips and no pressed chip;
  *      an unknown vehicle id degrades to a #id chip label.
  */
@@ -36,12 +35,12 @@ vi.mock('@/components/forms', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/components/forms')>();
   const MockRangePicker = ({ value, onChange }: RangePickerProps) => (
     <div data-testid="range-picker" data-start={value.start} data-end={value.end}>
-      <button type="button" onClick={() => onChange({ start: '2024-03-01', end: '2024-03-31' })}>
+      <button type="button" onClick={() => onChange(
+        { start: '2024-03-01', end: '2024-03-31' },
+        '30d',
+      )}>
         commit-range
       </button>
-      <button type="button" onClick={() => onChange({ start: '', end: '' })}>
-        reset-range
-      </button>
     </div>
   );
   return { ...actual, RangePicker: MockRangePicker };
@@ -60,15 +59,17 @@ const RULES: AlertRule[] = [rule(10, 'Tire Pressure Low'), rule(20, 'Battery Col
 
 function renderBar(overrides: Omit<Partial<NotificationFilterBarProps>, 'onChange'> = {}) {
   const onChange = vi.fn();
+  const onRangeChange = vi.fn();
   render(
     <NotificationFilterBar
       filters={overrides.filters ?? {}}
       onChange={onChange}
+      onRangeChange={overrides.onRangeChange ?? onRangeChange}
       vehicles={overrides.vehicles ?? VEHICLES}
       rules={overrides.rules ?? RULES}
     />,
   );
-  return { onChange };
+  return { onChange, onRangeChange };
 }
 
 describe('NotificationFilterBar — severity chips', () => {
@@ -170,31 +171,17 @@ describe('NotificationFilterBar — search', () => {
   });
 });
 
-describe('NotificationFilterBar — date range (atomic from/to)', () => {
-  it('commits from AND to in a single onChange when the range picker fires', () => {
-    const { onChange } = renderBar({ filters: {} });
+describe('NotificationFilterBar — shared date range', () => {
+  it('forwards the range and preset metadata atomically', () => {
+    const { onChange, onRangeChange } = renderBar({ filters: {} });
 
     fireEvent.click(screen.getByRole('button', { name: 'commit-range' }));
 
-    // Regression guard: the old code emitted two sequential patches (setFrom
-    // then setTo) built from the same stale `filters` closure, so the second
-    // clobbered the first and `from` was lost. It must now be exactly one
-    // patch carrying both bounds.
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const patch = onChange.mock.calls[0][0];
-    expect(patch.from).toBe('2024-03-01');
-    expect(patch.to).toBe('2024-03-31');
-  });
-
-  it('clears both from and to in a single onChange when the range is reset', () => {
-    const { onChange } = renderBar({ filters: { from: '2024-03-01', to: '2024-03-31' } });
-
-    fireEvent.click(screen.getByRole('button', { name: 'reset-range' }));
-
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const patch = onChange.mock.calls[0][0];
-    expect(patch.from).toBeUndefined();
-    expect(patch.to).toBeUndefined();
+    expect(onRangeChange).toHaveBeenCalledWith(
+      { start: '2024-03-01', end: '2024-03-31' },
+      '30d',
+    );
+    expect(onChange).not.toHaveBeenCalled();
   });
 
   it('passes the ISO range down sliced to YYYY-MM-DD', () => {
@@ -227,7 +214,7 @@ describe('NotificationFilterBar — active filter chips', () => {
     expect(patch.q).toBe('brake');
   });
 
-  it('wipes every filter key via Clear all', () => {
+  it('clears optional filters while preserving the shared date range', () => {
     const { onChange } = renderBar({
       filters: {
         severity: ['warn'],
@@ -247,8 +234,8 @@ describe('NotificationFilterBar — active filter chips', () => {
     expect(patch.vehicle_id).toBeUndefined();
     expect(patch.rule_id).toBeUndefined();
     expect(patch.q).toBeUndefined();
-    expect(patch.from).toBeUndefined();
-    expect(patch.to).toBeUndefined();
+    expect(patch.from).toBe('2024-03-01');
+    expect(patch.to).toBe('2024-03-31');
   });
 
   it('falls back to a #id chip when the filtered vehicle is unknown', () => {
diff --git a/web/src/features/notifications/components/NotificationFilterBar.tsx b/web/src/features/notifications/components/NotificationFilterBar.tsx
index a128799cab..cff4bc7c4c 100644
--- a/web/src/features/notifications/components/NotificationFilterBar.tsx
+++ b/web/src/features/notifications/components/NotificationFilterBar.tsx
@@ -16,8 +16,15 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertOctagon, AlertTriangle, Info } from 'lucide-react';
 import { cn } from '@/lib/cn';
-import { Select } from '@/components/ui';
-import { FilterBar, SearchInput, RangePicker, ActiveFilterChips, type FilterChipDescriptor } from '@/components/forms';
+import { Button, Select } from '@/components/ui';
+import {
+  FilterBar,
+  SearchInput,
+  RangePicker,
+  ActiveFilterChips,
+  type FilterChipDescriptor,
+  type RangePickerProps,
+} from '@/components/forms';
 import type { NotificationFilters } from '@/api/hooks/useNotifications';
 import type { Vehicle, AlertRule } from '@/api/types';
 
@@ -32,6 +39,7 @@ type Severity = (typeof SEVERITY_OPTIONS)[number]['value'];
 export interface NotificationFilterBarProps {
   filters: NotificationFilters;
   onChange: (next: NotificationFilters) => void;
+  onRangeChange: RangePickerProps['onChange'];
   vehicles: Vehicle[];
   rules: AlertRule[];
 }
@@ -39,6 +47,7 @@ export interface NotificationFilterBarProps {
 export function NotificationFilterBar({
   filters,
   onChange,
+  onRangeChange,
   vehicles,
   rules,
 }: NotificationFilterBarProps) {
@@ -78,18 +87,6 @@ export function NotificationFilterBar({
     [filters, onChange],
   );
 
-  // `from` and `to` are committed together in a single patch. Emitting them
-  // as two sequential onChange calls raced the parent's controlled merge:
-  // the second call, built from the pre-update `filters` closure, overwrote
-  // the first and silently dropped the `from` bound whenever a range (preset
-  // or custom) set both ends at once.
-  const setRange = useCallback(
-    (start: string, end: string) => {
-      onChange({ ...filters, from: start || undefined, to: end || undefined });
-    },
-    [filters, onChange],
-  );
-
   const selectedSeverities = useMemo(
     () => new Set<Severity>(filters.severity ?? []),
     [filters.severity],
@@ -163,22 +160,6 @@ export function NotificationFilterBar({
         onRemove: () => onChange({ ...filters, q: undefined }),
       });
     }
-    if (filters.from) {
-      chips.push({
-        key: 'from',
-        label: t('notifications.inbox.filter.from', 'From'),
-        value: filters.from.slice(0, 10),
-        onRemove: () => onChange({ ...filters, from: undefined }),
-      });
-    }
-    if (filters.to) {
-      chips.push({
-        key: 'to',
-        label: t('notifications.inbox.filter.to', 'To'),
-        value: filters.to.slice(0, 10),
-        onRemove: () => onChange({ ...filters, to: undefined }),
-      });
-    }
     return chips;
   }, [filters, vehicles, rules, onChange, t]);
 
@@ -189,8 +170,6 @@ export function NotificationFilterBar({
       vehicle_id: undefined,
       rule_id: undefined,
       q: undefined,
-      from: undefined,
-      to: undefined,
     });
   }, [filters, onChange]);
 
@@ -206,13 +185,15 @@ export function NotificationFilterBar({
             const active = selectedSeverities.has(opt.value);
             const Icon = opt.Icon;
             return (
-              <button
+              <Button
                 key={opt.value}
                 type="button"
+                variant="ghost"
+                size="sm"
                 onClick={() => toggleSeverity(opt.value)}
                 aria-pressed={active}
                 className={cn(
-                  'inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors',
+                  'h-auto gap-1 rounded-full border px-2.5 py-1',
                   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500',
                   active
                     ? cn(opt.bg, opt.text, 'border-transparent ring-1', opt.ring)
@@ -221,7 +202,7 @@ export function NotificationFilterBar({
               >
                 <Icon className="h-3 w-3" aria-hidden="true" />
                 <span>{t(`notifications.inbox.filter.severity.${opt.value}`, opt.label)}</span>
-              </button>
+              </Button>
             );
           })}
         </div>
@@ -253,7 +234,7 @@ export function NotificationFilterBar({
 
       <RangePicker
         value={rangeValue}
-        onChange={(r) => setRange(r.start, r.end)}
+        onChange={onRangeChange}
       />
 
       <ActiveFilterChips filters={activeFilterChips} onClearAll={handleClearAll} />
diff --git a/web/src/features/sharing/pages/ShareCardPage.tsx b/web/src/features/sharing/pages/ShareCardPage.tsx
index 1f4eea2db4..131b2aa843 100644
--- a/web/src/features/sharing/pages/ShareCardPage.tsx
+++ b/web/src/features/sharing/pages/ShareCardPage.tsx
@@ -44,7 +44,6 @@ export default function ShareCardPage() {
     setRange,
   } = useRangeState({
     persistKey: 'share-card.range',
-    defaultPresetId: '30d',
     timezone,
   });
   const drivesQuery = useDrives(
diff --git a/web/src/features/system/pages/MyActivityPage.tsx b/web/src/features/system/pages/MyActivityPage.tsx
index 82cf346ce9..4e45fc1063 100644
--- a/web/src/features/system/pages/MyActivityPage.tsx
+++ b/web/src/features/system/pages/MyActivityPage.tsx
@@ -43,7 +43,6 @@ export default function MyActivityPage() {
 
   const { start, end, setRange } = useRangeState({
     persistKey: 'my-activity.range',
-    defaultPresetId: '30d',
     fromKey: 'start',
     toKey: 'end',
   });
diff --git a/web/src/features/vehicle-systems/pages/TirePressurePage.tsx b/web/src/features/vehicle-systems/pages/TirePressurePage.tsx
index d1b68f6dc7..d317f6c3fb 100644
--- a/web/src/features/vehicle-systems/pages/TirePressurePage.tsx
+++ b/web/src/features/vehicle-systems/pages/TirePressurePage.tsx
@@ -260,7 +260,6 @@ export default function TirePressurePage() {
   const { vehicleId: activeVehicleId } = useSelectedVehicle();
   const { start, end, setRange } = useRangeState({
     persistKey: 'tire-pressure.range',
-    defaultPresetId: '30d',
   });
 
   /* ---- API queries ---- */
diff --git a/web/src/features/vehicles/pages/ParkingAnalyticsPage.tsx b/web/src/features/vehicles/pages/ParkingAnalyticsPage.tsx
index ca8afdcc62..ad2de1a467 100644
--- a/web/src/features/vehicles/pages/ParkingAnalyticsPage.tsx
+++ b/web/src/features/vehicles/pages/ParkingAnalyticsPage.tsx
@@ -39,7 +39,6 @@ export default function ParkingAnalyticsPage() {
   const [pageNowMs] = useState(() => Date.now());
   const { start, end, setRange } = useRangeState({
     persistKey: 'parking-analytics.range',
-    defaultPresetId: '30d',
   });
 
   const drivesQuery = useDrives(vehicleIdStr, {
diff --git a/web/src/hooks/__tests__/useRangeState.test.tsx b/web/src/hooks/__tests__/useRangeState.test.tsx
index 2c634fedb7..7b51020f00 100644
--- a/web/src/hooks/__tests__/useRangeState.test.tsx
+++ b/web/src/hooks/__tests__/useRangeState.test.tsx
@@ -1,9 +1,15 @@
 import { renderHook, act } from '@testing-library/react';
-import { describe, expect, it, beforeEach, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { MemoryRouter, Routes, Route, useSearchParams } from 'react-router-dom';
 import type { ReactNode } from 'react';
 import { SHARED_RANGE_STORAGE_KEY, useRangeState } from '../useRangeState';
 
+const STORED_PREFERENCE_VERSION = 2;
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
 function withRouter(initialEntries: string[]) {
   return function Wrapper({ children }: { children: ReactNode }) {
     return (
@@ -21,6 +27,20 @@ describe('useRangeState — initialization precedence', () => {
     window.localStorage.clear();
   });
 
+  it('defaults to the last seven inclusive days when options are omitted', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 7, 27, 12));
+
+    const { result } = renderHook(() => useRangeState(), {
+      wrapper: withRouter(['/charging']),
+    });
+
+    expect(result.current.start).toBe('2026-08-21');
+    expect(result.current.end).toBe('2026-08-27');
+    expect(result.current.presetId).toBe('7d');
+    expect(window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY)).toBeNull();
+  });
+
   it('uses URL params when present and valid', () => {
     const { result } = renderHook(() => useRangeState({ defaultPresetId: '7d' }), {
       wrapper: withRouter(['/charging?from=2025-01-01&to=2025-01-31']),
@@ -76,7 +96,11 @@ describe('useRangeState — localStorage persistence', () => {
   it('restores from localStorage when URL is empty', () => {
     window.localStorage.setItem(
       'charging.list.range',
-      JSON.stringify({ start: '2024-06-01', end: '2024-06-30' }),
+      JSON.stringify({
+        version: STORED_PREFERENCE_VERSION,
+        start: '2024-06-01',
+        end: '2024-06-30',
+      }),
     );
     const { result } = renderHook(
       () => useRangeState({ persistKey: 'charging.list.range', defaultPresetId: '30d' }),
@@ -111,7 +135,11 @@ describe('useRangeState — localStorage persistence', () => {
     const stored = JSON.parse(
       window.localStorage.getItem('charging.list.range') ?? '{}',
     );
-    expect(stored).toEqual({ start: '2025-02-01', end: '2025-02-28' });
+    expect(stored).toEqual({
+      version: STORED_PREFERENCE_VERSION,
+      start: '2025-02-01',
+      end: '2025-02-28',
+    });
   });
 
   it('ignores corrupt localStorage data', () => {
@@ -124,31 +152,76 @@ describe('useRangeState — localStorage persistence', () => {
     expect(result.current.start).toMatch(/^\d{4}-\d{2}-\d{2}$/);
   });
 
-  it('inherits the last selection across page-specific storage keys', () => {
+  it('inherits a rolling preset across page-specific storage keys', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 7, 27, 12));
+
+    const firstPage = renderHook(
+      () => useRangeState({ persistKey: 'charging.list.range' }),
+      { wrapper: withRouter(['/charging']) },
+    );
+    act(() => {
+      firstPage.result.current.setPreset('30d');
+    });
+    expect(firstPage.result.current.start).toBe('2026-07-29');
+    expect(firstPage.result.current.end).toBe('2026-08-27');
+    expect(JSON.parse(
+      window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY) ?? '{}',
+    )).toEqual({
+      version: STORED_PREFERENCE_VERSION,
+      start: '2026-07-29',
+      end: '2026-08-27',
+      presetId: '30d',
+    });
+    firstPage.unmount();
+
+    vi.setSystemTime(new Date(2026, 7, 28, 12));
+    const secondPage = renderHook(
+      () => useRangeState({ persistKey: 'drives.list.range' }),
+      { wrapper: withRouter(['/charging']) },
+    );
+    expect(secondPage.result.current.start).toBe('2026-07-30');
+    expect(secondPage.result.current.end).toBe('2026-08-28');
+    expect(secondPage.result.current.presetId).toBe('30d');
+  });
+
+  it('keeps a custom calendar range fixed across pages and days', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 7, 27, 12));
+
     const firstPage = renderHook(
       () => useRangeState({ persistKey: 'charging.list.range' }),
       { wrapper: withRouter(['/charging']) },
     );
     act(() => {
       firstPage.result.current.setRange({
-        start: '2025-02-01',
-        end: '2025-02-28',
+        start: '2026-06-03',
+        end: '2026-06-19',
       });
     });
     firstPage.unmount();
 
+    vi.setSystemTime(new Date(2026, 7, 28, 12));
     const secondPage = renderHook(
       () => useRangeState({ persistKey: 'drives.list.range' }),
       { wrapper: withRouter(['/charging']) },
     );
-    expect(secondPage.result.current.start).toBe('2025-02-01');
-    expect(secondPage.result.current.end).toBe('2025-02-28');
+
+    expect(secondPage.result.current.start).toBe('2026-06-03');
+    expect(secondPage.result.current.end).toBe('2026-06-19');
+    expect(secondPage.result.current.presetId).toBeUndefined();
   });
 
-  it('uses an explicit URL instead of the shared selection', () => {
+  it('uses an explicit URL without replacing the shared selection', () => {
+    const shared = {
+      version: STORED_PREFERENCE_VERSION,
+      start: '2024-06-01',
+      end: '2024-06-30',
+      presetId: '30d',
+    };
     window.localStorage.setItem(
       SHARED_RANGE_STORAGE_KEY,
-      JSON.stringify({ start: '2024-06-01', end: '2024-06-30' }),
+      JSON.stringify(shared),
     );
     const { result } = renderHook(
       () => useRangeState({ persistKey: 'drives.list.range' }),
@@ -158,13 +231,17 @@ describe('useRangeState — localStorage persistence', () => {
     expect(result.current.start).toBe('2025-03-01');
     expect(result.current.end).toBe('2025-03-31');
     expect(JSON.parse(window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY) ?? '{}'))
-      .toEqual({ start: '2025-03-01', end: '2025-03-31' });
+      .toEqual(shared);
   });
 
   it('prefers shared storage over a legacy page-specific selection', () => {
     window.localStorage.setItem(
       SHARED_RANGE_STORAGE_KEY,
-      JSON.stringify({ start: '2025-04-01', end: '2025-04-30' }),
+      JSON.stringify({
+        version: STORED_PREFERENCE_VERSION,
+        start: '2025-04-01',
+        end: '2025-04-30',
+      }),
     );
     window.localStorage.setItem(
       'charging.list.range',
@@ -179,25 +256,35 @@ describe('useRangeState — localStorage persistence', () => {
     expect(result.current.end).toBe('2025-04-30');
   });
 
-  it('promotes a non-default legacy page selection when shared storage is empty', () => {
+  it('ignores legacy auto-saved page defaults when shared storage is empty', () => {
     window.localStorage.setItem(
       'charging.list.range',
       JSON.stringify({ start: '2024-06-01', end: '2024-06-30' }),
     );
-    renderHook(
-      () => useRangeState({ persistKey: 'charging.list.range', defaultPresetId: '30d' }),
+    const { result } = renderHook(
+      () => useRangeState({ persistKey: 'charging.list.range' }),
       { wrapper: withRouter(['/charging']) },
     );
 
-    expect(JSON.parse(window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY) ?? '{}'))
-      .toEqual({ start: '2024-06-01', end: '2024-06-30' });
+    const days =
+      Math.round(
+        (new Date(`${result.current.end}T00:00:00`).getTime() -
+          new Date(`${result.current.start}T00:00:00`).getTime()) /
+          86_400_000,
+      ) + 1;
+    expect(days).toBe(7);
+    expect(window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY)).toBeNull();
   });
 
   it('ignores malformed shared storage and falls back to the page selection', () => {
     window.localStorage.setItem(SHARED_RANGE_STORAGE_KEY, '{not json');
     window.localStorage.setItem(
       'charging.list.range',
-      JSON.stringify({ start: '2024-07-01', end: '2024-07-31' }),
+      JSON.stringify({
+        version: STORED_PREFERENCE_VERSION,
+        start: '2024-07-01',
+        end: '2024-07-31',
+      }),
     );
     const { result } = renderHook(
       () => useRangeState({ persistKey: 'charging.list.range' }),
@@ -209,7 +296,11 @@ describe('useRangeState — localStorage persistence', () => {
   });
 
   it('clamps the page range without shrinking the shared selection', () => {
-    const shared = { start: '2020-01-01', end: '2025-01-31' };
+    const shared = {
+      version: STORED_PREFERENCE_VERSION,
+      start: '2020-01-01',
+      end: '2025-01-31',
+    };
     window.localStorage.setItem(SHARED_RANGE_STORAGE_KEY, JSON.stringify(shared));
     const { result } = renderHook(
       () => useRangeState({
@@ -235,7 +326,12 @@ describe('useRangeState — localStorage persistence', () => {
     const stored = JSON.parse(
       window.localStorage.getItem(SHARED_RANGE_STORAGE_KEY) ?? '{}',
     );
-    expect(stored).toEqual({ start: result.current.start, end: result.current.end });
+    expect(stored).toEqual({
+      version: STORED_PREFERENCE_VERSION,
+      start: result.current.start,
+      end: result.current.end,
+      presetId: '7d',
+    });
   });
 });
 
@@ -373,6 +469,33 @@ describe('useRangeState — atomic updates', () => {
     expect(params.get('q')).toBe('roadtrip');
   });
 
+  it('resets the range and related URL keys in one navigation', () => {
+    const { result } = renderHook(() => {
+      const range = useRangeState();
+      const [params] = useSearchParams();
+      return { range, query: params.toString() };
+    }, {
+      wrapper: withRouter([
+        '/charging?from=2025-05-01&to=2025-05-31&compare=true&severity=warn',
+      ]),
+    });
+
+    act(() => {
+      result.current.range.resetWithUrlUpdates({
+        severity: null,
+        q: 'battery',
+      });
+    });
+
+    const params = new URLSearchParams(result.current.query);
+    expect(params.get('from')).toBeNull();
+    expect(params.get('to')).toBeNull();
+    expect(params.get('compare')).toBeNull();
+    expect(params.get('severity')).toBeNull();
+    expect(params.get('q')).toBe('battery');
+    expect(result.current.range.presetId).toBe('7d');
+  });
+
   it('reset removes from/to/compare from the URL', () => {
     const { result } = renderHook(() => useRangeState({ enableCompare: true }), {
       wrapper: withRouter(['/charging?from=2025-01-01&to=2025-01-31&compare=true']),
diff --git a/web/src/hooks/useRangeState.ts b/web/src/hooks/useRangeState.ts
index 63cdc86c15..98f06c8335 100644
--- a/web/src/hooks/useRangeState.ts
+++ b/web/src/hooks/useRangeState.ts
@@ -1,7 +1,6 @@
 /**
  * useRangeState — page-level date range state with URL sync, localStorage
- * memory, optional comparison-period resolution, and minDate-clamped "All
- * time" preset.
+ * preference, optional comparison-period resolution, and minDate clamping.
  *
  * Replaces the per-page boilerplate of:
  *   const [startDate, setStartDate] = useUrlString('from', defaultStart);
@@ -9,8 +8,9 @@
  *   const setRangeBatch = useUrlBatch();
  *
  * Precedence on initial mount:
- * **URL > shared range > page localStorage > defaultPresetId > today**.
- * Restoring from storage is done with `replace` (no history entry).
+ * **URL > shared preference > page preference > defaultPresetId > 7 days**.
+ * URL ranges are navigation-specific and never overwrite the global
+ * preference unless the user commits a new picker selection.
  *
  * Why the asymmetric preset/calendar semantics matter:
  *   - Preset clicks (`setRange`) write {from,to} atomically and call onApply.
@@ -19,25 +19,25 @@
  *     <RangePicker> handles it.
  */
 
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import {
-  DATE_PRESETS,
   getDatePreset,
   matchPresetId,
-  resolveAllTimeStart,
   type DatePresetRange,
 } from '@/lib/datePresets';
 import { calendarRangeToInstants } from '@/lib/dateRange';
 
 const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
+const DEFAULT_PRESET_ID = '7d';
+const RANGE_PREFERENCE_VERSION = 2;
 
-export const SHARED_RANGE_STORAGE_KEY = 'teslasync.date-range.v1';
+export const SHARED_RANGE_STORAGE_KEY = 'teslasync.date-range.v2';
 
 export interface UseRangeStateOptions {
   /**
-   * Preset id to use when neither URL nor localStorage yields a range.
-   * Defaults to `'30d'`.
+   * Preset id to use when neither URL nor a stored preference yields a range.
+   * Defaults to `'7d'`.
    */
   defaultPresetId?: string;
   /**
@@ -49,9 +49,8 @@ export interface UseRangeStateOptions {
   toKey?: string;
   compareKey?: string;
   /**
-   * localStorage key used to remember the user's last-selected range on this
-   * page. When omitted, no persistence happens. Recommended: dotted key like
-   * `'charging.list.range'`.
+   * Optional page-specific backup for the shared date-range preference.
+   * Recommended: a dotted key like `'charging.list.range'`.
    */
   persistKey?: string;
   /**
@@ -82,6 +81,11 @@ export interface RangeValue {
   end: string;
 }
 
+interface StoredRangePreference extends RangeValue {
+  version: typeof RANGE_PREFERENCE_VERSION;
+  presetId?: string;
+}
+
 export interface UseRangeStateReturn {
   start: string;
   end: string;
@@ -104,12 +108,17 @@ export interface UseRangeStateReturn {
   compare: boolean;
   /** When `compare` is true: the previous period of equal length. */
   comparePrev: RangeValue | undefined;
-  /** Atomic setter — writes from/to in one navigation. */
-  setRange: (range: RangeValue) => void;
+  /** Atomic setter — writes from/to and the shared preference. */
+  setRange: (range: RangeValue, presetId?: string) => void;
   /** Writes the range and related URL keys in one navigation. */
   setRangeWithUrlUpdates: (
     range: RangeValue,
     urlUpdates: Record<string, string | null | undefined>,
+    presetId?: string,
+  ) => void;
+  /** Reset the range and update related URL keys in one navigation. */
+  resetWithUrlUpdates: (
+    urlUpdates: Record<string, string | null | undefined>,
   ) => void;
   /** Set range by preset id; falls back to current range when id is unknown. */
   setPreset: (id: string) => void;
@@ -131,7 +140,17 @@ function clampRange(range: RangeValue, minDate: string | undefined): RangeValue
   return { start: minDate, end: range.end };
 }
 
-function loadFromStorage(storageKey: string | undefined): RangeValue | null {
+function getFallbackPreset(id: string) {
+  const preset = getDatePreset(id) ?? getDatePreset(DEFAULT_PRESET_ID);
+  if (!preset) {
+    throw new Error(`useRangeState: missing "${DEFAULT_PRESET_ID}" date preset`);
+  }
+  return preset;
+}
+
+function loadFromStorage(
+  storageKey: string | undefined,
+): StoredRangePreference | null {
   if (!storageKey || typeof window === 'undefined') return null;
   try {
     const raw = window.localStorage.getItem(storageKey);
@@ -142,19 +161,32 @@ function loadFromStorage(storageKey: string | undefined): RangeValue | null {
     if (
       typeof record.start !== 'string' ||
       typeof record.end !== 'string' ||
+      record.version !== RANGE_PREFERENCE_VERSION ||
       !isValidIsoDate(record.start) ||
       !isValidIsoDate(record.end) ||
       record.start > record.end
     ) {
       return null;
     }
-    return { start: record.start, end: record.end };
+    const presetId =
+      typeof record.presetId === 'string' && getDatePreset(record.presetId)
+        ? record.presetId
+        : undefined;
+    return {
+      version: RANGE_PREFERENCE_VERSION,
+      start: record.start,
+      end: record.end,
+      ...(presetId ? { presetId } : {}),
+    };
   } catch {
     return null;
   }
 }
 
-function saveToStorage(storageKey: string | undefined, value: RangeValue) {
+function saveToStorage(
+  storageKey: string | undefined,
+  value: StoredRangePreference,
+) {
   if (!storageKey || typeof window === 'undefined') return;
   try {
     window.localStorage.setItem(storageKey, JSON.stringify(value));
@@ -163,6 +195,32 @@ function saveToStorage(storageKey: string | undefined, value: RangeValue) {
   }
 }
 
+function resolvePreference(preference: StoredRangePreference): RangeValue {
+  const preset = preference.presetId
+    ? getDatePreset(preference.presetId)
+    : undefined;
+  return preset?.resolve() ?? {
+    start: preference.start,
+    end: preference.end,
+  };
+}
+
+function createPreference(
+  range: RangeValue,
+  requestedPresetId?: string,
+): StoredRangePreference {
+  const presetId =
+    requestedPresetId && getDatePreset(requestedPresetId)
+      ? requestedPresetId
+      : matchPresetId(range.start, range.end);
+  return {
+    version: RANGE_PREFERENCE_VERSION,
+    start: range.start,
+    end: range.end,
+    ...(presetId ? { presetId } : {}),
+  };
+}
+
 function applyUrlUpdates(
   params: URLSearchParams,
   updates?: Record<string, string | null | undefined>,
@@ -200,7 +258,7 @@ function computeComparePrev(start: string, end: string): RangeValue | undefined
 
 export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateReturn {
   const {
-    defaultPresetId = '30d',
+    defaultPresetId = DEFAULT_PRESET_ID,
     fromKey = 'from',
     toKey = 'to',
     compareKey = 'compare',
@@ -219,19 +277,17 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
   // Lazily compute the resolved fallback once per render. The default preset's
   // `resolve()` is cheap (Date math), so re-running it is fine and ensures
   // "today"-style presets stay live without a re-render loop.
-  const fallback = useMemo<RangeValue>(() => {
-    const preset = getDatePreset(defaultPresetId) ?? getDatePreset('30d');
-    if (preset?.id === 'all') {
-      // Honor minDate even on the default preset.
-      const r = preset.resolve();
-      return { start: resolveAllTimeStart(minDate), end: r.end };
-    }
-    return preset?.resolve() ?? DATE_PRESETS[3].resolve();
-  }, [defaultPresetId, minDate]);
+  const fallback = useMemo<RangeValue>(
+    () => clampRange(getFallbackPreset(defaultPresetId).resolve(), minDate),
+    [defaultPresetId, minDate],
+  );
 
-  const sharedStored = loadFromStorage(SHARED_RANGE_STORAGE_KEY);
-  const pageStored = loadFromStorage(persistKey);
-  const stored = sharedStored ?? pageStored;
+  const sharedPreference = loadFromStorage(SHARED_RANGE_STORAGE_KEY);
+  const pagePreference = loadFromStorage(persistKey);
+  const storedPreference = sharedPreference ?? pagePreference;
+  const storedRange = storedPreference
+    ? resolvePreference(storedPreference)
+    : null;
   const urlRange: RangeValue | null =
     isValidIsoDate(urlStart) &&
     isValidIsoDate(urlEnd) &&
@@ -239,75 +295,26 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
       ? { start: urlStart, end: urlEnd }
       : null;
 
-  // Resolve the effective range synchronously to avoid rendering a page
-  // default before the inherited selection is restored into the URL.
+  // Resolve synchronously so inherited preferences never flash the page
+  // fallback before the first paint.
   const effective = useMemo<RangeValue>(() => {
     if (urlRange) return clampRange(urlRange, minDate);
-    if (stored) return clampRange(stored, minDate);
+    if (storedRange) return clampRange(storedRange, minDate);
     return fallback;
   }, [
     urlRange?.start,
     urlRange?.end,
-    stored?.start,
-    stored?.end,
+    storedRange?.start,
+    storedRange?.end,
     minDate,
     fallback,
   ]);
 
-  // Seed the shared preference from explicit URLs or legacy page storage,
-  // then expose inherited storage in the URL for bookmarks and copied links.
-  const restoredRef = useRef(false);
-  useEffect(() => {
-    if (restoredRef.current) return;
-    restoredRef.current = true;
-
-    if (urlRange) {
-      saveToStorage(SHARED_RANGE_STORAGE_KEY, urlRange);
-      return;
-    }
-
-    if (!stored) return;
-    const pageStoredIsFallback =
-      pageStored?.start === fallback.start && pageStored?.end === fallback.end;
-    if (!sharedStored && pageStored && !pageStoredIsFallback) {
-      saveToStorage(SHARED_RANGE_STORAGE_KEY, pageStored);
-    }
-    const inherited = clampRange(stored, minDate);
-    setParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        next.set(fromKey, inherited.start);
-        next.set(toKey, inherited.end);
-        return next;
-      },
-      { replace: true },
-    );
-  }, [
-    urlRange?.start,
-    urlRange?.end,
-    stored?.start,
-    stored?.end,
-    sharedStored?.start,
-    sharedStored?.end,
-    pageStored?.start,
-    pageStored?.end,
-    fallback.start,
-    fallback.end,
-    minDate,
-    fromKey,
-    toKey,
-    setParams,
-  ]);
-
-  // Keep the page key current as a backward-compatible migration fallback.
-  useEffect(() => {
-    saveToStorage(persistKey, effective);
-  }, [persistKey, effective.start, effective.end]);
-
   const commitRange = useCallback(
     (
       range: RangeValue,
       urlUpdates?: Record<string, string | null | undefined>,
+      presetId?: string,
     ) => {
       if (
         !isValidIsoDate(range.start) ||
@@ -320,8 +327,9 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
       }
 
       const pageRange = clampRange(range, minDate);
-      saveToStorage(SHARED_RANGE_STORAGE_KEY, range);
-      saveToStorage(persistKey, pageRange);
+      const preference = createPreference(range, presetId);
+      saveToStorage(SHARED_RANGE_STORAGE_KEY, preference);
+      saveToStorage(persistKey, preference);
       setParams(
         (prev) => {
           const next = new URLSearchParams(prev);
@@ -337,7 +345,8 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
   );
 
   const setRange = useCallback(
-    (range: RangeValue) => commitRange(range),
+    (range: RangeValue, presetId?: string) =>
+      commitRange(range, undefined, presetId),
     [commitRange],
   );
 
@@ -345,7 +354,8 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
     (
       range: RangeValue,
       urlUpdates: Record<string, string | null | undefined>,
-    ) => commitRange(range, urlUpdates),
+      presetId?: string,
+    ) => commitRange(range, urlUpdates, presetId),
     [commitRange],
   );
 
@@ -354,7 +364,7 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
       const preset = getDatePreset(id);
       if (!preset) return;
       const r: DatePresetRange = preset.resolve();
-      setRange(r);
+      setRange(r, id);
     },
     [setRange],
   );
@@ -374,14 +384,18 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
     [setParams, compareKey],
   );
 
-  const reset = useCallback(() => {
-    const preset = getDatePreset(defaultPresetId) ?? getDatePreset('30d');
-    const defaultRange = preset?.resolve() ?? DATE_PRESETS[3].resolve();
-    saveToStorage(SHARED_RANGE_STORAGE_KEY, defaultRange);
-    saveToStorage(persistKey, clampRange(defaultRange, minDate));
+  const resetWithUrlUpdates = useCallback((
+    urlUpdates: Record<string, string | null | undefined>,
+  ) => {
+    const preset = getFallbackPreset(defaultPresetId);
+    const defaultRange = preset.resolve();
+    const preference = createPreference(defaultRange, preset.id);
+    saveToStorage(SHARED_RANGE_STORAGE_KEY, preference);
+    saveToStorage(persistKey, preference);
     setParams(
       (prev) => {
         const next = new URLSearchParams(prev);
+        applyUrlUpdates(next, urlUpdates);
         next.delete(fromKey);
         next.delete(toKey);
         next.delete(compareKey);
@@ -396,9 +410,13 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
     compareKey,
     defaultPresetId,
     persistKey,
-    minDate,
   ]);
 
+  const reset = useCallback(
+    () => resetWithUrlUpdates({}),
+    [resetWithUrlUpdates],
+  );
+
   const compare = enableCompare && urlCompare === 'true';
   const comparePrev = useMemo(
     () => (compare ? computeComparePrev(effective.start, effective.end) : undefined),
@@ -440,6 +458,7 @@ export function useRangeState(opts: UseRangeStateOptions = {}): UseRangeStateRet
     comparePrev,
     setRange,
     setRangeWithUrlUpdates,
+    resetWithUrlUpdates,
     setPreset,
     setCompare,
     reset,
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index b839dbdfce..090e5f6924 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -22893,15 +22893,17 @@
       "scheduled": "Scheduled",
       "cancelScheduled": "Cancel scheduled rate",
       "cancel": "Cancel Rate",
-      "previewApply": "Preview / Apply",
-      "reviewImpact": "Review impact",
-      "impactShown": "Impact shown",
+      "previewSessions": "Preview sessions",
+      "previewHelp": "Preview sessions shows which historical charges match a rate and what would change before anything is applied.",
       "deleteTitle": "Cancel this scheduled rate?",
       "deleteMessage": "The previous rate will continue through this cancelled schedule. Effective rate history cannot be deleted."
     },
     "previewApply": {
-      "title": "Preview & Apply",
-      "selectRate": "Select a rate from the history table above to preview its impact.",
+      "title": "Session Pricing Preview",
+      "regionLabel": "Session pricing preview",
+      "selectRate": "Choose Preview sessions on a rate to see affected charging sessions and estimated cost.",
+      "help": "This preview is read-only. It shows matching historical sessions and estimated cost; nothing changes until you choose Apply.",
+      "metricsHelp": "Matched sessions are in this place and rate period. Eligible sessions can be priced; protected sessions keep their existing cost.",
       "confirmTitle": "Apply this rate to matching sessions?",
       "confirmMessage": "This backfills/reprices unpriced or previously geofence-derived sessions in scope. Manual, Tesla-reported, and existing costs with unknown provenance are never overwritten.",
       "confirmAttributionTitle": "Assign matching sessions to this place?",

From 873bee0ef1bf6ecddb96107bbbb4e9c630996f08 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Tue, 11 Aug 2026 23:27:44 -0700
Subject: [PATCH 11/15] feat(web): redesign digital twin with photo compositor
 overlay

Reworks VehicleTwin's SVG to trace real Model Y proportions (traced body/DLO paths, clipped shading, redesigned Gemini-style wheels/spokes, refined lights and glass gradients) and adds an optional photo mode: a new `teslaCompositor.ts` builds a Tesla configurator side-view render URL per paint/model, which VehicleTwin overlays live telemetry indicators on top of, aligning the SVG coordinate system to the photo's traced geometry. Falls back to the hand-drawn SVG if the photo fails to load. Passes `model` through from DigitalTwinWidget, DigitalTwinMiniWidget, and DigitalTwinPage. Also boosts paint palette opacity stops in vehicleColors.ts so the body reads as a solid painted surface rather than translucent.
---
 web/src/components/vehicles/VehicleTwin.tsx   | 975 +++++++++++-------
 .../widgets/DigitalTwinMiniWidget.tsx         |   1 +
 .../dashboard/widgets/DigitalTwinWidget.tsx   |   1 +
 .../vehicles/pages/DigitalTwinPage.tsx        |   1 +
 web/src/lib/teslaCompositor.ts                |  78 ++
 web/src/lib/vehicleColors.ts                  |  87 +-
 6 files changed, 702 insertions(+), 441 deletions(-)
 create mode 100644 web/src/lib/teslaCompositor.ts

diff --git a/web/src/components/vehicles/VehicleTwin.tsx b/web/src/components/vehicles/VehicleTwin.tsx
index e91b380fd5..6742e80eb2 100644
--- a/web/src/components/vehicles/VehicleTwin.tsx
+++ b/web/src/components/vehicles/VehicleTwin.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useId, useMemo } from 'react';
+import { createContext, useContext, useId, useMemo, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Lock, Unlock, Shield } from 'lucide-react';
 import { cn } from '@/lib/cn';
@@ -8,6 +8,7 @@ import {
   FALLBACK_PAINT,
   type PaintPalette,
 } from '@/lib/vehicleColors';
+import { buildCompositorUrl, COMPOSITOR_METRICS } from '@/lib/teslaCompositor';
 import { useVehiclePaint } from '@/hooks/useVehiclePaint';
 
 const SIZE_MAP = { sm: 300, md: 440, lg: 560 } as const;
@@ -19,6 +20,77 @@ const DRIVE_IN_DURATION = 1.35;
 
 export type VehicleTwinSize = keyof typeof SIZE_MAP;
 
+/**
+ * Model Y proportions traced from a real side view (4750 mm long × 1624 mm
+ * tall, 2890 mm wheelbase, mapped to 513 viewBox units). Ground line y=263,
+ * axles at x=138 / x=450, tire radius 38.5.
+ */
+const BODY_PATH = `
+  M 84 248.5
+  C 72 246.5 62 244 54 240
+  C 47 236 43.5 230 43 222
+  C 42.4 215 42.6 206 43.2 198
+  C 43.8 190 45.5 185 49 182
+  C 56 176.5 66 169.5 77 165.5
+  C 92 159.8 102 156.5 114 153.5
+  C 138 148 158 144.5 172 143
+  C 180 142.2 189 142.6 196 144
+  C 197.5 144.8 198.5 145.4 199 146
+  C 213 133.5 238 112.5 264 99.5
+  C 279 93.4 295 89.8 311 88.4
+  C 322 86.5 345 85.7 370 86.6
+  C 390 88.2 415 91.6 440 96.4
+  C 452 98.9 468 103.3 480 107.2
+  C 495 112 520 121 535 126.5
+  C 541 127.6 546 128.2 549.5 128.7
+  C 550.5 130.5 549.5 132.5 547.5 134
+  C 545.5 136.5 544.5 139 544.5 141.5
+  C 548 146 551 155 552.5 165
+  C 554.5 176 555.2 192 554.2 205
+  C 553.7 212 552.8 221 551 228
+  C 547 231 540 233.5 530 235.5
+  C 522 237.3 512 239.5 504 240.5
+  Z`;
+
+/** Glazing band (windows + trim) — the visible "DLO" from the side. */
+const DLO_PATH = `
+  M 199 146
+  C 208 137.5 220 126.5 233 117.5
+  C 247 108 262 100.6 277 96
+  C 289 92.6 302 90.4 316 89.4
+  C 338 87.9 362 88.4 386 90.9
+  C 400 93.6 430 98.5 458 105.2
+  C 466 107.5 474 110 480 113
+  L 481 115.5
+  C 470 121.5 452 130 440 132.2
+  C 437.5 132.6 435 132.6 433 132.4
+  C 425 133.4 417 134.2 410 134.9
+  C 380 136.7 348 138.8 316 140.5
+  C 290 142 246 144.6 219 146.2
+  C 212 146.6 205 146.4 199 146
+  Z`;
+
+/** DLO inset ~2 units — clips the state-tinted window panes. */
+const DLO_INNER_PATH = `
+  M 204 144.5
+  C 213 136.5 224 126.5 236 118.5
+  C 250 109.5 264 102.4 278 98
+  C 290 94.6 303 92.4 317 91.4
+  C 339 89.9 362 90.4 386 92.9
+  C 400 95.4 429 100.3 456 107
+  C 463 109 470 111.3 474 113.5
+  C 467 117 454 124.5 441 129.5
+  C 437 131 434.5 131 432 130.9
+  C 424 131.7 417 132.4 410 133
+  C 380 134.8 348 136.8 317 138.4
+  C 291 140 248 142.6 222 144.2
+  C 215 144.6 209 144.7 204 144.5
+  Z`;
+
+const FRONT_WHEEL_CX = 132;
+const REAR_WHEEL_CX = 464;
+const WHEEL_CY = 221;
+
 export interface VehicleTwinProps extends VehicleTwinState {
   size?: VehicleTwinSize;
   interactive?: boolean;
@@ -42,6 +114,11 @@ export interface VehicleTwinProps extends VehicleTwinState {
    * snapshot replay). Most callers should pass `vehicleId` instead.
    */
   paint?: PaintPalette;
+  /**
+   * Tesla `Vehicle.model` string — selects the configurator model for the
+   * photo render. Defaults to Model Y when omitted or unrecognized.
+   */
+  model?: string | null;
 }
 
 /**
@@ -55,20 +132,20 @@ interface TwinIds {
   glow: string;
   bodyGrad: string;
   lowerShadow: string;
-  hoodSurface: string;
-  frontDoorSurface: string;
-  rearDoorSurface: string;
-  quarterSurface: string;
-  rockerDepth: string;
+  hoodSheen: string;
   mirrorGrad: string;
   shoulderHighlight: string;
   softReflection: string;
-  glassReflection: string;
   glassGrad: string;
+  glassReflection: string;
+  lowReflection: string;
+  windshieldGrad: string;
   headlightLens: string;
+  taillightGrad: string;
   rimGrad: string;
-  rimDepth: string;
   tireOuter: string;
+  bodyClip: string;
+  dloClip: string;
 }
 
 function buildTwinIds(uid: string): TwinIds {
@@ -78,20 +155,20 @@ function buildTwinIds(uid: string): TwinIds {
     glow: p('glow'),
     bodyGrad: p('body-grad'),
     lowerShadow: p('lower-shadow'),
-    hoodSurface: p('hood-surface'),
-    frontDoorSurface: p('front-door-surface'),
-    rearDoorSurface: p('rear-door-surface'),
-    quarterSurface: p('quarter-surface'),
-    rockerDepth: p('rocker-depth'),
+    hoodSheen: p('hood-sheen'),
     mirrorGrad: p('mirror-grad'),
     shoulderHighlight: p('shoulder-highlight'),
     softReflection: p('soft-reflection'),
-    glassReflection: p('glass-reflection'),
     glassGrad: p('glass-grad'),
+    glassReflection: p('glass-reflection'),
+    lowReflection: p('low-reflection'),
+    windshieldGrad: p('windshield-grad'),
     headlightLens: p('headlight-lens'),
+    taillightGrad: p('taillight-grad'),
     rimGrad: p('rim-grad'),
-    rimDepth: p('rim-depth'),
     tireOuter: p('tire-outer'),
+    bodyClip: p('body-clip'),
+    dloClip: p('dlo-clip'),
   };
 }
 
@@ -124,7 +201,7 @@ function useTwinCtx(): TwinContextValue {
  * `<SvgDefs>` below.
  */
 const C = {
-  cladding: 'rgba(2,6,23,0.7)',
+  cladding: 'rgba(10,13,20,0.88)',
   glassStroke: 'rgba(125,211,252,0.32)',
   glassOpen: 'rgba(3,7,18,0.72)',
   glassPartial: 'rgba(100,200,255,0.05)',
@@ -149,9 +226,9 @@ const C = {
   seatOccupied: 'rgba(34,211,238,0.32)',
   frunkTrunkOpen: 'rgba(251,191,36,0.2)',
   neutral: 'rgba(255,255,255,0.05)',
-  shadow: 'rgba(0,0,0,0.48)',
+  shadow: 'rgba(0,0,0,0.5)',
   wheelDark: 'rgba(0,0,0,0.94)',
-  wheelSidewall: 'rgba(7,12,24,0.96)',
+  wheelSidewall: 'rgba(8,12,22,0.95)',
   wheelStroke: 'rgba(255,255,255,0.12)',
 } as const;
 
@@ -225,19 +302,19 @@ function GroundShadow() {
   return (
     <g>
       <ellipse
-        cx={286}
-        cy={246}
-        rx={230}
-        ry={21}
+        cx={298}
+        cy={263}
+        rx={242}
+        ry={12}
         fill={C.shadow}
         filter={`url(#${ids.shadowBlur})`}
       />
       <ellipse
-        cx={285}
-        cy={239}
-        rx={182}
-        ry={9}
-        fill="rgba(0,0,0,0.56)"
+        cx={298}
+        cy={262}
+        rx={205}
+        ry={6}
+        fill="rgba(0,0,0,0.55)"
       />
     </g>
   );
@@ -248,17 +325,17 @@ function ChargingUnderglow() {
   return (
     <g pointerEvents="none">
       <motion.ellipse
-        cx={292}
-        cy={239}
+        cx={298}
+        cy={255}
         rx={190}
-        ry={18}
+        ry={16}
         fill="rgba(34,197,94,0.18)"
         filter={`url(#${ids.glow})`}
         animate={{ opacity: [0.2, 0.55, 0.2], rx: [160, 205, 160] }}
         transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}
       />
       <motion.path
-        d="M 154 232 C 236 239 354 239 440 231"
+        d="M 152 246 C 240 253 360 253 446 244"
         fill="none"
         stroke="rgba(34,197,94,0.38)"
         strokeWidth={2}
@@ -282,18 +359,17 @@ function WheelSVG({
   driving?: boolean;
 }) {
   const { ids } = useTwinCtx();
-  const blades = [0, 36, 72, 108, 144, 180, 216, 252, 288, 324];
-  const lugs = [0, 72, 144, 216, 288];
+  const spokes = [0, 72, 144, 216, 288];
   const shouldSpin = driveIn || driving;
 
   return (
     <g>
-      {/* Soft ground contact shadow */}
-      <ellipse cx={cx + 4} cy={cy + 3} rx={40} ry={35} fill="rgba(0,0,0,0.38)" />
-      {/* Tire — single dark layer (no stacked rings) */}
-      <circle cx={cx} cy={cy} r={39} fill={`url(#${ids.tireOuter})`} />
-      {/* Sidewall edge — subtle ring between tire and rim */}
-      <circle cx={cx} cy={cy} r={31} fill="rgba(8,12,22,0.95)" stroke="rgba(255,255,255,0.07)" strokeWidth={0.7} />
+      {/* Ground contact shadow */}
+      <ellipse cx={cx} cy={cy + 40} rx={35} ry={4.5} fill="rgba(0,0,0,0.55)" />
+      {/* Tire */}
+      <circle cx={cx} cy={cy} r={42} fill={`url(#${ids.tireOuter})`} />
+      {/* Sidewall */}
+      <circle cx={cx} cy={cy} r={34} fill={C.wheelSidewall} stroke="rgba(255,255,255,0.06)" strokeWidth={0.7} />
       <motion.g
         initial={shouldSpin ? { rotate: 0 } : false}
         animate={shouldSpin ? { rotate: driving ? -360 : -1080 } : undefined}
@@ -308,108 +384,80 @@ function WheelSVG({
         }
         style={{ transformOrigin: `${cx}px ${cy}px` }}
       >
-        {/* Rim depth (back face) */}
-        <circle cx={cx} cy={cy} r={28} fill={`url(#${ids.rimDepth})`} />
         {/* Rim face */}
-        <circle cx={cx} cy={cy} r={25} fill={`url(#${ids.rimGrad})`} stroke="rgba(255,255,255,0.16)" strokeWidth={0.8} />
-        {/* 10 thin alloy spokes — soft slate color so they don't look like dirt on saturated paint */}
-        {blades.map((angle) => (
-          <g key={angle} transform={`rotate(${angle} ${cx} ${cy})`}>
-            <path
-              d={`M ${cx + 3.5} ${cy - 4} C ${cx + 8} ${cy - 16} ${cx + 16} ${cy - 22} ${cx + 24} ${cy - 16} C ${cx + 19} ${cy - 11} ${cx + 13} ${cy - 4} ${cx + 5} ${cy + 5} Z`}
-              fill="rgba(100,116,139,0.32)"
-              stroke="rgba(15,23,42,0.55)"
-              strokeWidth={0.45}
-            />
+        <circle cx={cx} cy={cy} r={30} fill={`url(#${ids.rimGrad})`} stroke="rgba(255,255,255,0.18)" strokeWidth={0.8} />
+        {/* 5 wide silver spokes with dark aero petals between them (Gemini-style) */}
+        {spokes.map((angle) => (
+          <g key={angle}>
+            <g transform={`rotate(${angle} ${cx} ${cy})`}>
+              <path
+                d={`M ${cx - 3.4} ${cy - 5} L ${cx - 7.6} ${cy - 24.5} C ${cx - 2.7} ${cy - 27} ${cx + 2.7} ${cy - 27} ${cx + 7.6} ${cy - 24.5} L ${cx + 3.4} ${cy - 5} Z`}
+                fill="rgba(168,180,196,0.75)"
+                stroke="rgba(15,23,42,0.6)"
+                strokeWidth={0.6}
+              />
+              <path
+                d={`M ${cx - 3.8} ${cy - 8} L ${cx - 5.2} ${cy - 23}`}
+                stroke="rgba(240,245,250,0.5)"
+                strokeWidth={0.7}
+              />
+            </g>
+            <g transform={`rotate(${angle + 36} ${cx} ${cy})`}>
+              <path
+                d={`M ${cx - 6} ${cy - 11} C ${cx - 8.8} ${cy - 17.5} ${cx - 8.8} ${cy - 22} ${cx - 6.6} ${cy - 26.5} C ${cx - 2.2} ${cy - 24} ${cx + 2.2} ${cy - 24} ${cx + 6.6} ${cy - 26.5} C ${cx + 8.8} ${cy - 22} ${cx + 8.8} ${cy - 17.5} ${cx + 6} ${cy - 11} Z`}
+                fill="rgba(22,30,46,0.85)"
+                stroke="rgba(15,23,42,0.5)"
+                strokeWidth={0.5}
+              />
+            </g>
           </g>
         ))}
         {/* Hub */}
-        <circle cx={cx} cy={cy} r={10} fill="rgba(15,23,42,0.94)" stroke="rgba(255,255,255,0.16)" strokeWidth={0.7} />
-        {lugs.map((angle) => {
-          const rad = (angle * Math.PI) / 180;
-          return (
-            <circle
-              key={angle}
-              cx={cx + Math.cos(rad) * 5.5}
-              cy={cy + Math.sin(rad) * 5.5}
-              r={1.1}
-              fill="rgba(148,163,184,0.55)"
-            />
-          );
-        })}
-        <circle cx={cx} cy={cy} r={3.8} fill="rgba(51,65,85,0.95)" stroke="rgba(255,255,255,0.22)" strokeWidth={0.5} />
+        <circle cx={cx} cy={cy} r={6} fill="rgba(15,23,42,0.96)" stroke="rgba(255,255,255,0.2)" strokeWidth={0.7} />
+        <circle cx={cx} cy={cy} r={2.2} fill="rgba(148,163,184,0.7)" />
       </motion.g>
     </g>
   );
 }
 
-function Body3DDetails() {
-  const { ids } = useTwinCtx();
+/**
+ * Body-clipped shading: lower-body depth, hood sheen, wheel wells, black
+ * rocker + arch cladding (Model Y signature), diffuser, bumper details.
+ */
+function BodyShading() {
+  const { ids, bodyAccent } = useTwinCtx();
   return (
-    <g id="body-3d-details" pointerEvents="none">
-      <path
-        d="M 64 176 C 96 158 138 149 190 145 L 205 157 C 147 157 100 165 58 188 Z"
-        fill={`url(#${ids.hoodSurface})`}
-        opacity={0.28}
-      />
-      <path
-        d="M 205 158 L 316 155 L 307 221 L 201 218 C 199 197 200 176 205 158 Z"
-        fill={`url(#${ids.frontDoorSurface})`}
-        opacity={0.26}
-      />
-      <path
-        d="M 320 155 L 458 154 L 450 220 L 311 221 Z"
-        fill={`url(#${ids.rearDoorSurface})`}
-        opacity={0.26}
-      />
-      <path
-        d="M 456 154 C 486 150 523 159 558 190 C 550 207 518 216 483 219 C 480 193 470 171 456 154 Z"
-        fill={`url(#${ids.quarterSurface})`}
-        opacity={0.28}
-      />
-      {/* Single soft beltline — replaces the previous 3 stacked seams */}
-      <path
-        d="M 58 191 C 136 180 248 178 352 181 C 447 184 520 193 556 203"
-        fill="none"
-        stroke="rgba(255,255,255,0.14)"
-        strokeWidth={1}
-        strokeLinecap="round"
-      />
+    <g clipPath={`url(#${ids.bodyClip})`} pointerEvents="none">
+      {/* Body-side value structure (from a real render): bright shoulder,
+          subtle mid-door dip, reflected-light band low on the doors, dark
+          sill falloff into black cladding. */}
+      <rect x={40} y={216} width={520} height={40} fill={`url(#${ids.lowerShadow})`} opacity={0.6} />
+      <rect x={40} y={186} width={520} height={20} fill="rgba(2,6,23,0.06)" />
+      <rect x={40} y={202} width={520} height={22} fill={`url(#${ids.lowReflection})`} />
       <path
-        d="M 53 215 C 120 226 214 230 332 229 C 432 228 513 221 552 211 L 542 224 C 476 238 361 243 219 239 C 131 236 75 229 44 219 Z"
-        fill={`url(#${ids.rockerDepth})`}
-        opacity={0.55}
-      />
-      {/* Door cuts — kept subtle so the body reads as one panel, not three */}
-      <path
-        d="M 205 156 L 307 155"
-        fill="none"
-        stroke="rgba(255,255,255,0.18)"
-        strokeWidth={0.9}
-        strokeLinecap="round"
-      />
-      <path
-        d="M 320 154 L 456 154"
-        fill="none"
-        stroke="rgba(255,255,255,0.14)"
-        strokeWidth={0.9}
-        strokeLinecap="round"
-      />
-      {/* Door handles */}
-      <path
-        d="M 254 174 L 275 173"
-        fill="none"
-        stroke="rgba(2,6,23,0.55)"
-        strokeWidth={2.6}
-        strokeLinecap="round"
-      />
-      <path
-        d="M 374 174 L 397 173"
-        fill="none"
-        stroke="rgba(2,6,23,0.55)"
-        strokeWidth={2.6}
-        strokeLinecap="round"
+        d="M 60 176 C 90 166 130 156 170 149 L 196 145 L 202 156 L 176 160 C 138 167 100 176 68 186 Z"
+        fill={`url(#${ids.hoodSheen})`}
+        opacity={0.6}
       />
+      {/* Front bumper crease, intake slot, under-nose shadow */}
+      <path d="M 44 206 C 56 204 70 204 84 206" fill="none" stroke="rgba(2,6,23,0.35)" strokeWidth={1.1} strokeLinecap="round" />
+      <rect x={52} y={224} width={50} height={6} rx={3} fill="rgba(2,6,23,0.55)" />
+      <path d="M 42 234 L 96 236 L 96 252 L 42 252 Z" fill="rgba(2,6,23,0.4)" />
+      {/* Black rocker cladding (thin strip like the real car) */}
+      <path d="M 96 241 L 500 241 L 500 252 L 96 252 Z" fill="rgba(10,13,20,0.8)" />
+      {/* Wheel wells */}
+      <circle cx={FRONT_WHEEL_CX} cy={WHEEL_CY} r={49.5} fill="rgba(3,5,10,0.96)" />
+      <circle cx={REAR_WHEEL_CX} cy={WHEEL_CY} r={49.5} fill="rgba(3,5,10,0.96)" />
+      {/* Slim black arch cladding rings */}
+      <path d="M 84 208 A 50 50 0 0 1 180 208" fill="none" stroke="rgba(10,13,20,0.72)" strokeWidth={4.5} />
+      <path d="M 416 208 A 50 50 0 0 1 512 208" fill="none" stroke="rgba(10,13,20,0.72)" strokeWidth={4.5} />
+      {/* Arch lips above the cladding */}
+      <path d="M 84 205 A 51 51 0 0 1 180 205" fill="none" stroke={bodyAccent.highlight} strokeWidth={1.4} opacity={0.5} />
+      <path d="M 416 205 A 51 51 0 0 1 512 205" fill="none" stroke={bodyAccent.highlight} strokeWidth={1.4} opacity={0.5} />
+      {/* Rear diffuser */}
+      <rect x={512} y={228} width={32} height={11} rx={3} fill="rgba(10,13,20,0.8)" />
+      {/* Subtle mid-door crease */}
+      <path d="M 208 202 C 300 197 420 195 512 201" fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth={1} />
     </g>
   );
 }
@@ -418,82 +466,67 @@ function BodyShell({
   frunkOpen,
   trunkOpen,
   interactive,
+  photo,
 }: {
   frunkOpen: boolean | null;
   trunkOpen: boolean | null;
   interactive?: boolean;
+  photo?: boolean;
 }) {
   const { ids, bodyAccent } = useTwinCtx();
   return (
     <g>
-      <path
-        d="M 42 208 C 40 196 50 184 72 171 C 100 157 140 149 190 145 C 225 118 282 104 335 106 C 392 108 443 129 493 153 C 526 157 550 173 558 191 C 563 207 552 218 532 224 C 505 232 480 231 456 228 C 452 198 429 178 430 178 C 399 178 375 201 372 229 L 190 229 C 187 201 163 179 132 179 C 101 179 80 201 77 228 L 63 226 C 49 224 42 217 42 208 Z"
-        fill={`url(#${ids.bodyGrad})`}
-        stroke={bodyAccent.stroke}
-        strokeWidth={1.2}
-      />
-      {/* Single roof-arc highlight (chrome bar) */}
-      <path
-        d="M 64 174 C 100 157 139 149 190 145 C 228 120 284 108 335 109 C 391 111 438 129 492 153"
-        fill="none"
-        stroke={bodyAccent.chrome}
-        strokeWidth={2}
-        strokeLinecap="round"
-        opacity={0.22}
-      />
-      <path
-        d="M 70 211 C 164 216 291 216 387 213 C 468 210 523 205 556 198 L 548 214 C 488 227 391 231 278 230 C 187 229 107 224 48 214 Z"
-        fill={`url(#${ids.lowerShadow})`}
-        opacity={0.6}
-      />
-
-      {/* Mirror */}
-      <path
-        d="M 177 153 C 191 145 208 147 221 156 C 205 161 190 160 177 155 Z"
-        fill={`url(#${ids.mirrorGrad})`}
-        stroke="rgba(255,255,255,0.22)"
-        strokeWidth={0.7}
-      />
+      {!photo && (
+        <>
+          <path
+            d={BODY_PATH}
+            fill={`url(#${ids.bodyGrad})`}
+            stroke={bodyAccent.stroke}
+            strokeWidth={0.8}
+          />
+          <BodyShading />
 
-      {/* Door handle (front) */}
-      <path
-        d="M 107 161 L 125 154 L 144 157 L 128 166 Z"
-        fill="rgba(2,6,23,0.55)"
-        stroke="rgba(255,255,255,0.08)"
-        strokeWidth={0.7}
-      />
+          {/* Bright cantrail along the roof + lit spoiler blade */}
+          <path
+            d="M 288 89.5 C 320 86.5 348 86.3 372 87.3 C 396 88.9 420 92.3 444 97"
+            fill="none"
+            stroke="rgba(255,255,255,0.4)"
+            strokeWidth={1.6}
+            strokeLinecap="round"
+          />
+          <path
+            d="M 484 108.5 C 500 113.5 522 121.5 537 127 C 542 128.5 546 128.7 549 128.7"
+            fill="none"
+            stroke="rgba(255,255,255,0.45)"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+          />
 
-      {/* Wheel arch cladding — paint-tinted shadow, kept thin so it reads as
-          a wheel-well shadow, not a heavy black crescent. */}
-      <path
-        d="M 74 228 C 79 195 103 173 132 173 C 164 173 188 198 192 228"
-        fill="none"
-        stroke={bodyAccent.shadow}
-        strokeWidth={6}
-        strokeLinecap="round"
-        opacity={0.55}
-      />
-      <path
-        d="M 371 229 C 376 196 400 173 430 173 C 462 173 486 199 490 228"
-        fill="none"
-        stroke={bodyAccent.shadow}
-        strokeWidth={6}
-        strokeLinecap="round"
-        opacity={0.55}
-      />
+          {/* Fender crease from headlight over the front arch */}
+          <path
+            d="M 94 172 C 130 164 168 158 206 151"
+            fill="none"
+            stroke="rgba(255,255,255,0.16)"
+            strokeWidth={1}
+            strokeLinecap="round"
+          />
+        </>
+      )}
 
-      {/* Frunk seam */}
-      <path
-        d="M 62 176 C 100 156 139 148 190 145"
-        fill="none"
-        stroke={frunkOpen ? C.doorOpen : 'rgba(255,255,255,0.06)'}
-        strokeWidth={frunkOpen ? 1.6 : 0.8}
-        strokeLinecap="round"
-      />
+      {/* Frunk seam (hood cutline) — on the photo, only the open state draws */}
+      {(!photo || frunkOpen) && (
+        <path
+          d="M 96 172 C 130 163 160 154 194 146"
+          fill="none"
+          stroke={frunkOpen ? C.doorOpen : 'rgba(255,255,255,0.1)'}
+          strokeWidth={frunkOpen ? 1.6 : 0.9}
+          strokeLinecap="round"
+        />
+      )}
       <AnimatePresence>
         {frunkOpen && (
           <motion.path
-            d="M 62 176 C 92 146 140 134 190 145 L 181 158 C 132 153 93 161 62 184 Z"
+            d="M 48.5 183.5 C 80 158 140 146 197 144 L 190 156 C 140 154 88 168 56 194 Z"
             fill={C.frunkTrunkOpen}
             stroke={C.doorOpen}
             strokeWidth={1.2}
@@ -505,18 +538,20 @@ function BodyShell({
         )}
       </AnimatePresence>
 
-      {/* Trunk seam */}
-      <path
-        d="M 469 148 C 508 150 542 165 558 188"
-        fill="none"
-        stroke={trunkOpen ? C.doorOpen : 'rgba(255,255,255,0.06)'}
-        strokeWidth={trunkOpen ? 1.6 : 0.8}
-        strokeLinecap="round"
-      />
+      {/* Trunk (liftgate) seam under the spoiler */}
+      {(!photo || trunkOpen) && (
+        <path
+          d="M 481 108 C 502 116 524 125.5 543 133"
+          fill="none"
+          stroke={trunkOpen ? C.doorOpen : 'rgba(255,255,255,0.08)'}
+          strokeWidth={trunkOpen ? 1.6 : 0.8}
+          strokeLinecap="round"
+        />
+      )}
       <AnimatePresence>
         {trunkOpen && (
           <motion.path
-            d="M 470 148 C 510 126 548 137 560 169 L 557 188 C 535 169 503 155 470 156 Z"
+            d="M 481 107.5 C 507 94 535 98 549 121 L 545 132 C 535 122 510 111.5 483 113 Z"
             fill={C.frunkTrunkOpen}
             stroke={C.doorOpen}
             strokeWidth={1.2}
@@ -530,19 +565,19 @@ function BodyShell({
 
       <InteractiveHotspot
         enabled={interactive}
-        x={50}
-        y={128}
-        width={135}
-        height={55}
+        x={44}
+        y={140}
+        width={150}
+        height={48}
         label={`Frunk: ${stateLabel(frunkOpen, 'Open', 'Closed')}`}
         side="left"
       />
       <InteractiveHotspot
         enabled={interactive}
-        x={455}
-        y={128}
-        width={100}
-        height={50}
+        x={462}
+        y={94}
+        width={88}
+        height={46}
         label={`Trunk: ${stateLabel(trunkOpen, 'Open', 'Closed')}`}
         side="right"
       />
@@ -550,27 +585,57 @@ function BodyShell({
   );
 }
 
+/** Static body detailing: seams, handles, mirror, autopilot camera. */
+function BodyDetails() {
+  const { ids } = useTwinCtx();
+  return (
+    <g id="body-details" pointerEvents="none">
+      {/* Mirror: body-color cap, dark glass along the inner lower edge */}
+      <path
+        d="M 192 137 C 192 129.5 197 124 204 123.2 C 210 122.8 214 125.5 214.5 129.5 C 214.5 133.5 210 136.6 204 137 Z"
+        fill={`url(#${ids.mirrorGrad})`}
+        stroke="rgba(2,6,23,0.35)"
+        strokeWidth={0.7}
+      />
+      <path d="M 195 134.5 C 199.5 136.3 205 136.5 210 134.8" fill="none" stroke="rgba(5,8,18,0.7)" strokeWidth={2} strokeLinecap="round" />
+      <path d="M 203 137 L 205.5 144" stroke="rgba(2,6,23,0.8)" strokeWidth={2.6} strokeLinecap="round" />
+
+      {/* Front door leading-edge seam */}
+      <path
+        d="M 216 147 C 212 178 209 212 208 242"
+        fill="none"
+        stroke="rgba(2,6,23,0.32)"
+        strokeWidth={0.9}
+        strokeLinecap="round"
+      />
+
+      {/* Autopilot camera dot on the fender */}
+      <circle cx={190} cy={168} r={2.4} fill="rgba(2,6,23,0.7)" stroke="rgba(255,255,255,0.2)" strokeWidth={0.6} />
+    </g>
+  );
+}
+
 function BodyReflections() {
   const { ids } = useTwinCtx();
   return (
     <g id="body-reflections" pointerEvents="none">
       <motion.path
-        d="M 65 185 C 140 169 246 166 356 170 C 452 174 525 184 557 198"
+        d="M 96 170 C 200 152 330 140 468 120"
         fill="none"
         stroke={`url(#${ids.shoulderHighlight})`}
-        strokeWidth={1.2}
+        strokeWidth={1.4}
         strokeLinecap="round"
         animate={{ opacity: [0.4, 0.7, 0.4] }}
         transition={{ duration: 5.5, repeat: Infinity, ease: 'easeInOut' }}
       />
       <motion.path
-        d="M 208 156 C 276 152 374 153 461 160 L 453 168 C 366 162 277 161 214 164 Z"
+        d="M 212 154 C 280 150 380 145 458 136 L 450 144 C 372 151 282 156 218 160 Z"
         fill={`url(#${ids.softReflection})`}
         animate={{ opacity: [0.28, 0.55, 0.28] }}
         transition={{ duration: 6.5, repeat: Infinity, ease: 'easeInOut' }}
       />
       <motion.path
-        d="M 118 176 C 230 160 398 164 526 186"
+        d="M 118 166 C 230 148 390 134 508 120"
         fill="none"
         stroke="rgba(255,255,255,0.1)"
         strokeWidth={1}
@@ -589,77 +654,136 @@ function SideWindows({
   windowRD: wRD,
   windowRP: wRP,
   interactive,
+  photo,
 }: {
   windowFD: WindowState;
   windowFP: WindowState;
   windowRD: WindowState;
   windowRP: WindowState;
   interactive?: boolean;
+  photo?: boolean;
 }) {
   const { ids } = useTwinCtx();
   const glassClosedRef = `url(#${ids.glassGrad})`;
   const passengerAlert = wFP === 'open' || wFP === 'partial' || wRP === 'open' || wRP === 'partial';
+  const fdActive = wFD === 'open' || wFD === 'partial';
+  const rdActive = wRD === 'open' || wRD === 'partial';
 
   return (
     <g>
+      {!photo && (<>
+      {/* Windshield: wide dark band merging into the glasshouse */}
       <path
-        d="M 194 148 C 230 121 276 108 331 108 C 386 109 431 126 478 151 L 448 159 L 207 159 Z"
-        fill="rgba(2,6,23,0.74)"
-        stroke="rgba(15,23,42,0.65)"
-        strokeWidth={1.6}
-        strokeLinejoin="round"
+        d="M 186 149.5 C 202 134.5 226 116 252 101.5 C 258 98 265 95 272 92.5 L 281 90.5 C 262 98 243 110 227 124 C 215 134.5 205 143 199.5 149 Z"
+        fill="rgba(4,8,20,0.82)"
       />
       <path
-        d="M 202 147 C 232 124 274 113 316 113 L 307 152 L 212 153 Z"
-        fill={windowFill(wFD, glassClosedRef)}
-        stroke={windowStroke(wFD)}
-        strokeWidth={1.1}
+        d="M 196 145 C 209 132 228 116.5 250 103.5 L 258 100.5 C 240 111.5 222 126.5 208 141.5 Z"
+        fill={`url(#${ids.windshieldGrad})`}
+        opacity={0.22}
       />
+      {/* Bright A-pillar edge along the silhouette */}
       <path
-        d="M 327 113 C 382 114 424 128 469 149 L 441 153 L 318 152 Z"
-        fill={windowFill(wRD, glassClosedRef)}
-        stroke={windowStroke(wRD)}
-        strokeWidth={1.1}
+        d="M 200 144.5 C 214 132.5 238.5 112 264 99.3 C 270 96.5 276 94 281 92"
+        fill="none"
+        stroke="rgba(255,255,255,0.42)"
+        strokeWidth={1.3}
+        strokeLinecap="round"
       />
+      {/* Cowl shadow + wiper hint + windshield shadow on the hood rear */}
       <path
-        d="M 316 114 L 318 153"
-        stroke="rgba(2,6,23,0.6)"
-        strokeWidth={3}
+        d="M 183 150 C 190 148.3 197 147.6 204 147.4"
+        fill="none"
+        stroke="rgba(2,6,23,0.45)"
+        strokeWidth={1.8}
         strokeLinecap="round"
       />
+      <path d="M 196 148.5 L 210 141" stroke="rgba(2,6,23,0.5)" strokeWidth={1} strokeLinecap="round" />
       <path
-        d="M 212 153 L 441 153"
-        stroke="rgba(255,255,255,0.18)"
-        strokeWidth={1.2}
-        strokeLinecap="round"
+        d="M 172 147 C 180 145.5 189 145 197 145.6 L 202 148 C 194 151 186 152.5 178 153 Z"
+        fill="rgba(2,6,23,0.12)"
       />
+
+      {/* Glazing band (trim + seals) */}
       <path
-        d="M 222 139 C 286 126 381 128 448 143"
-        fill="none"
-        stroke={`url(#${ids.glassReflection})`}
+        d={DLO_PATH}
+        fill="rgba(2,6,23,0.85)"
+        stroke="rgba(15,23,42,0.7)"
         strokeWidth={1.4}
-        strokeLinecap="round"
+        strokeLinejoin="round"
       />
-      <motion.path
-        d="M 225 134 C 286 122 379 124 446 140"
-        fill="none"
-        stroke="rgba(255,255,255,0.16)"
-        strokeWidth={1}
-        strokeLinecap="round"
-        strokeDasharray="42 260"
-        animate={{ strokeDashoffset: [0, -260], opacity: [0.1, 0.42, 0.1] }}
-        transition={{ duration: 6.8, repeat: Infinity, ease: 'easeInOut' }}
+
+      {/* State-tinted panes, clipped to the glass opening */}
+      <g clipPath={`url(#${ids.dloClip})`}>
+        <rect x={196} y={84} width={100} height={64} fill={windowFill(wFD, glassClosedRef)} />
+        <rect x={316} y={84} width={96} height={60} fill={windowFill(wRD, glassClosedRef)} />
+        {/* Fixed quarter glass (does not open) */}
+        <rect x={434} y={84} width={50} height={52} fill={glassClosedRef} />
+        {/* Headrest silhouettes */}
+        <rect x={252} y={116} width={9} height={13} rx={3.5} fill="rgba(5,8,18,0.5)" />
+        <rect x={362} y={108} width={9} height={13} rx={3.5} fill="rgba(5,8,18,0.5)" />
+        {/* B-pillar and quarter divider trim */}
+        <rect x={297} y={84} width={16} height={60} fill="rgba(2,6,23,0.85)" />
+        <rect x={415} y={84} width={16} height={56} fill="rgba(2,6,23,0.85)" />
+        <path
+          d="M 232 118 C 300 98 380 94 460 108"
+          fill="none"
+          stroke={`url(#${ids.glassReflection})`}
+          strokeWidth={1.4}
+          strokeLinecap="round"
+        />
+        <motion.path
+          d="M 236 114 C 300 95 378 91 456 105"
+          fill="none"
+          stroke="rgba(255,255,255,0.16)"
+          strokeWidth={1}
+          strokeLinecap="round"
+          strokeDasharray="42 260"
+          animate={{ strokeDashoffset: [0, -260], opacity: [0.1, 0.42, 0.1] }}
+          transition={{ duration: 6.8, repeat: Infinity, ease: 'easeInOut' }}
+        />
+      </g>
+
+      {/* Liftgate glass wedge under the body-color spoiler */}
+      <path
+        d="M 481 108.5 L 541 130.5 C 535 133.5 526 134 519 131.5 L 474 114 Z"
+        fill="rgba(6,10,20,0.85)"
       />
+
+      {/* Beltline trim (black, chrome-delete) */}
       <path
-        d="M 348 116 L 334 148"
+        d="M 202 145.6 C 290 141.5 380 136 432 132 C 452 129.5 468 121 479 114.5"
         fill="none"
-        stroke="rgba(2,6,23,0.45)"
-        strokeWidth={2}
+        stroke="rgba(2,6,23,0.5)"
+        strokeWidth={1.3}
         strokeLinecap="round"
       />
+      </>)}
+
+      {/* Per-window state underline along the beltline. On the photo only
+          open/partial states draw — the photo already shows closed glass. */}
+      {(!photo || fdActive) && (
+        <path
+          d="M 206 144.6 C 240 143 268 141.6 296 140.1"
+          fill="none"
+          stroke={windowStroke(wFD)}
+          strokeWidth={photo ? 2 : 1.4}
+          strokeLinecap="round"
+        />
+      )}
+      {(!photo || rdActive) && (
+        <path
+          d="M 316 139 C 348 137.4 380 135.4 410 133.6"
+          fill="none"
+          stroke={windowStroke(wRD)}
+          strokeWidth={photo ? 2 : 1.4}
+          strokeLinecap="round"
+        />
+      )}
+
       {passengerAlert && (
         <motion.path
-          d="M 210 141 C 268 126 363 126 449 144"
+          d="M 236 116 C 290 97 340 90 390 92.5 C 420 95.5 450 103 476 112"
           fill="none"
           stroke={C.amber}
           strokeWidth={2}
@@ -671,17 +795,17 @@ function SideWindows({
       <InteractiveHotspot
         enabled={interactive}
         x={198}
-        y={101}
-        width={118}
-        height={55}
+        y={92}
+        width={98}
+        height={50}
         label={`Front driver window: ${windowLabel(wFD)}`}
       />
       <InteractiveHotspot
         enabled={interactive}
-        x={320}
-        y={101}
-        width={132}
-        height={55}
+        x={316}
+        y={90}
+        width={96}
+        height={46}
         label={`Rear driver window: ${windowLabel(wRD)}`}
       />
       <title>
@@ -696,22 +820,24 @@ function DoorOverlay({
   open,
   label,
   interactive,
+  photo,
 }: {
   kind: 'front' | 'rear';
   open: boolean | null;
   label: string;
   interactive?: boolean;
+  photo?: boolean;
 }) {
   const isFront = kind === 'front';
   const seam = isFront
-    ? { x1: 318, y1: 153, x2: 307, y2: 223, handleX: 254, handleY: 174 }
-    : { x1: 444, y1: 153, x2: 450, y2: 222, handleX: 374, handleY: 174 };
+    ? { d: 'M 306 141 C 302 176 300 210 299 243', handleX: 243, handleY: 157 }
+    : { d: 'M 434 133 C 432 146 430 158 428 170', handleX: 350, handleY: 150 };
   const doorPath = isFront
-    ? 'M 318 154 L 232 138 L 213 217 L 307 224 Z'
-    : 'M 444 154 L 501 140 L 514 216 L 450 224 Z';
+    ? 'M 306 141 L 220 130 L 206 232 L 299 246 Z'
+    : 'M 434 131 L 498 118 L 510 215 L 438 236 Z';
   const hotspot = isFront
-    ? { x: 208, y: 151, width: 112, height: 76, side: 'left' as const }
-    : { x: 330, y: 151, width: 124, height: 76, side: 'right' as const };
+    ? { x: 206, y: 148, width: 100, height: 92, side: 'left' as const }
+    : { x: 310, y: 142, width: 124, height: 98, side: 'right' as const };
 
   return (
     <g>
@@ -729,23 +855,29 @@ function DoorOverlay({
           />
         )}
       </AnimatePresence>
-      <line
-        x1={seam.x1}
-        y1={seam.y1}
-        x2={seam.x2}
-        y2={seam.y2}
-        stroke={doorStroke(open)}
-        strokeWidth={open ? 2 : 1}
-        strokeDasharray={open ? undefined : '4,4'}
-      />
-      <rect
-        x={seam.handleX}
-        y={seam.handleY}
-        width={17}
-        height={4}
-        rx={2}
-        fill={open ? C.doorOpen : 'rgba(255,255,255,0.16)'}
-      />
+      {/* On the photo, the closed seam/handle are already in the render —
+          draw them only when the door is open. */}
+      {(!photo || open) && (
+        <path
+          d={seam.d}
+          fill="none"
+          stroke={doorStroke(open)}
+          strokeWidth={open ? 2 : 1}
+          strokeDasharray={open ? undefined : '4,4'}
+        />
+      )}
+      {(!photo || open) && (
+        <rect
+          x={seam.handleX}
+          y={seam.handleY}
+          width={21}
+          height={4.4}
+          rx={2.2}
+          fill={open ? C.doorOpen : 'rgba(2,6,23,0.5)'}
+          stroke="rgba(255,255,255,0.14)"
+          strokeWidth={0.6}
+        />
+      )}
       <InteractiveHotspot
         enabled={interactive}
         x={hotspot.x}
@@ -773,7 +905,7 @@ function PassengerDoorAlerts({
     <g>
       {passengerFront && (
         <motion.path
-          d="M 318 154 L 233 136"
+          d="M 306 140.5 C 276 142.5 246 144.5 218 146.2"
           fill="none"
           stroke={C.doorOpen}
           strokeWidth={2}
@@ -784,7 +916,7 @@ function PassengerDoorAlerts({
       )}
       {passengerRear && (
         <motion.path
-          d="M 444 154 L 501 138"
+          d="M 434 132 C 448 130 466 122 480 113.5"
           fill="none"
           stroke={C.doorOpen}
           strokeWidth={2}
@@ -802,11 +934,13 @@ function HeadlightGlows({
   hazards,
   turnSignal,
   driveIn = false,
+  photo,
 }: {
   on: boolean | null;
   hazards: boolean | null;
   turnSignal: TurnSignalState;
   driveIn?: boolean;
+  photo?: boolean;
 }) {
   const { ids } = useTwinCtx();
   const flashing = hazards === true || turnSignal === 'left' || turnSignal === 'both';
@@ -814,34 +948,39 @@ function HeadlightGlows({
 
   return (
     <g>
-      <path
-        d="M 52 188 C 67 181 85 179 101 183"
-        fill={`url(#${ids.headlightLens})`}
-        stroke={headlightsActive ? C.headlightOn : C.headlightOff}
-        strokeWidth={2.5}
-        strokeLinecap="round"
-      />
-      <path
-        d="M 56 191 C 69 185 86 183 99 186"
-        fill="none"
-        stroke="rgba(147,197,253,0.55)"
-        strokeWidth={1}
-        strokeLinecap="round"
-      />
+      {/* Smoked headlight lens + DRL (the photo already shows them) */}
+      {!photo && (
+        <>
+          <path
+            d="M 55 180 C 62 174.5 74 168 87 163.5 C 91.5 162.2 93.5 164 91 166.8 C 80 172 68 178.5 59 182.5 C 55.5 183.5 53 182.5 55 180 Z"
+            fill={`url(#${ids.headlightLens})`}
+            stroke={headlightsActive ? C.headlightOn : 'rgba(15,23,42,0.6)'}
+            strokeWidth={headlightsActive ? 1 : 0.7}
+          />
+          <path
+            d="M 56.5 178.5 C 64 173 76 166.8 89 162.8"
+            fill="none"
+            stroke={headlightsActive ? C.headlightOn : 'rgba(235,245,255,0.95)'}
+            strokeWidth={1.6}
+            strokeLinecap="round"
+          />
+          <circle cx={57.5} cy={179.5} r={1.6} fill="rgba(235,245,255,0.9)" />
+        </>
+      )}
       {headlightsActive && (
         <>
           <motion.ellipse
-            cx={72}
-            cy={186}
-            rx={17}
-            ry={7}
+            cx={66}
+            cy={181}
+            rx={16}
+            ry={6}
             fill={C.headlightGlow}
             filter={`url(#${ids.glow})`}
             animate={{ opacity: driveIn ? [0.1, 0.95, 0.22, 0.85, 0.28] : [0.35, 0.85, 0.35] }}
             transition={driveIn ? { duration: 1.35, ease: 'easeInOut' } : { duration: 2.8, repeat: Infinity, ease: 'easeInOut' }}
           />
           <motion.path
-            d="M 51 188 L 0 174 L 0 210 Z"
+            d="M 44 194 L 0 180 L 0 216 Z"
             fill={C.headlightBeam}
             animate={{ opacity: driveIn ? [0, 0.72, 0.18, 0.58, 0.12] : [0.45, 0.8, 0.45] }}
             transition={driveIn ? { duration: 1.35, ease: 'easeInOut' } : { duration: 2.8, repeat: Infinity, ease: 'easeInOut' }}
@@ -850,10 +989,10 @@ function HeadlightGlows({
       )}
       {flashing && (
         <motion.ellipse
-          cx={102}
-          cy={193}
-          rx={7}
-          ry={4}
+          cx={90}
+          cy={180}
+          rx={6}
+          ry={3.5}
           fill={C.amber}
           animate={{ opacity: [1, 0.15, 1] }}
           transition={{ duration: 0.8, repeat: Infinity }}
@@ -867,44 +1006,42 @@ function TaillightGlows({
   hazards,
   turnSignal,
   driveIn = false,
+  photo,
 }: {
   hazards: boolean | null;
   turnSignal: TurnSignalState;
   driveIn?: boolean;
+  photo?: boolean;
 }) {
   const { ids } = useTwinCtx();
   const flashing = hazards === true || turnSignal === 'right' || turnSignal === 'both';
 
   return (
     <g>
-      <path
-        d="M 527 158 C 542 162 554 171 560 183"
-        fill="rgba(127,29,29,0.25)"
-        stroke={flashing ? C.amber : C.taillightBase}
-        strokeWidth={3.2}
-        strokeLinecap="round"
-      />
-      <path
-        d="M 531 167 C 543 172 553 178 559 185"
-        fill="none"
-        stroke={C.taillightActive}
-        strokeWidth={1.8}
-        strokeLinecap="round"
-        opacity={0.7}
-      />
-      <path
-        d="M 532 161 C 543 165 554 173 559 181 C 549 177 540 172 531 169"
-        fill="none"
-        stroke="rgba(248,113,113,0.55)"
-        strokeWidth={1.2}
-        strokeLinecap="round"
-      />
+      {/* Wrap-around taillight lens (the photo already shows it) */}
+      {!photo && (
+        <>
+          <path
+            d="M 538.5 141 C 543 140.5 547 143 548.5 146.5 C 549.5 150 549 153.5 547 155.5 C 544 156.2 540.5 154.5 539 151.5 C 537.8 148 538 144 538.5 141 Z"
+            fill={`url(#${ids.taillightGrad})`}
+            stroke={flashing ? C.amber : 'rgba(248,113,113,0.5)'}
+            strokeWidth={0.9}
+          />
+          <path
+            d="M 540 143.5 C 543.5 143.2 546 145.2 547 148.5"
+            fill="none"
+            stroke="rgba(255,90,90,0.95)"
+            strokeWidth={1.4}
+            strokeLinecap="round"
+          />
+        </>
+      )}
       {flashing && (
         <motion.path
-          d="M 527 158 C 542 162 554 171 560 183"
+          d="M 538.5 141 C 543 140.5 547 143 548.5 146.5 C 549.5 150 549 153.5 547 155.5 C 544 156.2 540.5 154.5 539 151.5 C 537.8 148 538 144 538.5 141 Z"
           fill="none"
           stroke={C.amber}
-          strokeWidth={3.2}
+          strokeWidth={2}
           strokeLinecap="round"
           animate={{ opacity: [1, 0.15, 1] }}
           transition={{ duration: 0.8, repeat: Infinity }}
@@ -913,20 +1050,20 @@ function TaillightGlows({
       {driveIn && (
         <>
           <motion.ellipse
-            cx={546}
-            cy={174}
-            rx={24}
-            ry={10}
+            cx={543}
+            cy={148}
+            rx={18}
+            ry={9}
             fill={C.taillightActive}
             filter={`url(#${ids.glow})`}
             animate={{ opacity: [0, 0.95, 0.18, 0.9, 0.22] }}
             transition={{ delay: 1.2, duration: 0.75, ease: 'easeOut' }}
           />
           <motion.path
-            d="M 527 158 C 542 162 554 171 560 183"
+            d="M 538.5 141 C 543 140.5 547 143 548.5 146.5 C 549.5 150 549 153.5 547 155.5"
             fill="none"
             stroke={C.taillightActive}
-            strokeWidth={4.2}
+            strokeWidth={3.6}
             strokeLinecap="round"
             animate={{ opacity: [0, 1, 0.2, 1, 0.35] }}
             transition={{ delay: 1.2, duration: 0.75, ease: 'easeOut' }}
@@ -941,21 +1078,27 @@ function ChargePortIndicator({
   open,
   charging,
   interactive,
+  photo,
 }: {
   open: boolean | null;
   charging: boolean;
   interactive?: boolean;
+  photo?: boolean;
 }) {
   const { bodyAccent } = useTwinCtx();
-  const cx = 498;
-  const cy = 160;
+  const cx = 532;
+  const cy = 136;
   const fill = charging || open ? C.chargeGreenFill : C.neutral;
   const stroke = charging || open ? C.chargeGreen : bodyAccent.stroke;
   const label = charging ? 'Charging' : stateLabel(open, 'Open', 'Closed');
 
   return (
     <g>
-      <circle cx={cx} cy={cy} r={7} fill={fill} stroke={stroke} strokeWidth={1.3} />
+      {/* Charge-port flap sits above the taillight on the rear quarter.
+          On the photo it only draws when open/charging. */}
+      {(!photo || charging || open) && (
+        <rect x={527} y={132} width={10} height={7.5} rx={2} fill={fill} stroke={stroke} strokeWidth={0.9} />
+      )}
       {charging && (
         <>
           <motion.circle
@@ -977,13 +1120,13 @@ function ChargePortIndicator({
             transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
           />
           <path
-            d="M 498 153 L 492 162 L 498 162 L 495 169 L 505 158 L 499 158 Z"
+            d="M 532 129.5 L 526.5 138 L 532 138 L 529 144.5 L 538.5 134 L 533 134 Z"
             fill={C.chargeGreen}
           />
         </>
       )}
       {open && !charging && (
-        <circle cx={cx} cy={cy} r={11} fill="none" stroke={C.chargeGreen} strokeWidth={0.8} />
+        <circle cx={cx} cy={cy} r={9} fill="none" stroke={C.chargeGreen} strokeWidth={0.8} />
       )}
       <InteractiveHotspot
         enabled={interactive}
@@ -1008,8 +1151,8 @@ function SecurityOverlay({
   interactive?: boolean;
 }) {
   const iconSize = 18;
-  const cx = 322;
-  const cy = 132;
+  const cx = 320;
+  const cy = 114;
   const sentryY = cy - 23;
 
   return (
@@ -1069,7 +1212,7 @@ function DriverSeatIndicator({ occupied }: { occupied: boolean | null }) {
   if (!occupied) return null;
 
   return (
-    <ellipse cx={246} cy={137} rx={9} ry={12} fill={C.seatOccupied} stroke="rgba(34,211,238,0.35)" />
+    <ellipse cx={268} cy={122} rx={8.5} ry={11.5} fill={C.seatOccupied} stroke="rgba(34,211,238,0.35)" />
   );
 }
 
@@ -1086,8 +1229,9 @@ function SvgDefs({ paint, ids }: { paint: PaintPalette; ids: TwinIds }) {
           <feMergeNode in="SourceGraphic" />
         </feMerge>
       </filter>
-      {/* Paint-derived: body + lower shadow + 4 surface variants share the
-          paint's body / lower / surface stops. Mirror uses paint.mirror. */}
+      <clipPath id={ids.bodyClip}><path d={BODY_PATH} /></clipPath>
+      <clipPath id={ids.dloClip}><path d={DLO_INNER_PATH} /></clipPath>
+      {/* Paint-derived gradients */}
       <linearGradient id={ids.bodyGrad} x1="0" y1="0" x2="0" y2="1">
         <stop offset="0%" stopColor={paint.body[0]} />
         <stop offset="28%" stopColor={paint.body[1]} />
@@ -1099,31 +1243,11 @@ function SvgDefs({ paint, ids }: { paint: PaintPalette; ids: TwinIds }) {
         <stop offset="48%" stopColor={paint.lower[1]} />
         <stop offset="100%" stopColor={paint.lower[2]} />
       </linearGradient>
-      <linearGradient id={ids.hoodSurface} x1="0" y1="0" x2="1" y2="1">
-        <stop offset="0%" stopColor={paint.surface[0]} />
-        <stop offset="48%" stopColor={paint.surface[1]} />
-        <stop offset="100%" stopColor={paint.surface[2]} />
-      </linearGradient>
-      <linearGradient id={ids.frontDoorSurface} x1="0" y1="0" x2="1" y2="1">
+      <linearGradient id={ids.hoodSheen} x1="0" y1="0" x2="1" y2="1">
         <stop offset="0%" stopColor={paint.surface[0]} />
         <stop offset="48%" stopColor={paint.surface[1]} />
         <stop offset="100%" stopColor={paint.surface[2]} />
       </linearGradient>
-      <linearGradient id={ids.rearDoorSurface} x1="0" y1="0" x2="1" y2="1">
-        <stop offset="0%" stopColor={paint.surface[0]} />
-        <stop offset="48%" stopColor={paint.surface[1]} />
-        <stop offset="100%" stopColor={paint.surface[2]} />
-      </linearGradient>
-      <linearGradient id={ids.quarterSurface} x1="0" y1="0" x2="1" y2="1">
-        <stop offset="0%" stopColor={paint.surface[0]} />
-        <stop offset="52%" stopColor={paint.surface[1]} />
-        <stop offset="100%" stopColor={paint.surface[2]} />
-      </linearGradient>
-      <linearGradient id={ids.rockerDepth} x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stopColor={paint.lower[0]} />
-        <stop offset="52%" stopColor={paint.lower[1]} />
-        <stop offset="100%" stopColor={paint.lower[2]} />
-      </linearGradient>
       <linearGradient id={ids.mirrorGrad} x1="0" y1="0" x2="1" y2="1">
         <stop offset="0%" stopColor={paint.mirror[0]} />
         <stop offset="45%" stopColor={paint.mirror[1]} />
@@ -1147,29 +1271,42 @@ function SvgDefs({ paint, ids }: { paint: PaintPalette; ids: TwinIds }) {
         <stop offset="36%" stopColor="rgba(255,255,255,0.34)" />
         <stop offset="100%" stopColor="rgba(255,255,255,0.02)" />
       </linearGradient>
-      <linearGradient id={ids.glassGrad} x1="0" y1="0" x2="0.8" y2="1">
-        <stop offset="0%" stopColor="rgba(148,163,184,0.34)" />
-        <stop offset="42%" stopColor="rgba(15,23,42,0.42)" />
-        <stop offset="100%" stopColor="rgba(2,6,23,0.72)" />
+      {/* Tinted glass reads dark at the top, brighter near the beltline
+          (matches the value structure of a real render). */}
+      <linearGradient id={ids.glassGrad} x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stopColor="rgba(5,10,22,0.88)" />
+        <stop offset="62%" stopColor="rgba(24,36,58,0.62)" />
+        <stop offset="100%" stopColor="rgba(95,120,150,0.4)" />
+      </linearGradient>
+      <linearGradient id={ids.lowReflection} x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stopColor="rgba(255,255,255,0)" />
+        <stop offset="50%" stopColor="rgba(255,255,255,0.15)" />
+        <stop offset="100%" stopColor="rgba(255,255,255,0)" />
+      </linearGradient>
+      <linearGradient id={ids.windshieldGrad} x1="0" y1="0" x2="1" y2="0.35">
+        <stop offset="0%" stopColor="rgba(186,210,235,0.45)" />
+        <stop offset="100%" stopColor="rgba(15,23,42,0.55)" />
       </linearGradient>
-      <linearGradient id={ids.headlightLens} x1="0" y1="0" x2="1" y2="1">
-        <stop offset="0%" stopColor="rgba(255,255,255,0.3)" />
-        <stop offset="55%" stopColor="rgba(147,197,253,0.18)" />
-        <stop offset="100%" stopColor="rgba(255,255,255,0.05)" />
+      {/* Smoked headlight / taillight lenses — the bright accents come from
+          the DRL strip and taillight core strokes, not the lens fill. */}
+      <linearGradient id={ids.headlightLens} x1="0" y1="0" x2="1" y2="0.3">
+        <stop offset="0%" stopColor="rgba(90,115,145,0.85)" />
+        <stop offset="55%" stopColor="rgba(35,48,68,0.85)" />
+        <stop offset="100%" stopColor="rgba(12,18,32,0.85)" />
       </linearGradient>
-      <radialGradient id={ids.rimGrad} cx="45%" cy="40%" r="65%">
-        <stop offset="0%" stopColor="rgba(71,85,105,0.62)" />
-        <stop offset="50%" stopColor="rgba(15,23,42,0.9)" />
-        <stop offset="100%" stopColor="rgba(0,0,0,0.96)" />
-      </radialGradient>
-      <radialGradient id={ids.rimDepth} cx="42%" cy="38%" r="68%">
-        <stop offset="0%" stopColor="rgba(226,232,240,0.22)" />
-        <stop offset="48%" stopColor="rgba(51,65,85,0.42)" />
-        <stop offset="100%" stopColor="rgba(0,0,0,0.92)" />
+      <linearGradient id={ids.taillightGrad} x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stopColor="rgba(130,25,30,0.92)" />
+        <stop offset="55%" stopColor="rgba(85,14,18,0.92)" />
+        <stop offset="100%" stopColor="rgba(50,8,10,0.92)" />
+      </linearGradient>
+      <radialGradient id={ids.rimGrad} cx="42%" cy="38%" r="66%">
+        <stop offset="0%" stopColor="rgba(190,200,215,0.7)" />
+        <stop offset="52%" stopColor="rgba(90,105,128,0.85)" />
+        <stop offset="100%" stopColor="rgba(15,23,42,0.95)" />
       </radialGradient>
-      <radialGradient id={ids.tireOuter} cx="42%" cy="35%" r="70%">
-        <stop offset="0%" stopColor="rgba(51,65,85,0.72)" />
-        <stop offset="46%" stopColor="rgba(2,6,23,0.96)" />
+      <radialGradient id={ids.tireOuter} cx="40%" cy="35%" r="72%">
+        <stop offset="0%" stopColor="rgba(46,55,70,0.9)" />
+        <stop offset="55%" stopColor="rgba(6,9,16,0.98)" />
         <stop offset="100%" stopColor="rgba(0,0,0,1)" />
       </radialGradient>
     </defs>
@@ -1201,6 +1338,7 @@ export function VehicleTwin({
   vehicleId,
   exteriorColor,
   paint: paintOverride,
+  model,
 }: VehicleTwinProps) {
   const width = SIZE_MAP[size];
   const height = Math.round(width * ASPECT_RATIO);
@@ -1212,6 +1350,27 @@ export function VehicleTwin({
   const { paint: resolvedPaint } = useVehiclePaint(vehicleId ?? null, colorSource);
   const paint = paintOverride ?? resolvedPaint ?? FALLBACK_PAINT;
 
+  // Photo mode: Tesla's own configurator side render in the twin's paint,
+  // with the live state indicators overlaid. Falls back to the hand-drawn
+  // SVG twin whenever the image cannot load (offline / CSP / endpoint gone).
+  const [photoState, setPhotoState] = useState<'loading' | 'ready' | 'failed'>('loading');
+  const photoUrl = useMemo(() => buildCompositorUrl(paint.id, model), [paint.id, model]);
+  const photoOn = photoState === 'ready';
+
+  // Align the photo with the SVG overlay: the twin geometry was traced from
+  // this exact render, so image carLeft..carRight ↔ viewBox x 43..556 and
+  // image ground ↔ viewBox y 263 (viewBox min-y 52).
+  const u = width / VIEWBOX_WIDTH; // CSS px per viewBox unit
+  const unitsPerImgPx = (556 - 43) / (COMPOSITOR_METRICS.carRight - COMPOSITOR_METRICS.carLeft);
+  const imgStyle = {
+    position: 'absolute' as const,
+    width: COMPOSITOR_METRICS.imgWidth * unitsPerImgPx * u,
+    left: (43 - COMPOSITOR_METRICS.carLeft * unitsPerImgPx) * u,
+    top: ((263 - VIEWBOX_MIN_Y) - COMPOSITOR_METRICS.ground * unitsPerImgPx) * u,
+    opacity: photoOn ? 1 : 0,
+    transition: 'opacity 200ms ease',
+  };
+
   // Per-instance gradient ids — prevents <defs> id collisions when two
   // twins render on the same page with different paints.
   const reactId = useId();
@@ -1234,29 +1393,41 @@ export function VehicleTwin({
   return (
     <TwinContext.Provider value={ctxValue}>
       <motion.div
-        className={cn('inline-flex items-center justify-center', className)}
+        className={cn('relative inline-flex items-center justify-center overflow-hidden', className)}
+        style={{ width, height }}
         role="img"
         aria-label="Vehicle digital twin showing current physical state"
         initial={driveIn ? { x: '115%', opacity: 0.18, scale: 0.96 } : false}
         animate={driveIn ? { x: 0, opacity: 1, scale: 1 } : undefined}
         transition={driveIn ? { duration: DRIVE_IN_DURATION, ease: 'easeOut' } : undefined}
       >
+        {photoState !== 'failed' && (
+          <img
+            src={photoUrl}
+            alt=""
+            aria-hidden="true"
+            draggable={false}
+            style={imgStyle}
+            onLoad={() => setPhotoState('ready')}
+            onError={() => setPhotoState('failed')}
+          />
+        )}
         <svg
           viewBox={`0 ${VIEWBOX_MIN_Y} ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
           width={width}
           height={height}
           xmlns="http://www.w3.org/2000/svg"
-          className="select-none"
+          className="select-none relative"
         >
           <SvgDefs paint={paint} ids={ids} />
-          <title>Tesla-inspired performance crossover side view digital twin</title>
-          <desc>Original scalable layered SVG vehicle illustration with dynamic telemetry overlays for doors, windows, lights, lock, sentry mode, and charging status.</desc>
-          <GroundShadow />
+          <title>Tesla side view digital twin</title>
+          <desc>Vehicle side view with dynamic telemetry overlays for doors, windows, lights, lock, sentry mode, and charging status.</desc>
+          {!photoOn && <GroundShadow />}
           {isCharging && <ChargingUnderglow />}
           <g id="body">
-            <BodyShell frunkOpen={frunkOpen} trunkOpen={trunkOpen} interactive={interactive} />
-            <Body3DDetails />
-            <BodyReflections />
+            <BodyShell frunkOpen={frunkOpen} trunkOpen={trunkOpen} interactive={interactive} photo={photoOn} />
+            {!photoOn && <BodyDetails />}
+            {!photoOn && <BodyReflections />}
           </g>
           <g id="windows">
             <SideWindows
@@ -1265,6 +1436,7 @@ export function VehicleTwin({
               windowRD={windowRD}
               windowRP={windowRP}
               interactive={interactive}
+              photo={photoOn}
             />
           </g>
           <g id="doors">
@@ -1277,12 +1449,14 @@ export function VehicleTwin({
               open={doors.driverRear}
               label="Driver Rear"
               interactive={interactive}
+              photo={photoOn}
             />
             <DoorOverlay
               kind="front"
               open={doors.driverFront}
               label="Driver Front"
               interactive={interactive}
+              photo={photoOn}
             />
           </g>
           <DriverSeatIndicator occupied={driverSeatOccupied} />
@@ -1291,14 +1465,17 @@ export function VehicleTwin({
               open={chargePortOpen}
               charging={isCharging}
               interactive={interactive}
+              photo={photoOn}
             />
-            <HeadlightGlows on={headlights} hazards={hazards} turnSignal={turnSignal} driveIn={driveIn} />
-            <TaillightGlows hazards={hazards} turnSignal={turnSignal} driveIn={driveIn} />
-          </g>
-          <g id="wheels">
-            <WheelSVG cx={132} cy={226} driveIn={driveIn} driving={isDriving} />
-            <WheelSVG cx={430} cy={226} driveIn={driveIn} driving={isDriving} />
+            <HeadlightGlows on={headlights} hazards={hazards} turnSignal={turnSignal} driveIn={driveIn} photo={photoOn} />
+            <TaillightGlows hazards={hazards} turnSignal={turnSignal} driveIn={driveIn} photo={photoOn} />
           </g>
+          {!photoOn && (
+            <g id="wheels">
+              <WheelSVG cx={FRONT_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
+              <WheelSVG cx={REAR_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
+            </g>
+          )}
           <SecurityOverlay locked={locked} sentryMode={sentryMode} interactive={interactive} />
         </svg>
       </motion.div>
diff --git a/web/src/features/dashboard/widgets/DigitalTwinMiniWidget.tsx b/web/src/features/dashboard/widgets/DigitalTwinMiniWidget.tsx
index 52d3c0ac86..16e04ce7a0 100644
--- a/web/src/features/dashboard/widgets/DigitalTwinMiniWidget.tsx
+++ b/web/src/features/dashboard/widgets/DigitalTwinMiniWidget.tsx
@@ -64,6 +64,7 @@ export default function DigitalTwinMiniWidget({ vehicleId, size }: WidgetProps)
               size="sm"
               vehicleId={vehicle?.id}
               exteriorColor={vehicle?.exterior_color}
+              model={vehicle?.model}
             />
           </div>
 
diff --git a/web/src/features/dashboard/widgets/DigitalTwinWidget.tsx b/web/src/features/dashboard/widgets/DigitalTwinWidget.tsx
index 6d8f9bc7b9..9f96a79fae 100644
--- a/web/src/features/dashboard/widgets/DigitalTwinWidget.tsx
+++ b/web/src/features/dashboard/widgets/DigitalTwinWidget.tsx
@@ -86,6 +86,7 @@ export default function DigitalTwinWidget({ vehicleId, size }: WidgetProps) {
               size={twinSize}
               vehicleId={vehicle?.id}
               exteriorColor={vehicle?.exterior_color}
+              model={vehicle?.model}
               driveIn
               className="relative z-10 drop-shadow-2xl"
             />
diff --git a/web/src/features/vehicles/pages/DigitalTwinPage.tsx b/web/src/features/vehicles/pages/DigitalTwinPage.tsx
index a7b49f9dda..e2a6610636 100644
--- a/web/src/features/vehicles/pages/DigitalTwinPage.tsx
+++ b/web/src/features/vehicles/pages/DigitalTwinPage.tsx
@@ -278,6 +278,7 @@ export default function DigitalTwinPage() {
                     driveIn
                     vehicleId={vehicle?.id}
                     exteriorColor={vehicle?.exterior_color}
+                    model={vehicle?.model}
                   />
                   {twinState.lastUpdated ? (
                     <Text as="p" variant="caption" className="mt-4 text-center">
diff --git a/web/src/lib/teslaCompositor.ts b/web/src/lib/teslaCompositor.ts
new file mode 100644
index 0000000000..fc216e71cd
--- /dev/null
+++ b/web/src/lib/teslaCompositor.ts
@@ -0,0 +1,78 @@
+/**
+ * Tesla configurator "compositor" image support for the Digital Twin.
+ *
+ * The compositor is the same public endpoint the Tesla configurator and
+ * mobile app use to render studio images of a car. We request the SIDE
+ * view in the twin's paint color and overlay live telemetry indicators on
+ * top of it (see `VehicleTwin`). When the image cannot load (offline, CSP,
+ * endpoint change), the twin falls back to its hand-drawn SVG rendering.
+ */
+
+import type { PaintPaletteId } from './vehicleColors';
+
+/** Tesla option codes for the 5 stock paints, per compositor `options=`. */
+export const COMPOSITOR_PAINT_CODES: Record<PaintPaletteId, string> = {
+  'pearl-white': '$PPSW',
+  'midnight-silver': '$PMNG',
+  'deep-blue': '$PPSB',
+  'solid-black': '$PBSB',
+  'red-multicoat': '$PPMR',
+};
+
+export type CompositorModelCode = 'my' | 'm3' | 'ms' | 'mx';
+
+/**
+ * Map a Tesla `Vehicle.model` string (e.g. "modely", "Model Y", "Y") to a
+ * compositor model code. Forgiving on formatting; defaults to Model Y.
+ */
+export function compositorModelCode(model?: string | null): CompositorModelCode {
+  const m = (model ?? '').toLowerCase().replace(/[\s_-]/g, '');
+  if (m.includes('model3') || m.endsWith('3')) return 'm3';
+  if (m.includes('models') || m === 'ms' || m === 's') return 'ms';
+  if (m.includes('modelx') || m === 'mx' || m === 'x') return 'mx';
+  return 'my';
+}
+
+/** Trim + wheel codes known to produce a valid render per model. */
+const MODEL_OPTION_CODES: Record<CompositorModelCode, { trim: string; wheels: string }> = {
+  my: { trim: '$MTY07', wheels: '$WY19B' },
+  m3: { trim: '$MT322', wheels: '$W38B' },
+  ms: { trim: '$MTS10', wheels: '$WS90' },
+  mx: { trim: '$MTX10', wheels: '$WX00' },
+};
+
+/**
+ * Build the SIDE-view compositor URL for a paint + model. The `$`/`,`
+ * characters are deliberately left unencoded — that is the URL shape the
+ * configurator itself emits.
+ */
+export function buildCompositorUrl(
+  paintId: PaintPaletteId,
+  model?: string | null,
+  size = 1400,
+): string {
+  const code = compositorModelCode(model);
+  const { trim, wheels } = MODEL_OPTION_CODES[code];
+  const paint = COMPOSITOR_PAINT_CODES[paintId];
+  return (
+    'https://static-assets.tesla.com/configurator/compositor'
+    + `?context=design_studio_2&options=${trim},${paint},${wheels},$INPB0`
+    + `&view=SIDE&model=${code}&size=${size}&bkba_opt=1`
+  );
+}
+
+/**
+ * Measured geometry of the Model Y SIDE render (alpha-channel trace at the
+ * image's natural 1440×810 basis): where the car sits inside the bitmap.
+ * The twin's SVG geometry was traced from the same render, so these values
+ * let the overlay SVG and the photo share one coordinate system:
+ * image `carLeft..carRight` ↔ viewBox x `43..556`, image `ground` ↔
+ * viewBox y `263`.
+ */
+export const COMPOSITOR_METRICS = {
+  imgWidth: 1440,
+  imgHeight: 810,
+  carLeft: 308,
+  carRight: 1129,
+  ground: 517,
+} as const;
diff --git a/web/src/lib/vehicleColors.ts b/web/src/lib/vehicleColors.ts
index 949f556a66..fb7298b343 100644
--- a/web/src/lib/vehicleColors.ts
+++ b/web/src/lib/vehicleColors.ts
@@ -70,11 +70,14 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
     labelKey: 'paint.pearlWhite',
     defaultLabel: 'Pearl White Multi-Coat',
     swatch: '#e9ecf2',
+    // Near-opaque stops: the body must read as a solid painted surface on
+    // the dark UI, not a translucent tint (value structure comes from the
+    // shading overlays in VehicleTwin, not from see-through stops).
     body: [
-      'rgba(255,255,255,0.95)',
-      'rgba(226,232,240,0.85)',
-      'rgba(148,163,184,0.65)',
-      'rgba(71,85,105,0.55)',
+      'rgba(255,255,255,0.97)',
+      'rgba(244,247,252,0.96)',
+      'rgba(228,234,243,0.95)',
+      'rgba(188,198,214,0.9)',
     ],
     lower: [
       'rgba(71,85,105,0.18)',
@@ -82,17 +85,17 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
       'rgba(0,0,0,0.78)',
     ],
     surface: [
-      'rgba(255,255,255,0.4)',
-      'rgba(203,213,225,0.18)',
-      'rgba(71,85,105,0.16)',
+      'rgba(255,255,255,0.5)',
+      'rgba(235,240,248,0.25)',
+      'rgba(160,175,195,0.18)',
     ],
     mirror: [
-      'rgba(255,255,255,0.78)',
-      'rgba(148,163,184,0.6)',
-      'rgba(51,65,85,0.7)',
+      'rgba(255,255,255,0.95)',
+      'rgba(230,236,244,0.9)',
+      'rgba(150,163,182,0.85)',
     ],
-    bodyStroke: 'rgba(255,255,255,0.22)',
-    bodyHighlight: 'rgba(255,255,255,0.28)',
+    bodyStroke: 'rgba(255,255,255,0.25)',
+    bodyHighlight: 'rgba(255,255,255,0.32)',
     bodyChrome: 'rgba(241,245,249,0.9)',
     bodyShadow: 'rgba(15,23,42,0.42)',
     isDark: false,
@@ -103,10 +106,10 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
     defaultLabel: 'Midnight Silver Metallic',
     swatch: '#5b6675',
     body: [
-      'rgba(203,213,225,0.92)',
-      'rgba(125,144,166,0.82)',
-      'rgba(63,82,107,0.78)',
-      'rgba(15,23,42,0.85)',
+      'rgba(216,226,238,0.95)',
+      'rgba(160,174,192,0.94)',
+      'rgba(105,120,142,0.94)',
+      'rgba(56,68,88,0.92)',
     ],
     lower: [
       'rgba(51,65,85,0.16)',
@@ -114,14 +117,14 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
       'rgba(0,0,0,0.82)',
     ],
     surface: [
-      'rgba(226,232,240,0.32)',
-      'rgba(100,116,139,0.18)',
+      'rgba(226,232,240,0.36)',
+      'rgba(100,116,139,0.2)',
       'rgba(15,23,42,0.22)',
     ],
     mirror: [
-      'rgba(241,245,249,0.74)',
-      'rgba(100,116,139,0.6)',
-      'rgba(15,23,42,0.78)',
+      'rgba(226,234,244,0.95)',
+      'rgba(150,163,182,0.9)',
+      'rgba(60,72,92,0.88)',
     ],
     bodyStroke: 'rgba(203,213,225,0.2)',
     bodyHighlight: 'rgba(255,255,255,0.22)',
@@ -135,10 +138,10 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
     defaultLabel: 'Deep Blue Metallic',
     swatch: '#1f3a72',
     body: [
-      'rgba(96,165,250,0.92)',
-      'rgba(37,99,235,0.85)',
-      'rgba(29,52,124,0.82)',
-      'rgba(15,23,42,0.92)',
+      'rgba(120,168,240,0.95)',
+      'rgba(58,110,205,0.94)',
+      'rgba(30,62,132,0.94)',
+      'rgba(14,28,66,0.93)',
     ],
     lower: [
       'rgba(30,41,99,0.18)',
@@ -151,9 +154,9 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
       'rgba(15,23,75,0.32)',
     ],
     mirror: [
-      'rgba(219,234,254,0.7)',
-      'rgba(96,134,200,0.55)',
-      'rgba(15,23,42,0.78)',
+      'rgba(180,208,248,0.95)',
+      'rgba(70,115,195,0.9)',
+      'rgba(18,32,70,0.88)',
     ],
     bodyStroke: 'rgba(147,197,253,0.22)',
     bodyHighlight: 'rgba(191,219,254,0.28)',
@@ -167,10 +170,10 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
     defaultLabel: 'Solid Black',
     swatch: '#0d1117',
     body: [
-      'rgba(120,134,156,0.78)',
-      'rgba(48,58,76,0.86)',
-      'rgba(20,26,38,0.92)',
-      'rgba(0,0,0,0.96)',
+      'rgba(145,158,176,0.92)',
+      'rgba(66,77,96,0.94)',
+      'rgba(28,35,48,0.96)',
+      'rgba(6,9,15,0.97)',
     ],
     lower: [
       'rgba(15,17,22,0.22)',
@@ -183,9 +186,9 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
       'rgba(0,0,0,0.42)',
     ],
     mirror: [
-      'rgba(226,232,240,0.7)',
-      'rgba(71,85,105,0.55)',
-      'rgba(0,0,0,0.86)',
+      'rgba(150,163,182,0.92)',
+      'rgba(66,77,96,0.9)',
+      'rgba(8,12,20,0.9)',
     ],
     bodyStroke: 'rgba(148,163,184,0.18)',
     bodyHighlight: 'rgba(226,232,240,0.32)',
@@ -199,10 +202,10 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
     defaultLabel: 'Red Multi-Coat',
     swatch: '#a3001a',
     body: [
-      'rgba(248,113,113,0.92)',
-      'rgba(220,38,38,0.88)',
-      'rgba(127,17,17,0.85)',
-      'rgba(40,5,5,0.92)',
+      'rgba(250,120,120,0.96)',
+      'rgba(226,48,48,0.94)',
+      'rgba(155,24,24,0.93)',
+      'rgba(70,10,10,0.93)',
     ],
     lower: [
       'rgba(74,7,7,0.2)',
@@ -215,9 +218,9 @@ export const PAINT_PALETTES: Record<PaintPaletteId, PaintPalette> = {
       'rgba(74,7,7,0.36)',
     ],
     mirror: [
-      'rgba(254,226,226,0.7)',
-      'rgba(190,72,72,0.55)',
-      'rgba(40,5,5,0.82)',
+      'rgba(250,140,140,0.95)',
+      'rgba(200,55,55,0.9)',
+      'rgba(85,12,12,0.88)',
     ],
     bodyStroke: 'rgba(254,202,202,0.22)',
     bodyHighlight: 'rgba(255,228,228,0.3)',

From 053f78e59676787002f72f403286449283dd6a88 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Tue, 11 Aug 2026 23:48:37 -0700
Subject: [PATCH 12/15] UPdated

---
 web/src/components/vehicles/VehicleTwin.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/src/components/vehicles/VehicleTwin.tsx b/web/src/components/vehicles/VehicleTwin.tsx
index 6742e80eb2..56c45efff1 100644
--- a/web/src/components/vehicles/VehicleTwin.tsx
+++ b/web/src/components/vehicles/VehicleTwin.tsx
@@ -1365,6 +1365,9 @@ export function VehicleTwin({
   const imgStyle = {
     position: 'absolute' as const,
     width: COMPOSITOR_METRICS.imgWidth * unitsPerImgPx * u,
+    // Tailwind preflight sets `img { max-width: 100% }`, which would clamp
+    // the image to the wrapper and break the car/overlay alignment.
+    maxWidth: 'none' as const,
     left: (43 - COMPOSITOR_METRICS.carLeft * unitsPerImgPx) * u,
     top: ((263 - VIEWBOX_MIN_Y) - COMPOSITOR_METRICS.ground * unitsPerImgPx) * u,
     opacity: photoOn ? 1 : 0,

From a0a9b2f6d5bf79628272f11a34126c0d5c7b8f0b Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Wed, 12 Aug 2026 00:05:10 -0700
Subject: [PATCH 13/15] fix(web): animate vehicle twin wheel visibility

Keep vector wheels visible during drive-in and driving, then fade them out when the parked photo settles so the photo's wheels are revealed.
---
 web/src/components/vehicles/VehicleTwin.tsx | 34 ++++++++++++++++-----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/web/src/components/vehicles/VehicleTwin.tsx b/web/src/components/vehicles/VehicleTwin.tsx
index 56c45efff1..7a586165c9 100644
--- a/web/src/components/vehicles/VehicleTwin.tsx
+++ b/web/src/components/vehicles/VehicleTwin.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useId, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useId, useMemo, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Lock, Unlock, Shield } from 'lucide-react';
 import { cn } from '@/lib/cn';
@@ -1357,6 +1357,18 @@ export function VehicleTwin({
   const photoUrl = useMemo(() => buildCompositorUrl(paint.id, model), [paint.id, model]);
   const photoOn = photoState === 'ready';
 
+  // The photo's wheels can't rotate, so the vector wheels (traced to sit
+  // exactly on top of them) take over whenever spin is needed: during the
+  // drive-in and while driving. Once the drive-in settles and the car is
+  // parked, they fade out to reveal the photo's real wheels.
+  const [driveInSettled, setDriveInSettled] = useState(!driveIn);
+  useEffect(() => {
+    if (!driveIn) return;
+    const t = setTimeout(() => setDriveInSettled(true), (DRIVE_IN_DURATION + 0.15) * 1000);
+    return () => clearTimeout(t);
+  }, [driveIn]);
+  const showSvgWheels = !photoOn || isDriving || (driveIn && !driveInSettled);
+
   // Align the photo with the SVG overlay: the twin geometry was traced from
   // this exact render, so image carLeft..carRight ↔ viewBox x 43..556 and
   // image ground ↔ viewBox y 263 (viewBox min-y 52).
@@ -1473,12 +1485,20 @@ export function VehicleTwin({
             <HeadlightGlows on={headlights} hazards={hazards} turnSignal={turnSignal} driveIn={driveIn} photo={photoOn} />
             <TaillightGlows hazards={hazards} turnSignal={turnSignal} driveIn={driveIn} photo={photoOn} />
           </g>
-          {!photoOn && (
-            <g id="wheels">
-              <WheelSVG cx={FRONT_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
-              <WheelSVG cx={REAR_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
-            </g>
-          )}
+          <AnimatePresence>
+            {showSvgWheels && (
+              <motion.g
+                id="wheels"
+                initial={false}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.35 }}
+              >
+                <WheelSVG cx={FRONT_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
+                <WheelSVG cx={REAR_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
+              </motion.g>
+            )}
+          </AnimatePresence>
           <SecurityOverlay locked={locked} sentryMode={sentryMode} interactive={interactive} />
         </svg>
       </motion.div>

From d9d7c9273bc32f82125a45709a024824e5de1a33 Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Wed, 12 Aug 2026 08:44:57 -0700
Subject: [PATCH 14/15] Added Wheels

---
 web/src/components/vehicles/VehicleTwin.tsx | 139 ++++++++++++++++----
 1 file changed, 110 insertions(+), 29 deletions(-)

diff --git a/web/src/components/vehicles/VehicleTwin.tsx b/web/src/components/vehicles/VehicleTwin.tsx
index 7a586165c9..fcbc055456 100644
--- a/web/src/components/vehicles/VehicleTwin.tsx
+++ b/web/src/components/vehicles/VehicleTwin.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useId, useMemo, useState } from 'react';
+import { createContext, useContext, useId, useMemo, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Lock, Unlock, Shield } from 'lucide-react';
 import { cn } from '@/lib/cn';
@@ -1216,6 +1216,79 @@ function DriverSeatIndicator({ occupied }: { occupied: boolean | null }) {
   );
 }
 
+/**
+ * Spins the photo's own wheel: a circular crop of the compositor image,
+ * centered on the wheel, rotating in place over the base photo. Because it
+ * is the same bitmap and the wheel design is 5-fold symmetric, the crop is
+ * invisible while parked and the drive-in spin (−1080° = 15 × −72°) ends
+ * pixel-identical to the photo.
+ */
+function PhotoWheelSpinner({
+  cx,
+  u,
+  imgWidth,
+  imgLeft,
+  imgTop,
+  photoUrl,
+  driveIn,
+  driving,
+}: {
+  cx: number;
+  u: number;
+  imgWidth: number;
+  imgLeft: number;
+  imgTop: number;
+  photoUrl: string;
+  driveIn: boolean;
+  driving: boolean;
+}) {
+  const R = 34; // crop radius in viewBox units — covers the rim, stays on the tire
+  const size = 2 * R * u;
+  const left = (cx - R) * u;
+  const top = (WHEEL_CY - R - VIEWBOX_MIN_Y) * u;
+  const shouldSpin = driveIn || driving;
+
+  return (
+    <motion.div
+      aria-hidden="true"
+      style={{
+        position: 'absolute',
+        left,
+        top,
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        overflow: 'hidden',
+        pointerEvents: 'none',
+      }}
+      initial={shouldSpin ? { rotate: 0 } : false}
+      animate={{ rotate: shouldSpin ? (driving ? -360 : -1080) : 0 }}
+      transition={
+        shouldSpin
+          ? {
+            duration: driving ? 0.9 : DRIVE_IN_DURATION,
+            repeat: driving ? Infinity : 0,
+            ease: 'linear',
+          }
+          : { duration: 0 }
+      }
+    >
+      <img
+        src={photoUrl}
+        alt=""
+        draggable={false}
+        style={{
+          position: 'absolute',
+          maxWidth: 'none',
+          width: imgWidth,
+          left: imgLeft - left,
+          top: imgTop - top,
+        }}
+      />
+    </motion.div>
+  );
+}
+
 function SvgDefs({ paint, ids }: { paint: PaintPalette; ids: TwinIds }) {
   return (
     <defs>
@@ -1357,31 +1430,23 @@ export function VehicleTwin({
   const photoUrl = useMemo(() => buildCompositorUrl(paint.id, model), [paint.id, model]);
   const photoOn = photoState === 'ready';
 
-  // The photo's wheels can't rotate, so the vector wheels (traced to sit
-  // exactly on top of them) take over whenever spin is needed: during the
-  // drive-in and while driving. Once the drive-in settles and the car is
-  // parked, they fade out to reveal the photo's real wheels.
-  const [driveInSettled, setDriveInSettled] = useState(!driveIn);
-  useEffect(() => {
-    if (!driveIn) return;
-    const t = setTimeout(() => setDriveInSettled(true), (DRIVE_IN_DURATION + 0.15) * 1000);
-    return () => clearTimeout(t);
-  }, [driveIn]);
-  const showSvgWheels = !photoOn || isDriving || (driveIn && !driveInSettled);
 
   // Align the photo with the SVG overlay: the twin geometry was traced from
   // this exact render, so image carLeft..carRight ↔ viewBox x 43..556 and
   // image ground ↔ viewBox y 263 (viewBox min-y 52).
   const u = width / VIEWBOX_WIDTH; // CSS px per viewBox unit
   const unitsPerImgPx = (556 - 43) / (COMPOSITOR_METRICS.carRight - COMPOSITOR_METRICS.carLeft);
+  const imgWidth = COMPOSITOR_METRICS.imgWidth * unitsPerImgPx * u;
+  const imgLeft = (43 - COMPOSITOR_METRICS.carLeft * unitsPerImgPx) * u;
+  const imgTop = ((263 - VIEWBOX_MIN_Y) - COMPOSITOR_METRICS.ground * unitsPerImgPx) * u;
   const imgStyle = {
     position: 'absolute' as const,
-    width: COMPOSITOR_METRICS.imgWidth * unitsPerImgPx * u,
+    width: imgWidth,
     // Tailwind preflight sets `img { max-width: 100% }`, which would clamp
     // the image to the wrapper and break the car/overlay alignment.
     maxWidth: 'none' as const,
-    left: (43 - COMPOSITOR_METRICS.carLeft * unitsPerImgPx) * u,
-    top: ((263 - VIEWBOX_MIN_Y) - COMPOSITOR_METRICS.ground * unitsPerImgPx) * u,
+    left: imgLeft,
+    top: imgTop,
     opacity: photoOn ? 1 : 0,
     transition: 'opacity 200ms ease',
   };
@@ -1427,6 +1492,30 @@ export function VehicleTwin({
             onError={() => setPhotoState('failed')}
           />
         )}
+        {photoOn && (
+          <>
+            <PhotoWheelSpinner
+              cx={FRONT_WHEEL_CX}
+              u={u}
+              imgWidth={imgWidth}
+              imgLeft={imgLeft}
+              imgTop={imgTop}
+              photoUrl={photoUrl}
+              driveIn={driveIn}
+              driving={isDriving}
+            />
+            <PhotoWheelSpinner
+              cx={REAR_WHEEL_CX}
+              u={u}
+              imgWidth={imgWidth}
+              imgLeft={imgLeft}
+              imgTop={imgTop}
+              photoUrl={photoUrl}
+              driveIn={driveIn}
+              driving={isDriving}
+            />
+          </>
+        )}
         <svg
           viewBox={`0 ${VIEWBOX_MIN_Y} ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
           width={width}
@@ -1485,20 +1574,12 @@ export function VehicleTwin({
             <HeadlightGlows on={headlights} hazards={hazards} turnSignal={turnSignal} driveIn={driveIn} photo={photoOn} />
             <TaillightGlows hazards={hazards} turnSignal={turnSignal} driveIn={driveIn} photo={photoOn} />
           </g>
-          <AnimatePresence>
-            {showSvgWheels && (
-              <motion.g
-                id="wheels"
-                initial={false}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.35 }}
-              >
-                <WheelSVG cx={FRONT_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
-                <WheelSVG cx={REAR_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
-              </motion.g>
-            )}
-          </AnimatePresence>
+          {!photoOn && (
+            <g id="wheels">
+              <WheelSVG cx={FRONT_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
+              <WheelSVG cx={REAR_WHEEL_CX} cy={WHEEL_CY} driveIn={driveIn} driving={isDriving} />
+            </g>
+          )}
           <SecurityOverlay locked={locked} sentryMode={sentryMode} interactive={interactive} />
         </svg>
       </motion.div>

From 1affea7b51453e73c646bf975e8baa124f1033ea Mon Sep 17 00:00:00 2001
From: Atul Gupta <iamatulmgupta@gmail.com>
Date: Wed, 12 Aug 2026 17:33:42 -0700
Subject: [PATCH 15/15] fix(web): stop wheel spinner drift on slow photo load
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shrink the wheel crop radius (34→28) so the crop stays strictly on the rim face; larger radii dragged the tire's baked-in lighting/aero deflector around the hub, reading as a wobbling second wheel.

Also gate the entry spin animation on photo load timing: if the vehicle photo arrives more than 700ms after mount, the drive-in slide has already finished, so skip the spin instead of playing it against an already-parked car.
---
 web/src/components/vehicles/VehicleTwin.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/src/components/vehicles/VehicleTwin.tsx b/web/src/components/vehicles/VehicleTwin.tsx
index fcbc055456..b97bc049b3 100644
--- a/web/src/components/vehicles/VehicleTwin.tsx
+++ b/web/src/components/vehicles/VehicleTwin.tsx
@@ -1242,7 +1242,11 @@ function PhotoWheelSpinner({
   driveIn: boolean;
   driving: boolean;
 }) {
-  const R = 34; // crop radius in viewBox units — covers the rim, stays on the tire
+  // Crop radius in viewBox units. Must stay strictly on the rim face:
+  // anything larger drags the tire's baked-in lighting — and, on the front
+  // wheel, the dark aero deflector ahead of the tire — around the hub,
+  // which reads as a wobbling second wheel.
+  const R = 28;
   const size = 2 * R * u;
   const left = (cx - R) * u;
   const top = (WHEEL_CY - R - VIEWBOX_MIN_Y) * u;
@@ -1430,6 +1434,12 @@ export function VehicleTwin({
   const photoUrl = useMemo(() => buildCompositorUrl(paint.id, model), [paint.id, model]);
   const photoOn = photoState === 'ready';
 
+  // Entry spin only makes sense while the drive-in slide is still running.
+  // If the photo arrives late (slow network), the car is already parked —
+  // spinning the wheels then would look broken.
+  const [mountedAt] = useState(() => performance.now());
+  const [entrySpinOk, setEntrySpinOk] = useState(false);
+
 
   // Align the photo with the SVG overlay: the twin geometry was traced from
   // this exact render, so image carLeft..carRight ↔ viewBox x 43..556 and
@@ -1488,7 +1498,10 @@ export function VehicleTwin({
             aria-hidden="true"
             draggable={false}
             style={imgStyle}
-            onLoad={() => setPhotoState('ready')}
+            onLoad={() => {
+              setPhotoState('ready');
+              setEntrySpinOk(performance.now() - mountedAt < 700);
+            }}
             onError={() => setPhotoState('failed')}
           />
         )}
@@ -1501,7 +1514,7 @@ export function VehicleTwin({
               imgLeft={imgLeft}
               imgTop={imgTop}
               photoUrl={photoUrl}
-              driveIn={driveIn}
+              driveIn={driveIn && entrySpinOk}
               driving={isDriving}
             />
             <PhotoWheelSpinner
@@ -1511,7 +1524,7 @@ export function VehicleTwin({
               imgLeft={imgLeft}
               imgTop={imgTop}
               photoUrl={photoUrl}
-              driveIn={driveIn}
+              driveIn={driveIn && entrySpinOk}
               driving={isDriving}
             />
           </>