fix(llm): stop the browser autofilling the LLM base URL (#1301)

The AI-parsing base URL and model inputs had no autoComplete, so a
browser password manager could drop the saved login email into the
base URL field. In the admin addon config onBlur then fired a model
lookup against e.g. "admin@trek.local", which the server rejected
with 400. Mark the base URL and model inputs as type=url /
autoComplete=off in both the admin addon config and the per-user
connection section.

.dockerignore

@@ -30,8 +30,8 @@ Thumbs.db
 sonar-project.properties
 server/tests/
 server/vitest.config.ts
-server/reset-admin.js
 **/*.test.ts
+**/*.spec.ts
 wiki/
 scripts/
 charts/

.github/workflows/security.yml

@@ -34,4 +34,5 @@ jobs:
           command: cves
           image: trek:scan
           only-severities: critical,high
+          only-fixed: true
           exit-code: true

Dockerfile

@@ -1,3 +1,10 @@
+# ── Stage 0: gosu ────────────────────────────────────────────────────────────
+# Rebuild gosu with a current Go toolchain so the runtime image ships no stale
+# Go stdlib (Debian's apt gosu is built with an old Go that trips CVE scanners).
+# The binary and its runtime behaviour are identical to the apt package.
+FROM golang:1.25-alpine AS gosu-build
+RUN CGO_ENABLED=0 GOBIN=/out go install github.com/tianon/gosu@latest
+
 # ── Stage 1: shared ──────────────────────────────────────────────────────────
 FROM node:24-alpine AS shared-builder
 WORKDIR /app
@@ -39,27 +46,18 @@ COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY server/package.json ./server/
 
-# better-sqlite3 native addon requires build tools (purged after compile).
-# kitinerary-extractor for booking-confirmation import:
-#   amd64 — static binary from KDE CDN (glibc 2.17+; wget stays for healthcheck)
-#   arm64 — apt package (KDE publishes no arm64 static binary)
 RUN apt-get update && \
-    apt-get install -y --no-install-recommends tzdata dumb-init gosu wget ca-certificates python3 build-essential && \
+    apt-get install -y --no-install-recommends tzdata dumb-init wget ca-certificates python3 build-essential \
+    libkitinerary-bin && \
     npm ci --workspace=server --omit=dev && \
-    ARCH=$(dpkg --print-architecture) && \
-    if [ "$ARCH" = "amd64" ]; then \
-        wget -qO /tmp/ki.tgz https://cdn.kde.org/ci-builds/pim/kitinerary/release-26.04/linux/kitinerary-extractor-x86_64-26.04.0.tgz && \
-        echo "b7058d98990053c7b61847fef0c21e02d59b60e323e2b171ca210b682334e801  /tmp/ki.tgz" | sha256sum -c && \
-        tar -xz -C /usr/local -f /tmp/ki.tgz bin/kitinerary-extractor share/locale && \
-        rm /tmp/ki.tgz; \
-    else \
-        apt-get install -y --no-install-recommends libkitinerary-bin && \
-        ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
-    fi && \
+    ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
     apt-get purge -y python3 build-essential && \
     apt-get autoremove -y && \
     rm -rf /var/lib/apt/lists/* /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
 
+# gosu rebuilt with a current Go toolchain (stage 0) — used by CMD to drop to node.
+COPY --from=gosu-build /out/gosu /usr/local/bin/gosu
+
 ENV XDG_CACHE_HOME=/tmp/kf6-cache
 # Prevent Qt from probing for a display in headless containers.
 ENV QT_QPA_PLATFORM=offscreen
@@ -68,8 +66,19 @@ ENV QT_QPA_PLATFORM=offscreen
 ENV KITINERARY_EXTRACTOR_PATH=/usr/local/bin/kitinerary-extractor
 
 COPY --from=server-builder /app/server/dist ./server/dist
+# Runtime data assets read from server/assets at runtime: airports.json (flight
+# transport search) and atlas/*.geojson.gz (Atlas country/region map). The build
+# only emits dist, so these must be copied explicitly or the features silently
+# degrade to empty in the image.
+COPY --from=server-builder /app/server/assets ./server/assets
 # tsconfig-paths/register reads this at runtime to resolve MCP SDK paths.
 COPY server/tsconfig.json ./server/
+# Encryption-key rotation is run on demand via tsx (a prod dep) straight from the
+# raw .ts source — it never enters dist, so it must be copied in explicitly or
+# `node --import tsx scripts/migrate-encryption.ts` fails with module-not-found.
+COPY server/scripts/migrate-encryption.ts ./server/scripts/migrate-encryption.ts
+# Admin recovery script (node server/reset-admin.js) for locked-out installs.
+COPY server/reset-admin.js ./server/reset-admin.js
 COPY --from=shared-builder /app/shared/dist ./shared/dist
 COPY --from=client-builder /app/client/dist ./server/public
 COPY --from=client-builder /app/client/public/fonts ./server/public/fonts
@@ -90,5 +99,8 @@ HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
   CMD wget -qO- http://localhost:3000/api/health || exit 1
 
 ENTRYPOINT ["dumb-init", "--"]
+# Preflight: if the app code is missing, a volume was almost certainly mounted
+# over /app (it hides the image's node_modules + dist). Fail with actionable
+# guidance instead of a cryptic "Cannot find module 'tsconfig-paths/register'".
 # cd into server/ so tsconfig-paths/register finds tsconfig.json and ../node_modules resolves correctly.
-CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec gosu node node --require tsconfig-paths/register dist/index.js"]
+CMD ["sh", "-c", "if [ ! -f /app/server/dist/index.js ] || [ ! -d /app/node_modules/tsconfig-paths ]; then echo 'FATAL: TREK application files are missing from the image.'; echo 'A volume is likely mounted over /app, which hides the app code.'; echo 'Mount ONLY your data and uploads dirs: -v ./data:/app/data -v ./uploads:/app/uploads'; echo 'Do NOT mount a volume at /app. See the Troubleshooting section of the README.'; exit 1; fi; chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec gosu node node --require tsconfig-paths/register dist/index.js"]

NOTICE.md

@@ -0,0 +1,33 @@
+# Third-party data & attributions
+
+TREK bundles and uses third-party data that requires attribution.
+
+## geoBoundaries — country & sub-national boundaries
+
+The Atlas map's administrative boundaries (admin-0 countries and admin-1
+provinces/counties), shipped at `server/assets/atlas/admin0.geojson.gz` and
+`server/assets/atlas/admin1.geojson.gz` and generated by
+`server/scripts/build-atlas-geo.mjs`, are derived from **geoBoundaries**.
+
+> Runfola, D. et al. (2020) geoBoundaries: A global database of political
+> administrative boundaries. PLoS ONE 15(4): e0231866.
+> https://doi.org/10.1371/journal.pone.0231866
+
+geoBoundaries is licensed under **CC BY 4.0**
+(https://creativecommons.org/licenses/by/4.0/). Source: https://www.geoboundaries.org/
+
+The bundled files are simplified (coordinate-quantized) and re-tagged with the
+property names TREK consumes. Country borders (`admin0`) derive from the geoBoundaries
+CGAZ composite; sub-national regions (`admin1`) derive from the per-country open
+(gbOpen) release.
+
+## OpenStreetMap — geocoding
+
+Atlas reverse-geocodes places via the **Nominatim** service. Geocoding data is
+© OpenStreetMap contributors, licensed under the Open Database License (ODbL).
+https://www.openstreetmap.org/copyright
+
+## OurAirports — airport reference data
+
+`server/assets/airports.json` is built from **OurAirports**
+(https://ourairports.com/data/), released into the public domain.

README.md

@@ -51,10 +51,10 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
   <a href="docs/screenshots/dashboard.png"><img src="docs/screenshots/dashboard.png" alt="Dashboard" width="49%" /></a>
   <a href="docs/screenshots/trip-planner.png"><img src="docs/screenshots/trip-planner.png" alt="Trip planner with 3D map" width="49%" /></a>
   <a href="docs/screenshots/journey.png"><img src="docs/screenshots/journey.png" alt="Journey journal" width="49%" /></a>
-  <a href="docs/screenshots/budget.png"><img src="docs/screenshots/budget.png" alt="Budget tracker" width="49%" /></a>
+  <a href="docs/screenshots/budget.png"><img src="docs/screenshots/budget.png" alt="Costs · expense splitting" width="49%" /></a>
   <a href="docs/screenshots/atlas.png"><img src="docs/screenshots/atlas.png" alt="Atlas · visited countries" width="49%" /></a>
   <a href="docs/screenshots/vacay.png"><img src="docs/screenshots/vacay.png" alt="Vacay planner" width="49%" /></a>
-  <a href="docs/screenshots/trip-iceland.png"><img src="docs/screenshots/trip-iceland.png" alt="Iceland Ring Road" width="49%" /></a>
+  <a href="docs/screenshots/trip-iceland.png"><img src="docs/screenshots/trip-iceland.png" alt="Trip planner · day plan and route" width="49%" /></a>
   <a href="docs/screenshots/admin.png"><img src="docs/screenshots/admin.png" alt="Admin panel" width="49%" /></a>
 </div>
 
@@ -79,6 +79,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 - **Drag & drop planner** — organise places into day plans with reordering and cross-day moves
 - **Interactive map** — Leaflet or Mapbox GL with 3D buildings, terrain, photo markers, clustering, route visualization
 - **Place search** — Google Places (photos, ratings, hours) or OpenStreetMap (free, no API key)
+- **Place import** — shared Google Maps / Naver Maps lists, plus GPX and KML/KMZ/GeoJSON map files
 - **Day notes** — timestamped, icon-tagged notes with drag-and-drop reordering
 - **Route optimisation** — auto-sort places and export to Google Maps
 - **Weather forecasts** — 16-day via Open-Meteo (no key) + historical climate fallback
@@ -90,7 +91,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### 🧳 Travel management
 
 - **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files; import from booking confirmation emails and PDFs ([KDE Itinerary](https://invent.kde.org/pim/kitinerary))
-- **Budget tracking** — category-based expenses with pie chart, per-person / per-day splits, multi-currency
+- **Costs** — track and split trip expenses (Splitwise-style): per-person / per-day breakdowns, settle-up, multi-currency
 - **Packing lists** — categories, templates, user assignment, progress tracking
 - **Bag tracking** — optional weight tracking with iOS-style distribution
 - **Document manager** — attach docs, tickets, PDFs to trips / places / reservations (≤ 50 MB each)
@@ -108,6 +109,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 - **Invite links** — one-time or reusable links with expiry
 - **SSO (OIDC)** — Google, Apple, Authentik, Keycloak, or any OIDC provider
 - **2FA** — TOTP + backup codes
+- **Passkeys** — passwordless WebAuthn login (fingerprint / face / PIN / security key), admin-toggleable
 - **Collab suite** — group chat, shared notes, polls, day check-ins
 
 </td>
@@ -128,13 +130,13 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### 🧩 Addons (admin-toggleable)
 
 - **Lists** — packing lists + to-dos with templates, member assignments, optional bag tracking
-- **Budget** — expense tracker with splits, pie chart, multi-currency
+- **Costs** — expense tracker with splits and settle-up (who owes whom), multi-currency
 - **Documents** — file attachments on trips, places, and reservations
 - **Collab** — chat, notes, polls, day-by-day attendance
 - **Vacay** — personal vacation planner with calendar, 100+ country holidays, carry-over tracking
 - **Atlas** — world map of visited countries, bucket list, travel stats, streak tracking, liquid-glass UI
 - **Journey** — magazine-style travel journal with entries, photos (Immich/Synology), maps, moods
-- **Naver List Import** — one-click import from shared Naver Maps lists
+- **AirTrail** — connect a self-hosted AirTrail instance to import and sync flights into reservations
 - **MCP** — expose TREK to AI assistants via OAuth 2.1
 
 </td>
@@ -156,8 +158,9 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### ⚙️ Admin & customisation
 
 - **Dashboard views** — card grid or compact list · **Dark mode** — full theme with matching status bar
-- **15 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID
+- **20 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID, TR, JA, KO, UK, GR
 - **Admin panel** — users, invites, packing templates, categories, addons, API keys, backups, GitHub history
+- **Notifications** — per-user preferences across email (SMTP), webhook, ntfy, and an in-app notification center
 - **Auto-backups** — scheduled with configurable retention · **Units** — °C/°F, 12h/24h, map tile sources, default coordinates
 
 </td>
@@ -191,9 +194,9 @@ Open `http://localhost:3000`. On first boot TREK seeds an admin account — if y
 <div align="center">
 
 ![Node.js](https://img.shields.io/badge/Node.js_22-339933?style=flat-square&logo=node.js&logoColor=white)
-![Express](https://img.shields.io/badge/Express-000000?style=flat-square&logo=express&logoColor=white)
+![NestJS](https://img.shields.io/badge/NestJS_11-E0234E?style=flat-square&logo=nestjs&logoColor=white)
 ![SQLite](https://img.shields.io/badge/SQLite-003B57?style=flat-square&logo=sqlite&logoColor=white)
-![React](https://img.shields.io/badge/React_18-61DAFB?style=flat-square&logo=react&logoColor=black)
+![React](https://img.shields.io/badge/React_19-61DAFB?style=flat-square&logo=react&logoColor=black)
 ![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
 ![Tailwind](https://img.shields.io/badge/Tailwind-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white)
@@ -202,7 +205,7 @@ Open `http://localhost:3000`. On first boot TREK seeds an admin account — if y
 
 </div>
 
-Real-time sync via WebSocket (`ws`). State with Zustand. Auth via JWT + OAuth 2.1 + OIDC + TOTP MFA. Weather via Open-Meteo (no key required). Maps with Leaflet and Mapbox GL.
+Real-time sync via WebSocket (`ws`). Backend on NestJS 11. State with Zustand. Auth via JWT + OAuth 2.1 + OIDC + Passkeys (WebAuthn) + TOTP MFA. Weather via Open-Meteo (no key required). Maps with Leaflet and Mapbox GL.
 
 <br />
 
@@ -263,7 +266,7 @@ Then:
 docker compose up -d
 ```
 
-**HTTPS notes:** `FORCE_HTTPS=true` is optional — it adds a 301 redirect, HSTS, CSP upgrade-insecure-requests, and forces the `secure` cookie flag. Only use it behind a TLS-terminating reverse proxy. `TRUST_PROXY=1` tells Express how many proxies sit in front so real client IPs and `X-Forwarded-Proto` work.
+**HTTPS notes:** `FORCE_HTTPS=true` is optional — it adds a 301 redirect, HSTS, CSP upgrade-insecure-requests, and forces the `secure` cookie flag. Only use it behind a TLS-terminating reverse proxy. `TRUST_PROXY=1` tells the server how many proxies sit in front so real client IPs and `X-Forwarded-Proto` work.
 
 </details>
 
@@ -311,6 +314,9 @@ docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/upl
 
 Your data stays in the mounted `data` and `uploads` volumes — updates never touch it.
 
+> [!IMPORTANT]
+> Mount **only** the data and uploads directories — `-v ./data:/app/data -v ./uploads:/app/uploads`. **Never mount a volume at `/app`.** Doing so hides the application code shipped in the image and the container fails to start with `Cannot find module 'tsconfig-paths/register'`. If you previously mounted `/app`, switch to the two mounts above; your data in `data/` and `uploads/` is preserved.
+
 <h3>Rotating the Encryption Key</h3>
 
 If you need to rotate `ENCRYPTION_KEY` (e.g. upgrading from a version that derived encryption from `JWT_SECRET`):
@@ -397,12 +403,14 @@ Caddy handles TLS and WebSockets automatically.
 | `ENCRYPTION_KEY` | At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC). Recommended: generate with `openssl rand -hex 32`. If unset, falls back to `data/.jwt_secret` (existing installs) or auto-generates a key (fresh installs). | Auto |
 | `TZ` | Timezone for logs, reminders and cron jobs (e.g. `Europe/Berlin`) | `UTC` |
 | `LOG_LEVEL` | `info` = concise user actions, `debug` = verbose details | `info` |
-| `DEFAULT_LANGUAGE` | Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar` | `en` |
+| `DEFAULT_LANGUAGE` | Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar`, `id`, `tr`, `ja`, `ko`, `uk`, `gr` | `en` |
 | `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
 | `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS, adds CSP `upgrade-insecure-requests`, forces the session cookie `secure` flag. Useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY`. | `false` |
 | `HSTS_INCLUDE_SUBDOMAINS` | When `true`: adds the `includeSubDomains` directive to the HSTS header, extending HTTPS enforcement to all subdomains. Only effective when HSTS is active (`FORCE_HTTPS=true` or `NODE_ENV=production`). Leave `false` if you run other services on sibling subdomains over plain HTTP. | `false` |
 | `COOKIE_SECURE` | Controls the `secure` flag on the `trek_session` cookie. Auto-derived: on when `NODE_ENV=production` or `FORCE_HTTPS=true`. Escape hatch: set `false` to allow session cookies over plain HTTP. Not recommended in production. | auto |
-| `TRUST_PROXY` | Number of trusted reverse proxies. Tells Express to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Defaults to `1` in production; off in dev unless set. | `1` |
+| `SESSION_DURATION` | How long a login session stays valid when **"Remember me" is unchecked** (the default): sets the `trek_session` JWT `exp` and issues a browser-session cookie (cleared when the browser closes). Accepts `ms`-style strings: `1h`, `12h`, `7d`, `30d`, `90d`. Invalid values warn at startup and fall back to the default. | `24h` |
+| `SESSION_DURATION_REMEMBER` | Session length when **"Remember me" is ticked** at login: a longer-lived JWT plus a persistent `trek_session` cookie that survives browser restarts. Same format and startup-fallback behaviour as `SESSION_DURATION`. | `30d` |
+| `TRUST_PROXY` | Number of trusted reverse proxies. Tells the server to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Defaults to `1` in production; off in dev unless set. | `1` |
 | `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IPs (e.g. Immich on your LAN). Loopback and link-local addresses remain blocked. | `false` |
 | `APP_URL` | Public base URL of this instance (e.g. `https://trek.example.com`). Required when OIDC is enabled; used as base for email notification links. | — |
 | **OIDC / SSO** | | |
@@ -437,6 +445,13 @@ Caddy handles TLS and WebSockets automatically.
 
 <br />
 
+## Data sources
+
+The Atlas map's country and sub-national (province/county) boundaries come from
+[**geoBoundaries**](https://www.geoboundaries.org/) (Runfola et al., 2020), licensed
+[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). See [NOTICE.md](NOTICE.md)
+for full third-party attributions.
+
 ## License
 
 TREK is [AGPL v3](LICENSE). Self-host freely for personal or internal company use. If you modify and offer TREK as a network service to third parties, your modifications must be open-sourced under the same licence.

ca_profile.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<CommunityApplications>
+  <Profile>TREK is a self-hosted, real-time collaborative travel planner. Plan trips together with interactive maps, budgets, bookings, packing lists, day-by-day itineraries and file management — every change syncs instantly across everyone in your group. Includes OIDC/SSO, TOTP MFA, dark mode, PWA support, multi-language UI and a modular addon system (Vacay, Atlas, Collab, Budget, Packing, Journey). Maintained by mauriceboe — support and bug reports via GitHub Issues.</Profile>
+  <Icon>https://raw.githubusercontent.com/mauriceboe/TREK/main/docs/trek-icon.png</Icon>
+  <WebPage>https://github.com/mauriceboe/TREK</WebPage>
+  <Forum>https://github.com/mauriceboe/TREK/issues</Forum>
+  <DonateLink>https://ko-fi.com/mauriceboe</DonateLink>
+  <DonateText>Support TREK development</DonateText>
+</CommunityApplications>

charts/README.md

@@ -39,7 +39,7 @@ See `values.yaml` for more options.
 
 ## Notes
 - Ingress is off by default. Enable and configure hosts for your domain.
-- PVCs require a default StorageClass or specify one as needed.
+- PVCs use the cluster's default StorageClass. Set `persistence.data.storageClassName` and/or `persistence.uploads.storageClassName` to bind a specific class.
 - `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.
 - 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.

charts/trek/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 3.0.22
+version: 3.1.3
 description: Minimal Helm chart for TREK app
-appVersion: "3.0.22"
+appVersion: "3.1.3"

charts/trek/templates/configmap.yaml

@@ -28,6 +28,12 @@ data:
   {{- if .Values.env.COOKIE_SECURE }}
   COOKIE_SECURE: {{ .Values.env.COOKIE_SECURE | quote }}
   {{- end }}
+  {{- if .Values.env.SESSION_DURATION }}
+  SESSION_DURATION: {{ .Values.env.SESSION_DURATION | quote }}
+  {{- end }}
+  {{- if .Values.env.SESSION_DURATION_REMEMBER }}
+  SESSION_DURATION_REMEMBER: {{ .Values.env.SESSION_DURATION_REMEMBER | quote }}
+  {{- end }}
   {{- if .Values.env.TRUST_PROXY }}
   TRUST_PROXY: {{ .Values.env.TRUST_PROXY | quote }}
   {{- end }}
@@ -64,3 +70,9 @@ data:
   {{- if .Values.env.MCP_RATE_LIMIT }}
   MCP_RATE_LIMIT: {{ .Values.env.MCP_RATE_LIMIT | quote }}
   {{- end }}
+  {{- if .Values.env.OVERPASS_URL }}
+  OVERPASS_URL: {{ .Values.env.OVERPASS_URL | quote }}
+  {{- end }}
+  {{- if .Values.env.OVERPASS_TIMEOUT_MS }}
+  OVERPASS_TIMEOUT_MS: {{ .Values.env.OVERPASS_TIMEOUT_MS | quote }}
+  {{- end }}

charts/trek/templates/pvc.yaml

@@ -5,9 +5,16 @@ metadata:
   name: {{ include "trek.fullname" . }}-data
   labels:
     app: {{ include "trek.name" . }}
+  {{- with .Values.persistence.data.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
 spec:
   accessModes:
     - ReadWriteOnce
+  {{- with .Values.persistence.data.storageClassName }}
+  storageClassName: {{ . | quote }}
+  {{- end }}
   resources:
     requests:
       storage: {{ .Values.persistence.data.size }}
@@ -18,9 +25,16 @@ metadata:
   name: {{ include "trek.fullname" . }}-uploads
   labels:
     app: {{ include "trek.name" . }}
+  {{- with .Values.persistence.uploads.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
 spec:
   accessModes:
     - ReadWriteOnce
+  {{- with .Values.persistence.uploads.storageClassName }}
+  storageClassName: {{ . | quote }}
+  {{- end }}
   resources:
     requests:
       storage: {{ .Values.persistence.uploads.size }}

charts/trek/values.yaml

@@ -34,6 +34,10 @@ env:
   # When "true": adds includeSubDomains to the HSTS header. Only effective when HSTS is active. Leave "false" if sibling subdomains still run over plain HTTP.
   # COOKIE_SECURE: "true"
   # Auto-derived (true in production or when FORCE_HTTPS=true). Set "false" to force cookies over plain HTTP. Not recommended for production.
+  # SESSION_DURATION: "24h"
+  # How long a login session stays valid when "Remember me" is unchecked (the default): trek_session JWT exp + a browser-session cookie. Accepts 1h, 12h, 7d, 30d, 90d. Defaults to 24h.
+  # SESSION_DURATION_REMEMBER: "30d"
+  # Session length when "Remember me" is ticked: a longer-lived JWT + persistent cookie that survives browser restarts. Same format as SESSION_DURATION. Defaults to 30d.
   # TRUST_PROXY: "1"
   # Trusted proxy hops for X-Forwarded-For/X-Forwarded-Proto. Defaults to 1 in production. Must be set for FORCE_HTTPS to work.
   # ALLOW_INTERNAL_NETWORK: "false"
@@ -63,6 +67,12 @@ env:
   # Max MCP API requests per user per minute. Defaults to 300.
   # MCP_MAX_SESSION_PER_USER: "20"
   # Max concurrent MCP sessions per user. Defaults to 20.
+  # OVERPASS_URL: ""
+  # Custom Overpass endpoint(s) for the map POI "explore" search, comma-separated. When set, REPLACES the bundled
+  # public mirrors — point it at an internal/self-hosted Overpass instance when the public mirrors are unreachable
+  # from the cluster (e.g. locked-down egress). Non-http(s) entries are ignored.
+  # OVERPASS_TIMEOUT_MS: "12000"
+  # Per-endpoint timeout (ms) for Overpass POI requests. Raise it for a slow self-hosted Overpass instance. Defaults to 12000.
 
 
 # Secret environment variables stored in a Kubernetes Secret.
@@ -94,8 +104,13 @@ persistence:
   enabled: true
   data:
     size: 1Gi
+    # Leave empty to use the cluster's default StorageClass; set to bind a specific class.
+    storageClassName: ""
+    annotations: {}
   uploads:
     size: 1Gi
+    storageClassName: ""
+    annotations: {}
 
 resources:
   requests:

client/index.html

@@ -13,7 +13,7 @@
     <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" />
 
     <!-- Favicon -->
-    <link rel="icon" type="image/svg+xml" href="/icons/icon-dark.svg" />
+    <link rel="icon" type="image/svg+xml" href="/icons/icon.svg" />
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trek/client",
-  "version": "3.0.22",
+  "version": "3.1.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -26,6 +26,7 @@
     "@fontsource/geist-sans": "^5.2.5",
     "@fontsource/poppins": "^5.2.7",
     "@react-pdf/renderer": "^4.5.1",
+    "@simplewebauthn/browser": "^13.1.2",
     "@trek/shared": "*",
     "axios": "^1.6.7",
     "dexie": "^4.4.2",
@@ -33,6 +34,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
     "mapbox-gl": "^3.22.0",
+    "maplibre-gl": "^5.24.0",
     "marked": "^18.0.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -57,11 +59,12 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/leaflet": "^1.9.8",
+    "@types/node": "^25.9.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/coverage-v8": "^4.1.9",
     "autoprefixer": "^10.4.18",
     "eslint": "^10.2.1",
     "eslint-config-flat-gitignore": "^2.3.0",
@@ -79,8 +82,8 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.58.2",
-    "vite": "^5.1.4",
-    "vite-plugin-pwa": "^0.21.0",
-    "vitest": "^3.2.4"
+    "vite": "8.1.0",
+    "vite-plugin-pwa": "^1.3.0",
+    "vitest": "^4.1.9"
   }
 }

client/src/App.tsx

@@ -20,6 +20,7 @@ import SharedTripPage from './pages/SharedTripPage'
 import InAppNotificationsPage from './pages/InAppNotificationsPage.tsx'
 import OAuthAuthorizePage from './pages/OAuthAuthorizePage'
 import { ToastContainer } from './components/shared/Toast'
+import BackgroundTasksWidget from './components/BackgroundTasks/BackgroundTasksWidget'
 import BottomNav from './components/Layout/BottomNav'
 import { TranslationProvider, useTranslation } from './i18n'
 import { authApi } from './api/client'
@@ -208,6 +209,7 @@ export default function App() {
     <TranslationProvider>
       {!isAuthPage && <SystemNoticeHost />}
       <ToastContainer />
+      {!isAuthPage && <BackgroundTasksWidget />}
       <OfflineBanner />
       <Routes>
         <Route path="/" element={<RootRedirect />} />

client/src/api/client.ts

@@ -18,7 +18,7 @@ import {
   type TripAddMemberRequest, type AssignmentReorderRequest,
   type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
   type TripCreateRequest, type TripUpdateRequest, type TripCopyRequest,
-  type DayCreateRequest, type DayUpdateRequest,
+  type DayCreateRequest, type DayUpdateRequest, type DayReorderRequest,
   type PlaceCreateRequest, type PlaceUpdateRequest,
   type ReservationCreateRequest, type ReservationUpdateRequest,
   type AccommodationCreateRequest, type AccommodationUpdateRequest,
@@ -41,9 +41,10 @@ import {
   type BookingImportPreviewItem,
   type BookingImportPreviewResponse,
   type BookingImportConfirmResponse,
+  type BookingImportMode,
 } from '@trek/shared'
 import { getSocketId } from './websocket'
-import { isReachable, probeNow } from '../sync/connectivity'
+import { probeNow } from '../sync/connectivity'
 
 /**
  * Validate a response payload against its @trek/shared Zod schema — but only in
@@ -100,6 +101,7 @@ const RATE_LIMIT_MESSAGES: Record<string, string> = {
   ja:      '試行回数が多すぎます。時間をおいて再度お試しください。',
   ko:      '시도 횟수가 너무 많습니다. 잠시 후 다시 시도해 주세요.',
   uk:      'Занадто багато спроб. Спробуйте пізніше.',
+  sv:      'För många försök. Prova igen senare.',
 }
 
 function translateRateLimit(): string {
@@ -174,13 +176,17 @@ apiClient.interceptors.response.use(
       // distinguish a proxy auth challenge from a genuine outage. If the server
       // is reachable, a top-level reload lets the edge proxy run its auth flow.
       if (!error.response && navigator.onLine) {
-        await probeNow()
-        // Both the original request and the health probe failed while the device
-        // has a network interface. This matches the proxy-auth-challenge pattern
-        // (CF Access / Pangolin intercept all requests and CORS-block XHR).
-        // Guard with sessionStorage to prevent reload loops (server genuinely
-        // down would also land here, but only reloads once).
-        if (!isReachable()) {
+        // Only an actual edge-proxy auth wall warrants tearing down the SW to
+        // reauth: a reachable proxy (CF Access / Pangolin) that intercepts /api
+        // with a cross-origin redirect or an HTML login page. A genuine offline
+        // boot ALSO lands here — navigator.onLine reflects a network interface,
+        // not reachability, and is routinely true on mobile while offline. So
+        // gate strictly on a positive proxy signal; on plain offline do nothing
+        // and let the request reject so the cached shell + IndexedDB serve the
+        // app. Unregistering the SW here reloaded into a dead network and broke
+        // PWA offline mode (#1346).
+        const state = await probeNow()
+        if (state === 'proxy-wall') {
           const { pathname } = window.location
           if (!isAuthPublicPath(pathname) && !sessionStorage.getItem('proxy_reauth_attempted')) {
             sessionStorage.setItem('proxy_reauth_attempted', '1')
@@ -261,6 +267,24 @@ export const authApi = {
     create: (name: string) => apiClient.post('/auth/mcp-tokens', { name } satisfies McpTokenCreateRequest).then(r => r.data),
     delete: (id: number) => apiClient.delete(`/auth/mcp-tokens/${id}`).then(r => r.data),
   },
+  passkey: {
+    registerOptions: (password: string) => apiClient.post('/auth/passkey/register/options', { password }).then(r => r.data),
+    registerVerify: (attestationResponse: unknown, name?: string) => apiClient.post('/auth/passkey/register/verify', { attestationResponse, name }).then(r => r.data),
+    loginOptions: () => apiClient.post('/auth/passkey/login/options', {}).then(r => r.data),
+    loginVerify: (assertionResponse: unknown) => apiClient.post('/auth/passkey/login/verify', { assertionResponse }).then(r => r.data as { token: string; user: Record<string, unknown> }),
+    list: () => apiClient.get('/auth/passkey/credentials').then(r => r.data as { credentials: PasskeyCredential[] }),
+    rename: (id: number, name: string) => apiClient.patch(`/auth/passkey/credentials/${id}`, { name }).then(r => r.data),
+    delete: (id: number, password: string) => apiClient.delete(`/auth/passkey/credentials/${id}`, { data: { password } }).then(r => r.data),
+  },
+}
+
+export interface PasskeyCredential {
+  id: number
+  name: string | null
+  device_type: string | null
+  backed_up: boolean
+  created_at: string
+  last_used_at: string | null
 }
 
 export const oauthApi = {
@@ -309,6 +333,7 @@ export const tripsApi = {
   update: (id: number | string, data: TripUpdateRequest) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
   delete: (id: number | string) => apiClient.delete(`/trips/${id}`).then(r => r.data),
   uploadCover: (id: number | string, formData: FormData) => apiClient.post(`/trips/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  searchCoverImages: (query: string) => apiClient.get('/trips/cover-images/search', { params: { query } }).then(r => r.data),
   archive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: true }).then(r => r.data),
   unarchive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: false }).then(r => r.data),
   getMembers: (id: number | string) => apiClient.get(`/trips/${id}/members`).then(r => r.data),
@@ -323,6 +348,7 @@ export const daysApi = {
   create: (tripId: number | string, data: DayCreateRequest) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
   update: (tripId: number | string, dayId: number | string, data: DayUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
   delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/reorder`, { orderedIds } satisfies DayReorderRequest).then(r => r.data),
 }
 
 export const placesApi = {
@@ -347,10 +373,10 @@ export const placesApi = {
     if (opts?.paths !== undefined) fd.append('importPaths', String(opts.paths))
     return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
-  importGoogleList: (tripId: number | string, url: string) =>
-      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url } satisfies PlaceImportListRequest).then(r => r.data),
-  importNaverList: (tripId: number | string, url: string) =>
-      apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
+  importGoogleList: (tripId: number | string, url: string, enrich?: boolean) =>
+      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url, enrich } satisfies PlaceImportListRequest).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[]) =>
       apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids } satisfies PlaceBulkDeleteRequest).then(r => r.data),
 }
@@ -376,6 +402,7 @@ export const packingApi = {
   reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds } satisfies PackingReorderRequest).then(r => r.data),
   getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
   setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
+  listTemplates: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/templates`).then(r => r.data),
   applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
   saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
   setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds } satisfies PackingBagMembersRequest).then(r => r.data),
@@ -414,12 +441,48 @@ export const adminApi = {
   createUser: (data: Record<string, unknown>) => apiClient.post('/admin/users', data).then(r => r.data),
   updateUser: (id: number, data: Record<string, unknown>) => apiClient.put(`/admin/users/${id}`, data).then(r => r.data),
   deleteUser: (id: number) => apiClient.delete(`/admin/users/${id}`).then(r => r.data),
+  resetUserPasskeys: (id: number) => apiClient.delete(`/admin/users/${id}/passkeys`).then(r => r.data),
   stats: () => apiClient.get('/admin/stats').then(r => r.data),
   saveDemoBaseline: () => apiClient.post('/admin/save-demo-baseline').then(r => r.data),
   getOidc: () => apiClient.get('/admin/oidc').then(r => r.data),
   updateOidc: (data: Record<string, unknown>) => apiClient.put('/admin/oidc', data).then(r => r.data),
   addons: () => apiClient.get('/admin/addons').then(r => r.data),
   updateAddon: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/admin/addons/${id}`, data).then(r => r.data),
+  // Local LLM (Ollama) management for the AI-parsing addon.
+  llmLocalModels: (baseUrl: string): Promise<{ models: { name: string; size: number }[] }> =>
+    apiClient.get('/admin/llm/local/models', { params: { baseUrl } }).then(r => r.data),
+  /** Pull a model, streaming Ollama's NDJSON progress to `onProgress`. */
+  llmLocalPull: async (
+    baseUrl: string,
+    model: string,
+    onProgress: (p: { status?: string; total?: number; completed?: number; error?: string }) => void,
+  ): Promise<void> => {
+    const res = await fetch('/api/admin/llm/local/pull', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ baseUrl, model }),
+    })
+    if (!res.ok || !res.body) {
+      let msg = `Pull failed (${res.status})`
+      try { msg = (await res.json())?.error ?? msg } catch { /* non-json */ }
+      throw new Error(msg)
+    }
+    const reader = res.body.getReader()
+    const dec = new TextDecoder()
+    let buf = ''
+    for (;;) {
+      const { done, value } = await reader.read()
+      if (done) break
+      buf += dec.decode(value, { stream: true })
+      const lines = buf.split('\n')
+      buf = lines.pop() ?? ''
+      for (const line of lines) {
+        if (!line.trim()) continue
+        try { onProgress(JSON.parse(line)) } catch { /* skip partial */ }
+      }
+    }
+  },
   checkVersion: () => apiClient.get('/admin/version-check').then(r => r.data),
   getBagTracking: () => apiClient.get('/admin/bag-tracking').then(r => r.data),
   updateBagTracking: (enabled: boolean) => apiClient.put('/admin/bag-tracking', { enabled }).then(r => r.data),
@@ -466,6 +529,20 @@ export const addonsApi = {
   enabled: () => apiClient.get('/addons').then(r => r.data),
 }
 
+export const airtrailApi = {
+  getSettings: () => apiClient.get('/integrations/airtrail/settings').then(r => r.data),
+  saveSettings: (data: { url: string; apiKey?: string; allowInsecureTls?: boolean; writeEnabled?: boolean }) =>
+    apiClient.put('/integrations/airtrail/settings', data).then(r => r.data),
+  status: () => apiClient.get('/integrations/airtrail/status').then(r => r.data),
+  test: (data: { url?: string; apiKey?: string; allowInsecureTls?: boolean }) =>
+    apiClient.post('/integrations/airtrail/test', data).then(r => r.data),
+  sync: (): Promise<{ changed: number }> => apiClient.post('/integrations/airtrail/sync').then(r => r.data),
+  // flights + import are added with the trip-planner import (P2)
+  flights: () => apiClient.get('/integrations/airtrail/flights').then(r => r.data),
+  import: (tripId: number, flightIds: string[]) =>
+    apiClient.post(`/trips/${tripId}/reservations/import/airtrail`, { flightIds }).then(r => r.data),
+}
+
 export const journeyApi = {
   list: () => apiClient.get('/journeys').then(r => r.data),
   create: (data: JourneyCreateRequest) => apiClient.post('/journeys', data).then(r => r.data),
@@ -537,6 +614,11 @@ export const mapsApi = {
   placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => checkInDev(mapsPlacePhotoResultSchema, r.data, 'maps.placePhoto')),
   reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => checkInDev(mapsReverseResultSchema, r.data, 'maps.reverse')),
   resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => checkInDev(mapsResolveUrlResultSchema, r.data, 'maps.resolveUrl')),
+  // 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.
+  pois: (category: string, bbox: { south: number; west: number; north: number; east: number }, signal?: AbortSignal) =>
+    apiClient.get('/maps/pois', { params: { category, ...bbox }, signal, timeout: 20000 }).then(r => r.data as { pois: import('../components/Map/poiCategories').Poi[]; source: string; truncated: boolean; clamped?: boolean }),
 }
 
 export const airportsApi = {
@@ -555,6 +637,7 @@ export const budgetApi = {
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
   settlement: (tripId: number | string, base?: string) => apiClient.get(`/trips/${tripId}/budget/settlement`, base ? { params: { base } } : undefined).then(r => r.data),
   createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
+  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
   deleteSettlement: (tripId: number | string, settlementId: number) => apiClient.delete(`/trips/${tripId}/budget/settlements/${settlementId}`).then(r => r.data),
   reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
   reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
@@ -583,17 +666,31 @@ export const reservationsApi = {
   update: (tripId: number | string, id: number, data: ReservationUpdateRequest) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
   updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[], dayId?: number) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions, day_id: dayId }).then(r => r.data),
-  importBookingPreview: (tripId: number | string, files: File[]): Promise<BookingImportPreviewResponse> => {
+  importBookingPreview: (tripId: number | string, files: File[], mode: BookingImportMode = 'no-ai'): Promise<BookingImportPreviewResponse> => {
     const fd = new FormData()
     for (const f of files) fd.append('files', f)
-    return apiClient.post(`/trips/${tripId}/reservations/import/booking`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+    fd.append('mode', mode)
+    // No client-side timeout: kitinerary + LLM extraction routinely exceeds the
+    // global 8s default (a cold local model alone can take ~45s).
+    return apiClient.post(`/trips/${tripId}/reservations/import/booking`, fd, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 0 }).then(r => r.data)
   },
   importBookingConfirm: (tripId: number | string, items: BookingImportPreviewItem[]): Promise<BookingImportConfirmResponse> =>
     apiClient.post(`/trips/${tripId}/reservations/import/booking/confirm`, { items }).then(r => r.data),
+  // Start a background parse: returns a job id at once; progress + result arrive
+  // over the WebSocket (import:progress / import:done / import:error).
+  importBookingAsync: (tripId: number | string, files: File[], mode: BookingImportMode = 'no-ai'): Promise<{ jobId: string }> => {
+    const fd = new FormData()
+    for (const f of files) fd.append('files', f)
+    fd.append('mode', mode)
+    return apiClient.post(`/trips/${tripId}/reservations/import/booking/async`, fd, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 0 }).then(r => r.data)
+  },
+  // Poll a background job — recovery path when a WebSocket push was missed.
+  importJobStatus: (tripId: number | string, jobId: string): Promise<{ status: 'running' | 'done' | 'error'; done: number; total: number; result?: BookingImportPreviewResponse; error?: string }> =>
+    apiClient.get(`/trips/${tripId}/reservations/import/jobs/${jobId}`).then(r => r.data),
 }
 
 export const healthApi = {
-  features: (): Promise<{ bookingImport: boolean }> => apiClient.get('/health/features').then(r => r.data),
+  features: (): Promise<{ bookingImport: boolean; aiParsing: boolean }> => apiClient.get('/health/features').then(r => r.data),
 }
 
 export const weatherApi = {
@@ -712,4 +809,4 @@ export const inAppNotificationsApi = {
       apiClient.post(`/notifications/in-app/${id}/respond`, { response }).then(r => r.data),
 }
 
-export default apiClient
+export default apiClient

client/src/api/websocket.ts

@@ -20,6 +20,12 @@ export function getSocketId(): string | null {
   return mySocketId
 }
 
+/** Trip ids the app currently has open (joined). Used to re-hydrate the active
+ *  trip's store after the network comes back via the `online` event. */
+export function getActiveTrips(): string[] {
+  return Array.from(activeTrips)
+}
+
 export function setRefetchCallback(fn: RefetchCallback | null): void {
   refetchCallback = fn
 }

client/src/components/Admin/AddonManager.tsx

@@ -4,10 +4,11 @@ import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { useToast } from '../shared/Toast'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage } from 'lucide-react'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane, Server, Cloud } from 'lucide-react'
+import CustomSelect from '../shared/CustomSelect'
 
 const ICON_MAP = {
-  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen,
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane,
 }
 
 function ImmichIcon({ size = 14 }: { size?: number }) {
@@ -298,7 +299,12 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
                   </span>
                 </div>
                 {integrationAddons.map(addon => (
-                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                  <div key={addon.id}>
+                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
+                    {addon.id === 'llm_parsing' && addon.enabled && (
+                      <LlmParsingConfig addon={addon} />
+                    )}
+                  </div>
                 ))}
               </div>
             )}
@@ -309,6 +315,225 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
   )
 }
 
+const MASKED = '••••••••'
+const DEFAULT_OLLAMA_URL = 'http://localhost:11434/v1'
+
+/** Curated models the local extractor is tuned for, pullable via Ollama. The router drives
+ *  one model per document via Ollama's grammar-constrained `format`; "thinking" is disabled
+ *  automatically, so the Qwen3 family works without any tuning. A host only needs one. */
+const RECOMMENDED_MODELS: { id: string; label: string; note: string; recommended: boolean; vision: boolean }[] = [
+  { id: 'qwen3:8b', label: 'Qwen3 — 8B', note: 'Recommended · best extraction quality & speed on CPU (thinking auto-disabled) · Apache-2.0', recommended: true, vision: false },
+]
+
+/**
+ * Instance-wide AI-parsing config. When set, applies to the whole instance and
+ * overrides per-user config (see server llmConfig.ts). The API key is masked on
+ * read; an unchanged mask is treated as a no-op by the server. For the local
+ * provider, it also lists installed Ollama models and can pull NuExtract models.
+ */
+function LlmParsingConfig({ addon }: { addon: Addon }) {
+  const toast = useToast()
+  const cfg = (addon.config ?? {}) as Record<string, unknown>
+  const [provider, setProvider] = useState<string>((cfg.provider as string) ?? 'local')
+  const [model, setModel] = useState<string>((cfg.model as string) ?? '')
+  const [baseUrl, setBaseUrl] = useState<string>((cfg.baseUrl as string) ?? '')
+  const [apiKey, setApiKey] = useState<string>((cfg.apiKey as string) ?? '')
+  const [saving, setSaving] = useState(false)
+
+  // Local-provider model management.
+  const [installed, setInstalled] = useState<string[]>([])
+  const [modelsErr, setModelsErr] = useState('')
+  const [loadingModels, setLoadingModels] = useState(false)
+  const [pulling, setPulling] = useState<string | null>(null)
+  const [pullPct, setPullPct] = useState(0)
+  const [pullStatus, setPullStatus] = useState('')
+
+  const effectiveUrl = baseUrl.trim() || DEFAULT_OLLAMA_URL
+  const isInstalled = (id: string) => installed.some(n => n === id || n.startsWith(id + ':') || n.startsWith(id))
+
+  const loadModels = async () => {
+    if (provider !== 'local') return
+    setLoadingModels(true)
+    setModelsErr('')
+    try {
+      const res = await adminApi.llmLocalModels(effectiveUrl)
+      setInstalled(res.models.map(m => m.name))
+    } catch (e: unknown) {
+      setModelsErr(e instanceof Error ? e.message : 'Could not reach the local LLM server')
+      setInstalled([])
+    } finally {
+      setLoadingModels(false)
+    }
+  }
+
+  // Load installed models when the local provider is active.
+  useEffect(() => {
+    if (provider === 'local') loadModels()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [provider])
+
+  const pull = async (id: string) => {
+    if (pulling) return
+    setPulling(id)
+    setPullPct(0)
+    setPullStatus('starting…')
+    try {
+      await adminApi.llmLocalPull(effectiveUrl, id, (p) => {
+        if (p.error) throw new Error(p.error)
+        if (p.status) setPullStatus(p.status)
+        if (p.total && p.completed != null) setPullPct(Math.round((p.completed / p.total) * 100))
+      })
+      toast.success('Model pulled')
+      setModel(id)
+      await loadModels()
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : 'Pull failed')
+    } finally {
+      setPulling(null)
+      setPullPct(0)
+      setPullStatus('')
+    }
+  }
+
+  const save = async () => {
+    setSaving(true)
+    try {
+      // Send the masked sentinel unchanged so the server keeps the stored key.
+      await adminApi.updateAddon(addon.id, { config: { provider, model: model.trim(), baseUrl: baseUrl.trim(), apiKey, multimodal: cfg.multimodal === true } })
+      toast.success('Saved')
+    } catch {
+      toast.error('Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  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 providerOptions = [
+    { value: 'local', label: 'Local · OpenAI-compatible', icon: <Server size={14} />, badge: 'Ollama' },
+    { value: 'openai', label: 'OpenAI', icon: <Cloud size={14} /> },
+    { value: 'anthropic', label: 'Anthropic', icon: <Sparkles size={14} /> },
+  ]
+
+  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>
+
+        {/* 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>
+          {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-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">
+            <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 onClick={loadModels} disabled={loadingModels} className="text-xs text-content-muted underline disabled:opacity-60">
+                  {loadingModels ? 'Loading…' : 'Refresh'}
+                </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
+                      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 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 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 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">
+          {saving ? 'Saving…' : 'Save'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
 interface AddonRowProps {
   addon: Addon
   onToggle: (addon: Addon) => void

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -6,7 +6,17 @@ import { useToast } from '../shared/Toast'
 import Section from '../Settings/Section'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
-import type { Place } from '../../types'
+import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
+import type { DistanceUnit, Place } from '../../types'
+import {
+  MAPBOX_DEFAULT_STYLE,
+  defaultStyleForProvider,
+  getStylePresets,
+  isOpenFreeMapStyle,
+  normalizeStyleForProvider,
+  styleSettingKey,
+  type GlMapProvider,
+} from '../Map/glProviders'
 
 const MAP_PRESETS = [
   { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
@@ -18,10 +28,30 @@ const MAP_PRESETS = [
 
 type Defaults = {
   temperature_unit?: string
+  distance_unit?: DistanceUnit
   dark_mode?: string | boolean
   time_format?: string
+  default_currency?: string
   blur_booking_codes?: boolean
   map_tile_url?: string
+  map_provider?: string
+  mapbox_access_token?: string
+  mapbox_style?: string
+  maplibre_style?: string
+  mapbox_3d_enabled?: boolean
+  mapbox_quality_mode?: boolean
+}
+
+type MapProvider = 'leaflet' | GlMapProvider
+
+function normalizeProvider(value: unknown): MapProvider {
+  return value === 'mapbox-gl' || value === 'maplibre-gl' ? value : 'leaflet'
+}
+
+function styleForProvider(provider: MapProvider, style?: string | null): string {
+  if (provider === 'leaflet') return style || MAPBOX_DEFAULT_STYLE
+  if (provider === 'mapbox-gl' && isOpenFreeMapStyle(style)) return MAPBOX_DEFAULT_STYLE
+  return normalizeStyleForProvider(provider, style)
 }
 
 function OptionRow({
@@ -77,11 +107,16 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   const [defaults, setDefaults] = useState<Defaults>({})
   const [loaded, setLoaded] = useState(false)
   const [mapTileUrl, setMapTileUrl] = useState('')
+  const [mapboxToken, setMapboxToken] = useState('')
+  const [mapboxStyle, setMapboxStyle] = useState('')
 
   useEffect(() => {
     adminApi.getDefaultUserSettings().then((data: Defaults) => {
+      const provider = normalizeProvider(data.map_provider)
       setDefaults(data)
       setMapTileUrl(data.map_tile_url || '')
+      setMapboxToken(data.mapbox_access_token || '')
+      setMapboxStyle(provider === 'leaflet' ? (data.mapbox_style || '') : styleForProvider(provider, provider === 'maplibre-gl' ? data.maplibre_style : data.mapbox_style))
       setLoaded(true)
     }).catch(() => setLoaded(true))
   }, [])
@@ -101,6 +136,11 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       const updated = await adminApi.updateDefaultUserSettings({ [key]: null })
       setDefaults(updated)
       if (key === 'map_tile_url') setMapTileUrl('')
+      if (key === 'mapbox_access_token') setMapboxToken('')
+      if (key === 'mapbox_style' || key === 'maplibre_style') {
+        const provider = normalizeProvider(defaults.map_provider)
+        setMapboxStyle(provider === 'leaflet' ? '' : defaultStyleForProvider(provider))
+      }
       toast.success(t('admin.defaultSettings.reset'))
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : t('common.error'))
@@ -150,6 +190,20 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   }
 
   const darkMode = defaults.dark_mode
+  const mapProvider = normalizeProvider(defaults.map_provider)
+  const glStylePresets = mapProvider === 'leaflet' ? [] : getStylePresets(mapProvider)
+  const styleKey: keyof Defaults = mapProvider === 'maplibre-gl' ? 'maplibre_style' : 'mapbox_style'
+  const saveMapProvider = (nextProvider: MapProvider) => {
+    const patch: Partial<Defaults> = { map_provider: nextProvider }
+    if (nextProvider !== 'leaflet') {
+      // Load + save the new provider's own style slot so the other provider's style is kept.
+      const slot = nextProvider === 'maplibre-gl' ? defaults.maplibre_style : defaults.mapbox_style
+      const nextStyle = styleForProvider(nextProvider, slot)
+      setMapboxStyle(nextStyle)
+      patch[styleSettingKey(nextProvider)] = nextStyle
+    }
+    save(patch)
+  }
 
   return (
     <Section title={t('admin.defaultSettings.title')} icon={Settings2}>
@@ -190,6 +244,22 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
         ))}
       </OptionRow>
 
+      {/* Distance */}
+      <OptionRow label={<>{t('settings.distance')} <ResetButton field="distance_unit" /></>}>
+        {([
+          { value: 'metric', label: 'km Metric' },
+          { value: 'imperial', label: 'mi Imperial' },
+        ] as const).map(opt => (
+          <OptionButton
+            key={opt.value}
+            active={defaults.distance_unit === opt.value}
+            onClick={() => save({ distance_unit: opt.value })}
+          >
+            {opt.label}
+          </OptionButton>
+        ))}
+      </OptionRow>
+
       {/* Time Format */}
       <OptionRow label={<>{t('settings.timeFormat')} <ResetButton field="time_format" /></>}>
         {([
@@ -206,6 +276,23 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
         ))}
       </OptionRow>
 
+      {/* Default Currency */}
+      <div>
+        <label className="block text-sm font-medium mb-1.5 text-content-secondary">
+          {t('settings.currency')} <ResetButton field="default_currency" />
+        </label>
+        <CustomSelect
+          value={defaults.default_currency || ''}
+          onChange={(value: string) => { if (value) save({ default_currency: value }) }}
+          placeholder={t('settings.currency')}
+          searchable
+          options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+          size="sm"
+          style={{ maxWidth: 240 }}
+        />
+        <p className="text-xs mt-1 text-content-faint">{t('settings.currencyHint')}</p>
+      </div>
+
       {/* Blur Booking Codes */}
       <OptionRow label={<>{t('settings.blurBookingCodes')} <ResetButton field="blur_booking_codes" /></>}>
         {([
@@ -267,6 +354,105 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           })}
         </div>
       </div>
+
+      {/* ── Map provider / instance-wide Mapbox ───────────────────────── */}
+      <div style={{ borderTop: '1px solid var(--border-primary)', paddingTop: 20, marginTop: 4 }}>
+        <OptionRow
+          label={<>{t('admin.defaultSettings.mapProvider')} <ResetButton field="map_provider" /></>}
+          hint={t('admin.defaultSettings.mapProviderHint')}
+        >
+          {([
+            { value: 'leaflet', label: t('admin.defaultSettings.providerLeaflet') },
+            { value: 'mapbox-gl', label: t('admin.defaultSettings.providerMapbox') },
+            { value: 'maplibre-gl', label: t('admin.defaultSettings.providerMapLibre') },
+          ] as const).map(opt => (
+            <OptionButton
+              key={opt.value}
+              active={mapProvider === opt.value}
+              onClick={() => saveMapProvider(opt.value)}
+            >
+              {opt.label}
+            </OptionButton>
+          ))}
+        </OptionRow>
+
+        {mapProvider !== 'leaflet' && (
+          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 18 }}>
+            {mapProvider === 'mapbox-gl' && (
+            <div>
+              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
+                {t('admin.defaultSettings.mapboxToken')}
+                <ResetButton field="mapbox_access_token" />
+              </label>
+              <input
+                type="text"
+                value={mapboxToken}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxToken(e.target.value)}
+                onBlur={() => save({ mapbox_access_token: mapboxToken })}
+                placeholder="pk.eyJ…"
+                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('admin.defaultSettings.mapboxTokenHint')}</p>
+            </div>
+            )}
+
+            <div>
+              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
+                {t('admin.defaultSettings.mapboxStyle')}
+                <ResetButton field={styleKey} />
+              </label>
+              <CustomSelect
+                value={mapboxStyle}
+                onChange={(value: string) => { if (value) { setMapboxStyle(value); save({ [styleKey]: value }) } }}
+                placeholder={t('admin.defaultSettings.mapboxStylePlaceholder')}
+                options={glStylePresets.map(p => ({ value: p.url, label: p.name }))}
+                size="sm"
+                style={{ marginBottom: 8 }}
+              />
+              <input
+                type="text"
+                value={mapboxStyle}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxStyle(e.target.value)}
+                onBlur={() => {
+                  const nextStyle = normalizeStyleForProvider(mapProvider, mapboxStyle)
+                  setMapboxStyle(nextStyle)
+                  save({ [styleKey]: nextStyle })
+                }}
+                placeholder={defaultStyleForProvider(mapProvider)}
+                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"
+              />
+            </div>
+
+            {mapProvider === 'mapbox-gl' && (
+            <>
+            <OptionRow label={<>{t('admin.defaultSettings.mapbox3d')} <ResetButton field="mapbox_3d_enabled" /></>}>
+              {([
+                { value: true, label: t('settings.on') || 'On' },
+                { value: false, label: t('settings.off') || 'Off' },
+              ] as const).map(opt => (
+                <OptionButton key={String(opt.value)} active={(defaults.mapbox_3d_enabled ?? true) === opt.value} onClick={() => save({ mapbox_3d_enabled: opt.value })}>
+                  {opt.label}
+                </OptionButton>
+              ))}
+            </OptionRow>
+
+            <OptionRow label={<>{t('admin.defaultSettings.mapboxQuality')} <ResetButton field="mapbox_quality_mode" /></>}>
+              {([
+                { value: true, label: t('settings.on') || 'On' },
+                { value: false, label: t('settings.off') || 'Off' },
+              ] as const).map(opt => (
+                <OptionButton key={String(opt.value)} active={(defaults.mapbox_quality_mode ?? false) === opt.value} onClick={() => save({ mapbox_quality_mode: opt.value })}>
+                  {opt.label}
+                </OptionButton>
+              ))}
+            </OptionRow>
+            </>
+            )}
+          </div>
+        )}
+      </div>
     </Section>
   )
 }

client/src/components/BackgroundTasks/BackgroundTasksWidget.tsx

@@ -0,0 +1,163 @@
+import ReactDOM from 'react-dom'
+import { useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Loader2, CheckCircle2, AlertCircle, X } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { addListener, removeListener } from '../../api/websocket'
+import { reservationsApi } from '../../api/client'
+import { useBackgroundTasksStore, type BackgroundImportTask } from '../../store/backgroundTasksStore'
+
+/**
+ * Global, route-independent widget (bottom-right) that tracks background booking
+ * imports. Mounted once at the app root so it survives navigation. It listens to the
+ * user's WebSocket for import:progress / import:done / import:error and reflects each
+ * job; a finished job offers a "review" action that takes the user to the trip, where
+ * the per-item review flow opens. Polls running jobs as a backstop for missed pushes.
+ */
+export default function BackgroundTasksWidget() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const tasks = useBackgroundTasksStore((s) => s.tasks)
+  const setProgress = useBackgroundTasksStore((s) => s.setProgress)
+  const setDone = useBackgroundTasksStore((s) => s.setDone)
+  const setError = useBackgroundTasksStore((s) => s.setError)
+  const requestReview = useBackgroundTasksStore((s) => s.requestReview)
+  const dismiss = useBackgroundTasksStore((s) => s.dismiss)
+
+  // On (re)load, reconcile tasks restored from localStorage with the server: a parse
+  // that was still running when the page reloaded must keep its widget, so re-fetch each
+  // job's real status (and its parsed items) once. A job the server has since dropped
+  // (404, expired) is removed so no stale card lingers.
+  const didRehydrate = useRef(false)
+  useEffect(() => {
+    if (didRehydrate.current) return
+    didRehydrate.current = true
+    const restored = useBackgroundTasksStore.getState().tasks
+    for (const task of restored) {
+      reservationsApi
+        .importJobStatus(task.tripId, task.id)
+        .then((s) => {
+          if (s.status === 'done') setDone(task.id, task.tripId, (s.result?.items ?? []) as never, s.result?.warnings ?? [])
+          else if (s.status === 'error') setError(task.id, task.tripId, s.error ?? 'error')
+          else setProgress(task.id, task.tripId, s.done, s.total)
+        })
+        .catch((err: { response?: { status?: number } }) => {
+          if (err?.response?.status === 404) dismiss(task.id)
+        })
+    }
+    // run once on mount against whatever was rehydrated from storage
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Server pushes import:* to the user on whatever page they're on.
+  useEffect(() => {
+    const handler = (e: Record<string, unknown>) => {
+      const type = typeof e.type === 'string' ? e.type : ''
+      if (!type.startsWith('import:')) return
+      const id = String(e.jobId ?? '')
+      const tripId = String(e.tripId ?? '')
+      if (!id) return
+      if (type === 'import:progress') setProgress(id, tripId, Number(e.done ?? 0), Number(e.total ?? 1))
+      else if (type === 'import:done') {
+        const result = e.result as { items?: unknown[]; warnings?: string[] } | undefined
+        setDone(id, tripId, (result?.items ?? []) as never, result?.warnings ?? [])
+      } else if (type === 'import:error') setError(id, tripId, String(e.message ?? 'error'))
+    }
+    addListener(handler)
+    return () => removeListener(handler)
+  }, [setProgress, setDone, setError])
+
+  // Backstop: poll jobs whose state we still need — running ones (in case a WebSocket push
+  // was missed) and a restored 'done' task whose items haven't been re-fetched yet (so a
+  // failed one-shot rehydrate self-heals instead of getting stuck on "preview empty").
+  useEffect(() => {
+    const pending = tasks.filter((task) => task.status === 'running' || (task.status === 'done' && task.items === undefined))
+    if (pending.length === 0) return
+    const iv = setInterval(() => {
+      for (const task of pending) {
+        reservationsApi
+          .importJobStatus(task.tripId, task.id)
+          .then((s) => {
+            if (s.status === 'done') setDone(task.id, task.tripId, (s.result?.items ?? []) as never, s.result?.warnings ?? [])
+            else if (s.status === 'error') setError(task.id, task.tripId, s.error ?? 'error')
+            else setProgress(task.id, task.tripId, s.done, s.total)
+          })
+          .catch(() => {})
+      }
+    }, 5000)
+    return () => clearInterval(iv)
+  }, [tasks, setProgress, setDone, setError])
+
+  if (tasks.length === 0) return null
+
+  const review = (task: BackgroundImportTask) => {
+    requestReview(task.id)
+    navigate(`/trips/${task.tripId}`)
+  }
+
+  return ReactDOM.createPortal(
+    <div
+      style={{ position: 'fixed', right: 16, bottom: 16, zIndex: 50000, display: 'flex', flexDirection: 'column', gap: 8, width: 380, maxWidth: 'calc(100vw - 32px)', fontFamily: 'var(--font-system)' }}
+    >
+      {tasks.map((task) => (
+        <div
+          key={task.id}
+          className="bg-surface-card"
+          style={{ borderRadius: 12, border: '1px solid var(--border-primary)', boxShadow: '0 8px 24px rgba(0,0,0,0.18)', padding: '11px 13px', backdropFilter: 'blur(8px)', display: 'flex', gap: 10, alignItems: 'flex-start' }}
+        >
+          <div style={{ flexShrink: 0, marginTop: 1 }}>
+            {(task.status === 'running' || (task.status === 'done' && task.items === undefined)) && <Loader2 size={16} className="animate-spin" color="var(--accent)" />}
+            {task.status === 'done' && task.items !== undefined && <CheckCircle2 size={16} color="#10b981" />}
+            {task.status === 'error' && <AlertCircle size={16} color="#ef4444" />}
+          </div>
+
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {task.label}
+            </div>
+
+            {task.status === 'running' && (
+              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 1 }}>
+                {t('reservations.import.parsing')}
+                {task.total > 1 ? ` · ${task.done}/${task.total}` : ''}
+              </div>
+            )}
+
+            {task.status === 'done' && (
+              task.items === undefined ? (
+                // Restored from a reload; items are being re-fetched (see the poll backstop).
+                <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 1 }}>{t('reservations.import.parsing')}</div>
+              ) : task.items.length > 0 ? (
+                <button
+                  onClick={() => review(task)}
+                  className="bg-accent text-accent-text"
+                  style={{ marginTop: 4, border: 'none', borderRadius: 8, padding: '4px 12px', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}
+                >
+                  {t('common.import')}
+                </button>
+              ) : (
+                <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 1 }}>{t('reservations.import.previewEmpty')}</div>
+              )
+            )}
+
+            {task.status === 'error' && (
+              <div style={{ fontSize: 11, color: '#b91c1c', marginTop: 1, whiteSpace: 'pre-wrap' }}>{task.error}</div>
+            )}
+          </div>
+
+          {task.status !== 'running' && (
+            <button
+              onClick={() => dismiss(task.id)}
+              className="bg-transparent text-content-faint"
+              style={{ flexShrink: 0, border: 'none', cursor: 'pointer', padding: 2, borderRadius: 6, display: 'flex', alignItems: 'center' }}
+              aria-label={t('common.close')}
+            >
+              <X size={13} />
+            </button>
+          )}
+        </div>
+      ))}
+    </div>,
+    document.body
+  )
+}

client/src/components/Budget/CostsPanel.test.tsx

@@ -0,0 +1,197 @@
+// FE-COMP-COSTS: settlements surfaced inline in the Costs ledger (issue #1241)
+import { render, screen, waitFor } from '../../../tests/helpers/render'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../../tests/helpers/msw/server'
+import { useAuthStore } from '../../store/authStore'
+import { useTripStore } from '../../store/tripStore'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { buildUser, buildTrip, buildBudgetItem } from '../../../tests/helpers/factories'
+import CostsPanel from './CostsPanel'
+
+const tripMembers = [
+  { id: 1, username: 'alice', avatar_url: null },
+  { id: 2, username: 'bob', avatar_url: null },
+]
+
+beforeEach(() => {
+  resetAllStores()
+  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true })
+  seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'EUR' }) })
+})
+
+describe('CostsPanel — settlements in the ledger', () => {
+  it('renders a settle-up payment as a ledger row with an undo action', async () => {
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 90, expense_date: '2025-06-15' }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () =>
+        HttpResponse.json({
+          balances: [],
+          flows: [],
+          settlements: [
+            { id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, created_at: '2025-06-16 10:00:00', from_username: 'bob', to_username: 'alice' },
+          ],
+        })
+      ),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    // The expense and the settlement (payment) both appear in the unified ledger.
+    await screen.findByText('Dinner')
+    await screen.findByText('Payment')
+    // The payment row exposes an inline undo (no need to open a separate History modal).
+    expect(screen.getByTitle('Undo')).toBeInTheDocument()
+  })
+
+  it('records a manual payment via the Add payment button', async () => {
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget/settlements', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ settlement: { id: 1, ...posted } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add payment' }))
+    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    // The footer submit is the second "Add payment" control once the modal is open.
+    const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
+    const submit = addButtons[addButtons.length - 1]
+    await user.click(submit)
+    await waitFor(() => expect(posted).toMatchObject({ amount: 25 }))
+  })
+
+  it('hides payment rows while a text search is active', async () => {
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 90, expense_date: '2025-06-15' }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () =>
+        HttpResponse.json({
+          balances: [],
+          flows: [],
+          settlements: [
+            { id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, created_at: '2025-06-16 10:00:00', from_username: 'bob', to_username: 'alice' },
+          ],
+        })
+      ),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Payment')
+    await user.type(screen.getByPlaceholderText('Search expenses…'), 'Dinner')
+    // Payment rows have no name, so a search hides them while the matching expense stays.
+    expect(screen.queryByText('Payment')).not.toBeInTheDocument()
+    expect(screen.getByText('Dinner')).toBeInTheDocument()
+  })
+
+  it('auto-splits the total across participants and rebalances a pinned amount on save', async () => {
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      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: 'Dinner' }), id: 5 } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Dinner')
+    const nums = () => screen.getAllByPlaceholderText('0.00') as HTMLInputElement[]
+    await user.type(nums()[0], '100') // total → auto equal-split across the 2 participants
+    await waitFor(() => expect(nums()[1].value).toBe('50'))
+    expect(nums()[2].value).toBe('50')
+    // Pin the first participant to 30 → the other non-pinned field rebalances to 70.
+    await user.clear(nums()[1]); await user.type(nums()[1], '30')
+    await waitFor(() => expect(nums()[2].value).toBe('70'))
+
+    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
+    await user.click(addBtns[addBtns.length - 1]) // footer submit
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted!.total_price).toBe(100)
+    expect(posted!.payers).toEqual(expect.arrayContaining([
+      expect.objectContaining({ user_id: 1, amount: 30 }),
+      expect.objectContaining({ user_id: 2, amount: 70 }),
+    ]))
+  })
+
+  it('accepts a comma as the decimal separator in the total amount (#1256)', async () => {
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      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: 'AirTags' }), id: 6 } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'AirTags')
+    await user.type(screen.getAllByPlaceholderText('0.00')[0], '39,99') // comma → normalized to 39.99
+
+    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
+    await user.click(addBtns[addBtns.length - 1]) // footer submit
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted!.total_price).toBe(39.99)
+  })
+
+  it('marks an expense with no payer as Unfinished', async () => {
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Hotel' }), total_price: 90, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+    await screen.findByText('Hotel')
+    expect(screen.getByText('Unfinished')).toBeInTheDocument()
+  })
+
+  it('records a recorded-total expense with nobody to split with (#1286)', async () => {
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      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' }), id: 9 } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Hotel')
+    await user.type(screen.getAllByPlaceholderText('0.00')[0], '120') // total only, paid on-site later
+
+    // Deselect everyone — the cost is recorded without a split (the bug: this was blocked).
+    // The participant toggles are buttons; the same names also appear as plain text in
+    // the Balances sidebar, so target the buttons specifically.
+    await user.click(screen.getByRole('button', { name: /alice/i }))
+    await user.click(screen.getByRole('button', { name: /bob/i }))
+
+    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
+    const submit = addBtns[addBtns.length - 1] // footer submit
+    expect(submit).not.toBeDisabled()
+    await user.click(submit)
+
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted!.total_price).toBe(120)
+    expect(posted!.member_ids).toEqual([])
+    expect(posted!.payers).toEqual([])
+  })
+})

client/src/components/Budget/CostsPanel.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, Check, RotateCcw, History, Pencil, Trash2 } from 'lucide-react'
+import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2 } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -39,6 +39,12 @@ interface SettlementData {
   settlements: Settlement[]
 }
 
+// One row in the unified Costs ledger — either an expense or a settle-up payment,
+// carrying the date used to group it by day.
+type LedgerEntry =
+  | { kind: 'expense'; date: string; e: BudgetItem }
+  | { kind: 'payment'; date: string; s: Settlement }
+
 const round2 = (n: number) => Math.round(n * 100) / 100
 const FIELD_H = 40 // shared height for the amount / currency / day row in the modal
 
@@ -62,9 +68,10 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   const [settlement, setSettlement] = useState<SettlementData | null>(null)
   const [filter, setFilter] = useState<'all' | 'mine' | 'owed'>('all')
   const [search, setSearch] = useState('')
-  const [histOpen, setHistOpen] = useState(false)
   const [modalOpen, setModalOpen] = useState(false)
   const [editing, setEditing] = useState<BudgetItem | null>(null)
+  const [editingSettlement, setEditingSettlement] = useState<Settlement | null>(null)
+  const [addingPayment, setAddingPayment] = useState(false)
 
   const people = tripMembers
   const personById = useCallback((id: number) => people.find(p => p.id === id), [people])
@@ -122,21 +129,37 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     return list
   }, [budgetItems, filter, search, me])
 
+  // Settlements ("payments") shown inline in the ledger. They have no name, so a
+  // text search hides them; they're excluded from the "owed" expense filter and,
+  // under "mine", only show transfers I'm part of.
+  const filteredSettlements = useMemo(() => {
+    if (search.trim()) return []
+    if (filter === 'owed') return []
+    let list = settlement?.settlements || []
+    if (filter === 'mine') list = list.filter(s => s.from_user_id === me || s.to_user_id === me)
+    return list
+  }, [settlement, filter, search, me])
+
   const dayGroups = useMemo(() => {
-    const groups: { day: string; items: BudgetItem[] }[] = []
-    const labelOf = (e: BudgetItem) => {
-      if (!e.expense_date) return t('costs.noDate')
-      try { return new Date(e.expense_date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' }) } catch { return e.expense_date }
+    const entries: LedgerEntry[] = [
+      ...filtered.map(e => ({ kind: 'expense' as const, date: e.expense_date || '', e })),
+      ...filteredSettlements.map(s => ({ kind: 'payment' as const, date: (s.created_at || '').slice(0, 10), s })),
+    ]
+    const labelOf = (date: string) => {
+      if (!date) return t('costs.noDate')
+      try { return new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' }) } catch { return date }
     }
-    const sorted = filtered.slice().sort((a, b) => (b.expense_date || '').localeCompare(a.expense_date || ''))
-    for (const e of sorted) {
-      const day = labelOf(e)
+    // Newest day first; within a day, expenses before payments (insertion order).
+    const sorted = entries.slice().sort((a, b) => (b.date || '').localeCompare(a.date || ''))
+    const groups: { day: string; entries: LedgerEntry[] }[] = []
+    for (const en of sorted) {
+      const day = labelOf(en.date)
       let g = groups.find(x => x.day === day)
-      if (!g) { g = { day, items: [] }; groups.push(g) }
-      g.items.push(e)
+      if (!g) { g = { day, entries: [] }; groups.push(g) }
+      g.entries.push(en)
     }
     return groups
-  }, [filtered, locale, t])
+  }, [filtered, filteredSettlements, locale, t])
 
   // ── settle actions ──────────────────────────────────────────────────────
   const settleFlow = async (fromId: number, toId: number, amount: number) => {
@@ -280,14 +303,16 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
               {search ? t('costs.noMatch') : t('costs.emptyText')}
             </div>
           ) : dayGroups.map(g => {
-            const dtot = g.items.reduce((a, e) => a + baseTotal(e), 0)
+            const dtot = g.entries.reduce((a, en) => en.kind === 'expense' ? a + baseTotal(en.e) : a, 0)
             return (
               <div key={g.day} style={{ marginBottom: 22 }}>
                 <div className={labelCls} style={{ display: 'flex', alignItems: 'center', margin: '0 0 10px 4px' }}>
                   {g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 12 }}>{t('costs.spent', { amount: fmt(dtot) })}</span>
                 </div>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  {g.items.map(e => <ExpenseRow key={e.id} e={e} />)}
+                  {g.entries.map(en => en.kind === 'expense'
+                    ? <ExpenseRow key={'e' + en.e.id} e={en.e} />
+                    : <SettlementRow key={'s' + en.s.id} s={en.s} />)}
                 </div>
               </div>
             )
@@ -300,11 +325,13 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
               <div className={labelCls}>{t('costs.settleUp')} · <span className="text-content">{(settlement?.flows || []).length}</span></div>
-              <button disabled={!(settlement?.settlements || []).length} onClick={() => setHistOpen(true)}
-                className="text-content-muted bg-surface-secondary border border-edge disabled:opacity-40"
-                style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
-                <History size={13} /> {t('costs.history')}{(settlement?.settlements || []).length ? ` (${settlement!.settlements.length})` : ''}
-              </button>
+              {canEdit && (
+                <button onClick={() => setAddingPayment(true)}
+                  className="text-content-muted bg-surface-secondary border border-edge"
+                  style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+                  <Plus size={13} /> {t('costs.addPayment')}
+                </button>
+              )}
             </div>
             <SettleFlows />
           </div>
@@ -330,9 +357,11 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           onSaved={() => { setModalOpen(false); loadBudgetItems(tripId); loadSettlement() }} />
       )}
 
-      <Modal isOpen={histOpen} onClose={() => setHistOpen(false)} title={t('costs.settleHistory')} size="md">
-        <SettleHistory settlements={settlement?.settlements || []} fmt={fmt} Avatar={Avatar} name={personName} onUndo={undoSettlement} canEdit={canEdit} />
-      </Modal>
+      {(editingSettlement || addingPayment) && (
+        <SettlementModal tripId={tripId} people={people} me={me} editing={editingSettlement}
+          onClose={() => { setEditingSettlement(null); setAddingPayment(false) }}
+          onSaved={() => { setEditingSettlement(null); setAddingPayment(false); loadSettlement() }} />
+      )}
 
       <style>{`
         .costs-root {
@@ -438,7 +467,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
         <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, gap: 8 }}>
             <div className="text-content" style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em', display: 'flex', alignItems: 'baseline', gap: 8 }}>{t('costs.settleUp')} <span className="text-content-faint" style={{ fontSize: 12, fontWeight: 500 }}>{(settlement?.flows || []).length}</span></div>
-            <button disabled={!(settlement?.settlements || []).length} onClick={() => setHistOpen(true)} className="text-content-muted bg-surface-card border border-edge disabled:opacity-40" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 9, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><History size={13} /> {t('costs.history')}</button>
+            {canEdit && (
+              <button onClick={() => setAddingPayment(true)} className="text-content-muted bg-surface-card border border-edge" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 9, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><Plus size={13} /> {t('costs.addPayment')}</button>
+            )}
           </div>
           <SettleFlows />
         </div>
@@ -458,11 +489,13 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           {dayGroups.length === 0
             ? <div className="text-content-faint" style={{ textAlign: 'center', padding: '36px 16px', fontSize: 13 }}>{search ? t('costs.noMatch') : t('costs.emptyText')}</div>
             : dayGroups.map(g => {
-                const dtot = g.items.reduce((a, e) => a + baseTotal(e), 0)
+                const dtot = g.entries.reduce((a, en) => en.kind === 'expense' ? a + baseTotal(en.e) : a, 0)
                 return (
                   <div key={g.day} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                     <div className={labelCls} style={{ display: 'flex', alignItems: 'center', padding: '0 2px' }}>{g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 11.5 }}>{t('costs.spent', { amount: fmt(dtot) })}</span></div>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{g.items.map(e => <ExpenseRow key={e.id} e={e} />)}</div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{g.entries.map(en => en.kind === 'expense'
+                      ? <ExpenseRow key={'e' + en.e.id} e={en.e} />
+                      : <SettlementRow key={'s' + en.s.id} s={en.s} />)}</div>
                   </div>
                 )
               })}
@@ -490,11 +523,27 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const cur = curOf(e)
     const payers = (e.payers || []).filter(p => p.amount > 0)
     const net = round2(myPaidOf(e) - myShareOf(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 = baseTotal(e) > 0 && payers.length === 0
     return (
       <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
-        <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}><Icon size={21} /></span>
+        <span style={{ position: 'relative', width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}>
+          <Icon size={21} />
+          {isMobile && isUnfinished && (
+            <span title={t('costs.unfinishedHint')} style={{ position: 'absolute', bottom: -4, right: -4, width: 20, height: 20, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 800, lineHeight: 1, border: '2px solid var(--bg-card)' }}>!</span>
+          )}
+        </span>
         <div style={{ minWidth: 0 }}>
-          <div className="text-content" style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{e.name}</div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6 }}>
+            <span className="text-content" style={{ fontSize: 15, fontWeight: 600 }}>{e.name}</span>
+            {isUnfinished && !isMobile && (
+              <span title={t('costs.unfinishedHint')} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 6px', borderRadius: 999, background: 'rgba(217,119,6,0.14)', color: '#d97706', fontSize: 11, fontWeight: 700, flexShrink: 0 }}>
+                <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 800 }}>!</span>
+                {t('costs.unfinished')}
+              </span>
+            )}
+          </div>
           {payers.length > 0 && (
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 5 }}>
               {payers.map(p => (
@@ -514,7 +563,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
           <div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
             <div className="text-content" style={{ fontSize: 18, fontWeight: 600 }}>{fmt(baseTotal(e))}</div>
-            {(e.members || []).length > 0 && Math.abs(net) > 0.01 && (
+            {!isUnfinished && (e.members || []).length > 0 && Math.abs(net) > 0.01 && (
               <div style={{ fontSize: 12, marginTop: 2, fontWeight: 500, whiteSpace: 'nowrap', color: net > 0 ? '#16a34a' : '#dc2626' }}>
                 {net > 0 ? t('costs.youLent', { amount: fmt(net) }) : t('costs.youBorrowed', { amount: fmt(-net) })}
               </div>
@@ -531,6 +580,32 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     )
   }
 
+  // A settle-up payment as a ledger row — visually distinct from an expense, with
+  // inline edit + undo (reuses deleteSettlement) so it isn't buried in a modal.
+  function SettlementRow({ s }: { s: Settlement }) {
+    return (
+      <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
+        <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: 'rgba(22,163,74,0.12)', color: '#16a34a' }}><ArrowLeftRight size={21} /></span>
+        <div style={{ minWidth: 0 }}>
+          <div className="text-content" style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{t('costs.payment')}</div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }} title={`${personName(s.from_user_id)} → ${personName(s.to_user_id)}`}>
+            <Avatar id={s.from_user_id} size={20} /><ArrowRight size={13} className="text-content-faint" /><Avatar id={s.to_user_id} size={20} />
+            <span className="text-content-faint" style={{ fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{personName(s.from_user_id)} → {personName(s.to_user_id)}</span>
+          </div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
+          <div className="text-content" style={{ fontSize: 18, fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(s.amount)}</div>
+          {canEdit && (
+            <div className="exp-actions" style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
+              <button title={t('common.edit')} onClick={() => setEditingSettlement(s)} className="bg-surface-secondary border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer' }}><Pencil size={13} /></button>
+              <button title={t('costs.undo')} onClick={() => undoSettlement(s.id)} className="bg-surface-secondary border border-edge" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer', color: '#dc2626' }}><RotateCcw size={13} /></button>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   function BalancesList({ balances }: { balances: SettlementData['balances'] }) {
     const rows = people.map(p => balances.find(b => b.user_id === p.id) || { user_id: p.id, username: p.username, avatar_url: null, balance: 0 })
     const max = Math.max(1, ...rows.map(r => Math.abs(r.balance)))
@@ -562,14 +637,16 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
 
   function CategoryBreakdown() {
     const tot: Record<string, number> = {}
-    let grand = 0
-    for (const e of budgetItems) { const k = catMeta(e.category).key; tot[k] = (tot[k] || 0) + baseTotal(e); grand += baseTotal(e) }
+    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))
     if (rows.length === 0) return <div className="text-content-faint" style={{ fontSize: 12.5 }}>{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.
+    const maxCat = Math.max(0, ...rows.map(c => tot[c.key] || 0))
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
         {rows.map(c => {
-          const v = tot[c.key]; const pct = grand ? v / grand * 100 : 0
+          const v = tot[c.key]; const pct = maxCat ? 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 }} />
@@ -633,37 +710,75 @@ function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; A
   )
 }
 
-function SettleHistory({ settlements, fmt, Avatar, name, onUndo, canEdit }: {
-  settlements: Settlement[]; fmt: (v: number) => string; Avatar: (p: { id: number; size?: number }) => React.JSX.Element; name: (id: number) => string; onUndo: (id: number) => void; canEdit: boolean
+// Add or edit a settle-up payment (from / to / amount). Reachable inline from the
+// ledger row and from a manual "Add payment" button, so recording "I sent money to
+// X" works the same whether or not there's an outstanding expense behind it.
+function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
+  tripId: number; people: TripMember[]; me: number; editing: Settlement | null; onClose: () => void; onSaved: () => void
 }) {
   const { t } = useTranslation()
-  if (settlements.length === 0) return <div className="text-content-faint" style={{ textAlign: 'center', padding: 30, fontSize: 13 }}>{t('costs.noSettlements')}</div>
-  const total = settlements.reduce((a, s) => a + s.amount, 0)
+  const toast = useToast()
+  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) : '')
+  const [saving, setSaving] = useState(false)
+
+  const amt = parseFloat(amount) || 0
+  const valid = amt > 0 && fromId !== toId
+  const opts = people.map(p => ({ value: String(p.id), label: p.id === me ? t('costs.you') : p.username }))
+
+  const save = async () => {
+    if (!valid) return
+    setSaving(true)
+    const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt }
+    try {
+      if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
+      else await budgetApi.createSettlement(tripId, data)
+      onSaved()
+    } catch { toast.error(t('common.unknownError')) } finally { setSaving(false) }
+  }
+
+  const inputCls = 'w-full bg-surface-input border border-edge text-content'
+  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
+
   return (
-    <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 14px', borderRadius: 12, marginBottom: 14, background: 'rgba(22,163,74,0.1)', color: '#16a34a', fontWeight: 600, fontSize: 13 }}>
-        <span>{t('costs.paymentsSettled', { count: settlements.length })}</span><span>{fmt(total)}</span>
+    <Modal isOpen onClose={onClose} title={editing ? t('costs.editPayment') : t('costs.addPayment')} size="md"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button onClick={onClose} className="text-content-muted border border-edge" style={{ padding: '8px 16px', borderRadius: 10, background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
+          <button onClick={save} disabled={!valid || saving} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: !valid || saving ? 0.5 : 1 }}>{editing ? t('common.save') : t('costs.addPayment')}</button>
+        </div>
+      }>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+        <div>
+          <label className={labelCls}>{t('costs.from')}</label>
+          <CustomSelect value={fromId} onChange={v => setFromId(String(v))} options={opts} style={{ width: '100%' }} />
+        </div>
+        <div>
+          <label className={labelCls}>{t('costs.to')}</label>
+          <CustomSelect value={toId} onChange={v => setToId(String(v))} options={opts} style={{ width: '100%' }} />
+        </div>
+        <div>
+          <label className={labelCls}>{t('costs.amount')}</label>
+          <input type="text" inputMode="decimal" placeholder="0.00" value={amount}
+            onChange={e => setAmount(e.target.value.replace(',', '.'))} className={inputCls} style={{ borderRadius: 10, padding: '11px 13px', fontSize: 14, outline: 'none', fontWeight: 600 }} />
+        </div>
       </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-        {settlements.map(s => (
-          <div key={s.id} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '12px 14px', borderRadius: 12 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }} title={`${name(s.from_user_id)} → ${name(s.to_user_id)}`}>
-              <Avatar id={s.from_user_id} size={30} /><ArrowRight size={15} className="text-content-faint" /><Avatar id={s.to_user_id} size={30} />
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <span className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>{fmt(s.amount)}</span>
-              {canEdit && <button onClick={() => onUndo(s.id)} className="bg-surface-card border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><RotateCcw size={12} /> {t('costs.undo')}</button>}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
+    </Modal>
   )
 }
 
 // ── Add / edit expense modal ───────────────────────────────────────────────
-function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
-  tripId: number; base: string; people: TripMember[]; me: number; editing: BudgetItem | null; onClose: () => void; onSaved: () => void
+export interface ExpensePrefill {
+  name?: string
+  category?: string
+  amount?: number
+  reservationId?: number
+}
+
+export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClose, onSaved }: {
+  tripId: number; base: string; people: TripMember[]; me: number; editing: BudgetItem | null; prefill?: ExpensePrefill; onClose: () => void; onSaved: () => void
 }) {
   const { t, locale } = useTranslation()
   const toast = useToast()
@@ -671,34 +786,99 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
   const { convert } = useExchangeRates(base)
   const sym = (c: string) => SYMBOLS[c] || (c + ' ')
 
-  const [name, setName] = useState(editing?.name || '')
-  const [cat, setCat] = useState<string>(editing ? catMeta(editing.category).key : 'food')
+  const [name, setName] = useState(editing?.name || prefill?.name || '')
+  const [cat, setCat] = useState<string>(editing ? catMeta(editing.category).key : (prefill?.category || 'food'))
   const [currency, setCurrency] = useState((editing?.currency || base).toUpperCase())
   const [day, setDay] = useState(editing?.expense_date || new Date().toISOString().slice(0, 10))
-  const [payers, setPayers] = useState<Record<number, string>>(() => {
+  // One participant list: a person is "in" the split and may have paid an amount.
+  // Entering the total auto-distributes it equally across the non-pinned participants;
+  // touching an amount pins it and the rest rebalance so the paid amounts always sum
+  // back to the total. Leaving every amount blank = an unfinished expense (counts
+  // toward the trip total only, never settlements, until who-paid is filled in).
+  const [total, setTotal] = useState<string>(() => {
+    if (editing) return editing.total_price ? String(editing.total_price) : ''
+    if (prefill?.amount != null) return String(prefill.amount)
+    return ''
+  })
+  const [participants, setParticipants] = useState<Set<number>>(() =>
+    editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
+  const [paid, setPaid] = useState<Record<number, string>>(() => {
     const m: Record<number, string> = {}
-    for (const p of editing?.payers || []) m[p.user_id] = String(p.amount)
+    for (const p of editing?.payers || []) if (p.amount > 0) m[p.user_id] = String(p.amount)
     return m
   })
-  const [split, setSplit] = useState<Set<number>>(() =>
-    editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
+  // Amounts the user pinned by typing — kept out of the auto-rebalance. Existing
+  // payer amounts load as pinned so opening an expense never reshuffles them.
+  const [dirty, setDirty] = useState<Set<number>>(() =>
+    new Set((editing?.payers || []).filter(p => p.amount > 0).map(p => p.user_id)))
   const [saving, setSaving] = useState(false)
 
-  const payersTotal = Object.values(payers).reduce((a, v) => a + (parseFloat(v) || 0), 0)
-  const each = split.size > 0 ? payersTotal / split.size : 0
-  const valid = name.trim().length > 0 && split.size > 0 && payersTotal > 0
+  const totalNum = parseFloat(total) || 0
+  const paidSum = round2([...participants].reduce((a, id) => a + (parseFloat(paid[id]) || 0), 0))
+  const paidEntered = paidSum > 0
+  const balanced = Math.abs(paidSum - totalNum) < 0.01
+  const each = participants.size > 0 ? totalNum / participants.size : 0
+  // No participants = a recorded total with nobody to split with (e.g. a booking
+  // paid on-site later). It saves as an "unfinished" expense (#1286); selecting
+  // people only adds the who-owes-whom split on top.
+  const valid = name.trim().length > 0 && totalNum > 0 && (!paidEntered || balanced)
+
+  // Spread `amount` across `n` people in whole cents so the parts sum back exactly.
+  const splitCents = (amount: number, n: number): number[] => {
+    if (n <= 0) return []
+    const cents = Math.max(0, Math.round(amount * 100))
+    const base = Math.floor(cents / n), rem = cents - base * n
+    return Array.from({ length: n }, (_, i) => (base + (i < rem ? 1 : 0)) / 100)
+  }
+  // Recompute the non-pinned participants so every paid amount sums to the total.
+  const rebalance = (paidMap: Record<number, string>, dirtySet: Set<number>, parts: Set<number>, totalVal: number): Record<number, string> => {
+    const ids = [...parts]
+    const free = ids.filter(id => !dirtySet.has(id))
+    if (free.length === 0) return paidMap
+    const pinnedSum = ids.filter(id => dirtySet.has(id)).reduce((a, id) => a + (parseFloat(paidMap[id]) || 0), 0)
+    const shares = splitCents(totalVal - pinnedSum, free.length)
+    const next = { ...paidMap }
+    free.forEach((id, i) => { next[id] = shares[i] ? String(shares[i]) : '' })
+    return next
+  }
+
+  const onTotalChange = (v: string) => {
+    v = v.replace(',', '.')
+    setTotal(v)
+    setPaid(prev => rebalance(prev, dirty, participants, parseFloat(v) || 0))
+  }
+  const onPaidChange = (id: number, v: string) => {
+    v = v.replace(',', '.')
+    const nextDirty = new Set(dirty); nextDirty.add(id)
+    setDirty(nextDirty)
+    setPaid(prev => rebalance({ ...prev, [id]: v }, nextDirty, participants, totalNum))
+  }
+  const toggleParticipant = (id: number) => {
+    const nextParts = new Set(participants), nextDirty = new Set(dirty), nextPaid = { ...paid }
+    if (nextParts.has(id)) { nextParts.delete(id); nextDirty.delete(id); delete nextPaid[id] }
+    else nextParts.add(id)
+    setParticipants(nextParts); setDirty(nextDirty)
+    setPaid(rebalance(nextPaid, nextDirty, nextParts, totalNum))
+  }
 
   const save = async () => {
     if (!valid) return
     setSaving(true)
-    const payerList = Object.entries(payers).map(([uid, v]) => ({ user_id: Number(uid), amount: parseFloat(v) || 0 })).filter(p => p.amount > 0)
+    const payerList = [...participants]
+      .map(id => ({ user_id: id, amount: parseFloat(paid[id]) || 0 }))
+      .filter(p => p.amount > 0)
     const data = {
       name: name.trim(), category: cat,
       // Store the actual currency the amounts were entered in; conversion to the
       // viewer's display currency happens live (real rates), no manual rate.
       currency,
-      payers: payerList, member_ids: [...split],
+      payers: payerList, member_ids: [...participants],
       expense_date: day || null,
+      // Always record the entered total: the server keeps it as-is for an unfinished
+      // expense (no payers) and otherwise re-derives it from the payer sum (== total).
+      total_price: totalNum,
+      // Link a freshly-created expense to its booking (create-from-booking flow).
+      ...(!editing && prefill?.reservationId ? { reservation_id: prefill.reservationId } : {}),
     }
     try {
       if (editing) await updateBudgetItem(tripId, editing.id, data)
@@ -728,7 +908,9 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
           <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' }}>
             <span className="text-content-faint" style={{ fontSize: 15 }}>{sym(currency)}</span>
-            <span className="text-content" style={{ flex: 1, fontSize: 15, fontWeight: 600, paddingLeft: 6 }}>{payersTotal.toFixed(2)}</span>
+            <input type="text" inputMode="decimal" placeholder="0.00" value={total}
+              onChange={e => onTotalChange(e.target.value)}
+              className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 15, fontWeight: 600, paddingLeft: 6, width: '100%' }} />
           </div>
         </div>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
@@ -744,11 +926,11 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
           </div>
         </div>
 
-        {currency !== base && payersTotal > 0 && (
+        {currency !== base && totalNum > 0 && (
           <div className="bg-surface-secondary border border-edge text-content-muted" style={{ borderRadius: 10, padding: '10px 12px', fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-            <span>{formatMoney(payersTotal, currency, locale)}</span>
+            <span>{formatMoney(totalNum, currency, locale)}</span>
             <span className="text-content-faint">≈</span>
-            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(payersTotal, currency), base, locale)}</span>
+            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(totalNum, currency), base, locale)}</span>
             <span className="text-content-faint">· {t('costs.liveRate')}</span>
           </div>
         )}
@@ -773,39 +955,37 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
         <div>
           <label className={labelCls}>{t('costs.whoPaid')}</label>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
-            {people.map(p => (
-              <div key={p.id} className="bg-surface-secondary border border-edge" style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10 }}>
-                <span className="text-content" style={{ fontSize: 14, fontWeight: 500 }}>{p.id === me ? t('costs.you') : p.username}</span>
-                <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: 13 }}>{sym(currency)}</span>
-                  <input type="number" inputMode="decimal" min="0" step="0.01" placeholder="0.00" value={payers[p.id] || ''}
-                    onChange={e => setPayers(prev => ({ ...prev, [p.id]: e.target.value }))}
-                    className="text-content" style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 14, fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <label className={labelCls}>{t('costs.splitBetween')}</label>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
-            {people.map(p => {
-              const on = split.has(p.id)
+            {people.map((p, idx) => {
+              const on = participants.has(p.id)
               return (
-                <button key={p.id} onClick={() => setSplit(prev => { const n = new Set(prev); n.has(p.id) ? n.delete(p.id) : n.add(p.id); return n })}
-                  className={on ? 'bg-surface-card text-content border' : 'bg-surface-secondary text-content-faint border border-edge'}
-                  style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 13px 6px 7px', borderRadius: 999, fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', borderColor: on ? 'var(--text-primary)' : undefined }}>
-                  {p.avatar_url
-                    ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', opacity: on ? 1 : 0.45 }} />
-                    : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[people.findIndex(x => x.id === p.id) % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, opacity: on ? 1 : 0.45 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>}
-                  {p.id === me ? t('costs.you') : p.username}
-                </button>
+                <div key={p.id} className="bg-surface-secondary border border-edge" style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10, opacity: on ? 1 : 0.5 }}>
+                  <button onClick={() => toggleParticipant(p.id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', padding: 0, minWidth: 0, textAlign: 'left' }}>
+                    {p.avatar_url
+                      ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', flexShrink: 0, opacity: on ? 1 : 0.45 }} />
+                      : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[idx % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0, opacity: on ? 1 : 0.45 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>}
+                    <span className="text-content" style={{ fontSize: 14, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.id === me ? t('costs.you') : p.username}</span>
+                  </button>
+                  {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: 13 }}>{sym(currency)}</span>
+                      <input type="text" inputMode="decimal" placeholder="0.00" value={paid[p.id] || ''}
+                        onChange={e => onPaidChange(p.id, e.target.value)}
+                        className="text-content" style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 14, fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
+                    </div>
+                  ) : (
+                    <button onClick={() => toggleParticipant(p.id)} className="text-content-faint" style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, textAlign: 'right' }}>{t('costs.tapToInclude')}</button>
+                  )}
+                </div>
               )
             })}
           </div>
-          <div className="text-content-faint" style={{ marginTop: 10, fontSize: 12.5 }}>
-            {split.size === 0 ? t('costs.pickSomeone') : t('costs.splitSummary', { count: split.size, amount: sym(currency) + each.toFixed(2) })}
+          <div style={{ marginTop: 10, fontSize: 12.5, display: 'flex', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
+            <span className="text-content-faint">
+              {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: sym(currency) + each.toFixed(2) })}
+            </span>
+            {paidEntered
+              ? <span style={{ fontWeight: 600, color: balanced ? '#16a34a' : '#dc2626' }}>{sym(currency)}{paidSum.toFixed(2)} / {sym(currency)}{totalNum.toFixed(2)}</span>
+              : (totalNum > 0 && <span style={{ color: '#d97706', fontWeight: 600 }}>{t('costs.unfinishedHint')}</span>)}
           </div>
         </div>
       </div>

client/src/components/Budget/costsCategories.tsx

@@ -32,8 +32,32 @@ export const COST_CAT_META: Record<CostCategory, CostCategoryMeta> = {
 
 export const COST_CATEGORY_LIST: CostCategoryMeta[] = COST_CATEGORIES.map(k => COST_CAT_META[k])
 
-/** Map any stored category (incl. legacy free-text values) to a known meta. */
-export function catMeta(cat: string | null | undefined): CostCategoryMeta {
-  if (cat && cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
-  return COST_CAT_META.other
+/**
+ * Legacy / English free-text categories (and reservation type labels) mapped to
+ * the fixed keys. Bookings used to store labels like "Flight"/"Train"/"Other",
+ * which never matched the lowercase keys and fell through to `other`.
+ */
+const LEGACY_CATEGORY_MAP: Record<string, CostCategory> = {
+  flight: 'flights', flights: 'flights', plane: 'flights', flug: 'flights',
+  train: 'transport', bus: 'transport', car: 'transport', 'car rental': 'transport',
+  ferry: 'transport', boat: 'transport', taxi: 'transport', transfer: 'transport',
+  transport: 'transport', transportation: 'transport',
+  hotel: 'accommodation', accommodation: 'accommodation', lodging: 'accommodation', hostel: 'accommodation',
+  restaurant: 'food', food: 'food', dining: 'food', meal: 'food', meals: 'food',
+  grocery: 'groceries', groceries: 'groceries',
+  activity: 'activities', activities: 'activities',
+  sightseeing: 'sightseeing', sights: 'sightseeing',
+  shop: 'shopping', shopping: 'shopping',
+  fee: 'fees', fees: 'fees',
+  health: 'health', medical: 'health',
+  tip: 'tips', tips: 'tips',
+  other: 'other', misc: 'other',
+}
+
+/** Map any stored category (incl. legacy/localized free-text values) to a known meta. */
+export function catMeta(cat: string | null | undefined): CostCategoryMeta {
+  if (!cat) return COST_CAT_META.other
+  if (cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
+  const mapped = LEGACY_CATEGORY_MAP[cat.trim().toLowerCase()]
+  return mapped ? COST_CAT_META[mapped] : COST_CAT_META.other
 }

client/src/components/Collab/CollabNotes.test.tsx

@@ -175,7 +175,7 @@ describe('CollabNotes', () => {
     expect(document.body).toBeInTheDocument();
   });
 
-  it('FE-COMP-NOTES-013: delete note calls DELETE API and removes it from grid', async () => {
+  it('FE-COMP-NOTES-013: deleting a note asks for confirmation, then calls DELETE API and removes it', async () => {
     const user = userEvent.setup();
     server.use(
       http.get('/api/trips/1/collab/notes', () =>
@@ -193,8 +193,11 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Remove Me');
-    const deleteBtn = screen.getByTitle('Delete');
-    await user.click(deleteBtn);
+    await user.click(screen.getByTitle('Delete'));
+    // Deleting now asks for confirmation first — the note stays until confirmed.
+    expect(screen.getByText('Delete note?')).toBeInTheDocument();
+    expect(screen.getByText('Remove Me')).toBeInTheDocument();
+    await user.click(document.querySelector('button.bg-red-600') as HTMLElement);
     await waitFor(() => expect(screen.queryByText('Remove Me')).not.toBeInTheDocument());
   });
 

client/src/components/Collab/CollabNotes.tsx

@@ -10,6 +10,7 @@ import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
+import ConfirmDialog from '../shared/ConfirmDialog'
 import type { User } from '../../types'
 import type { CollabNote } from './CollabNotes.types'
 import { FONT, NOTE_COLORS } from './CollabNotes.constants'
@@ -44,6 +45,7 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
   const [previewFile, setPreviewFile] = useState(null)
   const [showSettings, setShowSettings] = useState(false)
   const [activeCategory, setActiveCategory] = useState(null)
+  const [pendingDeleteNoteId, setPendingDeleteNoteId] = useState<number | null>(null)
 
   // Empty categories (no notes yet) stored in localStorage
   const [emptyCategories, setEmptyCategories] = useState(() => {
@@ -231,6 +233,7 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
     activeCategory, setActiveCategory, categoryColors, getCategoryColor,
     handleCreateNote, handleUpdateNote, saveCategoryColors, handleEditSubmit,
     handleDeleteNoteFile, handleDeleteNote, categories, sortedNotes,
+    pendingDeleteNoteId, setPendingDeleteNoteId,
   }
 }
 
@@ -319,7 +322,7 @@ function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t
 
 function CollabNotesGrid(S: NotesState) {
   const {
-    sortedNotes, currentUser, canEdit, handleUpdateNote, handleDeleteNote,
+    sortedNotes, currentUser, canEdit, handleUpdateNote, setPendingDeleteNoteId,
     setEditingNote, setViewingNote, setPreviewFile, getCategoryColor, tripId, t,
   } = S
   return (
@@ -352,7 +355,7 @@ function CollabNotesGrid(S: NotesState) {
               currentUser={currentUser}
               canEdit={canEdit}
               onUpdate={handleUpdateNote}
-              onDelete={handleDeleteNote}
+              onDelete={setPendingDeleteNoteId}
               onEdit={setEditingNote}
               onView={setViewingNote}
               onPreviewFile={setPreviewFile}
@@ -470,6 +473,7 @@ export default function CollabNotes(props: CollabNotesProps) {
     viewingNote, showNewModal, editingNote, previewFile, showSettings,
     setShowNewModal, setEditingNote, setPreviewFile, setShowSettings,
     handleCreateNote, handleEditSubmit, handleDeleteNoteFile, saveCategoryColors, handleUpdateNote,
+    handleDeleteNote, pendingDeleteNoteId, setPendingDeleteNoteId,
   } = S
 
   if (loading) return <CollabNotesLoading {...S} />
@@ -527,6 +531,15 @@ export default function CollabNotes(props: CollabNotesProps) {
           t={t}
         />
       )}
+
+      {/* Confirm: delete a collab note — guards against accidental deletion */}
+      <ConfirmDialog
+        isOpen={pendingDeleteNoteId !== null}
+        onClose={() => setPendingDeleteNoteId(null)}
+        onConfirm={() => { if (pendingDeleteNoteId !== null) handleDeleteNote(pendingDeleteNoteId) }}
+        title={t('collab.notes.confirmDeleteTitle')}
+        message={t('collab.notes.confirmDeleteBody')}
+      />
     </div>
   )
 }

client/src/components/Collab/CollabNotesCard.tsx

@@ -16,7 +16,7 @@ interface NoteCardProps {
   currentUser: User
   canEdit: boolean
   onUpdate: (noteId: number, data: Partial<CollabNote>) => Promise<void>
-  onDelete: (noteId: number) => Promise<void>
+  onDelete: (noteId: number) => void
   onEdit: (note: CollabNote) => void
   onView: (note: CollabNote) => void
   onPreviewFile: (file: NoteFile) => void

client/src/components/Journey/JourneyMapAuto.tsx

@@ -1,7 +1,11 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { forwardRef, lazy, Suspense, useImperativeHandle, useRef } from 'react'
 import { useSettingsStore } from '../../store/settingsStore'
 import JourneyMap, { type JourneyMapHandle } from './JourneyMap'
-import JourneyMapGL, { type JourneyMapGLHandle } from './JourneyMapGL'
+import type { JourneyMapGLHandle } from './JourneyMapGL'
+
+// Lazy-load the GL renderer (and its ~230 KB gzip engine) so Leaflet-only
+// installs never download it — it ships only once a GL provider is picked.
+const JourneyMapGL = lazy(() => import('./JourneyMapGL'))
 
 // Unified handle — both providers expose the same three methods.
 export type JourneyMapAutoHandle = JourneyMapHandle
@@ -37,8 +41,9 @@ const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyM
   const glRef = useRef<JourneyMapGLHandle>(null)
 
   // Fall back to Leaflet when the user selected Mapbox GL but hasn't
-  // supplied a token yet — otherwise the map would just show a stub.
-  const useGL = provider === 'mapbox-gl' && !!token
+  // supplied a token yet. MapLibre/OpenFreeMap is tokenless.
+  const useGL = provider === 'maplibre-gl' || (provider === 'mapbox-gl' && !!token)
+  const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl' : 'mapbox-gl'
 
   useImperativeHandle(ref, () => ({
     highlightMarker: (id) => (useGL ? glRef.current : leafletRef.current)?.highlightMarker(id),
@@ -47,8 +52,12 @@ const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyM
   }), [useGL])
 
   if (useGL) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return <JourneyMapGL ref={glRef} {...(props as any)} />
+    return (
+      <Suspense fallback={null}>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <JourneyMapGL ref={glRef} {...(props as any)} glProvider={glProvider} />
+      </Suspense>
+    )
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return <JourneyMap ref={leafletRef} {...(props as any)} />

client/src/components/Journey/JourneyMapGL.tsx

@@ -1,8 +1,11 @@
 import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
 import mapboxgl from 'mapbox-gl'
+import maplibregl from 'maplibre-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import { useSettingsStore } from '../../store/settingsStore'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
+import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from '../Map/glProviders'
 
 export interface JourneyMapGLHandle {
   highlightMarker: (id: string | null) => void
@@ -32,6 +35,7 @@ interface Props {
   onMarkerClick?: (id: string, type?: string) => void
   fullScreen?: boolean
   paddingBottom?: number
+  glProvider?: GlMapProvider
 }
 
 interface Item {
@@ -95,8 +99,10 @@ function ensureJourneyPopupStyle() {
   const s = document.createElement('style')
   s.id = 'trek-journey-popup-style'
   s.textContent = `
-    .mapboxgl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content {
+    .mapboxgl-popup.trek-journey-popup,
+    .maplibregl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content,
+    .maplibregl-popup.trek-journey-popup .maplibregl-popup-content {
       padding: 9px 14px 10px;
       border-radius: 14px;
       background: rgba(255, 255, 255, 0.94);
@@ -108,20 +114,24 @@ function ensureJourneyPopupStyle() {
       min-width: 160px;
       max-width: 280px;
     }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-content {
+    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-content,
+    .maplibregl-popup.trek-journey-popup.trek-dark .maplibregl-popup-content {
       background: rgba(24, 24, 27, 0.88);
       border-color: rgba(255, 255, 255, 0.08);
       color: #FAFAFA;
     }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-tip {
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-tip,
+    .maplibregl-popup.trek-journey-popup .maplibregl-popup-tip {
       border-top-color: rgba(255, 255, 255, 0.94);
       border-bottom-color: rgba(255, 255, 255, 0.94);
     }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-tip {
+    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-tip,
+    .maplibregl-popup.trek-journey-popup.trek-dark .maplibregl-popup-tip {
       border-top-color: rgba(24, 24, 27, 0.88);
       border-bottom-color: rgba(24, 24, 27, 0.88);
     }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-close-button { display: none; }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-close-button,
+    .maplibregl-popup.trek-journey-popup .maplibregl-popup-close-button { display: none; }
     .trek-journey-popup-title {
       font-size: 13.5px;
       font-weight: 600;
@@ -132,7 +142,8 @@ function ensureJourneyPopupStyle() {
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title { color: #FAFAFA; }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title,
+    .maplibregl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title { color: #FAFAFA; }
     .trek-journey-popup-sub {
       display: flex;
       align-items: baseline;
@@ -143,7 +154,8 @@ function ensureJourneyPopupStyle() {
       line-height: 1.35;
       white-space: nowrap;
     }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub { color: #A1A1AA; }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub,
+    .maplibregl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub { color: #A1A1AA; }
     .trek-journey-popup-place {
       min-width: 0;
       overflow: hidden;
@@ -194,20 +206,29 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
 const EMPTY_TRAIL: { lat: number; lng: number }[] = []
 
 const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL(
-  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom },
+  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl' },
   ref
 ) {
   const stableTrail = trail || EMPTY_TRAIL
-  const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
+  const rawMaplibreStyle = useSettingsStore(s => s.settings.maplibre_style || '')
   const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
   const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
   const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
+  const mapLang = useSettingsStore(s => s.settings.language)
+  const isMapLibre = glProvider === 'maplibre-gl'
+  const gl = (isMapLibre ? maplibregl : mapboxgl) as any
+  const glStyle = styleForActiveProvider(glProvider, rawMapboxStyle, rawMaplibreStyle)
+  const enableMapbox3d = !isMapLibre && mapbox3d
   const containerRef = useRef<HTMLDivElement>(null)
-  const mapRef = useRef<mapboxgl.Map | null>(null)
-  const markersRef = useRef<Map<string, mapboxgl.Marker>>(new Map())
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mapRef = useRef<any | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const markersRef = useRef<Map<string, any>>(new Map())
   const itemsRef = useRef<Item[]>([])
   const highlightedRef = useRef<string | null>(null)
-  const popupRef = useRef<mapboxgl.Popup | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const popupRef = useRef<any | null>(null)
   const onMarkerClickRef = useRef(onMarkerClick)
   onMarkerClickRef.current = onMarkerClick
   const darkRef = useRef(dark)
@@ -247,7 +268,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       const el = popupRef.current.getElement()
       if (el) el.classList.toggle('trek-dark', !!darkRef.current)
     } else {
-      popupRef.current = new mapboxgl.Popup({
+      popupRef.current = new gl.Popup({
         closeButton: false,
         closeOnClick: false,
         closeOnMove: false,
@@ -260,7 +281,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
         .setHTML(html)
         .addTo(mapRef.current)
     }
-  }, [])
+  }, [gl])
 
   const hidePopup = useCallback(() => {
     if (popupRef.current) {
@@ -305,11 +326,11 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       mapRef.current.flyTo({
         center: marker.getLngLat(),
         zoom: Math.max(mapRef.current.getZoom(), 14),
-        pitch: mapbox3d ? 45 : 0,
+        pitch: enableMapbox3d ? 45 : 0,
         duration: 600,
       })
     } catch { /* map not yet ready */ }
-  }, [highlightMarker, mapbox3d])
+  }, [highlightMarker, enableMapbox3d])
 
   const invalidateSize = useCallback(() => {
     try { mapRef.current?.resize() } catch { /* map not yet ready */ }
@@ -320,39 +341,46 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
   // Build map once per style/token change. Markers and layers are rebuilt
   // inside the same effect so they stay in sync with the active style.
   useEffect(() => {
-    if (!containerRef.current || !mapboxToken) return
-    mapboxgl.accessToken = mapboxToken
+    if (!containerRef.current || (!isMapLibre && !mapboxToken)) return
+    if (!isMapLibre) mapboxgl.accessToken = mapboxToken
 
     const items = buildItems(entries)
     itemsRef.current = items
 
-    const bounds = new mapboxgl.LngLatBounds()
+    const bounds = new gl.LngLatBounds()
     items.forEach(i => bounds.extend([i.lng, i.lat]))
     stableTrail.forEach(p => bounds.extend([p.lng, p.lat]))
     const hasPoints = items.length > 0 || stableTrail.length > 0
 
-    const map = new mapboxgl.Map({
+    const mapOptions: Record<string, unknown> = {
       container: containerRef.current,
-      style: mapboxStyle,
+      style: glStyle,
       center: hasPoints ? bounds.getCenter() : [0, 30],
       zoom: hasPoints ? 2 : 1,
-      pitch: mapbox3d && fullScreen ? 45 : 0,
+      pitch: enableMapbox3d && fullScreen ? 45 : 0,
       attributionControl: true,
       antialias: mapboxQuality,
-      projection: mapboxQuality ? 'globe' : 'mercator',
-    })
+    }
+    if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
+
+    const map = new gl.Map(mapOptions as any)
     mapRef.current = map
 
     map.on('load', () => {
-      if (mapbox3d) {
-        if (!isStandardFamily(mapboxStyle) && wantsTerrain(mapboxStyle)) addTerrainAndSky(map)
-        if (supportsCustom3d(mapboxStyle)) addCustom3dBuildings(map, !!darkRef.current)
+      if (enableMapbox3d) {
+        if (!isStandardFamily(glStyle) && wantsTerrain(glStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(glStyle)) addCustom3dBuildings(map, !!darkRef.current)
       }
       // Flatten Mapbox Standard's built-in DEM so HTML markers (at Z=0)
       // stay pinned to their coordinates at every zoom and pitch.
-      if (mapboxStyle === 'mapbox://styles/mapbox/standard') {
+      if (glStyle === MAPBOX_DEFAULT_STYLE) {
         try { map.setTerrain(null) } catch { /* noop */ }
       }
+      // Pin the basemap label language to the UI language so labels don't fall back to the
+      // browser/OS locale and stack multiple scripts per place (#1299).
+      if (!isMapLibre && isStandardFamily(glStyle)) {
+        try { map.setConfigProperty('basemap', 'language', basemapLanguage(mapLang)) } catch { /* style/SDK may not support it */ }
+      }
 
       // route trail — dashed line connecting entries in time order
       if (items.length > 1) {
@@ -383,7 +411,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       // markers
       items.forEach((item) => {
         const el = markerHtml(item.dayColor, item.dayLabel, false)
-        const marker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
+        const marker = new gl.Marker({ element: el, anchor: 'bottom' })
           .setLngLat([item.lng, item.lat])
           .addTo(map)
         el.addEventListener('click', (ev) => {
@@ -400,7 +428,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
           map.fitBounds(bounds, {
             padding: { top: 50, bottom: pb, left: 50, right: 50 },
             maxZoom: 16,
-            pitch: mapbox3d && fullScreen ? 45 : 0,
+            pitch: enableMapbox3d && fullScreen ? 45 : 0,
             duration: 0,
           })
         } catch { /* empty bounds */ }
@@ -418,7 +446,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       try { map.remove() } catch { /* noop */ }
       mapRef.current = null
     }
-  }, [entries, stableTrail, mapboxStyle, mapboxToken, mapbox3d, mapboxQuality, fullScreen, paddingBottom])
+  }, [entries, stableTrail, glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality, fullScreen, paddingBottom])
 
   // external activeMarkerId → highlight + flyTo
   useEffect(() => {
@@ -431,15 +459,15 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
         mapRef.current.flyTo({
           center: marker.getLngLat(),
           zoom: Math.max(mapRef.current.getZoom(), 12),
-          pitch: mapbox3d && fullScreen ? 45 : 0,
+          pitch: enableMapbox3d && fullScreen ? 45 : 0,
           duration: 500,
         })
       } catch { /* map not ready */ }
     }, 50)
     return () => clearTimeout(t)
-  }, [activeMarkerId, highlightMarker, mapbox3d, fullScreen])
+  }, [activeMarkerId, highlightMarker, enableMapbox3d, fullScreen])
 
-  if (!mapboxToken) {
+  if (!isMapLibre && !mapboxToken) {
     return (
       <div
         style={{ position: 'relative', height: height === 9999 ? '100%' : height, width: '100%', borderRadius: 'inherit', overflow: 'hidden' }}

client/src/components/Journey/MarkdownToolbar.test.tsx

@@ -1,6 +1,6 @@
 // FE-COMP-MDTOOLBAR-001 to FE-COMP-MDTOOLBAR-006
 
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
 import { render, screen, fireEvent } from '../../../tests/helpers/render';
 import MarkdownToolbar from './MarkdownToolbar';
 import React from 'react';
@@ -16,10 +16,10 @@ function createTextareaRef(value = '', selectionStart = 0, selectionEnd = 0) {
 }
 
 describe('MarkdownToolbar', () => {
-  let onUpdate: ReturnType<typeof vi.fn>;
+  let onUpdate: Mock<(value: string) => void>;
 
   beforeEach(() => {
-    onUpdate = vi.fn();
+    onUpdate = vi.fn<(value: string) => void>();
   });
 
   it('FE-COMP-MDTOOLBAR-001: renders all 8 toolbar buttons', () => {

client/src/components/Layout/BottomNav.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-006
+// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-010
 
 vi.mock('../../api/websocket', () => ({
   connect: vi.fn(),
@@ -30,6 +30,7 @@ const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@exampl
 beforeEach(() => {
   resetAllStores();
   mockNavigate.mockClear();
+  sessionStorage.clear();
   seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
 });
 
@@ -79,4 +80,37 @@ describe('BottomNav', () => {
     render(<BottomNav />);
     expect(screen.queryByText('Foo Addon')).not.toBeInTheDocument();
   });
+
+  // Context-aware "+" inside a trip — #1349
+  it('FE-COMP-BOTTOMNAV-007: in a trip, the "+" adds a place by default (plan tab)', async () => {
+    const user = userEvent.setup();
+    sessionStorage.setItem('trip-tab-42', 'plan');
+    render(<BottomNav />, { initialEntries: ['/trips/42'] });
+    await user.click(screen.getByRole('button', { name: 'Add Place/Activity' }));
+    expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=place');
+  });
+
+  it('FE-COMP-BOTTOMNAV-008: Bookings tab → "+" creates a reservation', async () => {
+    const user = userEvent.setup();
+    sessionStorage.setItem('trip-tab-42', 'buchungen');
+    render(<BottomNav />, { initialEntries: ['/trips/42'] });
+    await user.click(screen.getByRole('button', { name: 'Manual Booking' }));
+    expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=reservation');
+  });
+
+  it('FE-COMP-BOTTOMNAV-009: Transports tab → "+" creates a transport', async () => {
+    const user = userEvent.setup();
+    sessionStorage.setItem('trip-tab-42', 'transports');
+    render(<BottomNav />, { initialEntries: ['/trips/42'] });
+    await user.click(screen.getByRole('button', { name: 'Manual Transport' }));
+    expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=transport');
+  });
+
+  it('FE-COMP-BOTTOMNAV-010: Costs tab → "+" creates an expense', async () => {
+    const user = userEvent.setup();
+    sessionStorage.setItem('trip-tab-42', 'finanzplan');
+    render(<BottomNav />, { initialEntries: ['/trips/42'] });
+    await user.click(screen.getByRole('button', { name: 'Add expense' }));
+    expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=expense');
+  });
 });

client/src/components/Layout/BottomNav.tsx

@@ -25,12 +25,15 @@ function useCreateAction(): { label: string; run: () => void } {
   const onJourneyList = useMatch('/journey')
 
   if (inTrip) {
-    // On the Costs tab the "+" adds an expense; otherwise it adds a place.
-    const tripTab = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem(`trip-tab-${inTrip.params.id}`) : null
-    if (tripTab === 'finanzplan') {
-      return { label: t('costs.addExpense'), run: () => navigate(`/trips/${inTrip.params.id}?create=expense`) }
-    }
-    return { label: t('places.addPlace'), run: () => navigate(`/trips/${inTrip.params.id}?create=place`) }
+    // The "+" is context-aware per active tab: Bookings → reservation,
+    // Transports → transport, Costs → expense. Tabs without a create modal
+    // (lists / files / collab) fall through to adding a place. #1349
+    const id = inTrip.params.id
+    const tripTab = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem(`trip-tab-${id}`) : null
+    if (tripTab === 'finanzplan') return { label: t('costs.addExpense'), run: () => navigate(`/trips/${id}?create=expense`) }
+    if (tripTab === 'buchungen') return { label: t('reservations.addManual'), run: () => navigate(`/trips/${id}?create=reservation`) }
+    if (tripTab === 'transports') return { label: t('transport.addManual'), run: () => navigate(`/trips/${id}?create=transport`) }
+    return { label: t('places.addPlace'), run: () => navigate(`/trips/${id}?create=place`) }
   }
   if (inJourney) {
     return { label: t('journey.detail.addEntry'), run: () => navigate(`/journey/${inJourney.params.id}?create=entry`) }

client/src/components/Layout/OfflineBanner.test.tsx

@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import { render } from '../../../tests/helpers/render'
+import OfflineBanner from './OfflineBanner'
+
+vi.mock('../../sync/mutationQueue', () => ({
+  mutationQueue: {
+    pendingCount: vi.fn(),
+    failedCount: vi.fn(),
+  },
+}))
+
+import { mutationQueue } from '../../sync/mutationQueue'
+
+const pendingCount = mutationQueue.pendingCount as ReturnType<typeof vi.fn>
+const failedCount = mutationQueue.failedCount as ReturnType<typeof vi.fn>
+
+afterEach(() => {
+  vi.clearAllMocks()
+  Object.defineProperty(navigator, 'onLine', { value: true, writable: true, configurable: true })
+})
+
+describe('OfflineBanner (B3 surface)', () => {
+  it('shows the failed pill when failedCount > 0 while online', async () => {
+    pendingCount.mockResolvedValue(0)
+    failedCount.mockResolvedValue(2)
+
+    render(<OfflineBanner />)
+
+    expect(await screen.findByText(/2 changes failed to sync/i)).toBeInTheDocument()
+  })
+
+  it('stays hidden when online with nothing pending or failed', async () => {
+    pendingCount.mockResolvedValue(0)
+    failedCount.mockResolvedValue(0)
+
+    const { container } = render(<OfflineBanner />)
+    // Give the async poll a tick to resolve.
+    await waitFor(() => expect(failedCount).toHaveBeenCalled())
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+})

client/src/components/Layout/OfflineBanner.tsx

@@ -2,6 +2,7 @@
  * OfflineBanner — connectivity + sync state indicator.
  *
  * States:
+ *   N failed            →  red pill   "N changes failed to sync" (takes priority)
  *   offline + N queued  →  amber pill "Offline · N queued"
  *   offline + 0 queued  →  amber pill "Offline"
  *   online  + N pending →  blue pill  "Syncing N…"
@@ -12,7 +13,7 @@
  * headers. On mobile it hovers just above the bottom tab bar.
  */
 import React, { useState, useEffect } from 'react'
-import { WifiOff, RefreshCw } from 'lucide-react'
+import { WifiOff, RefreshCw, AlertTriangle } from 'lucide-react'
 import { mutationQueue } from '../../sync/mutationQueue'
 
 const POLL_MS = 3_000
@@ -20,6 +21,7 @@ const POLL_MS = 3_000
 export default function OfflineBanner(): React.ReactElement | null {
   const [isOnline, setIsOnline] = useState(navigator.onLine)
   const [pendingCount, setPendingCount] = useState(0)
+  const [failedCount, setFailedCount] = useState(0)
 
   useEffect(() => {
     const onOnline  = () => setIsOnline(true)
@@ -35,26 +37,36 @@ export default function OfflineBanner(): React.ReactElement | null {
   useEffect(() => {
     let cancelled = false
     async function poll() {
-      const n = await mutationQueue.pendingCount()
-      if (!cancelled) setPendingCount(n)
+      const [n, failed] = await Promise.all([
+        mutationQueue.pendingCount(),
+        mutationQueue.failedCount(),
+      ])
+      if (!cancelled) {
+        setPendingCount(n)
+        setFailedCount(failed)
+      }
     }
     poll()
     const id = setInterval(poll, POLL_MS)
     return () => { cancelled = true; clearInterval(id) }
   }, [])
 
-  const hidden = isOnline && pendingCount === 0
+  const hidden = isOnline && pendingCount === 0 && failedCount === 0
   if (hidden) return null
 
   const offline = !isOnline
-  const bg    = offline ? '#92400e' : '#1e40af'
+  // Failed mutations are the most important signal — they mean data was dropped.
+  const failed = failedCount > 0
+  const bg    = failed ? '#b91c1c' : offline ? '#92400e' : '#1e40af'
   const text  = '#fff'
 
-  const label = offline
-    ? pendingCount > 0
-      ? `Offline · ${pendingCount} queued`
-      : 'Offline'
-    : `Syncing ${pendingCount}…`
+  const label = failed
+    ? `${failedCount} change${failedCount !== 1 ? 's' : ''} failed to sync`
+    : offline
+      ? pendingCount > 0
+        ? `Offline · ${pendingCount} queued`
+        : 'Offline'
+      : `Syncing ${pendingCount}…`
 
   return (
     <div
@@ -82,9 +94,11 @@ export default function OfflineBanner(): React.ReactElement | null {
         pointerEvents: 'none',
       }}
     >
-      {offline
-        ? <WifiOff size={12} />
-        : <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
+      {failed
+        ? <AlertTriangle size={12} />
+        : offline
+          ? <WifiOff size={12} />
+          : <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
       }
       {label}
     </div>

client/src/components/Map/MapCompassPill.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import { Navigation } from 'lucide-react'
+
+export interface CompassMap {
+  getBearing: () => number
+  on: (type: 'rotate', listener: () => void) => unknown
+  off: (type: 'rotate', listener: () => void) => unknown
+  easeTo: (options: { bearing: number; pitch: number; duration: number }) => unknown
+}
+
+/**
+ * Round compass pill for the GL planner map. The map can be rotated and
+ * pitched, so this shows the current bearing (the arrow points to north) and snaps
+ * the camera back to north + flat on click. Rendered next to the POI "explore" pill
+ * (GL only) and built as the SAME frosted shell (padding 4 around a 34px button)
+ * so its height and transparency match the POI pill exactly.
+ */
+export function MapCompassPill({ map }: { map: CompassMap }) {
+  const [bearing, setBearing] = useState(() => map.getBearing())
+
+  useEffect(() => {
+    const update = () => setBearing(map.getBearing())
+    update()
+    map.on('rotate', update)
+    return () => { map.off('rotate', update) }
+  }, [map])
+
+  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: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
+    }}>
+      <button
+        type="button"
+        onClick={() => map.easeTo({ bearing: 0, pitch: 0, duration: 300 })}
+        aria-label="Reset north"
+        className="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' }}
+      >
+        <Navigation size={16} strokeWidth={2} style={{ transform: `rotate(${-bearing}deg)`, transition: 'transform 0.1s linear' }} />
+      </button>
+    </div>
+  )
+}

client/src/components/Map/MapView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo } from 'react'
 import DOM from 'react-dom'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap, Tooltip } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -10,6 +10,7 @@ import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import ReservationOverlay from './ReservationOverlay'
 import type { Reservation } from '../../types'
+import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -118,6 +119,44 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
   return fallbackIcon
 }
 
+// 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) {
+  const cached = poiIconCache.get(category)
+  if (cached) return cached
+  const cat = POI_CATEGORY_BY_KEY[category]
+  const color = cat?.color || '#6b7280'
+  const svg = cat ? renderToStaticMarkup(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>`,
+    iconSize: [26, 26],
+    iconAnchor: [13, 13],
+    tooltipAnchor: [0, -14],
+  })
+  poiIconCache.set(category, icon)
+  return icon
+}
+
+// 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 }) {
+  const map = useMap()
+  useEffect(() => {
+    if (!onViewportChange) return
+    const emit = () => {
+      const b = map.getBounds()
+      onViewportChange({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
+    }
+    map.whenReady(emit) // ensure the first bbox is captured once the map is laid out
+    map.on('moveend', emit)
+    map.on('zoomend', emit)
+    return () => { map.off('moveend', emit); map.off('zoomend', emit) }
+  }, [map, onViewportChange])
+  return null
+}
+
 interface SelectionControllerProps {
   places: Place[]
   selectedPlaceId: number | null
@@ -131,10 +170,21 @@ function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }
 
   useEffect(() => {
     if (selectedPlaceId && selectedPlaceId !== prev.current) {
-      // Pan to the selected place without changing zoom
+      // Pan to the selected place without changing zoom. Offset the centre by the
+      // side-panel + bottom-inspector padding so the pin lands in the middle of the
+      // *visible* map area rather than the geometric centre (where the bottom panel
+      // would cover it). Reuses the same paddingOpts the fit-bounds path uses.
       const selected = places.find(p => p.id === selectedPlaceId)
-      if (selected?.lat && selected?.lng) {
-        map.panTo([selected.lat, selected.lng], { animate: true })
+      if (selected?.lat != null && selected?.lng != null) {
+        const latlng: [number, number] = [selected.lat, selected.lng]
+        const tl = paddingOpts.paddingTopLeft as [number, number] | undefined
+        const br = paddingOpts.paddingBottomRight as [number, number] | undefined
+        if (tl && br && typeof map.project === 'function' && typeof map.unproject === 'function') {
+          const point = map.project(latlng).add([(br[0] - tl[0]) / 2, (br[1] - tl[1]) / 2])
+          map.panTo(map.unproject(point), { animate: true })
+        } else {
+          map.panTo(latlng, { animate: true })
+        }
       }
     }
     prev.current = selectedPlaceId
@@ -356,7 +406,21 @@ export const MapView = memo(function MapView({
   showReservationStats = false,
   visibleConnectionIds = [] as number[],
   onReservationClick,
+  pois = [] as Poi[],
+  onPoiClick,
+  onViewportChange,
 }: any) {
+  const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
+    <Marker
+      key={`poi-${poi.osm_id}`}
+      position={[poi.lat, poi.lng]}
+      icon={createPoiIcon(poi.category)}
+      zIndexOffset={500}
+      eventHandlers={{ click: () => onPoiClick?.(poi) }}
+    >
+      <Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip">{poi.name}</Tooltip>
+    </Marker>
+  )), [pois, onPoiClick])
   const visibleReservations = useMemo(() => {
     if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
     const set = new Set(visibleConnectionIds)
@@ -505,7 +569,12 @@ export const MapView = memo(function MapView({
   // 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
-  const locationButtonBottom = 'calc(var(--bottom-nav-h, 84px) + 12px)'
+  // When the day-detail panel is open it slides up over the map (bottom: navh+20,
+  // height var(--day-panel-h)) and covers the button's band, so lift the button
+  // above it; otherwise keep the plain bottom-nav offset. #1348
+  const locationButtonBottom = hasDayDetail
+    ? 'calc(var(--bottom-nav-h, 84px) + 20px + var(--day-panel-h, 0px) + 12px)'
+    : 'calc(var(--bottom-nav-h, 84px) + 12px)'
 
   return (
     <>
@@ -532,6 +601,7 @@ export const MapView = memo(function MapView({
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />
+      <ViewportController onViewportChange={onViewportChange} />
       <LeafletLocationLayer position={userPosition} mode={trackingMode} />
 
       <MarkerClusterGroup
@@ -572,6 +642,8 @@ export const MapView = memo(function MapView({
         showStats={showReservationStats}
         onEndpointClick={onReservationClick}
       />
+
+      {poiMarkers}
     </MapContainer>
     {isMobile && <LocationButton
       mode={trackingMode}

client/src/components/Map/MapViewAuto.tsx

@@ -1,16 +1,36 @@
+import { lazy, Suspense } from 'react'
 import { useSettingsStore } from '../../store/settingsStore'
 import { MapView } from './MapView'
-import { MapViewGL } from './MapViewGL'
+
+// MapLibre/Mapbox pull in a ~230 KB (gzip) GL engine. Lazy-load the GL renderer so
+// Leaflet-only installs never download it — it ships only once a GL provider is picked.
+const MapViewGL = lazy(() => import('./MapViewGL').then(m => ({ default: m.MapViewGL })))
 
 // Auto-selects the map renderer based on user settings. Keeps the existing
 // Leaflet MapView untouched so the Mapbox GL variant can mature iteratively
 // behind a toggle. Atlas is not affected — it imports Leaflet directly.
+//
+// Offline maps: only the Leaflet renderer supports full pre-download (raster
+// tiles via sync/tilePrefetcher.ts). GL maps are best-effort offline — their
+// vector tiles are cached opportunistically by the Service Worker as you view
+// them online (see the GL tile rules in vite.config.js), not prefetched.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function MapViewAuto(props: any) {
   const provider = useSettingsStore(s => s.settings.map_provider)
   const token = useSettingsStore(s => s.settings.mapbox_access_token)
   // Fall back to Leaflet when Mapbox is selected but no token is set,
   // so trip planner never shows an empty map due to a missing token.
-  if (provider === 'mapbox-gl' && token) return <MapViewGL {...props} />
+  const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl'
+    : provider === 'mapbox-gl' && token ? 'mapbox-gl'
+    : null
+  if (glProvider) {
+    // Render the previous Leaflet map as the fallback so there's no blank flash
+    // while the GL chunk loads on first use.
+    return (
+      <Suspense fallback={<MapView {...props} />}>
+        <MapViewGL {...props} glProvider={glProvider} />
+      </Suspense>
+    )
+  }
   return <MapView {...props} />
 }

client/src/components/Map/MapViewGL.test.tsx

@@ -31,19 +31,62 @@ const glMap = vi.hoisted(() => ({
 vi.mock('mapbox-gl', () => ({
   default: {
     accessToken: '',
-    Map: vi.fn(() => glMap),
-    Marker: vi.fn(() => ({
-      setLngLat: vi.fn().mockReturnThis(),
-      addTo: vi.fn().mockReturnThis(),
-      remove: vi.fn(),
-      getElement: vi.fn(() => document.createElement('div')),
-    })),
-    LngLatBounds: vi.fn(() => ({ extend: vi.fn().mockReturnThis() })),
+    Map: vi.fn(function () {
+      return glMap
+    }),
+    Marker: vi.fn(function () {
+      return {
+        setLngLat: vi.fn().mockReturnThis(),
+        addTo: vi.fn().mockReturnThis(),
+        remove: vi.fn(),
+        getElement: vi.fn(() => document.createElement('div')),
+      }
+    }),
+    LngLatBounds: vi.fn(function () {
+      return { extend: vi.fn().mockReturnThis() }
+    }),
     NavigationControl: vi.fn(),
+    Popup: vi.fn(function () {
+      return {
+        setLngLat: vi.fn().mockReturnThis(),
+        setHTML: vi.fn().mockReturnThis(),
+        addTo: vi.fn().mockReturnThis(),
+        remove: vi.fn(),
+      }
+    }),
   },
 }))
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))
 
+vi.mock('maplibre-gl', () => ({
+  default: {
+    Map: vi.fn(function () {
+      return glMap
+    }),
+    Marker: vi.fn(function () {
+      return {
+        setLngLat: vi.fn().mockReturnThis(),
+        addTo: vi.fn().mockReturnThis(),
+        remove: vi.fn(),
+        getElement: vi.fn(() => document.createElement('div')),
+      }
+    }),
+    LngLatBounds: vi.fn(function () {
+      return { extend: vi.fn().mockReturnThis() }
+    }),
+    NavigationControl: vi.fn(),
+    Popup: vi.fn(function () {
+      return {
+        setLngLat: vi.fn().mockReturnThis(),
+        setHTML: vi.fn().mockReturnThis(),
+        addTo: vi.fn().mockReturnThis(),
+        remove: vi.fn(),
+      }
+    }),
+  },
+}))
+vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}))
+
 vi.mock('./mapboxSetup', () => ({
   isStandardFamily: vi.fn(() => false),
   supportsCustom3d: vi.fn(() => false),
@@ -57,7 +100,9 @@ vi.mock('./locationMarkerMapbox', () => ({
 }))
 
 vi.mock('./reservationsMapbox', () => ({
-  ReservationMapboxOverlay: vi.fn().mockImplementation(() => ({ update: vi.fn() })),
+  ReservationMapboxOverlay: vi.fn(function () {
+    return { update: vi.fn() }
+  }),
 }))
 
 vi.mock('../../hooks/useGeolocation', () => ({
@@ -161,4 +206,25 @@ describe('MapViewGL', () => {
     await act(async () => {})
     expect(glMap.fitBounds.mock.calls.length).toBeGreaterThan(after_first)
   })
+
+  it('FE-COMP-MAPVIEWGL-004: renders with the MapLibre provider and no token', async () => {
+    const mapboxgl = (await import('mapbox-gl')).default
+    const maplibregl = (await import('maplibre-gl')).default
+    useSettingsStore.setState({
+      settings: {
+        ...useSettingsStore.getState().settings,
+        map_provider: 'maplibre-gl',
+        mapbox_access_token: '', // MapLibre/OpenFreeMap is tokenless — must not short-circuit
+        maplibre_style: 'https://tiles.openfreemap.org/styles/liberty',
+      },
+    } as any)
+    const places = [buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 })]
+
+    render(<MapViewGL places={places} fitKey={1} glProvider="maplibre-gl" />)
+    await act(async () => {})
+
+    // The MapLibre engine builds the map even without a token; Mapbox is not used.
+    expect(maplibregl.Map).toHaveBeenCalled()
+    expect(mapboxgl.Map).not.toHaveBeenCalled()
+  })
 })

client/src/components/Map/MapViewGL.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useRef, useMemo, useState, createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import mapboxgl from 'mapbox-gl'
+import maplibregl from 'maplibre-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAuthStore } from '../../store/authStore'
 import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
@@ -9,9 +11,12 @@ import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from './mapboxSetup'
 import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
 import { ReservationMapboxOverlay } from './reservationsMapbox'
+import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from './glProviders'
 import LocationButton from './LocationButton'
 import { useGeolocation } from '../../hooks/useGeolocation'
 import type { Place, Reservation } from '../../types'
+import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
+import { buildPlacePopupHtml, buildPoiPopupHtml } from './placePopup'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -49,6 +54,12 @@ interface Props {
   visibleConnectionIds?: number[]
   showReservationStats?: boolean
   onReservationClick?: (reservationId: number) => void
+  pois?: Poi[]
+  onPoiClick?: (poi: Poi) => void
+  onViewportChange?: (bbox: { south: number; west: number; north: number; east: number }) => void
+  glProvider?: GlMapProvider
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onMapReady?: (map: any | null) => void
 }
 
 function createMarkerElement(place: Place & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
@@ -85,8 +96,8 @@ function createMarkerElement(place: Place & { category_color?: string; category_
   }
 
   const wrap = document.createElement('div')
-  // Do NOT set `position: relative` here — mapbox-gl ships
-  // `.mapboxgl-marker { position: absolute }` and relies on it. An inline
+  // Do NOT set `position: relative` here — GL map libraries ship
+  // marker classes with `position: absolute` and rely on it. An inline
   // `position: relative` here overrides the class, turns every marker into
   // a static block element, and stacks them in document order inside the
   // canvas container. The result looks exactly like "markers drift as the
@@ -128,6 +139,17 @@ function createMarkerElement(place: Place & { category_color?: string; category_
   return wrap
 }
 
+// Small coloured pin for an OSM "explore" POI (matches the pill category colour).
+function createPoiMarkerElement(category: string): HTMLDivElement {
+  const cat = POI_CATEGORY_BY_KEY[category]
+  const color = cat?.color || '#6b7280'
+  const svg = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 13, color: 'white', strokeWidth: 2.5 })) : ''
+  const el = document.createElement('div')
+  el.style.cssText = 'width:26px;height:26px;cursor:pointer;'
+  el.innerHTML = `<div style="width:26px;height:26px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;box-sizing:border-box;">${svg}</div>`
+  return el
+}
+
 export function MapViewGL({
   places = [],
   dayPlaces = [],
@@ -149,56 +171,93 @@ export function MapViewGL({
   visibleConnectionIds = [],
   showReservationStats = false,
   onReservationClick,
+  pois = [],
+  onPoiClick,
+  onViewportChange,
+  glProvider = 'mapbox-gl',
+  onMapReady,
 }: Props) {
-  const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
+  const rawMaplibreStyle = useSettingsStore(s => s.settings.maplibre_style || '')
   const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
   const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
   const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
   const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
+  const mapLang = useSettingsStore(s => s.settings.language)
+  const isMapLibre = glProvider === 'maplibre-gl'
+  const gl = (isMapLibre ? maplibregl : mapboxgl) as any
+  const glStyle = styleForActiveProvider(glProvider, rawMapboxStyle, rawMaplibreStyle)
+  const enableMapbox3d = !isMapLibre && mapbox3d
   const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
   const [mapReady, setMapReady] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
-  const mapRef = useRef<mapboxgl.Map | null>(null)
-  const markersRef = useRef<Map<number, mapboxgl.Marker>>(new Map())
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mapRef = useRef<any | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const markersRef = useRef<Map<number, any>>(new Map())
   const locationMarkerRef = useRef<LocationMarkerHandle | null>(null)
   const reservationOverlayRef = useRef<ReservationMapboxOverlay | null>(null)
   // Refs so the reservation overlay always sees the latest callback /
   // options without forcing a full overlay rebuild on every prop change.
   const onReservationClickRef = useRef(onReservationClick)
   onReservationClickRef.current = onReservationClick
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const poiMarkersRef = useRef<any[]>([])
+  // Single reusable hover popup (name/category/address card) shared by planned
+  // places and POI markers — mirrors the Leaflet map's hover tooltip.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const popupRef = useRef<any | null>(null)
+  const onPoiClickRef = useRef(onPoiClick)
+  onPoiClickRef.current = onPoiClick
+  const onViewportChangeRef = useRef(onViewportChange)
+  onViewportChangeRef.current = onViewportChange
+  const onMapReadyRef = useRef(onMapReady)
+  onMapReadyRef.current = onMapReady
   const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode, setMode: setTrackingMode } = useGeolocation()
   const onClickRefs = useRef({ marker: onMarkerClick, map: onMapClick, context: onMapContextMenu })
   onClickRefs.current.marker = onMarkerClick
   onClickRefs.current.map = onMapClick
   onClickRefs.current.context = onMapContextMenu
 
-  // Build/rebuild the map on style/token/3d change
+  // Build/rebuild the map on provider/style/token/3d change
   useEffect(() => {
-    if (!containerRef.current || !mapboxToken) return
-    mapboxgl.accessToken = mapboxToken
+    if (!containerRef.current || (!isMapLibre && !mapboxToken)) return
+    if (!isMapLibre) mapboxgl.accessToken = mapboxToken
 
-    const map = new mapboxgl.Map({
+    const mapOptions: Record<string, unknown> = {
       container: containerRef.current,
-      style: mapboxStyle,
+      style: glStyle,
       center: [center[1], center[0]],
       zoom,
-      pitch: mapbox3d ? 45 : 0,
+      pitch: enableMapbox3d ? 45 : 0,
       attributionControl: true,
       antialias: mapboxQuality,
-      projection: mapboxQuality ? 'globe' : 'mercator',
-    })
+    }
+    if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
+
+    const map = new gl.Map(mapOptions as any)
     mapRef.current = map
+    popupRef.current = new gl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      offset: 18,
+      maxWidth: '240px',
+      className: 'trek-map-popup',
+    })
+    // Hand the map out so the trip planner can render its own compass pill next to
+    // the POI pill (a custom round control instead of Mapbox's default top-right one).
+    onMapReadyRef.current?.(map)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ;(window as any).__trek_map = map
 
     map.on('load', () => {
-      if (mapbox3d) {
+      if (enableMapbox3d) {
         // Terrain is only valuable on satellite styles — on clean vector
         // styles it makes route lines drift off the HTML markers because
         // the lines snap to DEM height while markers stay at sea level.
-        if (!isStandardFamily(mapboxStyle) && wantsTerrain(mapboxStyle)) addTerrainAndSky(map)
-        if (supportsCustom3d(mapboxStyle)) {
+        if (!isStandardFamily(glStyle) && wantsTerrain(glStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(glStyle)) {
           const dark = document.documentElement.classList.contains('dark')
           addCustom3dBuildings(map, dark)
         }
@@ -211,7 +270,7 @@ export function MapViewGL({
       // non-satellite Standard style still looks great without terrain,
       // so flatten it out to keep markers pinned. (Satellite variants
       // are left alone — the DEM is what gives them their character.)
-      if (mapboxStyle === 'mapbox://styles/mapbox/standard') {
+      if (glStyle === MAPBOX_DEFAULT_STYLE) {
         try { map.setTerrain(null) } catch { /* noop */ }
       }
       // initial route source — kept around so updates can setData() cheaply
@@ -257,10 +316,18 @@ export function MapViewGL({
 
     map.on('click', (e) => {
       const t = e.originalEvent.target as HTMLElement
-      if (t.closest('.mapboxgl-marker')) return // markers handle their own click
+      if (t.closest('.mapboxgl-marker, .maplibregl-marker')) return // markers handle their own click
       onClickRefs.current.map?.({ latlng: { lat: e.lngLat.lat, lng: e.lngLat.lng } })
     })
-    // In the mapbox-gl map the right mouse button is reserved for the
+    // Emit the viewport bbox (pan/zoom + once on first idle) so the POI-explore
+    // pill can fetch OSM places for the visible area.
+    const emitViewport = () => {
+      const b = map.getBounds()
+      onViewportChangeRef.current?.({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
+    }
+    map.on('moveend', emitViewport)
+    map.once('idle', emitViewport)
+    // In the GL map the right mouse button is reserved for the
     // built-in rotate/pitch gesture, so we bind the "add place" action
     // to the middle mouse button (button === 1) instead.
     const canvas = map.getCanvasContainer()
@@ -307,7 +374,9 @@ export function MapViewGL({
         const ll = marker.getLngLat()
         let alt = 0
         try {
-          const e = map.queryTerrainElevation([ll.lng, ll.lat])
+          const e = typeof map.queryTerrainElevation === 'function'
+            ? map.queryTerrainElevation([ll.lng, ll.lat])
+            : null
           if (typeof e === 'number' && Number.isFinite(e)) alt = e
         } catch { /* terrain not ready */ }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -319,13 +388,17 @@ export function MapViewGL({
         }
       })
     }
-    map.on('render', syncMarkerAltitudes)
+    // Terrain altitude sync only matters with mapbox 3D/terrain on; skip the per-frame
+    // listener entirely for MapLibre and flat mapbox styles.
+    if (enableMapbox3d) map.on('render', syncMarkerAltitudes)
 
     return () => {
       canvas.removeEventListener('mousedown', onAuxDown)
       canvas.removeEventListener('auxclick', onAuxClick)
       markersRef.current.forEach(m => m.remove())
       markersRef.current.clear()
+      if (popupRef.current) { popupRef.current.remove(); popupRef.current = null }
+      onMapReadyRef.current?.(null)
       if (reservationOverlayRef.current) {
         reservationOverlayRef.current.destroy()
         reservationOverlayRef.current = null
@@ -338,7 +411,17 @@ export function MapViewGL({
       mapRef.current = null
       setMapReady(false)
     }
-  }, [mapboxStyle, mapboxToken, mapbox3d]) // rebuild on style changes only
+  }, [glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality]) // rebuild on provider/style changes only
+
+  // Pin the basemap label language to the UI language so labels don't fall back to the
+  // browser/OS locale and stack multiple scripts per place (e.g. "India/भारत/India", #1299).
+  // Mapbox Standard exposes this via a basemap config property; classic and MapLibre styles
+  // are left as-is. Runs on load (mapReady) and whenever the UI language changes.
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !mapReady || isMapLibre || !isStandardFamily(glStyle)) return
+    try { map.setConfigProperty('basemap', 'language', basemapLanguage(mapLang)) } catch { /* style/SDK may not support the basemap language property */ }
+  }, [mapLang, mapReady, isMapLibre, glStyle])
 
   // Photo loading — mirrors the Leaflet MapView. Updates via RAF to batch
   // simultaneous thumb arrivals into one re-render.
@@ -399,6 +482,10 @@ export function MapViewGL({
   useEffect(() => {
     const map = mapRef.current
     if (!map) return
+    // Markers are about to be rebuilt; drop any open hover popup first. A marker
+    // recreated under the pointer (e.g. when its photo streams in) never fires
+    // mouseleave, which would otherwise leave the popup orphaned on the map.
+    popupRef.current?.remove()
     const ids = new Set(places.map(p => p.id))
 
     markersRef.current.forEach((marker, id) => {
@@ -419,6 +506,12 @@ export function MapViewGL({
         ev.stopPropagation()
         onClickRefs.current.marker?.(place.id)
       })
+      el.addEventListener('mouseenter', () => {
+        popupRef.current?.setLngLat([place.lng, place.lat])
+          .setHTML(buildPlacePopupHtml(place as Place & { category_color?: string; category_icon?: string; category_name?: string }, photoUrl))
+          .addTo(map)
+      })
+      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
       // Recreate marker each time rather than patching internal state —
       // mapbox-gl's internal _element bookkeeping breaks under DOM swaps.
       const existing = markersRef.current.get(place.id)
@@ -428,12 +521,32 @@ export function MapViewGL({
       // pitch. Tried `pitchAlignment: 'map'` to snap markers onto terrain,
       // but it rotates the element by the pitch angle and visually offsets
       // the anchor by ~100px at 45° tilt, which caused the observed drift.
-      const m = new mapboxgl.Marker({ element: el, anchor: 'center' })
+      const m = new gl.Marker({ element: el, anchor: 'center' })
         .setLngLat([place.lng, place.lat])
         .addTo(map)
       markersRef.current.set(place.id, m)
     })
-  }, [places, selectedPlaceId, dayOrderMap, photoUrls])
+  }, [places, selectedPlaceId, dayOrderMap, photoUrls, mapReady, glProvider])
+
+  // Reconcile OSM "explore" POI markers (imperative, kept separate from the
+  // planned-place markers so they don't cluster or get confused with them).
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !mapReady) return
+    popupRef.current?.remove() // same orphan-popup guard as the place markers
+    poiMarkersRef.current.forEach(m => m.remove())
+    poiMarkersRef.current = []
+    for (const poi of (pois as Poi[])) {
+      const el = createPoiMarkerElement(poi.category)
+      el.addEventListener('mouseenter', () => {
+        popupRef.current?.setLngLat([poi.lng, poi.lat]).setHTML(buildPoiPopupHtml(poi)).addTo(map)
+      })
+      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
+      el.addEventListener('click', (ev) => { ev.stopPropagation(); onPoiClickRef.current?.(poi) })
+      const m = new gl.Marker({ element: el, anchor: 'center' }).setLngLat([poi.lng, poi.lat]).addTo(map)
+      poiMarkersRef.current.push(m)
+    }
+  }, [pois, mapReady, glProvider])
 
   // Update route geojson
   useEffect(() => {
@@ -497,7 +610,7 @@ export function MapViewGL({
         showStats: showReservationStats,
         showEndpointLabels,
         onEndpointClick: (id) => onReservationClickRef.current?.(id),
-      })
+      }, gl.Marker as any)
     }
     reservationOverlayRef.current.update(visibleReservations, {
       showConnections: true,
@@ -505,7 +618,7 @@ export function MapViewGL({
       showEndpointLabels,
       onEndpointClick: (id) => onReservationClickRef.current?.(id),
     })
-  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady])
+  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady, glProvider])
 
   // Fit bounds on fitKey change — matches the Leaflet BoundsController
   const paddingOpts = useMemo(() => {
@@ -525,14 +638,14 @@ export function MapViewGL({
     const target = dayPlaces.length > 0 ? dayPlaces : places
     const valid = target.filter(p => p.lat && p.lng)
     if (valid.length === 0) return
-    const bounds = new mapboxgl.LngLatBounds()
+    const bounds = new gl.LngLatBounds()
     valid.forEach(p => bounds.extend([p.lng, p.lat]))
     const run = () => {
       try {
         map.fitBounds(bounds, {
           padding: paddingOpts,
           maxZoom: 15,
-          pitch: mapbox3d ? 45 : 0,
+          pitch: enableMapbox3d ? 45 : 0,
           duration: 400,
         })
       } catch { /* noop */ }
@@ -551,11 +664,15 @@ export function MapViewGL({
       map.flyTo({
         center: [target.lng, target.lat],
         zoom: Math.max(map.getZoom(), 14),
-        pitch: mapbox3d ? 45 : 0,
+        pitch: enableMapbox3d ? 45 : 0,
         duration: 400,
+        // Account for the side panels and the bottom inspector / day-detail panel
+        // so the selected pin lands in the centre of the *visible* map area rather
+        // than the geometric centre (where the bottom panel would cover it).
+        padding: paddingOpts,
       })
     } catch { /* noop */ }
-  }, [selectedPlaceId, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedPlaceId, enableMapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // External center/zoom prop changes — jump without animation
   useEffect(() => {
@@ -578,7 +695,7 @@ export function MapViewGL({
     }
     if (!userPosition) return
     const apply = () => {
-      if (!locationMarkerRef.current) locationMarkerRef.current = attachLocationMarker(map)
+      if (!locationMarkerRef.current) locationMarkerRef.current = attachLocationMarker(map, gl.Marker as any)
       locationMarkerRef.current.update(userPosition)
       if (trackingMode === 'follow') {
         // easeTo is gentler than flyTo for continuous updates
@@ -594,9 +711,9 @@ export function MapViewGL({
     }
     if (map.loaded()) apply()
     else map.once('load', apply)
-  }, [userPosition, trackingMode])
+  }, [userPosition, trackingMode, glProvider])
 
-  if (!mapboxToken) {
+  if (!isMapLibre && !mapboxToken) {
     return (
       <div className="w-full h-full flex items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-center px-6">
         <div className="text-sm text-zinc-500">
@@ -610,7 +727,12 @@ export function MapViewGL({
   // 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
-  const buttonBottom = 'calc(var(--bottom-nav-h, 84px) + 12px)'
+  // When the day-detail panel is open it slides up over the map (bottom: navh+20,
+  // height var(--day-panel-h)) and covers the button's band, so lift the button
+  // above it; otherwise keep the plain bottom-nav offset. #1348
+  const buttonBottom = hasDayDetail
+    ? 'calc(var(--bottom-nav-h, 84px) + 20px + var(--day-panel-h, 0px) + 12px)'
+    : 'calc(var(--bottom-nav-h, 84px) + 12px)'
 
   return (
     <div className="w-full h-full relative">

client/src/components/Map/PoiCategoryPill.tsx

@@ -0,0 +1,101 @@
+import { RotateCw, AlertTriangle } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { Tooltip } from '../shared/Tooltip'
+import { POI_CATEGORIES } from './poiCategories'
+
+interface Props {
+  active: Set<string>
+  onToggle: (key: string) => void
+  loadingKeys?: Set<string>
+  /** categories whose last fetch failed → show a retry affordance */
+  errorKeys?: Set<string>
+  /** true when the map moved since the last search → offer "search this area" */
+  moved?: boolean
+  onSearchArea?: () => void
+}
+
+// Frosted, icon-only segmented control that floats over the map. Active segments
+// fill with the category colour (matching their markers); the label shows in a
+// custom tooltip on hover so the pill stays compact and never needs to scroll.
+export default function PoiCategoryPill({ active, onToggle, loadingKeys, errorKeys, moved, onSearchArea }: Props) {
+  const { t } = useTranslation()
+  const anyError = !!errorKeys && Array.from(active).some(k => errorKeys.has(k))
+
+  const frosted: React.CSSProperties = {
+    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))',
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2, padding: 4, borderRadius: 999, pointerEvents: 'auto', ...frosted }}>
+        {POI_CATEGORIES.map(cat => {
+          const on = active.has(cat.key)
+          const loading = loadingKeys?.has(cat.key)
+          return (
+            <Tooltip key={cat.key} label={t(cat.labelKey)} placement="bottom">
+              <button
+                type="button"
+                onClick={() => onToggle(cat.key)}
+                aria-pressed={on}
+                aria-label={t(cat.labelKey)}
+                className={on ? '' : 'text-content-muted'}
+                style={{
+                  position: 'relative',
+                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
+                  background: on ? cat.color : 'transparent',
+                  color: on ? '#fff' : undefined,
+                  transition: 'background 0.14s, color 0.14s',
+                }}
+                onMouseEnter={e => { if (!on) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!on) e.currentTarget.style.background = 'transparent' }}
+              >
+                {loading ? (
+                  <span
+                    className="animate-spin"
+                    style={{
+                      width: 14, height: 14, borderRadius: 999, display: 'inline-block',
+                      border: '2px solid', borderColor: on ? 'rgba(255,255,255,0.45)' : 'var(--border-primary)',
+                      borderTopColor: on ? '#fff' : 'var(--text-muted)',
+                    }}
+                  />
+                ) : (
+                  <cat.Icon size={16} strokeWidth={2} />
+                )}
+                {on && !loading && errorKeys?.has(cat.key) && (
+                  <span style={{
+                    position: 'absolute', top: 2, right: 2, width: 8, height: 8,
+                    borderRadius: 999, background: '#ef4444', border: '1.5px solid var(--sidebar-bg)',
+                  }} />
+                )}
+              </button>
+            </Tooltip>
+          )
+        })}
+      </div>
+
+      {(moved || anyError) && active.size > 0 && (
+        <button
+          type="button"
+          onClick={onSearchArea}
+          className="text-content"
+          style={{
+            display: 'inline-flex', alignItems: 'center', gap: 6,
+            padding: '6px 13px', borderRadius: 999, border: 'none', cursor: 'pointer',
+            fontSize: 12, fontWeight: 600, fontFamily: 'inherit', pointerEvents: 'auto',
+            color: anyError ? '#ef4444' : undefined,
+            ...frosted,
+          }}
+        >
+          {anyError
+            ? <AlertTriangle size={13} strokeWidth={2.4} />
+            : <RotateCw size={13} strokeWidth={2.4} />}
+          {t('poi.searchThisArea')}
+        </button>
+      )}
+    </div>
+  )
+}

client/src/components/Map/ReservationOverlay.tsx

@@ -3,6 +3,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
 import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { escapeHtml } from '@trek/shared'
 import { useSettingsStore } from '../../store/settingsStore'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
@@ -42,7 +43,7 @@ function useEndpointPane() {
 function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
   const { icon: IconCmp, color } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span>${label}</span>` : ''
+  const labelHtml = label ? `<span>${escapeHtml(label)}</span>` : ''
   const estWidth = label ? Math.max(40, label.length * 6 + 28) : 26
   return L.divIcon({
     className: 'trek-endpoint-marker',
@@ -53,7 +54,7 @@ function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
       border:1.5px solid #fff;color:#fff;
       font-family:var(--font-system);font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
       box-sizing:border-box;height:22px;white-space:nowrap;
-    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''}</div>`,
+    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''}</div>`,
     iconSize: [estWidth, 22],
     iconAnchor: [estWidth / 2, 11],
     popupAnchor: [0, -11],
@@ -157,6 +158,7 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
+  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -172,8 +174,8 @@ function buildStatsHtml(color: string, mainLabel: string | null, subLabel: strin
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -352,15 +354,29 @@ export default function ReservationOverlay({ reservations, showConnections, show
     const out: TransportItem[] = []
     for (const r of reservations) {
       if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
-      const eps = r.endpoints || []
-      const from = eps.find(e => e.role === 'from')
-      const to = eps.find(e => e.role === 'to')
-      if (!from || !to) continue
+      // Ordered waypoints (from · stops · to). A single-leg booking has exactly two,
+      // so the arc + markers below are byte-identical to before for it.
+      const waypoints = (r.endpoints || [])
+        .filter(e => e.role === 'from' || e.role === 'to' || e.role === 'stop')
+        .slice()
+        .sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
+      if (waypoints.length < 2) continue
+      const from = waypoints[0]
+      const to = waypoints[waypoints.length - 1]
       const type = r.type as TransportType
       const isGeo = TYPE_META[type].geodesic
-      const arcs = isGeo
-        ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
-        : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
+      // One arc per leg (between consecutive waypoints), concatenated.
+      const arcs: [number, number][][] = []
+      let distanceKm = 0
+      for (let i = 0; i < waypoints.length - 1; i++) {
+        const a = waypoints[i]
+        const b = waypoints[i + 1]
+        const segArcs = isGeo
+          ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
+          : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
+        arcs.push(...segArcs)
+        distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
+      }
       const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
       const primaryArc = arcs[primaryIdx] ?? []
       const fallback: [number, number] = primaryArc.length > 0
@@ -368,12 +384,15 @@ export default function ReservationOverlay({ reservations, showConnections, show
         : [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2]
 
       const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-      const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
-      const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
+      const distance = `${Math.round(distanceKm)} km`
+      // Show the full route (FRA → BER → HND) when every waypoint has a code.
+      const mainLabel = waypoints.every(w => w.code)
+        ? waypoints.map(w => w.code).join(' → ')
+        : (from.code && to.code ? `${from.code} → ${to.code}` : null)
       const subParts = [duration, distance].filter(Boolean) as string[]
       const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
 
-      out.push({ res: r, from, to, type, arcs, primaryArc, fallback, mainLabel, subLabel })
+      out.push({ res: r, from, to, waypoints, type, arcs, primaryArc, fallback, mainLabel, subLabel })
     }
     return out
   }, [reservations])
@@ -415,38 +434,21 @@ export default function ReservationOverlay({ reservations, showConnections, show
         />
       )))}
 
-      {visibleItems.flatMap(item => [
+      {visibleItems.flatMap(item => item.waypoints.map((wp, wi) => (
         <Marker
-          key={`from-${item.res.id}`}
-          position={[item.from.lat, item.from.lng]}
-          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.from.code || cleanName(item.from.name)) : null)}
+          key={`wp-${item.res.id}-${wi}`}
+          position={[wp.lat, wp.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (wp.code || cleanName(wp.name)) : null)}
           pane={ENDPOINT_PANE}
           zIndexOffset={1000}
           eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
         >
           <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
-            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.from.name}</div>
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{wp.name}</div>
             {item.res.title && <div className="text-content-muted" style={{ fontSize: 11 }}>{item.res.title}</div>}
           </Tooltip>
-        </Marker>,
-        <Marker
-          key={`to-${item.res.id}`}
-          position={[item.to.lat, item.to.lng]}
-          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.to.code || cleanName(item.to.name)) : null)}
-          pane={ENDPOINT_PANE}
-          zIndexOffset={1000}
-          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
-        >
-          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
-            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.to.name}</div>
-            {item.res.title && <div className="text-content-muted" style={{ fontSize: 11 }}>{item.res.title}</div>}
-          </Tooltip>
-        </Marker>,
-      ])}
-
-      {showStats && visibleItems.map(item => item.type === 'flight' && (item.mainLabel || item.subLabel) && labelVisibleIds.has(item.res.id) && (
-        <StatsLabel key={`stats-${item.res.id}`} item={item} />
-      ))}
+        </Marker>
+      )))}
     </>
   )
 }

client/src/components/Map/RouteCalculator.test.ts

@@ -6,6 +6,7 @@ import {
   calculateSegments,
   optimizeRoute,
   generateGoogleMapsUrl,
+  withHotelBookends,
 } from './RouteCalculator'
 
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
@@ -161,6 +162,62 @@ describe('optimizeRoute', () => {
     expect(result[1]).toEqual(c)
     expect(result[2]).toEqual(b)
   })
+
+  it('FE-COMP-ROUTECALCULATOR-016: start anchor begins the chain at the anchor-nearest stop', () => {
+    const a = { lat: 10, lng: 1 }
+    const b = { lat: 2, lng: 1 }
+    const c = { lat: 5, lng: 1 }
+    // From the accommodation anchor (1,1): nearest is b(2,1), then c(5,1), then a(10,1)
+    const result = optimizeRoute([a, b, c], { start: { lat: 1, lng: 1 } })
+    expect(result).toEqual([b, c, a])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-017: start + end anchors reorder a shuffled day and keep the end-nearest stop last', () => {
+    const a = { lat: 2, lng: 1 }
+    const b = { lat: 5, lng: 1 }
+    const c = { lat: 8, lng: 1 }
+    // Transfer day: start at hotel A (1,1), end at hotel B (9,1). c is nearest B, so it must be last.
+    const result = optimizeRoute([c, a, b], { start: { lat: 1, lng: 1 }, end: { lat: 9, lng: 1 } })
+    expect(result).toEqual([a, b, c])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-018: an anchor makes even a two-stop day sortable', () => {
+    const a = { lat: 10, lng: 1 }
+    const b = { lat: 2, lng: 1 }
+    // Without anchors two stops are returned unchanged; the start anchor orders them by proximity.
+    const result = optimizeRoute([a, b], { start: { lat: 1, lng: 1 } })
+    expect(result).toEqual([b, a])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-019: 2-opt untangles a round-trip into a clean loop around the hotel', () => {
+    const hotel = { lat: 48.8668, lng: 2.3013 } // Rue Marbeuf
+    const stops = [
+      { id: 1, lat: 48.8565, lng: 2.3324 },
+      { id: 2, lat: 48.8813, lng: 2.3151 },
+      { id: 3, lat: 48.8796, lng: 2.308 },
+      { id: 4, lat: 48.8723, lng: 2.2926 },
+      { id: 5, lat: 48.866, lng: 2.3102 }, // nearest the hotel
+    ]
+    const d = (a: { lat: number; lng: number }, b: { lat: number; lng: number }) =>
+      Math.hypot(a.lat - b.lat, a.lng - b.lng)
+    const loop = (order: typeof stops) =>
+      d(hotel, order[0]) + order.slice(1).reduce((s, p, i) => s + d(order[i], p), 0) + d(order[order.length - 1], hotel)
+
+    const result = optimizeRoute(stops, { start: hotel, end: hotel })
+    // The optimized loop is no longer than the original order…
+    expect(loop(result)).toBeLessThanOrEqual(loop(stops) + 1e-9)
+    // …and the hotel-adjacent stop sits at one end of the loop, right next to the hotel.
+    expect([result[0].id, result[result.length - 1].id]).toContain(5)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-020: an end anchor without a start finishes at the stop nearest it', () => {
+    const a = { lat: 2, lng: 1 }
+    const b = { lat: 5, lng: 1 }
+    const c = { lat: 9, lng: 1 }
+    // a is nearest the end anchor, so the route must finish at a rather than start there.
+    const result = optimizeRoute([a, b, c], { end: { lat: 1, lng: 1 } })
+    expect(result[result.length - 1]).toEqual(a)
+  })
 })
 
 // ── generateGoogleMapsUrl ──────────────────────────────────────────────────────
@@ -185,3 +242,46 @@ describe('generateGoogleMapsUrl', () => {
     expect(result).toContain('48.86,2.36')
   })
 })
+
+// ── withHotelBookends (#1275: draw the hotel → first / last → hotel legs) ────────
+
+describe('withHotelBookends', () => {
+  const hotel = { lat: 1, lng: 1 }
+  const a = { lat: 2, lng: 2 }
+  const b = { lat: 3, lng: 3 }
+  const evening = { lat: 4, lng: 4 }
+
+  it('FE-COMP-ROUTECALCULATOR-021: leaves runs untouched when there is no hotel', () => {
+    const runs = [[a, b]]
+    expect(withHotelBookends(runs, a, b, null, null)).toEqual([[a, b]])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-022: prepends hotel→first and appends last→hotel around the runs', () => {
+    const runs = [[a, b]]
+    expect(withHotelBookends(runs, a, b, hotel, evening)).toEqual([
+      [hotel, a],
+      [a, b],
+      [b, evening],
+    ])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-023: a single stop with no runs still draws hotel→stop→hotel', () => {
+    expect(withHotelBookends([], a, a, hotel, evening)).toEqual([
+      [hotel, a],
+      [a, evening],
+    ])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-024: a missing first/last waypoint skips that bookend', () => {
+    const runs = [[a, b]]
+    expect(withHotelBookends(runs, undefined, undefined, hotel, evening)).toEqual([[a, b]])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-025: only the start hotel adds just the opening leg', () => {
+    const runs = [[a, b]]
+    expect(withHotelBookends(runs, a, b, hotel, null)).toEqual([
+      [hotel, a],
+      [a, b],
+    ])
+  })
+})

client/src/components/Map/RouteCalculator.ts

@@ -1,4 +1,6 @@
-import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint } from '../../types'
+import { useSettingsStore } from '../../store/settingsStore'
+import type { DistanceUnit, RouteResult, RouteSegment, RouteWithLegs, Waypoint, RouteAnchors } from '../../types'
+import { formatDistance } from '../../utils/units'
 
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
 
@@ -60,13 +62,34 @@ export async function calculateRoute(
     coordinates,
     distance,
     duration,
-    distanceText: formatDistance(distance),
+    distanceText: formatRouteDistance(distance),
     durationText: formatDuration(duration),
     walkingText: formatDuration(walkingDuration),
     drivingText: formatDuration(drivingDuration),
   }
 }
 
+/**
+ * Prepends a hotel→first-waypoint run and appends a last-waypoint→hotel run to the
+ * day's activity runs, so the drawn route starts and ends at the day's accommodation
+ * (matching the sidebar's hotel connectors). A bookend is only added when both its
+ * hotel and the first/last located waypoint exist; passing nulls leaves `runs`
+ * untouched. The shared first/last waypoint is repeated so the polylines join.
+ */
+export function withHotelBookends(
+  runs: Waypoint[][],
+  firstWay: Waypoint | undefined,
+  lastWay: Waypoint | undefined,
+  startHotel: Waypoint | null,
+  endHotel: Waypoint | null,
+): Waypoint[][] {
+  const out: Waypoint[][] = []
+  if (startHotel && firstWay) out.push([startHotel, firstWay])
+  out.push(...runs)
+  if (endHotel && lastWay) out.push([lastWay, endHotel])
+  return out
+}
+
 export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
   const valid = places.filter((p) => p.lat && p.lng)
   if (valid.length === 0) return null
@@ -77,35 +100,98 @@ export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
   return `https://www.google.com/maps/dir/${stops}`
 }
 
-/** Reorders waypoints using a nearest-neighbor heuristic to minimize total Euclidean distance. */
-export function optimizeRoute<T extends Waypoint>(places: T[]): T[] {
-  const valid = places.filter((p) => p.lat && p.lng)
-  if (valid.length <= 2) return places
+// Squared planar distance — enough for nearest-neighbor comparisons and cheaper than a full haversine.
+function sqDist(a: Waypoint, b: Waypoint): number {
+  return (a.lat - b.lat) ** 2 + (a.lng - b.lng) ** 2
+}
 
+// Length of visiting `order` in sequence, optionally pinned to a fixed start and/or end anchor.
+// With start === end this is a closed loop back to the anchor (a day out from and back to the hotel).
+function tourLength(order: Waypoint[], start?: Waypoint, end?: Waypoint): number {
+  if (order.length === 0) return 0
+  let total = 0
+  if (start) total += Math.sqrt(sqDist(start, order[0]))
+  for (let i = 0; i < order.length - 1; i++) total += Math.sqrt(sqDist(order[i], order[i + 1]))
+  if (end) total += Math.sqrt(sqDist(order[order.length - 1], end))
+  return total
+}
+
+// Greedy nearest-neighbor ordering, seeded at the start anchor when there is one.
+function nearestNeighborOrder<T extends Waypoint>(valid: T[], start?: Waypoint): T[] {
   const visited = new Set<number>()
   const result: T[] = []
-  let current = valid[0]
-  visited.add(0)
-  result.push(current)
-
+  let current: Waypoint
+  if (start) {
+    current = start
+  } else {
+    current = valid[0]
+    visited.add(0)
+    result.push(valid[0])
+  }
   while (result.length < valid.length) {
     let nearestIdx = -1
     let minDist = Infinity
     for (let i = 0; i < valid.length; i++) {
       if (visited.has(i)) continue
-      const d = Math.sqrt(
-        Math.pow(valid[i].lat - current.lat, 2) + Math.pow(valid[i].lng - current.lng, 2)
-      )
+      const d = sqDist(valid[i], current)
       if (d < minDist) { minDist = d; nearestIdx = i }
     }
     if (nearestIdx === -1) break
     visited.add(nearestIdx)
     current = valid[nearestIdx]
-    result.push(current)
+    result.push(valid[nearestIdx])
   }
   return result
 }
 
+// 2-opt: repeatedly reverse a sub-segment whenever it shortens the tour. This removes the crossings
+// a pure nearest-neighbor pass leaves behind. The start/end anchors stay fixed, so a round trip
+// (start === end) is untangled into a clean loop rather than an open path.
+function twoOptImprove<T extends Waypoint>(order: T[], start?: Waypoint, end?: Waypoint): T[] {
+  if (order.length < 3) return order
+  let best = order
+  let bestLen = tourLength(best, start, end)
+  let improved = true
+  while (improved) {
+    improved = false
+    for (let i = 0; i < best.length - 1; i++) {
+      for (let j = i + 1; j < best.length; j++) {
+        const candidate = best.slice(0, i).concat(best.slice(i, j + 1).reverse(), best.slice(j + 1))
+        const len = tourLength(candidate, start, end)
+        if (len < bestLen - 1e-12) {
+          best = candidate
+          bestLen = len
+          improved = true
+        }
+      }
+    }
+  }
+  return best
+}
+
+/**
+ * Reorders waypoints to minimize travel distance: a nearest-neighbor pass for a good starting order,
+ * then 2-opt to untangle crossings. Optional anchors (e.g. the day's accommodation) pin the route's
+ * ends — start === end makes it a loop out from and back to the hotel; a transfer day runs start → end.
+ */
+export function optimizeRoute<T extends Waypoint>(places: T[], anchors: RouteAnchors = {}): T[] {
+  const { start, end } = anchors
+  const valid = places.filter((p) => p.lat && p.lng)
+  if (valid.length <= 1) return places
+  // Two unanchored stops have no meaningful order to optimize; anchors can still flip them.
+  if (valid.length === 2 && !start && !end) return places
+
+  const order = twoOptImprove(nearestNeighborOrder(valid, start), start, end)
+
+  // A round trip's loop direction is arbitrary, so orient it to begin at the stop nearest the hotel —
+  // that reads naturally as "leave the hotel, head to the closest place, …, come back".
+  if (start && end && start.lat === end.lat && start.lng === end.lng && order.length > 1) {
+    if (sqDist(order[order.length - 1], start) < sqDist(order[0], start)) order.reverse()
+  }
+
+  return order
+}
+
 /** Fetches per-leg distance/duration from OSRM and returns segment metadata (midpoints, walking/driving times). */
 export async function calculateSegments(
   waypoints: Waypoint[],
@@ -134,7 +220,7 @@ export async function calculateSegments(
       duration: leg.duration,
       walkingText: formatDuration(walkingDuration),
       drivingText: formatDuration(leg.duration),
-      distanceText: formatDistance(leg.distance),
+      distanceText: formatRouteDistance(leg.distance),
     }
   })
 }
@@ -154,7 +240,9 @@ export async function calculateRouteWithLegs(
   }
 
   const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  const cacheKey = `${profile}:${coords}`
+  // 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).
+  const cacheKey = `${profile}:${getDistanceUnit()}:${coords}`
   const cached = routeCache.get(cacheKey)
   if (cached) return cached
 
@@ -181,7 +269,7 @@ export async function calculateRouteWithLegs(
         duration: leg.duration,
         walkingText: formatDuration(walkingDuration),
         drivingText: formatDuration(leg.duration),
-        distanceText: formatDistance(leg.distance),
+        distanceText: formatRouteDistance(leg.distance),
         durationText: formatDuration(leg.duration),
       }
     }
@@ -196,11 +284,16 @@ export async function calculateRouteWithLegs(
   return result
 }
 
-function formatDistance(meters: number): string {
-  if (meters < 1000) {
+function getDistanceUnit(): DistanceUnit {
+  return useSettingsStore.getState().settings.distance_unit === 'imperial' ? 'imperial' : 'metric'
+}
+
+function formatRouteDistance(meters: number): string {
+  const unit = getDistanceUnit()
+  if (unit === 'metric' && meters < 1000) {
     return `${Math.round(meters)} m`
   }
-  return `${(meters / 1000).toFixed(1)} km`
+  return formatDistance(meters / 1000, unit)
 }
 
 function formatDuration(seconds: number): string {

client/src/components/Map/glProviders.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest'
+import {
+  MAPBOX_DEFAULT_STYLE,
+  OPENFREEMAP_DEFAULT_STYLE,
+  isOpenFreeMapStyle,
+  normalizeStyleForProvider,
+  styleForActiveProvider,
+  basemapLanguage,
+} from './glProviders'
+
+describe('glProviders', () => {
+  it('keeps OpenFreeMap styles for MapLibre', () => {
+    const style = 'https://tiles.openfreemap.org/styles/bright'
+
+    expect(normalizeStyleForProvider('maplibre-gl', style)).toBe(style)
+  })
+
+  it('falls back to OpenFreeMap for MapLibre styles outside the CSP allowlist', () => {
+    expect(normalizeStyleForProvider('maplibre-gl', 'https://demotiles.maplibre.org/style.json')).toBe(
+      OPENFREEMAP_DEFAULT_STYLE,
+    )
+    expect(normalizeStyleForProvider('maplibre-gl', MAPBOX_DEFAULT_STYLE)).toBe(OPENFREEMAP_DEFAULT_STYLE)
+  })
+
+  it('leaves Mapbox styles unchanged for Mapbox GL', () => {
+    expect(normalizeStyleForProvider('mapbox-gl', MAPBOX_DEFAULT_STYLE)).toBe(MAPBOX_DEFAULT_STYLE)
+  })
+
+  it('matches the OpenFreeMap CSP host', () => {
+    expect(isOpenFreeMapStyle('https://tiles.openfreemap.org/styles/liberty')).toBe(true)
+    expect(isOpenFreeMapStyle('https://demotiles.maplibre.org/style.json')).toBe(false)
+  })
+
+  it('rejects host/userinfo spoofing and http downgrade', () => {
+    expect(isOpenFreeMapStyle('https://tiles.openfreemap.org.evil.com/styles/x')).toBe(false)
+    expect(isOpenFreeMapStyle('https://evil.com/@tiles.openfreemap.org/styles/x')).toBe(false)
+    expect(isOpenFreeMapStyle('http://tiles.openfreemap.org/styles/liberty')).toBe(false)
+    expect(isOpenFreeMapStyle('  https://tiles.openfreemap.org/styles/liberty  ')).toBe(true)
+  })
+
+  it('falls back to provider defaults for empty/whitespace styles', () => {
+    expect(normalizeStyleForProvider('maplibre-gl', '')).toBe(OPENFREEMAP_DEFAULT_STYLE)
+    expect(normalizeStyleForProvider('maplibre-gl', '   ')).toBe(OPENFREEMAP_DEFAULT_STYLE)
+    expect(normalizeStyleForProvider('mapbox-gl', '')).toBe(MAPBOX_DEFAULT_STYLE)
+    expect(normalizeStyleForProvider('mapbox-gl', null)).toBe(MAPBOX_DEFAULT_STYLE)
+  })
+
+  it('styleForActiveProvider reads each provider\'s own style slot', () => {
+    const mb = 'mapbox://styles/me/custom'
+    const ofm = 'https://tiles.openfreemap.org/styles/bright'
+    expect(styleForActiveProvider('mapbox-gl', mb, ofm)).toBe(mb)
+    expect(styleForActiveProvider('maplibre-gl', mb, ofm)).toBe(ofm)
+    // An empty MapLibre slot falls back to the OpenFreeMap default, leaving mapbox untouched.
+    expect(styleForActiveProvider('maplibre-gl', mb, '')).toBe(OPENFREEMAP_DEFAULT_STYLE)
+  })
+
+  it('basemapLanguage maps TREK UI codes to basemap label codes (#1299)', () => {
+    // Pass-through for plain ISO 639-1 codes.
+    expect(basemapLanguage('en')).toBe('en')
+    expect(basemapLanguage('de')).toBe('de')
+    expect(basemapLanguage('fr')).toBe('fr')
+    // TREK-specific overrides.
+    expect(basemapLanguage('br')).toBe('pt')
+    expect(basemapLanguage('gr')).toBe('el')
+    expect(basemapLanguage('zh')).toBe('zh-Hans')
+    expect(basemapLanguage('zhTw')).toBe('zh-Hant')
+    expect(basemapLanguage('zh-TW')).toBe('zh-Hant')
+    // Falls back to English when unset.
+    expect(basemapLanguage(undefined)).toBe('en')
+    expect(basemapLanguage('')).toBe('en')
+  })
+})

client/src/components/Map/glProviders.ts

@@ -0,0 +1,87 @@
+export type GlMapProvider = 'mapbox-gl' | 'maplibre-gl'
+
+export interface GlStylePreset {
+  name: string
+  url: string
+  tags?: string[]
+}
+
+export const MAPBOX_DEFAULT_STYLE = 'mapbox://styles/mapbox/standard'
+export const OPENFREEMAP_DEFAULT_STYLE = 'https://tiles.openfreemap.org/styles/liberty'
+
+export const MAPBOX_STYLE_PRESETS: GlStylePreset[] = [
+  { name: 'Mapbox Standard', url: MAPBOX_DEFAULT_STYLE, tags: ['3D', 'Apple-like'] },
+  { name: 'Standard Satellite', url: 'mapbox://styles/mapbox/standard-satellite', tags: ['3D', 'Satellite'] },
+  { name: 'Streets', url: 'mapbox://styles/mapbox/streets-v12', tags: ['3D', 'Classic'] },
+  { name: 'Outdoors', url: 'mapbox://styles/mapbox/outdoors-v12', tags: ['3D', 'Terrain'] },
+  { name: 'Light', url: 'mapbox://styles/mapbox/light-v11', tags: ['3D', 'Minimal'] },
+  { name: 'Dark', url: 'mapbox://styles/mapbox/dark-v11', tags: ['3D', 'Dark'] },
+  { name: 'Satellite', url: 'mapbox://styles/mapbox/satellite-v9', tags: ['3D', 'Satellite'] },
+  { name: 'Satellite Streets', url: 'mapbox://styles/mapbox/satellite-streets-v12', tags: ['3D', 'Satellite'] },
+  { name: 'Navigation Day', url: 'mapbox://styles/mapbox/navigation-day-v1', tags: ['3D', 'Apple-like'] },
+  { name: 'Navigation Night', url: 'mapbox://styles/mapbox/navigation-night-v1', tags: ['3D', 'Dark'] },
+]
+
+export const OPENFREEMAP_STYLE_PRESETS: GlStylePreset[] = [
+  { name: 'OpenFreeMap Liberty', url: OPENFREEMAP_DEFAULT_STYLE, tags: ['OpenFreeMap', '2D'] },
+  { name: 'OpenFreeMap Bright', url: 'https://tiles.openfreemap.org/styles/bright', tags: ['OpenFreeMap', 'Classic'] },
+  { name: 'OpenFreeMap Positron', url: 'https://tiles.openfreemap.org/styles/positron', tags: ['OpenFreeMap', 'Minimal'] },
+]
+
+export function getStylePresets(provider: GlMapProvider): GlStylePreset[] {
+  return provider === 'maplibre-gl' ? OPENFREEMAP_STYLE_PRESETS : MAPBOX_STYLE_PRESETS
+}
+
+export function defaultStyleForProvider(provider: GlMapProvider): string {
+  return provider === 'maplibre-gl' ? OPENFREEMAP_DEFAULT_STYLE : MAPBOX_DEFAULT_STYLE
+}
+
+export function isOpenFreeMapStyle(style?: string | null): boolean {
+  return (style || '').trim().startsWith('https://tiles.openfreemap.org/')
+}
+
+export function normalizeStyleForProvider(provider: GlMapProvider, style?: string | null): string {
+  const trimmed = (style || '').trim()
+  if (!trimmed) return defaultStyleForProvider(provider)
+  if (provider === 'maplibre-gl') {
+    return isOpenFreeMapStyle(trimmed) ? trimmed : OPENFREEMAP_DEFAULT_STYLE
+  }
+  return trimmed
+}
+
+/** The settings key that holds the style for a given GL provider. */
+export function styleSettingKey(provider: GlMapProvider): 'mapbox_style' | 'maplibre_style' {
+  return provider === 'maplibre-gl' ? 'maplibre_style' : 'mapbox_style'
+}
+
+/**
+ * Each GL provider keeps its style in its own slot (mapbox_style / maplibre_style), so
+ * switching providers never overwrites the other one's custom style. Picks and normalizes
+ * the style for the active provider.
+ */
+export function styleForActiveProvider(
+  provider: GlMapProvider,
+  mapboxStyle?: string | null,
+  maplibreStyle?: string | null,
+): string {
+  return normalizeStyleForProvider(provider, provider === 'maplibre-gl' ? maplibreStyle : mapboxStyle)
+}
+
+// A few TREK UI language codes differ from what the GL basemap expects for its labels.
+const BASEMAP_LANG_OVERRIDES: Record<string, string> = {
+  br: 'pt',          // TREK 'br' = Brazilian Portuguese
+  gr: 'el',          // TREK 'gr' = Greek
+  zh: 'zh-Hans',
+  zhTw: 'zh-Hant',
+  'zh-TW': 'zh-Hant',
+}
+
+/**
+ * Maps a TREK UI language code to the label language the GL basemap expects. Used to pin
+ * Mapbox Standard's basemap labels to the user's language so they don't fall back to the
+ * browser/OS locale and stack multiple scripts per place (#1299).
+ */
+export function basemapLanguage(uiLang: string | undefined): string {
+  const code = (uiLang || 'en').trim()
+  return BASEMAP_LANG_OVERRIDES[code] ?? code
+}

client/src/components/Map/locationMarkerMapbox.ts

@@ -1,6 +1,13 @@
-import mapboxgl from 'mapbox-gl'
+import type mapboxgl from 'mapbox-gl'
 import type { GeoPosition } from '../../hooks/useGeolocation'
 
+type MarkerConstructor = new (options?: { element?: HTMLElement; anchor?: string }) => {
+  setLngLat: (lngLat: mapboxgl.LngLatLike) => { addTo: (map: mapboxgl.Map) => unknown }
+  addTo: (map: mapboxgl.Map) => unknown
+  remove: () => void
+  getElement: () => HTMLElement
+}
+
 // Build the DOM element that backs the mapbox Marker. We animate the
 // heading cone via a CSS rotation so the DOM stays stable across updates
 // and mapbox doesn't get confused about which element to position.
@@ -66,10 +73,10 @@ export interface LocationMarkerHandle {
 // mapbox map. Returns a handle the caller uses to push position updates
 // and clean up. Keeps its own DOM element and GeoJSON source so it can
 // coexist with the regular trip markers.
-export function attachLocationMarker(map: mapboxgl.Map): LocationMarkerHandle {
+export function attachLocationMarker(map: mapboxgl.Map, MarkerCtor: MarkerConstructor): LocationMarkerHandle {
   ensurePulseStyle()
   const { root, cone } = buildLocationEl()
-  const marker = new mapboxgl.Marker({ element: root, anchor: 'center' })
+  const marker = new MarkerCtor({ element: root, anchor: 'center' })
 
   const ensureAccuracyLayer = () => {
     if (map.getSource('trek-location-accuracy')) return

client/src/components/Map/placePopup.ts

@@ -0,0 +1,68 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
+import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
+import type { Place } from '../../types'
+
+// HTML builders for the Mapbox GL hover popup. The Leaflet map already shows a
+// name/category/address card on hover (a cursor-following overlay); Mapbox GL has
+// no equivalent, so these produce the same card as an HTML string for a
+// mapboxgl.Popup. Kept framework-agnostic (plain strings) on purpose.
+
+type PlaceWithCategory = Place & {
+  category_color?: string | null
+  category_icon?: string | null
+  category_name?: string | null
+}
+
+function esc(s: string | null | undefined): string {
+  if (!s) return ''
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+// Render a lucide category icon to an inline SVG string in the given colour.
+function iconSvg(iconName: string | null | undefined, size: number, color: string): string {
+  const Icon = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
+  try {
+    return renderToStaticMarkup(createElement(Icon, { size, color, strokeWidth: 2 }))
+  } catch {
+    return ''
+  }
+}
+
+// Only data: thumbnails and our own photo-proxy URLs are safe to drop straight
+// into an <img src> — everything else is a fetch seed, not a displayable URL.
+function isDisplayablePhoto(url: string | null | undefined): url is string {
+  return !!url && (url.startsWith('data:') || url.startsWith('/api/maps/place-photo/'))
+}
+
+const CARD_OPEN = '<div style="font-family:var(--font-system);max-width:220px;">'
+const NAME_STYLE = 'font-weight:600;font-size:12.5px;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
+const ADDR_STYLE = 'font-size:11px;color:#9ca3af;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
+
+/** Hover-popup card for a planned place: optional photo, name, category row, address. */
+export function buildPlacePopupHtml(place: PlaceWithCategory, photoUrl: string | null): string {
+  const img = isDisplayablePhoto(photoUrl)
+    ? `<div style="width:100%;height:84px;border-radius:8px;overflow:hidden;margin-bottom:6px;background:#f3f4f6;"><img src="${esc(photoUrl)}" style="width:100%;height:100%;object-fit:cover;display:block;" /></div>`
+    : ''
+  const category =
+    place.category_name && place.category_icon
+      ? `<div style="display:flex;align-items:center;gap:4px;margin-top:2px;">${iconSvg(place.category_icon, 11, place.category_color || '#6b7280')}<span style="font-size:11px;color:#6b7280;">${esc(place.category_name)}</span></div>`
+      : ''
+  const address = place.address ? `<div style="${ADDR_STYLE}">${esc(place.address)}</div>` : ''
+  return `${CARD_OPEN}${img}<div style="${NAME_STYLE}">${esc(place.name)}</div>${category}${address}</div>`
+}
+
+/** Hover-popup card for an OSM "explore" POI: category-coloured icon, name, address. */
+export function buildPoiPopupHtml(poi: Poi): string {
+  const cat = POI_CATEGORY_BY_KEY[poi.category]
+  const color = cat?.color || '#6b7280'
+  const icon = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 12, color, strokeWidth: 2 })) : ''
+  const head = `<div style="display:flex;align-items:center;gap:5px;"><span style="flex-shrink:0;display:inline-flex;line-height:0;">${icon}</span><span style="${NAME_STYLE}">${esc(poi.name)}</span></div>`
+  const address = poi.address ? `<div style="${ADDR_STYLE}">${esc(poi.address)}</div>` : ''
+  return `${CARD_OPEN}${head}${address}</div>`
+}

client/src/components/Map/poiCategories.ts

@@ -0,0 +1,43 @@
+import { Utensils, Coffee, Wine, BedDouble, Camera, Landmark, Trees, Ticket, type LucideIcon } from 'lucide-react'
+
+// 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
+// lives there; label/icon/colour live here. `color` doubles as the active-pill
+// fill AND the marker colour, so the pill and the map agree visually.
+export interface PoiCategory {
+  key: string
+  labelKey: string
+  Icon: LucideIcon
+  color: string
+}
+
+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' },
+  { 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' },
+]
+
+export const POI_CATEGORY_BY_KEY: Record<string, PoiCategory> = Object.fromEntries(
+  POI_CATEGORIES.map(c => [c.key, c]),
+)
+
+// One POI result from /api/maps/pois (mirror of the server's OverpassPoi).
+export interface Poi {
+  osm_id: string
+  name: string
+  lat: number
+  lng: number
+  category: string
+  poi_type: string
+  address: string | null
+  website: string | null
+  phone: string | null
+  opening_hours: string | null
+  cuisine: string | null
+  source: 'openstreetmap'
+}

client/src/components/Map/reservationsMapbox.ts

@@ -8,8 +8,9 @@
 
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import mapboxgl from 'mapbox-gl'
+import type mapboxgl from 'mapbox-gl'
 import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { escapeHtml } from '@trek/shared'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
 export const RESERVATION_SOURCE_ID = 'trek-reservations'
@@ -125,6 +126,7 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
+  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -136,23 +138,38 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
   const out: TransportItem[] = []
   for (const r of reservations) {
     if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
-    const eps = r.endpoints || []
-    const from = eps.find(e => e.role === 'from')
-    const to = eps.find(e => e.role === 'to')
-    if (!from || !to) continue
+    // Ordered waypoints (from · stops · to); a single-leg booking has exactly two.
+    const waypoints = (r.endpoints || [])
+      .filter(e => e.role === 'from' || e.role === 'to' || e.role === 'stop')
+      .slice()
+      .sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
+    if (waypoints.length < 2) continue
+    const from = waypoints[0]
+    const to = waypoints[waypoints.length - 1]
     const type = r.type as TransportType
     const isGeo = TYPE_META[type].geodesic
-    const arcs = isGeo
-      ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
-      : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
+    // One arc per leg (between consecutive waypoints), concatenated.
+    const arcs: [number, number][][] = []
+    let distanceKm = 0
+    for (let i = 0; i < waypoints.length - 1; i++) {
+      const a = waypoints[i]
+      const b = waypoints[i + 1]
+      const segArcs = isGeo
+        ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
+        : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
+      arcs.push(...segArcs)
+      distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
+    }
     const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
     const primaryArc = arcs[primaryIdx] ?? []
     const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-    const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
-    const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
+    const distance = `${Math.round(distanceKm)} km`
+    const mainLabel = waypoints.every(w => w.code)
+      ? waypoints.map(w => w.code).join(' → ')
+      : (from.code && to.code ? `${from.code} → ${to.code}` : null)
     const subParts = [duration, distance].filter(Boolean) as string[]
     const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
-    out.push({ res: r, from, to, type, arcs, primaryArc, mainLabel, subLabel })
+    out.push({ res: r, from, to, waypoints, type, arcs, primaryArc, mainLabel, subLabel })
   }
   return out
 }
@@ -161,7 +178,7 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
 function endpointMarkerHtml(type: TransportType, label: string | null): string {
   const { icon: IconCmp } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''
+  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''
   return `<div style="
     display:inline-flex;align-items:center;justify-content:center;gap:4px;
     padding:0 8px;border-radius:999px;
@@ -179,8 +196,8 @@ function buildStatsHtml(mainLabel: string | null, subLabel: string | null): { ht
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -203,18 +220,29 @@ export interface ReservationOverlayOptions {
   onEndpointClick?: (reservationId: number) => void
 }
 
+type GlMarker = {
+  setLngLat: (lngLat: mapboxgl.LngLatLike) => GlMarker
+  addTo: (map: mapboxgl.Map) => GlMarker
+  remove: () => void
+  getElement: () => HTMLElement
+}
+
+type MarkerConstructor = new (options?: { element?: HTMLElement; anchor?: string }) => GlMarker
+
 export class ReservationMapboxOverlay {
   private map: mapboxgl.Map
   private items: TransportItem[] = []
   private opts: ReservationOverlayOptions
-  private endpointMarkers: mapboxgl.Marker[] = []
-  private statsMarkers: { marker: mapboxgl.Marker; arc: [number, number][] }[] = []
+  private MarkerCtor: MarkerConstructor
+  private endpointMarkers: GlMarker[] = []
+  private statsMarkers: { marker: GlMarker; arc: [number, number][] }[] = []
   private rerender: () => void
   private destroyed = false
 
-  constructor(map: mapboxgl.Map, opts: ReservationOverlayOptions) {
+  constructor(map: mapboxgl.Map, opts: ReservationOverlayOptions, MarkerCtor: MarkerConstructor) {
     this.map = map
     this.opts = opts
+    this.MarkerCtor = MarkerCtor
     this.rerender = () => { if (!this.destroyed) this.render() }
     this.setupLayer()
     map.on('zoomend', this.rerender)
@@ -320,7 +348,7 @@ export class ReservationMapboxOverlay {
     if (show) {
       for (const item of visibleItems) {
         const showLabel = this.opts.showEndpointLabels && labelVisibleIds.has(item.res.id)
-        for (const ep of [item.from, item.to]) {
+        for (const ep of item.waypoints) {
           const label = showLabel ? (ep.code || cleanName(ep.name)) : null
           const el = document.createElement('div')
           el.innerHTML = endpointMarkerHtml(item.type, label)
@@ -333,7 +361,7 @@ export class ReservationMapboxOverlay {
               this.opts.onEndpointClick?.(item.res.id)
             })
           }
-          const marker = new mapboxgl.Marker({ element: node, anchor: 'center' })
+          const marker = new this.MarkerCtor({ element: node, anchor: 'center' })
             .setLngLat([ep.lng, ep.lat])
             .addTo(map)
           this.endpointMarkers.push(marker)
@@ -341,29 +369,10 @@ export class ReservationMapboxOverlay {
       }
     }
 
-    // ── stats label (flights only) ──────────────────────────────────
+    // Stats badge removed — the floating route/duration label on the arc is no
+    // longer drawn; only the connection line and the airport markers remain.
     this.statsMarkers.forEach(s => s.marker.remove())
     this.statsMarkers = []
-    if (show && this.opts.showStats) {
-      for (const item of visibleItems) {
-        if (item.type !== 'flight') continue
-        if (!labelVisibleIds.has(item.res.id)) continue
-        if (!item.mainLabel && !item.subLabel) continue
-        const arc = item.primaryArc
-        if (arc.length < 2) continue
-        const mid = arc[Math.floor(arc.length / 2)]!
-        const { html, width, height } = buildStatsHtml(item.mainLabel, item.subLabel)
-        const el = document.createElement('div')
-        el.style.cssText = `width:${width}px;height:${height}px;pointer-events:none;`
-        el.innerHTML = html
-        const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
-          .setLngLat([mid[1], mid[0]])
-          .addTo(map)
-        this.statsMarkers.push({ marker, arc })
-      }
-    }
-    // Prime rotation once so labels don't flash horizontal on first paint.
-    this.updateStatsRotation()
   }
 
   // Match the Leaflet overlay's "rotate the label along the arc" look.

client/src/components/Map/usePoiExplore.ts

@@ -0,0 +1,115 @@
+import { useState, useRef, useCallback, useMemo } from 'react'
+import { mapsApi } from '../../api/client'
+import type { Poi } from './poiCategories'
+
+export interface Bbox { south: number; west: number; north: number; east: number }
+
+// A request we cancelled on purpose (newer search superseded it) — not a failure.
+function isAbortError(err: unknown): boolean {
+  const e = err as { name?: string; code?: string } | null
+  return e?.name === 'CanceledError' || e?.code === 'ERR_CANCELED' || e?.name === 'AbortError'
+}
+
+/**
+ * State for the map POI "explore" pill. Toggling a category fetches its OSM POIs
+ * for the current viewport; panning/zooming does NOT auto-refetch — it just marks
+ * the results stale (`moved`) so the pill can offer "search this area". This keeps
+ * Overpass load (and visual churn) down.
+ */
+export function usePoiExplore() {
+  const [active, setActive] = useState<Set<string>>(() => new Set())
+  const [byCat, setByCat] = useState<Record<string, Poi[]>>({})
+  const [loadingKeys, setLoadingKeys] = useState<Set<string>>(() => new Set())
+  const [moved, setMoved] = useState(false)
+  // Categories whose last fetch genuinely failed (all Overpass mirrors down), so
+  // the pill can offer a retry instead of looking like "no places here".
+  const [errorKeys, setErrorKeys] = useState<Set<string>>(() => new Set())
+
+  const bboxRef = useRef<Bbox | null>(null)
+  // activeRef always mirrors the latest active set so async callbacks (fetch
+  // completions) can check whether a category is still wanted.
+  const activeRef = useRef(active)
+  activeRef.current = active
+  // One in-flight AbortController per category, so re-toggling / re-searching
+  // cancels the previous (possibly slow) Overpass request instead of racing it.
+  const abortRef = useRef<Record<string, AbortController>>({})
+
+  const setLoading = useCallback((key: string, on: boolean) => setLoadingKeys(prev => {
+    const next = new Set(prev)
+    if (on) next.add(key); else next.delete(key)
+    return next
+  }), [])
+
+  const setError = useCallback((key: string, on: boolean) => setErrorKeys(prev => {
+    if (on === prev.has(key)) return prev
+    const next = new Set(prev)
+    if (on) next.add(key); else next.delete(key)
+    return next
+  }), [])
+
+  const fetchCat = useCallback(async (key: string, bbox: Bbox) => {
+    abortRef.current[key]?.abort()
+    const ctrl = new AbortController()
+    abortRef.current[key] = ctrl
+    setLoading(key, true)
+    setError(key, false)
+    try {
+      const res = await mapsApi.pois(key, bbox, ctrl.signal)
+      // Drop the result if the user toggled this category off while the (slow)
+      // Overpass request was in flight — otherwise stale results re-appear.
+      setByCat(prev => (activeRef.current.has(key) ? { ...prev, [key]: res.pois } : prev))
+    } catch (err) {
+      // A superseded request was aborted on purpose — leave its state untouched
+      // so the newer request owns the spinner and results.
+      if (isAbortError(err)) return
+      // A real failure (every Overpass mirror down/timed out): surface it instead
+      // of a silent empty so the user can retry rather than assume "no places".
+      setByCat(prev => (activeRef.current.has(key) ? { ...prev, [key]: [] } : prev))
+      if (activeRef.current.has(key)) setError(key, true)
+    } finally {
+      // Only the latest controller for this key clears the spinner; a superseded
+      // one must not, or it would hide the newer request's in-flight state.
+      if (abortRef.current[key] === ctrl) {
+        setLoading(key, false)
+        delete abortRef.current[key]
+      }
+    }
+  }, [setLoading, setError])
+
+  const onViewportChange = useCallback((bbox: Bbox) => {
+    bboxRef.current = bbox
+    if (activeRef.current.size > 0) setMoved(true)
+  }, [])
+
+  // Single-select: clicking a category switches to it (dropping the previous one
+  // and its markers immediately) and fetches it for the current viewport; clicking
+  // the already-active category turns it off.
+  const toggle = useCallback((key: string) => {
+    const isOnlyActive = activeRef.current.has(key) && activeRef.current.size === 1
+    setMoved(false)
+    setErrorKeys(new Set())
+    // Switching to another category (or turning off) — cancel any in-flight
+    // fetches so their results can't land after the selection changed.
+    Object.values(abortRef.current).forEach(c => c.abort())
+    abortRef.current = {}
+    if (isOnlyActive) {
+      setActive(new Set())
+      setByCat({})
+      return
+    }
+    setActive(new Set([key]))
+    setByCat({})
+    if (bboxRef.current) fetchCat(key, bboxRef.current)
+  }, [fetchCat])
+
+  const searchArea = useCallback(() => {
+    const bbox = bboxRef.current
+    if (!bbox) return
+    setMoved(false)
+    activeRef.current.forEach(key => fetchCat(key, bbox))
+  }, [fetchCat])
+
+  const pois = useMemo(() => Object.values(byCat).flat(), [byCat])
+
+  return { active, pois, loadingKeys, errorKeys, moved, toggle, searchArea, onViewportChange }
+}

client/src/components/PDF/JourneyBookPDF.test.tsx

@@ -146,4 +146,20 @@ describe('downloadJourneyBookPDF', () => {
     expect(html).toContain('Journey Book');
     expect(html).toContain('The End');
   });
+
+  it('FE-COMP-JOURNEYPDF-007: sanitises HTML injected via an entry story and keeps the iframe script-free', async () => {
+    const journey = buildJourney();
+    journey.entries[0].story = 'Hello <script>alert(1)</script> <img src=x onerror="alert(2)"> world';
+    await downloadJourneyBookPDF(journey);
+    const iframe = getIframe()!;
+    const html = iframe.srcdoc;
+
+    // The script tag, image beacon and event handler are stripped from the story.
+    expect(html).not.toContain('<script');
+    expect(html).not.toContain('onerror');
+    expect(html).not.toContain('alert(2)');
+    // Benign prose survives.
+    expect(html).toContain('Hello');
+    expect(html).toContain('world');
+  });
 });

client/src/components/PDF/JourneyBookPDF.tsx

@@ -1,5 +1,6 @@
 // Journey Photo Book PDF — Polarsteps-inspired, magazine-density
 import { marked } from 'marked'
+import { sanitizeRichTextHtml } from '@trek/shared'
 import type { JourneyDetail, JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 function esc(str: string | null | undefined): string {
@@ -9,7 +10,9 @@ function esc(str: string | null | undefined): string {
 
 function md(str: string | null | undefined): string {
   if (!str) return ''
-  return marked.parse(str, { async: false, breaks: true }) as string
+  // marked passes embedded raw HTML through by default, so sanitise the result
+  // before it goes into the srcdoc iframe (keeps prose markup, drops scripts).
+  return sanitizeRichTextHtml(marked.parse(str, { async: false, breaks: true }) as string)
 }
 
 function abs(url: string | null | undefined): string {
@@ -308,7 +311,9 @@ export async function downloadJourneyBookPDF(journey: JourneyDetail) {
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
+  // No script runs inside the document (print is triggered from the parent via
+  // contentWindow.print()), so withhold allow-scripts to keep the sandbox tight.
+  iframe.sandbox = 'allow-same-origin allow-modals'
   iframe.srcdoc = html
 
   card.appendChild(header)

client/src/components/PDF/TripPDF.test.ts

@@ -84,6 +84,22 @@ const transportReservation = {
   metadata: JSON.stringify({ airline: 'Air Italia', flight_number: 'AI123', departure_airport: 'CDG', arrival_airport: 'FCO' }),
 } as any
 
+const multiLegFlight = {
+  id: 401,
+  title: 'Flight to Tokyo',
+  type: 'flight',
+  day_id: 10,
+  reservation_time: '2025-06-01T08:00:00',
+  confirmation_number: 'XYZ789',
+  metadata: JSON.stringify({
+    legs: [
+      { from: 'FRA', to: 'BER', airline: 'Lufthansa', flight_number: 'LH1' },
+      { from: 'BER', to: 'HND', airline: 'Lufthansa', flight_number: 'LH2' },
+    ],
+    departure_airport: 'FRA', arrival_airport: 'HND', airline: 'Lufthansa', flight_number: 'LH1',
+  }),
+} as any
+
 const richArgs = {
   trip: { id: 10, title: 'Italy Trip', description: 'Summer adventure', cover_image: '/uploads/cover.jpg' } as any,
   days: [dayWithPlaces],
@@ -196,6 +212,16 @@ describe('downloadTripPDF', () => {
     const iframe = getIframe()
     expect(iframe!.srcdoc).toContain('Flight to Rome')
     expect(iframe!.srcdoc).toContain('ABC123')
+    // Single-leg flight keeps its full-route subtitle.
+    expect(iframe!.srcdoc).toContain('Air Italia · AI123 · CDG → FCO')
+  })
+
+  it('FE-COMP-TRIPPDF-013b: renders every flight number for a multi-leg flight', async () => {
+    await downloadTripPDF({ ...richArgs, reservations: [multiLegFlight] })
+    const iframe = getIframe()
+    // One subtitle line per leg, each with its own flight number and segment route.
+    expect(iframe!.srcdoc).toContain('Lufthansa · LH1 · FRA → BER')
+    expect(iframe!.srcdoc).toContain('Lufthansa · LH2 · BER → HND')
   })
 
   it('FE-COMP-TRIPPDF-014: renders cover image when trip has cover_image', async () => {
@@ -259,6 +285,23 @@ describe('downloadTripPDF', () => {
     expect(iframe!.srcdoc).toContain('colosseum.jpg')
   })
 
+  it('FE-COMP-TRIPPDF-018b: renders a persisted place-photo proxy image_url as an <img>, not the category icon (#1130)', async () => {
+    const args = {
+      ...richArgs,
+      assignments: {
+        '10': [{
+          ...assignmentForDay,
+          place: { ...placeWithDetails, image_url: '/api/maps/place-photo/ChIJabc/bytes' },
+        }],
+      } as any,
+    }
+    await downloadTripPDF(args)
+    const iframe = getIframe()
+    // The proxy path (no file extension) must still embed as an absolute <img>.
+    expect(iframe!.srcdoc).toContain('http://localhost:3000/api/maps/place-photo/ChIJabc/bytes')
+    expect(iframe!.srcdoc).toContain('class="place-thumb"')
+  })
+
   it('FE-COMP-TRIPPDF-019: fetches google place photos for places with google_place_id', async () => {
     let photoCalled = false
     server.use(
@@ -280,6 +323,28 @@ describe('downloadTripPDF', () => {
     expect(photoCalled).toBe(true)
   })
 
+  it('FE-COMP-TRIPPDF-019b: fetches photos for OSM places via osm_id recovered from the places pool (#1130)', async () => {
+    let fetchedId: string | null = null
+    server.use(
+      http.get('/api/maps/place-photo/:placeId', ({ params }) => {
+        fetchedId = params.placeId as string
+        return HttpResponse.json({ photoUrl: 'https://example.com/osm.jpg' })
+      }),
+    )
+    // The assignment projection drops osm_id; the full place in `places` carries it.
+    const osmPlace = { ...placeWithDetails, id: 101, image_url: null, google_place_id: null, osm_id: 'node/240109189', lat: 41.89, lng: 12.49 }
+    const args = {
+      ...richArgs,
+      places: [osmPlace],
+      assignments: {
+        '10': [{ ...assignmentForDay, id: 201, place_id: 101, place: { ...placeWithDetails, id: 101, image_url: null, google_place_id: null } }],
+      } as any,
+    }
+    await downloadTripPDF(args)
+    // osm_id is used as the photo key (not the coords fallback), proving the pool lookup works.
+    expect(fetchedId).toBe('node/240109189')
+  })
+
   it('FE-COMP-TRIPPDF-020: renders empty day message when no items assigned', async () => {
     const args = {
       ...minimalArgs,

client/src/components/PDF/TripPDF.tsx

@@ -6,6 +6,7 @@ import { accommodationsApi, mapsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNote } from '../../types'
 import { isDayInAccommodationRange, getDayOrder } from '../../utils/dayOrder'
 import { splitReservationDateTime } from '../../utils/formatters'
+import { getFlightLegs } from '../../utils/flightLegs'
 
 function renderLucideIcon(icon:LucideIcon, props = {}) {
   if (!_renderToStaticMarkup) return ''
@@ -55,6 +56,10 @@ function absUrl(url) {
 function safeImg(url) {
   if (!url) return null
   if (url.startsWith('https://') || url.startsWith('http://')) return url
+  // The in-app place-photo proxy always streams a JPEG but has no file extension
+  // (it ends in …/bytes), so the extension check below would wrongly reject it —
+  // which is why persisted place photos showed as category icons in the PDF.
+  if (url.startsWith('/api/maps/place-photo/')) return absUrl(url)
   return /\.(jpe?g|png|webp|bmp|tiff?)(\?.*)?$/i.test(url) ? absUrl(url) : null
 }
 
@@ -92,21 +97,29 @@ function dayCost(assignments, dayId, locale) {
   return total > 0 ? `${total.toLocaleString(locale)} EUR` : null
 }
 
-// Pre-fetch Google Place photos for all assigned places
-async function fetchPlacePhotos(assignments: AssignmentsMap) {
+// Pre-fetch place photos for all assigned places.
+// Assignment places are a server-side projection that drops osm_id, so we recover
+// the full place from the trip's places pool and key the photo off the same id the
+// app UI uses (google_place_id || osm_id || coords) — otherwise OSM/coords-only
+// places fell back to category icons in the PDF even though they show photos in-app.
+async function fetchPlacePhotos(assignments: AssignmentsMap, places: Place[]) {
   const photoMap = {} // placeId → photoUrl
+  // The assignment projection drops osm_id, so recover it from the full places pool.
+  const osmById = new Map((places || []).map(p => [p.id, p.osm_id]))
   const allPlaces = Object.values(assignments).flatMap(a => a.map(x => x.place)).filter(Boolean)
   const unique = [...new Map(allPlaces.map(p => [p.id, p])).values()]
 
-  // Assignment places are a server-side projection that omits osm_id, so photo
-  // pre-fetch keys off the google_place_id that the projection does carry.
-  const toFetch = unique.filter(p => !p.image_url && p.google_place_id)
+  const toFetch = unique
+    .map(p => ({ p, osm_id: osmById.get(p.id) }))
+    .filter(({ p, osm_id }) => !p.image_url && (p.google_place_id || osm_id || (p.lat != null && p.lng != null)))
 
   await Promise.allSettled(
-    toFetch.map(async (place) => {
+    toFetch.map(async ({ p, osm_id }) => {
+      // Same key the app UI uses: google_place_id || osm_id || coords.
+      const photoId = p.google_place_id || osm_id || `coords:${p.lat}:${p.lng}`
       try {
-        const data = await mapsApi.placePhoto(place.google_place_id, place.lat, place.lng, place.name)
-        if (data.photoUrl) photoMap[place.id] = data.photoUrl
+        const data = await mapsApi.placePhoto(photoId, p.lat, p.lng, p.name)
+        if (data.photoUrl) photoMap[p.id] = data.photoUrl
       } catch {}
     })
   )
@@ -136,8 +149,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   //retrieve accommodations for the trip to display on the day sections and prefetch their photos if needed
   const accommodations = await accommodationsApi.list(trip.id);
 
-  // Pre-fetch place photos from Google
-  const photoMap = await fetchPlacePhotos(assignments)
+  // Pre-fetch place photos (Google, OSM and coords-only places)
+  const photoMap = await fetchPlacePhotos(assignments, places)
 
   const totalAssigned = new Set(
     Object.values(assignments || {}).flatMap(a => a.map(x => x.place?.id)).filter(Boolean)
@@ -211,11 +224,30 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
             const icon = reservationIconSvg(r.type)
             const color = RESERVATION_COLOR_MAP[r.type] || '#3b82f6'
             let subtitle = ''
-            if (r.type === 'flight') subtitle = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+            // Flights render one subtitle line per leg (see below); everything else is a single line.
+            let subtitleLines: string[] = []
+            if (r.type === 'flight') {
+              const legs = getFlightLegs(r)
+              if (legs.length > 1) {
+                // Multi-leg: one line per leg so every flight number + segment route is shown.
+                subtitleLines = legs.map(l =>
+                  [l.airline, l.flight_number,
+                   (l.from || l.to) ? [l.from, l.to].filter(Boolean).join(' → ') : '']
+                    .filter(Boolean).join(' · '))
+                  .filter(Boolean)
+              } else {
+                // Single-leg: full route over all waypoints (FRA → BER → HND), falling back to the
+                // flat metadata pair for legacy single-leg flights without endpoints.
+                const stops = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0)).map(e => e.code || e.name)
+                const route = stops.length >= 2 ? stops.join(' → ') : (meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : '')
+                subtitle = [meta.airline, meta.flight_number, route].filter(Boolean).join(' · ')
+              }
+            }
             else if (r.type === 'train') subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'restaurant') subtitle = [meta.party_size ? `${meta.party_size} guests` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'event') subtitle = [meta.venue].filter(Boolean).join(' · ')
             else if (r.type === 'tour') subtitle = [meta.operator].filter(Boolean).join(' · ')
+            if (subtitleLines.length === 0 && subtitle) subtitleLines = [subtitle]
             const locationLine = r.location || meta.location || ''
             const phase = pdfGetSpanPhase(r, day.id)
             const spanLabel = pdfGetSpanLabel(r, phase)
@@ -228,7 +260,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
                 <span class="note-icon">${icon}</span>
                 <div class="note-body">
                   <div class="note-text" style="font-weight: 600;">${titleHtml}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
-                  ${subtitle ? `<div class="note-time">${escHtml(subtitle)}</div>` : ''}
+                  ${subtitleLines.filter(Boolean).map(s => `<div class="note-time">${escHtml(s)}</div>`).join('')}
                   ${locationLine ? `<div class="note-time">${escHtml(locationLine)}</div>` : ''}
                   ${r.confirmation_number ? `<div class="note-time" style="font-size:9px;">Code: ${escHtml(r.confirmation_number)}</div>` : ''}
                 </div>
@@ -254,9 +286,10 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
           const cat = categories.find(c => c.id === place.category_id)
           const color = cat?.color || '#6366f1'
 
-          // Image: direct > google photo > fallback icon
+          // Image: direct > google photo > fallback icon. Both go through safeImg
+          // so the proxy path is resolved to an absolute URL the PDF can load.
           const directImg = safeImg(place.image_url)
-          const googleImg = photoMap[place.id] || null
+          const googleImg = safeImg(photoMap[place.id])
           const img = directImg || googleImg
 
           const iconSvg = categoryIconSvg(cat?.icon, color, 24)
@@ -282,6 +315,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
                   ${cat ? `<span class="cat-badge" style="background:${color}">${escHtml(cat.name)}</span>` : ''}
                 </div>
                 ${place.address ? `<div class="info-row">${svgPin}<span class="info-text">${escHtml(place.address)}</span></div>` : ''}
+                ${(place.lat != null && place.lng != null) ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted">${Number(place.lat).toFixed(5)}, ${Number(place.lng).toFixed(5)}</span></div>` : ''}
                 ${place.description ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.description)}</span></div>` : ''}
                 ${chips ? `<div class="chips">${chips}</div>` : ''}
                 ${place.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.notes)}</span></div>` : ''}
@@ -569,7 +603,9 @@ ${daysHtml}
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
+  // No script runs inside the document (print is parent-initiated), so withhold
+  // allow-scripts to keep the sandbox tight.
+  iframe.sandbox = 'allow-same-origin allow-modals'
   iframe.srcdoc = html
 
   card.appendChild(header)

client/src/components/Packing/ApplyTemplateButton.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Package } from 'lucide-react'
-import { adminApi, packingApi } from '../../api/client'
+import { packingApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
@@ -28,7 +28,7 @@ export default function ApplyTemplateButton({ tripId, style, className }: ApplyT
   const { t } = useTranslation()
 
   useEffect(() => {
-    adminApi.packingTemplates().then(d => setTemplates(d.templates || [])).catch(() => {})
+    packingApi.listTemplates(tripId).then(d => setTemplates(d.templates || [])).catch(() => {})
   }, [tripId])
 
   useEffect(() => {

client/src/components/Packing/PackingListPanel.test.tsx

@@ -7,7 +7,7 @@ import { server } from '../../../tests/helpers/msw/server';
 import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import { buildUser, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
+import { buildUser, buildAdmin, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
 import PackingListPanel, { itemWeight } from './PackingListPanel';
 
 describe('itemWeight (bag total weight calc)', () => {
@@ -34,10 +34,10 @@ beforeEach(() => {
     http.get('/api/trips/:id/packing/category-assignees', () =>
       HttpResponse.json({ assignees: {} })
     ),
-    http.get('/api/admin/bag-tracking', () =>
-      HttpResponse.json({ enabled: false })
+    http.get('/api/addons', () =>
+      HttpResponse.json({ bagTracking: false, addons: [] })
     ),
-    http.get('/api/admin/packing-templates', () =>
+    http.get('/api/trips/:id/packing/templates', () =>
       HttpResponse.json({ templates: [] })
     ),
   );
@@ -174,7 +174,9 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-016: delete item button exists and triggers API call', async () => {
     const user = userEvent.setup();
-    const item = buildPackingItem({ id: 99, name: 'To Remove', category: 'Test' });
+    // Uncategorized item: deleting it is a plain DELETE (a custom category's last
+    // item is instead converted to a placeholder — see FE-COMP-PACKING-070).
+    const item = buildPackingItem({ id: 99, name: 'To Remove', category: null });
     let deleteCalled = false;
     server.use(
       http.delete('/api/trips/1/packing/99', () => {
@@ -381,7 +383,7 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-030: packing template button present when templates available', async () => {
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 1, name: 'Beach Trip', item_count: 5 }] })
       )
     );
@@ -457,8 +459,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-034: bag tracking enabled shows Bags button and bag sidebar', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Carry-on', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -556,8 +558,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-039: bag modal opens when Bags button clicked with bag tracking enabled', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Main Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -585,8 +587,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-040: bag sidebar renders BagCard with bag name when enabled and bags exist', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 5, name: 'Backpack', color: '#10b981', weight_limit_grams: 10000, members: [] }] })
@@ -601,26 +603,36 @@ describe('PackingListPanel', () => {
     });
   });
 
-  it('FE-COMP-PACKING-041: save-as-template button present when items exist', async () => {
+  it('FE-COMP-PACKING-041: save-as-template button present for admins when items exist', async () => {
+    seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     const user = userEvent.setup();
     const items = [buildPackingItem({ name: 'Sunscreen', category: 'Toiletries' })];
-    const { container } = render(<PackingListPanel tripId={1} items={items} />);
+    render(<PackingListPanel tripId={1} items={items} />);
 
-    // Save-as-template button uses FolderPlus icon and "Save as template" text
-    const folderPlusBtn = container.querySelector('svg.lucide-folder-plus')?.closest('button');
-    expect(folderPlusBtn).toBeTruthy();
+    // Save-as-template button shows its label "Save as template"
+    const saveBtn = screen.getByText('Save as template').closest('button');
+    expect(saveBtn).toBeTruthy();
 
     // Click to show the name input
-    await user.click(folderPlusBtn!);
+    await user.click(saveBtn!);
 
     // Template name input appears
     expect(await screen.findByPlaceholderText('Template name')).toBeInTheDocument();
   });
 
+  it('FE-COMP-PACKING-041b: save-as-template button hidden for non-admins', () => {
+    // Default seeded user (beforeEach) is a non-admin trip owner with edit rights.
+    const items = [buildPackingItem({ name: 'Sunscreen', category: 'Toiletries' })];
+    render(<PackingListPanel tripId={1} items={items} />);
+
+    // The "Save as template" action must not be available to normal users.
+    expect(screen.queryByText('Save as template')).not.toBeInTheDocument();
+  });
+
   it('FE-COMP-PACKING-042: apply template dropdown opens when template button clicked', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 2, name: 'Summer Packing', item_count: 10 }] })
       )
     );
@@ -658,8 +670,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-044: bag item row shows weight input and bag button when bag tracking enabled', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [] })
@@ -706,6 +718,7 @@ describe('PackingListPanel', () => {
   });
 
   it('FE-COMP-PACKING-046: save-as-template form submission calls saveAsTemplate API', async () => {
+    seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     const user = userEvent.setup();
     let savedTemplateName = '';
     server.use(
@@ -714,16 +727,16 @@ describe('PackingListPanel', () => {
         savedTemplateName = String(body.name);
         return HttpResponse.json({ success: true });
       }),
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [] })
       )
     );
     const items = [buildPackingItem({ name: 'Item', category: 'Test' })];
-    const { container } = render(<PackingListPanel tripId={1} items={items} />);
+    render(<PackingListPanel tripId={1} items={items} />);
 
-    // Click the FolderPlus "Save as template" button
-    const folderPlusBtn = container.querySelector('svg.lucide-folder-plus')?.closest('button');
-    await user.click(folderPlusBtn!);
+    // Click the "Save as template" button
+    const saveBtn = screen.getByText('Save as template').closest('button');
+    await user.click(saveBtn!);
 
     // Type template name
     const nameInput = await screen.findByPlaceholderText('Template name');
@@ -736,8 +749,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-047: bag picker in item row opens when clicked with bag tracking enabled', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 3, name: 'Carry-on', color: '#ec4899', weight_limit_grams: null, members: [] }] })
@@ -765,8 +778,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-048: add bag in bag modal opens form when "Add bag" clicked', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Main Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -805,8 +818,8 @@ describe('PackingListPanel', () => {
     let putBody: Record<string, unknown> | null = null;
     const itemId = 120;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [] })
@@ -861,8 +874,8 @@ describe('PackingListPanel', () => {
     const itemId = 130;
     let putBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 7, name: 'Trolley', color: '#10b981', weight_limit_grams: null, members: [] }] })
@@ -930,8 +943,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-054: item with assigned bag shows "Unassigned" option in bag picker', async () => {
     const itemId = 140;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 5, name: 'MyBag', color: '#ec4899', weight_limit_grams: null, members: [] }] })
@@ -957,7 +970,7 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-055: apply template button click opens template dropdown and shows template', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 3, name: 'Weekend Pack', item_count: 8 }] })
       )
     );
@@ -1124,7 +1137,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let applyCalled = false;
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 5, name: 'Beach Trip', item_count: 12 }] })
       ),
       http.post('/api/trips/1/packing/apply-template/5', () => {
@@ -1177,7 +1190,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let createBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       // Start with one bag so the sidebar renders (sidebar requires bags.length > 0)
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Existing Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -1207,7 +1220,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let deleteCalled = false;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 9, name: 'Old Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
       ),
@@ -1235,7 +1248,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let updateBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 11, name: 'Carry-on', color: '#10b981', weight_limit_grams: null, members: [] }] })
       ),
@@ -1273,7 +1286,7 @@ describe('PackingListPanel', () => {
           current_user_id: 1,
         })
       ),
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 12, name: 'Day Pack', color: '#ec4899', weight_limit_grams: null, members: [] }] })
       )
@@ -1314,7 +1327,7 @@ describe('PackingListPanel', () => {
           current_user_id: 1,
         })
       ),
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 13, name: 'Weekend Bag', color: '#f97316', weight_limit_grams: null, members: [] }] })
       ),
@@ -1352,7 +1365,7 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-068: inline bag create in item row picker creates bag and assigns it', async () => {
     let createBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () => HttpResponse.json({ bags: [] })),
       http.post('/api/trips/1/packing/bags', async ({ request }) => {
         createBody = await request.json() as Record<string, unknown>;
@@ -1404,4 +1417,83 @@ describe('PackingListPanel', () => {
     expect(clickSpy).toHaveBeenCalled();
     clickSpy.mockRestore();
   });
+
+  it('FE-COMP-PACKING-070: deleting the last item of a custom category converts the row to a placeholder so the category persists in place (#1289)', async () => {
+    const user = userEvent.setup();
+    const item = buildPackingItem({ id: 99, name: 'Tent', category: 'Camping Gear' });
+    // handleDeleteItem decides "last in category" from the rendered list.
+    seedStore(useTripStore, { packingItems: [item] });
+    let deleted = false;
+    let putBody: Record<string, unknown> | null = null;
+    server.use(
+      http.delete('/api/trips/1/packing/99', () => {
+        deleted = true;
+        return HttpResponse.json({ success: true });
+      }),
+      http.put('/api/trips/1/packing/99', async ({ request }) => {
+        putBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ item: buildPackingItem({ id: 99, name: '...', category: 'Camping Gear' }) });
+      })
+    );
+    render(<PackingListPanel tripId={1} items={[item]} />);
+
+    await user.click(screen.getByTitle('Delete'));
+
+    // The row is updated in place (same id) rather than deleted, so colour/position hold.
+    await waitFor(() => expect(putBody).toMatchObject({ name: '...' }));
+    expect(deleted).toBe(false);
+  });
+
+  it('FE-COMP-PACKING-071: deleting the placeholder row deletes it, dismissing the empty category (#1289)', async () => {
+    const user = userEvent.setup();
+    const placeholder = buildPackingItem({ id: 5, name: '...', category: 'Camping Gear' });
+    seedStore(useTripStore, { packingItems: [placeholder] });
+    let deleted = false;
+    let converted = false;
+    server.use(
+      http.delete('/api/trips/1/packing/5', () => {
+        deleted = true;
+        return HttpResponse.json({ success: true });
+      }),
+      http.put('/api/trips/1/packing/5', () => {
+        converted = true;
+        return HttpResponse.json({ item: placeholder });
+      })
+    );
+    render(<PackingListPanel tripId={1} items={[placeholder]} />);
+
+    await user.click(screen.getByTitle('Delete'));
+
+    await waitFor(() => expect(deleted).toBe(true));
+    // It is the placeholder itself — it must be removed, not re-converted.
+    expect(converted).toBe(false);
+  });
+
+  it('FE-COMP-PACKING-072: adding an item to an empty category reuses the placeholder row instead of appending (#1289)', async () => {
+    const user = userEvent.setup();
+    const placeholder = buildPackingItem({ id: 5, name: '...', category: 'Camping Gear' });
+    seedStore(useTripStore, { packingItems: [placeholder] });
+    let posted = false;
+    let putBody: Record<string, unknown> | null = null;
+    server.use(
+      http.post('/api/trips/1/packing', () => {
+        posted = true;
+        return HttpResponse.json({ item: buildPackingItem({ id: 6 }) });
+      }),
+      http.put('/api/trips/1/packing/5', async ({ request }) => {
+        putBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ item: buildPackingItem({ id: 5, name: 'Tent', category: 'Camping Gear' }) });
+      })
+    );
+    render(<PackingListPanel tripId={1} items={[placeholder]} />);
+
+    // Open the category's inline "Add item" and add a real entry.
+    await user.click(screen.getByText('Add item'));
+    const input = await screen.findByPlaceholderText('Item name...');
+    await user.type(input, 'Tent');
+    await user.keyboard('{Enter}');
+
+    await waitFor(() => expect(putBody).toMatchObject({ name: 'Tent' }));
+    expect(posted).toBe(false);
+  });
 });

client/src/components/Packing/PackingListPanelCategoryGroup.tsx

@@ -18,6 +18,7 @@ interface KategorieGruppeProps {
   allCategories: string[]
   onRename: (oldName: string, newName: string) => Promise<void>
   onDeleteAll: (items: PackingItem[]) => Promise<void>
+  onDeleteItem: (item: PackingItem) => Promise<void>
   onAddItem: (category: string, name: string) => Promise<void>
   assignees: CategoryAssignee[]
   tripMembers: TripMember[]
@@ -28,7 +29,7 @@ interface KategorieGruppeProps {
   canEdit?: boolean
 }
 
-export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, onDeleteAll, onAddItem, assignees, tripMembers, onSetAssignees, bagTrackingEnabled, bags, onCreateBag, canEdit = true }: KategorieGruppeProps) {
+export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, onDeleteAll, onDeleteItem, onAddItem, assignees, tripMembers, onSetAssignees, bagTrackingEnabled, bags, onCreateBag, canEdit = true }: KategorieGruppeProps) {
   const [offen, setOffen] = useState(true)
   const [editingName, setEditingName] = useState(false)
   const [editKatName, setEditKatName] = useState(kategorie)
@@ -231,7 +232,7 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
       {offen && (
         <div style={{ padding: '4px 4px 6px' }}>
           {items.map(item => (
-            <ArtikelZeile key={item.id} item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} bagTrackingEnabled={bagTrackingEnabled} bags={bags} onCreateBag={onCreateBag} canEdit={canEdit} />
+            <ArtikelZeile key={item.id} item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} onDelete={onDeleteItem} bagTrackingEnabled={bagTrackingEnabled} bags={bags} onCreateBag={onCreateBag} canEdit={canEdit} />
           ))}
           {/* Inline add item */}
           {canEdit && (showAddItem ? (

client/src/components/Packing/PackingListPanelHeader.tsx

@@ -5,7 +5,7 @@ import type { PackingState } from './usePackingListPanel'
 
 export function PackingHeader(S: PackingState) {
   const {
-    inlineHeader, t, items, abgehakt, fortschritt, canEdit,
+    inlineHeader, t, items, abgehakt, fortschritt, canEdit, isAdmin,
     showSaveTemplate, saveTemplateName, setSaveTemplateName, handleSaveAsTemplate, setShowSaveTemplate,
     setShowImportModal, handleClearChecked, availableTemplates, templateDropdownRef,
     showTemplateDropdown, setShowTemplateDropdown, applyingTemplate, handleApplyTemplate,
@@ -26,7 +26,7 @@ export function PackingHeader(S: PackingState) {
           </div>
         ) : <span />}
         <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
-          {canEdit && items.length > 0 && showSaveTemplate && (
+          {canEdit && isAdmin && items.length > 0 && showSaveTemplate && (
             <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
               <input
                 type="text" autoFocus
@@ -97,7 +97,7 @@ export function PackingHeader(S: PackingState) {
               )}
             </div>
           )}
-          {inlineHeader && canEdit && items.length > 0 && !showSaveTemplate && (
+          {inlineHeader && canEdit && isAdmin && items.length > 0 && !showSaveTemplate && (
             <button onClick={() => setShowSaveTemplate(true)} style={{
               display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
               border: '1px solid var(--border-primary)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',

client/src/components/Packing/PackingListPanelItemRow.tsx

@@ -15,13 +15,14 @@ interface ArtikelZeileProps {
   tripId: number
   categories: string[]
   onCategoryChange: () => void
+  onDelete?: (item: PackingItem) => Promise<void>
   bagTrackingEnabled?: boolean
   bags?: PackingBag[]
   onCreateBag: (name: string) => Promise<PackingBag | undefined>
   canEdit?: boolean
 }
 
-export function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true }: ArtikelZeileProps) {
+export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDelete, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true }: ArtikelZeileProps) {
   const isPlaceholder = item.name === PACKING_PLACEHOLDER_NAME
   const [editing, setEditing] = useState(false)
   const [editName, setEditName] = useState(isPlaceholder ? '' : item.name)
@@ -43,6 +44,9 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTr
   }
 
   const handleDelete = async () => {
+    // The panel routes deletion through onDelete so an emptied custom category
+    // keeps its placeholder; fall back to a plain delete when used standalone.
+    if (onDelete) { await onDelete(item); return }
     try { await deletePackingItem(tripId, item.id) }
     catch { toast.error(t('packing.toast.deleteError')) }
   }

client/src/components/Packing/PackingListPanelList.tsx

@@ -4,7 +4,7 @@ import { KategorieGruppe } from './PackingListPanelCategoryGroup'
 
 export function PackingList(S: PackingState) {
   const {
-    items, gruppiert, t, tripId, allCategories, handleRenameCategory, handleDeleteCategory,
+    items, gruppiert, t, tripId, allCategories, handleRenameCategory, handleDeleteCategory, handleDeleteItem,
     handleAddItemToCategory, categoryAssignees, tripMembers, handleSetAssignees,
     bagTrackingEnabled, bags, handleCreateBagByName, canEdit,
   } = S
@@ -31,6 +31,7 @@ export function PackingList(S: PackingState) {
               allCategories={allCategories}
               onRename={handleRenameCategory}
               onDeleteAll={handleDeleteCategory}
+              onDeleteItem={handleDeleteItem}
               onAddItem={handleAddItemToCategory}
               assignees={categoryAssignees[kat] || []}
               tripMembers={tripMembers}

client/src/components/Packing/packingListPanel.constants.ts

@@ -45,7 +45,7 @@ export const KAT_COLORS = [
   '#14b8a6', // teal
 ]
 
-export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b']
+export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b', '#3b82f6', '#84cc16', '#d946ef', '#14b8a6', '#f43f5e', '#a855f7', '#eab308', '#64748b']
 
 // A category's first item is seeded with this sentinel because the server
 // rejects empty names. Treat it as a placeholder in the UI.

client/src/components/Packing/usePackingListPanel.ts

@@ -2,11 +2,13 @@ import { useState, useMemo, useRef, useEffect } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
+import { useAuthStore } from '../../store/authStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
-import { packingApi, tripsApi, adminApi } from '../../api/client'
+import { packingApi, tripsApi } from '../../api/client'
+import { useAddonStore } from '../../store/addonStore'
 import type { PackingItem, PackingBag } from '../../types'
-import { BAG_COLORS } from './packingListPanel.constants'
+import { BAG_COLORS, PACKING_PLACEHOLDER_NAME } from './packingListPanel.constants'
 import { parseImportLines } from './packingListPanel.helpers'
 
 export interface TripMember {
@@ -42,10 +44,11 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
   const [addingCategory, setAddingCategory] = useState(false)
   const [newCatName, setNewCatName] = useState('')
-  const { addPackingItem, updatePackingItem, deletePackingItem } = useTripStore()
+  const { addPackingItem, updatePackingItem, deletePackingItem, togglePackingItem } = useTripStore()
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
   const canEdit = can('packing_edit', trip)
+  const isAdmin = useAuthStore((s) => s.user?.role === 'admin')
   const toast = useToast()
   const { t } = useTranslation()
 
@@ -103,10 +106,45 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
 
   const handleAddItemToCategory = async (category: string, name: string) => {
     try {
-      await addPackingItem(tripId, { name, category })
+      // Reuse the '...' placeholder slot when the category already has one, so a
+      // freshly-emptied category keeps its position (and therefore its colour)
+      // instead of the new item being appended to the end of the list.
+      const placeholder = useTripStore.getState().packingItems.find(
+        i => i.category === category && i.name === PACKING_PLACEHOLDER_NAME
+      )
+      if (placeholder) {
+        await updatePackingItem(tripId, placeholder.id, { name })
+      } else {
+        await addPackingItem(tripId, { name, category })
+      }
     } catch { toast.error(t('packing.toast.addError')) }
   }
 
+  // Deleting an item from a row. When it is the last item of a user-created
+  // category, turn that row back into the '...' placeholder in place rather than
+  // deleting it (#1289). Updating the row keeps its id, list position and colour,
+  // so the category neither disappears nor jumps to the end. The default
+  // (uncategorized) group and the placeholder row itself are deleted normally —
+  // removing the placeholder is how an empty category is dismissed.
+  const handleDeleteItem = async (item: PackingItem) => {
+    const category = item.category
+    const isLastInCategory = !!category
+      && item.name !== PACKING_PLACEHOLDER_NAME
+      && !items.some(i => i.id !== item.id && i.category === category)
+    try {
+      if (isLastInCategory) {
+        if (item.checked) await togglePackingItem(tripId, item.id, false)
+        await updatePackingItem(tripId, item.id, {
+          name: PACKING_PLACEHOLDER_NAME, weight_grams: null, bag_id: null, quantity: 1,
+        })
+      } else {
+        await deletePackingItem(tripId, item.id)
+      }
+    } catch {
+      toast.error(t('packing.toast.deleteError'))
+    }
+  }
+
   const handleAddNewCategory = async () => {
     if (!newCatName.trim()) return
     let catName = newCatName.trim()
@@ -145,19 +183,24 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
     if (failed) toast.error(t('packing.toast.deleteError'))
   }
 
-  // Bag tracking
-  const [bagTrackingEnabled, setBagTrackingEnabled] = useState(false)
+  // Bag tracking — the global toggle is a packing sub-flag surfaced to every
+  // authenticated user via the addon store (loaded on app start), not the
+  // admin-only endpoint, so non-admin members see weights/bags too.
+  const bagTrackingEnabled = useAddonStore(s => s.bagTracking)
+  const addonsLoaded = useAddonStore(s => s.loaded)
+  const loadAddons = useAddonStore(s => s.loadAddons)
   const [bags, setBags] = useState<PackingBag[]>([])
   const [newBagName, setNewBagName] = useState('')
   const [showAddBag, setShowAddBag] = useState(false)
   const [showBagModal, setShowBagModal] = useState(false)
 
   useEffect(() => {
-    adminApi.getBagTracking().then(d => {
-      setBagTrackingEnabled(d.enabled)
-      if (d.enabled) packingApi.listBags(tripId).then(r => setBags(r.bags || [])).catch(() => {})
-    }).catch(() => {})
-  }, [tripId])
+    if (!addonsLoaded) loadAddons()
+  }, [addonsLoaded, loadAddons])
+
+  useEffect(() => {
+    if (bagTrackingEnabled) packingApi.listBags(tripId).then(r => setBags(r.bags || [])).catch(() => {})
+  }, [tripId, bagTrackingEnabled])
 
   const handleCreateBag = async () => {
     if (!newBagName.trim()) return
@@ -234,7 +277,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const templateDropdownRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+    packingApi.listTemplates(tripId).then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
   }, [tripId])
 
   useEffect(() => {
@@ -267,7 +310,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
       toast.success(t('packing.templateSaved'))
       setShowSaveTemplate(false)
       setSaveTemplateName('')
-      adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+      packingApi.listTemplates(tripId).then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
     } catch {
       toast.error(t('common.error'))
     }
@@ -297,10 +340,10 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const font = { fontFamily: "var(--font-system)" }
 
   return {
-    tripId, items, inlineHeader, t, canEdit, font,
+    tripId, items, inlineHeader, t, canEdit, isAdmin, font,
     filter, setFilter, addingCategory, setAddingCategory, newCatName, setNewCatName,
     tripMembers, categoryAssignees, handleSetAssignees, allCategories, gruppiert, abgehakt, fortschritt,
-    handleAddItemToCategory, handleAddNewCategory, handleRenameCategory, handleDeleteCategory, handleClearChecked,
+    handleAddItemToCategory, handleAddNewCategory, handleRenameCategory, handleDeleteCategory, handleDeleteItem, handleClearChecked,
     bagTrackingEnabled, bags, newBagName, setNewBagName, showAddBag, setShowAddBag, showBagModal, setShowBagModal,
     handleCreateBag, handleCreateBagByName, handleDeleteBag, handleUpdateBag, handleSetBagMembers,
     availableTemplates, showTemplateDropdown, setShowTemplateDropdown, applyingTemplate,

client/src/components/Planner/AirTrailImportModal.tsx

@@ -0,0 +1,261 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { useState, useRef, useEffect, useMemo } from 'react'
+import { Plane, X, Check } from 'lucide-react'
+import type { AirtrailFlight, AirtrailImportResult } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { airtrailApi, reservationsApi } from '../../api/client'
+import { useTripStore } from '../../store/tripStore'
+
+interface AirTrailImportModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tripId: number
+  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
+}
+
+/** Locale-aware date (e.g. de → 13.06.2026, en-US → 06/13/2026). */
+function fmtDate(d: string | null, locale: string): string {
+  if (!d) return ''
+  try {
+    return new Date(d + 'T00:00:00Z').toLocaleDateString(locale, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      timeZone: 'UTC',
+    })
+  } catch {
+    return d
+  }
+}
+
+export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo }: AirTrailImportModalProps) {
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const trip = useTripStore(s => s.trip)
+  const reservations = useTripStore(s => s.reservations)
+  const loadReservations = useTripStore(s => s.loadReservations)
+  const mouseDownTarget = useRef<EventTarget | null>(null)
+
+  const [loading, setLoading] = useState(false)
+  const [importing, setImporting] = useState(false)
+  const [error, setError] = useState('')
+  const [flights, setFlights] = useState<AirtrailFlight[]>([])
+  const [selected, setSelected] = useState<Set<string>>(() => new Set())
+
+  // AirTrail flight ids already linked to a reservation in this trip.
+  const importedIds = useMemo(() => {
+    const set = new Set<string>()
+    for (const r of reservations) {
+      if (r.external_source === 'airtrail' && r.external_id) set.add(String(r.external_id))
+    }
+    return set
+  }, [reservations])
+
+  const inRange = (f: AirtrailFlight): boolean =>
+    !!(f.date && trip?.start_date && trip?.end_date && f.date >= trip.start_date && f.date <= trip.end_date)
+
+  useEffect(() => {
+    if (!isOpen) return
+    setError('')
+    setSelected(new Set())
+    setLoading(true)
+    airtrailApi
+      .flights()
+      .then((d: { flights: AirtrailFlight[] }) => {
+        const list = d.flights ?? []
+        setFlights(list)
+        // Pre-select the flights that fall inside the trip and aren't imported yet.
+        const pre = new Set<string>()
+        for (const f of list) if (inRange(f) && !importedIds.has(f.id)) pre.add(f.id)
+        setSelected(pre)
+      })
+      .catch((err: any) => setError(err?.response?.data?.error ?? t('reservations.airtrail.loadError')))
+      .finally(() => setLoading(false))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen])
+
+  const { during, others } = useMemo(() => {
+    const during: AirtrailFlight[] = []
+    const others: AirtrailFlight[] = []
+    for (const f of flights) (inRange(f) ? during : others).push(f)
+    const byDateDesc = (a: AirtrailFlight, b: AirtrailFlight) => (b.date ?? '').localeCompare(a.date ?? '')
+    return { during: during.sort(byDateDesc), others: others.sort(byDateDesc) }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flights, trip?.start_date, trip?.end_date])
+
+  const toggle = (id: string) => {
+    setSelected(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const handleClose = () => { onClose() }
+
+  const handleImport = async () => {
+    const ids = [...selected].filter(id => !importedIds.has(id))
+    if (ids.length === 0 || importing) return
+    setImporting(true)
+    setError('')
+    try {
+      const result: AirtrailImportResult = await airtrailApi.import(tripId, ids)
+      await loadReservations(tripId)
+
+      const imported = result.imported ?? []
+      if (imported.length > 0) {
+        pushUndo?.(t('reservations.airtrail.undo'), async () => {
+          const linked = useTripStore.getState().reservations.filter(
+            r => r.external_source === 'airtrail' && r.external_id && imported.includes(String(r.external_id)),
+          )
+          await Promise.all(linked.map(r => reservationsApi.delete(tripId, r.id).catch(() => {})))
+          await loadReservations(tripId)
+        })
+        toast.success(t('reservations.airtrail.imported', { count: imported.length }))
+      }
+
+      const skippedInTrip = (result.skipped ?? []).filter(s => s.reason === 'already-in-trip').length
+      if (skippedInTrip > 0) toast.warning(t('reservations.airtrail.skippedDuplicate', { count: skippedInTrip }))
+      if (imported.length === 0 && skippedInTrip === 0) toast.warning(t('reservations.airtrail.nothingImported'))
+
+      handleClose()
+    } catch (err: any) {
+      setError(err?.response?.data?.error ?? t('reservations.airtrail.importError'))
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  const selectableCount = [...selected].filter(id => !importedIds.has(id)).length
+
+  if (!isOpen) return null
+
+  const renderFlight = (f: AirtrailFlight) => {
+    const already = importedIds.has(f.id)
+    const isSelected = selected.has(f.id)
+    const label = f.flightNumber ? `${f.airline ? `${f.airline} ` : ''}${f.flightNumber}` : `${f.fromCode ?? '?'} → ${f.toCode ?? '?'}`
+    return (
+      <button
+        key={f.id}
+        onClick={() => !already && toggle(f.id)}
+        disabled={already}
+        className={already ? 'bg-surface-tertiary' : isSelected ? 'bg-surface-secondary' : 'bg-transparent'}
+        style={{
+          width: '100%', textAlign: 'left', borderRadius: 10, padding: '10px 12px', marginBottom: 8,
+          border: `1px solid ${isSelected && !already ? 'var(--accent)' : 'var(--border-primary)'}`,
+          opacity: already ? 0.55 : 1, cursor: already ? 'default' : 'pointer',
+          display: 'flex', gap: 10, alignItems: 'center', fontFamily: 'inherit',
+          transition: 'border-color 0.15s, background 0.15s',
+        }}
+      >
+        <span style={{
+          flexShrink: 0, width: 18, height: 18, borderRadius: 5,
+          border: `1.5px solid ${isSelected || already ? 'var(--accent)' : 'var(--border-primary)'}`,
+          background: isSelected || already ? 'var(--accent)' : 'transparent',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          {(isSelected || already) && <Check size={12} color="var(--accent-text)" strokeWidth={3} />}
+        </span>
+        <Plane size={15} color="#3b82f6" style={{ flexShrink: 0 }} />
+        <span style={{ flex: 1, minWidth: 0 }}>
+          <span style={{ display: 'block', fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+          <span style={{ display: 'block', fontSize: 11, color: 'var(--text-muted)' }}>
+            {f.fromCode ?? f.fromName ?? '?'} → {f.toCode ?? f.toName ?? '?'}{f.date ? ` · ${fmtDate(f.date, locale)}` : ''}
+          </span>
+        </span>
+        {already && (
+          <span style={{ flexShrink: 0, fontSize: 10, fontWeight: 600, color: 'var(--text-faint)' }}>
+            {t('reservations.airtrail.alreadyImported')}
+          </span>
+        )}
+      </button>
+    )
+  }
+
+  return ReactDOM.createPortal(
+    <div
+      className="bg-[rgba(0,0,0,0.4)]"
+      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+      onMouseDown={e => { mouseDownTarget.current = e.target }}
+      onClick={e => {
+        if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) handleClose()
+        mouseDownTarget.current = null
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        className="bg-surface-card"
+        style={{ borderRadius: 16, width: '100%', maxWidth: 540, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: 'var(--font-system)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
+          <Plane size={16} color="#3b82f6" />
+          <div style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
+            {t('reservations.airtrail.title')}
+          </div>
+          <button onClick={handleClose} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+          {loading && (
+            <div className="text-content-faint" style={{ fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
+              {t('common.loading')}
+            </div>
+          )}
+
+          {!loading && flights.length === 0 && !error && (
+            <div className="text-content-faint" style={{ fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
+              {t('reservations.airtrail.empty')}
+            </div>
+          )}
+
+          {!loading && during.length > 0 && (
+            <>
+              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', margin: '2px 0 8px' }}>
+                {t('reservations.airtrail.duringTrip')}
+              </div>
+              {during.map(renderFlight)}
+            </>
+          )}
+
+          {!loading && others.length > 0 && (
+            <>
+              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-faint)', margin: `${during.length > 0 ? 14 : 2}px 0 8px` }}>
+                {t('reservations.airtrail.otherFlights')}
+              </div>
+              {others.map(renderFlight)}
+            </>
+          )}
+
+          {error && (
+            <div className="bg-[rgba(239,68,68,0.08)] text-[#b91c1c]" style={{ border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10, padding: '8px 10px', fontSize: 12, whiteSpace: 'pre-wrap', marginTop: 8 }}>
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-faint)' }}>
+          <button
+            onClick={handleClose}
+            style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={handleImport}
+            disabled={selectableCount === 0 || importing}
+            className={selectableCount > 0 && !importing ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
+            style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: selectableCount > 0 && !importing ? 'pointer' : 'default', fontFamily: 'inherit' }}
+          >
+            {importing ? t('common.loading') : t('reservations.airtrail.importCta', { count: selectableCount })}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}

client/src/components/Planner/BookingCostsSection.tsx

@@ -0,0 +1,82 @@
+import { Plus, Pencil, Trash2 } from 'lucide-react'
+import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTranslation } from '../../i18n'
+import { formatMoney } from '../../utils/formatters'
+import { catMeta } from '../Budget/costsCategories'
+import type { BudgetItem } from '../../types'
+
+/**
+ * The Costs block inside a booking modal. Replaces the old inline price + budget
+ * category fields: when no expense is linked yet it offers a "create expense"
+ * button (the modal saves the booking first, then opens the full Costs editor);
+ * once linked it shows the expense with edit / remove actions.
+ */
+export function BookingCostsSection({ reservationId, pendingExpense, onCreate, onEdit, onRemove }: {
+  reservationId: number | null
+  /** A cost parsed from an import that will be linked on save — previewed before the booking exists. */
+  pendingExpense?: { total_price: number; currency?: string | null; category: string } | null
+  onCreate: () => void
+  onEdit: (item: BudgetItem) => void
+  onRemove: (item: BudgetItem) => void
+}) {
+  const { t, locale } = useTranslation()
+  const budgetItems = useTripStore(s => s.budgetItems)
+  const trip = useTripStore(s => s.trip)
+  const displayCurrency = useSettingsStore(s => s.settings.default_currency)
+  const base = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
+  const linked = reservationId ? budgetItems.find(i => i.reservation_id === reservationId) : null
+
+  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
+
+  // Import review (booking not saved yet): preview the parsed cost that will be linked on save.
+  if (!linked && pendingExpense && pendingExpense.total_price > 0) {
+    const meta = catMeta(pendingExpense.category)
+    const Icon = meta.Icon
+    return (
+      <div>
+        <label className={labelCls}>{t('reservations.linkedExpense')}</label>
+        <div className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10 }}>
+          <span style={{ width: 26, height: 26, borderRadius: 7, display: 'grid', placeItems: 'center', background: meta.color + '22', color: meta.color, flexShrink: 0 }}><Icon size={14} /></span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>{t(meta.labelKey)}</div>
+            <div className="text-content-faint" style={{ fontSize: 12 }}>{t('reservations.createExpenseHint')}</div>
+          </div>
+          <span className="text-content" style={{ fontSize: 14, fontWeight: 700, flexShrink: 0 }}>{formatMoney(pendingExpense.total_price, pendingExpense.currency || base, locale)}</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (linked) {
+    const meta = catMeta(linked.category)
+    const Icon = meta.Icon
+    return (
+      <div>
+        <label className={labelCls}>{t('reservations.linkedExpense')}</label>
+        <div className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10 }}>
+          <span style={{ width: 26, height: 26, borderRadius: 7, display: 'grid', placeItems: 'center', background: meta.color + '22', color: meta.color, flexShrink: 0 }}><Icon size={14} /></span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="text-content" style={{ fontSize: 14, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{linked.name}</div>
+            <div className="text-content-faint" style={{ fontSize: 12 }}>{t(meta.labelKey)}</div>
+          </div>
+          <span className="text-content" style={{ fontSize: 14, fontWeight: 700, flexShrink: 0 }}>{formatMoney(linked.total_price, linked.currency || base, locale)}</span>
+          <button type="button" onClick={() => onEdit(linked)} title={t('common.edit')} className="text-content-muted border border-edge bg-surface-card" style={{ display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' }}><Pencil size={13} /></button>
+          <button type="button" onClick={() => onRemove(linked)} title={t('reservations.removeExpense')} className="text-content-muted border border-edge bg-surface-card" style={{ display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' }}><Trash2 size={13} /></button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <label className={labelCls}>{t('reservations.costsLabel')}</label>
+      <button type="button" onClick={onCreate}
+        className="bg-surface-secondary border border-edge text-content"
+        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px 13px', borderRadius: 10, fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+        <Plus size={15} /> {t('reservations.createExpense')}
+      </button>
+      <div className="text-content-faint" style={{ fontSize: 11, marginTop: 6 }}>{t('reservations.createExpenseHint')}</div>
+    </div>
+  )
+}

client/src/components/Planner/BookingCostsSection.types.ts

@@ -0,0 +1,11 @@
+import type { BudgetItem } from '../../types'
+
+/**
+ * A request from a booking modal to open the Costs expense editor — either to
+ * edit the already-linked expense, or to create a new one prefilled from the
+ * booking (the modal saves the booking first so `reservationId` is known).
+ */
+export interface BookingExpenseRequest {
+  editItem?: BudgetItem
+  prefill?: { reservationId?: number; name?: string; category?: string; amount?: number }
+}

client/src/components/Planner/BookingImportModal.tsx

@@ -1,81 +1,44 @@
-import React from 'react'
 import ReactDOM from 'react-dom'
 import { useState, useRef, useEffect } from 'react'
-import { Upload, Plane, Train, Hotel, UtensilsCrossed, Car, Anchor, Calendar, ArrowLeft, X } from 'lucide-react'
-import type { BookingImportPreviewItem } from '@trek/shared'
+import { Upload, X } from 'lucide-react'
 import { useTranslation } from '../../i18n'
-import { useToast } from '../shared/Toast'
-import { reservationsApi } from '../../api/client'
-import { useTripStore } from '../../store/tripStore'
+import { reservationsApi, healthApi } from '../../api/client'
+import { useBackgroundTasksStore } from '../../store/backgroundTasksStore'
+import { saveImportFiles } from '../../db/offlineDb'
 
 interface BookingImportModalProps {
   isOpen: boolean
   onClose: () => void
   tripId: number
-  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
 }
 
 const ACCEPTED_EXTS = ['.eml', '.pdf', '.pkpass', '.html', '.htm', '.txt']
 const MAX_FILE_BYTES = 10 * 1024 * 1024
 const MAX_FILES = 5
 
-const TYPE_ICONS: Record<string, React.FC<{ size: number; color?: string }>> = {
-  flight: Plane,
-  train: Train,
-  hotel: Hotel,
-  restaurant: UtensilsCrossed,
-  car: Car,
-  cruise: Anchor,
-  event: Calendar,
-}
-
-function typeColor(type: string): string {
-  const map: Record<string, string> = {
-    flight: '#3b82f6',
-    train: '#10b981',
-    hotel: '#8b5cf6',
-    restaurant: '#f59e0b',
-    car: '#6b7280',
-    cruise: '#06b6d4',
-    event: '#ec4899',
-  }
-  return map[type] ?? 'var(--text-faint)'
-}
-
-function formatDateTime(iso: unknown): string {
-  if (!iso) return ''
-  const str = typeof iso === 'string' ? iso : typeof iso === 'object' ? JSON.stringify(iso) : String(iso)
-  const date = str.slice(0, 10)
-  const time = str.length > 10 ? str.slice(11, 16) : ''
-  return [date, time].filter(Boolean).join(' ')
-}
-
-export default function BookingImportModal({ isOpen, onClose, tripId, pushUndo }: BookingImportModalProps) {
+/**
+ * Upload booking files and kick off a BACKGROUND parse. The modal closes at once;
+ * the parse runs server-side and is tracked by the global BackgroundTasksWidget
+ * (progress over the WebSocket). When it finishes, the trip page opens the per-item
+ * review flow — so the user can navigate and keep editing while it works.
+ */
+export default function BookingImportModal({ isOpen, onClose, tripId }: BookingImportModalProps) {
   const { t } = useTranslation()
-  const toast = useToast()
-  const loadTrip = useTripStore((s) => s.loadTrip)
+  const addTask = useBackgroundTasksStore((s) => s.addTask)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const mouseDownTarget = useRef<EventTarget | null>(null)
 
-  type Phase = 'upload' | 'preview' | 'confirming'
-  const [phase, setPhase] = useState<Phase>('upload')
   const [files, setFiles] = useState<File[]>([])
   const [isDragOver, setIsDragOver] = useState(false)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
-  const [previewItems, setPreviewItems] = useState<BookingImportPreviewItem[]>([])
-  const [warnings, setWarnings] = useState<string[]>([])
-  const [excluded, setExcluded] = useState<Set<number>>(() => new Set())
+  const [aiParsing, setAiParsing] = useState(false)
 
   const reset = () => {
-    setPhase('upload')
     setFiles([])
     setIsDragOver(false)
     setLoading(false)
     setError('')
-    setPreviewItems([])
-    setWarnings([])
-    setExcluded(new Set())
   }
 
   useEffect(() => {
@@ -84,6 +47,11 @@ export default function BookingImportModal({ isOpen, onClose, tripId, pushUndo }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen])
 
+  useEffect(() => {
+    if (!isOpen) return
+    healthApi.features().then((f) => setAiParsing(!!f.aiParsing)).catch(() => setAiParsing(false))
+  }, [isOpen])
+
   const handleClose = () => { reset(); onClose() }
 
   const validateFile = (f: File): string | null => {
@@ -121,88 +89,44 @@ export default function BookingImportModal({ isOpen, onClose, tripId, pushUndo }
     if (list.length) selectFiles(list)
   }
 
+  // Start the parse in the background and close — the widget takes it from here.
   const handleParse = async () => {
     if (files.length === 0 || loading) return
     setLoading(true)
     setError('')
     try {
-      const result = await reservationsApi.importBookingPreview(tripId, files)
-      setPreviewItems(result.items ?? [])
-      setWarnings(result.warnings ?? [])
-      setExcluded(new Set())
-      setPhase('preview')
-    } catch (err: any) {
-      const msg = err?.response?.data?.error ?? t('reservations.import.error')
-      setError(msg)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleConfirm = async () => {
-    const toImport = previewItems.filter((_, i) => !excluded.has(i))
-    if (toImport.length === 0) return
-    setPhase('confirming')
-    setError('')
-    try {
-      const result = await reservationsApi.importBookingConfirm(tripId, toImport)
-      const created = result.created ?? []
-      await loadTrip(tripId)
-
-      if (created.length > 0) {
-        pushUndo?.(t('undo.importBooking'), async () => {
-          try {
-            const { reservationsApi: rApi } = await import('../../api/client')
-            await Promise.all(created.map((r) => rApi.delete(tripId, r.id).catch(() => {})))
-          } catch {}
-          await loadTrip(tripId)
-        })
-        toast.success(t('reservations.import.success', { count: created.length }))
-      } else {
-        toast.warning(t('reservations.import.previewEmpty'))
-      }
-
+      const mode = aiParsing ? 'fallback-on-empty' : 'no-ai'
+      const { jobId } = await reservationsApi.importBookingAsync(tripId, files, mode)
+      // Keep the uploaded files so the review can attach each source document to its booking —
+      // in memory for the immediate path, and in IndexedDB so it survives a reload mid-parse.
+      await saveImportFiles(jobId, files)
+      addTask({ id: jobId, tripId: String(tripId), label: files.map((f) => f.name).join(', '), total: files.length, files })
       handleClose()
     } catch (err: any) {
       setError(err?.response?.data?.error ?? t('reservations.import.error'))
-      setPhase('preview')
+      setLoading(false)
     }
   }
 
-  const toggleExclude = (idx: number) => {
-    setExcluded(prev => {
-      const next = new Set(prev)
-      if (next.has(idx)) next.delete(idx); else next.add(idx)
-      return next
-    })
-  }
-
-  const activeCount = previewItems.filter((_, i) => !excluded.has(i)).length
-
   if (!isOpen) return null
 
   return ReactDOM.createPortal(
     <div
       className="bg-[rgba(0,0,0,0.4)]"
       style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-      onMouseDown={e => { mouseDownTarget.current = e.target }}
-      onClick={e => {
+      onMouseDown={(e) => { mouseDownTarget.current = e.target }}
+      onClick={(e) => {
         if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) handleClose()
         mouseDownTarget.current = null
       }}
     >
       <div
-        onClick={e => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
         className="bg-surface-card"
-        style={{ borderRadius: 16, width: '100%', maxWidth: 540, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "var(--font-system)", maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}
+        style={{ borderRadius: 16, width: '100%', maxWidth: 540, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: 'var(--font-system)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}
       >
         {/* Header */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
-          {phase === 'preview' && (
-            <button onClick={() => setPhase('upload')} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
-              <ArrowLeft size={16} />
-            </button>
-          )}
           <div style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
             {t('reservations.import.title')}
           </div>
@@ -212,131 +136,45 @@ export default function BookingImportModal({ isOpen, onClose, tripId, pushUndo }
         </div>
 
         <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
-          {/* Upload phase */}
-          {phase === 'upload' && (
-            <>
-              <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 14, lineHeight: 1.45 }}>
-                {t('reservations.import.acceptedFormats')}
-              </div>
+          <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 14, lineHeight: 1.45 }}>
+            {t('reservations.import.acceptedFormats')}
+          </div>
 
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept={ACCEPTED_EXTS.join(',')}
-                multiple
-                style={{ display: 'none' }}
-                onChange={handleInputChange}
-              />
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={ACCEPTED_EXTS.join(',')}
+            multiple
+            style={{ display: 'none' }}
+            onChange={handleInputChange}
+          />
 
-              <div
-                onClick={() => fileInputRef.current?.click()}
-                onDragOver={handleDragOver}
-                onDragEnter={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
-                className={isDragOver ? 'bg-surface-tertiary' : 'bg-transparent'}
-                style={{
-                  width: '100%', minHeight: 100, borderRadius: 12,
-                  border: `2px dashed ${isDragOver ? 'var(--accent)' : 'var(--border-primary)'}`,
-                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-                  gap: 6, fontSize: 13, fontWeight: 500, cursor: 'pointer',
-                  marginBottom: 12, padding: 16, boxSizing: 'border-box',
-                  transition: 'border-color 0.15s, background 0.15s',
-                }}
-              >
-                <Upload size={18} strokeWidth={1.8} color={isDragOver ? 'var(--accent)' : 'var(--text-faint)'} style={{ pointerEvents: 'none' }} />
-                {isDragOver ? (
-                  <span className="text-accent" style={{ pointerEvents: 'none' }}>{t('reservations.import.dropActive')}</span>
-                ) : files.length > 0 ? (
-                  <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{files.map(f => f.name).join(', ')}</span>
-                ) : (
-                  <span style={{ color: 'var(--text-faint)', textAlign: 'center', pointerEvents: 'none' }}>{t('reservations.import.dropHere')}</span>
-                )}
-              </div>
-            </>
-          )}
+          <div
+            onClick={() => fileInputRef.current?.click()}
+            onDragOver={handleDragOver}
+            onDragEnter={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            className={isDragOver ? 'bg-surface-tertiary' : 'bg-transparent'}
+            style={{
+              width: '100%', minHeight: 100, borderRadius: 12,
+              border: `2px dashed ${isDragOver ? 'var(--accent)' : 'var(--border-primary)'}`,
+              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+              gap: 6, fontSize: 13, fontWeight: 500, cursor: 'pointer',
+              marginBottom: 12, padding: 16, boxSizing: 'border-box',
+              transition: 'border-color 0.15s, background 0.15s',
+            }}
+          >
+            <Upload size={18} strokeWidth={1.8} color={isDragOver ? 'var(--accent)' : 'var(--text-faint)'} style={{ pointerEvents: 'none' }} />
+            {isDragOver ? (
+              <span className="text-accent" style={{ pointerEvents: 'none' }}>{t('reservations.import.dropActive')}</span>
+            ) : files.length > 0 ? (
+              <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{files.map((f) => f.name).join(', ')}</span>
+            ) : (
+              <span style={{ color: 'var(--text-faint)', textAlign: 'center', pointerEvents: 'none' }}>{t('reservations.import.dropHere')}</span>
+            )}
+          </div>
 
-          {/* Preview phase */}
-          {(phase === 'preview' || phase === 'confirming') && (
-            <>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 10 }}>
-                {t('reservations.import.previewHeading', { count: previewItems.length })}
-              </div>
-
-              {previewItems.length === 0 && (
-                <div className="text-content-faint" style={{ fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
-                  {t('reservations.import.previewEmpty')}
-                </div>
-              )}
-
-              {previewItems.map((item, idx) => {
-                const Icon = TYPE_ICONS[item.type] ?? Calendar
-                const isExcluded = excluded.has(idx)
-                const fromEp = item.endpoints?.find(e => e.role === 'from')
-                const toEp = item.endpoints?.find(e => e.role === 'to')
-
-                return (
-                  <div
-                    key={`${item.source.fileName}-${idx}`}
-                    className={isExcluded ? 'bg-surface-tertiary' : 'bg-surface-secondary'}
-                    style={{
-                      borderRadius: 10, padding: '10px 12px', marginBottom: 8,
-                      border: `1px solid ${isExcluded ? 'var(--border-faint)' : 'var(--border-primary)'}`,
-                      opacity: isExcluded ? 0.5 : 1, transition: 'opacity 0.15s',
-                      display: 'flex', gap: 10, alignItems: 'flex-start',
-                    }}
-                  >
-                    <div style={{ flexShrink: 0, marginTop: 2 }}>
-                      <Icon size={15} color={typeColor(item.type)} />
-                    </div>
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                        {item.title}
-                      </div>
-                      {fromEp && toEp && (
-                        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>
-                          {fromEp.code ?? fromEp.name} → {toEp.code ?? toEp.name}
-                        </div>
-                      )}
-                      {item.reservation_time && (
-                        <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
-                          {formatDateTime(item.reservation_time)}
-                          {item.reservation_end_time && ` – ${formatDateTime(item.reservation_end_time)}`}
-                        </div>
-                      )}
-                      {item._accommodation?.check_in && (
-                        <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
-                          {formatDateTime(item._accommodation.check_in)} – {formatDateTime(item._accommodation.check_out)}
-                        </div>
-                      )}
-                      {item.confirmation_number && (
-                        <div style={{ fontSize: 11, color: 'var(--text-faint)', fontFamily: 'monospace' }}>
-                          {item.confirmation_number}
-                        </div>
-                      )}
-                    </div>
-                    <button
-                      onClick={() => toggleExclude(idx)}
-                      className="bg-transparent text-content-faint"
-                      style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, flexShrink: 0, fontSize: 11, fontFamily: 'inherit', fontWeight: 500 }}
-                      title={t('reservations.import.removeItem')}
-                    >
-                      {isExcluded ? '＋' : <X size={12} />}
-                    </button>
-                  </div>
-                )
-              })}
-            </>
-          )}
-
-          {/* Warnings */}
-          {warnings.length > 0 && (
-            <div className="bg-[rgba(245,158,11,0.08)] text-[#92400e]" style={{ border: '1px solid rgba(245,158,11,0.3)', borderRadius: 10, padding: '8px 10px', fontSize: 12, marginTop: 8, whiteSpace: 'pre-wrap' }}>
-              {warnings.join('\n')}
-            </div>
-          )}
-
-          {/* Error */}
           {error && (
             <div className="bg-[rgba(239,68,68,0.08)] text-[#b91c1c]" style={{ border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10, padding: '8px 10px', fontSize: 12, whiteSpace: 'pre-wrap', marginTop: 8 }}>
               {error}
@@ -352,28 +190,14 @@ export default function BookingImportModal({ isOpen, onClose, tripId, pushUndo }
           >
             {t('common.cancel')}
           </button>
-
-          {phase === 'upload' && (
-            <button
-              onClick={handleParse}
-              disabled={files.length === 0 || loading}
-              className={files.length > 0 && !loading ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
-              style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: files.length > 0 && !loading ? 'pointer' : 'default', fontFamily: 'inherit' }}
-            >
-              {loading ? t('reservations.import.parsing') : t('common.import')}
-            </button>
-          )}
-
-          {(phase === 'preview' || phase === 'confirming') && (
-            <button
-              onClick={handleConfirm}
-              disabled={activeCount === 0 || phase === 'confirming'}
-              className={activeCount > 0 && phase !== 'confirming' ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
-              style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: activeCount > 0 && phase !== 'confirming' ? 'pointer' : 'default', fontFamily: 'inherit' }}
-            >
-              {phase === 'confirming' ? t('common.loading') : t('reservations.import.confirm', { count: activeCount })}
-            </button>
-          )}
+          <button
+            onClick={handleParse}
+            disabled={files.length === 0 || loading}
+            className={files.length > 0 && !loading ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
+            style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: files.length > 0 && !loading ? 'pointer' : 'default', fontFamily: 'inherit' }}
+          >
+            {loading ? t('reservations.import.parsing') : t('common.import')}
+          </button>
         </div>
       </div>
     </div>,

client/src/components/Planner/DayDetailPanel.test.tsx

@@ -51,6 +51,16 @@ describe('DayDetailPanel', () => {
     expect(document.body).toBeInTheDocument();
   });
 
+  it('FE-PLANNER-DAYDETAIL-063: publishes its height to --day-panel-h and resets it on unmount (#1348)', () => {
+    document.documentElement.style.removeProperty('--day-panel-h');
+    const { unmount } = render(<DayDetailPanel {...defaultProps} />);
+    // The panel publishes its measured height so the map's mobile GPS button can
+    // sit above it instead of being hidden behind it.
+    expect(document.documentElement.style.getPropertyValue('--day-panel-h')).not.toBe('');
+    unmount();
+    expect(document.documentElement.style.getPropertyValue('--day-panel-h')).toBe('0px');
+  });
+
   it('FE-PLANNER-DAYDETAIL-002: returns null when day prop is null', () => {
     render(<DayDetailPanel {...defaultProps} day={null as any} />);
     expect(document.querySelector('[style*="position: fixed"]')).toBeNull();

client/src/components/Planner/DayDetailPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import ReactDOM from 'react-dom'
 import { X, Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind, Droplets, Sunrise, Sunset, Hotel, Calendar, MapPin, LogIn, LogOut, Hash, Pencil, Plane, Utensils, Train, Car, Ship, Ticket, FileText, Users, ChevronsDown, ChevronsUp } from 'lucide-react'
 
@@ -86,6 +86,27 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
     updateAccommodationField, handleRemoveAccommodation,
   } = useDayDetail(day, days, tripId, lat, lng, language, onAccommodationChange)
 
+  // Publish the panel's live height as a root CSS var so the map's mobile GPS
+  // button can sit just above the panel instead of being hidden behind it (#1348).
+  // The card grows/shrinks (collapse, content, ≤60vh), so track it live.
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => {
+    const el = cardRef.current
+    if (!el) return
+    const root = document.documentElement
+    const publish = () => root.style.setProperty('--day-panel-h', `${el.offsetHeight}px`)
+    publish()
+    let ro: ResizeObserver | undefined
+    if (typeof ResizeObserver !== 'undefined') {
+      ro = new ResizeObserver(publish)
+      ro.observe(el)
+    }
+    return () => {
+      ro?.disconnect()
+      root.style.setProperty('--day-panel-h', '0px')
+    }
+  }, [])
+
   if (!day) return null
 
   const formattedDate = day.date ? new Date(day.date + 'T00:00:00Z').toLocaleDateString(
@@ -98,7 +119,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
 
   return (
     <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...(mobile ? { zIndex: 10000 } : null), ...font }}>
-      <div className="bg-surface-elevated" style={{
+      <div ref={cardRef} className="bg-surface-elevated" style={{
         backdropFilter: 'blur(40px) saturate(180%)',
         WebkitBackdropFilter: 'blur(40px) saturate(180%)',
         borderRadius: 20,

client/src/components/Planner/DayPlanSidebar.constants.ts

@@ -2,6 +2,7 @@ import {
   FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship,
   Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle,
   ShoppingBag, Bookmark, Hotel, Utensils, Users, Sailboat, Bike, CarTaxiFront, Route,
+  Wine, ParkingSquare, Fuel, Footprints, Mountain, Waves, Sun, Umbrella, Music, Landmark, Gift,
 } from 'lucide-react'
 
 export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, bus: Bus, ferry: Sailboat, bicycle: Bike, taxi: CarTaxiFront, transport_other: Route, event: Ticket, tour: Users, other: FileText }
@@ -27,6 +28,18 @@ export const NOTE_ICONS = [
   { id: 'AlertTriangle', Icon: AlertTriangle },
   { id: 'ShoppingBag', Icon: ShoppingBag },
   { id: 'Bookmark', Icon: Bookmark },
+  { id: 'Utensils', Icon: Utensils },
+  { id: 'Wine', Icon: Wine },
+  { id: 'ParkingSquare', Icon: ParkingSquare },
+  { id: 'Fuel', Icon: Fuel },
+  { id: 'Footprints', Icon: Footprints },
+  { id: 'Mountain', Icon: Mountain },
+  { id: 'Waves', Icon: Waves },
+  { id: 'Sun', Icon: Sun },
+  { id: 'Umbrella', Icon: Umbrella },
+  { id: 'Music', Icon: Music },
+  { id: 'Landmark', Icon: Landmark },
+  { id: 'Gift', Icon: Gift },
 ]
 const NOTE_ICON_MAP = Object.fromEntries(NOTE_ICONS.map(({ id, Icon }) => [id, Icon]))
 export function getNoteIcon(iconId) { return NOTE_ICON_MAP[iconId] || FileText }

client/src/components/Planner/DayPlanSidebar.test.tsx

@@ -168,6 +168,34 @@ describe('DayPlanSidebar', () => {
     expect(screen.getByText('D2')).toBeInTheDocument()
   })
 
+  // ── #1330: route tools for a single optimizable place ───────────────────────
+  it('FE-PLANNER-DAYPLAN-005b: route tools show for one located place with a bookend hotel (#1330)', () => {
+    const place = buildPlace({ name: 'Louvre', lat: 48.86, lng: 2.34 })
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const day2 = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
+    const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
+    const accommodations = [{ id: 1, start_day_id: 10, end_day_id: 11, place_lat: 48.85, place_lng: 2.35 }]
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day, day2], places: [place], assignments: { '10': [assignment] },
+      accommodations: accommodations as any, selectedDayId: 10,
+    })} />)
+    // With accommodation optimization on, one located place is routable (hotel → place → hotel),
+    // so the route tools (here the Google Maps export button) must be visible.
+    expect(screen.getByRole('button', { name: 'Open in Google Maps' })).toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-DAYPLAN-005c: route tools stay hidden for one place with no bookend hotel (#1330 guard)', () => {
+    const place = buildPlace({ name: 'Louvre', lat: 48.86, lng: 2.34 })
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places: [place], assignments: { '10': [assignment] },
+      accommodations: [], selectedDayId: 10,
+    })} />)
+    // No accommodation to bookend the lone place, so nothing routable — tools stay hidden.
+    expect(screen.queryByRole('button', { name: 'Open in Google Maps' })).not.toBeInTheDocument()
+  })
+
   // ── Day expansion/collapse ──────────────────────────────────────────────
 
   it('FE-PLANNER-DAYPLAN-006: days are expanded by default', () => {
@@ -982,7 +1010,7 @@ describe('DayPlanSidebar', () => {
     }
   })
 
-  it('FE-PLANNER-DAYPLAN-065: note card delete button calls deleteNote', async () => {
+  it('FE-PLANNER-DAYPLAN-065: deleting a note asks for confirmation before calling deleteNote', async () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     const note = buildDayNote({ id: 55, day_id: 10, text: 'My note' })
@@ -992,6 +1020,11 @@ describe('DayPlanSidebar', () => {
     const noteEditBtns = document.querySelectorAll('.note-edit-buttons button')
     if (noteEditBtns.length > 1) {
       await user.click(noteEditBtns[1] as HTMLElement)
+      // Clicking delete opens a confirmation dialog rather than deleting immediately.
+      expect(mockDayNotesState.deleteNote).not.toHaveBeenCalled()
+      expect(screen.getByText('Delete note?')).toBeInTheDocument()
+      // Confirming triggers the actual delete.
+      await user.click(screen.getByRole('button', { name: /^delete$/i }))
       expect(mockDayNotesState.deleteNote).toHaveBeenCalled()
     }
   })
@@ -1703,4 +1736,49 @@ describe('DayPlanSidebar', () => {
     expect(onEditTransport).toHaveBeenCalledWith(res)
     expect(onEditReservation).not.toHaveBeenCalled()
   })
+
+  // ── showRouteToolsWhenExpanded (mobile route tools) ───────────────────────
+
+  it('FE-PLANNER-DAYPLAN-099: showRouteToolsWhenExpanded shows route tools on expanded day without selection', () => {
+    const places = [
+      buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
+      buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
+    ]
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assigns = {
+      '10': [
+        buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
+        buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
+      ],
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places, assignments: assigns, selectedDayId: null, showRouteToolsWhenExpanded: true,
+    })} />)
+    // Days are expanded by default, so route tools must be visible even with no selected day
+    expect(screen.getByRole('button', { name: /optimize/i })).toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-DAYPLAN-100: optimize via showRouteToolsWhenExpanded reorders the expanded day', async () => {
+    const user = userEvent.setup()
+    const onReorder = vi.fn().mockResolvedValue(undefined)
+    const places = [
+      buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
+      buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
+      buildPlace({ id: 3, name: 'C', lat: 48.87, lng: 2.37 }),
+    ]
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assigns = {
+      '10': [
+        buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
+        buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
+        buildAssignment({ id: 3, day_id: 10, order_index: 2, place: places[2] }),
+      ],
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places, assignments: assigns, selectedDayId: null, onReorder, showRouteToolsWhenExpanded: true,
+    })} />)
+    const optimizeBtn = screen.getByRole('button', { name: /optimize/i })
+    await user.click(optimizeBtn)
+    await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
+  })
 })

client/src/components/Planner/DayPlanSidebar.tsx

@@ -5,8 +5,9 @@ declare global { interface Window { __dragData: DragDataPayload | null } }
 import React, { useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react'
 import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Trash2, Car, Lock, Hotel, Footprints, Route as RouteIcon } from 'lucide-react'
 import { assignmentsApi, reservationsApi } from '../../api/client'
-import { calculateRoute, calculateRouteWithLegs, optimizeRoute } from '../Map/RouteCalculator'
+import { calculateRoute, calculateRouteWithLegs, optimizeRoute, generateGoogleMapsUrl } from '../Map/RouteCalculator'
 import PlaceAvatar from '../shared/PlaceAvatar'
+import ConfirmDialog from '../shared/ConfirmDialog'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -17,16 +18,16 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { isDayInAccommodationRange } from '../../utils/dayOrder'
+import { isDayInAccommodationRange, getAccommodationAnchors, getDayBookendHotels } from '../../utils/dayOrder'
 import {
-  TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay,
+  TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay, getTransportRouteEndpoints,
   getTransportForDay as _getTransportForDay, getMergedItems as _getMergedItems,
   type MergedItem,
 } from '../../utils/dayMerge'
 import { formatDate, formatTime, dayTotalCost, splitReservationDateTime } from '../../utils/formatters'
 import { useDayNotes } from '../../hooks/useDayNotes'
 import { RES_ICONS, getNoteIcon } from './DayPlanSidebar.constants'
-import { RouteConnector } from './DayPlanSidebarRouteConnector'
+import { RouteConnector, HotelRouteConnector } from './DayPlanSidebarRouteConnector'
 import { MobileAddPlaceButton } from './DayPlanSidebarMobileAddPlaceButton'
 import { DayPlanSidebarToolbar } from './DayPlanSidebarToolbar'
 import { DayPlanSidebarNoteModal } from './DayPlanSidebarNoteModal'
@@ -34,6 +35,7 @@ import { DayPlanSidebarTimeConfirmModal } from './DayPlanSidebarTimeConfirmModal
 import { DayPlanSidebarTransportDetailModal } from './DayPlanSidebarTransportDetailModal'
 import { DayPlanSidebarFooter } from './DayPlanSidebarFooter'
 import type { Trip, Day, Place, Category, Assignment, Accommodation, Reservation, AssignmentsMap, RouteResult, RouteSegment, DayNote } from '../../types'
+import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'
 
 interface DayPlanSidebarProps {
   tripId: number
@@ -50,6 +52,8 @@ interface DayPlanSidebarProps {
   onDayDetail: (day: Day) => void
   accommodations?: Accommodation[]
   onReorder: (dayId: number, orderedIds: number[]) => void
+  onReorderDays?: (orderedIds: number[]) => void
+  onAddDay?: (position?: number) => void
   onUpdateDayTitle: (dayId: number, title: string) => void
   onRouteCalculated: (route: RouteResult | null) => void
   onAssignToDay: (placeId: number, dayId: number, position?: number) => void
@@ -81,6 +85,8 @@ interface DayPlanSidebarProps {
   onAddBookingToAssignment?: (dayId: number, assignmentId: number) => void
   initialScrollTop?: number
   onScrollTopChange?: (top: number) => void
+  /** Mobile: show the route tools footer (Route toggle / Optimize / travel profile) on expanded days, since selecting a day closes the sheet */
+  showRouteToolsWhenExpanded?: boolean
 }
 
 /**
@@ -95,7 +101,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   trip, days, places, categories, assignments,
   selectedDayId, selectedPlaceId, selectedAssignmentId,
   onSelectDay, onPlaceClick, onDayDetail, accommodations = [],
-  onReorder, onUpdateDayTitle, onRouteCalculated,
+  onReorder, onReorderDays, onAddDay, onUpdateDayTitle, onRouteCalculated,
   onAssignToDay, onRemoveAssignment, onEditPlace, onDeletePlace,
   reservations = [],
   visibleConnectionIds = [],
@@ -122,6 +128,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   onAddBookingToAssignment,
   initialScrollTop,
   onScrollTopChange,
+  showRouteToolsWhenExpanded = false,
   } = props
   const toast = useToast()
   const { t, language, locale } = useTranslation()
@@ -146,6 +153,11 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const [isCalculating, setIsCalculating] = useState(false)
   const [routeInfo, setRouteInfo] = useState(null)
   const [routeLegs, setRouteLegs] = useState<Record<number, RouteSegment>>({})
+  const [hotelLegs, setHotelLegs] = useState<{ top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } }>({})
+  const optimizeFromAccommodation = useSettingsStore(s => s.settings.optimize_from_accommodation)
+  // Recompute the hotel/route legs when the user flips km↔mi so the connector
+  // distances refresh instead of showing stale cached text (#1300).
+  const distanceUnit = useSettingsStore(s => s.settings.distance_unit)
   const legsAbortRef = useRef<AbortController | null>(null)
   const [draggingId, setDraggingId] = useState(null)
   const [lockedIds, setLockedIds] = useState(new Set())
@@ -170,7 +182,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const [timeConfirm, setTimeConfirm] = useState<{
     dayId: number; fromId: number; time: string;
     // For drag & drop reorder
-    fromType?: string; toType?: string; toId?: number; insertAfter?: boolean;
+    fromType?: string; toType?: string; toId?: number; insertAfter?: boolean; toLegIndex?: number | null;
     // For arrow reorder
     reorderIds?: number[];
   } | null>(null)
@@ -373,7 +385,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   // the start place's assignment id. Shares RouteCalculator's cache with the map.
   useEffect(() => {
     if (legsAbortRef.current) legsAbortRef.current.abort()
-    if (!selectedDayId || !routeShown) { setRouteLegs({}); return }
+    if (!selectedDayId || !routeShown) { setRouteLegs({}); setHotelLegs({}); return }
     const merged = mergedItemsMap[selectedDayId] || []
     const runs: { id: number; lat: number; lng: number }[][] = []
     let cur: { id: number; lat: number; lng: number }[] = []
@@ -381,12 +393,54 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
       if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
         cur.push({ id: it.data.id, lat: it.data.place.lat, lng: it.data.place.lng })
       } else if (it.type === 'transport') {
-        if (cur.length >= 2) runs.push(cur)
-        cur = []
+        const r = it.data
+        const { from, to } = getTransportRouteEndpoints(r, selectedDayId)
+        if (from || to) {
+          // Located transport: route to its departure point, break the run (the
+          // flight/train itself isn't driven), and let its arrival start the next.
+          if (from) cur.push({ id: r.id, lat: from.lat, lng: from.lng })
+          if (cur.length >= 2) runs.push(cur)
+          cur = []
+          if (to) cur.push({ id: r.id, lat: to.lat, lng: to.lng })
+        } else if (cur.length > 0) {
+          // No location: ignore for routing, but attribute the through-leg to the
+          // booking so its distance/duration shows under it (purely cosmetic).
+          cur[cur.length - 1] = { ...cur[cur.length - 1], id: r.id }
+        }
       }
     }
     if (cur.length >= 2) runs.push(cur)
-    if (runs.length === 0) { setRouteLegs({}); return }
+
+    // Hotel bookend legs: the drive from the day's accommodation to the first located
+    // waypoint of the day (morning) and from the last one back to it (evening). Only when
+    // the "optimize from accommodation" setting is on and the day has a hotel.
+    const day = days.find(d => d.id === selectedDayId)
+    const bookends = day && optimizeFromAccommodation !== false
+      ? getDayBookendHotels(day, days, accommodations)
+      : null
+    const startHotel = bookends?.morning
+    const endHotel = bookends?.evening
+    const hotelName = (a: Accommodation) => (a as any).place_name || (a as any).reservation_title || ''
+    // Waypoints include transport endpoints (a car return, a taxi/train arrival), so the hotel
+    // legs connect even when the day starts or ends with a booking rather than a place. Track
+    // whether each is a place so we can skip a hotel↔transport leg that isn't real: on a day-1
+    // arrival the check-in hotel never drove to the departure airport (#1321).
+    const wayPts: { lat: number; lng: number; isPlace: boolean }[] = []
+    for (const it of merged) {
+      if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
+        wayPts.push({ lat: it.data.place.lat, lng: it.data.place.lng, isPlace: true })
+      } else if (it.type === 'transport') {
+        const { from, to } = getTransportRouteEndpoints(it.data, selectedDayId)
+        if (from) wayPts.push({ lat: from.lat, lng: from.lng, isPlace: false })
+        if (to) wayPts.push({ lat: to.lat, lng: to.lng, isPlace: false })
+      }
+    }
+    const firstWay = wayPts[0]
+    const lastWay = wayPts[wayPts.length - 1]
+    const wantTop = !!(startHotel && firstWay && (firstWay.isPlace || bookends?.morningIsSleptHere))
+    const wantBottom = !!(endHotel && lastWay && (lastWay.isPlace || bookends?.eveningIsOvernight))
+
+    if (runs.length === 0 && !wantTop && !wantBottom) { setRouteLegs({}); setHotelLegs({}); return }
 
     const controller = new AbortController()
     legsAbortRef.current = controller
@@ -400,9 +454,27 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
           if (err instanceof Error && err.name === 'AbortError') return
         }
       }
-      if (!controller.signal.aborted) setRouteLegs(map)
+
+      // One extra cached OSRM call per bookend; shares RouteCalculator's cache.
+      const legBetween = async (a: { lat: number; lng: number }, b: { lat: number; lng: number }): Promise<RouteSegment | undefined> => {
+        try {
+          const r = await calculateRouteWithLegs([a, b], { signal: controller.signal, profile: routeProfile })
+          return r.legs[0]
+        } catch { return undefined }
+      }
+      const hotel: { top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } } = {}
+      if (wantTop) {
+        const seg = await legBetween({ lat: startHotel!.place_lat as number, lng: startHotel!.place_lng as number }, { lat: firstWay.lat, lng: firstWay.lng })
+        if (seg) hotel.top = { seg, name: hotelName(startHotel!) }
+      }
+      if (wantBottom) {
+        const seg = await legBetween({ lat: lastWay.lat, lng: lastWay.lng }, { lat: endHotel!.place_lat as number, lng: endHotel!.place_lng as number })
+        if (seg) hotel.bottom = { seg, name: hotelName(endHotel!) }
+      }
+
+      if (!controller.signal.aborted) { setRouteLegs(map); setHotelLegs(hotel) }
     })()
-  }, [selectedDayId, routeShown, routeProfile, mergedItemsMap])
+  }, [selectedDayId, routeShown, routeProfile, mergedItemsMap, accommodations, days, optimizeFromAccommodation, distanceUnit])
 
   const openAddNote = (dayId, e) => {
     e?.stopPropagation()
@@ -451,6 +523,10 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     _openEditNote(dayId, note)
   }
 
+  // Deleting a note asks for confirmation first — the edit/delete icons sit close together and are
+  // easy to mis-tap on touch devices, where an accidental delete was previously unrecoverable.
+  const [pendingDeleteNote, setPendingDeleteNote] = useState<{ dayId: number; noteId: number } | null>(null)
+
   const deleteNote = async (dayId: number, noteId: number, e?: React.MouseEvent) => {
     e?.stopPropagation()
     await _deleteNote(dayId, noteId)
@@ -466,6 +542,9 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     const assignmentIds: number[] = []
     const noteUpdates: { id: number; sort_order: number }[] = []
     const transportUpdates: { id: number; day_plan_position: number }[] = []
+    // Multi-leg flight legs share a reservation id, so their positions can't live in
+    // the single per-booking slot — collect them per leg, keyed reservationId → legIndex → pos.
+    const legPosUpdates: Record<number, Record<number, number>> = {}
 
     let placeCount = 0
     let i = 0
@@ -486,7 +565,10 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
         group.forEach((g, idx) => {
           const pos = base + (idx + 1) / (group.length + 1)
           if (g.type === 'note') noteUpdates.push({ id: g.data.id, sort_order: pos })
-          else if (g.type === 'transport') transportUpdates.push({ id: g.data.id, day_plan_position: pos })
+          else if (g.type === 'transport') {
+            if (g.data.__leg) ((legPosUpdates[g.data.id] ??= {})[g.data.__leg.index] = pos)
+            else transportUpdates.push({ id: g.data.id, day_plan_position: pos })
+          }
         })
       }
     }
@@ -505,6 +587,30 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
         }))
         setTransportPosVersion(v => v + 1)
       }
+      // Per-leg positions of multi-leg flights live in metadata.legs[i].day_positions
+      // (the single per-booking slot can't hold one position per leg).
+      const legResIds = Object.keys(legPosUpdates)
+      if (legResIds.length) {
+        for (const ridStr of legResIds) {
+          const rid = Number(ridStr)
+          const r = useTripStore.getState().reservations.find(x => x.id === rid)
+          if (!r) continue
+          let parsed: any = {}
+          try { parsed = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {}) } catch { parsed = {} }
+          if (!Array.isArray(parsed.legs)) continue
+          const legs = parsed.legs.map((leg: any, i: number) => {
+            const pos = legPosUpdates[rid][i]
+            return pos == null ? leg : { ...leg, day_positions: { ...(leg.day_positions || {}), [dayId]: pos } }
+          })
+          // Send metadata as an OBJECT (like the form does) — passing a JSON string
+          // here double-encodes it on the server, which wipes metadata.legs on read
+          // and collapses the flight back to a single span.
+          const newMeta = { ...parsed, legs }
+          useTripStore.setState(state => ({ reservations: state.reservations.map(x => (x.id === rid ? { ...x, metadata: newMeta } : x)) }))
+          await tripActions.updateReservation(tripId, rid, { metadata: newMeta })
+        }
+        setTransportPosVersion(v => v + 1)
+      }
       if (assignmentIds.length) await onReorder(dayId, assignmentIds)
       if (transportUpdates.length) {
         onRouteRefresh?.()
@@ -523,8 +629,11 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
   }
 
-  const handleMergedDrop = async (dayId, fromType, fromId, toType, toId, insertAfter = false) => {
+  const handleMergedDrop = async (dayId, fromType, fromId, toType, toId, insertAfter = false, toLegIndex = null) => {
     const m = getMergedItems(dayId)
+    // Multi-leg flights expose one item per leg sharing the same reservation id;
+    // disambiguate the drop target by leg index so you can drop BETWEEN legs.
+    const matchTo = (i: any) => i.type === toType && i.data.id === toId && (toLegIndex == null || i.data?.__leg?.index === toLegIndex)
 
     // Check if a timed place is being moved → would it break chronological order?
     if (fromType === 'place') {
@@ -532,11 +641,11 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
       const fromMinutes = parseTimeToMinutes(fromItem?.data?.place?.place_time)
       if (fromItem && fromMinutes !== null) {
         const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-        const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
+        const toIdx = m.findIndex(matchTo)
         if (fromIdx !== -1 && toIdx !== -1) {
           const simulated = [...m]
           const [moved] = simulated.splice(fromIdx, 1)
-          let insertIdx = simulated.findIndex(i => i.type === toType && i.data.id === toId)
+          let insertIdx = simulated.findIndex(matchTo)
           if (insertIdx === -1) insertIdx = simulated.length
           if (insertAfter) insertIdx += 1
           simulated.splice(insertIdx, 0, moved)
@@ -553,7 +662,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
           if (!isChronological) {
             const placeTime = fromItem.data.place.place_time
             const timeStr = placeTime.includes(':') ? placeTime.substring(0, 5) : placeTime
-            setTimeConfirm({ dayId, fromType, fromId, toType, toId, insertAfter, time: timeStr })
+            setTimeConfirm({ dayId, fromType, fromId, toType, toId, insertAfter, toLegIndex, time: timeStr })
             setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
             return
           }
@@ -563,7 +672,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     // Build new order: remove the dragged item, insert at target position
     const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-    const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
+    const toIdx = m.findIndex(matchTo)
     if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) {
       setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
       return
@@ -571,7 +680,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     const newOrder = [...m]
     const [moved] = newOrder.splice(fromIdx, 1)
-    let adjustedTo = newOrder.findIndex(i => i.type === toType && i.data.id === toId)
+    let adjustedTo = newOrder.findIndex(matchTo)
     if (adjustedTo === -1) adjustedTo = newOrder.length
     if (insertAfter) adjustedTo += 1
     newOrder.splice(adjustedTo, 0, moved)
@@ -585,7 +694,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const confirmTimeRemoval = async () => {
     if (!timeConfirm) return
     const saved = { ...timeConfirm }
-    const { dayId, fromId, reorderIds, fromType, toType, toId, insertAfter } = saved
+    const { dayId, fromId, reorderIds, fromType, toType, toId, insertAfter, toLegIndex } = saved
     setTimeConfirm(null)
 
     // Remove time from assignment
@@ -628,13 +737,14 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     // Drag & drop reorder
     if (fromType && toType) {
+      const matchTo = (i: any) => i.type === toType && i.data.id === toId && (toLegIndex == null || i.data?.__leg?.index === toLegIndex)
       const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-      const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
+      const toIdx = m.findIndex(matchTo)
       if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) return
 
       const newOrder = [...m]
       const [moved] = newOrder.splice(fromIdx, 1)
-      let adjustedTo = newOrder.findIndex(i => i.type === toType && i.data.id === toId)
+      let adjustedTo = newOrder.findIndex(matchTo)
       if (adjustedTo === -1) adjustedTo = newOrder.length
       if (insertAfter) adjustedTo += 1
       newOrder.splice(adjustedTo, 0, moved)
@@ -685,26 +795,34 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     pushUndo?.(t('undo.lock'), () => { setLockedIds(prevLocked) })
   }
 
-  const handleOptimize = async () => {
-    if (!selectedDayId) return
-    const da = getDayAssignments(selectedDayId)
+  const handleOptimize = async (dayId: number | null = selectedDayId) => {
+    if (!dayId) return
+    const da = getDayAssignments(dayId)
     if (da.length < 3) return
 
     const prevIds = da.map(a => a.id)
 
-    // Separate locked (stay at their index) and unlocked assignments
+    // Separate fixed (stay at their index) and movable assignments. A place is
+    // fixed if it's locked OR has a set time — timed places are anchored by their
+    // time, so the optimizer must not reshuffle them.
     const locked = new Map() // index -> assignment
     const unlocked = []
     da.forEach((a, i) => {
-      if (lockedIds.has(a.id)) locked.set(i, a)
+      if (lockedIds.has(a.id) || a.place?.place_time) locked.set(i, a)
       else unlocked.push(a)
     })
 
     // Optimize only unlocked assignments (work on assignments, not places)
     const unlockedWithCoords = unlocked.filter(a => a.place?.lat && a.place?.lng)
     const unlockedNoCoords = unlocked.filter(a => !a.place?.lat || !a.place?.lng)
+    // Anchor the route on the day's accommodation (when enabled): a loop out from and back to the
+    // hotel, or — on a transfer day — a run from the hotel you leave to the one you arrive at.
+    const day = days.find(d => d.id === dayId)
+    const anchors = day && useSettingsStore.getState().settings.optimize_from_accommodation !== false
+      ? getAccommodationAnchors(day, days, accommodations)
+      : {}
     const optimizedAssignments = unlockedWithCoords.length >= 2
-      ? optimizeRoute(unlockedWithCoords.map(a => ({ ...a.place, _assignmentId: a.id }))).map(p => unlockedWithCoords.find(a => a.id === p._assignmentId)).filter(Boolean)
+      ? optimizeRoute(unlockedWithCoords.map(a => ({ ...a.place, _assignmentId: a.id })), anchors).map(p => unlockedWithCoords.find(a => a.id === p._assignmentId)).filter(Boolean)
       : unlockedWithCoords
     const optimizedQueue = [...optimizedAssignments, ...unlockedNoCoords]
 
@@ -716,9 +834,10 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
       if (!result[i]) result[i] = optimizedQueue[qi++]
     }
 
-    await onReorder(selectedDayId, result.map(a => a.id))
-    toast.success(t('dayplan.toast.routeOptimized'))
-    const capturedDayId = selectedDayId
+    await onReorder(dayId, result.map(a => a.id))
+    const usedHotel = !!(anchors.start || anchors.end)
+    toast.success(usedHotel ? t('dayplan.toast.routeOptimizedFromHotel') : t('dayplan.toast.routeOptimized'))
+    const capturedDayId = dayId
     pushUndo?.(t('undo.optimize'), async () => {
       await tripActions.reorderAssignments(tripId, capturedDayId, prevIds)
     })
@@ -802,6 +921,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     onDayDetail,
     accommodations,
     onReorder,
+    onReorderDays,
+    onAddDay,
     onUpdateDayTitle,
     onRouteCalculated,
     onAssignToDay,
@@ -833,6 +954,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     onAddBookingToAssignment,
     initialScrollTop,
     onScrollTopChange,
+    showRouteToolsWhenExpanded,
     toast,
     t,
     language,
@@ -851,6 +973,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     cancelNote,
     saveNote,
     deleteNote,
+    pendingDeleteNote,
+    setPendingDeleteNote,
     moveNote,
     expandedDays,
     setExpandedDays,
@@ -864,6 +988,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     setRouteInfo,
     routeLegs,
     setRouteLegs,
+    hotelLegs,
+    setHotelLegs,
     legsAbortRef,
     draggingId,
     setDraggingId,
@@ -929,6 +1055,9 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
 const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarProps) {
   const S = useDayPlanSidebar(props)
+  // Needed by the route-tools visibility gate in the render below (#1330); the hook
+  // keeps its own copy, so read it reactively here in the component scope too.
+  const optimizeFromAccommodation = useSettingsStore(s => s.settings.optimize_from_accommodation)
   const {
     tripId,
     trip,
@@ -944,6 +1073,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     onDayDetail,
     accommodations,
     onReorder,
+    onReorderDays,
+    onAddDay,
     onUpdateDayTitle,
     onRouteCalculated,
     onAssignToDay,
@@ -975,6 +1106,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     onAddBookingToAssignment,
     initialScrollTop,
     onScrollTopChange,
+    showRouteToolsWhenExpanded,
     toast,
     t,
     language,
@@ -993,6 +1125,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     cancelNote,
     saveNote,
     deleteNote,
+    pendingDeleteNote,
+    setPendingDeleteNote,
     moveNote,
     expandedDays,
     setExpandedDays,
@@ -1006,6 +1140,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     setRouteInfo,
     routeLegs,
     setRouteLegs,
+    hotelLegs,
+    setHotelLegs,
     legsAbortRef,
     draggingId,
     setDraggingId,
@@ -1093,6 +1229,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
         undoHover={undoHover}
         setUndoHover={setUndoHover}
         lastActionLabel={lastActionLabel}
+        canEditDays={canEditDays}
+        onReorderDays={onReorderDays}
+        onAddDay={onAddDay}
       />
 
       {/* Tagesliste */}
@@ -1104,6 +1243,16 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
           const cost = dayTotalCost(day.id, assignments, currency)
           const formattedDate = formatDate(day.date, locale)
           const loc = da.find(a => a.place?.lat && a.place?.lng)
+          // Route tools normally need 2+ stops, but a single located place is still
+          // routable when accommodation optimization can bookend it with a hotel
+          // (hotel → place → hotel, the same line the map draws) — otherwise the tools
+          // vanish on such a day (#1330). Purely additive to the 2+ case.
+          const routeBookends = optimizeFromAccommodation !== false ? getDayBookendHotels(day, days, accommodations) : null
+          const hasRouteBookend = !!(
+            (routeBookends?.morning?.place_lat != null && routeBookends?.morning?.place_lng != null) ||
+            (routeBookends?.evening?.place_lat != null && routeBookends?.evening?.place_lng != null)
+          )
+          const routeToolsRoutable = da.length >= 2 || (loc != null && hasRouteBookend)
           const isDragTarget = dragOverDayId === day.id
           const merged = mergedItemsMap[day.id] || []
           const dayNoteUi = noteUi[day.id]
@@ -1295,6 +1444,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       const isAfter = dropTargetRef.current.startsWith('transport-after-')
                       const parts = dropTargetRef.current.replace('transport-after-', '').replace('transport-', '').split('-')
                       const transportId = Number(parts[0])
+                      const legPart = parts.find(p => /^leg\d+$/.test(p))
+                      const toLegIndex = legPart ? Number(legPart.slice(3)) : null
 
                       if (placeId) {
                         onAssignToDay?.(parseInt(placeId), day.id)
@@ -1302,15 +1453,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         const r = reservations.find(x => x.id === Number(fromReservationId))
                         if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
                       } else if (fromReservationId) {
-                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', transportId, isAfter)
+                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', transportId, isAfter, toLegIndex)
                       } else if (assignmentId && fromDayId !== day.id) {
                         tripActions.moveAssignment(tripId, Number(assignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                       } else if (assignmentId) {
-                        handleMergedDrop(day.id, 'place', Number(assignmentId), 'transport', transportId, isAfter)
+                        handleMergedDrop(day.id, 'place', Number(assignmentId), 'transport', transportId, isAfter, toLegIndex)
                       } else if (noteId && fromDayId !== day.id) {
                         tripActions.moveDayNote(tripId, fromDayId, day.id, Number(noteId)).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                       } else if (noteId) {
-                        handleMergedDrop(day.id, 'note', Number(noteId), 'transport', transportId, isAfter)
+                        handleMergedDrop(day.id, 'note', Number(noteId), 'transport', transportId, isAfter, toLegIndex)
                       }
                       setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                       return
@@ -1343,6 +1494,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       handleMergedDrop(day.id, 'note', Number(noteId), lastItem.type, lastItem.data.id, true)
                   }}
                 >
+                  {isSelected && hotelLegs.top && (
+                    <HotelRouteConnector seg={hotelLegs.top.seg} name={hotelLegs.top.name} profile={routeProfile} placement="top" />
+                  )}
                   {merged.length === 0 && !dayNoteUi ? (
                     <div
                       onDragOver={e => { e.preventDefault(); if (dragOverDayId !== day.id) setDragOverDayId(day.id) }}
@@ -1356,9 +1510,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                     </div>
                   ) : (
                     merged.map((item, idx) => {
-                      const itemKey = item.type === 'transport' ? `transport-${item.data.id}-${day.id}` : (item.type === 'place' ? `place-${item.data.id}` : `note-${item.data.id}`)
+                      const legSuffix = item.data?.__leg ? `-leg${item.data.__leg.index}` : ''
+                      const itemKey = item.type === 'transport' ? `transport-${item.data.id}${legSuffix}-${day.id}` : (item.type === 'place' ? `place-${item.data.id}` : `note-${item.data.id}`)
                       const showDropLine = (!!draggingId || !!dropTargetKey) && dropTargetKey === itemKey
-                      const showDropLineAfter = item.type === 'transport' && (!!draggingId || !!dropTargetKey) && dropTargetKey === `transport-after-${item.data.id}-${day.id}`
+                      const showDropLineAfter = item.type === 'transport' && (!!draggingId || !!dropTargetKey) && dropTargetKey === `transport-after-${item.data.id}${legSuffix}-${day.id}`
 
                       if (item.type === 'place') {
                         const assignment = item.data
@@ -1462,14 +1617,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                             }}
                             onDragEnd={() => { setDraggingId(null); setDragOverDayId(null); setDropTargetKey(null); dragDataRef.current = null }}
                             onClick={() => { onPlaceClick(isPlaceSelected ? null : place.id, isPlaceSelected ? null : assignment.id); if (!isPlaceSelected) onSelectDay(day.id, true) }}
-                            onContextMenu={e => ctxMenu.open(e, [
-                              canEditDays && onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place, assignment.id) },
-                              canEditDays && onRemoveAssignment && { label: t('planner.removeFromDay'), icon: Trash2, onClick: () => onRemoveAssignment(day.id, assignment.id) },
-                              place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
-                              (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${place.google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + place.google_place_id : place.lat + ',' + place.lng}`, '_blank') },
-                              { divider: true },
-                              canEditDays && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
-                            ])}
+                            onContextMenu={e => {
+                              const googleMapsUrl = getGoogleMapsUrlForPlace(place)
+                              ctxMenu.open(e, [
+                                canEditDays && onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place, assignment.id) },
+                                canEditDays && onRemoveAssignment && { label: t('planner.removeFromDay'), icon: Trash2, onClick: () => onRemoveAssignment(day.id, assignment.id) },
+                                place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
+                                googleMapsUrl && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(googleMapsUrl, '_blank') },
+                                { divider: true },
+                                canEditDays && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
+                              ])
+                            }}
                             onMouseEnter={e => {
                               if (!isPlaceSelected && !lockedIds.has(assignment.id))
                                 e.currentTarget.style.background = 'var(--bg-hover)'
@@ -1706,7 +1864,13 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
 
                         // Subtitle aus Metadaten zusammensetzen
                         let subtitle = ''
-                        if (res.type === 'flight') {
+                        if (res.__leg) {
+                          // One leg of a multi-leg flight — show this segment's own route.
+                          const parts = [res.__leg.airline, res.__leg.flight_number].filter(Boolean)
+                          if (res.__leg.from || res.__leg.to)
+                            parts.push([res.__leg.from, res.__leg.to].filter(Boolean).join(' → '))
+                          subtitle = parts.join(' · ')
+                        } else if (res.type === 'flight') {
                           const parts = [meta.airline, meta.flight_number].filter(Boolean)
                           if (meta.departure_airport || meta.arrival_airport)
                             parts.push([meta.departure_airport, meta.arrival_airport].filter(Boolean).join(' → '))
@@ -1715,28 +1879,32 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Sitz ${meta.seat}` : ''].filter(Boolean).join(' · ')
                         }
 
-                        // Multi-day span phase
-                        const spanLabel = getSpanLabel(res, spanPhase)
+                        // Multi-day span phase (single-leg / non-flight only — a
+                        // multi-leg flight is shown as one row per leg, see below).
+                        const spanLabel = res.__leg ? null : getSpanLabel(res, spanPhase)
                         const displayTime = getDisplayTimeForDay(res, day.id)
+                        const legKey = res.__leg ? `leg${res.__leg.index}` : 'x'
 
                         return (
-                          <React.Fragment key={`transport-${res.id}-${day.id}`}>
+                          <React.Fragment key={`transport-${res.id}-${legKey}-${day.id}`}>
                           <div
                             onClick={() => {
                               if (!canEditDays) return
-                              if (TRANSPORT_TYPES.has(res.type)) onEditTransport?.(res)
-                              else onEditReservation?.(res)
+                              const target = reservations.find(x => x.id === res.id) ?? res
+                              if (TRANSPORT_TYPES.has(res.type)) onEditTransport?.(target)
+                              else onEditReservation?.(target)
                             }}
                             onDragOver={e => {
                               e.preventDefault(); e.stopPropagation()
                               const rect = e.currentTarget.getBoundingClientRect()
                               const inBottom = e.clientY > rect.top + rect.height / 2
-                              const key = inBottom ? `transport-after-${res.id}-${day.id}` : `transport-${res.id}-${day.id}`
+                              const ls = res.__leg ? `-leg${res.__leg.index}` : ''
+                              const key = inBottom ? `transport-after-${res.id}${ls}-${day.id}` : `transport-${res.id}${ls}-${day.id}`
                               if (dropTargetRef.current !== key) setDropTargetKey(key)
                             }}
-                            draggable={canEditDays && spanPhase !== 'middle'}
+                            draggable={canEditDays && spanPhase !== 'middle' && !res.__leg}
                             onDragStart={e => {
-                              if (!canEditDays || spanPhase === 'middle') { e.preventDefault(); return }
+                              if (!canEditDays || spanPhase === 'middle' || res.__leg) { e.preventDefault(); return }
                               // setData is required for the drag to start reliably (Firefox) and
                               // matches how place/note items initiate their drag.
                               e.dataTransfer.setData('reservationId', String(res.id))
@@ -1757,15 +1925,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 const r2 = reservations.find(x => x.id === Number(fromReservationId))
                                 if (r2) { const update = computeMultiDayMove(r2, day.id, phase); tripActions.updateReservation(tripId, r2.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
                               } else if (fromReservationId) {
-                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', res.id, insertAfter)
+                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
                               } else if (fromAssignmentId && fromDayId !== day.id) {
                                 tripActions.moveAssignment(tripId, Number(fromAssignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                               } else if (fromAssignmentId) {
-                                handleMergedDrop(day.id, 'place', Number(fromAssignmentId), 'transport', res.id, insertAfter)
+                                handleMergedDrop(day.id, 'place', Number(fromAssignmentId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
                               } else if (noteId && fromDayId !== day.id) {
                                 tripActions.moveDayNote(tripId, fromDayId, day.id, Number(noteId)).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                               } else if (noteId) {
-                                handleMergedDrop(day.id, 'note', Number(noteId), 'transport', res.id, insertAfter)
+                                handleMergedDrop(day.id, 'note', Number(noteId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
                               }
                               setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                             }}
@@ -1785,7 +1953,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               opacity: draggingId === res.id ? 0.4 : spanPhase === 'middle' ? 0.65 : 1,
                             }}
                           >
-                            {canEditDays && spanPhase !== 'middle' && (
+                            {canEditDays && spanPhase !== 'middle' && !res.__leg && (
                               <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                                 <GripVertical size={13} strokeWidth={1.8} />
                               </div>
@@ -1830,7 +1998,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 </div>
                               )}
                             </div>
-                            {onToggleConnection && (res.endpoints || []).length >= 2 && (() => {
+                            {onToggleConnection && (!res.__leg || res.__leg.index === 0) && (res.endpoints || []).length >= 2 && (() => {
                               const active = visibleConnectionIds.includes(res.id)
                               return (
                                 <button
@@ -1854,6 +2022,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               )
                             })()}
                           </div>
+                          {routeLegs[res.id] && <RouteConnector seg={routeLegs[res.id]} profile={routeProfile} />}
                           </React.Fragment>
                         )
                       }
@@ -1908,7 +2077,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           onContextMenu={canEditDays ? e => ctxMenu.open(e, [
                             { label: t('common.edit'), icon: Pencil, onClick: () => openEditNote(day.id, note) },
                             { divider: true },
-                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => deleteNote(day.id, note.id) },
+                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => setPendingDeleteNote({ dayId: day.id, noteId: note.id }) },
                           ]) : undefined}
                           onMouseEnter={e => {
                             const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
@@ -1950,7 +2119,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           </div>
                           {canEditDays && <div className="note-edit-buttons" style={{ display: 'flex', gap: 1, flexShrink: 0, opacity: 0, transition: 'opacity 0.15s' }}>
                             <button onClick={e => openEditNote(day.id, note, e)} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Pencil size={10} /></button>
-                            <button onClick={e => deleteNote(day.id, note.id, e)} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Trash2 size={10} /></button>
+                            <button onClick={e => { e.stopPropagation(); setPendingDeleteNote({ dayId: day.id, noteId: note.id }) }} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Trash2 size={10} /></button>
                           </div>}
                           {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
                             <button onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'up') }} disabled={noteIdx === 0} className={noteIdx === 0 ? 'text-[var(--border-primary)]' : 'text-content-faint'} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === 0 ? 'default' : 'pointer', display: 'flex', lineHeight: 1 }}><ChevronUp size={12} strokeWidth={2} /></button>
@@ -1961,6 +2130,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       )
                     })
                   )}
+                  {isSelected && hotelLegs.bottom && (
+                    <HotelRouteConnector seg={hotelLegs.bottom.seg} name={hotelLegs.bottom.name} profile={routeProfile} placement="bottom" />
+                  )}
                   {/* Drop-Zone am Listenende — immer vorhanden als Drop-Target */}
                   <div
                     style={{ minHeight: 12, padding: '2px 8px' }}
@@ -2004,8 +2176,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                     )}
                   </div>
 
-                  {/* Routen-Werkzeuge (ausgewählter Tag, 2+ Orte) */}
-                  {isSelected && getDayAssignments(day.id).length >= 2 && (
+                  {/* Routen-Werkzeuge (ausgewählter Tag, 2+ Orte — oder 1 Ort mit Hotel-Bookend, #1330) */}
+                  {(isSelected || (showRouteToolsWhenExpanded && isExpanded)) && routeToolsRoutable && (
                     <div style={{ padding: '10px 16px 12px', borderTop: '1px solid var(--border-faint)', display: 'flex', flexDirection: 'column', gap: 7 }}>
                       <div style={{ display: 'flex', gap: 6, alignItems: 'stretch' }}>
                         <button
@@ -2021,7 +2193,29 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           <RouteIcon size={12} strokeWidth={2} />
                           {t('dayplan.route')}
                         </button>
-                        <button onClick={handleOptimize} className="bg-surface-hover text-content-secondary" style={{
+                        {/* Open the day's stops as a route in Google Maps (planned order). #1255 */}
+                        <button
+                          onClick={() => {
+                            const url = generateGoogleMapsUrl(getDayAssignments(day.id).map(a => a.place).filter(p => p?.lat != null && p?.lng != null) as { lat: number; lng: number }[])
+                            if (url) window.open(url, '_blank', 'noopener,noreferrer')
+                          }}
+                          aria-label={t('planner.openGoogleMaps')}
+                          title={t('planner.openGoogleMaps')}
+                          className="bg-transparent text-content-secondary"
+                          style={{
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-faint)',
+                            cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0,
+                          }}
+                        >
+                          <svg width="14" height="14" viewBox="0 0 48 48" fill="currentColor" aria-hidden="true">
+                            <path d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
+                            <path d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
+                            <path d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
+                            <path d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
+                          </svg>
+                        </button>
+                        <button onClick={() => handleOptimize(day.id)} className="bg-surface-hover text-content-secondary" style={{
                           flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
                           padding: '6px 0', fontSize: 11, fontWeight: 500, borderRadius: 8, border: 'none',
                           cursor: 'pointer', fontFamily: 'inherit',
@@ -2050,7 +2244,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           })}
                         </div>
                       </div>
-                      {routeInfo && (
+                      {isSelected && routeInfo && (
                         <div className="text-content-secondary bg-surface-hover" style={{ display: 'flex', justifyContent: 'center', gap: 12, fontSize: 12, borderRadius: 8, padding: '5px 10px' }}>
                           <span>{routeInfo.distance}</span>
                           <span className="text-content-faint">·</span>
@@ -2093,6 +2287,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
         t={t}
       />
 
+      {/* Confirm: delete a day note — guards against accidental taps on touch devices */}
+      <ConfirmDialog
+        isOpen={!!pendingDeleteNote}
+        onClose={() => setPendingDeleteNote(null)}
+        onConfirm={() => { if (pendingDeleteNote) deleteNote(pendingDeleteNote.dayId, pendingDeleteNote.noteId) }}
+        title={t('dayplan.confirmDeleteNoteTitle')}
+        message={t('dayplan.confirmDeleteNoteBody')}
+      />
+
       {/* Transport-Detail-Modal */}
       <DayPlanSidebarTransportDetailModal
         transportDetail={transportDetail}
@@ -2110,4 +2313,4 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
   )
 })
 
-export default DayPlanSidebar
+export default DayPlanSidebar

client/src/components/Planner/DayPlanSidebarNoteModal.tsx

@@ -58,7 +58,7 @@ export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cance
             />
             <textarea
               value={ui.time}
-              maxLength={150}
+              maxLength={250}
               rows={3}
               onChange={e => setNoteUi(prev => ({ ...prev, [dayId]: { ...prev[dayId], time: e.target.value } }))}
               onKeyDown={e => { if (e.key === 'Escape') cancelNote(Number(dayId)) }}
@@ -66,7 +66,7 @@ export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cance
               className="text-content"
               style={{ fontSize: 12, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '7px 10px', fontFamily: 'inherit', outline: 'none', width: '100%', boxSizing: 'border-box', resize: 'none', lineHeight: 1.4 }}
             />
-            <div className={(ui.time?.length || 0) >= 140 ? 'text-[#d97706]' : 'text-content-faint'} style={{ textAlign: 'right', fontSize: 11, marginTop: -2 }}>{ui.time?.length || 0}/150</div>
+            <div className={(ui.time?.length || 0) >= 240 ? 'text-[#d97706]' : 'text-content-faint'} style={{ textAlign: 'right', fontSize: 11, marginTop: -2 }}>{ui.time?.length || 0}/250</div>
             <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
               <button onClick={() => cancelNote(Number(dayId))} className="text-content-muted" style={{ fontSize: 12, background: 'none', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
               <button onClick={() => saveNote(Number(dayId))} disabled={!ui.text?.trim()} className={!ui.text?.trim() ? 'bg-[var(--border-primary)] text-content-faint' : 'bg-accent text-accent-text'} style={{ fontSize: 12, border: 'none', borderRadius: 8, padding: '6px 16px', cursor: !ui.text?.trim() ? 'not-allowed' : 'pointer', fontWeight: 600, fontFamily: 'inherit', transition: 'background 0.15s, color 0.15s' }}>

client/src/components/Planner/DayPlanSidebarRouteConnector.tsx

@@ -1,4 +1,4 @@
-import { Car, Footprints } from 'lucide-react'
+import { Car, Footprints, Hotel } from 'lucide-react'
 import type { RouteSegment } from '../../types'
 
 /** Slim travel-time connector shown between two consecutive located stops in a day. */
@@ -19,3 +19,60 @@ export function RouteConnector({ seg, profile }: { seg: RouteSegment; profile: '
     </div>
   )
 }
+
+/**
+ * The hotel's bookend legs for a day: a two-line connector naming the day's
+ * accommodation with the drive to/from it. Rendered above the first place (the
+ * morning departure from the hotel) and below the last place (the evening return),
+ * when the "optimize from accommodation" setting is on and the day has a hotel.
+ */
+export function HotelRouteConnector({
+  seg,
+  profile,
+  name,
+  placement,
+}: {
+  seg: RouteSegment
+  profile: 'driving' | 'walking'
+  name: string
+  placement: 'top' | 'bottom'
+}) {
+  const driving = profile === 'driving'
+  const Icon = driving ? Car : Footprints
+  const line = { flex: 1, height: 1, minHeight: 1, alignSelf: 'center', background: 'var(--border-primary)' }
+  const hotelRow = (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '0 14px', minWidth: 0 }}>
+      <Hotel size={12} strokeWidth={1.8} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+      <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+        {name}
+      </span>
+    </div>
+  )
+  const travelRow = (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 14px', fontSize: 10.5, color: 'var(--text-faint)', lineHeight: 1.2 }}>
+      <div style={line} />
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
+        <Icon size={11} strokeWidth={2} />
+        <span>{seg.durationText ?? (driving ? seg.drivingText : seg.walkingText)}</span>
+        <span style={{ opacity: 0.4 }}>·</span>
+        <span>{seg.distanceText}</span>
+      </div>
+      <div style={line} />
+    </div>
+  )
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 3, padding: placement === 'top' ? '2px 0 6px' : '6px 0 2px' }}>
+      {placement === 'top' ? (
+        <>
+          {hotelRow}
+          {travelRow}
+        </>
+      ) : (
+        <>
+          {travelRow}
+          {hotelRow}
+        </>
+      )}
+    </div>
+  )
+}

client/src/components/Planner/DayPlanSidebarToolbar.tsx

@@ -1,5 +1,7 @@
-import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2 } from 'lucide-react'
+import { useState } from 'react'
+import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2, ArrowUpDown } from 'lucide-react'
 import { downloadTripPDF } from '../PDF/TripPDF'
+import { DayReorderPopup } from './DayReorderPopup'
 import Tooltip from '../shared/Tooltip'
 import { useToast } from '../shared/Toast'
 import type { Trip, Day, Place, Category, AssignmentsMap, Reservation, DayNote } from '../../types'
@@ -27,13 +29,18 @@ interface DayPlanSidebarToolbarProps {
   undoHover: boolean
   setUndoHover: (v: boolean) => void
   lastActionLabel: string | null
+  canEditDays?: boolean
+  onReorderDays?: (orderedIds: number[]) => void
+  onAddDay?: (position?: number) => void
 }
 
 export function DayPlanSidebarToolbar({
   tripId, trip, days, places, categories, assignments, reservations, dayNotes,
   t, locale, toast, pdfHover, setPdfHover, icsHover, setIcsHover,
   expandedDays, setExpandedDays, onUndo, canUndo, undoHover, setUndoHover, lastActionLabel,
+  canEditDays, onReorderDays, onAddDay,
 }: DayPlanSidebarToolbarProps) {
+  const [reorderOpen, setReorderOpen] = useState(false)
   return (
     <div className="border-b border-edge-faint" style={{ padding: '12px 16px', flexShrink: 0 }}>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
@@ -197,6 +204,38 @@ export function DayPlanSidebarToolbar({
             )}
           </div>
         )}
+        {canEditDays && onReorderDays && onAddDay && days.length > 0 && (
+          <div style={{ position: 'relative', flexShrink: 0 }}>
+            <Tooltip label={t('dayplan.reorderDays')} placement="bottom">
+              <button
+                onClick={() => setReorderOpen(v => !v)}
+                aria-label={t('dayplan.reorderDays')}
+                aria-pressed={reorderOpen}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  width: 30, height: 30, borderRadius: 8,
+                  border: '1px solid var(--border-primary)',
+                  background: reorderOpen ? 'var(--bg-hover)' : 'none',
+                  color: 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit', padding: 0,
+                  transition: 'color 0.15s, border-color 0.15s, background 0.15s',
+                }}
+                onMouseEnter={e => { if (!reorderOpen) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!reorderOpen) e.currentTarget.style.background = 'transparent' }}
+              >
+                <ArrowUpDown size={14} strokeWidth={2} />
+              </button>
+            </Tooltip>
+            <DayReorderPopup
+              isOpen={reorderOpen}
+              days={days}
+              t={t}
+              locale={locale}
+              onReorder={onReorderDays}
+              onAddDay={() => onAddDay()}
+              onClose={() => setReorderOpen(false)}
+            />
+          </div>
+        )}
       </div>
     </div>
   )

client/src/components/Planner/DayReorderPopup.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react'
+import { GripVertical, ArrowUp, ArrowDown, Plus } from 'lucide-react'
+import Modal from '../shared/Modal'
+import type { Day } from '../../types'
+
+interface DayReorderPopupProps {
+  isOpen: boolean
+  days: Day[]
+  t: (key: string, params?: Record<string, any>) => string
+  locale: string
+  onReorder: (orderedIds: number[]) => void
+  onAddDay: () => void
+  onClose: () => void
+}
+
+/**
+ * Modal for moving whole days around: drag a row by its grip or use the up/down
+ * arrows, and add a day at the end. Day headers stay untouched — this is the
+ * single surface for ordering. Reorders are applied optimistically by the store,
+ * so the list reflects each move immediately.
+ */
+export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay, onClose }: DayReorderPopupProps) {
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [overIndex, setOverIndex] = useState<number | null>(null)
+
+  const ordered = [...days].sort((a, b) => (a.day_number ?? 0) - (b.day_number ?? 0))
+
+  const label = (day: Day, index: number) => {
+    if (day.title) return day.title
+    if (day.date) {
+      const d = new Date(day.date + 'T00:00:00')
+      return d.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })
+    }
+    return t('dayplan.dayN', { n: index + 1 })
+  }
+
+  const move = (from: number, to: number) => {
+    if (to < 0 || to >= ordered.length || from === to) return
+    const ids = ordered.map(d => d.id)
+    const [moved] = ids.splice(from, 1)
+    ids.splice(to, 0, moved)
+    onReorder(ids)
+  }
+
+  const cellBtn = {
+    display: 'grid', placeItems: 'center', width: 28, height: 28,
+    border: '1px solid var(--border-faint)', borderRadius: 7,
+    background: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: 0,
+  } as const
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t('dayplan.reorderTitle')}
+      size="md"
+      footer={
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <button
+            onClick={onClose}
+            style={{
+              padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
+              border: '1px solid var(--border-primary)', background: 'none',
+              color: 'var(--text-muted)', cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            {t('common.close')}
+          </button>
+          <button
+            onClick={onAddDay}
+            className="bg-accent text-accent-text"
+            style={{
+              display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px',
+              borderRadius: 8, border: 'none', fontSize: 13, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            <Plus size={15} strokeWidth={2} />
+            {t('dayplan.addDay')}
+          </button>
+        </div>
+      }
+    >
+      <p style={{ margin: '0 0 14px', fontSize: 12.5, color: 'var(--text-faint)', lineHeight: 1.4 }}>
+        {t('dayplan.reorderHint')}
+      </p>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {ordered.map((day, index) => (
+          <div
+            key={day.id}
+            draggable
+            onDragStart={() => setDragIndex(index)}
+            onDragEnd={() => { setDragIndex(null); setOverIndex(null) }}
+            onDragOver={e => { e.preventDefault(); if (overIndex !== index) setOverIndex(index) }}
+            onDrop={e => {
+              e.preventDefault()
+              if (dragIndex !== null && dragIndex !== index) move(dragIndex, index)
+              setDragIndex(null); setOverIndex(null)
+            }}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px',
+              borderRadius: 9,
+              border: '1px solid var(--border-faint)',
+              background: overIndex === index && dragIndex !== null && dragIndex !== index ? 'var(--bg-hover)' : 'var(--bg-card, white)',
+              opacity: dragIndex === index ? 0.5 : 1,
+              outline: overIndex === index && dragIndex !== null && dragIndex !== index ? '2px dashed var(--border-primary)' : 'none',
+              outlineOffset: -2,
+            }}
+          >
+            <GripVertical size={15} strokeWidth={1.8} style={{ cursor: 'grab', color: 'var(--text-faint)', flexShrink: 0 }} />
+            <span style={{
+              flexShrink: 0, width: 24, height: 24, borderRadius: '50%',
+              background: 'var(--bg-hover)', color: 'var(--text-muted)',
+              display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700,
+            }}>
+              {index + 1}
+            </span>
+            <span style={{ flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {label(day, index)}
+            </span>
+            <button
+              onClick={() => move(index, index - 1)}
+              disabled={index === 0}
+              aria-label={t('dayplan.moveUp')}
+              style={{ ...cellBtn, opacity: index === 0 ? 0.35 : 1, cursor: index === 0 ? 'default' : 'pointer' }}
+            >
+              <ArrowUp size={14} strokeWidth={2} />
+            </button>
+            <button
+              onClick={() => move(index, index + 1)}
+              disabled={index === ordered.length - 1}
+              aria-label={t('dayplan.moveDown')}
+              style={{ ...cellBtn, opacity: index === ordered.length - 1 ? 0.35 : 1, cursor: index === ordered.length - 1 ? 'default' : 'pointer' }}
+            >
+              <ArrowDown size={14} strokeWidth={2} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </Modal>
+  )
+}

client/src/components/Planner/PlaceFormModal.helpers.ts

@@ -13,6 +13,7 @@ export interface PlaceFormData {
   // Populated from a maps-search pick (not part of the initial blank form).
   phone?: string
   google_place_id?: string
+  google_ftid?: string
   osm_id?: string
 }
 

client/src/components/Planner/PlaceFormModal.test.tsx

@@ -253,6 +253,101 @@ describe('PlaceFormModal', () => {
     delete window.__addToast;
   });
 
+  // ── Autocomplete suggestion click (#1192) ─────────────────────────────────────
+  // Selecting a dropdown suggestion does a second `details` lookup which is fragile
+  // (details kill-switch, an overloaded OSM Overpass mirror, upstream errors). When
+  // it yields no usable place the modal must fall back to the reliable text search
+  // instead of dead-ending on "Place search failed".
+
+  async function openSuggestion(user: ReturnType<typeof userEvent.setup>) {
+    const searchInput = screen.getByPlaceholderText('Search places...');
+    await user.type(searchInput, 'Eiffel');
+    // Debounced autocomplete (300ms) then the dropdown renders the suggestion.
+    return screen.findByText('Paris, France');
+  }
+
+  it('FE-PLANNER-PLACEFORM-021b: suggestion click falls back to search when details fails', async () => {
+    const addToast = vi.fn();
+    window.__addToast = addToast;
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/maps/autocomplete', () =>
+        HttpResponse.json({
+          suggestions: [{ placeId: 'node:123', mainText: 'Eiffel Tower', secondaryText: 'Paris, France' }],
+          source: 'nominatim',
+        }),
+      ),
+      // details rejects (e.g. proxy 504 from a hung Overpass mirror)
+      http.get('/api/maps/details/:placeId', () => HttpResponse.json({ error: 'boom' }, { status: 500 })),
+      http.post('/api/maps/search', () =>
+        HttpResponse.json({
+          places: [{ name: 'Eiffel Tower', address: 'Paris, France', lat: '48.8584', lng: '2.2945' }],
+          source: 'openstreetmap',
+        }),
+      ),
+    );
+
+    render(<PlaceFormModal {...defaultProps} />);
+    const suggestion = await openSuggestion(user);
+    await user.click(suggestion);
+
+    // Form is populated from the search fallback, and no error toast is shown.
+    expect(await screen.findByDisplayValue('48.8584')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('2.2945')).toBeInTheDocument();
+    expect(addToast).not.toHaveBeenCalledWith(expect.anything(), 'error', expect.anything());
+    delete window.__addToast;
+  });
+
+  it('FE-PLANNER-PLACEFORM-021c: suggestion click falls back when details is disabled (place: null)', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/maps/autocomplete', () =>
+        HttpResponse.json({
+          suggestions: [{ placeId: 'node:123', mainText: 'Eiffel Tower', secondaryText: 'Paris, France' }],
+          source: 'nominatim',
+        }),
+      ),
+      http.get('/api/maps/details/:placeId', () => HttpResponse.json({ place: null, disabled: true })),
+      http.post('/api/maps/search', () =>
+        HttpResponse.json({
+          places: [{ name: 'Eiffel Tower', address: 'Paris, France', lat: '48.8584', lng: '2.2945' }],
+          source: 'openstreetmap',
+        }),
+      ),
+    );
+
+    render(<PlaceFormModal {...defaultProps} />);
+    const suggestion = await openSuggestion(user);
+    await user.click(suggestion);
+
+    expect(await screen.findByDisplayValue('48.8584')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-021d: suggestion click shows error only when the fallback also finds nothing', async () => {
+    const addToast = vi.fn();
+    window.__addToast = addToast;
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/maps/autocomplete', () =>
+        HttpResponse.json({
+          suggestions: [{ placeId: 'node:123', mainText: 'Eiffel Tower', secondaryText: 'Paris, France' }],
+          source: 'nominatim',
+        }),
+      ),
+      http.get('/api/maps/details/:placeId', () => HttpResponse.json({ place: null, disabled: true })),
+      http.post('/api/maps/search', () => HttpResponse.json({ places: [], source: 'openstreetmap' })),
+    );
+
+    render(<PlaceFormModal {...defaultProps} />);
+    const suggestion = await openSuggestion(user);
+    await user.click(suggestion);
+
+    await waitFor(() => {
+      expect(addToast).toHaveBeenCalledWith('Place search failed.', 'error', undefined);
+    });
+    delete window.__addToast;
+  });
+
   it('FE-PLANNER-PLACEFORM-022: hasMapsKey=false shows OSM active message', () => {
     // hasMapsKey is false by default in beforeEach
     render(<PlaceFormModal {...defaultProps} />);
@@ -270,6 +365,18 @@ describe('PlaceFormModal', () => {
     expect(screen.getByText(/No category/i)).toBeInTheDocument();
   });
 
+  it('FE-PLANNER-PLACEFORM-023b: editing a place shows its assigned category, not the placeholder (#1134)', () => {
+    // Regression: form.category_id is a string but the option values were numbers,
+    // so CustomSelect's strict-equality match failed and the trigger fell back to
+    // "No category". With string option values the chosen category renders.
+    const cat = buildCategory({ name: 'Museums' });
+    const place = buildPlace({ name: 'Louvre', category_id: cat.id });
+    render(<PlaceFormModal {...defaultProps} place={place} categories={[cat]} />);
+    // Dropdown is closed, so the only place the category name can appear is the trigger.
+    expect(screen.getByText('Museums')).toBeInTheDocument();
+    expect(screen.queryByText(/No category/i)).not.toBeInTheDocument();
+  });
+
   it('FE-PLANNER-PLACEFORM-024: onCategoryCreated is called when creating a category', async () => {
     const onCategoryCreated = vi.fn().mockResolvedValue({ id: 99, name: 'Beaches', color: '#6366f1', icon: 'MapPin' });
     // Directly invoke handleCreateCategory by setting showNewCategory via the category name input
@@ -292,17 +399,38 @@ describe('PlaceFormModal', () => {
     expect(screen.queryByTestId('time-picker')).not.toBeInTheDocument();
   });
 
-  it('FE-PLANNER-PLACEFORM-026: time section IS shown in edit mode', () => {
+  it('FE-PLANNER-PLACEFORM-026: time section is hidden in edit mode when no assignment is in context', () => {
+    // Times are per day-assignment; editing a pool place with no day in context
+    // (assignmentId null) hides the fields, which otherwise would not persist (#1247)
     const place = buildPlace({ name: 'Test' });
     render(<PlaceFormModal {...defaultProps} place={place} assignmentId={null} />);
-    // Time pickers are rendered when editing
+    expect(screen.queryByTestId('time-picker')).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-026b: time section IS shown when an assignment is in context', () => {
+    const place = buildPlace({ name: 'Test', place_time: '09:00', end_time: '10:00' });
+    const assignment = buildAssignment({ id: 10, day_id: 5, place });
+    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={10} dayAssignments={[assignment]} />);
     expect(screen.getAllByTestId('time-picker').length).toBeGreaterThanOrEqual(2);
   });
 
+  it('FE-PLANNER-PLACEFORM-026c: hydrates Start/End from the assignment when the pool place lacks times (#1247)', () => {
+    // The pool Place carries no times — they live on the day-assignment. Opening the
+    // editor with an assignmentId must hydrate the fields from assignment.place, not
+    // the (timeless) pool place that the Places panel passes in.
+    const poolPlace = buildPlace({ id: 7, name: 'Museum' });
+    const assignmentPlace = buildPlace({ id: 7, name: 'Museum', place_time: '20:20', end_time: '20:34' });
+    const assignment = buildAssignment({ id: 42, day_id: 3, place: assignmentPlace });
+    render(<PlaceFormModal {...defaultProps} place={poolPlace} assignmentId={42} dayAssignments={[assignment]} />);
+    expect(screen.getByDisplayValue('20:20')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('20:34')).toBeInTheDocument();
+  });
+
   it('FE-PLANNER-PLACEFORM-027: end-before-start error disables submit', () => {
-    // Build a place with end_time before place_time
+    // Build an assignment whose place has end_time before place_time
     const place = buildPlace({ name: 'Test', place_time: '14:00', end_time: '13:00' });
-    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={null} />);
+    const assignment = buildAssignment({ id: 11, day_id: 5, place });
+    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={11} dayAssignments={[assignment]} />);
 
     // hasTimeError = true → submit button disabled
     const submitBtn = screen.getByRole('button', { name: /^Update$/i });

client/src/components/Planner/PlaceFormModal.tsx

@@ -27,7 +27,7 @@ interface PlaceFormModalProps {
   onClose: () => void
   onSave: (data: PlaceSubmitData, files?: File[]) => Promise<void> | void
   place: Place | null
-  prefillCoords?: { lat: number; lng: number; name?: string; address?: string } | null
+  prefillCoords?: { lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string } | null
   tripId: number
   categories: Category[]
   onCategoryCreated: (category: { name: string; color?: string; icon?: string }) => Promise<Category> | undefined
@@ -39,6 +39,31 @@ interface PlaceFormModalProps {
 /** Place create/edit form state: maps search + Google-URL resolve + autocomplete,
  * category creation, file attachments and submit. Keeps PlaceFormModal a thin
  * render over the form fields. */
+
+// #1152: a manually-added place is treated as a likely duplicate of an existing
+// trip place if it shares the Google Place ID, the (case-insensitive) name, or
+// near-identical coordinates (~11 m). Mirrors the server-side import dedup.
+const DUP_COORD_TOLERANCE = 0.0001
+function findDuplicatePlace(
+  form: PlaceFormData,
+  places: { name?: string | null; lat?: number | null; lng?: number | null; google_place_id?: string | null }[],
+): { name?: string | null } | null {
+  const name = (form.name || '').trim().toLowerCase()
+  const gid = (form.google_place_id || '').trim()
+  const lat = form.lat ? parseFloat(form.lat) : null
+  const lng = form.lng ? parseFloat(form.lng) : null
+  for (const p of places || []) {
+    if (gid && p.google_place_id && p.google_place_id === gid) return p
+    if (name && p.name && p.name.trim().toLowerCase() === name) return p
+    if (
+      lat != null && lng != null && p.lat != null && p.lng != null &&
+      Math.abs(Number(p.lat) - lat) <= DUP_COORD_TOLERANCE &&
+      Math.abs(Number(p.lng) - lng) <= DUP_COORD_TOLERANCE
+    ) return p
+  }
+  return null
+}
+
 function usePlaceFormModal(props: PlaceFormModalProps) {
   const {
   isOpen, onClose, onSave, place, prefillCoords, tripId, categories,
@@ -51,8 +76,10 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
   const [newCategoryName, setNewCategoryName] = useState('')
   const [showNewCategory, setShowNewCategory] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
+  const [duplicateWarning, setDuplicateWarning] = useState<string | null>(null)
   const [pendingFiles, setPendingFiles] = useState([])
   const fileRef = useRef(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
   const [acSuggestions, setAcSuggestions] = useState<{ placeId: string; mainText: string; secondaryText: string }[]>([])
   const [acHighlight, setAcHighlight] = useState(-1)
   const acDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -66,6 +93,11 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
 
   useEffect(() => {
     if (place) {
+      // Times are stored per day-assignment, not on the pool place. When an
+      // assignment is in context (itinerary edit, or a single-assignment pool
+      // edit) read the times off its embedded place; fall back to the place prop.
+      const assignment = assignmentId ? dayAssignments.find(a => a.id === assignmentId) : null
+      const timeSource = assignment?.place ?? place
       setForm({
         name: place.name || '',
         description: place.description || '',
@@ -73,8 +105,8 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
         lat: place.lat != null ? String(place.lat) : '',
         lng: place.lng != null ? String(place.lng) : '',
         category_id: place.category_id != null ? String(place.category_id) : '',
-        place_time: place.place_time || '',
-        end_time: place.end_time || '',
+        place_time: timeSource.place_time || '',
+        end_time: timeSource.end_time || '',
         notes: place.notes || '',
         transport_mode: place.transport_mode || 'walking',
         website: place.website || '',
@@ -86,12 +118,30 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
         lng: String(prefillCoords.lng),
         name: prefillCoords.name || '',
         address: prefillCoords.address || '',
+        website: prefillCoords.website || '',
+        phone: prefillCoords.phone || '',
+        osm_id: prefillCoords.osm_id,
       })
     } else {
       setForm(DEFAULT_FORM)
     }
     setPendingFiles([])
-  }, [place, prefillCoords, isOpen])
+    setDuplicateWarning(null)
+    // dayAssignments is a fresh array each render; read it at open-time only and
+    // re-run on identity changes (place/assignmentId/open), not on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [place, prefillCoords, isOpen, assignmentId])
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        const modal = searchInputRef.current?.closest('[role="dialog"]') ?? document.body
+        if (!modal.contains(document.activeElement) || document.activeElement === document.body) {
+          searchInputRef.current?.focus()
+        }
+      }, 50)
+    }
+  }, [isOpen])
 
   // Derive location bias bounding box from the trip's existing places
   const places = useTripStore((s) => s.places)
@@ -179,6 +229,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
             address: resolved.address || prev.address,
             lat: String(resolved.lat),
             lng: String(resolved.lng),
+            google_ftid: resolved.google_ftid || prev.google_ftid,
           }))
           setMapsResults([])
           setMapsSearch('')
@@ -203,6 +254,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
       lat: result.lat || prev.lat,
       lng: result.lng || prev.lng,
       google_place_id: result.google_place_id || prev.google_place_id,
+      google_ftid: result.google_ftid || prev.google_ftid,
       osm_id: result.osm_id || prev.osm_id,
       website: result.website || prev.website,
       phone: result.phone || prev.phone,
@@ -219,15 +271,34 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     setForm(prev => ({ ...prev, name: suggestion.mainText }))
     setIsSearchingMaps(true)
     try {
-      const result = await mapsApi.details(suggestion.placeId, language)
-      if (result.place) {
-        handleSelectMapsResult(result.place)
+      // The details lookup is a fragile second hop — it can fail when the
+      // details kill-switch is off, when the OSM Overpass mirror is overloaded,
+      // or on any upstream error. Treat a missing/coordinate-less place as a
+      // miss and fall back to the reliable text-search path the search button
+      // uses (its results already carry coordinates), so dropdown items stay
+      // clickable instead of dead-ending on "Place search failed". (#1192)
+      let place: Record<string, unknown> | null = null
+      try {
+        const result = await mapsApi.details(suggestion.placeId, language)
+        if (result.place && result.place.lat != null && result.place.lng != null) {
+          place = result.place
+        }
+      } catch (err) {
+        console.error('Failed to fetch place details:', err)
+      }
+      if (!place) {
+        const query = [suggestion.mainText, suggestion.secondaryText].filter(Boolean).join(', ')
+        const search = await mapsApi.search(query, language)
+        place = search.places?.[0] ?? null
+      }
+      if (place) {
+        handleSelectMapsResult(place)
       } else {
         setMapsSearch(previousSearch)
         toast.error(t('places.mapsSearchError'))
       }
     } catch (err) {
-      console.error('Failed to fetch place details:', err)
+      console.error('Place suggestion lookup failed:', err)
       setMapsSearch(previousSearch)
       toast.error(getApiErrorMessage(err, t('places.mapsSearchError')))
     } finally {
@@ -306,6 +377,17 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
       toast.error(t('places.nameRequired'))
       return
     }
+    // #1152: only for new places, and only on the first attempt — a second click
+    // (with the warning already showing) is the explicit "add anyway" confirmation.
+    if (!place && !duplicateWarning) {
+      const dup = findDuplicatePlace(form, places)
+      if (dup) {
+        const dupName = dup.name || form.name
+        setDuplicateWarning(dupName)
+        toast.warning(t('places.duplicateExists', { name: dupName }))
+        return
+      }
+    }
     setIsSaving(true)
     try {
       await onSave({
@@ -366,6 +448,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     canUploadFiles,
     places,
     locationBias,
+    searchInputRef,
     fetchSuggestions,
     handleChange,
     handleMapsSearch,
@@ -378,6 +461,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     handlePaste,
     hasTimeError,
     handleSubmit,
+    duplicateWarning,
   }
 }
 
@@ -426,6 +510,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
     canUploadFiles,
     places,
     locationBias,
+    searchInputRef,
     fetchSuggestions,
     handleChange,
     handleMapsSearch,
@@ -438,6 +523,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
     handlePaste,
     hasTimeError,
     handleSubmit,
+    duplicateWarning,
   } = S
   return (
     <Modal
@@ -460,7 +546,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
             disabled={isSaving || hasTimeError}
             className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
           >
-            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
+            {isSaving ? t('common.saving') : place ? t('common.update') : duplicateWarning ? t('places.addAnyway') : t('common.add')}
           </button>
         </div>
       }
@@ -476,6 +562,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
           <div className="relative">
             <div className="flex gap-2">
               <input
+                ref={searchInputRef}
                 type="text"
                 value={mapsSearch}
                 onChange={e => setMapsSearch(e.target.value)}
@@ -636,7 +723,10 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
                 options={[
                   { value: '', label: t('places.noCategory') },
                   ...(categories || []).map(c => ({
-                    value: c.id,
+                    // form.category_id is a string; CustomSelect matches options by
+                    // strict equality, so the option value must be a string too —
+                    // otherwise the chosen category never renders in the trigger.
+                    value: String(c.id),
                     label: c.name,
                   })),
                 ]}
@@ -663,8 +753,11 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
           )}
         </div>
 
-        {/* Time — only shown when editing, not when creating */}
-        {place && (
+        {/* Time is per day-assignment: only shown when a single assignment is in
+            context (itinerary edit, or a single-assignment pool edit). Hidden when
+            creating, and for unassigned / multi-day pool edits where a single time
+            is ambiguous and wouldn't persist. */}
+        {place && assignmentId && (
           <TimeSection
             form={form}
             handleChange={handleChange}

client/src/components/Planner/PlaceInspector.test.tsx

@@ -618,6 +618,22 @@ describe('PlaceInspector', () => {
     expect(mapsBtn).toBeTruthy();
   });
 
+  it('FE-PLANNER-INSPECTOR-043b: Google Maps action uses google_ftid over coordinates', async () => {
+    const user = userEvent.setup();
+    const mapsUrl = "https://www.google.com/maps/place/?q=St.%20Jacobs%20Farmers'%20Market&ftid=0x882bf179e806d471:0x8591dde29c821a93";
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    render(<PlaceInspector {...defaultProps} place={buildPlace({
+      name: "St. Jacobs Farmers' Market",
+      lat: 43.5118527,
+      lng: -80.5542617,
+      google_ftid: '0x882bf179e806d471:0x8591dde29c821a93',
+    })} />);
+    const mapsBtn = screen.getAllByRole('button').find(btn => btn.textContent?.includes('Google Maps'))!;
+    await user.click(mapsBtn);
+    expect(openSpy).toHaveBeenCalledWith(mapsUrl, '_blank');
+    openSpy.mockRestore();
+  });
+
   // ── No files section when no upload handler and no files ──────────────────
 
   it('FE-PLANNER-INSPECTOR-044: files section hidden when no files and no onFileUpload', () => {
@@ -647,5 +663,42 @@ describe('PlaceInspector', () => {
     expect(screen.queryByText('Participants')).toBeNull();
   });
 
-});
+  // ── Scroll / overflow (issue #1195) ──────────────────────────────────────
 
+  it('FE-PLANNER-INSPECTOR-046: content area is a bounded flex scroll region', () => {
+    const longText = 'Lorem ipsum dolor sit amet. '.repeat(200);
+    const p = buildPlace({ id: 200, description: longText, notes: longText } as any);
+    render(<PlaceInspector {...defaultProps} place={p} />);
+    const scroll = screen.getByTestId('inspector-scroll') as HTMLElement;
+    expect(scroll.style.overflowY).toBe('auto');
+    expect(scroll.style.minHeight).toBe('0px');
+    // flex must allow the region to shrink/grow within the capped card
+    expect(scroll.style.flex).not.toBe('');
+    expect(scroll.style.flex).not.toBe('0 0 auto');
+  });
+
+  it('FE-PLANNER-INSPECTOR-047: long unbroken description wraps instead of clipping horizontally', () => {
+    const longWord = 'https://example.com/' + 'a'.repeat(300);
+    const p = buildPlace({ id: 201, description: longWord } as any);
+    const { container } = render(<PlaceInspector {...defaultProps} place={p} />);
+    const descDiv = container.querySelector('.collab-note-md') as HTMLElement;
+    expect(descDiv).toBeTruthy();
+    expect(descDiv.style.overflowWrap).toBe('anywhere');
+    expect(descDiv.style.wordBreak).toBe('break-word');
+  });
+
+  it('FE-PLANNER-INSPECTOR-048: description/notes do not shrink so the card scrolls instead of clipping', () => {
+    const longText = 'Lorem ipsum dolor sit amet. '.repeat(200);
+    const p = buildPlace({ id: 202, description: longText, notes: longText } as any);
+    const { container } = render(<PlaceInspector {...defaultProps} place={p} />);
+    const notes = Array.from(container.querySelectorAll('.collab-note-md')) as HTMLElement[];
+    // Both description and notes containers must keep their natural height
+    // (flex-shrink: 0) — otherwise they compress inside the flex column and
+    // overflow:hidden clips the text with no scroll (issue #1195).
+    expect(notes.length).toBe(2);
+    for (const el of notes) {
+      expect(el.style.flexShrink).toBe('0');
+    }
+  });
+
+});

client/src/components/Planner/PlaceInspector.tsx

@@ -12,6 +12,8 @@ import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import type { Place, Category, Day, Assignment, Reservation, TripFile, AssignmentsMap } from '../../types'
 import { splitReservationDateTime, formatTime } from '../../utils/formatters'
+import { formatDistance, formatElevation } from '../../utils/units'
+import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'
 
 const detailsCache = new Map()
 
@@ -122,6 +124,7 @@ export default function PlaceInspector({
   const { t, locale, language } = useTranslation()
   const toast = useToast()
   const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
+  const distanceUnit = useSettingsStore(s => s.settings.distance_unit) || 'metric'
   const [hoursExpanded, setHoursExpanded] = useState(false)
   const [filesExpanded, setFilesExpanded] = useState(false)
   const [isUploading, setIsUploading] = useState(false)
@@ -162,6 +165,11 @@ export default function PlaceInspector({
 
   const openingHours = googleDetails?.opening_hours || null
   const openNow = googleDetails?.open_now ?? null
+  // Prefer the place's stored ftid; if it has none yet, use the one just fetched from Google.
+  const googleMapsUrl = getGoogleMapsUrlForPlace(
+    place ? { ...place, google_ftid: place.google_ftid || googleDetails?.google_ftid || null } : null,
+    googleDetails?.google_maps_url,
+  )
   const selectedDay = days?.find(d => d.id === selectedDayId)
   const weekdayIndex = getWeekdayIndex(selectedDay?.date)
 
@@ -217,7 +225,7 @@ export default function PlaceInspector({
           locale={locale} timeFormat={timeFormat} onClose={onClose} />
 
         {/* Content — scrollable */}
-        <div style={{ overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <div data-testid="inspector-scroll" style={{ flex: '1 1 auto', minHeight: 0, overflowY: 'auto', WebkitOverflowScrolling: 'touch', overscrollBehavior: 'contain', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
 
           {/* Info-Chips — hidden on mobile, shown on desktop */}
           <div className="hidden sm:flex" style={{ flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
@@ -253,14 +261,14 @@ export default function PlaceInspector({
 
           {/* Description / Summary */}
           {(place.description || googleDetails?.summary) && (
-            <div className="collab-note-md bg-surface-hover text-content-muted" style={{ borderRadius: 10, overflow: 'hidden', fontSize: 12, lineHeight: '1.5', padding: '8px 12px' }}>
+            <div className="collab-note-md bg-surface-hover text-content-muted" style={{ borderRadius: 10, overflow: 'hidden', flexShrink: 0, fontSize: 12, lineHeight: '1.5', padding: '8px 12px', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
               <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{place.description || googleDetails?.summary || ''}</Markdown>
             </div>
           )}
 
           {/* Notes */}
           {place.notes && (
-            <div className="collab-note-md bg-surface-hover text-content-muted" style={{ borderRadius: 10, overflow: 'hidden', fontSize: 12, lineHeight: '1.5', padding: '8px 12px', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+            <div className="collab-note-md bg-surface-hover text-content-muted" style={{ borderRadius: 10, overflow: 'hidden', flexShrink: 0, fontSize: 12, lineHeight: '1.5', padding: '8px 12px', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
               <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{place.notes}</Markdown>
             </div>
           )}
@@ -274,12 +282,13 @@ export default function PlaceInspector({
           <PlaceExtras openingHours={openingHours} weekdayIndex={weekdayIndex} hoursExpanded={hoursExpanded}
             setHoursExpanded={setHoursExpanded} timeFormat={timeFormat} t={t} place={place} placeFiles={placeFiles}
             onFileUpload={onFileUpload} filesExpanded={filesExpanded} setFilesExpanded={setFilesExpanded}
-            fileInputRef={fileInputRef} handleFileUpload={handleFileUpload} isUploading={isUploading} />
+            fileInputRef={fileInputRef} handleFileUpload={handleFileUpload} isUploading={isUploading}
+            distanceUnit={distanceUnit} />
 
         </div>
 
         {/* Footer actions */}
-        <div className="border-t border-edge-faint" style={{ padding: '10px 16px', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
+        <div className="border-t border-edge-faint" style={{ padding: '10px 16px', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', flexShrink: 0 }}>
           {selectedDayId && (
             assignmentInDay ? (
               <ActionButton onClick={() => onRemoveAssignment(selectedDayId, assignmentInDay.id)} variant="ghost" icon={<Minus size={13} />}
@@ -288,14 +297,10 @@ export default function PlaceInspector({
               <ActionButton onClick={() => onAssignToDay(place.id)} variant="primary" icon={<Plus size={13} />} label={t('inspector.addToDay')} />
             )
           )}
-          {googleDetails?.google_maps_url && (
-            <ActionButton onClick={() => window.open(googleDetails.google_maps_url, '_blank')} variant="ghost" icon={<Navigation size={13} />}
+          {googleMapsUrl && (
+            <ActionButton onClick={() => window.open(googleMapsUrl, '_blank')} variant="ghost" icon={<Navigation size={13} />}
               label={<span className="hidden sm:inline">{t('inspector.google')}</span>} />
           )}
-          {!googleDetails?.google_maps_url && place.lat && place.lng && (
-            <ActionButton onClick={() => window.open(`https://www.google.com/maps/search/?api=1&query=${place.google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + place.google_place_id : place.lat + ',' + place.lng}`, '_blank')} variant="ghost" icon={<Navigation size={13} />}
-              label={<span className="hidden sm:inline">Google Maps</span>} />
-          )}
           {(place.website || googleDetails?.website) && (
             <ActionButton onClick={() => window.open(place.website || googleDetails?.website, '_blank')} variant="ghost" icon={<ExternalLink size={13} />}
               label={<span className="hidden sm:inline">{t('inspector.website')}</span>} />
@@ -497,7 +502,7 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
 function PlaceInspectorHeader({ openNow, place, category, t, editingName, nameInputRef, nameValue, setNameValue,
   commitNameEdit, handleNameKeyDown, startNameEdit, onUpdatePlace, locale, timeFormat, onClose }: any) {
   return (
-        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
           {/* Avatar with open/closed ring + tag */}
           <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
             <div style={{
@@ -682,7 +687,7 @@ function PlaceReservationParticipants({ selectedAssignmentId, reservations, assi
 }
 
 function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpanded, timeFormat, t, place,
-  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading }: any) {
+  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading, distanceUnit }: any) {
   return (
           <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
           {openingHours && openingHours.length > 0 && (
@@ -775,20 +780,20 @@ function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpand
                   <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                     <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
                       <MapPin size={12} color="#3b82f6" />
-                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
+                      {formatDistance(distKm, distanceUnit)}
                     </div>
                     {hasEle && (
                       <>
                         <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
                           <Mountain size={12} color="#22c55e" />
-                          {Math.round(maxEle)} m
+                          {formatElevation(maxEle, distanceUnit)}
                         </div>
                         <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
                           <Mountain size={12} color="#ef4444" />
-                          {Math.round(minEle)} m
+                          {formatElevation(minEle, distanceUnit)}
                         </div>
                         <div className="text-content-muted" style={{ fontSize: 12 }}>
-                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
+                          ↑{formatElevation(totalUp, distanceUnit)} &nbsp;↓{formatElevation(totalDown, distanceUnit)}
                         </div>
                       </>
                     )}

client/src/components/Planner/PlacesSidebar.test.tsx

@@ -124,6 +124,40 @@ describe('PlacesSidebar', () => {
     expect(screen.getByText('Central Park')).toBeInTheDocument();
   });
 
+  it('FE-COMP-PLACES-009a: selected visible place is scrolled into view', async () => {
+    const scrollIntoView = Element.prototype.scrollIntoView as unknown as ReturnType<typeof vi.fn>;
+    scrollIntoView.mockClear();
+    const places = [
+      buildPlace({ id: 10, name: 'First Place' }),
+      buildPlace({ id: 42, name: 'Map Click Target' }),
+    ];
+
+    render(<PlacesSidebar {...defaultProps} places={places} selectedPlaceId={42} />);
+
+    const selectedRow = screen.getByText('Map Click Target').closest('[data-place-id="42"]');
+    expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+    await waitFor(() => {
+      expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth', block: 'center' });
+    });
+  });
+
+  it('FE-COMP-PLACES-009b: selected place hidden by search is not scrolled', async () => {
+    const user = userEvent.setup();
+    const scrollIntoView = Element.prototype.scrollIntoView as unknown as ReturnType<typeof vi.fn>;
+    const places = [
+      buildPlace({ id: 10, name: 'Visible Cafe' }),
+      buildPlace({ id: 42, name: 'Hidden Museum' }),
+    ];
+    const { rerender } = render(<PlacesSidebar {...defaultProps} places={places} selectedPlaceId={null} />);
+
+    await user.type(screen.getByPlaceholderText(/Search places/i), 'Visible');
+    scrollIntoView.mockClear();
+    rerender(<PlacesSidebar {...defaultProps} places={places} selectedPlaceId={42} />);
+
+    expect(screen.queryByText('Hidden Museum')).not.toBeInTheDocument();
+    expect(scrollIntoView).not.toHaveBeenCalled();
+  });
+
   it('FE-COMP-PLACES-010: shows place count', () => {
     const places = [buildPlace({ name: 'P1' }), buildPlace({ name: 'P2' }), buildPlace({ name: 'P3' })];
     render(<PlacesSidebar {...defaultProps} places={places} />);

client/src/components/Planner/PlacesSidebarList.tsx

@@ -5,7 +5,7 @@ export function PlacesList(S: SidebarState) {
   const {
     filtered, scrollContainerRef, onScrollTopChange, filter, t, canEditPlaces, onAddPlace,
     categories, selectedPlaceId, plannedIds, inDaySet, selectedIds, selectMode, selectedDayId,
-    isMobile, onPlaceClick, openContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace,
+    isMobile, onPlaceClick, openContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow,
   } = S
   return (
     <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
@@ -44,6 +44,7 @@ export function PlacesList(S: SidebarState) {
               onAssignToDay={onAssignToDay}
               toggleSelected={toggleSelected}
               setDayPickerPlace={setDayPickerPlace}
+              registerPlaceRow={registerPlaceRow}
             />
           )
         })

client/src/components/Planner/PlacesSidebarListImportModal.tsx

@@ -1,10 +1,12 @@
 import ReactDOM from 'react-dom'
+import ToggleSwitch from '../Settings/ToggleSwitch'
 import type { SidebarState } from './usePlacesSidebar'
 
 export function ListImportModal(S: SidebarState) {
   const {
     setListImportOpen, setListImportUrl, t, hasMultipleListImportProviders, availableListImportProviders,
     listImportProvider, setListImportProvider, listImportUrl, listImportLoading, handleListImport,
+    listImportEnrich, setListImportEnrich, canEnrichImport,
   } = S
   return ReactDOM.createPortal(
     <div
@@ -55,6 +57,15 @@ export function ListImportModal(S: SidebarState) {
             fontFamily: 'inherit', boxSizing: 'border-box',
           }}
         />
+        {canEnrichImport && (
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginTop: 12 }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div className="text-content" style={{ fontSize: 12, fontWeight: 600 }}>{t('places.enrichOnImport')}</div>
+              <div className="text-content-faint" style={{ fontSize: 12, marginTop: 2 }}>{t('places.enrichOnImportHint')}</div>
+            </div>
+            <ToggleSwitch on={listImportEnrich} onToggle={() => setListImportEnrich(!listImportEnrich)} />
+          </div>
+        )}
         <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
           <button
             onClick={() => { setListImportOpen(false); setListImportUrl('') }}

client/src/components/Planner/PlacesSidebarRow.tsx

@@ -21,17 +21,21 @@ interface MemoPlaceRowProps {
   onAssignToDay: (placeId: number, dayId?: number) => void
   toggleSelected: (id: number) => void
   setDayPickerPlace: (place: any) => void
+  registerPlaceRow: (placeId: number, element: HTMLDivElement | null) => void
 }
 
 export const MemoPlaceRow = React.memo(function MemoPlaceRow({
   place, category: cat, isSelected, isPlanned, inDay, isChecked,
   selectMode, selectedDayId, canEditPlaces, isMobile, t,
-  onPlaceClick, onContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace,
+  onPlaceClick, onContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow,
 }: MemoPlaceRowProps) {
   const hasGeometry = Boolean(place.route_geometry)
   return (
     <div
       key={place.id}
+      ref={element => registerPlaceRow(place.id, element)}
+      aria-selected={isSelected}
+      data-place-id={place.id}
       draggable={!selectMode}
       onDragStart={e => {
         e.dataTransfer.setData('placeId', String(place.id))

client/src/components/Planner/ReservationModal.test.tsx

@@ -343,56 +343,51 @@ describe('ReservationModal', () => {
 
   // ── Budget addon ─────────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-RESMODAL-024: budget section visible when budget addon is enabled', () => {
+  it('FE-PLANNER-RESMODAL-024: costs section (create expense) visible when budget addon is enabled', () => {
     seedStore(useAddonStore, {
       addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
       loaded: true,
     });
     render(<ReservationModal {...defaultProps} />);
-    expect(screen.getByText(/^Price$/i)).toBeInTheDocument();
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Create expense/i })).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-025: budget price input accepts valid decimal', async () => {
+  it('FE-PLANNER-RESMODAL-025: create-expense saves the booking (no create_budget_entry) then opens the Costs editor', async () => {
     seedStore(useAddonStore, {
       addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
       loaded: true,
     });
-    render(<ReservationModal {...defaultProps} />);
-    const priceInput = screen.getByPlaceholderText('0.00');
-    await userEvent.type(priceInput, '99.99');
-    expect((priceInput as HTMLInputElement).value).toBe('99.99');
-  });
-
-  it('FE-PLANNER-RESMODAL-026: budget hint shown when price > 0', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    render(<ReservationModal {...defaultProps} />);
-    const priceInput = screen.getByPlaceholderText('0.00');
-    await userEvent.type(priceInput, '50');
-    expect(screen.getByText(/budget entry will be created/i)).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-RESMODAL-027: budget fields included in onSave when price is set', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<ReservationModal {...defaultProps} onSave={onSave} />);
+    const onSave = vi.fn().mockResolvedValue({ id: 55 });
+    const onOpenExpense = vi.fn();
+    render(<ReservationModal {...defaultProps} onSave={onSave} onOpenExpense={onOpenExpense} />);
 
     await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Hotel Paris');
-    await userEvent.type(screen.getByPlaceholderText('0.00'), '120');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Create expense/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ create_budget_entry: expect.objectContaining({ total_price: 120 }) })
+    expect(onSave).not.toHaveBeenCalledWith(expect.objectContaining({ create_budget_entry: expect.anything() }));
+    await waitFor(() =>
+      expect(onOpenExpense).toHaveBeenCalledWith(
+        expect.objectContaining({ prefill: expect.objectContaining({ reservationId: 55 }) })
+      )
     );
   });
 
+  it('FE-PLANNER-RESMODAL-026: linked expense summary shown for a booking with a linked cost', () => {
+    seedStore(useAddonStore, {
+      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
+      loaded: true,
+    });
+    seedStore(useTripStore, {
+      trip: buildTrip({ id: 1 }),
+      budgetItems: [
+        { id: 7, trip_id: 1, name: 'Hotel deposit', total_price: 120, currency: 'EUR', category: 'accommodation', reservation_id: 9, members: [], payers: [], persons: 1, expense_date: null, paid_by_user_id: null },
+      ],
+    });
+    render(<ReservationModal {...defaultProps} reservation={buildReservation({ id: 9, type: 'hotel', title: 'Hotel Paris' })} />);
+    expect(screen.getByText('Hotel deposit')).toBeInTheDocument();
+  });
+
   // ── File upload ───────────────────────────────────────────────────────────────
 
   it('FE-PLANNER-RESMODAL-028: pending file added for new reservation on file input change', async () => {
@@ -599,22 +594,6 @@ describe('ReservationModal', () => {
     expect(filePickerItem).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-044: budget category dropdown options include existing categories', () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    seedStore(useTripStore, {
-      trip: buildTrip({ id: 1 }),
-      budgetItems: [
-        { id: 1, trip_id: 1, name: 'Flight ticket', total_price: 300, category: 'Transport', paid_by_user_id: null, persons: 1, members: [], expense_date: null },
-      ],
-    });
-    render(<ReservationModal {...defaultProps} />);
-    // Budget section is visible
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
-  });
-
   it('FE-PLANNER-RESMODAL-045: tour type shows time pickers', async () => {
     render(<ReservationModal {...defaultProps} />);
     await userEvent.click(screen.getByRole('button', { name: /^Tour$/i }));
@@ -632,31 +611,6 @@ describe('ReservationModal', () => {
     await waitFor(() => expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'other' })));
   });
 
-  it('FE-PLANNER-RESMODAL-047: clicking budget category select changes the value', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    seedStore(useTripStore, {
-      trip: buildTrip({ id: 1 }),
-      budgetItems: [
-        { id: 1, trip_id: 1, name: 'Ticket', total_price: 100, category: 'Transport', paid_by_user_id: null, persons: 1, members: [], expense_date: null },
-      ],
-    });
-    render(<ReservationModal {...defaultProps} />);
-
-    // Open the budget category CustomSelect (shows placeholder "Auto (from booking type)")
-    const budgetCategoryBtn = screen.getByText(/Auto \(from booking type\)/i).closest('button')!;
-    await userEvent.click(budgetCategoryBtn);
-
-    // Click the "Transport" category option
-    await waitFor(() => expect(screen.getByText('Transport')).toBeInTheDocument());
-    await userEvent.click(screen.getByText('Transport'));
-
-    // The select should now show "Transport"
-    expect(screen.getByText('Transport')).toBeInTheDocument();
-  });
-
   it('FE-PLANNER-RESMODAL-048: clicking attach file button triggers file input', async () => {
     render(<ReservationModal {...defaultProps} />);
     const attachBtn = screen.getByRole('button', { name: /Attach file/i });

client/src/components/Planner/ReservationModal.tsx

@@ -11,7 +11,12 @@ import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import { openFile } from '../../utils/fileDownload'
-import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation } from '../../types'
+import { resolveDayId } from '../../utils/formatters'
+import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation, BudgetItem } from '../../types'
+import { BookingCostsSection } from './BookingCostsSection'
+import type { BookingExpenseRequest } from './BookingCostsSection.types'
+import type { BookingReviewDraft } from './parsedItemToDraft'
+import { typeToCostCategory } from '@trek/shared'
 
 const TYPE_OPTIONS = [
   { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
@@ -60,9 +65,13 @@ interface ReservationModalProps {
   onFileDelete: (fileId: number) => Promise<void>
   accommodations?: Accommodation[]
   defaultAssignmentId?: number | null
+  onOpenExpense?: (req: BookingExpenseRequest) => void
+  // Pre-fill a brand-new booking from a parsed import item (review-before-save).
+  // Distinct from `reservation`: the form is populated but stays in create mode.
+  prefill?: BookingReviewDraft | null
 }
 
-export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [], defaultAssignmentId = null }: ReservationModalProps) {
+export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [], defaultAssignmentId = null, onOpenExpense, prefill = null }: ReservationModalProps) {
   const { id: tripId } = useParams<{ id: string }>()
   const loadFiles = useTripStore(s => s.loadFiles)
   const toast = useToast()
@@ -70,24 +79,21 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const fileInputRef = useRef(null)
 
   const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
-  const budgetItems = useTripStore(s => s.budgetItems)
-  const budgetCategories = useMemo(() => {
-    const cats = new Set<string>()
-    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [budgetItems])
+  const deleteBudgetItem = useTripStore(s => s.deleteBudgetItem)
+  // Set right before submit when the user clicked create/edit expense (see TransportModal).
+  const expenseIntentRef = useRef<{ editItem?: BudgetItem; create?: boolean } | null>(null)
 
   const [form, setForm] = useState({
     title: '', type: 'other', status: 'pending',
     reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
     notes: '', assignment_id: '' as string | number, accommodation_id: '' as string | number,
-    price: '', budget_category: '',
     meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
     hotel_place_id: '' as string | number, hotel_start_day: '' as string | number, hotel_end_day: '' as string | number,
+    hotel_address: '',
   })
   const [isSaving, setIsSaving] = useState(false)
   const [uploadingFile, setUploadingFile] = useState(false)
-  const [pendingFiles, setPendingFiles] = useState([])
+  const [pendingFiles, setPendingFiles] = useState<File[]>([])
   const [showFilePicker, setShowFilePicker] = useState(false)
   const [linkedFileIds, setLinkedFileIds] = useState<number[]>([])
 
@@ -97,6 +103,16 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   )
 
   useEffect(() => {
+    // Match an existing place by name (exact, then loose contains) for hotels.
+    const matchPlaceId = (name: string | undefined): string | number => {
+      const n = (name || '').trim().toLowerCase()
+      if (!n) return ''
+      const exact = places.find(p => p.name?.trim().toLowerCase() === n)
+      if (exact) return exact.id
+      const loose = places.find(p => p.name && (p.name.toLowerCase().includes(n) || n.includes(p.name.toLowerCase())))
+      return loose?.id ?? ''
+    }
+
     if (reservation) {
       const meta = typeof reservation.metadata === 'string' ? JSON.parse(reservation.metadata || '{}') : (reservation.metadata || {})
       const rawEnd = reservation.reservation_end_time || ''
@@ -109,6 +125,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         endDate = rawEnd
         endTime = ''
       }
+      const editAcc = accommodations.find(a => a.id == reservation.accommodation_id)
       setForm({
         title: reservation.title || '',
         type: reservation.type || 'other',
@@ -124,24 +141,53 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         meta_check_in_time: meta.check_in_time || '',
         meta_check_in_end_time: meta.check_in_end_time || '',
         meta_check_out_time: meta.check_out_time || '',
-        hotel_place_id: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.place_id || '' })(),
-        hotel_start_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.start_day_id || '' })(),
-        hotel_end_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.end_day_id || '' })(),
-        price: meta.price || '',
-        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
+        hotel_place_id: editAcc?.place_id || '',
+        hotel_start_day: editAcc?.start_day_id || '',
+        hotel_end_day: editAcc?.end_day_id || '',
+        hotel_address: places.find(p => p.id == editAcc?.place_id)?.address || '',
       })
+    } else if (prefill) {
+      // Review-before-save: populate from a parsed import item, stay in create mode.
+      const meta = (prefill.metadata && typeof prefill.metadata === 'object' ? prefill.metadata : {}) as Record<string, string>
+      const rawEnd = typeof prefill.reservation_end_time === 'string' ? prefill.reservation_end_time : ''
+      let endDate = ''
+      let endTime = rawEnd
+      if (rawEnd.includes('T')) { endDate = rawEnd.split('T')[0]; endTime = rawEnd.split('T')[1]?.slice(0, 5) || '' }
+      else if (/^\d{4}-\d{2}-\d{2}$/.test(rawEnd)) { endDate = rawEnd; endTime = '' }
+      setForm({
+        title: prefill.title || '',
+        type: prefill.type || 'other',
+        status: prefill.status || 'pending',
+        reservation_time: typeof prefill.reservation_time === 'string' ? prefill.reservation_time.slice(0, 16) : '',
+        reservation_end_time: endTime,
+        end_date: endDate,
+        location: prefill.location || '',
+        confirmation_number: prefill.confirmation_number || '',
+        notes: prefill.notes || '',
+        assignment_id: defaultAssignmentId ?? '',
+        accommodation_id: '',
+        meta_check_in_time: meta.check_in_time || '',
+        meta_check_in_end_time: meta.check_in_end_time || '',
+        meta_check_out_time: meta.check_out_time || '',
+        hotel_place_id: matchPlaceId(prefill._venue?.name || prefill.title),
+        hotel_start_day: resolveDayId(days, prefill._accommodation?.check_in),
+        hotel_end_day: resolveDayId(days, prefill._accommodation?.check_out),
+        hotel_address: prefill._venue?.address || '',
+      })
+      // Seed the booking's Files with the document this item was parsed from.
+      setPendingFiles(prefill._sourceFiles ?? [])
     } else {
       setForm({
         title: '', type: 'other', status: 'pending',
         reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
         notes: '', assignment_id: defaultAssignmentId ?? '', accommodation_id: '',
-        price: '', budget_category: '',
         meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
-        hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
+        hotel_place_id: '', hotel_start_day: '', hotel_end_day: '', hotel_address: '',
       })
       setPendingFiles([])
     }
-  }, [reservation, isOpen, selectedDayId, defaultAssignmentId])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reservation, prefill, isOpen, selectedDayId, defaultAssignmentId, days, places, accommodations])
 
   // Re-hydrate hotel day range when the accommodations prop arrives after the modal opens
   // (race: tripAccommodations fetch may complete after isOpen fires, leaving hotel fields empty)
@@ -167,8 +213,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
     return endFull <= startFull
   })()
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
+  const handleSubmit = async (e?: { preventDefault?: () => void }) => {
+    e?.preventDefault?.()
     if (!form.title.trim()) return
     if (isEndBeforeStart) { toast.error(t('reservations.validation.endBeforeStart')); return }
     setIsSaving(true)
@@ -185,11 +231,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       } else if (form.reservation_end_time && form.reservation_time) {
         combinedEndTime = `${form.reservation_time.split('T')[0]}T${form.reservation_end_time}`
       }
-      if (isBudgetEnabled) {
-        if (form.price) metadata.price = form.price
-        if (form.budget_category) metadata.budget_category = form.budget_category
-      }
-
       const saveData: Record<string, any> & { title: string } = {
         title: form.title, type: form.type, status: form.status,
         reservation_time: form.type === 'hotel' ? null : (form.reservation_time || null),
@@ -202,22 +243,33 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         endpoints: [],
         needs_review: false,
       }
-      if (isBudgetEnabled) {
-        saveData.create_budget_entry = form.price && parseFloat(form.price) > 0
-          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
-          : { total_price: 0 }
-      }
-      if (form.type === 'hotel' && form.hotel_start_day && form.hotel_end_day) {
+      if (form.type === 'hotel' && (form.hotel_start_day || form.hotel_end_day)) {
         saveData.create_accommodation = {
           place_id: form.hotel_place_id || null,
-          start_day_id: form.hotel_start_day,
-          end_day_id: form.hotel_end_day,
+          // No existing place picked but we have an address/name (e.g. a reviewed
+          // import) → the save handler geocodes it and creates the place.
+          venue: (!form.hotel_place_id && (form.hotel_address || form.title))
+            ? { name: form.title, address: form.hotel_address || null }
+            : null,
+          // Tolerate a single resolved end of the range (a one-night stay or a date
+          // that only matched one trip day) so the accommodation is still created.
+          start_day_id: form.hotel_start_day || form.hotel_end_day,
+          end_day_id: form.hotel_end_day || form.hotel_start_day,
           check_in: form.meta_check_in_time || null,
           check_in_end: form.meta_check_in_end_time || null,
           check_out: form.meta_check_out_time || null,
           confirmation: form.confirmation_number || null,
         }
       }
+      // Imported booking → auto-create the linked cost from the parsed price (what the
+      // old direct import did). Only on create (not edit) and only when there's a price.
+      if (!reservation && prefill && isBudgetEnabled) {
+        const pmeta = prefill.metadata && typeof prefill.metadata === 'object' ? (prefill.metadata as Record<string, unknown>) : {}
+        const price = Number(pmeta.price)
+        if (Number.isFinite(price) && price > 0) {
+          saveData.create_budget_entry = { total_price: price, category: typeToCostCategory(form.type) }
+        }
+      }
       const saved = await onSave(saveData)
       if (!reservation?.id && saved?.id && pendingFiles.length > 0) {
         for (const file of pendingFiles) {
@@ -228,11 +280,32 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           await onFileUpload(fd)
         }
       }
+      // Open the Costs editor for the saved booking when the user asked to
+      // create/edit its linked expense (gated on saved?.id).
+      const intent = expenseIntentRef.current
+      expenseIntentRef.current = null
+      if (intent && onOpenExpense && saved?.id) {
+        if (intent.editItem) onOpenExpense({ editItem: intent.editItem })
+        else onOpenExpense({ prefill: { reservationId: saved.id, name: form.title, category: typeToCostCategory(form.type) } })
+      }
     } finally {
       setIsSaving(false)
     }
   }
 
+  const handleCreateExpense = () => { expenseIntentRef.current = { create: true }; handleSubmit() }
+  const handleEditExpense = (item: BudgetItem) => { expenseIntentRef.current = { editItem: item }; handleSubmit() }
+  const handleRemoveExpense = async (item: BudgetItem) => {
+    try { await deleteBudgetItem(Number(tripId), item.id) } catch { toast.error(t('common.unknownError')) }
+  }
+
+  // On an import review (not yet saved), preview the parsed price as the cost that will be linked.
+  const prefillMeta = prefill?.metadata && typeof prefill.metadata === 'object' ? (prefill.metadata as Record<string, unknown>) : null
+  const prefillPrice = Number(prefillMeta?.price)
+  const pendingExpense = !reservation && Number.isFinite(prefillPrice) && prefillPrice > 0
+    ? { total_price: prefillPrice, currency: (prefillMeta?.priceCurrency as string | null) ?? null, category: typeToCostCategory(form.type) }
+    : null
+
   const handleFileChange = async (e) => {
     const file = (e.target as HTMLInputElement).files?.[0]
     if (!file) return
@@ -496,6 +569,11 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 />
               </div>
             </div>
+            <div>
+              <label className={labelClass}>{t('reservations.locationAddress')}</label>
+              <input type="text" value={form.hotel_address} onChange={e => set('hotel_address', e.target.value)}
+                placeholder={t('reservations.locationPlaceholder')} className={inputClass} />
+            </div>
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
               <div>
                 <label className={labelClass}>{t('reservations.meta.checkIn')}</label>
@@ -610,38 +688,15 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           </div>
         </div>
 
-        {/* Price + Budget Category */}
+        {/* Costs — create / view the expense linked to this booking */}
         {isBudgetEnabled && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.price')}</label>
-                <input type="text" inputMode="decimal" value={form.price}
-                  onChange={e => { const v = e.target.value; if (v === '' || /^\d*[.,]?\d{0,2}$/.test(v)) set('price', v.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
-                  placeholder="0.00"
-                  className={inputClass} />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.budgetCategory')}</label>
-                <CustomSelect
-                  value={form.budget_category}
-                  onChange={v => set('budget_category', v)}
-                  options={[
-                    { value: '', label: t('reservations.budgetCategoryAuto') },
-                    ...budgetCategories.map(c => ({ value: c, label: c })),
-                  ]}
-                  placeholder={t('reservations.budgetCategoryAuto')}
-                  size="sm"
-                />
-              </div>
-            </div>
-            {form.price && parseFloat(form.price) > 0 && (
-              <div className="text-content-faint" style={{ fontSize: 11, marginTop: -4 }}>
-                {t('reservations.budgetHint')}
-              </div>
-            )}
-          </>
+          <BookingCostsSection
+            reservationId={reservation?.id ?? null}
+            pendingExpense={pendingExpense}
+            onCreate={handleCreateExpense}
+            onEdit={handleEditExpense}
+            onRemove={handleRemoveExpense}
+          />
         )}
 
       </form>

client/src/components/Planner/ReservationsPanel.tsx

@@ -179,6 +179,16 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
               {t('reservations.needsReview')}
             </span>
           ) : null}
+          {r.external_source === 'airtrail' ? (
+            <span
+              className={r.sync_enabled ? 'text-[#2563eb] bg-[rgba(59,130,246,0.12)]' : 'text-content-faint bg-surface-tertiary'}
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 6 }}
+              title={r.sync_enabled ? t('reservations.airtrail.syncedHint') : t('reservations.airtrail.notSyncedHint')}
+            >
+              <Plane size={11} />
+              {r.sync_enabled ? t('reservations.airtrail.synced') : t('reservations.airtrail.notSynced')}
+            </span>
+          ) : null}
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
           <span className="text-content" style={{
@@ -271,19 +281,21 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         )}
 
         {(() => {
-          const eps = r.endpoints || []
-          const from = eps.find(e => e.role === 'from')
-          const to = eps.find(e => e.role === 'to')
-          if (!from || !to) return null
+          // Full route over all waypoints (from · stops · to), ordered by sequence.
+          const eps = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
+          if (eps.length < 2) return null
           return (
             <div className="bg-surface-tertiary text-content" style={{
               display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
               padding: '8px 12px', borderRadius: 10,
-              fontSize: 12.5,
+              fontSize: 12.5, flexWrap: 'wrap',
             }}>
-              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{from.name}</span>
-              <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />
-              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{to.name}</span>
+              {eps.map((ep, i) => (
+                <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                  {i > 0 && <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />}
+                  <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{ep.name}</span>
+                </span>
+              ))}
             </div>
           )
         })()}
@@ -300,7 +312,8 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           if (!hasEndpoints && meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
           if (meta.train_number) cells.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
           if (meta.platform) cells.push({ label: t('reservations.meta.platform'), value: meta.platform })
-          if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.seat })
+          if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.seat + (meta.class ? ` · ${meta.class}` : '') })
+          if (meta.price != null && meta.price !== '') cells.push({ label: t('reservations.price'), value: `${meta.price}${meta.priceCurrency ? ' ' + meta.priceCurrency : ''}` })
           if (meta.check_in_time) cells.push({ label: t('reservations.meta.checkIn'), value: formatTime(meta.check_in_time, locale, timeFormat) + (meta.check_in_end_time ? ` – ${formatTime(meta.check_in_end_time, locale, timeFormat)}` : '') })
           if (meta.check_out_time) cells.push({ label: t('reservations.meta.checkOut'), value: formatTime(meta.check_out_time, locale, timeFormat) })
           if (cells.length === 0) return null
@@ -470,6 +483,8 @@ interface ReservationsPanelProps {
   onAdd: () => void
   onImport?: () => void
   bookingImportAvailable?: boolean
+  onAirTrailImport?: () => void
+  airTrailAvailable?: boolean
   onEdit: (reservation: Reservation) => void
   onDelete: (id: number) => void
   onNavigateToFiles: () => void
@@ -477,7 +492,7 @@ interface ReservationsPanelProps {
   addManualKey?: string
 }
 
-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onAirTrailImport, airTrailAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
   const { t, locale } = useTranslation()
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
@@ -600,6 +615,21 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
                   <span className="hidden sm:inline">{t('reservations.import.cta')}</span>
                 </button>
               )}
+              {onAirTrailImport && airTrailAvailable && (
+                <button onClick={onAirTrailImport} className="bg-surface-secondary text-content" style={{
+                  appearance: 'none', border: '1px solid var(--border-primary)', cursor: 'pointer', fontFamily: 'inherit',
+                  display: 'inline-flex', alignItems: 'center', gap: 6,
+                  padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500, boxSizing: 'border-box',
+                  transition: 'opacity 0.15s ease',
+                }}
+                  onMouseEnter={e => e.currentTarget.style.opacity = '0.75'}
+                  onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+                  title={t('reservations.airtrail.title')}
+                >
+                  <Plane size={14} strokeWidth={2} />
+                  <span className="hidden sm:inline">{t('reservations.airtrail.cta')}</span>
+                </button>
+              )}
               <button onClick={onAdd} className="bg-accent text-accent-text" style={{
                 appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                 display: 'inline-flex', alignItems: 'center', gap: 6,

client/src/components/Planner/TransportModal.test.tsx

@@ -132,34 +132,37 @@ describe('TransportModal', () => {
 
   // ── Budget addon ─────────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-TRANSMODAL-011: budget section visible when addon is enabled', () => {
+  it('FE-PLANNER-TRANSMODAL-011: costs section (create expense) visible when budget addon is enabled', () => {
     seedStore(useAddonStore, {
       addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
       loaded: true,
     });
     render(<TransportModal {...defaultProps} />);
-    expect(screen.getByText(/^Price$/i)).toBeInTheDocument();
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Create expense/i })).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-TRANSMODAL-012: budget section not shown when addon is disabled', () => {
+  it('FE-PLANNER-TRANSMODAL-012: costs section not shown when budget addon is disabled', () => {
     render(<TransportModal {...defaultProps} />);
-    expect(screen.queryByPlaceholderText('0.00')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Create expense/i })).not.toBeInTheDocument();
   });
 
-  it('FE-PLANNER-TRANSMODAL-013: budget fields included in onSave when price is set', async () => {
+  it('FE-PLANNER-TRANSMODAL-013: create-expense saves the booking (no create_budget_entry) then opens the Costs editor', async () => {
     seedStore(useAddonStore, {
       addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
       loaded: true,
     });
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<TransportModal {...defaultProps} onSave={onSave} />);
+    const onSave = vi.fn().mockResolvedValue({ id: 42 });
+    const onOpenExpense = vi.fn();
+    render(<TransportModal {...defaultProps} onSave={onSave} onOpenExpense={onOpenExpense} />);
     await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'ICE Train');
-    await userEvent.type(screen.getByPlaceholderText('0.00'), '85');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Create expense/i }));
     await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ create_budget_entry: expect.objectContaining({ total_price: 85 }) })
+    // The legacy auto-budget mechanism is gone; the expense is created via the editor instead.
+    expect(onSave).not.toHaveBeenCalledWith(expect.objectContaining({ create_budget_entry: expect.anything() }));
+    await waitFor(() =>
+      expect(onOpenExpense).toHaveBeenCalledWith(
+        expect.objectContaining({ prefill: expect.objectContaining({ reservationId: 42 }) })
+      )
     );
   });
 

client/src/components/Planner/TransportModal.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, useMemo, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useParams } from 'react-router-dom'
-import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Paperclip, FileText, X, ExternalLink, Link2 } from 'lucide-react'
+import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Paperclip, FileText, X, ExternalLink, Link2, Plus, Trash2 } from 'lucide-react'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
@@ -10,10 +10,15 @@ import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
 import { useTripStore } from '../../store/tripStore'
 import { useAddonStore } from '../../store/addonStore'
-import { formatDate, splitReservationDateTime } from '../../utils/formatters'
+import { formatDate, splitReservationDateTime, resolveDayId } from '../../utils/formatters'
 import { openFile } from '../../utils/fileDownload'
 import apiClient from '../../api/client'
-import type { Day, Reservation, ReservationEndpoint, TripFile } from '../../types'
+import type { Day, Reservation, ReservationEndpoint, TripFile, BudgetItem } from '../../types'
+import { parseReservationMetadata, orderedEndpoints } from '../../utils/flightLegs'
+import { BookingCostsSection } from './BookingCostsSection'
+import type { BookingExpenseRequest } from './BookingCostsSection.types'
+import type { BookingReviewDraft } from './parsedItemToDraft'
+import { typeToCostCategory } from '@trek/shared'
 
 const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
@@ -23,7 +28,7 @@ interface EndpointPick {
   location?: LocationPoint
 }
 
-function endpointFromAirport(a: Airport, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
+function endpointFromAirport(a: Airport, role: 'from' | 'to' | 'stop', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
   return {
     role, sequence,
     name: a.city ? `${a.city} (${a.iata})` : a.name,
@@ -63,6 +68,25 @@ function locationFromEndpoint(e: ReservationEndpoint | undefined): LocationPoint
   return { name: e.name, lat: e.lat, lng: e.lng, address: null }
 }
 
+// ── Multi-leg flight waypoints ─────────────────────────────────────────────
+// A flight is an ordered list of airports. The origin has only a departure, the
+// destination only an arrival, and each intermediate stop has both — plus the
+// airline/flight number of the flight LEAVING it. N waypoints = N-1 legs. A
+// single-leg flight is just two waypoints, so it persists exactly as before.
+interface WaypointForm {
+  airport: Airport | null
+  arrDayId: string | number
+  arrTime: string
+  depDayId: string | number
+  depTime: string
+  airline: string
+  flight_number: string
+  seat: string
+}
+function emptyWaypoint(dayId: string | number = ''): WaypointForm {
+  return { airport: null, arrDayId: dayId, arrTime: '', depDayId: dayId, depTime: '', airline: '', flight_number: '', seat: '' }
+}
+
 const TYPE_OPTIONS = [
   { value: 'flight',          labelKey: 'reservations.type.flight',          Icon: Plane },
   { value: 'train',           labelKey: 'reservations.type.train',           Icon: Train },
@@ -85,8 +109,6 @@ const defaultForm = {
   arrival_time: '',
   confirmation_number: '',
   notes: '',
-  price: '',
-  budget_category: '',
   meta_airline: '',
   meta_flight_number: '',
   meta_train_number: '',
@@ -104,24 +126,29 @@ interface TransportModalProps {
   files?: TripFile[]
   onFileUpload?: (fd: FormData) => Promise<unknown>
   onFileDelete?: (fileId: number) => Promise<void>
+  onOpenExpense?: (req: BookingExpenseRequest) => void
+  // Pre-fill a brand-new transport booking from a parsed import item (review-
+  // before-save); like `reservation` for the form but stays in create mode.
+  prefill?: BookingReviewDraft | null
 }
 
-export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId, files = [], onFileUpload, onFileDelete }: TransportModalProps) {
+export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId, files = [], onFileUpload, onFileDelete, onOpenExpense, prefill = null }: TransportModalProps) {
   const { t, locale } = useTranslation()
   const toast = useToast()
   const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
   const budgetItems = useTripStore(s => s.budgetItems)
+  const deleteBudgetItem = useTripStore(s => s.deleteBudgetItem)
   const loadFiles = useTripStore(s => s.loadFiles)
-  const budgetCategories = useMemo(() => {
-    const cats = new Set<string>()
-    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [budgetItems])
   const { id: tripId } = useParams<{ id: string }>()
+  // Set right before submitting when the user clicked "create/edit expense", so
+  // the post-save handler knows to open the Costs editor for the saved booking.
+  const expenseIntentRef = useRef<{ editItem?: BudgetItem; create?: boolean } | null>(null)
   const [form, setForm] = useState({ ...defaultForm })
   const [isSaving, setIsSaving] = useState(false)
   const [fromPick, setFromPick] = useState<EndpointPick>({})
   const [toPick, setToPick] = useState<EndpointPick>({})
+  // Flight route as an ordered list of airports (origin .. stops .. destination).
+  const [waypoints, setWaypoints] = useState<WaypointForm[]>([emptyWaypoint(), emptyWaypoint()])
   const [uploadingFile, setUploadingFile] = useState(false)
   const [pendingFiles, setPendingFiles] = useState<File[]>([])
   const [showFilePicker, setShowFilePicker] = useState(false)
@@ -130,37 +157,75 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
 
   useEffect(() => {
     if (!isOpen) return
-    if (reservation) {
-      const meta = typeof reservation.metadata === 'string'
-        ? JSON.parse(reservation.metadata || '{}')
-        : (reservation.metadata || {})
-      const eps = reservation.endpoints || []
+    // Edit uses the saved `reservation`; a review-import populates from `prefill`.
+    // Either way the init reads the same fields — `reservation` still decides
+    // edit-vs-create at submit time.
+    const src = (reservation ?? prefill) as Reservation | null
+    // On a review-import, seed the booking's Files with the parsed source document.
+    setPendingFiles(!reservation && prefill?._sourceFiles ? prefill._sourceFiles : [])
+    if (src) {
+      const meta = typeof src.metadata === 'string'
+        ? JSON.parse(src.metadata || '{}')
+        : (src.metadata || {})
+      const eps = src.endpoints || []
       const from = eps.find(e => e.role === 'from')
       const to = eps.find(e => e.role === 'to')
-      const type = (TRANSPORT_TYPES as readonly string[]).includes(reservation.type)
-        ? reservation.type as TransportType
+      const type = (TRANSPORT_TYPES as readonly string[]).includes(src.type)
+        ? src.type as TransportType
         : 'flight'
       setForm({
-        title: reservation.title || '',
+        title: src.title || '',
         type,
-        status: reservation.status === 'confirmed' ? 'confirmed' : 'pending',
-        start_day_id: reservation.day_id ?? '',
-        end_day_id: reservation.end_day_id ?? '',
-        departure_time: splitReservationDateTime(reservation.reservation_time).time ?? '',
-        arrival_time: splitReservationDateTime(reservation.reservation_end_time).time ?? '',
-        confirmation_number: reservation.confirmation_number || '',
-        notes: reservation.notes || '',
+        status: src.status === 'confirmed' ? 'confirmed' : 'pending',
+        // For an edit, keep the saved day; for an imported prefill (no day_id), resolve it
+        // from the parsed pick-up/return date so the date isn't lost on save.
+        start_day_id: src.day_id ?? resolveDayId(days, splitReservationDateTime(src.reservation_time).date),
+        end_day_id: src.end_day_id ?? resolveDayId(days, splitReservationDateTime(src.reservation_end_time).date),
+        departure_time: splitReservationDateTime(src.reservation_time).time ?? '',
+        arrival_time: splitReservationDateTime(src.reservation_end_time).time ?? '',
+        confirmation_number: src.confirmation_number || '',
+        notes: src.notes || '',
         meta_airline: meta.airline || '',
         meta_flight_number: meta.flight_number || '',
         meta_train_number: meta.train_number || '',
         meta_platform: meta.platform || '',
         meta_seat: meta.seat || '',
-        price: meta.price || '',
-        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
       })
       if (type === 'flight') {
-        setFromPick({ airport: airportFromEndpoint(from) || undefined })
-        setToPick({ airport: airportFromEndpoint(to) || undefined })
+        const orderedEps = orderedEndpoints(src)
+        const metaLegs: any[] = Array.isArray(meta.legs) ? meta.legs : []
+        let wps: WaypointForm[]
+        if (orderedEps.length >= 2) {
+          wps = orderedEps.map((ep, i) => {
+            const legInto = metaLegs[i - 1] // leg arriving INTO waypoint i
+            const legOut = metaLegs[i] // leg departing FROM waypoint i
+            const isFirst = i === 0
+            const isLast = i === orderedEps.length - 1
+            return {
+              airport: airportFromEndpoint(ep),
+              arrDayId: legInto?.arr_day_id ?? (isLast ? (src.end_day_id ?? '') : ''),
+              arrTime: legInto?.arr_time ?? (!isFirst ? (ep.local_time ?? '') : ''),
+              depDayId: legOut?.dep_day_id ?? (isFirst ? (src.day_id ?? '') : ''),
+              depTime: legOut?.dep_time ?? (!isLast ? (ep.local_time ?? '') : ''),
+              airline: legOut?.airline ?? (isFirst ? (meta.airline ?? '') : ''),
+              flight_number: legOut?.flight_number ?? (isFirst ? (meta.flight_number ?? '') : ''),
+              seat: legOut?.seat ?? (isFirst ? (meta.seat ?? '') : ''),
+            }
+          })
+        } else {
+          // Legacy flight with no (or partial) endpoints — seed two waypoints.
+          const dep = emptyWaypoint(src.day_id ?? '')
+          dep.airport = airportFromEndpoint(from)
+          dep.depTime = splitReservationDateTime(src.reservation_time).time ?? ''
+          dep.airline = meta.airline ?? ''
+          dep.flight_number = meta.flight_number ?? ''
+          dep.seat = meta.seat ?? ''
+          const arr = emptyWaypoint(src.end_day_id ?? src.day_id ?? '')
+          arr.airport = airportFromEndpoint(to)
+          arr.arrTime = splitReservationDateTime(src.reservation_end_time).time ?? ''
+          wps = [dep, arr]
+        }
+        setWaypoints(wps)
       } else {
         setFromPick({ location: locationFromEndpoint(from) || undefined })
         setToPick({ location: locationFromEndpoint(to) || undefined })
@@ -169,13 +234,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       setForm({ ...defaultForm, start_day_id: selectedDayId ?? '', end_day_id: selectedDayId ?? '' })
       setFromPick({})
       setToPick({})
+      setWaypoints([emptyWaypoint(selectedDayId ?? ''), emptyWaypoint(selectedDayId ?? '')])
     }
-  }, [isOpen, reservation, selectedDayId, budgetItems])
+  }, [isOpen, reservation, prefill, selectedDayId, budgetItems])
 
   const set = (field: string, value: any) => setForm(prev => ({ ...prev, [field]: value }))
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault()
     if (!form.title.trim()) return
     setIsSaving(true)
     try {
@@ -187,47 +253,86 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         return day?.date ? `${day.date}T${time}` : time
       }
 
-      const metadata: Record<string, string> = {}
+      const dayDate = (id: string | number): string | null => days.find(d => d.id === Number(id))?.date ?? null
+      // Flight route as an ordered list of airports (origin .. stops .. destination).
+      const flightWps = form.type === 'flight' ? waypoints.filter(w => w.airport) : []
+      const firstWp = flightWps[0]
+      const lastWp = flightWps[flightWps.length - 1]
+      // Per-leg day-plan positions are owned by the day planner, not this form — keep
+      // them when re-saving so editing a flight doesn't reset where its legs sit.
+      const origLegs: any[] = reservation ? (parseReservationMetadata(reservation).legs || []) : []
+
+      const metadata: Record<string, any> = {}
       if (form.type === 'flight') {
-        if (form.meta_airline) metadata.airline = form.meta_airline
-        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
-        if (fromPick.airport) {
-          metadata.departure_airport = fromPick.airport.iata
-          metadata.departure_timezone = fromPick.airport.tz
+        // Top-level keys mirror the first/last leg so legacy readers keep working.
+        if (firstWp?.airline) metadata.airline = firstWp.airline
+        if (firstWp?.flight_number) metadata.flight_number = firstWp.flight_number
+        if (firstWp?.airport) {
+          metadata.departure_airport = firstWp.airport.iata
+          metadata.departure_timezone = firstWp.airport.tz
         }
-        if (toPick.airport) {
-          metadata.arrival_airport = toPick.airport.iata
-          metadata.arrival_timezone = toPick.airport.tz
+        if (lastWp?.airport) {
+          metadata.arrival_airport = lastWp.airport.iata
+          metadata.arrival_timezone = lastWp.airport.tz
         }
+        // Per-leg detail only for true multi-leg flights — a single-leg flight
+        // keeps the exact same (flat) metadata it had before this feature.
+        if (flightWps.length > 2) {
+          metadata.legs = flightWps.slice(0, -1).map((w, i) => {
+            const next = flightWps[i + 1]
+            return {
+              from: w.airport!.iata,
+              to: next.airport!.iata,
+              ...(w.airline ? { airline: w.airline } : {}),
+              ...(w.flight_number ? { flight_number: w.flight_number } : {}),
+              ...(w.seat ? { seat: w.seat } : {}),
+              dep_day_id: w.depDayId ? Number(w.depDayId) : null,
+              dep_time: w.depTime || null,
+              arr_day_id: next.arrDayId ? Number(next.arrDayId) : null,
+              arr_time: next.arrTime || null,
+              ...(origLegs[i]?.day_positions ? { day_positions: origLegs[i].day_positions } : {}),
+            }
+          })
+        }
+        if (firstWp?.seat) metadata.seat = firstWp.seat
       } else if (form.type === 'train') {
         if (form.meta_train_number) metadata.train_number = form.meta_train_number
         if (form.meta_platform) metadata.platform = form.meta_platform
         if (form.meta_seat) metadata.seat = form.meta_seat
       }
-      if (isBudgetEnabled) {
-        if (form.price) metadata.price = form.price
-        if (form.budget_category) metadata.budget_category = form.budget_category
-      }
-
       const startDate = startDay?.date ?? null
       const endDate = (endDay ?? startDay)?.date ?? null
       const endpoints: ReturnType<typeof endpointFromAirport>[] = []
       if (form.type === 'flight') {
-        if (fromPick.airport) endpoints.push(endpointFromAirport(fromPick.airport, 'from', 0, startDate, form.departure_time || null))
-        if (toPick.airport) endpoints.push(endpointFromAirport(toPick.airport, 'to', 1, endDate, form.arrival_time || null))
+        flightWps.forEach((w, i) => {
+          const isFirst = i === 0
+          const isLast = i === flightWps.length - 1
+          const role: 'from' | 'to' | 'stop' = isFirst ? 'from' : isLast ? 'to' : 'stop'
+          const dId = isLast ? w.arrDayId : w.depDayId
+          const time = isLast ? w.arrTime : w.depTime
+          endpoints.push(endpointFromAirport(w.airport!, role, i, dayDate(dId), time || null))
+        })
       } else {
         if (fromPick.location) endpoints.push(endpointFromLocation(fromPick.location, 'from', 0, startDate, form.departure_time || null))
         if (toPick.location) endpoints.push(endpointFromLocation(toPick.location, 'to', 1, endDate, form.arrival_time || null))
       }
 
+      // Flights derive their span from the first/last waypoint; other transports
+      // keep using the single departure/arrival form fields unchanged.
+      const flightDepDay = firstWp && firstWp.depDayId ? Number(firstWp.depDayId) : null
+      const flightArrDay = lastWp && lastWp.arrDayId ? Number(lastWp.arrDayId) : null
       const payload = {
         title: form.title,
         type: form.type,
         status: form.status,
-        day_id: form.start_day_id ? Number(form.start_day_id) : null,
-        end_day_id: form.end_day_id ? Number(form.end_day_id) : null,
-        reservation_time: buildTime(startDay, form.departure_time),
-        reservation_end_time: buildTime(endDay ?? startDay, form.arrival_time),
+        day_id: form.type === 'flight' ? flightDepDay : (form.start_day_id ? Number(form.start_day_id) : null),
+        end_day_id: form.type === 'flight' ? flightArrDay : (form.end_day_id ? Number(form.end_day_id) : null),
+        reservation_time: form.type === 'flight'
+          ? buildTime(days.find(d => d.id === flightDepDay), firstWp?.depTime || '')
+          : buildTime(startDay, form.departure_time),
+        reservation_end_time: form.type === 'flight'
+          ? buildTime(days.find(d => d.id === flightArrDay), lastWp?.arrTime || '')
+          : buildTime(endDay ?? startDay, form.arrival_time),
         location: null,
         confirmation_number: form.confirmation_number || null,
         notes: form.notes || null,
@@ -235,10 +340,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         endpoints,
         needs_review: false,
       }
-      if (isBudgetEnabled) {
-        (payload as any).create_budget_entry = form.price && parseFloat(form.price) > 0
-          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
-          : { total_price: 0 }
+      // Imported booking → auto-create the linked cost from the parsed price (what the
+      // old direct import did). Only on create (not edit) and only when there's a price.
+      if (!reservation && prefill && isBudgetEnabled) {
+        const pmeta = prefill.metadata && typeof prefill.metadata === 'object' ? (prefill.metadata as Record<string, unknown>) : {}
+        const price = Number(pmeta.price)
+        if (Number.isFinite(price) && price > 0) {
+          ;(payload as Record<string, unknown>).create_budget_entry = { total_price: price, category: typeToCostCategory(form.type) }
+        }
       }
       const saved = await onSave(payload)
       if (!reservation?.id && saved?.id && pendingFiles.length > 0 && onFileUpload) {
@@ -250,6 +359,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
           await onFileUpload(fd)
         }
       }
+      // The user asked to create/edit the linked expense — open the Costs editor
+      // for the now-saved booking. Gated on saved?.id so a failed save doesn't.
+      const intent = expenseIntentRef.current
+      expenseIntentRef.current = null
+      if (intent && onOpenExpense && saved?.id) {
+        if (intent.editItem) onOpenExpense({ editItem: intent.editItem })
+        else onOpenExpense({ prefill: { reservationId: saved.id, name: form.title, category: typeToCostCategory(form.type) } })
+      }
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : t('common.unknownError'))
     } finally {
@@ -257,6 +374,19 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
     }
   }
 
+  const handleCreateExpense = () => { expenseIntentRef.current = { create: true }; handleSubmit() }
+  const handleEditExpense = (item: BudgetItem) => { expenseIntentRef.current = { editItem: item }; handleSubmit() }
+  const handleRemoveExpense = async (item: BudgetItem) => {
+    try { await deleteBudgetItem(Number(tripId), item.id) } catch { toast.error(t('common.unknownError')) }
+  }
+
+  // On an import review (not yet saved), preview the parsed price as the cost that will be linked.
+  const prefillMeta = prefill?.metadata && typeof prefill.metadata === 'object' ? (prefill.metadata as Record<string, unknown>) : null
+  const prefillPrice = Number(prefillMeta?.price)
+  const pendingExpense = !reservation && Number.isFinite(prefillPrice) && prefillPrice > 0
+    ? { total_price: prefillPrice, currency: (prefillMeta?.priceCurrency as string | null) ?? null, category: typeToCostCategory(form.type) }
+    : null
+
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
@@ -348,100 +478,130 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
             placeholder={t('reservations.titlePlaceholder')} className={inputClass} />
         </div>
 
-        {/* From / To endpoints */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <div>
-            <label className={labelClass}>{t('reservations.meta.from')}</label>
-            {form.type === 'flight' ? (
-              <AirportSelect value={fromPick.airport || null} onChange={a => setFromPick({ airport: a || undefined })} />
-            ) : (
-              <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
-            )}
+        {form.type === 'flight' ? (
+          /* ── Flight route: ordered airports (origin · stops · destination) ── */
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <label className={labelClass}>{t('reservations.layover.route')}</label>
+            {waypoints.map((wp, i) => {
+              const isFirst = i === 0
+              const isLast = i === waypoints.length - 1
+              const updateWp = (patch: Partial<WaypointForm>) => setWaypoints(prev => prev.map((w, j) => (j === i ? { ...w, ...patch } : w)))
+              const roleLabel = isFirst ? t('reservations.meta.from') : isLast ? t('reservations.meta.to') : t('reservations.layover.stop')
+              return (
+                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <div className="bg-surface-card" style={{ border: '1px solid var(--border-primary)', borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <span className="text-content-faint" style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.03em', flexShrink: 0 }}>{roleLabel}</span>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <AirportSelect value={wp.airport} onChange={a => updateWp({ airport: a || null })} />
+                      </div>
+                      {!isFirst && !isLast && (
+                        <button type="button" onClick={() => setWaypoints(prev => prev.filter((_, j) => j !== i))} aria-label={t('common.delete')} className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 4, flexShrink: 0 }}>
+                          <Trash2 size={14} />
+                        </button>
+                      )}
+                    </div>
+                    {!isFirst && (
+                      <div style={{ display: 'flex', gap: 8 }}>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <label className={labelClass}>{t('reservations.arrivalDate')}</label>
+                          <CustomSelect value={wp.arrDayId} onChange={v => updateWp({ arrDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+                        </div>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <label className={labelClass}>{t('reservations.arrivalTime')}</label>
+                          <CustomTimePicker value={wp.arrTime} onChange={v => updateWp({ arrTime: v })} />
+                        </div>
+                        {wp.airport && (
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <label className={labelClass}>{t('reservations.meta.arrivalTimezone')}</label>
+                            <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>{wp.airport.tz}</div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {!isLast && (
+                      <>
+                        <div style={{ display: 'flex', gap: 8 }}>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <label className={labelClass}>{t('reservations.departureDate')}</label>
+                            <CustomSelect value={wp.depDayId} onChange={v => updateWp({ depDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+                          </div>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <label className={labelClass}>{t('reservations.departureTime')}</label>
+                            <CustomTimePicker value={wp.depTime} onChange={v => updateWp({ depTime: v })} />
+                          </div>
+                          {wp.airport && (
+                            <div style={{ flex: 1, minWidth: 0 }}>
+                              <label className={labelClass}>{t('reservations.meta.departureTimezone')}</label>
+                              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>{wp.airport.tz}</div>
+                            </div>
+                          )}
+                        </div>
+                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                          <div>
+                            <label className={labelClass}>{t('reservations.meta.airline')}</label>
+                            <input type="text" value={wp.airline} onChange={e => updateWp({ airline: e.target.value })} placeholder="Lufthansa" className={inputClass} />
+                          </div>
+                          <div>
+                            <label className={labelClass}>{t('reservations.meta.flightNumber')}</label>
+                            <input type="text" value={wp.flight_number} onChange={e => updateWp({ flight_number: e.target.value })} placeholder="LH 123" className={inputClass} />
+                          </div>
+                          <div>
+                            <label className={labelClass}>{t('reservations.meta.seat')}</label>
+                            <input type="text" value={wp.seat} onChange={e => updateWp({ seat: e.target.value })} placeholder="12A" className={inputClass} />
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  {!isLast && (
+                    <button type="button" onClick={() => setWaypoints(prev => [...prev.slice(0, i + 1), emptyWaypoint(prev[i]?.depDayId || ''), ...prev.slice(i + 1)])}
+                      className="text-content-faint hover:text-content-secondary" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '6px 10px', border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none', fontSize: 11, cursor: 'pointer', fontFamily: 'inherit' }}>
+                      <Plus size={12} /> {t('reservations.layover.addStop')}
+                    </button>
+                  )}
+                </div>
+              )
+            })}
           </div>
-          <div>
-            <label className={labelClass}>{t('reservations.meta.to')}</label>
-            {form.type === 'flight' ? (
-              <AirportSelect value={toPick.airport || null} onChange={a => setToPick({ airport: a || undefined })} />
-            ) : (
-              <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
-            )}
-          </div>
-        </div>
-
-        {/* Departure row */}
-        <div style={{ display: 'flex', gap: 8 }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label className={labelClass}>
-              {form.type === 'flight' ? t('reservations.departureDate') : form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}
-            </label>
-            <CustomSelect
-              value={form.start_day_id}
-              onChange={value => set('start_day_id', value)}
-              placeholder={t('dayplan.dayN', { n: '?' })}
-              options={dayOptions}
-              size="sm"
-            />
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label className={labelClass}>
-              {form.type === 'flight' ? t('reservations.departureTime') : form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}
-            </label>
-            <CustomTimePicker value={form.departure_time} onChange={v => set('departure_time', v)} />
-          </div>
-          {form.type === 'flight' && fromPick.airport && (
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label className={labelClass}>{t('reservations.meta.departureTimezone')}</label>
-              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
-                {fromPick.airport.tz}
+        ) : (
+          <>
+            {/* From / To endpoints (non-flight) */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div>
+                <label className={labelClass}>{t('reservations.meta.from')}</label>
+                <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
+              </div>
+              <div>
+                <label className={labelClass}>{t('reservations.meta.to')}</label>
+                <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
               </div>
             </div>
-          )}
-        </div>
 
-        {/* Arrival row */}
-        <div style={{ display: 'flex', gap: 8 }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label className={labelClass}>
-              {form.type === 'flight' ? t('reservations.arrivalDate') : form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}
-            </label>
-            <CustomSelect
-              value={form.end_day_id}
-              onChange={value => set('end_day_id', value)}
-              placeholder={t('dayplan.dayN', { n: '?' })}
-              options={dayOptions}
-              size="sm"
-            />
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label className={labelClass}>
-              {form.type === 'flight' ? t('reservations.arrivalTime') : form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}
-            </label>
-            <CustomTimePicker value={form.arrival_time} onChange={v => set('arrival_time', v)} />
-          </div>
-          {form.type === 'flight' && toPick.airport && (
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label className={labelClass}>{t('reservations.meta.arrivalTimezone')}</label>
-              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
-                {toPick.airport.tz}
+            {/* Departure row */}
+            <div style={{ display: 'flex', gap: 8 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label className={labelClass}>{form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}</label>
+                <CustomSelect value={form.start_day_id} onChange={value => set('start_day_id', value)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label className={labelClass}>{form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}</label>
+                <CustomTimePicker value={form.departure_time} onChange={v => set('departure_time', v)} />
               </div>
             </div>
-          )}
-        </div>
 
-        {/* Flight-specific fields */}
-        {form.type === 'flight' && (
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <div>
-              <label className={labelClass}>{t('reservations.meta.airline')}</label>
-              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
-                placeholder="Lufthansa" className={inputClass} />
+            {/* Arrival row */}
+            <div style={{ display: 'flex', gap: 8 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label className={labelClass}>{form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}</label>
+                <CustomSelect value={form.end_day_id} onChange={value => set('end_day_id', value)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label className={labelClass}>{form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}</label>
+                <CustomTimePicker value={form.arrival_time} onChange={v => set('arrival_time', v)} />
+              </div>
             </div>
-            <div>
-              <label className={labelClass}>{t('reservations.meta.flightNumber')}</label>
-              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
-                placeholder="LH 123" className={inputClass} />
-            </div>
-          </div>
+          </>
         )}
 
         {/* Train-specific fields */}
@@ -583,38 +743,15 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
           </div>
         </div>
 
-        {/* Price + Budget Category */}
+        {/* Costs — create / view the expense linked to this booking */}
         {isBudgetEnabled && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.price')}</label>
-                <input type="text" inputMode="decimal" value={form.price}
-                  onChange={e => { const v = e.target.value; if (v === '' || /^\d*[.,]?\d{0,2}$/.test(v)) set('price', v.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
-                  placeholder="0.00"
-                  className={inputClass} />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.budgetCategory')}</label>
-                <CustomSelect
-                  value={form.budget_category}
-                  onChange={v => set('budget_category', v)}
-                  options={[
-                    { value: '', label: t('reservations.budgetCategoryAuto') },
-                    ...budgetCategories.map(c => ({ value: c, label: c })),
-                  ]}
-                  placeholder={t('reservations.budgetCategoryAuto')}
-                  size="sm"
-                />
-              </div>
-            </div>
-            {form.price && parseFloat(form.price) > 0 && (
-              <div className="text-content-faint" style={{ fontSize: 11, marginTop: -4 }}>
-                {t('reservations.budgetHint')}
-              </div>
-            )}
-          </>
+          <BookingCostsSection
+            reservationId={reservation?.id ?? null}
+            pendingExpense={pendingExpense}
+            onCreate={handleCreateExpense}
+            onEdit={handleEditExpense}
+            onRemove={handleRemoveExpense}
+          />
         )}
 
       </form>

client/src/components/Planner/parsedItemToDraft.ts

@@ -0,0 +1,49 @@
+import type { BookingImportPreviewItem, Reservation, ReservationEndpoint } from '@trek/shared'
+
+/**
+ * A pre-fill draft for the reservation/transport edit modals built from a parsed
+ * booking-import item. Carries the normal reservation fields the modals read for
+ * their form, plus the import-only `_venue`/`_accommodation` the hotel path needs
+ * to suggest a place and a day range. It has no `id` — the modal stays in
+ * "create" mode and the user reviews/edits before it is ever persisted.
+ */
+export interface BookingReviewDraft extends Omit<Partial<Reservation>, 'metadata' | 'endpoints'> {
+  /** Type-specific extras (airline, flight_number, check_in_time, price, …) as an object. */
+  metadata?: Record<string, unknown> | null
+  endpoints?: ReservationEndpoint[]
+  /** Parsed venue (auto-created place candidate) — hotel/restaurant/event. */
+  _venue?: BookingImportPreviewItem['_venue']
+  /** Parsed check-in/out + confirmation — hotels only. */
+  _accommodation?: BookingImportPreviewItem['_accommodation']
+  /** The uploaded source file(s) the item was parsed from — attached to the booking on save. */
+  _sourceFiles?: File[]
+}
+
+/**
+ * Map a parsed booking item onto the shape the edit modals pre-fill from. Pure
+ * (no I/O). Transport items keep their geocoded endpoints; venue/accommodation
+ * ride along untouched so the hotel modal can match a place by name (or create
+ * one from the reviewed address on save).
+ */
+export function parsedItemToDraft(item: BookingImportPreviewItem): BookingReviewDraft {
+  return {
+    type: item.type,
+    title: item.title,
+    status: 'pending',
+    reservation_time: item.reservation_time ?? null,
+    reservation_end_time: item.reservation_end_time ?? null,
+    location: item.location ?? item._venue?.address ?? item._venue?.name ?? null,
+    confirmation_number: item.confirmation_number ?? null,
+    notes: null,
+    metadata: (item.metadata as Record<string, unknown> | undefined) ?? null,
+    endpoints: (item.endpoints ?? []) as ReservationEndpoint[],
+    _venue: item._venue,
+    _accommodation: item._accommodation,
+  }
+}
+
+/** Transport types route to the TransportModal; everything else to the ReservationModal. */
+const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
+export function isTransportItem(item: BookingImportPreviewItem): boolean {
+  return TRANSPORT_TYPES.has(item.type)
+}

client/src/components/Planner/placeGoogleMaps.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'
+
+const base = { name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945, google_place_id: null, google_ftid: null } as any
+
+describe('getGoogleMapsUrlForPlace', () => {
+  it('FE-PLACE-GMAPS-001: uses a valid ftid for a precise /place link', () => {
+    const url = getGoogleMapsUrlForPlace({ ...base, google_ftid: '0x47e66e2964e34e2d:0x8ddca9ee380ef7e0' })
+    expect(url).toBe('https://www.google.com/maps/place/?q=Eiffel%20Tower&ftid=0x47e66e2964e34e2d:0x8ddca9ee380ef7e0')
+  })
+
+  it('FE-PLACE-GMAPS-002: falls back to query_place_id when there is no ftid', () => {
+    const url = getGoogleMapsUrlForPlace({ ...base, google_place_id: 'ChIJ123' })
+    expect(url).toBe('https://www.google.com/maps/search/?api=1&query=Eiffel%20Tower&query_place_id=ChIJ123')
+  })
+
+  it('FE-PLACE-GMAPS-003: ignores a malformed/hostile ftid and falls through to the place id', () => {
+    const url = getGoogleMapsUrlForPlace({ ...base, google_ftid: '0xAB&q=evil', google_place_id: 'ChIJ123' })
+    expect(url).toBe('https://www.google.com/maps/search/?api=1&query=Eiffel%20Tower&query_place_id=ChIJ123')
+  })
+
+  it('FE-PLACE-GMAPS-004: uses the details URL when there is no ftid or place id', () => {
+    const url = getGoogleMapsUrlForPlace(base, 'https://maps.google.com/?cid=123')
+    expect(url).toBe('https://maps.google.com/?cid=123')
+  })
+
+  it('FE-PLACE-GMAPS-005: falls back to coordinates as a last resort', () => {
+    const url = getGoogleMapsUrlForPlace(base)
+    expect(url).toBe('https://www.google.com/maps/search/?api=1&query=48.8584,2.2945')
+  })
+
+  it('FE-PLACE-GMAPS-006: returns null for no place or no location', () => {
+    expect(getGoogleMapsUrlForPlace(null)).toBeNull()
+    expect(getGoogleMapsUrlForPlace({ ...base, lat: null, lng: null })).toBeNull()
+  })
+})

client/src/components/Planner/placeGoogleMaps.ts

@@ -0,0 +1,19 @@
+import type { AssignmentPlace, Place } from '../../types'
+
+type PlaceLike = Pick<Place | AssignmentPlace, 'name' | 'lat' | 'lng' | 'google_place_id' | 'google_ftid'>
+const GOOGLE_FTID_RE = /^0x[0-9a-f]+:0x[0-9a-f]+$/i
+
+export function getGoogleMapsUrlForPlace(place: PlaceLike | null | undefined, detailsUrl?: string | null): string | null {
+  if (!place) return null
+  const ftid = place.google_ftid?.trim()
+  if (ftid && GOOGLE_FTID_RE.test(ftid)) {
+    return `https://www.google.com/maps/place/?q=${encodeURIComponent(place.name)}&ftid=${ftid}`
+  }
+  const placeId = place.google_place_id?.trim()
+  if (placeId) {
+    return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(place.name)}&query_place_id=${encodeURIComponent(placeId)}`
+  }
+  if (detailsUrl) return detailsUrl
+  if (place.lat == null || place.lng == null) return null
+  return `https://www.google.com/maps/search/?api=1&query=${place.lat},${place.lng}`
+}

client/src/components/Planner/usePlacesSidebar.ts

@@ -7,7 +7,9 @@ import { useContextMenu } from '../shared/ContextMenu'
 import { placesApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
+import { useAuthStore } from '../../store/authStore'
 import type { Place, Category, Day, AssignmentsMap } from '../../types'
+import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'
 
 export interface PlacesSidebarProps {
   tripId: number
@@ -49,6 +51,8 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
   const loadTrip = useTripStore((s) => s.loadTrip)
   const can = useCanDo()
   const canEditPlaces = can('place_edit', trip)
+  // Places-API enrichment (#886) needs a Google Maps key; gate the toggle on it.
+  const canEnrichImport = useAuthStore((s) => s.hasMapsKey)
   const isNaverListImportEnabled = true
 
   const [fileImportOpen, setFileImportOpen] = useState(false)
@@ -56,6 +60,8 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
   const [sidebarDragOver, setSidebarDragOver] = useState(false)
   const sidebarDragCounter = useRef(0)
   const scrollContainerRef = useRef<HTMLDivElement | null>(null)
+  const placeRowRefs = useRef(new Map<number, HTMLDivElement>())
+  const lastAutoScrolledPlaceIdRef = useRef<number | null>(null)
   useLayoutEffect(() => {
     if (scrollContainerRef.current && initialScrollTop) {
       scrollContainerRef.current.scrollTop = initialScrollTop
@@ -94,6 +100,7 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
   const [listImportUrl, setListImportUrl] = useState('')
   const [listImportLoading, setListImportLoading] = useState(false)
   const [listImportProvider, setListImportProvider] = useState<'google' | 'naver'>('google')
+  const [listImportEnrich, setListImportEnrich] = useState(false)
   const availableListImportProviders: Array<'google' | 'naver'> = isNaverListImportEnabled ? ['google', 'naver'] : ['google']
   const hasMultipleListImportProviders = availableListImportProviders.length > 1
 
@@ -108,9 +115,10 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
     setListImportLoading(true)
     const provider = listImportProvider === 'naver' && isNaverListImportEnabled ? 'naver' : 'google'
     try {
+      const enrich = listImportEnrich && canEnrichImport
       const result = provider === 'google'
-        ? await placesApi.importGoogleList(tripId, listImportUrl.trim())
-        : await placesApi.importNaverList(tripId, listImportUrl.trim())
+        ? await placesApi.importGoogleList(tripId, listImportUrl.trim(), enrich)
+        : await placesApi.importNaverList(tripId, listImportUrl.trim(), enrich)
       await loadTrip(tripId)
       if (result.count === 0 && result.skipped > 0) {
         toast.warning(t('places.importAllSkipped'))
@@ -192,6 +200,28 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
     return true
   }), [places, filter, categoryFilters, search, plannedIds])
 
+  const registerPlaceRow = useCallback((placeId: number, element: HTMLDivElement | null) => {
+    if (element) {
+      placeRowRefs.current.set(placeId, element)
+    } else {
+      placeRowRefs.current.delete(placeId)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!props.selectedPlaceId) {
+      lastAutoScrolledPlaceIdRef.current = null
+      return
+    }
+    if (lastAutoScrolledPlaceIdRef.current === props.selectedPlaceId) return
+    if (!filtered.some(place => place.id === props.selectedPlaceId)) return
+
+    const selectedRow = placeRowRefs.current.get(props.selectedPlaceId)
+    if (!selectedRow) return
+    selectedRow.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    lastAutoScrolledPlaceIdRef.current = props.selectedPlaceId
+  }, [filtered, props.selectedPlaceId])
+
   const isAssignedToSelectedDay = (placeId) =>
     selectedDayId && (assignments[String(selectedDayId)] || []).some(a => a.place?.id === placeId)
 
@@ -205,11 +235,12 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
 
   const openContextMenu = useCallback((e: React.MouseEvent, place: Place) => {
     const selDayId = selectedDayIdRef.current
+    const googleMapsUrl = getGoogleMapsUrlForPlace(place)
     ctxMenu.open(e, [
       canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => props.onEditPlace(place) },
       selDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => props.onAssignToDay(place.id, selDayId) },
       place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
-      (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${(place as any).google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + (place as any).google_place_id : place.lat + ',' + place.lng}`, '_blank') },
+      googleMapsUrl && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(googleMapsUrl, '_blank') },
       { divider: true },
       canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => props.onDeletePlace(place.id) },
     ])
@@ -223,12 +254,13 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
     scrollContainerRef, onScrollTopChange,
     listImportOpen, setListImportOpen, listImportUrl, setListImportUrl,
     listImportLoading, listImportProvider, setListImportProvider,
+    listImportEnrich, setListImportEnrich, canEnrichImport,
     availableListImportProviders, hasMultipleListImportProviders, handleListImport,
     search, setSearch, filter, setFilter, categoryFilters, setCategoryFiltersLocal,
     selectMode, setSelectMode, selectedIds, setSelectedIds, pendingDeleteIds, setPendingDeleteIds,
     exitSelectMode, toggleSelected, toggleCategoryFilter, dayPickerPlace, setDayPickerPlace,
     catDropOpen, setCatDropOpen, mobileShowDays, setMobileShowDays,
-    hasTracks, plannedIds, filtered, isAssignedToSelectedDay, inDaySet, openContextMenu,
+    hasTracks, plannedIds, filtered, registerPlaceRow, isAssignedToSelectedDay, inDaySet, openContextMenu,
   }
 }
 

client/src/components/Settings/AccountTab.tsx

@@ -8,6 +8,7 @@ import { authApi, adminApi } from '../../api/client'
 import { getApiErrorMessage } from '../../types'
 import type { UserWithOidc } from '../../types'
 import Section from './Section'
+import PasskeysSection from './PasskeysSection'
 
 const MFA_BACKUP_SESSION_KEY = 'trek_mfa_backup_codes_pending'
 
@@ -395,6 +396,9 @@ export default function AccountTab(): React.ReactElement {
           </div>
         </div>
 
+        {/* Passkeys */}
+        <PasskeysSection demoMode={demoMode} />
+
         {/* Avatar */}
         <div className="flex items-center gap-4">
           <div style={{ position: 'relative', flexShrink: 0 }}>

client/src/components/Settings/AirTrailConnectionSection.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react'
+import { Plane, Save } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { airtrailApi } from '../../api/client'
+import Section from './Section'
+import ToggleSwitch from './ToggleSwitch'
+
+/**
+ * Settings → Integrations → AirTrail. Per-user connection to a self-hosted
+ * AirTrail instance (URL + Bearer API key). Mirrors the photo-provider (Immich)
+ * connection layout: stacked fields, a toggle, then Save / Test-connection with
+ * a status badge. The key is stored encrypted and never prefilled.
+ */
+export default function AirTrailConnectionSection(): React.ReactElement {
+  const { t } = useTranslation()
+  const toast = useToast()
+
+  const [url, setUrl] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [allowInsecureTls, setAllowInsecureTls] = useState(false)
+  const [writeEnabled, setWriteEnabled] = useState(false)
+  const [connected, setConnected] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [testing, setTesting] = useState(false)
+
+  useEffect(() => {
+    airtrailApi
+      .getSettings()
+      .then(d => {
+        setUrl(d.url || '')
+        setAllowInsecureTls(!!d.allowInsecureTls)
+        setWriteEnabled(!!d.writeEnabled)
+        setConnected(!!d.connected)
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [])
+
+  // Send the key only when the user typed a new one — never prefilled, so a blank
+  // field means "keep the stored key".
+  const keyPayload = (): { apiKey?: string } => {
+    const k = apiKey.trim()
+    return k ? { apiKey: k } : {}
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const d = await airtrailApi.saveSettings({ url: url.trim(), allowInsecureTls, writeEnabled, ...keyPayload() })
+      const status = await airtrailApi.status().catch(() => ({ connected: false }))
+      setConnected(!!status.connected)
+      setApiKey('')
+      if (d?.warning) toast.warning(d.warning)
+      else toast.success(t('settings.airtrail.toast.saved'))
+    } catch (err: any) {
+      toast.error(err?.response?.data?.error || t('settings.airtrail.toast.saveError'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleTest = async () => {
+    setTesting(true)
+    try {
+      const d = await airtrailApi.test({ url: url.trim(), allowInsecureTls, ...keyPayload() })
+      setConnected(!!d.connected)
+      if (d.connected) toast.success(t('settings.airtrail.test.success', { count: d.flightCount ?? 0 }))
+      else toast.error(d.error || t('settings.airtrail.test.failed'))
+    } catch {
+      toast.error(t('settings.airtrail.test.failed'))
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const canSave = !!url.trim() && (connected || !!apiKey.trim())
+
+  return (
+    <Section title={t('settings.airtrail.title')} icon={Plane}>
+      <div className="space-y-3">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.airtrail.url')}</label>
+          <input
+            type="url"
+            value={url}
+            onChange={e => setUrl(e.target.value)}
+            placeholder="https://airtrail.example.com"
+            className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.airtrail.apiKey')}</label>
+          <input
+            type="password"
+            value={apiKey}
+            onChange={e => setApiKey(e.target.value)}
+            autoComplete="off"
+            placeholder={connected && !apiKey ? '••••••••' : t('settings.airtrail.apiKeyPlaceholder')}
+            className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300"
+          />
+          <p className="mt-1 text-xs text-slate-500">{t('settings.airtrail.apiKeyHint')}</p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <ToggleSwitch on={allowInsecureTls} onToggle={() => setAllowInsecureTls(v => !v)} />
+          <span className="text-sm font-medium text-slate-700">{t('settings.airtrail.allowInsecureTls')}</span>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-3">
+            <ToggleSwitch on={writeEnabled} onToggle={() => setWriteEnabled(v => !v)} />
+            <span className="text-sm font-medium text-slate-700">{t('settings.airtrail.writeBack')}</span>
+          </div>
+          <p className="mt-1 text-xs text-slate-500">{t('settings.airtrail.writeBackHint')}</p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3">
+          <button
+            onClick={handleSave}
+            disabled={saving || loading || !canSave}
+            className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+          >
+            <Save className="w-4 h-4" /> {t('common.save')}
+          </button>
+          <button
+            onClick={handleTest}
+            disabled={testing || loading || !url.trim()}
+            className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50"
+          >
+            {testing ? (
+              <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
+            ) : (
+              <Plane className="w-4 h-4" />
+            )}
+            {t('settings.airtrail.test.button')}
+          </button>
+          {connected ? (
+            <span className="basis-full sm:basis-auto text-xs font-medium text-green-600 flex items-center gap-1">
+              <span className="w-2 h-2 bg-green-500 rounded-full" />
+              {t('settings.airtrail.connected')}
+            </span>
+          ) : (
+            <span className="basis-full sm:basis-auto text-xs font-medium text-slate-400 flex items-center gap-1">
+              <span className="w-2 h-2 bg-slate-300 rounded-full" />
+              {t('settings.airtrail.notConnected')}
+            </span>
+          )}
+        </div>
+
+        <p className="text-xs text-slate-500">{t('settings.airtrail.hint')}</p>
+      </div>
+    </Section>
+  )
+}

client/src/components/Settings/DisplaySettingsTab.test.tsx

@@ -150,6 +150,22 @@ describe('DisplaySettingsTab', () => {
     expect(updateSetting).toHaveBeenCalledWith('temperature_unit', 'fahrenheit');
   });
 
+  it('FE-COMP-DISPLAY-028: metric distance button is active by default', () => {
+    seedStore(useSettingsStore, { settings: { temperature_unit: 'celsius' } });
+    render(<DisplaySettingsTab />);
+    const metricBtn = screen.getByText('km Metric').closest('button')!;
+    expect(metricBtn.style.border).toContain('var(--text-primary)');
+  });
+
+  it('FE-COMP-DISPLAY-029: clicking imperial distance calls updateSetting with imperial', async () => {
+    const user = userEvent.setup();
+    const updateSetting = vi.fn().mockResolvedValue(undefined);
+    seedStore(useSettingsStore, { settings: buildSettings({ distance_unit: 'metric' }), updateSetting });
+    render(<DisplaySettingsTab />);
+    await user.click(screen.getByText('mi Imperial'));
+    expect(updateSetting).toHaveBeenCalledWith('distance_unit', 'imperial');
+  });
+
   it('FE-COMP-DISPLAY-020: clicking 24h time format calls updateSetting with 24h', async () => {
     const user = userEvent.setup();
     const updateSetting = vi.fn().mockResolvedValue(undefined);

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -6,12 +6,14 @@ import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
 import Section from './Section'
+import type { DistanceUnit } from '../../types'
 
 export default function DisplaySettingsTab(): React.ReactElement {
   const { settings, updateSetting } = useSettingsStore()
   const { t } = useTranslation()
   const toast = useToast()
   const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || 'celsius')
+  const [distanceUnit, setDistanceUnit] = useState<DistanceUnit>(settings.distance_unit || 'metric')
   const [langOpen, setLangOpen] = useState(false)
   const langDropdownRef = useRef<HTMLDivElement | null>(null)
 
@@ -28,6 +30,10 @@ export default function DisplaySettingsTab(): React.ReactElement {
     setTempUnit(settings.temperature_unit || 'celsius')
   }, [settings.temperature_unit])
 
+  useEffect(() => {
+    setDistanceUnit(settings.distance_unit || 'metric')
+  }, [settings.distance_unit])
+
   return (
     <Section title={t('settings.display')} icon={Palette}>
       {/* Display currency */}
@@ -200,6 +206,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
         </div>
       </div>
 
+      {/* Distance */}
+      <div>
+        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.distance')}</label>
+        <div className="flex gap-3">
+          {([
+            { value: 'metric', label: 'km Metric' },
+            { value: 'imperial', label: 'mi Imperial' },
+          ] as const).map(opt => (
+            <button
+              key={opt.value}
+              onClick={async () => {
+                setDistanceUnit(opt.value)
+                try { await updateSetting('distance_unit', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: distanceUnit === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: distanceUnit === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
       {/* Time Format */}
       <div>
         <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.timeFormat')}</label>
@@ -262,6 +299,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
         <p className="text-xs mt-1 text-content-faint">{t('settings.bookingLabelsHint')}</p>
       </div>
 
+      {/* Explore places on the map (POI category pill) */}
+      <div>
+        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.mapPoiPill')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: true, label: t('settings.on') || 'On' },
+            { value: false, label: t('settings.off') || 'Off' },
+          ].map(opt => (
+            <button
+              key={String(opt.value)}
+              onClick={async () => {
+                try { await updateSetting('map_poi_pill_enabled', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (settings.map_poi_pill_enabled !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.map_poi_pill_enabled !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+        <p className="text-xs mt-1 text-content-faint">{t('settings.mapPoiPillHint')}</p>
+      </div>
+
       {/* Blur Booking Codes */}
       <div>
         <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.blurBookingCodes')}</label>
@@ -291,6 +359,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
           ))}
         </div>
       </div>
+
+      {/* Optimize route from accommodation */}
+      <div>
+        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.optimizeFromAccommodation')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: true, label: t('settings.on') || 'On' },
+            { value: false, label: t('settings.off') || 'Off' },
+          ].map(opt => (
+            <button
+              key={String(opt.value)}
+              onClick={async () => {
+                try { await updateSetting('optimize_from_accommodation', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (settings.optimize_from_accommodation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.optimize_from_accommodation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+        <p className="text-xs mt-1 text-content-faint">{t('settings.optimizeFromAccommodationHint')}</p>
+      </div>
     </Section>
   )
 }

client/src/components/Settings/IntegrationsTab.tsx

@@ -6,6 +6,8 @@ import { Trash2, Copy, Terminal, Plus, Check, KeyRound, ChevronDown, ChevronRigh
 import { authApi, oauthApi } from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
 import PhotoProvidersSection from './PhotoProvidersSection'
+import AirTrailConnectionSection from './AirTrailConnectionSection'
+import LlmConnectionSection from './LlmConnectionSection'
 import { ALL_SCOPES } from '../../api/oauthScopes'
 import ScopeGroupPicker from '../OAuth/ScopeGroupPicker'
 
@@ -97,6 +99,8 @@ export default function IntegrationsTab(): React.ReactElement {
   return (
     <>
       <PhotoProvidersSection />
+      {S.airtrailEnabled && <AirTrailConnectionSection />}
+      {S.llmEnabled && <LlmConnectionSection />}
       {S.mcpEnabled && <IntegrationsMcpSection {...S} />}
       <McpTokenModals {...S} />
       <OAuthClientModals {...S} />
@@ -109,6 +113,8 @@ function useIntegrations() {
   const toast = useToast()
   const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
   const mcpEnabled = addonEnabled('mcp')
+  const airtrailEnabled = addonEnabled('airtrail')
+  const llmEnabled = addonEnabled('llm_parsing')
 
   useEffect(() => {
     loadAddons()
@@ -289,7 +295,7 @@ function useIntegrations() {
 
 
   return {
-    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
+    t, locale, toast, mcpEnabled, airtrailEnabled, llmEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
   }
 }
 

client/src/components/Settings/LlmConnectionSection.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react'
+import { Sparkles, Save } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { useSettingsStore } from '../../store/settingsStore'
+import type { Settings } from '../../types'
+import Section from './Section'
+import ToggleSwitch from './ToggleSwitch'
+import CustomSelect from '../shared/CustomSelect'
+
+type Provider = NonNullable<Settings['llm_provider']>
+
+/**
+ * Settings → Integrations → AI parsing. Per-user model used to extract bookings
+ * from uploaded files. It only takes effect when the admin has not configured an
+ * instance-wide model on the addon — the server resolves the admin config first.
+ * The API key is stored encrypted and never prefilled: a blank field keeps the
+ * stored key (mirrors the AirTrail connection layout).
+ */
+export default function LlmConnectionSection(): React.ReactElement {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const settings = useSettingsStore(s => s.settings)
+  const isLoaded = useSettingsStore(s => s.isLoaded)
+  const updateSettings = useSettingsStore(s => s.updateSettings)
+
+  const [provider, setProvider] = useState<Provider>('local')
+  const [model, setModel] = useState('')
+  const [baseUrl, setBaseUrl] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [multimodal, setMultimodal] = useState(false)
+  const [hasStoredKey, setHasStoredKey] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  // Hydrate from the loaded settings. llm_api_key arrives masked, so we only use
+  // its presence to drive the placeholder — never the value itself.
+  useEffect(() => {
+    if (!isLoaded) return
+    setProvider(settings.llm_provider || 'local')
+    setModel(settings.llm_model || '')
+    setBaseUrl(settings.llm_base_url || '')
+    setMultimodal(settings.llm_multimodal === true)
+    setHasStoredKey(!!settings.llm_api_key)
+  }, [isLoaded, settings.llm_provider, settings.llm_model, settings.llm_base_url, settings.llm_multimodal, settings.llm_api_key])
+
+  const needsKey = provider !== 'local'
+  const showBaseUrl = provider === 'local' || provider === 'openai'
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const payload: Partial<Settings> = {
+        llm_provider: provider,
+        llm_model: model.trim(),
+        llm_base_url: showBaseUrl ? baseUrl.trim() : '',
+        llm_multimodal: multimodal,
+      }
+      // Send the key only when the user typed a new one — a blank field means
+      // "keep the stored key".
+      const key = apiKey.trim()
+      if (key) payload.llm_api_key = key
+      await updateSettings(payload)
+      setApiKey('')
+      if (key) setHasStoredKey(true)
+      toast.success(t('settings.aiParsing.toast.saved'))
+    } catch {
+      toast.error(t('settings.aiParsing.toast.saveError'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Section title={t('settings.aiParsing.title')} icon={Sparkles}>
+      <div className="space-y-3">
+        <p className="text-xs text-content-secondary">{t('settings.aiParsing.hint')}</p>
+
+        <div>
+          <label className="block text-sm font-medium mb-1.5 text-content-secondary">{t('settings.aiParsing.provider')}</label>
+          <CustomSelect
+            value={provider}
+            onChange={v => setProvider(v as Provider)}
+            options={[
+              { value: 'local', label: t('settings.aiParsing.providerLocal') },
+              { value: 'openai', label: t('settings.aiParsing.providerOpenai') },
+              { value: 'anthropic', label: t('settings.aiParsing.providerAnthropic') },
+            ]}
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1.5 text-content-secondary">{t('settings.aiParsing.model')}</label>
+          <input
+            type="text"
+            autoComplete="off"
+            value={model}
+            onChange={e => setModel(e.target.value)}
+            placeholder="qwen3:8b"
+            className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 border-edge bg-surface-secondary text-content"
+          />
+        </div>
+
+        {showBaseUrl && (
+          <div>
+            <label className="block text-sm font-medium mb-1.5 text-content-secondary">{t('settings.aiParsing.baseUrl')}</label>
+            <input
+              type="url"
+              autoComplete="off"
+              value={baseUrl}
+              onChange={e => setBaseUrl(e.target.value)}
+              placeholder="http://localhost:11434"
+              className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 border-edge bg-surface-secondary text-content"
+            />
+            <p className="mt-1 text-xs text-content-faint">{t('settings.aiParsing.baseUrlHint')}</p>
+          </div>
+        )}
+
+        {needsKey && (
+          <div>
+            <label className="block text-sm font-medium mb-1.5 text-content-secondary">{t('settings.aiParsing.apiKey')}</label>
+            <input
+              type="password"
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              autoComplete="off"
+              placeholder={hasStoredKey && !apiKey ? '••••••••' : t('settings.aiParsing.apiKey')}
+              className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 border-edge bg-surface-secondary text-content"
+            />
+            <p className="mt-1 text-xs text-content-faint">{t('settings.aiParsing.apiKeyHint')}</p>
+          </div>
+        )}
+
+        <div>
+          <div className="flex items-center gap-3">
+            <ToggleSwitch on={multimodal} onToggle={() => setMultimodal(v => !v)} />
+            <span className="text-sm font-medium text-content-secondary">{t('settings.aiParsing.multimodal')}</span>
+          </div>
+          <p className="mt-1 text-xs text-content-faint">{t('settings.aiParsing.multimodalHint')}</p>
+        </div>
+
+        <button
+          onClick={handleSave}
+          disabled={saving || !isLoaded}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50"
+        >
+          <Save className="w-4 h-4" /> {t('common.save')}
+        </button>
+      </div>
+    </Section>
+  )
+}

client/src/components/Settings/MapSettingsTab.tsx

@@ -1,14 +1,22 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Map, Save, Layers, Box, ChevronDown, Check } from 'lucide-react'
+import { Map, Save, Layers, Box, ChevronDown, Check, Globe2 } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
-import MapboxPreview from './MapboxPreview'
+import GlMapPreview from './MapboxPreview'
 import Section from './Section'
 import ToggleSwitch from './ToggleSwitch'
 import type { Place } from '../../types'
+import {
+  MAPBOX_DEFAULT_STYLE,
+  defaultStyleForProvider,
+  getStylePresets,
+  isOpenFreeMapStyle,
+  normalizeStyleForProvider,
+  type GlMapProvider,
+} from '../Map/glProviders'
 
 interface MapPreset {
   name: string
@@ -23,25 +31,6 @@ const MAP_PRESETS: MapPreset[] = [
   { name: 'Stadia Smooth', url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png' },
 ]
 
-interface StylePreset {
-  name: string
-  url: string
-  tags: string[]
-}
-
-const MAPBOX_STYLE_PRESETS: StylePreset[] = [
-  { name: 'Mapbox Standard',          url: 'mapbox://styles/mapbox/standard',            tags: ['3D', 'Apple-like'] },
-  { name: 'Standard Satellite',       url: 'mapbox://styles/mapbox/standard-satellite',  tags: ['3D', 'Satellite'] },
-  { name: 'Streets',                  url: 'mapbox://styles/mapbox/streets-v12',         tags: ['3D', 'Classic'] },
-  { name: 'Outdoors',                 url: 'mapbox://styles/mapbox/outdoors-v12',        tags: ['3D', 'Terrain'] },
-  { name: 'Light',                    url: 'mapbox://styles/mapbox/light-v11',           tags: ['3D', 'Minimal'] },
-  { name: 'Dark',                     url: 'mapbox://styles/mapbox/dark-v11',            tags: ['3D', 'Dark'] },
-  { name: 'Satellite',                url: 'mapbox://styles/mapbox/satellite-v9',        tags: ['3D', 'Satellite'] },
-  { name: 'Satellite Streets',        url: 'mapbox://styles/mapbox/satellite-streets-v12', tags: ['3D', 'Satellite'] },
-  { name: 'Navigation Day',           url: 'mapbox://styles/mapbox/navigation-day-v1',   tags: ['3D', 'Apple-like'] },
-  { name: 'Navigation Night',         url: 'mapbox://styles/mapbox/navigation-night-v1', tags: ['3D', 'Dark'] },
-]
-
 // Tag → chip color mapping. Keeps the dropdown readable at a glance so a
 // user scanning the list can spot 3D / Satellite / Apple-like styles.
 const TAG_STYLES: Record<string, string> = {
@@ -59,6 +48,7 @@ const TAG_STYLES: Record<string, string> = {
   'Classic': 'bg-stone-100 text-stone-700 dark:bg-stone-800 dark:text-stone-300',
   'Hybrid': 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300',
   'No labels': 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
+  'OpenFreeMap': 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
 }
 
 function TagChip({ tag }: { tag: string }) {
@@ -70,10 +60,11 @@ function TagChip({ tag }: { tag: string }) {
   )
 }
 
-function StyleDropdown({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+function StyleDropdown({ value, provider, onChange }: { value: string; provider: GlMapProvider; onChange: (v: string) => void }) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
+  const presets = getStylePresets(provider)
 
   useEffect(() => {
     if (!open) return
@@ -84,7 +75,10 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
     return () => document.removeEventListener('mousedown', onDoc)
   }, [open])
 
-  const selected = MAPBOX_STYLE_PRESETS.find(p => p.url === value)
+  const selected = presets.find(p => p.url === value)
+  const placeholder = provider === 'maplibre-gl'
+    ? t('settings.mapOpenFreeMapStylePlaceholder')
+    : t('settings.mapStylePlaceholder')
 
   return (
     <div ref={ref} className="relative">
@@ -95,11 +89,11 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
       >
         <span className="flex items-center gap-2 min-w-0">
           <span className="text-slate-900 dark:text-white truncate">
-            {selected ? selected.name : t('settings.mapStylePlaceholder')}
+            {selected ? selected.name : placeholder}
           </span>
           {selected && (
             <span className="flex items-center gap-1 flex-shrink-0">
-              {selected.tags.map(t => <TagChip key={t} tag={t} />)}
+              {(selected.tags || []).map(t => <TagChip key={t} tag={t} />)}
             </span>
           )}
         </span>
@@ -107,7 +101,7 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
       </button>
       {open && (
         <div className="absolute z-20 mt-1 w-full max-h-80 overflow-auto rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg py-1">
-          {MAPBOX_STYLE_PRESETS.map(preset => {
+          {presets.map(preset => {
             const isActive = preset.url === value
             return (
               <button
@@ -118,7 +112,7 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
               >
                 <span className="flex items-center gap-2 flex-wrap">
                   <span className="text-slate-900 dark:text-white font-medium">{preset.name}</span>
-                  {preset.tags.map(t => <TagChip key={t} tag={t} />)}
+                  {(preset.tags || []).map(t => <TagChip key={t} tag={t} />)}
                 </span>
                 {isActive && <Check size={14} className="flex-shrink-0 text-slate-900 dark:text-white" />}
               </button>
@@ -130,17 +124,34 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
   )
 }
 
-type Provider = 'leaflet' | 'mapbox-gl'
+type Provider = 'leaflet' | GlMapProvider
+
+function normalizeProvider(value: unknown): Provider {
+  return value === 'mapbox-gl' || value === 'maplibre-gl' ? value : 'leaflet'
+}
+
+function styleForProvider(provider: Provider, style?: string | null): string {
+  if (provider === 'leaflet') return style || MAPBOX_DEFAULT_STYLE
+  if (provider === 'mapbox-gl' && isOpenFreeMapStyle(style)) return MAPBOX_DEFAULT_STYLE
+  return normalizeStyleForProvider(provider, style)
+}
+
+// Each GL provider has its own style slot, so toggling providers never clobbers the
+// other one's style. Leaflet/Mapbox use mapbox_style; MapLibre uses maplibre_style.
+function slotStyle(provider: Provider, s: { mapbox_style?: string; maplibre_style?: string }): string | undefined {
+  return provider === 'maplibre-gl' ? s.maplibre_style : s.mapbox_style
+}
 
 export default function MapSettingsTab(): React.ReactElement {
   const { settings, updateSettings } = useSettingsStore()
   const { t } = useTranslation()
   const toast = useToast()
+  const initialProvider = normalizeProvider(settings.map_provider)
   const [saving, setSaving] = useState(false)
-  const [provider, setProvider] = useState<Provider>((settings.map_provider as Provider) || 'leaflet')
+  const [provider, setProvider] = useState<Provider>(initialProvider)
   const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
   const [mapboxToken, setMapboxToken] = useState<string>(settings.mapbox_access_token || '')
-  const [mapboxStyle, setMapboxStyle] = useState<string>(settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const [mapboxStyle, setMapboxStyle] = useState<string>(styleForProvider(initialProvider, slotStyle(initialProvider, settings)))
   const [mapbox3d, setMapbox3d] = useState<boolean>(settings.mapbox_3d_enabled !== false)
   const [mapboxQuality, setMapboxQuality] = useState<boolean>(settings.mapbox_quality_mode === true)
   const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
@@ -148,10 +159,11 @@ export default function MapSettingsTab(): React.ReactElement {
   const [defaultZoom, setDefaultZoom] = useState<number | string>(settings.default_zoom || 10)
 
   useEffect(() => {
-    setProvider((settings.map_provider as Provider) || 'leaflet')
+    const nextProvider = normalizeProvider(settings.map_provider)
+    setProvider(nextProvider)
     setMapTileUrl(settings.map_tile_url || '')
     setMapboxToken(settings.mapbox_access_token || '')
-    setMapboxStyle(settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+    setMapboxStyle(styleForProvider(nextProvider, slotStyle(nextProvider, settings)))
     setMapbox3d(settings.mapbox_3d_enabled !== false)
     setMapboxQuality(settings.mapbox_quality_mode === true)
     setDefaultLat(settings.default_lat || 48.8566)
@@ -186,11 +198,15 @@ export default function MapSettingsTab(): React.ReactElement {
   const saveMapSettings = async (): Promise<void> => {
     setSaving(true)
     try {
+      const glStyle = provider === 'leaflet' ? mapboxStyle : normalizeStyleForProvider(provider, mapboxStyle)
+      setMapboxStyle(glStyle)
+      // Save into the active provider's own slot so the other provider's style survives.
+      const stylePatch = provider === 'maplibre-gl' ? { maplibre_style: glStyle } : { mapbox_style: glStyle }
       await updateSettings({
         map_provider: provider,
         map_tile_url: mapTileUrl,
         mapbox_access_token: mapboxToken,
-        mapbox_style: mapboxStyle,
+        ...stylePatch,
         mapbox_3d_enabled: mapbox3d,
         mapbox_quality_mode: mapboxQuality,
         default_lat: parseFloat(String(defaultLat)),
@@ -208,16 +224,20 @@ export default function MapSettingsTab(): React.ReactElement {
   // 3D is available on every style now — pure satellite uses the
   // mapbox-streets-v8 tileset as a fallback building source.
   const supports3d = true
+  const changeProvider = (nextProvider: Provider) => {
+    setProvider(nextProvider)
+    if (nextProvider !== 'leaflet') setMapboxStyle(styleForProvider(nextProvider, mapboxStyle))
+  }
 
   return (
     <Section title={t('settings.map')} icon={Map}>
       {/* Provider picker — big cards so the choice is obvious */}
       <div>
         <label className="block text-sm font-medium text-slate-700 mb-2">{t('settings.mapProvider')}</label>
-        <div className="grid grid-cols-2 gap-2">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
           <button
             type="button"
-            onClick={() => setProvider('leaflet')}
+            onClick={() => changeProvider('leaflet')}
             className={`flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
               provider === 'leaflet'
                 ? 'border-slate-900 bg-slate-50 dark:bg-slate-800 dark:border-slate-200'
@@ -232,7 +252,7 @@ export default function MapSettingsTab(): React.ReactElement {
           </button>
           <button
             type="button"
-            onClick={() => setProvider('mapbox-gl')}
+            onClick={() => changeProvider('mapbox-gl')}
             className={`relative flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
               provider === 'mapbox-gl'
                 ? 'border-slate-900 bg-slate-50 dark:bg-slate-800 dark:border-slate-200'
@@ -252,6 +272,24 @@ export default function MapSettingsTab(): React.ReactElement {
               {t('settings.mapExperimental')}
             </span>
           </button>
+          <button
+            type="button"
+            onClick={() => changeProvider('maplibre-gl')}
+            className={`relative flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
+              provider === 'maplibre-gl'
+                ? 'border-slate-900 bg-slate-50 dark:bg-slate-800 dark:border-slate-200'
+                : 'border-slate-200 hover:border-slate-400 dark:border-slate-700'
+            }`}
+          >
+            <Globe2 size={18} className="mt-0.5 flex-shrink-0 text-slate-700 dark:text-slate-300" />
+            <div className="min-w-0">
+              <div className="text-sm font-medium text-slate-900 dark:text-white">
+                <span className="sm:hidden">MapLibre</span>
+                <span className="hidden sm:inline">MapLibre GL</span>
+              </div>
+              <div className="hidden sm:block text-xs text-slate-500 mt-0.5">{t('settings.mapMapLibreSubtitle')}</div>
+            </div>
+          </button>
         </div>
         <p className="text-xs text-slate-400 mt-2">
           {t('settings.mapProviderHint')}
@@ -281,9 +319,10 @@ export default function MapSettingsTab(): React.ReactElement {
         </div>
       )}
 
-      {/* Mapbox GL settings */}
-      {provider === 'mapbox-gl' && (
+      {/* GL settings */}
+      {provider !== 'leaflet' && (
         <div className="space-y-3">
+          {provider === 'mapbox-gl' && (
           <div>
             <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapMapboxToken')}</label>
             <input
@@ -300,24 +339,27 @@ export default function MapSettingsTab(): React.ReactElement {
               </a>
             </p>
           </div>
+          )}
 
           <div>
             <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapStyle')}</label>
             <div className="mb-2">
-              <StyleDropdown value={mapboxStyle} onChange={setMapboxStyle} />
+              <StyleDropdown value={mapboxStyle} provider={provider} onChange={setMapboxStyle} />
             </div>
             <input
               type="text"
               value={mapboxStyle}
               onChange={(e) => setMapboxStyle(e.target.value)}
-              placeholder="mapbox://styles/mapbox/standard"
+              placeholder={defaultStyleForProvider(provider)}
               className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-400 focus:border-transparent"
             />
             <p className="text-xs text-slate-400 mt-1">
-              {t('settings.mapStyleHint')}
+              {provider === 'maplibre-gl' ? t('settings.mapOpenFreeMapStyleHint') : t('settings.mapStyleHint')}
             </p>
           </div>
 
+          {provider === 'mapbox-gl' && (
+          <>
           <div className={`flex items-start gap-3 p-3 rounded-lg border transition-colors ${
             supports3d
               ? 'border-slate-200 dark:border-slate-700'
@@ -354,6 +396,8 @@ export default function MapSettingsTab(): React.ReactElement {
           <div className="text-xs text-slate-400 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
             <strong className="text-slate-600 dark:text-slate-300">{t('settings.mapTipLabel')}</strong> {t('settings.mapTip')}
           </div>
+          </>
+          )}
         </div>
       )}
 
@@ -383,8 +427,9 @@ export default function MapSettingsTab(): React.ReactElement {
 
       <div>
         <div style={{ position: 'relative', inset: 0, height: '200px', width: '100%' }}>
-          {provider === 'mapbox-gl' ? (
-            <MapboxPreview
+          {provider !== 'leaflet' ? (
+            <GlMapPreview
+              provider={provider}
               token={mapboxToken}
               style={mapboxStyle}
               lat={parseFloat(String(defaultLat)) || 48.8566}
@@ -392,8 +437,8 @@ export default function MapSettingsTab(): React.ReactElement {
               // Zoom in close so the style's character (3D buildings,
               // satellite texture, label density) is immediately visible.
               zoom={Math.max(parseInt(String(defaultZoom)) || 10, 16)}
-              enable3d={mapbox3d && supports3d}
-              quality={mapboxQuality}
+              enable3d={provider === 'mapbox-gl' && mapbox3d && supports3d}
+              quality={provider === 'mapbox-gl' && mapboxQuality}
               onClick={(ll) => { setDefaultLat(ll.lat); setDefaultLng(ll.lng) }}
             />
           ) : (

client/src/components/Settings/MapboxPreview.tsx

@@ -1,10 +1,14 @@
 import { useEffect, useRef } from 'react'
 import mapboxgl from 'mapbox-gl'
+import maplibregl from 'maplibre-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import { isStandardFamily, supportsCustom3d, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
+import { MAPBOX_DEFAULT_STYLE, normalizeStyleForProvider, type GlMapProvider } from '../Map/glProviders'
 
 interface Props {
-  token: string
+  provider?: GlMapProvider
+  token?: string
   style: string
   lat: number
   lng: number
@@ -14,37 +18,44 @@ interface Props {
   onClick?: (latlng: { lat: number; lng: number }) => void
 }
 
-export default function MapboxPreview({ token, style, lat, lng, zoom, enable3d, quality = false, onClick }: Props) {
+export default function GlMapPreview({ provider = 'mapbox-gl', token = '', style, lat, lng, zoom, enable3d, quality = false, onClick }: Props) {
   const containerRef = useRef<HTMLDivElement>(null)
-  const mapRef = useRef<mapboxgl.Map | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mapRef = useRef<any | null>(null)
   const onClickRef = useRef(onClick)
   onClickRef.current = onClick
+  const isMapLibre = provider === 'maplibre-gl'
+  const gl = (isMapLibre ? maplibregl : mapboxgl) as any
+  const glStyle = normalizeStyleForProvider(provider, style)
+  const enableMapbox3d = !isMapLibre && enable3d
 
   useEffect(() => {
-    if (!containerRef.current || !token) return
-    mapboxgl.accessToken = token
+    if (!containerRef.current || (!isMapLibre && !token)) return
+    if (!isMapLibre) mapboxgl.accessToken = token
 
-    const map = new mapboxgl.Map({
+    const mapOptions: Record<string, unknown> = {
       container: containerRef.current,
-      style,
+      style: glStyle,
       center: [lng, lat],
       zoom,
-      pitch: enable3d ? 45 : 0,
+      pitch: enableMapbox3d ? 45 : 0,
       attributionControl: true,
       antialias: quality,
-      projection: quality ? 'globe' : 'mercator',
-    })
+    }
+    if (!isMapLibre) mapOptions.projection = quality ? 'globe' : 'mercator'
+
+    const map = new gl.Map(mapOptions as any)
     mapRef.current = map
 
     map.on('load', () => {
-      if (enable3d) {
-        if (!isStandardFamily(style)) addTerrainAndSky(map)
-        if (supportsCustom3d(style)) {
+      if (enableMapbox3d) {
+        if (!isStandardFamily(glStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(glStyle)) {
           const dark = document.documentElement.classList.contains('dark')
           addCustom3dBuildings(map, dark)
         }
       }
-      if (style === 'mapbox://styles/mapbox/standard') {
+      if (glStyle === MAPBOX_DEFAULT_STYLE) {
         try { map.setTerrain(null) } catch { /* noop */ }
       }
     })
@@ -57,7 +68,7 @@ export default function MapboxPreview({ token, style, lat, lng, zoom, enable3d,
       try { map.remove() } catch { /* noop */ }
       mapRef.current = null
     }
-  }, [token, style, enable3d, quality])
+  }, [provider, token, glStyle, enableMapbox3d, quality])
 
   // Recenter without rebuilding the map when lat/lng/zoom change externally
   useEffect(() => {
@@ -65,7 +76,7 @@ export default function MapboxPreview({ token, style, lat, lng, zoom, enable3d,
     try { mapRef.current.jumpTo({ center: [lng, lat], zoom }) } catch { /* noop */ }
   }, [lat, lng, zoom])
 
-  if (!token) {
+  if (!isMapLibre && !token) {
     return (
       <div className="flex items-center justify-center h-full bg-slate-100 dark:bg-slate-800 text-xs text-slate-500 rounded-lg border border-slate-200 dark:border-slate-700">
         Enter a Mapbox access token to preview

client/src/components/Settings/OfflineTab.tsx

@@ -21,6 +21,7 @@ interface CachedTripRow {
 export default function OfflineTab(): React.ReactElement {
   const [rows, setRows] = useState<CachedTripRow[]>([])
   const [pendingCount, setPendingCount] = useState(0)
+  const [failedCount, setFailedCount] = useState(0)
   const [syncing, setSyncing] = useState(false)
   const [clearing, setClearing] = useState(false)
   const [loading, setLoading] = useState(true)
@@ -28,11 +29,13 @@ export default function OfflineTab(): React.ReactElement {
   const load = useCallback(async () => {
     setLoading(true)
     try {
-      const [metas, pending] = await Promise.all([
+      const [metas, pending, failed] = await Promise.all([
         offlineDb.syncMeta.toArray(),
         mutationQueue.pendingCount(),
+        mutationQueue.failedCount(),
       ])
       setPendingCount(pending)
+      setFailedCount(failed)
 
       const result: CachedTripRow[] = []
       for (const meta of metas) {
@@ -85,6 +88,7 @@ export default function OfflineTab(): React.ReactElement {
         <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
           <Stat label="Cached trips" value={rows.length} />
           <Stat label="Pending changes" value={pendingCount} />
+          {failedCount > 0 && <Stat label="Failed changes" value={failedCount} danger />}
         </div>
 
         {/* Actions */}
@@ -165,13 +169,14 @@ export default function OfflineTab(): React.ReactElement {
   )
 }
 
-function Stat({ label, value }: { label: string; value: number }) {
+function Stat({ label, value, danger }: { label: string; value: number; danger?: boolean }) {
   return (
     <div className="border border-edge bg-surface-secondary" style={{
       padding: '8px 14px', borderRadius: 8,
       minWidth: 100,
     }}>
-      <div className="text-content" style={{ fontSize: 20, fontWeight: 700 }}>{value}</div>
+      <div style={{ fontSize: 20, fontWeight: 700, color: danger ? '#ef4444' : undefined }}
+        className={danger ? undefined : 'text-content'}>{value}</div>
       <div className="text-content-muted" style={{ fontSize: 11 }}>{label}</div>
     </div>
   )