show vehicle facts in passport

web/static/app.js

@@ -1985,9 +1985,60 @@ function updateScore() {
   document.querySelector("#scoreHint").textContent = car
     ? "Короткая сводка по полноте данных и готовности к обслуживанию."
     : t("Добавь авто и первую запись, чтобы видеть точные отчеты");
+  renderPassportVehicleSummary(car);
   renderScoreActions(state.vehicleScore?.missing_items || []);
 }
 
+function renderPassportVehicleSummary(car) {
+  const root = document.querySelector("#passportVehicleSummary");
+  if (!root) return;
+  if (!car) {
+    root.innerHTML = `
+      <div class="passport-vehicle-empty">
+        <strong>Выберите автомобиль</strong>
+        <span>Здесь появятся номер, VIN, пробег, заправка и ближайшее ТО.</span>
+      </div>
+    `;
+    return;
+  }
+  const highlights = state.selectedCarHighlights?.carId === car.id ? state.selectedCarHighlights : buildCarHighlights(car, [], []);
+  const identity = [car.make, car.model, car.trim, car.year].filter(Boolean).join(" ") || "Паспорт без деталей";
+  const plate = car.license_plate_display || car.plate_number || "номер не указан";
+  const vin = car.vin || "VIN не указан";
+  const oilSpec = [car.engine_oil_type, car.engine_oil_volume_l ? `${Number(car.engine_oil_volume_l).toLocaleString("ru-RU")} л` : ""]
+    .filter(Boolean)
+    .join(" · ");
+  const fuelAndOil = [car.fuel_type || "топливо не указано", oilSpec || "масло не указано"].join(" · ");
+  const rows = [
+    ["Одометр", highlights.odometer],
+    ["Последняя заправка", highlights.lastFuel],
+    ["Замена масла", highlights.lastOil],
+    ["До следующей", highlights.oilRemaining],
+  ];
+  root.innerHTML = `
+    <div class="passport-vehicle-main">
+      <div>
+        <strong>${escapeHtml(car.name)}</strong>
+        <span>${escapeHtml(identity)}</span>
+      </div>
+      <a class="passport-edit-link" href="/car_profile.html?car_id=${car.id}">Паспорт</a>
+    </div>
+    <div class="passport-vehicle-id">
+      <span>${escapeHtml(plate)}</span>
+      <span>${escapeHtml(vin)}</span>
+      <span>${escapeHtml(fuelAndOil)}</span>
+    </div>
+    <div class="passport-vehicle-facts">
+      ${rows.map(([label, value]) => `
+        <div>
+          <span>${label}</span>
+          <strong>${escapeHtml(value)}</strong>
+        </div>
+      `).join("")}
+    </div>
+  `;
+}
+
 function scoreLabel(quality, score) {
   if (quality === "high_confidence" || score >= 86) return "High-confidence passport";
   if (quality === "strong" || score >= 61) return "Strong profile";