Merge pull request #5 from zvx-echo6/feat/auto-mode-frontend

feat(navi/ui): Auto mode chip + selected_mode badge

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
  */

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">

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,