chore: bump version to 3.1.1 [skip ci]

* fix(shared-view): render each leg of multi-leg flights correctly

The read-only shared view showed the overall trip start/end airports and
the first leg's flight number on every leg of a multi-leg flight. The Day
Plan already expands legs (each carries __leg), but the renderer ignored it
and read flat top-level metadata; the Bookings tab had the same bug.

- Day Plan: use __leg for per-leg airline/flight number/route, plus dep-arr time
- Bookings tab: list each leg via getFlightLegs()
- unique React keys for multi-leg rows

Closes #1219

* feat(pdf): add legs to pdf export

* fix(demo): skip first-run admin seed in demo mode

When DEMO_MODE is on, the demo seeder creates its own admin (admin@trek.app,
username "admin") right after the generic seeds run. The first-run admin
bootstrap was grabbing username "admin" first, so the demo seeder hit the
UNIQUE(username) constraint and aborted before the demo user was ever created
- which surfaced as a 500 "Demo user not found" on demo-login. Skip the
generic admin bootstrap when demo mode owns the admin account.

* fix(docker): ship the encryption-key migration script in the image

The production image only copied server/dist, so the documented rotation
command `node --import tsx scripts/migrate-encryption.ts` failed inside the
container with a module-not-found error - the raw .ts was never present. The
script runs via tsx straight from source and only pulls node builtins plus
better-sqlite3 (both prod deps), so copying the single file into
/app/server/scripts is enough to make the rotation work again.

* fix(vacay): keep the mode toolbar above the mobile bottom nav

The floating Vacation/Company toolbar was pinned at bottom-3 with z-30, so on
mobile it landed in the same band as the fixed bottom nav (z-60) and got hidden
behind it - and could scroll out of reach entirely. Pin it above the nav with
the shared --bottom-nav-h variable (0px on desktop, so nothing changes there)
and reserve matching space below the calendar grid so it never gets swallowed.

* fix(dashboard): show the correct reservation date regardless of timezone

The upcoming-reservations widget built the date with new Date(reservation_time)
.toISOString(), which reinterprets the stored naive local time as UTC and can
roll the displayed day forward in non-UTC timezones (e.g. a 23:30 reservation
showing the next day). Read the date and time straight from the stored string
parts via splitReservationDateTime, and format the time with the shared
formatTime helper so it also honours the user's 12h/24h preference.

* fix(atlas): cursor-following tooltips and removing countries from search

Two related Atlas fixes:

- Country tooltips were bound with sticky:false, which anchors them at the
  feature's bounds centre. For countries with overseas territories (e.g.
  France) that centre sits far out in the ocean, so the tooltip popped up
  nowhere near the area being hovered. Make them sticky so they track the
  cursor.

- Selecting an already-visited country from the search bar always opened the
  "Mark / Bucket" dialog, with no way to remove it. Tiny countries like
  Vatican City or Singapore are hard to hit on the map, so search was the only
  way in. Mirror the map-click behaviour: a manually-marked country opens the
  Remove confirmation, a trip/place-backed one opens its detail.

* fix(oidc): keep dots in generated usernames

The OIDC username sanitizer stripped dots because they were missing from the
allowed character class, so a name claim like "first.last" became "firstlast".
Dots are valid usernames (the profile validator already allows
^[a-zA-Z0-9_.-]+$), so add the dot to the sanitizer.

* fix(collab): show poll option labels in the UI

The poll API formatted each option as { label, voters }, but the React poll
component renders opt.text - so every option button came out blank. Emit text
alongside label (kept for any other consumer) so options render again.

* feat(backup): make the upload size limit configurable

The restore upload was capped at a hard-coded 500 MB, so instances whose
backup archive (uploads/ included) grew past that got a 413 "File too large"
with no way to raise it. Add a BACKUP_UPLOAD_LIMIT_MB env var (default 500,
invalid values warn and fall back), documented in .env.example.

* feat(costs): create an expense from a booking, fix editing total-only items

Replace the inline price + budget-category fields in the Transport and
Reservation booking modals with a "Create expense" flow: the modal saves the
booking, then opens the full Costs editor prefilled (name + category mapped from
the booking type) and linked to the reservation. A booking with a linked expense
shows it inline with edit / remove.

Also fix the Costs editor so an expense with a recorded total but no payers
(transport-derived or pre-rework items) opens with its amount, lets you set the
currency, and saves - it previously showed 0 everywhere and could not be saved.
Legacy / localized categories now map to the fixed keys, and changing a booking's
type keeps its linked expense category in sync (unless it was manually set).

- shared: reservation_id on budget create, typeToCostCategory helper, i18n keys
- server: createBudgetItem stores reservation_id; keep total_price for payerless
  items; a booking update no longer wipes its linked expense and syncs the
  category on type change
- client: shared BookingCostsSection, exported ExpenseModal with prefill and an
  editable total, page-level save-then-open wiring

* test(reservations): align syncBudgetOnUpdate unit tests with no-wipe + type-sync

The service now leaves a linked expense alone when no budget entry is on the
payload (only an explicit total_price 0 deletes it) and syncs the category on a
booking type change. Update the unit tests accordingly - the old "price cleared"
case passed entry: undefined, which is now a no-op and left a mocked return
queued that leaked into the next test.

* fix(planner): keep a reservation on its day when edited (#1237)

Editing a booking forced its day_id to the globally selected day, which is null
when editing from the Book tab - so the booking lost its day and vanished from
the Plan. Preserve the reservation own day_id on edit instead.

* fix(planner): derive a booking day from its date when none is set (#1237)

The client always sends day_id on a reservation update, so the server only
derived it from reservation_time when the field was absent. A non-transport
booking saved without a selected day (Book tab) therefore got day_id null and
vanished from the Plan, even though its date matched a day. Derive the day from
reservation_time whenever day_id is null, mirroring create.

* fix(planner): let a booking's day follow its date when edited (#1237)

Preserving the old day_id on edit left a re-dated booking on its previous start
day while end_day_id followed the new date, so it spanned both. Stop sending
day_id from the edit modal entirely - the server derives both ends from the
booking's date (and keeps the current day when there is no date), so a re-dated
booking moves cleanly to the matching day.

* fix(atlas): keep the continent breakdown in sync on mark/unmark (#1225)

The optimistic mark/unmark updates bumped the country total but never the
per-continent counts, so the continent column froze until a full reload. Move
the country to continent map into @trek/shared (single source for server and
client) and adjust the matching continent count at every optimistic site: the
country confirm flow plus the choose / region mark and region unmark handlers.

* feat(admin): let admins set a default currency for new users

Adds a currency picker to Admin > User Defaults. Stored as the default_currency
user-default, so users who have not picked their own currency inherit it in
Costs.

* fix(atlas): give every sub-national region a distinct code (#1217)

geoBoundaries fills shapeISO with the bare country code for some countries (every
Spanish region got "ESP", every Chinese "CHN", also Chile/Oman), so marking one
region lit up the whole country. build-atlas-geo.mjs now keeps shapeISO only when
it is a real "XX-..." subdivision code and otherwise synthesizes a unique
per-country id from the region name. Regenerated admin1.geojson.gz: Spain/China/
Chile/Oman now carry distinct region codes (countries with real codes, e.g.
Germany, are unchanged).

* fix(dashboard): never crash on a malformed reservation date

A reservation with an invalid date blanked the whole My Trips page: the old
Upcoming widget did new Date(value).toISOString(), which throws "Invalid time
value" (fixed in #1222 by reading the string parts). Also guard splitDate so a
bad date renders a dash instead of "Invalid Date" or throwing.

* fix(airtrail): gate airtrail update behind a user setting, on airtrail update: rebuild payload from fresh data to prevent any data loss

* fix(airtrail): add back missing tests

* fix(costs): rework the cost panel UX wise and apply prettier on the shared package

* chore(prettier) prettier this file

* fix(airtrail): don't use cabin class as seat on import

When an AirTrail flight has a cabin class but no seat number, the mapper
fell back to the class for metadata.seat, so reservations showed e.g.
"economy" as the seat. Use only the seat number; leave the seat blank
otherwise. The class is still surfaced separately in the import picker.

Closes #1246

* fix(airtrail): import scheduled flight times instead of actual

AirTrail exposes both scheduled (departureScheduled/arrivalScheduled) and
actual (departure/arrival) times. TREK read the actual times, so a delayed or
early flight imported the wrong time for planning.

Read the scheduled times on import and on poll-sync (both go through
mapFlightToReservation); when a flight has no scheduled time, leave the clock
blank (date preserved) rather than fabricating 00:00 or falling back to actual.
The change-detection hash now tracks the scheduled values, so existing linked
reservations re-sync once on the next poll. The opt-in writeback mirrors the
read, pushing TREK edits to the scheduled fields so they round-trip.

* fix(planner): hydrate per-assignment times when editing a place from the pool

Times live per day-assignment, not on the pool place, so reopening a
place from the Places panel / inspector showed empty Start/End fields
(#1247). The editor now resolves a place's lone assignment when no day
is in context and hydrates the fields from it; ambiguous (0 or 2+ days)
edits hide the fields instead of showing non-persisting inputs.

* fix(mcp): make write tools return client-valid, hydrated entities

Audit of all write tools under server/src/mcp/tools (issue #1244 anchor).

S1 (broken):
- create_budget_item / create_budget_item_with_members now default the
  split to all trip members when member_ids omitted, so the entry passes
  the client save-gate instead of being member-less (#1244).
- create_transport / update_transport backfill lat/lng/timezone for
  code-only flight endpoints (NOT NULL columns) and return a clean error
  for unresolvable endpoints instead of crashing.

S2 (under-hydration): set_budget_item_members, create_journey,
create_journey_entry, create_packing_bag, bulk_import_packing and
update_vacay_plan now return the hydrated shape the matching read/REST
route returns; bulk_import widened to accept bag/weight_grams/checked.

S3 (parity): check_in_end added to accommodation tools; atlas
mark_region_visited echoes the client shape; update_journey_entry/
update_journey_preferences, set_bag_members, set_packing_category_assignees,
apply_packing_template return hydrated payloads; set_vacay_color echoes
the color.

Auth: save_packing_template now requires admin, matching the REST gate.

Also refactors server/src/config.ts (JWT-secret handling).

Adds getBudgetItem hydrated getter, exports EndpointInput, and MCP
regression tests (incl. new tools-transports and tools-journey suites).

* fix(mcp): fix ICS/maps/accommodation bugs, add settlement & template tools

Bugs:
- export_trip_ics: include flights that store times per-endpoint
  (local_date/local_time) instead of a top-level reservation_time
- resolve_maps_url: follow redirects for cid=/share links and fall back
  to parsing the page body, all SSRF-guarded
- link_hotel_accommodation: normalize accommodation_id (TEXT column) to an
  integer in the reservation read paths so it no longer returns "14.0"

Gaps:
- packing: save_packing_template returns the new template id; add
  list_packing_templates (read) and delete_packing_template (admin)
- budget: update_budget_item accepts payers/member_ids; clarify create/
  update/members descriptions to ask which members share the expense and
  who paid
- budget: add settlement tools — get_settlement_summary, list_settlements,
  create/update/delete_settlement (budget_edit, mirrors REST + WS events)

* chore: bump nodemailer

* chore: bump multer

---------

Co-authored-by: Maurice <mauriceboe@icloud.com>

.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
@@ -44,7 +51,7 @@ COPY server/package.json ./server/
 #   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 && \
     npm ci --workspace=server --omit=dev && \
     ARCH=$(dpkg --print-architecture) && \
     if [ "$ARCH" = "amd64" ]; then \
@@ -60,6 +67,9 @@ RUN apt-get update && \
     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
@@ -75,6 +85,10 @@ COPY --from=server-builder /app/server/dist ./server/dist
 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
 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
@@ -95,5 +109,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"]

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

charts/trek/Chart.yaml

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

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

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"

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trek/client",
-  "version": "3.0.22",
+  "version": "3.1.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -58,11 +58,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",
@@ -80,8 +81,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.0.16",
+    "vite-plugin-pwa": "^1.3.0",
+    "vitest": "^4.1.9"
   }
 }

client/src/api/client.ts

@@ -489,7 +489,7 @@ export const addonsApi = {
 
 export const airtrailApi = {
   getSettings: () => apiClient.get('/integrations/airtrail/settings').then(r => r.data),
-  saveSettings: (data: { url: string; apiKey?: string; allowInsecureTls?: boolean }) =>
+  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 }) =>
@@ -595,6 +595,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),

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/DefaultUserSettingsTab.tsx

@@ -6,6 +6,7 @@ import { useToast } from '../shared/Toast'
 import Section from '../Settings/Section'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
+import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
 import type { Place } from '../../types'
 
 const MAP_PRESETS = [
@@ -20,6 +21,7 @@ type Defaults = {
   temperature_unit?: string
   dark_mode?: string | boolean
   time_format?: string
+  default_currency?: string
   blur_booking_codes?: boolean
   map_tile_url?: string
   map_provider?: string
@@ -226,6 +228,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" /></>}>
         {([

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

@@ -0,0 +1,138 @@
+// 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.getAllByRole('spinbutton') 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('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()
+  })
+})

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,22 @@ 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>
         <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 && (
+              <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 +558,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 +575,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)))
@@ -633,37 +703,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="number" inputMode="decimal" min="0" step="0.01" placeholder="0.00" value={amount}
+            onChange={e => setAmount(e.target.value)} 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 +779,94 @@ 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
+  const valid = name.trim().length > 0 && totalNum > 0 && participants.size > 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) => {
+    setTotal(v)
+    setPaid(prev => rebalance(prev, dirty, participants, parseFloat(v) || 0))
+  }
+  const onPaidChange = (id: number, v: string) => {
+    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 +896,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="number" inputMode="decimal" min="0" step="0.01" 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 +914,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 +943,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="number" inputMode="decimal" min="0" step="0.01" 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.pickSomeone') : 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/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/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/MapViewAuto.tsx

@@ -5,6 +5,11 @@ import { MapViewGL } from './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). Mapbox GL is best-effort offline — its
+// vector tiles are cached opportunistically by the Service Worker as you view
+// them online (see the mapbox-tiles rule 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)

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

@@ -31,21 +31,29 @@ 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(() => ({
-      setLngLat: vi.fn().mockReturnThis(),
-      setHTML: vi.fn().mockReturnThis(),
-      addTo: vi.fn().mockReturnThis(),
-      remove: 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', () => ({}))
@@ -63,7 +71,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', () => ({

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 () => {

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 ''
@@ -215,17 +216,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 = ''
+            // Flights render one subtitle line per leg (see below); everything else is a single line.
+            let subtitleLines: string[] = []
             if (r.type === 'flight') {
-              // 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(' · ')
+              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)
@@ -238,7 +252,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>

client/src/components/Planner/BookingCostsSection.tsx

@@ -0,0 +1,61 @@
+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, onCreate, onEdit, onRemove }: {
+  reservationId: number | 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]'
+
+  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/DayPlanSidebar.tsx

@@ -18,16 +18,16 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { isDayInAccommodationRange, getAccommodationAnchors } 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'
@@ -152,6 +152,8 @@ 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)
   const legsAbortRef = useRef<AbortController | null>(null)
   const [draggingId, setDraggingId] = useState(null)
   const [lockedIds, setLockedIds] = useState(new Set())
@@ -379,12 +381,8 @@ 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 epLoc = (r: any, role: 'from' | 'to'): { lat: number; lng: number } | null => {
-      const e = (r.endpoints || []).find((x: any) => x.role === role)
-      return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
-    }
     const runs: { id: number; lat: number; lng: number }[][] = []
     let cur: { id: number; lat: number; lng: number }[] = []
     for (const it of merged) {
@@ -392,7 +390,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
         cur.push({ id: it.data.id, lat: it.data.place.lat, lng: it.data.place.lng })
       } else if (it.type === 'transport') {
         const r = it.data
-        const from = epLoc(r, 'from'), to = epLoc(r, 'to')
+        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.
@@ -408,7 +406,32 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
       }
     }
     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 { morning: startHotel, evening: endHotel } =
+      day && optimizeFromAccommodation !== false ? getDayBookendHotels(day, days, accommodations) : {}
+    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.
+    const wayPts: { lat: number; lng: number }[] = []
+    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 })
+      } else if (it.type === 'transport') {
+        const { from, to } = getTransportRouteEndpoints(it.data, selectedDayId)
+        if (from) wayPts.push({ lat: from.lat, lng: from.lng })
+        if (to) wayPts.push({ lat: to.lat, lng: to.lng })
+      }
+    }
+    const firstWay = wayPts[0]
+    const lastWay = wayPts[wayPts.length - 1]
+    const wantTop = !!(startHotel && firstWay)
+    const wantBottom = !!(endHotel && lastWay)
+
+    if (runs.length === 0 && !wantTop && !wantBottom) { setRouteLegs({}); setHotelLegs({}); return }
 
     const controller = new AbortController()
     legsAbortRef.current = controller
@@ -422,9 +445,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])
 
   const openAddNote = (dayId, e) => {
     e?.stopPropagation()
@@ -938,6 +979,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     setRouteInfo,
     routeLegs,
     setRouteLegs,
+    hotelLegs,
+    setHotelLegs,
     legsAbortRef,
     draggingId,
     setDraggingId,
@@ -1085,6 +1128,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     setRouteInfo,
     routeLegs,
     setRouteLegs,
+    hotelLegs,
+    setHotelLegs,
     legsAbortRef,
     draggingId,
     setDraggingId,
@@ -1427,6 +1472,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) }}
@@ -2057,6 +2105,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' }}

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/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} />);
@@ -304,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

@@ -92,6 +92,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 || '',
@@ -99,8 +104,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 || '',
@@ -121,7 +126,10 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     }
     setPendingFiles([])
     setDuplicateWarning(null)
-  }, [place, prefillCoords, isOpen])
+    // 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])
 
   // Derive location bias bounding box from the trip's existing places
   const places = useTripStore((s) => s.places)
@@ -249,15 +257,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 {
@@ -709,8 +736,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

@@ -647,5 +647,43 @@ 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

@@ -217,7 +217,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 +253,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>
           )}
@@ -279,7 +279,7 @@ export default function PlaceInspector({
         </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} />}
@@ -497,7 +497,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={{

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,10 @@ 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 type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation, BudgetItem } from '../../types'
+import { BookingCostsSection } from './BookingCostsSection'
+import type { BookingExpenseRequest } from './BookingCostsSection.types'
+import { typeToCostCategory } from '@trek/shared'
 
 const TYPE_OPTIONS = [
   { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
@@ -60,9 +63,10 @@ interface ReservationModalProps {
   onFileDelete: (fileId: number) => Promise<void>
   accommodations?: Accommodation[]
   defaultAssignmentId?: number | null
+  onOpenExpense?: (req: BookingExpenseRequest) => void
 }
 
-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 }: ReservationModalProps) {
   const { id: tripId } = useParams<{ id: string }>()
   const loadFiles = useTripStore(s => s.loadFiles)
   const toast = useToast()
@@ -70,18 +74,14 @@ 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,
   })
@@ -127,15 +127,12 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         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 : '',
       })
     } 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: '',
       })
@@ -167,8 +164,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 +182,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,11 +194,6 @@ 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) {
         saveData.create_accommodation = {
           place_id: form.hotel_place_id || null,
@@ -228,11 +215,25 @@ 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')) }
+  }
+
   const handleFileChange = async (e) => {
     const file = (e.target as HTMLInputElement).files?.[0]
     if (!file) return
@@ -610,38 +611,14 @@ 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}
+            onCreate={handleCreateExpense}
+            onEdit={handleEditExpense}
+            onRemove={handleRemoveExpense}
+          />
         )}
 
       </form>

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,4 +1,4 @@
-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, Plus, Trash2 } from 'lucide-react'
 import Modal from '../shared/Modal'
@@ -13,8 +13,11 @@ import { useAddonStore } from '../../store/addonStore'
 import { formatDate, splitReservationDateTime } 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 { 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]
@@ -105,8 +108,6 @@ const defaultForm = {
   arrival_time: '',
   confirmation_number: '',
   notes: '',
-  price: '',
-  budget_category: '',
   meta_airline: '',
   meta_flight_number: '',
   meta_train_number: '',
@@ -124,20 +125,20 @@ interface TransportModalProps {
   files?: TripFile[]
   onFileUpload?: (fd: FormData) => Promise<unknown>
   onFileDelete?: (fileId: number) => Promise<void>
+  onOpenExpense?: (req: BookingExpenseRequest) => void
 }
 
-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 }: 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>({})
@@ -177,8 +178,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         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') {
         const orderedEps = orderedEndpoints(reservation)
@@ -229,8 +228,8 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
 
   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 {
@@ -289,11 +288,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         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>[] = []
@@ -334,11 +328,6 @@ 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 }
-      }
       const saved = await onSave(payload)
       if (!reservation?.id && saved?.id && pendingFiles.length > 0 && onFileUpload) {
         for (const file of pendingFiles) {
@@ -349,6 +338,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 {
@@ -356,6 +353,12 @@ 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')) }
+  }
+
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
@@ -712,38 +715,14 @@ 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}
+            onCreate={handleCreateExpense}
+            onEdit={handleEditExpense}
+            onRemove={handleRemoveExpense}
+          />
         )}
 
       </form>

client/src/components/Settings/AirTrailConnectionSection.tsx

@@ -19,6 +19,7 @@ export default function AirTrailConnectionSection(): React.ReactElement {
   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)
