Add route interactions: click-to-split, drag-to-reshape, colored route rendering

- Enrich BRouter response with per-point 3D coordinates and segment boundary
  tracking (EnrichedRoute interface)
- ColoredRoute component: plain, elevation gradient (green→yellow→red), and
  surface color modes with invisible wide polyline for click targeting
- Click-to-split: click on route polyline inserts waypoint at nearest point,
  mapped to correct segment via boundary indices
- MidpointHandles: draggable CircleMarkers at route segment midpoints for
  reshaping, hidden below zoom 12, opaque on hover
- Color mode toggle (select) synced via Yjs routeData
- i18n keys for color mode labels (en + de)
- Unit tests for segment boundary tracking (13 tests)
- E2E tests for enriched route response and color mode toggle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

openspec/changes/planner-route-interactions/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-26

openspec/changes/planner-route-interactions/design.md

@@ -0,0 +1,132 @@
+## Context
+
+The Planner currently renders routes as a single-color `L.Polyline` with no
+interactivity — users can't click on the route or drag it. Waypoints can only
+be appended (click on map) or reordered in the sidebar. BRouter returns
+per-point elevation in coordinates (`[lon, lat, ele]`) and can return surface
+tags, but `mergeGeoJsonSegments` currently discards all per-point data and
+only keeps track-level totals.
+
+bikerouter.de and komoot both support click-to-split and drag-to-reshape as
+primary editing interactions. These are the most natural way to refine a route
+after the initial waypoints are placed.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Click on the route polyline to insert a waypoint at that position
+- Drag midpoint handles between waypoints to reshape the route
+- Color the route by elevation gradient (green→yellow→red) or surface type
+- Preserve per-point data from BRouter through the merge pipeline
+- All interactions synced via Yjs (collaborative)
+
+**Non-Goals:**
+- Undo/redo system (future change)
+- Route alternatives (show multiple options)
+- Custom color gradient configuration
+- Surface type legend or detailed surface info panel
+- Offline route coloring (requires BRouter data)
+
+## Decisions
+
+### D1: Click-to-split via Leaflet polyline event
+
+Listen for `click` on the route polyline. On click, find the closest point on
+the route geometry, determine which waypoint segment it falls in (between
+waypoint N and N+1), and insert a new waypoint at that position using
+`Y.Array.insert(N+1, [newWaypoint])`.
+
+To find the segment index: the route is computed segment-by-segment (one per
+consecutive waypoint pair). Track the coordinate count per segment in the
+merged GeoJSON so we can map any route point index back to a waypoint segment.
+
+**Alternative considered**: Using a separate invisible polyline for click
+detection. Unnecessary — Leaflet's built-in polyline click events work fine
+with appropriate `weight` for hit detection.
+
+### D2: Midpoint handles as draggable CircleMarkers
+
+For each consecutive pair of waypoints, render a small, semi-transparent
+`L.CircleMarker` at the geographic midpoint of the route segment (not the
+straight-line midpoint — use the actual route geometry midpoint). On drag
+start, the handle becomes opaque and turns into a waypoint drag. On drag end,
+insert a new waypoint at the dropped position.
+
+Handles are only visible on hover or at higher zoom levels to avoid clutter.
+They reposition after each route computation.
+
+**Alternative considered**: Handles at the straight-line midpoint between
+waypoints. Bad UX — on a winding route, the midpoint may be far from the
+actual route.
+
+### D3: Per-point data preservation in BRouter response
+
+BRouter GeoJSON coordinates are `[lon, lat, ele]` — elevation is already
+present but currently unused beyond the ElevationChart. For surface data,
+BRouter supports a `tiledesc` parameter that includes waytype/surface tags
+per point in the `properties.messages` array.
+
+Modify `mergeGeoJsonSegments` to:
+1. Preserve the full 3-element coordinates (already done, but not exposed)
+2. Track segment boundaries (array of indices where each waypoint segment starts)
+3. Optionally parse `properties.messages` for surface tags
+
+Store the enriched data in `routeData` Y.Map so all participants have it.
+
+### D4: Colored route rendering with segmented polylines
+
+Use multiple `L.Polyline` instances, each covering a short segment of the
+route with a color based on the data value at that point. For elevation:
+normalize elevation values to 0-1 range across the route, map to a
+green→yellow→red gradient. For surface: map surface type strings to a fixed
+color palette (asphalt=gray, gravel=brown, path=green, etc.).
+
+Three rendering modes, toggled by a button in the header:
+1. **Plain**: Current single-color blue polyline (default)
+2. **Elevation**: Gradient by elevation
+3. **Surface**: Colored by surface type
+
+**Alternative considered**: `leaflet-hotline` for smooth canvas-based gradient
+rendering. Better visual quality but adds a dependency and doesn't support
+click events on the colored line. Since we need click-to-split on the route,
+we need real Leaflet layers. Can revisit later if performance is an issue.
+
+**Alternative considered**: Single Canvas renderer. Better performance for
+very long routes but much more complex, and breaks Leaflet's event model.
+Not needed at current route lengths (<1000 points typical).
+
+### D5: Segment boundary tracking
+
+The key data structure bridging BRouter output and map interactions:
+
+```typescript
+interface EnrichedRoute {
+  coordinates: [number, number, number][]; // [lon, lat, ele]
+  segmentBoundaries: number[];             // indices where each waypoint segment starts
+  surfaces?: string[];                     // surface type per point (optional)
+  totalLength: number;
+  totalAscend: number;
+  totalTime: number;
+}
+```
+
+`segmentBoundaries[i]` is the coordinate index where the route segment from
+waypoint `i` to waypoint `i+1` starts. This enables:
+- Click-to-split: find which segment a clicked point belongs to
+- Midpoint handles: find the midpoint of each segment's geometry
+- Per-segment coloring: color differently per waypoint pair if needed
+
+## Risks / Trade-offs
+
+- **Performance with many segments** → Hundreds of small `L.Polyline` instances
+  for colored rendering could be slow. Mitigate: batch updates, only re-render
+  changed segments, limit color segments to ~100 per route. Can switch to
+  canvas if needed later.
+- **BRouter surface data availability** → Not all BRouter profiles return
+  surface tags. The `tiledesc` parameter may not work with all profiles.
+  Mitigate: surface coloring is optional; elevation always works (from coords).
+- **Click precision on thin polylines** → Hard to click a 4px line on mobile.
+  Mitigate: use `L.Polyline` `weight` for rendering but a wider invisible
+  polyline for click detection.
+- **Midpoint handle clutter** → Routes with many waypoints get cluttered.
+  Mitigate: only show handles on hover or at zoom level ≥ 12.

