Cars: create a car from a manufacturer service, with a per-car data tab

A car can now be imported straight from the account its owner already has
with the manufacturer, and every reading that service exposes shows up on
the car's own tab. MyToyota is the first provider.

API Server — internal/api/vehicleproviders.go adds a generic layer over a
plugin that can enumerate vehicles and read data about them. Adding the
next manufacturer is one vehicleSource adapter plus a line in
vehicleSources(): no new endpoints, no Web App changes.

  GET  /api/vehicle-providers                     providers + connect state
  GET  /api/vehicle-providers/{p}/vehicles        the caller's vehicles
  POST /api/vehicle-providers/{p}/import          create a car from one
  GET  /api/cars/{id}/provider                    live snapshot for the tab
  POST /api/cars/{id}/provider                    link / unlink a car
  POST /api/cars/{id}/provider/sync               re-apply provider data

Two properties shape it. Credentials are always the caller's own, resolved
through the same global -> org -> user cascade as the integration settings,
so a shared car shows provider data only when that vehicle is on the
viewer's account — the owner's credentials are never borrowed. And upstream
shapes are not modelled: these are unofficial APIs, so the layer searches
payloads by key name for the readings worth promoting (odometer, fuel,
battery, range) and flattens the rest to dotted key/value pairs alongside
the raw JSON. A renamed field costs one blank value, not a broken page.

The Toyota gate and its wording now live in toyotaSource, so the older
/api/integrations/toyota/vehicles endpoint and the new ones cannot drift.

Manager.InvokeBatchWith shares one transient plugin instance across a batch
of actions. The tab pulls seven capabilities, and InvokeWith builds a fresh
instance per call — which for a connector that authenticates lazily means a
fresh OAuth login per call. Batching logs in once.

cars gains provider + provider_vehicle_id (schema.go and
setup-pocketbase.mjs both). carPayload deliberately omits them, so an
ordinary car edit can neither reassign the car nor break its link;
carProviderPayload writes the link on its own.

Web App — Dashboard grows an "import from service" button beside "add car",
shown only once an account is connected, opening CarImportModal: pick the
vehicle, choose what to pull (identity / fuel type / dates / odometer, all
on by default), import. ProviderPanel becomes the car's first tab, ahead of
Information, labelled with the service: headline readings, the vehicle
record, one card per capability with its raw response, and an offer to take
the provider's odometer when it is ahead of the stored one. On an unlinked
car the tab instead offers to link it, VIN-matched. Info stays the default
selection — landing on the provider tab would fire a login on every car
page view. Full en/pl/da translations.

Tests cover the payload walking, Toyota normalization, import-selection
defaults, and — through the real handler chain against a stand-in
PocketBase — that every route is registered and that a closed gate is soft
on a listing (200 + a reason the UI can show) but hard on a write (4xx, so
a caller cannot read the reply as a created car).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Web App/web/src/views/CarDetail.vue

@@ -23,6 +23,7 @@ import MaintenanceFormModal from "../components/MaintenanceFormModal.vue";
 import DocumentFormModal from "../components/DocumentFormModal.vue";
 import ReminderFormModal from "../components/ReminderFormModal.vue";
 import ShareModal from "../components/ShareModal.vue";
+import ProviderPanel from "../components/ProviderPanel.vue";
 
 const props = defineProps({ id: { type: String, required: true } });
 const router = useRouter();
@@ -76,6 +77,23 @@ const isReadOnly = computed(() => car.value?.access === "read");
 
 const activeTab = ref("info");
 
