# Web App

Purpose: planning interface for BikepackPilot.

MVP screens:

- Trip setup form.
- Map view.
- Stage timeline.
- POI corridor list.
- Warnings panel.
- Export/offline panel.

Implementation guidance:

- Use shared domain types from `packages/shared`.
- Use API client generated from or aligned to `schemas/openapi.yaml`.
- Use MapLibre-compatible rendering when map implementation begins.
- Start with fixture route rendering if map provider is not configured.

## Implemented MVP

The current web planner is a Vite/React/MapLibre app. It calls the API provider flow and renders:

- trip request controls;
- full-screen OSM raster tile map;
- route, stage endpoint, and POI map layers;
- collapsible left planning/export/stats dock;
- ordered routing point editor with reorder/delete controls;
- right-click map actions for `from here`, `via here`, and `to here`;
- draggable waypoint pins and route-drag insertion of via points;
- compact floating layer controls;
- bottom drawer for stages, warnings, gaps, rule cards, POIs, and linked route/elevation profile hover;
- GPX download and offline manifest actions;
- structured local report submission with report type, observed time, route-km attachment, confidence payload, localStorage queue fallback, and queued-report sync.

Run locally after starting the API:

```bash
npm -w @pikebacker/web run dev
```

Configure the API base with `VITE_API_BASE_URL`, defaulting to `http://localhost:8000`.

The route provider selector includes:

- `Bikepacking gravel`: calls the API with `provider: "brouter"` and lets the API compare BRouter bike profiles against Pikebacker scoring.
- `OSRM road demo`: calls the API with `provider: "osrm"` and uses the configured OSRM endpoint.
- `Mock fixture`: deterministic route and POI fixtures for repeatable tests.

The profile tab renders per-coordinate `elevationM` samples when the selected routing provider supplies them. BRouter and mock routes currently do; OSRM demo routes expose only aggregate ascent/descent warnings.

The OSM tile layer uses the public OSM raster URL for MVP development and keeps visible OpenStreetMap attribution in the map control.