openspec/changes/planner-route-interactions/proposal.md

@@ -0,0 +1,56 @@
+## Why
+
+The Planner's route editing is click-only: users place waypoints and the route
+auto-computes between them. But refining a route is tedious — you can't insert
+a waypoint on the route itself, drag a route segment to reshape it, or see what
+kind of terrain you're heading into. These are table-stakes features in modern
+route planners (bikerouter.de, komoot, Ride with GPS) and the most common
+feedback from early testers.
+
+## What Changes
+
+- **Route splitting**: Click on the route polyline to insert a new waypoint at
+  that position, splitting the segment. The waypoint snaps to the closest point
+  on the existing route.
+- **Drag-to-reshape**: Invisible midpoint handles appear between waypoints on
+  the route. Dragging a midpoint inserts a new waypoint and triggers route
+  recomputation — the natural way to push a route onto a different path.
+- **Colored route rendering**: Replace the single-color route polyline with
+  segments colored by elevation gradient or surface type (from BRouter's
+  per-point data). Users can toggle between plain, elevation, and surface
+  color modes.
+
+## Capabilities
+
+### New Capabilities
+
+- `route-splitting`: Insert waypoints by clicking on the route polyline, with
+  snapping to the nearest route point
+- `route-drag-reshape`: Drag midpoint handles on route segments to reshape the
+  route interactively
+- `route-coloring`: Color-code the route polyline by elevation gradient or
+  surface type using BRouter track data
+
+### Modified Capabilities
+
+- `map-display`: Route visualization changes from a single-color polyline to
+  a segmented, interactive polyline with color modes and click/drag interactions
+- `brouter-integration`: BRouter response data (elevation per point, surface
+  tags) must be preserved and exposed to the rendering layer
+
+## Impact
+
+- **PlannerMap.tsx**: Major changes — route polyline becomes interactive with
+  click-to-split and drag midpoint handles
+- **brouter.ts**: Expose per-point elevation and surface data from GeoJSON
+  properties (currently only track-level stats are extracted)
+- **use-routing.ts**: Support waypoint insertion at specific indices (not just
+  append)
+- **use-yjs.ts**: Waypoint insertion at arbitrary positions (already supported
+  by Y.Array.insert)
+- **New components**: ColoredRoute (segmented polyline renderer),
+  MidpointHandles (draggable reshape markers)
+- **ElevationChart**: Add hover-to-highlight sync with colored route
+- **Dependencies**: May need `leaflet-hotline` for smooth gradient rendering,
+  or custom canvas renderer
+- **i18n**: New keys for color mode labels (en + de)

