Fix Maps Loading and Worker Configuration

Root Cause

The map failure was caused by two separate aspects:

1. MapLibre GL Worker Resolution (dispatcher.ts:39): MapLibre GL v6 uses an isolated web worker (maplibre-gl-worker.mjs) for vector tile processing. When dynamically imported in Next.js (via Turbopack/Webpack), import.meta.url does not resolve to the worker script location on the filesystem. MapLibre fell back to instantiating new Worker("") relative to the current route URL (http://localhost:3000/walk). Next.js answered that worker request with the HTML page document (text/html), causing the browser error:

2. Keys & OpenRouteService:

   • The map itself renders vector tiles from OpenFreeMap (https://tiles.openfreemap.org/styles/liberty), which requires no API key.
   • Your OpenRouteService key in .env.local is for the pedestrian walking loop generator (/api/route). We verified that your key is valid and working (tested live via POST /api/route which successfully returned a 2.6 km pedestrian loop with fallback: false).
   • We updated app/api/route/route.ts so it accepts both ORS_API_KEY and OPENROUTESERVICE_API_KEY.

---

What Was Fixed

1. Copied the Standalone MapLibre Worker: Placed public/maplibre-gl-worker.mjs into the static public/ directory so Next.js serves it directly as application/javascript.
2. Explicit Worker URL Configuration: Configured maplibregl.setWorkerUrl('/maplibre-gl-worker.mjs') upon module load in:
   • components/map/walk-map.tsx
   • components/map/spike-map.tsx
3. Dual Env Support for OpenRouteService: Updated app/api/route/route.ts to check process.env.ORS_API_KEY || process.env.OPENROUTESERVICE_API_KEY.

---

Verification

• Verified http://localhost:3000/maplibre-gl-worker.mjs returns HTTP 200 OK (Content-Type: application/javascript).
• Tested POST /api/route with coordinates [-73.968, 40.785]; OpenRouteService successfully responded with full pedestrian coordinates and fallback: false.
• Ran full evaluation suite: pnpm test:eval (30/30 passed) and pnpm exec tsc --noEmit (clean type-check).

Why the Button Didn't Respond

In components/walk/walk-controls.tsx:

1. Missing Click Handler (onClick): The button only listened to mouse-down/up and touch events and enforced a continuous 1.5-second hold (HOLD_DURATION_MS = 1500). When clicked or tapped normally on desktop (like in your 1892×1012 viewport), mouse-up cancelled the timer after ~100ms. Because there was no onClick handler, the action was simply dropped, giving the appearance of a dead/broken button.
2. Fragile Mouse-Leave Cancellation: Any slight cursor movement during mouse-down fired onMouseLeave, which instantly aborted the hold timer.
3. No Visible Feedback: There was no text or tooltip explaining that the button required a long-press.

---

What Was Fixed

1. Dual Support for Click and Hold (components/walk/walk-controls.tsx):
   • Click / Tap: Instantly triggers the end-walk flow.
   • Hold (1.0s): Animates the circular progress ring with haptic feedback and automatically finalizes the walk upon completion.
2. 2-Tap Confirmation Safety (per D-13):
   • For short walks under 1 minute: clicking immediately opens WalkDiscardDialog ("Discard Walk" or "Save Anyway").
   • For active walks: clicking opens a new WalkEndDialog ("End & Save Walk" or "Continue Walking"), guarding against accidental taps without blocking desktop users.
   • A deliberate hold bypasses the confirmation dialog and finalizes immediately.
3. Pointer Capture: Switched to pointer events with setPointerCapture, ensuring slight mouse movement or touch jitter does not prematurely cancel a hold.
4. Visual Guidance:
   • Added hover/idle hint: "Hold to finish, or click to confirm"
   • Added active hold label: "Ending walk..." with a smooth SVG progress indicator.

All 4 requested improvements have been implemented and verified:

---

A.1. Least Turns for Loop Routes

• OpenRouteService Minimum Vertices: In app/api/route/route.ts, updated options.round_trip.points from 5 to 3 (the minimum supported). Fewer guide vertices forces OpenRouteService to calculate triangular, direct walking perimeters rather than convoluted, zigzagging loops through side alleys.
• Smoothed Synthetic Fallback: In lib/route.ts, reduced synthetic geometric oscillations to gentle single-harmonic curves, eliminating noisy artificial turns.

---

A.2. Controlled Generation (No Auto-Updates) + Cycle & Refresh

• Eliminated GPS Auto-Updates: In components/route/route-preview-sheet.tsx, decoupled route fetching from live GPS position ticks. The route now generates once when you switch to Loop Route or change distance, and stays steady without consuming API calls on GPS jitter.
• New Route Refresh Button: Generates a new alternative loop using a randomized seed while preserving the least-turns constraint.
• Previous / Next History Cycling: Keeps an in-memory history of all generated routes for that session. You can cycle between them (Route 1 of 3, Route 2 of 3, etc.) instantly with zero extra API requests.

---

A.3. Custom Stops & Endpoints

• Interactive Waypoint Customization: Added an expandable Custom Stops & Waypoints panel in components/route/route-preview-sheet.tsx.
• Map Click Placement: Tapping "Tap Map to Add Stop" switches the map cursor to crosshair and shows an interactive placement banner. Tapping anywhere on the map places a numbered amber stop pin (1, 2, 3...).
• Route Through Stops: When stops exist, the routing engine routes through your sequence [Start → Stop 1 → Stop 2 → ... → Finish].
• Remove & Clear: Tapping any stop pin on the map or its removal button in the sheet deletes the stop and updates the route.

---

A.4. Dark & Light Mode on the Map

• Dynamic Vector Tile Styles:
  • Light mode: https://tiles.openfreemap.org/styles/liberty with moss-green route and trail overlays.
  • Dark mode: https://tiles.openfreemap.org/styles/dark with luminous mint/emerald overlays (#34d399 / #22c55e).
• Live Theme Synchronization: Added document class mutation observer and themechange listener in components/map/walk-map.tsx. Toggling the sun/moon button dynamically calls map.setStyle() and seamlessly re-applies the route line and markers.

All three reported caveats have been resolved and verified:

1. Map Text and Icons in Dark Mode

• Root Cause: OpenFreeMap's default dark style was based on Carto Dark Matter, which omitted all POI layers (parks, transit, amenities) and rendered street names in low-contrast dark charcoal (#504e4e) on a black canvas with zero icons.
• Fix:
  • Created a dedicated dark-adapted style public/styles/dark-liberty.json that preserves all 111 layers from Liberty (every POI, transit icon, trail, and park).
  • Styled street names, labels, and POIs with high-contrast text (#ffffff, #e2e8f0, #86efac, #7dd3fc) and deep halos (#0a1120), ensuring street names and points of interest are crisp and legible in dark mode.
  • Added a styleimagemissing handler in components/map/walk-map.tsx to gracefully resolve missing sprite icons without console error spam.

2. Route Length Mismatch (Set 1 km, Calculated 4.3 km)

• Root Cause: When points: 3 was requested in areas with road barriers or highway overpasses, OpenRouteService's pedestrian router would occasionally detour kilometers around pedestrian-inaccessible intersections.
• Fix:
  • In app/api/route/route.ts, added multi-candidate seed evaluation and strict distance tolerance bounds (≤ 35%).
  • If a seed yields a massive detour (e.g., 4.3 km for a 1 km request), alternative seeds are checked.
  • If local road geometry cannot accommodate a low-turn walking loop within tolerance, the API falls back to a calibrated pedestrian loop matching the exact target distance (~1.0 km).
  • In lib/route.ts, added seed-driven rotation to generateSyntheticLoop so cycling or requesting "New Route" provides distinct compass headings.

3. Removed Redundant Outer Wrapper around ThemeToggle

• Fix: In app/walk/page.tsx, removed the outer circular container <div className="rounded-full bg-background/80 ..."> and applied the button styling directly to <ThemeToggle />, eliminating the double border/circle while matching the top-left back button.

Building rendering in dark mode has been updated to be sleek and dark-mode friendly:

What Changed

• 3D Building Extrusions (building-3d): Replaced the bright off-white fill (hsl(35, 8%, 85%) / #dad7d4) with a dark slate tone (#222c3f, opacity: 0.85).
• 2D Building Footprints (building): Replaced the light outline and bright fill with a matching charcoal-slate fill (#1c2333) and subtle edge borders (#273248).

The buildings now blend naturally with the surrounding dark roads and greenery without glaring white blocks, while preserving full architectural visibility and street-level spatial clarity.