+// Connected-service tab. It leads the bar — ahead of Information — because for a
+// car imported from a manufacturer account that is the live view of the car,
+// while everything to its right is the record the user keeps by hand.
+//
+// It shows for a linked car (labelled with the service, "MyToyota") and also for
+// an unlinked one as long as the user has some account connected, where it offers
+// to link this car to a vehicle on it. A user with nothing connected never sees
+// the tab at all.
+const providers = ref([]);
+const providerLabel = computed(() => {
+  const linked = providers.value.find((p) => p.id === car.value?.provider);
+  return linked?.label || car.value?.provider || t("car.tabs.connected");
+});
+const showProviderTab = computed(
+  () => !!car.value?.provider || providers.value.some((p) => p.connected)
+);
+
 // Count of reminders wanting attention, surfaced on the tab so it is visible
 // without opening it — the whole point of a reminder.
 const dueReminders = computed(
@@ -85,6 +103,7 @@ const dueReminders = computed(
 // Computed, not a plain array: t() reads the reactive locale, so the tab labels
 // have to re-evaluate when the language changes.
 const TABS = computed(() => [
+  ...(showProviderTab.value ? [{ key: "provider", label: providerLabel.value }] : []),
   { key: "info", label: t("car.tabs.info") },
   { key: "services", label: t("car.tabs.services") },
   { key: "technical", label: t("car.tabs.technical") },
@@ -125,6 +144,14 @@ async function load() {
   } finally {
     loading.value = false;
   }
+
+  // Which manufacturer services the user has connected — it decides whether the
+  // connected-service tab appears. Fired separately and failure-tolerant: a
+  // plugin being down must not take the car page with it.
+  api
+    .listVehicleProviders()
+    .then((list) => (providers.value = list))
+    .catch(() => {});
 }
 
 function openAddService() {
@@ -364,6 +391,13 @@ async function onCarSaved(updated) {
   car.value = updated;
 }
 
+// The provider panel writes to the car too — it links/unlinks the connected
+// service and can take the odometer from it, which moves km-triggered reminders.
+async function onCarUpdated(updated) {
+  car.value = updated;
+  reminders.value = await api.listCarReminders(props.id);
+}
+
 function openDeleteCar() {
   deleteConfirmText.value = "";
   showDeleteCar.value = true;
@@ -470,8 +504,18 @@ onMounted(load);
         </button>
       </div>
 
+      <!-- Connected service (MyToyota, …). Mounted only when its tab is open, so
+           opening a car never triggers a login against the manufacturer. -->
+      <ProviderPanel
+        v-if="activeTab === 'provider'"
+        :car="car"
+        :can-write="canWrite"
+        :provider-label="car.provider ? providerLabel : ''"
+        @car-updated="onCarUpdated"
+      />
+
       <!-- Information -->
-      <section v-if="activeTab === 'info'">
+      <section v-else-if="activeTab === 'info'">
         <div class="dh-card p-6">
           <dl class="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
             <div><dt class="eyebrow">{{ t("car.info.oilSpec") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ car.oilSpec || t("common.empty") }}</dd></div>

Web App/web/src/views/Dashboard.vue

@@ -5,12 +5,18 @@ import { api } from "../api";
 import { formatDate, formatKm, serviceStatus } from "../lib/format.js";
 import { t, tSplit } from "../i18n";
 import CarFormModal from "../components/CarFormModal.vue";
+import CarImportModal from "../components/CarImportModal.vue";
 
 const router = useRouter();
 const cars = ref([]);
 const loading = ref(true);
 const error = ref("");
 const showAdd = ref(false);
+const showImport = ref(false);
+
+// Importing only makes sense once a manufacturer account is connected, so the
+// button appears only then rather than leading to a dead end.
+const canImport = ref(false);
 
 async function load() {
   loading.value = true;
@@ -37,6 +43,15 @@ function onSaved(car) {
   router.push({ name: "car", params: { id: car.id } });
 }
 
+// An imported car lands on its own page like a hand-added one. A warning means a
+// field the service couldn't supply (an odometer it doesn't report); the car is
+// created either way, so say what to fill in rather than block the import.
+function onImported(car, warnings) {
+  showImport.value = false;
+  if (warnings?.includes("odometer")) alert(t("forms.import.warningOdometer"));
+  router.push({ name: "car", params: { id: car.id } });
+}
+
 // Service-life progress: how far the car is through its km service interval.
 // Returns a { pct, tone } or null when there isn't enough data to compute it.
 const TONE_COLOR = {
@@ -55,7 +70,14 @@ function serviceLife(car) {
   return { pct, tone: TONE_COLOR[serviceStatus(car.latest, car).key] || TONE_COLOR.unknown };
 }
 
-onMounted(load);
+onMounted(() => {
+  load();
+  // Failure-tolerant: a plugin problem must not stop the garage from rendering.
+  api
+    .listVehicleProviders()
+    .then((list) => (canImport.value = list.some((p) => p.connected)))
+    .catch(() => {});
+});
 </script>
 
 <template>
@@ -66,10 +88,16 @@ onMounted(load);
         <h1 class="text-3xl font-bold tracking-[-0.03em] text-strong">{{ t("dashboard.title") }}</h1>
         <p class="mt-1 text-sm text-muted">{{ t("dashboard.subtitle") }}</p>
       </div>
-      <button class="dh-btn dh-btn-primary" @click="showAdd = true">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" /></svg>
-        {{ t("dashboard.addCar") }}
-      </button>
+      <div class="flex flex-wrap items-center gap-2">
+        <button v-if="canImport" class="dh-btn dh-btn-ghost" @click="showImport = true">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" /></svg>
+          {{ t("dashboard.importCar") }}
+        </button>
+        <button class="dh-btn dh-btn-primary" @click="showAdd = true">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" /></svg>
+          {{ t("dashboard.addCar") }}
+        </button>
+      </div>
     </div>
 
     <p v-if="error" class="mb-4 rounded-control bg-danger-soft px-4 py-3 text-sm font-medium text-danger">{{ error }}</p>
@@ -141,5 +169,11 @@ onMounted(load);
     </div>
 
     <CarFormModal v-if="showAdd" @saved="onSaved" @close="showAdd = false" />
+    <CarImportModal
+      v-if="showImport"
+      @saved="onImported"
+      @open-car="(id) => router.push({ name: 'car', params: { id } })"
+      @close="showImport = false"
+    />
   </div>
 </template>