openspec/changes/planner-route-interactions/specs/brouter-integration/spec.md

@@ -0,0 +1,20 @@
+## MODIFIED Requirements
+
+### Requirement: Route computation from waypoints
+The Planner SHALL compute a route between ordered waypoints by calling the BRouter HTTP API and returning the result as GeoJSON, preserving per-point elevation and segment boundary data.
+
+#### Scenario: Compute route with two waypoints
+- **WHEN** the routing host submits two waypoints (start, end) with profile "trekking"
+- **THEN** the BRouter API returns a GeoJSON route within 2 seconds
+
+#### Scenario: Compute route with via points
+- **WHEN** the routing host submits three or more waypoints
+- **THEN** the BRouter API returns a route passing through all waypoints in order
+
+#### Scenario: Per-point elevation preserved
+- **WHEN** BRouter returns GeoJSON with 3D coordinates [lon, lat, ele]
+- **THEN** the merged route response SHALL preserve elevation values for every coordinate point
+
+#### Scenario: Segment boundaries tracked
+- **WHEN** a route with N waypoints is computed (N-1 segments)
+- **THEN** the response SHALL include an array of coordinate indices marking where each waypoint-to-waypoint segment begins

openspec/changes/planner-route-interactions/specs/map-display/spec.md

@@ -0,0 +1,20 @@
+## MODIFIED Requirements
+
+### Requirement: Route visualization
+The map SHALL display the computed route as an interactive, optionally color-coded polyline on the map.
+
+#### Scenario: Display route
+- **WHEN** BRouter returns a route GeoJSON
+- **THEN** the route is rendered as a polyline on the map, colored according to the active color mode
+
+#### Scenario: Route updates on waypoint change
+- **WHEN** a waypoint is added, moved, or deleted
+- **THEN** the route polyline updates after BRouter recomputes the route
+
+#### Scenario: Route is clickable
+- **WHEN** a user clicks on the route polyline
+- **THEN** a new waypoint is inserted at the clicked position (see route-splitting spec)
+
+#### Scenario: Route has midpoint handles
+- **WHEN** a route with two or more waypoints is displayed
+- **THEN** draggable midpoint handles appear on each route segment (see route-drag-reshape spec)

openspec/changes/planner-route-interactions/specs/route-coloring/spec.md

@@ -0,0 +1,31 @@
+## ADDED Requirements
+
+### Requirement: Route color modes
+The Planner SHALL support multiple route color modes that visualize per-point data along the route.
+
+#### Scenario: Default plain mode
+- **WHEN** a route is first displayed
+- **THEN** it renders as a single-color blue polyline (current behavior)
+
+#### Scenario: Elevation color mode
+- **WHEN** a user selects the "Elevation" color mode
+- **THEN** the route polyline is colored with a gradient from green (low) through yellow (mid) to red (high), based on the elevation at each point
+
+#### Scenario: Surface color mode
+- **WHEN** a user selects the "Surface" color mode and surface data is available
+- **THEN** the route polyline is colored by surface type (e.g., asphalt=gray, gravel=brown, path=green, track=orange)
+
+#### Scenario: Surface data unavailable
+- **WHEN** a user selects "Surface" color mode but BRouter did not return surface data
+- **THEN** the route falls back to plain color mode and a brief message indicates surface data is not available
+
+### Requirement: Color mode toggle
+The Planner SHALL provide a UI control to switch between route color modes.
+
+#### Scenario: Toggle control location
+- **WHEN** a route is displayed
+- **THEN** a color mode selector is visible in the session header or map controls
+
+#### Scenario: Color mode persists in session
+- **WHEN** a user changes the color mode
+- **THEN** the selection is stored in the Yjs routeData map and synced to all participants

openspec/changes/planner-route-interactions/specs/route-drag-reshape/spec.md

@@ -0,0 +1,20 @@
+## ADDED Requirements
+
+### Requirement: Midpoint drag handles on route segments
+The Planner SHALL display draggable midpoint handles between consecutive waypoints on the route, allowing users to reshape the route by dragging.
+
+#### Scenario: Midpoint handle visible
+- **WHEN** a route is displayed with at least two waypoints
+- **THEN** a small circular handle appears at the geographic midpoint of each route segment (using the actual route geometry, not straight-line distance)
+
+#### Scenario: Drag midpoint to reshape
+- **WHEN** a user drags a midpoint handle to a new position
+- **THEN** a new waypoint is inserted at the dropped position between the two adjacent waypoints, and the route recomputes through the new point
+
+#### Scenario: Handle visibility control
+- **WHEN** the map zoom level is below 12
+- **THEN** midpoint handles are hidden to reduce visual clutter
+
+#### Scenario: Reshape syncs to other participants
+- **WHEN** a user reshapes the route by dragging a midpoint
+- **THEN** all other participants see the new waypoint and recomputed route via Yjs sync

