feat: wilderness maneuvers, pick-from-map, distance formatting, place card panel

- Wilderness maneuvers render with compass arrows and cardinal directions
- Network maneuvers prefixed with transport mode (Drive/Walk/Ride)
- Distances under 1 mile show feet with commas
- Pick-from-map mode replaces auto-fill-on-focus (crosshair + toast)
- ESC cancels pick mode
- Place card slides out right during active routing
- Removed debug toasts

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

src/api.js

@@ -342,6 +342,7 @@ export async function requestOffroute(start, end, mode = "foot", boundaryMode =
     mode,
     boundary_mode: boundaryMode,
   }
+  console.log('[TRACE-API] requestOffroute body:', JSON.stringify(body))
 
   const controller = new AbortController()
   const timeout = setTimeout(() => controller.abort(), 120000) // 2 min timeout for complex routes

src/components/LocationInput.jsx

@@ -1,301 +1,321 @@
-import { useRef, useEffect, useCallback, useState } from "react"
+import { useRef, useEffect, useCallback, useState } from "react"
-import { MapPin, Crosshair, X, Navigation2, User, Star, Coffee, Fuel, ShoppingBag, Hotel, Building2 } from "lucide-react"
+import { MapPin, Crosshair, X, Navigation2, User, Star, Coffee, Fuel, ShoppingBag, Hotel, Building2, Target } from "lucide-react"
-import { useStore } from "../store"
+import toast from "react-hot-toast"
-import { searchGeocode } from "../api"
+import { useStore } from "../store"
-import { buildAddress } from "../utils/place"
+import { searchGeocode } from "../api"
-import { hasFeature } from "../config"
+import { buildAddress } from "../utils/place"
-
+import { hasFeature } from "../config"
-/** Parse coordinate input like "42.35, -114.30" */
+
-function parseCoordinates(input) {
+/** Parse coordinate input like "42.35, -114.30" */
-  if (!input) return null
+function parseCoordinates(input) {
-  const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
+  if (!input) return null
-  const match = input.trim().match(pattern)
+  const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
-  if (!match) return null
+  const match = input.trim().match(pattern)
-  const lat = parseFloat(match[1])
+  if (!match) return null
-  const lon = parseFloat(match[2])
+  const lat = parseFloat(match[1])
-  if (isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180) return null
+  const lon = parseFloat(match[2])
-  return { lat, lon }
+  if (isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180) return null
-}
+  return { lat, lon }
-
+}
-function CategoryIcon({ result, size = 14 }) {
+
-  const type = result.type || ""
+function CategoryIcon({ result, size = 14 }) {
-  const source = result.source || ""
+  const type = result.type || ""
-  if (result._isContact) return <User size={size} />
+  const source = result.source || ""
-  if (source === "nickname") return <Star size={size} />
+  if (result._isContact) return <User size={size} />
-  if (type === "coordinates") return <Crosshair size={size} />
+  if (source === "nickname") return <Star size={size} />
-  if (type === "locality" || type === "city") return <Building2 size={size} />
+  if (type === "coordinates") return <Crosshair size={size} />
-  const osmVal = result.raw?.osm_value || ""
+  if (type === "locality" || type === "city") return <Building2 size={size} />
-  if (osmVal.includes("cafe") || osmVal.includes("coffee")) return <Coffee size={size} />
+  const osmVal = result.raw?.osm_value || ""
-  if (osmVal.includes("fuel") || osmVal.includes("gas")) return <Fuel size={size} />
+  if (osmVal.includes("cafe") || osmVal.includes("coffee")) return <Coffee size={size} />
-  if (osmVal.includes("shop") || osmVal.includes("supermarket")) return <ShoppingBag size={size} />
+  if (osmVal.includes("fuel") || osmVal.includes("gas")) return <Fuel size={size} />
-  if (osmVal.includes("hotel") || osmVal.includes("motel")) return <Hotel size={size} />
+  if (osmVal.includes("shop") || osmVal.includes("supermarket")) return <ShoppingBag size={size} />
-  return <MapPin size={size} />
+  if (osmVal.includes("hotel") || osmVal.includes("motel")) return <Hotel size={size} />
-}
+  return <MapPin size={size} />
-
+}
-export default function LocationInput({
+
-  value,          // { lat, lon, name } or null
+export default function LocationInput({
-  onChange,       // (place) => void
+  value,          // { lat, lon, name } or null
-  placeholder,
+  onChange,       // (place) => void
-  icon,           // "origin" | "destination" | "stop"
+  placeholder,
-  fieldId,        // unique id for this field (for map click targeting)
+  icon,           // "origin" | "destination" | "stop"
-  onFocus,        // () => void
+  fieldId,        // unique id for this field (for map click targeting)
-  autoFocus,
+  onFocus,        // () => void
-}) {
+  autoFocus,
-  const inputRef = useRef(null)
+}) {
-  const [query, setQuery] = useState(value?.name || "")
+  const inputRef = useRef(null)
-  const [results, setResults] = useState([])
+  const [query, setQuery] = useState(value?.name || "")
-  const [loading, setLoading] = useState(false)
+  const [results, setResults] = useState([])
-  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(-1)
+  const [open, setOpen] = useState(false)
-  const debounceRef = useRef(null)
+  const [activeIndex, setActiveIndex] = useState(-1)
-  const abortRef = useRef(null)
+  const debounceRef = useRef(null)
-
+  const abortRef = useRef(null)
-  const contacts = useStore((s) => s.contacts)
+
-  const activeDirectionsField = useStore((s) => s.activeDirectionsField)
+  const contacts = useStore((s) => s.contacts)
-  const setActiveDirectionsField = useStore((s) => s.setActiveDirectionsField)
+  const activeDirectionsField = useStore((s) => s.activeDirectionsField)
-
+  const setActiveDirectionsField = useStore((s) => s.setActiveDirectionsField)
-  // Sync display value when external value changes
+  const pickingRouteField = useStore((s) => s.pickingRouteField)
-  useEffect(() => {
+  const setPickingRouteField = useStore((s) => s.setPickingRouteField)
-    if (value?.name && value.name !== query) {
+
-      setQuery(value.name)
+  // Sync display value when external value changes
-    } else if (!value && query && !open) {
+  useEffect(() => {
-      // Value cleared externally
+    if (value?.name && value.name !== query) {
-      setQuery("")
+      setQuery(value.name)
-    }
+    } else if (!value && query && !open) {
-  }, [value?.name, value?.lat, value?.lon])
+      // Value cleared externally
-
+      setQuery("")
-  const doSearch = useCallback(async (q) => {
+    }
-    if (abortRef.current) abortRef.current.abort()
+  }, [value?.name, value?.lat, value?.lon])
-
+
-    if (!q.trim()) {
+  const doSearch = useCallback(async (q) => {
-      setResults([])
+    if (abortRef.current) abortRef.current.abort()
-      setOpen(false)
+
-      setLoading(false)
+    if (!q.trim()) {
-      return
+      setResults([])
-    }
+      setOpen(false)
-
+      setLoading(false)
-    // Check coordinates first
+      return
-    const coords = parseCoordinates(q)
+    }
-    if (coords) {
+
-      const coordResult = {
+    // Check coordinates first
-        lat: coords.lat,
+    const coords = parseCoordinates(q)
-        lon: coords.lon,
+    if (coords) {
-        name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
+      const coordResult = {
-        address: "Coordinates",
+        lat: coords.lat,
-        type: "coordinates",
+        lon: coords.lon,
-        source: "coordinates",
+        name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
-        match_code: null,
+        address: "Coordinates",
-        raw: {},
+        type: "coordinates",
-      }
+        source: "coordinates",
-      setResults([coordResult])
+        match_code: null,
-      setOpen(true)
+        raw: {},
-      setLoading(false)
+      }
-      return
+      setResults([coordResult])
-    }
+      setOpen(true)
-
+      setLoading(false)
-    // Contact matches
+      return
-    let contactResults = []
+    }
-    if (hasFeature("has_contacts") && contacts.length > 0) {
+
-      const lower = q.trim().toLowerCase()
+    // Contact matches
-      contactResults = contacts
+    let contactResults = []
-        .filter((c) =>
+    if (hasFeature("has_contacts") && contacts.length > 0) {
-          (c.label || "").toLowerCase().startsWith(lower) ||
+      const lower = q.trim().toLowerCase()
-          (c.name || "").toLowerCase().startsWith(lower) ||
+      contactResults = contacts
-          (c.call_sign || "").toLowerCase().startsWith(lower)
+        .filter((c) =>
-        )
+          (c.label || "").toLowerCase().startsWith(lower) ||
-        .slice(0, 3)
+          (c.name || "").toLowerCase().startsWith(lower) ||
-        .map((c) => ({
+          (c.call_sign || "").toLowerCase().startsWith(lower)
-          lat: c.lat,
+        )
-          lon: c.lon,
+        .slice(0, 3)
-          name: c.label,
+        .map((c) => ({
-          address: c.address || c.name || "",
+          lat: c.lat,
-          type: "contact",
+          lon: c.lon,
-          source: "contacts",
+          name: c.label,
-          match_code: null,
+          address: c.address || c.name || "",
-          raw: { contact: c },
+          type: "contact",
-          _isContact: true,
+          source: "contacts",
-        }))
+          match_code: null,
-    }
+          raw: { contact: c },
-
+          _isContact: true,
-    const ctrl = new AbortController()
+        }))
-    abortRef.current = ctrl
+    }
-    setLoading(true)
+
-
+    const ctrl = new AbortController()
-    try {
+    abortRef.current = ctrl
-      const data = await searchGeocode(q.trim(), 5, ctrl.signal)
+    setLoading(true)
-      const combined = [...contactResults, ...(data.results || [])]
+
-      setResults(combined)
+    try {
-      setOpen(combined.length > 0)
+      const data = await searchGeocode(q.trim(), 5, ctrl.signal)
-      setActiveIndex(-1)
+      const combined = [...contactResults, ...(data.results || [])]
-    } catch (e) {
+      setResults(combined)
-      if (e.name !== "AbortError") {
+      setOpen(combined.length > 0)
-        if (contactResults.length > 0) {
+      setActiveIndex(-1)
-          setResults(contactResults)
+    } catch (e) {
-          setOpen(true)
+      if (e.name !== "AbortError") {
-        } else {
+        if (contactResults.length > 0) {
-          setResults([])
+          setResults(contactResults)
-          setOpen(false)
+          setOpen(true)
-        }
+        } else {
-      }
+          setResults([])
-    } finally {
+          setOpen(false)
-      setLoading(false)
+        }
-    }
+      }
-  }, [contacts])
+    } finally {
-
+      setLoading(false)
-  const handleChange = (e) => {
+    }
-    const val = e.target.value
+  }, [contacts])
-    setQuery(val)
+
-    if (debounceRef.current) clearTimeout(debounceRef.current)
+  const handleChange = (e) => {
-    debounceRef.current = setTimeout(() => doSearch(val), 150)
+    const val = e.target.value
-  }
+    setQuery(val)
-
+    if (debounceRef.current) clearTimeout(debounceRef.current)
-  const handleClear = () => {
+    debounceRef.current = setTimeout(() => doSearch(val), 150)
-    setQuery("")
+  }
-    setResults([])
+
-    setOpen(false)
+  const handleClear = () => {
-    onChange(null)
+    setQuery("")
-    inputRef.current?.focus()
+    setResults([])
-  }
+    setOpen(false)
-
+    onChange(null)
-  const selectResult = (result) => {
+    inputRef.current?.focus()
-    onChange({
+  }
-      lat: result.lat,
+
-      lon: result.lon,
+  const selectResult = (result) => {
-      name: result.name,
+    onChange({
-      source: result.source,
+      lat: result.lat,
-      matchCode: result.match_code,
+      lon: result.lon,
-    })
+      name: result.name,
-    setQuery(result.name)
+      source: result.source,
-    setResults([])
+      matchCode: result.match_code,
-    setOpen(false)
+    })
-    setActiveIndex(-1)
+    setQuery(result.name)
-  }
+    setResults([])
-
+    setOpen(false)
-  const handleKeyDown = (e) => {
+    setActiveIndex(-1)
-    if (!open || results.length === 0) {
+  }
-      if (e.key === "Escape") setOpen(false)
+
-      return
+  const handleKeyDown = (e) => {
-    }
+    if (!open || results.length === 0) {
-    switch (e.key) {
+      if (e.key === "Escape") setOpen(false)
-      case "ArrowDown":
+      return
-        e.preventDefault()
+    }
-        setActiveIndex((prev) => Math.min(prev + 1, results.length - 1))
+    switch (e.key) {
-        break
+      case "ArrowDown":
-      case "ArrowUp":
+        e.preventDefault()
-        e.preventDefault()
+        setActiveIndex((prev) => Math.min(prev + 1, results.length - 1))
-        setActiveIndex((prev) => Math.max(prev - 1, -1))
+        break
-        break
+      case "ArrowUp":
-      case "Enter":
+        e.preventDefault()
-        e.preventDefault()
+        setActiveIndex((prev) => Math.max(prev - 1, -1))
-        if (activeIndex >= 0 && activeIndex < results.length) {
+        break
-          selectResult(results[activeIndex])
+      case "Enter":
-        }
+        e.preventDefault()
-        break
+        if (activeIndex >= 0 && activeIndex < results.length) {
-      case "Escape":
+          selectResult(results[activeIndex])
-        e.preventDefault()
+        }
-        setOpen(false)
+        break
-        setActiveIndex(-1)
+      case "Escape":
-        break
+        e.preventDefault()
-    }
+        setOpen(false)
-  }
+        setActiveIndex(-1)
-
+        break
-  const handleFocus = () => {
+    }
-    setActiveDirectionsField(fieldId)
+  }
-    if (results.length > 0) setOpen(true)
+
-    onFocus?.()
+  const handleFocus = () => {
-  }
+    setActiveDirectionsField(fieldId)  // For styling only, not map clicks
-
+    if (results.length > 0) setOpen(true)
-  const handleBlur = () => {
+    onFocus?.()
-    // Delay to allow click on dropdown
+  }
-    setTimeout(() => setOpen(false), 150)
+
-  }
+  const handlePickFromMap = () => {
-
+    setPickingRouteField(fieldId)
-  const isActive = activeDirectionsField === fieldId
+    toast("Click map to set location", { icon: "🎯", duration: 3000 })
-
+    inputRef.current?.blur()  // Unfocus input so user focuses on map
-  const iconColor = icon === "origin" ? "#22c55e" : icon === "destination" ? "#ef4444" : "var(--text-tertiary)"
+  }
-
+
-  return (
+  const isPicking = pickingRouteField === fieldId
-    <div className="relative">
+
-      <div
+  const handleBlur = () => {
-        className="flex items-center gap-2 px-3 py-2 rounded-lg transition-all"
+    // Delay to allow click on dropdown
-        style={{
+    setTimeout(() => setOpen(false), 150)
-          background: "var(--bg-overlay)",
+  }
-          border: isActive ? "1px solid var(--accent)" : "1px solid var(--border)",
+
-        }}
+  const isActive = activeDirectionsField === fieldId
-      >
+
-        {icon === "origin" ? (
+  const iconColor = icon === "origin" ? "#22c55e" : icon === "destination" ? "#ef4444" : "var(--text-tertiary)"
-          <Navigation2 size={16} style={{ color: iconColor, transform: "rotate(45deg)" }} />
+
-        ) : (
+  return (
-          <MapPin size={16} style={{ color: iconColor }} />
+    <div className="relative">
-        )}
+      <div
-        <input
+        className="flex items-center gap-2 px-3 py-2 rounded-lg transition-all"
-          ref={inputRef}
+        style={{
-          type="text"
+          background: "var(--bg-overlay)",
-          value={query}
+          border: isActive ? "1px solid var(--accent)" : "1px solid var(--border)",
-          onChange={handleChange}
+        }}
-          onKeyDown={handleKeyDown}
+      >
-          onFocus={handleFocus}
+        {icon === "origin" ? (
-          onBlur={handleBlur}
+          <Navigation2 size={16} style={{ color: iconColor, transform: "rotate(45deg)" }} />
-          placeholder={placeholder}
+        ) : (
-          autoFocus={autoFocus}
+          <MapPin size={16} style={{ color: iconColor }} />
-          className="flex-1 bg-transparent text-sm outline-none"
+        )}
-          style={{ color: "var(--text-primary)" }}
+        <input
-        />
+          ref={inputRef}
-        {loading ? (
+          type="text"
-          <div
+          value={query}
-            className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+          onChange={handleChange}
-            style={{ borderColor: "var(--accent)", borderTopColor: "transparent" }}
+          onKeyDown={handleKeyDown}
-          />
+          onFocus={handleFocus}
-        ) : query ? (
+          onBlur={handleBlur}
-          <button onClick={handleClear} className="p-0.5" style={{ color: "var(--text-tertiary)" }}>
+          placeholder={placeholder}
-            <X size={14} />
+          autoFocus={autoFocus}
-          </button>
+          className="flex-1 bg-transparent text-sm outline-none"
-        ) : null}
+          style={{ color: "var(--text-primary)" }}
-      </div>
+        />
-
+        {/* Pick from map button */}
-      {open && results.length > 0 && (
+        <button
-        <ul
+          onClick={handlePickFromMap}
-          className="absolute z-50 mt-1 w-full rounded-lg overflow-hidden max-h-48 overflow-y-auto"
+          className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
-          style={{
+          style={{ color: isPicking ? "var(--accent)" : "var(--text-tertiary)" }}
-            background: "var(--bg-overlay)",
+          title="Pick location from map"
-            border: "1px solid var(--border)",
+        >
-            boxShadow: "var(--shadow-lg)",
+          <Target size={14} />
-          }}
+        </button>
-        >
+        {loading ? (
-          {results.map((r, i) => {
+          <div
-            const isPoi = r.type === "poi" && r.raw?.name
+            className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-            const isContact = r._isContact
+            style={{ borderColor: "var(--accent)", borderTopColor: "transparent" }}
-            const primary = isContact ? r.name : isPoi ? r.raw.name : r.name
+          />
-            const secondary = isContact ? (r.address || "") : isPoi ? buildAddress(r) : null
+        ) : query ? (
-            return (
+          <button onClick={handleClear} className="p-0.5" style={{ color: "var(--text-tertiary)" }}>
-              <li
+            <X size={14} />
-                key={`${r.lat}-${r.lon}-${i}`}
+          </button>
-                className="px-3 py-2 cursor-pointer text-sm"
+        ) : null}
-                style={{
+      </div>
-                  background: i === activeIndex ? "var(--accent-muted)" : "transparent",
+
-                  borderBottom: i < results.length - 1 ? "1px solid var(--border-subtle)" : "none",
+      {open && results.length > 0 && (
-                }}
+        <ul
-                onClick={() => selectResult(r)}
+          className="absolute z-50 mt-1 w-full rounded-lg overflow-hidden max-h-48 overflow-y-auto"
-                onMouseEnter={() => setActiveIndex(i)}
+          style={{
-              >
+            background: "var(--bg-overlay)",
-                <div className="flex items-center gap-2">
+            border: "1px solid var(--border)",
-                  <span style={{ color: isContact ? "var(--accent)" : "var(--text-tertiary)" }}>
+            boxShadow: "var(--shadow-lg)",
-                    <CategoryIcon result={r} />
+          }}
-                  </span>
+        >
-                  <span className="truncate flex-1" style={{ color: "var(--text-primary)" }}>
+          {results.map((r, i) => {
-                    {primary}
+            const isPoi = r.type === "poi" && r.raw?.name
-                  </span>
+            const isContact = r._isContact
-                </div>
+            const primary = isContact ? r.name : isPoi ? r.raw.name : r.name
-                {secondary && (
+            const secondary = isContact ? (r.address || "") : isPoi ? buildAddress(r) : null
-                  <div className="text-[11px] mt-0.5 ml-6 truncate" style={{ color: "var(--text-tertiary)" }}>
+            return (
-                    {secondary}
+              <li
-                  </div>
+                key={`${r.lat}-${r.lon}-${i}`}
-                )}
+                className="px-3 py-2 cursor-pointer text-sm"
-              </li>
+                style={{
-            )
+                  background: i === activeIndex ? "var(--accent-muted)" : "transparent",
-          })}
+                  borderBottom: i < results.length - 1 ? "1px solid var(--border-subtle)" : "none",
-        </ul>
+                }}
-      )}
+                onClick={() => selectResult(r)}
-    </div>
+                onMouseEnter={() => setActiveIndex(i)}
-  )
+              >
-}
+                <div className="flex items-center gap-2">
+                  <span style={{ color: isContact ? "var(--accent)" : "var(--text-tertiary)" }}>
+                    <CategoryIcon result={r} />
+                  </span>
+                  <span className="truncate flex-1" style={{ color: "var(--text-primary)" }}>
+                    {primary}
+                  </span>
+                </div>
+                {secondary && (
+                  <div className="text-[11px] mt-0.5 ml-6 truncate" style={{ color: "var(--text-tertiary)" }}>
+                    {secondary}
+                  </div>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </div>
+  )
+}

src/components/ManeuverList.jsx

@@ -1,13 +1,32 @@
 import {
   MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
   MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
-  GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle
+  GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle,
+  Compass, ArrowUp, ArrowUpRight, ArrowRight, ArrowDownRight, ArrowDown,
+  ArrowDownLeft, ArrowLeft, ArrowUpLeft, MapPin
 } from 'lucide-react'
 import { useStore } from '../store'
 
-function formatDistKm(km) {
+/**
-  const miles = km * 0.621371
+ * Format distance with commas for feet, one decimal for miles.
-  if (miles < 0.1) return Math.round(miles * 5280) + ' ft'
+ * Under 1 mile: "2,640 ft"
+ * 1+ miles: "1.3 mi"
+ */
+function formatDistance(distanceM, distanceKm) {
+  let meters = null
+  if (distanceM !== undefined && distanceM !== null) {
+    meters = distanceM
+  } else if (distanceKm !== undefined && distanceKm !== null) {
+    meters = distanceKm * 1000
+  }
+
+  if (meters === null) return ''
+
+  const miles = meters / 1609.34
+  if (miles < 1) {
+    const feet = Math.round(meters * 3.28084)
+    return feet.toLocaleString() + ' ft'
+  }
   return miles.toFixed(1) + ' mi'
 }
 
@@ -18,6 +37,51 @@ function formatTimeMin(minutes) {
   return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
 }
 
+// Compass arrow icon based on cardinal direction with rotation
+function CompassIcon({ cardinal, bearing, size = 16 }) {
+  // Use bearing to rotate arrow, or fall back to cardinal-based icon
+  if (bearing !== undefined && bearing !== null) {
+    return (
+      <ArrowUp
+        size={size}
+        strokeWidth={2}
+        style={{ transform: `rotate(${bearing}deg)` }}
+      />
+    )
+  }
+
+  const props = { size, strokeWidth: 2 }
+  const arrowMap = {
+    'N': ArrowUp,
+    'NNE': ArrowUpRight,
+    'NE': ArrowUpRight,
+    'ENE': ArrowRight,
+    'E': ArrowRight,
+    'ESE': ArrowRight,
+    'SE': ArrowDownRight,
+    'SSE': ArrowDownRight,
+    'S': ArrowDown,
+    'SSW': ArrowDownLeft,
+    'SW': ArrowDownLeft,
+    'WSW': ArrowLeft,
+    'W': ArrowLeft,
+    'WNW': ArrowLeft,
+    'NW': ArrowUpLeft,
+    'NNW': ArrowUpLeft,
+  }
+  const Icon = arrowMap[cardinal] || Compass
+  return <Icon {...props} />
+}
+
+// Wilderness maneuver icon
+function WildernessIcon({ type, cardinal, bearing, size = 16 }) {
+  if (type === 'arrival') {
+    return <MapPin size={size} strokeWidth={1.5} />
+  }
+  return <CompassIcon cardinal={cardinal} bearing={bearing} size={size} />
+}
+
+// Network maneuver icon (Valhalla types)
 function ManeuverIcon({ type }) {
   const size = 16
   const props = { size, strokeWidth: 1.5 }
@@ -40,10 +104,55 @@ function ManeuverIcon({ type }) {
   }
 }
 
+/**
+ * Add transport mode prefix to network maneuver instruction.
+ * "Drive east on..." for auto, "Walk south on..." for foot, "Ride north on..." for mtb
+ */
+function formatNetworkInstruction(instruction, mode) {
+  if (!instruction) return ''
+
+  // Get verb based on mode
+  const modeVerbs = {
+    'auto': 'Drive',
+    'foot': 'Walk',
+    'pedestrian': 'Walk',
+    'mtb': 'Ride',
+    'bicycle': 'Ride',
+    'atv': 'Drive',
+    'vehicle': 'Drive',
+  }
+  const verb = modeVerbs[mode] || 'Go'
+
+  // Check if instruction starts with a direction verb we should replace
+  const startsWithVerbs = [
+    'Turn left', 'Turn right', 'Bear left', 'Bear right',
+    'Keep left', 'Keep right', 'Continue', 'Head', 'Go',
+    'Proceed', 'Make a', 'Take a', 'Start', 'Merge', 'Exit'
+  ]
+
+  for (const v of startsWithVerbs) {
+    if (instruction.startsWith(v)) {
+      // Already has a verb, return as-is (Valhalla instructions are already good)
+      return instruction
+    }
+  }
+
+  // If instruction starts with direction (north, south, etc.), prepend verb
+  const directions = ['north', 'south', 'east', 'west', 'onto', 'on ']
+  for (const dir of directions) {
+    if (instruction.toLowerCase().startsWith(dir)) {
+      return `${verb} ${instruction}`
+    }
+  }
+
+  return instruction
+}
+
 export default function ManeuverList() {
   const routeResult = useStore((s) => s.routeResult)
   const routeLoading = useStore((s) => s.routeLoading)
   const routeError = useStore((s) => s.routeError)
+  const routeMode = useStore((s) => s.routeMode)
 
   if (routeLoading) {
     return (
@@ -77,8 +186,25 @@ export default function ManeuverList() {
   if (!routeResult?.summary) return null
 
   const summary = routeResult.summary
-  const networkFeature = routeResult.route?.features?.find(f => f.properties?.segment_type === 'network')
+  const features = routeResult.route?.features || []
-  const maneuvers = networkFeature?.properties?.maneuvers || []
+  const networkMode = summary.network_mode || routeMode || 'foot'
+
+  // Extract maneuvers from each segment type
+  const wildernessStartFeature = features.find(f =>
+    f.properties?.segment_type === 'wilderness' && f.properties?.segment_position === 'start'
+  )
+  const networkFeature = features.find(f => f.properties?.segment_type === 'network')
+  const wildernessEndFeature = features.find(f =>
+    f.properties?.segment_type === 'wilderness' && f.properties?.segment_position === 'end'
+  )
+
+  const wildernessStartManeuvers = wildernessStartFeature?.properties?.maneuvers || []
+  const networkManeuvers = networkFeature?.properties?.maneuvers || []
+  const wildernessEndManeuvers = wildernessEndFeature?.properties?.maneuvers || []
+
+  const hasManeuvers = wildernessStartManeuvers.length > 0 ||
+                       networkManeuvers.length > 0 ||
+                       wildernessEndManeuvers.length > 0
 
   return (
     <div className="flex flex-col">
@@ -88,7 +214,7 @@ export default function ManeuverList() {
         style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
       >
         <span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-          {formatDistKm(summary.total_distance_km)}
+          {formatDistance(null, summary.total_distance_km)}
         </span>
         <span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
           {formatTimeMin(summary.total_effort_minutes)}
@@ -102,7 +228,7 @@ export default function ManeuverList() {
             <Mountain size={14} style={{ color: '#f97316' }} />
             <span style={{ color: 'var(--text-secondary)' }}>Wilderness</span>
             <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
-              {formatDistKm(summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
+              {formatDistance(null, summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
             </span>
           </div>
         )}
@@ -111,7 +237,7 @@ export default function ManeuverList() {
             <Map size={14} style={{ color: '#3b82f6' }} />
             <span style={{ color: 'var(--text-secondary)' }}>Road/Trail</span>
             <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
-              {formatDistKm(summary.network_distance_km)} / {formatTimeMin(summary.network_duration_minutes)}
+              {formatDistance(null, summary.network_distance_km)} / {formatTimeMin(summary.network_duration_minutes)}
             </span>
           </div>
         )}
@@ -136,27 +262,80 @@ export default function ManeuverList() {
       )}
 
       {/* Turn-by-turn directions */}
-      {maneuvers.length > 0 && (
+      {hasManeuvers && (
         <div className="flex flex-col max-h-[40vh] overflow-y-auto">
           <div className="text-xs px-2 mb-1" style={{ color: 'var(--text-tertiary)' }}>Directions</div>
-          {maneuvers.map((man, i) => (
+
-            <div
+          {/* Wilderness start maneuvers */}
-              key={i}
+          {wildernessStartManeuvers.length > 0 && (
-              className="flex items-start gap-2 px-2 py-2 text-left"
+            <>
-            >
+              <div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
-              <span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
+                   style={{ color: '#f97316', background: 'rgba(249,115,22,0.1)' }}>
-                <ManeuverIcon type={man.type} />
+                Wilderness — On Foot
-              </span>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
-                  {man.instruction}
-                </p>
-                <p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
-                  {formatDistKm(man.distance_km)}
-                </p>
               </div>
-            </div>
+              {wildernessStartManeuvers.map((man, i) => (
-          ))}
+                <div key={`ws-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
+                  <span className="w-5 shrink-0 mt-0.5" style={{ color: '#f97316' }}>
+                    <WildernessIcon type={man.type} cardinal={man.cardinal} bearing={man.bearing} />
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
+                      {man.instruction}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+
+          {/* Network maneuvers */}
+          {networkManeuvers.length > 0 && (
+            <>
+              {wildernessStartManeuvers.length > 0 && (
+                <div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
+                     style={{ color: '#3b82f6', background: 'rgba(59,130,246,0.1)' }}>
+                  Road/Trail
+                </div>
+              )}
+              {networkManeuvers.map((man, i) => (
+                <div key={`net-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
+                  <span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
+                    <ManeuverIcon type={man.type} />
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
+                      {formatNetworkInstruction(man.instruction, networkMode)}
+                    </p>
+                    <p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
+                      {formatDistance(null, man.distance_km)}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+
+          {/* Wilderness end maneuvers */}
+          {wildernessEndManeuvers.length > 0 && (
+            <>
+              <div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
+                   style={{ color: '#f97316', background: 'rgba(249,115,22,0.1)' }}>
+                Wilderness — On Foot
+              </div>
+              {wildernessEndManeuvers.map((man, i) => (
+                <div key={`we-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
+                  <span className="w-5 shrink-0 mt-0.5" style={{ color: '#f97316' }}>
+                    <WildernessIcon type={man.type} cardinal={man.cardinal} bearing={man.bearing} />
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
+                      {man.instruction}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
         </div>
       )}
     </div>

src/components/MapView.jsx

@@ -1443,6 +1443,7 @@ const MapView = forwardRef(function MapView(_, ref) {
   const clearPickingLocationFor = useStore((s) => s.clearPickingLocationFor)
   const directionsMode = useStore((s) => s.directionsMode)
   const activeDirectionsField = useStore((s) => s.activeDirectionsField)
+  const pickingRouteField = useStore((s) => s.pickingRouteField)
 
   // Zoom level indicator state
   const [zoomLevel, setZoomLevel] = useState(10)
@@ -2001,34 +2002,30 @@ const MapView = forwardRef(function MapView(_, ref) {
         return
       }
 
-      // Handle directions mode — click fills the active field
+      // Handle explicit pick-from-map mode for route inputs
-      const { directionsMode, activeDirectionsField, setRouteStart, setRouteEnd, setActiveDirectionsField } = useStore.getState()
+      const { pickingRouteField, setRouteStart, setRouteEnd, clearPickingRouteField } = useStore.getState()
-      if (directionsMode && activeDirectionsField) {
+      if (pickingRouteField) {
         const { lng, lat } = e.lngLat
+        map.getCanvas().style.cursor = ''
         // Reverse geocode for name
         fetchReverse(lat, lng).then((place) => {
           const name = place?.name || lat.toFixed(5) + ", " + lng.toFixed(5)
           const location = { lat, lon: lng, name, source: "map_click" }
-          if (activeDirectionsField === "origin") {
+          if (pickingRouteField === "origin") {
             setRouteStart(location)
-            setActiveDirectionsField("destination")
+          } else if (pickingRouteField === "destination") {
-          } else if (activeDirectionsField === "destination") {
             setRouteEnd(location)
-            setActiveDirectionsField(null)
-          } else if (activeDirectionsField.startsWith("stop-")) {
-            // Handle intermediate stops - would need more logic
-            setActiveDirectionsField(null)
           }
+          clearPickingRouteField()
         }).catch(() => {
           const name = lat.toFixed(5) + ", " + lng.toFixed(5)
           const location = { lat, lon: lng, name, source: "map_click" }
-          if (activeDirectionsField === "origin") {
+          if (pickingRouteField === "origin") {
             setRouteStart(location)
-            setActiveDirectionsField("destination")
+          } else if (pickingRouteField === "destination") {
-          } else if (activeDirectionsField === "destination") {
             setRouteEnd(location)
-            setActiveDirectionsField(null)
           }
+          clearPickingRouteField()
         })
         return
       }
@@ -2253,6 +2250,7 @@ const MapView = forwardRef(function MapView(_, ref) {
             updateBoundaryRef.current(polygonGeometry)
           }
 
+          console.log('[TRACE-CLICK] Feature click setSelectedPlace:', { featureLat, featureLon, clickLat: lat, clickLng: lng, name: props.name })
           store.setSelectedPlace({
             lat: featureLat,
             lon: featureLon,
@@ -2284,6 +2282,7 @@ const MapView = forwardRef(function MapView(_, ref) {
             circleRadiusPx: MARKER_RADIUS_PX,
           })
 
+          console.log('[TRACE-CLICK] Reticle click setSelectedPlace:', { lat, lng })
           store.setSelectedPlace({
             lat,
             lon: lng,

src/components/Panel.jsx

@@ -1,5 +1,5 @@
 import { useRef, useCallback, useEffect, useState } from 'react'
-import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
+import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin, Target } from 'lucide-react'
 import ThemePicker from './ThemePicker'
 import { useStore, usePanelState } from '../store'
 import { hasFeature } from '../config'
@@ -8,6 +8,7 @@ import ManeuverList from './ManeuverList'
 import ContactList from './ContactList'
 import { PlaceCard } from './PlaceCard'
 import DirectionsPanel from './DirectionsPanel'
+import PlaceDetail from './PlaceDetail'
 
 const TRAVEL_MODES = [
   { id: 'auto', label: 'Drive', Icon: Car },
@@ -34,6 +35,8 @@ export default function Panel({ onClearRoute }) {
   const routeLoading = useStore((s) => s.routeLoading)
   const setRouteMode = useStore((s) => s.setRouteMode)
   const setBoundaryMode = useStore((s) => s.setBoundaryMode)
+  const pickingRouteField = useStore((s) => s.pickingRouteField)
+  const setPickingRouteField = useStore((s) => s.setPickingRouteField)
   const clearRoute = useStore((s) => s.clearRoute)
   const sheetState = useStore((s) => s.sheetState)
   const setSheetState = useStore((s) => s.setSheetState)
@@ -89,29 +92,20 @@ export default function Panel({ onClearRoute }) {
   const showRouteSection = hasRoutePoints || routeResult || routeLoading
   const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
 
+  // Show side panel place card when building route (either mode) and place is selected
+  const showSidePlaceCard = (directionsMode || showRouteSection) && selectedPlace
+
   const routesContent = directionsMode ? (
-    <>
+    // Directions mode: just the directions panel, place card is shown in side panel
-      <DirectionsPanel onClose={() => {
+    <DirectionsPanel onClose={() => {
-        setDirectionsMode(false)
+      setDirectionsMode(false)
-        onClearRoute?.()
+      onClearRoute?.()
-      }} />
+    }} />
-      {/* Show place card below directions when clicking map during routing */}
-      {selectedPlace && (
-        <div className="mt-3 border-t pt-3" style={{ borderColor: "var(--border)" }}>
-          <PlaceCard
-            place={selectedPlace}
-            variant="preview"
-            expanded={true}
-            onClose={clearSelectedPlace}
-          />
-        </div>
-      )}
-    </>
   ) : (
     <>
       <SearchBar />
 
-      {showPreviewCard && selectedPlace && (
+      {showPreviewCard && selectedPlace && !showRouteSection && (
         <div className="mt-3">
           <PlaceCard
             place={selectedPlace}
@@ -140,15 +134,31 @@ export default function Panel({ onClearRoute }) {
           <div className="flex flex-col gap-1 mb-3 text-xs">
             <div className="flex items-center gap-2">
               <MapPin size={12} style={{ color: '#22c55e' }} />
-              <span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
+              <span className="flex-1" style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
-                {routeStart?.name || 'Right-click to set start'}
+                {routeStart?.name || 'Click pin to pick start'}
               </span>
+              <button
+                onClick={() => setPickingRouteField('origin')}
+                className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
+                style={{ color: pickingRouteField === 'origin' ? 'var(--accent)' : 'var(--text-tertiary)' }}
+                title="Pick start from map"
+              >
+                <Target size={14} />
+              </button>
             </div>
             <div className="flex items-center gap-2">
               <MapPin size={12} style={{ color: '#ef4444' }} />
-              <span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
+              <span className="flex-1" style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
-                {routeEnd?.name || 'Right-click to set destination'}
+                {routeEnd?.name || 'Click pin to pick destination'}
               </span>
+              <button
+                onClick={() => setPickingRouteField('destination')}
+                className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
+                style={{ color: pickingRouteField === 'destination' ? 'var(--accent)' : 'var(--text-tertiary)' }}
+                title="Pick destination from map"
+              >
+                <Target size={14} />
+              </button>
             </div>
           </div>
 
@@ -263,19 +273,85 @@ export default function Panel({ onClearRoute }) {
     </div>
   )
 
+  // Side panel for place card during directions mode (desktop only)
+  const sidePlaceCardPanel = showSidePlaceCard && !isMobile && (
+    <div
+      className="absolute top-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
+      style={{
+        left: '400px',
+        width: '300px',
+        background: 'var(--bg-raised)',
+        borderRight: '1px solid var(--border)',
+        boxShadow: 'inset 4px 0 8px -4px rgba(0,0,0,0.15)',
+      }}
+    >
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+          {selectedPlace?.name || 'Place Info'}
+        </span>
+        <button
+          onClick={clearSelectedPlace}
+          className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors"
+          title="Close"
+        >
+          <X size={16} style={{ color: 'var(--text-tertiary)' }} />
+        </button>
+      </div>
+      {/* Use PlaceCard in compact preview mode */}
+      <PlaceCard
+        place={selectedPlace}
+        variant="preview"
+        expanded={true}
+        onClose={clearSelectedPlace}
+      />
+    </div>
+  )
+
+  // Mobile overlay for place card during directions mode
+  const mobilePlaceCardOverlay = showSidePlaceCard && isMobile && (
+    <div
+      className="absolute inset-0 z-20 flex flex-col rounded-t-2xl"
+      style={{ background: 'var(--bg-raised)' }}
+    >
+      <div className="flex items-center justify-between p-4 border-b" style={{ borderColor: 'var(--border)' }}>
+        <span className="text-sm font-medium truncate pr-2" style={{ color: 'var(--text-primary)' }}>
+          {selectedPlace?.name || 'Place Info'}
+        </span>
+        <button
+          onClick={clearSelectedPlace}
+          className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors shrink-0"
+          title="Close"
+        >
+          <X size={16} style={{ color: 'var(--text-tertiary)' }} />
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto p-4">
+        <PlaceCard
+          place={selectedPlace}
+          variant="preview"
+          expanded={true}
+          onClose={clearSelectedPlace}
+        />
+      </div>
+    </div>
+  )
+
   if (!isMobile) {
     return (
-      <div
+      <>
-        className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
+        <div
-        style={{
+          className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
-          width: '400px',
+          style={{
-          background: 'var(--bg-raised)',
+            width: '400px',
-          borderRight: '1px solid var(--border)',
+            background: 'var(--bg-raised)',
-        }}
+            borderRight: '1px solid var(--border)',
-      >
+          }}
-        {header}
+        >
-        {content}
+          {header}
-      </div>
+          {content}
+        </div>
+        {sidePlaceCardPanel}
+      </>
     )
   }
 
@@ -308,9 +384,10 @@ export default function Panel({ onClearRoute }) {
       </div>
 
       {sheetState !== 'collapsed' && (
-        <div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)]" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
+        <div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)] relative" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
           {header}
           {content}
+          {mobilePlaceCardOverlay}
         </div>
       )}
     </div>

src/components/PlaceCard.jsx

@@ -476,6 +476,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
   const savedContact = contacts.find((c) => c.lat === place.lat && c.lon === place.lon)
 
   const handleDirections = () => {
+    console.log('[TRACE-DIRECTIONS] PlaceCard handleDirections, place:', { lat: place?.lat, lon: place?.lon, name: place?.name })
     // No toast - empty origin slot is the visual prompt
     startDirections(place)
   }

src/store.js

@@ -72,6 +72,10 @@ export const useStore = create((set, get) => ({
   // This is the SINGLE routing function for everything
   computeRoute: async () => {
     const { routeStart, routeEnd, routeMode, boundaryMode, _updateRouteDisplay } = get()
+    console.log('[TRACE-ROUTE] computeRoute called with:', {
+      startLat: routeStart?.lat, startLon: routeStart?.lon, startName: routeStart?.name,
+      endLat: routeEnd?.lat, endLon: routeEnd?.lon, endName: routeEnd?.name
+    })
 
     // Need both endpoints to route
     if (!routeStart || !routeEnd) return
@@ -175,6 +179,7 @@ export const useStore = create((set, get) => ({
 
   // Master startDirections - enters directions mode with destination pre-filled
   startDirections: (place) => {
+    console.log('[TRACE-STORE] startDirections received place:', { lat: place?.lat, lon: place?.lon, name: place?.name })
     const { geoPermission, userLocation, clearRoute } = get()
     clearRoute()
 
@@ -229,7 +234,8 @@ export const useStore = create((set, get) => ({
   panelOpen: true,
   autocompleteOpen: false,
   directionsMode: false, // true when directions panel is active
-  activeDirectionsField: null, // 'origin' | 'destination' | 'stop-N' | null (for map click targeting)
+  activeDirectionsField: null, // 'origin' | 'destination' | 'stop-N' | null (for input focus styling)
+  pickingRouteField: null, // 'origin' | 'destination' | null (explicit pick-from-map mode)
   theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
   themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
   viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map', // 'map' | 'satellite' | 'hybrid'
@@ -243,6 +249,8 @@ export const useStore = create((set, get) => ({
   setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
   setDirectionsMode: (mode) => set({ directionsMode: mode, activeDirectionsField: mode ? 'origin' : null }),
   setActiveDirectionsField: (field) => set({ activeDirectionsField: field }),
+  setPickingRouteField: (field) => set({ pickingRouteField: field }),
+  clearPickingRouteField: () => set({ pickingRouteField: null }),
   setTheme: (theme) => set({ theme }),
   setThemeOverride: (override) => {
     set({ themeOverride: override })