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,5 +1,6 @@
 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 toast from "react-hot-toast"
 import { useStore } from "../store"
 import { searchGeocode } from "../api"
 import { buildAddress } from "../utils/place"
@@ -53,6 +54,8 @@ export default function LocationInput({
   const contacts = useStore((s) => s.contacts)
   const activeDirectionsField = useStore((s) => s.activeDirectionsField)
   const setActiveDirectionsField = useStore((s) => s.setActiveDirectionsField)
+  const pickingRouteField = useStore((s) => s.pickingRouteField)
+  const setPickingRouteField = useStore((s) => s.setPickingRouteField)
 
   // Sync display value when external value changes
   useEffect(() => {
@@ -200,11 +203,19 @@ export default function LocationInput({
   }
 
   const handleFocus = () => {
-    setActiveDirectionsField(fieldId)
+    setActiveDirectionsField(fieldId)  // For styling only, not map clicks
     if (results.length > 0) setOpen(true)
     onFocus?.()
   }
 
+  const handlePickFromMap = () => {
+    setPickingRouteField(fieldId)
+    toast("Click map to set location", { icon: "🎯", duration: 3000 })
+    inputRef.current?.blur()  // Unfocus input so user focuses on map
+  }
+
+  const isPicking = pickingRouteField === fieldId
+
   const handleBlur = () => {
     // Delay to allow click on dropdown
     setTimeout(() => setOpen(false), 150)
@@ -241,6 +252,15 @@ export default function LocationInput({
           className="flex-1 bg-transparent text-sm outline-none"
           style={{ color: "var(--text-primary)" }}
         />
+        {/* Pick from map button */}
+        <button
+          onClick={handlePickFromMap}
+          className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
+          style={{ color: isPicking ? "var(--accent)" : "var(--text-tertiary)" }}
+          title="Pick location from map"
+        >
+          <Target size={14} />
+        </button>
         {loading ? (
           <div
             className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"

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
+              </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)' }}>
-                  {formatDistKm(man.distance_km)}
+                      {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={() => {
       setDirectionsMode(false)
       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,8 +273,72 @@ 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"
           style={{
@@ -276,6 +350,8 @@ export default function Panel({ onClearRoute }) {
           {header}
           {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 })