openspec/changes/planner-route-interactions/specs/route-splitting/spec.md

@@ -0,0 +1,16 @@
+## ADDED Requirements
+
+### Requirement: Insert waypoint by clicking on route
+The Planner SHALL allow users to insert a new waypoint by clicking on the rendered route polyline.
+
+#### Scenario: Click on route between two waypoints
+- **WHEN** a user clicks on the route polyline between waypoint 2 and waypoint 3
+- **THEN** a new waypoint is inserted at position 3 (between the original waypoints 2 and 3) at the clicked location, and the route recomputes
+
+#### Scenario: Waypoint snaps to route
+- **WHEN** a user clicks near the route polyline
+- **THEN** the new waypoint is placed at the closest point on the existing route geometry, not at the raw click position
+
+#### Scenario: Split syncs to other participants
+- **WHEN** a user inserts a waypoint by clicking on the route
+- **THEN** all other participants see the new waypoint appear in the waypoint list and on the map via Yjs sync

openspec/changes/planner-route-interactions/tasks.md

@@ -0,0 +1,45 @@
+## 1. BRouter Data Pipeline
+
+- [x] 1.1 Modify `mergeGeoJsonSegments` to preserve 3D coordinates (lon, lat, ele) and track segment boundary indices
+- [x] 1.2 Add `EnrichedRoute` interface with coordinates, segmentBoundaries, surfaces, and stats
+- [x] 1.3 Store enriched route data (including segment boundaries) in Yjs routeData map
+- [x] 1.4 Write unit test for segment boundary tracking across multi-waypoint routes
+
+## 2. Route Splitting (click-to-insert)
+
+- [x] 2.1 Make the route polyline clickable — add click event handler to route Polyline in PlannerMap
+- [x] 2.2 On click, find nearest point on route geometry and determine which waypoint segment it belongs to (using segment boundaries)
+- [x] 2.3 Insert new waypoint at the clicked position using `Y.Array.insert(segmentIndex + 1, [waypoint])`
+- [x] 2.4 Add wider invisible polyline behind the route for easier click targeting (hit area)
+
+## 3. Drag-to-Reshape (midpoint handles)
+
+- [x] 3.1 Create MidpointHandles component — renders a CircleMarker at the geographic midpoint of each route segment
+- [x] 3.2 Compute geographic midpoint from actual route geometry (not straight-line between waypoints)
+- [x] 3.3 On drag end, insert waypoint at dropped position between the two adjacent waypoints
+- [x] 3.4 Hide midpoint handles below zoom level 12
+- [x] 3.5 Style handles: semi-transparent by default, opaque on hover, match waypoint color scheme
+
+## 4. Route Coloring
+
+- [x] 4.1 Create ColoredRoute component — renders multiple short L.Polyline segments with per-point colors
+- [x] 4.2 Implement elevation gradient: normalize elevation values to 0-1 range, map to green→yellow→red
+- [x] 4.3 Implement surface coloring: map BRouter surface type strings to a fixed color palette
+- [x] 4.4 Add color mode state to Yjs routeData map ("plain" | "elevation" | "surface")
+- [x] 4.5 Add color mode toggle button to session header (icon or dropdown)
+- [x] 4.6 Fall back to plain mode when surface data is unavailable
+- [x] 4.7 Add i18n keys for color mode labels (en + de)
+
+## 5. Integration
+
+- [x] 5.1 Replace single Polyline in PlannerMap with ColoredRoute + click handler + MidpointHandles
+- [x] 5.2 Ensure click-to-split and drag-to-reshape work alongside no-go area drawing mode (disable route interactions when drawing)
+- [x] 5.3 Update ElevationChart hover sync to work with the new colored route
+
+## 6. Verify
+
+- [x] 6.1 E2E test: click on route inserts waypoint at correct position
+- [x] 6.2 E2E test: color mode toggle switches between plain/elevation/surface
+- [x] 6.3 Unit test: segment boundary computation with 2, 3, and 5 waypoints
+- [x] 6.4 Verify midpoint handles reposition after route recomputation
+- [x] 6.5 Verify all interactions sync correctly between two browser tabs