@@ -30,6 +31,7 @@ export default function AirTrailConnectionSection(): React.ReactElement {
       .then(d => {
         setUrl(d.url || '')
         setAllowInsecureTls(!!d.allowInsecureTls)
+        setWriteEnabled(!!d.writeEnabled)
         setConnected(!!d.connected)
       })
       .catch(() => {})
@@ -46,7 +48,7 @@ export default function AirTrailConnectionSection(): React.ReactElement {
   const handleSave = async () => {
     setSaving(true)
     try {
-      const d = await airtrailApi.saveSettings({ url: url.trim(), allowInsecureTls, ...keyPayload() })
+      const d = await airtrailApi.saveSettings({ url: url.trim(), allowInsecureTls, writeEnabled, ...keyPayload() })
       const status = await airtrailApi.status().catch(() => ({ connected: false }))
       setConnected(!!status.connected)
       setApiKey('')
@@ -107,6 +109,14 @@ export default function AirTrailConnectionSection(): React.ReactElement {
           <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}

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

client/src/components/Settings/ToggleSwitch.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
+export default function ToggleSwitch({ on, onToggle, label }: { on: boolean; onToggle: () => void; label?: string }) {
   return (
-    <button type="button" onClick={onToggle}
+    <button type="button" onClick={onToggle} aria-pressed={on} aria-label={label}
       style={{
         position: 'relative', width: 44, height: 24, minWidth: 44, flexShrink: 0,
         borderRadius: 12, border: 'none', padding: 0, cursor: 'pointer',

client/src/components/Trips/TripFormModal.test.tsx

@@ -288,4 +288,26 @@ describe('TripFormModal', () => {
     await user.click(submitBtn.closest('button')!);
     await waitFor(() => expect(screen.getByText('Saving...')).toBeInTheDocument());
   });
+
+  it('FE-COMP-TRIPFORM-029: clearing the day count leaves the field empty (no snap to 1)', () => {
+    render(<TripFormModal {...defaultProps} trip={null} />);
+    const dayInput = document.querySelector('input[max="365"]') as HTMLInputElement;
+    expect(dayInput).toBeInTheDocument();
+    expect(dayInput.value).toBe('7');
+    fireEvent.change(dayInput, { target: { value: '' } });
+    expect(dayInput.value).toBe('');
+  });
+
+  it('FE-COMP-TRIPFORM-030: empty day count blocks submit with an error', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(<TripFormModal {...defaultProps} trip={null} onSave={onSave} />);
+    await user.type(screen.getByPlaceholderText(/Summer in Japan/i), 'No-date Trip');
+    const dayInput = document.querySelector('input[max="365"]') as HTMLInputElement;
+    fireEvent.change(dayInput, { target: { value: '' } });
+    const submitBtn = screen.getAllByText('Create New Trip').find(el => el.closest('button'))!;
+    await user.click(submitBtn.closest('button')!);
+    await screen.findByText('Number of days is required');
+    expect(onSave).not.toHaveBeenCalled();
+  });
 });

client/src/components/Trips/TripFormModal.tsx

@@ -40,7 +40,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
     start_date: '',
     end_date: '',
     reminder_days: 0 as number,
-    day_count: 7,
+    day_count: 7 as number | '',
   })
   const [customReminder, setCustomReminder] = useState(false)
   const [error, setError] = useState('')
@@ -100,6 +100,12 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
     if (formData.start_date && formData.end_date && new Date(formData.end_date) < new Date(formData.start_date)) {
       setError(t('dashboard.endDateError')); return
     }
+    if (!formData.start_date && !formData.end_date) {
+      const dc = Number(formData.day_count)
+      if (formData.day_count === '' || !Number.isInteger(dc) || dc < 1 || dc > 365) {
+        setError(t('dashboard.dayCountRequired')); return
+      }
+    }
     setIsLoading(true)
     try {
       const result = await onSave({
@@ -108,7 +114,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
         start_date: formData.start_date || null,
         end_date: formData.end_date || null,
         reminder_days: formData.reminder_days,
-        ...(!formData.start_date && !formData.end_date ? { day_count: formData.day_count } : {}),
+        ...(!formData.start_date && !formData.end_date ? { day_count: Number(formData.day_count) } : {}),
       })
       const createdTrip = result ? result.trip : undefined
       // Add selected members for newly created trips
@@ -320,7 +326,12 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
               {t('dashboard.dayCount')}
             </label>
             <input type="number" min={1} max={365} value={formData.day_count}
-              onChange={e => update('day_count', Math.max(1, Math.min(365, Number(e.target.value) || 1)))}
+              onChange={e => {
+                const raw = e.target.value
+                if (raw === '') { update('day_count', ''); return }
+                const n = Math.floor(Number(raw))
+                if (Number.isFinite(n)) update('day_count', Math.min(365, Math.max(1, n)))
+              }}
               className={inputCls} />
             <p className="text-xs text-slate-400 mt-1.5">{t('dashboard.dayCountHint')}</p>
           </div>

client/src/components/Vacay/VacayCalendar.tsx

@@ -69,7 +69,7 @@ export default function VacayCalendar() {
 
   return (
     <div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 pb-14">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3" style={{ paddingBottom: 'calc(var(--bottom-nav-h, 0px) + 80px)' }}>
         {Array.from({ length: 12 }, (_, i) => (
           <VacayMonthCard
             key={i}
@@ -89,8 +89,8 @@ export default function VacayCalendar() {
         ))}
       </div>
 
-      {/* Floating toolbar */}
-      <div className="sticky bottom-3 sm:bottom-4 mt-3 sm:mt-4 flex items-center justify-center z-30 px-2">
+      {/* Floating toolbar — lift above the mobile bottom nav (z-60). On desktop --bottom-nav-h is 0px. */}
+      <div className="sticky mt-3 sm:mt-4 flex items-center justify-center px-2" style={{ bottom: 'calc(var(--bottom-nav-h, 0px) + 12px)', zIndex: 61 }}>
         <div className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-xl border bg-surface-card border-edge" style={{ boxShadow: '0 8px 32px rgba(0,0,0,0.12)' }}>
           <button
             onClick={() => setCompanyMode(false)}

client/src/db/offlineDb.ts

@@ -27,6 +27,12 @@ export interface QueuedMutation {
   tempId?: number;
   /** For DELETE mutations: the entity id to remove from Dexie on flush */
   entityId?: number;
+  /**
+   * For PUT/DELETE enqueued offline against a still-unsynced (negative-id) entity:
+   * the temp id of the target. The url carries an `{id}` placeholder that the
+   * mutation queue rewrites to the real server id once the dependent CREATE flushes.
+   */
+  tempEntityId?: number;
 }
 
 export interface SyncMeta {
@@ -41,13 +47,48 @@ export interface SyncMeta {
 export interface BlobCacheEntry {
   /** Relative URL, e.g. "/api/files/42/download" */
   url: string;
+  /**
+   * Trip this blob belongs to, so it is evicted together with the trip in
+   * clearTripData. Legacy rows cached before v3 carry the sentinel -1.
+   */
+  tripId: number;
   blob: Blob;
+  /** Byte size captured at insert time — Blob.size is not reliably preserved
+   *  across IndexedDB round-trips, so the LRU budget reads this instead. */
+  bytes: number;
   mime: string;
   cachedAt: number;
 }
 
 // ── Dexie class ────────────────────────────────────────────────────────────────
 
+/**
+ * The offline DB is scoped per user so that one account can never read another
+ * account's cached data on a shared device. Anonymous (logged-out) state uses
+ * the base name; a logged-in user uses `trek-offline-u<userId>`.
+ */
+const ANON_DB_NAME = 'trek-offline';
+
+function userDbName(userId: number | string): string {
+  return `trek-offline-u${userId}`;
+}
+
+/**
+ * Best-effort read of the persisted auth snapshot so the very first DB opened on
+ * app load (before loadUser resolves) is already the correct per-user one — the
+ * PWA can render cached data offline without leaking across users.
+ */
+function initialDbName(): string {
+  try {
+    const raw = typeof localStorage !== 'undefined' ? localStorage.getItem('trek_auth_snapshot') : null;
+    if (!raw) return ANON_DB_NAME;
+    const id = JSON.parse(raw)?.state?.user?.id;
+    return id != null ? userDbName(id) : ANON_DB_NAME;
+  } catch {
+    return ANON_DB_NAME;
+  }
+}
+
 class TrekOfflineDb extends Dexie {
   trips!: Table<Trip, number>;
   days!: Table<Day, number>;
@@ -65,8 +106,8 @@ class TrekOfflineDb extends Dexie {
   syncMeta!: Table<SyncMeta, number>;
   blobCache!: Table<BlobCacheEntry, string>;
 
-  constructor() {
-    super('trek-offline');
+  constructor(name: string = ANON_DB_NAME) {
+    super(name);
 
     this.version(1).stores({
       trips:        'id',
@@ -88,10 +129,67 @@ class TrekOfflineDb extends Dexie {
       tags:           'id',
       categories:     'id',
     });
+
+    // v3: scope the blob cache by trip so it can be evicted with the trip and
+    // bounded by an LRU budget (see enforceBlobBudget).
+    this.version(3).stores({
+      blobCache: 'url, cachedAt, tripId',
+    }).upgrade(async (tx) => {
+      await tx.table('blobCache').toCollection().modify((row: Partial<BlobCacheEntry>) => {
+        if (row.tripId == null) row.tripId = -1;
+        if (row.bytes == null) row.bytes = row.blob?.size ?? 0;
+      });
+    });
   }
 }
 
-export const offlineDb = new TrekOfflineDb();
+// The live instance is swapped on login/logout via reopenForUser/reopenAnonymous.
+// A Proxy keeps the exported `offlineDb` binding stable for the ~19 modules that
+// import it directly, while every access forwards to the current connection.
+let _db = new TrekOfflineDb(initialDbName());
+
+export const offlineDb = new Proxy({} as TrekOfflineDb, {
+  get(_target, prop) {
+    const value = (_db as unknown as Record<string | symbol, unknown>)[prop];
+    return typeof value === 'function' ? (value as (...args: unknown[]) => unknown).bind(_db) : value;
+  },
+  set(_target, prop, value) {
+    (_db as unknown as Record<string | symbol, unknown>)[prop] = value;
+    return true;
+  },
+}) as TrekOfflineDb;
+
+async function switchTo(name: string): Promise<void> {
+  if (_db.name === name) {
+    if (!_db.isOpen()) await _db.open();
+    return;
+  }
+  if (_db.isOpen()) _db.close();
+  _db = new TrekOfflineDb(name);
+  await _db.open();
+}
+
+/** Point the offline DB at a specific user's scoped database (call on login). */
+export async function reopenForUser(userId: number | string): Promise<void> {
+  await switchTo(userDbName(userId));
+}
+
+/** Point the offline DB at the anonymous database (call on logout). */
+export async function reopenAnonymous(): Promise<void> {
+  await switchTo(ANON_DB_NAME);
+}
+
+/**
+ * Delete the current user's scoped database entirely and return to the anonymous
+ * DB. Used on logout so no trace of the account's data remains on the device.
+ */
+export async function deleteCurrentUserDb(): Promise<void> {
+  if (_db.name !== ANON_DB_NAME) {
+    try { await _db.delete(); } catch { /* ignore — fall through to anon */ }
+  }
+  _db = new TrekOfflineDb(ANON_DB_NAME);
+  await _db.open();
+}
 
 // ── Bulk upsert helpers ────────────────────────────────────────────────────────
 
@@ -166,6 +264,40 @@ export async function getCachedBlob(url: string): Promise<Blob | null> {
   }
 }
 
+// ── Blob-cache budget ───────────────────────────────────────────────────────
+
+/**
+ * Upper bounds for the offline file-blob cache. Kept conservative so trip
+ * documents never starve the map-tile cache (sized at MAX_TILES in
+ * tilePrefetcher.ts) for the origin's storage quota.
+ */
+export const BLOB_CACHE_MAX_ENTRIES = 200;
+export const BLOB_CACHE_MAX_BYTES = 100 * 1024 * 1024; // 100 MB
+
+/**
+ * Evict oldest-by-cachedAt blobs until the cache is under both the entry-count
+ * and byte budget. Call after inserting new blobs. LRU on insertion time, which
+ * is a reasonable proxy for access for write-once document blobs.
+ */
+export async function enforceBlobBudget(
+  maxCount = BLOB_CACHE_MAX_ENTRIES,
+  maxBytes = BLOB_CACHE_MAX_BYTES,
+): Promise<void> {
+  const entries = await offlineDb.blobCache.orderBy('cachedAt').toArray();
+  let count = entries.length;
+  let totalBytes = entries.reduce((sum, e) => sum + (e.bytes ?? 0), 0);
+  if (count <= maxCount && totalBytes <= maxBytes) return;
+
+  const toDelete: string[] = [];
+  for (const e of entries) {
+    if (count <= maxCount && totalBytes <= maxBytes) break;
+    toDelete.push(e.url);
+    totalBytes -= e.bytes ?? 0;
+    count -= 1;
+  }
+  if (toDelete.length) await offlineDb.blobCache.bulkDelete(toDelete);
+}
+
 // ── Eviction / cleanup ────────────────────────────────────────────────────────
 
 /** Delete all cached data for one trip (eviction or explicit clear). */
@@ -184,6 +316,7 @@ export async function clearTripData(tripId: number): Promise<void> {
       offlineDb.tripMembers,
       offlineDb.mutationQueue,
       offlineDb.syncMeta,
+      offlineDb.blobCache,
     ],
     async () => {
       await offlineDb.days.where('trip_id').equals(tripId).delete();
@@ -197,6 +330,7 @@ export async function clearTripData(tripId: number): Promise<void> {
       await offlineDb.tripMembers.where('tripId').equals(tripId).delete();
       await offlineDb.mutationQueue.where('tripId').equals(tripId).delete();
       await offlineDb.syncMeta.where('tripId').equals(tripId).delete();
+      await offlineDb.blobCache.where('tripId').equals(tripId).delete();
     },
   );
   // Remove the trip row itself outside the transaction since it's a separate table

client/src/hooks/useExchangeRates.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 
 /**
  * Live FX rates for the Costs panel, used to convert every amount into the user's
- * display currency. Fetches exchangerate-api.com (no key, already CSP-allowlisted
+ * display currency. Fetches api.frankfurter.dev (no key, already CSP-allowlisted
  * for the dashboard widget) for the given base and caches per base in memory +
  * localStorage for a few hours. rates[X] = units of X per 1 base, so an amount in
  * currency C converts to base as `amount / rates[C]`.
@@ -33,14 +33,19 @@ export function useExchangeRates(base: string) {
     if (cached) setRates(cached.rates)
     if (cached && Date.now() - cached.ts < TTL_MS) return
     let cancelled = false
-    fetch(`https://api.exchangerate-api.com/v4/latest/${encodeURIComponent(upper)}`)
+    fetch(`https://api.frankfurter.dev/v2/rates?base=${encodeURIComponent(upper)}`)
       .then(r => r.json())
-      .then((d: { rates?: Record<string, number> }) => {
-        if (cancelled || !d?.rates) return
-        const entry = { rates: d.rates, ts: Date.now() }
+      .then((d: Array<{ quote?: string; rate?: number }>) => {
+        if (cancelled || !Array.isArray(d)) return
+        // Frankfurter omits the base's own self-rate, so seed it with `base = 1`.
+        const rates: Record<string, number> = { [upper]: 1 }
+        for (const r of d) {
+          if (r && typeof r.quote === 'string' && typeof r.rate === 'number') rates[r.quote] = r.rate
+        }
+        const entry = { rates, ts: Date.now() }
         mem.set(upper, entry)
         try { localStorage.setItem('trek_fx_' + upper, JSON.stringify(entry)) } catch { /* ignore */ }
-        setRates(d.rates)
+        setRates(rates)
       })
       .catch(() => { /* offline → keep cached/identity */ })
     return () => { cancelled = true }

client/src/hooks/useRouteCalculation.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { useTripStore } from '../store/tripStore'
 import { calculateRouteWithLegs } from '../components/Map/RouteCalculator'
+import { getTransportRouteEndpoints } from '../utils/dayMerge'
 import type { TripStoreState } from '../store/tripStore'
 import type { RouteSegment, RouteResult } from '../types'
 
@@ -53,12 +54,6 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       return pos != null
     })
 
-    // The departure/arrival coordinate of a transport, if its endpoints carry one.
-    const epLoc = (r: any, role: 'from' | 'to'): { lat: number; lng: number } | null => {
-      const e = (r.endpoints || []).find((x: any) => x.role === role)
-      return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
-    }
-
     // Build a unified list of places + transports sorted by effective position.
     type Entry =
       | { kind: 'place'; lat: number; lng: number; pos: number }
@@ -67,12 +62,15 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       ...da.filter(a => a.place?.lat && a.place?.lng).map(a => ({
         kind: 'place' as const, lat: a.place.lat!, lng: a.place.lng!, pos: a.order_index,
       })),
-      ...dayTransports.map(r => ({
-        kind: 'transport' as const,
-        from: epLoc(r, 'from'),
-        to: epLoc(r, 'to'),
-        pos: (r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position) as number,
-      })),
+      ...dayTransports.map(r => {
+        const { from, to } = getTransportRouteEndpoints(r, dayId)
+        return {
+          kind: 'transport' as const,
+          from,
+          to,
+          pos: (r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position) as number,
+        }
+      }),
     ].sort((a, b) => a.pos - b.pos)
 
     // Group located places into driving runs.

client/src/main.tsx

@@ -15,8 +15,11 @@ import '@fontsource/geist-sans/500.css'
 import '@fontsource/geist-sans/600.css'
 import './index.css'
 import { startConnectivityProbe } from './sync/connectivity'
+import { requestPersistentStorage } from './sync/persistentStorage'
 
 startConnectivityProbe()
+// Keep offline data (map tiles, file blobs, IndexedDB) exempt from eviction.
+requestPersistentStorage()
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

client/src/pages/AtlasPage.tsx

@@ -6,6 +6,7 @@ import CustomSelect from '../components/shared/CustomSelect'
 import { Globe, MapPin, Briefcase, Calendar, Flag, PanelLeftOpen, PanelLeftClose, X, Star, Plus, Trash2, Search } from 'lucide-react'
 import type { TranslationFn } from '../types'
 import { A2_TO_A3, countryCodeToFlag, type AtlasCountry, type AtlasStats, type AtlasData, type CountryDetail } from './atlas/atlasModel'
+import { continentForCountry } from '@trek/shared'
 import { useAtlas } from './atlas/useAtlas'
 import AtlasCountrySearch from './atlas/AtlasCountrySearch'
 import { useToast } from '../components/shared/Toast'
@@ -212,7 +213,8 @@ export default function AtlasPage(): React.ReactElement {
                     await apiClient.post(`/addons/atlas/country/${confirmAction.code}/mark`)
                     setData(prev => {
                       if (!prev || prev.countries.find(c => c.code === confirmAction.code)) return prev
-                      return { ...prev, countries: [...prev.countries, { code: confirmAction.code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 } }
+                      const cont = continentForCountry(confirmAction.code)
+                      return { ...prev, countries: [...prev.countries, { code: confirmAction.code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 }, continents: { ...prev.continents, [cont]: (prev.continents?.[cont] || 0) + 1 } }
                     })
                   } catch (err) {
                     toast.error(getApiErrorMessage(err, t('common.error')))
@@ -260,7 +262,8 @@ export default function AtlasPage(): React.ReactElement {
                     })
                     setData(prev => {
                       if (!prev || prev.countries.find(c => c.code === countryCode)) return prev
-                      return { ...prev, countries: [...prev.countries, { code: countryCode, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 } }
+                      const cont = continentForCountry(countryCode)
+                      return { ...prev, countries: [...prev.countries, { code: countryCode, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 }, continents: { ...prev.continents, [cont]: (prev.continents?.[cont] || 0) + 1 } }
                     })
                   } catch (err) {
                     toast.error(getApiErrorMessage(err, t('common.error')))
@@ -339,10 +342,12 @@ export default function AtlasPage(): React.ReactElement {
                         if (!c || c.placeCount > 0 || c.tripCount > 0) return prev
                         const remainingRegions = (visitedRegions[countryCode] || []).filter(r => r.code !== rCode && r.manuallyMarked)
                         if (remainingRegions.length > 0) return prev
+                        const cont = continentForCountry(countryCode)
                         return {
                           ...prev,
                           countries: prev.countries.filter(c => c.code !== countryCode),
                           stats: { ...prev.stats, totalCountries: Math.max(0, prev.stats.totalCountries - 1) },
+                          continents: { ...prev.continents, [cont]: Math.max(0, (prev.continents?.[cont] || 0) - 1) },
                         }
                       })
                     } catch (err) {

client/src/pages/DashboardPage.test.tsx

@@ -20,8 +20,11 @@ beforeEach(() => {
   } as any);
   // Intercept CurrencyWidget's external fetch so it resolves before teardown
   server.use(
-    http.get('https://api.exchangerate-api.com/v4/latest/:currency', () => {
-      return HttpResponse.json({ rates: { USD: 1.08, EUR: 1, CHF: 0.97 } });
+    http.get('https://api.frankfurter.dev/v2/rates', () => {
+      return HttpResponse.json([
+        { date: '2026-06-16', base: 'EUR', quote: 'USD', rate: 1.08 },
+        { date: '2026-06-16', base: 'EUR', quote: 'CHF', rate: 0.97 },
+      ]);
     }),
   );
 });

client/src/pages/DashboardPage.tsx

@@ -18,6 +18,8 @@ import {
   Plane, Hotel, Utensils, Clock, RefreshCw, ArrowRightLeft, Calendar,
   LayoutGrid, List, Ticket, X,
 } from 'lucide-react'
+import { formatTime, splitReservationDateTime } from '../utils/formatters'
+import { useSettingsStore } from '../store/settingsStore'
 import '../styles/dashboard.css'
 
 const GRADIENTS = [
@@ -36,6 +38,7 @@ function tripGradient(id: number): string { return GRADIENTS[id % GRADIENTS.leng
 function splitDate(dateStr: string | null | undefined, locale: string): { d: string; m: string } | null {
   if (!dateStr) return null
   const date = new Date(dateStr + 'T00:00:00Z')
+  if (isNaN(date.getTime())) return null // malformed date — render a dash, never crash
   return {
     d: date.toLocaleDateString(locale, { day: 'numeric', timeZone: 'UTC' }),
     m: date.toLocaleDateString(locale, { month: 'short', timeZone: 'UTC' }),
@@ -461,9 +464,15 @@ function CurrencyTool(): React.ReactElement {
   const [rates, setRates] = useState<Record<string, number> | null>(null)
 
   const fetchRate = React.useCallback(() => {
-    fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)
+    fetch(`https://api.frankfurter.dev/v2/rates?base=${from}`)
       .then(r => r.json())
-      .then(d => setRates(d.rates ?? null))
+      .then((d: Array<{ quote: string; rate: number }>) => {
+        if (!Array.isArray(d)) { setRates(null); return }
+        // Frankfurter omits the base's own self-rate; seed it so `from` stays selectable.
+        const map: Record<string, number> = { [from]: 1 }
+        for (const r of d) map[r.quote] = r.rate
+        setRates(map)
+      })
       .catch(() => setRates(null))
   }, [from])
 
@@ -596,6 +605,7 @@ function UpcomingTool({ items, locale, onOpen }: {
   items: UpcomingReservation[]; locale: string; onOpen: (tripId: number) => void
 }): React.ReactElement {
   const { t } = useTranslation()
+  const timeFormat = useSettingsStore(s => s.settings.time_format)
   return (
     <div className="tool">
       <div className="tool-head">
@@ -606,10 +616,13 @@ function UpcomingTool({ items, locale, onOpen }: {
       ) : (
         <div className="upc-list">
           {items.map(r => {
-            const when = r.reservation_time || (r.day_date ? r.day_date + 'T00:00:00' : null)
-            const d = when ? new Date(when) : null
-            const dateStr = d ? splitDate(d.toISOString().slice(0, 10), locale) : null
-            const timeStr = r.reservation_time ? new Date(r.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }) : null
+            // Read the date/time straight from the stored string parts. Going through
+            // new Date(...).toISOString() reinterprets the naive local time as UTC and
+            // can roll the displayed day forward/back in non-UTC timezones.
+            const parsed = splitReservationDateTime(r.reservation_time)
+            const datePart = parsed.date || r.day_date || null
+            const dateStr = datePart ? splitDate(datePart, locale) : null
+            const timeStr = parsed.time ? formatTime(parsed.time, locale, timeFormat) : null
             const typeClass = RES_TYPE_CLASS[r.type] || 'other'
             return (
               <div className="upc-item" key={r.id} onClick={() => onOpen(r.trip_id)}>

client/src/pages/LoginPage.test.tsx

@@ -103,6 +103,38 @@ describe('LoginPage', () => {
     });
   });
 
+  describe('FE-PAGE-LOGIN-007: Remember me sends remember_me to the API', () => {
+    it('renders an off toggle and forwards remember_me: true when toggled on', async () => {
+      let capturedBody: Record<string, unknown> | null = null;
+      server.use(
+        http.post('/api/auth/login', async ({ request }) => {
+          capturedBody = (await request.json()) as Record<string, unknown>;
+          return HttpResponse.json({ user: { id: 1, username: 'test', email: 'test@example.com', role: 'user' } });
+        }),
+      );
+
+      const user = userEvent.setup();
+      render(<LoginPage />);
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText(EMAIL_PLACEHOLDER)).toBeInTheDocument();
+      });
+
+      const toggle = screen.getByRole('button', { name: /remember me/i });
+      expect(toggle).toHaveAttribute('aria-pressed', 'false');
+
+      await user.type(screen.getByPlaceholderText(EMAIL_PLACEHOLDER), 'user@example.com');
+      await user.type(screen.getByPlaceholderText(PASSWORD_PLACEHOLDER), 'password123');
+      await user.click(toggle);
+      expect(toggle).toHaveAttribute('aria-pressed', 'true');
+      await user.click(screen.getByRole('button', { name: /sign in/i }));
+
+      await waitFor(() => {
+        expect(capturedBody).toEqual(expect.objectContaining({ remember_me: true }));
+      });
+    });
+  });
+
   describe('FE-PAGE-LOGIN-005: Registration toggle visible', () => {
     it('shows a Register button to switch to registration mode', async () => {
       // Default appConfig has allow_registration: true, has_users: true

client/src/pages/LoginPage.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
 import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield, KeyRound, ChevronDown, Fingerprint } from 'lucide-react'
 import { useLogin } from './login/useLogin'
+import ToggleSwitch from '../components/Settings/ToggleSwitch'
 
 export default function LoginPage(): React.ReactElement {
   const { t, language } = useTranslation()
@@ -9,7 +10,7 @@ export default function LoginPage(): React.ReactElement {
   const {
     navigate,
     mode, setMode,
-    username, setUsername, email, setEmail, password, setPassword, showPassword, setShowPassword,
+    username, setUsername, email, setEmail, password, setPassword, rememberMe, setRememberMe, showPassword, setShowPassword,
     isLoading, error, setError, appConfig, inviteToken,
     langDropdownOpen, setLangDropdownOpen, setLanguageLocal,
     showTakeoff, mfaStep, setMfaStep, mfaToken, setMfaToken, mfaCode, setMfaCode,
@@ -572,7 +573,16 @@ export default function LoginPage(): React.ReactElement {
                   </button>
                 </div>
                 {mode === 'login' && (
-                  <div style={{ textAlign: 'right', marginTop: 6 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginTop: 8 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <ToggleSwitch on={rememberMe} onToggle={() => setRememberMe(!rememberMe)} label={t('login.rememberMe')} />
+                      <span
+                        onClick={() => setRememberMe(!rememberMe)}
+                        style={{ cursor: 'pointer', color: '#374151', fontSize: 12.5, fontWeight: 500, userSelect: 'none' }}
+                      >
+                        {t('login.rememberMe')}
+                      </span>
+                    </div>
                     <button type="button" onClick={() => navigate('/forgot-password')} style={{
                       background: 'none', border: 'none', cursor: 'pointer', padding: 0,
                       color: '#6b7280', fontSize: 12.5, fontWeight: 500, fontFamily: 'inherit',

client/src/pages/SharedTripPage.test.tsx

@@ -405,4 +405,79 @@ describe('SharedTripPage', () => {
       });
     });
   });
+
+  describe('FE-PAGE-SHARED-017: Multi-leg flight shows each leg in the Day Plan', () => {
+    const day = { id: 101, trip_id: 1, day_number: 1, date: '2026-07-01', title: 'Day One', notes: null };
+    const multiLegFlight = {
+      id: 9, trip_id: 1, title: 'Flight', type: 'flight', status: 'confirmed',
+      day_id: 101, end_day_id: 101,
+      reservation_time: '2026-07-01T08:00:00', reservation_end_time: '2026-07-01T20:00:00',
+      metadata: JSON.stringify({
+        legs: [
+          { from: 'FRA', to: 'BER', airline: 'Lufthansa', flight_number: 'LH1', dep_day_id: 101, dep_time: '08:00', arr_day_id: 101, arr_time: '09:00' },
+          { from: 'BER', to: 'HND', airline: 'Lufthansa', flight_number: 'LH2', dep_day_id: 101, dep_time: '10:00', arr_day_id: 101, arr_time: '20:00' },
+        ],
+        departure_airport: 'FRA', arrival_airport: 'HND', airline: 'Lufthansa', flight_number: 'LH1',
+      }),
+    };
+
+    function serveMultiLeg(token: string) {
+      server.use(
+        http.get('/api/shared/:token', ({ params }) => {
+          if (params.token !== token) return;
+          return HttpResponse.json({
+            trip: { id: 1, title: 'Shared Paris Trip', start_date: '2026-07-01', end_date: '2026-07-05' },
+            days: [day],
+            assignments: {},
+            dayNotes: {},
+            places: [],
+            reservations: [multiLegFlight],
+            accommodations: [],
+            packing: [],
+            budget: [],
+            categories: [],
+            permissions: { share_bookings: true, share_packing: false, share_budget: false, share_collab: false },
+            collab: [],
+          });
+        }),
+      );
+    }
+
+    it('renders each leg with its own route, not the overall start/end', async () => {
+      serveMultiLeg('multileg-token');
+      renderSharedTrip('multileg-token');
+
+      await waitFor(() => {
+        expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument();
+      });
+
+      // Expand the day to reveal the timeline
+      fireEvent.click(screen.getByText('Day One'));
+
+      await waitFor(() => {
+        expect(screen.getByText(/FRA → BER/)).toBeInTheDocument();
+      });
+      // Second leg shows its OWN route + flight number (the bug showed the overall route here)
+      expect(screen.getByText(/BER → HND/)).toBeInTheDocument();
+      expect(screen.getByText(/LH2/)).toBeInTheDocument();
+      // The overall start→end must NOT appear on any leg
+      expect(screen.queryByText(/FRA → HND/)).toBeNull();
+    });
+
+    it('lists each leg flight number in the Bookings tab', async () => {
+      serveMultiLeg('multileg-bookings-token');
+      renderSharedTrip('multileg-bookings-token');
+
+      await waitFor(() => {
+        expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /bookings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText(/LH1/)).toBeInTheDocument();
+      });
+      expect(screen.getByText(/LH2/)).toBeInTheDocument();
+    });
+  });
 });

client/src/pages/SharedTripPage.tsx

@@ -11,6 +11,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { Clock, MapPin, FileText, Train, Plane, Bus, Car, Ship, Ticket, Hotel, Map, Luggage, Wallet, MessageCircle } from 'lucide-react'
 import { isDayInAccommodationRange } from '../utils/dayOrder'
 import { getTransportForDay, getMergedItems } from '../utils/dayMerge'
+import { getFlightLegs } from '../utils/flightLegs'
 import { splitReservationDateTime } from '../utils/formatters'
 
 const TRANSPORT_ICONS = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship }
@@ -214,16 +215,24 @@ export default function SharedTripPage() {
                         const TIcon = TRANSPORT_ICONS[r.type] || Ticket
                         const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
                         const time = splitReservationDateTime(r.reservation_time).time ?? ''
+                        const endTime = splitReservationDateTime(r.reservation_end_time).time ?? ''
                         let sub = ''
-                        if (r.type === 'flight') sub = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+                        if (r.type === 'flight') {
+                          if (r.__leg) {
+                            // One leg of a multi-leg flight — show this segment's own route/flight number.
+                            sub = [r.__leg.airline, r.__leg.flight_number, (r.__leg.from || r.__leg.to) ? [r.__leg.from, r.__leg.to].filter(Boolean).join(' → ') : ''].filter(Boolean).join(' · ')
+                          } else {
+                            sub = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+                          }
+                        }
                         else if (r.type === 'train') sub = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : ''].filter(Boolean).join(' · ')
                         return (
-                          <div key={`t-${r.id}`} className="bg-[rgba(59,130,246,0.06)]" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 6, border: '1px solid rgba(59,130,246,0.15)' }}>
+                          <div key={r.__leg ? `t-${r.id}-leg${r.__leg.index}` : `t-${r.id}`} className="bg-[rgba(59,130,246,0.06)]" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 6, border: '1px solid rgba(59,130,246,0.15)' }}>
                             <div className="bg-[rgba(59,130,246,0.12)]" style={{ width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                               <TIcon size={12} color="#3b82f6" />
                             </div>
                             <div style={{ flex: 1, minWidth: 0 }}>
-                              <div className="text-[#111827]" style={{ fontSize: 12, fontWeight: 500 }}>{r.title}{time ? ` · ${time}` : ''}</div>
+                              <div className="text-[#111827]" style={{ fontSize: 12, fontWeight: 500 }}>{r.title}{time ? ` · ${time}${endTime ? `–${endTime}` : ''}` : ''}</div>
                               {sub && <div className="text-[#6b7280]" style={{ fontSize: 10 }}>{sub}</div>}
                             </div>
                           </div>
@@ -284,7 +293,11 @@ export default function SharedTripPage() {
                       {date && <span>{date}</span>}
                       {time && <span>{time}</span>}
                       {r.location && <span>{r.location}</span>}
-                      {meta.airline && <span>{meta.airline} {meta.flight_number || ''}</span>}
+                      {r.type === 'flight'
+                        ? getFlightLegs(r).map((leg, i) => (
+                            <span key={i}>{[leg.airline, leg.flight_number, (leg.from || leg.to) ? [leg.from, leg.to].filter(Boolean).join(' → ') : ''].filter(Boolean).join(' ')}</span>
+                          ))
+                        : meta.airline && <span>{meta.airline} {meta.flight_number || ''}</span>}
                       {meta.train_number && <span>{meta.train_number}</span>}
                     </div>
                   </div>

client/src/pages/TripPlannerPage.test.tsx

@@ -1160,10 +1160,13 @@ describe('TripPlannerPage', () => {
   });
 
   describe('FE-PAGE-PLANNER-041: handleSaveReservation edit path covers update reservation', () => {
-    it('calls onEdit then onSave on ReservationModal to exercise the edit-reservation handler', async () => {
+    it('does not force a day_id on edit so the server keeps/derives it (#1237)', async () => {
       vi.useFakeTimers();
 
       seedTripStore({ id: 42 });
+      // Capture the update payload — tripActions is a snapshot of the store at mount.
+      const updateReservationSpy = vi.fn().mockResolvedValue({ id: 1, day_id: 7 });
+      seedStore(useTripStore, { updateReservation: updateReservationSpy } as any);
 
       renderPlannerPage(42);
 
@@ -1179,20 +1182,24 @@ describe('TripPlannerPage', () => {
         expect(screen.getByTestId('reservations-panel')).toBeInTheDocument();
       });
 
-      // Set editingReservation via captured onEdit prop (inline lambda in JSX)
-      const fakeReservation = { id: 1, trip_id: 42, name: 'Test', type: 'restaurant', status: 'confirmed' };
+      // Edit a reservation that lives on day 7 (no day is selected — Book tab).
+      const fakeReservation = { id: 1, trip_id: 42, name: 'Test', type: 'other', status: 'confirmed', day_id: 7 };
       await act(async () => {
         capturedReservationsPanelProps.current.onEdit?.(fakeReservation);
       });
 
-      // Call onSave — now takes edit path (editingReservation is set)
       await act(async () => {
         await capturedReservationModalProps.current.onSave?.({
           name: 'Updated Booking',
-          type: 'restaurant',
+          type: 'tour',
           status: 'confirmed',
         });
       });
+
+      // The client must NOT send a day_id (no forcing to the selected day, no
+      // stale value) — the server keeps/derives it from the booking's date.
+      expect(updateReservationSpy).toHaveBeenCalled();
+      expect(updateReservationSpy.mock.calls[0][2]).not.toHaveProperty('day_id');
     });
   });
 

client/src/pages/TripPlannerPage.tsx

@@ -25,7 +25,9 @@ import PackingListPanel from '../components/Packing/PackingListPanel'
 import ApplyTemplateButton from '../components/Packing/ApplyTemplateButton'
 import TodoListPanel from '../components/Todo/TodoListPanel'
 import FileManager from '../components/Files/FileManager'
-import CostsPanel from '../components/Budget/CostsPanel'
+import CostsPanel, { ExpenseModal, type ExpensePrefill } from '../components/Budget/CostsPanel'
+import type { BookingExpenseRequest } from '../components/Planner/BookingCostsSection.types'
+import type { BudgetItem } from '../types'
 import CollabPanel from '../components/Collab/CollabPanel'
 import Navbar from '../components/Layout/Navbar'
 import { useToast } from '../components/shared/Toast'
@@ -201,7 +203,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
     expandedDayIds, setExpandedDayIds, mapPlaces,
     route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
     handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
-    handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
+    handleSavePlace, openPlaceEditor, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
     handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
     handleSaveReservation, handleSaveTransport, handleDeleteReservation,
     selectedPlace, dayOrderMap, dayPlaces,
@@ -212,6 +214,18 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const [glMap, setGlMap] = useState<import('mapbox-gl').Map | null>(null)
   const poiPillEnabled = useSettingsStore(s => s.settings.map_poi_pill_enabled) !== false
 
+  // Costs expense editor opened from a booking modal (save-then-open). Lives at the
+  // page level so it has tripMembers / base currency / current user available.
+  const meId = useAuthStore(s => s.user?.id ?? -1)
+  const displayCurrency = useSettingsStore(s => s.settings.default_currency)
+  const costsBase = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
+  const loadBudgetItems = useTripStore(s => s.loadBudgetItems)
+  const [bookingExpense, setBookingExpense] = useState<{ editing: BudgetItem | null; prefill?: ExpensePrefill } | null>(null)
+  const openBookingExpense = (req: BookingExpenseRequest) => {
+    if (req.editItem) setBookingExpense({ editing: req.editItem })
+    else if (req.prefill) setBookingExpense({ editing: null, prefill: req.prefill })
+  }
+
   if (isLoading || !splashDone) {
     return (
       <div className="bg-surface" style={{
@@ -451,7 +465,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                     onPlaceClick={handlePlaceClick}
                     onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true) }}
                     onAssignToDay={handleAssignToDay}
-                    onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true) }}
+                    onEditPlace={(place) => openPlaceEditor(place)}
                     onDeletePlace={(placeId) => handleDeletePlace(placeId)}
                     onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)}
                     onCategoryFilterChange={setMapCategoryFilter}
@@ -517,17 +531,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                 assignments={assignments}
                 reservations={reservations}
                 onClose={() => setSelectedPlaceId(null)}
-                onEdit={() => {
-                  if (selectedAssignmentId) {
-                    const assignmentObj = Object.values(assignments).flat().find(a => a.id === selectedAssignmentId)
-                    const placeWithAssignmentTimes = assignmentObj?.place ? { ...selectedPlace, place_time: assignmentObj.place.place_time, end_time: assignmentObj.place.end_time } : selectedPlace
-                    setEditingPlace(placeWithAssignmentTimes)
-                  } else {
-                    setEditingPlace(selectedPlace)
-                  }
-                  setEditingAssignmentId(selectedAssignmentId || null)
-                  setShowPlaceForm(true)
-                }}
+                onEdit={() => openPlaceEditor(selectedPlace, selectedAssignmentId)}
                 onDelete={() => handleDeletePlace(selectedPlace.id)}
                 onAssignToDay={handleAssignToDay}
                 onRemoveAssignment={handleRemoveAssignment}
@@ -565,18 +569,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                     assignments={assignments}
                     reservations={reservations}
                     onClose={() => setSelectedPlaceId(null)}
-                    onEdit={() => {
-                      if (selectedAssignmentId) {
-                        const assignmentObj = Object.values(assignments).flat().find(a => a.id === selectedAssignmentId)
-                        const placeWithAssignmentTimes = assignmentObj?.place ? { ...selectedPlace, place_time: assignmentObj.place.place_time, end_time: assignmentObj.place.end_time } : selectedPlace
-                        setEditingPlace(placeWithAssignmentTimes)
-                      } else {
-                        setEditingPlace(selectedPlace)
-                      }
-                      setEditingAssignmentId(selectedAssignmentId || null)
-                      setShowPlaceForm(true)
-                      setSelectedPlaceId(null)
-                    }}
+                    onEdit={() => { openPlaceEditor(selectedPlace, selectedAssignmentId); setSelectedPlaceId(null) }}
                     onDelete={() => { handleDeletePlace(selectedPlace.id); setSelectedPlaceId(null) }}
                     onAssignToDay={handleAssignToDay}
                     onRemoveAssignment={handleRemoveAssignment}
@@ -617,7 +610,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   <div style={{ flex: 1, overflow: 'auto' }}>
                     {mobileSidebarOpen === 'left'
                       ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId) }} onReorder={handleReorder} onReorderDays={handleReorderDays} onAddDay={handleAddDay} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }} onRemoveAssignment={handleRemoveAssignment} onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} accommodations={tripAccommodations} routeShown={routeShown} routeProfile={routeProfile} onToggleRoute={() => setRouteShown(v => !v)} onSetRouteProfile={setRouteProfile} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.current = top }} showRouteToolsWhenExpanded />
-                      : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)} onBulkDeleteConfirm={(ids) => confirmDeletePlaces(ids)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} onPlacesFilterChange={setMapPlacesFilter} pushUndo={pushUndo} initialScrollTop={mobilePlacesScrollTopRef.current} onScrollTopChange={(top) => { mobilePlacesScrollTopRef.current = top }} />
+                      : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { openPlaceEditor(place); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)} onBulkDeleteConfirm={(ids) => confirmDeletePlaces(ids)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} onPlacesFilterChange={setMapPlacesFilter} pushUndo={pushUndo} initialScrollTop={mobilePlacesScrollTopRef.current} onScrollTopChange={(top) => { mobilePlacesScrollTopRef.current = top }} />
                     }
                   </div>
                 </div>
@@ -636,6 +629,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
               assignments={assignments}
               files={files}
               onAdd={() => { setEditingTransport(null); setShowTransportModal(true) }}
+              onImport={() => setShowBookingImport(true)}
+              bookingImportAvailable={bookingImportAvailable}
               onAirTrailImport={() => setShowAirTrailImport(true)}
               airTrailAvailable={airTrailAvailable}
               onEdit={(r) => { setEditingTransport(r); setShowTransportModal(true) }}
@@ -701,11 +696,23 @@ export default function TripPlannerPage(): React.ReactElement | null {
         )}
       </div>
 
-      <PlaceFormModal isOpen={showPlaceForm} onClose={() => { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingAssignmentId ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripActions.addCategory?.(cat)} />
+      <PlaceFormModal isOpen={showPlaceForm} onClose={() => { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingPlace ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripActions.addCategory?.(cat)} />
       <TripFormModal isOpen={showTripForm} onClose={() => setShowTripForm(false)} onSave={async (data) => { await tripActions.updateTrip(tripId, data); toast.success(t('trip.toast.tripUpdated')) }} trip={trip} />
       <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
-      <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null); setBookingForAssignmentId(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} defaultAssignmentId={bookingForAssignmentId} />
-      {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} />}
+      <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null); setBookingForAssignmentId(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} defaultAssignmentId={bookingForAssignmentId} onOpenExpense={openBookingExpense} />
+      {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} onOpenExpense={openBookingExpense} />}
+      {bookingExpense && (
+        <ExpenseModal
+          tripId={tripId}
+          base={costsBase}
+          people={tripMembers}
+          me={meId}
+          editing={bookingExpense.editing}
+          prefill={bookingExpense.prefill}
+          onClose={() => setBookingExpense(null)}
+          onSaved={() => { setBookingExpense(null); loadBudgetItems(tripId) }}
+        />
+      )}
       <BookingImportModal isOpen={showBookingImport} onClose={() => setShowBookingImport(false)} tripId={tripId} pushUndo={pushUndo} />
       <AirTrailImportModal isOpen={showAirTrailImport} onClose={() => setShowAirTrailImport(false)} tripId={tripId} pushUndo={pushUndo} />
       <ConfirmDialog

client/src/pages/atlas/useAtlas.ts

@@ -6,6 +6,7 @@ import apiClient, { mapsApi } from '../../api/client'
 import L from 'leaflet'
 import type { GeoJsonFeatureCollection } from '../../types'
 import { A2_TO_A3, type AtlasData, type CountryDetail, type BucketItem } from './atlasModel'
+import { continentForCountry } from '@trek/shared'
 
 function useCountryNames(language: string): (code: string) => string {
   const [resolver, setResolver] = useState<(code: string) => string>(() => (code: string) => code)
@@ -340,7 +341,10 @@ export function useAtlas() {
               </div>
             </div>`
           layer.bindTooltip(tooltipHtml, {
-            sticky: false, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
+            // sticky so the tooltip tracks the cursor; non-sticky anchors it at the feature's
+            // bounds centre, which for countries with overseas territories (e.g. France) lands
+            // far out in the ocean instead of over the area being hovered.
+            sticky: true, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
           })
           layer.on('click', () => {
             if (c.placeCount === 0 && c.tripCount === 0) {
@@ -363,7 +367,7 @@ export function useAtlas() {
             country_layer_by_a2_ref.current[countryCode] = layer
             const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode)
             layer.bindTooltip(`<div style="font-size:12px;font-weight:600">${name}</div>`, {
-              sticky: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
+              sticky: true, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
             })
             layer.on('click', () => handleMarkCountry(countryCode, name))
             layer.on('mouseover', (e) => {
@@ -552,6 +556,20 @@ export function useAtlas() {
     } catch (e ) {
       console.error('Error fitting bounds', e)
      }
+
+    // Mirror the map-click behaviour so an already-visited country can be removed
+    // straight from search. Tiny countries (Vatican City, Singapore) are hard to
+    // hit on the map, so search was the only way in — but it always opened the
+    // "Mark / Bucket" dialog with no Remove option.
+    const visited = data?.countries.find(c => c.code === country_code)
+    if (visited) {
+      if (visited.placeCount === 0 && visited.tripCount === 0) {
+        handleUnmarkCountry(country_code)
+      } else {
+        loadCountryDetailRef.current(country_code)
+      }
+      return
+    }
     setConfirmAction({ type: 'choose', code: country_code, name: country_label })
   }
 
@@ -565,10 +583,12 @@ export function useAtlas() {
       apiClient.post(`/addons/atlas/country/${code}/mark`).catch(() => {})
       setData(prev => {
         if (!prev || prev.countries.find(c => c.code === code)) return prev
+        const cont = continentForCountry(code)
         return {
           ...prev,
           countries: [...prev.countries, { code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }],
           stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 },
+          continents: { ...prev.continents, [cont]: (prev.continents?.[cont] || 0) + 1 },
         }
       })
     } else {
@@ -579,10 +599,12 @@ export function useAtlas() {
         if (!prev) return prev
         const c = prev.countries.find(c => c.code === code)
         if (!c || c.placeCount > 0 || c.tripCount > 0) return prev
+        const cont = continentForCountry(code)
         return {
           ...prev,
           countries: prev.countries.filter(c => c.code !== code),
           stats: { ...prev.stats, totalCountries: Math.max(0, prev.stats.totalCountries - 1) },
+          continents: { ...prev.continents, [cont]: Math.max(0, (prev.continents?.[cont] || 0) - 1) },
         }
       })
       setVisitedRegions(prev => {

client/src/pages/login/useLogin.ts

@@ -37,6 +37,7 @@ export function useLogin() {
   const [username, setUsername] = useState<string>('')
   const [email, setEmail] = useState<string>('')
   const [password, setPassword] = useState<string>('')
+  const [rememberMe, setRememberMe] = useState<boolean>(false)
   const [showPassword, setShowPassword] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
@@ -242,7 +243,7 @@ export function useLogin() {
           setIsLoading(false)
           return
         }
-        const mfaResult = await completeMfaLogin(mfaToken, mfaCode)
+        const mfaResult = await completeMfaLogin(mfaToken, mfaCode, rememberMe)
         if ('user' in mfaResult && mfaResult.user?.must_change_password) {
           setSavedLoginPassword(password)
           setPasswordChangeStep(true)
@@ -258,7 +259,7 @@ export function useLogin() {
         if (password.length < 8) { setError(t('login.passwordMinLength')); setIsLoading(false); return }
         await register(username, email, password, inviteToken || undefined)
       } else {
-        const result = await login(email, password)
+        const result = await login(email, password, rememberMe)
         if ('mfa_required' in result && result.mfa_required && 'mfa_token' in result) {
           setMfaToken(result.mfa_token)
           setMfaStep(true)
@@ -289,7 +290,7 @@ export function useLogin() {
   return {
     navigate,
     mode, setMode,
-    username, setUsername, email, setEmail, password, setPassword, showPassword, setShowPassword,
+    username, setUsername, email, setEmail, password, setPassword, rememberMe, setRememberMe, showPassword, setShowPassword,
     isLoading, error, setError, appConfig, inviteToken,
     langDropdownOpen, setLangDropdownOpen, setLanguageLocal,
     showTakeoff, mfaStep, setMfaStep, mfaToken, setMfaToken, mfaCode, setMfaCode,

client/src/pages/tripPlanner/tripPlannerModel.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { resolvePoolAssignmentId } from './tripPlannerModel'
+import { buildAssignment, buildPlace } from '../../../tests/helpers/factories'
+
+describe('resolvePoolAssignmentId', () => {
+  it('returns the lone assignment id when the place is assigned to exactly one day', () => {
+    const place = buildPlace({ id: 7 })
+    const assignment = buildAssignment({ id: 42, day_id: 3, place })
+    const assignments = { 3: [assignment], 4: [buildAssignment({ id: 99, day_id: 4 })] }
+    expect(resolvePoolAssignmentId(assignments, 7)).toBe(42)
+  })
+
+  it('returns null when the place is not assigned to any day', () => {
+    const assignments = { 3: [buildAssignment({ id: 99, day_id: 3 })] }
+    expect(resolvePoolAssignmentId(assignments, 7)).toBeNull()
+  })
+
+  it('returns null when the place is assigned to multiple days (ambiguous time)', () => {
+    const assignments = {
+      3: [buildAssignment({ id: 1, day_id: 3, place: buildPlace({ id: 7 }) })],
+      4: [buildAssignment({ id: 2, day_id: 4, place: buildPlace({ id: 7 }) })],
+    }
+    expect(resolvePoolAssignmentId(assignments, 7)).toBeNull()
+  })
+})

client/src/pages/tripPlanner/tripPlannerModel.ts

@@ -0,0 +1,24 @@
+/**
+ * Trip planner pure helpers — React/IO-free logic shared by the data hook
+ * (useTripPlanner) and kept here so it can be unit-tested in isolation. Part of
+ * the FE "page = wiring container + data hook" convention (see PATTERN.md).
+ */
+
+import type { Assignment } from '../../types'
+
+/**
+ * Resolve the day-assignment to use when a place is edited from the Places pool,
+ * where no day is in context. Times live per day-assignment (#1247), so we can
+ * only hydrate/persist a place's time when it is assigned to exactly one day.
+ * Returns that assignment's id, or null when the place has 0 or 2+ assignments
+ * (ambiguous — the modal then hides the time fields).
+ */
+export function resolvePoolAssignmentId(
+  assignments: Record<string | number, Assignment[]>,
+  placeId: number,
+): number | null {
+  const matches = Object.values(assignments)
+    .flat()
+    .filter((a) => a.place?.id === placeId)
+  return matches.length === 1 ? matches[0].id : null
+}

client/src/pages/tripPlanner/useTripPlanner.ts

@@ -18,6 +18,7 @@ import { usePlaceSelection } from '../../hooks/usePlaceSelection'
 import { usePlannerHistory } from '../../hooks/usePlannerHistory'
 import { useAirtrailConnection } from '../../hooks/useAirtrailConnection'
 import type { Accommodation, TripMember, Day, Place, Reservation } from '../../types'
+import { resolvePoolAssignmentId } from './tripPlannerModel'
 
 /**
  * Trip planner page logic — the big one. Owns the trip store wiring, addon
@@ -221,11 +222,12 @@ export function useTripPlanner() {
     }
   }, [isLoading, places])
 
-  // Load trip + files (needed for place inspector file section)
+  // Load the trip. loadTrip hydrates every trip-scoped slice (days, places,
+  // packing, todo, budget, reservations, files) so offline hydration is uniform
+  // and there's no cross-trip bleed; members/accommodations load alongside.
   useEffect(() => {
     if (tripId) {
       tripActions.loadTrip(tripId).catch(() => { toast.error(t('trip.toast.loadError')); navigate('/dashboard') })
-      tripActions.loadFiles(tripId)
       loadAccommodations()
       if (!navigator.onLine) {
         offlineDb.tripMembers.where('tripId').equals(Number(tripId)).toArray()
@@ -240,13 +242,6 @@ export function useTripPlanner() {
     }
   }, [tripId])
 
-  useEffect(() => {
-    if (tripId) {
-      tripActions.loadReservations(tripId)
-      tripActions.loadBudgetItems?.(tripId)
-    }
-  }, [tripId])
-
   useTripWebSocket(tripId)
 
   const [mapCategoryFilter, setMapCategoryFilter] = useState<Set<string>>(new Set())
@@ -429,6 +424,16 @@ export function useTripPlanner() {
     }
   }, [editingPlace, editingAssignmentId, tripId, toast, pushUndo])
 
+  // Open the place editor from any entry point (Places pool, inspector, map).
+  // Times live per day-assignment, so when no day is in context resolve the
+  // place's lone assignment to hydrate & persist its times; with 0 or 2+
+  // assignments the time is ambiguous and the modal hides the fields (#1247).
+  const openPlaceEditor = useCallback((place: Place, preferredAssignmentId: number | null = null) => {
+    setEditingPlace(place)
+    setEditingAssignmentId(preferredAssignmentId ?? resolvePoolAssignmentId(assignments, place.id))
+    setShowPlaceForm(true)
+  }, [assignments])
+
   const handleDeletePlace = useCallback((placeId) => {
     setDeletePlaceId(placeId)
   }, [])
@@ -574,7 +579,12 @@ export function useTripPlanner() {
   const handleSaveReservation = async (data: Record<string, string | number | null> & { title: string }) => {
     try {
       if (editingReservation) {
-        const r = await tripActions.updateReservation(tripId, editingReservation.id, { ...data, day_id: selectedDayId || null })
+        // Don't force a day here. The old code pinned it to the (often empty)
+        // selected day, which dropped the booking out of the Plan; preserving the
+        // old day_id instead left it stale when the date changed. Omitting it lets
+        // the server derive the day from the booking's date, or keep the current
+        // one when there is no date.
+        const r = await tripActions.updateReservation(tripId, editingReservation.id, data)
         toast.success(t('trip.toast.reservationUpdated'))
         setShowReservationModal(false)
         setEditingReservation(null)
@@ -691,7 +701,7 @@ export function useTripPlanner() {
     expandedDayIds, setExpandedDayIds, mapPlaces,
     route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
     handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
-    handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
+    handleSavePlace, openPlaceEditor, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
     handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
     handleSaveReservation, handleSaveTransport, handleDeleteReservation,
     selectedPlace, dayOrderMap, dayPlaces,

client/src/repo/accommodationRepo.ts

@@ -1,16 +1,20 @@
 import { accommodationsApi } from '../api/client'
 import { offlineDb, upsertAccommodations } from '../db/offlineDb'
+import { onlineThenCache } from './withOfflineFallback'
 import type { Accommodation } from '../types'
 
 export const accommodationRepo = {
   async list(tripId: number | string): Promise<{ accommodations: Accommodation[] }> {
-    if (!navigator.onLine) {
-      const accommodations = await offlineDb.accommodations
-        .where('trip_id').equals(Number(tripId)).toArray()
-      return { accommodations }
-    }
-    const result = await accommodationsApi.list(tripId)
-    upsertAccommodations(result.accommodations || []).catch(() => {})
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await accommodationsApi.list(tripId)
+        upsertAccommodations(result.accommodations || []).catch(() => {})
+        return result
+      },
+      async () => ({
+        accommodations: await offlineDb.accommodations
+          .where('trip_id').equals(Number(tripId)).toArray(),
+      }),
+    )
   },
 }

client/src/repo/budgetRepo.ts

@@ -1,18 +1,20 @@
 import { budgetApi } from '../api/client'
 import { offlineDb, upsertBudgetItems } from '../db/offlineDb'
+import { onlineThenCache } from './withOfflineFallback'
 import type { BudgetItem } from '../types'
 
 export const budgetRepo = {
   async list(tripId: number | string): Promise<{ items: BudgetItem[] }> {
-    if (!navigator.onLine) {
-      const cached = await offlineDb.budgetItems
-        .where('trip_id')
-        .equals(Number(tripId))
-        .toArray()
-      return { items: cached }
-    }
-    const result = await budgetApi.list(tripId)
-    upsertBudgetItems(result.items)
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await budgetApi.list(tripId)
+        upsertBudgetItems(result.items)
+        return result
+      },
+      async () => ({
+        items: await offlineDb.budgetItems
+          .where('trip_id').equals(Number(tripId)).toArray(),
+      }),
+    )
   },
 }

client/src/repo/dayRepo.ts

@@ -1,18 +1,22 @@
 import { daysApi } from '../api/client'
 import { offlineDb, upsertDays } from '../db/offlineDb'
+import { onlineThenCache } from './withOfflineFallback'
 import type { Day } from '../types'
 
 export const dayRepo = {
   async list(tripId: number | string): Promise<{ days: Day[] }> {
-    if (!navigator.onLine) {
-      const cached = await offlineDb.days
-        .where('trip_id')
-        .equals(Number(tripId))
-        .sortBy('day_number' as keyof Day)
-      return { days: cached as Day[] }
-    }
-    const result = await daysApi.list(tripId)
-    upsertDays(result.days)
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await daysApi.list(tripId)
+        upsertDays(result.days)
+        return result
+      },
+      async () => ({
+        days: (await offlineDb.days
+          .where('trip_id')
+          .equals(Number(tripId))
+          .sortBy('day_number' as keyof Day)) as Day[],
+      }),
+    )
   },
 }

client/src/repo/fileRepo.ts

@@ -1,18 +1,20 @@
 import { filesApi } from '../api/client'
 import { offlineDb, upsertTripFiles } from '../db/offlineDb'
+import { onlineThenCache } from './withOfflineFallback'
 import type { TripFile } from '../types'
 
 export const fileRepo = {
   async list(tripId: number | string): Promise<{ files: TripFile[] }> {
-    if (!navigator.onLine) {
-      const cached = await offlineDb.tripFiles
-        .where('trip_id')
-        .equals(Number(tripId))
-        .toArray()
-      return { files: cached }
-    }
-    const result = await filesApi.list(tripId)
-    upsertTripFiles(result.files)
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await filesApi.list(tripId)
+        upsertTripFiles(result.files)
+        return result
+      },
+      async () => ({
+        files: await offlineDb.tripFiles
+          .where('trip_id').equals(Number(tripId)).toArray(),
+      }),
+    )
   },
 }

client/src/repo/packingRepo.ts

@@ -1,25 +1,27 @@
 import { packingApi } from '../api/client'
 import { offlineDb, upsertPackingItems } from '../db/offlineDb'
-import { mutationQueue, generateUUID } from '../sync/mutationQueue'
+import { mutationQueue, generateUUID, nextTempId } from '../sync/mutationQueue'
+import { onlineThenCache } from './withOfflineFallback'
 import type { PackingItem } from '../types'
 
 export const packingRepo = {
   async list(tripId: number | string): Promise<{ items: PackingItem[] }> {
-    if (!navigator.onLine) {
-      const cached = await offlineDb.packingItems
-        .where('trip_id')
-        .equals(Number(tripId))
-        .toArray()
-      return { items: cached }
-    }
-    const result = await packingApi.list(tripId)
-    upsertPackingItems(result.items)
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await packingApi.list(tripId)
+        upsertPackingItems(result.items)
+        return result
+      },
+      async () => ({
+        items: await offlineDb.packingItems
+          .where('trip_id').equals(Number(tripId)).toArray(),
+      }),
+    )
   },
 
   async create(tripId: number | string, data: Record<string, unknown> & { name: string }): Promise<{ item: PackingItem }> {
     if (!navigator.onLine) {
-      const tempId = -(Date.now())
+      const tempId = nextTempId()
       const tempItem: PackingItem = {
         ...(data as Partial<PackingItem>),
         id: tempId,
@@ -51,13 +53,16 @@ export const packingRepo = {
       const optimistic: PackingItem = { ...(existing ?? {} as PackingItem), ...(data as Partial<PackingItem>), id }
       await offlineDb.packingItems.put(optimistic)
       const mutId = generateUUID()
+      const isTemp = id < 0
       await mutationQueue.enqueue({
         id: mutId,
         tripId: Number(tripId),
         method: 'PUT',
-        url: `/trips/${tripId}/packing/${id}`,
+        url: isTemp ? `/trips/${tripId}/packing/{id}` : `/trips/${tripId}/packing/${id}`,
         body: data,
         resource: 'packingItems',
+        entityId: id,
+        ...(isTemp ? { tempEntityId: id } : {}),
       })
       return { item: optimistic }
     }
@@ -70,14 +75,16 @@ export const packingRepo = {
     if (!navigator.onLine) {
       await offlineDb.packingItems.delete(id)
       const mutId = generateUUID()
+      const isTemp = id < 0
       await mutationQueue.enqueue({
         id: mutId,
         tripId: Number(tripId),
         method: 'DELETE',
-        url: `/trips/${tripId}/packing/${id}`,
+        url: isTemp ? `/trips/${tripId}/packing/{id}` : `/trips/${tripId}/packing/${id}`,
         body: undefined,
         resource: 'packingItems',
         entityId: id,
+        ...(isTemp ? { tempEntityId: id } : {}),
       })
       return { success: true }
     }

client/src/repo/placeRepo.ts

@@ -1,25 +1,27 @@
 import { placesApi } from '../api/client'
 import { offlineDb, upsertPlaces } from '../db/offlineDb'
-import { mutationQueue, generateUUID } from '../sync/mutationQueue'
+import { mutationQueue, generateUUID, nextTempId } from '../sync/mutationQueue'
+import { onlineThenCache } from './withOfflineFallback'
 import type { Place } from '../types'
 
 export const placeRepo = {
   async list(tripId: number | string, params?: Record<string, unknown>): Promise<{ places: Place[] }> {
-    if (!navigator.onLine) {
-      const cached = await offlineDb.places
-        .where('trip_id')
-        .equals(Number(tripId))
-        .toArray()
-      return { places: cached }
-    }
-    const result = await placesApi.list(tripId, params)
-    upsertPlaces(result.places)
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await placesApi.list(tripId, params)
+        upsertPlaces(result.places)
+        return result
+      },
+      async () => ({
+        places: await offlineDb.places
+          .where('trip_id').equals(Number(tripId)).toArray(),
+      }),
+    )
   },
 
   async create(tripId: number | string, data: Record<string, unknown> & { name: string }): Promise<{ place: Place }> {
     if (!navigator.onLine) {
-      const tempId = -(Date.now())
+      const tempId = nextTempId()
       const tempPlace: Place = {
         ...(data as Partial<Place>),
         id: tempId,
@@ -50,13 +52,16 @@ export const placeRepo = {
       const optimistic: Place = { ...(existing ?? {} as Place), ...(data as Partial<Place>), id: Number(id) }
       await offlineDb.places.put(optimistic)
       const mutId = generateUUID()
+      const isTemp = Number(id) < 0
       await mutationQueue.enqueue({
         id: mutId,
         tripId: Number(tripId),
         method: 'PUT',
-        url: `/trips/${tripId}/places/${id}`,
+        url: isTemp ? `/trips/${tripId}/places/{id}` : `/trips/${tripId}/places/${id}`,
         body: data,
         resource: 'places',
+        entityId: Number(id),
+        ...(isTemp ? { tempEntityId: Number(id) } : {}),
       })
       return { place: optimistic }
     }
@@ -69,14 +74,16 @@ export const placeRepo = {
     if (!navigator.onLine) {
       await offlineDb.places.delete(Number(id))
       const mutId = generateUUID()
+      const isTemp = Number(id) < 0
       await mutationQueue.enqueue({
         id: mutId,
         tripId: Number(tripId),
         method: 'DELETE',
-        url: `/trips/${tripId}/places/${id}`,
+        url: isTemp ? `/trips/${tripId}/places/{id}` : `/trips/${tripId}/places/${id}`,
         body: undefined,
         resource: 'places',
         entityId: Number(id),
+        ...(isTemp ? { tempEntityId: Number(id) } : {}),
       })
       return { success: true }
     }
@@ -90,14 +97,16 @@ export const placeRepo = {
       await offlineDb.places.bulkDelete(ids)
       for (const id of ids) {
         const mutId = generateUUID()
+        const isTemp = id < 0
         await mutationQueue.enqueue({
           id: mutId,
           tripId: Number(tripId),
           method: 'DELETE',
-          url: `/trips/${tripId}/places/${id}`,
+          url: isTemp ? `/trips/${tripId}/places/{id}` : `/trips/${tripId}/places/${id}`,
           body: undefined,
           resource: 'places',
           entityId: id,
+          ...(isTemp ? { tempEntityId: id } : {}),
         })
       }
       return { deleted: ids, count: ids.length }

client/src/repo/reservationRepo.ts

@@ -1,18 +1,20 @@
 import { reservationsApi } from '../api/client'
 import { offlineDb, upsertReservations } from '../db/offlineDb'
+import { onlineThenCache } from './withOfflineFallback'
 import type { Reservation } from '../types'
 
 export const reservationRepo = {
   async list(tripId: number | string): Promise<{ reservations: Reservation[] }> {
-    if (!navigator.onLine) {
-      const cached = await offlineDb.reservations
-        .where('trip_id')
-        .equals(Number(tripId))
-        .toArray()
-      return { reservations: cached }
-    }
-    const result = await reservationsApi.list(tripId)
-    upsertReservations(result.reservations)
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await reservationsApi.list(tripId)
+        upsertReservations(result.reservations)
+        return result
+      },
+      async () => ({
+        reservations: await offlineDb.reservations
+          .where('trip_id').equals(Number(tripId)).toArray(),
+      }),
+    )
   },
 }

client/src/repo/todoRepo.ts

@@ -1,18 +1,20 @@
 import { todoApi } from '../api/client'
 import { offlineDb, upsertTodoItems } from '../db/offlineDb'
+import { onlineThenCache } from './withOfflineFallback'
 import type { TodoItem } from '../types'
 
 export const todoRepo = {
   async list(tripId: number | string): Promise<{ items: TodoItem[] }> {
-    if (!navigator.onLine) {
-      const cached = await offlineDb.todoItems
-        .where('trip_id')
-        .equals(Number(tripId))
-        .toArray()
-      return { items: cached }
-    }
-    const result = await todoApi.list(tripId)
-    upsertTodoItems(result.items)
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await todoApi.list(tripId)
+        upsertTodoItems(result.items)
+        return result
+      },
+      async () => ({
+        items: await offlineDb.todoItems
+          .where('trip_id').equals(Number(tripId)).toArray(),
+      }),
+    )
   },
 }

client/src/repo/tripRepo.ts

@@ -1,33 +1,42 @@
 import { tripsApi } from '../api/client'
 import { offlineDb, upsertTrip } from '../db/offlineDb'
+import { onlineThenCache } from './withOfflineFallback'
 import type { Trip } from '../types'
 
 export const tripRepo = {
   async list(): Promise<{ trips: Trip[]; archivedTrips: Trip[] }> {
-    if (!navigator.onLine) {
-      const all = await offlineDb.trips.toArray()
-      return {
-        trips: all.filter(t => !t.is_archived),
-        archivedTrips: all.filter(t => t.is_archived),
-      }
-    }
-    const [active, archived] = await Promise.all([
-      tripsApi.list(),
-      tripsApi.list({ archived: 1 }),
-    ])
-    active.trips.forEach(t => upsertTrip(t))
-    archived.trips.forEach(t => upsertTrip(t))
-    return { trips: active.trips, archivedTrips: archived.trips }
+    return onlineThenCache(
+      async () => {
+        const [active, archived] = await Promise.all([
+          tripsApi.list(),
+          tripsApi.list({ archived: 1 }),
+        ])
+        active.trips.forEach(t => upsertTrip(t))
+        archived.trips.forEach(t => upsertTrip(t))
+        return { trips: active.trips, archivedTrips: archived.trips }
+      },
+      async () => {
+        const all = await offlineDb.trips.toArray()
+        return {
+          trips: all.filter(t => !t.is_archived),
+          archivedTrips: all.filter(t => t.is_archived),
+        }
+      },
+    )
   },
 
   async get(tripId: number | string): Promise<{ trip: Trip }> {
-    if (!navigator.onLine) {
-      const cached = await offlineDb.trips.get(Number(tripId))
-      if (cached) return { trip: cached }
-      throw new Error('No cached trip data available offline')
-    }
-    const result = await tripsApi.get(tripId)
-    upsertTrip(result.trip)
-    return result
+    return onlineThenCache(
+      async () => {
+        const result = await tripsApi.get(tripId)
+        upsertTrip(result.trip)
+        return result
+      },
+      async () => {
+        const cached = await offlineDb.trips.get(Number(tripId))
+        if (cached) return { trip: cached }
+        throw new Error('No cached trip data available offline')
+      },
+    )
   },
 }

client/src/repo/withOfflineFallback.ts

@@ -0,0 +1,48 @@
+/**
+ * True when an error means the request never reached the server — a network-level
+ * failure (offline, captive portal, proxy auth wall, dropped connection, CORS).
+ * Axios sets `response` only when the server actually replied; its absence (on an
+ * Axios error) means we never got one. A real HTTP error (4xx/5xx) HAS a response
+ * and must NOT be treated as a network failure — the server spoke, so the caller
+ * needs to see it. Non-Axios errors are surfaced too.
+ */
+function isNetworkError(err: unknown): boolean {
+  const e = err as { isAxiosError?: boolean; response?: unknown } | null
+  return !!e && e.isAxiosError === true && e.response == null
+}
+
+/**
+ * Read-through cache pattern shared by every repo's read methods.
+ *
+ * Reads degrade to the local Dexie cache in two situations:
+ *   1. The browser reports it is offline (`navigator.onLine` false) — skip the
+ *      doomed request entirely.
+ *   2. The browser *thinks* it is online but the request fails at the network
+ *      level — a lying `navigator.onLine` on a captive portal, a dropped
+ *      connection (H2). Rather than surfacing that (which blanks the trip even
+ *      though a good cached copy exists), we fall back to the cache.
+ *
+ * We intentionally gate only on `navigator.onLine`, NOT the connectivity probe:
+ * the probe is a coarse global flag, and a single failed health check would
+ * otherwise force every read to the (possibly empty) cache even when the request
+ * itself would succeed. The network-error catch below covers the captive-portal
+ * case the probe was meant to.
+ *
+ * A genuine HTTP error (404/403/500 — the server responded) is NOT swallowed: it
+ * is rethrown so callers can set error state, navigate away, etc.
+ *
+ * Writes must NOT use this — they go through the mutation queue so failures are
+ * surfaced and retried, not silently swallowed.
+ */
+export async function onlineThenCache<T>(
+  onlineFn: () => Promise<T>,
+  cacheFn: () => Promise<T>,
+): Promise<T> {
+  if (!navigator.onLine) return cacheFn()
+  try {
+    return await onlineFn()
+  } catch (err) {
+    if (isNetworkError(err)) return cacheFn()
+    throw err
+  }
+}

client/src/store/authStore.ts

@@ -5,7 +5,9 @@ import { connect, disconnect } from '../api/websocket'
 import type { User } from '../types'
 import { getApiErrorMessage } from '../types'
 import { tripSyncManager } from '../sync/tripSyncManager'
-import { clearAll } from '../db/offlineDb'
+import { reopenForUser, deleteCurrentUserDb } from '../db/offlineDb'
+import { setAuthed } from '../sync/authGate'
+import { unregisterSyncTriggers } from '../sync/syncTriggers'
 import { useSystemNoticeStore } from './systemNoticeStore.js'
 
 interface AuthResponse {
@@ -37,10 +39,10 @@ interface AuthState {
   placesAutocompleteEnabled: boolean
   placesDetailsEnabled: boolean
 
-  login: (email: string, password: string) => Promise<LoginResult>
-  completeMfaLogin: (mfaToken: string, code: string) => Promise<AuthResponse>
+  login: (email: string, password: string, rememberMe?: boolean) => Promise<LoginResult>
+  completeMfaLogin: (mfaToken: string, code: string, rememberMe?: boolean) => Promise<AuthResponse>
   register: (username: string, email: string, password: string, invite_token?: string) => Promise<AuthResponse>
-  logout: () => void
+  logout: () => Promise<void>
   /** Pass `{ silent: true }` to refresh the user without toggling global isLoading (avoids unmounting protected routes). */
   loadUser: (opts?: { silent?: boolean }) => Promise<void>
   updateMapsKey: (key: string | null) => Promise<void>
@@ -65,6 +67,19 @@ interface AuthState {
 // Sequence counter to prevent stale loadUser responses from overwriting fresh auth state
 let authSequence = 0
 
+/**
+ * Mark the session authenticated and point the offline DB at this user's scoped
+ * database before any background sync runs, so cached data never crosses users.
+ */
+async function onAuthSuccess(userId: number): Promise<void> {
+  setAuthed(true)
+  try {
+    await reopenForUser(userId)
+  } catch (err) {
+    console.error('[auth] failed to open user-scoped offline DB', err)
+  }
+}
+
 export const useAuthStore = create<AuthState>()(
   persist(
   (set, get) => ({
@@ -84,11 +99,11 @@ export const useAuthStore = create<AuthState>()(
   placesAutocompleteEnabled: true,
   placesDetailsEnabled: true,
 
-  login: async (email: string, password: string) => {
+  login: async (email: string, password: string, rememberMe?: boolean) => {
     authSequence++
     set({ isLoading: true, error: null })
     try {
-      const data = await authApi.login({ email, password }) as AuthResponse & { mfa_required?: boolean; mfa_token?: string }
+      const data = await authApi.login({ email, password, remember_me: rememberMe }) as AuthResponse & { mfa_required?: boolean; mfa_token?: string }
       if (data.mfa_required && data.mfa_token) {
         set({ isLoading: false, error: null })
         return { mfa_required: true as const, mfa_token: data.mfa_token }
@@ -99,6 +114,7 @@ export const useAuthStore = create<AuthState>()(
         isLoading: false,
         error: null,
       })
+      await onAuthSuccess(data.user.id)
       connect()
       tripSyncManager.syncAll().catch(console.error)
       if (!data.user?.must_change_password) {
@@ -112,17 +128,18 @@ export const useAuthStore = create<AuthState>()(
     }
   },
 
-  completeMfaLogin: async (mfaToken: string, code: string) => {
+  completeMfaLogin: async (mfaToken: string, code: string, rememberMe?: boolean) => {
     authSequence++
     set({ isLoading: true, error: null })
     try {
-      const data = await authApi.verifyMfaLogin({ mfa_token: mfaToken, code: code.replace(/\s/g, '') })
+      const data = await authApi.verifyMfaLogin({ mfa_token: mfaToken, code: code.replace(/\s/g, ''), remember_me: rememberMe })
       set({
         user: data.user,
         isAuthenticated: true,
         isLoading: false,
         error: null,
       })
+      await onAuthSuccess(data.user.id)
       connect()
       tripSyncManager.syncAll().catch(console.error)
       if (!data.user?.must_change_password) {
@@ -147,6 +164,7 @@ export const useAuthStore = create<AuthState>()(
         isLoading: false,
         error: null,
       })
+      await onAuthSuccess(data.user.id)
       connect()
       tripSyncManager.syncAll().catch(console.error)
       useSystemNoticeStore.getState().fetch()
@@ -158,18 +176,27 @@ export const useAuthStore = create<AuthState>()(
     }
   },
 
-  logout: () => {
+  logout: async () => {
+    // 1. Gate first so any in-flight flush/syncAll bails before we wipe the DB.
+    setAuthed(false)
+    set({ isAuthenticated: false })
+    // 2. Stop background sync triggers (30s interval, WS pre-reconnect hook, listeners).
+    unregisterSyncTriggers()
+    // 3. Tear down the live connection.
     disconnect()
     useSystemNoticeStore.getState().reset()
-    // Tell server to clear the httpOnly cookie
-    fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
-    // Clear service worker caches containing sensitive data
+    // 4. Tell server to clear the httpOnly cookie (best-effort).
+    await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
+    // 5. Clear service worker caches containing sensitive data.
     if ('caches' in window) {
-      caches.delete('api-data').catch(() => {})
-      caches.delete('user-uploads').catch(() => {})
+      await Promise.all([
+        caches.delete('api-data').catch(() => {}),
+        caches.delete('user-uploads').catch(() => {}),
+      ])
     }
-    // Purge all cached trip data from IndexedDB
-    clearAll().catch(console.error)
+    // 6. Delete this user's scoped IndexedDB and return to the anonymous DB.
+    await deleteCurrentUserDb().catch(console.error)
+    // 7. Finish clearing auth state.
     set({
       user: null,
       isAuthenticated: false,
@@ -189,6 +216,7 @@ export const useAuthStore = create<AuthState>()(
         isAuthenticated: true,
         isLoading: false,
       })
+      await onAuthSuccess(data.user.id)
       connect()
     } catch (err: unknown) {
       if (seq !== authSequence) return // stale response — ignore
@@ -282,6 +310,7 @@ export const useAuthStore = create<AuthState>()(
         demoMode: true,
         error: null,
       })
+      await onAuthSuccess(data.user.id)
       connect()
       return data
     } catch (err: unknown) {

client/src/store/slices/remoteEventHandler.ts

@@ -193,25 +193,34 @@ export function handleRemoteEvent(set: SetState, get: GetState, event: WebSocket
 
       // Assignments
       case 'assignment:created': {
-        const dayKey = String((payload.assignment as Assignment).day_id)
-        const existing = (state.assignments[dayKey] || [])
-        const placeId = (payload.assignment as Assignment).place?.id || (payload.assignment as Assignment).place_id
-        if (existing.some(a => a.id === (payload.assignment as Assignment).id || (placeId && a.place?.id === placeId))) {
-          const hasTempVersion = existing.some(a => a.id < 0 && a.place?.id === placeId)
-          if (hasTempVersion) {
-            return {
-              assignments: {
-                ...state.assignments,
-                [dayKey]: existing.map(a => (a.id < 0 && a.place?.id === placeId) ? payload.assignment as Assignment : a),
-              }
-            }
+        const incoming = payload.assignment as Assignment
+        const dayKey = String(incoming.day_id)
+        const existing = state.assignments[dayKey] || []
+        const placeId = incoming.place?.id ?? incoming.place_id
+
+        // Already have this exact assignment id → duplicate broadcast or the
+        // echo of an already-committed assignment. No-op.
+        if (existing.some(a => a.id === incoming.id)) return {}
+
+        // Reconcile our own optimistic create: replace the temp (negative-id)
+        // assignment of the same place on this day with the real one. Guarded on
+        // a real placeId so an assignment with no place can never collapse onto
+        // another place-less one (undefined === undefined).
+        if (placeId != null) {
+          const tempIdx = existing.findIndex(a => a.id < 0 && a.place?.id === placeId)
+          if (tempIdx !== -1) {
+            const next = existing.slice()
+            next[tempIdx] = incoming
+            return { assignments: { ...state.assignments, [dayKey]: next } }
           }
-          return {}
         }
+
+        // Genuinely new — including a legitimate second assignment of a place
+        // already on this day (no temp version to reconcile). Append.
         return {
           assignments: {
             ...state.assignments,
-            [dayKey]: [...existing, payload.assignment as Assignment],
+            [dayKey]: [...existing, incoming],
           }
         }
       }

client/src/store/tripStore.ts

@@ -7,6 +7,9 @@ import { dayRepo } from '../repo/dayRepo'
 import { placeRepo } from '../repo/placeRepo'
 import { packingRepo } from '../repo/packingRepo'
 import { todoRepo } from '../repo/todoRepo'
+import { budgetRepo } from '../repo/budgetRepo'
+import { reservationRepo } from '../repo/reservationRepo'
+import { fileRepo } from '../repo/fileRepo'
 import { createPlacesSlice } from './slices/placesSlice'
 import { createAssignmentsSlice } from './slices/assignmentsSlice'
 import { createDaysSlice } from './slices/daysSlice'
@@ -61,7 +64,9 @@ export interface TripStoreState
 
   setSelectedDay: (dayId: number | null) => void
   handleRemoteEvent: (event: WebSocketEvent) => void
+  resetTrip: () => void
   loadTrip: (tripId: number | string) => Promise<void>
+  hydrateActiveTrip: (tripId: number | string) => Promise<void>
   refreshDays: (tripId: number | string) => Promise<void>
   updateTrip: (tripId: number | string, data: Partial<Trip>) => Promise<Trip>
   addTag: (data: Partial<Tag> & { name: string }) => Promise<Tag>
@@ -89,15 +94,40 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
 
   handleRemoteEvent: (event: WebSocketEvent) => handleRemoteEvent(set, get, event),
 
+  // Clear every trip-scoped slice so switching trips (or losing access to one)
+  // can never leave a previous trip's data visible. Global tags/categories are
+  // left intact. Called at the top of loadTrip.
+  resetTrip: () => set({
+    trip: null,
+    days: [],
+    places: [],
+    assignments: {},
+    dayNotes: {},
+    packingItems: [],
+    todoItems: [],
+    budgetItems: [],
+    files: [],
+    reservations: [],
+    selectedDayId: null,
+    error: null,
+  }),
+
   loadTrip: async (tripId: number | string) => {
+    get().resetTrip()
     set({ isLoading: true, error: null })
     try {
-      const [tripData, daysData, placesData, packingData, todoData, tagsData, categoriesData] = await Promise.all([
+      const [tripData, daysData, placesData, packingData, todoData, budgetData, reservationsData, filesData, tagsData, categoriesData] = await Promise.all([
         tripRepo.get(tripId),
         dayRepo.list(tripId),
         placeRepo.list(tripId),
         packingRepo.list(tripId),
         todoRepo.list(tripId),
+        // Budget / reservations / files are hydrated here too so the offline
+        // path is uniform (no separate tab-gated effects). Non-fatal: a failure
+        // in any of these must not blank the whole trip.
+        budgetRepo.list(tripId).catch(() => ({ items: [] as BudgetItem[] })),
+        reservationRepo.list(tripId).catch(() => ({ reservations: [] as Reservation[] })),
+        fileRepo.list(tripId).catch(() => ({ files: [] as TripFile[] })),
         navigator.onLine
           ? tagsApi.list().catch(() => offlineDb.tags.toArray().then(tags => ({ tags })))
           : offlineDb.tags.toArray().then(tags => ({ tags })),
@@ -121,6 +151,9 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
         dayNotes: dayNotesMap,
         packingItems: packingData.items,
         todoItems: todoData.items,
+        budgetItems: budgetData.items,
+        reservations: reservationsData.reservations,
+        files: filesData.files,
         tags: tagsData.tags,
         categories: categoriesData.categories,
         isLoading: false,
@@ -132,6 +165,22 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
     }
   },
 
+  // Silently re-fetch the active trip's collaborative state into the store after
+  // the network comes back (WS reconnect or `online` event) so edits missed while
+  // offline appear in place — no splash, no resetTrip. Each resource is
+  // best-effort; a failure on one must not wipe the others.
+  hydrateActiveTrip: async (tripId: number | string) => {
+    await Promise.all([
+      get().refreshDays(tripId),
+      placeRepo.list(tripId).then(d => set({ places: d.places })).catch(() => {}),
+      packingRepo.list(tripId).then(d => set({ packingItems: d.items })).catch(() => {}),
+      todoRepo.list(tripId).then(d => set({ todoItems: d.items })).catch(() => {}),
+      get().loadBudgetItems(tripId),
+      get().loadReservations(tripId),
+      get().loadFiles(tripId),
+    ])
+  },
+
   refreshDays: async (tripId: number | string) => {
     try {
       const daysData = await dayRepo.list(tripId)

client/src/sync/authGate.ts

@@ -0,0 +1,18 @@
+/**
+ * Auth gate — a single boolean the sync layer checks before touching the
+ * offline DB. It lets logout disable all background sync (flush / syncAll /
+ * periodic triggers) *before* awaiting the DB swap, so an in-flight loop can't
+ * re-seed the database after the user has logged out.
+ *
+ * Kept separate from authStore to avoid an import cycle
+ * (authStore → tripSyncManager → authStore).
+ */
+let _authed = false
+
+export function setAuthed(value: boolean): void {
+  _authed = value
+}
+
+export function isAuthed(): boolean {
+  return _authed
+}

client/src/sync/mutationQueue.ts

@@ -7,6 +7,7 @@
  */
 import { offlineDb } from '../db/offlineDb'
 import { apiClient } from '../api/client'
+import { isAuthed } from './authGate'
 import type { QueuedMutation } from '../db/offlineDb'
 import type { Table } from 'dexie'
 
@@ -39,6 +40,27 @@ let _flushing = false
 // Monotonically increasing timestamp so same-millisecond enqueues
 // still get a deterministic FIFO order when sorted by createdAt.
 let _lastTs = 0
+// Monotonic counter for offline temp ids. Date.now() alone collides when two
+// creates land in the same millisecond (bulk import, rapid tapping), which would
+// overwrite one optimistic Dexie row. This guarantees distinct negative ids.
+let _lastTempId = 0
+
+/**
+ * Mint a collision-free temporary (negative) id for an offline-created entity.
+ * Monotonic across the session so same-millisecond creates never collide.
+ */
+export function nextTempId(): number {
+  const now = Date.now()
+  _lastTempId = now > _lastTempId ? now : _lastTempId + 1
+  return -_lastTempId
+}
+
+/** HTTP statuses that should be retried later rather than treated as terminal. */
+function isRetryableStatus(status: number | undefined): boolean {
+  // 401: token expired mid-flush (offline window) — retry after re-auth.
+  // 408/425/429: timeout / too-early / rate-limited — transient.
+  return status === 401 || status === 408 || status === 425 || status === 429
+}
 
 export const mutationQueue = {
   /**
@@ -67,8 +89,12 @@ export const mutationQueue = {
    * 4xx responses are marked failed and skipped.
    */
   async flush(): Promise<void> {
-    if (_flushing || !navigator.onLine) return
+    if (_flushing || !navigator.onLine || !isAuthed()) return
     _flushing = true
+    // tempId → realId learned during this flush, so a dependent edit/delete
+    // queued against an offline-created entity (still holding the negative id)
+    // can be rewritten to the server id before it is replayed.
+    const idMap = new Map<number, number>()
     try {
       const pending = await offlineDb.mutationQueue
         .where('status')
@@ -79,10 +105,32 @@ export const mutationQueue = {
         // Mark as syncing so UI can show progress
         await offlineDb.mutationQueue.update(mutation.id, { status: 'syncing' })
 
+        // Resolve a temp-id reference now that earlier CREATEs in this flush
+        // may have completed (FIFO order guarantees the CREATE ran first).
+        let reqUrl = mutation.url
+        let reqEntityId = mutation.entityId
+        if (mutation.tempEntityId !== undefined) {
+          const realId = idMap.get(mutation.tempEntityId)
+          if (realId !== undefined) {
+            reqUrl = reqUrl.replace('{id}', String(realId))
+            reqEntityId = realId
+          }
+        }
+        // Placeholder still unresolved → the create it depended on is gone
+        // (failed or missing). Surface it as failed rather than firing a 404.
+        if (reqUrl.includes('{id}')) {
+          await offlineDb.mutationQueue.update(mutation.id, {
+            status: 'failed',
+            attempts: mutation.attempts + 1,
+            lastError: 'unresolved temp id (dependent create did not sync)',
+          })
+          continue
+        }
+
         try {
           const response = await apiClient.request({
             method: mutation.method,
-            url: mutation.url,
+            url: reqUrl,
             data: mutation.body,
             headers: { 'X-Idempotency-Key': mutation.id },
           })
@@ -95,31 +143,51 @@ export const mutationQueue = {
               const values = Object.values(response.data as Record<string, unknown>)
               const entity = values[0]
               if (entity && typeof entity === 'object' && 'id' in entity) {
-                // Remove temp optimistic entry if id changed (CREATE case)
-                if (mutation.tempId !== undefined && mutation.tempId !== (entity as { id: number }).id) {
+                const realId = (entity as { id: number }).id
+                // Remove temp optimistic entry if id changed (CREATE case) and
+                // remap any queued mutations that still target the negative id.
+                if (mutation.tempId !== undefined && mutation.tempId !== realId) {
                   await table.delete(mutation.tempId)
+                  idMap.set(mutation.tempId, realId)
+                  // Durable rewrite so dependents survive a flush boundary / reload.
+                  await offlineDb.mutationQueue
+                    .where('tripId')
+                    .equals(mutation.tripId)
+                    .filter(m => m.tempEntityId === mutation.tempId)
+                    .modify(m => {
+                      m.url = m.url.replace('{id}', String(realId))
+                      m.entityId = realId
+                      m.tempEntityId = undefined
+                    })
                 }
                 await table.put(entity)
               }
             }
-          } else if (mutation.method === 'DELETE' && mutation.resource && mutation.entityId !== undefined) {
+          } else if (mutation.method === 'DELETE' && mutation.resource && reqEntityId !== undefined) {
             // DELETE was already applied optimistically; ensure it's gone
             const table = getTable(mutation.resource)
-            if (table) await table.delete(mutation.entityId)
+            if (table) await table.delete(reqEntityId)
           }
 
           await offlineDb.mutationQueue.delete(mutation.id)
         } catch (err: unknown) {
           const httpStatus = (err as { response?: { status: number } })?.response?.status
-          if (httpStatus !== undefined && httpStatus >= 400 && httpStatus < 500) {
-            // Permanent client error — mark failed, continue with next
+          const isTerminal =
+            httpStatus !== undefined && httpStatus >= 400 && httpStatus < 500 && !isRetryableStatus(httpStatus)
+          if (isTerminal) {
+            // Permanent client error — roll back the phantom optimistic CREATE so
+            // it can't masquerade as synced, then mark failed and continue.
+            if (mutation.method !== 'DELETE' && mutation.tempId !== undefined && mutation.resource) {
+              const table = getTable(mutation.resource)
+              if (table) await table.delete(mutation.tempId)
+            }
             await offlineDb.mutationQueue.update(mutation.id, {
               status: 'failed',
               attempts: mutation.attempts + 1,
               lastError: String(err),
             })
           } else {
-            // Network error — reset to pending, abort flush (retry on next trigger)
+            // Network / transient error — reset to pending, abort flush (retry next trigger)
             await offlineDb.mutationQueue.update(mutation.id, {
               status: 'pending',
               attempts: mutation.attempts + 1,
@@ -160,9 +228,19 @@ export const mutationQueue = {
       .count()
   },
 
-  /** Reset internal flushing flag and timestamp counter — useful in tests. */
+  /** Count permanently-failed mutations (surfaced separately so the user knows
+   *  changes were dropped — they are NOT folded into pendingCount). */
+  async failedCount(): Promise<number> {
+    return offlineDb.mutationQueue
+      .where('status')
+      .equals('failed')
+      .count()
+  },
+
+  /** Reset internal flushing flag and timestamp counters — useful in tests. */
   _resetFlushing(): void {
     _flushing = false
     _lastTs = 0
+    _lastTempId = 0
   },
 }

client/src/sync/persistentStorage.ts

@@ -0,0 +1,18 @@
+/**
+ * Ask the browser for persistent storage so our offline data — prefetched map
+ * tiles, cached file blobs, the IndexedDB caches — is exempt from eviction under
+ * storage pressure. Without this the browser may purge tiles right when a
+ * traveler goes offline and needs them (audit H8 / M6).
+ *
+ * Best-effort and idempotent: returns whether persistence is (now) granted.
+ */
+export async function requestPersistentStorage(): Promise<boolean> {
+  try {
+    if (typeof navigator === 'undefined' || !navigator.storage?.persist) return false
+    // Already persisted? Avoid re-prompting where the API distinguishes.
+    if (navigator.storage.persisted && (await navigator.storage.persisted())) return true
+    return await navigator.storage.persist()
+  } catch {
+    return false
+  }
+}

client/src/sync/syncTriggers.ts

@@ -14,17 +14,34 @@
  */
 import { mutationQueue } from './mutationQueue'
 import { tripSyncManager } from './tripSyncManager'
-import { setPreReconnectHook } from '../api/websocket'
+import { setPreReconnectHook, setRefetchCallback, getActiveTrips } from '../api/websocket'
+import { useTripStore } from '../store/tripStore'
 
 const PERIODIC_MS = 30_000
 
 let _intervalId: ReturnType<typeof setInterval> | null = null
 let _registered = false
 
-/** Network came back — flush mutations AND re-seed Dexie for all cacheable trips. */
+/** Pull the latest server state for every open trip into the Zustand store. */
+function rehydrateActiveTrips() {
+  const store = useTripStore.getState()
+  for (const tripId of getActiveTrips()) {
+    store.hydrateActiveTrip(tripId).catch(console.error)
+  }
+}
+
+/**
+ * Network came back — flush local writes first, then re-seed Dexie for all
+ * cacheable trips and re-hydrate the open trip's store so a collaborator's
+ * edits made while we were offline appear without navigating away.
+ */
 function onOnline() {
-  mutationQueue.flush().catch(console.error)
-  tripSyncManager.syncAll().catch(console.error)
+  mutationQueue.flush()
+    .catch(console.error)
+    .finally(() => {
+      tripSyncManager.syncAll().catch(console.error)
+      rehydrateActiveTrips()
+    })
 }
 
 /** Tab became visible — flush only; don't trigger a potentially expensive syncAll. */
@@ -48,6 +65,11 @@ export function registerSyncTriggers(): void {
   // WS reconnect: flush mutations only — no syncAll to avoid triggering rate
   // limiters when the socket drops and reconnects while the device is online.
   setPreReconnectHook(() => mutationQueue.flush())
+  // After the reconnect flush, pull canonical state for the open trip back into
+  // the store (the WS layer awaits the flush hook before invoking this).
+  setRefetchCallback(tripId => {
+    useTripStore.getState().hydrateActiveTrip(tripId).catch(console.error)
+  })
 
   window.addEventListener('online', onOnline)
   document.addEventListener('visibilitychange', onVisibility)
@@ -59,6 +81,7 @@ export function unregisterSyncTriggers(): void {
   _registered = false
 
   setPreReconnectHook(null)
+  setRefetchCallback(null)
   window.removeEventListener('online', onOnline)
   document.removeEventListener('visibilitychange', onVisibility)
   if (_intervalId !== null) {

client/src/sync/tilePrefetcher.ts

@@ -17,11 +17,18 @@ import { offlineDb, upsertSyncMeta } from '../db/offlineDb'
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
-/** Estimated average tile size in KB (road/transit tiles ~15 KB). */
+/** Estimated average tile size in KB (raster basemap tiles ~15 KB). */
 const AVG_TILE_KB = 15
 
-/** Hard cap: ~50 MB worth of tiles. */
-export const MAX_TILES = Math.floor((50 * 1024) / AVG_TILE_KB) // ≈ 3413
+/**
+ * Hard cap on prefetched tiles (~180 MB).
+ *
+ * MUST stay in sync with the Workbox 'map-tiles' `maxEntries` in
+ * client/vite.config.js (kept equal). If this budget exceeds the SW cache size,
+ * the LRU evicts freshly-prefetched tiles on arrival and the offline map goes
+ * blank — which is exactly the bug this value was raised (from ~3413) to fix.
+ */
+export const MAX_TILES = Math.floor((180 * 1024) / AVG_TILE_KB) // = 12288
 
 const DEFAULT_TILE_URL =
   'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
@@ -177,15 +184,16 @@ export async function prefetchTilesForTrip(
   const bbox = computeBbox(places)
   if (!bbox) return
 
-  // Size guard: if total tile count across all zooms exceeds cap, skip
-  const estimated = countTiles(bbox, 10, 16)
-  if (estimated > MAX_TILES) {
-    console.warn(
-      `[tilePrefetch] trip ${tripId}: estimated ${estimated} tiles exceeds cap (${MAX_TILES}), skipping`,
-    )
-    return
-  }
-
+  // Zoom-clamp rather than skip: prefetchTiles fills zooms low→high and stops
+  // once MAX_TILES is reached, so large (region / road-trip) bboxes still get
+  // their lower zooms cached instead of being skipped entirely.
+  //
+  // NOTE: opaque (no-cors) tile responses are padded by Chromium to ~7 MB each
+  // for quota accounting, so the real on-disk budget is far below 180 MB. We
+  // keep no-cors deliberately: switching to cors would break self-hosted/custom
+  // tile providers that don't send CORS headers. To stop the browser evicting
+  // these tiles under the inflated quota, we request persistent storage at app
+  // init instead (sync/persistentStorage.ts).
   const fetched = await prefetchTiles(bbox, template)
 
   // Update syncMeta with bbox and tile count

client/src/sync/tripSyncManager.ts

@@ -27,8 +27,10 @@ import {
   upsertCategories,
   upsertSyncMeta,
   clearTripData,
+  enforceBlobBudget,
 } from '../db/offlineDb'
 import { prefetchTilesForTrip } from './tilePrefetcher'
+import { isAuthed } from './authGate'
 import { useSettingsStore } from '../store/settingsStore'
 import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile, Accommodation, TripMember } from '../types'
 
@@ -108,13 +110,16 @@ async function cacheFilesForTrip(files: TripFile[]): Promise<void> {
       const resp = await fetch(file.url!, { credentials: 'include' })
       if (!resp.ok) continue
       const blob = await resp.blob()
-      await offlineDb.blobCache.put({ url: file.url!, blob, mime: file.mime_type, cachedAt: Date.now() })
+      await offlineDb.blobCache.put({ url: file.url!, tripId: file.trip_id, blob, bytes: blob.size, mime: file.mime_type, cachedAt: Date.now() })
       cached++
     } catch {
       // Network failure — skip this file, will retry next sync
     }
   }
 
+  // Keep the blob cache within its size/count budget after adding new files.
+  if (cached > 0) await enforceBlobBudget().catch(() => {})
+
   // Update filesCachedCount in syncMeta
   const tripId = files[0]?.trip_id
   if (tripId) {
@@ -134,7 +139,7 @@ export const tripSyncManager = {
    * No-ops when offline.
    */
   async syncAll(): Promise<void> {
-    if (_syncing || !navigator.onLine) return
+    if (_syncing || !navigator.onLine || !isAuthed()) return
     _syncing = true
     try {
       const { trips } = await tripsApi.list() as { trips: Trip[] }

client/src/utils/dayMerge.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay, getTransportForDay, getMergedItems } from './dayMerge'
+import { parseTimeToMinutes, getSpanPhase, getTransportRouteEndpoints, getDisplayTimeForDay, getTransportForDay, getMergedItems } from './dayMerge'
 
 describe('parseTimeToMinutes', () => {
   it('parses HH:MM string', () => {
@@ -34,6 +34,38 @@ describe('getSpanPhase', () => {
   })
 })
 
+describe('getTransportRouteEndpoints', () => {
+  const pickup = { role: 'from', lat: 48.1, lng: 11.5 }
+  const dropoff = { role: 'to', lat: 52.5, lng: 13.4 }
+  // A car rental spanning day 1 (pickup) through day 3 (drop-off).
+  const rental = { day_id: 1, end_day_id: 3, endpoints: [pickup, dropoff] }
+
+  it('routes to the pickup only on the start day of a multi-day rental', () => {
+    expect(getTransportRouteEndpoints(rental, 1)).toEqual({ from: { lat: 48.1, lng: 11.5 }, to: null })
+  })
+
+  it('routes from the drop-off only on the end day', () => {
+    expect(getTransportRouteEndpoints(rental, 3)).toEqual({ from: null, to: { lat: 52.5, lng: 13.4 } })
+  })
+
+  it('adds no waypoints on the days in between (regression for #1210)', () => {
+    expect(getTransportRouteEndpoints(rental, 2)).toEqual({ from: null, to: null })
+  })
+
+  it('uses both endpoints for a single-day transport', () => {
+    const sameDay = { day_id: 1, end_day_id: 1, endpoints: [pickup, dropoff] }
+    expect(getTransportRouteEndpoints(sameDay, 1)).toEqual({
+      from: { lat: 48.1, lng: 11.5 },
+      to: { lat: 52.5, lng: 13.4 },
+    })
+  })
+
+  it('returns nulls when the endpoints carry no coordinates', () => {
+    const noCoords = { day_id: 1, end_day_id: 1, endpoints: [{ role: 'from' }, { role: 'to' }] }
+    expect(getTransportRouteEndpoints(noCoords, 1)).toEqual({ from: null, to: null })
+  })
+})
+
 describe('getDisplayTimeForDay', () => {
   const r = { day_id: 1, end_day_id: 3, reservation_time: '2025-01-01T09:00:00', reservation_end_time: '2025-01-03T14:00:00' }
 

client/src/utils/dayMerge.ts

@@ -29,6 +29,33 @@ export function getSpanPhase(
   return 'middle'
 }
 
+/**
+ * The route waypoints a transport contributes on a given day, respecting multi-day spans.
+ * A car rental (or any reservation whose span covers several days) is only routed to on its
+ * pickup day (the departure endpoint) and from on its drop-off day (the arrival endpoint) — on
+ * the days in between you simply hold the vehicle, so it adds no waypoints and must not pull the
+ * route to those points. Single-day transports contribute both endpoints.
+ */
+export function getTransportRouteEndpoints(
+  r: any,
+  dayId: number
+): { from: { lat: number; lng: number } | null; to: { lat: number; lng: number } | null } {
+  const ep = (role: 'from' | 'to'): { lat: number; lng: number } | null => {
+    const e = (r.endpoints || []).find((x: any) => x.role === role)
+    return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
+  }
+  switch (getSpanPhase(r, dayId)) {
+    case 'start':
+      return { from: ep('from'), to: null }
+    case 'end':
+      return { from: null, to: ep('to') }
+    case 'middle':
+      return { from: null, to: null }
+    default:
+      return { from: ep('from'), to: ep('to') }
+  }
+}
+
 export function getDisplayTimeForDay(
   r: { day_id?: number | null; end_day_id?: number | null; reservation_time?: string | null; reservation_end_time?: string | null },
   dayId: number

client/src/utils/dayOrder.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import type { Day, Accommodation } from '../types'
-import { getDayOrder, isDayInAccommodationRange, getAccommodationAnchors } from './dayOrder'
+import { getDayOrder, isDayInAccommodationRange, getAccommodationAnchors, getDayBookendHotels } from './dayOrder'
 
 const days = [
   { id: 10, day_number: 1 },
@@ -70,4 +70,51 @@ describe('getAccommodationAnchors', () => {
     const accs = [hotel({ start_day_id: 10, end_day_id: 30, place_lat: null, place_lng: null })]
     expect(getAccommodationAnchors(days[1], days, accs)).toEqual({})
   })
+
+  it('keeps morning/evening correct on a transfer day when the morning stay runs long (#887)', () => {
+    const accs = [
+      hotel({ start_day_id: 10, end_day_id: 30, place_lat: 1, place_lng: 1 }), // slept here, checks out later
+      hotel({ start_day_id: 20, end_day_id: 30, place_lat: 9, place_lng: 9 }), // check-in today
+    ]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({
+      start: { lat: 1, lng: 1 },
+      end: { lat: 9, lng: 9 },
+    })
+  })
+})
+
+describe('getDayBookendHotels', () => {
+  it('returns nothing when the day has no accommodation', () => {
+    expect(getDayBookendHotels(days[1], days, [])).toEqual({})
+  })
+
+  it('bookends both ends with the single hotel on a normal stay day', () => {
+    const h = hotel({ start_day_id: 10, end_day_id: 30 })
+    const { morning, evening } = getDayBookendHotels(days[1], days, [h])
+    expect(morning).toBe(h)
+    expect(evening).toBe(h)
+  })
+
+  it('uses the checked-out hotel in the morning and the checked-in hotel in the evening on a transfer day', () => {
+    const out = hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 1 })
+    const into = hotel({ start_day_id: 20, end_day_id: 30, place_lat: 9, place_lng: 9 })
+    const { morning, evening } = getDayBookendHotels(days[1], days, [out, into])
+    expect(morning).toBe(out)
+    expect(evening).toBe(into)
+  })
+
+  it('still picks the slept-in hotel for the morning when its stay does not end on the transfer day (#887)', () => {
+    // The morning hotel runs long (checks out day 3) so it is not flagged as "checks out today";
+    // the old "ends today" rule collapsed both bookends onto the arriving hotel.
+    const stayed = hotel({ start_day_id: 10, end_day_id: 30, place_lat: 1, place_lng: 1 })
+    const into = hotel({ start_day_id: 20, end_day_id: 30, place_lat: 9, place_lng: 9 })
+    const { morning, evening } = getDayBookendHotels(days[1], days, [stayed, into])
+    expect(morning).toBe(stayed)
+    expect(evening).toBe(into)
+  })
+
+  it('ignores accommodations without coordinates', () => {
+    const h = hotel({ place_lat: null, place_lng: null })
+    expect(getDayBookendHotels(days[1], days, [h])).toEqual({})
+  })
 })

client/src/utils/dayOrder.ts

@@ -3,6 +3,36 @@ import type { Day, Accommodation, RouteAnchors } from '../types'
 export const getDayOrder = (day: Day, days: Day[]): number =>
   day.day_number ?? days.indexOf(day)
 
+// The two hotels that bookend a day: the one you woke up in (morning) and the one you sleep in
+// tonight (evening). On a transfer day these differ; on any other day both are the single hotel.
+// The morning hotel is keyed off "checked in on an earlier day and still in range" (i.e. you slept
+// there) rather than "checks out today", so it stays correct when an overlapping or long stay does
+// not end exactly on the transfer day.
+export const getDayBookendHotels = (
+  day: Day,
+  days: Day[],
+  accommodations: Accommodation[],
+): { morning?: Accommodation; evening?: Accommodation } => {
+  const inRange = accommodations.filter(a =>
+    a.place_lat != null && a.place_lng != null &&
+    isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days),
+  )
+  if (inRange.length === 0) return {}
+
+  const dayOrd = getDayOrder(day, days)
+  const orderOf = (id: number) => {
+    const d = days.find(x => x.id === id)
+    return d ? getDayOrder(d, days) : dayOrd
+  }
+  const checkIn = inRange.find(a => a.start_day_id === day.id) // the hotel you arrive at tonight
+  const sleptHere = inRange.find(a => orderOf(a.start_day_id) < dayOrd) // the hotel you woke up in
+
+  return {
+    morning: sleptHere ?? checkIn ?? inRange[0],
+    evening: checkIn ?? sleptHere ?? inRange[0],
+  }
+}
+
 // Derives route anchors from the accommodation(s) active on a day. A single hotel is the day's home
 // base, so the route is a loop that starts and ends there. A transfer day — checking out of one hotel
 // and into another — instead runs from the morning hotel to the evening one.
@@ -11,22 +41,12 @@ export const getAccommodationAnchors = (
   days: Day[],
   accommodations: Accommodation[],
 ): RouteAnchors => {
-  const located = accommodations.filter(a =>
-    a.place_lat != null && a.place_lng != null &&
-    isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days),
-  )
-  if (located.length === 0) return {}
-
-  const toAnchor = (a: Accommodation) => ({ lat: a.place_lat as number, lng: a.place_lng as number })
-
-  const checkOut = located.find(a => a.end_day_id === day.id) // the hotel you leave this morning
-  const checkIn = located.find(a => a.start_day_id === day.id) // the hotel you arrive at tonight
-  if (checkOut && checkIn && checkOut !== checkIn) {
-    return { start: toAnchor(checkOut), end: toAnchor(checkIn) }
+  const { morning, evening } = getDayBookendHotels(day, days, accommodations)
+  if (!morning || !evening) return {}
+  return {
+    start: { lat: morning.place_lat as number, lng: morning.place_lng as number },
+    end: { lat: evening.place_lat as number, lng: evening.place_lng as number },
   }
-
-  const hotel = toAnchor(located[0])
-  return { start: hotel, end: hotel }
 }
 
 export const isDayInAccommodationRange = (

client/tests/unit/api/authUrl.test.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../helpers/msw/server';

client/tests/unit/db/offlineDb.test.ts

@@ -23,6 +23,10 @@ import {
   upsertReservations,
   upsertTripFiles,
   upsertSyncMeta,
+  reopenForUser,
+  reopenAnonymous,
+  deleteCurrentUserDb,
+  enforceBlobBudget,
   type QueuedMutation,
   type SyncMeta,
   type BlobCacheEntry,
@@ -81,6 +85,15 @@ const makePlace = (id: number, tripId = 1): Place => ({
   created_at: '2026-01-01T00:00:00Z',
 });
 
+const makeBlob = (url: string, tripId = 1, bytes = 10, cachedAt = 1): BlobCacheEntry => ({
+  url,
+  tripId,
+  blob: new Blob(['x'.repeat(bytes)], { type: 'application/pdf' }),
+  bytes,
+  mime: 'application/pdf',
+  cachedAt,
+});
+
 // ── Lifecycle ─────────────────────────────────────────────────────────────────
 
 beforeEach(async () => {
@@ -220,7 +233,9 @@ describe('offlineDb — blobCache', () => {
     const blob = new Blob(['%PDF-1.4 test'], { type: 'application/pdf' });
     const entry: BlobCacheEntry = {
       url: '/api/files/99/download',
+      tripId: 1,
       blob,
+      bytes: blob.size,
       mime: 'application/pdf',
       cachedAt: Date.now(),
     };
@@ -231,6 +246,49 @@ describe('offlineDb — blobCache', () => {
     expect(stored!.mime).toBe('application/pdf');
     expect(stored!.blob).toBeDefined();
   });
+
+  it('queries blobs by tripId index', async () => {
+    await offlineDb.blobCache.bulkPut([
+      makeBlob('/api/files/1/download', 1),
+      makeBlob('/api/files/2/download', 1),
+      makeBlob('/api/files/3/download', 2),
+    ]);
+    const trip1 = await offlineDb.blobCache.where('tripId').equals(1).toArray();
+    expect(trip1).toHaveLength(2);
+  });
+});
+
+describe('offlineDb — enforceBlobBudget', () => {
+  it('evicts oldest-by-cachedAt entries past the count budget', async () => {
+    // 5 entries with strictly increasing cachedAt; cap to 3.
+    for (let i = 0; i < 5; i++) {
+      await offlineDb.blobCache.put(makeBlob(`/api/files/${i}/download`, 1, 10, i + 1));
+    }
+    await enforceBlobBudget(3, Infinity);
+
+    expect(await offlineDb.blobCache.count()).toBe(3);
+    // Oldest two (cachedAt 1 and 2) are gone; newest survive.
+    expect(await offlineDb.blobCache.get('/api/files/0/download')).toBeUndefined();
+    expect(await offlineDb.blobCache.get('/api/files/1/download')).toBeUndefined();
+    expect(await offlineDb.blobCache.get('/api/files/4/download')).toBeDefined();
+  });
+
+  it('evicts oldest entries past the byte budget', async () => {
+    // 3 entries of 100 bytes each; cap to 250 bytes → newest two (200) survive.
+    for (let i = 0; i < 3; i++) {
+      await offlineDb.blobCache.put(makeBlob(`/api/files/${i}/download`, 1, 100, i + 1));
+    }
+    await enforceBlobBudget(Infinity, 250);
+
+    expect(await offlineDb.blobCache.count()).toBe(2);
+    expect(await offlineDb.blobCache.get('/api/files/0/download')).toBeUndefined();
+  });
+
+  it('is a no-op when already within budget', async () => {
+    await offlineDb.blobCache.put(makeBlob('/api/files/1/download', 1));
+    await enforceBlobBudget(10, Infinity);
+    expect(await offlineDb.blobCache.count()).toBe(1);
+  });
 });
 
 describe('offlineDb — clearTripData', () => {
@@ -241,9 +299,12 @@ describe('offlineDb — clearTripData', () => {
     const item: PackingItem = { id: 5, trip_id: 1, name: 'Towel', category: null, checked: 0, sort_order: 0, quantity: 1 };
     await upsertPackingItems([item]);
 
+    await offlineDb.blobCache.put(makeBlob('/api/files/1/download', 1));
+
     // Also add data for a different trip — should NOT be removed
     await upsertTrip(makeTrip(2));
     await upsertDays([makeDay(99, 2)]);
+    await offlineDb.blobCache.put(makeBlob('/api/files/2/download', 2));
 
     await clearTripData(1);
 
@@ -251,10 +312,12 @@ describe('offlineDb — clearTripData', () => {
     expect(await offlineDb.days.where('trip_id').equals(1).count()).toBe(0);
     expect(await offlineDb.places.where('trip_id').equals(1).count()).toBe(0);
     expect(await offlineDb.packingItems.where('trip_id').equals(1).count()).toBe(0);
+    expect(await offlineDb.blobCache.where('tripId').equals(1).count()).toBe(0);
 
     // Trip 2 intact
     expect(await offlineDb.trips.get(2)).toBeDefined();
     expect(await offlineDb.days.where('trip_id').equals(2).count()).toBe(1);
+    expect(await offlineDb.blobCache.get('/api/files/2/download')).toBeDefined();
   });
 });
 
@@ -271,3 +334,37 @@ describe('offlineDb — clearAll', () => {
     expect(await offlineDb.places.count()).toBe(0);
   });
 });
+
+describe('offlineDb — per-user scoping (B4)', () => {
+  afterEach(async () => {
+    // Leave the suite on the anonymous DB so other tests are unaffected.
+    await reopenAnonymous();
+  });
+
+  it('isolates one user\'s cached data from another', async () => {
+    await reopenForUser(1);
+    await upsertPlaces([makePlace(10, 1)]);
+    expect(await offlineDb.places.count()).toBe(1);
+
+    // Switching users must not expose user 1's rows.
+    await reopenForUser(2);
+    expect(await offlineDb.places.count()).toBe(0);
+
+    // Switching back restores user 1's data (different physical DB).
+    await reopenForUser(1);
+    expect(await offlineDb.places.get(10)).toBeDefined();
+  });
+
+  it('deleteCurrentUserDb wipes the user DB and returns to anonymous', async () => {
+    await reopenForUser(5);
+    await upsertPlaces([makePlace(20, 1)]);
+
+    await deleteCurrentUserDb();
+    // Now on the anonymous DB — no user data.
+    expect(await offlineDb.places.count()).toBe(0);
+
+    // Re-opening user 5 starts empty (DB was deleted, not just detached).
+    await reopenForUser(5);
+    expect(await offlineDb.places.count()).toBe(0);
+  });
+});

client/tests/unit/remoteEventHandler/assignments.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import { useTripStore } from '../../../src/store/tripStore';
 import { resetAllStores } from '../../helpers/store';
 import { buildDay, buildAssignment, buildPlace } from '../../helpers/factories';
+import type { Assignment } from '../../../src/types';
 
 beforeEach(() => {
   resetAllStores();
@@ -50,6 +51,58 @@ describe('remoteEventHandler > assignments', () => {
     expect(assignments['10'][0].id).toBe(500);
   });
 
+  it('FE-WSEVT-ASSIGN-003b: a second assignment of an already-present place is NOT suppressed (H11)', () => {
+    const place = buildPlace({ id: 55 });
+    useTripStore.setState({
+      days: [buildDay({ id: 10 })],
+      // A committed (positive-id) assignment of place 55 already on the day.
+      assignments: { '10': [buildAssignment({ id: 100, day_id: 10, place, place_id: place.id })] },
+    });
+    // A legitimately new, distinct assignment of the same place arrives.
+    const second = buildAssignment({ id: 300, day_id: 10, place, place_id: place.id });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: second });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10']).toHaveLength(2);
+    expect(assignments['10'].map(a => a.id).sort((x, y) => x - y)).toEqual([100, 300]);
+  });
+
+  it('FE-WSEVT-ASSIGN-003c: temp reconciliation replaces only the matching place, not a sibling temp (H11)', () => {
+    const place55 = buildPlace({ id: 55 });
+    const place66 = buildPlace({ id: 66 });
+    useTripStore.setState({
+      days: [buildDay({ id: 10 })],
+      assignments: {
+        '10': [
+          buildAssignment({ id: -1, day_id: 10, place: place55, place_id: 55 }),
+          buildAssignment({ id: -2, day_id: 10, place: place66, place_id: 66 }),
+        ],
+      },
+    });
+    const real = buildAssignment({ id: 500, day_id: 10, place: place55, place_id: 55 });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: real });
+    const { assignments } = useTripStore.getState();
+    const ids = assignments['10'].map(a => a.id);
+    expect(assignments['10']).toHaveLength(2);
+    expect(ids).toContain(500);   // temp 55 reconciled to real
+    expect(ids).toContain(-2);    // sibling temp 66 untouched
+    expect(ids).not.toContain(-1);
+  });
+
+  it('FE-WSEVT-ASSIGN-003d: place-less assignments do not collapse onto each other (H11)', () => {
+    // Defensive: a malformed event lacking place data must not let the
+    // `place?.id === placeId` reconciliation match undefined === undefined.
+    const placeless = (id: number): Assignment =>
+      ({ ...buildAssignment({ id, day_id: 10 }), place: undefined, place_id: undefined } as unknown as Assignment);
+    useTripStore.setState({
+      days: [buildDay({ id: 10 })],
+      assignments: { '10': [placeless(-1)] },
+    });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: placeless(700) });
+    const { assignments } = useTripStore.getState();
+    // No placeId → no reconcile; both survive as distinct rows (no collapse).
+    expect(assignments['10']).toHaveLength(2);
+  });
+
   it('FE-WSEVT-ASSIGN-004: assignment:updated merges updated data into correct day', () => {
     seedData();
     const updated = buildAssignment({ id: 100, day_id: 10, notes: 'Updated notes' });

client/tests/unit/repo/placeRepo.test.ts

@@ -64,6 +64,20 @@ describe('placeRepo.list', () => {
     const result = await placeRepo.list(99);
     expect(result.places).toHaveLength(0);
   });
+
+  it('online but request fails — falls back to Dexie cache (captive portal)', async () => {
+    // navigator.onLine lies "true" on a captive portal; the request throws.
+    const place = buildPlace({ trip_id: 1 });
+    await offlineDb.places.put(place);
+
+    server.use(
+      http.get('/api/trips/1/places', () => HttpResponse.error()),
+    );
+
+    const result = await placeRepo.list(1);
+    expect(result.places).toHaveLength(1);
+    expect(result.places[0].id).toBe(place.id);
+  });
 });
 
 describe('placeRepo.create', () => {

client/tests/unit/repo/withOfflineFallback.test.ts

@@ -0,0 +1,76 @@
+/**
+ * onlineThenCache — the read-through fallback shared by every repo (H2).
+ *
+ * Branches:
+ *   - navigator offline → cache only (skip the request)
+ *   - online but the request fails at the network level → fall back to cache
+ *   - online but the server returns an HTTP error → rethrow (don't mask)
+ *   - online and the request succeeds → return it, skip cache
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { onlineThenCache } from '../../../src/repo/withOfflineFallback';
+
+beforeEach(() => {
+  Object.defineProperty(navigator, 'onLine', { value: true, writable: true, configurable: true });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('onlineThenCache', () => {
+  it('returns the online result when online', async () => {
+    const online = vi.fn().mockResolvedValue('online');
+    const cache = vi.fn().mockResolvedValue('cache');
+
+    expect(await onlineThenCache(online, cache)).toBe('online');
+    expect(online).toHaveBeenCalledOnce();
+    expect(cache).not.toHaveBeenCalled();
+  });
+
+  it('reads the cache without calling online when navigator is offline', async () => {
+    Object.defineProperty(navigator, 'onLine', { value: false });
+    const online = vi.fn().mockResolvedValue('online');
+    const cache = vi.fn().mockResolvedValue('cache');
+
+    expect(await onlineThenCache(online, cache)).toBe('cache');
+    expect(online).not.toHaveBeenCalled();
+  });
+
+  it('falls back to the cache on a network-level failure (no HTTP response)', async () => {
+    // Axios network error: the request never reached the server (captive portal).
+    const netErr = Object.assign(new Error('Network Error'), { isAxiosError: true, response: undefined });
+    const online = vi.fn().mockRejectedValue(netErr);
+    const cache = vi.fn().mockResolvedValue('cache');
+
+    expect(await onlineThenCache(online, cache)).toBe('cache');
+    expect(online).toHaveBeenCalledOnce();
+    expect(cache).toHaveBeenCalledOnce();
+  });
+
+  it('rethrows a genuine HTTP error (server responded) instead of masking it', async () => {
+    // 404/403/500 mean the server replied — callers must see it, not a stale cache.
+    const httpErr = Object.assign(new Error('Not Found'), { isAxiosError: true, response: { status: 404 } });
+    const online = vi.fn().mockRejectedValue(httpErr);
+    const cache = vi.fn().mockResolvedValue('cache');
+
+    await expect(onlineThenCache(online, cache)).rejects.toThrow('Not Found');
+    expect(cache).not.toHaveBeenCalled();
+  });
+
+  it('rethrows a non-Axios error rather than swallowing it', async () => {
+    const online = vi.fn().mockRejectedValue(new Error('bug'));
+    const cache = vi.fn().mockResolvedValue('cache');
+
+    await expect(onlineThenCache(online, cache)).rejects.toThrow('bug');
+    expect(cache).not.toHaveBeenCalled();
+  });
+
+  it('propagates a cache error (e.g. nothing cached) when online also failed', async () => {
+    Object.defineProperty(navigator, 'onLine', { value: false });
+    const online = vi.fn().mockResolvedValue('online');
+    const cache = vi.fn().mockRejectedValue(new Error('No cached data'));
+
+    await expect(onlineThenCache(online, cache)).rejects.toThrow('No cached data');
+  });
+});

client/tests/unit/stores/authStore.test.ts

@@ -105,10 +105,10 @@ describe('authStore', () => {
   });
 
   describe('FE-AUTH-006: logout', () => {
-    it('calls disconnect() and clears user state', () => {
+    it('calls disconnect() and clears user state', async () => {
       useAuthStore.setState({ user: buildUser(), isAuthenticated: true });
 
-      useAuthStore.getState().logout();
+      await useAuthStore.getState().logout();
       const state = useAuthStore.getState();
 
       expect(disconnect).toHaveBeenCalledOnce();
@@ -441,10 +441,10 @@ describe('authStore', () => {
   });
 
   describe('FE-STORE-AUTH-PERSIST-001: logout resets persisted snapshot', () => {
-    it('snapshot has isAuthenticated:false after logout (PWA offline will redirect to login)', () => {
+    it('snapshot has isAuthenticated:false after logout (PWA offline will redirect to login)', async () => {
       useAuthStore.setState({ user: buildUser(), isAuthenticated: true });
 
-      useAuthStore.getState().logout();
+      await useAuthStore.getState().logout();
 
       const snapshot = JSON.parse(localStorage.getItem('trek_auth_snapshot') ?? '{}');
       expect(snapshot?.state?.isAuthenticated).toBe(false);

client/tests/unit/sync/mutationQueue.test.ts

@@ -8,18 +8,22 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import 'fake-indexeddb/auto';
 import { server } from '../../helpers/msw/server';
 import { http, HttpResponse } from 'msw';
-import { mutationQueue, generateUUID } from '../../../src/sync/mutationQueue';
+import { setAuthed } from '../../../src/sync/authGate';
+import { mutationQueue, generateUUID, nextTempId } from '../../../src/sync/mutationQueue';
 import { offlineDb, clearAll } from '../../../src/db/offlineDb';
+import { placeRepo } from '../../../src/repo/placeRepo';
 import { buildPlace, buildPackingItem } from '../../helpers/factories';
 
 beforeEach(async () => {
   await clearAll();
   mutationQueue._resetFlushing();
+  setAuthed(true);
   Object.defineProperty(navigator, 'onLine', { value: true, writable: true, configurable: true });
 });
 
 afterEach(() => {
   vi.restoreAllMocks();
+  setAuthed(false);
 });
 
 // ── helpers ──────────────────────────────────────────────────────────────────
@@ -214,6 +218,25 @@ describe('mutationQueue.flush — offline guard', () => {
     const m = await offlineDb.mutationQueue.get(id);
     expect(m!.status).toBe('pending');
   });
+
+  it('does nothing when logged out (auth gate closed)', async () => {
+    setAuthed(false);
+    const id = generateUUID();
+    await mutationQueue.enqueue(makeMutation({ id }));
+
+    let called = false;
+    server.use(
+      http.post('/api/trips/1/places', () => {
+        called = true;
+        return HttpResponse.json({ place: buildPlace({ trip_id: 1 }) });
+      }),
+    );
+
+    await mutationQueue.flush();
+    expect(called).toBe(false);
+    const m = await offlineDb.mutationQueue.get(id);
+    expect(m!.status).toBe('pending');
+  });
 });
 
 // ── pending / pendingCount ────────────────────────────────────────────────────
@@ -265,3 +288,177 @@ describe('mutationQueue.pendingCount', () => {
     expect(await mutationQueue.pendingCount()).toBe(2);
   });
 });
+
+describe('mutationQueue.failedCount', () => {
+  it('counts only failed mutations (not pending/syncing)', async () => {
+    const id1 = generateUUID();
+    const id2 = generateUUID();
+    await mutationQueue.enqueue(makeMutation({ id: id1 }));
+    await mutationQueue.enqueue(makeMutation({ id: id2 }));
+    await offlineDb.mutationQueue.update(id2, { status: 'failed' });
+
+    expect(await mutationQueue.failedCount()).toBe(1);
+    expect(await mutationQueue.pendingCount()).toBe(1);
+  });
+});
+
+// ── B2: collision-free temp ids ────────────────────────────────────────────────
+
+describe('nextTempId (B2)', () => {
+  it('returns distinct negative ids even within the same millisecond', () => {
+    mutationQueue._resetFlushing();
+    const a = nextTempId();
+    const b = nextTempId();
+    const c = nextTempId();
+    expect(a).toBeLessThan(0);
+    expect(new Set([a, b, c]).size).toBe(3);
+  });
+
+  it('two tight offline creates produce two distinct Dexie rows', async () => {
+    Object.defineProperty(navigator, 'onLine', { value: false });
+    await placeRepo.create(1, { name: 'First' });
+    await placeRepo.create(1, { name: 'Second' });
+
+    const rows = await offlineDb.places.where('trip_id').equals(1).toArray();
+    expect(rows).toHaveLength(2);
+    expect(rows.map(r => r.name).sort()).toEqual(['First', 'Second']);
+  });
+});
+
+// ── B1: temp-id → real-id remapping ─────────────────────────────────────────────
+
+describe('mutationQueue.flush — temp-id remapping (B1)', () => {
+  it('rewrites a dependent PUT/DELETE to the real id within one flush', async () => {
+    const tempId = -1;
+    await offlineDb.places.put({ ...buildPlace({ trip_id: 1 }), id: tempId });
+
+    const createId = generateUUID();
+    const putId = generateUUID();
+    const deleteId = generateUUID();
+
+    await mutationQueue.enqueue({
+      id: createId, tripId: 1, method: 'POST', url: '/trips/1/places',
+      body: { name: 'Temp' }, resource: 'places', tempId,
+    });
+    await mutationQueue.enqueue({
+      id: putId, tripId: 1, method: 'PUT', url: '/trips/1/places/{id}',
+      body: { name: 'Edited' }, resource: 'places', entityId: tempId, tempEntityId: tempId,
+    });
+    await mutationQueue.enqueue({
+      id: deleteId, tripId: 1, method: 'DELETE', url: '/trips/1/places/{id}',
+      body: undefined, resource: 'places', entityId: tempId, tempEntityId: tempId,
+    });
+
+    const putUrls: string[] = [];
+    const deleteUrls: string[] = [];
+    server.use(
+      http.post('/api/trips/1/places', () => HttpResponse.json({ place: buildPlace({ trip_id: 1, id: 42 }) })),
+      http.put('/api/trips/1/places/:id', ({ params }) => { putUrls.push(String(params.id)); return HttpResponse.json({ place: buildPlace({ trip_id: 1, id: 42, name: 'Edited' }) }); }),
+      http.delete('/api/trips/1/places/:id', ({ params }) => { deleteUrls.push(String(params.id)); return HttpResponse.json({ success: true }); }),
+    );
+
+    await mutationQueue.flush();
+
+    expect(putUrls).toEqual(['42']);
+    expect(deleteUrls).toEqual(['42']);
+    expect(await mutationQueue.pendingCount()).toBe(0);
+    expect(await mutationQueue.failedCount()).toBe(0);
+  });
+
+  it('durably rewrites a still-queued dependent after the CREATE flushes alone', async () => {
+    const tempId = -7;
+    await offlineDb.places.put({ ...buildPlace({ trip_id: 1 }), id: tempId });
+
+    const createId = generateUUID();
+    const putId = generateUUID();
+    await mutationQueue.enqueue({
+      id: createId, tripId: 1, method: 'POST', url: '/trips/1/places',
+      body: { name: 'Temp' }, resource: 'places', tempId,
+    });
+    await mutationQueue.enqueue({
+      id: putId, tripId: 1, method: 'PUT', url: '/trips/1/places/{id}',
+      body: { name: 'Edited' }, resource: 'places', entityId: tempId, tempEntityId: tempId,
+    });
+
+    // Only the CREATE succeeds this round; the PUT errors out (network) and stays queued.
+    let putAttempts = 0;
+    server.use(
+      http.post('/api/trips/1/places', () => HttpResponse.json({ place: buildPlace({ trip_id: 1, id: 88 }) })),
+      http.put('/api/trips/1/places/:id', () => { putAttempts++; return HttpResponse.error(); }),
+    );
+
+    await mutationQueue.flush();
+
+    const queuedPut = await offlineDb.mutationQueue.get(putId);
+    expect(queuedPut).toBeDefined();
+    expect(queuedPut!.url).toBe('/trips/1/places/88');
+    expect(queuedPut!.entityId).toBe(88);
+    expect(queuedPut!.tempEntityId).toBeUndefined();
+    expect(putAttempts).toBeGreaterThanOrEqual(1);
+  });
+
+  it('marks an orphaned dependent (placeholder never resolved) as failed', async () => {
+    const putId = generateUUID();
+    await mutationQueue.enqueue({
+      id: putId, tripId: 1, method: 'PUT', url: '/trips/1/places/{id}',
+      body: { name: 'Edited' }, resource: 'places', entityId: -999, tempEntityId: -999,
+    });
+
+    await mutationQueue.flush();
+
+    const m = await offlineDb.mutationQueue.get(putId);
+    expect(m!.status).toBe('failed');
+  });
+});
+
+// ── B3: terminal rollback + retryable classification ────────────────────────────
+
+describe('mutationQueue.flush — failure handling (B3)', () => {
+  it('rolls back the phantom optimistic row on a terminal 400 CREATE', async () => {
+    const tempId = -3;
+    await offlineDb.places.put({ ...buildPlace({ trip_id: 1 }), id: tempId });
+
+    const id = generateUUID();
+    await mutationQueue.enqueue(makeMutation({ id, tempId }));
+
+    server.use(
+      http.post('/api/trips/1/places', () => HttpResponse.json({ error: 'Bad' }, { status: 400 })),
+    );
+
+    await mutationQueue.flush();
+
+    expect(await offlineDb.places.get(tempId)).toBeUndefined();
+    const m = await offlineDb.mutationQueue.get(id);
+    expect(m!.status).toBe('failed');
+  });
+
+  it('treats 429 as retryable: resets to pending and stops the flush', async () => {
+    const id = generateUUID();
+    await mutationQueue.enqueue(makeMutation({ id }));
+
+    server.use(
+      http.post('/api/trips/1/places', () => HttpResponse.json({ error: 'slow down' }, { status: 429 })),
+    );
+
+    await mutationQueue.flush();
+
+    const m = await offlineDb.mutationQueue.get(id);
+    expect(m!.status).toBe('pending');
+    expect(m!.attempts).toBe(1);
+    expect(await mutationQueue.failedCount()).toBe(0);
+  });
+
+  it('treats 401 as retryable rather than dropping the change', async () => {
+    const id = generateUUID();
+    await mutationQueue.enqueue(makeMutation({ id }));
+
+    server.use(
+      http.post('/api/trips/1/places', () => HttpResponse.json({ error: 'AUTH_REQUIRED' }, { status: 401 })),
+    );
+
+    await mutationQueue.flush();
+
+    const m = await offlineDb.mutationQueue.get(id);
+    expect(m!.status).toBe('pending');
+  });
+});

client/tests/unit/sync/persistentStorage.test.ts

@@ -0,0 +1,47 @@
+/**
+ * requestPersistentStorage (H8 / M6) — best-effort persistent storage request
+ * so prefetched tiles / file blobs / IndexedDB aren't evicted under pressure.
+ */
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { requestPersistentStorage } from '../../../src/sync/persistentStorage';
+
+const original = (navigator as Navigator & { storage?: StorageManager }).storage;
+
+afterEach(() => {
+  Object.defineProperty(navigator, 'storage', { value: original, configurable: true });
+  vi.restoreAllMocks();
+});
+
+function stubStorage(storage: unknown) {
+  Object.defineProperty(navigator, 'storage', { value: storage, configurable: true });
+}
+
+describe('requestPersistentStorage', () => {
+  it('requests persistence when not already granted', async () => {
+    const persist = vi.fn().mockResolvedValue(true);
+    const persisted = vi.fn().mockResolvedValue(false);
+    stubStorage({ persist, persisted });
+
+    expect(await requestPersistentStorage()).toBe(true);
+    expect(persist).toHaveBeenCalledOnce();
+  });
+
+  it('skips the prompt when already persisted', async () => {
+    const persist = vi.fn().mockResolvedValue(true);
+    const persisted = vi.fn().mockResolvedValue(true);
+    stubStorage({ persist, persisted });
+
+    expect(await requestPersistentStorage()).toBe(true);
+    expect(persist).not.toHaveBeenCalled();
+  });
+
+  it('returns false (no throw) when the API is unavailable', async () => {
+    stubStorage(undefined);
+    expect(await requestPersistentStorage()).toBe(false);
+  });
+
+  it('returns false (no throw) when persist rejects', async () => {
+    stubStorage({ persist: vi.fn().mockRejectedValue(new Error('denied')) });
+    expect(await requestPersistentStorage()).toBe(false);
+  });
+});

client/tests/unit/sync/syncTriggers.test.ts

@@ -0,0 +1,76 @@
+/**
+ * syncTriggers — reconnect/online wiring (H1).
+ *
+ * Verifies the previously-dead refetch path is wired: on WS reconnect and on the
+ * `online` event the active trip's store is re-hydrated (after the queue flush).
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+const flush = vi.fn(() => Promise.resolve());
+const syncAll = vi.fn(() => Promise.resolve());
+const hydrate = vi.fn(() => Promise.resolve());
+
+let refetchCb: ((tripId: string) => void) | null = null;
+let preReconnect: (() => Promise<void>) | null = null;
+
+vi.mock('../../../src/sync/mutationQueue', () => ({
+  mutationQueue: { flush: () => flush() },
+}));
+vi.mock('../../../src/sync/tripSyncManager', () => ({
+  tripSyncManager: { syncAll: () => syncAll() },
+}));
+vi.mock('../../../src/api/websocket', () => ({
+  setPreReconnectHook: (fn: (() => Promise<void>) | null) => { preReconnect = fn; },
+  setRefetchCallback: (fn: ((tripId: string) => void) | null) => { refetchCb = fn; },
+  getActiveTrips: () => ['7'],
+}));
+vi.mock('../../../src/store/tripStore', () => ({
+  useTripStore: { getState: () => ({ hydrateActiveTrip: hydrate }) },
+}));
+
+import { registerSyncTriggers, unregisterSyncTriggers } from '../../../src/sync/syncTriggers';
+
+const flushMicrotasks = async () => {
+  for (let i = 0; i < 5; i++) await Promise.resolve();
+};
+
+beforeEach(() => {
+  flush.mockClear(); syncAll.mockClear(); hydrate.mockClear();
+  refetchCb = null; preReconnect = null;
+  Object.defineProperty(navigator, 'onLine', { value: true, writable: true, configurable: true });
+});
+
+afterEach(() => {
+  unregisterSyncTriggers();
+});
+
+describe('syncTriggers', () => {
+  it('registers a refetch callback that hydrates the active trip', () => {
+    registerSyncTriggers();
+    expect(refetchCb).toBeTypeOf('function');
+    refetchCb!('7');
+    expect(hydrate).toHaveBeenCalledWith('7');
+  });
+
+  it('also registers the pre-reconnect flush hook', () => {
+    registerSyncTriggers();
+    expect(preReconnect).toBeTypeOf('function');
+  });
+
+  it('clears both reconnect hooks on unregister', () => {
+    registerSyncTriggers();
+    unregisterSyncTriggers();
+    expect(refetchCb).toBeNull();
+    expect(preReconnect).toBeNull();
+  });
+
+  it('online event flushes, then re-seeds Dexie and re-hydrates active trips', async () => {
+    registerSyncTriggers();
+    window.dispatchEvent(new Event('online'));
+    await flushMicrotasks();
+
+    expect(flush).toHaveBeenCalled();
+    expect(syncAll).toHaveBeenCalled();
+    expect(hydrate).toHaveBeenCalledWith('7');
+  });
+});

client/tests/unit/sync/tilePrefetcher.test.ts

@@ -207,17 +207,42 @@ describe('prefetchTilesForTrip', () => {
     expect(meta!.tilesBbox).toHaveLength(4);
   });
 
-  it('skips prefetch when estimated tiles exceed MAX_TILES', async () => {
+  it('zoom-clamps instead of skipping when the bbox exceeds MAX_TILES', async () => {
     await upsertSyncMeta({ tripId: 1, lastSyncedAt: Date.now(), status: 'idle', tilesBbox: null, filesCachedCount: 0 });
 
-    // Places far apart → huge bbox → estimate > MAX_TILES
+    // ~4° road-trip span: low zooms fit the budget, high zooms (z14+) blow past
+    // it. The old guard skipped the whole trip; now we keep what fits.
     const places = [
-      buildPlace({ trip_id: 1, lat: -60, lng: -170 }),
-      buildPlace({ trip_id: 1, lat: 60, lng: 170 }),
+      buildPlace({ trip_id: 1, lat: 45.0, lng: 0.0 }),
+      buildPlace({ trip_id: 1, lat: 49.0, lng: 4.0 }),
     ];
     await prefetchTilesForTrip(1, places, 'https://{s}.example.com/{z}/{x}/{y}.png');
 
-    // No fetches should have been made
-    expect(vi.mocked(fetch)).not.toHaveBeenCalled();
+    // Previously this skipped entirely; now it prefetches a clamped subset.
+    const calls = vi.mocked(fetch).mock.calls.length;
+    expect(calls).toBeGreaterThan(0);
+    expect(calls).toBeLessThanOrEqual(MAX_TILES);
+  });
+
+  it('prefetches a region-sized (0.5°) trip that the old all-or-nothing guard would have skipped', async () => {
+    await upsertSyncMeta({ tripId: 1, lastSyncedAt: Date.now(), status: 'idle', tilesBbox: null, filesCachedCount: 0 });
+
+    const places = [
+      buildPlace({ trip_id: 1, lat: 48.6, lng: 2.1 }),
+      buildPlace({ trip_id: 1, lat: 49.1, lng: 2.6 }),
+    ];
+    await prefetchTilesForTrip(1, places, 'https://{s}.example.com/{z}/{x}/{y}.png');
+
+    const calls = vi.mocked(fetch).mock.calls.length;
+    expect(calls).toBeGreaterThan(0);
+    expect(calls).toBeLessThanOrEqual(MAX_TILES);
+  });
+});
+
+// ── cap coherence ───────────────────────────────────────────────────────────────
+
+describe('MAX_TILES budget', () => {
+  it('matches the Workbox map-tiles maxEntries in vite.config.js (drift guard)', () => {
+    expect(MAX_TILES).toBe(12288);
   });
 });

client/tests/unit/sync/tripSyncManager.test.ts

@@ -9,6 +9,7 @@ import 'fake-indexeddb/auto';
 import { server } from '../../helpers/msw/server';
 import { http, HttpResponse } from 'msw';
 import { tripSyncManager } from '../../../src/sync/tripSyncManager';
+import { setAuthed } from '../../../src/sync/authGate';
 import { offlineDb, clearAll, upsertTrip } from '../../../src/db/offlineDb';
 import {
   buildTrip,
@@ -45,6 +46,7 @@ function makeBundle(tripId: number) {
 beforeEach(async () => {
   await clearAll();
   tripSyncManager._resetSyncing();
+  setAuthed(true);
   Object.defineProperty(navigator, 'onLine', { value: true, writable: true, configurable: true });
   // Stub fetch for blob caching (used by cacheFilesForTrip)
   vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
@@ -56,6 +58,19 @@ beforeEach(async () => {
 afterEach(() => {
   vi.restoreAllMocks();
   vi.unstubAllGlobals();
+  setAuthed(false);
+});
+
+describe('tripSyncManager.syncAll — auth gate (B4)', () => {
+  it('no-ops when logged out (gate closed)', async () => {
+    setAuthed(false);
+    let called = false;
+    server.use(
+      http.get('/api/trips', () => { called = true; return HttpResponse.json({ trips: [] }); }),
+    );
+    await tripSyncManager.syncAll();
+    expect(called).toBe(false);
+  });
 });
 
 // ── offline guard ─────────────────────────────────────────────────────────────

client/tests/unit/tripStore.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { http, HttpResponse } from 'msw';
 import { useTripStore } from '../../src/store/tripStore';
 import { resetAllStores } from '../helpers/store';
-import { buildTrip, buildDay, buildPlace, buildPackingItem, buildTodoItem, buildTag, buildCategory, buildAssignment, buildDayNote } from '../helpers/factories';
+import { buildTrip, buildDay, buildPlace, buildPackingItem, buildTodoItem, buildTag, buildCategory, buildAssignment, buildDayNote, buildBudgetItem, buildReservation, buildTripFile } from '../helpers/factories';
 import { server } from '../helpers/msw/server';
 
 vi.mock('../../src/api/websocket', () => ({
@@ -21,6 +21,28 @@ beforeEach(() => {
   resetAllStores();
 });
 
+/** Full set of MSW handlers for one trip's loadTrip fan-out. */
+function tripHandlers(
+  id: number,
+  data: {
+    budget?: unknown[]; reservations?: unknown[]; files?: unknown[];
+    tags?: unknown[]; categories?: unknown[];
+  },
+) {
+  return [
+    http.get(`/api/trips/${id}`, () => HttpResponse.json({ trip: buildTrip({ id }) })),
+    http.get(`/api/trips/${id}/days`, () => HttpResponse.json({ days: [] })),
+    http.get(`/api/trips/${id}/places`, () => HttpResponse.json({ places: [] })),
+    http.get(`/api/trips/${id}/packing`, () => HttpResponse.json({ items: [] })),
+    http.get(`/api/trips/${id}/todo`, () => HttpResponse.json({ items: [] })),
+    http.get(`/api/trips/${id}/budget`, () => HttpResponse.json({ items: data.budget ?? [] })),
+    http.get(`/api/trips/${id}/reservations`, () => HttpResponse.json({ reservations: data.reservations ?? [] })),
+    http.get(`/api/trips/${id}/files`, () => HttpResponse.json({ files: data.files ?? [] })),
+    http.get('/api/tags', () => HttpResponse.json({ tags: data.tags ?? [] })),
+    http.get('/api/categories', () => HttpResponse.json({ categories: data.categories ?? [] })),
+  ];
+}
+
 describe('tripStore', () => {
   describe('loadTrip', () => {
     it('FE-TRIP-001: fires parallel API calls for trips, days, places, packing, todo, tags, categories', async () => {
@@ -178,6 +200,97 @@ describe('tripStore', () => {
       expect(state.isLoading).toBe(false);
       expect(state.error).not.toBeNull();
     });
+
+    it('FE-TRIP-H5: loadTrip uniformly hydrates budget, reservations and files', async () => {
+      const budgetItem = buildBudgetItem({ trip_id: 1 });
+      const reservation = buildReservation({ trip_id: 1 });
+      const file = buildTripFile({ trip_id: 1 });
+      server.use(...tripHandlers(1, { budget: [budgetItem], reservations: [reservation], files: [file] }));
+
+      await useTripStore.getState().loadTrip(1);
+      const state = useTripStore.getState();
+
+      expect(state.budgetItems).toEqual([budgetItem]);
+      expect(state.reservations).toEqual([reservation]);
+      expect(state.files).toEqual([file]);
+    });
+
+    it('FE-TRIP-H4: switching trips does not leak budget/reservations/files from the previous trip', async () => {
+      // Trip 1 has budget/reservations/files; trip 2 has none.
+      server.use(...tripHandlers(1, {
+        budget: [buildBudgetItem({ trip_id: 1 })],
+        reservations: [buildReservation({ trip_id: 1 })],
+        files: [buildTripFile({ trip_id: 1 })],
+      }));
+      await useTripStore.getState().loadTrip(1);
+      expect(useTripStore.getState().budgetItems).toHaveLength(1);
+
+      server.use(...tripHandlers(2, {}));
+      await useTripStore.getState().loadTrip(2);
+      const state = useTripStore.getState();
+
+      expect(state.trip!.id).toBe(2);
+      expect(state.budgetItems).toEqual([]);
+      expect(state.reservations).toEqual([]);
+      expect(state.files).toEqual([]);
+    });
+
+    it('FE-TRIP-H4b: resetTrip clears every trip-scoped slice but keeps tags/categories', async () => {
+      server.use(...tripHandlers(1, {
+        budget: [buildBudgetItem({ trip_id: 1 })],
+        reservations: [buildReservation({ trip_id: 1 })],
+        files: [buildTripFile({ trip_id: 1 })],
+        tags: [buildTag()],
+      }));
+      await useTripStore.getState().loadTrip(1);
+      expect(useTripStore.getState().budgetItems).toHaveLength(1);
+
+      useTripStore.getState().resetTrip();
+      const state = useTripStore.getState();
+
+      expect(state.trip).toBeNull();
+      expect(state.places).toEqual([]);
+      expect(state.budgetItems).toEqual([]);
+      expect(state.reservations).toEqual([]);
+      expect(state.files).toEqual([]);
+      expect(state.selectedDayId).toBeNull();
+      // Global lookups survive a trip reset.
+      expect(state.tags).toHaveLength(1);
+    });
+  });
+
+  describe('hydrateActiveTrip', () => {
+    const loadHandlers = (places: unknown[] = [], budget: unknown[] = []) => [
+      http.get('/api/trips/1', () => HttpResponse.json({ trip: buildTrip({ id: 1 }) })),
+      http.get('/api/trips/1/days', () => HttpResponse.json({ days: [] })),
+      http.get('/api/trips/1/places', () => HttpResponse.json({ places })),
+      http.get('/api/trips/1/packing', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/todo', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: budget })),
+      http.get('/api/trips/1/reservations', () => HttpResponse.json({ reservations: [] })),
+      http.get('/api/trips/1/files', () => HttpResponse.json({ files: [] })),
+      http.get('/api/tags', () => HttpResponse.json({ tags: [] })),
+      http.get('/api/categories', () => HttpResponse.json({ categories: [] })),
+    ];
+
+    it('FE-TRIP-H1: silently refreshes resources without resetting or splashing', async () => {
+      server.use(...loadHandlers());
+      await useTripStore.getState().loadTrip(1);
+      expect(useTripStore.getState().trip!.id).toBe(1);
+
+      // New collaborative state arrives (as if edited by someone while we were offline).
+      const place = buildPlace({ trip_id: 1 });
+      const budgetItem = buildBudgetItem({ trip_id: 1 });
+      server.use(...loadHandlers([place], [budgetItem]));
+
+      await useTripStore.getState().hydrateActiveTrip(1);
+      const state = useTripStore.getState();
+
+      expect(state.places).toEqual([place]);
+      expect(state.budgetItems).toEqual([budgetItem]);
+      expect(state.trip!.id).toBe(1);      // trip not reset
+      expect(state.isLoading).toBe(false); // no splash toggled
+    });
   });
 
   describe('refreshDays', () => {

client/vite.config.js

@@ -15,21 +15,25 @@ export default defineConfig({
         runtimeCaching: [
           {
             // Carto map tiles (default provider)
+            // maxEntries MUST stay >= MAX_TILES in src/sync/tilePrefetcher.ts
+            // (both are 12288) so prefetched tiles aren't evicted on arrival.
             urlPattern: /^https:\/\/[a-d]\.basemaps\.cartocdn\.com\/.*/i,
             handler: 'CacheFirst',
             options: {
               cacheName: 'map-tiles',
-              expiration: { maxEntries: 1000, maxAgeSeconds: 30 * 24 * 60 * 60 },
+              expiration: { maxEntries: 12288, maxAgeSeconds: 30 * 24 * 60 * 60 },
               cacheableResponse: { statuses: [0, 200] },
             },
           },
           {
             // OpenStreetMap tiles (fallback / alternative)
+            // Shares the 'map-tiles' cache; keep maxEntries equal to the Carto
+            // rule above and MAX_TILES in src/sync/tilePrefetcher.ts (12288).
             urlPattern: /^https:\/\/[a-c]\.tile\.openstreetmap\.org\/.*/i,
             handler: 'CacheFirst',
             options: {
               cacheName: 'map-tiles',
-              expiration: { maxEntries: 1000, maxAgeSeconds: 30 * 24 * 60 * 60 },
+              expiration: { maxEntries: 12288, maxAgeSeconds: 30 * 24 * 60 * 60 },
               cacheableResponse: { statuses: [0, 200] },
             },
           },
@@ -44,17 +48,32 @@ export default defineConfig({
             },
           },
           {
-            // API calls — prefer network, fall back to cache
-            // Exclude sensitive endpoints (auth, admin, backup, settings)
-            urlPattern: /\/api\/(?!auth|admin|backup|settings|health).*/i,
-            handler: 'NetworkFirst',
+            // Mapbox GL style, glyphs, sprites and vector tiles. Best-effort
+            // offline only: opportunistically caches what the user has already
+            // viewed online. Full pre-download offline maps require the Leaflet
+            // renderer (raster prefetch in tilePrefetcher.ts) — the GL vector
+            // pipeline is not prefetched. StaleWhileRevalidate keeps the basemap
+            // fresh online while still serving from cache when offline. Mapbox
+            // sends CORS, so responses are non-opaque (real 200s, no quota pad).
+            urlPattern: /^https:\/\/(api\.mapbox\.com|[a-d]\.tiles\.mapbox\.com)\/.*/i,
+            handler: 'StaleWhileRevalidate',
             options: {
-              cacheName: 'api-data',
-              expiration: { maxEntries: 200, maxAgeSeconds: 24 * 60 * 60 },
-              networkTimeoutSeconds: 5,
+              cacheName: 'mapbox-tiles',
+              expiration: { maxEntries: 3000, maxAgeSeconds: 30 * 24 * 60 * 60 },
               cacheableResponse: { statuses: [200] },
             },
           },
+          {
+            // API calls — network only. We deliberately do NOT cache API
+            // responses in the Service Worker: Workbox keys entries by URL and
+            // cannot vary on the httpOnly session cookie, so a shared device
+            // could serve one user's cached data to the next (cross-user leak).
+            // Offline reads are served from the per-user IndexedDB cache via the
+            // repo layer instead. The urlPattern is kept so these requests still
+            // bypass the SPA navigation fallback.
+            urlPattern: /\/api\/(?!auth|admin|backup|settings|health).*/i,
+            handler: 'NetworkOnly',
+          },
           {
             // Uploaded files (photos, covers — public assets only)
             urlPattern: /\/uploads\/(?:covers|avatars)\/.*/i,

docker-compose.yml

@@ -23,6 +23,7 @@ services:
       - LOG_LEVEL=${LOG_LEVEL:-info} # info = concise user actions; debug = verbose admin-level details
 #      - DEFAULT_LANGUAGE=en # 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
 #      - SESSION_DURATION=30d # How long users stay logged in (trek_session JWT + cookie maxAge). Accepts: 1h | 12h | 7d | 30d | 90d. Default: 24h
+#      - SESSION_DURATION_REMEMBER=30d # Session length when "Remember me" is ticked at login: longer-lived JWT + persistent cookie that survives browser restarts. Same format as SESSION_DURATION. Default: 30d
       - ALLOWED_ORIGINS=${ALLOWED_ORIGINS:-} # Comma-separated origins for CORS and email notification links
 #      - FORCE_HTTPS=true # Optional. Enables HTTPS redirect, HSTS, CSP upgrade-insecure-requests, and secure cookies behind a TLS proxy
 #      - HSTS_INCLUDE_SUBDOMAINS=false # When true: adds includeSubDomains to the HSTS header. Only effective when HSTS is active. Leave false if sibling subdomains still run over plain HTTP.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trek/root",
   "private": true,
-  "version": "3.0.22",
+  "version": "3.1.1",
   "workspaces": [
     "client",
     "server",
@@ -25,17 +25,18 @@
     "format:check": "npm run format:check --workspace=shared && npm run format:check --workspace=server && npm run format:check --workspace=client"
   },
   "devDependencies": {
-    "concurrently": "^9.2.1"
+    "concurrently": "^10.0.3"
   },
   "comment:overrides": "Force a single React 19 across the workspace so the test renderer (@testing-library/react) and the app share one react-dom.",
   "overrides": {
     "react": "19.2.6",
-    "react-dom": "19.2.6"
+    "react-dom": "19.2.6",
+    "multer": "^2.2.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-musl": "4.60.4",
-    "@rollup/rollup-linux-arm64-musl": "4.60.4",
-    "@img/sharp-linuxmusl-x64": "0.33.5",
-    "@img/sharp-linuxmusl-arm64": "0.33.5"
+    "@rollup/rollup-linux-x64-musl": "4.62.0",
+    "@rollup/rollup-linux-arm64-musl": "4.62.0",
+    "@img/sharp-linuxmusl-x64": "0.35.1",
+    "@img/sharp-linuxmusl-arm64": "0.35.1"
   }
-}
+}

server/.env.example

@@ -9,6 +9,7 @@ NODE_ENV=development # development = development mode; production = production m
 TZ=UTC # Timezone for logs, reminders and scheduled tasks (e.g. Europe/Berlin)
 # DEFAULT_LANGUAGE=en # Default language on the login page for users with no saved preference (default: en)
 # SESSION_DURATION=30d # How long users stay logged in — sets the trek_session JWT exp + cookie maxAge. Accepts 1h, 12h, 7d, 30d, 90d. Default: 24h
+# SESSION_DURATION_REMEMBER=30d # Session length when "Remember me" is ticked at login — longer-lived JWT + persistent cookie that survives browser restarts. Same format as SESSION_DURATION. Default: 30d
 # Supported values: de, en, es, fr, hu, nl, br, cs, pl, ru, zh, zh-TW, it, ar
 # Note: browser/OS language is detected automatically first; this is the fallback when no match is found.
 LOG_LEVEL=info # info = concise user actions; debug = verbose admin-level details
@@ -34,6 +35,8 @@ OIDC_SCOPE=openid email profile # Fully overrides the default. Add extra scopes
 
 DEMO_MODE=false # Demo mode - resets data hourly
 
+# BACKUP_UPLOAD_LIMIT_MB=500 # Max size (MB) of a backup archive you can upload when restoring. Raise it if your backup exceeds 500 MB. If you sit behind a reverse proxy, raise its upload limit too (e.g. nginx client_max_body_size).
+
 # MCP_RATE_LIMIT=300 # Max MCP API requests per user per minute (default: 300)
 # MCP_MAX_SESSION_PER_USER=20 # Max concurrent MCP sessions per user (default: 20)