From 89e8cff8ceb4bf6f53fbc50c942dab21d24f0da9 Mon Sep 17 00:00:00 2001
From: Matt <mj@k7zvx.com>
Date: Sun, 24 May 2026 09:00:47 +0000
Subject: [PATCH] feat(navi/ui): Auto mode chip + selected_mode badge

Relabel the auto chip to "Auto" (Zap icon) and the vehicle chip to "Drive";
render an "Auto chose <mode>" badge below the travel-mode row when the backend
returns selected_mode. Update routeMode/requestOffroute docs to list auto.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/api.js                         |  2 +-
 frontend/src/components/DirectionsPanel.jsx | 18 ++++++++++++++++--
 frontend/src/store.js                       |  2 +-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/src/api.js b/frontend/src/api.js
index bed21ec..388e000 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -331,7 +331,7 @@ const MVUM_URL = "/api/mvum"
  * Request an offroute route from the pathfinder API.
  * @param {object} start - { lat, lon }
  * @param {object} end - { lat, lon }
- * @param {string} mode - foot | mtb | atv | vehicle
+ * @param {string} mode - auto | foot | mtb | atv | vehicle
  * @param {string} boundaryMode - strict | pragmatic | emergency
  * @returns {Promise<object>} Offroute response with GeoJSON route
  */
diff --git a/frontend/src/components/DirectionsPanel.jsx b/frontend/src/components/DirectionsPanel.jsx
index a01f1c9..70ace30 100644
--- a/frontend/src/components/DirectionsPanel.jsx
+++ b/frontend/src/components/DirectionsPanel.jsx
@@ -8,13 +8,16 @@ import LocationInput from "./LocationInput"
 import ManeuverList from "./ManeuverList"
 
 const TRAVEL_MODES = [
-  { id: "auto", label: "Drive", Icon: Car },
+  { id: "auto", label: "Auto", Icon: Zap },
   { id: "foot", label: "Foot", Icon: Footprints },
   { id: "mtb", label: "MTB", Icon: Bike },
   { id: "atv", label: "ATV", Icon: Car },
-  { id: "vehicle", label: "4x4", Icon: Car },
+  { id: "vehicle", label: "Drive", Icon: Car },
 ]
 
+// Maps the backend's selected_mode to the chip label shown in the "Auto chose X" badge.
+const SELECTED_MODE_LABEL = { vehicle: "Drive", atv: "ATV", mtb: "MTB", foot: "Foot" }
+
 const BOUNDARY_MODES = [
   { id: "strict", label: "Strict", Icon: Shield, title: "Avoid barriers" },
   { id: "pragmatic", label: "Cross", Icon: AlertTriangle, title: "Cross with penalty" },
@@ -313,6 +316,17 @@ export default function DirectionsPanel({ onClose }) {
         })}
       </div>
 
+      {/* Auto mode: show which travel mode feasibility picked */}
+      {routeMode === "auto" && routeResult?.selected_mode && (
+        <div
+          className="flex items-center justify-center gap-1 py-1.5 text-xs rounded-lg"
+          style={{ background: "var(--accent-muted)", color: "var(--accent)" }}
+        >
+          <Zap size={14} />
+          <span>{`Auto chose ${SELECTED_MODE_LABEL[routeResult.selected_mode] || routeResult.selected_mode}`}</span>
+        </div>
+      )}
+
       {/* Boundary mode selector (only for non-auto modes) */}
       {routeMode !== "auto" && (
         <div className="flex gap-1">
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 069be9f..f988ed3 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -31,7 +31,7 @@ export const useStore = create((set, get) => ({
   routeStart: null, // { lat, lon, name }
   routeEnd: null, // { lat, lon, name }
   stops: [], // Intermediate waypoints only: [{ id, lat, lon, name }, ...]
-  routeMode: "auto", // foot | mtb | atv | vehicle
+  routeMode: "auto", // auto | foot | mtb | atv | vehicle
   boundaryMode: "strict", // strict | pragmatic | emergency
   routeResult: null, // Response from /api/offroute
   routeLoading: false,