Merge remote-tracking branch 'origin/dev' into feat/trip-route-overview

# Conflicts: # client/src/components/Map/MapView.tsx # client/src/components/Map/MapViewGL.tsx # client/src/pages/TripPlannerPage.tsx # client/src/pages/tripPlanner/useTripPlanner.ts
feat(share): show a stop and a booking in full on a shared link, and no more (#2320 )
2026-10-18 21:16:47 +00:00 · 2026-09-11 16:22:21 +03:00 · 2026-09-11 11:01:25 +02:00 · 2026-09-11 11:01:15 +02:00 · 2026-09-11 11:01:04 +02:00 · 2026-09-11 11:00:57 +02:00
1121 changed files with 77339 additions and 5741 deletions
@@ -1,18 +1,17 @@
 # CLAUDE.md

-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+Guidance for Claude Code in this repository. This file holds the commands, the invariants, the gates and the philosophy. Inventories (file lists, counts, history) deliberately live in the code and its READMEs, not here — when this file disagrees with the code, the code wins; fix the doc.

 ## What TREK is

-A self-hosted, real-time collaborative travel planner. npm-workspaces monorepo with three workspaces:
+A self-hosted, real-time collaborative travel planner. npm-workspaces monorepo:

- **`shared/`** (`@trek/shared`) — Zod schemas that are the **single source of truth** for API contracts, consumed by both server and client. Also owns all i18n locale files. Must be built before server/client typecheck or run.
- **`server/`** (`@trek/server`) — NestJS API (Express adapter), SQLite via `better-sqlite3`, WebSocket sync, built-in MCP server (decorator-driven registration layer in `server/src/nest-mcp/`, formerly the `@trek/nest-mcp` workspace), sandboxed plugin runtime.
+- **`shared/`** (`@trek/shared`) — Zod schemas, the **single source of truth** for API contracts, plus all i18n locales. Must be built before server/client typecheck or run.
+- **`server/`** (`@trek/server`) — NestJS API (Express adapter), SQLite via `better-sqlite3`, WebSocket sync, built-in MCP server, sandboxed plugin runtime.
 - **`client/`** (`@trek/client`) — React 19 + Vite + Zustand + Tailwind PWA, offline-first via Dexie/IndexedDB.
+- **`plugin-sdk/`** (`trek-plugin-sdk`) — **not a root workspace**: own lockfile, published to npm independently, must ship standalone. Run its commands from `plugin-sdk/`.

-**`plugin-sdk/`** (`trek-plugin-sdk`) also lives in the repo but is **not a root workspace** — it has its own lockfile, is published to npm independently, and must ship standalone. Run its commands from `plugin-sdk/`, not the root.
-
-Each package has its own `CLAUDE.md` with internals; this file covers the monorepo picture.
+Each package has its own `CLAUDE.md`; this file covers the monorepo picture.

 ## Commands

@@ -21,7 +20,7 @@ Run from the repo root unless noted. **Use `npm run ... --workspace=<pkg>`, not
 ```bash
 npm run dev                       # build shared, then watch shared + server + client concurrently
 npm run build                     # build shared → server → client (order matters)
-npm run lint                      # lint all three workspaces
+npm run lint                      # lint all three workspaces (server and shared run eslint --fix and rewrite files; client is check-only)
 npm run format                    # prettier --write all three
 ```

@@ -29,17 +28,14 @@ Tests:

 ```bash
 npm run test                                       # all workspaces
-npm run test --workspace=server                    # vitest run (server)
-npm run test:unit --workspace=server               # tests/unit only
-npm run test:integration --workspace=server
-npm run test:ws --workspace=server                 # websocket tests
-npm run test:e2e                                   # server e2e (boots Nest against temp SQLite)
-npm run test:cov                                   # coverage (lcov), all four packages incl. shared + plugin-sdk
+npm run test --workspace=server                    # vitest run (server); also test:unit / test:integration / test:ws
+npm run test:e2e                                   # server e2e (boots Nest against a temp SQLite)
+npm run test:cov                                   # coverage (lcov) for all four packages incl. plugin-sdk
 cd client && npm run test                          # client vitest run
-cd client && npm run e2e                           # Playwright
-cd client && npm run lint:pages                    # enforce the Page pattern (see below)
-cd client && npm run theme:lint                    # flag styling that bypasses appearance tokens (--strict in CI mindset)
-npm run typecheck --workspace=server               # tsc --noEmit (also client/shared)
+cd client && npm run e2e                           # Playwright (local only)
+cd client && npm run lint:pages                    # enforce the Page pattern (CI gate)
+cd client && npm run theme:lint                    # flag styling that bypasses appearance tokens (local only)
+npm run typecheck --workspace=server               # tsc --noEmit (also client/shared; server also has typecheck:tests)
 ```

 Run a single test file or test:
@@ -49,65 +45,84 @@ npx vitest run tests/unit/nest/weather.controller.test.ts   # (from server/ or c
 npx vitest run -t "name of the test"                        # by test-name pattern
 ```

-i18n parity (enforced in CI — every non-`en` locale must have identical file set + top-level keys):
+i18n parity (CI gate — every non-`en` locale must have the identical file set and top-level keys):

 ```bash
 npm run i18n:parity --workspace=shared            # audit (exit 0)
 npm run i18n:parity:strict --workspace=shared     # CI gate (exit 1 on drift)
 ```

-Dev ports: server listens on **3001**, Vite dev server proxies `/api`, `/ws`, `/uploads`, `/oauth`, etc. to `http://localhost:3001` (see `client/vite.config.js`).
+Dev ports: the server listens on **3001**; the Vite dev server proxies the API, websocket, uploads, MCP and OAuth paths to it (see `client/vite.config.js`). There is no Node version pin — the CI workflows and the Dockerfile define what is tested. `server/.env.example` is the env-var reference.

-## Server architecture
+## Server invariants

-Nest owns everything: the strangler migration **completed 2026-08-10**, and the last seam — the pre-`app.init()` MCP/OAuth mount — moved behind the container 2026-08-11: **zero `*.bridge.ts` files remain**. Legacy `src/services/` is deleted (ESLint errors on any import of it) and all business logic lives in DI modules under `server/src/nest/<domain>/`. `server/src/nest/README.md` is the module blueprint. Every cron is Nest-owned (`server/src/nest/scheduling/`, `@nestjs/schedule`).
+Nest owns everything: every domain is a DI module under `server/src/nest/<domain>/` (`controller` + `service` + `module`, registered in `app.module.ts`), and ESLint refuses imports of the deleted legacy `services/` layer. `server/src/nest/README.md` is the module blueprint; **`weather/` is the reference implementation** — copy its shape. The domain's Zod contract lives in `shared/src/<domain>/`.

- **`bootstrap.ts` — `buildApp()`** is the single shared builder used by both production (`index.ts`) and the integration/e2e test harness. **Composition order is load-bearing**: global middleware → platform uploads → the discovery metadata middleware → static assets → the named body-parser wrappers are all registered on the raw Express instance **before `app.init()`**, because Nest's router throws `NotFoundException` on unmatched routes and won't fall through to anything registered after init. The transport surface (`/api/health`, `/mcp`, `/.well-known/*` documents, `/oauth/*`) is Nest controllers/middleware. The SPA `index.html` fallback and the global error envelope are `APP_FILTER`s (`SpaFallbackFilter`, `TrekExceptionFilter`).
- **`/mcp` bodies are raw by design** — bootstrap's parser wrappers exempt `/mcp` so the MCP SDK reads the untouched stream; never `@Body()` a `/mcp` route.
- **Per-domain module shape** (one folder under `server/src/nest/<domain>/`): `<domain>.controller.ts` + `<domain>.service.ts` + `<domain>.module.ts`, registered in `app.module.ts`. **`weather/` is the reference implementation** — copy its shape. The Zod contract for the domain lives in `shared/src/<domain>/<domain>.schema.ts`.
- **Auth is default-deny**: `GlobalAuthGuard` + `MfaPolicyGuard` run as `APP_GUARD`s; public routes opt out with `@Public()`, and a boot-time ratchet (`validate-route-guards.ts`) refuses unknown public routes. New domain logic goes in the module's `.service.ts` — never resurrect a `services/*`-style plain module.
- **Trip-scoped routes** must verify trip access (404 on no access) and the relevant permission (403) — the standard shape is `@UseGuards(JwtAuthGuard, TripAccessGuard)` + `@RequirePermission('<action>')` per handler (a few domains still check inline; see `roadmap.md`) — and forward `X-Socket-Id` to the WebSocket broadcast so the originating client doesn't echo its own change. Never gate a multipart upload with a guard (ECONNRESET instead of 403 — check in the handler).
- **DB** (`server/src/db/`): `better-sqlite3`, WAL mode, FK on. `database.ts` initializes; `schema.ts` creates tables; `migrations.ts` + `seeds.ts` run on boot. In `NODE_ENV=test` each vitest worker gets an isolated `:memory:` DB; the Playwright harness uses `TREK_DB_FILE` for a throwaway file DB.
- **WebSocket** (`server/src/websocket.ts`): JWT-authed, room-per-trip (`tripId → Set<WebSocket>`), heartbeat keep-alive, per-connection rate limiting, served on `/ws`.
- **MCP** (`server/src/mcp/`): OAuth 2.1-authenticated MCP server exposing TREK to AI assistants (150+ tools in `tools/`, resources, scopes, session manager). See `MCP.md`.
- **Addons** are admin-toggleable feature modules keyed by `ADDON_IDS` in `server/src/addons.ts` (mcp, packing, budget, documents, vacay, atlas, collab, journey, airtrail, llm_parsing, collections).
- **Plugins** (`server/src/nest/plugins/`): sandboxed third-party plugin runtime — one forked child process per plugin (`supervisor/`), permission-gated RPC (`host/rpc-host.ts` registers a handler only if the plugin holds the unlocking permission), install-time manifest/signature/egress checks (`install/`, `runtime/egress-policy.ts`). Author tooling lives in `plugin-sdk/`; the `trek-plugin-dev` skill covers plugin authoring.
+- **`bootstrap.ts` — `buildApp()`** is the single builder for production and the test harness. **Composition order is load-bearing**: everything registered on the raw Express instance must come **before `app.init()`**, because Nest's router throws `NotFoundException` on unmatched routes and nothing registered after init is reachable. Don't add routes to that pre-init shell — it bypasses every global guard, interceptor and filter.
+- **`/mcp` bodies are raw by design** — the parser wrappers exempt `/mcp` so the MCP SDK reads the untouched stream; never `@Body()` a `/mcp` route.
+- **Auth is default-deny**: global guards run as `APP_GUARD`s; public routes opt out with `@Public()`, and a boot-time ratchet (`validate-route-guards.ts`) refuses any public route not on its allow-list.
+- **Trip-scoped routes** verify trip access (404) and the permission (403) — `@UseGuards(JwtAuthGuard, TripAccessGuard)` + `@RequirePermission('<action>')` per handler — and forward `X-Socket-Id` to the broadcast so the originating client doesn't echo its own change. **Never gate a multipart upload with a guard** (the client sees ECONNRESET instead of 403 — check in the handler).
+- **DB** (`server/src/db/`): `better-sqlite3`, WAL, FK on. Migrations are positional and append-only. `NODE_ENV=test` gives each vitest worker an isolated `:memory:` DB.
+- **Realtime**: `/ws` is a Nest gateway in `server/src/nest/realtime/` — inject `RealtimeService`; `server/src/websocket.ts` is a legacy re-export stub.
+- **MCP**: tools are declared in `<domain>.mcp.ts` files beside each module, on the `server/src/nest-mcp/` decorator layer. A validation or permission change on a REST route must land in the parallel MCP tool in the same change. See `MCP.md`.
+- **Addons** are admin-toggleable feature modules keyed by `ADDON_IDS` in `server/src/addons.ts`.
+- **Plugins** (`server/src/nest/plugins/`): one forked child process per plugin, permission-gated RPC (a handler is registered only if the plugin holds the unlocking permission), install-time manifest/signature/egress/version-range gates. The protocol tables are **generated** into `plugin-sdk/` and `shared/` by `gen:plugin-facts`; `check:plugin-facts` is the CI gate. Author tooling is `plugin-sdk/`; the `trek-plugin-dev` skill covers authoring.
+- **Storage**: uploads go through the driver abstraction in `server/src/nest/storage/` (local / S3 / mirror). Never touch the filesystem or the S3 SDK from a domain service.
+- **Crons** go through `server/src/nest/scheduling/` only — never a `@Cron` decorator (it bypasses the test-time gate).

-## Client architecture
+## Client invariants

 Offline-first, with a layered data flow. A Page never owns state directly:

- **Page pattern** (enforced by `lint:pages`, see `client/src/pages/PATTERN.md`): a `*Page.tsx` default export is a **wiring container** — it composes a co-located `use<Page>()` hook into JSX and must **not** call `useState/useReducer/useEffect/useLayoutEffect/useMemo/useCallback/useRef` in its own body. Stateful logic lives in the hook.
- **State**: Zustand stores in `client/src/store/`. The big one is `tripStore.ts`, assembled from **slices** in `store/slices/` (places, packing, todo, budget, reservations, files, …). `slices/remoteEventHandler.ts` applies incoming WebSocket events to local state.
- **Data flow (offline-first)**: `store → repo (client/src/repo/) → api (client/src/api/) | Dexie (client/src/db/offlineDb.ts)`. Repos check `navigator.onLine`: online they hit the REST API and upsert into Dexie; offline they read from Dexie. Writes go through `sync/mutationQueue.ts` — optimistic Dexie write, then on reconnect `flush()` replays REST with an `X-Idempotency-Key` header so retried writes don't double-apply. `sync/tripSyncManager.ts` and `sync/syncTriggers.ts` drive reconnection sync; `sync/tilePrefetcher.ts` caches map tiles.
- **Styling**: use the appearance tokens (`var(--token)` inline or `bg-[var(--...)]` Tailwind classes), never hardcoded color literals or numeric `fontSize` — `theme:lint` flags bypasses so user-chosen scheme/transparency/text-size keep working. Suppress intentional exceptions (map/PDF/brand colors) with a `theme-lint-disable` line comment.
- **PWA**: `vite-plugin-pwa` + Workbox caches tiles/API/uploads. `prebuild` generates icons.
+- **Page pattern** (enforced by `lint:pages`, spec in `client/src/pages/PATTERN.md`): a `*Page.tsx` is a **wiring container** composing a co-located `use<Page>()` hook; it must not call React state/effect/memo hooks itself.
+- **Data flow**: `store (Zustand, client/src/store/) → repo (client/src/repo/) → api (client/src/api/) | Dexie (client/src/db/offlineDb.ts)`. Writes go through `sync/mutationQueue.ts`: optimistic Dexie write, then a replay with an `X-Idempotency-Key` header on reconnect. `store/slices/remoteEventHandler.ts` applies incoming WebSocket events. Components never call the API directly.
+- **Styling**: semantic Tailwind tokens (`bg-surface*`, `text-content*`, `border-edge*`, `bg-accent*`) or the underlying `var(--token)` variables — never color literals, arbitrary-value color classes or numeric inline `fontSize`, so user-chosen scheme/transparency/text-size keep working. `theme:lint` flags bypasses; suppress intentional exceptions (map/PDF/brand) with a `theme-lint-disable` line comment.
+- **PWA**: `vite-plugin-pwa` + Workbox cache tiles, API and uploads; `prebuild` generates icons.

 ## Shared contracts & i18n

- A route is "done" only once its contract lives in `shared/` and both sides import the inferred types. Edit the Zod schema in `shared/src/<domain>/`, rebuild shared, then both server (validation + DTO types) and client (typed requests) pick it up.
- **i18n locale files live in `shared/src/i18n/<locale>/`**, one file per domain. `en/` is canonical. When you add/change a translation key, **add it to every locale** or `i18n:parity:strict` fails CI. The client resolves keys via `client/src/i18n/TranslationContext.tsx` (`t(key)`), which only reads top-level string keys.
+- A route is "done" only once its contract lives in `shared/` and both sides import the inferred types. Edit the Zod schema, rebuild shared, then server (validation + DTO types) and client (typed requests) pick it up.
+- Locale files live in `shared/src/i18n/<locale>/`, one file per domain; `en/` is canonical. When you add or change a key, **add a real translation to every locale** — parity fails CI on missing keys, and an English placeholder is not acceptable in a non-`en` locale.

 ## Project direction

-These principles come out of a verified 2026 full-repo audit and shape how all new code should be written:
+These principles come out of a full-repo audit and shape all new code:

 - **Protect the crown jewels.** The client's offline-first data core (repos + mutation queue + Dexie), the out-of-process plugin sandbox, the Zod contract layer, and the auth primitives are production-grade. Extend them; never route around them or rewrite them in anger.
- **No "modern shell over legacy core."** The debt pattern is a modern frame delegating to the old approach underneath (historically Nest controllers over legacy `services/*` — that migration is done; on the client it's the long tail of feature components calling the raw API past the offline core). New code goes all-in on the target architecture; when touching a legacy seam, migrate it rather than adding another wrapper.
+- **No "modern shell over legacy core."** The debt pattern is a modern frame delegating to the old approach underneath (on the client: feature components calling the raw API past the offline core). New code goes all-in on the target architecture; when touching a legacy seam, migrate it rather than adding another wrapper.
 - **Single source of truth over manual synchronization.** Never add a hand-mirrored copy of state, schema, or contract (server↔Dexie↔Zustand, schema↔SQL, the plugin contract). Derive from one source, or guard the copy with a parity test that cannot silently skip.
- **DI over global mutable module state.** The `db` proxy, `ws` singleton, and event-sink globals are what force `require()`-to-dodge-cycles and load-bearing boot ordering. New server code injects its dependencies; new client code avoids `window`-global buses and mutable module state.
- **Use the runtime's native idioms.** Prefer React 19 features (`useOptimistic`, Actions, `use()`/Suspense) and Nest subsystems (DI providers, pipes, guards, `@nestjs/schedule`) over hand-rolled equivalents of the same machinery.
- **Fail closed, gates stay on.** Security switches default to safe; misconfiguration must refuse, not silently degrade. Never lower a quality gate (strict TS, lint severity, coverage, parity checks) to land a change — no new `any`, no new `eslint-disable`, no downgrading rules to `warn`.
+- **DI over global mutable module state.** New server code injects its dependencies; new client code avoids `window`-global buses and mutable module state.
+- **Use the runtime's native idioms.** Prefer React 19 features (`useOptimistic`, Actions, `use()`/Suspense) and Nest subsystems (providers, pipes, guards, `@nestjs/schedule`) over hand-rolled equivalents.
+- **Fail closed, gates stay on.** Security switches default to safe; misconfiguration must refuse, not degrade. Never lower a quality gate to land a change — no new `any`, no new `eslint-disable`, no downgrading rules to `warn`, no lowered coverage thresholds.

 ## Conventions (from CONTRIBUTING.md)

 - **Target the `dev` branch** for PRs, not `main` (exception: `wiki/`-only changes).
- **Discuss first**: outside contributions must be pitched in the `#github-pr` Discord channel before any code is written — undiscussed PRs are closed.
- **PRs follow `.github/PULL_REQUEST_TEMPLATE.md`** and require a linked issue (`Closes #N`) for bug fixes or an approved feature-request discussion for features — no issue/discussion, no PR.
- **Conventional commits** (`fix(maps): ...`, `feat(budget): ...`). **Do not add Co-Authored-By or other tool-attribution trailers** to commit messages.
- One focused change per PR; no breaking changes; no unrelated reformatting/refactors. Tests required — the project holds **80%+ coverage** (the `src/nest/**` vitest coverage gate enforces ≥80%).
- When migrating/adding a route, **parity is law**: same URL, method, query/body, HTTP status, `Set-Cookie`, and JSON body — including bespoke error strings (e.g. reproduce `{ error: 'Admin only' }` exactly rather than relying on a generic guard message). Note Nest defaults POST to 201; add `@HttpCode(200)` where the legacy contract returned 200. Declare static sub-routes (`/reorder`, `/in-app/all`) **before** `:id` param routes.
+- **Discuss first**: outside contributions are pitched in the `#github-pr` Discord channel before any code is written.
+- **PRs follow `.github/PULL_REQUEST_TEMPLATE.md`** and need a linked issue (`Closes #N`) for fixes or an approved feature discussion for features.
+- **Conventional commits** (`fix(maps): ...`, `feat(budget): ...`). **No Co-Authored-By or other tool-attribution trailers.**
+- One focused change per PR; no breaking changes; no unrelated reformatting. Tests ship in the same change — the project holds 80%+ coverage.
+- **Parity is law** when touching a route: same URL, method, query/body, HTTP status, `Set-Cookie` and JSON body, including bespoke error strings. Nest defaults POST to 201 — add `@HttpCode(200)` where the contract returns 200. Declare static sub-routes (`/reorder`) **before** `:id` param routes.
+
+## Quality gates in CI
+
+`.github/workflows/test.yml` runs, per package: typecheck (server also `typecheck:tests`), `lint:check`, `lint:pages`, `check:plugin-facts`, `i18n:parity:strict`, the S3 contract suite, coverage for all four packages, then a SonarCloud scan. `lint-prettier.yml` additionally runs `lint` + `format:check` on `shared/`. `plugin-sdk` has no lint script and is outside the eslint gates. **Not in CI**: `theme:lint`, Playwright, `check:gl-split` — run them locally. There are no git hooks; nothing runs before a commit except you. Other workflows build Docker images, scan them, and publish `trek-plugin-sdk` on `plugin-sdk-v*` tags.
+
+**SonarCloud** (project `liketrek_TREK`, the built-in Sonar way gate; the run takes 20–25 min, so get it right before pushing) measures **new code only** on a PR; any failing condition blocks it:
+
+| Condition (new code) | Must be |
+|---|---|
+| Coverage | ≥ 80% |
+| Duplicated lines | ≤ 3% |
+| Security / reliability / maintainability rating | A |
+| Security hotspots reviewed | 100% |
+
+- **Duplication is the one that bites.** Desktop and phone shells (`client/src/components/<X>` ↔ `client/src/mobile/screens/.../M<X>`) are deliberate mirrors that are already heavily duplicated. Every line added identically to both counts against the 3% budget, so a feature touching both shells fails on its own. Put the logic in ONE hook/module (precedents: `useInstanceSettings`, `useRangeBypass` under `client/src/components/Admin/`) and leave only markup in each shell. Locale files are excluded from duplication, so i18n additions are free.
+- **Coverage is per new line across all four packages.** A new file without tests drags the PR under 80%. Files in `sonar.coverage.exclusions` don't count either way.
+- **Ratings are about new issues.** One new bug drops reliability; one new vulnerability drops security. Don't introduce hotspot patterns (`Math.random` in anything security-adjacent, `child_process` through PATH, backtracking regexes, secret-looking strings). Path-wide suppressions live only in `sonar-project.properties` with a written justification; one-off findings are resolved on SonarCloud, never with an inline `// NOSONAR`.
+- **Check it yourself.** The `sonarqube` MCP is connected: `list_pull_requests` → `get_project_quality_gate_status` shows each condition's value; `search_duplicated_files` + `get_duplications` show what tripped duplication; `search_sonar_issues_in_projects` lists new issues. Test files are excluded from analysis — when duplication fires, the source is the problem.

 ## Reference docs

- `MCP.md` — MCP server/tools/scopes. `README.md` — deployment, env vars, reverse-proxy setup. `server/src/nest/README.md` — per-module blueprint and test layout (unit / parity / e2e).
+- `MCP.md` (MCP server, tools, scopes) · `README.md` (deployment, env vars, reverse proxy) · `server/src/nest/README.md` (module blueprint, test layout) · `server/src/app-config/README.md` (env parsing quirks) · `plugin-sdk/README.md` (plugin author guide).
+- `wiki/` — end-user documentation. `Dockerfile` / `docker-compose*.yml` — the deployment path and the local S3 test stack.
@@ -8,7 +8,7 @@ This is a minimal Helm chart for deploying the TREK app.
 - Optional persistent storage for `/app/data` and `/app/uploads`
 - Configurable environment variables and secrets
 - Optional generic Ingress support
- Health checks on `/api/health`
+- Configurable health checks (liveness/readiness probes) on `/api/health`

 ## Helm Repository

@@ -46,6 +46,7 @@ See `values.yaml` for more options.
 - With `persistence.enabled: false`, the data and uploads volumes use an `emptyDir` — storage is ephemeral and lost on pod restart. Intended for testing only.
 - `JWT_SECRET` is managed entirely by the server — auto-generated into the data PVC on first start and rotatable via the admin panel (Settings → Danger Zone). No Helm configuration needed.
 - `ENCRYPTION_KEY` encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest. Recommended: set via `secretEnv.ENCRYPTION_KEY` or `existingSecret`. If left empty, the server falls back automatically: existing installs use `data/.jwt_secret` (no action needed on upgrade); fresh installs auto-generate a key persisted to the data PVC.
+- Liveness and readiness probes are configurable under `probes`. Overrides are merged over the defaults, so `--set probes.liveness.initialDelaySeconds=60` keeps the `httpGet` handler. When switching to `exec` or `tcpSocket`, clear `httpGet` in the same override. Set `probes.liveness: null` to remove a probe.
 - If using ingress, you must manually keep `env.ALLOWED_ORIGINS` and `ingress.hosts` in sync to ensure CORS works correctly. The chart does not sync these automatically.
 - Set `env.ALLOW_INTERNAL_NETWORK: "true"` if Immich or other integrated services are hosted on a private/RFC-1918 address (e.g. a pod on the same cluster or a NAS on your LAN). Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) remain blocked regardless.
 - `FORCE_HTTPS` is optional. Set `env.FORCE_HTTPS: "true"` only when ingress (or another proxy) terminates TLS. It enables HTTPS redirects, HSTS, CSP `upgrade-insecure-requests`, and forces the session cookie `secure` flag. Requires `TRUST_PROXY` to be set.
@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 4.1.1
+version: 4.2.0
 description: Minimal Helm chart for TREK app
-appVersion: "4.1.1"
+appVersion: "4.2.0"
@@ -80,18 +80,14 @@ spec:
              mountPath: /app/data
            - name: uploads
              mountPath: /app/uploads
+          {{- with (default dict .Values.probes).liveness }}
          livenessProbe:
-            httpGet:
-              path: /api/health
-              port: 3000
-            initialDelaySeconds: 15
-            periodSeconds: 30
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
+          {{- with (default dict .Values.probes).readiness }}
          readinessProbe:
-            httpGet:
-              path: /api/health
-              port: 3000
-            initialDelaySeconds: 5
-            periodSeconds: 10
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
      volumes:
        - name: data
          {{- if .Values.persistence.enabled }}
@@ -134,6 +134,25 @@ persistence:
    existingClaim: ""
    annotations: {}

+# Readiness and liveness probes. Overrides are merged over these defaults, so a key you
+# do not set stays as shipped: --set probes.liveness.initialDelaySeconds=60 keeps the
+# httpGet handler. Switching handler means clearing the old one in the same override
+# (httpGet: null together with tcpSocket), otherwise the API rejects the pod with
+# "may not specify more than 1 handler type". Set probes.liveness to null to drop a probe.
+probes:
+  liveness:
+    httpGet:
+      path: /api/health
+      port: 3000
+    initialDelaySeconds: 15
+    periodSeconds: 30
+  readiness:
+    httpGet:
+      path: /api/health
+      port: 3000
+    initialDelaySeconds: 5
+    periodSeconds: 10
+
 resources:
  requests:
    cpu: 100m
@@ -1,77 +1,69 @@
 # CLAUDE.md

-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-Scope: the **`@trek/client`** workspace (React 19 + Vite + Zustand + Tailwind PWA). See the repo-root `CLAUDE.md` for the monorepo picture and `server/CLAUDE.md` for the API. This file covers client internals only.
+Scope: the **`@trek/client`** workspace (React 19 + Vite + Zustand + Tailwind PWA). See the repo-root `CLAUDE.md` for the monorepo picture and the philosophy, `server/CLAUDE.md` for the API. This file holds the client's commands, invariants and pitfalls; `ls` the directories for the inventory.

 ## Commands (run from `client/`)

 ```bash
-npm run dev               # Vite dev server; proxies /api,/ws,/uploads,/oauth → http://localhost:3001
+npm run dev               # Vite dev server; proxies the API/ws/uploads/MCP/OAuth paths → http://localhost:3001
 npm run build             # prebuild generates PWA icons, then vite build
-npm run typecheck         # tsc --noEmit
-npm run lint              # eslint .
-npm run lint:pages        # enforce the Page pattern (scripts/check-page-pattern.mjs)
-npm run test              # vitest run (tests/** + src/**/*.test.{ts,tsx})
-npm run test:unit         # tests/unit
-npm run test:integration  # tests/integration + co-located src tests
-npm run test:coverage     # v8 coverage
-npm run e2e               # Playwright
-npm run e2e:report        # open last Playwright report
-npm run shots             # Playwright screenshots project (shots:promote to accept)
-npm run theme:lint        # theme conformance audit (theme:lint:strict exits 1 on findings; not a CI gate)
+npm run typecheck         # tsc --noEmit (CI)
+npm run lint              # eslint .   (lint:check in CI)
+npm run lint:pages        # enforce the Page pattern (CI gate)
+npm run test              # vitest run (tests/** + co-located src/**/*.test.{ts,tsx}); also test:unit / test:integration / test:coverage
+npm run e2e               # Playwright (local only; e2e:report opens the last report)
+npm run shots             # Playwright screenshot project (shots:promote to accept)
+npm run theme:lint        # theme conformance audit (theme:lint:strict exits 1; local only)
+npm run check:gl-split    # after build: fails if one chunk bundles both mapbox-gl and maplibre-gl (local only)
 ```

-Single test:
+Single test: `npx vitest run src/store/slices/budgetSlice.test.ts`, or `npx vitest run -t "optimistically adds the place"`.

-```bash
-npx vitest run src/store/slices/budgetSlice.test.ts
-npx vitest run -t "optimistically adds the place"
-npx vitest watch src/pages/DashboardPage.test.tsx
-```
+The dev server needs the API on **:3001** — run `npm run dev` at the repo root to start both.

-The dev server needs the API on **:3001** — run the server (`npm run dev` from root or `server/`) alongside, or `npm run dev` at the repo root to start both.
+## Page pattern (enforced — `lint:pages` fails otherwise)

-## Page pattern (enforced — `lint:pages` will fail otherwise)
-
-Every `src/pages/*Page.tsx` is a thin **wiring container**; all state/effects/handlers live in a co-located **`use<Page>()` hook** under `src/pages/<page>/`. The page body must **not** call `useState/useReducer/useEffect/useLayoutEffect/useMemo/useCallback/useRef` — only context hooks like `useTranslation()` are allowed. Optional `<page>Model.ts` holds pure (React-free) types/helpers. Full spec in `src/pages/PATTERN.md`. When extracting, keep rendered JSX byte-identical — it's a refactor of where logic lives.
+Every `src/pages/*Page.tsx` is a thin **wiring container**; all state/effects/handlers live in a co-located **`use<Page>()` hook** under `src/pages/<page>/`. The page body must **not** call React state/effect/memo/ref hooks — only context hooks like `useTranslation()`. An optional `<page>Model.ts` holds pure, React-free types and helpers. Full spec in `src/pages/PATTERN.md`. When extracting, keep the rendered JSX byte-identical — it is a refactor of where logic lives.

 ## Data flow — offline-first

-The layering is **store → repo → api | Dexie**, and writes go through a mutation queue:
+The layering is **component → feature hook → store/slice → `repo/` → `api/` | Dexie**, and writes go through a mutation queue:

- **`src/store/`** — Zustand. `tripStore.ts` is composed from **slices** in `store/slices/` (places, days, packing, todo, budget, reservations, files, assignments, dayNotes). Other stores: auth, settings, addon, permissions, inAppNotification, journey, vacay, systemNotice, collection, saveToCollection, plugin, backgroundTasks. `slices/remoteEventHandler.ts` applies inbound WebSocket events to local state.
- **`src/repo/`** — per-entity repositories that mediate between the network and the offline cache. The pattern: if `navigator.onLine`, call the REST API and upsert into Dexie; if offline, read from Dexie. Always go through a repo for trip data, not the API directly.
- **`src/api/client.ts`** — single Axios instance; request/response types imported from `@trek/shared` Zod schemas. `api/websocket.ts` manages the `/ws` connection.
- **`src/db/offlineDb.ts`** — Dexie/IndexedDB schema: cached entities + the `QueuedMutation` table + `SyncMeta` (per-trip last-sync, prefetched-tiles bbox) + a `BlobCache` for offline file/photo access.
- **`src/sync/`** — `mutationQueue.ts`: offline writes do an optimistic Dexie write (with a temporary **negative id** for creates), then on reconnect `flush()` replays REST with the mutation's UUID as the **`X-Idempotency-Key`** header (matching the server interceptor) and reconciles the Dexie row. `tripSyncManager.ts` / `syncTriggers.ts` / `connectivity.ts` drive reconnection sync; `tilePrefetcher.ts` pre-downloads map tiles.
+- **`src/store/`** — Zustand. `tripStore.ts` is composed from slices in `store/slices/`; `slices/remoteEventHandler.ts` applies inbound WebSocket events to local state.
+- **`src/repo/`** — per-entity repositories mediating between the network and the offline cache: online, call REST and upsert into Dexie; offline, read Dexie. Always go through a repo for trip data.
+- **`src/api/client.ts`** — the single Axios instance, typed from `@trek/shared`. New API surface goes in a per-domain `api/<domain>.ts`, not the god module.
+- **`src/db/offlineDb.ts`** — the Dexie schema. Database and table names are the on-device contract — renaming one orphans every user's cache.
+- **`src/sync/`** — `mutationQueue.ts`: offline writes do an optimistic Dexie write (temporary **negative id** for creates), then `flush()` replays REST on reconnect with the mutation's UUID as the **`X-Idempotency-Key`** header (matching the server interceptor) and reconciles the row. The rest of the directory drives reconnection sync, the auth gate that stops background loops before logout swaps the DB, offline preferences, and map pre-download (raster and vector prefetchers).

-## Direction (from the 2026 audit)
+## Rules for new code

-The offline core is flagship work surrounded by a periphery that ignores it. New code must extend the core's discipline, not the periphery's shortcuts:
+The offline core is flagship work surrounded by a periphery that ignores it. New code extends the core's discipline, not the periphery's shortcuts:

- **One data path, no layer skips**: component → feature hook → store/slice → `repo/` → `api/` | Dexie. **Never import `api/client` (or raw fetch/axios) from a component or modal** — especially never *write* from one. A long tail of existing files (~190 at last count) bypasses the layering and no lint ratchet holds the line yet; that's debt, not precedent. New API surface goes in a per-domain `api/<domain>.ts`, not the `client.ts` god module.
- **Offline-first is the product promise, not a trip-planner feature.** New domains should get a repo with both read-through and offline writes (temp id → optimistic Dexie write → idempotent queue entry), extending the existing pattern rather than hand-rolling a variant. If a domain is deliberately online-only, mark it so explicitly.
- **No God components or God hooks.** The page pattern is a floor, not a ceiling — a 900-line `use<Page>()` hook that satisfies the linter is still coupling. Decompose hooks by concern, split renders into memoizable sections, and don't pass 50-field prop bags with inline-arrow callbacks (it defeats `React.memo`).
- **Prefer React 19 idioms over hand-rolled machinery**: `useOptimistic` for optimistic updates, `useActionState`/`useFormStatus` for forms, `use()` + Suspense for read paths, `useSyncExternalStore` for external subscriptions (`hooks/useNetworkMode` is the reference implementation).
- **Optimistic writes must reconcile** — rollback + user-visible toast on failure. No `.catch(() => {})`, no bare `catch {}`; silently keeping state the server rejected is a data-integrity bug.
- **WS remote-event handling must match local slice reducers field-for-field.** If a slice reducer preserves embedded fields on update (e.g. `place_time`/`end_time`), the corresponding `remoteEventHandler` branch must apply the identical merge semantics — divergence is silent, cross-user data loss.
- **Subscribe with selectors** (`useShallow` for multi-field reads); never `const s = useStore()` whole-store; no store getters that allocate per call. Use `getState()` for imperative access in effects.
- **Connectivity**: `isEffectivelyOffline()` is the single source of truth — never read `navigator.onLine` directly in feature code.
- **Rendering security**: never interpolate user content into HTML strings (map tooltips/popups included — build via DOM + `textContent`); untrusted or cross-user markdown gets `rehype-sanitize`; never `rehype-raw` near those surfaces.
- **No `window` CustomEvent buses or global mutable `window` state** — use the store or a typed emitter. No `any` at boundaries: WS payloads and map renderer props get real types, validated where they enter.
- **Hygiene**: error boundaries around new shells/routes; every async `.then(setState)` needs a cancelled flag or `AbortController`; no `eslint-disable exhaustive-deps` as a routine tool (a missing memo dep has already shipped wrong money on screen); no sequential-await N+1 fetch loops — batch; search for an existing utility/hook before writing a duplicate.
- **Theming**: use the semantic Tailwind tokens (`bg-surface*`, `text-content`, `border-edge`, `bg-accent`, status colors) — no raw palette classes, hex literals, or invented CSS vars; only `applyAppearance()` mutates `<html>` styling.
+- **One data path, no layer skips.** Never import `api/client` (or raw fetch/axios) from a component or modal — especially never *write* from one. A long tail of existing files bypasses the layering and no lint ratchet holds the line yet; that is debt, not precedent.
+- **Offline-first is the product promise.** New domains get a repo with read-through and offline writes (temp id → optimistic Dexie write → idempotent queue entry). If a domain is deliberately online-only, say so explicitly.
+- **No god components or god hooks.** The page pattern is a floor, not a ceiling. Decompose hooks by concern, split renders into memoizable sections, and don't pass huge prop bags with inline-arrow callbacks.
+- **Prefer React 19 idioms**: `useOptimistic`, `useActionState`/`useFormStatus`, `use()` + Suspense, `useSyncExternalStore` for external subscriptions (`hooks/useNetworkMode` is the reference).
+- **Optimistic writes must reconcile** — rollback + user-visible toast on failure. No `.catch(() => {})`, no bare `catch {}`.
+- **WS remote-event handling must match local slice reducers field-for-field.** Divergence is silent, cross-user data loss.
+- **Subscribe with selectors** (`useShallow` for multi-field reads); never whole-store subscriptions; `getState()` for imperative access in effects.
+- **Connectivity**: `isEffectivelyOffline()` is the single source of truth — never read `navigator.onLine` in feature code.
+- **Rendering security**: never interpolate user content into HTML strings (map popups included — build via DOM + `textContent`, or `escapeHtml` from `@trek/shared`); untrusted markdown gets `rehype-sanitize`; never `rehype-raw` near it.
+- **No `window` event buses or global mutable `window` state.** No `any` at boundaries: WS payloads and map renderer props get real types.
+- **Hygiene**: error boundaries around new shells/routes (`components/shared/ErrorBoundary.tsx`); every async `.then(setState)` needs a cancelled flag or `AbortController`; no routine `eslint-disable exhaustive-deps` (a missing dep has already shipped wrong money on screen); no sequential-await N+1 fetch loops; search for an existing utility before writing a duplicate.
+- **Theming**: use the semantic Tailwind tokens defined in `tailwind.config.js` (`bg-surface*`, `text-content*`, `border-edge*`, `bg-accent*`, status colors) — no palette classes, hex literals, arbitrary-value color classes, or invented CSS vars. Only `applyAppearance()` in `src/theme/` mutates `<html>` styling (see `src/theme/README.md`). `theme:lint` catches literals and `bg-[#...]`-style classes but not named palette classes — review those by hand.

-## Other big-picture pieces
+## Big-picture pieces

- **Maps** (`src/components/Map/`): two interchangeable renderers — Leaflet (`MapView.tsx`) and Mapbox GL (`MapViewGL.tsx`), chosen at runtime by `MapViewAuto.tsx` based on the tile-source setting. GL-specific overlay/marker logic lives in the `*Mapbox.ts` siblings. Keep both renderers in sync when changing map features. **Offline maps**: only Leaflet supports full pre-download (raster tiles via `sync/tilePrefetcher.ts`, cached by the Workbox `map-tiles` rule). Mapbox GL is best-effort offline — its vector tiles are cached opportunistically as you browse online (the `mapbox-tiles` SW rule), not prefetched. Tile requests stay `no-cors` so self-hosted/custom tile providers without CORS headers keep working; `navigator.storage.persist()` (called at app init) keeps cached tiles from being evicted under storage pressure.
- **i18n** (`src/i18n/TranslationContext.tsx`): `en` is bundled synchronously as the fallback; every other locale is a **dynamic `import('@trek/shared/i18n/<locale>')`** so Vite code-splits one chunk per locale and only the active one is fetched. `t(key)` resolves top-level keys from `@trek/shared/i18n`. Add new strings to the locale files in **`shared/`**, not here. RTL handled via `isRtlLanguage`.
- **Mobile shell** (`src/mobile/`): below 768px (`useIsPhone`, reactive via matchMedia) `App.tsx` wraps routes in `MobileShell`, and phone-specific screens under `mobile/screens/<domain>/` (trip, dashboard, atlas, vacay, settings, admin, …) take over; the desktop/tablet experience at ≥768px is untouched. UI changes to a domain that has an `M*` screen usually need both the desktop component and the mobile screen updated.
- **Plugins UI** (`src/components/Plugins/`): third-party plugin surfaces render in a sandboxed iframe — `PluginFrame.tsx` owns the postMessage bridge and hands the plugin the current theme's design tokens (live re-sync on theme/accent change). Contribution points: `PluginWidgets.tsx` (dashboard), `PluginDaySchedule.tsx` (itinerary rows), `Map/MapPluginLayers.tsx`/`MapPluginMarkers.tsx` (map). `store/pluginStore.ts` holds installed-plugin state; admin install/manage in `components/Admin/AdminPluginsPanel.tsx`. The server-side runtime is `server/src/nest/plugins/`; plugin authoring is covered by the `trek-plugin-dev` skill.
- **PWA** (`vite.config.js`): `VitePWA` with `registerType: 'autoUpdate'` and Workbox `runtimeCaching` for tiles/API/uploads. `prebuild` (`scripts/generate-icons.mjs`) generates app icons before build.
- **Native shell** (`client/src/platform/`): the Capacitor apps are not served from the same origin as the API, so `getServerOrigin()` is the single source of truth for where the server lives — `''` in the web build (relative URLs stay relative), the user's chosen server in native. Requests go through `apiFetch` / the `apiClient` interceptor, assets through `resolveAssetUrl` / `<ServerImage>`; ESLint blocks bare `fetch('/api…')` and `/uploads` literals so the seam cannot reopen. Native authenticates with `Authorization: Bearer` because the session cookie is `sameSite: 'lax'` and a webview can never send it cross-site. Saved servers are "profiles" (`serverProfiles.ts`, Capacitor Preferences) with tokens in device secure storage (`serverTokens.ts`) and a per-profile Dexie namespace. **The web build must stay byte-identical — especially Dexie names**; see `offlineDb.naming.test.ts`.
+- **Maps** (`src/components/Map/`): two interchangeable renderers — Leaflet and Mapbox/MapLibre GL — chosen at runtime by `MapViewAuto.tsx`. Keep both in sync when changing map features, and keep `mapbox-gl` and `maplibre-gl` in separate chunks (`check:gl-split`). The raster prefetcher fetches tiles `no-cors` so custom tile providers without CORS headers keep working; the vector prefetcher deliberately uses `cors` because it has to read the responses — don't "align" one with the other.
+- **i18n** (`src/i18n/TranslationContext.tsx`): `en` is bundled; every other locale is a dynamic `import('@trek/shared/i18n/<locale>')` so Vite emits one chunk per locale. Strings live in `shared/`, never here.
+- **Mobile shell** (`src/mobile/`): below the phone breakpoint (`useIsPhone`) `App.tsx` wraps routes in `MobileShell` and the `M*` screens under `mobile/screens/` take over. A UI change to a domain with an `M*` twin usually needs both — and the shared-hook rule below.
+- **Plugins UI** (`src/components/Plugins/`): third-party surfaces render only inside the sandboxed `PluginFrame` iframe (postMessage bridge, live theme-token sync). Host-rendered contribution points (widgets, schedule rows, map layers, planner columns/actions) render server-normalized primitives only — plugin markup never runs inline. Authoring is covered by the `trek-plugin-dev` skill.
+- **Managed installs** (`src/managed/index.tsx`): the attachment point for screens that only exist on a centrally administered install. Empty here by design — an operator replaces it at build time. Don't put features there.
+
+## Desktop ↔ mobile shells and the SonarQube duplication gate
+
+Every desktop component with a phone twin is a deliberate copy that is already heavily duplicated. CI's SonarCloud gate allows **≤ 3% duplicated lines on the PR's new code**, so adding the same lines to both shells fails the PR by itself. Put logic in one shared hook/module (`useInstanceSettings`, `useRangeBypass` under `components/Admin/` are the pattern) and keep only markup in each shell. Full gate rules in the root `CLAUDE.md`.

 ## Tests

-vitest with `@vitejs/plugin-react`, jsdom (custom `tests/environment/jsdom-native-abort.ts`), `forks` pool. Tests live both in `tests/{unit,integration}/` and co-located as `src/**/*.test.{ts,tsx}`. `msw` mocks HTTP, `fake-indexeddb` backs Dexie in tests. Page tests render JSX against a mocked hook; hook/slice logic is tested in isolation (see `store/slices/budgetSlice.test.ts`). Playwright e2e config separate (`npm run e2e`).
+vitest with `@vitejs/plugin-react`, a custom jsdom environment (`tests/environment/`), `forks` pool. Tests live in `tests/{unit,integration}/` and co-located as `src/**/*.test.{ts,tsx}`. `msw` mocks HTTP, `fake-indexeddb` backs Dexie. Page tests render JSX against a mocked hook; hook/slice logic is tested in isolation (see `store/slices/budgetSlice.test.ts`).
@@ -41,6 +41,12 @@ test('#1432 iPad: places list is scrollable, not draggable', async ({ page }) =>
  }
  await page.reload()
  await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
+
+  // An iPad is inside the 768-1023px band, where only one side panel is open at a
+  // time so the map keeps a usable width (#2247). The places list is one tap away.
+  // Located by the tab's own aria-label, not by role+name: the tab bar carries a
+  // "Plan" button of its own.
+  await page.locator('button[aria-label="Places"]').click()
  await expect(page.getByText('Place 1').first()).toBeVisible({ timeout: 20_000 })

  // The context must really be the one from the bug report: coarse pointer, desktop
@@ -74,6 +80,9 @@ test('#1432 iPad: places list is scrollable, not draggable', async ({ page }) =>
  })
  expect(['1', 'absent']).toContain(arrowOpacity)

-  // 4. The iPad must still get the desktop two-pane layout — isMobile stayed width-based.
+  // 4. The iPad must still get the desktop shell — isMobile stayed width-based. One
+  //    panel at a time (#2247), so opening Places closed the day plan and left its
+  //    tab as the way back.
  await expect(page.locator('.leaflet-container')).toBeVisible()
+  await expect(page.locator('button[aria-label="Plan"]')).toBeVisible()
 })
@@ -1,6 +1,6 @@
 {
  "name": "@trek/client",
-  "version": "4.1.1",
+  "version": "4.2.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -37,6 +37,7 @@
    "@fontsource/museomoderno": "^5.3.0",
    "@fontsource/playfair-display": "^5.3.0",
    "@fontsource/poppins": "^5.2.7",
+    "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
    "@maplibre/maplibre-gl-leaflet": "0.1.4",
    "@simplewebauthn/browser": "^13.1.2",
    "@trek/shared": "*",
@@ -0,0 +1,25 @@
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+/**
+ * setRTLTextPlugin() takes the URL of a classic script that the GL worker pulls in
+ * with importScripts. mapbox-gl-rtl-text ships exactly that as
+ * dist/mapbox-gl-rtl-text.js, but its "exports" field publishes only the ESM/WASM
+ * entry, so the resolver refuses the subpath. Resolving the entry it does publish
+ * and stepping across to dist keeps this working wherever npm hoists the package.
+ *
+ * Shared by vite.config.js and vitest.config.ts: the build needs it to emit the
+ * asset, and the test run needs it because a lazily imported engine module reaches
+ * the same specifier.
+ *
+ * The pattern is a regex, not a string key: the import carries a `?url` suffix,
+ * which a string alias will not match. It is left unanchored on purpose so the
+ * query survives the rewrite and Vite still emits an asset URL.
+ */
+export const rtlTextAlias = {
+  find: /^@mapbox\/mapbox-gl-rtl-text\/dist\/mapbox-gl-rtl-text\.js/,
+  replacement: path.join(
+    path.dirname(createRequire(import.meta.url).resolve('@mapbox/mapbox-gl-rtl-text')),
+    '../dist/mapbox-gl-rtl-text.js',
+  ),
+};
@@ -26,4 +26,25 @@ for (const { name, size } of sizes) {
  console.log(`  \u2713 ${name} (${size}x${size})`);
 }

+// Maskable variants: Android lays a maskable icon edge to edge under the round
+// launcher mask, so the glyph has to sit inside the safe zone (a circle of 80%
+// of the canvas). The master SVG draws the glyph nearly full bleed; shrink and
+// recenter it, keeping the brand gradient as the full background.
+const maskableSvg = svgBuffer
+  .toString()
+  .replace('translate(56,51) scale(0.267)', 'translate(81,81) scale(0.234)');
+
+const maskableSizes = [
+  { name: 'icon-maskable-192x192.png', size: 192 },
+  { name: 'icon-maskable-512x512.png', size: 512 },
+];
+
+for (const { name, size } of maskableSizes) {
+  await sharp(Buffer.from(maskableSvg), { density: 300 })
+    .resize(size, size)
+    .png({ compressionLevel: 9 })
+    .toFile(join(iconsDir, name));
+  console.log(`  \u2713 ${name} (${size}x${size}, maskable)`);
+}
+
 console.log('PWA icons generated.');
@@ -522,6 +522,83 @@ describe('Version cache-busting', () => {
    renderApp('/')
    await waitFor(() => expect(reload).toHaveBeenCalled())
  })
+
+  it('FE-COMP-APP-026: a version bump never deletes the caches or unregisters the worker (#2228)', async () => {
+    // The old handler wiped every Cache Storage bucket and every registration
+    // here, which left the device with no app shell until a fresh ~22 MB
+    // precache finished: anyone who closed the app or lost signal inside that
+    // window could no longer start the PWA offline at all, and it also threw
+    // away the map tiles and documents the user had downloaded on purpose.
+    localStorage.setItem('trek_app_version', '2.9.9')
+    const cachesDelete = vi.fn().mockResolvedValue(true)
+    const unregister = vi.fn().mockResolvedValue(true)
+    const update = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('caches', { keys: vi.fn().mockResolvedValue(['workbox-precache-v2', 'map-tiles']), delete: cachesDelete })
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: {
+        getRegistration: vi.fn().mockResolvedValue({ update, unregister }),
+        getRegistrations: vi.fn().mockResolvedValue([{ unregister }]),
+        addEventListener: vi.fn(),
+      },
+    })
+
+    server.use(
+      http.get('/api/auth/app-config', () =>
+        HttpResponse.json({ version: '2.9.10' })
+      )
+    )
+    seedAuth()
+    renderApp('/')
+
+    // It asks the worker to fetch the new build; Workbox swaps the precache
+    // atomically once that install completes.
+    await waitFor(() => expect(update).toHaveBeenCalled())
+    expect(cachesDelete).not.toHaveBeenCalled()
+    expect(unregister).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-APP-028: a version that does not look like a release tag is ignored', async () => {
+    // The value arrives over the wire and is written to this device's storage,
+    // so it is validated rather than trusted. An unusable one must also not be
+    // compared against the stored marker, or every launch would see a mismatch
+    // and try to update.
+    localStorage.setItem('trek_app_version', '2.9.9')
+    const reload = vi.fn()
+    Object.defineProperty(window, 'location', { writable: true, value: { ...window.location, reload } })
+
+    server.use(
+      http.get('/api/auth/app-config', () =>
+        HttpResponse.json({ version: '<script>alert(1)</script>', managed: false })
+      )
+    )
+    seedAuth()
+    renderApp('/')
+
+    await waitFor(() => expect(screen.queryByText('common.loading')).not.toBeInTheDocument())
+    expect(localStorage.getItem('trek_app_version')).toBe('2.9.9')
+    expect(reload).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-APP-027: the version marker is written even if the update path throws (#2228)', async () => {
+    // The marker used to be written after the purge and outside its try, so a
+    // throwing step left it unwritten and the whole destructive path repeated on
+    // every launch, for good.
+    localStorage.setItem('trek_app_version', '2.9.9')
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: { getRegistration: vi.fn().mockRejectedValue(new Error('no worker')), addEventListener: vi.fn() },
+    })
+
+    server.use(
+      http.get('/api/auth/app-config', () =>
+        HttpResponse.json({ version: '2.9.10' })
+      )
+    )
+    seedAuth()
+    renderApp('/')
+    await waitFor(() => expect(localStorage.getItem('trek_app_version')).toBe('2.9.10'))
+  })
 })

 // Regression: a device that has never mirrored the preference must not treat
@@ -19,7 +19,7 @@ import ErrorBoundary from './components/shared/ErrorBoundary'
 import { lazyWithRetry } from './utils/lazyWithRetry'
 import { useIsPhone } from './mobile/useIsPhone'
 import { TranslationProvider, useTranslation } from './i18n'
-import { authApi } from './api/client'
+import { authApi, isAuthPublicPath } from './api/client'
 import { tripRepo } from './repo/tripRepo'
 import { readStartDestination, tripStartPath, DEFAULT_START_PAGE, DEFAULT_START_TRIP_TAB, SETTINGS_WAIT_MS, START_DESTINATION_ROUTE } from './utils/startDestination'
 import { usePermissionsStore, PermissionLevel } from './store/permissionsStore'
@@ -283,7 +283,7 @@ function RouteFallback() {
 }

 export default function App() {
-  const { loadUser, isAuthenticated, demoMode, setManaged, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, setPlacesEnrichEnabled } = useAuthStore()
+  const { loadUser, isAuthenticated, demoMode, setManaged, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, setPlacesEnrichEnabled, setPlaceShadowEnabled } = useAuthStore()
  const { loadSettings } = useSettingsStore()
  const { loadAddons } = useAddonStore()
  const { loadPlugins } = usePluginStore()
@@ -300,7 +300,7 @@ export default function App() {
        loadUser()
      }
    }
-    authApi.getAppConfig().then(async (config: { managed?: boolean; demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; places_enrich_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
+    authApi.getAppConfig().then(async (config: { managed?: boolean; demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; places_enrich_enabled?: boolean; place_shadow_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
      setManaged(!!config?.managed)
      setDemoMode(!!config?.demo_mode)
      if (config?.dev_mode) setDevMode(true)
@@ -314,26 +314,49 @@ export default function App() {
      if (config?.places_autocomplete_enabled !== undefined) setPlacesAutocompleteEnabled(config.places_autocomplete_enabled)
      if (config?.places_details_enabled !== undefined) setPlacesDetailsEnabled(config.places_details_enabled)
      if (config?.places_enrich_enabled !== undefined) setPlacesEnrichEnabled(config.places_enrich_enabled)
+      if (config?.place_shadow_enabled !== undefined) setPlaceShadowEnabled(config.place_shadow_enabled)
      if (config?.permissions) usePermissionsStore.getState().setPermissions(config.permissions)

-      if (config?.version) {
+      // A version is a short release tag and nothing else. It arrives over the
+      // wire and is written to this device's storage, so it is rebuilt from the
+      // characters a tag may contain and kept only when nothing had to be
+      // stripped. Anything else is ignored, which also keeps a malformed value
+      // from being compared against the stored marker and starting an update on
+      // every launch.
+      const reportedVersion = typeof config?.version === 'string' ? config.version : ''
+      const version = reportedVersion.replace(/[^\w.+-]/g, '').slice(0, 64)
+      if (version && version === reportedVersion) {
        const storedVersion = localStorage.getItem('trek_app_version')
-        if (storedVersion && storedVersion !== config.version) {
+        // Record the version BEFORE acting on it. The old code wrote the marker
+        // after the purge and outside its try, so a throwing setItem (private
+        // mode, blocked site data, quota) left the caches deleted, the marker
+        // unwritten and the reload unreached, and the purge then repeated on
+        // every single launch, permanently (#2228).
+        try { localStorage.setItem('trek_app_version', version) } catch { /* site data blocked */ }
+        if (storedVersion && storedVersion !== version) {
+          // A newer build is deployed. Ask the service worker to fetch it and
+          // hand over; Workbox ('autoUpdate' + skipWaiting + clientsClaim)
+          // installs the new precache and only then drops the outdated one, so
+          // there is never a moment without an app shell.
+          //
+          // This used to delete EVERY Cache Storage bucket and unregister EVERY
+          // worker instead. That left the device with no shell and no worker
+          // until a fresh ~22 MB precache finished (minutes on mobile data),
+          // and anyone who closed the app or lost signal in that window was
+          // left with a PWA that could no longer start offline at all. It also
+          // threw away the map tiles and file blobs the user had deliberately
+          // downloaded for offline use (#2228).
          try {
-            if ('caches' in window) {
-              const names = await caches.keys()
-              await Promise.all(names.map(n => caches.delete(n)))
+            const reg = 'serviceWorker' in navigator ? await navigator.serviceWorker.getRegistration() : undefined
+            if (reg) {
+              navigator.serviceWorker.addEventListener('controllerchange', () => window.location.reload(), { once: true })
+              await reg.update()
+              return
            }
-            if ('serviceWorker' in navigator) {
-              const regs = await navigator.serviceWorker.getRegistrations()
-              await Promise.all(regs.map(r => r.unregister()))
-            }
-          } catch {}
-          localStorage.setItem('trek_app_version', config.version)
+          } catch { /* fall through to a plain reload */ }
          window.location.reload()
          return
        }
-        localStorage.setItem('trek_app_version', config.version)
      }
    }).catch(() => {})
  }, [])
@@ -380,13 +403,22 @@ export default function App() {
    || location.pathname.startsWith('/register')
    || location.pathname.startsWith('/forgot-password')
    || location.pathname.startsWith('/reset-password')
+  // No session on these, so authenticated-only widgets (system notices,
+  // background tasks, save-to-collection) have nothing to do and would only fire
+  // a doomed authenticated request on mount.
+  //
+  // Off isAuthPublicPath rather than a second hand-kept list: the two had already
+  // drifted, this one naming only /public/journey/ while the response
+  // interceptor's covers all of /public/. A route that is public to one and not
+  // to the other is exactly the seam that puts a 401 back.
+  const hideAuthedWidgets = isAuthPage || isAuthPublicPath(location.pathname)

  return (
    <TranslationProvider>
-      {!isAuthPage && <ErrorBoundary boundaryId="widget:system-notice" fallback={null}><SystemNoticeHost /></ErrorBoundary>}
+      {!hideAuthedWidgets && <ErrorBoundary boundaryId="widget:system-notice" fallback={null}><SystemNoticeHost /></ErrorBoundary>}
      <ErrorBoundary boundaryId="widget:toast" fallback={null}><ToastContainer /></ErrorBoundary>
-      {!isAuthPage && <ErrorBoundary boundaryId="widget:background-tasks" fallback={null}><BackgroundTasksWidget /></ErrorBoundary>}
-      {!isAuthPage && (isPhone ? <MSaveToCollectionSheet /> : <SaveToCollectionModal />)}
+      {!hideAuthedWidgets && <ErrorBoundary boundaryId="widget:background-tasks" fallback={null}><BackgroundTasksWidget /></ErrorBoundary>}
+      {!hideAuthedWidgets && (isPhone ? <MSaveToCollectionSheet /> : <SaveToCollectionModal />)}
      <ErrorBoundary boundaryId="widget:offline-banner" fallback={null}><OfflineBanner /></ErrorBoundary>
      {/* One boundary for all route chunks, above <Routes> so it stays mounted
          across navigations. react-router runs location updates inside a transition,
@@ -230,7 +230,8 @@ describe('client > proxy auth challenges', () => {
    return getRegistration
  }

-  it('FE-APIWIRE-011: an HTML 401 unregisters the service worker and reloads', async () => {
+  it('FE-APIWIRE-011: an HTML 401 behind a confirmed proxy wall unregisters the service worker and reloads', async () => {
+    probeNow.mockResolvedValue('proxy-wall')
    const unregister = vi.fn(async () => true)
    installServiceWorker(unregister)
    server.use(http.get('/api/auth/me', () =>
@@ -243,6 +244,25 @@ describe('client > proxy auth challenges', () => {
    expect(sessionStorage.getItem('proxy_reauth_attempted')).toBe('1')
  })

+  it('FE-APIWIRE-016: an HTML 401 from TREK itself keeps the service worker (#2228)', async () => {
+    // text/html is not proof of a proxy: several of TREK's own routes answer
+    // res.status(401).send('Authentication required'), which Express labels
+    // text/html. Tearing the worker down for one of those costs the user
+    // offline mode for a wall that is not there, so confirm reachability first.
+    probeNow.mockResolvedValue('online')
+    const unregister = vi.fn(async () => true)
+    installServiceWorker(unregister)
+    server.use(http.get('/api/auth/me', () =>
+      new HttpResponse('Authentication required', { status: 401, headers: { 'Content-Type': 'text/html' } })))
+
+    await captureError(() => apiClient.get('/auth/me'))
+
+    expect(probeNow).toHaveBeenCalled()
+    expect(unregister).not.toHaveBeenCalled()
+    expect(reload).not.toHaveBeenCalled()
+    expect(sessionStorage.getItem('proxy_reauth_attempted')).toBeNull()
+  })
+
  it('FE-APIWIRE-012: the reauth reload only fires once per session', async () => {
    installServiceWorker(vi.fn(async () => true))
    sessionStorage.setItem('proxy_reauth_attempted', '1')
@@ -367,6 +387,33 @@ describe('client > dev-only contract drift checks', () => {
    )
  })

+  it('FE-APIWIRE-037: search-provider hits are appended to the core results and name their index', async () => {
+    server.use(
+      http.post('/api/maps/search', () => HttpResponse.json({ places: [{ name: 'Core hit' }], source: 'openstreetmap' })),
+      http.get('/api/plugin-search', () =>
+        HttpResponse.json({ places: [{ name: 'Plugin hit', source: 'plugin:demo' }] })),
+    )
+
+    // Appended, not interleaved: the core list keeps the order it earned.
+    await expect(mapsApi.search('Rome')).resolves.toEqual({
+      places: [{ name: 'Core hit' }, { name: 'Plugin hit', source: 'plugin:demo' }],
+      source: 'openstreetmap+plugin:demo',
+    })
+  })
+
+  it('FE-APIWIRE-038: a failing search provider leaves the search exactly as it was', async () => {
+    server.use(
+      http.post('/api/maps/search', () => HttpResponse.json({ places: [{ name: 'Core hit' }], source: 'openstreetmap' })),
+      http.get('/api/plugin-search', () => HttpResponse.json({ error: 'boom' }, { status: 500 })),
+    )
+
+    // The optional index being unwell must never cost the search that worked.
+    await expect(mapsApi.search('Rome')).resolves.toEqual({
+      places: [{ name: 'Core hit' }],
+      source: 'openstreetmap',
+    })
+  })
+
  it('FE-APIWIRE-023: a drifting maps response is reported under its own label', async () => {
    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
    server.use(http.post('/api/maps/search', () => HttpResponse.json({ nonsense: true })))
@@ -301,6 +301,9 @@ describe('client > endpoint wiring', () => {
      { n: 'pluginRescan', r: () => adminApi.pluginRescan(), e: 'POST /api/admin/plugins/rescan' },
      { n: 'pluginLink', r: () => adminApi.pluginLink('/srv/plugin'), e: 'POST /api/admin/plugins/link' },
      { n: 'pluginReload', r: () => adminApi.pluginReload('koffi'), e: 'POST /api/admin/plugins/koffi/reload' },
+      { n: 'pluginConfig', r: () => adminApi.pluginConfig('koffi'), e: 'GET /api/admin/plugins/koffi/config' },
+      { n: 'pluginSaveConfig', r: () => adminApi.pluginSaveConfig('koffi', { apiUrl: 'x' }), e: 'PUT /api/admin/plugins/koffi/config' },
+      { n: 'runPluginAction', r: () => adminApi.runPluginAction('koffi', 'purge cache'), e: 'POST /api/admin/plugins/koffi/actions/purge%20cache' },
      { n: 'pluginEgressHosts', r: () => adminApi.pluginEgressHosts('koffi'), e: 'GET /api/admin/plugins/koffi/egress-hosts' },
      { n: 'pluginSetEgressHosts', r: () => adminApi.pluginSetEgressHosts('koffi', ['a.example']), e: 'PUT /api/admin/plugins/koffi/egress-hosts' },
      { n: 'pluginErrors', r: () => adminApi.pluginErrors('koffi'), e: 'GET /api/admin/plugins/koffi/errors' },
@@ -410,9 +413,22 @@ describe('client > endpoint wiring', () => {
    expect(rec.url).toBe('/api/integrations/memories/synologyphotos/albums/alb-2/photos?passphrase=p%2Fw%3F')
  })

+  /**
+   * The one call in this file that is deliberately TWO requests, which is why it is not
+   * in the list above: a search asks TREK's own indexes and any installed search-provider
+   * plugin at the same time, and the caller gets one list back (#2221).
+   */
+  it('FE-APISURF-055: mapsApi.search asks the core index and the plugin providers side by side', async () => {
+    log = []
+    await mapsApi.search('Rome')
+    expect(log.map(r => `${r.method} ${r.url.split('?')[0]}`).sort()).toEqual([
+      'GET /api/plugin-search',
+      'POST /api/maps/search',
+    ])
+  })
+
  it('FE-APISURF-016: mapsApi and airportsApi map the geo endpoints', async () => {
    await assertCalls([
-      { n: 'maps.search', r: () => mapsApi.search('Rome'), e: 'POST /api/maps/search' },
      { n: 'maps.autocomplete', r: () => mapsApi.autocomplete('Rom'), e: 'POST /api/maps/autocomplete' },
      { n: 'maps.details', r: () => mapsApi.details('place/1'), e: 'GET /api/maps/details/place%2F1' },
      { n: 'maps.placePhoto', r: () => mapsApi.placePhoto('place/1'), e: 'GET /api/maps/place-photo/place%2F1' },
@@ -862,4 +878,21 @@ describe('client > multipart uploads', () => {
    expect(post.mock.calls[1][0]).toBe('/backup/upload-restore')
    expect(((post.mock.calls[1][1] as FormData).get('backup') as File).name).toBe('backup.zip')
  })
+
+  it('FE-APISURF-053: every channel test outlives the 8s global timeout', async () => {
+    const post = spyPost()
+
+    // The server budgets up to 20s for an SMTP dial and 10s for a webhook or
+    // ntfy ping; aborting at 8s threw away the reason and left the admin with a
+    // bare "failed" (#2196).
+    await notificationsApi.testSmtp('a@b.c')
+    await notificationsApi.testWebhook('https://hook')
+    await notificationsApi.testNtfy({ topic: 't' })
+    await notificationsApi.testChannel('plugin/ch')
+
+    expect(post.mock.calls).toHaveLength(4)
+    for (const call of post.mock.calls) {
+      expect(call[2]).toMatchObject({ timeout: 40000 })
+    }
+  })
 })
@@ -1,6 +1,8 @@
+import { isEffectivelyOffline } from '../sync/networkMode'
 import axios, { AxiosInstance } from 'axios'
 import type { z } from 'zod'
 import type { Place } from '../types'
+import type { TransitProvider } from '@trek/shared'
 import { randomId } from '../utils/randomId'
 import {
  weatherResultSchema, type WeatherResult,
@@ -30,7 +32,7 @@ import {
  type BudgetCreateItemRequest, type BudgetUpdateItemRequest,
  type PackingCreateItemRequest, type PackingUpdateItemRequest, type PackingSetSharingRequest,
  type TodoCreateItemRequest, type TodoUpdateItemRequest,
-  type AssignmentCreateRequest, type AssignmentParticipantsRequest, type AssignmentTimeRequest, type AssignmentTransportRequest,
+  type AssignmentCreateRequest, type AssignmentNotesRequest, type AssignmentParticipantsRequest, type AssignmentTimeRequest, type AssignmentTransportRequest,
  type PlaceBulkDeleteRequest,
  type PlaceBulkUpdateRequest,
  type DayNoteCreateRequest, type DayNoteUpdateRequest,
@@ -53,6 +55,18 @@ import {
  type StorageConfigPut,
  type StorageTestResponse,
  type StorageUsage,
+  type PluginSettingsField,
+  type PluginInstanceConfigResponse,
+  type PluginInstanceConfigUpdated,
+  type PluginActionDescriptor,
+  type PluginActionResult,
+  type PluginInstallRequest,
+  RoadtripDayTrack,
+  RoadtripVia,
+  RoadtripViaBatchRequest,
+  RoadtripViaCreateRequest,
+  RoadtripViaReanchorRequest,
+  RoadtripViaUpdateRequest,
 } from '@trek/shared'
 import { getSocketId } from './websocket'
 import { probeNow } from '../sync/connectivity'
@@ -122,7 +136,7 @@ const RATE_LIMIT_MESSAGES: Record<string, string> = {
 function translateRateLimit(): string {
  const fallback = RATE_LIMIT_MESSAGES['en']!
  try {
-    const lang = localStorage.getItem('app_language') || 'en'
+    const lang = localStorage.getItem('app_language') || localStorage.getItem('app_language_server') || 'en'
    return RATE_LIMIT_MESSAGES[lang] ?? fallback
  } catch {
    return fallback
@@ -208,16 +222,24 @@ apiClient.interceptors.response.use(
        }
      }
      // Pangolin header-auth extended compatibility mode: returns 401 with an
-      // HTML body (a JS redirect page) instead of a 302. TREK's own 401s are
-      // always application/json, so checking for text/html is unambiguous.
+      // HTML body (a JS redirect page) instead of a 302.
+      //
+      // A text/html 401 is NOT unambiguous on its own: several of TREK's own
+      // routes answer with res.status(401).send('Authentication required'),
+      // which Express labels text/html. Tearing the service worker down for one
+      // of those would cost the user offline mode for a proxy wall that isn't
+      // there, so confirm a reachable proxy first, exactly like the no-response
+      // branch above (#2228).
      if (error.response?.status === 401) {
        const ct = (error.response.headers?.['content-type'] as string | undefined) ?? ''
        if (ct.includes('text/html')) {
          const { pathname } = window.location
          if (!isAuthPublicPath(pathname) && !sessionStorage.getItem('proxy_reauth_attempted')) {
-            sessionStorage.setItem('proxy_reauth_attempted', '1')
-            await unregisterSWAndReload()
-            return Promise.reject(error)
+            if (await probeNow() === 'proxy-wall') {
+              sessionStorage.setItem('proxy_reauth_attempted', '1')
+              await unregisterSWAndReload()
+              return Promise.reject(error)
+            }
          }
        }
      }
@@ -418,7 +440,10 @@ export const daysApi = {

 export const placesApi = {
  list: (tripId: number | string, params?: Record<string, unknown>) => apiClient.get(`/trips/${tripId}/places`, { params }).then(r => r.data),
-  create: (tripId: number | string, data: PlaceCreateRequest) => apiClient.post(`/trips/${tripId}/places`, data).then(r => r.data),
+  // Typed: an untyped `r.data` is what let `{ place }` be read as a bare place,
+  // so every hotel booking minted an unlinked duplicate (#2243).
+  create: (tripId: number | string, data: PlaceCreateRequest): Promise<{ place: Place }> =>
+    apiClient.post(`/trips/${tripId}/places`, data).then(r => r.data),
  get: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}`).then(r => r.data),
  update: (tripId: number | string, id: number | string, data: PlaceUpdateRequest) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, id: number | string) => apiClient.delete(`/trips/${tripId}/places/${id}`).then(r => r.data),
@@ -447,8 +472,15 @@ export const placesApi = {
    if (opts?.paths !== undefined) fd.append('importPaths', String(opts.paths))
    return postMultipart(`/trips/${tripId}/places/import/map`, fd)
  },
+  // A longer timeout than the shared 8 s, like the other routes here that wait
+  // on somebody else's service. A directions link whose stops are only named
+  // has to be geocoded one at a time behind a 1.1 s throttle, so a route with
+  // eight stops needs about ten seconds. Giving up at eight left the server
+  // finishing the import and writing the places while the browser reported a
+  // failure, and a retry then spent the whole geocoding budget again only to
+  // have the dedupe skip every stop.
  importGoogleList: (tripId: number | string, url: string, enrich?: boolean) =>
-      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url, enrich } satisfies PlaceImportListRequest).then(r => r.data),
+      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url, enrich } satisfies PlaceImportListRequest, { timeout: 60000 }).then(r => r.data),
  importNaverList: (tripId: number | string, url: string, enrich?: boolean) =>
      apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url, enrich } satisfies PlaceImportListRequest).then(r => r.data),
  bulkDelete: (tripId: number | string, ids: number[]) =>
@@ -467,6 +499,8 @@ export const assignmentsApi = {
  getParticipants: (tripId: number | string, id: number) => apiClient.get(`/trips/${tripId}/assignments/${id}/participants`).then(r => r.data),
  setParticipants: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/assignments/${id}/participants`, { user_ids: userIds } satisfies AssignmentParticipantsRequest).then(r => r.data),
  updateTime: (tripId: number | string, id: number, times: AssignmentTimeRequest) => apiClient.put(`/trips/${tripId}/assignments/${id}/time`, times).then(r => r.data),
+  // Day-specific note on an assignment (#2163) — null clears it.
+  updateNotes: (tripId: number | string, id: number, data: AssignmentNotesRequest) => apiClient.put(`/trips/${tripId}/assignments/${id}/notes`, data).then(r => r.data),
  // Per-segment travel mode (#1281): mode of the leg leaving this stop (null = inherit day default).
  // direction defaults to 'outgoing' server-side, so only send it for the incoming (boundary-leg) case
  // and keep the outgoing payload byte-for-byte identical to the pre-#1281 shape.
@@ -535,8 +569,8 @@ export const adminApi = {
  plugins: () => apiClient.get('/admin/plugins').then(r => r.data),
  pluginBrowse: (refresh?: boolean) => apiClient.get('/admin/plugins/registry', { params: refresh ? { refresh: 1 } : undefined }).then(r => r.data),
  pluginDetail: (id: string) => apiClient.get(`/admin/plugins/registry/${encodeURIComponent(id)}`).then(r => r.data),
-  pluginInstall: (id: string, opts?: { version?: string; constraint?: string; withDependencies?: boolean }) =>
-    apiClient.post('/admin/plugins/install', { id, ...opts }).then(r => r.data),
+  pluginInstall: (id: string, opts?: Pick<PluginInstallRequest, 'version' | 'constraint' | 'withDependencies'>) =>
+    apiClient.post('/admin/plugins/install', { id, ...opts } satisfies PluginInstallRequest).then(r => r.data),
  pluginActivate: (id: string, consent?: boolean) => apiClient.post(`/admin/plugins/${id}/activate`, consent ? { consent: true } : {}).then(r => r.data),
  pluginDeactivate: (id: string) => apiClient.post(`/admin/plugins/${id}/deactivate`).then(r => r.data),
  // `version` pins the exact version to install (the rollback path); omitted, the server
@@ -556,6 +590,17 @@ export const adminApi = {
  // Dev-link (dev-only): register a plugin from a local built dir + hot-reload it.
  pluginLink: (path: string) => apiClient.post('/admin/plugins/link', { path }).then(r => r.data),
  pluginReload: (id: string) => apiClient.post(`/admin/plugins/${id}/reload`).then(r => r.data),
+  // The admin-owned `scope:'instance'` settings: the declared fields plus the stored
+  // values (secrets masked). Saving may RESTART a running plugin — the child gets its
+  // config once at init — and `restarted` reports whether that happened.
+  pluginConfig: (id: string): Promise<PluginInstanceConfigResponse> =>
+    apiClient.get(`/admin/plugins/${id}/config`).then(r => r.data),
+  pluginSaveConfig: (id: string, config: Record<string, unknown>): Promise<PluginInstanceConfigUpdated> =>
+    apiClient.put(`/admin/plugins/${id}/config`, config).then(r => r.data),
+  // Run a `scope:'instance'` action the plugin declared ("Purge cache"). Runs AS the
+  // clicking admin. 404 when the plugin is inactive (no child process to run it).
+  runPluginAction: (id: string, key: string): Promise<PluginActionResult> =>
+    apiClient.post(`/admin/plugins/${id}/actions/${encodeURIComponent(key)}`).then(r => r.data),
  // Operator-supplied egress hosts: a plugin talking to a SELF-HOSTED service can't name
  // the operator's hostname in its manifest, so the admin adds it here. Saving re-spawns
  // the plugin with the widened allow-list.
@@ -616,12 +661,16 @@ export const adminApi = {
  updateBagTracking: (enabled: boolean) => apiClient.put('/admin/bag-tracking', { enabled }).then(r => r.data),
  getPlacesPhotos: () => apiClient.get('/admin/places-photos').then(r => r.data),
  updatePlacesPhotos: (enabled: boolean) => apiClient.put('/admin/places-photos', { enabled }).then(r => r.data),
+  getPlaceShadow: () => apiClient.get('/admin/place-shadow').then(r => r.data),
+  updatePlaceShadow: (enabled: boolean) => apiClient.put('/admin/place-shadow', { enabled }).then(r => r.data),
  getPlacesAutocomplete: () => apiClient.get('/admin/places-autocomplete').then(r => r.data),
  updatePlacesAutocomplete: (enabled: boolean) => apiClient.put('/admin/places-autocomplete', { enabled }).then(r => r.data),
  getPlacesDetails: () => apiClient.get('/admin/places-details').then(r => r.data),
  updatePlacesDetails: (enabled: boolean) => apiClient.put('/admin/places-details', { enabled }).then(r => r.data),
  getPlacesEnrich: () => apiClient.get('/admin/places-enrich').then(r => r.data),
  updatePlacesEnrich: (enabled: boolean) => apiClient.put('/admin/places-enrich', { enabled }).then(r => r.data),
+  getTransitProvider: () => apiClient.get('/admin/transit-provider').then(r => r.data),
+  updateTransitProvider: (provider: TransitProvider) => apiClient.put('/admin/transit-provider', { provider }).then(r => r.data),
  getCollabFeatures: () => apiClient.get('/admin/collab-features').then(r => r.data),
  updateCollabFeatures: (features: Record<string, boolean>) => apiClient.put('/admin/collab-features', features).then(r => r.data),
  packingTemplates: () => apiClient.get('/admin/packing-templates').then(r => r.data),
@@ -782,16 +831,13 @@ export interface PluginAtlasLayer {
  countries: Array<{ code: string; tone: 'default' | 'success' | 'warn' | 'danger'; label?: string }>
 }

-export interface PluginUserSettingField {
-  key: string; label?: string | null; input_type?: string; placeholder?: string | null;
-  hint?: string | null; required?: boolean; secret?: boolean;
-  options?: Array<{ value: string; label: string }>
-}
+/** The settings-field descriptor is the SHARED contract (both scopes emit the same
+ * shape) — aliased so existing per-user settings consumers keep their import path. */
+export type PluginUserSettingField = PluginSettingsField

-/** A button a plugin contributes to its own settings page ("Test connection"). */
-export interface PluginAction {
-  key: string; label: string; hint?: string; danger: boolean
-}
+/** A button a plugin contributes to a settings form ("Test connection", "Purge cache").
+ * `scope` says which form: the user tab or the admin instance-settings dialog. */
+export type PluginAction = PluginActionDescriptor

 export const pluginsApi = {
  // Active plugins the client renders (page nav entries, dashboard widgets).
@@ -862,7 +908,7 @@ export const pluginsApi = {
  // caller, so it reads the caller's own settings.
  runAction: (id: string, key: string) =>
    apiClient.post(`/plugin-settings/${id}/actions/${encodeURIComponent(key)}`)
-      .then(r => r.data as { ok: boolean; message?: string }),
+      .then(r => r.data as PluginActionResult),
  saveUserSettings: (id: string, config: Record<string, unknown>) =>
    apiClient.post(`/plugin-settings/${id}`, { config }).then(r => r.data as { config: Record<string, unknown> }),
  // Host-brokered outbound OAuth (the host owns the tokens; the plugin only triggers).
@@ -1006,11 +1052,193 @@ export const memoriesApi = {
    }).then(r => r.data),
 }

+/**
+ * Place search that still answers with no network.
+ *
+ * The cache is what `sync/placePrefetcher` stored for the trip's area, and this
+ * is the one place it is read from, so all ten call sites got the offline path
+ * without any of them learning about it. `source` says 'offline-cache' rather
+ * than pretending to be the index — several screens show it, and a stale answer
+ * that claims to be live is worse than one that says what it is.
+ *
+ * Only network-level failures fall through. A 4xx or 5xx means the server did
+ * answer and the caller has to see it.
+ */
+/**
+ * The same offline treatment as `withCachedPlaces`, for the single-place lookup.
+ *
+ * Separate because the shape is different: this one is keyed by id rather than
+ * by a query, and a miss has to stay a miss — a place the cache does not hold
+ * must fail the way it did before, not answer with somebody else's record.
+ */
+/**
+ * The rejection both search surfaces already know to swallow.
+ *
+ * They filter on the axios cancel code and on the DOMException name, so an
+ * abort from the cache path has to look like one or it surfaces as a toast.
+ */
+function abortedError(): Error & { code: string } {
+  const err = new Error('canceled') as Error & { code: string }
+  err.name = 'CanceledError'
+  err.code = 'ERR_CANCELED'
+  return err
+}
+
+async function withCachedPlace(
+  placeId: string,
+  online: () => Promise<{ place: Record<string, unknown> | null }>,
+): Promise<{ place: Record<string, unknown> | null }> {
+  const fromCache = async (): Promise<{ place: Record<string, unknown> | null } | null> => {
+    const { getCachedPlace, cachedToPlaceRecord } = await import('../sync/placePrefetcher')
+    const hit = await getCachedPlace(placeId)
+    return hit ? { place: cachedToPlaceRecord(hit) } : null
+  }
+
+  if (isEffectivelyOffline()) {
+    const cached = await fromCache()
+    if (cached) return cached
+    return online()
+  }
+  try {
+    return await online()
+  } catch (err) {
+    const e = err as { isAxiosError?: boolean; response?: unknown; code?: string } | null
+    const neverArrived = !!e && e.isAxiosError === true && e.response == null && e.code !== 'ERR_CANCELED'
+    if (!neverArrived) throw err
+    const cached = await fromCache()
+    if (!cached) throw err
+    return cached
+  }
+}
+
+async function withCachedPlaces<T>(
+  query: string,
+  shape: (places: Record<string, unknown>[]) => T,
+  online: () => Promise<T>,
+  signal?: AbortSignal,
+): Promise<T> {
+  const fromCache = async (): Promise<Record<string, unknown>[]> => {
+    const { searchCachedPlaces, cachedToPlaceRecord } = await import('../sync/placePrefetcher')
+    const found = (await searchCachedPlaces(query)).map(cachedToPlaceRecord)
+    // The keystroke this answers may already be two keystrokes old. Both search
+    // surfaces order their suggestions by aborting the previous request and
+    // discarding the rejection — there is no request counter — so an offline
+    // answer that resolves regardless of the signal can overwrite a newer list.
+    // The two cache reads are also very unequal: a prefix hit comes off the
+    // index, the substring pass walks every cached place of every trip.
+    if (signal?.aborted) throw abortedError()
+    return found
+  }
+
+  if (isEffectivelyOffline()) return shape(await fromCache())
+  try {
+    return await online()
+  } catch (err) {
+    const e = err as { isAxiosError?: boolean; response?: unknown; code?: string } | null
+    const neverArrived = !!e && e.isAxiosError === true && e.response == null && e.code !== 'ERR_CANCELED'
+    if (!neverArrived) throw err
+    const cached = await fromCache()
+    if (!cached.length) throw err
+    return shape(cached)
+  }
+}
+
+/**
+ * What plugins implementing `searchProvider` found for the same query (#2221).
+ *
+ * Its own request beside the core one rather than a branch inside it: the core search
+ * is TREK's own indexes and must not wait on, or fail with, somebody's plugin. This
+ * answers with an empty list for every failure there is — no provider installed, one
+ * that timed out, a 404 on an older server, the network gone — because a search that
+ * breaks when an optional index is unwell is worse than one without it.
+ */
+/**
+ * How long a plugin index may keep the search list waiting, in milliseconds.
+ *
+ * The host gives a provider two seconds to answer and this gives the round trip a
+ * little more. It is a ceiling on the WAIT, not on the provider: with no search
+ * plugin installed the route answers immediately without reaching any of them, so
+ * the normal case costs one local round trip and nothing else.
+ *
+ * A deadline rather than patience, because the alternative is a search that feels
+ * broken. A list that arrives without an optional index is a smaller answer; a list
+ * that arrives four seconds late is no answer at all.
+ */
+const PLUGIN_SEARCH_DEADLINE_MS = 2500
+
+async function pluginSearchPlaces(
+  query: string,
+  lang?: string,
+  near?: { lat: number; lng: number },
+): Promise<Record<string, unknown>[]> {
+  const stop = new AbortController()
+  const timer = setTimeout(() => stop.abort(), PLUGIN_SEARCH_DEADLINE_MS)
+  try {
+    const r = await apiClient.get('/plugin-search', {
+      params: { q: query, lang: lang || 'en', lat: near?.lat, lng: near?.lng },
+      signal: stop.signal,
+    })
+    const places = (r.data as { places?: unknown })?.places
+    return Array.isArray(places) ? (places as Record<string, unknown>[]) : []
+  } catch {
+    return []
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
 export const mapsApi = {
-  search: (query: string, lang?: string) => apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query }).then(r => checkInDev(mapsSearchResultSchema, r.data, 'maps.search')),
+  /**
+   * `locationBias` is what tells the search which "Hase-dera" is meant, and it
+   * is the difference between finding the temple the user stands next to and
+   * one 400km away. The route has always accepted it; nothing passed it.
+   *
+   * It also decides whether the index answers at all: a common single word
+   * without coordinates is refused upstream as too expensive, and the search
+   * then falls back to Nominatim alone.
+   *
+   * Plugin indexes are asked at the same time and their hits are appended, so every
+   * caller of this one function gets them without knowing they exist. Appended rather
+   * than interleaved: the core list is ordered by relevance and has earned that order,
+   * and a plugin's row carries its own `source` for a caller that wants to mark it.
+   */
+  search: (query: string, lang?: string, locationBias?: { lat: number; lng: number; radius?: number }) =>
+    withCachedPlaces(query, (places) => ({ places, source: 'offline-cache' }), async () => {
+      // Side by side, so the wait is the slower of the two rather than their sum. Only
+      // the core call may reject: that rejection is what hands withCachedPlaces the
+      // offline path, and a plugin failure must never trigger it.
+      const [core, extra] = await Promise.all([
+        apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query, locationBias }).then(r => checkInDev(mapsSearchResultSchema, r.data, 'maps.search')),
+        pluginSearchPlaces(query, lang, locationBias),
+      ])
+      if (extra.length === 0) return core
+      const from = [...new Set(extra.map(p => String(p.source ?? 'plugin')))].join('+')
+      return { places: [...core.places, ...extra], source: `${core.source}+${from}` }
+    }),
  autocomplete: (input: string, lang?: string, locationBias?: { low: { lat: number; lng: number }; high: { lat: number; lng: number } }, signal?: AbortSignal, sessionToken?: string) =>
-      apiClient.post('/maps/autocomplete', { input, lang, locationBias, sessionToken }, { signal }).then(r => checkInDev(mapsAutocompleteResultSchema, r.data, 'maps.autocomplete')),
-  details: (placeId: string, lang?: string, sessionToken?: string) => apiClient.get(`/maps/details/${encodeURIComponent(placeId)}`, { params: { lang, sessionToken } }).then(r => checkInDev(mapsPlaceDetailsResultSchema, r.data, 'maps.details')),
+    withCachedPlaces(
+      input,
+      (places) => ({
+        suggestions: places.map((p) => ({
+          placeId: String(p.osm_id),
+          mainText: String(p.name),
+          secondaryText: String(p.address || ''),
+        })),
+        source: 'offline-cache',
+      }),
+      () => apiClient.post('/maps/autocomplete', { input, lang, locationBias, sessionToken }, { signal }).then(r => checkInDev(mapsAutocompleteResultSchema, r.data, 'maps.autocomplete')),
+      signal,
+    ),
+  // Answered from the cache when the network is not there, for the ids the
+  // offline suggestion list hands out. Without it, picking an offline
+  // suggestion failed here and the callers fell back to searching for
+  // "name, address" — which the cache matches on the folded NAME alone, so it
+  // found nothing and the user got an error toast for a place that was sitting
+  // in the cache all along.
+  details: (placeId: string, lang?: string, sessionToken?: string) =>
+    withCachedPlace(placeId, () =>
+      apiClient.get(`/maps/details/${encodeURIComponent(placeId)}`, { params: { lang, sessionToken } })
+        .then(r => checkInDev(mapsPlaceDetailsResultSchema, r.data, 'maps.details'))),
  // Pictures and a description for a place that is being looked at but not yet
  // saved. Fans out to several providers server-side, so it takes a signal and
  // the caller is expected to abort it when the selection changes, and a longer
@@ -1030,10 +1258,60 @@ export const mapsApi = {
  // OSM-only POI explore: places of a category within the current map viewport bbox.
  // Overpass can be slow on a fresh (uncached) area, so this call gets a longer
  // timeout than the global default instead of aborting at 8s and showing nothing.
+  /**
+   * Every place in a box, for the offline cache. One call per trip area, not
+   * per keystroke, so the timeout is generous where the search ones are short.
+   */
+  area: (
+    bbox: { minLat: number; minLng: number; maxLat: number; maxLng: number },
+    limit?: number,
+    signal?: AbortSignal,
+  ) =>
+    apiClient
+      .get('/maps/area', { params: { ...bbox, limit }, signal, timeout: 30000 })
+      .then(
+        (r) =>
+          r.data as {
+            results: Record<string, unknown>[]
+            truncated: boolean
+            unavailable?: boolean
+          },
+      ),
+
  pois: (category: string, bbox: { south: number; west: number; north: number; east: number }, lang?: string, signal?: AbortSignal) =>
    apiClient.get('/maps/pois', { params: { category, ...bbox, lang }, signal, timeout: 20000 }).then(r => r.data as { pois: import('../components/Map/poiCategories').Poi[]; source: string; truncated: boolean; clamped?: boolean }),
 }

+/**
+ * Road-trip via points (#1797): the places a day's drive is routed through without
+ * stopping. Separate from places on purpose — a via bends the route, a stop is somewhere
+ * you go.
+ */
+export const roadtripApi = {
+  /** Every via of the trip, so all days can be routed without a request per day. */
+  listVias: (tripId: number | string) =>
+    apiClient.get(`/trips/${tripId}/roadtrip/vias`).then(r => r.data as { vias: RoadtripVia[]; tracks: RoadtripDayTrack[] }),
+  addVia: (tripId: number | string, dayId: number | string, body: RoadtripViaCreateRequest) =>
+    apiClient.post(`/trips/${tripId}/roadtrip/days/${dayId}/vias`, body).then(r => r.data as { via: RoadtripVia }),
+  /**
+   * Lay a chain of vias on one day in one write. Anything that derives its anchors from a
+   * line produces dozens of them, and one request each would re-route the whole trip once
+   * per point at better than a second apart.
+   */
+  addVias: (tripId: number | string, dayId: number | string, body: RoadtripViaBatchRequest) =>
+    apiClient.post(`/trips/${tripId}/roadtrip/days/${dayId}/vias/batch`, body).then(r => r.data as { vias: RoadtripVia[] }),
+  /**
+   * Re-pin a day's vias in one write, after its stops changed shape. One request, not one
+   * per via: the anchors are only correct as a set.
+   */
+  reanchorVias: (tripId: number | string, dayId: number | string, body: RoadtripViaReanchorRequest) =>
+    apiClient.put(`/trips/${tripId}/roadtrip/days/${dayId}/vias`, body).then(r => r.data as { vias: RoadtripVia[] }),
+  moveVia: (tripId: number | string, dayId: number | string, id: number, body: RoadtripViaUpdateRequest) =>
+    apiClient.put(`/trips/${tripId}/roadtrip/days/${dayId}/vias/${id}`, body).then(r => r.data as { via: RoadtripVia }),
+  removeVia: (tripId: number | string, dayId: number | string, id: number) =>
+    apiClient.delete(`/trips/${tripId}/roadtrip/days/${dayId}/vias/${id}`).then(r => r.data),
+}
+
 export const airportsApi = {
  search: (q: string, signal?: AbortSignal) => apiClient.get('/airports/search', { params: { q }, signal }).then(r => r.data),
  byIata: (iata: string) => apiClient.get(`/airports/${encodeURIComponent(iata)}`).then(r => r.data),
@@ -1108,7 +1386,8 @@ export const healthApi = {

 export const weatherApi = {
  // `time` (HH:MM) makes a past date answer for that hour instead of the day (#1614).
-  get: (lat: number, lng: number, date: string, time?: string): Promise<WeatherResult> => apiClient.get('/weather', { params: { lat, lng, date, time } }).then(r => parseInDev(weatherResultSchema, r.data, 'weather.get')),
+  // `lang` localizes the description; when omitted the server keeps its own default (#2167).
+  get: (lat: number, lng: number, date: string, lang?: string, time?: string): Promise<WeatherResult> => apiClient.get('/weather', { params: { lat, lng, date, lang, time } }).then(r => parseInDev(weatherResultSchema, r.data, 'weather.get')),
  getCurrent: (lat: number, lng: number, lang?: string): Promise<WeatherResult> => apiClient.get('/weather', { params: { lat, lng, lang } }).then(r => parseInDev(weatherResultSchema, r.data, 'weather.getCurrent')),
  getDetailed: (lat: number, lng: number, date: string, lang?: string): Promise<WeatherResult> => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => parseInDev(weatherResultSchema, r.data, 'weather.getDetailed')),
 }
@@ -1162,13 +1441,19 @@ export const collabApi = {
  deleteNote: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
  uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => postMultipart(`/trips/${tripId}/collab/notes/${noteId}/files`, formData),
  deleteNoteFile: (tripId: number | string, noteId: number, fileId: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
+  getLinks: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/links`).then(r => r.data),
+  createLink: (tripId: number | string, data: { title: string; url: string; pinned?: boolean }) => apiClient.post(`/trips/${tripId}/collab/links`, data).then(r => r.data),
+  updateLink: (tripId: number | string, id: number, data: { title?: string; url?: string; pinned?: boolean }) => apiClient.put(`/trips/${tripId}/collab/links/${id}`, data).then(r => r.data),
+  deleteLink: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/links/${id}`).then(r => r.data),
  getPolls: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
  createPoll: (tripId: number | string, data: CollabPollCreateRequest) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
  votePoll: (tripId: number | string, id: number, optionIndex: number) => apiClient.post(`/trips/${tripId}/collab/polls/${id}/vote`, { option_index: optionIndex } satisfies CollabPollVoteRequest).then(r => r.data),
  closePoll: (tripId: number | string, id: number) => apiClient.put(`/trips/${tripId}/collab/polls/${id}/close`).then(r => r.data),
  deletePoll: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/polls/${id}`).then(r => r.data),
  getMessages: (tripId: number | string, before?: string) => apiClient.get(`/trips/${tripId}/collab/messages${before ? `?before=${before}` : ''}`).then(r => r.data),
-  sendMessage: (tripId: number | string, data: CollabMessageCreateRequest) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
+  sendMessage: (tripId: number | string, data: CollabMessageCreateRequest | FormData, opts?: UploadOptions) => data instanceof FormData
+    ? postMultipart(`/trips/${tripId}/collab/messages`, data, opts)
+    : apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
  deleteMessage: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/messages/${id}`).then(r => r.data),
  reactMessage: (tripId: number | string, id: number, emoji: string) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji } satisfies CollabReactionRequest).then(r => r.data),
  linkPreview: (tripId: number | string, url: string) => apiClient.get(`/trips/${tripId}/collab/link-preview?url=${encodeURIComponent(url)}`).then(r => r.data),
@@ -1202,11 +1487,13 @@ export const shareApi = {
  getSharedTrip: (token: string) => apiClient.get(`/shared/${token}`).then(r => r.data),
 }

-// Public transit routing (#1065) — Transitous/MOTIS proxied through the server.
+// Public transit routing (#1065) — proxied through the server, which picks the
+// backend (Transitous/MOTIS, or Google since #1699). `lang` reaches the Google
+// backend as the languageCode, so station names come back in the user's script.
 export const transitApi = {
  geocode: (q: string, opts?: { lang?: string; near?: string }) =>
    apiClient.get('/transit/geocode', { params: { q, lang: opts?.lang, near: opts?.near } }).then(r => r.data),
-  plan: (params: { from: string; to: string; time?: string; arriveBy?: boolean; modes?: string; maxTransfers?: number }) =>
+  plan: (params: { from: string; to: string; time?: string; arriveBy?: boolean; modes?: string; maxTransfers?: number; lang?: string }) =>
    apiClient.get('/transit/plan', { params }).then(r => r.data),
 }

@@ -1220,15 +1507,21 @@ export const tripInviteApi = {
  accept: (token: string) => apiClient.post(`/trip-invites/${token}/accept`).then(r => r.data),
 }

+// A channel test dials a third party the admin just typed in, and the server
+// budgets for it: up to 20s for a wrong SMTP port, 10s for a webhook or ntfy
+// endpoint. The 8s instance timeout aborted those before the reason came back,
+// so the toast could only ever say "failed" (#2196).
+const CHANNEL_TEST_TIMEOUT = 40000
+
 export const notificationsApi = {
  getPreferences: () => apiClient.get('/notifications/preferences').then(r => r.data),
  updatePreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
-  testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testSmtp')),
-  testWebhook: (url?: string) => apiClient.post('/notifications/test-webhook', { url }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testWebhook')),
-  testNtfy: (payload: { topic?: string; server?: string | null; token?: string | null }) => apiClient.post('/notifications/test-ntfy', payload).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testNtfy')),
+  testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }, { timeout: CHANNEL_TEST_TIMEOUT }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testSmtp')),
+  testWebhook: (url?: string) => apiClient.post('/notifications/test-webhook', { url }, { timeout: CHANNEL_TEST_TIMEOUT }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testWebhook')),
+  testNtfy: (payload: { topic?: string; server?: string | null; token?: string | null }) => apiClient.post('/notifications/test-ntfy', payload, { timeout: CHANNEL_TEST_TIMEOUT }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testNtfy')),
  // Generic channel test — this is how a PLUGIN channel's "Send test" button works.
  testChannel: (channelId: string) =>
-    apiClient.post(`/notifications/test/${encodeURIComponent(channelId)}`)
+    apiClient.post(`/notifications/test/${encodeURIComponent(channelId)}`, undefined, { timeout: CHANNEL_TEST_TIMEOUT })
      .then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testChannel')),
 }

@@ -59,23 +59,26 @@ describe('collectionsApi', () => {
    expect(res.collection.name).toBe('Tokyo')
  })

-  it('FE-API-COLLECTIONS-003: create() posts the create payload', async () => {
-    server.use(http.post(BASE, record({ collection })))
+  // Both handlers answer with the BARE collection, the way the controller does —
+  // stubbing a { collection } envelope here is what let the client keep reading
+  // `.collection` off a response that never had one.
+  it('FE-API-COLLECTIONS-003: create() posts the create payload and returns the list itself', async () => {
+    server.use(http.post(BASE, record(collection)))

    const res = await collectionsApi.create({ name: 'Tokyo', color: '#111827' })

    expect(requestBody).toEqual({ name: 'Tokyo', color: '#111827' })
-    expect(res.collection.id).toBe(1)
+    expect(res.id).toBe(1)
  })

  it('FE-API-COLLECTIONS-004: update() patches the list by id', async () => {
-    server.use(http.patch(`${BASE}/:id`, record({ collection })))
+    server.use(http.patch(`${BASE}/:id`, record(collection)))

    const res = await collectionsApi.update(1, { name: 'Tokyo 2026' })

    expect(requestUrl).toContain(`${BASE}/1`)
    expect(requestBody).toEqual({ name: 'Tokyo 2026' })
-    expect(res.collection).toEqual(collection)
+    expect(res).toEqual(collection)
  })

  it('FE-API-COLLECTIONS-005: uploadCover() posts multipart to the cover endpoint', async () => {
@@ -53,9 +53,13 @@ export const collectionsApi = {
    ax.get(base).then((r: AxiosResponse) => r.data),
  get: (id: number): Promise<CollectionDetailResponse> =>
    ax.get(`${base}/${id}`).then((r: AxiosResponse) => r.data),
-  create: (body: CollectionCreateRequest): Promise<{ collection: Collection }> =>
+  // Both answer with the bare collection, not a { collection } envelope — the
+  // controller returns the service's `Collection` straight through, and the e2e
+  // suite pins that shape. Declaring the envelope made createCollection() resolve
+  // undefined for every caller.
+  create: (body: CollectionCreateRequest): Promise<Collection> =>
    ax.post(base, body satisfies CollectionCreateRequest).then((r: AxiosResponse) => r.data),
-  update: (id: number, body: CollectionUpdateRequest): Promise<{ collection: Collection }> =>
+  update: (id: number, body: CollectionUpdateRequest): Promise<Collection> =>
    ax.patch(`${base}/${id}`, body satisfies CollectionUpdateRequest).then((r: AxiosResponse) => r.data),
  uploadCover: (id: number, formData: FormData): Promise<Collection> =>
    postMultipart(`${base}/${id}/cover`, formData),
@@ -0,0 +1,115 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../tests/helpers/msw/server'
+import { useAuthStore } from '../store/authStore'
+import { recordPlacePick } from './placeShadow'
+import type { PlaceShadowPickRequest } from '@trek/shared'
+
+/**
+ * The point of this module is that it never gets in the way: it must not fire
+ * when the instance has the log switched off, must not throw when the request
+ * fails, and must not send coordinates finer than the ranking needs.
+ */
+
+const PICK: PlaceShadowPickRequest = {
+  query: '  losteria rostock  ',
+  lang: 'de',
+  biasLat: 54.088712,
+  biasLng: 12.140493,
+  source: 'search:nominatim',
+  liveRank: 0,
+  liveCount: 8,
+  pickedName: "L'Osteria",
+  pickedLat: 54.0891234,
+  pickedLng: 12.1372987,
+  pickedPlaceId: 'osm:node/1',
+}
+
+/** Resolves with the body the module posted, or null if it never posted. */
+function capture(status = 200) {
+  let seen: unknown = null
+  let resolve: (v: unknown) => void = () => {}
+  const posted = new Promise<unknown>(r => { resolve = r })
+  server.use(
+    http.post('/api/place-shadow/pick', async ({ request }) => {
+      seen = await request.json()
+      resolve(seen)
+      return status === 200
+        ? HttpResponse.json({ recorded: true })
+        : HttpResponse.json({ error: 'nope' }, { status })
+    }),
+  )
+  return { posted, seen: () => seen }
+}
+
+beforeEach(() => {
+  useAuthStore.setState({ placeShadowEnabled: true })
+})
+
+describe('recordPlacePick', () => {
+  it('sends nothing at all when the instance has the log switched off', async () => {
+    useAuthStore.setState({ placeShadowEnabled: false })
+    const cap = capture()
+    recordPlacePick(PICK)
+    await new Promise(r => setTimeout(r, 20))
+    expect(cap.seen()).toBeNull()
+  })
+
+  it('trims the query and rounds every coordinate to three decimals', async () => {
+    const cap = capture()
+    recordPlacePick(PICK)
+    expect(await cap.posted).toMatchObject({
+      query: 'losteria rostock',
+      pickedLat: 54.089,
+      pickedLng: 12.137,
+      biasLat: 54.089,
+      biasLng: 12.14,
+    })
+  })
+
+  it('leaves an absent bias absent rather than sending a zero', async () => {
+    const cap = capture()
+    recordPlacePick({ ...PICK, biasLat: undefined, biasLng: undefined })
+    const body = (await cap.posted) as Record<string, unknown>
+    expect(body.biasLat).toBeUndefined()
+    expect(body.biasLng).toBeUndefined()
+  })
+
+  it('drops a pick with no query, no name or an impossible rank before sending', async () => {
+    const cap = capture()
+    recordPlacePick({ ...PICK, query: '   ' })
+    recordPlacePick({ ...PICK, pickedName: '' })
+    recordPlacePick({ ...PICK, liveRank: 8, liveCount: 8 })
+    recordPlacePick({ ...PICK, pickedLat: Number.NaN })
+    await new Promise(r => setTimeout(r, 20))
+    expect(cap.seen()).toBeNull()
+  })
+
+  it('does not record a pick made out of the offline cache', async () => {
+    // Such a row describes the local cache's ordering, not a provider's, and
+    // the two figures this corpus exists for — how often the live answer was
+    // first, and how often it was in the top five — are averaged over every
+    // row. Mixing these in moves exactly the number a candidate index is later
+    // judged against. Not merely an offline concern either: offline is a
+    // setting, so the network is usually reachable and the POST would land.
+    let posted = false
+    server.use(http.post('/api/place-shadow/pick', () => { posted = true; return HttpResponse.json({ recorded: true }) }))
+
+    recordPlacePick({ ...PICK, source: 'search:offline-cache' })
+    recordPlacePick({ ...PICK, source: 'autocomplete:offline-cache' })
+    await new Promise(r => setTimeout(r, 20))
+
+    expect(posted).toBe(false)
+  })
+
+  it('swallows a server error instead of surfacing it to the pick that triggered it', async () => {
+    const cap = capture(500)
+    const onUnhandled = vi.fn()
+    process.on('unhandledRejection', onUnhandled)
+    expect(() => recordPlacePick(PICK)).not.toThrow()
+    await cap.posted
+    await new Promise(r => setTimeout(r, 20))
+    process.off('unhandledRejection', onUnhandled)
+    expect(onUnhandled).not.toHaveBeenCalled()
+  })
+})
@@ -0,0 +1,51 @@
+import type { PlaceShadowPickRequest } from '@trek/shared'
+import { apiClient } from './client'
+import { useAuthStore } from '../store/authStore'
+
+/**
+ * Records which search result the user picked, for the local shadow corpus.
+ *
+ * Fire and forget in the strongest sense: it never throws, never blocks the
+ * pick it is describing, and does nothing at all unless the instance switched
+ * the log on. Adding a place must not get slower or more fragile because
+ * somebody is collecting a measurement.
+ *
+ * The store flag is checked first so a switched-off instance makes no request
+ * at all; the server checks it again, because a client is not a permission.
+ */
+
+/** About 100 m. Enough to reproduce a ranking, too coarse to place someone. */
+function coarse(value: number): number {
+  return Math.round(value * 1000) / 1000
+}
+
+export function recordPlacePick(pick: PlaceShadowPickRequest): void {
+  if (!useAuthStore.getState().placeShadowEnabled) return
+  if (!Number.isFinite(pick.pickedLat) || !Number.isFinite(pick.pickedLng)) return
+  if (pick.liveRank >= pick.liveCount) return
+  // A pick out of the offline cache describes the cache's ordering, not a
+  // provider's, and the two numbers this corpus exists for — how often the live
+  // answer was first, and how often it was in the top five — are averaged over
+  // every row. Mixing local rows in would move exactly the figure a candidate
+  // index is later judged against.
+  //
+  // Not merely an offline concern: the offline switch is a setting, so the
+  // network is usually reachable and the POST would go through.
+  if (pick.source.endsWith('offline-cache')) return
+
+  const body: PlaceShadowPickRequest = {
+    ...pick,
+    query: pick.query.trim().slice(0, 200),
+    pickedName: pick.pickedName.slice(0, 300),
+    pickedLat: coarse(pick.pickedLat),
+    pickedLng: coarse(pick.pickedLng),
+    biasLat: pick.biasLat === undefined ? undefined : coarse(pick.biasLat),
+    biasLng: pick.biasLng === undefined ? undefined : coarse(pick.biasLng),
+  }
+  // The contract requires both; an unnamed result is not worth a row anyway.
+  if (!body.query || !body.pickedName) return
+
+  void apiClient.post('/place-shadow/pick', body).catch(() => {
+    // Deliberately silent. The user was adding a place, not running a study.
+  })
+}
@@ -0,0 +1,24 @@
+import type { RouteUsageEntry, RouteUsageSummaryResult } from '@trek/shared'
+import { apiClient } from './client'
+
+/**
+ * Reports the routing counters this browser has tallied up.
+ *
+ * Fire and forget: it never throws and never blocks the route it is describing. A
+ * failed report is a lost count, which is a far smaller problem than a map that waits
+ * on a measurement.
+ *
+ * No client-side switch to check, unlike the shadow log. Counting is on unless an
+ * operator turned it off, and that is a server setting the server enforces — a report
+ * to a switched-off instance is answered with `recorded: false` and costs one request.
+ */
+export const routeUsageApi = {
+  report: (entries: RouteUsageEntry[]): Promise<void> =>
+    entries.length
+      ? apiClient.post('/route-usage/report', { entries }).then(() => undefined)
+      : Promise.resolve(),
+
+  /** Admin only. The figures behind "could we host a router ourselves". */
+  summary: (): Promise<RouteUsageSummaryResult> =>
+    apiClient.get('/route-usage/summary').then(r => r.data),
+}
@@ -20,6 +20,9 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
  'collab:note:created',
  'collab:note:updated',
  'collab:note:deleted',
+  'collab:link:created',
+  'collab:link:updated',
+  'collab:link:deleted',
  'collab:poll:created',
  'collab:poll:voted',
  'collab:poll:closed',
@@ -27,9 +30,19 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
  'collab:message:created',
  'collab:message:reacted',
  'collab:message:deleted',
+  // Road trip shaping — components/Roadtrip/useRoadtripVias. The points a drive is
+  // routed through live in that hook and nowhere else; a store slice for them would be a
+  // second copy of the same list to keep in step.
+  'roadtripVia:changed',
+  'roadtripTrack:changed',
  // In-app notifications — hooks/useInAppNotificationListener
  'notification:new',
  'notification:updated',
+  // Bag weights (#2191) — content-free ping; components/Packing/usePackingListPanel
+  // and mobile/screens/trip/tabs/MPackingListTab re-read the bags on it. It carries
+  // no state to apply, which is the point: the totals are summed server-side across
+  // members whose items this client may not see.
+  'packing:bag-totals',
  // Collections — pages/collections/useCollections ('collections:' prefix listener)
  'collections:updated',
  'collections:accepted',
@@ -1,5 +1,5 @@
 // FE-ADMIN-ADDON-001 to FE-ADMIN-ADDON-025
-import { render, screen, waitFor, within } from '../../../tests/helpers/render';
+import { render, screen, waitFor } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { delay, http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
@@ -44,20 +44,16 @@ function modelsRoute(names: string[], seen?: (string | null)[]) {
  });
 }

-/** The pill toggle of a top-level addon row. */
+/** Every switch is labelled with the thing it controls, top-level tile or shelf
+ *  row alike, so one lookup covers both. */
 function addonToggle(name: string): HTMLElement {
-  const row = screen.getByText(name).closest('.px-6.py-4') as HTMLElement;
-  return within(row).getByRole('button');
+  return screen.getByRole('button', { name });
 }

-/** The pill toggle of an indented sub-row (bag tracking, collab feature, photo provider). */
-function subToggle(label: string): HTMLElement {
-  const row = screen.getByText(label).closest('.flex.items-center.gap-4') as HTMLElement;
-  return within(row).getByRole('button');
-}
+const subToggle = addonToggle;

 function isOn(toggle: HTMLElement): boolean {
-  return toggle.style.background === 'var(--text-primary)';
+  return toggle.getAttribute('aria-pressed') === 'true';
 }

 beforeAll(() => {
@@ -82,6 +78,7 @@ beforeEach(() => {

 afterEach(() => {
  vi.restoreAllMocks();
+  document.documentElement.classList.remove('dark');
 });

 describe('AddonManager', () => {
@@ -144,13 +141,10 @@ describe('AddonManager', () => {
    render(<><ToastContainer /><AddonManager /></>);
    await screen.findByText('Todo List');

-    // Get toggle button - use getAllByRole since there might be multiple buttons
-    const buttons = screen.getAllByRole('button');
-    const toggleBtn = buttons.find(b => b.classList.contains('rounded-full'));
-    expect(toggleBtn).toBeInTheDocument();
+    const toggleBtn = addonToggle('Todo List');
+    expect(isOn(toggleBtn)).toBe(false);

-    // Before click - disabled state (border-primary bg)
-    await user.click(toggleBtn!);
+    await user.click(toggleBtn);

    // After click - success toast
    await screen.findByText('Addon updated');
@@ -169,17 +163,14 @@ describe('AddonManager', () => {
    render(<><ToastContainer /><AddonManager /></>);
    await screen.findByText('Todo List');

-    const buttons = screen.getAllByRole('button');
-    const toggleBtn = buttons.find(b => b.classList.contains('rounded-full'));
-    await user.click(toggleBtn!);
+    await user.click(addonToggle('Todo List'));

    // Error toast appears
    await screen.findByText('Failed to update addon');

-    // The disabled text should be back after rollback
+    // The switch is back off after rollback
    await waitFor(() => {
-      const disabledTexts = screen.getAllByText('Disabled');
-      expect(disabledTexts.length).toBeGreaterThan(0);
+      expect(isOn(addonToggle('Todo List'))).toBe(false);
    });
  });

@@ -195,13 +186,7 @@ describe('AddonManager', () => {
      <AddonManager bagTrackingEnabled={false} onToggleBagTracking={mockToggle} />
    );
    await screen.findByText('Bag Tracking');
-    const bagTrackingToggle = screen.getAllByRole('button').find(b =>
-      b.closest('[style*="paddingLeft: 70"]') !== null || b.closest('div')?.textContent?.includes('Bag Tracking')
-    );
-    // Click the bag tracking toggle button (the h-6 w-11 button near "Bag Tracking")
-    const allBtns = screen.getAllByRole('button').filter(b => b.classList.contains('rounded-full'));
-    // There should be two toggle buttons: one for the addon, one for bag tracking
-    await user.click(allBtns[allBtns.length - 1]);
+    await user.click(subToggle('Bag Tracking'));
    expect(mockToggle).toHaveBeenCalled();
  });

@@ -251,9 +236,10 @@ describe('AddonManager', () => {
    // Journey addon is rendered
    expect(screen.getByText('Journey')).toBeInTheDocument();

-    // Toggle buttons: journey toggle + 2 provider toggles
-    const toggleBtns = screen.getAllByRole('button').filter(b => b.classList.contains('rounded-full'));
-    expect(toggleBtns.length).toBe(3);
+    // Journey's own switch plus one per provider, each labelled with what it controls
+    expect(isOn(addonToggle('Journey'))).toBe(true);
+    expect(isOn(subToggle('Unsplash'))).toBe(true);
+    expect(isOn(subToggle('Pexels'))).toBe(false);
  });

  it('FE-ADMIN-ADDON-011: icon falls back to Puzzle when icon name unknown', async () => {
@@ -278,7 +264,8 @@ describe('AddonManager', () => {
  });

  it('FE-ADMIN-ADDON-013: dark mode swaps the wordmark in the header', async () => {
-    seedStore(useSettingsStore, { settings: { dark_mode: 'dark' } });
+    // The wordmark reads the .dark class, the same source applyAppearance() writes.
+    document.documentElement.classList.add('dark');
    render(<AddonManager />);

    await screen.findByText('No addons available');
@@ -309,11 +296,11 @@ describe('AddonManager', () => {

    await screen.findByText('Immich');
    // immich and synologyphotos ship a vendor glyph, unsplash does not
-    const immichRow = screen.getByText('Immich').closest('.flex.items-center.gap-4') as HTMLElement;
+    const immichRow = screen.getByText('Immich').closest('li') as HTMLElement;
    expect(immichRow.querySelector('svg')).toBeInTheDocument();
-    const synologyRow = screen.getByText('Synology Photos').closest('.flex.items-center.gap-4') as HTMLElement;
+    const synologyRow = screen.getByText('Synology Photos').closest('li') as HTMLElement;
    expect(synologyRow.querySelector('svg')).toBeInTheDocument();
-    const unsplashRow = screen.getByText('Unsplash').closest('.flex.items-center.gap-4') as HTMLElement;
+    const unsplashRow = screen.getByText('Unsplash').closest('li') as HTMLElement;
    expect(unsplashRow.querySelector('svg')).not.toBeInTheDocument();

    expect(isOn(subToggle('Immich'))).toBe(true);
@@ -361,6 +348,76 @@ describe('AddonManager', () => {
    await waitFor(() => expect(isOn(subToggle('Unsplash'))).toBe(true));
  });

+  it('FE-ADMIN-ADDON-030: provider sub-rows stay hidden while Journey itself is off', async () => {
+    server.use(addonsRoute([
+      buildAddon({ id: 'journey', name: 'Journey', type: 'global', icon: 'Compass', enabled: false }),
+      buildAddon({ id: 'immich', name: 'Immich', description: 'Self-hosted photos', type: 'photo_provider', enabled: true }),
+      buildAddon({ id: 'synologyphotos', name: 'Synology Photos', description: 'NAS photos', type: 'photo_provider', enabled: false }),
+    ]));
+    render(<AddonManager />);
+
+    await screen.findByText('Journey');
+    expect(screen.queryByText('Immich')).not.toBeInTheDocument();
+    expect(screen.queryByText('Synology Photos')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-ADDON-031: switching Journey off and on again shows the cascaded providers as off', async () => {
+    const user = userEvent.setup();
+    let loads = 0;
+    let journeyOn = true;
+    let immichOn = true;
+    server.use(
+      http.get('/api/admin/addons', () => {
+        loads += 1;
+        return HttpResponse.json({
+          addons: [
+            buildAddon({ id: 'journey', name: 'Journey', type: 'global', icon: 'Compass', enabled: journeyOn }),
+            buildAddon({ id: 'immich', name: 'Immich', description: 'Self-hosted photos', type: 'photo_provider', enabled: immichOn }),
+          ],
+        });
+      }),
+      http.put('/api/admin/addons/journey', async ({ request }) => {
+        journeyOn = (await request.json() as { enabled: boolean }).enabled;
+        // Journey off takes its providers with it, see admin.service.ts.
+        if (!journeyOn) immichOn = false;
+        return HttpResponse.json({ success: true });
+      }),
+    );
+    render(<><ToastContainer /><AddonManager /></>);
+    await screen.findByText('Immich');
+
+    await user.click(addonToggle('Journey'));
+    // The toast closes the whole toggle, re-read included.
+    await screen.findByText('Addon updated');
+    expect(loads).toBe(2);
+    expect(screen.queryByText('Immich')).not.toBeInTheDocument();
+
+    await user.click(addonToggle('Journey'));
+
+    await screen.findByText('Immich');
+    expect(isOn(subToggle('Immich'))).toBe(false);
+  });
+
+  it('FE-ADMIN-ADDON-032: a toggle the server does not cascade keeps the snapshot it has', async () => {
+    const user = userEvent.setup();
+    let loads = 0;
+    server.use(
+      http.get('/api/admin/addons', () => {
+        loads += 1;
+        return HttpResponse.json({ addons: [buildAddon({ id: 'todo', enabled: false })] });
+      }),
+      http.put('/api/admin/addons/todo', () => HttpResponse.json({ success: true })),
+    );
+    render(<><ToastContainer /><AddonManager /></>);
+    await screen.findByText('Todo List');
+
+    await user.click(addonToggle('Todo List'));
+
+    await screen.findByText('Addon updated');
+    expect(loads).toBe(1);
+    expect(isOn(addonToggle('Todo List'))).toBe(true);
+  });
+
  it('FE-ADMIN-ADDON-018: the collab sub-features render their state and report the toggled key', async () => {
    const user = userEvent.setup();
    const onToggleCollabFeature = vi.fn();
@@ -396,8 +453,21 @@ describe('AddonManager', () => {
    render(<AddonManager />);

    await screen.findByText('AI Parsing');
-    expect(screen.getByText('Extract bookings from files')).toBeInTheDocument();
-    expect(screen.queryByText('Connection')).not.toBeInTheDocument();
+    // The catalog key now exists, so the tile shows the translation rather than falling
+    // back to the English description the server sent.
+    expect(screen.getByText('Reads bookings the built-in parser cannot, using an AI model you choose')).toBeInTheDocument();
+    expect(screen.queryByText('Provider')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-ADDON-020b: the config lives in the tile shelf, not as a band below the grid', async () => {
+    server.use(addonsRoute([llmAddon({ provider: 'openai' })]));
+    render(<AddonManager />);
+
+    const label = await screen.findByText('Provider');
+    // Inside the AI Parsing tile's <article>, like the collab toggles sit in theirs.
+    const tile = label.closest('article');
+    expect(tile).not.toBeNull();
+    expect(tile!.textContent).toContain('AI Parsing');
  });

  it('FE-ADMIN-ADDON-021: the local provider lists installed models and a chip fills the model field', async () => {
@@ -615,7 +685,7 @@ describe('AddonManager', () => {
    server.use(addonsRoute([llmAddon({ provider: 'openai' })]), modelsRoute([], urls));
    render(<AddonManager />);

-    await screen.findByText('Connection');
+    await screen.findByText('Provider');
    expect(screen.queryByText('Installed on the server')).not.toBeInTheDocument();

    await user.type(screen.getByPlaceholderText('https://api.openai.com/v1'), 'https://proxy.local/v1');
@@ -1,14 +1,20 @@
 import { useEffect, useState, type ComponentType } from 'react'
 import { adminApi } from '../../api/client'
 import { useTranslation } from '../../i18n'
-import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
+import { useIsDark } from '../../hooks/useIsDark'
 import { useToast } from '../shared/Toast'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane, Server, Cloud, Bookmark } from 'lucide-react'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane, Server, Cloud, Bookmark, Users, Loader2 } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
+import EmptyState from '../shared/EmptyState'
+import AddonTile from './AddonTile'
+import AddonSubRow from './AddonSubRow'

+// Keys are the `icon` column from the addons table (see server seeds.ts); anything
+// unknown falls back to Puzzle. Users/Sparkles cover collab and llm_parsing, which
+// used to land on the fallback.
 const ICON_MAP = {
-  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane, Bookmark,
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane, Bookmark, Users, Sparkles,
 }

 function ImmichIcon({ size = 14 }: { size?: number }) {
@@ -60,53 +66,63 @@ function AddonIcon({ name, size = 20 }: AddonIconProps) {
  return <Icon size={size} />
 }

-interface CollabFeatures { chat: boolean; notes: boolean; polls: boolean; whatsnext: boolean }
+/** What each type means, shown on the tile itself now that the sections are gone. The
+ *  hint rides along as the tooltip, so "Global" still explains itself. */
+const TYPE_META: Record<string, { icon: ComponentType<{ size?: number }>; labelKey: string; hintKey: string }> = {
+  trip: { icon: Briefcase, labelKey: 'admin.addons.type.trip', hintKey: 'admin.addons.tripHint' },
+  global: { icon: Globe, labelKey: 'admin.addons.type.global', hintKey: 'admin.addons.globalHint' },
+  integration: { icon: Link2, labelKey: 'admin.addons.type.integration', hintKey: 'admin.addons.integrationHint' },
+}
+
+interface CollabFeatures { chat: boolean; notes: boolean; links?: boolean; polls: boolean; whatsnext: boolean }

 const COLLAB_SUB_FEATURES = [
  { key: 'chat', icon: MessageCircle, titleKey: 'admin.collab.chat.title', subtitleKey: 'admin.collab.chat.subtitle' },
  { key: 'notes', icon: StickyNote, titleKey: 'admin.collab.notes.title', subtitleKey: 'admin.collab.notes.subtitle' },
+  { key: 'links', icon: Link2, titleKey: 'collab.tabs.links', subtitleKey: 'collab.links.empty' },
  { key: 'polls', icon: BarChart3, titleKey: 'admin.collab.polls.title', subtitleKey: 'admin.collab.polls.subtitle' },
  { key: 'whatsnext', icon: Sparkles, titleKey: 'admin.collab.whatsnext.title', subtitleKey: 'admin.collab.whatsnext.subtitle' },
 ] as const

 export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking, collabFeatures, onToggleCollabFeature }: { bagTrackingEnabled?: boolean; onToggleBagTracking?: () => void; collabFeatures?: CollabFeatures; onToggleCollabFeature?: (key: string) => void }) {
  const { t } = useTranslation()
-  const dm = useSettingsStore(s => s.settings.dark_mode)
-  const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  const dark = useIsDark()
  const toast = useToast()
  const refreshGlobalAddons = useAddonStore(s => s.loadAddons)
  const [addons, setAddons] = useState<Addon[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
-    loadAddons()
+    loadAddons().finally(() => setLoading(false))
  }, [])

  const loadAddons = async () => {
-    setLoading(true)
    try {
      const data = await adminApi.addons()
      setAddons(data.addons)
    } catch (err: unknown) {
      toast.error(t('admin.addons.toast.error'))
-    } finally {
-      setLoading(false)
    }
  }

+  /** Optimistic flip, per-row rollback on failure. Rolling the whole addons
+   *  snapshot back instead would undo a toggle the user hit in parallel. */
  const handleToggle = async (addon: Addon) => {
    const newEnabled = !addon.enabled
-    // Optimistic update
    setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
    try {
      await adminApi.updateAddon(addon.id, { enabled: newEnabled })
-      refreshGlobalAddons()
-      toast.success(t('admin.addons.toast.updated'))
    } catch (err: unknown) {
-      // Rollback
      setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: !newEnabled } : a))
      toast.error(t('admin.addons.toast.error'))
+      return
    }
+    refreshGlobalAddons()
+    // Journey off disables every photo provider with it, and the response carries
+    // only Journey. Without re-reading, switching Journey back on brings the shelf
+    // up with providers the database has long since turned off.
+    if (addon.id === 'journey') await loadAddons()
+    toast.success(t('admin.addons.toast.updated'))
  }

  const isPhotoProviderAddon = (addon: Addon) => {
@@ -118,24 +134,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
    return addon.type === 'trip' && (addon.icon === 'Image' || haystack.includes('photo') || haystack.includes('memories'))
  }

-  const handleTogglePhotoProvider = async (providerAddon: Addon) => {
-    const enableProvider = !providerAddon.enabled
-    const prev = addons
-
-    setAddons(current => current.map(a => a.id === providerAddon.id ? { ...a, enabled: enableProvider } : a))
-
-    try {
-      await adminApi.updateAddon(providerAddon.id, { enabled: enableProvider })
-      refreshGlobalAddons()
-      toast.success(t('admin.addons.toast.updated'))
-    } catch {
-      setAddons(prev)
-      toast.error(t('admin.addons.toast.error'))
-    }
-  }
-
  const photoProviderAddons = addons.filter(isPhotoProviderAddon)
-  const photosAddon = addons.filter(a => a.type === 'trip').find(isPhotosAddon)
  const tripAddons = addons.filter(a => a.type === 'trip' && !isPhotosAddon(a))
  const globalAddons = addons.filter(a => a.type === 'global')
  const integrationAddons = addons.filter(a => a.type === 'integration')
@@ -144,173 +143,160 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
      label: provider.name,
      description: provider.description,
      enabled: provider.enabled,
-      toggle: () => handleTogglePhotoProvider(provider),
+      toggle: () => handleToggle(provider),
    }))
-  const photosDerivedEnabled = providerOptions.some(p => p.enabled)

  if (loading) {
    return (
-      <div className="p-8 text-center">
-        <div className="w-8 h-8 border-2 border-slate-200 border-t-slate-900 rounded-full animate-spin mx-auto" style={{ borderTopColor: 'var(--text-primary)' }}></div>
+      <div className="grid place-items-center py-16">
+        <Loader2 size={22} className="animate-spin text-content-faint" />
      </div>
    )
  }

+  /** Bag tracking, the collab features and the photo providers all hang off their
+   *  parent as shelf rows, and each shelf only shows while its parent is on —
+   *  a provider toggled under a disabled Journey would hit the server's 409. */
+  const shelfFor = (addon: Addon) => {
+    if (addon.id === 'packing' && addon.enabled && onToggleBagTracking) {
+      return (
+        <AddonSubRow
+          icon={<Luggage size={14} />}
+          title={t('admin.bagTracking.title')}
+          description={t('admin.bagTracking.subtitle')}
+          enabled={!!bagTrackingEnabled}
+          onToggle={onToggleBagTracking}
+        />
+      )
+    }
+    if (addon.id === 'collab' && addon.enabled && collabFeatures && onToggleCollabFeature) {
+      return COLLAB_SUB_FEATURES.map(feat => {
+        const Icon = feat.icon
+        return (
+          <AddonSubRow
+            key={feat.key}
+            icon={<Icon size={14} />}
+            title={t(feat.titleKey)}
+            description={t(feat.subtitleKey)}
+            enabled={collabFeatures[feat.key]}
+            onToggle={() => onToggleCollabFeature(feat.key)}
+          />
+        )
+      })
+    }
+    if (addon.id === 'journey' && addon.enabled && providerOptions.length > 0) {
+      return providerOptions.map(provider => {
+        const ProviderIcon = PROVIDER_ICONS[provider.key]
+        return (
+          <AddonSubRow
+            key={provider.key}
+            icon={ProviderIcon ? <ProviderIcon size={14} /> : undefined}
+            title={provider.label}
+            description={provider.description}
+            enabled={provider.enabled}
+            onToggle={provider.toggle}
+          />
+        )
+      })
+    }
+    // The AI-parsing settings hang off their tile like every other sub-feature,
+    // just as a form instead of toggle rows.
+    if (addon.id === 'llm_parsing' && addon.enabled) {
+      return <LlmParsingConfig addon={addon} />
+    }
+    return null
+  }
+
+  const tile = (addon: Addon) => {
+    const label = getAddonLabel(t, addon)
+    return (
+      <AddonTile
+        key={addon.id}
+        icon={<AddonIcon name={addon.icon} size={18} />}
+        name={label.name}
+        description={label.description}
+        enabled={addon.enabled}
+        onToggle={() => handleToggle(addon)}
+      >
+        {shelfFor(addon)}
+      </AddonTile>
+    )
+  }
+
+  /* One column per type, side by side, instead of three stacked sections. Stacked, each
+     section opened its own set of columns and the tall tiles (Collab 261px, Journey
+     185px) set a section's height while its neighbours ran out early. Side by side the
+     column heading carries the type, so the tiles need no badge of their own. */
+  const groups = [
+    { key: 'trip', addons: tripAddons },
+    { key: 'global', addons: globalAddons },
+    { key: 'integration', addons: integrationAddons },
+  ].filter(g => g.addons.length > 0)
+  const enabledCount = addons.filter(a => a.type !== 'photo_provider' && a.enabled).length
+  const totalCount = tripAddons.length + globalAddons.length + integrationAddons.length
+
  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="rounded-xl border overflow-hidden bg-surface-card border-edge">
-        <div className="px-6 py-4 border-b border-edge-secondary">
-          <h2 className="font-semibold text-content">{t('admin.addons.title')}</h2>
-          <p className="text-xs mt-1 text-content-muted" style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
-            {t('admin.addons.subtitleBefore')}<img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" style={{ height: 11, display: 'inline', verticalAlign: 'middle', opacity: 0.7 }} />{t('admin.addons.subtitleAfter')}
+    <div className="space-y-5">
+      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+        <div>
+          <h2 className="text-subtitle font-semibold tracking-tight text-content">{t('admin.addons.title')}</h2>
+          <p className="mt-1 flex flex-wrap items-center gap-1 text-caption text-content-muted">
+            {t('admin.addons.subtitleBefore')}
+            <img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" style={{ height: 11, verticalAlign: 'middle', opacity: 0.7 }} />
+            {t('admin.addons.subtitleAfter')}
          </p>
        </div>
-
-        {addons.length === 0 ? (
-          <div className="p-8 text-center text-sm text-content-faint">
-            {t('admin.addons.noAddons')}
-          </div>
-        ) : (
-          <div>
-            {/* Trip Addons */}
-            {tripAddons.length > 0 && (
-              <div>
-                <div className="px-6 py-2.5 border-b flex items-center gap-2 bg-surface-secondary border-edge-secondary">
-                  <Briefcase size={13} className="text-content-muted" />
-                  <span className="text-xs font-medium uppercase tracking-wider text-content-muted">
-                    {t('admin.addons.type.trip')} — {t('admin.addons.tripHint')}
-                  </span>
-                </div>
-                {tripAddons.map(addon => (
-                  <div key={addon.id}>
-                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
-                    {addon.id === 'packing' && addon.enabled && onToggleBagTracking && (
-                      <div className="flex items-center gap-4 px-6 py-3 border-b border-edge-secondary bg-surface-secondary" style={{ paddingLeft: 70 }}>
-                        <Luggage size={14} className="text-content-faint" style={{ flexShrink: 0 }} />
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div className="text-sm font-medium text-content-secondary">{t('admin.bagTracking.title')}</div>
-                          <div className="text-xs mt-0.5 text-content-faint">{t('admin.bagTracking.subtitle')}</div>
-                        </div>
-                        <div className="flex items-center gap-2 shrink-0">
-                          <span className={`hidden sm:inline text-xs font-medium ${bagTrackingEnabled ? 'text-content' : 'text-content-faint'}`}>
-                            {bagTrackingEnabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
-                          </span>
-                          <button type="button" onClick={onToggleBagTracking}
-                            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                            style={{ background: bagTrackingEnabled ? 'var(--text-primary)' : 'var(--border-primary)' }}>
-                            <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                              style={{ transform: bagTrackingEnabled ? 'translateX(20px)' : 'translateX(0)' }} />
-                          </button>
-                        </div>
-                      </div>
-                    )}
-                    {addon.id === 'collab' && addon.enabled && collabFeatures && onToggleCollabFeature && (
-                      <div className="px-6 py-3 border-b border-edge-secondary bg-surface-secondary" style={{ paddingLeft: 70 }}>
-                        <div className="space-y-2">
-                          {COLLAB_SUB_FEATURES.map(feat => {
-                            const enabled = collabFeatures[feat.key]
-                            const Icon = feat.icon
-                            return (
-                              <div key={feat.key} className="flex items-center gap-4" style={{ minHeight: 32 }}>
-                                <Icon size={14} className="text-content-faint" style={{ flexShrink: 0 }} />
-                                <div style={{ flex: 1, minWidth: 0 }}>
-                                  <div className="text-sm font-medium text-content-secondary">{t(feat.titleKey)}</div>
-                                  <div className="text-xs mt-0.5 text-content-faint">{t(feat.subtitleKey)}</div>
-                                </div>
-                                <div className="flex items-center gap-2 shrink-0">
-                                  <span className={`hidden sm:inline text-xs font-medium ${enabled ? 'text-content' : 'text-content-faint'}`}>
-                                    {enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
-                                  </span>
-                                  <button type="button" onClick={() => onToggleCollabFeature(feat.key)}
-                                    className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                                    style={{ background: enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}>
-                                    <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                                      style={{ transform: enabled ? 'translateX(20px)' : 'translateX(0)' }} />
-                                  </button>
-                                </div>
-                              </div>
-                            )
-                          })}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* Global Addons */}
-            {globalAddons.length > 0 && (
-              <div>
-                <div className="px-6 py-2.5 border-b border-t flex items-center gap-2 bg-surface-secondary border-edge-secondary">
-                  <Globe size={13} className="text-content-muted" />
-                  <span className="text-xs font-medium uppercase tracking-wider text-content-muted">
-                    {t('admin.addons.type.global')} — {t('admin.addons.globalHint')}
-                  </span>
-                </div>
-                {globalAddons.map(addon => (
-                  <div key={addon.id}>
-                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
-                    {/* Memories providers as sub-items under Journey addon */}
-                    {addon.id === 'journey' && providerOptions.length > 0 && (
-                      <div className="px-6 py-3 border-b border-edge-secondary bg-surface-secondary" style={{ paddingLeft: 70 }}>
-                        <div className="space-y-2">
-                          {providerOptions.map(provider => {
-                            const ProviderIcon = PROVIDER_ICONS[provider.key]
-                            return (
-                            <div key={provider.key} className="flex items-center gap-4" style={{ minHeight: 32 }}>
-                              {ProviderIcon && <span className="text-content-faint"><ProviderIcon size={14} /></span>}
-                              <div style={{ flex: 1, minWidth: 0 }}>
-                                <div className="text-sm font-medium text-content-secondary">{provider.label}</div>
-                                <div className="text-xs mt-0.5 text-content-faint">{provider.description}</div>
-                              </div>
-                              <div className="flex items-center gap-2 shrink-0">
-                                <span className={`hidden sm:inline text-xs font-medium ${provider.enabled ? 'text-content' : 'text-content-faint'}`}>
-                                  {provider.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
-                                </span>
-                                <button type="button"
-                                  onClick={provider.toggle}
-                                  className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                                  style={{ background: provider.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
-                                >
-                                  <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                                    style={{ transform: provider.enabled ? 'translateX(20px)' : 'translateX(0)' }} />
-                                </button>
-                              </div>
-                            </div>
-                            )
-                          })}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* Integration Addons */}
-            {integrationAddons.length > 0 && (
-              <div>
-                <div className="px-6 py-2.5 border-b border-t flex items-center gap-2 bg-surface-secondary border-edge-secondary">
-                  <Link2 size={13} className="text-content-muted" />
-                  <span className="text-xs font-medium uppercase tracking-wider text-content-muted">
-                    {t('admin.addons.type.integration')} — {t('admin.addons.integrationHint')}
-                  </span>
-                </div>
-                {integrationAddons.map(addon => (
-                  <div key={addon.id}>
-                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
-                    {addon.id === 'llm_parsing' && addon.enabled && (
-                      <LlmParsingConfig addon={addon} />
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+        {totalCount > 0 && (
+          <span
+            className="shrink-0 text-caption tabular-nums text-content-faint"
+            title={t('admin.addons.group.count', { enabled: enabledCount, total: totalCount })}
+          >
+            {enabledCount}/{totalCount}
+          </span>
        )}
      </div>
+
+      {addons.length === 0 ? (
+        <EmptyState scene="idle" title={t('admin.addons.noAddons')} />
+      ) : (
+        <div className="grid grid-cols-1 items-start gap-x-4 gap-y-6 md:grid-cols-2 xl:grid-cols-3">
+          {groups.map(g => {
+            const meta = TYPE_META[g.key]
+            return (
+              <section key={g.key}>
+                <GroupHead icon={meta.icon} label={t(meta.labelKey)} hint={t(meta.hintKey)} addons={g.addons} t={t} />
+                <div className="space-y-3">{g.addons.map(tile)}</div>
+              </section>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function GroupHead({ icon: Icon, label, hint, addons, t }: {
+  icon: ComponentType<{ size?: number; className?: string }>
+  label: string
+  hint: string
+  addons: Addon[]
+  t: (key: string, params?: Record<string, unknown>) => string
+}) {
+  const enabled = addons.filter(a => a.enabled).length
+  return (
+    <div
+      className="mb-3 rounded-xl border border-edge-secondary bg-surface-secondary px-3 py-2"
+      title={t('admin.addons.group.count', { enabled, total: addons.length })}
+    >
+      <div className="flex items-center gap-2">
+        <Icon size={13} className="shrink-0 text-content-muted" />
+        <h3 className="min-w-0 flex-1 truncate text-caption font-semibold uppercase tracking-[0.06em] text-content">{label}</h3>
+        <span className="shrink-0 rounded-full bg-surface px-1.5 py-0.5 text-caption font-medium tabular-nums text-content-muted">
+          {enabled}/{addons.length}
+        </span>
+      </div>
+      {/* Says what the type means — the only place that still explains it. */}
+      <p className="mt-0.5 text-caption text-content-faint">{hint}</p>
    </div>
  )
 }
@@ -408,9 +394,8 @@ function LlmParsingConfig({ addon }: { addon: Addon }) {
    }
  }

-  const fieldCls = 'w-full rounded-lg border border-edge-secondary bg-surface px-3 py-2 text-sm text-content placeholder:text-content-faint transition-colors focus:border-edge focus:outline-none'
-  const labelCls = 'mb-1.5 block text-xs font-medium text-content-secondary'
-  const sectionCls = 'text-[11px] font-semibold uppercase tracking-wide text-content-faint'
+  const fieldCls = 'w-full rounded-lg border border-edge-secondary bg-surface px-2.5 py-1.5 text-caption text-content placeholder:text-content-faint transition-colors focus:border-edge focus:outline-none'
+  const labelCls = 'mb-1 block text-caption font-medium text-content-secondary'

  const providerOptions = [
    { value: 'local', label: 'Local · OpenAI-compatible', icon: <Server size={14} />, badge: 'Ollama' },
@@ -418,131 +403,113 @@ function LlmParsingConfig({ addon }: { addon: Addon }) {
    { value: 'anthropic', label: 'Anthropic', icon: <Sparkles size={14} /> },
  ]

+  /* Lives in the tile's shelf like the collab toggles, so everything is caption-
+     sized and single-column — the band this used to be had a whole page width. */
  return (
-    <div className="border-b border-edge-secondary bg-surface-secondary py-5 pr-6 pl-[70px]">
-      <div className="max-w-2xl space-y-6">
-        <p className="text-xs text-content-faint">
-          Set instance-wide config (applies to all users). Leave blank to let each user configure their own provider.
-        </p>
+    <li className="space-y-2.5 py-1.5">
+      <p className="text-caption text-content-faint">
+        Instance-wide — applies to all users. Leave blank to let each user configure their own provider.
+      </p>

-        {/* Connection */}
-        <section className="space-y-3">
-          <div className={sectionCls}>Connection</div>
-          <div>
-            <span className={labelCls}>Provider</span>
-            <CustomSelect value={provider} onChange={v => setProvider(String(v))} options={providerOptions} />
+      <div>
+        <span className={labelCls}>Provider</span>
+        <CustomSelect value={provider} onChange={v => setProvider(String(v))} options={providerOptions} />
+      </div>
+      {provider !== 'anthropic' && (
+        <label className="block">
+          <span className={labelCls}>Base URL</span>
+          <input type="url" autoComplete="off" className={fieldCls} value={baseUrl} onChange={e => setBaseUrl(e.target.value)} onBlur={loadModels} placeholder={provider === 'local' ? 'http://localhost:11434/v1' : 'https://api.openai.com/v1'} />
+        </label>
+      )}
+      <label className="block">
+        <span className={labelCls}>API key</span>
+        <input type="password" className={fieldCls} value={apiKey} onChange={e => setApiKey(e.target.value)} placeholder={apiKey === MASKED ? MASKED : provider === 'local' ? '(often not required)' : 'sk-…'} />
+      </label>
+      {provider === 'anthropic' && (
+        <p className="text-caption text-content-faint">Anthropic reads PDFs (including scans) natively. Local/OpenAI models receive extracted text — scanned PDFs need Anthropic.</p>
+      )}
+      <label className="block">
+        <span className={labelCls}>Model</span>
+        <input autoComplete="off" className={fieldCls} value={model} onChange={e => setModel(e.target.value)} placeholder={provider === 'anthropic' ? 'claude-opus-4-8' : provider === 'openai' ? 'gpt-4o' : 'select or pull below'} />
+      </label>
+
+      {/* Local model management (Ollama) */}
+      {provider === 'local' && (
+        <div className="space-y-2 rounded-lg border border-edge-secondary bg-surface p-2.5">
+          <div className="flex items-center justify-between">
+            <span className="text-caption font-medium text-content-secondary">Installed on the server</span>
+            <button type="button" onClick={loadModels} disabled={loadingModels} className="text-caption text-content-muted underline disabled:opacity-60">
+              {loadingModels ? 'Loading…' : 'Refresh'}
+            </button>
          </div>
-          {provider !== 'anthropic' && (
-            <label className="block">
-              <span className={labelCls}>Base URL</span>
-              <input type="url" autoComplete="off" className={fieldCls} value={baseUrl} onChange={e => setBaseUrl(e.target.value)} onBlur={loadModels} placeholder={provider === 'local' ? 'http://localhost:11434/v1' : 'https://api.openai.com/v1'} />
-            </label>
+          {modelsErr && <p className="text-caption text-danger">{modelsErr}</p>}
+          {!modelsErr && installed.length === 0 && !loadingModels && (
+            <p className="text-caption text-content-faint">No models installed yet — pull one below.</p>
          )}
-          <label className="block">
-            <span className={labelCls}>API key</span>
-            <input type="password" className={fieldCls} value={apiKey} onChange={e => setApiKey(e.target.value)} placeholder={apiKey === MASKED ? MASKED : provider === 'local' ? '(often not required)' : 'sk-…'} />
-          </label>
-          {provider === 'anthropic' && (
-            <p className="text-xs text-content-faint">Anthropic reads PDFs (including scans) natively. Local/OpenAI models receive extracted text — scanned PDFs need Anthropic.</p>
-          )}
-        </section>
-
-        {/* Model */}
-        <section className="space-y-3">
-          <div className={sectionCls}>Model</div>
-          <label className="block">
-            <span className="sr-only">Model</span>
-            <input autoComplete="off" className={fieldCls} value={model} onChange={e => setModel(e.target.value)} placeholder={provider === 'anthropic' ? 'claude-opus-4-8' : provider === 'openai' ? 'gpt-4o' : 'select or pull below'} />
-          </label>
-
-          {/* Local model management (Ollama) */}
-          {provider === 'local' && (
-            <div className="space-y-3 rounded-lg border border-edge-secondary bg-surface p-3">
-              <div className="flex items-center justify-between">
-                <span className="text-xs font-medium text-content-secondary">Installed on the server</span>
-                <button type="button" onClick={loadModels} disabled={loadingModels} className="text-xs text-content-muted underline disabled:opacity-60">
-                  {loadingModels ? 'Loading…' : 'Refresh'}
+          {installed.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {installed.map(name => (
+                <button type="button"
+                  key={name}
+                  title={name}
+                  onClick={() => setModel(name)}
+                  className={`max-w-full truncate rounded-full border px-2 py-0.5 text-caption transition-colors ${model === name ? 'border-transparent bg-accent text-accent-text' : 'border-edge-secondary text-content-secondary hover:border-edge'}`}
+                >
+                  {name}
                </button>
-              </div>
-              {modelsErr && <p className="text-xs text-rose-600">{modelsErr}</p>}
-              {!modelsErr && installed.length === 0 && !loadingModels && (
-                <p className="text-xs text-content-faint">No models installed yet — pull one below.</p>
-              )}
-              {installed.length > 0 && (
-                <div className="flex flex-wrap gap-1.5">
-                  {installed.map(name => (
-                    <button type="button"
-                      key={name}
-                      title={name}
-                      onClick={() => setModel(name)}
-                      className={`max-w-full truncate rounded-full border px-2.5 py-1 text-xs transition-colors ${model === name ? 'border-transparent bg-accent text-accent-text' : 'border-edge-secondary text-content-secondary hover:border-edge'}`}
-                    >
-                      {name}
-                    </button>
-                  ))}
-                </div>
-              )}
-
-              <div className="border-t border-edge-secondary pt-3">
-                <div className="mb-2 text-xs font-medium text-content-secondary">Pull a recommended model</div>
-                <div className="space-y-1">
-                  {RECOMMENDED_MODELS.map(m => {
-                    const installedHere = isInstalled(m.id)
-                    const isPulling = pulling === m.id
-                    const active = model === m.id
-                    return (
-                      <div key={m.id} className={`flex items-center gap-3 rounded-lg border px-3 py-2 transition-colors ${active ? 'border-edge-secondary bg-surface-secondary' : 'border-transparent'}`}>
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-2">
-                            <span className="text-sm text-content">{m.label}</span>
-                            {m.recommended && (
-                              <span className="rounded-md bg-[rgba(16,185,129,0.15)] px-1.5 py-px text-[10px] font-semibold text-emerald-600">Recommended</span>
-                            )}
-                          </div>
-                          <div className="text-xs text-content-faint">{m.note}</div>
-                          {isPulling && (
-                            <div className="mt-1.5">
-                              <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-tertiary">
-                                <div className="h-full bg-accent transition-[width] duration-200" style={{ width: `${pullPct}%` }} />
-                              </div>
-                              <div className="mt-0.5 text-[10px] text-content-faint">{pullStatus}{pullPct ? ` · ${pullPct}%` : ''}</div>
-                            </div>
-                          )}
-                        </div>
-                        {installedHere ? (
-                          <button type="button" onClick={() => setModel(m.id)} disabled={active} className={`shrink-0 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${active ? 'bg-surface-tertiary text-content-muted' : 'border border-edge-secondary text-content-secondary hover:border-edge'}`}>
-                            {active ? 'Selected' : 'Use'}
-                          </button>
-                        ) : (
-                          <button type="button" onClick={() => pull(m.id)} disabled={!!pulling} className="shrink-0 rounded-md bg-accent px-3 py-1.5 text-xs font-medium text-accent-text disabled:opacity-60">
-                            {isPulling ? 'Pulling…' : 'Pull'}
-                          </button>
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
+              ))}
            </div>
          )}
-        </section>

-        <button type="button" onClick={save} disabled={saving} className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-text transition-opacity disabled:opacity-60">
+          <div className="border-t border-edge-secondary pt-2">
+            <div className="mb-1.5 text-caption font-medium text-content-secondary">Pull a recommended model</div>
+            <div className="space-y-1">
+              {RECOMMENDED_MODELS.map(m => {
+                const installedHere = isInstalled(m.id)
+                const isPulling = pulling === m.id
+                const active = model === m.id
+                return (
+                  <div key={m.id} className="min-w-0" title={m.note}>
+                    <div className="flex items-center gap-2">
+                      <span className="min-w-0 flex-1 truncate text-caption text-content">{m.label}</span>
+                      {m.recommended && (
+                        <span className="shrink-0 rounded-md bg-success-soft px-1.5 py-px text-caption font-semibold text-success">Recommended</span>
+                      )}
+                      {installedHere ? (
+                        <button type="button" onClick={() => setModel(m.id)} disabled={active} className={`shrink-0 rounded-md px-2 py-1 text-caption font-medium transition-colors ${active ? 'bg-surface-tertiary text-content-muted' : 'border border-edge-secondary text-content-secondary hover:border-edge'}`}>
+                          {active ? 'Selected' : 'Use'}
+                        </button>
+                      ) : (
+                        <button type="button" onClick={() => pull(m.id)} disabled={!!pulling} className="shrink-0 rounded-md bg-accent px-2 py-1 text-caption font-medium text-accent-text disabled:opacity-60">
+                          {isPulling ? 'Pulling…' : 'Pull'}
+                        </button>
+                      )}
+                    </div>
+                    {isPulling && (
+                      <div className="mt-1">
+                        <div className="h-1 w-full overflow-hidden rounded-full bg-surface-tertiary">
+                          <div className="h-full bg-accent transition-[width] duration-200" style={{ width: `${pullPct}%` }} />
+                        </div>
+                        <div className="mt-0.5 text-caption text-content-faint">{pullStatus}{pullPct ? ` · ${pullPct}%` : ''}</div>
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex justify-end">
+        <button type="button" onClick={save} disabled={saving} className="rounded-lg bg-accent px-3 py-1.5 text-caption font-medium text-accent-text transition-opacity disabled:opacity-60">
          {saving ? 'Saving…' : 'Save'}
        </button>
      </div>
-    </div>
+    </li>
  )
 }

-interface AddonRowProps {
-  addon: Addon
-  onToggle: (addon: Addon) => void
-  t: (key: string) => string
-  statusOverride?: boolean
-  hideToggle?: boolean
-}
-
 function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string; description: string } {
  const nameKey = `admin.addons.catalog.${addon.id}.name`
  const descKey = `admin.addons.catalog.${addon.id}.description`
@@ -555,56 +522,3 @@ function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string
  }
 }

-function AddonRow({ addon, onToggle, t, nameOverride, descriptionOverride, statusOverride, hideToggle }: AddonRowProps & { nameOverride?: string; descriptionOverride?: string }) {
-  const isComingSoon = false
-  const label = getAddonLabel(t, addon)
-  const displayName = nameOverride || label.name
-  const displayDescription = descriptionOverride || label.description
-  const enabledState = statusOverride ?? addon.enabled
-  return (
-    <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95 border-edge-secondary" style={{ opacity: isComingSoon ? 0.5 : 1, pointerEvents: isComingSoon ? 'none' : 'auto' }}>
-      {/* Icon */}
-      <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 bg-surface-secondary text-content">
-        <AddonIcon name={addon.icon} size={20} />
-      </div>
-
-      {/* Info */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold text-content">{displayName}</span>
-          {isComingSoon && (
-            <span className="text-[9px] font-semibold px-2 py-0.5 rounded-full text-content-faint bg-surface-tertiary">
-              Coming Soon
-            </span>
-          )}
-          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-surface-secondary text-content-muted">
-            {addon.type === 'global' ? t('admin.addons.type.global') : addon.type === 'integration' ? t('admin.addons.type.integration') : t('admin.addons.type.trip')}
-          </span>
-        </div>
-        <p className="text-xs mt-0.5 text-content-muted">{displayDescription}</p>
-      </div>
-
-      {/* Toggle */}
-      <div className="flex items-center gap-2 shrink-0">
-        <span className={`hidden sm:inline text-xs font-medium ${(enabledState && !isComingSoon) ? 'text-content' : 'text-content-faint'}`}>
-          {isComingSoon ? t('admin.addons.disabled') : enabledState ? t('admin.addons.enabled') : t('admin.addons.disabled')}
-        </span>
-        {!hideToggle && (
-          <button type="button"
-            onClick={() => !isComingSoon && onToggle(addon)}
-            disabled={isComingSoon}
-            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-            style={{ background: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
-          >
-            <span
-              className="inline-block h-4 w-4 transform rounded-full transition-transform bg-surface-card"
-              style={{
-                transform: (enabledState && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
-              }}
-            />
-          </button>
-        )}
-      </div>
-    </div>
-  )
-}
@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import ToggleSwitch from '../Settings/ToggleSwitch'
+
+/**
+ * One child row inside an {@link AddonTile}'s sub-shelf: bag tracking under
+ * Lists, a collab feature under Collab, a photo provider under Journey.
+ *
+ * A photo provider without a vendor mark has to stay free of `<svg>`
+ * (FE-ADMIN-ADDON-015), which is why `icon` falls back to a fixed-width spacer
+ * rather than a placeholder glyph. Nothing else belongs in this row either: no
+ * chevron, no status dot, no lucide fallback.
+ *
+ * The row carries its title only; the description rides along as the `title`
+ * tooltip, because a second line of text is what makes a child weigh as much as
+ * an addon.
+ */
+export default function AddonSubRow({
+  icon,
+  title,
+  description,
+  enabled,
+  onToggle,
+}: {
+  /** Vendor mark or lucide glyph at 14px. Omit it and the slot keeps its width. */
+  icon?: ReactNode
+  title: string
+  description?: string
+  enabled: boolean
+  onToggle: () => void
+}) {
+  return (
+    <li className="flex min-h-[36px] items-center gap-3">
+      {icon ? <span className="shrink-0 text-content-faint">{icon}</span> : <span className="w-3.5 shrink-0" aria-hidden />}
+      <span className="min-w-0 flex-1 truncate text-caption font-medium text-content-secondary" title={description}>
+        {title}
+      </span>
+      <ToggleSwitch on={enabled} onToggle={onToggle} label={title} />
+    </li>
+  )
+}
@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react'
+import ToggleSwitch from '../Settings/ToggleSwitch'
+
+/**
+ * One addon in the admin grid: a card whose fill carries the on/off state, with
+ * an optional shelf at the foot holding its sub-features.
+ *
+ * The fill ladder is `--bg-secondary` (on) against `--bg-card` (the panel it
+ * sits on) — that pair reads in both themes, because secondary is *darker* than
+ * the card in light and *lighter* in dark. The obvious alternative, on =
+ * `bg-surface-card`, inverts in dark and turns the disabled tiles into the loud
+ * ones.
+ *
+ * Hover and focus ride on border and fill rather than a shadow: `--shadow-card`
+ * is only declared in `:root`, so the `.dark` palette never overrides it and a
+ * shadow-based affordance would be invisible there.
+ *
+ * The card is not a click target — only the switches are. No lift, no pointer
+ * cursor, no `role="button"`.
+ */
+export default function AddonTile({
+  icon,
+  name,
+  description,
+  enabled,
+  onToggle,
+  children,
+}: {
+  icon: ReactNode
+  name: string
+  description?: string
+  enabled: boolean
+  onToggle: () => void
+  /** The sub-shelf: `<AddonSubRow>` children. */
+  children?: ReactNode
+}) {
+  return (
+    <article
+      className={`flex flex-col overflow-hidden rounded-xl border transition-[background-color,border-color] duration-150 focus-within:ring-2 focus-within:ring-accent ${
+        enabled
+          ? 'border-edge bg-surface-secondary'
+          : 'border-edge-secondary bg-surface hover:border-edge hover:bg-surface-secondary'
+      }`}
+    >
+      <div className="flex items-start gap-3 p-4">
+        <div
+          className={`grid h-10 w-10 shrink-0 place-items-center rounded-xl ${
+            enabled ? 'border border-accent bg-accent-subtle text-accent-on' : 'bg-surface-tertiary text-content-faint'
+          }`}
+        >
+          {icon}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          {/* The name stays full-strength when off: it is the tile's identity, not its
+              state. Greying it out reads as "broken" rather than "not enabled". */}
+          <h4 className="truncate text-body font-semibold text-content" title={name}>
+            {name}
+          </h4>
+          <p
+            className={`mt-0.5 line-clamp-2 text-caption ${enabled ? 'text-content-muted' : 'text-content-faint'}`}
+            title={description}
+          >
+            {description}
+          </p>
+        </div>
+
+        <ToggleSwitch on={enabled} onToggle={onToggle} label={name} />
+      </div>
+
+      {children && (
+        <div className="border-t border-edge-secondary bg-surface-tertiary px-4 py-2.5">
+          {/* Sitting inside the parent on its own fill is enough to say these belong
+              to it — no rail, no indent guides. */}
+          <ul className="space-y-0.5">{children}</ul>
+        </div>
+      )}
+    </article>
+  )
+}
@@ -129,7 +129,9 @@ describe('AdminPluginsPanel — Discover modal, operator-egress pill', () => {
 * the UI. It must escape every overflow ancestor, and flip up when the bottom is tight.
 */
 describe('AdminPluginsPanel — row ⋯ menu is never clipped (#1523)', () => {
-  const withRepo = plugin({ source_repo: 'trek/gotify', operatorEgress: false })
+  // operatorEgress so the menu shows every action, Allowed hosts included (it is
+  // gated on the declaration, like the row chip).
+  const withRepo = plugin({ source_repo: 'trek/gotify', operatorEgress: true })
  const realRect = HTMLButtonElement.prototype.getBoundingClientRect
  afterEach(() => { HTMLButtonElement.prototype.getBoundingClientRect = realRect })

@@ -281,6 +283,10 @@ describe('AdminPluginsPanel — a refused update', () => {
    expect(await screen.findByText(/key it was installed with/i)).toBeInTheDocument()
    expect(screen.getByText(/key it is offering now/i)).toBeInTheDocument()
    expect(screen.getByRole('button', { name: /trust the new key/i })).toBeInTheDocument()
+    // The dialog body scrolls; the decision buttons sit outside it, so they never leave the viewport (#2159).
+    const body = screen.getByText(/key it is offering now/i).closest('.overflow-y-auto')
+    expect(body).not.toBeNull()
+    expect(body).not.toContainElement(screen.getByRole('button', { name: /trust the new key/i }))
  })

  // D2, at the UI. An invalid signature means the bytes are not what the author signed.
@@ -843,6 +849,30 @@ describe('AdminPluginsPanel — row actions', () => {
    expect(screen.getByText('View error log')).toBeInTheDocument()
    expect(screen.queryByText('Restart')).not.toBeInTheDocument()
  })
+
+  it('FE-COMP-PLUGINS-PANEL-049: Allowed hosts is offered only to a plugin that declared operatorEgress', async () => {
+    // An admin must never be invited to widen egress for a plugin that didn't ask for it
+    // — same rule the row chip already follows.
+    await openRowMenu(plugin({ operatorEgress: false }))
+
+    expect(screen.getByText('View error log')).toBeInTheDocument() // menu is open
+    expect(screen.queryByText('Allowed hosts')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-PANEL-050: a long host list scrolls inside the dialog instead of growing past the viewport (#2159)', async () => {
+    server.use(http.get('*/api/admin/plugins/trek-gotify/egress-hosts', () =>
+      HttpResponse.json({ supported: true, hosts: ['gotify.lan', 'ntfy.lan'] })))
+    await openRowMenu()
+
+    fireEvent.click(screen.getByText('Allowed hosts'))
+
+    // The card is capped and its body scrolls, so the input, the Add button and the
+    // restart note below the list stay reachable however many hosts the admin entered.
+    const body = (await screen.findByText('gotify.lan')).closest('.overflow-y-auto')
+    expect(body).not.toBeNull()
+    expect(body).toContainElement(screen.getByPlaceholderText('gotify.example.com'))
+    expect(body!.parentElement!.className).toContain('max-h-[88vh]')
+  })
 })

 describe('AdminPluginsPanel — enabling a plugin', () => {
@@ -947,7 +977,11 @@ describe('AdminPluginsPanel — enabling a plugin', () => {
    await screen.findByText('Gotify')

    fireEvent.click(rowToggle('Gotify'))
-    fireEvent.click(await screen.findByRole('button', { name: /^cancel$/i }))
+    // The dependency list scrolls; Cancel sits outside it, so it never leaves the viewport (#2159).
+    const body = (await screen.findByText('trek-core')).closest('.overflow-y-auto')
+    expect(body).not.toBeNull()
+    expect(body).not.toContainElement(screen.getByRole('button', { name: /^cancel$/i }))
+    fireEvent.click(screen.getByRole('button', { name: /^cancel$/i }))

    await waitFor(() => expect(screen.queryByText('Missing dependencies')).not.toBeInTheDocument())
    expect(installs).toBe(0)
@@ -967,6 +1001,11 @@ describe('AdminPluginsPanel — enabling a plugin', () => {
    // An unknown permission is still shown — as its raw code
    expect(screen.getByText('weird:perm')).toBeInTheDocument()
    expect(screen.getByText('api.acme.io')).toBeInTheDocument()
+    // A long permission list scrolls inside the dialog; the decision buttons sit outside
+    // the scroll container, so they never leave the viewport (#2159).
+    const body = screen.getByText('Read trips the acting user can access').closest('.overflow-y-auto')
+    expect(body).not.toBeNull()
+    expect(body).not.toContainElement(screen.getByRole('button', { name: /keep off for now/i }))

    fireEvent.click(screen.getByRole('button', { name: /keep off for now/i }))
    expect(await screen.findByText(/left off until you approve/i)).toBeInTheDocument()
@@ -1439,6 +1478,18 @@ describe('AdminPluginsPanel — Discover cards and the detail modal', () => {
    expect(await screen.findByText('Could not load plugin details.')).toBeInTheDocument()
  })

+  it('FE-COMP-PLUGINS-PANEL-041a: the card opts out of the global press-scale (#2158)', async () => {
+    // jsdom cannot replay the browser mechanics behind #2158: the :active scale on
+    // the card shifted the Install button out from under the pointer, so the click
+    // retargeted onto the card and opened the detail modal instead of installing.
+    // The data-no-press attribute is the pin.
+    discoverWith({})
+    render(<AdminPluginsPanel />)
+    await clickDiscover()
+
+    expect((await screen.findByText('Gotify')).closest('[role="button"]')).toHaveAttribute('data-no-press')
+  })
+
  it('FE-COMP-PLUGINS-PANEL-042: the detail modal lists setup fields, metadata and a separate homepage', async () => {
    discoverWith(
      { downloadCount: 999_500, reviewedAt: '2026-01-05T00:00:00Z', homepage: 'https://gotify.example', trek: '>=3.2.0' },
@@ -1763,7 +1814,9 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {

  it('FE-W5PLG-011: a plugin whose runtime cannot take extra hosts says so', async () => {
    const user = userEvent.setup()
-    mockPanel([row()])
+    // Declares operatorEgress (so the menu item shows), but the runtime lookup
+    // disagrees — the dialog's unsupported notice is the truth-teller.
+    mockPanel([row({ operatorEgress: true })])
    server.use(
      http.get('*/api/admin/plugins/a-widget/egress-hosts', () => HttpResponse.json({ supported: false, hosts: [] })),
    )
@@ -1778,7 +1831,7 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {

  it('FE-W5PLG-012: a failing egress lookup still opens the dialog in the unsupported state', async () => {
    const user = userEvent.setup()
-    mockPanel([row()])
+    mockPanel([row({ operatorEgress: true })])
    server.use(
      http.get('*/api/admin/plugins/a-widget/egress-hosts', () => HttpResponse.json({ error: 'nope' }, { status: 500 })),
    )
@@ -2134,3 +2187,357 @@ describe('AdminPluginsPanel — update all', () => {
    await waitFor(() => expect(started).toEqual(['a-widget', 'b-widget']))
  })
 })
+
+/**
+ * The admin-owned `scope:'instance'` settings form. The fields are declared manifest
+ * data (validated at install), the values live in the plugin's instance config, and a
+ * save may RESTART a running plugin — the child reads config once, at init — so the
+ * admin must be told when that happened rather than wondering why the plugin blinked.
+ */
+describe('AdminPluginsPanel — instance settings', () => {
+  const FIELDS = [
+    { key: 'apiUrl', label: 'API URL', input_type: 'text', required: true, secret: false },
+    { key: 'apiKey', label: 'API key', input_type: 'text', required: false, secret: true },
+  ]
+
+  async function openRowMenu(p: Record<string, unknown>) {
+    mockList(p)
+    render(<><ToastContainer /><AdminPluginsPanel /></>)
+    fireEvent.click(await screen.findByTestId('plugin-row-menu-btn-trek-gotify'))
+  }
+
+  async function openSettings(config: Record<string, unknown> = { apiUrl: 'https://gotify.mydomain.com', apiKey: '••••••••' }) {
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({ fields: FIELDS, config })),
+    )
+    await openRowMenu(plugin({ instanceSettingsCount: 2 }))
+    fireEvent.click(screen.getByText('Instance settings'))
+    await waitFor(() => expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument(), { timeout: 5000 })
+  }
+
+  it('FE-COMP-PLUGINS-CFG-001: a plugin with instance fields offers the menu item, opening the form', async () => {
+    await openSettings()
+    // Both declared fields render, the secret as a masked password input.
+    expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('••••••••')).toHaveAttribute('type', 'password')
+  })
+
+  it('FE-COMP-PLUGINS-CFG-002: a plugin with NO instance fields gets no menu item', async () => {
+    await openRowMenu(plugin({ instanceSettingsCount: 0, instanceActionsCount: 0 }))
+    expect(screen.getByText('View error log')).toBeInTheDocument() // menu is open
+    expect(screen.queryByText('Instance settings')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-CFG-008: a plugin with instance ACTIONS but no fields still offers the menu item', async () => {
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/config', () =>
+        HttpResponse.json({ fields: [], config: {}, actions: [{ key: 'ping', label: 'Ping server', danger: false, scope: 'instance' }] })),
+    )
+    await openRowMenu(plugin({ instanceSettingsCount: 0, instanceActionsCount: 1 }))
+    expect(screen.getByText('Instance settings')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('Instance settings'))
+    expect(await screen.findByRole('button', { name: 'Ping server' }, { timeout: 5000 })).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-CFG-003: saving sends the edits but never the untouched secret mask', async () => {
+    let body: Record<string, unknown> | null = null
+    server.use(
+      http.put('*/api/admin/plugins/trek-gotify/config', async ({ request }) => {
+        body = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ config: body, restarted: false })
+      }),
+    )
+    await openSettings()
+
+    fireEvent.change(screen.getByDisplayValue('https://gotify.mydomain.com'), { target: { value: 'https://new.example' } })
+    fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+
+    expect(await screen.findByText('Settings saved', {}, { timeout: 5000 })).toBeInTheDocument()
+    // The mask is a display artifact, not a value — sending it would overwrite the stored secret.
+    expect(body).toEqual({ apiUrl: 'https://new.example' })
+  })
+
+  it('FE-COMP-PLUGINS-CFG-004: a save that restarted the running plugin says so', async () => {
+    server.use(
+      http.put('*/api/admin/plugins/trek-gotify/config', () =>
+        HttpResponse.json({ config: { apiUrl: 'https://gotify.mydomain.com' }, restarted: true })),
+    )
+    await openSettings()
+
+    fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+
+    expect(await screen.findByText('Settings saved — plugin restarted', {}, { timeout: 5000 })).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-CFG-005: renders every declared field type and saves the edited values', async () => {
+    const RICH = [
+      { key: 'mode', label: 'Mode', input_type: 'select', options: [{ value: 'fast', label: 'Fast' }, { value: 'slow', label: 'Slow' }], hint: 'Pick one' },
+      { key: 'enabled', input_type: 'checkbox' }, // no label — the key stands in
+      { key: 'retries', label: 'Retries', input_type: 'number', required: true },
+    ]
+    let body: Record<string, unknown> | null = null
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/config', () =>
+        HttpResponse.json({ fields: RICH, config: { mode: 'slow', enabled: true } })),
+      http.put('*/api/admin/plugins/trek-gotify/config', async ({ request }) => {
+        body = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ config: body, restarted: false })
+      }),
+    )
+    await openRowMenu(plugin({ instanceSettingsCount: 3 }))
+    fireEvent.click(screen.getByText('Instance settings'))
+
+    // Stored values land in the right controls; an unset value renders empty.
+    const select = await screen.findByRole('combobox', {}, { timeout: 5000 })
+    expect(select).toHaveValue('slow')
+    expect(screen.getByRole('checkbox')).toBeChecked()
+    expect(screen.getByRole('spinbutton')).toHaveValue(null)
+    expect(screen.getByText('Pick one')).toBeInTheDocument() // hint
+    expect(screen.getByText('enabled')).toBeInTheDocument() // label falls back to the key
+
+    fireEvent.change(select, { target: { value: 'fast' } })
+    fireEvent.click(screen.getByRole('checkbox'))
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '3' } })
+    fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+
+    expect(await screen.findByText('Settings saved', {}, { timeout: 5000 })).toBeInTheDocument()
+    expect(body).toEqual({ mode: 'fast', enabled: false, retries: '3' })
+  })
+
+  const ACTIONS = [
+    { key: 'ping', label: 'Ping server', danger: false, scope: 'instance' },
+    { key: 'purge', label: 'Purge cache', hint: 'Drops every cached tile', danger: true, scope: 'instance' },
+  ]
+
+  async function openWithActions(p: Record<string, unknown> = plugin({ instanceSettingsCount: 2 })) {
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/config', () =>
+        HttpResponse.json({ fields: FIELDS, config: { apiUrl: 'https://gotify.mydomain.com' }, actions: ACTIONS })),
+    )
+    await openRowMenu(p)
+    fireEvent.click(screen.getByText('Instance settings'))
+    await waitFor(() => expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument(), { timeout: 5000 })
+  }
+
+  it('FE-COMP-PLUGINS-ACT-010: instance actions render below the fields and run against the admin route', async () => {
+    let posted = ''
+    server.use(
+      http.post('*/api/admin/plugins/trek-gotify/actions/:key', ({ params }) => {
+        posted = String(params.key)
+        return HttpResponse.json({ ok: true, message: 'pong' })
+      }),
+    )
+    await openWithActions()
+    expect(screen.getByText('Drops every cached tile')).toBeInTheDocument() // hint
+    fireEvent.click(screen.getByRole('button', { name: 'Ping server' }))
+    expect(await screen.findByText('pong', {}, { timeout: 5000 })).toBeInTheDocument()
+    expect(posted).toBe('ping')
+    // The dialog stays open — the admin may run another one.
+    expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-ACT-011: a danger action asks first; confirming runs it', async () => {
+    let posted = ''
+    server.use(
+      http.post('*/api/admin/plugins/trek-gotify/actions/:key', ({ params }) => {
+        posted = String(params.key)
+        return HttpResponse.json({ ok: false, message: 'cache locked' })
+      }),
+    )
+    await openWithActions()
+    fireEvent.click(screen.getByRole('button', { name: 'Purge cache' }))
+    expect(await screen.findByText('Run this action?')).toBeInTheDocument()
+    expect(posted).toBe('')
+    fireEvent.click(screen.getByRole('button', { name: /^confirm$/i }))
+    expect(await screen.findByText('cache locked', {}, { timeout: 5000 })).toBeInTheDocument()
+    expect(posted).toBe('purge')
+  })
+
+  it('FE-COMP-PLUGINS-ACT-012: an inactive plugin shows the buttons disabled with the activation hint', async () => {
+    await openWithActions(plugin({ instanceSettingsCount: 2, status: 'inactive', enabled: 0 }))
+    expect(screen.getByRole('button', { name: 'Ping server' })).toBeDisabled()
+    expect(screen.getByText('Activate the plugin to run its actions')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-ACT-013: a dirty form is saved before the action runs', async () => {
+    const calls: string[] = []
+    server.use(
+      http.put('*/api/admin/plugins/trek-gotify/config', () => { calls.push('save'); return HttpResponse.json({ config: {}, restarted: false }) }),
+      http.post('*/api/admin/plugins/trek-gotify/actions/:key', () => { calls.push('run'); return HttpResponse.json({ ok: true }) }),
+    )
+    await openWithActions()
+    fireEvent.change(screen.getByDisplayValue('https://gotify.mydomain.com'), { target: { value: 'https://new.example' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Ping server' }))
+    await waitFor(() => expect(calls).toEqual(['save', 'run']), { timeout: 5000 })
+  })
+
+  it('FE-COMP-PLUGINS-CFG-006: a failed config fetch is a toast, not a broken dialog', async () => {
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({ error: 'nope' }, { status: 500 })),
+    )
+    await openRowMenu(plugin({ instanceSettingsCount: 2 }))
+    fireEvent.click(screen.getByText('Instance settings'))
+
+    expect(await screen.findByText('Error', {}, { timeout: 5000 })).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-CFG-007: a rejected save shows the server reason and keeps the dialog open', async () => {
+    server.use(
+      http.put('*/api/admin/plugins/trek-gotify/config', () =>
+        HttpResponse.json({ error: 'config refused' }, { status: 400 })),
+    )
+    await openSettings()
+
+    fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+
+    expect(await screen.findByText('config refused', {}, { timeout: 5000 })).toBeInTheDocument()
+    // Still open — the admin's edits are not thrown away on a refusal.
+    expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-CFG-008: the dialog closes without saving', async () => {
+    await openSettings()
+
+    fireEvent.click(screen.getByRole('button', { name: /^close$/i }))
+
+    expect(screen.queryByDisplayValue('https://gotify.mydomain.com')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-CFG-009: pre-fills a declared default when no value is stored', async () => {
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({
+        fields: [{ key: 'oauth_authorize_url', label: 'Authorize URL', input_type: 'text', required: true, secret: false, default: 'https://auth.openbnb.org/authorize' }],
+        config: {},
+      })),
+    )
+    await openRowMenu(plugin({ instanceSettingsCount: 1 }))
+    fireEvent.click(screen.getByText('Instance settings'))
+
+    expect(await screen.findByDisplayValue('https://auth.openbnb.org/authorize', {}, { timeout: 5000 })).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-CFG-010: a stored value wins over the default', async () => {
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({
+        fields: [{ key: 'oauth_authorize_url', label: 'Authorize URL', input_type: 'text', required: false, secret: false, default: 'https://auth.openbnb.org/authorize' }],
+        config: { oauth_authorize_url: 'https://mine.example' },
+      })),
+    )
+    await openRowMenu(plugin({ instanceSettingsCount: 1 }))
+    fireEvent.click(screen.getByText('Instance settings'))
+
+    expect(await screen.findByDisplayValue('https://mine.example', {}, { timeout: 5000 })).toBeInTheDocument()
+    expect(screen.queryByDisplayValue('https://auth.openbnb.org/authorize')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-CFG-011: blocks Save while a required field is empty and names it', async () => {
+    let called = false
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({
+        fields: [{ key: 'client_id', label: 'Client ID', input_type: 'text', required: true, secret: false }],
+        config: {},
+      })),
+      http.put('*/api/admin/plugins/trek-gotify/config', () => { called = true; return HttpResponse.json({ config: {}, restarted: false }) }),
+    )
+    await openRowMenu(plugin({ instanceSettingsCount: 1 }))
+    fireEvent.click(screen.getByText('Instance settings'))
+    await screen.findByText('Client ID', {}, { timeout: 5000 })
+
+    fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+
+    expect(await screen.findByText('"Client ID" is required', {}, { timeout: 5000 })).toBeInTheDocument()
+    expect(called).toBe(false)
+  })
+
+  it('FE-COMP-PLUGINS-CFG-012: Save paints its label with the accent-text token, so a light accent stays readable', async () => {
+    await openSettings()
+
+    // `--accent-text` flips per scheme and per light/dark; a hard white label vanishes on
+    // the near-white accent the dark theme uses by default.
+    const save = screen.getByRole('button', { name: /^save$/i })
+    expect(save.className).toContain('text-accent-text')
+    expect(save.className).not.toContain('text-white')
+  })
+})
+
+/**
+ * TREK_PLUGINS_IGNORE_TREK_RANGE. The server turns its version gates into warnings; the
+ * panel's job is to make sure the admin actually SEES the warning — before a registry
+ * install, after a sideload/link that could not be asked first, and on the row for as
+ * long as the plugin keeps running outside the range its author vouched for.
+ */
+describe('AdminPluginsPanel — TREK-range bypass (TREK_PLUGINS_IGNORE_TREK_RANGE)', () => {
+  function bypassPanel(plugins: Record<string, unknown>[], entry: Record<string, unknown> | null) {
+    server.use(
+      http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, ignoreTrekRange: true, plugins })),
+      http.get('*/api/admin/plugins/registry', () => HttpResponse.json(entry ? [entry] : [])),
+    )
+  }
+  const incompatibleEntry = () => registryEntry({ trek: '>=4.0.0', hostVersion: '3.3.0', compatible: false, latestCompatible: null })
+
+  it('FE-PLG-BYPASS-001: says so in the header', async () => {
+    bypassPanel([plugin()], null)
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByText('Version checks off')).toBeInTheDocument()
+  })
+
+  it('FE-PLG-BYPASS-002: offers "Install anyway" for an incompatible entry and asks before installing', async () => {
+    let posted: unknown = null
+    bypassPanel([plugin({ id: 'something-else' })], incompatibleEntry())
+    server.use(http.post('*/api/admin/plugins/install', async ({ request }) => {
+      posted = await request.json()
+      return HttpResponse.json({ id: 'trek-gotify', version: '2.0.0', trekRangeBypassed: { trekRange: '>=4.0.0', hostVersion: '3.3.0' } })
+    }))
+    withToast()
+    fireEvent.click(await screen.findByText('Discover'))
+
+    const btn = await screen.findByRole('button', { name: /^install anyway$/i })
+    expect(btn).toBeEnabled()
+    fireEvent.click(btn)
+
+    const dialog = await screen.findByRole('dialog', { name: /outside its supported trek versions/i })
+    expect(within(dialog).getByText(/no guarantee/i)).toBeInTheDocument()
+    expect(within(dialog).getByText(/corrupt trek data/i)).toBeInTheDocument()
+    expect(posted).toBeNull() // nothing sent until the admin accepts the risk
+
+    fireEvent.click(within(dialog).getByRole('button', { name: /^install anyway$/i }))
+    await waitFor(() => expect(posted).toEqual({ id: 'trek-gotify' }))
+  })
+
+  it('FE-PLG-BYPASS-003: cancelling the warning installs nothing', async () => {
+    let posted = false
+    bypassPanel([plugin({ id: 'something-else' })], incompatibleEntry())
+    server.use(http.post('*/api/admin/plugins/install', () => { posted = true; return HttpResponse.json({ id: 'trek-gotify', version: '2.0.0', trekRangeBypassed: null }) }))
+    withToast()
+    fireEvent.click(await screen.findByText('Discover'))
+    fireEvent.click(await screen.findByRole('button', { name: /^install anyway$/i }))
+
+    const dialog = await screen.findByRole('dialog', { name: /outside its supported trek versions/i })
+    fireEvent.click(within(dialog).getByRole('button', { name: /cancel/i }))
+    await waitFor(() => expect(screen.queryByRole('dialog', { name: /outside its supported trek versions/i })).not.toBeInTheDocument())
+    expect(posted).toBe(false)
+  })
+
+  it('FE-PLG-BYPASS-004: a sideload that landed outside its range is warned about afterwards', async () => {
+    bypassPanel([plugin()], null)
+    server.use(http.post('*/api/admin/plugins/upload', () =>
+      HttpResponse.json({ id: 'trek-new', version: '1.0.0', replaced: false, trekRangeBypassed: { trekRange: null, hostVersion: '3.3.0' } })))
+    const { container } = withToast()
+    await screen.findByText('Gotify')
+
+    await userEvent.upload(container.querySelector('input[type="file"]') as HTMLInputElement, new File(['zip'], 'plugin.zip', { type: 'application/zip' }))
+
+    const dialog = await screen.findByRole('dialog', { name: /installed outside its supported trek versions/i })
+    expect(within(dialog).getByText(/no guarantee/i)).toBeInTheDocument()
+    expect(within(dialog).getByText(/trek-new/)).toBeInTheDocument()
+  })
+
+  it('FE-PLG-BYPASS-005: a plugin running outside its range keeps a warning chip on its row', async () => {
+    bypassPanel([plugin({
+      dependencyStatus: 'ok', trekRange: '>=3.2.0 <4.0.0', hostVersion: '4.0.0',
+      trekRangeBypassed: { trekRange: '>=3.2.0 <4.0.0', hostVersion: '4.0.0' },
+    })], null)
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByText(/outside its trek range \(>=3\.2\.0 <4\.0\.0\)/i)).toBeInTheDocument()
+  })
+})
@@ -7,9 +7,12 @@ import {
  SlidersHorizontal, ArrowUpDown, CircleDot, MoreHorizontal, RotateCw, ArrowRight, Database, Users, LayoutDashboard,
  Radio, Luggage, Globe, Image, CalendarDays, Bell, Info, History, PauseCircle,
  Wallet, Puzzle, MapPin, ListChecks, Pencil, Tag, FileText, Route, Navigation, Clock, LocateFixed, Palette, Bot,
+  Loader2,
 } from 'lucide-react'
 import PluginIcon from '../shared/PluginIcon'
 import { adminApi } from '../../api/client'
+import { useInstanceSettings } from './useInstanceSettings'
+import { bypassChip, bypassOffer, useRangeBypass, type RangeWarning, type TrekRangeBypass } from './useRangeBypass'
 import { usePluginStore } from '../../store/pluginStore'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
@@ -49,6 +52,12 @@ interface PluginRow {
  operatorEgress?: boolean
  /** How many hosts the admin has added — 0 means the plugin can't reach anything yet. */
  egressHostCount?: number
+  /** How many `scope:'instance'` settings fields the plugin declares — gates the
+   * "Instance settings" menu item without a per-plugin fetch. */
+  instanceSettingsCount?: number
+  /** How many `scope:'instance'` actions the plugin declares — a plugin with actions
+   * but no settings fields still needs the menu item to run them. */
+  instanceActionsCount?: number
  dependencies?: PluginDependencies
  dependencyStatus?: DependencyStatus
  dependencyIssues?: DependencyIssues
@@ -56,6 +65,8 @@ interface PluginRow {
  trekRange?: string | null
  /** The TREK this server is running — the server does the semver, the client just shows it. */
  hostVersion?: string
+  /** Non-null while the plugin runs outside its declared range on the operator's say-so. */
+  trekRangeBypassed?: TrekRangeBypass | null
  /** The author's signature was verified and their key pinned at install. False means the
   * bytes matched the registry's sha256 and nothing more — one fewer guarantee. */
  signed?: boolean
@@ -251,6 +262,7 @@ function deriveCaps(perms: string[], caps: { widget?: { slot?: string }; tripPag
  if (perms.includes('hook:photo-provider')) out.push({ icon: Image, label: t('admin.plugins.cap.photos') })
  if (perms.includes('hook:calendar-source')) out.push({ icon: CalendarDays, label: t('admin.plugins.cap.calendar') })
  if (perms.includes('hook:place-detail-provider')) out.push({ icon: MapPin, label: t('admin.plugins.cap.placeDetails') })
+  if (perms.includes('hook:search-provider')) out.push({ icon: Search, label: t('admin.plugins.cap.search') })
  if (perms.includes('hook:trip-warning-provider')) out.push({ icon: AlertTriangle, label: t('admin.plugins.cap.warnings') })
  if (perms.includes('hook:map-layer-provider')) out.push({ icon: Route, label: t('admin.plugins.cap.mapLayers') })
  if (perms.includes('hook:route-provider')) out.push({ icon: Navigation, label: t('admin.plugins.cap.routing') })
@@ -265,7 +277,7 @@ function deriveCaps(perms: string[], caps: { widget?: { slot?: string }; tripPag
  return out
 }

-interface DepChip { icon: React.ComponentType<{ size?: number; className?: string }>; label: string; blocked: boolean }
+interface DepChip { icon: React.ComponentType<{ size?: number; className?: string }>; label: string; blocked: boolean; warn?: boolean }

 // A plugin's declared dependencies as chips — a required addon (amber when that
 // addon is disabled), a plugin dependency (amber when missing / version-mismatched),
@@ -283,6 +295,8 @@ function deriveDeps(p: PluginRow, t: T): DepChip[] {
      blocked: true,
    })
  }
+  const bypassed = bypassChip(p.trekRangeBypassed, t) // TREK_PLUGINS_IGNORE_TREK_RANGE: a warning, not a blocker
+  if (bypassed) out.push(bypassed)
  for (const a of p.dependencies?.requiredAddons ?? []) {
    out.push({ icon: Blocks, label: t('admin.plugins.cap.requiresAddon', { addon: a }), blocked: !!issues?.disabledAddons.includes(a) })
  }
@@ -302,11 +316,12 @@ function deriveDeps(p: PluginRow, t: T): DepChip[] {
 * has outrun this TREK but an older one still fits, offer THAT version rather than a dead
 * grey button. The plugin is perfectly usable, just not at its newest.
 */
-function installOffer(item: RegistryItem, t: T): { blocked: boolean; version?: string; label: string; title?: string } {
+function installOffer(item: RegistryItem, t: T, ignoreTrekRange = false): { blocked: boolean; version?: string; label: string; title?: string; warn?: RangeWarning } {
  if (item.compatible !== false) return { blocked: false, label: t('admin.plugins.install') }
  const title = item.trek
    ? t('admin.plugins.dep.trekIncompatible', { range: item.trek, host: item.hostVersion ?? '?' })
    : t('admin.plugins.dep.trekUnknown')
+  if (ignoreTrekRange) return bypassOffer(item, t, title) // TREK_PLUGINS_IGNORE_TREK_RANGE: "Install anyway"
  if (item.latestCompatible) {
    return { blocked: false, version: item.latestCompatible, label: t('admin.plugins.installCompatible', { version: item.latestCompatible }), title }
  }
@@ -390,6 +405,8 @@ export default function AdminPluginsPanel() {
  const toast = useToast()
  const [runtimeOn, setRuntimeOn] = useState(false)
  const [devLink, setDevLink] = useState(false) // dev-link enabled server-side (TREK_PLUGINS_DEV_LINK)
+  const [ignoreTrekRange, setIgnoreTrekRange] = useState(false) // TREK_PLUGINS_IGNORE_TREK_RANGE set server-side
+  const bypass = useRangeBypass() // its warning dialog/sheet state — shared with the other shell
  const [linkPath, setLinkPath] = useState('')
  const [plugins, setPlugins] = useState<PluginRow[]>([])
  const [loading, setLoading] = useState(true)
@@ -408,6 +425,8 @@ export default function AdminPluginsPanel() {
  const [detailFor, setDetailFor] = useState<RegistryItem | null>(null)
  const [errorsFor, setErrorsFor] = useState<{ id: string; rows: Array<{ ts: string; level: string; message: string }> } | null>(null)
  const [egressFor, setEgressFor] = useState<{ id: string; supported: boolean; hosts: string[] } | null>(null)
+  // The admin-owned scope:'instance' settings form — shared logic with the phone shell.
+  const settings = useInstanceSettings()
  const [egressDraft, setEgressDraft] = useState('')
  const [egressSaving, setEgressSaving] = useState(false)
  const [egressError, setEgressError] = useState('')
@@ -462,9 +481,10 @@ export default function AdminPluginsPanel() {
    // (e.g. the dashboard) reflect an activate/deactivate without a full reload (F5).
    void usePluginStore.getState().loadPlugins()
    adminApi.plugins()
-      .then((d: { enabled: boolean; devLink?: boolean; plugins: PluginRow[] }) => {
+      .then((d: { enabled: boolean; devLink?: boolean; ignoreTrekRange?: boolean; plugins: PluginRow[] }) => {
        setRuntimeOn(!!d.enabled)
        setDevLink(!!d.devLink)
+        setIgnoreTrekRange(!!d.ignoreTrekRange)
        setPlugins(d.plugins || [])
        if ((d.plugins || []).length) {
          adminApi.pluginBrowse().then(indexRegistry).catch(() => {})
@@ -530,6 +550,7 @@ export default function AdminPluginsPanel() {
      const res = await adminApi.pluginUpload(file)
      setView('installed')
      toast.success(t('admin.plugins.uploaded', { name: res.id }))
+      bypass.notice(res.id, res.trekRangeBypassed)
    } catch (e) {
      toast.error((e as { response?: { data?: { error?: string } } })?.response?.data?.error || t('admin.plugins.actionError'))
    } finally {
@@ -573,6 +594,11 @@ export default function AdminPluginsPanel() {
    }
  }

+  const openInstanceSettings = (p: { id: string; status: string }) => {
+    setMenu(null)
+    settings.open(p.id, p.status === 'active')
+  }
+
  const openErrors = (id: string) => {
    setMenu(null)
    adminApi.pluginErrors(id)
@@ -595,7 +621,11 @@ export default function AdminPluginsPanel() {
    const range = reg.trek ?? (reg.minTrekVersion ? `>=${reg.minTrekVersion}` : null)
    return range ? { version: reg.latest, range } : null
  }
-  const install = (id: string, version?: string) => act(id, () => adminApi.pluginInstall(id, version ? { version } : undefined), t('admin.plugins.installed'))
+  // `warn` is the pre-install confirm for an entry the registry already flagged as
+  // incompatible; an artifact whose OWN manifest turns out to be out of range (the index
+  // was only a pre-download filter) is caught by the marker on the response instead.
+  const install = (id: string, version?: string, warn?: RangeWarning) => bypass.guard(warn, () =>
+    act(id, () => adminApi.pluginInstall(id, version ? { version } : undefined).then(r => { if (!warn) bypass.notice(id, r?.trekRangeBypassed) }), t('admin.plugins.installed')))
  const restart = (id: string) => act(id, async () => { await adminApi.pluginDeactivate(id); await adminApi.pluginActivate(id) }, t('admin.plugins.restarted'))
  // Dev-link: register a plugin from a local built directory (dev only). Reuses the
  // same busy/toast/refresh loop as uploadPlugin; the server gates it.
@@ -608,6 +638,7 @@ export default function AdminPluginsPanel() {
      setView('installed')
      setLinkPath('')
      toast.success(t('admin.plugins.devLinkLinked', { id: res.id }))
+      bypass.notice(res.id, res.trekRangeBypassed)
    } catch (e) {
      toast.error((e as { response?: { data?: { error?: string } } })?.response?.data?.error || t('admin.plugins.actionError'))
    } finally {
@@ -667,9 +698,10 @@ export default function AdminPluginsPanel() {
    if (busy === parent.id) return
    setBusy(parent.id)
    adminApi.pluginInstall(depId, { constraint, withDependencies: true })
-      .then((r: { installed?: string[]; requiredAddons?: string[] }) => {
+      .then((r: { installed?: string[]; requiredAddons?: string[]; trekRangeBypassed?: TrekRangeBypass | null }) => {
        toast.success(t('admin.plugins.dep.downloaded', { id: depId }))
        if (r?.requiredAddons?.length) toast.error(t('admin.plugins.dep.addonDisabledToast', { addons: r.requiredAddons.join(', ') }))
+        bypass.notice(depId, r?.trekRangeBypassed)
        return attemptActivate(parent)
      })
      // The DEPENDENCY is what's being downloaded, so a signature refusal here is about the
@@ -687,9 +719,10 @@ export default function AdminPluginsPanel() {
  const runUpdate = (p: PluginRow, version?: string) => {
    setBusy(p.id); setMenu(null)
    return adminApi.pluginUpdate(p.id, version)
-      .then((r: { version: string; activated: boolean; newPermissions: string[]; newEgress: string[] }) => {
+      .then((r: { version: string; activated: boolean; newPermissions: string[]; newEgress: string[]; trekRangeBypassed?: TrekRangeBypass | null }) => {
        if (r.activated || (r.newPermissions.length === 0 && r.newEgress.length === 0)) toast.success(t('admin.plugins.updated'))
        else setConsentQueue(qq => [...qq, { plugin: p, version: r.version, newPermissions: r.newPermissions, newEgress: r.newEgress }])
+        bypass.notice(p.name, r.trekRangeBypassed)
      })
      .catch(e => {
        const { error, code } = errBody(e)
@@ -813,11 +846,19 @@ export default function AdminPluginsPanel() {
            <h2 className="text-lg font-semibold tracking-tight text-content">{t('admin.plugins.title')}</h2>
            <p className="text-xs mt-1 text-content-muted max-w-xl">{t('admin.plugins.subtitle')}</p>
          </div>
-          {runtimeOn && (
-            <span className="inline-flex items-center gap-2 shrink-0 text-[11px] font-semibold text-success bg-success-soft px-2.5 py-1.5 rounded-full">
-              <span className="w-1.5 h-1.5 rounded-full bg-success" /> {t('admin.plugins.runtimeOn')}
-            </span>
-          )}
+          <div className="flex items-center gap-2 shrink-0">
+            {runtimeOn && ignoreTrekRange && (
+              <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-warning bg-warning-soft px-2.5 py-1.5 rounded-full"
+                title={t('admin.plugins.rangeBypass.pillHint')}>
+                <AlertTriangle size={12} /> {t('admin.plugins.rangeBypass.pill')}
+              </span>
+            )}
+            {runtimeOn && (
+              <span className="inline-flex items-center gap-2 text-[11px] font-semibold text-success bg-success-soft px-2.5 py-1.5 rounded-full">
+                <span className="w-1.5 h-1.5 rounded-full bg-success" /> {t('admin.plugins.runtimeOn')}
+              </span>
+            )}
+          </div>
        </div>
      </div>

@@ -927,7 +968,7 @@ export default function AdminPluginsPanel() {
        ) : error ? (
          <div className="py-14 text-center text-sm text-danger">{t('admin.plugins.loadError')}</div>
        ) : !runtimeOn ? null : view === 'discover' ? (
-          <RegistryGrid items={shownRegistry} busy={busy} t={t} installedIds={installedIds}
+          <RegistryGrid items={shownRegistry} busy={busy} t={t} installedIds={installedIds} ignoreTrekRange={ignoreTrekRange}
            onInstall={install} onOpenDetail={setDetailFor} filtered={anyFilter} />
        ) : plugins.length === 0 ? (
          <EmptyState t={t} onDiscover={openDiscover} />
@@ -962,6 +1003,7 @@ export default function AdminPluginsPanel() {
                  code: p.updateBlock!.code, detail: p.updateBlock!.detail,
                })}
                onErrors={() => openErrors(p.id)} onEgress={() => openEgress(p.id)}
+                onSettings={() => openInstanceSettings(p)}
                onUninstall={() => { setMenu(null); setConfirmUninstall(p) }} />
            ))}
          </div>
@@ -972,10 +1014,12 @@ export default function AdminPluginsPanel() {

      {/* Registry detail dialog */}
      {detailFor && (
-        <PluginDetailModal item={detailFor} t={t} locale={locale} busy={busy}
+        <PluginDetailModal item={detailFor} t={t} locale={locale} busy={busy} ignoreTrekRange={ignoreTrekRange}
          installed={installedIds.has(detailFor.id)} onInstall={install} onClose={() => setDetailFor(null)} />
      )}

+      {bypass.copy && <RangeBypassDialog copy={bypass.copy} t={t} onConfirm={bypass.confirm} onClose={bypass.dismiss} />}
+
      {/* Error-log modal */}
      {errorsFor && (
        <div role="presentation" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={() => setErrorsFor(null)}>
@@ -1001,12 +1045,12 @@ export default function AdminPluginsPanel() {
      {/* Operator-supplied egress hosts */}
      {egressFor && (
        <div role="presentation" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={() => setEgressFor(null)}>
-          <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-lg shadow-modal" onClick={e => e.stopPropagation()}>
-            <div className="px-5 py-3.5 border-b border-edge-secondary flex items-center justify-between">
+          <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-lg max-h-[88vh] flex flex-col shadow-modal" onClick={e => e.stopPropagation()}>
+            <div className="shrink-0 px-5 py-3.5 border-b border-edge-secondary flex items-center justify-between">
              <span className="text-sm font-semibold text-content flex items-center gap-2"><Globe size={15} /> {egressFor.id} — {t('admin.plugins.allowedHosts')}</span>
              <button type="button" onClick={() => setEgressFor(null)} className="text-content-faint hover:text-content"><X size={16} /></button>
            </div>
-            <div className="p-5 space-y-3">
+            <div className="p-5 space-y-3 min-h-0 flex-1 overflow-y-auto">
              {!egressFor.supported ? (
                <p className="text-sm text-content-faint">{t('admin.plugins.allowedHosts.unsupported')}</p>
              ) : (
@@ -1048,6 +1092,110 @@ export default function AdminPluginsPanel() {
        </div>
      )}

+      {/* Instance-wide settings (the admin-owned scope:'instance' fields) */}
+      {settings.form && (
+        <div role="presentation" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={settings.close}>
+          <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-lg max-h-[80vh] flex flex-col shadow-modal" onClick={e => e.stopPropagation()}>
+            <div className="px-5 py-3.5 border-b border-edge-secondary flex items-center justify-between">
+              <span className="text-sm font-semibold text-content flex items-center gap-2"><SlidersHorizontal size={15} /> {settings.form.id} — {t('admin.plugins.instanceSettings')}</span>
+              <button type="button" aria-label={t('common.close')} onClick={settings.close} className="text-content-faint hover:text-content"><X size={16} /></button>
+            </div>
+            <div className="p-5 space-y-4 overflow-y-auto">
+              {settings.form.fields.map(f => (
+                <label key={f.key} className="block">
+                  <span className="block text-sm font-medium text-content-secondary mb-1">
+                    {f.label || f.key}{f.required && <span className="text-danger"> *</span>}
+                  </span>
+                  {f.input_type === 'checkbox' ? (
+                    <input
+                      type="checkbox"
+                      checked={settings.form.values[f.key] === true}
+                      onChange={e => settings.setValue(f.key, e.target.checked)}
+                      className="h-4 w-4 rounded border-edge"
+                    />
+                  ) : f.input_type === 'select' && f.options ? (
+                    <select
+                      value={String(settings.form.values[f.key] ?? '')}
+                      onChange={e => settings.setValue(f.key, e.target.value)}
+                      className="w-full rounded-lg border border-edge bg-surface px-3 py-2 text-sm text-content"
+                    >
+                      <option value="">—</option>
+                      {f.options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
+                    </select>
+                  ) : (
+                    <input
+                      type={f.secret ? 'password' : (f.input_type === 'number' ? 'number' : 'text')}
+                      value={String(settings.form.values[f.key] ?? '')}
+                      placeholder={f.placeholder || ''}
+                      autoComplete={f.secret ? 'new-password' : 'off'}
+                      onChange={e => settings.setValue(f.key, e.target.value)}
+                      className="w-full rounded-lg border border-edge bg-surface px-3 py-2 text-sm text-content"
+                    />
+                  )}
+                  {f.hint && <span className="block text-xs text-content-muted mt-1">{f.hint}</span>}
+                </label>
+              ))}
+              {(() => {
+                const form = settings.form
+                if (!form || form.actions.length === 0) return null
+                return (
+                  <div className="border-t border-edge-secondary pt-4">
+                    <span className="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">
+                      {t('admin.plugins.actions')}
+                    </span>
+                    {!form.active && (
+                      <p className="text-xs text-content-muted mb-2">{t('admin.plugins.actions.inactive')}</p>
+                    )}
+                    <div className="flex flex-col gap-2">
+                      {form.actions.map(a => {
+                        const res = settings.actionResult[a.key]
+                        return (
+                          <div key={a.key} className="flex flex-wrap items-center gap-2">
+                            <button type="button"
+                              onClick={() => settings.runAction(a)}
+                              disabled={!form.active || settings.runningAction !== null || settings.saving}
+                              className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-semibold disabled:opacity-60 ${
+                                a.danger ? 'border-danger text-danger' : 'border-edge text-content'
+                              }`}
+                            >
+                              {settings.runningAction === a.key && <Loader2 className="w-4 h-4 animate-spin" />}
+                              {a.label}
+                            </button>
+                            {a.hint && <span className="text-xs text-content-muted">{a.hint}</span>}
+                            {res && (
+                              <span aria-live="polite" className={`text-xs font-medium ${res.ok ? 'text-success' : 'text-danger'}`}>
+                                {res.message || (res.ok ? t('common.success') : t('common.error'))}
+                              </span>
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )
+              })()}
+              {settings.error && <p className="text-xs text-danger">{settings.error}</p>}
+            </div>
+            <div className="px-5 py-3.5 border-t border-edge-secondary flex justify-end">
+              <button type="button"
+                disabled={settings.saving || settings.runningAction !== null}
+                onClick={() => void settings.save()}
+                className="rounded-lg bg-accent px-4 py-2 text-sm font-semibold text-accent-text disabled:opacity-60"
+              >{t('common.save')}</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <ConfirmDialog
+        isOpen={settings.pendingAction !== null}
+        onClose={settings.cancelPendingAction}
+        onConfirm={settings.confirmPendingAction}
+        title={settings.pendingAction?.label ?? ''}
+        message={t('admin.plugins.actions.confirm')}
+        confirmLabel={t('common.confirm')}
+      />
+
      <ConfirmDialog
        isOpen={!!confirmUninstall}
        onClose={() => setConfirmUninstall(null)}
@@ -1185,11 +1333,11 @@ function EmptyState({ t, onDiscover }: { t: T; onDiscover: () => void }) {
  )
 }

-function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, newerIncompatible, blocked, onToggle, onUpdate, onRestart, onChangeVersion, onResume, onReviewBlock, onErrors, onEgress, onUninstall }: {
+function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, newerIncompatible, blocked, onToggle, onUpdate, onRestart, onChangeVersion, onResume, onReviewBlock, onErrors, onEgress, onSettings, onUninstall }: {
  p: PluginRow; t: T; busy: string | null; menu: string | null; setMenu: (v: string | null) => void
  hasUpdate: boolean; latestVer?: string; newerIncompatible: { version: string; range: string } | null; blocked: boolean
  onToggle: () => void; onUpdate: () => void; onRestart: () => void; onChangeVersion: () => void; onResume: () => void; onReviewBlock: () => void
-  onErrors: () => void; onEgress: () => void; onUninstall: () => void
+  onErrors: () => void; onEgress: () => void; onSettings: () => void; onUninstall: () => void
 }) {
  const caps = deriveCaps(parseJson<string[]>(p.permissions, []), parseJson<{ widget?: { slot?: string } }>(p.capabilities, {}), t)
  const deps = deriveDeps(p, t)
@@ -1304,8 +1452,8 @@ function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, newerIn
          <div className="hidden sm:flex items-center gap-1.5 flex-wrap mt-1.5">
            {deps.map((d, i) => (
              <span key={i} className={`inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-[3px] rounded-md border ${
-                d.blocked ? 'text-warning border-warning/30 bg-warning-soft' : 'text-content-secondary border-edge-secondary bg-surface-tertiary'}`}>
-                <d.icon size={12} className={d.blocked ? 'text-warning' : 'text-content-muted'} />{d.label}
+                d.blocked || d.warn ? 'text-warning border-warning/30 bg-warning-soft' : 'text-content-secondary border-edge-secondary bg-surface-tertiary'}`}>
+                <d.icon size={12} className={d.blocked || d.warn ? 'text-warning' : 'text-content-muted'} />{d.label}
              </span>
            ))}
          </div>
@@ -1334,8 +1482,18 @@ function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, newerIn
              {p.enabled === 1 && (
                <MenuItem icon={<RotateCw size={14} />} label={t('admin.plugins.restart')} onClick={onRestart} />
              )}
+              {/* A plugin gets the item if it declares scope:'instance' fields OR actions —
+                  an action-only plugin still needs the dialog to run its buttons. */}
+              {((p.instanceSettingsCount ?? 0) > 0 || (p.instanceActionsCount ?? 0) > 0) && (
+                <MenuItem icon={<SlidersHorizontal size={14} />} label={t('admin.plugins.instanceSettings')} onClick={onSettings} />
+              )}
              <MenuItem icon={<Bug size={14} />} label={t('admin.plugins.viewErrors')} onClick={onErrors} />
-              <MenuItem icon={<Globe size={14} />} label={t('admin.plugins.allowedHosts')} onClick={onEgress} />
+              {/* Only a plugin that DECLARED operatorEgress gets the item — an admin must
+                  never be invited to widen egress for a plugin that didn't ask for it
+                  (same rule the row's egress chip follows). */}
+              {p.operatorEgress && (
+                <MenuItem icon={<Globe size={14} />} label={t('admin.plugins.allowedHosts')} onClick={onEgress} />
+              )}
              {/* Registry plugins only — a sideload/dev-link has no registry versions to pick from. */}
              {isRegistrySourced(p.source_repo) && (
                <MenuItem icon={<History size={14} />} label={t('admin.plugins.changeVersion')} onClick={onChangeVersion} />
@@ -1405,14 +1563,15 @@ function Screenshot({ url, className, iconSize = 28 }: { url: string | null; cla
  )
 }

-function RegistryGrid({ items, onInstall, onOpenDetail, busy, t, installedIds, filtered }: {
+function RegistryGrid({ items, onInstall, onOpenDetail, busy, t, installedIds, filtered, ignoreTrekRange }: {
  items: RegistryItem[] | null
-  onInstall: (id: string, version?: string) => void
+  onInstall: (id: string, version?: string, warn?: RangeWarning) => void
  onOpenDetail: (item: RegistryItem) => void
  busy: string | null
  t: T
  installedIds: Set<string>
  filtered: boolean
+  ignoreTrekRange: boolean
 }) {
  if (!items) return <div className="py-14 text-center text-sm text-content-faint">{t('common.loading')}</div>
  if (items.length === 0) return (
@@ -1425,9 +1584,13 @@ function RegistryGrid({ items, onInstall, onOpenDetail, busy, t, installedIds, f
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5 sm:gap-4 px-4 sm:px-6 pb-5 pt-1">
      {items.map(item => {
        const installed = installedIds.has(item.id)
-        const offer = installOffer(item, t)
+        const offer = installOffer(item, t, ignoreTrekRange)
        return (
          <div key={item.id} role="button" tabIndex={0} onClick={() => onOpenDetail(item)}
+            // No press-scale on the card: shrinking it mid-click slides the Install
+            // button out from under the pointer, so the click retargets onto the card
+            // and opens the detail modal instead of installing (#2158).
+            data-no-press
            onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenDetail(item) } }}
            className="group border border-edge rounded-2xl bg-surface-card overflow-hidden flex flex-col cursor-pointer hover:-translate-y-0.5 hover:shadow-elevated hover:border-edge-faint transition-all duration-150">
            <div className="relative">
@@ -1456,7 +1619,7 @@ function RegistryGrid({ items, onInstall, onOpenDetail, busy, t, installedIds, f
                    <Download size={11} /> {formatCompactCount(item.downloadCount)}
                  </span>
                )}
-                <button type="button" onClick={e => { e.stopPropagation(); onInstall(item.id, offer.version) }}
+                <button type="button" onClick={e => { e.stopPropagation(); onInstall(item.id, offer.version, offer.warn) }}
                  disabled={busy === item.id || installed || offer.blocked}
                  title={installed ? undefined : offer.title}
                  className="ml-auto text-xs font-semibold px-3.5 py-1.5 rounded-lg bg-accent text-accent-text hover:bg-accent-hover disabled:opacity-50 disabled:bg-surface-tertiary disabled:text-content-faint transition-colors">
@@ -1486,9 +1649,54 @@ function PermLabel({ perm, t }: { perm: string; t: T }) {
    : <code className="font-mono text-[11px] bg-surface-tertiary px-1.5 py-0.5 rounded">{perm}</code>
 }

-function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, locale }: {
-  item: RegistryItem; installed: boolean; busy: string | null
-  onInstall: (id: string, version?: string) => void; onClose: () => void; t: T; locale: string
+/**
+ * The TREK_PLUGINS_IGNORE_TREK_RANGE warning (copy and modes from useRangeBypass). Its own
+ * component rather than ConfirmDialog because the notice mode has no cancel button.
+ */
+function RangeBypassDialog({ copy: { title, body, confirm }, onConfirm, onClose, t }: {
+  copy: { title: string; body: string; confirm: boolean }; onConfirm: () => void; onClose: () => void; t: T
+}) {
+  return createPortal(
+    <div role="presentation" className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
+      <div role="dialog" aria-modal="true" aria-label={title}
+        className="bg-surface-card border border-edge rounded-2xl w-full max-w-md p-6 shadow-modal" onClick={e => e.stopPropagation()}>
+        <div className="flex items-start gap-4">
+          <div className="shrink-0 w-10 h-10 rounded-full bg-warning-soft grid place-items-center">
+            <AlertTriangle size={20} className="text-warning" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-base font-semibold text-content">{title}</h3>
+            <p className="mt-1.5 text-sm text-content-secondary leading-relaxed">{body}</p>
+          </div>
+        </div>
+        <div className="flex justify-end gap-3 mt-6">
+          {confirm ? (
+            <>
+              <button type="button" onClick={onClose}
+                className="px-4 py-2 text-sm font-medium rounded-lg text-content-secondary border border-edge-secondary transition-colors">
+                {t('common.cancel')}
+              </button>
+              <button type="button" onClick={onConfirm}
+                className="px-4 py-2 text-sm font-semibold rounded-lg bg-warning text-white hover:opacity-90 transition-opacity">
+                {t('admin.plugins.installAnyway')}
+              </button>
+            </>
+          ) : (
+            <button type="button" onClick={onClose}
+              className="px-4 py-2 text-sm font-semibold rounded-lg bg-accent text-accent-text hover:bg-accent-hover transition-colors">
+              {t('common.ok')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, locale, ignoreTrekRange }: {
+  item: RegistryItem; installed: boolean; busy: string | null; ignoreTrekRange: boolean
+  onInstall: (id: string, version?: string, warn?: RangeWarning) => void; onClose: () => void; t: T; locale: string
 }) {
  const [detail, setDetail] = useState<RegistryDetail | null>(null)
  const [failed, setFailed] = useState(false)
@@ -1511,7 +1719,7 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
  const sizeKb = detail?.size ? Math.max(1, Math.round(detail.size / 1024)) : null
  // The detail fetch carries the same compat verdict as the browse list; prefer it once
  // it lands (it is keyed to the same entry) and fall back to the grid item until then.
-  const offer = installOffer(detail ?? item, t)
+  const offer = installOffer(detail ?? item, t, ignoreTrekRange)

  return (
    <div role="presentation" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
@@ -1533,7 +1741,7 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
            </div>
            <p className="text-[12.5px] text-content-faint mt-0.5">{item.author}{item.latest ? ` · v${item.latest}` : ''}</p>
          </div>
-          <button type="button" onClick={() => onInstall(item.id, offer.version)}
+          <button type="button" onClick={() => onInstall(item.id, offer.version, offer.warn)}
            disabled={busy === item.id || installed || offer.blocked}
            title={installed ? undefined : offer.title}
            className="self-end text-[13px] font-semibold px-3 sm:px-4 py-2 rounded-lg bg-accent text-accent-text hover:bg-accent-hover disabled:opacity-50 disabled:bg-surface-tertiary disabled:text-content-faint transition-colors shrink-0">
@@ -1793,15 +2001,15 @@ function SignatureBlockDialog({ data, entry, busy, t, onRetrust, onClose }: {

  return (
    <div role="presentation" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
-      <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-md shadow-modal overflow-hidden" onClick={e => e.stopPropagation()}>
-        <div className="px-5 py-4 border-b border-edge-secondary flex items-start gap-3">
+      <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-md max-h-[88vh] flex flex-col shadow-modal overflow-hidden" onClick={e => e.stopPropagation()}>
+        <div className="shrink-0 px-5 py-4 border-b border-edge-secondary flex items-start gap-3">
          <div className="w-9 h-9 rounded-lg bg-warning-soft grid place-items-center shrink-0"><ShieldAlert size={18} className="text-warning" /></div>
          <div>
            <h3 className="text-sm font-semibold text-content">{t('admin.plugins.sig.title', { name: data.subject.name })}</h3>
            <p className="text-xs text-content-muted mt-1">{t(bodyKey as never)}</p>
          </div>
        </div>
-        <div className="p-5 space-y-4">
+        <div className="p-5 space-y-4 min-h-0 flex-1 overflow-y-auto">
          {/* Fingerprints, not full keys: these exist to be COMPARED by a human — read the
              new one back to the author over the phone. The full key travels in the request. */}
          {canRetrust && (
@@ -1815,7 +2023,7 @@ function SignatureBlockDialog({ data, entry, busy, t, onRetrust, onClose }: {
            <p className="text-xs text-content-faint font-mono break-all bg-surface-tertiary rounded-lg px-3 py-2">{data.detail}</p>
          )}
        </div>
-        <div className="px-5 py-3.5 border-t border-edge-secondary bg-surface-secondary flex items-center justify-end gap-2">
+        <div className="shrink-0 px-5 py-3.5 border-t border-edge-secondary bg-surface-secondary flex items-center justify-end gap-2">
          <button type="button" onClick={onClose}
            className="text-xs font-medium px-3.5 py-2 rounded-lg border border-edge text-content-muted hover:text-content hover:bg-surface-tertiary transition-colors">
            {offerRetrust ? t('admin.plugins.sig.cancel') : t('common.close')}
@@ -1857,15 +2065,15 @@ function UpdateConsentDialog({ data, unsigned, t, onApprove, onLater }: {
 }) {
  return (
    <div role="presentation" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onLater}>
-      <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-md shadow-modal overflow-hidden" onClick={e => e.stopPropagation()}>
-        <div className="px-5 py-4 border-b border-edge-secondary flex items-start gap-3">
+      <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-md max-h-[88vh] flex flex-col shadow-modal overflow-hidden" onClick={e => e.stopPropagation()}>
+        <div className="shrink-0 px-5 py-4 border-b border-edge-secondary flex items-start gap-3">
          <div className="w-9 h-9 rounded-lg bg-warning-soft grid place-items-center shrink-0"><ShieldCheck size={18} className="text-warning" /></div>
          <div>
            <h3 className="text-sm font-semibold text-content">{t('admin.plugins.updateConsentTitle')}</h3>
            <p className="text-xs text-content-muted mt-1">{t('admin.plugins.updateConsentBody', { name: data.plugin.name, version: data.version })}</p>
          </div>
        </div>
-        <div className="p-5 space-y-4">
+        <div className="p-5 space-y-4 min-h-0 flex-1 overflow-y-auto">
          {/* The admin is about to widen what this code may do — so say, right here, that
              nothing ties this code to its author. One line, no checkbox, no extra click:
              this informs, it does not block. */}
@@ -1894,7 +2102,7 @@ function UpdateConsentDialog({ data, unsigned, t, onApprove, onLater }: {
            </div>
          )}
        </div>
-        <div className="px-5 py-3.5 border-t border-edge-secondary bg-surface-secondary flex items-center justify-end gap-2">
+        <div className="shrink-0 px-5 py-3.5 border-t border-edge-secondary bg-surface-secondary flex items-center justify-end gap-2">
          <button type="button" onClick={onLater} className="text-xs font-medium px-3.5 py-2 rounded-lg border border-edge text-content-muted hover:text-content hover:bg-surface-tertiary transition-colors">{t('admin.plugins.updateLater')}</button>
          <button type="button" onClick={onApprove} className="text-xs font-semibold px-4 py-2 rounded-lg bg-accent text-accent-text hover:bg-accent-hover transition-colors">{t('admin.plugins.updateApprove')}</button>
        </div>
@@ -1917,15 +2125,15 @@ function DependencyResolveDialog({ data, t, busy, installedIds, onDownload, onCl
  ]
  return (
    <div role="presentation" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
-      <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-md shadow-modal overflow-hidden" onClick={e => e.stopPropagation()}>
-        <div className="px-5 py-4 border-b border-edge-secondary flex items-start gap-3">
+      <div role="presentation" className="bg-surface-card border border-edge rounded-2xl w-full max-w-md max-h-[88vh] flex flex-col shadow-modal overflow-hidden" onClick={e => e.stopPropagation()}>
+        <div className="shrink-0 px-5 py-4 border-b border-edge-secondary flex items-start gap-3">
          <div className="w-9 h-9 rounded-lg bg-warning-soft grid place-items-center shrink-0"><Puzzle size={18} className="text-warning" /></div>
          <div>
            <h3 className="text-sm font-semibold text-content">{t('admin.plugins.dep.resolveTitle')}</h3>
            <p className="text-xs text-content-muted mt-1">{t('admin.plugins.dep.resolveBody', { name: data.plugin.name })}</p>
          </div>
        </div>
-        <div className="p-5 space-y-2.5">
+        <div className="p-5 space-y-2.5 min-h-0 flex-1 overflow-y-auto">
          {rows.map(r => (
            <div key={r.id} className="flex items-center gap-3 p-3 rounded-xl border border-edge-secondary bg-surface-tertiary">
              <div className="min-w-0 flex-1">
@@ -1946,7 +2154,7 @@ function DependencyResolveDialog({ data, t, busy, installedIds, onDownload, onCl
            <p className="text-[11.5px] text-content-faint pt-1">{t('admin.plugins.dep.resolveHint')}</p>
          )}
        </div>
-        <div className="px-5 py-3.5 border-t border-edge-secondary bg-surface-secondary flex items-center justify-end">
+        <div className="shrink-0 px-5 py-3.5 border-t border-edge-secondary bg-surface-secondary flex items-center justify-end">
          <button type="button" onClick={onClose} className="text-xs font-medium px-3.5 py-2 rounded-lg border border-edge text-content-muted hover:text-content hover:bg-surface-tertiary transition-colors">{t('common.cancel')}</button>
        </div>
      </div>
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { Settings2 } from 'lucide-react'
+import { Map as MapIcon, Settings2 } from 'lucide-react'
 import { adminApi } from '../../api/client'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
@@ -43,6 +43,8 @@ type Defaults = {
  blur_booking_codes?: boolean
  map_tile_url?: string
  carto_api_key?: string
+  routing_base_url?: string
+  valhalla_base_url?: string
  map_provider?: string
  mapbox_access_token?: string
  mapbox_style?: string
@@ -119,6 +121,8 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
  const managed = useAuthStore((s) => s.managed)
  const [mapboxToken, setMapboxToken] = useState('')
  const [cartoKey, setCartoKey] = useState('')
+  const [routingBase, setRoutingBase] = useState('')
+  const [valhallaBase, setValhallaBase] = useState('')
  const [mapboxStyle, setMapboxStyle] = useState('')

  useEffect(() => {
@@ -128,6 +132,8 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
      setMapTileUrl(normalizeTileUrl(data.map_tile_url || ''))
      setMapboxToken(data.mapbox_access_token || '')
      setCartoKey(data.carto_api_key || '')
+      setRoutingBase(data.routing_base_url || '')
+      setValhallaBase(data.valhalla_base_url || '')
      setMapboxStyle(provider === 'leaflet' ? (data.mapbox_style || '') : styleForProvider(provider, provider === 'maplibre-gl' ? data.maplibre_style : data.mapbox_style))
      setLoaded(true)
    }).catch(() => setLoaded(true))
@@ -150,6 +156,8 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
      if (key === 'map_tile_url') setMapTileUrl('')
      if (key === 'mapbox_access_token') setMapboxToken('')
      if (key === 'carto_api_key') setCartoKey('')
+      if (key === 'routing_base_url') setRoutingBase('')
+      if (key === 'valhalla_base_url') setValhallaBase('')
      if (key === 'mapbox_style' || key === 'maplibre_style') {
        const provider = normalizeProvider(defaults.map_provider)
        setMapboxStyle(provider === 'leaflet' ? '' : defaultStyleForProvider(provider))
@@ -219,11 +227,23 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
  }

  return (
-    <Section title={t('admin.defaultSettings.title')} icon={Settings2}>
-      <p className="text-sm text-content-faint" style={{ marginTop: -8 }}>
+    <div>
+      <p className="text-sm text-content-faint mb-4">
        {t('admin.defaultSettings.description')}
      </p>

+      {/* Two columns from xl up, the same idea as the Settings tab: as one flat list
+          the map fields sat a screen below the units while the right half of the page
+          stayed empty. Grouped by subject rather than by height — what a user ends up
+          seeing on the left, everything that configures the map on the right.
+          The columns are deliberately uneven: the left one never needs more than the
+          widest option row, while the right one holds four text fields whose values
+          are 60-character tile URLs. Only the column gap is set, because Section
+          carries its own bottom margin and a row gap would double it once the grid
+          collapses. Two cards can sit straight in the grid; a third would need the
+          explicit per-column stacks the Settings tab uses, or it leaves a hole. */}
+      <div className="grid grid-cols-1 gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.35fr)] xl:items-start">
+      <Section title={t('admin.defaultSettings.title')} icon={Settings2}>
      {/* Color Mode */}
      <OptionRow label={<>{t('settings.colorMode')} <ResetButton field="dark_mode" /></>}>
        {([
@@ -321,7 +341,9 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
          </OptionButton>
        ))}
      </OptionRow>
+      </Section>

+      <Section title={t('settings.map')} icon={MapIcon}>
      {/* Map Tile URL */}
      <div>
        <label className="block text-sm font-medium mb-1.5 text-content-secondary">
@@ -365,6 +387,54 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
          <p className="text-xs mt-1 text-content-faint">{t('admin.defaultSettings.cartoKeyHint')}</p>
        </div>
        )}
+        {/* Instance configuration, not a taste, which is why it sits here rather
+            than in a user's own Map settings. The origin has to appear in the CSP
+            `connect-src` the server emits at boot, and that list is built from
+            this default — a value on a personal settings row is read by the route
+            calculator and then refused by the browser, so the whole app stops
+            routing with no error it could report. The write route refuses one
+            from a non-admin for the same reason. */}
+        {!managed && (
+        <div style={{ marginTop: 14 }}>
+          <label className="block text-sm font-medium mb-1.5 text-content-secondary">
+            {t('settings.routingBase')}
+            <ResetButton field="routing_base_url" />
+          </label>
+          <input
+            type="text"
+            value={routingBase}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRoutingBase(e.target.value)}
+            onBlur={() => save({ routing_base_url: routingBase.trim() })}
+            placeholder="https://osrm.example.org"
+            spellCheck={false}
+            autoComplete="off"
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+          />
+          <p className="text-xs mt-1 text-content-faint">{t('settings.routingBaseHint')}</p>
+        </div>
+        )}
+        {/* The second engine, next to the first because it is the same kind of decision
+            and carries the same restart caveat. Only ever asked to leave a road class
+            out of one leg, which is the one question the OSRM above refuses. */}
+        {!managed && (
+        <div style={{ marginTop: 14 }}>
+          <label className="block text-sm font-medium mb-1.5 text-content-secondary">
+            {t('settings.valhallaBase')}
+            <ResetButton field="valhalla_base_url" />
+          </label>
+          <input
+            type="text"
+            value={valhallaBase}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValhallaBase(e.target.value)}
+            onBlur={() => save({ valhalla_base_url: valhallaBase.trim() })}
+            placeholder="https://valhalla.example.org"
+            spellCheck={false}
+            autoComplete="off"
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+          />
+          <p className="text-xs mt-1 text-content-faint">{t('settings.valhallaBaseHint')}</p>
+        </div>
+        )}
        <div style={{ position: 'relative', height: '200px', width: '100%', marginTop: 12 }}>
          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
          {React.createElement(MapView as any, {
@@ -490,6 +560,8 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
          </div>
        )}
      </div>
-    </Section>
+      </Section>
+      </div>
+    </div>
  )
 }
@@ -0,0 +1,152 @@
+// FE-COMP-PLUGINS-ACT-001 to -006 — the shared instance-settings hook, action side.
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { adminApi } from '../../api/client'
+import { useInstanceSettings } from './useInstanceSettings'
+
+vi.mock('../shared/Toast', () => ({ useToast: () => ({ success: vi.fn(), error: vi.fn() }) }))
+vi.mock('../../i18n', () => ({ useTranslation: () => ({ t: (k: string) => k }) }))
+
+const FIELDS = [{ key: 'apiUrl', label: 'API URL', input_type: 'text', required: false, secret: false }]
+const PURGE = { key: 'purge', label: 'Purge', danger: true, scope: 'instance' as const }
+const PING = { key: 'ping', label: 'Ping', danger: false, scope: 'instance' as const }
+
+beforeEach(() => {
+  vi.spyOn(adminApi, 'pluginConfig').mockResolvedValue({ fields: FIELDS, config: { apiUrl: 'https://a.example' }, actions: [PING, PURGE] })
+  vi.spyOn(adminApi, 'pluginSaveConfig').mockResolvedValue({ config: { apiUrl: 'https://b.example' }, restarted: false })
+  vi.spyOn(adminApi, 'runPluginAction').mockResolvedValue({ ok: true, message: 'pong' })
+})
+afterEach(() => vi.restoreAllMocks())
+
+async function opened(active = true) {
+  const hook = renderHook(() => useInstanceSettings())
+  act(() => hook.result.current.open('p', active))
+  await waitFor(() => expect(hook.result.current.form).not.toBeNull())
+  return hook
+}
+
+/** A promise this test controls the settling of, to pin down state mid-flight. */
+function deferred<T>() {
+  let resolve!: (v: T) => void
+  const promise = new Promise<T>(r => { resolve = r })
+  return { promise, resolve }
+}
+
+describe('useInstanceSettings — actions', () => {
+  it('FE-COMP-PLUGINS-ACT-001: open carries the instance actions, the active flag, and a clean form', async () => {
+    const { result } = await opened()
+    expect(result.current.form?.actions).toEqual([PING, PURGE])
+    expect(result.current.form?.active).toBe(true)
+    expect(result.current.form?.dirty).toBe(false)
+  })
+
+  it('FE-COMP-PLUGINS-ACT-002: a clean form runs the action straight away and keeps the dialog open', async () => {
+    const { result } = await opened()
+    act(() => result.current.runAction(PING))
+    await waitFor(() => expect(result.current.actionResult.ping).toEqual({ ok: true, message: 'pong' }))
+    expect(adminApi.pluginSaveConfig).not.toHaveBeenCalled()
+    expect(adminApi.runPluginAction).toHaveBeenCalledWith('p', 'ping')
+    expect(result.current.form).not.toBeNull()
+    expect(result.current.runningAction).toBeNull()
+  })
+
+  it('FE-COMP-PLUGINS-ACT-003: a dirty form saves first, then runs, and is clean afterwards', async () => {
+    const { result } = await opened()
+    act(() => result.current.setValue('apiUrl', 'https://b.example'))
+    expect(result.current.form?.dirty).toBe(true)
+    act(() => result.current.runAction(PING))
+    await waitFor(() => expect(result.current.actionResult.ping).toBeDefined())
+    expect(adminApi.pluginSaveConfig).toHaveBeenCalledWith('p', { apiUrl: 'https://b.example' })
+    expect(vi.mocked(adminApi.pluginSaveConfig).mock.invocationCallOrder[0]).toBeLessThan(vi.mocked(adminApi.runPluginAction).mock.invocationCallOrder[0])
+    expect(result.current.form?.dirty).toBe(false)
+    expect(result.current.form).not.toBeNull()
+  })
+
+  it('FE-COMP-PLUGINS-ACT-004: a save failure surfaces in error and the action never runs', async () => {
+    vi.mocked(adminApi.pluginSaveConfig).mockRejectedValue({ response: { data: { error: 'nope' } } })
+    const { result } = await opened()
+    act(() => result.current.setValue('apiUrl', 'x'))
+    act(() => result.current.runAction(PING))
+    await waitFor(() => expect(result.current.error).toBe('nope'))
+    expect(adminApi.runPluginAction).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-PLUGINS-ACT-005: a danger action waits for confirmation; cancel drops it, confirm runs it', async () => {
+    const { result } = await opened()
+    act(() => result.current.runAction(PURGE))
+    expect(result.current.pendingAction).toEqual(PURGE)
+    expect(adminApi.runPluginAction).not.toHaveBeenCalled()
+    act(() => result.current.cancelPendingAction())
+    expect(result.current.pendingAction).toBeNull()
+    act(() => result.current.runAction(PURGE))
+    act(() => result.current.confirmPendingAction())
+    await waitFor(() => expect(adminApi.runPluginAction).toHaveBeenCalledWith('p', 'purge'))
+    expect(result.current.pendingAction).toBeNull()
+  })
+
+  it('FE-COMP-PLUGINS-ACT-006: an inactive plugin never posts, and a failed result is stored as such', async () => {
+    const { result } = await opened(false)
+    act(() => result.current.runAction(PING))
+    await new Promise(r => setTimeout(r, 0))
+    expect(adminApi.runPluginAction).not.toHaveBeenCalled()
+
+    vi.mocked(adminApi.runPluginAction).mockResolvedValue({ ok: false, message: 'credentials rejected' })
+    const active = await opened(true)
+    act(() => active.result.current.runAction(PING))
+    await waitFor(() => expect(active.result.current.actionResult.ping).toEqual({ ok: false, message: 'credentials rejected' }))
+  })
+
+  it('FE-COMP-PLUGINS-ACT-007: an edit made while the pre-action save is in flight is not clobbered when dirty clears', async () => {
+    const savePromise = deferred<{ config: Record<string, unknown>; restarted: boolean }>()
+    vi.mocked(adminApi.pluginSaveConfig).mockReturnValue(savePromise.promise)
+    const { result } = await opened()
+    act(() => result.current.setValue('apiUrl', 'https://a-edit.example'))
+    act(() => result.current.runAction(PING))
+    await waitFor(() => expect(adminApi.pluginSaveConfig).toHaveBeenCalledWith('p', { apiUrl: 'https://a-edit.example' }))
+
+    // A concurrent edit lands while the save is still pending.
+    act(() => result.current.setValue('apiUrl', 'https://b-edit.example'))
+
+    await act(async () => {
+      savePromise.resolve({ config: { apiUrl: 'https://a-edit.example' }, restarted: false })
+      await savePromise.promise
+    })
+
+    await waitFor(() => expect(adminApi.runPluginAction).toHaveBeenCalledWith('p', 'ping'))
+    expect(result.current.form?.dirty).toBe(true)
+    expect(result.current.form?.values.apiUrl).toBe('https://b-edit.example')
+  })
+
+  it('FE-COMP-PLUGINS-ACT-008: an in-flight action from a closed dialog does not leak into the next one', async () => {
+    const runPromise = deferred<{ ok: boolean; message?: string }>()
+    vi.mocked(adminApi.runPluginAction).mockReturnValueOnce(runPromise.promise)
+    const { result } = await opened()
+    act(() => result.current.runAction(PING))
+    await waitFor(() => expect(adminApi.runPluginAction).toHaveBeenCalledWith('p', 'ping'))
+
+    act(() => result.current.close())
+    act(() => result.current.open('q', true))
+    await waitFor(() => expect(result.current.form?.id).toBe('q'))
+    expect(result.current.runningAction).toBeNull()
+
+    act(() => result.current.runAction(PING))
+    await waitFor(() => expect(adminApi.runPluginAction).toHaveBeenCalledWith('q', 'ping'))
+    await waitFor(() => expect(result.current.actionResult.ping).toEqual({ ok: true, message: 'pong' }))
+
+    // The stale request from the closed dialog settles after the fact — it must not overwrite the new dialog's result.
+    await act(async () => {
+      runPromise.resolve({ ok: true, message: 'stale pong' })
+      await runPromise.promise
+    })
+    expect(result.current.actionResult.ping).toEqual({ ok: true, message: 'pong' })
+  })
+
+  it('FE-COMP-PLUGINS-ACT-009: a 404 "Plugin is not active" from the server (DB active, no live child) shows the inactive message and flips active off', async () => {
+    vi.mocked(adminApi.runPluginAction).mockRejectedValue({ response: { status: 404, data: { error: 'Plugin is not active' } } })
+    const { result } = await opened(true)
+    expect(result.current.form?.active).toBe(true)
+    act(() => result.current.runAction(PING))
+    await waitFor(() => expect(result.current.actionResult.ping).toEqual({ ok: false, message: 'admin.plugins.actions.inactive' }))
+    expect(result.current.form?.active).toBe(false)
+    expect(result.current.runningAction).toBeNull()
+  })
+})
@@ -0,0 +1,147 @@
+import { useRef, useState } from 'react'
+import { adminApi, type PluginAction, type PluginUserSettingField } from '../../api/client'
+import type { PluginActionResult } from '@trek/shared'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { seedSettingsValues, findMissingRequired, settingsPatch } from '../Plugins/settingsForm'
+
+export interface InstanceSettingsForm {
+  id: string
+  fields: PluginUserSettingField[]
+  values: Record<string, string | boolean>
+  /** The plugin's `scope:'instance'` action buttons. */
+  actions: PluginAction[]
+  /** Whether the plugin is active: an action needs a running child to execute. */
+  active: boolean
+  /** An edit since open/last save. An action saves a dirty form before it runs. */
+  dirty: boolean
+}
+
+/**
+ * The admin-owned `scope:'instance'` settings form — the ONE logic path behind
+ * both admin shells (the desktop modal and the phone sheet render their own
+ * markup over this state). Open fetches the declared fields plus the stored
+ * (masked) values and the instance-scope actions; save skips an untouched secret
+ * mask so it never overwrites the stored ciphertext, and reports a restart when
+ * the server re-spawned a running plugin (the child reads its config once, at init).
+ *
+ * Actions run AS the clicking admin. A dirty form is saved first (so the action
+ * sees the config the admin is looking at), the dialog stays open, and the result
+ * shows beside the button. A `danger` action parks in `pendingAction` until the
+ * shell's confirm UI calls `confirmPendingAction`.
+ */
+export function useInstanceSettings() {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const [form, setForm] = useState<InstanceSettingsForm | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [actionResult, setActionResult] = useState<Record<string, PluginActionResult>>({})
+  const [runningAction, setRunningAction] = useState<string | null>(null)
+  const [pendingAction, setPendingAction] = useState<PluginAction | null>(null)
+  // Bumped on every open()/close() so an in-flight action from a closed/replaced
+  // dialog can tell it's stale and bail without touching the new dialog's state.
+  const openSeq = useRef(0)
+
+  const open = (id: string, active: boolean) => {
+    openSeq.current++
+    setError('')
+    setActionResult({})
+    setPendingAction(null)
+    setRunningAction(null)
+    adminApi.pluginConfig(id)
+      .then(d => {
+        setForm({ id, fields: d.fields, values: seedSettingsValues(d.fields, d.config), actions: d.actions ?? [], active, dirty: false })
+      })
+      .catch(() => toast.error(t('common.error')))
+  }
+
+  const setValue = (key: string, value: string | boolean) =>
+    setForm(s => s && ({ ...s, values: { ...s.values, [key]: value }, dirty: true }))
+
+  const close = () => { openSeq.current++; setForm(null); setPendingAction(null); setRunningAction(null) }
+
+  /** Persist the form. Returns false when the save was refused (error already shown). */
+  const persist = async (f: InstanceSettingsForm): Promise<boolean> => {
+    const missing = findMissingRequired(f.fields, f.values)
+    if (missing) {
+      setError(t('admin.plugins.requiredMissing', { field: missing.label || missing.key }))
+      return false
+    }
+    setSaving(true); setError('')
+    try {
+      const d = await adminApi.pluginSaveConfig(f.id, settingsPatch(f.fields, f.values))
+      toast.success(t(d.restarted ? 'admin.plugins.settingsSavedRestarted' : 'admin.plugins.settingsSaved'))
+      return true
+    } catch (e) {
+      const err = e as { response?: { data?: { error?: string } } }
+      setError(err.response?.data?.error || t('common.error'))
+      return false
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const save = async () => {
+    if (!form) return
+    if (await persist(form)) setForm(null)
+  }
+
+  const perform = async (a: PluginAction) => {
+    if (!form || !form.active || runningAction) return
+    const seq = openSeq.current
+    // Set BEFORE the dirty-save window, not just around the invoke call, so a second
+    // click (or the shells' Save button, see M7) is blocked for the whole run — not just
+    // once the pre-run save has already gone out.
+    setRunningAction(a.key)
+    try {
+      if (form.dirty) {
+        if (!(await persist(form))) return
+        if (openSeq.current !== seq) return
+        // Only clear dirty if the values are still the snapshot we just persisted —
+        // a reference check, since setValue always creates a new values object. A
+        // concurrent edit during the save produced a new object, so dirty stays true
+        // and the edit isn't silently dropped from the next save/action.
+        setForm(s => s && s.values === form.values ? { ...s, dirty: false } : s)
+      }
+      if (openSeq.current !== seq) return
+      const res = await adminApi.runPluginAction(form.id, a.key)
+      if (openSeq.current !== seq) return
+      setActionResult(r => ({ ...r, [a.key]: res }))
+    } catch (e) {
+      if (openSeq.current !== seq) return
+      const err = e as { response?: { status?: number; data?: { error?: string } } }
+      if (err.response?.status === 404 && err.response?.data?.error === 'Plugin is not active') {
+        // The DB `status` column said active when the dialog opened, but the server's
+        // live-process check (the supervisor's actual child map) disagrees — a stale
+        // row with no running child. Believe the server: show the real reason instead
+        // of a bare "Error", and disable the buttons instead of leaving them clickable.
+        setActionResult(r => ({ ...r, [a.key]: { ok: false, message: t('admin.plugins.actions.inactive') } }))
+        setForm(s => s && { ...s, active: false })
+      } else {
+        setActionResult(r => ({ ...r, [a.key]: { ok: false, message: t('common.error') } }))
+      }
+    } finally {
+      if (openSeq.current === seq) setRunningAction(null)
+    }
+  }
+
+  const runAction = (a: PluginAction) => {
+    if (!form || !form.active) return
+    if (a.danger) { setPendingAction(a); return }
+    void perform(a)
+  }
+
+  const confirmPendingAction = () => {
+    const a = pendingAction
+    setPendingAction(null)
+    if (a) void perform(a)
+  }
+
+  const cancelPendingAction = () => setPendingAction(null)
+
+  return {
+    form, saving, error, open, setValue, close, save,
+    actionResult, runningAction, pendingAction, runAction, confirmPendingAction, cancelPendingAction,
+  }
+}
@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import { bypassChip, bypassOffer, rangeWarningCopy, useRangeBypass } from './useRangeBypass'
+
+const t = (k: string, p?: Record<string, unknown>) => (p ? `${k}:${JSON.stringify(p)}` : k)
+
+/**
+ * The ONE logic path behind the TREK_PLUGINS_IGNORE_TREK_RANGE warning in both admin
+ * shells — the desktop panel and the phone panel render their own markup over this.
+ */
+describe('rangeBypass helpers', () => {
+  it('bypassChip: a warning chip (not a blocker) only for a bypassed row', () => {
+    expect(bypassChip(null, t)).toBeNull()
+    expect(bypassChip(undefined, t)).toBeNull()
+    expect(bypassChip({ trekRange: '>=3.2.0 <4.0.0', hostVersion: '4.0.0' }, t)).toMatchObject({
+      blocked: false, warn: true, label: 'admin.plugins.dep.trekBypassed:{"range":">=3.2.0 <4.0.0","host":"4.0.0"}',
+    })
+    expect(bypassChip({ trekRange: null, hostVersion: '4.0.0' }, t)).toMatchObject({ label: 'admin.plugins.dep.trekBypassedUnknown' })
+  })
+
+  it('bypassOffer: an enabled "Install anyway" carrying what the dialog must say', () => {
+    const offer = bypassOffer({ name: 'Gotify', trek: '>=4.0.0', hostVersion: '3.3.0' }, t, 'why')
+    expect(offer).toEqual({
+      blocked: false, label: 'admin.plugins.installAnyway', title: 'why',
+      warn: { name: 'Gotify', trekRange: '>=4.0.0', hostVersion: '3.3.0', onConfirm: null },
+    })
+    expect(bypassOffer({ name: 'X' }, t, 'why').warn).toMatchObject({ trekRange: null, hostVersion: '?' })
+  })
+
+  it('rangeWarningCopy: confirm vs notice title, ranged vs rangeless body', () => {
+    const ranged = { name: 'G', trekRange: '>=4.0.0', hostVersion: '3.3.0' }
+    expect(rangeWarningCopy({ ...ranged, onConfirm: () => {} }, t)).toEqual({
+      confirm: true, title: 'admin.plugins.rangeBypass.title',
+      body: 'admin.plugins.rangeBypass.body:{"name":"G","range":">=4.0.0","host":"3.3.0"}',
+    })
+    expect(rangeWarningCopy({ name: 'G', trekRange: null, hostVersion: '3.3.0', onConfirm: null }, t)).toEqual({
+      confirm: false, title: 'admin.plugins.rangeBypass.noticeTitle',
+      body: 'admin.plugins.rangeBypass.bodyUnknown:{"name":"G","host":"3.3.0"}',
+    })
+  })
+})
+
+describe('useRangeBypass', () => {
+  it('guard runs straight through without a warning, and parks the run behind one otherwise', () => {
+    const { result } = renderHook(() => useRangeBypass())
+    let ran = 0
+    act(() => result.current.guard(undefined, () => { ran++ }))
+    expect(ran).toBe(1)
+    expect(result.current.warning).toBeNull()
+
+    act(() => result.current.guard({ name: 'G', trekRange: '>=4.0.0', hostVersion: '3.3.0', onConfirm: null }, () => { ran++ }))
+    expect(ran).toBe(1) // nothing sent until the admin accepts
+    expect(result.current.copy?.confirm).toBe(true)
+
+    act(() => result.current.confirm())
+    expect(ran).toBe(2)
+    expect(result.current.warning).toBeNull()
+  })
+
+  it('dismiss drops a parked run; notice opens a plain notice only for a real marker', () => {
+    const { result } = renderHook(() => useRangeBypass())
+    let ran = 0
+    act(() => result.current.guard({ name: 'G', trekRange: null, hostVersion: '3.3.0', onConfirm: null }, () => { ran++ }))
+    act(() => result.current.dismiss())
+    expect(ran).toBe(0)
+    expect(result.current.warning).toBeNull()
+
+    act(() => result.current.notice('trek-new', null))
+    expect(result.current.warning).toBeNull()
+    act(() => result.current.notice('trek-new', { trekRange: null, hostVersion: '3.3.0' }))
+    expect(result.current.warning).toMatchObject({ name: 'trek-new', onConfirm: null })
+    expect(result.current.copy?.confirm).toBe(false)
+    act(() => result.current.confirm()) // a notice's confirm is just a close
+    expect(result.current.warning).toBeNull()
+  })
+})
@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+type T = (k: string, p?: Record<string, unknown>) => string
+
+/** The server's "this only went through because TREK_PLUGINS_IGNORE_TREK_RANGE is set" marker. */
+export interface TrekRangeBypass { trekRange: string | null; hostVersion: string }
+/** What the range-bypass warning needs to say, and what to do if the admin accepts (null = a notice). */
+export interface RangeWarning extends TrekRangeBypass { name: string; onConfirm: (() => void) | null }
+
+/**
+ * The chip a row carries while it runs outside its declared range on the operator's
+ * say-so. Not a blocker — the toggle works — but a warning that must outlive the install
+ * dialog for as long as the plugin runs here. Null when nothing was bypassed.
+ */
+export function bypassChip(b: TrekRangeBypass | null | undefined, t: T) {
+  if (!b) return null
+  return {
+    icon: AlertTriangle,
+    label: b.trekRange
+      ? t('admin.plugins.dep.trekBypassed', { range: b.trekRange, host: b.hostVersion })
+      : t('admin.plugins.dep.trekBypassedUnknown'),
+    blocked: false,
+    warn: true,
+  }
+}
+
+/**
+ * The Install button for a registry entry the server flagged incompatible, once the
+ * operator set TREK_PLUGINS_IGNORE_TREK_RANGE: the server will take the newest version
+ * regardless, so the button says exactly that — and carries what the warning has to say
+ * first. `title` is the shell's existing "why" line (needs TREK X — this server runs Y).
+ */
+export function bypassOffer(item: { name: string; trek?: string | null; hostVersion?: string }, t: T, title: string) {
+  return {
+    blocked: false,
+    label: t('admin.plugins.installAnyway'),
+    title,
+    warn: { name: item.name, trekRange: item.trek ?? null, hostVersion: item.hostVersion ?? '?', onConfirm: null } as RangeWarning,
+  }
+}
+
+/**
+ * Title + body of the warning, for either mode: a CONFIRM step before a registry install
+ * the server would otherwise refuse (`onConfirm` set), or a plain NOTICE after a path that
+ * could not ask first — sideload, dev-link, update, dependency download. The copy is the
+ * whole point: the admin is accepting that the author never vouched for this TREK and
+ * that, in rare cases, that can cost them data.
+ */
+export function rangeWarningCopy(w: RangeWarning, t: T): { title: string; body: string; confirm: boolean } {
+  const confirm = w.onConfirm !== null
+  return {
+    confirm,
+    title: confirm ? t('admin.plugins.rangeBypass.title') : t('admin.plugins.rangeBypass.noticeTitle'),
+    body: w.trekRange
+      ? t('admin.plugins.rangeBypass.body', { name: w.name, range: w.trekRange, host: w.hostVersion })
+      : t('admin.plugins.rangeBypass.bodyUnknown', { name: w.name, host: w.hostVersion }),
+  }
+}
+
+/**
+ * The TREK_PLUGINS_IGNORE_TREK_RANGE warning state behind BOTH admin shells (the desktop
+ * panel and the phone panel render their own dialog/sheet over it). `guard` parks a
+ * registry install behind the confirm step when the entry was already flagged
+ * incompatible; `notice` shows the after-the-fact warning for a response that carries the
+ * server's marker. Whether the switch is ON stays a plain `useState` in each shell: its
+ * setter is read inside the mount-time refresh, and only a useState setter is something
+ * the exhaustive-deps rule knows to be stable.
+ */
+export function useRangeBypass() {
+  const { t } = useTranslation()
+  const [warning, setWarning] = useState<RangeWarning | null>(null)
+
+  const notice = (name: string, b: TrekRangeBypass | null | undefined) => {
+    if (b) setWarning({ name, trekRange: b.trekRange, hostVersion: b.hostVersion, onConfirm: null })
+  }
+  const guard = (warn: RangeWarning | undefined, run: () => void) => {
+    if (warn) setWarning({ ...warn, onConfirm: run })
+    else run()
+  }
+  const confirm = () => { const w = warning; setWarning(null); w?.onConfirm?.() }
+  const dismiss = () => setWarning(null)
+
+  return {
+    warning,
+    copy: warning ? rangeWarningCopy(warning, t) : null,
+    notice, guard, confirm, dismiss,
+  }
+}
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { calculateTicketShares, hasTicketSplit, payerSum, payersBalanced, readTicketItems, readUserNote, rebalancePayers, splitCents, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
+import { calculateTicketShares, hasTicketSplit, payerSum, payersBalanced, readTicketItems, readUserNote, rebalancePayers, splitCents, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'

 describe('splitCents', () => {
  it('splits evenly when it divides cleanly', () => {
@@ -16,8 +16,12 @@ describe('splitCents', () => {
    expect(splitCents(50, 0)).toEqual([])
  })

-  it('floors a negative amount at zero rather than inventing debt', () => {
-    expect(splitCents(-10, 2)).toEqual([0, 0])
+  it('splits a negative amount exactly instead of clamping it to zero (#2176)', () => {
+    // A refund spread across payers has to sum back too — the old Math.max(0, …)
+    // clamp silently swallowed the sign and broke rebalancePayers for refunds.
+    expect(splitCents(-10, 2)).toEqual([-5, -5])
+    const parts = splitCents(-100.01, 3)
+    expect(parts.reduce((a, b) => a + Math.round(b * 100), 0)).toBe(-10001)
  })
 })

@@ -75,6 +79,57 @@ describe('rebalancePayers', () => {
    const next = rebalancePayers({ 1: '33.33' }, new Set([1]), new Set([1, 2, 3]), 100)
    expect(payersBalanced(next, new Set([1, 2, 3]), 100)).toBe(true)
  })
+
+  // ── Refunds: negative totals rebalance like any other (#2176) ──────────────
+
+  it('spreads a negative total across payers so the parts stay typeable', () => {
+    const next = rebalancePayers({}, new Set(), new Set([1, 2]), -90)
+    expect(next).toEqual({ 1: '-45.00', 2: '-45.00' })
+    expect(payersBalanced(next, new Set([1, 2]), -90)).toBe(true)
+  })
+
+  it('lets a free payer absorb the rest of a negative total past a pinned amount', () => {
+    const next = rebalancePayers({ 1: '-70' }, new Set([1]), new Set([1, 2]), -100)
+    expect(next[1]).toBe('-70')
+    expect(next[2]).toBe('-30.00')
+  })
+
+  it('handles a pinned positive payer against a negative total', () => {
+    // Alice fronted 50 but the entry nets to -100 — the free payer carries -150.
+    const next = rebalancePayers({ 1: '50' }, new Set([1]), new Set([1, 2]), -100)
+    expect(next[2]).toBe('-150.00')
+    expect(payersBalanced(next, new Set([1, 2]), -100)).toBe(true)
+  })
+})
+
+// ── Client/server share parity (#2176) ───────────────────────────────────────
+//
+// splitEqualShares exists twice: here (previewing the split in euros) and on the
+// server (netting the settlement in cents — BudgetService.splitEqualShares in
+// server/src/nest/budget/budget.service.ts). The fixture below is duplicated
+// verbatim in server/tests/unit/nest/budget.service.calc.test.ts; if either
+// implementation drifts — sign handling included — its copy of this table fails.
+const SHARE_PARITY_FIXTURE: { totalCents: number; users: number[]; itemId: number; expected: Record<number, number> }[] = [
+  { totalCents: 10000, users: [1, 2, 3], itemId: 0, expected: { 1: 3334, 2: 3333, 3: 3333 } },
+  { totalCents: 10000, users: [1, 2, 3], itemId: 1, expected: { 1: 3333, 2: 3334, 3: 3333 } },
+  { totalCents: -10000, users: [1, 2, 3], itemId: 0, expected: { 1: -3333, 2: -3333, 3: -3334 } },
+  { totalCents: -10000, users: [1, 2, 3], itemId: 1, expected: { 1: -3334, 2: -3333, 3: -3333 } },
+  { totalCents: -101, users: [1, 2], itemId: 0, expected: { 1: -50, 2: -51 } },
+  { totalCents: -101, users: [1, 2], itemId: 1, expected: { 1: -51, 2: -50 } },
+  { totalCents: -1, users: [1, 2, 3], itemId: 0, expected: { 1: 0, 2: 0, 3: -1 } },
+]
+
+describe('splitEqualShares — server parity (#2176)', () => {
+  it.each(SHARE_PARITY_FIXTURE)(
+    'splits $totalCents cents across $users.length members (item $itemId) exactly like the server',
+    ({ totalCents, users, itemId, expected }) => {
+      const shares = splitEqualShares(totalCents / 100, users.map(user_id => ({ user_id })), itemId)
+      const inCents = Object.fromEntries(Object.entries(shares).map(([id, v]) => [id, Math.round(v * 100)]))
+      expect(inCents).toEqual(expected)
+      // The invariant behind the fixture: the shares always sum back to the total.
+      expect(Object.values(inCents).reduce((a, b) => a + b, 0)).toBe(totalCents)
+    },
+  )
 })

 // ── Notes vs. itemized receipts (#1658) ──────────────────────────────────────
@@ -11,10 +11,24 @@
 * Amounts are the raw input strings, parsed on use (same as customAmounts).
 */

-/** Spread `amount` across `n` payers in whole cents so the parts sum back exactly. */
+import { currencyDecimals } from '../../utils/formatters'
+
+// The split and receipt fields guard their own precision on every keystroke, so the
+// guard has to follow the currency: a three-decimal one (KWD, BHD, …) seeds three
+// places, and the old fixed two rejected every keystroke after that, leaving the field
+// unusable until a digit was deleted (#2175). Never stricter than two places, so no
+// value a field accepts today can become uneditable.
+export const amountPattern = (currency: string, signed: boolean) =>
+  new RegExp(`^${signed ? '-?' : ''}\\d*\\.?\\d{0,${Math.max(2, currencyDecimals(currency))}}$`)
+
+/**
+ * Spread `amount` across `n` payers in whole cents so the parts sum back exactly.
+ * Floor-based, so a negative total (a refund, #2176) splits just as exactly:
+ * the remainder is always in [0, n) and the parts still sum to the input.
+ */
 export function splitCents(amount: number, n: number): number[] {
  if (n <= 0) return []
-  const cents = Math.max(0, Math.round(amount * 100))
+  const cents = Math.round(amount * 100)
  const base = Math.floor(cents / n)
  const rem = cents - base * n
  return Array.from({ length: n }, (_, i) => (base + (i < rem ? 1 : 0)) / 100)
@@ -58,6 +72,13 @@ export function rebalancePayers(
 * The remainder cent rotates with the item id rather than always landing on the
 * first member, so across several expenses the rounding evens out instead of
 * always favouring the same person.
+ *
+ * Must stay share-for-share identical to the server's
+ * BudgetService.splitEqualShares (budget.service.ts) — the settlement is netted
+ * there, this copy only previews it. The remainder is `totalCents - baseCents*n`
+ * rather than `%` so a negative total (a refund, #2176) still yields a remainder
+ * in [0, n) and the shares sum back to the total exactly, like the server's do.
+ * The parity fixture in CostsPanel.helpers.test.ts pins both sides.
 */
 export function splitEqualShares(total: number, members: { user_id: number }[], itemId: number): Record<number, number> {
  const n = members.length
@@ -65,7 +86,7 @@ export function splitEqualShares(total: number, members: { user_id: number }[],

  const totalCents = Math.round(total * 100)
  const baseCents = Math.floor(totalCents / n)
-  const remainder = totalCents % n
+  const remainder = totalCents - baseCents * n

  const shares: Record<number, number> = {}
  const sortedMembers = [...members].sort((a, b) => a.user_id - b.user_id)
@@ -295,6 +295,29 @@ describe('CostsPanel — settlements in the ledger', () => {
    expect(card).toHaveTextContent('120') // 120,00 € (locale separator), i.e. 90 + 30
  })

+  // #2225 follow-up — the ledger stopped charging payer-less expenses, but this
+  // tile kept counting them, so it contradicted the balances right beside it.
+  it('keeps a payer-less expense out of Your share, like the balances do', async () => {
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
+    const paid = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 60, payers: [{ user_id: 1, amount: 60, username: 'alice' }], members: [{ user_id: 1, username: 'alice', paid: 1 }] }
+    const noPayer = { ...buildBudgetItem({ trip_id: 1, category: 'transport', name: 'Taxi' }), total_price: 40, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [paid, noPayer] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Taxi')
+    // "Your share" is the first of the two bold figures in the Total spend card's
+    // footer; the second is "You paid". 60 from the paid expense only — the 40
+    // nobody has paid for is not a share, though it still counts as spend.
+    const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]')!
+    const figures = [...card.querySelectorAll('b')].map(b => b.textContent ?? '')
+    expect(figures[0]).toContain('60')
+    expect(figures[0]).not.toContain('100')
+  })
+
  it('records a recorded-total expense with nobody to split with (#1286)', async () => {
    seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
    let posted: Record<string, unknown> | null = null
@@ -518,8 +541,9 @@ describe('CostsPanel — settlements in the ledger', () => {
    await user.click(screen.getByTitle('Edit'))

    // Loading used to be payers.find(...), which silently dropped the second payer.
+    // Seeded with two decimals since #2175, localized for EUR.
    const amounts = await screen.findAllByTestId('payer-amount')
-    expect(amounts.map(i => (i as HTMLInputElement).value)).toEqual(['45', '45'])
+    expect(amounts.map(i => (i as HTMLInputElement).value)).toEqual(['45,00', '45,00'])

    await user.click(screen.getByRole('button', { name: 'Save' }))
    await waitFor(() => expect(put).toBeTruthy())
@@ -705,8 +729,9 @@ describe('CostsPanel — settlements in the ledger', () => {
    await screen.findByText('Payment')
    await user.click(screen.getByTitle('Edit'))

-    // The stored USD amount comes back as-is, not silently reread as euros.
-    expect((await screen.findByPlaceholderText('0.00') as HTMLInputElement).value).toBe('30')
+    // The stored USD amount comes back as-is (padded to two decimals, #2175),
+    // not silently reread as euros.
+    expect((await screen.findByPlaceholderText('0.00') as HTMLInputElement).value).toBe('30.00')
    expect(screen.getByText(/^USD/)).toBeInTheDocument()
  })
 })
@@ -1300,8 +1325,9 @@ describe('CostsPanel — expense modal', () => {
    await screen.findByText('Dinner')
    await user.click(screen.getByTitle('Edit'))

-    expect((await screen.findByDisplayValue('70')).tagName).toBe('INPUT')
-    expect(screen.getByDisplayValue('30')).toBeInTheDocument()
+    // Custom shares reopen padded to two decimals (#2175), localized for EUR.
+    expect((await screen.findByDisplayValue('70,00')).tagName).toBe('INPUT')
+    expect(screen.getByDisplayValue('30,00')).toBeInTheDocument()

    // Excluding Bob drops his amount; the split no longer matches the total.
    await user.click(screen.getByRole('button', { name: /bob/i }))
@@ -1430,7 +1456,8 @@ describe('CostsPanel — expense modal', () => {
    )

    expect(screen.getByDisplayValue('Hotel Astoria')).toBeInTheDocument()
-    expect(screen.getByDisplayValue('240')).toBeInTheDocument()
+    // The prefilled amount is padded to the base currency's decimals (#2175).
+    expect(screen.getByDisplayValue('240,00')).toBeInTheDocument()
    await user.click(screen.getByRole('button', { name: 'Add expense' }))

    await waitFor(() => expect(posted).toBeTruthy())
@@ -1640,7 +1667,8 @@ describe('CostsPanel — remaining paths', () => {
    await screen.findByText('Mining rig')
    await user.click(screen.getByTitle('Edit'))

-    expect(await screen.findByDisplayValue('2')).toBeInTheDocument()
+    // XBT is unknown to the locale map → dot separator, two decimals (#2175).
+    expect(await screen.findByDisplayValue('2.00')).toBeInTheDocument()
    expect(screen.getAllByText('XBT').length).toBeGreaterThanOrEqual(2)
  })

@@ -1862,6 +1890,173 @@ describe('CostsPanel — mobile extras', () => {
  })
 })

+// ── #2175: edit inputs are padded to the currency's decimals ────────────────
+describe('CostsPanel — decimal padding on edit (#2175)', () => {
+  beforeEach(() => {
+    seedAlice()
+    clearExchangeRateCache()
+  })
+  afterEach(clearExchangeRateCache)
+
+  it('FE-W5COSTS-066: reopens 4,90 as "4,90" and 5,00 as "5,00", not "4,9" and "5"', async () => {
+    const user = userEvent.setup()
+    mount([
+      expense({ id: 301, name: 'Coffee', category: 'food', total_price: 4.9, payers: [{ user_id: 1, amount: 4.9 }], members: [{ user_id: 1, username: 'alice' }] }),
+      expense({ id: 302, name: 'Toll', category: 'transport', total_price: 5, payers: [{ user_id: 1, amount: 5 }], members: [{ user_id: 1, username: 'alice' }] }),
+    ])
+
+    await screen.findByText('Coffee')
+    await user.click(screen.getAllByTitle('Edit')[0])
+    expect(await screen.findByDisplayValue('4,90')).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Cancel' }))
+
+    await user.click(screen.getAllByTitle('Edit')[1])
+    expect(await screen.findByDisplayValue('5,00')).toBeInTheDocument()
+  })
+
+  it('FE-W5COSTS-071: a three-decimal currency seeds three places and the split field still takes input', async () => {
+    const user = userEvent.setup()
+    render(<ExpenseModal tripId={1} base="KWD" people={tripMembers} me={1} onClose={() => {}} onSaved={vi.fn()}
+      editing={expense({
+        id: 340, name: 'Museum', category: 'activities', currency: 'KWD', total_price: 3,
+        payers: [{ user_id: 1, amount: 3 }],
+        members: [{ user_id: 1, username: 'alice', amount: 1.5 }, { user_id: 2, username: 'bob', amount: 1.5 }],
+      })} />)
+
+    expect(await screen.findByDisplayValue('3.000')).toBeInTheDocument()
+    const shares = screen.getAllByDisplayValue('1.500') as HTMLInputElement[]
+
+    // The seed is three decimals, so a two-decimal guard would reject every further
+    // keystroke, including one typed in front of the decimal point.
+    await user.type(shares[0], '2', { initialSelectionStart: 0, initialSelectionEnd: 0 })
+    expect(shares[0].value).toBe('21.500')
+
+    // A fourth decimal is still not a fils.
+    await user.clear(shares[1])
+    await user.type(shares[1], '1.5005')
+    expect(shares[1].value).toBe('1.500')
+  })
+})
+
+// ── #2176: negative amounts record partial reimbursements ───────────────────
+describe('CostsPanel — negative amounts (#2176)', () => {
+  beforeEach(() => {
+    seedAlice()
+    clearExchangeRateCache()
+  })
+  afterEach(clearExchangeRateCache)
+
+  it('FE-W5COSTS-067: "-100" can be typed and saves a negative expense with its payer', async () => {
+    const user = userEvent.setup()
+    let posted: Record<string, unknown> | null = null
+    server.use(http.post('/api/trips/1/budget', async ({ request }) => {
+      posted = await request.json() as Record<string, unknown>
+      return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'Hotel refund' }), id: 12 } })
+    }))
+    mount([])
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Hotel refund')
+    // The reported symptom: the '-' was stripped on input, so this was untypeable.
+    await user.type(screen.getAllByPlaceholderText('0,00')[0], '-100')
+
+    const submits = screen.getAllByRole('button', { name: 'Add expense' })
+    expect(submits[submits.length - 1]).not.toBeDisabled()
+    await user.click(submits[submits.length - 1])
+
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted!.total_price).toBe(-100)
+    expect(posted!.payers).toEqual([{ user_id: 1, amount: -100 }])
+    expect(posted!.member_ids).toEqual([1, 2])
+  })
+
+  it('FE-W5COSTS-068: a refund reopens with its negative payer intact and saves it back', async () => {
+    const user = userEvent.setup()
+    let put: Record<string, unknown> | null = null
+    server.use(http.put('/api/trips/1/budget/310', async ({ request }) => {
+      put = await request.json() as Record<string, unknown>
+      return HttpResponse.json({ item: dinner() })
+    }))
+    mount([expense({
+      id: 310, name: 'Hotel refund', category: 'lodging', total_price: -100,
+      payers: [{ user_id: 1, amount: -100 }],
+      members: [{ user_id: 1, username: 'alice' }, { user_id: 2, username: 'bob' }],
+    })])
+
+    // The row shows the amount twice — total pill and the payer chip, which used
+    // to be filtered to positive amounts and left the refund's recipient invisible.
+    const row = (await screen.findByText('Hotel refund')).closest('.exp-row') as HTMLElement
+    expect(within(row).getAllByText(/100,00/).length).toBeGreaterThanOrEqual(2)
+    // Not "Unfinished": the refund has its recipient recorded.
+    expect(within(row).queryByText('Unfinished')).toBeNull()
+
+    await user.click(screen.getByTitle('Edit'))
+    // The negative payer reopens selected instead of resetting to "Nobody",
+    // and the total is seeded signed and padded.
+    expect(await screen.findByRole('button', { name: 'You' })).toBeInTheDocument()
+    expect(screen.getByDisplayValue('-100,00')).toBeInTheDocument()
+
+    // Saving untouched must not silently drop the negative payer.
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(put).toBeTruthy())
+    expect(put!.total_price).toBe(-100)
+    expect(put!.payers).toEqual([{ user_id: 1, amount: -100 }])
+  })
+
+  it('FE-W5COSTS-069: a payer-less refund is marked Unfinished like a payer-less bill', async () => {
+    mount([expense({ id: 320, name: 'Pending refund', category: 'misc', total_price: -50, payers: [], members: [{ user_id: 1, username: 'alice' }] })])
+
+    await screen.findByText('Pending refund')
+    expect(screen.getByText('Unfinished')).toBeInTheDocument()
+  })
+
+  it('FE-W5COSTS-070: the category breakdown nets refunds and keeps a net-negative category listed', async () => {
+    mount([
+      expense({ id: 330, name: 'Dinner', category: 'food', total_price: 90, payers: [{ user_id: 1, amount: 90 }], members: [{ user_id: 1, username: 'alice' }] }),
+      expense({ id: 331, name: 'Meal refund', category: 'food', total_price: -30, payers: [{ user_id: 1, amount: -30 }], members: [{ user_id: 1, username: 'alice' }] }),
+      expense({ id: 332, name: 'Cancelled tour', category: 'activities', total_price: -20, payers: [{ user_id: 1, amount: -20 }], members: [{ user_id: 1, username: 'alice' }] }),
+    ])
+
+    await screen.findByText('Dinner')
+    const breakdown = screen.getByText('By category').parentElement as HTMLElement
+    // Food nets 90 − 30 = 60; the fully refunded tour keeps a row of its own.
+    expect(within(breakdown).getByText('60 €')).toBeInTheDocument()
+    expect(within(breakdown).getByText(/[-−]20\s*€/)).toBeInTheDocument()
+  })
+
+  it('FE-W5COSTS-072: the custom-split hint reads under and over the right way round on a refund', async () => {
+    const user = userEvent.setup()
+    render(<ExpenseModal tripId={1} base="EUR" people={tripMembers} me={1} onClose={() => {}} onSaved={vi.fn()}
+      editing={expense({
+        id: 341, name: 'Hotel refund', category: 'accommodation', total_price: -100,
+        payers: [{ user_id: 1, amount: -100 }],
+        members: [{ user_id: 1, username: 'alice', amount: -70 }, { user_id: 2, username: 'bob' }],
+      })} />)
+
+    // -70 of -100: 30 still to hand out, not 30 too much.
+    expect(await screen.findByText('Sum of splits: €-70.00 of €-100.00 (under by €30.00)')).toBeInTheDocument()
+
+    await user.type(screen.getByPlaceholderText('-30,00'), '-40')
+    expect(screen.getByText('Sum of splits: €-110.00 of €-100.00 (over by €10.00)')).toBeInTheDocument()
+  })
+
+  it('FE-W5COSTS-073: the total can be turned into a refund without a minus key', async () => {
+    const user = userEvent.setup()
+    render(<ExpenseModal tripId={1} base="EUR" people={tripMembers} me={1} editing={null}
+      onClose={() => {}} onSaved={vi.fn()} />)
+
+    const total = (await screen.findAllByPlaceholderText('0,00'))[0] as HTMLInputElement
+    await user.type(total, '100')
+
+    // The iOS decimal pad has no minus key, so the sign has to be reachable without one.
+    const toggle = screen.getByRole('button', { name: 'Switch between expense and refund' })
+    await user.click(toggle)
+
+    expect(total.value).toBe('-100')
+    expect(toggle).toHaveAttribute('aria-pressed', 'true')
+  })
+})
+
 describe('CostsPanel — split maths', () => {
  it('FE-W5COSTS-039: an equal split with nobody to split with is empty', () => {
    expect(splitEqualShares(90, [], 1)).toEqual({})
@@ -1,6 +1,6 @@
 import { Fragment, useState, useEffect, useMemo, useCallback } from 'react'
 import { useSearchParams } from 'react-router'
-import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2, AlertCircle, Download, StickyNote, ChevronDown } from 'lucide-react'
+import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2, AlertCircle, Download, StickyNote, ChevronDown, Receipt, Paperclip } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -8,18 +8,20 @@ import { useCanDo } from '../../store/permissionsStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { budgetApi } from '../../api/client'
+import { saveWithReceipts } from './receiptUploads'
 import { useExchangeRates } from '../../hooks/useExchangeRates'
 import { useIsMobile } from '../../hooks/useIsMobile'
-import { formatMoney, currencyDecimals, currencyLocale, localizeAmountInput, cleanAmount } from '../../utils/formatters'
-import { downloadBlob } from '../../utils/fileDownload'
+import { formatMoney, currencyDecimals, currencyLocale, localizeAmountInput, amountToInputString } from '../../utils/formatters'
+import { downloadBlob, openFile } from '../../utils/fileDownload'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import { localToday } from '../Planner/today'
 import { SYMBOLS, currenciesWith, SPLIT_COLORS } from './BudgetPanel.constants'
-import { calculateTicketShares, hasTicketSplit, NOTE_MAX, payersBalanced, readTicketItems, readUserNote, rebalancePayers, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
+import { amountPattern, calculateTicketShares, hasTicketSplit, NOTE_MAX, payersBalanced, readTicketItems, readUserNote, rebalancePayers, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
 import { COST_CATEGORY_LIST, catMeta } from './costsCategories'
-import type { BudgetItem } from '../../types'
+import { ReceiptPreviewModal } from './ReceiptPreviewModal'
+import type { BudgetItem, BudgetItemReceipt } from '../../types'
 import type { TripMember } from './BudgetPanelMemberChips'
 import GuestBadge from '../shared/GuestBadge'
 import { NumericInput } from '../shared/NumericInput'
@@ -84,6 +86,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
  const [dayFilter, setDayFilter] = useState('')   // '' = all days, else YYYY-MM-DD
  const [modalOpen, setModalOpen] = useState(false)
  const [editing, setEditing] = useState<BudgetItem | null>(null)
+  const [previewReceipts, setPreviewReceipts] = useState<{ receipts: BudgetItemReceipt[]; initialIndex: number } | null>(null)
  // One note open at a time: two expanded rows next to each other read as a mess,
  // and the point of the collapse is that the list stays scannable.
  const [expandedNoteId, setExpandedNoteId] = useState<number | null>(null)
@@ -123,7 +126,14 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
  // ── derived expense maths (everything converted to the base currency) ────
  const baseTotal = (e: BudgetItem) => convert(e.total_price || 0, curOf(e))
  const myPaidOf = (e: BudgetItem) => (e.payers || []).filter(p => p.user_id === me).reduce((a, p) => a + convert(p.amount, curOf(e)), 0)
+  // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
+  // total but stays out of settlements until who-paid is filled in. A negative
+  // total (a refund, #2176) is just as unfinished until its recipient is named.
+  const isUnfinished = (e: BudgetItem) => baseTotal(e) !== 0 && (e.payers || []).filter(p => p.amount !== 0).length === 0
  const myShareOf = (e: BudgetItem) => {
+    // Nobody paid, so nobody owes: the ledger skips these entirely (#2225), and
+    // counting them here left the tile contradicting the balances right beside it.
+    if (isUnfinished(e)) return 0
    const myMember = (e.members || []).find(m => m.user_id === me)
    if (!myMember) return 0
    if (myMember.amount !== null && myMember.amount !== undefined) {
@@ -133,9 +143,6 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
    const myShare = shares[me] || 0
    return convert(myShare, curOf(e))
  }
-  // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
-  // total but stays out of settlements until who-paid is filled in.
-  const isUnfinished = (e: BudgetItem) => baseTotal(e) > 0 && (e.payers || []).filter(p => p.amount > 0).length === 0

  const totals = useMemo(() => {
    const totalSpend = budgetItems.reduce((a, e) => a + baseTotal(e), 0)
@@ -488,6 +495,14 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
          onSaved={() => { setEditingSettlement(null); setAddingPayment(false); loadSettlement() }} />
      )}

+      {previewReceipts && (
+        <ReceiptPreviewModal
+          receipts={previewReceipts.receipts}
+          initialIndex={previewReceipts.initialIndex}
+          onClose={() => setPreviewReceipts(null)}
+        />
+      )}
+
      <style>{`
        .costs-root {
          --c-bg: #f8fafc; --c-bg2: oklch(0.965 0.01 70);
@@ -717,7 +732,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
    const c = catMeta(e.category)
    const Icon = c.Icon
    const cur = curOf(e)
-    const payers = (e.payers || []).filter(p => p.amount > 0)
+    const payers = (e.payers || []).filter(p => p.amount !== 0)
    const net = round2(myPaidOf(e) - myShareOf(e))
    const unfinished = isUnfinished(e)
    const note = readUserNote(e)
@@ -758,6 +773,32 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
                {t('costs.unfinished')}
              </span>
            )}
+            {(e.receipts || []).length > 0 && (
+              <button
+                type="button"
+                onClick={(ev) => {
+                  ev.stopPropagation()
+                  setPreviewReceipts({ receipts: e.receipts!, initialIndex: 0 })
+                }}
+                title={t('costs.viewReceipt')}
+                className="bg-surface-secondary border border-edge text-content-muted hover:text-content hover:border-content-faint transition-all"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 5,
+                  padding: '2px 8px',
+                  borderRadius: 999,
+                  fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
+                  fontWeight: 600,
+                  flexShrink: 0,
+                  cursor: 'pointer',
+                  fontFamily: 'inherit',
+                }}
+              >
+                <Receipt size={12} className="text-content-muted" />
+                <span>{t('costs.receipts') || 'Beleg'}{e.receipts!.length > 1 ? ` (${e.receipts!.length})` : ''}</span>
+              </button>
+            )}
          </div>
          {cur !== base && (
            <div className="text-content-faint" style={{ marginTop: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
@@ -878,9 +919,12 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
  }

  function CategoryBreakdown() {
+    // Categories net refunds against spend (#2176): a negative entry lowers its
+    // category's sum, and a category that nets negative keeps its own row —
+    // just without a bar, since the bars rank positive spend.
    const tot: Record<string, number> = {}
    for (const e of budgetItems) { const k = catMeta(e.category).key; tot[k] = (tot[k] || 0) + baseTotal(e) }
-    const rows = COST_CATEGORY_LIST.filter(c => (tot[c.key] || 0) > 0).sort((a, b) => (tot[b.key] || 0) - (tot[a.key] || 0))
+    const rows = COST_CATEGORY_LIST.filter(c => (tot[c.key] || 0) !== 0).sort((a, b) => (tot[b.key] || 0) - (tot[a.key] || 0))
    if (rows.length === 0) return <div className="text-content-faint" style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))' }}>{t('costs.noCategories')}</div>
    // Bars are scaled relative to the most expensive category (the top row fills the
    // bar), not to the trip grand total — makes the relative ranking readable.
@@ -888,7 +932,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {rows.map(c => {
-          const v = tot[c.key]; const pct = maxCat ? v / maxCat * 100 : 0
+          const v = tot[c.key]; const pct = maxCat > 0 && v > 0 ? v / maxCat * 100 : 0
          return (
            <div key={c.key} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 10, alignItems: 'center' }}>
              <span style={{ width: 10, height: 10, borderRadius: 3, background: c.color }} />
@@ -966,7 +1010,9 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
  const otherDefault = people.find(p => p.id !== me)?.id ?? me
  const [fromId, setFromId] = useState<string>(String(editing?.from_user_id ?? me))
  const [toId, setToId] = useState<string>(String(editing?.to_user_id ?? otherDefault))
-  const [amount, setAmount] = useState<string>(editing ? String(editing.amount) : '')
+  // Seeded with the transfer's own currency decimals, so a reopened 4,90 reads
+  // "4.90" and not "4.9" (#2175) — and a JPY transfer gets no fake decimals.
+  const [amount, setAmount] = useState<string>(editing ? amountToInputString(editing.amount, (editing.currency || currency).toUpperCase()) : '')
  const [cur, setCur] = useState<string>((editing?.currency || currency).toUpperCase())
  const [saving, setSaving] = useState(false)

@@ -1051,9 +1097,13 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
  const [currency, setCurrency] = useState((editing?.currency || base).toUpperCase())
  const [day, setDay] = useState(editing?.expense_date || localToday())
  const [note, setNote] = useState(() => readUserNote(editing))
+  // Edit and prefill seeds are padded to the currency's decimals (#2175): the DB
+  // returns numbers, so a saved 4,90 would otherwise reopen as "4,9" and a saved
+  // 5,00 as "5". A prefill has no currency of its own — it is read as `base`,
+  // which is also what the currency field starts on.
  const [total, setTotal] = useState<string>(() => {
-    if (editing) return editing.total_price ? String(cleanAmount(editing.total_price)) : ''
-    if (prefill?.amount != null) return String(prefill.amount)
+    if (editing) return editing.total_price ? amountToInputString(editing.total_price, (editing.currency || base).toUpperCase()) : ''
+    if (prefill?.amount != null) return amountToInputString(prefill.amount, base)
    return ''
  })
  const [participants, setParticipants] = useState<Set<number>>(() =>
@@ -1064,8 +1114,9 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
  // next". The single-payer dropdown stays the default path; multiPayer swaps in a
  // per-person amount editor. 0 represents "Nobody (planning entry)"; on an
  // existing expense a missing payer is a deliberate choice, so only a brand-new
-  // one defaults to me.
-  const initialPayers = (editing?.payers || []).filter(p => p.amount > 0)
+  // one defaults to me. A negative payer (the recipient of a refund, #2176) is a
+  // real payer — filtering on > 0 here would silently drop them on save.
+  const initialPayers = (editing?.payers || []).filter(p => p.amount !== 0)

  const [payerId, setPayerId] = useState<number>(() => {
    const existingPayer = initialPayers[0]
@@ -1076,7 +1127,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
  const [payerIds, setPayerIds] = useState<Set<number>>(() => new Set(initialPayers.map(p => p.user_id)))
  const [payerAmounts, setPayerAmounts] = useState<Record<number, string>>(() => {
    const m: Record<number, string> = {}
-    for (const p of initialPayers) m[p.user_id] = String(p.amount)
+    for (const p of initialPayers) m[p.user_id] = amountToInputString(p.amount, currency)
    return m
  })
  // Payers the user typed an amount for: rebalance leaves these alone and makes
@@ -1101,13 +1152,31 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
    if (editing && editing.members) {
      for (const member of editing.members) {
        if (member.amount !== null && member.amount !== undefined) {
-          m[member.user_id] = String(member.amount)
+          m[member.user_id] = amountToInputString(member.amount, currency)
        }
      }
    }
    return m
  })

+  const [receipts, setReceipts] = useState<BudgetItemReceipt[]>(() => editing?.receipts || [])
+  const [pendingReceiptFiles, setPendingReceiptFiles] = useState<File[]>([])
+  const [uploadingReceipt, setUploadingReceipt] = useState(false)
+  const [modalPreviewReceipts, setModalPreviewReceipts] = useState<{ receipts: BudgetItemReceipt[]; initialIndex: number } | null>(null)
+
+  const handleReceiptFileSelect = (files: FileList | File[] | null) => {
+    if (!files || files.length === 0) return
+    setPendingReceiptFiles(prev => [...prev, ...Array.from(files)])
+  }
+
+  const handleRemoveReceipt = (receiptId: number) => {
+    setReceipts(prev => prev.filter(r => r.id !== receiptId))
+  }
+
+  const handleRemovePendingReceipt = (index: number) => {
+    setPendingReceiptFiles(prev => prev.filter((_, i) => i !== index))
+  }
+
  const [saving, setSaving] = useState(false)

  const isTicketMode = splitMode === 'ticket'
@@ -1119,6 +1188,10 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
  const totalNum = isTicketMode ? ticketInfo.total : (Number.parseFloat(total) || 0)
  const splitSum = [...participants].reduce((sum, id) => sum + (Number.parseFloat(customAmounts[id]) || 0), 0)
  const customBalanced = Math.round(splitSum * 100) === Math.round(totalNum * 100)
+  // How much is still to be handed out, read on the total's own side: on a refund
+  // (#2176) the shares run negative, so a plain total minus sum flips under and
+  // over around and sends the user the wrong way.
+  const splitShortfall = totalNum < 0 ? splitSum - totalNum : totalNum - splitSum
  const each = participants.size > 0 ? totalNum / participants.size : 0
  const equalShares = useMemo(() => {
    return splitEqualShares(totalNum, [...participants].map(id => ({ user_id: id })), editing?.id || 0)
@@ -1131,17 +1204,22 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
    const enteredSum = [...participants]
      .filter(id => customAmounts[id])
      .reduce((sum, id) => sum + (Number.parseFloat(customAmounts[id]) || 0), 0)
-    const remaining = Math.max(0, totalNum - enteredSum)
+    // Clamped toward zero on the total's own side, so an over-entered positive
+    // split never suggests negative leftovers — while a negative total (#2176)
+    // still previews its negative equal shares.
+    const rest = totalNum - enteredSum
+    const remaining = totalNum >= 0 ? Math.max(0, rest) : Math.min(0, rest)

    return splitEqualShares(remaining, emptyParts.map(id => ({ user_id: id })), editing?.id || 0)
  }, [totalNum, participants, customAmounts, editing])
-  
+
  const ticketValid = ticketItems.length > 0 && ticketItems.every(item => item.name.trim().length > 0 && (Number.parseFloat(item.price) || 0) > 0 && item.participants.size > 0)
  const payersOk = !multiPayer || (payerIds.size > 0 && payersBalanced(payerAmounts, payerIds, totalNum))
+  // A negative total is a valid entry (a refund, #2176); only zero has nothing to say.
  const valid = name.trim().length > 0 && payersOk && (
    isTicketMode
      ? ticketValid
-      : totalNum > 0 && (participants.size === 0 || splitMode === 'equally' || customBalanced)
+      : totalNum !== 0 && (participants.size === 0 || splitMode === 'equally' || customBalanced)
  )

  const onTotalChange = (v: string) => {
@@ -1196,7 +1274,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo

  const handleCustomAmountChange = (id: number, val: string) => {
    val = val.replace(',', '.')
-    if (/^\d*\.?\d{0,2}$/.test(val) || val === '') {
+    if (val === '' || amountPattern(currency, true).test(val)) {
      setCustomAmounts(prev => ({ ...prev, [id]: val }))
    }
  }
@@ -1219,7 +1297,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo

  const handleUpdateItemPrice = (id: string, price: string) => {
    price = price.replace(',', '.')
-    if (/^\d*\.?\d{0,2}$/.test(price) || price === '') {
+    if (price === '' || amountPattern(currency, false).test(price)) {
      setTicketItems(prev => prev.map(item => item.id === id ? { ...item, price } : item))
    }
  }
@@ -1264,7 +1342,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
    const payerList = multiPayer
      ? [...payerIds]
          .map(id => ({ user_id: id, amount: Number.parseFloat(payerAmounts[id]) || 0 }))
-          .filter(p => p.amount > 0)
+          .filter(p => p.amount !== 0)
      : payerId > 0 ? [{ user_id: payerId, amount: totalNum }] : []
    // A receipt line can name somebody who is not ticked as a participant. Sending
    // only the ticked set would drop their share, leaving the member sum short of
@@ -1295,12 +1373,23 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
      ...(!editing && prefill?.placeId ? { place_id: prefill.placeId } : {}),
    }
    try {
-      if (editing) await updateBudgetItem(tripId, editing.id, data)
-      else await addBudgetItem(tripId, data)
+      setUploadingReceipt(pendingReceiptFiles.length > 0)
+      await saveWithReceipts(tripId, pendingReceiptFiles, editing ? editing.id : null, ids => (
+        editing
+          ? updateBudgetItem(tripId, editing.id, { ...data, receipt_file_ids: [...receipts.map(r => r.id), ...ids] })
+          : addBudgetItem(tripId, { ...data, receipt_file_ids: ids })
+      ))
+      // Only cleared once the save went through, so a retry after a failure
+      // does not upload a second copy of every file.
+      setPendingReceiptFiles([])
      onSaved()
-    } catch {
-      toast.error(t('common.unknownError'))
+    } catch (err) {
+      // A receipt the rollback could not remove is still on the trip, and the
+      // user is the only one who can clear it out of the Files tab.
+      const stuck = (err as { stuckReceiptIds?: number[] })?.stuckReceiptIds
+      toast.error(stuck?.length ? t('costs.receiptLeftBehind', { count: stuck.length }) : t('common.unknownError'))
    } finally {
+      setUploadingReceipt(false)
      setSaving(false)
    }
  }
@@ -1334,8 +1423,9 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
          <label className={labelCls}>{t('costs.totalAmount')}</label>
          <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px', opacity: isTicketMode ? 0.6 : 1 }}>
            <span className="text-content-faint" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))' }}>{sym(currency)}</span>
-            <NumericInput mode="decimal" placeholder={localizeAmountInput('0.00', currency)} value={localizeAmountInput(isTicketMode ? ticketInfo.total.toFixed(2) : total, currency)}
+            <NumericInput mode="signed-decimal" placeholder={localizeAmountInput('0.00', currency)} value={localizeAmountInput(isTicketMode ? ticketInfo.total.toFixed(2) : total, currency)}
              onValueChange={onTotalChange}
+              signToggleLabel={t('costs.toggleSign')}
              disabled={isTicketMode}
              className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, paddingLeft: 6, width: '100%' }} />
          </div>
@@ -1353,7 +1443,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
          </div>
        </div>

-        {currency !== base && totalNum > 0 && (
+        {currency !== base && totalNum !== 0 && (
          <div className="bg-surface-secondary border border-edge text-content-muted" style={{ borderRadius: 10, padding: '10px 12px', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
            <span>{formatMoney(totalNum, currency, locale)}</span>
            <span className="text-content-faint">≈</span>
@@ -1422,7 +1512,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
                      {on ? (
                        <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
                          <span className="text-content-faint" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>{sym(currency)}</span>
-                          <NumericInput mode="decimal" placeholder={localizeAmountInput('0.00', currency)} data-testid="payer-amount"
+                          <NumericInput mode="signed-decimal" placeholder={localizeAmountInput('0.00', currency)} data-testid="payer-amount"
                            value={localizeAmountInput(payerAmounts[p.id] || '', currency)}
                            onValueChange={v => onPayerAmountChange(p.id, v)}
                            className="text-content"
@@ -1591,7 +1681,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
                  <span style={{ fontWeight: 600, color: customBalanced ? '#16a34a' : '#dc2626' }}>
                    {customBalanced
                      ? t('costs.splitBalanced')
-                      : t(totalNum - splitSum > 0 ? 'costs.splitSumUnder' : 'costs.splitSumOver', {
+                      : t(splitShortfall > 0 ? 'costs.splitSumUnder' : 'costs.splitSumOver', {
                          sum: sym(currency) + splitSum.toFixed(2),
                          total: sym(currency) + totalNum.toFixed(2),
                          diff: sym(currency) + Math.abs(totalNum - splitSum).toFixed(2),
@@ -1609,8 +1699,91 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
            placeholder={t('costs.notePlaceholder')} maxLength={NOTE_MAX}
            className={inputCls} style={{ borderRadius: 10, padding: '10px 13px', fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', outline: 'none', resize: 'vertical', minHeight: 68, width: '100%', boxSizing: 'border-box', fontFamily: 'inherit', lineHeight: 1.5 }} />
        </div>
+
+        <div className={panelCls}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
+            <label className={labelCls} style={{ marginBottom: 0 }}>{t('costs.receiptsTitle') || t('costs.receipts')}</label>
+            <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 'calc(12px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>
+              <input
+                type="file"
+                multiple
+                accept="image/*,application/pdf"
+                style={{ display: 'none' }}
+                onChange={e => {
+                  handleReceiptFileSelect(e.target.files)
+                  e.target.value = ''
+                }}
+              />
+              <span className="bg-surface-card border border-edge text-content-muted hover:text-content transition-colors" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 999 }}>
+                <Plus size={13} /> {t('costs.attachReceipt')}
+              </span>
+            </label>
+          </div>
+
+          {uploadingReceipt && (
+            <div className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-caption, 1))', marginBottom: 8 }}>
+              {t('common.saving')}...
+            </div>
+          )}
+
+          {receipts.length === 0 && pendingReceiptFiles.length === 0 ? (
+            <div className="text-content-faint" style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', padding: '6px 0' }}>
+              {t('costs.noReceipts')}
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
+              {receipts.map((r, rIdx) => (
+                <div key={r.id} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '7px 11px', borderRadius: 10 }}>
+                  <button
+                    type="button"
+                    onClick={() => setModalPreviewReceipts({ receipts, initialIndex: rIdx })}
+                    className="text-content hover:underline"
+                    style={{ display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0, background: 'none', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}
+                  >
+                    <Receipt size={14} className="text-content-faint flex-shrink-0" />
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.original_name}</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveReceipt(r.id)}
+                    title={t('costs.deleteReceipt')}
+                    className="text-content-muted hover:text-red-500 transition-colors"
+                    style={{ background: 'none', border: 0, padding: 3, cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+              ))}
+              {pendingReceiptFiles.map((file, idx) => (
+                <div key={idx} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '7px 11px', borderRadius: 10 }}>
+                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0, fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>
+                    <Paperclip size={14} className="text-content-faint flex-shrink-0" />
+                    <span className="text-content" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.name}</span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleRemovePendingReceipt(idx)}
+                    title={t('costs.deleteReceipt')}
+                    className="text-content-muted hover:text-red-500 transition-colors"
+                    style={{ background: 'none', border: 0, padding: 3, cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
        </div>
      </div>
+
+      {modalPreviewReceipts && (
+        <ReceiptPreviewModal
+          receipts={modalPreviewReceipts.receipts}
+          initialIndex={modalPreviewReceipts.initialIndex}
+          onClose={() => setModalPreviewReceipts(null)}
+        />
+      )}
    </Modal>
  )
 }
@@ -0,0 +1,99 @@
+// FE-BUDGET-PREVIEW-001 to FE-BUDGET-PREVIEW-008: the receipt viewer that opens
+// on top of the expense form.
+import { vi } from 'vitest'
+import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render'
+import { ReceiptPreviewModal } from './ReceiptPreviewModal'
+import type { BudgetItemReceipt } from '../../types'
+
+const authUrl = vi.hoisted(() => ({ get: vi.fn() }))
+vi.mock('../../api/authUrl', () => ({ getAuthUrl: (...a: unknown[]) => authUrl.get(...a) }))
+
+function receipt(over: Partial<BudgetItemReceipt> = {}): BudgetItemReceipt {
+  return {
+    id: 1,
+    filename: 'stored.jpg',
+    original_name: 'lunch.jpg',
+    mime_type: 'image/jpeg',
+    file_size: 100,
+    url: '/uploads/files/stored.jpg',
+    ...over,
+  } as BudgetItemReceipt
+}
+
+beforeEach(() => {
+  authUrl.get.mockReset().mockResolvedValue('/signed/stored.jpg')
+})
+
+describe('ReceiptPreviewModal', () => {
+  it('FE-BUDGET-PREVIEW-001: renders an image receipt once the signed url is in', async () => {
+    render(<ReceiptPreviewModal receipts={[receipt()]} onClose={vi.fn()} />)
+    await waitFor(() => expect(screen.getByRole('img')).toHaveAttribute('src', '/signed/stored.jpg'))
+  })
+
+  it('FE-BUDGET-PREVIEW-002: renders a PDF in a frame rather than an image', async () => {
+    render(<ReceiptPreviewModal receipts={[receipt({ mime_type: 'application/pdf', original_name: 'bill.pdf' })]} onClose={vi.fn()} />)
+    // The viewer renders through a portal, so it lives on document.body.
+    await waitFor(() => expect(document.body.querySelector('object[type="application/pdf"]')).not.toBeNull())
+    expect(screen.queryByRole('img')).toBeNull()
+  })
+
+  it('FE-BUDGET-PREVIEW-003: a type it cannot show falls back instead of rendering an empty frame', async () => {
+    render(<ReceiptPreviewModal receipts={[receipt({ mime_type: 'application/zip', original_name: 'receipts.zip' })]} onClose={vi.fn()} />)
+    await waitFor(() => expect(authUrl.get).toHaveBeenCalled())
+    expect(document.body.querySelector('object')).toBeNull()
+    expect(screen.queryByRole('img')).toBeNull()
+    expect(screen.getAllByText('receipts.zip').length).toBeGreaterThan(0)
+  })
+
+  it('FE-BUDGET-PREVIEW-004: a rejected signed url leaves the viewer up rather than blank-screening', async () => {
+    authUrl.get.mockRejectedValue(new Error('403'))
+    render(<ReceiptPreviewModal receipts={[receipt()]} onClose={vi.fn()} />)
+    await waitFor(() => expect(authUrl.get).toHaveBeenCalled())
+    expect(screen.getAllByText('lunch.jpg').length).toBeGreaterThan(0)
+  })
+
+  it('FE-BUDGET-PREVIEW-005: arrows walk the list and stop at both ends', async () => {
+    const two = [receipt({ id: 1, original_name: 'one.jpg' }), receipt({ id: 2, original_name: 'two.jpg' })]
+    render(<ReceiptPreviewModal receipts={two} onClose={vi.fn()} />)
+    await waitFor(() => expect(screen.getAllByText('one.jpg').length).toBeGreaterThan(0))
+
+    fireEvent.keyDown(window, { key: 'ArrowLeft' })
+    expect(screen.getAllByText('one.jpg').length).toBeGreaterThan(0)
+
+    fireEvent.keyDown(window, { key: 'ArrowRight' })
+    await waitFor(() => expect(screen.getAllByText('two.jpg').length).toBeGreaterThan(0))
+
+    fireEvent.keyDown(window, { key: 'ArrowRight' })
+    expect(screen.getAllByText('two.jpg').length).toBeGreaterThan(0)
+  })
+
+  it('FE-BUDGET-PREVIEW-006: an out-of-range initialIndex is clamped instead of rendering nothing', async () => {
+    const two = [receipt({ id: 1, original_name: 'one.jpg' }), receipt({ id: 2, original_name: 'two.jpg' })]
+    render(<ReceiptPreviewModal receipts={two} initialIndex={99} onClose={vi.fn()} />)
+    await waitFor(() => expect(screen.getAllByText('two.jpg').length).toBeGreaterThan(0))
+  })
+
+  it('FE-BUDGET-PREVIEW-007: Escape closes the viewer and is stopped before the form behind it sees it', async () => {
+    const onClose = vi.fn()
+    const parent = vi.fn()
+    document.addEventListener('keydown', parent)
+    try {
+      render(<ReceiptPreviewModal receipts={[receipt()]} onClose={onClose} />)
+      await waitFor(() => expect(authUrl.get).toHaveBeenCalled())
+
+      fireEvent.keyDown(window, { key: 'Escape' })
+      expect(onClose).toHaveBeenCalledTimes(1)
+      // The expense form registers its own Escape handler on `document`; one
+      // keypress must not close both and throw away the user's edits.
+      expect(parent).not.toHaveBeenCalled()
+    } finally {
+      document.removeEventListener('keydown', parent)
+    }
+  })
+
+  it('FE-BUDGET-PREVIEW-008: an empty list renders nothing at all', () => {
+    render(<ReceiptPreviewModal receipts={[]} onClose={vi.fn()} />)
+    expect(document.body.querySelector('object')).toBeNull()
+    expect(screen.queryByRole('img')).toBeNull()
+  })
+})
@@ -0,0 +1,405 @@
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { ExternalLink, Download, X, FileText, ChevronLeft, ChevronRight, FileImage } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { getAuthUrl } from '../../api/authUrl'
+import { openFile as openFileUrl } from '../../utils/fileDownload'
+import { triggerDownload, isImage } from '../Files/FileManager.helpers'
+import type { BudgetItemReceipt } from '../../types'
+
+interface ReceiptPreviewModalProps {
+  receipts: BudgetItemReceipt[]
+  initialIndex?: number
+  onClose: () => void
+}
+
+export function ReceiptPreviewModal({ receipts, initialIndex = 0, onClose }: ReceiptPreviewModalProps) {
+  const { t } = useTranslation()
+  const [index, setIndex] = useState(Math.max(0, Math.min(initialIndex, receipts.length - 1)))
+  const [signedUrl, setSignedUrl] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const current = receipts[index]
+  const isImg = isImage(current?.mime_type)
+  const isPdf = current?.mime_type === 'application/pdf' || current?.original_name?.toLowerCase().endsWith('.pdf')
+
+  useEffect(() => {
+    if (!current) return
+    let cancelled = false
+    setLoading(true)
+    setSignedUrl('')
+
+    getAuthUrl(current.url, 'download')
+      .then(url => {
+        if (!cancelled) {
+          setSignedUrl(url)
+          setLoading(false)
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoading(false)
+      })
+
+    return () => { cancelled = true }
+  }, [current?.url])
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        // The preview opens on top of the expense form, and both the desktop
+        // Modal and the phone MSheet close themselves on Escape from a listener
+        // on `document`. Without this the one keypress closed the form too and
+        // threw away whatever the user had typed into it.
+        e.preventDefault()
+        e.stopPropagation()
+        onClose()
+        return
+      }
+      if (e.key === 'ArrowLeft' && index > 0) setIndex(i => i - 1)
+      if (e.key === 'ArrowRight' && index < receipts.length - 1) setIndex(i => i + 1)
+    }
+    // Capture phase, so this runs before the listeners the parents put on
+    // `document`; stopPropagation on the bubble phase would be too late.
+    window.addEventListener('keydown', handleKey, true)
+    return () => window.removeEventListener('keydown', handleKey, true)
+  }, [index, receipts.length, onClose])
+
+  if (!current) return null
+
+  const handleOpenTab = () => {
+    openFileUrl(current.url, current.original_name).catch(() => {})
+  }
+
+  const handleDownload = () => {
+    triggerDownload(current.url, current.original_name)
+  }
+
+  return createPortal(
+    <div
+      role="presentation"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0, 0, 0, 0.85)',
+        zIndex: 10000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 16,
+      }}
+      onClick={e => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div
+        role="presentation"
+        style={{
+          width: '100%',
+          maxWidth: 950,
+          height: '94vh',
+          background: 'var(--bg-card)',
+          borderRadius: 12,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header - identical to PdfPreviewModal */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '10px 16px',
+            borderBottom: '1px solid var(--border-primary)',
+            flexShrink: 0,
+          }}
+        >
+          <span
+            style={{
+              fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+              fontWeight: 600,
+              color: 'var(--text-primary)',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              flex: 1,
+            }}
+          >
+            {current.original_name}
+          </span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+            <button
+              type="button"
+              onClick={handleOpenTab}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+                color: 'var(--text-muted)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                textDecoration: 'none',
+                padding: '4px 8px',
+                borderRadius: 6,
+                transition: 'color 0.15s',
+              }}
+              onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary)')}
+              onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-muted)')}
+            >
+              <ExternalLink size={13} /> {t('files.openTab')}
+            </button>
+            <button
+              type="button"
+              onClick={handleDownload}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+                color: 'var(--text-muted)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                textDecoration: 'none',
+                padding: '4px 8px',
+                borderRadius: 6,
+                transition: 'color 0.15s',
+              }}
+              onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary)')}
+              onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-muted)')}
+            >
+              <Download size={13} /> {t('files.download') || 'Download'}
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--text-faint)',
+                display: 'flex',
+                padding: 4,
+                borderRadius: 6,
+                transition: 'color 0.15s',
+              }}
+              onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary)')}
+              onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-faint)')}
+            >
+              <X size={18} />
+            </button>
+          </div>
+        </div>
+
+        {/* Tab strip if multiple receipts */}
+        {receipts.length > 1 && (
+          <div
+            className="bg-surface-secondary"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              padding: '6px 14px',
+              borderBottom: '1px solid var(--border-primary)',
+              overflowX: 'auto',
+              flexShrink: 0,
+            }}
+          >
+            {receipts.map((r, i) => {
+              const active = i === index
+              const isRImg = isImage(r.mime_type)
+              const Icon = isRImg ? FileImage : FileText
+              return (
+                <button
+                  key={r.id}
+                  type="button"
+                  onClick={() => setIndex(i)}
+                  className={active ? 'bg-surface-card text-content font-semibold shadow-sm' : 'text-content-muted hover:text-content'}
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '5px 11px',
+                    borderRadius: 8,
+                    border: active ? '1px solid var(--border-primary)' : '1px solid transparent',
+                    background: active ? 'var(--bg-card)' : 'none',
+                    fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))',
+                    cursor: 'pointer',
+                    whiteSpace: 'nowrap',
+                    flexShrink: 0,
+                    fontFamily: 'inherit',
+                    transition: 'all 0.15s',
+                  }}
+                >
+                  <Icon size={12} className={active ? 'text-content' : 'text-content-faint'} />
+                  <span style={{ maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                    {r.original_name}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
+                      opacity: active ? 0.8 : 0.5,
+                      marginLeft: 2,
+                    }}
+                  >
+                    #{i + 1}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Content Body */}
+        <div
+          style={{
+            flex: 1,
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+            background: isImg ? '#0f141c' : 'var(--bg-card)',
+            minHeight: 0,
+          }}
+        >
+          {receipts.length > 1 && index > 0 && (
+            <button
+              type="button"
+              onClick={() => setIndex(i => i - 1)}
+              style={{
+                position: 'absolute',
+                left: 14,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 10,
+                width: 36,
+                height: 36,
+                borderRadius: '50%',
+                background: 'rgba(0,0,0,0.5)',
+                color: '#fff',
+                border: '1px solid rgba(255,255,255,0.2)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              <ChevronLeft size={20} />
+            </button>
+          )}
+
+          {receipts.length > 1 && index < receipts.length - 1 && (
+            <button
+              type="button"
+              onClick={() => setIndex(i => i + 1)}
+              style={{
+                position: 'absolute',
+                right: 14,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 10,
+                width: 36,
+                height: 36,
+                borderRadius: '50%',
+                background: 'rgba(0,0,0,0.5)',
+                color: '#fff',
+                border: '1px solid rgba(255,255,255,0.2)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              <ChevronRight size={20} />
+            </button>
+          )}
+
+          {isPdf ? (
+            <object
+              data={signedUrl ? `${signedUrl}#view=FitH` : undefined}
+              type="application/pdf"
+              style={{ flex: 1, width: '100%', height: '100%', border: 'none' }}
+              title={current.original_name}
+            >
+              <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
+                <button
+                  type="button"
+                  onClick={handleOpenTab}
+                  style={{
+                    color: 'var(--text-primary)',
+                    textDecoration: 'underline',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    font: 'inherit',
+                  }}
+                >
+                  {t('files.downloadPdf')}
+                </button>
+              </p>
+            </object>
+          ) : isImg ? (
+            <div
+              style={{
+                padding: 16,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              {signedUrl ? (
+                <img
+                  src={signedUrl}
+                  alt={current.original_name}
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    objectFit: 'contain',
+                    borderRadius: 6,
+                    display: 'block',
+                  }}
+                />
+              ) : (
+                <div className="text-content-faint" style={{ padding: 48 }}>
+                  {loading ? `${t('common.loading')}...` : current.original_name}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div style={{ padding: 40, textAlign: 'center' }}>
+              <FileText size={44} className="text-content-muted mx-auto" style={{ marginBottom: 16 }} />
+              <p className="text-content font-medium" style={{ marginBottom: 14 }}>
+                {current.original_name}
+              </p>
+              <button
+                type="button"
+                onClick={handleDownload}
+                className="bg-accent text-accent-text"
+                style={{
+                  padding: '9px 18px',
+                  borderRadius: 10,
+                  border: 0,
+                  cursor: 'pointer',
+                  fontWeight: 600,
+                  fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+                  fontFamily: 'inherit',
+                }}
+              >
+                {t('files.download')}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
@@ -0,0 +1,91 @@
+// FE-BUDGET-RECEIPT-001 to FE-BUDGET-RECEIPT-008: uploading receipts with an
+// expense, and taking the uploads back out when the expense fails to save.
+import { vi } from 'vitest'
+import { uploadReceipts, discardReceipts, saveWithReceipts } from './receiptUploads'
+
+const files = vi.hoisted(() => ({
+  upload: vi.fn(),
+  delete: vi.fn(),
+  permanentDelete: vi.fn(),
+}))
+
+vi.mock('../../api/client', () => ({ filesApi: files }))
+
+function file(name: string) {
+  return new File(['x'], name, { type: 'image/jpeg' })
+}
+
+beforeEach(() => {
+  files.upload.mockReset().mockImplementation(() => Promise.resolve({ file: { id: 7 } }))
+  files.delete.mockReset().mockResolvedValue({})
+  files.permanentDelete.mockReset().mockResolvedValue({})
+})
+
+describe('uploadReceipts', () => {
+  it('FE-BUDGET-RECEIPT-001: names the expense on the form data when there is one', async () => {
+    await uploadReceipts(3, [file('a.jpg')], 42)
+    const fd = files.upload.mock.calls[0][1] as FormData
+    expect(fd.get('budget_item_id')).toBe('42')
+  })
+
+  it('FE-BUDGET-RECEIPT-002: leaves it out for an expense that does not exist yet', async () => {
+    await uploadReceipts(3, [file('a.jpg')], null)
+    const fd = files.upload.mock.calls[0][1] as FormData
+    expect(fd.get('budget_item_id')).toBeNull()
+  })
+
+  it('FE-BUDGET-RECEIPT-003: returns the ids in order and skips a response without one', async () => {
+    files.upload
+      .mockResolvedValueOnce({ file: { id: 11 } })
+      .mockResolvedValueOnce({})
+      .mockResolvedValueOnce({ file: { id: 13 } })
+    expect(await uploadReceipts(3, [file('a'), file('b'), file('c')], null)).toEqual([11, 13])
+  })
+})
+
+describe('discardReceipts', () => {
+  it('FE-BUDGET-RECEIPT-004: trashes before it deletes, because the permanent route only accepts a trashed file', async () => {
+    const order: string[] = []
+    files.delete.mockImplementation(() => { order.push('delete'); return Promise.resolve({}) })
+    files.permanentDelete.mockImplementation(() => { order.push('permanent'); return Promise.resolve({}) })
+
+    expect(await discardReceipts(3, [9])).toEqual([])
+    expect(order).toEqual(['delete', 'permanent'])
+  })
+
+  it('FE-BUDGET-RECEIPT-005: reports the ids it could not remove instead of swallowing them', async () => {
+    files.delete.mockRejectedValueOnce(new Error('403'))
+    expect(await discardReceipts(3, [9, 10])).toEqual([9])
+  })
+})
+
+describe('saveWithReceipts', () => {
+  it('FE-BUDGET-RECEIPT-006: hands the uploaded ids to the save and returns its result', async () => {
+    files.upload.mockResolvedValueOnce({ file: { id: 5 } }).mockResolvedValueOnce({ file: { id: 6 } })
+    const save = vi.fn().mockResolvedValue('saved')
+    const out = await saveWithReceipts(3, [file('a'), file('b')], null, save)
+    expect(save).toHaveBeenCalledWith([5, 6])
+    expect(out.result).toBe('saved')
+    expect(files.delete).not.toHaveBeenCalled()
+  })
+
+  it('FE-BUDGET-RECEIPT-007: a failing save takes every upload back out again', async () => {
+    files.upload.mockResolvedValueOnce({ file: { id: 5 } }).mockResolvedValueOnce({ file: { id: 6 } })
+    const save = vi.fn().mockRejectedValue(new Error('nope'))
+
+    await expect(saveWithReceipts(3, [file('a'), file('b')], null, save)).rejects.toThrow('nope')
+    expect(files.delete.mock.calls.map(c => c[1])).toEqual([5, 6])
+    expect(files.permanentDelete.mock.calls.map(c => c[1])).toEqual([5, 6])
+  })
+
+  it('FE-BUDGET-RECEIPT-008: a failure partway through the upload rolls back what already went up, and says what stuck', async () => {
+    files.upload.mockResolvedValueOnce({ file: { id: 5 } }).mockRejectedValueOnce(new Error('offline'))
+    files.delete.mockRejectedValueOnce(new Error('403'))
+    const save = vi.fn()
+
+    const err = await saveWithReceipts(3, [file('a'), file('b')], null, save).catch(e => e)
+    expect(save).not.toHaveBeenCalled()
+    expect(files.delete.mock.calls.map(c => c[1])).toEqual([5])
+    expect(err.stuckReceiptIds).toEqual([5])
+  })
+})
@@ -0,0 +1,87 @@
+import { filesApi } from '../../api/client'
+
+/**
+ * Uploading receipts alongside an expense, and undoing it when the expense
+ * itself fails to save.
+ *
+ * One module for both shells. The desktop form and the phone sheet each had
+ * their own copy of this, three near-identical try/catch blocks apiece, which is
+ * six places for the same bug to sit and six copies against the duplication
+ * budget the PR gate measures.
+ */
+
+/** Upload each file and return the ids the server handed back, in order. */
+export async function uploadReceipts(
+  tripId: number | string,
+  files: readonly File[],
+  budgetItemId: number | null,
+): Promise<number[]> {
+  const ids: number[] = []
+  for (const file of files) {
+    const fd = new FormData()
+    fd.append('file', file)
+    // Only an existing expense can be named here. A new one has no id yet, so
+    // its receipts are linked by the create call instead.
+    if (budgetItemId != null) fd.append('budget_item_id', String(budgetItemId))
+    const res = await filesApi.upload(tripId, fd)
+    if (res?.file?.id) ids.push(res.file.id)
+  }
+  return ids
+}
+
+/**
+ * Undo an upload after the save it belonged to failed.
+ *
+ * Two calls per file, and the order matters: the permanent route only accepts a
+ * file that is already in the trash (`deleted_at IS NOT NULL`), so calling it on
+ * a freshly uploaded file answers 404 and the file stays on the trip. The soft
+ * delete puts it there first. It also drops the receipt link the upload created,
+ * so a failed edit does not leave the file attached to the expense.
+ *
+ * Returns the ids it could not remove. The caller is expected to say so rather
+ * than swallow it: a file left behind is a file the user has to find in the
+ * Files tab and delete by hand.
+ */
+export async function discardReceipts(
+  tripId: number | string,
+  ids: readonly number[],
+): Promise<number[]> {
+  const stuck: number[] = []
+  for (const id of ids) {
+    try {
+      await filesApi.delete(tripId, id)
+      await filesApi.permanentDelete(tripId, id)
+    } catch {
+      stuck.push(id)
+    }
+  }
+  return stuck
+}
+
+/**
+ * Upload the pending receipts, run the save, and take the uploads back out
+ * again if it throws.
+ *
+ * The rollback runs for a failure in the save AND for one partway through the
+ * upload loop, which is why the ids are collected outside the try.
+ */
+export async function saveWithReceipts<T>(
+  tripId: number | string,
+  files: readonly File[],
+  budgetItemId: number | null,
+  save: (uploadedIds: number[]) => Promise<T>,
+): Promise<{ result: T; stuckIds: number[] }> {
+  const uploaded: number[] = []
+  try {
+    for (const file of files) {
+      const [id] = await uploadReceipts(tripId, [file], budgetItemId)
+      if (id != null) uploaded.push(id)
+    }
+    const result = await save(uploaded)
+    return { result, stuckIds: [] }
+  } catch (err) {
+    const stuck = await discardReceipts(tripId, uploaded)
+    ;(err as { stuckReceiptIds?: number[] }).stuckReceiptIds = stuck
+    throw err
+  }
+}
@@ -1,5 +1,5 @@
 import { createPortal } from 'react-dom'
-import { ArrowUp, Reply, Smile, X } from 'lucide-react'
+import { ArrowUp, ImagePlus, Reply, Smile, X } from 'lucide-react'
 import type { User } from '../../types'
 import { useCollabChat } from './useCollabChat'
 import { ChatMessages } from './CollabChatMessages'
@@ -14,7 +14,7 @@ interface CollabChatProps {

 export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
  const S = useCollabChat(tripId, currentUser)
-  const { t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly } = S
+  const { t, canEdit, loading, text, replyTo, setReplyTo, sending, showEmoji, setShowEmoji, reactMenu, setReactMenu, containerRef, textareaRef, emojiBtnRef, imageInputRef, imageFiles, imagePreviews, uploadProgress, addImageFiles, removeImage, handlePaste, handleDrop, handleTextChange, handleSend, handleKeyDown, handleReact, handleEmojiSelect } = S
  if (loading) {
    return (
      <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -27,7 +27,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, height: '100%' }}>
      <ChatMessages {...S} />
      {/* Composer */}
-      <div style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)' }} className="pb-3 bg-surface-card">
+      <div onDragOver={e => e.preventDefault()} onDrop={handleDrop} style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)' }} className="pb-3 bg-surface-card">
        {/* Reply preview */}
        {replyTo && (
          <div style={{
@@ -48,6 +48,8 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
          </div>
        )}

+        {imagePreviews.length > 0 && <div style={{ display: 'flex', gap: 8, marginBottom: 8, overflowX: 'auto' }}>{imagePreviews.map((url, i) => <div key={url} style={{ position: 'relative' }}><img src={url} alt="" style={{ width: 56, height: 56, objectFit: 'cover', borderRadius: 8 }} /><button type="button" onClick={() => removeImage(i)} aria-label="Remove image" style={{ position: 'absolute', top: -6, right: -6, border: 0, borderRadius: '50%', background: 'var(--text-primary)', color: 'var(--bg-primary)', width: 18, height: 18, cursor: 'pointer' }}>×</button></div>)}</div>}
+        {uploadProgress > 0 && uploadProgress < 100 && <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>Uploading {uploadProgress}%</div>}
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
          {/* Emoji button */}
          {canEdit && (
@@ -61,6 +63,8 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
            </button>
          )}

+          {canEdit && <><input ref={imageInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple hidden onChange={e => { if (e.target.files) addImageFiles(e.target.files); e.currentTarget.value = '' }} /><button type="button" onClick={() => imageInputRef.current?.click()} aria-label="Attach images" style={{ width: 34, height: 34, borderRadius: '50%', border: 'none', background: 'transparent', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0 }}><ImagePlus size={19} /></button></>}
+
          <textarea
            ref={textareaRef}
            rows={1}
@@ -76,15 +80,16 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
            value={text}
            onChange={handleTextChange}
            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
          />

          {/* Send */}
          {canEdit && (
-            <button type="button" onClick={handleSend} disabled={!text.trim() || sending} style={{
+            <button type="button" onClick={handleSend} disabled={(!text.trim() && !imageFiles.length) || sending} style={{
              width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: text.trim() ? '#007AFF' : 'var(--border-primary)',
+              background: text.trim() || imageFiles.length ? '#007AFF' : 'var(--border-primary)',
              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
+              cursor: text.trim() || imageFiles.length ? 'pointer' : 'default', flexShrink: 0,
              transition: 'background 0.15s',
            }}>
              <ArrowUp size={18} strokeWidth={2.5} />
@@ -0,0 +1,10 @@
+import { useState } from 'react'
+import { X } from 'lucide-react'
+
+export function CollabChatAttachment({ attachment }: { attachment: { url: string; original_name?: string; mime_type?: string } }) {
+  const [open, setOpen] = useState(false)
+  return <>
+    <img src={attachment.url} alt={attachment.original_name || 'Attached image'} onClick={() => setOpen(true)} style={{ display: 'block', width: 180, maxWidth: '100%', maxHeight: 220, objectFit: 'cover', borderRadius: 10, cursor: 'zoom-in', marginTop: 4 }} />
+    {open && <div role="dialog" onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,.82)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}><button aria-label="Close image" onClick={() => setOpen(false)} style={{ position: 'fixed', top: 18, right: 18, background: 'rgba(255,255,255,.15)', color: '#fff', border: 0, borderRadius: '50%', width: 36, height: 36 }}><X size={20} /></button><img src={attachment.url} alt={attachment.original_name || 'Attached image'} onClick={e => e.stopPropagation()} style={{ maxWidth: '95vw', maxHeight: '90vh', objectFit: 'contain' }} /></div>}
+  </>
+}
@@ -3,6 +3,7 @@ import { Trash2, Reply, ChevronUp } from 'lucide-react'
 import { URL_REGEX } from './CollabChat.constants'
 import { formatTime, formatDateSeparator, shouldShowDateSeparator } from './CollabChat.helpers'
 import { MessageText } from './CollabChatMessageText'
+import { CollabChatAttachment } from './CollabChatAttachment'
 import { LinkPreview } from './CollabChatLinkPreview'
 import { ReactionBadge } from './CollabChatReactionBadge'
 import EmptyState from '../shared/EmptyState'
@@ -166,6 +167,7 @@ export function ChatMessages(props: any) {
                          {hasReply ? (
                            <div style={{ padding: '0 10px 4px' }}><MessageText text={msg.text} /></div>
                          ) : <MessageText text={msg.text} />}
+                          {msg.attachments?.map((attachment: any) => <CollabChatAttachment key={attachment.id} attachment={attachment} />)}
                          {(msg.text.match(URL_REGEX) || []).slice(0, 1).map(url => (
                            <LinkPreview key={url} url={url} tripId={tripId} own={own} onLoad={() => { if (isAtBottom.current) setTimeout(() => scrollToBottom('smooth'), 50) }} />
                          ))}
@@ -0,0 +1,123 @@
+import { FormEvent, useEffect, useState } from 'react'
+import { ExternalLink, Link2, Pin, Plus, Trash2, X } from 'lucide-react'
+import { collabApi } from '../../api/client'
+import { addListener, removeListener } from '../../api/websocket'
+import { useTranslation } from '../../i18n'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
+import { useToast } from '../shared/Toast'
+
+interface CollabLink {
+  id: number
+  title: string
+  url: string
+  pinned: boolean | number
+}
+
+function LinkIcon({ url, title }: { url: string; title: string }) {
+  const [failed, setFailed] = useState(false)
+  let favicon = ''
+  try { favicon = new URL('/favicon.ico', url).href } catch { favicon = '' }
+  if (!favicon || failed) return <span aria-hidden="true" style={{ display: 'grid', placeItems: 'center', width: 28, height: 28, flex: '0 0 28px', borderRadius: 7, background: 'var(--bg-secondary)', color: 'var(--text-faint)' }}><Link2 size={15} /></span>
+  return <img src={favicon} alt="" aria-hidden="true" title={title} onError={() => setFailed(true)} style={{ width: 28, height: 28, flex: '0 0 28px', borderRadius: 7, objectFit: 'contain', background: 'var(--bg-secondary)' }} />
+}
+
+export default function CollabLinks({ tripId }: { tripId: number }) {
+  const { t } = useTranslation()
+  const trip = useTripStore(s => s.trip)
+  const canEdit = useCanDo()('collab_edit', trip)
+  const toast = useToast()
+  const [links, setLinks] = useState<CollabLink[]>([])
+  const [title, setTitle] = useState('')
+  const [url, setUrl] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    collabApi.getLinks(tripId)
+      .then(d => { if (!cancelled) setLinks(d.links || []) })
+      .catch(err => {
+        if (cancelled) return
+        console.error('Failed to load collab links:', err)
+        toast.error(t('common.error'))
+      })
+    return () => { cancelled = true }
+  }, [tripId, toast, t])
+
+  // Live sync, the same shape the notes panel uses. Without it the three
+  // collab:link events the server broadcasts would arrive nowhere and a link
+  // somebody else added would only appear on the next reload.
+  useEffect(() => {
+    if (!tripId) return
+    const handler = (msg: { type?: string; tripId?: number | string; link?: CollabLink; linkId?: number }) => {
+      // The panel is not remounted on a trip change, so an event still in
+      // flight from the trip we just left must not land in this list.
+      if (String(msg?.tripId) !== String(tripId)) return
+      if (msg.type === 'collab:link:created' && msg.link) {
+        setLinks(prev => prev.some(l => l.id === msg.link!.id) ? prev : [msg.link!, ...prev])
+      }
+      if (msg.type === 'collab:link:updated' && msg.link) {
+        setLinks(prev => prev
+          .map(l => l.id === msg.link!.id ? { ...l, ...msg.link! } : l)
+          .sort((a, b) => Number(b.pinned) - Number(a.pinned)))
+      }
+      if (msg.type === 'collab:link:deleted' && msg.linkId) {
+        setLinks(prev => prev.filter(l => l.id !== msg.linkId))
+      }
+    }
+    addListener(handler)
+    return () => removeListener(handler)
+  }, [tripId])
+
+  // Every write says something when it fails. Silence left the pin looking
+  // unchanged and the delete looking ignored, with an unhandled rejection in
+  // the console as the only trace.
+  const add = async (event?: FormEvent) => {
+    event?.preventDefault()
+    if (!title.trim() || !url.trim() || busy) return
+    setBusy(true)
+    try {
+      const d = await collabApi.createLink(tripId, { title: title.trim(), url: url.trim() })
+      setLinks(v => [d.link, ...v])
+      setTitle(''); setUrl(''); setExpanded(false)
+    } catch (err) {
+      console.error('Failed to add collab link:', err)
+      toast.error(t('common.error'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const toggle = async (link: CollabLink) => {
+    try {
+      const d = await collabApi.updateLink(tripId, link.id, { pinned: !link.pinned })
+      setLinks(v => v.map(x => x.id === link.id ? d.link : x).sort((a, b) => Number(b.pinned) - Number(a.pinned)))
+    } catch (err) {
+      console.error('Failed to pin collab link:', err)
+      toast.error(t('common.error'))
+    }
+  }
+
+  const remove = async (id: number) => {
+    try {
+      await collabApi.deleteLink(tripId, id)
+      setLinks(v => v.filter(x => x.id !== id))
+    } catch (err) {
+      console.error('Failed to delete collab link:', err)
+      toast.error(t('common.error'))
+    }
+  }
+  return <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 14px', borderBottom: '1px solid var(--border-faint)' }}><Link2 size={18} aria-hidden="true" /><strong>{t('collab.tabs.links')}</strong><span style={{ marginLeft: 'auto', color: 'var(--text-faint)', fontSize: 12 }}>{links.length}</span></div>
+    {canEdit && <div style={{ padding: 10, borderBottom: '1px solid var(--border-faint)' }}>
+      <button type="button" onClick={() => setExpanded(v => !v)} aria-expanded={expanded} aria-controls={`collab-link-form-${tripId}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: 0, borderRadius: 8, padding: '7px 10px', background: 'var(--bg-secondary)', color: 'var(--text-primary)', cursor: 'pointer', fontWeight: 600 }}>{expanded ? <X size={16} aria-hidden="true" /> : <Plus size={16} aria-hidden="true" />}{expanded ? t('collab.links.cancel') : t('collab.links.add')}</button>
+      {expanded && <form id={`collab-link-form-${tripId}`} onSubmit={add} style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
+        <label htmlFor={`collab-link-title-${tripId}`} style={{ position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0 }}>{t('collab.links.titlePlaceholder')}</label>
+        <input id={`collab-link-title-${tripId}`} value={title} onChange={e => setTitle(e.target.value)} placeholder={t('collab.links.titlePlaceholder')} autoFocus style={{ padding: 8, borderRadius: 8, border: '1px solid var(--border-primary)', background: 'var(--bg-input)', color: 'var(--text-primary)' }} />
+        <div style={{ display: 'flex', gap: 6 }}><label htmlFor={`collab-link-url-${tripId}`} style={{ position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0 }}>{t('collab.links.urlPlaceholder')}</label><input id={`collab-link-url-${tripId}`} type="url" required value={url} onChange={e => setUrl(e.target.value)} placeholder={t('collab.links.urlPlaceholder')} style={{ flex: 1, minWidth: 0, padding: 8, borderRadius: 8, border: '1px solid var(--border-primary)', background: 'var(--bg-input)', color: 'var(--text-primary)' }} /><button type="submit" disabled={busy || !title.trim() || !url.trim()} aria-label={t('collab.links.save')} style={{ width: 36, border: 0, borderRadius: 8, background: 'var(--accent)', color: 'var(--accent-text)', cursor: 'pointer' }}><Plus size={18} aria-hidden="true" /></button></div>
+      </form>}
+    </div>}
+    <div style={{ flex: 1, overflowY: 'auto', padding: 10 }}>{links.length === 0 ? <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-faint)' }}>{t('collab.links.empty')}</div> : links.map(link => <div key={link.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 6px', borderBottom: '1px solid var(--border-faint)' }}><LinkIcon url={link.url} title={link.title} /><a href={link.url} target="_blank" rel="noreferrer" style={{ flex: 1, minWidth: 0, color: 'var(--text-primary)', textDecoration: 'none' }}><div style={{ fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link.title}</div><div style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link.url}</div></a><ExternalLink size={15} color="var(--text-faint)" aria-hidden="true" />{canEdit && <><button type="button" onClick={() => toggle(link)} aria-label={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')} style={{ border: 0, background: 'transparent', color: link.pinned ? 'var(--accent)' : 'var(--text-faint)', cursor: 'pointer' }}><Pin size={15} fill={link.pinned ? 'currentColor' : 'none'} aria-hidden="true" /></button><button type="button" onClick={() => remove(link.id)} aria-label={t('collab.links.delete')} style={{ border: 0, background: 'transparent', color: 'var(--text-faint)', cursor: 'pointer' }}><Trash2 size={15} aria-hidden="true" /></button></>}</div>)}</div>
+  </div>
+}
@@ -1275,7 +1275,7 @@ describe('CollabNotes', () => {
  });
 });

-// FE-W5CNT-001 to FE-W5CNT-029
+// FE-W5CNT-001 to FE-W5CNT-036
 // Fills in the load/error/attachment/category branches of useCollabNotes and the
 // view modal that the smoke tests above do not reach.

@@ -1327,6 +1327,14 @@ function wsHandler(): (msg: Record<string, unknown>) => void {
  return (addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
 }

+function openedNoteBody(): Promise<HTMLElement> {
+  return waitFor(() => {
+    const md = document.querySelector('.collab-note-md-full');
+    if (!md) throw new Error('view modal not open yet');
+    return md as HTMLElement;
+  });
+}
+
 describe('CollabNotes details', () => {
  let addToast: ReturnType<typeof vi.fn<AddToast>>;
  let filesChanged: number;
@@ -1912,4 +1920,59 @@ describe('CollabNotes details', () => {
    // …and both rejected writes are one message, not one each.
    expect(addToast).toHaveBeenCalledTimes(1);
  });
+
+  it('FE-W5CNT-033: a placeholder in angle brackets survives sanitizing', async () => {
+    const user = userEvent.setup();
+    serveNotes({ notes: [buildNote({ id: 7, title: 'Hotel', content: 'Zimmernummer <TBD> bestaetigen' })] });
+    render(<CollabNotes {...defaultProps} />);
+    await screen.findByText('Hotel');
+    await user.click(screen.getByTitle('collab.notes.expand'));
+    const full = await openedNoteBody();
+    // Notes written before markdown rendering existed keep reading the way they
+    // were typed (#2177).
+    expect(within(full).getByText('Zimmernummer <TBD> bestaetigen')).toBeInTheDocument();
+  });
+
+  it('FE-W5CNT-034: a footnote reference lands on the footnote instead of a new tab', async () => {
+    const user = userEvent.setup();
+    serveNotes({ notes: [buildNote({ id: 8, title: 'Booking', content: 'Hotel gebucht[^1]\n\n[^1]: Bestaetigung ABC123' })] });
+    render(<CollabNotes {...defaultProps} />);
+    await screen.findByText('Booking');
+    await user.click(screen.getByTitle('collab.notes.expand'));
+    const full = await openedNoteBody();
+
+    const ref = within(full).getByRole('link', { name: '1' });
+    const href = ref.getAttribute('href')!;
+    expect(href.startsWith('#')).toBe(true);
+    expect(full.querySelector(`[id="${href.slice(1)}"]`)).not.toBeNull();
+    expect(ref).not.toHaveAttribute('target');
+  });
+
+  it('FE-W5CNT-035: the expanded note links its website out to a new tab', async () => {
+    const user = userEvent.setup();
+    serveNotes({ notes: [buildNote({ id: 9, title: 'Hotel', website: 'www.hotel.test' })] });
+    server.use(http.get('/api/trips/1/collab/link-preview', () => HttpResponse.json({ title: 'Hotel', image: null })));
+    render(<CollabNotes {...defaultProps} />);
+    await screen.findByText('Hotel');
+    await user.click(screen.getByTitle('collab.notes.expand'));
+    const full = await openedNoteBody();
+
+    // A member without collab_edit never opens the edit modal, so this is the
+    // only place the link is readable for them (#2222).
+    const link = within(full).getByRole('link');
+    expect(link).toHaveAttribute('href', 'https://www.hotel.test');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(link).toHaveTextContent('hotel.test');
+  });
+
+  it('FE-W5CNT-036: a javascript: website stays unlinked in the expanded note', async () => {
+    const user = userEvent.setup();
+    serveNotes({ notes: [buildNote({ id: 10, title: 'Hotel', website: 'javascript:alert(1)' })] });
+    render(<CollabNotes {...defaultProps} />);
+    await screen.findByText('Hotel');
+    await user.click(screen.getByTitle('collab.notes.expand'));
+    const full = await openedNoteBody();
+
+    expect(within(full).queryAllByRole('link')).toHaveLength(0);
+  });
 });
@@ -2,8 +2,9 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
+import { sanitizedMarkdownComponents, sanitizedMarkdownPlugins } from '../shared/markdownSanitize'
 import { createPortal } from 'react-dom'
-import { Plus, Pencil, X, StickyNote, Settings } from 'lucide-react'
+import { Plus, Pencil, X, StickyNote, Settings, ExternalLink } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
@@ -20,6 +21,7 @@ import { CategorySettingsModal } from './CollabNotesCategorySettingsModal'
 import { NoteCard } from './CollabNotesCard'
 import { FilePreviewPortal } from './CollabNotesFilePreviewPortal'
 import { AuthedImg } from './CollabNotesAuthedImg'
+import { safeExternalHref } from '../../utils/safeUrl'

 // ── Main Component ──────────────────────────────────────────────────────────
 interface CollabNotesProps {
@@ -392,9 +394,18 @@ function CollabNotesGrid(S: NotesState) {
  )
 }

+/** Label for the link chip: the host is what people recognise, "www." is noise. */
+function linkHost(url: string): string {
+  try { return new URL(url).hostname.replace(/^www\./, '') } catch { return url }
+}
+
 function ViewNoteModal(S: NotesState) {
  const { viewingNote, setViewingNote, canEdit, setEditingNote, getCategoryColor, t, setPreviewFile } = S
  if (!viewingNote) return null
+  // A member without collab_edit only ever gets this modal, so the link has to
+  // be here too (#2222). Allow-listed like the card tile: the field takes any
+  // string, and a javascript: one would run in this origin.
+  const websiteHref = safeExternalHref(viewingNote.website)
  return createPortal(
    <div
      style={{
@@ -445,7 +456,18 @@ function ViewNoteModal(S: NotesState) {
          </div>
        </div>
        <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 'calc(14px * var(--fs-scale-body, 1))', color: 'var(--text-primary)', lineHeight: 1.7 }}>
-          <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{viewingNote.content || ''}</Markdown>
+          <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={sanitizedMarkdownPlugins} components={sanitizedMarkdownComponents}>{viewingNote.content || ''}</Markdown>
+          {websiteHref && (
+            <a href={websiteHref} target="_blank" rel="noopener noreferrer"
+              style={{
+                display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 12,
+                padding: '6px 12px', borderRadius: 999, border: '1px solid var(--border-primary)',
+                fontSize: 'calc(12px * var(--fs-scale-caption, 1))', fontWeight: 600,
+                color: 'var(--text-primary)', textDecoration: 'none',
+              }}>
+              <ExternalLink size={13} color="var(--text-muted)" /> {linkHost(websiteHref)}
+            </a>
+          )}
          {(viewingNote.attachments || []).length > 0 && (
            <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
              <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
@@ -3,6 +3,7 @@ import { avatarSrc } from '../../utils/avatarSrc'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
+import { sanitizedMarkdownPlugins, sanitizedMarkdownComponents } from '../shared/markdownSanitize'
 import { Trash2, Pin, PinOff, Pencil, Maximize2 } from 'lucide-react'
 import { FONT } from './CollabNotes.constants'
 import { AuthedImg } from './CollabNotesAuthedImg'
@@ -142,7 +143,7 @@ export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdi
                maxHeight: '4.5em', overflow: 'hidden',
                wordBreak: 'break-word', fontFamily: FONT,
              }}>
-                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{note.content}</Markdown>
+                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={sanitizedMarkdownPlugins} components={sanitizedMarkdownComponents}>{note.content}</Markdown>
              </div>
            )}
          </div>
@@ -6,6 +6,7 @@ import { useAuthStore } from '../../store/authStore'

 vi.mock('./CollabChat', () => ({ default: () => <div data-testid="collab-chat">Chat</div> }))
 vi.mock('./CollabNotes', () => ({ default: () => <div data-testid="collab-notes">Notes</div> }))
+vi.mock('./CollabLinks', () => ({ default: () => <div data-testid="collab-links">Links</div> }))
 vi.mock('./CollabPolls', () => ({ default: () => <div data-testid="collab-polls">Polls</div> }))
 vi.mock('./WhatsNextWidget', () => ({ default: () => <div data-testid="whats-next">WhatsNext</div> }))
 vi.mock('../../api/websocket', () => ({
@@ -39,11 +40,12 @@ describe('CollabPanel', () => {
  })

  // FE-COMP-COLLABPANEL-001
-  it('desktop layout renders all four panels', () => {
+  it('desktop layout renders all five panels', () => {
    setViewport(1280)
    render(<CollabPanel tripId={1} />)
    expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-links')).toBeInTheDocument()
    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
    expect(screen.getByTestId('whats-next')).toBeInTheDocument()
  })
@@ -55,6 +57,7 @@ describe('CollabPanel', () => {
    // Tab buttons exist
    expect(screen.getByRole('button', { name: /chat/i })).toBeInTheDocument()
    expect(screen.getByRole('button', { name: /notes/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /^links$/i })).toBeInTheDocument()
    expect(screen.getByRole('button', { name: /polls/i })).toBeInTheDocument()
    expect(screen.getByRole('button', { name: /what.?s next/i })).toBeInTheDocument()
    // Only chat visible by default
@@ -73,6 +76,13 @@ describe('CollabPanel', () => {
    expect(screen.queryByTestId('collab-chat')).not.toBeInTheDocument()
  })

+  it('mobile: Links tab shows the translated label, not the i18n key', () => {
+    setViewport(375)
+    render(<CollabPanel tripId={1} />)
+    expect(screen.getByRole('button', { name: 'Links' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'collab.tabs.links' })).not.toBeInTheDocument()
+  })
+
  // FE-COMP-COLLABPANEL-004
  it('mobile: clicking Polls tab switches to CollabPolls', () => {
    setViewport(375)
@@ -147,7 +157,7 @@ describe('CollabPanel', () => {
 // FE-W5CPN-001 to FE-W5CPN-013
 // The desktop branch picks a different layout for every combination of enabled
 // collab features, so each combination gets its own case.
-const allOff = { chat: false, notes: false, polls: false, whatsnext: false }
+const allOff = { chat: false, notes: false, links: false, polls: false, whatsnext: false }

 describe('CollabPanel feature combinations', () => {
  beforeEach(() => {
@@ -172,6 +182,7 @@ describe('CollabPanel feature combinations', () => {
    render(<CollabPanel tripId={1} collabFeatures={{ ...allOff, chat: true }} />)
    expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
    expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('collab-links')).not.toBeInTheDocument()
    expect(screen.queryByTestId('collab-polls')).not.toBeInTheDocument()
    expect(screen.queryByTestId('whats-next')).not.toBeInTheDocument()
  })
@@ -253,6 +264,42 @@ describe('CollabPanel feature combinations', () => {
    expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
  })

+  // The three-or-more branch used to render notes and links as a pair and drop
+  // whichever of the two was on its own, so these walk every shape of it.
+  it('FE-W5CPN-014: three right panels including notes but not links keeps notes', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} collabFeatures={{ chat: true, notes: true, links: false, polls: true, whatsnext: true }} />)
+    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+    expect(screen.getByTestId('whats-next')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-links')).not.toBeInTheDocument()
+  })
+
+  it('FE-W5CPN-015: three right panels including links but not notes keeps links', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} collabFeatures={{ chat: true, notes: false, links: true, polls: true, whatsnext: true }} />)
+    expect(screen.getByTestId('collab-links')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+    expect(screen.getByTestId('whats-next')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
+  })
+
+  it('FE-W5CPN-016: all four right panels render, notes and links above the other two', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} collabFeatures={{ chat: true, notes: true, links: true, polls: true, whatsnext: true }} />)
+    for (const id of ['collab-chat', 'collab-notes', 'collab-links', 'collab-polls', 'whats-next']) {
+      expect(screen.getByTestId(id)).toBeInTheDocument()
+    }
+  })
+
+  it('FE-W5CPN-017: notes and links alone with a third panel and no chat all render', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} collabFeatures={{ ...allOff, notes: true, links: true, polls: true }} />)
+    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-links')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+  })
+
  it('FE-W5CPN-013: mobile falls back to the first tab when the active one gets disabled', () => {
    setViewport(375)
    const { rerender } = render(<CollabPanel tripId={1} />)
@@ -1,11 +1,12 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
-import { MessageCircle, StickyNote, BarChart3, Sparkles } from 'lucide-react'
+import { MessageCircle, StickyNote, Link2, BarChart3, Sparkles } from 'lucide-react'
 import CollabChat from './CollabChat'
 import CollabNotes from './CollabNotes'
 import CollabPolls from './CollabPolls'
 import WhatsNextWidget from './WhatsNextWidget'
+import CollabLinks from './CollabLinks'

 function useIsDesktop(breakpoint = 1024) {
  const [isDesktop, setIsDesktop] = useState(window.innerWidth >= breakpoint)
@@ -28,6 +29,7 @@ interface TripMember {
 interface CollabFeatures {
  chat: boolean
  notes: boolean
+  links?: boolean
  polls: boolean
  whatsnext: boolean
 }
@@ -39,10 +41,11 @@ interface CollabPanelProps {
 }

 const ALL_TABS = [
-  { id: 'chat', featureKey: 'chat' as const, labelKey: 'collab.tabs.chat', icon: MessageCircle },
-  { id: 'notes', featureKey: 'notes' as const, labelKey: 'collab.tabs.notes', icon: StickyNote },
-  { id: 'polls', featureKey: 'polls' as const, labelKey: 'collab.tabs.polls', icon: BarChart3 },
-  { id: 'next', featureKey: 'whatsnext' as const, labelKey: 'collab.whatsNext.title', icon: Sparkles },
+  { id: 'chat', featureKey: 'chat' as const, labelKey: 'collab.tabs.chat', fallback: 'Chat', icon: MessageCircle },
+  { id: 'notes', featureKey: 'notes' as const, labelKey: 'collab.tabs.notes', fallback: 'Notes', icon: StickyNote },
+  { id: 'links', featureKey: 'links' as const, labelKey: 'collab.tabs.links', fallback: 'Links', icon: Link2 },
+  { id: 'polls', featureKey: 'polls' as const, labelKey: 'collab.tabs.polls', fallback: 'Polls', icon: BarChart3 },
+  { id: 'next', featureKey: 'whatsnext' as const, labelKey: 'collab.whatsNext.title', fallback: "What's Next", icon: Sparkles },
 ]

 export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }: CollabPanelProps) {
@@ -50,12 +53,14 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
  const { t } = useTranslation()
  const isDesktop = useIsDesktop()

-  const features = collabFeatures || { chat: true, notes: true, polls: true, whatsnext: true }
+  // Older server/admin configs predate the Links feature; merge defaults so a
+  // missing `links` key does not silently hide the new panel.
+  const features = { chat: true, notes: true, links: true, polls: true, whatsnext: true, ...(collabFeatures || {}) }

  const tabs = useMemo(() =>
    ALL_TABS.filter(tab => features[tab.featureKey]).map(tab => ({
      ...tab,
-      label: t(tab.labelKey),
+      label: t(tab.labelKey) || tab.fallback,
    })),
  [features, t])

@@ -70,11 +75,28 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }

  const chatOn = features.chat
  const rightPanels = [
-    features.notes && 'notes',
+    features.notes && 'notes', features.links && 'links',
    features.polls && 'polls',
    features.whatsnext && 'whatsnext',
  ].filter(Boolean) as string[]

+  // One place decides what a panel id renders. It was spelled out at five call
+  // sites, and the layout branch below dropped a panel precisely because one of
+  // those copies did not list it.
+  const renderPanel = (p: string) => (
+    <>
+      {p === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
+      {p === 'links' && <CollabLinks tripId={tripId} />}
+      {p === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
+      {p === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
+    </>
+  )
+  const panelRow = (ids: string[]) => (
+    <div style={{ flex: 1, display: 'flex', gap: 12, minHeight: 0 }}>
+      {ids.map(p => <div key={p} className={cardClass} style={{ flex: 1, minWidth: 0 }}>{renderPanel(p)}</div>)}
+    </div>
+  )
+
  if (tabs.length === 0) return null

  if (isDesktop) {
@@ -99,35 +121,19 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
            <CollabChat tripId={tripId} currentUser={user} />
          </div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden', minHeight: 0 }}>
-            {rightPanels.length === 1 && (
-              <div className={cardClass} style={{ flex: 1 }}>
-                {rightPanels[0] === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-                {rightPanels[0] === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-                {rightPanels[0] === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
-              </div>
-            )}
-            {rightPanels.length === 2 && rightPanels.map(p => (
-              <div key={p} className={cardClass} style={{ flex: 1 }}>
-                {p === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-                {p === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-                {p === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
-              </div>
-            ))}
-            {rightPanels.length === 3 && (
-              <>
-                <div className={cardClass} style={{ flex: 1 }}>
-                  <CollabNotes tripId={tripId} currentUser={user} />
-                </div>
-                <div style={{ flex: 1, display: 'flex', gap: 12, overflow: 'hidden', minHeight: 0 }}>
-                  <div className={cardClass} style={{ flex: 1 }}>
-                    <CollabPolls tripId={tripId} currentUser={user} />
-                  </div>
-                  <div className={cardClass} style={{ flex: 1 }}>
-                    <WhatsNextWidget tripMembers={tripMembers} />
-                  </div>
-                </div>
+            {rightPanels.length <= 2 && panelRow(rightPanels)}
+            {rightPanels.length >= 3 && (() => {
+              // Two rows, split by kind rather than by a pair being present:
+              // the old condition needed notes AND links together, so turning
+              // the new Links feature off dropped Notes out of the layout
+              // entirely. Each row renders only when it has something in it.
+              const written = rightPanels.filter(p => p === 'notes' || p === 'links')
+              const rest = rightPanels.filter(p => p !== 'notes' && p !== 'links')
+              return <>
+                {written.length > 0 && panelRow(written)}
+                {rest.length > 0 && panelRow(rest)}
              </>
-            )}
+            })()}
          </div>
        </div>
      )
@@ -135,26 +141,10 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }

    // Chat off — remaining panels share full width
    const panels = rightPanels
-    if (panels.length === 1) {
-      return (
-        <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
-          <div className={cardClass} style={{ flex: 1 }}>
-            {panels[0] === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-            {panels[0] === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-            {panels[0] === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
-          </div>
-        </div>
-      )
-    }
-
    return (
      <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
        {panels.map(p => (
-          <div key={p} className={cardClass} style={{ flex: 1 }}>
-            {p === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-            {p === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-            {p === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
-          </div>
+          <div key={p} className={cardClass} style={{ flex: 1 }}>{renderPanel(p)}</div>
        ))}
      </div>
    )
@@ -170,7 +160,7 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
        {tabs.map(tab => {
          const active = mobileTab === tab.id
          return (
-            <button type="button" key={tab.id} onClick={() => setMobileTab(tab.id)} style={{
+            <button key={tab.id} onClick={() => setMobileTab(tab.id)} style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              padding: '8px 0', borderRadius: 10, border: 'none', cursor: 'pointer',
              background: active ? 'var(--accent)' : 'transparent',
@@ -187,6 +177,7 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
      <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
        {mobileTab === 'chat' && features.chat && <CollabChat tripId={tripId} currentUser={user} />}
        {mobileTab === 'notes' && features.notes && <CollabNotes tripId={tripId} currentUser={user} />}
+        {mobileTab === 'links' && features.links && <CollabLinks tripId={tripId} />}
        {mobileTab === 'polls' && features.polls && <CollabPolls tripId={tripId} currentUser={user} />}
        {mobileTab === 'next' && features.whatsnext && <WhatsNextWidget tripMembers={tripMembers} />}
      </div>
@@ -732,3 +732,146 @@ describe('CollabPolls details', () => {
    }
  });
 });
+
+// FE-COMP-POLLS-016 to FE-COMP-POLLS-022
+// Markdown questions, sanitization and multiline input (#2177).
+
+describe('CollabPolls markdown & multiline', () => {
+  it('FE-COMP-POLLS-016: a markdown question renders headings and bold text', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ question: '## Day trip\n\n**Vote** carefully' })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    const heading = await screen.findByText('Day trip');
+    expect(heading.closest('h2')).not.toBeNull();
+    expect(screen.getByText('Vote').closest('strong')).not.toBeNull();
+  });
+
+  it('FE-COMP-POLLS-017: a script/onerror injection attempt produces no live DOM nodes', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({
+          polls: [buildPoll({ question: 'Safe title <script>alert("xss")</script> <img src=x onerror=alert(1)>' })],
+        }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/Safe title/);
+    expect(document.querySelector('script')).toBeNull();
+    expect(document.querySelector('img[src="x"]')).toBeNull();
+    expect(document.querySelector('[onerror]')).toBeNull();
+  });
+
+  it('FE-COMP-POLLS-018: blank lines split the question into separate paragraphs', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ question: 'First paragraph\n\nSecond paragraph' })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    const first = await screen.findByText('First paragraph');
+    const second = screen.getByText('Second paragraph');
+    expect(first.tagName).toBe('P');
+    expect(second.tagName).toBe('P');
+    expect(first).not.toBe(second);
+  });
+
+  it('FE-COMP-POLLS-019: a plain-text question renders identically, without formatting nodes', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ question: 'Best destination?' })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    const question = await screen.findByText('Best destination?');
+    expect(question.textContent).toBe('Best destination?');
+    // The question sits in a paragraph now, but no formatting was invented
+    expect(question.parentElement!.querySelector('strong, em, h1, h2, a')).toBeNull();
+  });
+
+  it('FE-COMP-POLLS-020: the question field is a textarea — Enter adds a line instead of submitting', async () => {
+    let body: Record<string, unknown> | null = null;
+    server.use(
+      http.post('/api/trips/1/collab/polls', async ({ request }) => {
+        body = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json({ poll: buildPoll({ id: 60, question: 'Line one\nLine two' }) });
+      }),
+    );
+    const user = userEvent.setup();
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/no polls yet|collab\.polls\.empty/i);
+    await user.click(screen.getByRole('button', { name: /new/i }));
+
+    const questionField = screen.getByPlaceholderText(/what should we do/i);
+    expect(questionField.tagName).toBe('TEXTAREA');
+    await user.type(questionField, 'Line one{enter}Line two');
+    // Enter stayed in the field — the form was not submitted without options
+    expect(body).toBeNull();
+    expect(questionField).toHaveValue('Line one\nLine two');
+
+    const optionInputs = screen.getAllByPlaceholderText(/option/i);
+    expect(optionInputs[0].tagName).toBe('TEXTAREA');
+    await user.type(optionInputs[0], 'A');
+    await user.type(optionInputs[1], 'B');
+    await user.click(screen.getByRole('button', { name: /create|collab\.polls\.create/i }));
+    await waitFor(() => expect(body).toMatchObject({ question: 'Line one\nLine two' }));
+  });
+
+  it('FE-COMP-POLLS-021: a link in the question opens in a new tab with rel protection', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ question: 'Where? [Our hotel](https://example.com)' })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    const link = await screen.findByRole('link', { name: 'Our hotel' });
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer nofollow');
+  });
+
+  it('FE-COMP-POLLS-022: a long multiline option wraps instead of being clipped', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({
+          polls: [buildPoll({
+            options: [
+              { id: 1, text: 'Stay at the beach house\nwith the long unpronounceable name', voters: [] },
+              { id: 2, text: 'Rome', voters: [] },
+            ],
+          })],
+        }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    const label = (await screen.findByText(/Stay at the beach house/)).closest('span')!;
+    expect(label.style.whiteSpace).toBe('pre-wrap');
+    expect(label.style.overflowWrap).toBe('anywhere');
+    expect(label.style.minWidth).toBe('0px');
+  });
+
+  it('FE-COMP-POLLS-023: a placeholder in angle brackets survives sanitizing', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ question: 'Treffpunkt <noch offen> oder Hotel?' })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    // Questions written before markdown rendering existed must keep reading the
+    // way they were typed, and they cannot be edited afterwards (#2177).
+    expect(await screen.findByText('Treffpunkt <noch offen> oder Hotel?')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-POLLS-024: a script tag is shown as text, never as an element', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ question: 'Plan <script>alert("xss")</script>' })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    expect(await screen.findByText('Plan <script>alert("xss")</script>')).toBeInTheDocument();
+    expect(document.querySelector('script')).toBeNull();
+  });
+});
@@ -1,5 +1,9 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, X, Check, BarChart3, Lock, Clock } from 'lucide-react'
+import ReactMarkdown, { type Components } from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+import { sanitizedMarkdownComponents, sanitizedMarkdownPlugins } from '../shared/markdownSanitize'
 import { collabApi } from '../../api/client'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
@@ -35,6 +39,34 @@ interface Poll {

 const FONT = "var(--font-system)"

+// Block styling for the markdown question (#2177). Tailwind's preflight resets
+// headings/lists, so the sizes are set here — in em, on purpose: they scale with
+// the surrounding calc(13px * var(--fs-scale-body)) base, so the user's
+// text-size setting keeps working. Links and sanitizing come from
+// markdownSanitize (#1629): new tab plus rel protection, this is cross-user
+// content.
+const pollMarkdownComponents: Components = {
+  ...sanitizedMarkdownComponents,
+  p: ({ children }) => (
+    <p style={{ margin: '0 0 0.55em' }}>{children}</p>
+  ),
+  h1: ({ children }) => (
+    <h1 style={{ margin: '0 0 0.45em', fontSize: '1.4em', lineHeight: 1.2 }}>{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 style={{ margin: '0 0 0.45em', fontSize: '1.25em', lineHeight: 1.25 }}>{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 style={{ margin: '0 0 0.45em', fontSize: '1.1em', lineHeight: 1.3 }}>{children}</h3>
+  ),
+  ul: ({ children }) => (
+    <ul style={{ margin: '0 0 0.55em', paddingLeft: 20, listStyle: 'disc' }}>{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol style={{ margin: '0 0 0.55em', paddingLeft: 20, listStyle: 'decimal' }}>{children}</ol>
+  ),
+}
+
 function timeRemaining(deadline) {
  if (!deadline) return null
  const diff = new Date(deadline).getTime() - Date.now()
@@ -98,7 +130,8 @@ function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
          {/* Question */}
          <div>
            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.question')}</div>
-            <input autoFocus value={question} onChange={e => setQuestion(e.target.value)} placeholder={t('collab.polls.questionPlaceholder')} style={{ width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
+            <textarea autoFocus rows={5} value={question} onChange={e => setQuestion(e.target.value)} placeholder={t('collab.polls.questionPlaceholder')} style={{ width: '100%', minHeight: 110, resize: 'vertical', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', lineHeight: 1.4, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
+            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 3 }}>{t('collab.polls.markdownHint')}</div>
          </div>

          {/* Options */}
@@ -107,8 +140,8 @@ function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {options.map((opt, i) => (
                <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
-                  <input value={opt} onChange={e => updateOption(i, e.target.value)} placeholder={`${t('collab.polls.option')} ${i + 1}`}
-                    style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }} />
+                  <textarea rows={2} value={opt} onChange={e => updateOption(i, e.target.value)} placeholder={`${t('collab.polls.option')} ${i + 1}`}
+                    style={{ flex: 1, minWidth: 0, resize: 'vertical', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', lineHeight: 1.35, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }} />
                  {options.length > 2 && (
                    <button type="button" onClick={() => removeOption(i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 2 }}><X size={14} /></button>
                  )}
@@ -223,7 +256,9 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
      }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.35, wordBreak: 'break-word' }}>
-            {poll.question}
+            <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={sanitizedMarkdownPlugins} components={pollMarkdownComponents}>
+              {poll.question}
+            </ReactMarkdown>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
            {isClosed && (
@@ -281,7 +316,7 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
            <button type="button" key={idx} onClick={() => onVote(poll.id, idx)}
              disabled={isClosed}
              style={{
-                position: 'relative', display: 'flex', alignItems: 'center', gap: 8,
+                position: 'relative', display: 'flex', alignItems: 'flex-start', gap: 8,
                padding: '10px 12px', borderRadius: 10, border: 'none', cursor: isClosed ? 'default' : 'pointer',
                background: 'var(--bg-secondary)', fontFamily: FONT, textAlign: 'left', width: '100%',
                overflow: 'hidden', transition: 'transform 0.1s',
@@ -308,9 +343,12 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
                {myVote && <Check size={11} color="#fff" strokeWidth={3} />}
              </div>

-              {/* Label */}
+              {/* Label — options stay plain text, but long or multiline ones
+                  must wrap instead of being clipped by the button's
+                  overflow:hidden (#2177) */}
              <span style={{
-                flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: myVote || isWinner ? 600 : 400,
+                flex: 1, minWidth: 0, whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', wordBreak: 'break-word',
+                lineHeight: 1.35, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: myVote || isWinner ? 600 : 400,
                color: 'var(--text-primary)', position: 'relative', zIndex: 1,
              }}>
                {typeof opt === 'string' ? opt : opt.text}
@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * The images pinned to a chat message before it is sent.
+ *
+ * One hook for both shells. The desktop hook and the phone screen each carried
+ * their own copy of the same picking, previewing and clearing, which is two
+ * places for the same leak and a duplication bill on every line.
+ *
+ * Object URLs are held in a ref and revoked when the file they belong to goes,
+ * when the list is cleared and on unmount. Rebuilding every preview on each
+ * change, which is what both copies did, leaked one URL per image per keystroke
+ * of picking, and did it from inside a setState updater, so React ran it twice
+ * in development and leaked twice as fast.
+ */
+export const CHAT_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+export const MAX_CHAT_IMAGES = 4
+export const MAX_CHAT_IMAGE_BYTES = 10 * 1024 * 1024
+
+export interface ChatImages {
+  files: File[]
+  previews: string[]
+  /** Returns false when something was dropped, so the caller can say why. */
+  add: (incoming: FileList | File[]) => boolean
+  remove: (index: number) => void
+  clear: () => void
+}
+
+export function useChatImages(): ChatImages {
+  const [files, setFiles] = useState<File[]>([])
+  const [previews, setPreviews] = useState<string[]>([])
+  const urls = useRef<string[]>([])
+
+  const revokeAll = useCallback(() => {
+    urls.current.forEach(URL.revokeObjectURL)
+    urls.current = []
+  }, [])
+
+  useEffect(() => revokeAll, [revokeAll])
+
+  const add = useCallback((incoming: FileList | File[]) => {
+    const all = Array.from(incoming)
+    const valid = all.filter(f => CHAT_IMAGE_TYPES.includes(f.type) && f.size <= MAX_CHAT_IMAGE_BYTES)
+    if (valid.length) {
+      setFiles(prev => {
+        const room = MAX_CHAT_IMAGES - prev.length
+        const added = valid.slice(0, Math.max(0, room))
+        // Only the new files get a URL; the ones already in the list keep theirs.
+        const fresh = added.map(URL.createObjectURL)
+        urls.current = [...urls.current, ...fresh]
+        setPreviews(p => [...p, ...fresh])
+        return [...prev, ...added]
+      })
+    }
+    return valid.length === all.length
+  }, [])
+
+  const remove = useCallback((index: number) => {
+    setFiles(prev => prev.filter((_, i) => i !== index))
+    setPreviews(prev => {
+      const gone = prev[index]
+      if (gone) {
+        URL.revokeObjectURL(gone)
+        urls.current = urls.current.filter(u => u !== gone)
+      }
+      return prev.filter((_, i) => i !== index)
+    })
+  }, [])
+
+  const clear = useCallback(() => {
+    revokeAll()
+    setFiles([])
+    setPreviews([])
+  }, [revokeAll])
+
+  return { files, previews, add, remove, clear }
+}
@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useRef, useCallback, type ClipboardEvent, type DragEvent } from 'react'
 import { collabApi } from '../../api/client'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
+import { useChatImages } from './useChatImages'
 import { useToast } from '../shared/Toast'

 export function useCollabChat(tripId: any, currentUser: any) {
@@ -23,6 +24,8 @@ export function useCollabChat(tripId: any, currentUser: any) {
  const [replyTo, setReplyTo] = useState(null)
  const [hoveredId, setHoveredId] = useState(null)
  const [sending, setSending] = useState(false)
+  const images = useChatImages()
+  const [uploadProgress, setUploadProgress] = useState(0)
  const [showEmoji, setShowEmoji] = useState(false)
  const [reactMenu, setReactMenu] = useState(null) // { msgId, x, y }
  const [deletingIds, setDeletingIds] = useState(new Set())
@@ -38,6 +41,7 @@ export function useCollabChat(tripId: any, currentUser: any) {
  const scrollRef = useRef(null)
  const textareaRef = useRef(null)
  const emojiBtnRef = useRef(null)
+  const imageInputRef = useRef<HTMLInputElement>(null)
  const isAtBottom = useRef(true)

  const scrollToBottom = useCallback((behavior = 'auto') => {
@@ -117,23 +121,35 @@ export function useCollabChat(tripId: any, currentUser: any) {
  }, [])

  /* ── send ── */
+  const addImageFiles = useCallback((incoming: File[] | FileList) => {
+    if (!images.add(incoming)) toast.error(t('collab.chat.imageRejected'))
+  }, [images, toast, t])
+  const removeImage = images.remove
+  const handlePaste = useCallback((e: ClipboardEvent) => { if (e.clipboardData.files.length) addImageFiles(e.clipboardData.files) }, [addImageFiles])
+  const handleDrop = useCallback((e: DragEvent) => { e.preventDefault(); addImageFiles(e.dataTransfer.files) }, [addImageFiles])
+
  const handleSend = useCallback(async () => {
    const body = text.trim()
-    if (!body || sending) return
+    if ((!body && !images.files.length) || sending) return
    setSending(true)
    try {
-      const payload: { text: string; reply_to?: number } = { text: body }
-      if (replyTo) payload.reply_to = replyTo.id
-      const data = await collabApi.sendMessage(tripId, payload)
+      let data
+      if (images.files.length) {
+        const form = new FormData(); if (body) form.append('text', body); if (replyTo) form.append('reply_to', String(replyTo.id)); images.files.forEach(file => form.append('images', file))
+        data = await collabApi.sendMessage(tripId, form, { onUploadProgress: e => setUploadProgress(e.total ? Math.round((e.loaded / e.total) * 100) : 0) })
+      } else {
+        const payload: { text: string; reply_to?: number } = { text: body }; if (replyTo) payload.reply_to = replyTo.id
+        data = await collabApi.sendMessage(tripId, payload)
+      }
      if (data?.message) {
        setMessages(prev => prev.some(m => m.id === data.message.id) ? prev : [...prev, data.message])
      }
-      setText(''); setReplyTo(null); setShowEmoji(false)
+      setText(''); setReplyTo(null); setShowEmoji(false); images.clear()
      if (textareaRef.current) textareaRef.current.style.height = 'auto'
      isAtBottom.current = true
      setTimeout(() => scrollToBottom('smooth'), 50)
-    } catch { toast.error(t('common.error')) } finally { setSending(false) }
-  }, [text, sending, replyTo, tripId, scrollToBottom, toast, t])
+    } catch { toast.error(t('common.error')) } finally { setSending(false); setUploadProgress(0) }
+  }, [text, sending, replyTo, tripId, scrollToBottom, toast, t, images])

  const handleKeyDown = useCallback((e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
@@ -175,5 +191,5 @@ export function useCollabChat(tripId: any, currentUser: any) {
    return emojiRegex.test(text.trim())
  }

-  return { currentUser, tripId, t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly }
+  return { currentUser, tripId, t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, imageInputRef, imageFiles: images.files, imagePreviews: images.previews, uploadProgress, addImageFiles, removeImage, handlePaste, handleDrop, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly }
 }
@@ -1,4 +1,4 @@
-// FE-COMP-COLLIST-001 to FE-COMP-COLLIST-010
+// FE-COMP-COLLIST-001 to FE-COMP-COLLIST-011
 import { render, screen } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import type { CollectionPlace } from '@trek/shared';
@@ -157,4 +157,14 @@ describe('CollectionList', () => {
    expect(screen.getByText('Blue Bottle Coffee').closest('.col-lrow')).toBeInTheDocument();
    expect(screen.getByText('Golden Gate Bridge').closest('.col-lrow')).toBeInTheDocument();
  });
+
+  it('FE-COMP-COLLIST-011: the row opts out of the global press-scale (#2158)', () => {
+    // jsdom cannot replay the browser mechanics behind #2158: the :active scale on
+    // the row-wide role="button" shifted the status badge out from under the pointer,
+    // so the click retargeted onto the row and opened the place instead of cycling the
+    // status. The data-no-press attribute is the pin.
+    renderList();
+
+    expect(screen.getByText('Blue Bottle Coffee').closest('.col-lrow')).toHaveAttribute('data-no-press');
+  });
 });
@@ -44,6 +44,10 @@ export default function CollectionList({
            key={place.id}
            ref={active ? selectedRef : undefined}
            role="button"
+            // Opt out of the global :active press-scale: shrinking the row-wide button
+            // slides the status badge out from under the pointer mid-click, so the click
+            // retargets onto the row and opens the place instead of cycling (#2158).
+            data-no-press
            tabIndex={0}
            onClick={() => (selectMode ? onToggleSelect(place.id) : onOpenPlace(place.id))}
            onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (selectMode) onToggleSelect(place.id); else onOpenPlace(place.id) } }}
@@ -5,6 +5,7 @@ import { collectionsApi } from '../../api/collections'
 import { STATUS_META, STATUS_ORDER } from '../../pages/collections/collectionsModel'
 import type { CollectionPlace, CollectionStatus } from '@trek/shared'
 import type { TranslationFn } from '../../types'
+import EmptyState from '../shared/EmptyState'

 interface LocationBias {
  low: { lat: number; lng: number }
@@ -53,7 +54,16 @@ async function loadSavedPlaces(ids: number[]): Promise<CollectionPlace[]> {
  return merged
 }

-/** Compact click-away dropdown (Tailwind — this panel lives outside .trek-dash). */
+/**
+ * Compact click-away dropdown (Tailwind, this panel lives outside .trek-dash).
+ *
+ * The panel is positioned against the FILTER ROW rather than against this
+ * button, so it opens across the full width of the row instead of the half its
+ * own trigger occupies. The two filters sit side by side and only one can be
+ * open at a time, so the wider panel costs nothing and stops list names being
+ * truncated at roughly ten characters. The row carries the `relative` this
+ * needs; there is no other call site.
+ */
 function FilterDropdown({ current, options, onSelect, lead }: {
  current: string | number
  options: Opt[]
@@ -72,7 +82,7 @@ function FilterDropdown({ current, options, onSelect, lead }: {
  }, [open])
  const cur = options.find(o => o.key === current) ?? options[0]
  return (
-    <div className="relative min-w-0 flex-1" ref={ref}>
+    <div className="min-w-0 flex-1" ref={ref}>
      <button type="button" onClick={() => setOpen(o => !o)} aria-haspopup="listbox" aria-expanded={open}
        className={`w-full flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border bg-surface-input text-[12px] font-medium text-content-secondary transition-colors ${open ? 'border-accent' : 'border-edge hover:bg-surface-hover'}`}>
        <span className="shrink-0 text-content-faint">{cur.icon ?? lead}</span>
@@ -80,7 +90,7 @@ function FilterDropdown({ current, options, onSelect, lead }: {
        <ChevronDown size={13} className="shrink-0 text-content-faint" />
      </button>
      {open && (
-        <div role="listbox" className="absolute z-30 left-0 right-0 mt-1 max-h-[240px] overflow-y-auto p-1 rounded-xl border border-edge bg-surface-card shadow-lg flex flex-col gap-0.5">
+        <div role="listbox" className="absolute z-30 top-full left-0 right-0 mt-1 max-h-[240px] overflow-y-auto p-1 rounded-xl border border-edge bg-surface-card shadow-lg flex flex-col gap-0.5">
          {options.map(o => (
            <button key={o.key} type="button" role="option" aria-selected={o.key === current} onClick={() => { onSelect(o.key); setOpen(false) }}
              className={`flex items-center gap-2 px-2 py-1.5 rounded-lg text-[12.5px] text-left transition-colors hover:bg-surface-hover ${o.key === current ? 'text-content font-semibold' : 'text-content-secondary'}`}>
@@ -173,7 +183,10 @@ export default function CollectionPicker({ bias, onSelect, t }: CollectionPicker
  ]

  return (
-    <aside className="w-full sm:w-64 shrink-0 flex flex-col rounded-xl border border-edge bg-surface-secondary overflow-hidden self-stretch">
+    // Same 320px as the details column on the other side of the form: two panels
+    // of different widths flanking one form read as a mistake rather than a
+    // hierarchy, and neither of them is the more important one.
+    <aside className="w-full sm:w-80 shrink-0 flex flex-col rounded-xl border border-edge bg-surface-secondary overflow-hidden self-stretch">
      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-edge shrink-0">
        <Bookmark size={15} className="text-accent" />
        <span className="text-[13px] font-semibold text-content">{t('collections.picker.title')}</span>
@@ -189,7 +202,7 @@ export default function CollectionPicker({ bias, onSelect, t }: CollectionPicker
          />
        </div>
        {lists.length > 0 && (
-          <div className="flex gap-2">
+          <div className="relative flex gap-2">
            <FilterDropdown current={listFilter} options={listOpts} onSelect={k => setListFilter(k as number | 'all')} lead={<Layers size={13} />} />
            <FilterDropdown current={statusFilter} options={statusOpts} onSelect={k => setStatusFilter(k as CollectionStatus | 'all')} lead={<Bookmark size={13} />} />
          </div>
@@ -201,7 +214,13 @@ export default function CollectionPicker({ bias, onSelect, t }: CollectionPicker
            <Loader2 size={18} className="animate-spin" />
          </div>
        ) : visible.length === 0 ? (
-          <p className="text-center text-[12px] text-content-faint py-10 px-3">{t('collections.picker.empty')}</p>
+          <EmptyState
+            scene="search"
+            title={t('collections.picker.empty')}
+            size={84}
+            fill
+            surface="var(--bg-secondary)"
+          />
        ) : (
          <div className="flex flex-col gap-1">
            {page.map(place => (
@@ -0,0 +1,101 @@
+// FE-COMP-JOURNEYDATEPICKER-001 to FE-COMP-JOURNEYDATEPICKER-006
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '../../../tests/helpers/render'
+import userEvent from '@testing-library/user-event'
+import { DatePicker } from './JourneyDetailPageDatePicker'
+
+function open(value = '2026-09-11') {
+  const onChange = vi.fn()
+  render(<DatePicker value={value} onChange={onChange} />)
+  return { onChange }
+}
+
+const header = () => screen.getByRole('button', { name: /select month|select year|\d{4} – \d{4}/i })
+const prev = (name: RegExp) => screen.getByRole('button', { name })
+
+describe('DatePicker year navigation (#2318)', () => {
+  it('FE-COMP-JOURNEYDATEPICKER-001: opens on the month of the value with weekday headers', async () => {
+    const user = userEvent.setup()
+    open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+    expect(screen.getByText('Mo')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Select month' })).toHaveTextContent('September 2026')
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-002: the header climbs to the months, then to the years', async () => {
+    const user = userEvent.setup()
+    open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    expect(screen.queryByText('Mo')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Jan' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Select year' })).toHaveTextContent('2026')
+
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    expect(screen.getByRole('button', { name: '2016' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '2027' })).toBeInTheDocument()
+    expect(header()).toHaveTextContent('2016 – 2027')
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-003: picking a year three back lands on that year in one move', async () => {
+    const user = userEvent.setup()
+    open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    await user.click(screen.getByRole('button', { name: '2023' }))
+
+    // Back on the months, of the chosen year.
+    expect(screen.getByRole('button', { name: 'Select year' })).toHaveTextContent('2023')
+    await user.click(screen.getByRole('button', { name: 'Mar' }))
+    expect(screen.getByRole('button', { name: 'Select month' })).toHaveTextContent('March 2023')
+    expect(screen.getByText('Mo')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-004: the arrows step the level they are on', async () => {
+    const user = userEvent.setup()
+    open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+
+    await user.click(prev(/previous month/i))
+    expect(screen.getByRole('button', { name: 'Select month' })).toHaveTextContent('August 2026')
+
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    await user.click(prev(/previous year/i))
+    expect(screen.getByRole('button', { name: 'Select year' })).toHaveTextContent('2025')
+
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    await user.click(prev(/previous years/i))
+    expect(header()).toHaveTextContent('2004 – 2015')
+    await user.click(screen.getByRole('button', { name: /next years/i }))
+    expect(header()).toHaveTextContent('2016 – 2027')
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-005: a day picked after the jump is handed back as ISO', async () => {
+    const user = userEvent.setup()
+    const { onChange } = open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    await user.click(screen.getByRole('button', { name: '2023' }))
+    await user.click(screen.getByRole('button', { name: 'Mar' }))
+    await user.click(screen.getByRole('button', { name: '15' }))
+    expect(onChange).toHaveBeenCalledWith('2023-03-15')
+    expect(screen.queryByText('Mo')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-006: reopening starts on the days again', async () => {
+    const user = userEvent.setup()
+    open()
+    const trigger = screen.getByText(/Sep 11, 2026/)
+    await user.click(trigger)
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    await user.click(trigger)
+    expect(screen.queryByRole('button', { name: '2023' })).not.toBeInTheDocument()
+    await user.click(trigger)
+    expect(screen.getByText('Mo')).toBeInTheDocument()
+  })
+})
@@ -3,6 +3,16 @@ import { localIsoDate } from '../../utils/localDate'
 import { ArrowLeft, ChevronRight, Calendar } from 'lucide-react'
 import { useTranslation } from '../../i18n'

+/**
+ * The header steps up a level on each click, days → months → years, and a
+ * pick steps back down. Mirrors CustomDateTimePicker, so a person who has
+ * learnt one calendar in TREK knows the other. Without it the only way to a
+ * different year was one month at a time, which on a photo picker asked to
+ * cover a trip three years back meant thirty-six clicks (#2318).
+ */
+type CalendarView = 'days' | 'months' | 'years'
+const YEAR_PAGE_SIZE = 12
+
 export function DatePicker({ value, onChange, tripDates }: {
  value: string
  onChange: (date: string) => void
@@ -10,6 +20,8 @@ export function DatePicker({ value, onChange, tripDates }: {
 }) {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
+  const [view, setView] = useState<CalendarView>('days')
+  const [yearPageStart, setYearPageStart] = useState(0)
  const [viewMonth, setViewMonth] = useState(() => {
    const d = value ? new Date(value + 'T00:00:00') : new Date()
    return { year: d.getFullYear(), month: d.getMonth() }
@@ -27,19 +39,73 @@ export function DatePicker({ value, onChange, tripDates }: {
    setViewMonth(p => p.month === 11 ? { year: p.year + 1, month: 0 } : { ...p, month: p.month + 1 })
  }

+  const handlePrev = () => {
+    if (view === 'days') prevMonth()
+    else if (view === 'months') setViewMonth(p => ({ ...p, year: p.year - 1 }))
+    else setYearPageStart(s => s - YEAR_PAGE_SIZE)
+  }
+  const handleNext = () => {
+    if (view === 'days') nextMonth()
+    else if (view === 'months') setViewMonth(p => ({ ...p, year: p.year + 1 }))
+    else setYearPageStart(s => s + YEAR_PAGE_SIZE)
+  }
+  const handleHeaderClick = () => {
+    if (view === 'days') {
+      setView('months')
+    } else if (view === 'months') {
+      setYearPageStart(Math.floor(viewMonth.year / YEAR_PAGE_SIZE) * YEAR_PAGE_SIZE)
+      setView('years')
+    }
+  }
+  const selectMonth = (month: number) => {
+    setViewMonth(p => ({ ...p, month }))
+    setView('days')
+  }
+  const selectYear = (year: number) => {
+    setViewMonth(p => ({ ...p, year }))
+    setView('months')
+  }
+  const toggleOpen = () => {
+    // Reopening lands on the days again: a picker left on the year grid
+    // would otherwise open there next time, one level away from a date.
+    setView('days')
+    setOpen(!open)
+  }
+
+  const prevLabel = view === 'days' ? t('common.datepicker.prevMonth')
+    : view === 'months' ? t('common.datepicker.prevYear') : t('common.datepicker.prevYears')
+  const nextLabel = view === 'days' ? t('common.datepicker.nextMonth')
+    : view === 'months' ? t('common.datepicker.nextYear') : t('common.datepicker.nextYears')
+  const headerLabel = view === 'days' ? monthName
+    : view === 'months' ? String(viewMonth.year)
+    : `${yearPageStart} – ${yearPageStart + YEAR_PAGE_SIZE - 1}`
+  const headerAria = view === 'days' ? t('common.datepicker.selectMonth')
+    : view === 'months' ? t('common.datepicker.selectYear') : undefined
+
  const pad = (n: number) => String(n).padStart(2, '0')

  const cells: (number | null)[] = []
  for (let i = 0; i < firstDow; i++) cells.push(null)
  for (let d = 1; d <= daysInMonth; d++) cells.push(d)

+  const monthNames = Array.from({ length: 12 }, (_, i) =>
+    new Date(viewMonth.year, i).toLocaleDateString(undefined, { month: 'short' }))
+  const years = Array.from({ length: YEAR_PAGE_SIZE }, (_, i) => yearPageStart + i)
+
  const formatted = value ? new Date(value + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : null

+  const navButton = 'w-7 h-7 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center justify-center text-zinc-500'
+  const gridCell = (selected: boolean) => `h-9 rounded-lg text-[12px] font-medium flex items-center justify-center transition-colors ${
+    selected
+      ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+      : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700'
+  }`
+
  return (
    <div className="relative">
      <button
        type="button"
-        onClick={() => setOpen(!open)}
+        onClick={toggleOpen}
        className="w-full px-3 py-2 border border-zinc-200 dark:border-zinc-700 rounded-lg text-[13px] bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white text-left flex items-center justify-between"
      >
        {formatted ? (
@@ -59,54 +125,86 @@ export function DatePicker({ value, onChange, tripDates }: {
              above closes the popover again from the keyboard. */}
          <div role="presentation" className="fixed inset-0 z-[10]" onClick={() => setOpen(false)} />
          <div className="absolute top-full left-0 mt-1 z-[20] bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-lg p-3 w-[280px]">
-            {/* Month nav */}
+            {/* Header: arrows step the current view, the label climbs to the next one up */}
            <div className="flex items-center justify-between mb-2">
-              <button type="button" onClick={prevMonth} className="w-7 h-7 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center justify-center text-zinc-500">
+              <button type="button" onClick={handlePrev} aria-label={prevLabel} className={navButton}>
                <ArrowLeft size={14} />
              </button>
-              <span className="text-[13px] font-semibold text-zinc-900 dark:text-white">{monthName}</span>
-              <button type="button" onClick={nextMonth} className="w-7 h-7 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center justify-center text-zinc-500">
+              <button
+                type="button"
+                onClick={handleHeaderClick}
+                aria-label={headerAria}
+                disabled={view === 'years'}
+                className="px-2 py-1 rounded-lg text-[13px] font-semibold text-zinc-900 dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 disabled:hover:bg-transparent disabled:cursor-default"
+              >
+                {headerLabel}
+              </button>
+              <button type="button" onClick={handleNext} aria-label={nextLabel} className={navButton}>
                <ChevronRight size={14} />
              </button>
            </div>

-            {/* Weekday headers */}
-            <div className="grid grid-cols-7 mb-1">
-              {['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((d, i) => (
-                <div key={i} className="text-center text-[10px] font-medium text-zinc-400 py-1">{d}</div>
-              ))}
-            </div>
-
-            {/* Day grid */}
-            <div className="grid grid-cols-7">
-              {cells.map((day, i) => {
-                if (day === null) return <div key={`e${i}`} />
-                const dateStr = `${viewMonth.year}-${pad(viewMonth.month + 1)}-${pad(day)}`
-                const isSelected = dateStr === value
-                const isTrip = tripDates?.has(dateStr)
-                const isToday = dateStr === localIsoDate()
-
-                return (
-                  <button
-                    key={dateStr}
-                    type="button"
-                    onClick={() => { onChange(dateStr); setOpen(false) }}
-                    className={`w-9 h-9 rounded-lg text-[12px] font-medium flex items-center justify-center relative transition-colors ${
-                      isSelected
-                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
-                        : isToday
-                          ? 'text-zinc-900 dark:text-white font-bold'
-                          : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700'
-                    }`}
-                  >
-                    {day}
-                    {isTrip && !isSelected && (
-                      <span className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-indigo-500" />
-                    )}
+            {view === 'months' && (
+              <div className="grid grid-cols-3 gap-1">
+                {monthNames.map((name, i) => (
+                  <button key={name} type="button" onClick={() => selectMonth(i)} className={gridCell(i === viewMonth.month)}>
+                    {name}
                  </button>
-                )
-              })}
-            </div>
+                ))}
+              </div>
+            )}
+
+            {view === 'years' && (
+              <div className="grid grid-cols-3 gap-1">
+                {years.map(y => (
+                  <button key={y} type="button" onClick={() => selectYear(y)} className={gridCell(y === viewMonth.year)}>
+                    {y}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {view === 'days' && (
+              <>
+                {/* Weekday headers */}
+                <div className="grid grid-cols-7 mb-1">
+                  {['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((d, i) => (
+                    <div key={i} className="text-center text-[10px] font-medium text-zinc-400 py-1">{d}</div>
+                  ))}
+                </div>
+
+                {/* Day grid */}
+                <div className="grid grid-cols-7">
+                  {cells.map((day, i) => {
+                    if (day === null) return <div key={`e${i}`} />
+                    const dateStr = `${viewMonth.year}-${pad(viewMonth.month + 1)}-${pad(day)}`
+                    const isSelected = dateStr === value
+                    const isTrip = tripDates?.has(dateStr)
+                    const isToday = dateStr === localIsoDate()
+
+                    return (
+                      <button
+                        key={dateStr}
+                        type="button"
+                        onClick={() => { onChange(dateStr); setOpen(false) }}
+                        className={`w-9 h-9 rounded-lg text-[12px] font-medium flex items-center justify-center relative transition-colors ${
+                          isSelected
+                            ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                            : isToday
+                              ? 'text-zinc-900 dark:text-white font-bold'
+                              : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700'
+                        }`}
+                      >
+                        {day}
+                        {isTrip && !isSelected && (
+                          <span className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-indigo-500" />
+                        )}
+                      </button>
+                    )
+                  })}
+                </div>
+              </>
+            )}
          </div>
        </>
      )}
@@ -189,6 +189,23 @@ describe('EntryCard', () => {

    expect(await screen.findByRole('link', { name: 'https://book.example' })).toBeInTheDocument()
  })
+
+  // #2064: a stop switched off the route says so on its card, so a journal
+  // that reads fine still shows which of its days the printed map skips.
+  it('FE-JRN-CARD-018: marks an entry left out of the route, on the header and on the hero', () => {
+    const { unmount } = mountCard(buildEntry({ stats_excluded: true }))
+    expect(screen.getByText('Off route')).toBeInTheDocument()
+    unmount()
+
+    mountCard(buildEntry({ stats_excluded: true, photos: [buildPhoto(100)] }))
+    expect(screen.getByText('Off route')).toBeInTheDocument()
+  })
+
+  it('FE-JRN-CARD-019: carries no such mark on an ordinary entry', () => {
+    mountCard(buildEntry({ photos: [buildPhoto(100)] }))
+
+    expect(screen.queryByText('Off route')).not.toBeInTheDocument()
+  })
 })

 describe('SkeletonCard', () => {
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
-import { MapPin, Clock, MoreHorizontal, Pencil, Trash2, Plus } from 'lucide-react'
+import { MapPin, Clock, MoreHorizontal, Pencil, Trash2, Plus, RouteOff } from 'lucide-react'
 import { formatLocationName } from '../../utils/formatters'
 import { useTranslation } from '../../i18n'
 import { pluginsApi } from '../../api/client'
@@ -68,6 +68,14 @@ export function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
                {entry.entry_time}
              </span>
            )}
+            {/* Switched off the route (#2064): the day is still in the journal,
+                the printed map and the distance skip it, and the card says so. */}
+            {entry.stats_excluded && (
+              <span className="inline-flex items-center gap-1 px-2.5 py-1 bg-black/40 backdrop-blur-sm rounded-full text-[10px] font-semibold text-white tracking-wide">
+                <RouteOff size={10} />
+                {t('journey.entry.offRoute')}
+              </span>
+            )}
          </div>

          {/* Menu top-right */}
@@ -110,6 +118,11 @@ export function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
                <Clock size={10} /> {entry.entry_time}
              </span>
            )}
+            {entry.stats_excluded && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded-full text-[10px] font-semibold text-zinc-500">
+                <RouteOff size={10} /> {t('journey.entry.offRoute')}
+              </span>
+            )}
          </div>
          {!readOnly && (
            <div className="relative">
@@ -965,4 +965,67 @@ describe('EntryEditor', () => {
    expect(library[0]).toHaveAttribute('multiple')
    expect(camera[0]).not.toHaveAttribute('multiple')
  })
+
+  // #2064: a home airport written up as an entry is a stop on the printed
+  // route. The editor offers the same switch the Studio panel has, but only
+  // to an entry that is (or was) a stop: one without a point never counted,
+  // and a new entry is not on the route yet.
+  it('FE-JRN-EDITOR-051: offers to leave a located entry out of the route and saves it', async () => {
+    const user = userEvent.setup()
+    const { onSave } = mountEditor(buildEntry({
+      id: 10, location_name: 'Keflavík', location_lat: 63.98, location_lng: -22.6,
+    }))
+
+    const toggle = screen.getByRole('button', { name: 'Leave out of the route' })
+    expect(toggle).toHaveAttribute('aria-pressed', 'false')
+    await user.click(toggle)
+    expect(toggle).toHaveAttribute('aria-pressed', 'true')
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => expect(onSave).toHaveBeenCalled())
+    expect(onSave.mock.calls[0][0]).toMatchObject({ stats_excluded: true })
+  })
+
+  it('FE-JRN-EDITOR-052: keeps the switch away from a new entry, point or no point', () => {
+    mountEditor(buildEntry({ location_lat: 63.98, location_lng: -22.6 }))
+
+    expect(screen.queryByRole('button', { name: 'Leave out of the route' })).not.toBeInTheDocument()
+  })
+
+  it('FE-JRN-EDITOR-053: keeps the switch away from an entry without a point, and sends nothing for it', async () => {
+    const user = userEvent.setup()
+    const { onSave } = mountEditor(buildEntry({ id: 10 }))
+
+    expect(screen.queryByRole('button', { name: 'Leave out of the route' })).not.toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => expect(onSave).toHaveBeenCalled())
+    expect(onSave.mock.calls[0][0].stats_excluded).toBeUndefined()
+  })
+
+  it('FE-JRN-EDITOR-054: still offers the switch to a left-out entry, so it can be put back', async () => {
+    const user = userEvent.setup()
+    const { onSave } = mountEditor(buildEntry({ id: 10, stats_excluded: true }))
+
+    const toggle = screen.getByRole('button', { name: 'Leave out of the route' })
+    expect(toggle).toHaveAttribute('aria-pressed', 'true')
+    await user.click(toggle)
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => expect(onSave).toHaveBeenCalled())
+    expect(onSave.mock.calls[0][0]).toMatchObject({ stats_excluded: false })
+  })
+
+  it('FE-JRN-EDITOR-055: flipping the switch is a change worth warning about', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
+    const user = userEvent.setup()
+    const { onClose } = mountEditor(buildEntry({ id: 10, location_lat: 63.98, location_lng: -22.6 }))
+
+    await user.click(screen.getByRole('button', { name: 'Leave out of the route' }))
+    await user.click(screen.getByRole('button', { name: 'Cancel' }))
+
+    expect(confirmSpy).toHaveBeenCalledWith('You have unsaved changes. Discard them?')
+    expect(onClose).not.toHaveBeenCalled()
+    confirmSpy.mockRestore()
+  })
 })
@@ -14,6 +14,7 @@ import { photoUrl, isValidGeoPoint, geoOnceErrorKey } from '../../pages/journeyD
 import MarkdownToolbar from './MarkdownToolbar'
 import { DatePicker } from './JourneyDetailPageDatePicker'
 import CustomTimePicker from '../shared/CustomTimePicker'
+import ToggleSwitch from '../Settings/ToggleSwitch'
 import { ProviderPicker, type ProviderPhotoGroup } from './JourneyDetailPageProviderPicker'

 type PendingProviderGroup = ProviderPhotoGroup & { provider: string }
@@ -48,6 +49,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
  const locationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const [mood, setMood] = useState(entry.mood || '')
  const [weather, setWeather] = useState(entry.weather || '')
+  const [statsExcluded, setStatsExcluded] = useState(entry.stats_excluded ?? false)
  const [pros, setPros] = useState<string[]>(entry.pros_cons?.pros?.length ? entry.pros_cons.pros : [''])
  const [cons, setCons] = useState<string[]>(entry.pros_cons?.cons?.length ? entry.pros_cons.cons : [''])
  const [saving, setSaving] = useState(false)
@@ -87,6 +89,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
    (locationLng ?? null) !== (entry.location_lng ?? null) ||
    mood !== (entry.mood || '') ||
    weather !== (entry.weather || '') ||
+    statsExcluded !== (entry.stats_excluded ?? false) ||
    pros.filter(p => p.trim()).join('\n') !== originalPros ||
    cons.filter(c => c.trim()).join('\n') !== originalCons ||
    pendingFiles.length > 0 ||
@@ -146,6 +149,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
        location_name: locationName || null,
        location_lat: locationLat,
        location_lng: locationLng,
+        stats_excluded: offersStatsToggle ? statsExcluded : undefined,
        mood: mood || null,
        weather: weather || null,
        pros_cons: { pros: pros.filter(p => p.trim()), cons: cons.filter(c => c.trim()) },
@@ -214,6 +218,10 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
    ? { lat: locationLat!, lng: locationLng!, name: locationName || undefined }
    : null

+  // The route switch belongs to an entry that is a stop, or was one: an entry
+  // without a point was never on the route, and a new one is not on it yet.
+  const offersStatsToggle = entry.id > 0 && (contextLocation != null || !!entry.stats_excluded)
+
  const handleUseCurrentLocation = async () => {
    if (locating) return
    setLocating(true)
@@ -695,6 +703,19 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
            </div>
          </div>

+          {/* Every located entry is a stop on the route Studio prints, the home
+              airport included. This is the entry's own way off it, the same
+              switch the Studio travel panel offers (#2064). */}
+          {offersStatsToggle && (
+            <div className="flex items-center gap-3 px-3 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-xl">
+              <div className="flex-1 min-w-0">
+                <div className="text-[12px] font-semibold text-zinc-900 dark:text-white">{t('journey.editor.statsExcluded')}</div>
+                <div className="text-[11px] leading-snug text-zinc-500 mt-0.5">{t('journey.editor.statsExcludedHint')}</div>
+              </div>
+              <ToggleSwitch on={statsExcluded} onToggle={() => setStatsExcluded(v => !v)} label={t('journey.editor.statsExcluded')} />
+            </div>
+          )}
+
          <div>
            <label className="text-[10px] font-semibold tracking-[0.12em] uppercase text-zinc-500 block mb-2">{t('journey.editor.mood')}</label>
            <div className="flex flex-wrap gap-2">
@@ -1,7 +1,7 @@
-// FE-JRN-GALLERY-001 to FE-JRN-GALLERY-016
+// FE-JRN-GALLERY-001 to FE-JRN-GALLERY-019

 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { act } from 'react'
+import { act, useRef, useState } from 'react'
 import { http, HttpResponse } from 'msw'
 import userEvent from '@testing-library/user-event'
 import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render'
@@ -73,20 +73,41 @@ const entries: JourneyEntry[] = [
  },
 ]

+/** Mirrors the page wiring: the gallery reports its connected providers up,
+    and the host renders one button per provider next to Upload. */
+function GalleryHarness({ gallery, onPhotoClick, onRefresh, onRegisterUpload }: {
+  gallery: GalleryPhoto[]
+  onPhotoClick: (photos: GalleryPhoto[], index: number) => void
+  onRefresh: () => void
+  onRegisterUpload?: (fn: () => void) => void
+}) {
+  const [providers, setProviders] = useState<{ id: string; name: string }[]>([])
+  const browseRef = useRef<((provider: string) => void) | null>(null)
+  return (
+    <>
+      {providers.map(p => (
+        <button type="button" key={p.id} onClick={() => browseRef.current?.(p.id)}>{p.name}</button>
+      ))}
+      <GalleryView
+        entries={entries}
+        gallery={gallery}
+        journeyId={JOURNEY_ID}
+        userId={1}
+        trips={trips}
+        onPhotoClick={onPhotoClick}
+        onRefresh={onRefresh}
+        onRegisterUpload={onRegisterUpload}
+        onRegisterProviders={(p, browse) => { setProviders(p); browseRef.current = browse }}
+      />
+    </>
+  )
+}
+
 function mountGallery(gallery: GalleryPhoto[], onRegisterUpload?: (fn: () => void) => void) {
  const onPhotoClick = vi.fn()
  const onRefresh = vi.fn()
  const utils = render(
-    <GalleryView
-      entries={entries}
-      gallery={gallery}
-      journeyId={JOURNEY_ID}
-      userId={1}
-      trips={trips}
-      onPhotoClick={onPhotoClick}
-      onRefresh={onRefresh}
-      onRegisterUpload={onRegisterUpload}
-    />,
+    <GalleryHarness gallery={gallery} onPhotoClick={onPhotoClick} onRefresh={onRefresh} onRegisterUpload={onRegisterUpload} />,
  )
  return { ...utils, onPhotoClick, onRefresh }
 }
@@ -352,4 +373,14 @@ describe('GalleryView', () => {
    expect(container.querySelectorAll('.aspect-square')).toHaveLength(2)
    expect(container.querySelector('.animate-spin')).toBeNull()
  })
+
+  it('FE-JRN-GALLERY-019: the tile opts out of the global press-scale (#2158)', () => {
+    // jsdom cannot replay the browser mechanics behind #2158: the :active scale on
+    // the tile shifted its corner delete button out from under the pointer, so the
+    // click retargeted onto the tile and opened the lightbox instead of deleting.
+    // The data-no-press attribute is the pin.
+    const { container } = mountGallery([buildGalleryPhoto()])
+
+    expect(container.querySelector('.aspect-square')).toHaveAttribute('data-no-press')
+  })
 })
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react'
-import { RefreshCw, Camera, Image, X, Play } from 'lucide-react'
+import { RefreshCw, Camera, X, Play } from 'lucide-react'
 import { normalizeImageFiles } from '../../utils/convertHeic'
 import { isVideoFile } from '../../utils/videoPoster'
 import { useJourneyStore } from '../../store/journeyStore'
@@ -13,7 +13,7 @@ import { ProviderPicker } from './JourneyDetailPageProviderPicker'
 import { ScrollTrigger } from './JourneyDetailPageScrollTrigger'
 import EmptyState from '../shared/EmptyState'

-export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhotoClick, onRefresh, onRegisterUpload }: {
+export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhotoClick, onRefresh, onRegisterUpload, onRegisterProviders }: {
  entries: JourneyEntry[]
  gallery: GalleryPhoto[]
  journeyId: number
@@ -22,16 +22,17 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot
  onPhotoClick: (photos: GalleryPhoto[], index: number) => void
  onRefresh: () => void
  onRegisterUpload?: (fn: () => void) => void
+  onRegisterProviders?: (providers: { id: string; name: string }[], browse: (provider: string) => void) => void
 }) {
  const { t } = useTranslation()
  const [showPicker, setShowPicker] = useState(false)
  const [pickerProvider, setPickerProvider] = useState<string | null>(null)
-  const [availableProviders, setAvailableProviders] = useState<{ id: string; name: string }[]>([])
  const [galleryProgress, setGalleryProgress] = useState<{ done: number; total: number } | null>(null)
  const galleryUploading = galleryProgress !== null
  const toast = useToast()

-  // check which providers are enabled AND connected for the current user
+  // check which providers are enabled AND connected for the current user, then
+  // hand them up: the page header renders the provider buttons next to Upload
  useEffect(() => {
    (async () => {
      try {
@@ -46,7 +47,7 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot
            if (status.connected) connected.push({ id: p.id, name: p.name })
          } catch { }
        }
-        setAvailableProviders(connected)
+        onRegisterProviders?.(connected, browseProvider)
      } catch { }
    })()
  }, [])
@@ -126,23 +127,11 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot
    <div>
      <input ref={galleryFileRef} type="file" accept="image/*,video/*" multiple onChange={handleGalleryUpload} className="hidden" />

-      {/* Header */}
+      {/* Header — the provider buttons live in the page header next to Upload */}
      <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-[0.07em]" style={{ background: 'var(--vg-surf2)', color: 'var(--vg-ink3)' }}>
          <Camera size={11} /> {allPhotos.length} {t('journey.detail.photos')}
        </span>
-        <div className="flex items-center gap-2">
-          {availableProviders.map(p => (
-            <button type="button"
-              key={p.id}
-              onClick={() => browseProvider(p.id)}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-[11px] font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800"
-            >
-              <Image size={12} />
-              {p.name}
-            </button>
-          ))}
-        </div>
      </div>

      {allPhotos.length === 0 ? (
@@ -153,6 +142,10 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot
            <div
              key={photo.id}
              role="button"
+              // No press-scale on the tile: shrinking it mid-click slides the corner
+              // delete button out from under the pointer, so the click retargets onto
+              // the tile and opens the lightbox instead (#2158).
+              data-no-press
              tabIndex={0}
              className="relative aspect-square rounded-lg overflow-hidden cursor-pointer group"
              onClick={() => onPhotoClick(allPhotos, i)}
@@ -1,4 +1,4 @@
-// FE-JRN-PICKER-001 to FE-JRN-PICKER-020
+// FE-JRN-PICKER-001 to FE-JRN-PICKER-021

 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { http, HttpResponse, delay } from 'msw'
@@ -324,6 +324,39 @@ describe('ProviderPicker', () => {
    expect(range.to.endsWith('-09')).toBe(true)
  })

+  it('FE-JRN-PICKER-021: a location picked after the photos loaded reorders the grid', async () => {
+    // contextLocation is live editor state: the place search and "use my location"
+    // write it while this picker stays mounted, and the key is only provider plus
+    // date. Sorting inside the fetch instead of in a memo leaves the grid frozen
+    // while the caption above it already claims nearest-first.
+    searchReturns([
+      asset('rome', { lat: 41.9, lng: 12.5, takenAt: '2026-03-15T09:00:00.000Z' }),
+      asset('helsinki', { lat: 60.17, lng: 24.94, takenAt: '2026-03-15T11:00:00.000Z' }),
+    ])
+    const props = {
+      provider: 'immich',
+      userId: 42,
+      entries,
+      trips,
+      existingAssetIds: new Set<string>(),
+      onClose: vi.fn(),
+      onAdd: vi.fn(async () => {}),
+    } as React.ComponentProps<typeof ProviderPicker>
+    const { container, rerender } = render(<ProviderPicker {...props} />)
+    await screen.findByText('March 15, 2026')
+
+    const order = () => Array.from(container.querySelectorAll('img'))
+      .map(img => (img.getAttribute('src') || '').split('/assets/0/')[1]?.split('/')[0])
+      .filter(Boolean)
+
+    // Nothing to be near yet, so newest first.
+    expect(order()).toEqual(['helsinki', 'rome'])
+
+    rerender(<ProviderPicker {...props} contextLocation={{ lat: 41.9, lng: 12.5, name: 'Rome' }} />)
+
+    await waitFor(() => expect(order()).toEqual(['rome', 'helsinki']))
+  })
+
  it('FE-JRN-PICKER-020: closes through the header button and the backdrop', async () => {
    const user = userEvent.setup()
    const { container, onClose } = mountPicker()
@@ -1,189 +1,244 @@
-import { useEffect, useState, useRef, useMemo } from 'react'
-import { X, Check, Calendar, ChevronRight, Camera } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { memoriesApi } from '../../api/client'
-import type { JourneyEntry, JourneyTrip } from '../../store/journeyStore'
-import { groupPhotosByDate, sortProviderPhotos, type GeoPoint } from '../../pages/journeyDetail/JourneyDetailPage.helpers'
-import { ScrollTrigger } from './JourneyDetailPageScrollTrigger'
-import { DatePicker } from './JourneyDetailPageDatePicker'
+import { Calendar, Camera, Check, ChevronRight, Play, X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { memoriesApi } from '../../api/client';
+import { useTranslation } from '../../i18n';
+import {
+  groupPhotosByDate,
+  sortProviderPhotos,
+  type GeoPoint,
+} from '../../pages/journeyDetail/JourneyDetailPage.helpers';
+import type { JourneyEntry, JourneyTrip } from '../../store/journeyStore';
+import { DatePicker } from './JourneyDetailPageDatePicker';
+import { ScrollTrigger } from './JourneyDetailPageScrollTrigger';

-export type ProviderPhotoGroup = { assetIds: string[]; passphrase?: string; mediaTypes?: string[] }
+export type ProviderPhotoGroup = { assetIds: string[]; passphrase?: string; mediaTypes?: string[] };

-export function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, onClose, onAdd, initialDate, contextLocation, initialEntryId, embedded = false }: {
-  provider: string
-  userId: number
-  entries: JourneyEntry[]
-  trips: JourneyTrip[]
-  existingAssetIds: Set<string>
-  onClose: () => void
-  onAdd: (groups: ProviderPhotoGroup[], entryId: number | null) => Promise<void>
-  initialDate?: string
-  contextLocation?: (GeoPoint & { name?: string }) | null
-  initialEntryId?: number | null
-  embedded?: boolean
+export function ProviderPicker({
+  provider,
+  userId,
+  entries,
+  trips,
+  existingAssetIds,
+  onClose,
+  onAdd,
+  initialDate,
+  contextLocation,
+  initialEntryId,
+  embedded = false,
+}: {
+  provider: string;
+  userId: number;
+  entries: JourneyEntry[];
+  trips: JourneyTrip[];
+  existingAssetIds: Set<string>;
+  onClose: () => void;
+  onAdd: (groups: ProviderPhotoGroup[], entryId: number | null) => Promise<void>;
+  initialDate?: string;
+  contextLocation?: (GeoPoint & { name?: string }) | null;
+  initialEntryId?: number | null;
+  embedded?: boolean;
 }) {
-  const { t } = useTranslation()
-  const [filter, setFilter] = useState<'day' | 'trip' | 'custom' | 'all' | 'album'>(initialDate ? 'day' : 'trip')
-  const [photos, setPhotos] = useState<any[]>([])
-  const [albums, setAlbums] = useState<Array<{ id: string; albumName: string; assetCount: number; passphrase?: string }>>([])
-  const [selectedAlbum, setSelectedAlbum] = useState<string | null>(null)
-  const [selectedAlbumPassphrase, setSelectedAlbumPassphrase] = useState<string | undefined>(undefined)
-  const [loading, setLoading] = useState(false)
-  const [loadingMore, setLoadingMore] = useState(false)
-  const [hasMore, setHasMore] = useState(false)
-  const [searchPage, setSearchPage] = useState(1)
-  const [searchFrom, setSearchFrom] = useState('')
-  const [searchTo, setSearchTo] = useState('')
-  const [selected, setSelected] = useState<Map<string, { albumId?: string; passphrase?: string; mediaType?: string }>>(new Map())
-  const [customFrom, setCustomFrom] = useState('')
-  const [customTo, setCustomTo] = useState('')
-  const [targetEntryId, setTargetEntryId] = useState<number | null>(initialEntryId ?? null)
-  const [addToOpen, setAddToOpen] = useState(false)
-  const abortRef = useRef<AbortController | null>(null)
-  const gridRef = useRef<HTMLDivElement>(null)
+  const { t } = useTranslation();
+  const [filter, setFilter] = useState<'day' | 'trip' | 'custom' | 'all' | 'album'>(initialDate ? 'day' : 'trip');
+  const [photos, setPhotos] = useState<any[]>([]);
+  const [albums, setAlbums] = useState<
+    Array<{ id: string; albumName: string; assetCount: number; passphrase?: string }>
+  >([]);
+  const [selectedAlbum, setSelectedAlbum] = useState<string | null>(null);
+  const [selectedAlbumPassphrase, setSelectedAlbumPassphrase] = useState<string | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [searchPage, setSearchPage] = useState(1);
+  const [searchFrom, setSearchFrom] = useState('');
+  const [searchTo, setSearchTo] = useState('');
+  const [selected, setSelected] = useState<Map<string, { albumId?: string; passphrase?: string; mediaType?: string }>>(
+    new Map()
+  );
+  const [customFrom, setCustomFrom] = useState('');
+  const [customTo, setCustomTo] = useState('');
+  const [targetEntryId, setTargetEntryId] = useState<number | null>(initialEntryId ?? null);
+  const [addToOpen, setAddToOpen] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const gridRef = useRef<HTMLDivElement>(null);

  // compute trip range
  const tripRange = useMemo(() => {
-    let from = '', to = ''
+    let from = '',
+      to = '';
    for (const t of trips) {
-      if (t.start_date && (!from || t.start_date < from)) from = t.start_date
-      if (t.end_date && (!to || t.end_date > to)) to = t.end_date
+      if (t.start_date && (!from || t.start_date < from)) from = t.start_date;
+      if (t.end_date && (!to || t.end_date > to)) to = t.end_date;
    }
-    return { from, to }
-  }, [trips])
+    return { from, to };
+  }, [trips]);

  const cancelPending = () => {
-    if (abortRef.current) { abortRef.current.abort() }
-    abortRef.current = new AbortController()
-    return abortRef.current.signal
-  }
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+    abortRef.current = new AbortController();
+    return abortRef.current.signal;
+  };

  const searchPhotos = async (from: string, to: string, page: number = 1, append: boolean = false) => {
-    const signal = cancelPending()
-    if (page === 1) { setLoading(true); setPhotos([]) } else { setLoadingMore(true) }
-    setSearchFrom(from)
-    setSearchTo(to)
-    setSearchPage(page)
+    const signal = cancelPending();
+    if (page === 1) {
+      setLoading(true);
+      setPhotos([]);
+    } else {
+      setLoadingMore(true);
+    }
+    setSearchFrom(from);
+    setSearchTo(to);
+    setSearchPage(page);
    try {
-      const data = await memoriesApi.search(provider, { from, to, page, size: 50 }, signal)
-      const assets = data.assets || []
-      setPhotos(prev => append ? [...prev, ...assets] : assets)
-      setHasMore(!!data.hasMore)
+      const data = await memoriesApi.search(provider, { from, to, page, size: 50 }, signal);
+      const assets = data.assets || [];
+      setPhotos((prev) => (append ? [...prev, ...assets] : assets));
+      setHasMore(!!data.hasMore);
    } catch {
      // A cancelled request is about to be replaced by the next one, so leave
      // its paging state alone.
-      if (!signal.aborted) setHasMore(false)
+      if (!signal.aborted) setHasMore(false);
    }
-    if (!signal.aborted) { setLoading(false); setLoadingMore(false) }
-  }
+    if (!signal.aborted) {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };

  const loadMorePhotos = () => {
-    if (loadingMore || !hasMore) return
-    searchPhotos(searchFrom, searchTo, searchPage + 1, true)
-  }
+    if (loadingMore || !hasMore) return;
+    searchPhotos(searchFrom, searchTo, searchPage + 1, true);
+  };

  const loadAlbumPhotos = async (album: { id: string; passphrase?: string }) => {
-    const signal = cancelPending()
-    setLoading(true)
-    setPhotos([])
-    setHasMore(false)
+    const signal = cancelPending();
+    setLoading(true);
+    setPhotos([]);
+    setHasMore(false);
    try {
-      setPhotos((await memoriesApi.albumPhotos(provider, album.id, album.passphrase, signal)).assets || [])
-    } catch { /* ignore */ }
-    if (!signal.aborted) setLoading(false)
-  }
+      const assets = (await memoriesApi.albumPhotos(provider, album.id, album.passphrase, signal)).assets || [];
+      setPhotos(assets);
+    } catch {
+      /* ignore */
+    }
+    if (!signal.aborted) setLoading(false);
+  };

  const loadAlbums = async () => {
    try {
-      setAlbums((await memoriesApi.albums(provider)).albums || [])
+      setAlbums((await memoriesApi.albums(provider)).albums || []);
    } catch {}
-  }
+  };

  // load on mount / filter change
  useEffect(() => {
    if (filter === 'day' && initialDate) {
-      searchPhotos(initialDate, initialDate)
+      searchPhotos(initialDate, initialDate);
    } else if (filter === 'trip' && tripRange.from && tripRange.to) {
-      searchPhotos(tripRange.from, tripRange.to)
+      searchPhotos(tripRange.from, tripRange.to);
    } else if (filter === 'all') {
-      searchPhotos('', '')
+      searchPhotos('', '');
    } else if (filter === 'album' && albums.length === 0) {
-      loadAlbums()
+      loadAlbums();
    }
-  }, [filter])
+  }, [filter]);

  const handleCustomSearch = () => {
-    if (customFrom && customTo) searchPhotos(customFrom, customTo)
-  }
+    if (customFrom && customTo) searchPhotos(customFrom, customTo);
+  };

+  // Sorted here rather than in the two fetches above. contextLocation is live
+  // editor state: the place search and "use my location" write it while this
+  // picker stays mounted, and its key is only provider plus date, so a fetch-time
+  // sort would leave the grid frozen while the caption already says "near Rome".
+  // It also keeps the ranking global instead of per page, which a sort inside
+  // the appending search cannot do.
  const sortedPhotos = useMemo(
    () => sortProviderPhotos(photos, contextLocation),
    [photos, contextLocation?.lat, contextLocation?.lng],
-  )
+  );

  const toggleAsset = (id: string) => {
-    setSelected(prev => {
-      const next = new Map(prev)
+    setSelected((prev) => {
+      const next = new Map(prev);
      if (next.has(id)) {
-        next.delete(id)
+        next.delete(id);
      } else {
-        const mediaType = (photos as any[]).find(p => p.id === id)?.mediaType
-        next.set(id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase, mediaType })
+        const mediaType = (photos as any[]).find((p) => p.id === id)?.mediaType;
+        next.set(id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase, mediaType });
      }
-      return next
-    })
-  }
+      return next;
+    });
+  };

  const targetLabel = targetEntryId
-    ? entries.find(e => e.id === targetEntryId)?.title || entries.find(e => e.id === targetEntryId)?.entry_date || t('journey.stats.entries')
-    : t('journey.picker.newGallery')
+    ? entries.find((e) => e.id === targetEntryId)?.title ||
+      entries.find((e) => e.id === targetEntryId)?.entry_date ||
+      t('journey.stats.entries')
+    : t('journey.picker.newGallery');

  return (
    <div
      data-testid={embedded ? 'journey-provider-picker-embedded' : undefined}
-      className={embedded
-        ? 'w-full h-full min-h-0 flex flex-col overflow-hidden'
-        : 'fixed inset-0 z-[9999] flex items-end md:items-center justify-center md:p-5 overscroll-none bg-[rgba(9,9,11,0.75)]'}
+      className={
+        embedded
+          ? 'flex h-full min-h-0 w-full flex-col overflow-hidden'
+          : 'fixed inset-0 z-[9999] flex items-end justify-center overscroll-none bg-[rgba(9,9,11,0.75)] md:items-center md:p-5'
+      }
      role="presentation"
      onClick={embedded ? undefined : onClose}
-      onTouchMove={e => { if (!embedded && e.target === e.currentTarget) e.preventDefault() }}
+      onTouchMove={(e) => {
+        if (!embedded && e.target === e.currentTarget) e.preventDefault();
+      }}
    >
      <div
-        className={embedded
-          ? 'bg-white dark:bg-zinc-900 w-full h-full flex flex-col overflow-hidden'
-          : 'bg-white dark:bg-zinc-900 rounded-t-2xl md:rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.2)] max-w-[720px] md:max-w-[960px] w-full max-h-[calc(100dvh-var(--bottom-nav-h)-20px)] md:max-h-[85vh] flex flex-col overflow-hidden'}
+        className={
+          embedded
+            ? 'flex h-full w-full flex-col overflow-hidden bg-white dark:bg-zinc-900'
+            : 'flex max-h-[calc(100dvh-var(--bottom-nav-h)-20px)] w-full max-w-[720px] flex-col overflow-hidden rounded-t-2xl bg-white shadow-[0_20px_40px_rgba(0,0,0,0.2)] md:max-h-[85vh] md:max-w-[960px] md:rounded-2xl dark:bg-zinc-900'
+        }
        style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
        role="presentation"
-        onClick={e => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
      >
-
        {/* Header */}
-        {!embedded && <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0">
-          <h2 className="text-[16px] font-bold text-zinc-900 dark:text-white">
-            {provider === 'immich' ? 'Immich' : provider === 'synologyphotos' ? 'Synology Photos' : provider}
-          </h2>
-          <button type="button" onClick={onClose} className="w-8 h-8 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800">
-            <X size={16} />
-          </button>
-        </div>}
+        {!embedded && (
+          <div className="flex flex-shrink-0 items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700">
+            <h2 className="text-[16px] font-bold text-zinc-900 dark:text-white">
+              {provider === 'immich' ? 'Immich' : provider === 'synologyphotos' ? 'Synology Photos' : provider}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+            >
+              <X size={16} />
+            </button>
+          </div>
+        )}

        {/* Filter bar */}
-        <div className="px-6 py-3 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0">
+        <div className="flex-shrink-0 border-b border-zinc-200 px-6 py-3 dark:border-zinc-700">
          {/* Tabs */}
-          <div className="flex gap-1.5 mb-3">
+          <div className="mb-3 flex gap-1.5">
            {[
              ...(initialDate ? [{ id: 'day' as const, label: t('journey.picker.day') || 'This day' }] : []),
              { id: 'trip' as const, label: t('journey.picker.tripPeriod') },
              { id: 'custom' as const, label: t('journey.picker.dateRange') },
              { id: 'all' as const, label: t('journey.picker.allPhotos'), short: t('common.all') },
              { id: 'album' as const, label: t('journey.picker.albums') },
-            ].map(f => (
-              <button type="button"
+            ].map((f) => (
+              <button
+                type="button"
                key={f.id}
                onClick={() => setFilter(f.id)}
-                className={`px-3 py-1.5 rounded-lg text-[12px] font-medium transition-colors ${
+                className={`rounded-lg px-3 py-1.5 text-[12px] font-medium transition-colors ${
                  filter === f.id
-                    ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                    ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
                    : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'
                }`}
              >
@@ -192,180 +247,252 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
                    <span className="hidden sm:inline">{f.label}</span>
                    <span className="sm:hidden">{f.short}</span>
                  </>
-                ) : f.label}
+                ) : (
+                  f.label
+                )}
              </button>
            ))}
          </div>

          {/* Filter content — always visible row */}
-          {(!embedded || filter !== 'day') && <div className="min-h-[36px] flex items-center">
-            {filter === 'day' && initialDate && (
-              <div className="flex items-center gap-2 text-[12px] text-zinc-500">
-                <Calendar size={13} className="text-zinc-400" />
-                <span className="font-medium text-zinc-900 dark:text-white">
-                  {new Date(initialDate + 'T00:00:00').toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
-                </span>
-                {contextLocation?.name && <span className="text-zinc-400">· near {contextLocation.name}</span>}
-              </div>
-            )}
-            {filter === 'trip' && (
-              <div className="flex items-center gap-2 text-[12px] text-zinc-500">
-                {tripRange.from && tripRange.to ? (
-                  <>
-                    <Calendar size={13} className="text-zinc-400" />
-                    <span className="font-medium text-zinc-900 dark:text-white">
-                      {new Date(tripRange.from + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
-                    </span>
-                    <span className="text-zinc-400">&mdash;</span>
-                    <span className="font-medium text-zinc-900 dark:text-white">
-                      {new Date(tripRange.to + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
-                    </span>
-                    <span className="ml-1 text-zinc-400">
-                      ({Math.ceil((new Date(tripRange.to).getTime() - new Date(tripRange.from).getTime()) / 86400000) + 1} days)
-                    </span>
-                  </>
-                ) : (
-                  <span className="text-zinc-400">{t('journey.trips.noTripsLinkedSettings')}</span>
-                )}
-              </div>
-            )}
+          {(!embedded || filter !== 'day') && (
+            <div className="flex min-h-[36px] items-center">
+              {filter === 'day' && initialDate && (
+                <div className="flex items-center gap-2 text-[12px] text-zinc-500">
+                  <Calendar size={13} className="text-zinc-400" />
+                  <span className="font-medium text-zinc-900 dark:text-white">
+                    {new Date(initialDate + 'T00:00:00').toLocaleDateString(undefined, {
+                      weekday: 'long',
+                      day: 'numeric',
+                      month: 'long',
+                      year: 'numeric',
+                    })}
+                  </span>
+                  {contextLocation?.name && <span className="text-zinc-400">· near {contextLocation.name}</span>}
+                </div>
+              )}
+              {filter === 'trip' && (
+                <div className="flex items-center gap-2 text-[12px] text-zinc-500">
+                  {tripRange.from && tripRange.to ? (
+                    <>
+                      <Calendar size={13} className="text-zinc-400" />
+                      <span className="font-medium text-zinc-900 dark:text-white">
+                        {new Date(tripRange.from + 'T00:00:00').toLocaleDateString(undefined, {
+                          month: 'short',
+                          day: 'numeric',
+                        })}
+                      </span>
+                      <span className="text-zinc-400">&mdash;</span>
+                      <span className="font-medium text-zinc-900 dark:text-white">
+                        {new Date(tripRange.to + 'T00:00:00').toLocaleDateString(undefined, {
+                          month: 'short',
+                          day: 'numeric',
+                          year: 'numeric',
+                        })}
+                      </span>
+                      <span className="ml-1 text-zinc-400">
+                        (
+                        {Math.ceil((new Date(tripRange.to).getTime() - new Date(tripRange.from).getTime()) / 86400000) +
+                          1}{' '}
+                        days)
+                      </span>
+                    </>
+                  ) : (
+                    <span className="text-zinc-400">{t('journey.trips.noTripsLinkedSettings')}</span>
+                  )}
+                </div>
+              )}

-            {filter === 'custom' && (
-              <div className="flex items-center gap-2 flex-1">
-                <div className="flex-1"><DatePicker value={customFrom} onChange={setCustomFrom} /></div>
-                <span className="text-zinc-400 text-[12px]">&mdash;</span>
-                <div className="flex-1"><DatePicker value={customTo} onChange={setCustomTo} /></div>
-                <button type="button" onClick={handleCustomSearch}
-                  className="px-3 py-1.5 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[12px] font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 flex-shrink-0">
-                  {t('journey.picker.search')}
-                </button>
-              </div>
-            )}
-
-            {filter === 'album' && (
-              <div className="flex gap-2 overflow-x-auto flex-1">
-                {albums.map((a: any) => (
-                  <button type="button"
-                    key={a.id}
-                    onClick={() => { setSelectedAlbum(a.id); setSelectedAlbumPassphrase(a.passphrase); loadAlbumPhotos(a) }}
-                    className={`px-2.5 py-1 rounded-lg text-[11px] font-medium whitespace-nowrap flex-shrink-0 border ${
-                      selectedAlbum === a.id
-                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white'
-                        : 'border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800'
-                    }`}
+              {filter === 'custom' && (
+                <div className="flex flex-1 items-center gap-2">
+                  <div className="flex-1">
+                    <DatePicker value={customFrom} onChange={setCustomFrom} />
+                  </div>
+                  <span className="text-[12px] text-zinc-400">&mdash;</span>
+                  <div className="flex-1">
+                    <DatePicker value={customTo} onChange={setCustomTo} />
+                  </div>
+                  <button
+                    type="button"
+                    onClick={handleCustomSearch}
+                    className="flex-shrink-0 rounded-lg bg-zinc-900 px-3 py-1.5 text-[12px] font-medium text-white hover:bg-zinc-800 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
                  >
-                    {a.albumName || a.name || 'Album'}{a.assetCount != null ? ` (${a.assetCount})` : ''}
+                    {t('journey.picker.search')}
                  </button>
-                ))}
-                {albums.length === 0 && !loading && <span className="text-[12px] text-zinc-400">{t('journey.picker.noAlbums')}</span>}
-              </div>
-            )}
-          </div>}
+                </div>
+              )}
+
+              {filter === 'album' && (
+                <div className="flex flex-1 gap-2 overflow-x-auto">
+                  {albums.map((a: any) => (
+                    <button
+                      type="button"
+                      key={a.id}
+                      onClick={() => {
+                        setSelectedAlbum(a.id);
+                        setSelectedAlbumPassphrase(a.passphrase);
+                        loadAlbumPhotos(a);
+                      }}
+                      className={`flex-shrink-0 rounded-lg border px-2.5 py-1 text-[11px] font-medium whitespace-nowrap ${
+                        selectedAlbum === a.id
+                          ? 'border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900'
+                          : 'border-zinc-200 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800'
+                      }`}
+                    >
+                      {a.albumName || a.name || 'Album'}
+                      {a.assetCount != null ? ` (${a.assetCount})` : ''}
+                    </button>
+                  ))}
+                  {albums.length === 0 && !loading && (
+                    <span className="text-[12px] text-zinc-400">{t('journey.picker.noAlbums')}</span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
        </div>

        {/* Add-to entry selector */}
-        {!embedded && <div className="px-6 py-2.5 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 flex-shrink-0">
-          <div className="relative flex items-center gap-2">
-            <span className="text-[10px] font-semibold tracking-[0.12em] uppercase text-zinc-500">{t('journey.picker.addTo')}</span>
-            <button type="button"
-              onClick={() => setAddToOpen(!addToOpen)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-[12px] font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800"
-            >
-              <span className={targetEntryId ? '' : 'font-semibold'}>{targetLabel}</span>
-              <ChevronRight size={12} className="rotate-90 text-zinc-400" />
-            </button>
-            {addToOpen && (
-              <>
-                <div className="fixed inset-0 z-[9]" role="presentation" onClick={() => setAddToOpen(false)} />
-                <div className="absolute left-12 top-full mt-1 z-10 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-lg py-1.5 min-w-[200px] max-h-[240px] overflow-y-auto">
-                  <button type="button"
-                    onClick={() => { setTargetEntryId(null); setAddToOpen(false) }}
-                    className={`w-full text-left px-3 py-2 text-[12px] flex items-center gap-2 ${
-                      !targetEntryId
-                        ? 'bg-zinc-100 dark:bg-zinc-700 font-semibold text-zinc-900 dark:text-white'
-                        : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700'
-                    }`}
-                  >
-                    <Camera size={12} />
-                    {t('journey.picker.newGallery')}
-                  </button>
-                  {entries.filter(e => e.type !== 'skeleton' && e.title !== 'Gallery' && e.title !== '[Trip Photos]').length > 0 && (
-                    <div className="h-px bg-zinc-200 dark:bg-zinc-700 my-1" />
-                  )}
-                  {entries.filter(e => e.type !== 'skeleton' && e.title !== 'Gallery' && e.title !== '[Trip Photos]').map(e => (
-                    <button type="button"
-                      key={e.id}
-                      onClick={() => { setTargetEntryId(e.id); setAddToOpen(false) }}
-                      className={`w-full text-left px-3 py-2 text-[12px] truncate ${
-                        targetEntryId === e.id
-                          ? 'bg-zinc-100 dark:bg-zinc-700 font-semibold text-zinc-900 dark:text-white'
-                          : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700'
+        {!embedded && (
+          <div className="flex-shrink-0 border-b border-zinc-200 bg-zinc-50 px-6 py-2.5 dark:border-zinc-700 dark:bg-zinc-800/50">
+            <div className="relative flex items-center gap-2">
+              <span className="text-[10px] font-semibold tracking-[0.12em] text-zinc-500 uppercase">
+                {t('journey.picker.addTo')}
+              </span>
+              <button
+                type="button"
+                onClick={() => setAddToOpen(!addToOpen)}
+                className="flex items-center gap-1.5 rounded-lg border border-zinc-200 px-3 py-1.5 text-[12px] font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+              >
+                <span className={targetEntryId ? '' : 'font-semibold'}>{targetLabel}</span>
+                <ChevronRight size={12} className="rotate-90 text-zinc-400" />
+              </button>
+              {addToOpen && (
+                <>
+                  <div className="fixed inset-0 z-[9]" role="presentation" onClick={() => setAddToOpen(false)} />
+                  <div className="absolute top-full left-12 z-10 mt-1 max-h-[240px] min-w-[200px] overflow-y-auto rounded-xl border border-zinc-200 bg-white py-1.5 shadow-lg dark:border-zinc-700 dark:bg-zinc-800">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setTargetEntryId(null);
+                        setAddToOpen(false);
+                      }}
+                      className={`flex w-full items-center gap-2 px-3 py-2 text-left text-[12px] ${
+                        !targetEntryId
+                          ? 'bg-zinc-100 font-semibold text-zinc-900 dark:bg-zinc-700 dark:text-white'
+                          : 'text-zinc-700 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-700'
                      }`}
                    >
-                      {e.title || e.location_name || new Date(e.entry_date + 'T12:00:00').toLocaleDateString(undefined, { day: 'numeric', month: 'short' })}
+                      <Camera size={12} />
+                      {t('journey.picker.newGallery')}
                    </button>
-                  ))}
-                </div>
-              </>
-            )}
+                    {entries.filter(
+                      (e) => e.type !== 'skeleton' && e.title !== 'Gallery' && e.title !== '[Trip Photos]'
+                    ).length > 0 && <div className="my-1 h-px bg-zinc-200 dark:bg-zinc-700" />}
+                    {entries
+                      .filter((e) => e.type !== 'skeleton' && e.title !== 'Gallery' && e.title !== '[Trip Photos]')
+                      .map((e) => (
+                        <button
+                          type="button"
+                          key={e.id}
+                          onClick={() => {
+                            setTargetEntryId(e.id);
+                            setAddToOpen(false);
+                          }}
+                          className={`w-full truncate px-3 py-2 text-left text-[12px] ${
+                            targetEntryId === e.id
+                              ? 'bg-zinc-100 font-semibold text-zinc-900 dark:bg-zinc-700 dark:text-white'
+                              : 'text-zinc-700 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-700'
+                          }`}
+                        >
+                          {e.title ||
+                            e.location_name ||
+                            new Date(e.entry_date + 'T12:00:00').toLocaleDateString(undefined, {
+                              day: 'numeric',
+                              month: 'short',
+                            })}
+                        </button>
+                      ))}
+                  </div>
+                </>
+              )}
+            </div>
          </div>
-        </div>}
+        )}

        {/* Select all bar — sticky above grid */}
-        {!loading && sortedPhotos.length > 0 && (() => {
-          const selectable = sortedPhotos.filter((a: any) => !existingAssetIds.has(a.id))
-          const allSelected = selectable.length > 0 && selectable.every((a: any) => selected.has(a.id))
-          if (selectable.length === 0) return null
-          return (
-            <div className="px-4 py-2 border-b border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 flex-shrink-0">
-              <button type="button"
-                onClick={() => {
-                  if (allSelected) {
-                    setSelected(new Map())
-                  } else {
-                    setSelected(new Map(selectable.map((a: any) => [a.id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase, mediaType: a.mediaType }])))
-                  }
-                }}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-medium border border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800"
-              >
-                <div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${
-                  allSelected
-                    ? 'bg-zinc-900 dark:bg-white border-zinc-900 dark:border-white'
-                    : 'border-zinc-300 dark:border-zinc-600'
-                }`}>
-                  {allSelected && <Check size={9} className="text-white dark:text-zinc-900" strokeWidth={3} />}
-                </div>
-                {allSelected ? t('journey.picker.deselectAll') : t('journey.picker.selectAll')} ({selectable.length})
-              </button>
-            </div>
-          )
-        })()}
+        {!loading &&
+          sortedPhotos.length > 0 &&
+          (() => {
+            const selectable = sortedPhotos.filter((a: any) => !existingAssetIds.has(a.id));
+            const allSelected = selectable.length > 0 && selectable.every((a: any) => selected.has(a.id));
+            if (selectable.length === 0) return null;
+            return (
+              <div className="flex-shrink-0 border-b border-zinc-200 bg-white px-4 py-2 dark:border-zinc-700 dark:bg-zinc-900">
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (allSelected) {
+                      setSelected(new Map());
+                    } else {
+                      setSelected(
+                        new Map(
+                          selectable.map((a: any) => [
+                            a.id,
+                            {
+                              albumId: selectedAlbum ?? undefined,
+                              passphrase: selectedAlbumPassphrase,
+                              mediaType: a.mediaType,
+                            },
+                          ])
+                        )
+                      );
+                    }
+                  }}
+                  className="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 px-2.5 py-1 text-[11px] font-medium text-zinc-500 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800"
+                >
+                  <div
+                    className={`flex h-3.5 w-3.5 items-center justify-center rounded border ${
+                      allSelected
+                        ? 'border-zinc-900 bg-zinc-900 dark:border-white dark:bg-white'
+                        : 'border-zinc-300 dark:border-zinc-600'
+                    }`}
+                  >
+                    {allSelected && <Check size={9} className="text-white dark:text-zinc-900" strokeWidth={3} />}
+                  </div>
+                  {allSelected ? t('journey.picker.deselectAll') : t('journey.picker.selectAll')} ({selectable.length})
+                </button>
+              </div>
+            );
+          })()}

        {/* Photo grid */}
-        <div className="flex-1 overflow-y-auto overscroll-contain p-4 min-h-0">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-4">
          {loading ? (
            <div className="flex justify-center py-12">
-              <div className="w-6 h-6 border-2 border-zinc-300 border-t-zinc-900 rounded-full animate-spin" />
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-900" />
            </div>
          ) : sortedPhotos.length === 0 ? (
-            <div className="text-center py-12">
+            <div className="py-12 text-center">
              <p className="text-[13px] text-zinc-500">
-                {filter === 'trip' && !tripRange.from ? t('journey.trips.noTripsLinkedSettings') : t('journey.detail.noPhotos')}
+                {filter === 'trip' && !tripRange.from
+                  ? t('journey.trips.noTripsLinkedSettings')
+                  : t('journey.detail.noPhotos')}
              </p>
            </div>
          ) : (
            <div>
-              {groupPhotosByDate(sortedPhotos).map(group => (
+              {groupPhotosByDate(sortedPhotos).map((group) => (
                <div key={group.date}>
                  {(!embedded || filter !== 'day') && (
-                    <p className="text-[11px] font-medium text-zinc-500 dark:text-zinc-400 mb-2 mt-4 first:mt-0">
+                    <p className="mt-4 mb-2 text-[11px] font-medium text-zinc-500 first:mt-0 dark:text-zinc-400">
                      {group.label}
                    </p>
                  )}
-                  <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-1.5 mb-1">
+                  <div className="mb-1 grid grid-cols-3 gap-1.5 sm:grid-cols-4 md:grid-cols-5">
                    {group.assets.map((asset: any) => {
-                      const isSelected = selected.has(asset.id)
-                      const alreadyAdded = existingAssetIds.has(asset.id)
+                      const isSelected = selected.has(asset.id);
+                      const alreadyAdded = existingAssetIds.has(asset.id);
                      return (
                        <button
                          type="button"
@@ -374,42 +501,47 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
                          aria-pressed={isSelected}
                          aria-label={asset.city || group.label}
                          onClick={() => !alreadyAdded && toggleAsset(asset.id)}
-                          className={`relative block w-full aspect-square rounded-lg overflow-hidden ${
+                          className={`relative block aspect-square w-full overflow-hidden rounded-lg ${
                            alreadyAdded
-                              ? 'opacity-40 cursor-not-allowed'
+                              ? 'cursor-not-allowed opacity-40'
                              : isSelected
-                                ? 'ring-2 ring-zinc-900 dark:ring-white ring-offset-2 dark:ring-offset-zinc-900 cursor-pointer'
+                                ? 'cursor-pointer ring-2 ring-zinc-900 ring-offset-2 dark:ring-white dark:ring-offset-zinc-900'
                                : 'cursor-pointer'
                          }`}
                        >
                          <img
                            src={`/api/integrations/memories/${provider}/assets/0/${asset.id}/${userId}/thumbnail${selectedAlbumPassphrase ? `?passphrase=${encodeURIComponent(selectedAlbumPassphrase)}` : ''}`}
                            alt=""
-                            className="w-full h-full object-cover"
+                            className="h-full w-full object-cover"
                            loading="lazy"
-                            onError={e => {
-                              const img = e.currentTarget
-                              const original = `/api/integrations/memories/${provider}/assets/0/${asset.id}/${userId}/original${selectedAlbumPassphrase ? `?passphrase=${encodeURIComponent(selectedAlbumPassphrase)}` : ''}`
-                              if (!img.src.includes('/original')) img.src = original
+                            onError={(e) => {
+                              const img = e.currentTarget;
+                              const original = `/api/integrations/memories/${provider}/assets/0/${asset.id}/${userId}/original${selectedAlbumPassphrase ? `?passphrase=${encodeURIComponent(selectedAlbumPassphrase)}` : ''}`;
+                              if (!img.src.includes('/original')) img.src = original;
                            }}
                          />
                          {alreadyAdded && (
-                            <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-zinc-500 text-white flex items-center justify-center">
+                            <div className="absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-zinc-500 text-white">
                              <Check size={12} />
                            </div>
                          )}
                          {isSelected && !alreadyAdded && (
-                            <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center">
+                            <div className="absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-zinc-900 text-white dark:bg-white dark:text-zinc-900">
                              <Check size={12} />
                            </div>
                          )}
+                          {asset.mediaType === 'video' && (
+                            <div className="pointer-events-none absolute bottom-1.5 left-1.5 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-black/60">
+                              <Play size={8} className="ml-px text-white" fill="currentColor" />
+                            </div>
+                          )}
                          {asset.city && (
-                            <div className="absolute bottom-0 left-0 right-0 p-1 bg-gradient-to-t from-black/50 to-transparent">
-                              <p className="text-[8px] text-white truncate">{asset.city}</p>
+                            <div className="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/50 to-transparent p-1">
+                              <p className="truncate text-[8px] text-white">{asset.city}</p>
                            </div>
                          )}
                        </button>
-                      )
+                      );
                    })}
                  </div>
                </div>
@@ -421,35 +553,58 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
        </div>

        {/* Footer */}
-        <div className="flex items-center justify-between px-6 py-4 border-t border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 flex-shrink-0">
-          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-200/60 dark:bg-zinc-700/60 text-[11px] leading-none text-zinc-500 dark:text-zinc-400">
-            <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[10px] leading-none font-bold">{selected.size}</span>
+        <div className="flex flex-shrink-0 items-center justify-between border-t border-zinc-200 bg-zinc-50 px-6 py-4 dark:border-zinc-700 dark:bg-zinc-800/50">
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-zinc-200/60 px-2.5 py-1 text-[11px] leading-none text-zinc-500 dark:bg-zinc-700/60 dark:text-zinc-400">
+            <span className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-zinc-900 px-1 text-[10px] leading-none font-bold text-white dark:bg-white dark:text-zinc-900">
+              {selected.size}
+            </span>
            <span className="leading-[18px]">{t('journey.picker.selected')}</span>
          </span>
          <div className="flex items-center gap-2">
-            <button type="button" onClick={onClose} className="px-3.5 py-2 rounded-lg border border-zinc-200 dark:border-zinc-600 text-[13px] font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-zinc-200 px-3.5 py-2 text-[13px] font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-700"
+            >
              {t('common.cancel')}
            </button>
-            <button type="button"
-              onClick={() => {
-                const groupMap = new Map<string | undefined, { assetIds: string[]; mediaTypes: string[] }>()
-                for (const [assetId, { passphrase, mediaType }] of selected.entries()) {
-                  const g = groupMap.get(passphrase) || { assetIds: [], mediaTypes: [] }
-                  g.assetIds.push(assetId)
-                  g.mediaTypes.push(mediaType === 'video' ? 'video' : 'image')
-                  groupMap.set(passphrase, g)
+            <button
+              type="button"
+              onClick={async () => {
+                if (adding) return;
+                setAdding(true);
+                try {
+                  const groupMap = new Map<string | undefined, { assetIds: string[]; mediaTypes: string[] }>();
+                  for (const [assetId, { passphrase, mediaType }] of selected.entries()) {
+                    const g = groupMap.get(passphrase) || { assetIds: [], mediaTypes: [] };
+                    g.assetIds.push(assetId);
+                    g.mediaTypes.push(mediaType === 'video' ? 'video' : 'image');
+                    groupMap.set(passphrase, g);
+                  }
+                  const groups = [...groupMap.entries()].map(([passphrase, g]) => ({
+                    assetIds: g.assetIds,
+                    mediaTypes: g.mediaTypes,
+                    passphrase,
+                  }));
+                  await onAdd(groups, targetEntryId);
+                } finally {
+                  setAdding(false);
                }
-                const groups = [...groupMap.entries()].map(([passphrase, g]) => ({ assetIds: g.assetIds, mediaTypes: g.mediaTypes, passphrase }))
-                onAdd(groups, targetEntryId)
              }}
-              disabled={selected.size === 0}
-              className="px-3.5 py-2 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[13px] font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 disabled:opacity-40 disabled:cursor-not-allowed"
+              disabled={selected.size === 0 || adding}
+              className="rounded-lg bg-zinc-900 px-3.5 py-2 text-[13px] font-medium text-white hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
            >
-              {t('common.add')} {selected.size > 0 ? `(${selected.size})` : ''}
+              {adding ? (
+                <span className="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-zinc-400 border-t-white dark:border-t-zinc-900" />
+              ) : (
+                <>
+                  {t('common.add')} {selected.size > 0 ? `(${selected.size})` : ''}
+                </>
+              )}
            </button>
          </div>
        </div>
      </div>
    </div>
-  )
+  );
 }
@@ -1,4 +1,4 @@
-// FE-COMP-JSCROLLTRIG-001 to FE-COMP-JSCROLLTRIG-006
+// FE-COMP-JSCROLLTRIG-001 to FE-COMP-JSCROLLTRIG-009

 import { render } from '../../../tests/helpers/render'
 import { resetAllStores } from '../../../tests/helpers/store'
@@ -87,4 +87,44 @@ describe('ScrollTrigger', () => {
    unmount()
    expect(observers[0].disconnect).toHaveBeenCalled()
  })
+
+  it('FE-COMP-JSCROLLTRIG-007: a fresh callback identity alone does not rebuild the observer', () => {
+    // Both callers hand in a new arrow every render; rebuilding for that churn
+    // replays the initial callback and pulls pages nobody asked for.
+    const { rerender } = render(<ScrollTrigger onVisible={vi.fn()} loading={false} />)
+    expect(observers).toHaveLength(1)
+
+    rerender(<ScrollTrigger onVisible={vi.fn()} loading={false} />)
+    rerender(<ScrollTrigger onVisible={vi.fn()} loading={false} />)
+
+    expect(observers).toHaveLength(1)
+    expect(observers[0].disconnect).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-JSCROLLTRIG-008: the surviving observer calls the newest callback, not the one it was built with', () => {
+    const first = vi.fn()
+    const second = vi.fn()
+    const { rerender } = render(<ScrollTrigger onVisible={first} loading={false} />)
+    rerender(<ScrollTrigger onVisible={second} loading={false} />)
+
+    intersect(observers[0], true)
+
+    expect(first).not.toHaveBeenCalled()
+    expect(second).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-COMP-JSCROLLTRIG-009: a settled page really re-observes the sentinel', () => {
+    // A browser observer only fires on a threshold crossing plus once per
+    // observe(). A sentinel that never leaves the 200px margin therefore only
+    // gets another callback because the loading flip rebuilds the observer, so
+    // loading must stay a dependency rather than moving into a ref as well.
+    const onVisible = vi.fn()
+    const { rerender } = render(<ScrollTrigger onVisible={onVisible} loading />)
+    expect(observers).toHaveLength(1)
+
+    rerender(<ScrollTrigger onVisible={onVisible} loading={false} />)
+
+    expect(observers).toHaveLength(2)
+    expect(observers[0].disconnect).toHaveBeenCalled()
+  })
 })
@@ -2,13 +2,24 @@ import { useEffect, useRef } from 'react'

 export function ScrollTrigger({ onVisible, loading }: { onVisible: () => void; loading: boolean }) {
  const ref = useRef<HTMLDivElement>(null)
+  // Both callers hand in a fresh arrow on every render — the picker its
+  // loadMorePhotos, the gallery its setVisibleCount step. With onVisible in the
+  // effect deps, every unrelated re-render tore the observer down and observed
+  // again, and each observe() replays the initial callback. The ref keeps the
+  // observer out of that churn.
+  //
+  // loading stays a dependency on purpose: re-observing after a page has landed
+  // is the only thing that still produces a callback when the sentinel never
+  // left the 200px margin.
+  const onVisibleRef = useRef(onVisible)
+  onVisibleRef.current = onVisible
  useEffect(() => {
    const el = ref.current
    if (!el) return
-    const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && !loading) onVisible() }, { rootMargin: '200px' })
+    const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && !loading) onVisibleRef.current() }, { rootMargin: '200px' })
    obs.observe(el)
    return () => obs.disconnect()
-  }, [onVisible, loading])
+  }, [loading])
  return (
    <div ref={ref} className="flex justify-center py-4 mt-2">
      <div className="w-5 h-5 border-2 border-zinc-300 border-t-zinc-900 dark:border-zinc-600 dark:border-t-white rounded-full animate-spin" />
@@ -373,4 +373,40 @@ describe('JourneySettingsDialog', () => {
    expect(onClose).not.toHaveBeenCalled()
    expect(screen.getByRole('heading', { name: 'Journey Settings' })).toBeInTheDocument()
  })
+
+  it('FE-JRN-SETTINGS-023: the trip-GPX switch reads off by default and turns on in one click (#2194)', async () => {
+    const { onRefresh, onSaved } = mountDialog()
+
+    const sw = screen.getByRole('switch', { name: /GPX/i })
+    expect(sw).toHaveAttribute('aria-checked', 'false')
+
+    await userEvent.click(sw)
+
+    await waitFor(() => expect(updateJourney).toHaveBeenCalledWith(3, { show_trip_tracks: true }))
+    // Refresh, never onSaved: onSaved closes the dialog, which would destroy the
+    // switch as it is flipped and skip the unsaved-changes guard.
+    await waitFor(() => expect(onRefresh).toHaveBeenCalled())
+    expect(onSaved).not.toHaveBeenCalled()
+  })
+
+  it('FE-JRN-SETTINGS-024: a journey that already draws its tracks switches them back off (#2194)', async () => {
+    // The column is INTEGER, so what arrives over the wire is 1, not true.
+    mountDialog(buildJourney({ show_trip_tracks: 1 }))
+
+    const sw = screen.getByRole('switch', { name: /GPX/i })
+    expect(sw).toHaveAttribute('aria-checked', 'true')
+
+    await userEvent.click(sw)
+    await waitFor(() => expect(updateJourney).toHaveBeenCalledWith(3, { show_trip_tracks: false }))
+  })
+
+  it('FE-JRN-SETTINGS-025: a failed switch write says so and leaves the dialog open (#2194)', async () => {
+    updateJourney.mockRejectedValueOnce(new Error('nope'))
+    const { onClose } = mountDialog()
+
+    await userEvent.click(screen.getByRole('switch', { name: /GPX/i }))
+
+    await waitFor(() => expect(toastSpy).toHaveBeenCalled())
+    expect(onClose).not.toHaveBeenCalled()
+  })
 })
@@ -77,6 +77,24 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
    }
  }

+  // Saved on the spot rather than on Save, like the archive switch above it:
+  // it is a view setting, and the point of it is seeing the map change (#2194).
+  const [savingTracks, setSavingTracks] = useState(false)
+  const handleTracksToggle = async () => {
+    setSavingTracks(true)
+    try {
+      await updateJourney(journey.id, { show_trip_tracks: !journey.show_trip_tracks })
+      // onRefresh, not onSaved: onSaved closes the dialog, which would destroy the
+      // switch the moment it is flipped AND skip handleClose's unsaved-changes
+      // guard, silently dropping a title the owner had typed but not saved yet.
+      onRefresh()
+    } catch {
+      toast.error(t('journey.settings.saveFailed'))
+    } finally {
+      setSavingTracks(false)
+    }
+  }
+
  const handleDelete = async () => {
    try {
      await deleteJourney(journey.id)
@@ -141,6 +159,30 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
            />
          </div>

+          {/* Trip GPX tracks on the journey map (#2194) */}
+          <div>
+            <label className="text-[10px] font-semibold tracking-[0.12em] uppercase text-zinc-500 block mb-1.5">{t('journey.settings.tracks')}</label>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={!!journey.show_trip_tracks}
+              disabled={savingTracks}
+              onClick={handleTracksToggle}
+              className="w-full flex items-center gap-3 px-3.5 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-xl bg-white dark:bg-zinc-800 text-left disabled:opacity-60"
+            >
+              <span className="flex-1 min-w-0">
+                <span className="block text-[14px] text-zinc-900 dark:text-white">{t('journey.settings.showTripTracks')}</span>
+                <span className="block text-[11px] text-zinc-500">{t('journey.settings.showTripTracksHint')}</span>
+              </span>
+              <span
+                aria-hidden="true"
+                className={`w-9 h-5 rounded-full flex-shrink-0 p-0.5 transition-colors ${journey.show_trip_tracks ? 'bg-emerald-500' : 'bg-zinc-300 dark:bg-zinc-600'}`}
+              >
+                <span className={`block w-4 h-4 rounded-full bg-white transition-transform ${journey.show_trip_tracks ? 'translate-x-4' : ''}`} />
+              </span>
+            </button>
+          </div>
+
          </div>

          {/* Right column */}
@@ -1,4 +1,4 @@
-// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-027
+// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-050

 vi.mock('../../api/websocket', () => ({
  connect: vi.fn(),
@@ -27,6 +27,10 @@ vi.mock('leaflet', () => {
    setView: vi.fn(),
    flyTo: vi.fn(),
    getZoom: vi.fn(() => 10),
+    // Leaflet throws "Set map center and zoom first." out of these until the map
+    // has a view; the loaded map is the default here, FE-COMP-JOURNEYMAP-050
+    // takes it away for the window that #2254 fell into.
+    getCenter: vi.fn(() => ({ lat: 0, lng: 0 })),
    zoomIn: vi.fn(),
    zoomOut: vi.fn(),
    // The photo layer subscribes to zoom/pan and clusters in screen space (#1614).
@@ -58,6 +62,7 @@ import { render, act, fireEvent, waitFor } from '../../../tests/helpers/render';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { useSettingsStore } from '../../store/settingsStore';
 import { buildSettings } from '../../../tests/helpers/factories';
+import type { Mock } from 'vitest';
 import L from 'leaflet';
 import JourneyMap from './JourneyMap';
 import type { JourneyMapHandle } from './JourneyMap';
@@ -81,6 +86,9 @@ vi.mock('@maplibre/maplibre-gl-leaflet', () => ({
  }),
 }));
 vi.mock('../Map/engines/maplibre', () => ({ default: {} }));
+// jsdom refuses a WebGL context, and the basemap now believes it (#2288). These
+// cases are about the GL layer, so the probe says yes here.
+vi.mock('../../utils/webgl', () => ({ hasWebGL: () => true, resetWebGLProbe: () => {} }));

 const entriesWithCoords = [
  { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Paris', mood: null, entry_date: '2025-06-01' },
@@ -604,6 +612,39 @@ describe('JourneyMap', () => {
    expect(colors).not.toContain('#ffffff');
  });

+  /** The opening viewport is the assertion here, so the frame gets read out of the bounds call. */
+  const fitCoords = () => vi.mocked(L.latLngBounds).mock.calls[0][0] as [number, number][];
+
+  // #2194: a recorded drive across the country used to pull the opening view out to
+  // the whole trip, leaving the journey's own entries as a speck.
+  it('FE-COMP-JOURNEYMAP-048: frames the entries, not the tracks, when the journey has both', () => {
+    const origRAF = globalThis.requestAnimationFrame;
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback) => { cb(0); return 0; };
+    try {
+      render(
+        <JourneyMap checkins={[]} entries={entriesWithCoords} tracks={[track({ points: [[10, 10], [11, 11]] })]} />
+      );
+
+      expect(mockedMap().fitBounds).toHaveBeenCalled();
+      expect(fitCoords()).toEqual([[48.8566, 2.3522], [52.52, 13.405]]);
+    } finally {
+      globalThis.requestAnimationFrame = origRAF;
+    }
+  });
+
+  it('FE-COMP-JOURNEYMAP-049: with nothing else on the map the tracks are framed instead of the world', () => {
+    const origRAF = globalThis.requestAnimationFrame;
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback) => { cb(0); return 0; };
+    try {
+      render(<JourneyMap checkins={[]} entries={entriesWithoutCoords} tracks={[track()]} />);
+
+      expect(fitCoords()).toEqual([[47.1, 11.2], [47.2, 11.3]]);
+      expect(mockedMap().setView).not.toHaveBeenCalledWith([30, 0], 2);
+    } finally {
+      globalThis.requestAnimationFrame = origRAF;
+    }
+  });
+
  // A string handed to bindTooltip becomes innerHTML. A track name is a place
  // name off a shared trip and an entry label is a journey title, so both are
  // written by someone who is not necessarily the person reading the map — and
@@ -660,4 +701,47 @@ describe('JourneyMap', () => {
    expect(html).toHaveLength(1);
    expect(html[0]).not.toMatch(/>\d+</);
  });
+
+  // #2254 — the map effect defers its opening fitBounds/setView to a rAF, so this
+  // effect can draw while the map still has no center or zoom. Clustering
+  // projects to container pixels, which throws in that window and took the whole
+  // public journey page down with it.
+  it('FE-COMP-JOURNEYMAP-050: waits out a map that has no view yet, then draws on moveend', () => {
+    const noView = () => { throw new Error('Set map center and zoom first.'); };
+    let hasView = false;
+    const photoHtml = () =>
+      vi.mocked(L.divIcon).mock.calls.map(c => String(c[0]?.html)).filter(h => h.includes('/uploads/'));
+
+    // The mock hands out one shared map instance, so it can be reached — and
+    // stripped of its view — before the component ever builds one. Typed down to
+    // the three spies this needs: L.map's signature promises a real Leaflet map.
+    type MapProbe = { getCenter: Mock; latLngToContainerPoint: Mock; on: Mock };
+    L.map(document.createElement('div'));
+    const map = mockedMap() as MapProbe;
+    vi.mocked(L.map).mockClear();
+    map.getCenter.mockImplementation(() => (hasView ? { lat: 0, lng: 0 } : noView()));
+    map.latLngToContainerPoint.mockImplementation(() => (hasView ? { x: 0, y: 0 } : noView()));
+
+    try {
+      // Rendering must survive the viewless window, and draw nothing in it.
+      expect(() =>
+        render(
+          <JourneyMap checkins={[]} entries={[]} photos={[{ id: 'p1', lat: 1, lng: 2, thumbUrl: '/uploads/late.jpg' }]} />,
+        ),
+      ).not.toThrow();
+      expect(photoHtml()).toHaveLength(0);
+
+      // The deferred fitBounds lands: the listener this effect registered redraws.
+      hasView = true;
+      const redraw = map.on.mock.calls.find(c => c[0] === 'moveend')?.[1] as () => void;
+      expect(redraw).toBeTypeOf('function');
+      act(() => { redraw(); });
+
+      expect(photoHtml()).toHaveLength(1);
+      expect(photoHtml()[0]).toContain('/uploads/late.jpg');
+    } finally {
+      map.getCenter.mockImplementation(() => ({ lat: 0, lng: 0 }));
+      map.latLngToContainerPoint.mockImplementation(() => ({ x: 0, y: 0 }));
+    }
+  });
 });
@@ -4,7 +4,7 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { useCartoApiKey } from '../../hooks/useTileUrl'
 import { isVectorStyle, resolveTileUrl } from '../../utils/tileUrl'
 import { OFM_DARK, OFM_POSITRON, attributionForTile } from '../../constants/mapDefaults'
-import { attachVectorBasemap, type GlLeafletLayer } from '../Map/VectorBasemap'
+import { attachVectorBasemap, detachBasemapLayer, restyleBasemap, type BasemapLayer } from '../Map/VectorBasemap'
 import { escapeHtml, type JourneyTrack } from '@trek/shared'

 export interface MapMarkerItem {
@@ -162,7 +162,8 @@ function JourneyMap(
  const tileUrlRef = useRef(tileUrl)
  tileUrlRef.current = tileUrl
  const tileLayerRef = useRef<L.TileLayer | null>(null)
-  const glLayerRef = useRef<GlLeafletLayer | null>(null)
+  // GL layer or the raster stand-in a browser without WebGL gets instead (#2288).
+  const glLayerRef = useRef<BasemapLayer | null>(null)
  // The vector basemap loads async; a map torn down before it lands must not get one.
  const cancelledRef = useRef(false)
  const containerRef = useRef<HTMLDivElement>(null)
@@ -268,6 +269,23 @@ function JourneyMap(
    itemsRef.current = items

    const allCoords: L.LatLngTuple[] = []
+    /**
+     * Track geometry is kept OUT of the fit set (#2194) and used only when there
+     * is nothing else to frame.
+     *
+     * A journey's opening viewport should show the journey — its entries and the
+     * trail between them. Letting a recorded GPX into the bounds meant one drive
+     * across a country zoomed the map out until the entries were specks, which
+     * is what the reporter's screenshot shows. JourneyMapGL already fits on
+     * entries + trail alone, so for every journey that has entries the two
+     * renderers now agree where they used to differ.
+     *
+     * They still differ for a journey with tracks and nothing else: this one
+     * frames the tracks, JourneyMapGL falls back to the world view. Framing the
+     * only thing on the map is the better of the two, and converging the GL side
+     * is a change to a renderer this issue is not about.
+     */
+    const trackCoords: L.LatLngTuple[] = []

    if (stableTrail.length > 1) {
      const coords = stableTrail.map(p => [p.lat, p.lng] as L.LatLngTuple)
@@ -293,7 +311,7 @@ function JourneyMap(
      // becomes innerHTML, and a track name is a place name off a shared trip.
      if (track.name) line.bindTooltip(escapeHtml(track.name), { sticky: true, direction: 'top', className: 'map-tooltip' })
      line.addTo(map)
-      coords.forEach(c => allCoords.push(c))
+      coords.forEach(c => trackCoords.push(c))
    }

    // route polyline — only in non-fullscreen (sidebar map) mode
@@ -341,9 +359,12 @@ function JourneyMap(
      if (!mapRef.current) return
      try {
        map.invalidateSize()
-        if (allCoords.length > 0) {
+        // Tracks only get a say when the journey has nothing located of its own —
+        // a world view would be worse than framing the one thing on the map.
+        const fitCoords = allCoords.length > 0 ? allCoords : trackCoords
+        if (fitCoords.length > 0) {
          const pb = paddingBottom || 50
-          map.fitBounds(L.latLngBounds(allCoords), { paddingTopLeft: [50, 50], paddingBottomRight: [50, pb], maxZoom: 16 })
+          map.fitBounds(L.latLngBounds(fitCoords), { paddingTopLeft: [50, 50], paddingBottomRight: [50, pb], maxZoom: 16 })
        } else {
          map.setView([30, 0], 2)
        }
@@ -359,7 +380,7 @@ function JourneyMap(
      map.remove()
      mapRef.current = null
      tileLayerRef.current = null
-      glLayerRef.current?.remove()
+      detachBasemapLayer(glLayerRef.current)
      glLayerRef.current = null
      markersRef.current.clear()
    }
@@ -369,7 +390,7 @@ function JourneyMap(
  // marker and track it just drew. A vector basemap restyles instead, which also
  // avoids spending a WebGL context on every theme toggle.
  useEffect(() => {
-    if (isVectorStyle(tileUrl)) glLayerRef.current?.getMaplibreMap()?.setStyle(tileUrl)
+    if (isVectorStyle(tileUrl)) restyleBasemap(glLayerRef.current, tileUrl)
    else tileLayerRef.current?.setUrl(tileUrl)
  }, [tileUrl])

@@ -385,6 +406,16 @@ function JourneyMap(
      photoLayerRef.current = null
      if (!photos?.length) return

+      // The initial view (setView/fitBounds) is set on a deferred rAF in the
+      // map-build effect above, so this can run before the map has a center/zoom
+      // — latLngToContainerPoint throws in that window. Skip; the moveend/zoomend
+      // listener below redraws once the deferred view lands.
+      try {
+        map.getCenter()
+      } catch {
+        return
+      }
+
      const group = L.layerGroup()
      for (const cluster of clusterPhotos(map, photos)) {
        const marker = L.marker([cluster.lat, cluster.lng], {
@@ -25,14 +25,33 @@ describe('buildNavItems', () => {
 })

 describe('splitMobileNav', () => {
-  it('falls back to Dashboard + first two in the bar when there is no config', () => {
+  it('docks the top two enabled defaults when there is no config', () => {
    for (const cfg of [undefined, { bar: [], more: [] }]) {
      const s = splitMobileNav(items, cfg)
-      expect(ids(s.bar)).toEqual(['dashboard', 'vacay', 'atlas'])
-      expect(ids(s.more)).toEqual(['journey', 'collections'])
+      expect(ids(s.bar)).toEqual(['dashboard', 'vacay', 'journey'])
+      // Atlas is still reachable, one tap further under More.
+      expect(ids(s.more)).toEqual(['atlas', 'collections'])
    }
  })

+  it('keeps the Vacay/Atlas dock on an instance where Journey is switched off', () => {
+    const s = splitMobileNav([item('dashboard'), item('vacay'), item('atlas')], undefined)
+    expect(ids(s.bar)).toEqual(['dashboard', 'vacay', 'atlas'])
+    expect(ids(s.more)).toEqual([])
+  })
+
+  it('fills the free slot from the next default rather than leaving it empty', () => {
+    const s = splitMobileNav([item('dashboard'), item('atlas'), item('journey')], undefined)
+    expect(ids(s.bar)).toEqual(['dashboard', 'journey', 'atlas'])
+    expect(ids(s.more)).toEqual([])
+  })
+
+  it('leaves an account that picked its own dock alone', () => {
+    const s = splitMobileNav(items, { bar: ['vacay', 'atlas'], more: ['journey', 'collections'] })
+    expect(ids(s.bar)).toEqual(['dashboard', 'vacay', 'atlas'])
+    expect(ids(s.more)).toEqual(['journey', 'collections'])
+  })
+
  it('honours a custom split and order, Dashboard still first', () => {
    const s = splitMobileNav(items, { bar: ['journey'], more: ['collections', 'vacay', 'atlas'] })
    expect(ids(s.bar)).toEqual(['dashboard', 'journey'])
@@ -35,8 +35,18 @@ const ADDON_ICONS: Record<string, LucideIcon> = {
 /** The bar holds Dashboard + at most this many custom items; the rest go to More.
 * Two keeps the dock at 3 destinations (Dashboard + 2) so the More slot still fits. */
 export const MOBILE_NAV_MAX_BAR = 2
-/** The built-in dock next to Dashboard for an un-customised account; everything else starts under More. */
-export const DEFAULT_DOCK_IDS = ['vacay', 'atlas']
+/**
+ * The built-in dock next to Dashboard for an un-customised account, in priority
+ * order: the first MOBILE_NAV_MAX_BAR of these that are actually enabled take the
+ * slots, everything else starts under More.
+ *
+ * Journey outranks Atlas because a phone in the field wants the journal it writes
+ * to every day, not the map of countries it already visited. Journey ships
+ * disabled though, so an instance that never turned it on keeps the Vacay/Atlas
+ * dock it has today. Listing all four known global addons rather than just the
+ * top two also keeps the dock filled when one of them is switched off.
+ */
+export const DEFAULT_DOCK_IDS = ['vacay', 'journey', 'atlas', 'collections']

 export function buildNavItems(
  globalAddons: { id: string; name: string; icon: string }[],
@@ -90,10 +100,10 @@ export interface MobileNavSplit {
 /**
 * Resolve the persisted `{ bar, more }` id split against the live nav items.
 * Dashboard is always pinned first in the bar. An empty/absent config falls back
- * to the built-in dock (Dashboard + Vacay/Atlas where enabled, everything else
- * under More) so an un-customised user sees exactly today's layout. Stored ids
- * that no longer resolve are dropped; newly available items are appended under
- * More.
+ * to the built-in dock (Dashboard + the top DEFAULT_DOCK_IDS that are enabled,
+ * everything else under More). Stored ids that no longer resolve are dropped;
+ * newly available items are appended under More, so an account that once picked
+ * its own dock keeps it untouched.
 */
 export function splitMobileNav(
  items: NavItemDef[],
@@ -102,16 +112,20 @@ export function splitMobileNav(
  const dashboard = items.find((i) => i.id === 'dashboard')
  const head = dashboard ? [dashboard] : []
  const rest = items.filter((i) => i.id !== 'dashboard')
+  const byId = new Map(rest.map((i) => [i.id, i]))
+  const pick = (ids: string[]) => ids.map((id) => byId.get(id)).filter((x): x is NavItemDef => !!x)

  if (!cfg || (cfg.bar.length === 0 && cfg.more.length === 0)) {
+    const dock = pick(DEFAULT_DOCK_IDS).slice(0, MOBILE_NAV_MAX_BAR)
+    const docked = new Set(dock.map((i) => i.id))
    return {
-      bar: [...head, ...rest.filter((i) => DEFAULT_DOCK_IDS.includes(i.id))],
-      more: rest.filter((i) => !DEFAULT_DOCK_IDS.includes(i.id)),
+      bar: [...head, ...dock],
+      // Store order, not DEFAULT_DOCK_IDS order, so More keeps reading like the
+      // addon list itself.
+      more: rest.filter((i) => !docked.has(i.id)),
    }
  }

-  const byId = new Map(rest.map((i) => [i.id, i]))
-  const pick = (ids: string[]) => ids.map((id) => byId.get(id)).filter((x): x is NavItemDef => !!x)
  const known = new Set([...cfg.bar, ...cfg.more])

  const barPicked = pick(cfg.bar)
@@ -0,0 +1,76 @@
+// FE-MAP-LOCBTN-001 to FE-MAP-LOCBTN-005
+import { render } from '@testing-library/react';
+import LocationButton from './LocationButton';
+import type { GeoWatchErrorCode } from '../../hooks/useGeolocation';
+
+// useToast talks to the mounted ToastContainer through window.__addToast,
+// so a spy there observes exactly what the user would get shown. Outside a
+// TranslationProvider t(key) echoes the key, so assertions target the keys.
+const addToast = vi.fn();
+
+beforeEach(() => {
+  addToast.mockClear();
+  window.__addToast = addToast;
+});
+
+afterEach(() => {
+  delete window.__addToast;
+});
+
+const noop = () => {};
+
+function button(errorCode: GeoWatchErrorCode | null, error: string | null = errorCode && 'raw webkit text') {
+  return <LocationButton mode="off" error={error} errorCode={errorCode} onClick={noop} />;
+}
+
+describe('LocationButton', () => {
+  it('FE-MAP-LOCBTN-001: shows the mode title and stays quiet without an error', () => {
+    const { getByRole } = render(button(null));
+
+    expect(getByRole('button').getAttribute('title')).toBe('Show my location');
+    expect(addToast).not.toHaveBeenCalled();
+  });
+
+  it('FE-MAP-LOCBTN-002: titles with the localized error text, not the raw browser string', () => {
+    const { getByRole } = render(button('timeout'));
+
+    expect(getByRole('button').getAttribute('title')).toBe('map.location.timeout');
+    expect(getByRole('button').getAttribute('aria-label')).toBe('map.location.timeout');
+  });
+
+  it('FE-MAP-LOCBTN-003: fires exactly one error toast when a code appears', () => {
+    const { rerender } = render(button(null));
+    expect(addToast).not.toHaveBeenCalled();
+
+    rerender(button('permission-denied'));
+    expect(addToast).toHaveBeenCalledTimes(1);
+    expect(addToast).toHaveBeenCalledWith('map.location.denied', 'error', 6000);
+
+    // The same error sticking around must not re-announce itself.
+    rerender(button('permission-denied'));
+    expect(addToast).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-MAP-LOCBTN-004: only the transition from no error to an error toasts', () => {
+    const { rerender } = render(button(null));
+    rerender(button('permission-denied'));
+    expect(addToast).toHaveBeenCalledTimes(1);
+
+    // Code to code without recovering in between stays silent.
+    rerender(button('timeout'));
+    expect(addToast).toHaveBeenCalledTimes(1);
+
+    // After a recovery a fresh failure announces itself again.
+    rerender(button(null));
+    rerender(button('timeout'));
+    expect(addToast).toHaveBeenCalledTimes(2);
+    expect(addToast).toHaveBeenLastCalledWith('map.location.timeout', 'error', 6000);
+  });
+
+  it('FE-MAP-LOCBTN-005: an insecure origin gets the HTTPS hint, not the permission one', () => {
+    const { getByRole } = render(button('insecure-context', 'Only secure origins are allowed'));
+
+    expect(addToast).toHaveBeenCalledWith('journey.editor.locationInsecureContext', 'error', 6000);
+    expect(getByRole('button').getAttribute('title')).toBe('journey.editor.locationInsecureContext');
+  });
+});
@@ -1,24 +1,59 @@
+import { useEffect, useRef } from 'react'
+import { MAP_CONTROL_SHADOW } from './mapControlShadow'
 import { Navigation, LocateFixed, Locate } from 'lucide-react'
-import type { TrackingMode } from '../../hooks/useGeolocation'
+import type { TrackingMode, GeoWatchErrorCode } from '../../hooks/useGeolocation'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'

 interface Props {
  mode: TrackingMode
  error: string | null
+  errorCode: GeoWatchErrorCode | null
  onClick: () => void
  // Offset from the bottom edge — callers push this up above the mobile
  // bottom nav. Defaults to 20px for desktop.
  bottomOffset?: number
 }

+// The raw error string from the browser is unlocalized WebKit English, so the
+// user-facing message is looked up from the typed code instead. 'unsupported'
+// shares the generic text: a browser without geolocation cannot locate you.
+// 'insecure-context' borrows the journal editor's wording, which already says
+// exactly this in all locales.
+const ERROR_KEYS: Record<GeoWatchErrorCode, string> = {
+  'permission-denied': 'map.location.denied',
+  'unavailable': 'map.location.unavailable',
+  'timeout': 'map.location.timeout',
+  'unsupported': 'map.location.unavailable',
+  'insecure-context': 'journey.editor.locationInsecureContext',
+}
+
 // Three-state FAB. Matches the Apple/Google Maps pattern:
 //   off    → outline locate icon
 //   show   → filled locate (blue dot is visible on the map)
 //   follow → filled navigation arrow (map follows + rotates with heading)
-export default function LocationButton({ mode, error, onClick, bottomOffset = 20 }: Props) {
+export default function LocationButton({ mode, error, errorCode, onClick, bottomOffset = 20 }: Props) {
+  const { t } = useTranslation()
+  const toast = useToast()
+  // A title tooltip is invisible on touch, which is exactly where geolocation
+  // errors happen (iOS PWA, see discussion #2095), so surface new errors as a
+  // toast. The ref guards against re-fires: only the transition from no error
+  // to an error announces itself.
+  const prevCodeRef = useRef<GeoWatchErrorCode | null>(null)
+  useEffect(() => {
+    const prev = prevCodeRef.current
+    prevCodeRef.current = errorCode
+    if (errorCode && prev === null) {
+      // The denied message is long, so give the toast extra time to be read.
+      toast.error(t(ERROR_KEYS[errorCode]), 6000)
+    }
+  }, [errorCode, t, toast])
+
  const Icon = mode === 'follow' ? Navigation : mode === 'show' ? LocateFixed : Locate
  const isActive = mode !== 'off'
-  const title = error
-    ? error
+  const errorText = errorCode ? t(ERROR_KEYS[errorCode]) : error
+  const title = errorText
+    ? errorText
    : mode === 'off'
      ? 'Show my location'
      : mode === 'show'
@@ -43,7 +78,7 @@ export default function LocationButton({ mode, error, onClick, bottomOffset = 20
        cursor: 'pointer',
        background: isActive ? '#3b82f6' : 'var(--bg-card, white)',
        color: isActive ? 'white' : (error ? '#ef4444' : 'var(--text-muted, #6b7280)'),
-        boxShadow: '0 2px 10px rgba(0,0,0,0.25)',
+        boxShadow: MAP_CONTROL_SHADOW,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
@@ -1,5 +1,6 @@
 import { Map as MapIcon, Satellite } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { MAP_CONTROL_SHADOW } from './mapControlShadow'

 export type BaseLayer = 'default' | 'satellite'

@@ -18,7 +19,7 @@ export function MapLayerSwitcher({ active, onToggle }: { active: BaseLayer; onTo
      background: 'var(--sidebar-bg)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-      boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
+      boxShadow: MAP_CONTROL_SHADOW,
    }}>
      <button
        type="button"
@@ -18,7 +18,13 @@ const mapMock = vi.hoisted(() => ({
  on: vi.fn(),
  off: vi.fn(),
  panBy: vi.fn(),
-  latLngToContainerPoint: vi.fn(() => ({ x: 0, y: 0, distanceTo: () => 1000 })),
+  // A flat projection, 1000 px per degree: far enough apart that every
+  // booking line clears its declutter floor, which is measured along the
+  // projected line (#2275) rather than read off a canned distanceTo.
+  latLngToContainerPoint: vi.fn(([lat, lng]: [number, number]) => ({
+    x: lng * 1000, y: lat * 1000,
+    distanceTo(other: { x: number; y: number }) { return Math.hypot(lng * 1000 - other.x, lat * 1000 - other.y) },
+  })),
  // Panes: jsdom has none, so keep them in a map the pane tests can read back.
  panes: new Map<string, HTMLElement>(),
  getPane: vi.fn(function (this: void, name: string) { return mapMock.panes.get(name) }),
@@ -36,6 +42,7 @@ const geoMock = vi.hoisted(() => ({
  position: null as { lat: number; lng: number; accuracy: number; heading: number | null } | null,
  mode: 'off' as 'off' | 'show' | 'follow',
  error: null as string | null,
+  errorCode: null as string | null,
  cycleMode: vi.fn(),
  setMode: vi.fn(),
 }))
@@ -220,6 +227,24 @@ describe('MapView', () => {
    expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
  })

+  it('FE-COMP-MAPVIEW-006b: a caller-coloured route takes its own core and casing', () => {
+    render(<MapView route={[[[48.0, 2.0], [49.0, 3.0]]]} routeColors={[{ line: '#ff9f0a', casing: '#c2740a' }]} />)
+
+    const [casing, core] = screen.getAllByTestId('polyline')
+      .map(el => JSON.parse(el.getAttribute('data-path-options') as string))
+    expect(casing.color).toBe('#c2740a')
+    expect(core.color).toBe('#ff9f0a')
+  })
+
+  it('FE-COMP-MAPVIEW-006c: a line with no colour of its own keeps the route blue', () => {
+    render(<MapView route={[[[48.0, 2.0], [49.0, 3.0]]]} routeColors={[undefined]} />)
+
+    const [casing, core] = screen.getAllByTestId('polyline')
+      .map(el => JSON.parse(el.getAttribute('data-path-options') as string))
+    expect(casing.color).toBe('#0a5cc2')
+    expect(core.color).toBe('#0a84ff')
+  })
+
  it('FE-COMP-MAPVIEW-007: does not render polyline when route is null', () => {
    render(<MapView route={null} />)
    expect(screen.queryByTestId('polyline')).toBeNull()
@@ -3,7 +3,34 @@ import DOM from 'react-dom'
 import { renderIconMarkup } from '../../utils/iconMarkup'
 import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap, Tooltip } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
-import { makeMarkerDraggable } from './markerDrag'
+import { makeMarkerDraggable, makePoiDraggable, draggedPoiId } from './markerDrag'
+import RoadtripViaMarkers from './RoadtripViaMarkers'
+import { ALT_CASING, ALT_LABEL_TEXT } from '../Roadtrip/alternativeColors'
+import { serviceMarkerHtml, serviceMarkerOuter } from '../Roadtrip/serviceMarker'
+import type { AlternativeOverlay } from '../Roadtrip/alternativeOverlays'
+
+/**
+ * The drive-time pill for one offered route.
+ *
+ * A divIcon rather than a tooltip: it has to be clickable, it has to sit exactly on the
+ * road, and it is the same shape the GL renderers build by hand — one look across all
+ * three maps.
+ */
+function alternativeLabelIcon(label: string, note: string, background: string, active: boolean) {
+  const outline = active ? 'outline:2px solid #fff;outline-offset:1px;' : ''
+  const second = note
+    ? `<span style="font-size:11.5px;font-weight:500;opacity:.85;line-height:1.2">${escapeHtml(note)}</span>`
+    : ''
+  return L.divIcon({
+    className: '',
+    // `font-family` spelled out: a divIcon sits inside `.leaflet-container`, whose own
+    // stylesheet sets Helvetica/Arial on everything in it. Without this the label is the
+    // one piece of TREK chrome on the map that is not in the app's typeface.
+    html: `<span style="display:inline-flex;flex-direction:column;align-items:flex-start;white-space:nowrap;background:${background};color:${ALT_LABEL_TEXT};border-radius:11px;padding:6px 11px;font-family:var(--font-system);font-size:13px;font-weight:600;line-height:1.25;box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer;transition:none;${outline}"><span>${escapeHtml(label)}</span>${second}</span>`,
+    iconSize: [0, 0],
+    iconAnchor: [0, 0],
+  })
+}
 import L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
@@ -76,9 +103,21 @@ function formatViaDwell(seconds: number): string {
 * Shows image_url if available, otherwise category icon in colored circle.
 */
 function createPlaceIcon(place, orderNumbers, isSelected) {
-  const cacheKey = `${place.id}:${isSelected}:${place.image_url || ''}:${place.category_color || ''}:${place.category_icon || ''}:${orderNumbers?.join(',') || ''}`
+  const cacheKey = `${place.id}:${isSelected}:${place.image_url || ''}:${place.category_color || ''}:${place.category_icon || ''}:${place.stop_type || ''}:${orderNumbers?.join(',') || ''}`
  const cached = iconCache.get(cacheKey)
  if (cached) return cached
+
+  // A stop that interrupts the drive is drawn as its own small disc, before the photo
+  // branch below ever gets a look at it — the brand logo a fuel search comes back with
+  // is exactly what this replaces. No number badge either, for the same reason the rail
+  // gives it none: it is part of the drive, not one of the day's stops.
+  const service = serviceMarkerHtml(place.stop_type, isSelected)
+  if (service) {
+    const outer = serviceMarkerOuter(isSelected)
+    const icon = L.divIcon({ className: '', html: service, iconSize: [outer, outer], iconAnchor: [outer / 2, outer / 2] })
+    iconCache.set(cacheKey, icon)
+    return icon
+  }
  const size = isSelected ? 44 : 36
  // Allow-listed, not escaped: the value lands in style="…" of a divIcon, where
  // escaping stops the attribute breakout but still permits a CSS url().
@@ -159,7 +198,13 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
 // Small coloured pin for an OSM "explore" POI — distinct from the photo-circle
 // markers of planned places; the colour matches its pill category.
 const poiIconCache = new Map<string, L.DivIcon>()
-function createPoiIcon(category: string) {
+function createPoiIcon(category: string, brandWikidata?: string | null) {
+  // One flat disc in the category's colour with its icon, and never the chain's logo.
+  // The brands turned a corridor full of petrol stations into a row of advertisements,
+  // they were unreadable at pin size, and a brand with no logo on file fell back to a
+  // different picture entirely — so no two pins looked alike. `brandWikidata` is kept in
+  // the signature because the callers still have it; it simply no longer changes anything.
+  void brandWikidata
  const cached = poiIconCache.get(category)
  if (cached) return cached
  const cat = POI_CATEGORY_BY_KEY[category]
@@ -167,7 +212,7 @@ function createPoiIcon(category: string) {
  const svg = cat ? renderIconMarkup(createElement(cat.Icon, { size: 13, color: 'white', strokeWidth: 2.5 })) : ''
  const icon = L.divIcon({
    className: '',
-    html: `<div style="width:26px;height:26px;border-radius:50%;background:${color};border:2px solid white;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;">${svg}</div>`,
+    html: `<div style="position:relative;width:26px;height:26px;border-radius:50%;background:${color};border:2px solid white;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;">${svg}</div>`,
    iconSize: [26, 26],
    iconAnchor: [13, 13],
    tooltipAnchor: [0, -14],
@@ -193,6 +238,41 @@ function CameraHoverGuard({ movingRef, onMoveStart }: { movingRef: { current: bo
  return null
 }

+/**
+ * Takes a corridor hit dropped anywhere on the map and reports where it landed.
+ *
+ * The container rather than the drawn route: a polyline is a real element here but not in
+ * the GL renderers, and the drop coordinate answers "where on the drive" just as well
+ * once the caller projects it onto the routed geometry — one behaviour for all three.
+ */
+function PoiDropTarget({ onPoiDropOnRoute }: { onPoiDropOnRoute?: (osmId: string, lat: number, lng: number) => void }) {
+  const map = useMap()
+  useEffect(() => {
+    if (!onPoiDropOnRoute) return
+    const container = map.getContainer()
+    const onDragOver = (e: DragEvent) => {
+      if (!draggedPoiId(e)) return
+      e.preventDefault()
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+    }
+    const onDrop = (e: DragEvent) => {
+      const osmId = draggedPoiId(e)
+      if (!osmId) return
+      e.preventDefault()
+      const rect = container.getBoundingClientRect()
+      const at = map.containerPointToLatLng([e.clientX - rect.left, e.clientY - rect.top])
+      onPoiDropOnRoute(osmId, at.lat, at.lng)
+    }
+    container.addEventListener('dragover', onDragOver)
+    container.addEventListener('drop', onDrop)
+    return () => {
+      container.removeEventListener('dragover', onDragOver)
+      container.removeEventListener('drop', onDrop)
+    }
+  }, [map, onPoiDropOnRoute])
+  return null
+}
+
 // Emits the current viewport bbox on pan/zoom so the POI-explore pill can fetch
 // OSM places for the visible area.
 function ViewportController({ onViewportChange }: { onViewportChange?: (b: { south: number; west: number; north: number; east: number }) => void }) {
@@ -277,9 +357,17 @@ interface BoundsControllerProps {
  paddingOpts: L.FitBoundsOptions
  /** The map was built already framed on these places, so the opening fit has nothing to do. */
  framedOnMount?: boolean
+  /**
+   * An explicit stretch of map to frame, independent of the day being shown.
+   *
+   * `fitKey` cannot express this: it carries no coordinates, and each renderer decides
+   * for itself that it means "the selected day". Weighing the ways of driving one leg
+   * needs that leg on screen, which is neither the day nor the trip.
+   */
+  focusPoints?: [number, number][]
 }

-function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMount = false }: BoundsControllerProps) {
+function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMount = false, focusPoints }: BoundsControllerProps) {
  const map = useMap()
  const prevFitKey = useRef(-1)
  const awaitingRoute = useRef(false)
@@ -336,6 +424,15 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMo
    fitTo([...places.map(p => [p.lat, p.lng] as [number, number]), ...routeCoords])
  }, [routeCoords]) // eslint-disable-line react-hooks/exhaustive-deps

+  // Frame whatever was handed over. Nothing happens when it empties, so closing the
+  // picker leaves the map where the user left it rather than snapping back.
+  useEffect(() => {
+    if (!focusPoints?.length) return
+    // A day fit that has not run yet must not overwrite this a moment later.
+    awaitingRoute.current = false
+    fitTo(focusPoints)
+  }, [focusPoints]) // eslint-disable-line react-hooks/exhaustive-deps
+
  return null
 }

@@ -509,6 +606,9 @@ export const MapView = memo(function MapView({
  places = [],
  dayPlaces = [],
  route = null,
+  // One colour pair per entry of `route`, or absent for the blue the route has always
+  // been. Only the road trip passes these, and only while colouring by day is on.
+  routeColors = null,
  routeSegments = [],
  selectedPlaceId = null,
  hoverDisabled = false,
@@ -538,6 +638,18 @@ export const MapView = memo(function MapView({
  onViewportChange,
  tripId,
  routeVias = [],
+  accessLines = [],
+  onPoiDropOnRoute,
+  onRouteClick,
+  roadtripVias,
+  onMoveVia,
+  onRemoveVia,
+  alternativeRoutes,
+  focusPoints,
+  clusterLoosely = false,
+  activeAlternative,
+  onChooseAlternative,
+  onHighlightAlternative,
 }: any) {
  // The caller hands over whatever the user configured; what kind of basemap
  // that is decides which layer draws it. A saved raster template still wins,
@@ -547,13 +659,21 @@ export const MapView = memo(function MapView({
    <Marker
      key={`poi-${poi.osm_id}`}
      position={[poi.lat, poi.lng]}
-      icon={createPoiIcon(poi.category)}
+      icon={createPoiIcon(poi.category, poi.brand_wikidata)}
      zIndexOffset={500}
-      eventHandlers={{ click: () => onPoiClick?.(poi) }}
+      eventHandlers={{
+        click: () => onPoiClick?.(poi),
+        // Wired on add rather than in a layout effect: Leaflet builds the icon element
+        // itself, and this is the first moment there is one to attach to.
+        add: (e: { target: { getElement: () => HTMLElement | undefined } }) => {
+          const el = e.target.getElement()
+          if (el && onPoiDropOnRoute) makePoiDraggable(el, poi.osm_id)
+        },
+      }}
    >
      <Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip">{poi.name}</Tooltip>
    </Marker>
-  )), [pois, onPoiClick])
+  )), [pois, onPoiClick, onPoiDropOnRoute])
  const visibleReservations = useMemo(() => (
    visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes, selectedDayId, days })
  ), [reservations, visibleConnectionIds, showTransitRoutes, selectedDayId, days])
@@ -802,7 +922,7 @@ export const MapView = memo(function MapView({
  const TooltipOverlay = !hoverDisabled && hoveredPlace && tooltipPos && !isTouchDevice
  const CatIcon = TooltipOverlay ? getCategoryIcon(hoveredPlace.category_icon) : null

-  const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode } = useGeolocation()
+  const { position: userPosition, mode: trackingMode, error: trackingError, errorCode: trackingErrorCode, cycleMode: cycleTrackingMode } = useGeolocation()
  // Desktop browsers only get IP-based geolocation (city-level accuracy),
  // so the button would be misleading. Mobile, where real GPS lives, keeps it.
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
@@ -820,7 +940,12 @@ export const MapView = memo(function MapView({
    // Store flips state synchronously (instant, works offline); a failed save is logged there.
    updateSetting('map_base_layer', isSatellite ? 'default' : 'satellite').catch(() => {})
  }, [isSatellite, updateSetting])
-  const switcherBottom = hasDayDetail
+  // The day panel is a centred card between the two sidebars, so on the desktop
+  // map it never reaches this pill sitting hard against the left sidebar. Lifting
+  // it by the panel height only made it hop on every collapse and expand, since
+  // --day-panel-h changes while hasDayDetail stays true. On a phone the panel is
+  // full width and does cover the pill, so the lift stays there.
+  const switcherBottom = isMobile && hasDayDetail
    ? 'calc(var(--bottom-nav-h, 0px) + 20px + var(--day-panel-h, 0px) + 12px)'
    : 'calc(var(--bottom-nav-h, 0px) + 12px)'

@@ -872,43 +997,127 @@ export const MapView = memo(function MapView({
      )}

      <MapController center={center} zoom={zoom} />
-      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} routeCoords={dayPlaces.length > 0 ? routeCoords : []} fitKey={fitKey} paddingOpts={paddingOpts} framedOnMount={initialView.framed} />
+      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} routeCoords={dayPlaces.length > 0 ? routeCoords : []} fitKey={fitKey} paddingOpts={paddingOpts} framedOnMount={initialView.framed} focusPoints={focusPoints} />
      <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
      <MapClickHandler onClick={onMapClick} />
      <MapContextMenuHandler onContextMenu={onMapContextMenu} />
      <CameraHoverGuard movingRef={mapMovingRef} onMoveStart={clearHover} />
      <ViewportController onViewportChange={onViewportChange} />
+      <PoiDropTarget onPoiDropOnRoute={onPoiDropOnRoute} />
      <LeafletLocationLayer position={userPosition} mode={trackingMode} />

-      <MarkerClusterGroup
-        chunkedLoading
-        chunkInterval={30}
-        chunkDelay={0}
-        maxClusterRadius={30}
-        disableClusteringAtZoom={11}
-        spiderfyOnMaxZoom
-        showCoverageOnHover={false}
-        zoomToBoundsOnClick
-        animate={false}
-        iconCreateFunction={clusterIconCreateFunction}
-      >
-        {markers}
-      </MarkerClusterGroup>
+      {/* Road trip mode does not cluster at all: the whole drive has to stay readable
+          zoomed right out, and a day's stops merging into one dot is exactly the shape
+          it is being looked at for. Rendered outside the group rather than with the
+          clustering disabled by option, so nothing is left to a plugin's own idea of
+          what "disabled" means. */}
+      {clusterLoosely ? markers : (
+        <MarkerClusterGroup
+          chunkedLoading
+          chunkInterval={30}
+          chunkDelay={0}
+          maxClusterRadius={30}
+          disableClusteringAtZoom={11}
+          spiderfyOnMaxZoom
+          showCoverageOnHover={false}
+          zoomToBoundsOnClick
+          animate={false}
+          iconCreateFunction={clusterIconCreateFunction}
+        >
+          {markers}
+        </MarkerClusterGroup>
+      )}

-      {/* Apple-Maps style: darker-blue casing under a bright-blue core, rounded. */}
+      {/* Apple-Maps style: darker-blue casing under a bright-blue core, rounded.
+          The casing carries the click when the route can be reshaped: it is the wider of
+          the two, so it is the one a pointer actually lands on. */}
      {route && route.length > 0 && route.flatMap((seg, i) => seg.length > 1 ? [
        <Polyline
          key={`${i}-casing`}
          positions={seg}
-          pathOptions={{ color: '#0a5cc2', weight: 8, opacity: 1, lineCap: 'round', lineJoin: 'round' }}
+          pathOptions={{ color: routeColors?.[i]?.casing ?? '#0a5cc2', weight: 8, opacity: 1, lineCap: 'round', lineJoin: 'round' }}
+          interactive={!!onRouteClick}
+          eventHandlers={onRouteClick ? {
+            click: (e: { latlng: { lat: number; lng: number }; originalEvent: MouseEvent }) => {
+              // Stops the map's own click, which would otherwise open the add-place menu
+              // underneath the new via.
+              e.originalEvent.stopPropagation()
+              onRouteClick(e.latlng.lat, e.latlng.lng)
+            },
+          } : undefined}
        />,
        <Polyline
          key={`${i}-core`}
          positions={seg}
-          pathOptions={{ color: '#0a84ff', weight: 5, opacity: 1, lineCap: 'round', lineJoin: 'round' }}
+          pathOptions={{ color: routeColors?.[i]?.line ?? '#0a84ff', weight: 5, opacity: 1, lineCap: 'round', lineJoin: 'round' }}
+          interactive={false}
        />,
      ] : [])}

+      {/* The last bit to a place the road does not reach.
+          Dashed and thin, over the route rather than under it, because it is the one
+          piece of the line that is not driving: the router snapped the stop to the
+          nearest road and the drive really ends there. Same blue as the route, so it
+          reads as the end of that route and not as a second one. */}
+      {(accessLines ?? []).map((spur, i) => (
+        <Polyline
+          key={`access-${i}`}
+          positions={spur.line}
+          pathOptions={{ color: '#0a84ff', weight: 3, opacity: 0.85, dashArray: '2 7', lineCap: 'round' }}
+          interactive={false}
+        />
+      ))}
+
+      {/* The offered ways of driving one leg, over the route they replace. Clicking one
+          takes it, which is the same choice the bar above the map offers. */}
+      {/* Every option in blue over a white casing, after Apple Maps: they are all real
+          roads, so the difference is emphasis, not category. Grey was the first attempt
+          and it disappeared on Positron, which is almost entirely greys. */}
+      {(alternativeRoutes ?? []).flatMap((alt: AlternativeOverlay) => {
+        const active = activeAlternative === alt.index
+        return [
+          <Polyline
+            key={`alt-${alt.index}-casing`}
+            positions={alt.coordinates}
+            pathOptions={{ color: ALT_CASING, weight: active ? 9 : 8, opacity: 0.9, lineCap: 'round', lineJoin: 'round' }}
+            interactive={false}
+          />,
+          <Polyline
+            key={`alt-${alt.index}`}
+            positions={alt.coordinates}
+            pathOptions={{
+              color: alt.color,
+              weight: active ? 6 : 4,
+              opacity: active ? 1 : 0.9,
+              lineCap: 'round',
+              lineJoin: 'round',
+            }}
+            eventHandlers={onChooseAlternative ? {
+              click: (e: { originalEvent: MouseEvent }) => { e.originalEvent.stopPropagation(); onChooseAlternative(alt.index) },
+              mouseover: () => onHighlightAlternative?.(alt.index),
+              mouseout: () => onHighlightAlternative?.(null),
+            } : undefined}
+          />,
+          // The drive time on the road itself, the way Apple labels them.
+          <Marker
+            key={`alt-${alt.index}-label`}
+            position={[alt.at.lat, alt.at.lng]}
+            zIndexOffset={600}
+            icon={alternativeLabelIcon(alt.label, alt.note, alt.labelBg, active)}
+            eventHandlers={onChooseAlternative ? {
+              click: () => onChooseAlternative(alt.index),
+              mouseover: () => onHighlightAlternative?.(alt.index),
+              mouseout: () => onHighlightAlternative?.(null),
+            } : undefined}
+          />,
+        ]
+      })}
+
+      {/* The handles that shape the drive. After the route so they sit on top of it. */}
+      {roadtripVias ? (
+        <RoadtripViaMarkers viasByDay={roadtripVias} onMoveVia={onMoveVia} onRemoveVia={onRemoveVia} />
+      ) : null}
+
      {/* GPX imported route geometries */}
      <TrackCasingPane onReady={setHasCasingPane} />
      {gpxPolylines}
@@ -941,6 +1150,7 @@ export const MapView = memo(function MapView({
    {isMobile && <LocationButton
      mode={trackingMode}
      error={trackingError}
+      errorCode={trackingErrorCode}
      onClick={cycleTrackingMode}
      bottomOffset={locationButtonBottom as unknown as number}
    />}
@@ -195,6 +195,7 @@ const geoStub = vi.hoisted(() => ({
  position: null as GeoPosition | null,
  mode: 'off' as TrackingMode,
  error: null as string | null,
+  errorCode: null as string | null,
  cycleMode: vi.fn(async () => {}),
  setMode: vi.fn((_m: TrackingMode | ((prev: TrackingMode) => TrackingMode)) => {}),
 }))
@@ -1539,6 +1540,21 @@ describe('MapViewGL', () => {
    expect(features[0].geometry.coordinates).toEqual([[2, 48], [3, 49]])
  })

+  it('FE-COMP-MAPVIEWGL-048b: a caller-coloured route rides its colours on the feature', async () => {
+    const routeSource = geoSource()
+    glMap.getSource.mockImplementation((id: string) => (id === 'trip-route' ? routeSource : null))
+
+    render(<MapViewGL places={[]} fitKey={1} route={[[[48, 2], [49, 3]], [[50, 4], [51, 5]]]}
+      routeColors={[{ line: '#ff9f0a', casing: '#c2740a' }, undefined]} />)
+    await act(async () => {})
+
+    const { features } = lastData(routeSource)
+    expect(features[0].properties.color).toBe('#ff9f0a')
+    expect(features[0].properties.casing).toBe('#c2740a')
+    // No colour means the day route's own blue, which the layer paint falls back to.
+    expect(features[1].properties.color).toBeNull()
+  })
+
  it('FE-COMP-MAPVIEWGL-049: unusable GPX geometry is skipped instead of breaking the layer', async () => {
    const gpxSource = geoSource()
    glMap.getSource.mockImplementation((id: string) => (id === 'trip-gpx' ? gpxSource : null))
@@ -1854,4 +1870,168 @@ describe('MapViewGL', () => {
    expect(glMap.off).toHaveBeenCalledWith('moveend', expect.any(Function))
    expect(glMap.off).toHaveBeenCalledWith('zoomend', expect.any(Function))
  })
+
+  it('FE-COMP-MAPVIEWGL-071: POI suggestions ride the map render clock instead of the pointer', async () => {
+    // Same drift the planned-place pins had: a library Marker repositions on every
+    // `move` event — one per pointer sample — while the canvas draws once a frame, so
+    // the suggestions swam over the map during a drag and snapped back on release.
+    loadOnAttach()
+    glCanvasContainer.replaceChildren()
+    glMap.project.mockReturnValue({ x: 100, y: 80 })
+
+    render(
+      <MapViewGL
+        places={[]}
+        fitKey={1}
+        glProvider="maplibre-gl"
+        pois={[{ osm_id: 'node:1', name: 'Aral', lat: 48.1, lng: 2.1, category: 'fuel', source: 'openstreetmap' } as never]}
+      />,
+    )
+    await flushFrames()
+
+    const layer = glCanvasContainer.firstElementChild as HTMLElement
+    expect(layer.children.length).toBe(1)
+    const pin = layer.firstElementChild as HTMLElement
+    expect(pin.style.transform).toContain('translate(100px, 80px)')
+
+    glMap.project.mockReturnValue({ x: 140, y: 60 })
+    act(() => { mapHandler('render')() })
+
+    expect(pin.style.transform).toContain('translate(140px, 60px)')
+  })
+
+  // A via handle is a DOM element, and a pointerdown belongs to the element it happened
+  // on. Rebuilding the handles on an unrelated render pulled that element out from under
+  // the pointer, so a freshly placed via lost its first drag — the re-route it triggered
+  // landed about a second later, which is exactly when somebody reaches for it.
+  it('FE-COMP-MAPVIEWGL-VIA-001: a via handle survives a render it has nothing to do with', async () => {
+    loadOnAttach()
+    glCanvasContainer.replaceChildren()
+    glMap.project.mockReturnValue({ x: 100, y: 80 })
+
+    const stored = { id: 5, day_id: 1, after_order_index: 0, sequence: 0, lat: 48.1, lng: 2.1 }
+    const { rerender } = render(
+      <MapViewGL
+        places={[]}
+        fitKey={1}
+        glProvider="maplibre-gl"
+        roadtripVias={{ 1: [stored] }}
+        onMoveVia={() => {}}
+      />,
+    )
+    await flushFrames()
+
+    const layer = glCanvasContainer.firstElementChild as HTMLElement
+    const handle = layer.firstElementChild
+    expect(handle).toBeTruthy()
+
+    // The same via in a fresh object, with a fresh callback: what every render of the
+    // planner hands down while the day re-routes.
+    rerender(
+      <MapViewGL
+        places={[]}
+        fitKey={1}
+        glProvider="maplibre-gl"
+        roadtripVias={{ 1: [{ ...stored }] }}
+        onMoveVia={() => {}}
+      />,
+    )
+    await flushFrames()
+
+    expect(layer.firstElementChild).toBe(handle)
+  })
+
+  it('FE-COMP-MAPVIEWGL-VIA-002: a via that actually moved is drawn again', async () => {
+    loadOnAttach()
+    glCanvasContainer.replaceChildren()
+    glMap.project.mockReturnValue({ x: 100, y: 80 })
+
+    const stored = { id: 5, day_id: 1, after_order_index: 0, sequence: 0, lat: 48.1, lng: 2.1 }
+    const { rerender } = render(
+      <MapViewGL places={[]} fitKey={1} glProvider="maplibre-gl" roadtripVias={{ 1: [stored] }} onMoveVia={() => {}} />,
+    )
+    await flushFrames()
+
+    const layer = glCanvasContainer.firstElementChild as HTMLElement
+    const handle = layer.firstElementChild
+
+    rerender(
+      <MapViewGL
+        places={[]}
+        fitKey={1}
+        glProvider="maplibre-gl"
+        roadtripVias={{ 1: [{ ...stored, lat: 48.9 }] }}
+        onMoveVia={() => {}}
+      />,
+    )
+    await flushFrames()
+
+    // The other half of the contract: holding the element still must not mean holding it
+    // in the wrong place.
+    expect(layer.firstElementChild).not.toBe(handle)
+  })
+  // ── Satellite ───────────────────────────────────────────────────────────────
+  //
+  // Leaflet has had the imagery for a while and swaps its whole tile layer for it.
+  // A GL map cannot do that, because its basemap is a style with dozens of layers,
+  // so the imagery goes on as a raster layer under everything TREK draws.
+
+  it('FE-COMP-MAPVIEWGL-074: satellite adds the imagery under the first TREK layer', async () => {
+    loadOnAttach()
+    useSettingsStore.setState({
+      settings: { ...useSettingsStore.getState().settings, map_base_layer: 'satellite' },
+    } as never)
+    glMap.getStyle.mockReturnValue({
+      layers: [{ id: 'background' }, { id: 'road' }, { id: 'trip-route' }, { id: 'trip-gpx-hit' }],
+    })
+
+    render(<MapViewGL places={[]} fitKey={1} />)
+    await flushFrames()
+
+    expect(glMap.addSource).toHaveBeenCalledWith('trip-satellite', expect.objectContaining({
+      type: 'raster',
+      tiles: [expect.stringContaining('arcgisonline.com')],
+    }))
+    // Anchored before the route, or the imagery would be painted over it.
+    expect(glMap.addLayer).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'trip-satellite-raster', type: 'raster' }),
+      'trip-route',
+    )
+  })
+
+  it('FE-COMP-MAPVIEWGL-075: with the default basemap no imagery is fetched at all', async () => {
+    loadOnAttach()
+    useSettingsStore.setState({
+      settings: { ...useSettingsStore.getState().settings, map_base_layer: 'default' },
+    } as never)
+
+    render(<MapViewGL places={[]} fitKey={1} />)
+    await flushFrames()
+
+    expect(glMap.addSource).not.toHaveBeenCalledWith('trip-satellite', expect.anything())
+  })
+
+  it('FE-COMP-MAPVIEWGL-076: switching back hides the layer instead of tearing it down', async () => {
+    loadOnAttach()
+    useSettingsStore.setState({
+      settings: { ...useSettingsStore.getState().settings, map_base_layer: 'satellite' },
+    } as never)
+    glMap.getStyle.mockReturnValue({ layers: [{ id: 'background' }, { id: 'trip-route' }] })
+    // Present from the first pass on, the way the real map reports it afterwards.
+    glMap.getSource.mockImplementation((id: string) => (id === 'trip-satellite' ? {} : null))
+    glMap.getLayer.mockImplementation((id: string) => (id === 'trip-satellite-raster' ? {} : null))
+
+    const { rerender } = render(<MapViewGL places={[]} fitKey={1} />)
+    await flushFrames()
+
+    act(() => {
+      useSettingsStore.setState({
+        settings: { ...useSettingsStore.getState().settings, map_base_layer: 'default' },
+      } as never)
+    })
+    rerender(<MapViewGL places={[]} fitKey={1} />)
+    await flushFrames()
+
+    expect(glMap.setLayoutProperty).toHaveBeenCalledWith('trip-satellite-raster', 'visibility', 'none')
+  })
 })
@@ -1,4 +1,4 @@
-// FE-COMP-RESOVERLAY-001 to FE-COMP-RESOVERLAY-024
+// FE-COMP-RESOVERLAY-001 to FE-COMP-RESOVERLAY-045
 import React from 'react'
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { render, screen } from '../../../tests/helpers/render'
@@ -389,6 +389,43 @@ describe('ReservationOverlay declutter floors and road routes', () => {
    expect(JSON.parse(lines()[0].getAttribute('data-points') || '[]')).toEqual([[48, 16], [51.5, 16]])
  })

+  it('FE-COMP-RESOVERLAY-043: a routed drive whose ends project close together still draws (#2275)', () => {
+    // Endpoints 50 px apart, under the 80 px car floor, so the straight hop would
+    // hide. The road between them loops out 0.3° (300 px) and back, which is what
+    // is actually drawn — and what the person was missing on their map.
+    const road: [number, number][] = [[48, 16], [48.3, 16.1], [48.3, 16.3], [48.05, 16]]
+    const { unmount } = renderOverlay({ reservations: [hop('car', 7, 0.05)] })
+    expect(lines()).toHaveLength(0)
+    unmount()
+
+    renderOverlay({ reservations: [hop('car', 7, 0.05)], roadRoutes: new Map([[7, road]]) })
+    expect(lines()).toHaveLength(1)
+    expect(JSON.parse(lines()[0].getAttribute('data-points') || '[]')).toEqual(road)
+  })
+
+  it('FE-COMP-RESOVERLAY-044: a drive with a stop on the way is measured along its legs, not its ends', () => {
+    // From and to sit 20 px apart; the stop is 400 px away, so the two legs
+    // together draw 800 px of line.
+    renderOverlay({
+      reservations: [booking({
+        id: 8, type: 'car',
+        endpoints: [
+          endpoint({ role: 'from', sequence: 0, name: 'Home', lat: 48, lng: 16 }),
+          endpoint({ role: 'stop', sequence: 1, name: 'Lake', lat: 48.4, lng: 16 }),
+          endpoint({ role: 'to', sequence: 2, name: 'Back', lat: 48.02, lng: 16 }),
+        ],
+      })],
+    })
+    expect(lines()).toHaveLength(2)
+  })
+
+  it('FE-COMP-RESOVERLAY-045: a routed drive that really is tiny on screen stays decluttered', () => {
+    // Every point of the road projects within 30 px: nothing worth drawing yet.
+    const road: [number, number][] = [[48, 16], [48.01, 16.01], [48.02, 16.02], [48.03, 16]]
+    renderOverlay({ reservations: [hop('car', 7, 0.03)], roadRoutes: new Map([[7, road]]) })
+    expect(lines()).toHaveLength(0)
+  })
+
  it('FE-COMP-RESOVERLAY-036: a booking without an endpoints array is skipped', () => {
    renderOverlay({ reservations: [booking({ endpoints: undefined })] })
    expect(lines()).toHaveLength(0)
@@ -8,6 +8,7 @@ import { getTransitMapSegments, type TransitMapSegment } from './transitGeometry
 import { geodesicArcs } from './flightGeodesy'
 import { cleanEndpointName } from './reservationName'
 import { useSettingsStore } from '../../store/settingsStore'
+import { hopIsVisible, labelFloorPx } from '../../utils/reservationRoutes'
 import type { Reservation, ReservationEndpoint } from '../../types'

 const ENDPOINT_PANE = 'reservation-endpoints'
@@ -122,6 +123,12 @@ function computeDuration(from: ReservationEndpoint, to: ReservationEndpoint, fal
  return h > 0 ? `${h}h ${m}m` : `${m}m`
 }

+/** What a hop will draw: the road it was routed along when there is one, else its arcs. */
+function linesFor(item: TransportItem, roadRoutes: Map<number, [number, number][]> | undefined): [number, number][][] {
+  const road = roadRoutes?.get(item.res.id)
+  return road && road.length >= 2 ? [road] : item.arcs
+}
+
 interface TransportItem {
  res: Reservation
  from: ReservationEndpoint
@@ -200,26 +207,25 @@ export default function ReservationOverlay({ reservations, showConnections, onEn
  }, [reservations])

  const visibleItems = useMemo(() => {
+    const project = (p: readonly [number, number]) => map.latLngToContainerPoint([p[0], p[1]])
    return items.filter(item => {
      // A transit journey draws its real rail/bus alignment, not a straight from->to
      // line, so the endpoint-proximity declutter (which exists to hide tiny no-op
      // straight connectors) must not suppress it. Otherwise a zoomed-out day — e.g. one
      // with no other places to tighten the map onto — hides the whole route (#1570).
      if (item.transitSegs.length > 0) return true
-      const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
-      const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
-      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 150 : item.type === 'car' ? 80 : 200
-      return fromPx.distanceTo(toPx) >= minPx
+      // Measured along what is drawn, not between the ends: a routed drive can
+      // cover half the screen while its endpoints sit close together (#2275).
+      return hopIsVisible(item.type, linesFor(item, roadRoutes), project)
    })
-  }, [items, zoom, map])
+  }, [items, zoom, map, roadRoutes])

  const labelVisibleIds = useMemo(() => {
    const set = new Set<number>()
    for (const item of visibleItems) {
      const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
      const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
-      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : item.type === 'transit' ? 900 : 400
-      if (fromPx.distanceTo(toPx) >= minPx) set.add(item.res.id)
+      if (fromPx.distanceTo(toPx) >= labelFloorPx(item.type)) set.add(item.res.id)
    }
    return set
  }, [visibleItems, zoom, map])
@@ -248,9 +254,7 @@ export default function ReservationOverlay({ reservations, showConnections, onEn
          ))
        }
        // Prefer the real road route (car/bus/taxi/bicycle) over the straight arc.
-        const road = roadRoutes?.get(item.res.id)
-        const lines = road && road.length >= 2 ? [road] : item.arcs
-        return lines.map((seg, segIdx) => (
+        return linesFor(item, roadRoutes).map((seg, segIdx) => (
          <Polyline
            key={`line-${item.res.id}-${segIdx}`}
            positions={seg}
@@ -0,0 +1,104 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Marker, Tooltip, useMap } from 'react-leaflet'
+import L from 'leaflet'
+import { useTranslation } from '../../i18n/TranslationContext'
+import { useStableVias } from './viaMarkerState'
+import type { RoadtripVia } from '@trek/shared'
+
+/**
+ * The handles that shape a drive.
+ *
+ * A via is deliberately small and unnumbered: it is not a stop, and anything that looks
+ * like one would read as a place on the itinerary. Dragging it redraws the route through
+ * the new spot, which is the whole interaction — the same one a paper map gets when you
+ * put a finger on the road you actually want to take.
+ */
+const VIA_ICON = L.divIcon({
+  className: '',
+  html: `<span style="
+    display:block;width:12px;height:12px;border-radius:9999px;
+    background:#0a84ff;border:2.5px solid #ffffff;
+    box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:grab;
+  "></span>`,
+  iconSize: [12, 12],
+  iconAnchor: [6, 6],
+})
+
+interface RoadtripViaMarkersProps {
+  viasByDay: Record<number, RoadtripVia[]>
+  onMoveVia?: (dayId: number, id: number, lat: number, lng: number) => void
+  onRemoveVia?: (dayId: number, id: number) => void
+}
+
+/** Leaflet's half; the GL renderers draw their own inside `MapViewGL`. */
+/** Below this the handles are not drawn. Shared with the GL renderer's own copy. */
+const VIA_MIN_ZOOM = 9
+
+export default function RoadtripViaMarkers({
+  viasByDay, onMoveVia, onRemoveVia,
+}: RoadtripViaMarkersProps): React.ReactElement | null {
+  const { t } = useTranslation()
+  const vias = useStableVias(viasByDay)
+  // Read through a ref so the handlers below can stay the same objects across renders.
+  // Both callbacks are rebuilt on every render of the planner, and react-leaflet compares
+  // its props by identity: a fresh `eventHandlers` unbinds and rebinds every listener,
+  // and a fresh `position` array calls `setLatLng` on every marker. Doing either while a
+  // drag is in flight is how a freshly placed via lost its first drag.
+  const handlersRef = useRef({ onMoveVia, onRemoveVia })
+  handlersRef.current = { onMoveVia, onRemoveVia }
+  const draggable = !!onMoveVia
+  /**
+   * Zoomed out, the handles go away.
+   *
+   * A via is a handle for a few hundred metres of road, and at a continental zoom a whole
+   * day's worth collapses into a cluster of dots over one town — not something anybody can
+   * aim at, and a drag there moves the route by kilometres per pixel. Below this the drive
+   * is read, not shaped.
+   */
+  const map = useMap()
+  const [zoomedIn, setZoomedIn] = useState(() => map.getZoom() >= VIA_MIN_ZOOM)
+  useEffect(() => {
+    const update = () => setZoomedIn(map.getZoom() >= VIA_MIN_ZOOM)
+    update()
+    map.on('zoomend', update)
+    return () => { map.off('zoomend', update) }
+  }, [map])
+
+  const markers = useMemo(() => vias.map(via => ({
+    via,
+    position: [via.lat, via.lng] as [number, number],
+    handlers: {
+      dragend: (e: { target: { getLatLng: () => { lat: number; lng: number } } }) => {
+        const at = e.target.getLatLng()
+        handlersRef.current.onMoveVia?.(via.day_id, via.id, at.lat, at.lng)
+      },
+      // Right-click rather than a delete handle: a 12px dot has no room for one,
+      // and the same gesture removes things elsewhere on the map.
+      contextmenu: (e: { originalEvent: MouseEvent }) => {
+        e.originalEvent.preventDefault()
+        handlersRef.current.onRemoveVia?.(via.day_id, via.id)
+      },
+    },
+  })), [vias])
+
+  if (!markers.length || !zoomedIn) return null
+
+  return (
+    <>
+      {markers.map(({ via, position, handlers }) => (
+        <Marker
+          key={`via-${via.id}`}
+          position={position}
+          icon={VIA_ICON}
+          draggable={draggable}
+          zIndexOffset={400}
+          eventHandlers={handlers}
+        >
+          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
+            {t('roadtrip.via.hint')}
+          </Tooltip>
+        </Marker>
+      ))}
+    </>
+  )
+}
@@ -12,10 +12,11 @@ import {
  generateCoMapsUrl,
  parsePluginProfile,
  withHotelBookends,
+  calculateAlternatives,
 } from './RouteCalculator'

-const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
-// calculateRouteWithLegs talks to the FOSSGIS per-profile hosts, not the car-only demo.
+// Every route now goes to the FOSSGIS per-profile hosts. The car-only project-osrm.org
+// demo ignored the profile in the URL, so walking routes followed the road network.
 const FOSSGIS = {
  driving: 'https://routing.openstreetmap.de/routed-car/route/v1/driving',
  walking: 'https://routing.openstreetmap.de/routed-foot/route/v1/foot',
@@ -46,7 +47,7 @@ describe('calculateRoute', () => {

  it('FE-COMP-ROUTECALCULATOR-002: returns parsed coordinates on success', async () => {
    server.use(
-      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+      http.get(`${FOSSGIS.driving}/:coords`, () =>
        HttpResponse.json(buildOsrmRouteResponse())
      )
    )
@@ -56,7 +57,7 @@ describe('calculateRoute', () => {

  it('FE-COMP-ROUTECALCULATOR-003: returns formatted distance text for >= 1000 m', async () => {
    server.use(
-      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+      http.get(`${FOSSGIS.driving}/:coords`, () =>
        HttpResponse.json(buildOsrmRouteResponse(1500, 360))
      )
    )
@@ -66,7 +67,7 @@ describe('calculateRoute', () => {

  it('FE-COMP-ROUTECALCULATOR-004: returns formatted distance in meters for short routes', async () => {
    server.use(
-      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+      http.get(`${FOSSGIS.driving}/:coords`, () =>
        HttpResponse.json(buildOsrmRouteResponse(800, 360))
      )
    )
@@ -78,7 +79,7 @@ describe('calculateRoute', () => {
    const distance = 5000
    const osrmDuration = 999
    server.use(
-      http.get(`${OSRM_BASE}/walking/:coords`, () =>
+      http.get(`${FOSSGIS.walking}/:coords`, () =>
        HttpResponse.json(buildOsrmRouteResponse(distance, osrmDuration))
      )
    )
@@ -90,7 +91,7 @@ describe('calculateRoute', () => {

  it('FE-COMP-ROUTECALCULATOR-006: throws when OSRM returns non-ok HTTP status', async () => {
    server.use(
-      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+      http.get(`${FOSSGIS.driving}/:coords`, () =>
        HttpResponse.json({}, { status: 500 })
      )
    )
@@ -99,7 +100,7 @@ describe('calculateRoute', () => {

  it('FE-COMP-ROUTECALCULATOR-007: throws when OSRM code is not Ok', async () => {
    server.use(
-      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+      http.get(`${FOSSGIS.driving}/:coords`, () =>
        HttpResponse.json({ code: 'NoRoute', routes: [] })
      )
    )
@@ -108,7 +109,7 @@ describe('calculateRoute', () => {

  it('FE-COMP-ROUTECALCULATOR-008: respects AbortSignal', async () => {
    server.use(
-      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+      http.get(`${FOSSGIS.driving}/:coords`, () =>
        HttpResponse.json(buildOsrmRouteResponse())
      )
    )
@@ -128,7 +129,7 @@ describe('calculateSegments', () => {

  it('FE-COMP-ROUTECALCULATOR-010: returns segment midpoints and travel times', async () => {
    server.use(
-      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+      http.get(`${FOSSGIS.driving}/:coords`, () =>
        HttpResponse.json({
          code: 'Ok',
          routes: [
@@ -325,7 +326,7 @@ describe('parsePluginProfile', () => {
 describe('calculateRoute profiles', () => {
  it('FE-COMP-ROUTECALCULATOR-030: cycling overrides the OSRM duration with a 15 km/h estimate', async () => {
    server.use(
-      http.get(`${OSRM_BASE}/cycling/:coords`, () =>
+      http.get(`${FOSSGIS.cycling}/:coords`, () =>
        HttpResponse.json(buildOsrmRouteResponse(9000, 4242))
      )
    )
@@ -340,12 +341,12 @@ describe('calculateRoute profiles', () => {

 describe('calculateSegments failures', () => {
  it('FE-COMP-ROUTECALCULATOR-031: throws when OSRM answers with an HTTP error', async () => {
-    server.use(http.get(`${OSRM_BASE}/driving/:coords`, () => HttpResponse.json({}, { status: 502 })))
+    server.use(http.get(`${FOSSGIS.driving}/:coords`, () => HttpResponse.json({}, { status: 502 })))
    await expect(calculateSegments([wp1, wp2])).rejects.toThrow('Route could not be calculated')
  })

  it('FE-COMP-ROUTECALCULATOR-032: throws when OSRM reports no usable route', async () => {
-    server.use(http.get(`${OSRM_BASE}/driving/:coords`, () => HttpResponse.json({ code: 'NoRoute', routes: [] })))
+    server.use(http.get(`${FOSSGIS.driving}/:coords`, () => HttpResponse.json({ code: 'NoRoute', routes: [] })))
    await expect(calculateSegments([wp1, wp2])).rejects.toThrow('No route found')
  })
 })
@@ -613,3 +614,364 @@ describe('generateCoMapsUrl', () => {
      .toBe('https://comaps.at/map?v=1&ll=48.85,2.35&n=48.85%2C2.35')
  })
 })
+
+describe('a self-hosted routing engine', () => {
+  afterEach(() => {
+    useSettingsStore.setState(st => ({ settings: { ...st.settings, routing_base_url: '' } }))
+  })
+
+  const useOwnRouter = (base: string) =>
+    useSettingsStore.setState(st => ({ settings: { ...st.settings, routing_base_url: base } }))
+
+  it('FE-COMP-ROUTECALCULATOR-021: a configured instance is asked instead of the public hosts', async () => {
+    useOwnRouter('https://osrm.example.org')
+    let asked = ''
+    server.use(http.get('https://osrm.example.org/route/v1/driving/:coords', ({ request }) => {
+      asked = request.url
+      return HttpResponse.json(buildOsrmRouteResponse())
+    }))
+
+    await calculateRoute([{ lat: 1, lng: 2 }, { lat: 3, lng: 4 }], 'driving')
+
+    expect(asked).toContain('osrm.example.org')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-022: OSRM’s own profile names are used, not TREK’s', async () => {
+    useOwnRouter('https://osrm.example.org')
+    let asked = ''
+    // TREK says "walking" and "cycling"; osrm-routed serves "foot" and "bike".
+    server.use(http.get('https://osrm.example.org/route/v1/foot/:coords', ({ request }) => {
+      asked = request.url
+      return HttpResponse.json(buildOsrmRouteResponse())
+    }))
+
+    await calculateRoute([{ lat: 1, lng: 2 }, { lat: 3, lng: 4 }], 'walking')
+
+    expect(asked).toContain('/route/v1/foot/')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-023: a trailing slash in the setting does not double up', async () => {
+    useOwnRouter('https://osrm.example.org///')
+    let asked = ''
+    server.use(http.get('https://osrm.example.org/route/v1/driving/:coords', ({ request }) => {
+      asked = request.url
+      return HttpResponse.json(buildOsrmRouteResponse())
+    }))
+
+    await calculateRoute([{ lat: 1, lng: 2 }, { lat: 3, lng: 4 }], 'driving')
+
+    expect(asked).not.toContain('//route')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-024: blank or whitespace falls back to the public hosts', async () => {
+    useOwnRouter('   ')
+    let asked = ''
+    server.use(http.get(`${FOSSGIS.driving}/:coords`, ({ request }) => {
+      asked = request.url
+      return HttpResponse.json(buildOsrmRouteResponse())
+    }))
+
+    await calculateRoute([{ lat: 1, lng: 2 }, { lat: 3, lng: 4 }], 'driving')
+
+    expect(asked).toContain('routing.openstreetmap.de')
+  })
+})
+
+describe('calculateAlternatives', () => {
+  const twoRoutes = {
+    code: 'Ok',
+    routes: [
+      // The direct one, straight down the middle.
+      { geometry: { coordinates: [[10, 53], [10.5, 52.5], [11, 52]] }, distance: 100000, duration: 3600 },
+      // A detour that swings well to the east before rejoining.
+      { geometry: { coordinates: [[10, 53], [12.5, 52.5], [11, 52]] }, distance: 130000, duration: 4500 },
+    ],
+  }
+
+  it('FE-COMP-ROUTECALCULATOR-025: asks for alternatives between exactly two points', async () => {
+    let asked = ''
+    server.use(http.get(`${FOSSGIS.driving}/:coords`, ({ request }) => {
+      asked = request.url
+      return HttpResponse.json(twoRoutes)
+    }))
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 })
+
+    expect(asked).toContain('alternatives=3')
+    expect(routes).toHaveLength(2)
+    expect(routes[0].distance).toBe(100000)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-026: each alternative carries the point that makes it different', async () => {
+    server.use(http.get(`${FOSSGIS.driving}/:coords`, () => HttpResponse.json(twoRoutes)))
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 })
+
+    // The first is what the router gives anyway, so it needs no pinning point.
+    expect(routes[0].divergence).toBeNull()
+    // The second diverges at its eastern swing — saving that as a via forces this road.
+    expect(routes[1].divergence).toEqual({ lat: 52.5, lng: 12.5 })
+  })
+
+  /** The router's own answer, and whatever it says when a road class is left out. */
+  const withExclusions = (byExclude: Record<string, unknown>) =>
+    http.get(`${FOSSGIS.driving}/:coords`, ({ request }) => {
+      const exclude = new URL(request.url).searchParams.get('exclude')
+      if (!exclude) return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })
+      const answer = byExclude[exclude]
+      return answer ? HttpResponse.json(answer) : HttpResponse.json({ code: 'NoRoute', routes: [] })
+    })
+
+  it('FE-COMP-ROUTECALCULATOR-027: a road that is the same road either way is not offered twice', async () => {
+    // Leaving the motorway out changed nothing — the leg does not touch one. Offering
+    // the identical line a second time would be a choice that is not a choice.
+    server.use(withExclusions({ motorway: { code: 'Ok', routes: [twoRoutes.routes[0]] }, toll: { code: 'Ok', routes: [twoRoutes.routes[0]] } }))
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 })
+
+    expect(routes).toHaveLength(1)
+    expect(routes[0].divergence).toBeNull()
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-029: one answer from the router still offers the motorway-free way', async () => {
+    // OSRM answers most long legs with exactly one route, which used to mean the picker
+    // said there was no other way — while a perfectly good slower road existed.
+    server.use(withExclusions({ motorway: { code: 'Ok', routes: [twoRoutes.routes[1]] } }))
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 })
+
+    expect(routes).toHaveLength(2)
+    expect(routes[1].avoids).toBe('motorway')
+    // Pinnable like any other offer: the point where it leaves the direct line.
+    expect(routes[1].divergence).toEqual({ lat: 52.5, lng: 12.5 })
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-030: tolls are only asked about when the motorway gave nothing', async () => {
+    const asked: string[] = []
+    server.use(http.get(`${FOSSGIS.driving}/:coords`, ({ request }) => {
+      const exclude = new URL(request.url).searchParams.get('exclude')
+      if (exclude) asked.push(exclude)
+      if (!exclude) return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })
+      if (exclude === 'motorway') return HttpResponse.json({ code: 'NoRoute', routes: [] })
+      return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[1]] })
+    }))
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 })
+
+    expect(asked).toEqual(['motorway', 'toll'])
+    expect(routes[1].avoids).toBe('toll')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-031: walking is never asked to leave out a road class', async () => {
+    // The foot profile has no excludable classes; asking earns an InvalidOptions for
+    // nothing, and a walk has no motorway to avoid in the first place.
+    const asked: string[] = []
+    server.use(http.get(`${FOSSGIS.walking}/:coords`, ({ request }) => {
+      const exclude = new URL(request.url).searchParams.get('exclude')
+      if (exclude) asked.push(exclude)
+      return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })
+    }))
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 }, 'walking')
+
+    expect(asked).toEqual([])
+    expect(routes).toHaveLength(1)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-032: a host that rejects exclude is only asked once', async () => {
+    // Both public hosts TREK ships with answer 400 here, so without this every long leg
+    // pays two extra requests against a one-per-second limit to be refused twice.
+    const asked: string[] = []
+    server.use(http.get('*/route/v1/driving/*', ({ request }) => {
+      const exclude = new URL(request.url).searchParams.get('exclude')
+      if (!exclude) return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })
+      asked.push(exclude)
+      return new HttpResponse(null, { status: 400 })
+    }))
+
+    await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 13 }, 'driving')
+    const afterFirst = asked.length
+    await calculateAlternatives({ lat: 51, lng: 9 }, { lat: 50, lng: 12 }, 'driving')
+
+    expect(afterFirst).toBe(1)
+    expect(asked).toHaveLength(1)
+  })
+
+  // The second engine, which is what made this whole branch produce anything on a
+  // default install. Every case here overrides the 503 the shared handlers answer with,
+  // so the OSRM path above stays the one the cases before this measure.
+  const VALHALLA = 'https://valhalla1.openstreetmap.de/route'
+  const valhallaAnswer = (summary: Record<string, unknown>) => ({
+    trip: {
+      // The detour twoRoutes describes, re-encoded as the polyline6 Valhalla sends.
+      legs: [{ shape: '_szadB_gjaR~po]_yqwC~po]~tpzA' }],
+      summary: { length: 130, time: 4500, has_toll: false, has_highway: false, has_ferry: false, ...summary },
+    },
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-050: one answer from OSRM is offered a second way by Valhalla', async () => {
+    server.use(
+      http.get(`${FOSSGIS.driving}/:coords`, () => HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })),
+      http.post(VALHALLA, () => HttpResponse.json(valhallaAnswer({ has_highway: false })))
+    )
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 })
+
+    expect(routes).toHaveLength(2)
+    expect(routes[1].avoids).toBe('motorway')
+    expect(routes[1].distance).toBeCloseTo(130000, 0)
+    expect(routes[1].duration).toBe(4500)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-051: a road that still has the class is not offered as avoiding it', async () => {
+    // use_highways: 0 is a weighting, so a leg with no way round the motorway comes back
+    // on the motorway and says so. Offering that as "No motorway" would put a lie on the
+    // map, so it is dropped and the leg keeps the single way OSRM found.
+    //
+    // Asserted on the result rather than on which excludes OSRM was asked: by this point
+    // `excludeUnsupported` has already recorded the public host from the case above, and
+    // that Set is module state for the lifetime of the file.
+    server.use(
+      http.get(`${FOSSGIS.driving}/:coords`, ({ request }) => {
+        const exclude = new URL(request.url).searchParams.get('exclude')
+        if (!exclude) return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })
+        return new HttpResponse(null, { status: 400 })
+      }),
+      http.post(VALHALLA, () => HttpResponse.json(valhallaAnswer({ has_highway: true, has_toll: true, has_ferry: true })))
+    )
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52.5, lng: 11.5 })
+
+    expect(routes).toHaveLength(1)
+    expect(routes[0].avoids).toBeUndefined()
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-052: a ferry-free way is offered, which OSRM alone never managed', async () => {
+    server.use(
+      http.get(`${FOSSGIS.driving}/:coords`, ({ request }) => {
+        const exclude = new URL(request.url).searchParams.get('exclude')
+        if (!exclude) return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })
+        return new HttpResponse(null, { status: 400 })
+      }),
+      http.post(VALHALLA, async ({ request }) => {
+        const body = await request.json() as { costing_options: { auto: Record<string, number> } }
+        // Only the ferry question gets a usable answer, so the first two fall through.
+        if (!('use_ferry' in body.costing_options.auto)) {
+          return HttpResponse.json(valhallaAnswer({ has_highway: true, has_toll: true }))
+        }
+        return HttpResponse.json(valhallaAnswer({ has_ferry: false }))
+      })
+    )
+
+    const routes = await calculateAlternatives({ lat: 54, lng: 10 }, { lat: 55, lng: 12 })
+
+    expect(routes).toHaveLength(2)
+    expect(routes[1].avoids).toBe('ferry')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-054: the same road from the other engine is not offered as a second one', async () => {
+    // The reason the geometry decides rather than the numbers. Valhalla prices roads
+    // differently, so on a long leg the SAME road comes back kilometres apart in both
+    // length and time — here 13 km and 5 minutes, which is the measured spread between
+    // the two engines and comfortably past the 200 m the numbers used to allow. Judged
+    // on those it reads as a discovery and puts a second blue line on top of the first.
+    server.use(
+      http.get(`${FOSSGIS.driving}/:coords`, () => HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })),
+      http.post(VALHALLA, () => HttpResponse.json({
+        trip: {
+          // twoRoutes.routes[0]'s own line, re-encoded: the identical road.
+          legs: [{ shape: '_szadB_gjaR~po]_qo]~po]_qo]' }],
+          summary: { length: 113, time: 3900, has_toll: false, has_highway: false, has_ferry: false },
+        },
+      }))
+    )
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 })
+
+    expect(routes).toHaveLength(1)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-053: an instance with its own OSRM is never sent to the public Valhalla', async () => {
+    let valhallaCalls = 0
+    useSettingsStore.setState(st => ({ settings: { ...st.settings, routing_base_url: 'https://osrm.example.org' } }))
+    server.use(
+      http.get('https://osrm.example.org/route/v1/driving/:coords', ({ request }) => {
+        const exclude = new URL(request.url).searchParams.get('exclude')
+        if (!exclude) return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[0]] })
+        return HttpResponse.json({ code: 'Ok', routes: [twoRoutes.routes[1]] })
+      }),
+      http.post(VALHALLA, () => { valhallaCalls++; return HttpResponse.json(valhallaAnswer({})) })
+    )
+
+    const routes = await calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 12 })
+
+    expect(valhallaCalls).toBe(0)
+    expect(routes[1].avoids).toBe('motorway')
+    useSettingsStore.setState(st => ({ settings: { ...st.settings, routing_base_url: '' } }))
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-033: the snap positions come back with the route', async () => {
+    // OSRM reports these in every answer and TREK threw them away since the first route
+    // was drawn. Without them a place set back from the road looks like it is on the
+    // route, while the drive really starts somewhere else.
+    server.use(http.get('*/route/v1/driving/*', () => HttpResponse.json({
+      code: 'Ok',
+      waypoints: [
+        { location: [10.02, 53.51], distance: 812.5 },
+        { location: [13.0, 52.0], distance: 4 },
+      ],
+      routes: [{ geometry: { coordinates: [[10, 53], [13, 52]] }, distance: 1000, duration: 900, legs: [{ distance: 1000, duration: 900 }] }],
+    })))
+
+    const r = await calculateRouteWithLegs([{ lat: 53.5, lng: 10.0 }, { lat: 52, lng: 13 }])
+
+    expect(r.snapped).toEqual([
+      { asked: [53.5, 10.0], at: [53.51, 10.02], meters: 812.5 },
+      { asked: [52, 13], at: [52.0, 13.0], meters: 4 },
+    ])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-034: a distance the router left out is worked out from the two points', async () => {
+    server.use(http.get('*/route/v1/driving/*', () => HttpResponse.json({
+      code: 'Ok',
+      waypoints: [{ location: [10.0, 53.0] }, { location: [13.0, 52.0] }],
+      routes: [{ geometry: { coordinates: [[10, 53], [13, 52]] }, distance: 1000, duration: 900, legs: [{ distance: 1000, duration: 900 }] }],
+    })))
+
+    const r = await calculateRouteWithLegs([{ lat: 53.01, lng: 10.0 }, { lat: 52, lng: 13 }])
+
+    // Roughly 1.1 km for a hundredth of a degree of latitude; the point is that it is a
+    // real number rather than the whole answer being discarded.
+    expect(r.snapped?.[0].meters).toBeGreaterThan(1000)
+    expect(r.snapped?.[0].meters).toBeLessThan(1200)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-035: an answer that does not describe its waypoints changes nothing', async () => {
+    // All-or-nothing: a partial list would have to be indexed by waypoint anyway, and one
+    // bad entry would hang the spur off the wrong stop.
+    server.use(http.get('*/route/v1/driving/*', () => HttpResponse.json({
+      code: 'Ok',
+      waypoints: [{ location: [10.0, 53.0] }],
+      routes: [{ geometry: { coordinates: [[10, 53], [13, 52]] }, distance: 1000, duration: 900, legs: [{ distance: 1000, duration: 900 }] }],
+    })))
+
+    const r = await calculateRouteWithLegs([{ lat: 53, lng: 10 }, { lat: 52, lng: 13 }])
+
+    expect(r.snapped).toBeUndefined()
+    expect(r.coordinates).toHaveLength(2)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-028: no route at all is an empty list, not a throw', async () => {
+    server.use(http.get(`${FOSSGIS.driving}/:coords`, () =>
+      HttpResponse.json({ code: 'NoRoute', routes: [] })))
+
+    await expect(calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 })).resolves.toEqual([])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-029: a refused request is a RoutingRefusedError, not a generic one', async () => {
+    server.use(http.get(`${FOSSGIS.driving}/:coords`, () => HttpResponse.json({}, { status: 429 })))
+
+    await expect(calculateAlternatives({ lat: 53, lng: 10 }, { lat: 52, lng: 11 }))
+      .rejects.toMatchObject({ name: 'RoutingRefusedError', status: 429 })
+  })
+})
@@ -1,9 +1,11 @@
 import { useSettingsStore } from '../../store/settingsStore'
 import { pluginsApi } from '../../api/client'
-import type { DistanceUnit, RouteResult, RouteSegment, RouteWithLegs, Waypoint, RouteAnchors } from '../../types'
+import type { DistanceUnit, RouteResult, RouteSegment, RouteWithLegs, SnappedWaypoint, Waypoint, RouteAnchors } from '../../types'
+import { haversineKm } from '../../utils/geo'
 import { formatDistance } from '../../utils/units'
-
-const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
+import { countRoute } from './routeUsageCounter'
+import { valhallaRouteAvoiding, valhallaRun, valhallaAvailable, legAvoids, type AvoidClass } from './valhallaRoute'
+import type { RouteUsageSurface } from '@trek/shared'

 // FOSSGIS hosts OSRM with real per-profile routing (car/foot/bike) — the
 // project-osrm.org demo is car-only (it ignores the profile in the URL). Use
@@ -14,6 +16,112 @@ const OSRM_PROFILE_BASE: Record<'driving' | 'walking' | 'cycling', string> = {
  cycling: 'https://routing.openstreetmap.de/routed-bike/route/v1/bike',
 }

+/** OSRM's own profile names, which a self-hosted instance serves under its own paths. */
+const OSRM_PROFILE_PATH: Record<'driving' | 'walking' | 'cycling', string> = {
+  driving: 'driving',
+  walking: 'foot',
+  cycling: 'bike',
+}
+
+/**
+ * Where to ask for a route.
+ *
+ * The public FOSSGIS hosts allow roughly one request a second, which a road trip — every
+ * leg of every day — runs into immediately. An instance that runs its own OSRM sets
+ * `routing_base_url` and everything routes against that instead; the server has to name
+ * the same origin in its connect-src, or the browser blocks the requests silently.
+ *
+ * A configured base is expected to serve the standard OSRM layout,
+ * `<base>/route/v1/<profile>/…`, which is what `osrm-routed` does out of the box.
+ */
+/**
+ * A configured base URL without its trailing slashes.
+ *
+ * Walked rather than matched with `/\/+$/`: that pattern backtracks over a run of
+ * slashes, and the value comes from an instance setting somebody types. Linear either
+ * way in practice, but the regex is the shape a scanner is right to flag.
+ */
+function withoutTrailingSlashes(value: string): string {
+  let end = value.length
+  while (end > 0 && value[end - 1] === '/') end -= 1
+  return value.slice(0, end)
+}
+
+function routeBaseFor(profile: 'driving' | 'walking' | 'cycling'): string {
+  const configured = useSettingsStore.getState().settings.routing_base_url?.trim()
+  if (!configured) return OSRM_PROFILE_BASE[profile]
+  return `${withoutTrailingSlashes(configured)}/route/v1/${OSRM_PROFILE_PATH[profile]}`
+}
+
+/**
+ * `fetch`, with the request counted.
+ *
+ * Every route TREK draws goes out from here, and nowhere else, which makes this the one
+ * place that can answer how much routing an instance really does — the number behind
+ * "could we host an engine ourselves". Counted: how many requests, of what kind, how
+ * many waypoints, roughly how far, and whether the host refused. Not counted, because it
+ * is never sent: where any of it was.
+ *
+ * Distance is the straight line along the waypoint chain rather than the routed length,
+ * which is only in the answer and differs per response shape. It is a floor on the real
+ * figure, and a floor is enough to tell a 1500 km per-request limit from a 150 km one.
+ *
+ * An aborted request is not a failure: the map cancels constantly while someone drags.
+ */
+async function routedFetch(
+  url: string,
+  signal: AbortSignal | undefined,
+  kind: RouteUsageSurface,
+  profile: 'driving' | 'walking' | 'cycling',
+  waypoints: readonly Waypoint[],
+): Promise<Response> {
+  const selfHosted = !!useSettingsStore.getState().settings.routing_base_url?.trim()
+  let km = 0
+  for (let i = 1; i < waypoints.length; i++) km += haversineKm(waypoints[i - 1], waypoints[i])
+  const sample = { profile, surface: kind, selfHosted, waypoints: waypoints.length, km }
+  try {
+    const response = await fetch(url, { signal })
+    countRoute({ ...sample, failed: !response.ok })
+    return response
+  } catch (err) {
+    if (!(err instanceof DOMException && err.name === 'AbortError')) {
+      countRoute({ ...sample, failed: true })
+    }
+    throw err
+  }
+}
+
+/**
+ * A routing request the host refused, as opposed to one it answered with "no route".
+ *
+ * The public OSRM instances allow roughly one request a second and answer 429 above that.
+ * Both used to arrive as the same generic Error, so a caller could not tell "back off and
+ * try again" from "these two points are not connected by road" — and a road trip, which
+ * asks for every leg of every day, hits the first case constantly while the second is
+ * rare. `retryAfterMs` carries the host's own `Retry-After` when it sends one.
+ */
+export class RoutingRefusedError extends Error {
+  constructor(readonly status: number, readonly retryAfterMs: number | null) {
+    super(status === 429 ? 'Routing rate limit reached' : 'Route could not be calculated')
+    this.name = 'RoutingRefusedError'
+  }
+
+  /** True when waiting and asking again is the right response. */
+  get isRateLimit(): boolean {
+    return this.status === 429 || this.status === 503
+  }
+}
+
+/** `Retry-After` is either seconds or an HTTP date; anything else is no answer at all. */
+function retryAfterMs(response: Response): number | null {
+  const raw = response.headers.get('Retry-After')
+  if (!raw) return null
+  const seconds = Number(raw)
+  if (Number.isFinite(seconds) && seconds >= 0) return Math.round(seconds * 1000)
+  const at = Date.parse(raw)
+  return Number.isNaN(at) ? null : Math.max(0, at - Date.now())
+}
+
 // Cache route responses keyed by the exact waypoint list. Routes are stable, so
 // this avoids re-hitting the public OSRM demo server on every day switch / reorder.
 const routeCache = new Map<string, RouteWithLegs>()
@@ -45,11 +153,11 @@ export async function calculateRoute(
  }

  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  const url = `${OSRM_BASE}/${profile}/${coords}?overview=full&geometries=geojson&steps=false`
+  const url = `${routeBaseFor(profile)}/${coords}?overview=full&geometries=geojson&steps=false`

-  const response = await fetch(url, { signal })
+  const response = await routedFetch(url, signal, 'route', profile, waypoints)
  if (!response.ok) {
-    throw new Error('Route could not be calculated')
+    throw new RoutingRefusedError(response.status, retryAfterMs(response))
  }

  const data = await response.json()
@@ -252,10 +360,10 @@ export async function calculateSegments(
  if (!waypoints || waypoints.length < 2) return []

  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  const url = `${OSRM_BASE}/driving/${coords}?overview=false&geometries=geojson&steps=false&annotations=distance,duration`
+  const url = `${routeBaseFor('driving')}/${coords}?overview=false&geometries=geojson&steps=false&annotations=distance,duration`

-  const response = await fetch(url, { signal })
-  if (!response.ok) throw new Error('Route could not be calculated')
+  const response = await routedFetch(url, signal, 'segments', 'driving', waypoints)
+  if (!response.ok) throw new RoutingRefusedError(response.status, retryAfterMs(response))

  const data = await response.json()
  if (data.code !== 'Ok' || !data.routes?.[0]) throw new Error('No route found')
@@ -285,23 +393,55 @@ export async function calculateSegments(
 */
 export async function calculateRouteWithLegs(
  waypoints: Waypoint[],
-  { signal, profile = 'driving', tripId, dayId }: { signal?: AbortSignal; profile?: RouteProfileKey; tripId?: number | string | null; dayId?: number | null } = {}
+  { signal, profile = 'driving', tripId, dayId, avoid = [] }: {
+    signal?: AbortSignal
+    profile?: RouteProfileKey
+    tripId?: number | string | null
+    dayId?: number | null
+    /** Road classes to weight away. Only the driving profile has any, and only Valhalla can. */
+    avoid?: readonly AvoidClass[]
+  } = {}
 ): Promise<RouteWithLegs> {
  if (!waypoints || waypoints.length < 2) {
    return { coordinates: [], distance: 0, duration: 0, legs: [] }
  }

+  const avoiding = profile === 'driving' && avoid.length > 0 && valhallaAvailable()
+    ? [...avoid].sort()
+    : []
+
  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
  // The cached result carries formatted leg distances, so the active distance unit is
  // part of the key — otherwise switching km↔mi would return stale text (#1300).
  // A plugin route is trip-/day-specific (it may return different charging stops for
  // the same coordinates on a different day), so its key includes tripId/dayId;
  // the built-in OSRM profiles are context-free and leave those out.
+  //
+  // The avoidance belongs in the key for two reasons pointing opposite ways. Without it
+  // turning the switch on returns the tolled route out of cache in under a millisecond,
+  // so nothing on screen changes and it reads as a broken toggle. And the leak the other
+  // way is worse: this Map is shared with the ordinary day planner, the studio and the
+  // booking geometry, none of which ask for avoidance, so an avoid-routed answer stored
+  // under the plain key would hand them a road nobody drives and a second engine's
+  // times. `avoiding` is empty whenever the request goes to OSRM after all, so the key
+  // also separates the two engines.
  const pluginScope = profile.startsWith('plugin:') ? `:${tripId ?? ''}:${dayId ?? ''}` : ''
-  const cacheKey = `${profile}:${getDistanceUnit()}:${coords}${pluginScope}`
+  const avoidScope = avoiding.length ? `:avoid=${avoiding.join(',')}` : ''
+  const cacheKey = `${profile}:${getDistanceUnit()}:${coords}${pluginScope}${avoidScope}`
  const cached = routeCache.get(cacheKey)
  if (cached) return cached

+  if (avoiding.length) {
+    const routed = await routeAvoidingWithLegs(waypoints, avoiding, signal)
+    // Null is a Valhalla that could not answer at all. Falling through to OSRM keeps a
+    // day drawn rather than blank, and `avoidance` stays absent on that result so the
+    // rail can say the avoidance did not happen instead of implying it did.
+    if (routed) {
+      cacheRoute(cacheKey, routed)
+      return routed
+    }
+  }
+
  // Plugin profile (`plugin:<id>/<profile>`): the server invokes that routeProvider
  // and normalizes its answer; null means the provider failed or refused, and the
  // throw makes callers fall back to straight lines exactly like an OSRM outage.
@@ -344,10 +484,13 @@ export async function calculateRouteWithLegs(
    return result
  }

-  const osrmProfile = (profile === 'walking' || profile === 'cycling') ? profile : 'driving'
-  const url = `${OSRM_PROFILE_BASE[osrmProfile]}/${coords}?overview=full&geometries=geojson&annotations=distance,duration`
-  const response = await fetch(url, { signal })
-  if (!response.ok) throw new Error('Route could not be calculated')
+  // Written as literals rather than narrowing `profile`: its type is an open string union
+  // (plugins name their own modes), which no comparison narrows to the three OSRM knows.
+  const osrmProfile: 'driving' | 'walking' | 'cycling' =
+    profile === 'walking' ? 'walking' : profile === 'cycling' ? 'cycling' : 'driving'
+  const url = `${routeBaseFor(osrmProfile)}/${coords}?overview=full&geometries=geojson&annotations=distance,duration`
+  const response = await routedFetch(url, signal, 'legs', osrmProfile, waypoints)
+  if (!response.ok) throw new RoutingRefusedError(response.status, retryAfterMs(response))

  const data = await response.json()
  if (data.code !== 'Ok' || !data.routes?.[0]) throw new Error('No route found')
@@ -374,13 +517,106 @@ export async function calculateRouteWithLegs(
    }
  )

-  const result: RouteWithLegs = { coordinates, distance: route.distance, duration: route.duration, legs }
-  routeCache.set(cacheKey, result)
+  const snapped = readSnapped(data, waypoints)
+  const result: RouteWithLegs = { coordinates, distance: route.distance, duration: route.duration, legs, ...(snapped ? { snapped } : {}) }
+  cacheRoute(cacheKey, result)
+  return result
+}
+
+/** Store a route and drop the oldest once the cache is over its cap. */
+function cacheRoute(key: string, route: RouteWithLegs): void {
+  routeCache.set(key, route)
  if (routeCache.size > ROUTE_CACHE_MAX) {
    const oldest = routeCache.keys().next().value
    if (oldest !== undefined) routeCache.delete(oldest)
  }
-  return result
+}
+
+/**
+ * A whole chain from the second engine, weighted away from some road classes.
+ *
+ * Shaped exactly like the OSRM answer above so the callers never branch on which engine
+ * spoke — same leg list, same formatted text, same snap positions. What it adds is
+ * `avoidance`: what was asked for against what the road actually turned out to be, which
+ * is the only honest way to label a weighting that can fail.
+ *
+ * Null rather than a throw when it cannot answer, so the caller falls through to OSRM
+ * and the day stays drawn.
+ */
+async function routeAvoidingWithLegs(
+  waypoints: Waypoint[],
+  avoid: AvoidClass[],
+  signal?: AbortSignal,
+): Promise<RouteWithLegs | null> {
+  const sample = {
+    profile: 'driving' as const,
+    surface: 'legs' as const,
+    selfHosted: !!useSettingsStore.getState().settings.routing_base_url?.trim(),
+    waypoints: waypoints.length,
+    km: waypoints.slice(1).reduce((sum, point, i) => sum + haversineKm(waypoints[i], point), 0),
+  }
+  const run = await valhallaRun(waypoints, 'driving', avoid, signal)
+  // Counted by hand because the adapter speaks to a different engine with a different
+  // verb, and the counter exists to answer "how much routing does this instance do" —
+  // an engine it cannot see is exactly the traffic that would go missing from it.
+  if (!signal?.aborted) countRoute({ ...sample, failed: !run })
+  if (!run) return null
+
+  const legs: RouteSegment[] = run.legs.map((leg, i): RouteSegment => {
+    const from: [number, number] = [waypoints[i].lat, waypoints[i].lng]
+    const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng]
+    return {
+      mid: [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2],
+      from,
+      to,
+      distance: leg.distance,
+      duration: leg.duration,
+      walkingText: formatDuration(leg.distance / (5000 / 3600)),
+      drivingText: formatDuration(leg.duration),
+      distanceText: formatRouteDistance(leg.distance),
+      durationText: formatDuration(leg.duration),
+    }
+  })
+
+  return {
+    coordinates: run.total.coordinates,
+    distance: run.total.distance,
+    duration: run.total.duration,
+    legs,
+    snapped: run.snapped,
+    avoidance: { asked: avoid, achieved: avoid.filter(cls => legAvoids(run.total, cls)) },
+  }
+}
+
+/**
+ * The snap positions out of an OSRM answer, or undefined if it did not describe them.
+ *
+ * OSRM reports this in every response and TREK has thrown it away since the first route
+ * was drawn. `distance` is the straight line from the coordinate we sent to the road it
+ * used; it is recomputed from the two points when the field is missing or nonsense, so a
+ * mirror that trims its answers still produces a usable gap rather than a wrong one.
+ *
+ * All-or-nothing on purpose: a partial list would have to be indexed by waypoint anyway,
+ * and one bad entry would put a spur on the wrong stop.
+ */
+function readSnapped(data: unknown, waypoints: Waypoint[]): SnappedWaypoint[] | undefined {
+  const raw = (data as { waypoints?: unknown })?.waypoints
+  if (!Array.isArray(raw) || raw.length !== waypoints.length) return undefined
+  const out: SnappedWaypoint[] = []
+  for (let i = 0; i < raw.length; i++) {
+    const loc = (raw[i] as { location?: unknown })?.location
+    if (!Array.isArray(loc) || loc.length < 2) return undefined
+    const [lng, lat] = loc as [number, number]
+    if (!Number.isFinite(lat) || !Number.isFinite(lng)) return undefined
+    const asked: [number, number] = [waypoints[i].lat, waypoints[i].lng]
+    const at: [number, number] = [lat, lng]
+    const reported = (raw[i] as { distance?: unknown })?.distance
+    const meters = typeof reported === 'number' && Number.isFinite(reported) && reported >= 0
+      ? reported
+      : haversineKm({ lat: asked[0], lng: asked[1] }, { lat, lng }) * 1000
+    out.push({ asked, at, meters })
+  }
+  return out
 }

 function getDistanceUnit(): DistanceUnit {
@@ -403,3 +639,284 @@ function formatDuration(seconds: number): string {
  }
  return `${m} min`
 }
+
+/** One way of driving a leg, as OSRM offers it. */
+export interface RouteAlternative {
+  coordinates: [number, number][]
+  distance: number
+  duration: number
+  /** Where this route differs most from the first one — the point that would pin it. */
+  divergence: { lat: number; lng: number } | null
+  /** Set when this way exists because a road class was left out of it. */
+  avoids?: AvoidClass
+}
+
+/**
+ * Road classes worth asking the router to leave out, in the order they are tried.
+ *
+ * OSRM's own alternative search is conservative: it only offers a second road when the
+ * detour is short enough and shares little enough with the first, so on a long motorway
+ * run it usually answers with exactly one route — while a perfectly good, slower way over
+ * the B-roads exists and is what somebody opening "other ways" is looking for. Excluding
+ * a class asks a different question and reliably produces that road.
+ *
+ * Only for driving: the foot and bike profiles have no excludable classes, and asking
+ * anyway earns an `InvalidOptions` for nothing.
+ *
+ * Ferry is on the list for Valhalla's sake and skipped on the OSRM path below. OSRM
+ * does carry a ferry class, but on a leg where a ferry is the only crossing it answers
+ * NoRoute rather than the long way round, which is not an alternative anybody can use.
+ * Valhalla weights it instead and drives around, which is the whole point.
+ */
+const EXCLUDABLE_CLASSES = ['motorway', 'toll', 'ferry'] as const
+
+/**
+ * How far two lines may stray from each other and still be the same road, in kilometres.
+ *
+ * Parallel carriageways, a different slip road onto the same motorway and the noise
+ * between two engines' idea of where a road is all sit well under this. A way somebody
+ * would call an alternative leaves it by kilometres: the ferry-free run from Hamburg to
+ * Copenhagen, which is a genuinely different road, peaks 2.3 km off the default.
+ */
+const SAME_ROAD_KM = 0.5
+
+/**
+ * Two lines are the same road.
+ *
+ * Length and duration used to decide this, and stopped being enough when a second engine
+ * started answering. Valhalla prices roads differently — measured over ten European legs
+ * its distances ran 2.8 % above OSRM's and its times 5.4 % — so on a 470 km leg the same
+ * road comes back thirteen kilometres apart and a 200 m tolerance calls it a discovery.
+ * Two identical blue lines on the map is exactly what that looks like.
+ *
+ * The geometry does not care which engine drew it, so it decides whenever there is one.
+ * The numbers stay as the fallback for a line with no shape to compare.
+ */
+function sameRoad(a: RouteAlternative, b: RouteAlternative): boolean {
+  const stray = furthestFrom(b.coordinates, a.coordinates)
+  if (stray) return stray.km < SAME_ROAD_KM
+  return Math.abs(a.distance - b.distance) < 200 && Math.abs(a.duration - b.duration) < 60
+}
+
+/**
+ * Hosts that have already answered "I do not do exclude", by base URL.
+ *
+ * Both public hosts TREK ships with reject the parameter outright with HTTP 400: the
+ * upstream car profile is built without excludable classes, and only a self-hosted OSRM
+ * built through the MLD pipeline supports it. Without this, every long leg on a default
+ * install pays two extra requests to be told twice that it cannot have what it asked for,
+ * against a host that allows one request per second.
+ *
+ * The first real attempt is the probe; there is no separate one. Only a 400 is recorded,
+ * because only a 400 is about the host rather than about this particular question: a 429
+ * is a rate limit, an abort is the user moving on, and a `NoRoute` means this leg has no
+ * way round the motorway while the next one might.
+ *
+ * Per base URL rather than global, so pointing the instance at an own router that does
+ * support it starts asking again without a reload.
+ */
+const excludeUnsupported = new Set<string>()
+
+/**
+ * One route with a road class left out, or null when the router will not or cannot.
+ *
+ * Every failure is a null: a rate limit answers 429, and a leg with no way round the
+ * motorway answers `NoRoute`. Neither is worth an error on screen — they just mean this
+ * particular question had no answer.
+ */
+async function routeExcluding(
+  from: Waypoint,
+  to: Waypoint,
+  profile: 'driving' | 'walking' | 'cycling',
+  exclude: AvoidClass,
+  signal?: AbortSignal,
+): Promise<RouteAlternative | null> {
+  // Valhalla first, because on a default install it is the only one of the two that
+  // can answer at all. It weights the class away instead of banning it, so it also
+  // answers on a leg where the class cannot be avoided — and says so, which is why the
+  // result is thrown away below unless the road really came back without it.
+  const weighted = await valhallaExcluding(from, to, profile, exclude, signal)
+  if (weighted) return weighted
+
+  // OSRM has a ferry class too, but on a leg where the ferry IS the crossing it answers
+  // NoRoute rather than driving round, so there is nothing to offer and no point paying
+  // a request to be told so.
+  if (exclude === 'ferry') return null
+  return osrmExcluding(from, to, profile, exclude, signal)
+}
+
+/**
+ * The same leg from Valhalla, weighted away from one class, or null.
+ *
+ * The check that makes this honest is `legAvoids`: `use_tolls: 0` is a preference, so
+ * between two points with no untolled connection the answer is still a tolled road.
+ * Offering that as "No tolls" would put a lie on the map, so it is dropped and the
+ * OSRM attempt gets its turn.
+ */
+async function valhallaExcluding(
+  from: Waypoint,
+  to: Waypoint,
+  profile: 'driving' | 'walking' | 'cycling',
+  exclude: AvoidClass,
+  signal?: AbortSignal,
+): Promise<RouteAlternative | null> {
+  if (!valhallaAvailable()) return null
+  const sample = {
+    profile,
+    surface: 'alternatives' as const,
+    selfHosted: !!useSettingsStore.getState().settings.routing_base_url?.trim(),
+    waypoints: 2,
+    km: haversineKm(from, to),
+  }
+  const leg = await valhallaRouteAvoiding(from, to, profile, exclude, signal)
+  // Counted here rather than in the adapter, so the adapter stays a format translator
+  // and every routing request an instance makes still lands in the one counter.
+  if (!signal?.aborted) countRoute({ ...sample, failed: !leg })
+  if (!leg || !legAvoids(leg, exclude)) return null
+  return {
+    coordinates: leg.coordinates,
+    distance: leg.distance,
+    duration: leg.duration,
+    divergence: null,
+  }
+}
+
+/** The same leg from OSRM with the class excluded outright, or null. */
+async function osrmExcluding(
+  from: Waypoint,
+  to: Waypoint,
+  profile: 'driving' | 'walking' | 'cycling',
+  exclude: AvoidClass,
+  signal?: AbortSignal,
+): Promise<RouteAlternative | null> {
+  const base = routeBaseFor(profile)
+  if (excludeUnsupported.has(base)) return null
+  try {
+    const coords = `${from.lng},${from.lat};${to.lng},${to.lat}`
+    const url = `${base}/${coords}?exclude=${exclude}&overview=full&geometries=geojson`
+    const response = await routedFetch(url, signal, 'alternatives', profile, [from, to])
+    if (!response.ok) {
+      // 400 is the router saying the parameter itself is not available here, which is
+      // true of every leg from now on. Anything else is about this request alone.
+      if (response.status === 400) excludeUnsupported.add(base)
+      return null
+    }
+    const data = await response.json()
+    const route = data?.code === 'Ok' && Array.isArray(data.routes) ? data.routes[0] : null
+    if (!route?.geometry?.coordinates?.length) return null
+    return {
+      coordinates: route.geometry.coordinates.map(([lng, lat]: [number, number]) => [lat, lng] as [number, number]),
+      distance: route.distance,
+      duration: route.duration,
+      divergence: null,
+    }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * The ways of driving one leg, not one day.
+ *
+ * Deliberately per leg: OSRM only offers alternatives between exactly two coordinates, so
+ * asking for a whole day would mean splitting it into one request per leg — which is the
+ * bundling `splitIntoRuns` exists to avoid, and the reason a road trip appears at once
+ * instead of trickling in. Asked for a single leg, on demand, it costs one extra request.
+ *
+ * `divergence` is the point on each alternative that lies furthest from the default route.
+ * It is what makes a choice persistable: saving that point as a via forces the router back
+ * onto this road on every future request, without storing a polyline that would go stale
+ * with the next OSM update.
+ */
+export async function calculateAlternatives(
+  from: Waypoint,
+  to: Waypoint,
+  profile: 'driving' | 'walking' | 'cycling' = 'driving',
+  { signal, limit = 3 }: { signal?: AbortSignal; limit?: number } = {},
+): Promise<RouteAlternative[]> {
+  const coords = `${from.lng},${from.lat};${to.lng},${to.lat}`
+  const url = `${routeBaseFor(profile)}/${coords}?alternatives=${limit}&overview=full&geometries=geojson`
+  const response = await routedFetch(url, signal, 'alternatives', profile, [from, to])
+  if (!response.ok) throw new RoutingRefusedError(response.status, retryAfterMs(response))
+
+  const data = await response.json()
+  if (data.code !== 'Ok' || !Array.isArray(data.routes) || !data.routes.length) return []
+
+  const routes: RouteAlternative[] = data.routes.map((r: { geometry: { coordinates: [number, number][] }; distance: number; duration: number }) => ({
+    coordinates: r.geometry.coordinates.map(([lng, lat]) => [lat, lng] as [number, number]),
+    distance: r.distance,
+    duration: r.duration,
+    divergence: null,
+  }))
+
+  // Nothing but the router's own preference came back, which is what it answers on most
+  // long legs. Rather than reporting "only one sensible way", ask a different question:
+  // the same drive without the motorway, then without the tolls, then without a ferry.
+  // Tried one at a time and stopped as soon as one lands, so a leg that does have a
+  // second road costs one extra request rather than three.
+  //
+  // This used to produce nothing at all on a default install: OSRM's `exclude` is HTTP
+  // 400 on both public hosts, whose car profile is built without excludable classes. It
+  // now asks Valhalla first, where avoidance is a runtime weighting, and only falls back
+  // to OSRM's `exclude` for an instance running its own MLD-built router.
+  if (routes.length < 2 && profile === 'driving') {
+    for (const exclude of EXCLUDABLE_CLASSES) {
+      if (signal?.aborted) break
+      const detour = await routeExcluding(from, to, profile, exclude, signal)
+      if (detour && !routes.some(r => sameRoad(r, detour))) {
+        detour.avoids = exclude
+        routes.push(detour)
+        break
+      }
+    }
+  }
+
+  // The first route is what the router would have given anyway; the others are measured
+  // against it so each one can be pinned by the point that makes it different.
+  const [primary, ...rest] = routes
+  for (const alt of rest) alt.divergence = furthestPointFrom(alt.coordinates, primary.coordinates)
+  return routes
+}
+
+/** The point of `line` that lies furthest from `reference`, in plain degrees. */
+function furthestPointFrom(line: [number, number][], reference: [number, number][]): { lat: number; lng: number } | null {
+  const furthest = furthestFrom(line, reference)
+  return furthest ? { lat: furthest.lat, lng: furthest.lng } : null
+}
+
+/**
+ * The same point, plus how far off it actually is.
+ *
+ * The search itself stays in squared degrees with a cosine on the longitude: it only has
+ * to ORDER the candidates, and a haversine per pair of a 200-by-200 comparison buys
+ * nothing for it. The winner is converted once at the end, because `sameRoad` needs a
+ * real distance rather than a rank, and half a degree is a different number of metres in
+ * Andalusia than in Lapland.
+ */
+function furthestFrom(
+  line: [number, number][],
+  reference: [number, number][],
+): { lat: number; lng: number; km: number } | null {
+  if (!line.length || !reference.length) return null
+  // Every tenth vertex is plenty: alternatives differ over kilometres, not metres, and a
+  // full cross product of two thousand-point lines is not worth the milliseconds.
+  const step = Math.max(1, Math.floor(reference.length / 200))
+  let best: { lat: number; lng: number } | null = null
+  let bestNeighbour: [number, number] | null = null
+  let bestDist = -1
+  for (let i = 0; i < line.length; i += Math.max(1, Math.floor(line.length / 200))) {
+    const [lat, lng] = line[i]
+    let nearest = Infinity
+    let nearestPoint: [number, number] | null = null
+    for (let j = 0; j < reference.length; j += step) {
+      const dLat = lat - reference[j][0]
+      const dLng = (lng - reference[j][1]) * Math.cos((lat * Math.PI) / 180)
+      const d = dLat * dLat + dLng * dLng
+      if (d < nearest) { nearest = d; nearestPoint = reference[j] }
+    }
+    if (nearest > bestDist) { bestDist = nearest; best = { lat, lng }; bestNeighbour = nearestPoint }
+  }
+  if (!best) return null
+  const km = bestNeighbour ? haversineKm(best, { lat: bestNeighbour[0], lng: bestNeighbour[1] }) : 0
+  return { ...best, km }
+}
@@ -0,0 +1,90 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { TripRouteOverviewPill, TripRouteOverviewPanel } from './TripRouteOverview'
+import type { TripRouteOverview } from './useTripRouteOverview'
+
+const overview = (over: Partial<TripRouteOverview> = {}): TripRouteOverview => ({
+  days: [
+    { dayId: 1, dayNumber: 1, date: '2025-06-01', title: null, color: { line: '#0a84ff', casing: '#0a5cc2' }, lines: [], segments: [], distance: 82000, duration: 3600, modes: ['driving'] },
+    { dayId: 2, dayNumber: 2, date: '2025-06-02', title: 'Coast road', color: { line: '#ff9f0a', casing: '#c2740a' }, lines: [], segments: [], distance: 140500, duration: 7200, modes: ['driving', 'walking'] },
+  ],
+  lines: [], lineColors: [], segments: [], focusPoints: [],
+  totalDistance: 222500, totalDuration: 10800, loading: false,
+  ...over,
+})
+
+describe('TripRouteOverviewPill', () => {
+  it('FE-MAP-TROU-001: says which way it will take you, and reports its state', () => {
+    const onToggle = vi.fn()
+    const { rerender } = render(<TripRouteOverviewPill active={false} onToggle={onToggle} />)
+
+    const button = screen.getByTestId('trip-overview-pill')
+    expect(button).toHaveAttribute('aria-pressed', 'false')
+    expect(button).toHaveAttribute('aria-label', 'map.overview.show')
+
+    fireEvent.click(button)
+    expect(onToggle).toHaveBeenCalledTimes(1)
+
+    rerender(<TripRouteOverviewPill active onToggle={onToggle} />)
+    expect(screen.getByTestId('trip-overview-pill')).toHaveAttribute('aria-label', 'map.overview.hide')
+  })
+})
+
+describe('TripRouteOverviewPanel', () => {
+  it('FE-MAP-TROU-002: leads with the trip total in the reader\'s own unit', () => {
+    const { rerender } = render(<TripRouteOverviewPanel overview={overview()} unit="metric" />)
+    expect(screen.getByText('222.5 km')).toBeInTheDocument()
+
+    rerender(<TripRouteOverviewPanel overview={overview()} unit="imperial" />)
+    expect(screen.getByText('138.3 mi')).toBeInTheDocument()
+  })
+
+  it('FE-MAP-TROU-003: names every day, its distance and how it is travelled', () => {
+    render(<TripRouteOverviewPanel overview={overview()} unit="metric" />)
+
+    expect(screen.getByText('dayplan.dayN')).toBeInTheDocument()
+    // A day with a title is named by it rather than by its number.
+    expect(screen.getByText('Coast road')).toBeInTheDocument()
+    expect(screen.getByText('82 km')).toBeInTheDocument()
+    expect(screen.getByText('140.5 km')).toBeInTheDocument()
+  })
+
+  it('FE-MAP-TROU-004: marks the total as partial while legs are still coming in', () => {
+    const { container, rerender } = render(<TripRouteOverviewPanel overview={overview({ loading: true })} unit="metric" />)
+    expect(container.textContent).toContain('…')
+
+    rerender(<TripRouteOverviewPanel overview={overview()} unit="metric" />)
+    expect(container.textContent).not.toContain('…')
+  })
+
+  it('FE-MAP-TROU-005: a day row picks that day when the shell offers it', () => {
+    const onSelectDay = vi.fn()
+    render(<TripRouteOverviewPanel overview={overview()} unit="metric" selectedDayId={2} onSelectDay={onSelectDay} />)
+
+    fireEvent.click(screen.getByText('Coast road'))
+    expect(onSelectDay).toHaveBeenCalledWith(2)
+  })
+
+  it('FE-MAP-TROU-006: read-only shells get rows, not buttons', () => {
+    render(<TripRouteOverviewPanel overview={overview()} unit="metric" />)
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
+  })
+
+  it('FE-MAP-TROU-008: hugs its rows, and takes the cap the shell gives it', () => {
+    const { container, rerender } = render(<TripRouteOverviewPanel overview={overview()} unit="metric" />)
+    const card = () => screen.getByTestId('trip-overview-panel')
+
+    expect(card().style.width).toBe('fit-content')
+    expect(card().style.maxWidth).toBe('320px')
+
+    // The phone shell asks for a narrower card so the map keeps the space.
+    rerender(<TripRouteOverviewPanel overview={overview()} unit="metric" maxWidth={240} />)
+    expect(card().style.maxWidth).toBe('240px')
+    expect(container).not.toBeEmptyDOMElement()
+  })
+
+  it('FE-MAP-TROU-007: draws nothing at all for a trip with no routed day', () => {
+    const { container } = render(<TripRouteOverviewPanel overview={overview({ days: [], totalDistance: 0 })} unit="metric" />)
+    expect(container).toBeEmptyDOMElement()
+  })
+})
@@ -0,0 +1,130 @@
+import { Route } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { profileIcon } from '../Planner/DayPlanSidebarRouteConnector'
+import { formatDistance } from '../../utils/units'
+import { MAP_CONTROL_SHADOW } from './mapControlShadow'
+import type { TripRouteOverview as Overview } from './useTripRouteOverview'
+import type { DistanceUnit } from '../../types'
+
+/**
+ * Toggle for the whole-trip route overview (#1736). Same frosted shell as the other
+ * map controls, so it lines up with the compass and the layer switcher.
+ */
+export function TripRouteOverviewPill({ active, onToggle }: { active: boolean; onToggle: () => void }) {
+  const { t } = useTranslation()
+  const label = active ? t('map.overview.hide') : t('map.overview.show')
+  return (
+    <div style={{
+      display: 'inline-flex', alignItems: 'center', padding: 4, borderRadius: 999, pointerEvents: 'auto',
+      background: 'var(--sidebar-bg)',
+      backdropFilter: 'blur(20px) saturate(180%)',
+      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+      boxShadow: MAP_CONTROL_SHADOW,
+    }}>
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-label={label}
+        title={label}
+        aria-pressed={active}
+        data-testid="trip-overview-pill"
+        className={active ? 'text-accent' : 'text-content-muted'}
+        style={{
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
+          background: 'transparent', padding: 0,
+          transition: 'background 0.14s, color 0.14s',
+        }}
+        onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
+        onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
+      >
+        <Route size={17} strokeWidth={2} />
+      </button>
+    </div>
+  )
+}
+
+/**
+ * The trip's stages and its total distance, read off the overview the map is drawing.
+ *
+ * One component for both shells: the phone and the desktop place it differently but the
+ * rows are the same rows, and a second copy of them is a second thing to keep in step.
+ */
+export function TripRouteOverviewPanel({ overview, unit, selectedDayId, onSelectDay, maxWidth = 320 }: {
+  overview: Overview
+  unit: DistanceUnit
+  selectedDayId?: number | null
+  onSelectDay?: (dayId: number) => void
+  /** How wide the card may grow before day names start to ellipsize. */
+  maxWidth?: number
+}) {
+  const { t } = useTranslation()
+  if (!overview.days.length) return null
+
+  return (
+    <div
+      data-testid="trip-overview-panel"
+      style={{
+        pointerEvents: 'auto', borderRadius: 14, overflow: 'hidden',
+        background: 'var(--sidebar-bg)',
+        backdropFilter: 'blur(20px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+        boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
+        // Sized to its rows rather than to the space available: a trip of short day
+        // names left a band of empty card over the map, which on a phone is most of
+        // what there is to look at.
+        width: 'fit-content', maxWidth,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, padding: '10px 14px 8px' }}>
+        <span className="text-content-muted" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', textTransform: 'uppercase', letterSpacing: 0.4 }}>
+          {t('map.overview.total')}
+        </span>
+        {/* Same tier as the label beside it: the two read as one line rather than as a
+            heading with a number stuck under it. */}
+        <span className="text-content" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600 }}>
+          {formatDistance(overview.totalDistance / 1000, unit)}
+          {/* Still routing: the number is a partial sum, and saying so beats a total
+              that silently grows while you read it. */}
+          {overview.loading && <span className="text-content-muted" style={{ fontWeight: 400 }}>{' '}…</span>}
+        </span>
+      </div>
+      <div style={{ maxHeight: 220, overflowY: 'auto', borderTop: '1px solid var(--border-primary)' }}>
+        {overview.days.map(day => {
+          const label = day.title || t('dayplan.dayN', { n: day.dayNumber })
+          const row = (
+            <>
+              <span style={{ width: 8, height: 8, borderRadius: 999, background: day.color.line, flexShrink: 0 }} aria-hidden />
+              <span className="text-content" style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {label}
+              </span>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0 }} className="text-content-muted">
+                {day.modes.map(mode => {
+                  const Icon = profileIcon(mode)
+                  return <Icon key={mode} size={12} strokeWidth={2} aria-hidden />
+                })}
+              </span>
+              <span className="text-content-muted" style={{ flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>
+                {formatDistance(day.distance / 1000, unit)}
+              </span>
+            </>
+          )
+          const style = {
+            display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+            padding: '7px 14px', textAlign: 'left' as const,
+            fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+            background: day.dayId === selectedDayId ? 'var(--bg-hover)' : 'transparent',
+            border: 'none',
+          }
+          return onSelectDay ? (
+            <button key={day.dayId} type="button" onClick={() => onSelectDay(day.dayId)} style={{ ...style, cursor: 'pointer' }}>
+              {row}
+            </button>
+          ) : (
+            <div key={day.dayId} style={style}>{row}</div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
@@ -10,8 +10,17 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { render, waitFor } from '@testing-library/react'
 import type * as L from 'leaflet'
 import { maplibreGL as bridge } from '@maplibre/maplibre-gl-leaflet'
-import { VectorBasemap, attachVectorBasemap, hideLabelLayers, type GlLeafletLayer } from './VectorBasemap'
-import { OFM_POSITRON, OFM_DARK, OFM_ATTRIBUTION } from '../../constants/mapDefaults'
+import { hasWebGL } from '../../utils/webgl'
+import {
+  VectorBasemap,
+  attachVectorBasemap,
+  detachBasemapLayer,
+  hideLabelLayers,
+  restyleBasemap,
+  type BasemapLayer,
+  type GlLeafletLayer,
+} from './VectorBasemap'
+import { OFM_POSITRON, OFM_DARK, OFM_ATTRIBUTION, RASTER_FALLBACK_TILE_URL } from '../../constants/mapDefaults'

 const addAttribution = vi.fn()
 /** Only the two things the component touches; casting keeps the mock honest about that. */
@@ -20,7 +29,16 @@ const leafletMap = asMap({ attributionControl: { addAttribution } })
 /** A map built without an attribution control, like the atlas. */
 const bareMap = asMap({})

-vi.mock('react-leaflet', () => ({ useMap: () => leafletMap }))
+// TileLayer as well as useMap: the component renders one when the browser has no
+// WebGL, and jsdom is exactly such a browser.
+vi.mock('react-leaflet', () => ({
+  useMap: () => leafletMap,
+  TileLayer: ({ url }: { url: string }) => <div data-testid="raster-basemap" data-url={url} />,
+}))
+
+// jsdom has no WebGL, so without this every case below would take the raster
+// branch. The suite is about the GL wiring; the raster branch has its own cases.
+vi.mock('../../utils/webgl', () => ({ hasWebGL: vi.fn(() => true), resetWebGLProbe: vi.fn() }))
 vi.mock('./engines/maplibre', () => ({ default: { __engine: 'maplibre' } }))
 vi.mock('@maplibre/maplibre-gl-leaflet', () => {
  const maplibreGL = vi.fn(() => {
@@ -201,3 +219,91 @@ describe('hideLabelLayers', () => {
    expect(() => hideLabelLayers(layer)).not.toThrow()
  })
 })
+
+/**
+ * A browser that will not give MapLibre a WebGL context (#2288).
+ *
+ * Hardware acceleration off, a blocklisted driver, a VM or a remote desktop all
+ * land here. Before the probe, the throw came out of an async effect nobody could
+ * catch, and the layer it left behind took the page down on the way out.
+ */
+describe('VectorBasemap without WebGL', () => {
+  const noWebGL = vi.mocked(hasWebGL)
+
+  /** A map real Leaflet will accept, which the raster stand-in needs. */
+  const rasterMap = () => asMap({ addLayer: vi.fn(), attributionControl: { addAttribution } })
+
+  beforeEach(() => {
+    noWebGL.mockReturnValue(false)
+  })
+
+  it('FE-COMP-VECBM-013: draws raster tiles and never asks for the maplibre chunk', async () => {
+    // Not loading it is half the point: about a megabyte for a browser that could
+    // never have drawn it.
+    const { findByTestId } = render(<VectorBasemap style={OFM_POSITRON} />)
+
+    const tiles = await findByTestId('raster-basemap')
+    expect(tiles.getAttribute('data-url')).toBe(RASTER_FALLBACK_TILE_URL)
+    expect(maplibreGL).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-VECBM-014: unmounting is quiet, with nothing to take off the map', () => {
+    const { unmount } = render(<VectorBasemap style={OFM_POSITRON} />)
+    // The crash in #2288 came from teardown, not from the failed attach.
+    expect(() => unmount()).not.toThrow()
+  })
+
+  it('FE-COMP-VECBM-015: the imperative maps get the raster stand-in in their ref', async () => {
+    const ref: { current: BasemapLayer | null } = { current: null }
+    const map = rasterMap()
+
+    await attachVectorBasemap(map, OFM_POSITRON, ref, () => false)
+
+    expect(maplibreGL).not.toHaveBeenCalled()
+    expect(ref.current).not.toBeNull()
+    // OpenStreetMap rather than OpenFreeMap: different tiles, different credit.
+    expect(addAttribution).toHaveBeenCalledWith(expect.stringContaining('openstreetmap.org/copyright'))
+  })
+
+  it('FE-COMP-VECBM-016: a map torn down mid-probe still gets nothing', async () => {
+    const ref: { current: BasemapLayer | null } = { current: null }
+    await attachVectorBasemap(rasterMap(), OFM_POSITRON, ref, () => true)
+    expect(ref.current).toBeNull()
+  })
+
+  it('FE-COMP-VECBM-017: the raster stand-in ignores a restyle and a label sweep', async () => {
+    const ref: { current: BasemapLayer | null } = { current: null }
+    await attachVectorBasemap(rasterMap(), OFM_POSITRON, ref, () => false)
+
+    // Both are GL-only operations. Called on raster tiles they must do nothing
+    // rather than reach for a maplibre map that is not there.
+    expect(() => restyleBasemap(ref.current, OFM_DARK)).not.toThrow()
+    expect(() => hideLabelLayers(ref.current!)).not.toThrow()
+  })
+})
+
+describe('detachBasemapLayer', () => {
+  it('FE-COMP-VECBM-018: a GL layer whose context never came off cleanly anyway', () => {
+    // This is the crash from #2288 in one line: maplibre-gl-leaflet's onRemove
+    // calls this._glMap.remove() without asking whether there is one, and after a
+    // refused context there is not. It ran inside a React cleanup, so the throw
+    // reached a boundary and replaced the page.
+    const remove = vi.fn(function (this: { _glMap?: { remove: () => void } }) {
+      this._glMap!.remove()
+    })
+    const halfBuilt = { getMaplibreMap: () => undefined, remove } as unknown as GlLeafletLayer
+
+    expect(() => detachBasemapLayer(halfBuilt)).not.toThrow()
+    expect(remove).toHaveBeenCalled()
+  })
+
+  it('FE-COMP-VECBM-019: a layer that throws for any other reason is swallowed too', () => {
+    // Unmounting a map is never allowed to fail because its basemap did.
+    const layer = { remove: vi.fn(() => { throw new Error('boom') }) } as unknown as BasemapLayer
+    expect(() => detachBasemapLayer(layer)).not.toThrow()
+  })
+
+  it('FE-COMP-VECBM-020: nothing to detach is not an error', () => {
+    expect(() => detachBasemapLayer(null)).not.toThrow()
+  })
+})
@@ -1,12 +1,30 @@
-import { useEffect, useRef } from 'react'
-import { useMap } from 'react-leaflet'
-import type * as L from 'leaflet'
+import { useEffect, useRef, useState } from 'react'
+import { TileLayer, useMap } from 'react-leaflet'
+import L from 'leaflet'
 import type { MaplibreGL } from '@maplibre/maplibre-gl-leaflet'
-import { attributionForTile } from '../../constants/mapDefaults'
+import {
+  RASTER_FALLBACK_MAX_ZOOM,
+  RASTER_FALLBACK_TILE_URL,
+  attributionForTile,
+} from '../../constants/mapDefaults'
+import { hasWebGL } from '../../utils/webgl'
+import { isChunkLoadError, reloadOnceForChunk } from '../../utils/chunkReload'

 /** The Leaflet layer maplibre-gl-leaflet hands back. */
 export type GlLeafletLayer = InstanceType<typeof MaplibreGL>

+/**
+ * What a map ended up drawing with. Every caller keeps one ref for both kinds, so
+ * there is no code path that knows only about the GL layer and falls over the
+ * raster stand-in the moment a browser has no WebGL (#2288).
+ */
+export type BasemapLayer = GlLeafletLayer | L.TileLayer
+
+/** A GL layer rather than the raster stand-in. Prototype method, so `in` finds it. */
+function isGlLayer(layer: BasemapLayer): layer is GlLeafletLayer {
+  return 'getMaplibreMap' in layer
+}
+
 /**
 * Load the layer factory.
 *
@@ -28,11 +46,105 @@ async function loadLayerFactory() {
  return bridge.maplibreGL
 }

+/** The factory, or null when its chunk never arrived. A dead chunk is not the basemap's problem. */
+async function loadLayerFactoryOrNull() {
+  try {
+    return await loadLayerFactory()
+  } catch (err) {
+    // A chunk gone after a deploy is the global handler's case and heals itself
+    // with one reload; here it only means there is no GL layer to attach.
+    if (isChunkLoadError(err)) reloadOnceForChunk()
+    else console.warn('[basemap] the maplibre chunk did not load', err)
+    return null
+  }
+}
+
 /** Credit the basemap on a map that has an attribution control; a no-op on one that does not. */
 function creditBasemap(map: L.Map, style: string): void {
  map.attributionControl?.addAttribution(attributionForTile(style))
 }

+/**
+ * Make a half-built GL layer safe to take off a map.
+ *
+ * maplibre-gl-leaflet's onRemove calls `this._glMap.remove()` without asking
+ * whether there is one, and after a refused WebGL context there is not. That
+ * second throw is what turned a missing basemap into a crash: it lands in a React
+ * cleanup, where a boundary picks it up and replaces the page (#2288). A no-op
+ * stand-in lets the bridge run the rest of its own teardown, the pane child and
+ * the zoom-animation listener, and skip only the line that cannot work. A healthy
+ * layer already has a GL map and is left alone.
+ */
+function disarmGlLayer(layer: GlLeafletLayer): void {
+  const internals = layer as unknown as { _glMap?: { remove: () => void } | null }
+  if (!internals._glMap) internals._glMap = { remove: () => {} }
+}
+
+/**
+ * Hang a GL layer into a Leaflet map and say whether it took.
+ *
+ * maplibre-gl builds its WebGL context inside the Map constructor, which Leaflet
+ * reaches through onAdd, so `addTo` is where a browser without WebGL throws. The
+ * probe catches nearly every case; what is left is a context budget that ran out
+ * between probe and attach, which is real on a page holding several maps. Either
+ * way the layer has to come back off: Leaflet registers it before onAdd runs, so
+ * a broken one left behind is handed to the retile effect and to every later
+ * map.remove().
+ */
+function attachGlLayer(map: L.Map, layer: GlLeafletLayer, style: string): boolean {
+  try {
+    layer.addTo(map)
+  } catch (err) {
+    console.warn('[basemap] no WebGL context for the vector basemap, drawing raster tiles', err)
+    detachBasemapLayer(layer)
+    return false
+  }
+  creditBasemap(map, style)
+  return true
+}
+
+/**
+ * The raster stand-in, attached imperatively for the maps that build Leaflet
+ * themselves. The react-leaflet callers get the same tiles through the <TileLayer>
+ * below instead, the way they already draw a user's own raster template.
+ */
+function attachRasterFallback(map: L.Map): L.TileLayer {
+  const layer = L.tileLayer(RASTER_FALLBACK_TILE_URL, {
+    maxZoom: RASTER_FALLBACK_MAX_ZOOM,
+    referrerPolicy: 'strict-origin-when-cross-origin',
+  } as L.TileLayerOptions)
+  layer.addTo(map)
+  creditBasemap(map, RASTER_FALLBACK_TILE_URL)
+  return layer
+}
+
+/**
+ * Take a basemap off its map. Never throws: unmounting a map is not allowed to
+ * fail because its basemap did (#2288).
+ */
+export function detachBasemapLayer(layer: BasemapLayer | null | undefined): void {
+  if (!layer) return
+  if (isGlLayer(layer)) disarmGlLayer(layer)
+  try {
+    layer.remove()
+  } catch (err) {
+    console.warn('[basemap] teardown failed, leaving the layer where it is', err)
+  }
+}
+
+/**
+ * Retile in place. Swapping the layer would drop a WebGL context per theme
+ * toggle, and browsers cap those in the low teens.
+ *
+ * The raster stand-in has nothing to swap: it draws one template, and there is no
+ * keyless dark OSM raster to switch to, so a theme change leaves it alone rather
+ * than refetching the same tiles.
+ */
+export function restyleBasemap(layer: BasemapLayer | null | undefined, style: string): void {
+  if (!layer || !isGlLayer(layer)) return
+  layer.getMaplibreMap()?.setStyle(style)
+}
+
 /**
 * A MapLibre vector style as the basemap of a Leaflet map.
 *
@@ -40,21 +152,37 @@ function creditBasemap(map: L.Map, style: string): void {
 * watermark unless the operator has requested a key by mail, so the basemap of
 * every Leaflet map here is a style document rather than a tile template.
 * maplibre-gl-leaflet hangs a GL canvas into Leaflet's own tile pane, which
- * leaves everything above it alone: markers, GeoJSON, clusters, plugin layers
- * and the panes they live in are untouched, and Leaflet's CSS puts
+ * leaves everything above it alone: markers, GeoJSON, clusters, plugin layers and
+ * the panes they live in are untouched, and Leaflet's CSS puts
 * `pointer-events: none` on the layer's canvas, so clicks fall through to them.
+ *
+ * WebGL is not a given, though. Hardware acceleration switched off, a blocklisted
+ * driver, a VM or a remote desktop all end with maplibre-gl throwing out of its
+ * constructor, so the browser is asked first and gets raster tiles when the answer
+ * is no (#2288). Asking is also what keeps the maplibre chunk off the wire for a
+ * browser that could never have used it.
 */
-export function VectorBasemap({ style }: { style: string }): null {
+export function VectorBasemap({ style }: { style: string }) {
  const map = useMap()
  const layerRef = useRef<GlLeafletLayer | null>(null)
  const styleRef = useRef(style)
  styleRef.current = style
+  // State rather than a plain constant: the probe can say yes and the attach can
+  // still fail once the page has spent its context budget, and that has to reach
+  // the render or the raster tiles never appear.
+  const [glUsable, setGlUsable] = useState(hasWebGL)

  useEffect(() => {
+    if (!glUsable) return
    let cancelled = false
+
    void (async () => {
-      const maplibreGL = await loadLayerFactory()
+      const maplibreGL = await loadLayerFactoryOrNull()
      if (cancelled) return
+      if (!maplibreGL) {
+        setGlUsable(false)
+        return
+      }

      // The style is read through a ref, never from the dependency list: a style
      // change must retile in place rather than tear the layer down, the same
@@ -64,68 +192,106 @@ export function VectorBasemap({ style }: { style: string }): null {
        interactive: false,
        attributionControl: false,
      })
+      if (!attachGlLayer(map, layer, styleRef.current)) {
+        setGlUsable(false)
+        return
+      }
      layerRef.current = layer
-      layer.addTo(map)
-      creditBasemap(map, styleRef.current)
    })()

    return () => {
      cancelled = true
-      layerRef.current?.remove()
+      detachBasemapLayer(layerRef.current)
      layerRef.current = null
    }
-  }, [map])
+  }, [map, glUsable])

-  // Restyle in place. Swapping the layer would drop a WebGL context per theme
-  // toggle, and browsers cap those in the low teens.
  useEffect(() => {
-    layerRef.current?.getMaplibreMap()?.setStyle(style)
+    restyleBasemap(layerRef.current, style)
  }, [style])

+  // No WebGL, no vector tiles. Raster keeps the map readable instead of leaving
+  // markers, routes and clusters floating over grey; see mapDefaults for why this
+  // particular source. The satellite toggle in MapView was always raster and is
+  // unaffected either way.
+  if (!glUsable) {
+    return (
+      <TileLayer
+        key="webgl-fallback"
+        url={RASTER_FALLBACK_TILE_URL}
+        attribution={attributionForTile(RASTER_FALLBACK_TILE_URL)}
+        maxZoom={RASTER_FALLBACK_MAX_ZOOM}
+        keepBuffer={8}
+        updateWhenZooming={false}
+        updateWhenIdle={true}
+        referrerPolicy="strict-origin-when-cross-origin"
+      />
+    )
+  }
  return null
 }

 export default VectorBasemap

 /**
- * The same layer for the maps that build Leaflet imperatively rather than
+ * The same basemap for the maps that build Leaflet imperatively rather than
 * through react-leaflet: the journey map and the atlas.
 *
- * Loading is async because maplibre-gl only ever arrives through a dynamic
- * import, so the caller passes a `cancelled` probe: a map torn down mid-load
- * must not get a layer attached to it afterwards.
+ * Loading is async because maplibre-gl only ever arrives through a dynamic import,
+ * so the caller passes a `cancelled` probe: a map torn down mid-load must not get
+ * a layer attached to it afterwards. What lands in `ref` is either the GL layer or
+ * the raster stand-in, which is why callers go through restyleBasemap() and
+ * detachBasemapLayer() rather than reaching for getMaplibreMap() themselves.
 */
 export async function attachVectorBasemap(
  map: L.Map,
  style: string,
-  ref: { current: GlLeafletLayer | null },
+  ref: { current: BasemapLayer | null },
  cancelled: () => boolean,
  opts: { hideLabels?: boolean } = {},
 ): Promise<void> {
-  const maplibreGL = await loadLayerFactory()
+  // Same gate as the component: a browser without WebGL never pays for the
+  // maplibre chunk and gets raster tiles rather than an empty map (#2288).
+  if (!hasWebGL()) {
+    if (!cancelled()) ref.current = attachRasterFallback(map)
+    return
+  }
+
+  const maplibreGL = await loadLayerFactoryOrNull()
  if (cancelled()) return
+  if (!maplibreGL) {
+    ref.current = attachRasterFallback(map)
+    return
+  }

  const layer = maplibreGL({ style, interactive: false, attributionControl: false })
-  ref.current = layer
-  layer.addTo(map)
  // The raster layer this replaces carried the credit, and OpenFreeMap asks for
-  // one of its own.
-  creditBasemap(map, style)
+  // one of its own; attachGlLayer adds it once the layer is actually on the map.
+  if (!attachGlLayer(map, layer, style)) {
+    ref.current = attachRasterFallback(map)
+    return
+  }
+  ref.current = layer
  if (opts.hideLabels) hideLabelLayers(layer)
 }

 /**
 * Drop every label from a vector style.
 *
- * The atlas draws country names into its own fills, so a basemap that repeats
- * them underneath is noise. OpenFreeMap has no label-free style, but its labels
- * are all `symbol` layers, while borders and coastlines are `line` and `fill`,
- * so hiding that one type leaves the geography intact.
+ * The atlas draws country names into its own fills, so a basemap that repeats them
+ * underneath is noise. OpenFreeMap has no label-free style, but its labels are all
+ * `symbol` layers, while borders and coastlines are `line` and `fill`, so hiding
+ * that one type leaves the geography intact.
 *
 * Bound to `style.load` rather than run once: the event fires again after every
 * setStyle, so a theme switch keeps the labels off without a second call site.
 */
-export function hideLabelLayers(layer: GlLeafletLayer): void {
+export function hideLabelLayers(layer: BasemapLayer): void {
+  // Nothing to hide on the raster stand-in: OSM bakes its labels into the tile.
+  // A WebGL-less atlas therefore shows country names twice, which is cosmetic and
+  // the price of having a basemap at all, because the only keyless alternative is
+  // none.
+  if (!isGlLayer(layer)) return
  const gl = layer.getMaplibreMap()
  if (!gl) return
  const apply = () => {
@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest'
+import { buildDayRouteRuns } from './dayRoutePlan'
+import { buildAssignment, buildDay, buildPlace } from '../../../tests/helpers/factories'
+import type { Accommodation, AssignmentsMap, Day, Reservation } from '../../types'
+
+const at = (lat: number, lng: number, order: number, extra: Record<string, unknown> = {}) =>
+  buildAssignment({ day_id: 1, order_index: order, place: buildPlace({ lat, lng }), ...extra })
+
+const inputs = (over: Partial<{
+  days: Day[]; assignments: AssignmentsMap; reservations: Reservation[]
+  accommodations: Accommodation[]; optimizeFromAccommodation: boolean | undefined
+}> = {}) => ({
+  days: [buildDay({ id: 1, day_number: 1 })],
+  assignments: {},
+  reservations: [],
+  accommodations: [],
+  optimizeFromAccommodation: false,
+  ...over,
+})
+
+describe('buildDayRouteRuns', () => {
+  it('FE-MAP-DRP-001: orders a day\'s located stops into one run', () => {
+    const runs = buildDayRouteRuns(1, inputs({
+      assignments: { '1': [at(48.86, 2.35, 1), at(45.76, 4.83, 0)] },
+    }))
+
+    expect(runs).toHaveLength(1)
+    // order_index, not the order they happen to sit in the array.
+    expect(runs[0].map(p => p.lat)).toEqual([45.76, 48.86])
+    expect(runs[0].every(p => p.isPlace)).toBe(true)
+  })
+
+  it('FE-MAP-DRP-002: drops a stop with no coordinates', () => {
+    const runs = buildDayRouteRuns(1, inputs({
+      assignments: {
+        '1': [
+          at(48.86, 2.35, 0),
+          buildAssignment({ day_id: 1, order_index: 1, place: buildPlace({ lat: null, lng: null }) }),
+          at(45.76, 4.83, 2),
+        ],
+      },
+    }))
+
+    expect(runs[0]).toHaveLength(2)
+  })
+
+  it('FE-MAP-DRP-003: a lone stop is no drive at all', () => {
+    expect(buildDayRouteRuns(1, inputs({ assignments: { '1': [at(48.86, 2.35, 0)] } }))).toEqual([])
+  })
+
+  it('FE-MAP-DRP-004: carries the per-leg travel modes the router resolves against', () => {
+    const runs = buildDayRouteRuns(1, inputs({
+      assignments: {
+        '1': [
+          at(48.86, 2.35, 0, { leg_transport_mode: 'walking' }),
+          at(48.88, 2.36, 1, { incoming_leg_transport_mode: 'cycling' }),
+        ],
+      },
+    }))
+
+    expect(runs[0][0].leg_transport_mode).toBe('walking')
+    expect(runs[0][1].incoming_leg_transport_mode).toBe('cycling')
+  })
+
+  it('FE-MAP-DRP-005: two real places stay one run however far apart they are', () => {
+    // Paris → Tokyo is far past MAX_DRIVE_KM, but both are real places someone
+    // planned, so the run stands: the reachability guard only ever splits a leg
+    // that touches a booking endpoint (#2133).
+    const runs = buildDayRouteRuns(1, inputs({
+      assignments: { '1': [at(48.86, 2.35, 0), at(35.68, 139.69, 1)] },
+    }))
+
+    expect(runs).toHaveLength(1)
+  })
+
+  it('FE-MAP-DRP-006: bookends the day with its accommodation when the setting is on', () => {
+    const accommodation = {
+      id: 1, trip_id: 1, place_lat: 48.80, place_lng: 2.30,
+      start_day_id: 1, end_day_id: 1,
+    } as unknown as Accommodation
+    const runs = buildDayRouteRuns(1, inputs({
+      assignments: { '1': [at(48.86, 2.35, 0), at(48.88, 2.36, 1)] },
+      accommodations: [accommodation],
+      optimizeFromAccommodation: true,
+    }))
+
+    const flat = runs.flat()
+    expect(flat.some(p => p.lat === 48.80 && !p.isPlace)).toBe(true)
+  })
+
+  it('FE-MAP-DRP-007: leaves the hotel out when the setting is off', () => {
+    const accommodation = {
+      id: 1, trip_id: 1, place_lat: 48.80, place_lng: 2.30,
+      start_day_id: 1, end_day_id: 1,
+    } as unknown as Accommodation
+    const runs = buildDayRouteRuns(1, inputs({
+      assignments: { '1': [at(48.86, 2.35, 0), at(48.88, 2.36, 1)] },
+      accommodations: [accommodation],
+      optimizeFromAccommodation: false,
+    }))
+
+    expect(runs.flat().some(p => p.lat === 48.80)).toBe(false)
+  })
+
+  it('FE-MAP-DRP-008: a day that is not in the trip has no route', () => {
+    expect(buildDayRouteRuns(99, inputs({ assignments: { '1': [at(48.86, 2.35, 0)] } }))).toEqual([])
+  })
+})
@@ -0,0 +1,169 @@
+import { withHotelBookends } from './RouteCalculator'
+import { getTransportRouteEndpoints, getTransportForDay, getMergedItems, isCarrierTransport, hasCarrierEndpointOnDay } from '../../utils/dayMerge'
+import { getDayBookendHotels, shouldDrawMorningLeg, shouldDrawEveningLeg, type CarrierEdge } from '../../utils/dayOrder'
+import { withinDriveRange } from '../../utils/geo'
+import type { Accommodation, AssignmentsMap, Day, Reservation } from '../../types'
+
+export const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transit', 'transport_other']
+
+/** A waypoint on a day's drive, carrying the per-leg modes `resolveLegMode` reads off it. */
+export interface DayRoutePoint {
+  lat: number
+  lng: number
+  isPlace: boolean
+  leg_transport_mode?: string | null
+  incoming_leg_transport_mode?: string | null
+}
+
+/** Everything the plan depends on, passed in rather than read from the store, so the
+ *  builder stays pure and one caller can run it over every day of a trip at once. */
+export interface DayRouteInputs {
+  days: Day[]
+  assignments: AssignmentsMap
+  reservations: Reservation[]
+  accommodations: Accommodation[]
+  optimizeFromAccommodation: boolean | undefined
+}
+
+/**
+ * The runs of waypoints a day's route is drawn from, hotel bookends folded in.
+ *
+ * Lifted out of `useRouteCalculation` unchanged so the trip-wide overview draws the
+ * same line the day view does. Every rule below is load-bearing and issue-numbered —
+ * a second copy of it would drift the moment either surface got the next fix.
+ */
+export function buildDayRouteRuns(dayId: number, input: DayRouteInputs): DayRoutePoint[][] {
+  const { days: allDays, assignments, reservations: allReservations, accommodations, optimizeFromAccommodation } = input
+  const da = (assignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index)
+  const dayOrder = (id: number | null | undefined): number | null => {
+    if (id == null) return null
+    const d = allDays.find(x => x.id === id)
+    return d ? (d.day_number ?? allDays.indexOf(d)) : null
+  }
+  const thisOrder = dayOrder(dayId)
+
+  // The order the day plan shows is the order the map has to draw, so take it from
+  // the same place the plan does rather than rebuilding it here. getTransportForDay
+  // brings the span filter, the hotel/assignment exclusions and the leg expansion with
+  // it; getMergedItems places each leg by its own saved position, falling back to its
+  // time. Notes carry no coordinates, so none are passed.
+  const dayTransports = thisOrder == null ? [] : getTransportForDay({
+    reservations: allReservations.filter(r => TRANSPORT_TYPES.includes(r.type)),
+    dayId,
+    dayAssignmentIds: da.map(a => a.id),
+    days: allDays,
+  })
+  const merged = getMergedItems({ dayAssignments: da, dayNotes: [], dayTransports, dayId })
+
+  type Entry =
+    | { kind: 'place'; lat: number; lng: number; pos: number; time: string | null; mode: string | null; incoming: string | null }
+    | { kind: 'transport'; from: { lat: number; lng: number } | null; to: { lat: number; lng: number } | null; pos: number; carrier: boolean }
+  const entries: Entry[] = merged.flatMap((item): Entry[] => {
+    if (item.type === 'place') {
+      const a = item.data
+      if (!a.place?.lat || !a.place?.lng) return []
+      return [{
+        kind: 'place', lat: a.place.lat, lng: a.place.lng, pos: item.sortKey, time: a.place?.place_time ?? null,
+        // Per-segment travel mode (#1281): mode of the leg leaving this place.
+        mode: (a as { leg_transport_mode?: string | null }).leg_transport_mode ?? null,
+        // Boundary-leg mode (#1281 follow-up): mode of the leg arriving at this place.
+        incoming: (a as { incoming_leg_transport_mode?: string | null }).incoming_leg_transport_mode ?? null,
+      }]
+    }
+    if (item.type !== 'transport') return []
+    const { from, to } = getTransportRouteEndpoints(item.data, dayId)
+    return [{ kind: 'transport', from, to, pos: item.sortKey, carrier: isCarrierTransport(item.data) }]
+  })
+
+  // Group located places into driving runs. A transport WITH a location anchors the
+  // route to its departure point then breaks the run (you don't drive the flight); its
+  // arrival starts the next. A transport WITHOUT a location is ignored entirely. A run
+  // is only a real drive when it contains at least one actual place, or two back-to-back
+  // transports pair into a phantom [airport → airport] road route (#1394). A booking
+  // endpoint also has to be REACHABLE from the stop before it, or a long-haul arrival
+  // sorted in among the day's local stops gets stapled to one of them (#2133).
+  const runs: DayRoutePoint[][] = []
+  let currentRun: DayRoutePoint[] = []
+  let runHasPlace = false
+  const closeRun = () => {
+    if (currentRun.length >= 2 && runHasPlace) runs.push(currentRun)
+    currentRun = []
+    runHasPlace = false
+  }
+  for (const entry of entries) {
+    if (entry.kind === 'place') {
+      const prev = currentRun[currentRun.length - 1]
+      // The open run may be nothing but a far-away arrival endpoint — break rather
+      // than draw the ocean.
+      if (prev && !prev.isPlace && !withinDriveRange(prev, entry)) closeRun()
+      currentRun.push({ lat: entry.lat, lng: entry.lng, isPlace: true, leg_transport_mode: entry.mode, incoming_leg_transport_mode: entry.incoming })
+      runHasPlace = true
+    } else if (entry.from || entry.to) {
+      const prev = currentRun[currentRun.length - 1]
+      if (entry.from && (!prev || withinDriveRange(prev, entry.from))) currentRun.push({ ...entry.from, isPlace: false })
+      closeRun()
+      if (entry.to) currentRun.push({ ...entry.to, isPlace: false })
+    }
+  }
+  closeRun()
+
+  // Bookend the route with the day's accommodation, so the drawn line matches the
+  // sidebar's hotel legs.
+  const day = allDays.find(d => d.id === dayId)
+  const bookends = day && optimizeFromAccommodation !== false
+    ? getDayBookendHotels(day, allDays, accommodations)
+    : null
+  const flatPts: DayRoutePoint[] = []
+  for (const e of entries) {
+    if (e.kind === 'place') flatPts.push({ lat: e.lat, lng: e.lng, isPlace: true, leg_transport_mode: e.mode, incoming_leg_transport_mode: e.incoming })
+    else { if (e.from) flatPts.push({ ...e.from, isPlace: false }); if (e.to) flatPts.push({ ...e.to, isPlace: false }) }
+  }
+  // A hotel bookend point is not a place-assignment, so isPlace: false — resolveLegMode
+  // falls through to the day default for hotel-adjacent legs unless the place endpoint
+  // carries its own override.
+  const hotelPt = (a?: Accommodation): DayRoutePoint | null =>
+    a && a.place_lat != null && a.place_lng != null ? { lat: a.place_lat, lng: a.place_lng, isPlace: false } : null
+  // Only draw a hotel bookend when the leg is a real drive: a place before check-in
+  // (#1465), a later "home" stop on the checkout day (#1465), or a transport endpoint on
+  // an arrival/departure day (#1321, #2133) all draw no bookend.
+  const contributes = (e: Entry) => e.kind === 'place' || !!e.from || !!e.to
+  const firstStop = entries.find(contributes)
+  const lastStop = [...entries].reverse().find(contributes)
+  const edgeInfo = (e: Entry | undefined, side: 'first' | 'last') => {
+    if (!e) return undefined
+    if (e.kind === 'place') return { isPlace: true, time: e.time, lat: e.lat, lng: e.lng }
+    const role: CarrierEdge = side === 'first'
+      ? (e.from ? 'departure' : 'arrival')
+      : (e.to ? 'arrival' : 'departure')
+    return { isPlace: false, time: null, carrierEdge: e.carrier ? role : null }
+  }
+  // A carrier with a located endpoint today means the day changes geography by
+  // air/rail/sea — the check-in hotel is then the day's destination and the
+  // check-out hotel its origin, which the no-time bookend default respects (#2157).
+  const dayHasCarrier = dayTransports.some(r => hasCarrierEndpointOnDay(r, dayId))
+  const firstWay = flatPts[0]
+  const lastWay = flatPts[flatPts.length - 1]
+  const morningHotel = hotelPt(bookends?.morning)
+  const eveningHotel = hotelPt(bookends?.evening)
+  const drawMorning = !!bookends && !!day && shouldDrawMorningLeg(bookends, day, edgeInfo(firstStop, 'first'), dayHasCarrier)
+    && (!morningHotel || !firstWay || firstWay.isPlace || withinDriveRange(morningHotel, firstWay))
+  const drawEvening = !!bookends && !!day && shouldDrawEveningLeg(bookends, day, edgeInfo(lastStop, 'last'), dayHasCarrier)
+    && (!eveningHotel || !lastWay || lastWay.isPlace || withinDriveRange(eveningHotel, lastWay))
+  const runsWithHotel: DayRoutePoint[][] = withHotelBookends(
+    runs,
+    firstWay,
+    lastWay,
+    drawMorning ? morningHotel : null,
+    drawEvening ? eveningHotel : null,
+  )
+
+  // Transfer day with no activities: you check out of one accommodation and into
+  // another, so there are no waypoints for withHotelBookends to attach a leg to.
+  if (runsWithHotel.length === 0 && drawMorning && drawEvening) {
+    const m = hotelPt(bookends?.morning)
+    const e = hotelPt(bookends?.evening)
+    if (m && e && (m.lat !== e.lat || m.lng !== e.lng)) runsWithHotel.push([m, e])
+  }
+
+  return runsWithHotel
+}
@@ -1,5 +1,7 @@
 import mapboxgl from 'mapbox-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import rtlTextPluginUrl from '@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js?url'
+import { registerRtlTextPlugin } from '../rtlText'

 /**
 * The only module in the client that pulls mapbox-gl in at runtime.
@@ -8,4 +10,8 @@ import 'mapbox-gl/dist/mapbox-gl.css'
 * a static import from anywhere in the tree drags 1.8 MB into the parent chunk and
 * quietly undoes the split. `npm run check:gl-split` fails on that.
 */
+// Arabic/Hebrew/Persian labels come out unjoined and reversed without this.
+// Mapbox's signature is (url, callback, deferred) — see rtlText.ts.
+registerRtlTextPlugin(() => mapboxgl.setRTLTextPlugin(rtlTextPluginUrl, null, true))
+
 export default mapboxgl
@@ -1,5 +1,7 @@
 import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
+import rtlTextPluginUrl from '@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js?url'
+import { registerRtlTextPlugin } from '../rtlText'

 /**
 * The only module in the client that pulls maplibre-gl in at runtime. Same rule as
@@ -10,4 +12,8 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 * stay engine-agnostic. Where the two genuinely differ, the caller already guards
 * on the provider (projection, accessToken, aroundCenter).
 */
+// Arabic/Hebrew/Persian labels come out unjoined and reversed without this.
+// MapLibre's signature is (url, lazy) and it resolves a promise — see rtlText.ts.
+registerRtlTextPlugin(() => maplibregl.setRTLTextPlugin(rtlTextPluginUrl, true))
+
 export default maplibregl
@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+/**
+ * The two lines this fix actually adds. Everything else is a helper: the guard in
+ * rtlText.ts has its own tests, but a guard nobody calls looks exactly like a
+ * working fix from the outside. Deleting either registration, swapping an
+ * argument or dropping the deferred flag left the whole suite green.
+ *
+ * The engines are mocked because importing them for real builds a worker pool
+ * under jsdom, and the plugin URL is mocked so the 133 KB payload never loads.
+ */
+const { mapboxSet, maplibreSet } = vi.hoisted(() => ({
+  mapboxSet: vi.fn(),
+  maplibreSet: vi.fn(),
+}));
+
+vi.mock('mapbox-gl', () => ({ default: { setRTLTextPlugin: mapboxSet } }));
+vi.mock('maplibre-gl', () => ({ default: { setRTLTextPlugin: maplibreSet } }));
+vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}));
+vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}));
+vi.mock('@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js?url', () => ({ default: '/assets/rtl-plugin.js' }));
+
+beforeEach(() => {
+  vi.resetModules();
+  mapboxSet.mockReset();
+  maplibreSet.mockReset();
+});
+
+describe('the GL engines register the RTL text plugin (#2235)', () => {
+  it('FE-MAP-RTL-001: importing the mapbox engine registers it deferred, with a null callback', async () => {
+    await import('./mapbox');
+
+    expect(mapboxSet).toHaveBeenCalledTimes(1);
+    // Mapbox GL 3 takes (url, callback, deferred). The third argument is what
+    // keeps the payload off the wire until a map paints RTL text; dropping it
+    // would fetch 133 KB for every user on every map.
+    expect(mapboxSet).toHaveBeenCalledWith(expect.stringContaining('rtl'), null, true);
+  });
+
+  it('FE-MAP-RTL-002: importing the maplibre engine registers it lazily', async () => {
+    await import('./maplibre');
+
+    expect(maplibreSet).toHaveBeenCalledTimes(1);
+    // MapLibre 5 takes (url, lazy) and returns a promise, which is the reason
+    // the call stays with each engine instead of going through one wrapper.
+    expect(maplibreSet).toHaveBeenCalledWith(expect.stringContaining('rtl'), true);
+  });
+
+  it('FE-MAP-RTL-003: an engine still loads when its registration throws', async () => {
+    mapboxSet.mockImplementation(() => { throw new Error('already registered'); });
+
+    const engine = await import('./mapbox');
+
+    expect(engine.default).toBeDefined();
+  });
+
+  it('FE-MAP-RTL-004: a rejected registration promise does not surface as an unhandled rejection', async () => {
+    maplibreSet.mockReturnValue(Promise.reject(new Error('already registered')));
+
+    const engine = await import('./maplibre');
+
+    expect(engine.default).toBeDefined();
+    // Give the rejection a tick to go unhandled if nothing caught it.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+});
@@ -0,0 +1,10 @@
+/**
+ * The drop shadow every floating map control carries.
+ *
+ * Tighter and darker than `--sidebar-shadow`, which is built for a panel resting on
+ * the app background: over map tiles its 0.10 alpha spread over 32px all but
+ * disappears, so a round control read as painted onto the map rather than floating
+ * above it. This is the locate button's shadow, which was always the odd one out for
+ * exactly that reason — the others were the ones that needed to match it.
+ */
+export const MAP_CONTROL_SHADOW = '0 2px 10px rgba(0,0,0,0.25)'
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { makeMarkerDraggable } from './markerDrag'
+import { makeMarkerDraggable, makePoiDraggable, draggedPoiId } from './markerDrag'

 /**
 * jsdom has no drag implementation, so these drive the events the browser would
@@ -82,3 +82,93 @@ describe('makeMarkerDraggable', () => {
    expect(window.__dragData).toBeNull()
  })
 })
+
+describe('makePoiDraggable', () => {
+  afterEach(() => {
+    window.__dragData = null
+    document.body.classList.remove('dragging-poi')
+  })
+
+  const dragEvent = (type: string) => {
+    const e = new Event(type, { bubbles: true, cancelable: true }) as DragEvent & { dataTransfer: DataTransfer }
+    const store: Record<string, string> = {}
+    Object.defineProperty(e, 'dataTransfer', {
+      value: {
+        setData: (k: string, v: string) => { store[k] = v },
+        getData: (k: string) => store[k] ?? '',
+        effectAllowed: '',
+        dropEffect: '',
+      },
+    })
+    return e
+  }
+
+  it('FE-MAP-POIDRAG-001: a hit carries its OSM id, not a place id — it is not a place yet', () => {
+    const el = document.createElement('div')
+    makePoiDraggable(el, 'node:9')
+    expect(el.getAttribute('draggable')).toBe('true')
+
+    const e = dragEvent('dragstart')
+    el.dispatchEvent(e)
+
+    expect(e.dataTransfer.getData('poiOsmId')).toBe('node:9')
+    // Mirrored on window because dataTransfer is unreadable during dragover, and the
+    // map has to know what is coming while it is still being hovered.
+    expect(window.__dragData).toEqual({ poiOsmId: 'node:9' })
+  })
+
+  it('FE-MAP-POIDRAG-002: the drag marks the body, so the route can light up while it lasts', () => {
+    const el = document.createElement('div')
+    makePoiDraggable(el, 'node:9')
+
+    el.dispatchEvent(dragEvent('dragstart'))
+    expect(document.body.classList.contains('dragging-poi')).toBe(true)
+
+    el.dispatchEvent(dragEvent('dragend'))
+    expect(document.body.classList.contains('dragging-poi')).toBe(false)
+    expect(window.__dragData).toBeNull()
+  })
+
+  it('FE-MAP-POIDRAG-003: mousedown is swallowed, or the map pans out from under the drag', () => {
+    const el = document.createElement('div')
+    makePoiDraggable(el, 'node:9')
+    const down = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+    const seen = vi.fn()
+    document.body.appendChild(el)
+    document.body.addEventListener('mousedown', seen)
+
+    el.dispatchEvent(down)
+
+    expect(seen).not.toHaveBeenCalled()
+    document.body.removeEventListener('mousedown', seen)
+    el.remove()
+  })
+
+  it('FE-MAP-POIDRAG-004: unwiring leaves the element as it was found', () => {
+    const el = document.createElement('div')
+    const off = makePoiDraggable(el, 'node:9')
+    off()
+
+    expect(el.hasAttribute('draggable')).toBe(false)
+    el.dispatchEvent(dragEvent('dragstart'))
+    expect(window.__dragData).toBeNull()
+  })
+
+  it('FE-MAP-POIDRAG-005: the id is readable from the event, and from the mirror during a hover', () => {
+    const el = document.createElement('div')
+    makePoiDraggable(el, 'node:9')
+    const start = dragEvent('dragstart')
+    el.dispatchEvent(start)
+
+    expect(draggedPoiId(start)).toBe('node:9')
+
+    // A dragover event carries an unreadable dataTransfer; the mirror answers instead.
+    const over = new Event('dragover') as DragEvent
+    expect(draggedPoiId(over)).toBe('node:9')
+  })
+
+  it('FE-MAP-POIDRAG-006: an unrelated drag is not mistaken for a hit', () => {
+    const over = new Event('dragover') as DragEvent
+    expect(draggedPoiId(over)).toBeNull()
+  })
+})
@@ -48,3 +48,51 @@ export function makeMarkerDraggable(el: HTMLElement, placeId: number): () => voi
    el.removeEventListener('mousedown', onMouseDown)
  }
 }
+
+/**
+ * Wire a corridor hit up as a drag source, so it can be dropped onto the drive.
+ *
+ * The same HTML5 drag as `makeMarkerDraggable`, with the OSM id as payload instead of a
+ * place id — a corridor hit is not a place yet. The drop target is the map itself rather
+ * than the drawn line: a route polyline is a real element only in Leaflet (the GL
+ * renderers draw it into the canvas), and the drop coordinate answers "where on the drive"
+ * just as well once it is projected onto the routed geometry.
+ */
+export function makePoiDraggable(el: HTMLElement, osmId: string): () => void {
+  el.setAttribute('draggable', 'true')
+
+  const onDragStart = (e: DragEvent) => {
+    e.dataTransfer?.setData('poiOsmId', osmId)
+    if (e.dataTransfer) e.dataTransfer.effectAllowed = 'copy'
+    window.__dragData = { poiOsmId: osmId }
+    el.classList.add('marker-dragging')
+    document.body.classList.add('dragging-poi')
+  }
+  const onDragEnd = () => {
+    window.__dragData = null
+    el.classList.remove('marker-dragging')
+    document.body.classList.remove('dragging-poi')
+  }
+  // Same reason as above: without this the map pans out from under the pointer as the
+  // drag begins, and the route is impossible to aim at.
+  const onMouseDown = (e: MouseEvent) => e.stopPropagation()
+
+  el.addEventListener('dragstart', onDragStart)
+  el.addEventListener('dragend', onDragEnd)
+  el.addEventListener('mousedown', onMouseDown)
+
+  return () => {
+    el.removeAttribute('draggable')
+    el.removeEventListener('dragstart', onDragStart)
+    el.removeEventListener('dragend', onDragEnd)
+    el.removeEventListener('mousedown', onMouseDown)
+  }
+}
+
+/** The OSM id being dragged, when a corridor hit is in flight. */
+export function draggedPoiId(e: DragEvent): string | null {
+  const fromTransfer = e.dataTransfer?.getData('poiOsmId')
+  if (fromTransfer) return fromTransfer
+  // dataTransfer is unreadable during dragover, so the window mirror answers instead.
+  return window.__dragData?.poiOsmId ?? null
+}
@@ -1,4 +1,8 @@
-import { Utensils, Coffee, Wine, BedDouble, Camera, Landmark, Trees, Ticket, type LucideIcon } from 'lucide-react'
+import { Utensils, Coffee, Wine, BedDouble, Camera, Landmark, Trees, Ticket, Fuel, Zap, ParkingSquare, Tent, type LucideIcon } from 'lucide-react'
+// The road-trip kinds take their colour from the one place that defines it, so the
+// search result, the map pin and the road-trip rail cannot drift apart.
+import { SERVICE_COLORS } from '../Roadtrip/roadtripModel'
+import { CORRIDOR_CATEGORIES, HOTEL_COLOR } from '../Roadtrip/stopKinds'

 // The POI categories shown in the map "explore" pill. The `key` is the contract
 // with the server (CATEGORY_OSM_FILTERS in mapsService.ts) — the OSM tag mapping
@@ -15,15 +19,27 @@ export const POI_CATEGORIES: PoiCategory[] = [
  { key: 'restaurant', labelKey: 'poi.cat.restaurants', Icon: Utensils, color: '#EF4444' },
  { key: 'cafe', labelKey: 'poi.cat.cafes', Icon: Coffee, color: '#B45309' },
  { key: 'bar', labelKey: 'poi.cat.bars', Icon: Wine, color: '#A855F7' },
-  { key: 'hotel', labelKey: 'poi.cat.hotels', Icon: BedDouble, color: '#2563EB' },
+  // The colour lives with the road-trip categories, because the corridor search offers
+  // the same one and two definitions of a blue is how they drift apart.
+  { key: 'hotel', labelKey: 'poi.cat.hotels', Icon: BedDouble, color: HOTEL_COLOR },
  { key: 'sights', labelKey: 'poi.cat.sights', Icon: Camera, color: '#EC4899' },
  { key: 'museum', labelKey: 'poi.cat.museums', Icon: Landmark, color: '#6366F1' },
  { key: 'nature', labelKey: 'poi.cat.nature', Icon: Trees, color: '#16A34A' },
  { key: 'activity', labelKey: 'poi.cat.activities', Icon: Ticket, color: '#F59E0B' },
 ]

+/**
+ * What a drive needs. Kept out of POI_CATEGORIES on purpose: these are not offered by
+ * the explore pill, they are what the road trip corridor searches for. They are in the
+ * lookup below all the same, so a hit drawn on the map gets its own icon and colour
+ * instead of the nameless grey dot an unknown category falls back to.
+ */
+export const ROADTRIP_POI_CATEGORIES: PoiCategory[] = CORRIDOR_CATEGORIES.map(
+  ({ key, labelKey, Icon, color }) => ({ key, labelKey, Icon, color }),
+)
+
 export const POI_CATEGORY_BY_KEY: Record<string, PoiCategory> = Object.fromEntries(
-  POI_CATEGORIES.map(c => [c.key, c]),
+  [...POI_CATEGORIES, ...ROADTRIP_POI_CATEGORIES].map(c => [c.key, c]),
 )

 // One POI result from /api/maps/pois (mirror of the server's OverpassPoi).
@@ -34,10 +50,25 @@ export interface Poi {
  lng: number
  category: string
  poi_type: string
+  /** Brand name and its Wikidata id, when OSM carries them (road categories mostly do). */
+  brand?: string | null
+  brand_wikidata?: string | null
  address: string | null
  website: string | null
  phone: string | null
  opening_hours: string | null
  cuisine: string | null
+  /**
+   * What a charging station offers, when it is one and OSM says so.
+   *
+   * Optional twice over: only charging hits carry it at all, and OSM knows a socket type
+   * for roughly a third of them, a capacity for about seven in ten. "Not stated" is its
+   * own answer here and must not be read as a no.
+   */
+  charging?: {
+    sockets: { type: string; count: number | null; kw: number | null }[]
+    capacity: number | null
+    fee: boolean | null
+  } | null
  source: 'openstreetmap'
 }
@@ -613,6 +613,26 @@ describe('ReservationMapboxOverlay declutter floors', () => {
    attach(wide, labelled).update([hop(2, 'cruise', 0.4)], labelled)
    expect(glMarkers.map(m => m.el.textContent)).toEqual(['GOA', 'PMI'])
  })
+
+  it('FE-COMP-RESGL-043: a routed drive whose ends project close together still draws (#2275)', () => {
+    // 50 px between the ends, under the 80 px car floor; the road loops out 300 px.
+    const road: [number, number][] = [[48, 16], [48.3, 16.1], [48.3, 16.3], [48.05, 16]]
+    const bare = freshMap()
+    attach(bare).update([hop(7, 'car', 0.05)], opts)
+    expect(features(bare)).toHaveLength(0)
+
+    const routed = freshMap()
+    attach(routed).update([hop(7, 'car', 0.05)], opts, new Map([[7, road]]))
+    expect(features(routed)).toHaveLength(1)
+    expect(features(routed)[0].geometry.coordinates).toEqual(road.map(([lat, lng]) => [lng, lat]))
+  })
+
+  it('FE-COMP-RESGL-044: a routed drive that really is tiny on screen stays decluttered', () => {
+    const road: [number, number][] = [[48, 16], [48.01, 16.01], [48.02, 16.02], [48.03, 16]]
+    const map = freshMap()
+    attach(map).update([hop(7, 'car', 0.03)], opts, new Map([[7, road]]))
+    expect(features(map)).toHaveLength(0)
+  })
 })

 describe('ReservationMapboxOverlay waypoint edge cases', () => {
--- a/Show More
+++ b/Show More