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