chore: bump version to 4.3.3 [skip ci]

v4.3.3 bug fixes

.gitattributes

@@ -26,3 +26,5 @@
 *.eot  binary
 *.pdf  binary
 *.zip  binary
+# A GPX fixture whose byte-order mark and CRLF line endings are what it tests
+server/tests/fixtures/gpx/bom-crlf.gpx -text

.github/workflows/test.yml

@@ -51,6 +51,12 @@ on:
       - 'package-lock.json'
       - 'sonar-project.properties'
       - '.github/workflows/test.yml'
+      # The image's start-up shape is pinned by a unit test
+      # (server/tests/unit/docker-entrypoint.test.ts), so a change to the
+      # Dockerfile or to the entrypoint script has to run the suite — that is
+      # exactly the change the test exists to catch.
+      - 'Dockerfile'
+      - 'server/scripts/**'
       # Docs inside the workspaces (CLAUDE.md, READMEs, PATTERN.md) affect
       # neither the tests nor the scan — no test reads checked-in markdown
       # and SonarCloud has no markdown analyzer. Negations must stay last.
@@ -69,6 +75,12 @@ on:
       - 'package-lock.json'
       - 'sonar-project.properties'
       - '.github/workflows/test.yml'
+      # The image's start-up shape is pinned by a unit test
+      # (server/tests/unit/docker-entrypoint.test.ts), so a change to the
+      # Dockerfile or to the entrypoint script has to run the suite — that is
+      # exactly the change the test exists to catch.
+      - 'Dockerfile'
+      - 'server/scripts/**'
       # Docs inside the workspaces (CLAUDE.md, READMEs, PATTERN.md) affect
       # neither the tests nor the scan — no test reads checked-in markdown
       # and SonarCloud has no markdown analyzer. Negations must stay last.

Dockerfile

@@ -20,13 +20,15 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY client/package.json ./client/
+COPY client/scripts/patch-maplibre.mjs ./client/scripts/
 RUN npm ci --workspace=client
 COPY --from=shared-builder /app/shared/dist ./shared/dist
 COPY client/ ./client/
 RUN npm run build --workspace=client
 
 # ── Stage 3: server ──────────────────────────────────────────────────────────
-# --ignore-scripts skips native builds (better-sqlite3); they happen in the production stage.
+# --ignore-scripts: nothing here needs a postinstall, tsc only reads types. The one
+# native module, better-sqlite3, ships its binaries inside the npm tarball since 13.x.
 FROM node:24-alpine AS server-builder
 WORKDIR /app
 COPY package.json package-lock.json ./
@@ -51,17 +53,27 @@ COPY server/package.json ./server/
 # changeset, so it costs nothing. Everything copied after this point carries
 # --chown=node:node for the same reason — a recursive chown in a later layer
 # would copy up every inode it touches and duplicate the whole tree in the image.
+#
+# No compiler in this stage. better-sqlite3 13.x carries prebuilt binaries for
+# amd64 and arm64 inside its tarball, so there is nothing left to build: the old
+# python3 + build-essential fallback compiled it against whatever Node headers
+# the base image had that day, and 24.19+ headers give an addon that aborts with
+# "Assertion failed: (env) != nullptr" the first time a statement is collected
+# (#2421). --ignore-scripts because a lockfile-driven npm ci still synthesises
+# `node-gyp rebuild` for the binding.gyp it finds, blind to the package's
+# gypfile:false (npm/cli#9837). The only other install scripts among the runtime
+# deps are esbuild's binary check, redundant next to its optional platform
+# package, and a telemetry ping.
 RUN apt-get update && \
-    apt-get install -y --no-install-recommends tzdata dumb-init wget ca-certificates python3 build-essential \
-    libkitinerary-bin && \
-    npm ci --workspace=server --omit=dev && \
+    apt-get install -y --no-install-recommends tzdata dumb-init wget ca-certificates \
+    libkitinerary-bin libsqlite3-0 && \
+    npm ci --workspace=server --omit=dev --ignore-scripts && \
     ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
-    apt-get purge -y python3 build-essential && \
-    apt-get autoremove -y && \
     rm -rf /var/lib/apt/lists/* /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx && \
     chown -R node:node /app
 
-# gosu rebuilt with a current Go toolchain (stage 0) — used by CMD to drop to node.
+# gosu rebuilt with a current Go toolchain (stage 0) — the entrypoint script uses
+# it to drop to node.
 COPY --from=gosu-build /out/gosu /usr/local/bin/gosu
 
 ENV XDG_CACHE_HOME=/tmp/kf6-cache
@@ -116,9 +128,14 @@ EXPOSE 3000
 HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
   CMD wget -qO- http://localhost:3000/api/health || exit 1
 
+# Start-up lives in a script, not an inline `sh -c` string: container management
+# UIs re-tokenise Config.Cmd when you edit a container in place, and a command
+# carrying quotes does not survive that round-trip (the container then dies with
+# a shell syntax error before Node starts). A CMD of one bare token does.
+COPY server/scripts/entrypoint.sh /usr/local/bin/trek-entrypoint
+# Root-owned on purpose — this is what calls gosu, so it runs before the drop to
+# node. chmod is explicit because a checkout on Windows carries no exec bit.
+RUN chmod 0755 /usr/local/bin/trek-entrypoint
+
 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", "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"]
+CMD ["/usr/local/bin/trek-entrypoint"]

charts/README.md

@@ -49,6 +49,7 @@ See `values.yaml` for more options.
 - Liveness and readiness probes are configurable under `probes`. Overrides are merged over the defaults, so `--set probes.liveness.initialDelaySeconds=60` keeps the `httpGet` handler. When switching to `exec` or `tcpSocket`, clear `httpGet` in the same override. Set `probes.liveness: null` to remove a probe.
 - If using ingress, you must manually keep `env.ALLOWED_ORIGINS` and `ingress.hosts` in sync to ensure CORS works correctly. The chart does not sync these automatically.
 - Set `env.ALLOW_INTERNAL_NETWORK: "true"` if Immich or other integrated services are hosted on a private/RFC-1918 address (e.g. a pod on the same cluster or a NAS on your LAN). Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) remain blocked regardless.
+- Set `env.ALLOW_LINK_LOCAL_IPS` to a single link-local address (e.g. `"169.254.1.2"`) only when a service TREK needs sits behind one, such as a host gateway. Cloud metadata addresses (`169.254.169.x`, `169.254.170.x`) cannot be listed.
 - `FORCE_HTTPS` is optional. Set `env.FORCE_HTTPS: "true"` only when ingress (or another proxy) terminates TLS. It enables HTTPS redirects, HSTS, CSP `upgrade-insecure-requests`, and forces the session cookie `secure` flag. Requires `TRUST_PROXY` to be set.
 - Set `env.TRUST_PROXY: "1"` (or the number of proxy hops) when running behind ingress or a load balancer. Required for `FORCE_HTTPS` to detect the forwarded protocol correctly. In production it defaults to `1` automatically.
 - `COOKIE_SECURE` is auto-derived (on when `NODE_ENV=production` or `FORCE_HTTPS=true`). Set `env.COOKIE_SECURE: "false"` only during local testing without TLS. **Not recommended for production.**

charts/trek/Chart.yaml

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

charts/trek/templates/configmap.yaml

@@ -43,6 +43,9 @@ data:
   {{- if .Values.env.ALLOW_INTERNAL_NETWORK }}
   ALLOW_INTERNAL_NETWORK: {{ .Values.env.ALLOW_INTERNAL_NETWORK | quote }}
   {{- end }}
+  {{- if .Values.env.ALLOW_LINK_LOCAL_IPS }}
+  ALLOW_LINK_LOCAL_IPS: {{ .Values.env.ALLOW_LINK_LOCAL_IPS | quote }}
+  {{- end }}
   {{- if .Values.env.OIDC_ISSUER }}
   OIDC_ISSUER: {{ .Values.env.OIDC_ISSUER | quote }}
   {{- end }}
@@ -73,9 +76,24 @@ data:
   {{- if .Values.env.MCP_RATE_LIMIT }}
   MCP_RATE_LIMIT: {{ .Values.env.MCP_RATE_LIMIT | quote }}
   {{- end }}
+  {{- if .Values.env.NOMINATIM_URL }}
+  NOMINATIM_URL: {{ .Values.env.NOMINATIM_URL | quote }}
+  {{- end }}
   {{- if .Values.env.OVERPASS_URL }}
   OVERPASS_URL: {{ .Values.env.OVERPASS_URL | quote }}
   {{- end }}
   {{- if .Values.env.OVERPASS_TIMEOUT_MS }}
   OVERPASS_TIMEOUT_MS: {{ .Values.env.OVERPASS_TIMEOUT_MS | quote }}
   {{- end }}
+  {{- /* Tested for presence rather than truth: the one value this switch gets set to is
+         false, and an unquoted false (or --set env.TREK_PLACES_ENABLED=false) would
+         otherwise drop the key and leave the index on. */}}
+  {{- if not (kindIs "invalid" .Values.env.TREK_PLACES_ENABLED) }}
+  TREK_PLACES_ENABLED: {{ .Values.env.TREK_PLACES_ENABLED | quote }}
+  {{- end }}
+  {{- if .Values.env.TREK_PLACES_URL }}
+  TREK_PLACES_URL: {{ .Values.env.TREK_PLACES_URL | quote }}
+  {{- end }}
+  {{- if .Values.env.AMAP_API_BASE }}
+  AMAP_API_BASE: {{ .Values.env.AMAP_API_BASE | quote }}
+  {{- end }}

charts/trek/templates/deployment.yaml

@@ -75,6 +75,18 @@ spec:
                   name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
                   key: UNSPLASH_ACCESS_KEY
                   optional: true
+            - name: AMAP_API_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
+                  key: AMAP_API_KEY
+                  optional: true
+            - name: AMAP_API_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
+                  key: AMAP_API_SECRET
+                  optional: true
           volumeMounts:
             - name: data
               mountPath: /app/data

charts/trek/templates/secret.yaml

@@ -20,6 +20,12 @@ data:
   {{- if .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
   UNSPLASH_ACCESS_KEY: {{ .Values.secretEnv.UNSPLASH_ACCESS_KEY | b64enc | quote }}
   {{- end }}
+  {{- if .Values.secretEnv.AMAP_API_KEY }}
+  AMAP_API_KEY: {{ .Values.secretEnv.AMAP_API_KEY | b64enc | quote }}
+  {{- end }}
+  {{- if .Values.secretEnv.AMAP_API_SECRET }}
+  AMAP_API_SECRET: {{ .Values.secretEnv.AMAP_API_SECRET | b64enc | quote }}
+  {{- end }}
 {{- end }}
 
 {{- if and (not .Values.existingSecret) (.Values.generateEncryptionKey) }}
@@ -50,4 +56,10 @@ stringData:
   {{- if .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
   UNSPLASH_ACCESS_KEY: {{ .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
   {{- end }}
+  {{- if .Values.secretEnv.AMAP_API_KEY }}
+  AMAP_API_KEY: {{ .Values.secretEnv.AMAP_API_KEY }}
+  {{- end }}
+  {{- if .Values.secretEnv.AMAP_API_SECRET }}
+  AMAP_API_SECRET: {{ .Values.secretEnv.AMAP_API_SECRET }}
+  {{- end }}
 {{- end }}

charts/trek/values.yaml

@@ -54,6 +54,9 @@ env:
   # ALLOW_INTERNAL_NETWORK: "false"
   # Set to "true" if Immich or other integrated services are hosted on a private/RFC-1918 network address.
   # Loopback (127.x) and link-local/metadata addresses (169.254.x) are always blocked.
+  # ALLOW_LINK_LOCAL_IPS: ""
+  # Comma-separated single link-local addresses TREK may reach after all, e.g. "169.254.1.2" for a host gateway.
+  # 169.254.169.x and 169.254.170.x (cloud metadata) cannot be listed; an invalid entry aborts startup.
   # OIDC_ISSUER: ""
   # OpenID Connect provider URL.
   # OIDC_CLIENT_ID: ""
@@ -78,12 +81,33 @@ env:
   # Max MCP API requests per user per minute. Defaults to 300.
   # MCP_MAX_SESSION_PER_USER: "20"
   # Max concurrent MCP sessions per user. Defaults to 20.
+  # NOMINATIM_URL: ""
+  # Custom Nominatim base URL for every geocoding call the server makes (place search, reverse lookup, Atlas region
+  # fill). When set it REPLACES the public OpenStreetMap service, with no fallback, so the instance behind it needs
+  # the coverage you expect and has to speak the Nominatim API. TREK keeps its ~1 request per second spacing either
+  # way. Defaults to https://nominatim.openstreetmap.org.
   # OVERPASS_URL: ""
   # Custom Overpass endpoint(s) for the map POI "explore" search, comma-separated. When set, REPLACES the bundled
   # public mirrors — point it at an internal/self-hosted Overpass instance when the public mirrors are unreachable
   # from the cluster (e.g. locked-down egress). Non-http(s) entries are ignored.
-  # OVERPASS_TIMEOUT_MS: "12000"
-  # Per-endpoint timeout (ms) for Overpass POI requests. Raise it for a slow self-hosted Overpass instance. Defaults to 12000.
+  # OVERPASS_TIMEOUT_MS: "25000"
+  # Per-endpoint timeout (ms) for Overpass POI requests. The query itself gives Overpass 20 seconds of work, so a
+  # lower value hangs up on answers that were still coming. Raise it for a slow self-hosted Overpass instance.
+  # Defaults to 25000.
+  # TREK_PLACES_ENABLED: "false"
+  # Place search (suggestions, full search, category buttons, Road trip search, import geocoding, offline downloads)
+  # asks the TREK Places API at https://places.liketrek.com by default, so the pod makes outbound requests to that
+  # host. Set "false" to search the way it did before 4.3.0 (OpenStreetMap, or your Google/Amap key) and send
+  # nothing there. There is no switch in the admin panel on purpose: whether searches leave the instance is decided
+  # here. Defaults to on.
+  # TREK_PLACES_URL: ""
+  # Base URL of a copy of the Places API you run yourself; it has to answer the same /v1 API. Read from
+  # configuration rather than typed by a user, so an in-cluster address works without ALLOW_INTERNAL_NETWORK.
+  # Defaults to https://places.liketrek.com.
+  # AMAP_API_BASE: ""
+  # Send the Amap (高德地图) calls through an egress proxy, a cache or a gateway that speaks the same API instead of
+  # restapi.amap.com directly. The key itself is a credential and goes under secretEnv.AMAP_API_KEY, or into
+  # Admin > Settings > API Keys. Defaults to https://restapi.amap.com.
 
 
 # Secret environment variables stored in a Kubernetes Secret.
@@ -109,6 +133,15 @@ secretEnv:
   # Get a free key at https://unsplash.com/developers. Can also be set per-admin
   # in Admin > Settings; this value overrides that. Leave empty to disable.
   UNSPLASH_ACCESS_KEY: ""
+  # Optional Amap (高德地图) Web 服务 key for place search and geocoding inside mainland
+  # China. Overrides the key set in Admin > Settings > API Keys. A Web 端 (JS API) key is
+  # a different credential and is rejected with INVALID_USER_KEY. Leave empty to use the
+  # key from the admin panel, or none.
+  AMAP_API_KEY: ""
+  # The private secret (数字签名) of that key. Required exactly when the key was created
+  # with signing enabled, because such a key rejects every unsigned request. Leave empty
+  # otherwise. The endpoint itself is not a secret and is set under env.AMAP_API_BASE.
+  AMAP_API_SECRET: ""
 
 # If true, a random ENCRYPTION_KEY is generated at install and preserved across upgrades
 generateEncryptionKey: false

client/index.html

@@ -8,6 +8,9 @@
     <!-- Pre-paint appearance (FOUC fix). External classic script so it runs
          before first paint AND complies with the prod CSP (script-src 'self'). -->
     <script src="/theme-boot.js"></script>
+    <!-- Recovers a shell whose entry module cannot load (#2524). Classic for the
+         same reasons, and ahead of the entry, which it has to watch. -->
+    <script src="/shell-guard.js"></script>
 
     <!-- PWA / iOS -->
     <meta name="theme-color" content="#09090b" />

client/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@trek/client",
-  "version": "4.2.0",
+  "version": "4.3.3",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "prebuild": "node scripts/generate-icons.mjs",
+    "prebuild": "node scripts/patch-maplibre.mjs && node scripts/generate-icons.mjs",
     "build": "vite build",
     "build:analyze": "vite build --mode analyze",
     "preview": "vite preview",
@@ -26,7 +26,9 @@
     "shots:promote": "node e2e/screenshots/promote.mjs",
     "e2e:report": "playwright show-report",
     "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
-    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
+    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\"",
+    "postinstall": "node scripts/patch-maplibre.mjs",
+    "predev": "node scripts/patch-maplibre.mjs"
   },
   "dependencies": {
     "@fontsource/bebas-neue": "^5.3.0",
@@ -49,7 +51,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
     "mapbox-gl": "^3.22.0",
-    "maplibre-gl": "^5.24.0",
+    "maplibre-gl": "5.24.0",
     "marked": "^18.0.0",
     "plyr": "^3.8.4",
     "react": "^19.2.6",
@@ -79,7 +81,7 @@
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.11",
     "autoprefixer": "^10.4.18",
     "eslint": "^10.2.1",
     "eslint-config-flat-gitignore": "^2.3.0",
@@ -94,12 +96,12 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-tailwindcss": "^0.8.0",
     "rollup-plugin-visualizer": "^7.0.1",
-    "sharp": "^0.35.0",
+    "sharp": "^0.35.4",
     "tailwindcss": "^3.4.1",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.58.2",
     "vite": "8.1.0",
     "vite-plugin-pwa": "^1.3.0",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.11"
   }
 }

client/public/brands/airtrail.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+    stroke="#3c83f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    class="lucide lucide-tower-control-icon lucide-tower-control">
+    <path d="M18.2 12.27 20 6H4l1.8 6.27a1 1 0 0 0 .95.73h10.5a1 1 0 0 0 .96-.73Z" />
+    <path d="M8 13v9" />
+    <path d="M16 22v-9" />
+    <path d="m9 6 1 7" />
+    <path d="m15 6-1 7" />
+    <path d="M12 6V2" />
+    <path d="M13 2h-2" />
+</svg>

client/public/shell-guard.js

@@ -0,0 +1,154 @@
+/*
+ * Boot guard for the app shell (#2524).
+ *
+ * Loaded as an external classic script in <head> (NOT a module), like
+ * theme-boot.js, so it runs before the entry module and complies with the
+ * production CSP (script-src 'self').
+ *
+ * The entry module and every chunk it imports statically have to load before
+ * any of the app's own code runs. When one of them does not (a service worker
+ * precache that keeps index.html under a chunk's name, a proxy that hands out a
+ * stale file), the module script fails as a whole: nothing renders, and no error
+ * screen or reload button of the app is there to help. A reload changes nothing
+ * either, since the same precache answers it. This notices exactly that failure
+ * and, while the server answers, loads the page again from the server under a
+ * URL no cache has seen. When a service worker served the page, the app shell
+ * it keeps (the Workbox precache and the worker itself) is thrown away first,
+ * since that is what answered with the broken file. Once per session, so a build
+ * that is broken on the server cannot put the page in a reload loop. Offline
+ * nothing happens: the precache is then the only way the app can start at all.
+ *
+ * It also strips the query parameter such a reload carries, before the app
+ * reads the URL. Keep the parameter and the cache filter in sync with
+ * src/utils/chunkReload.ts and src/utils/serviceWorkerShell.ts.
+ *
+ * It must never throw.
+ */
+(function () {
+  var PARAM = 'trek-reload';
+  var MARKER = 'trek:shell-reload';
+  var HEALTH_TIMEOUT_MS = 3000;
+
+  try {
+    var here = new URL(window.location.href);
+    if (here.searchParams.has(PARAM)) {
+      here.searchParams.delete(PARAM);
+      window.history.replaceState(window.history.state, '', here.pathname + here.search + here.hash);
+    }
+  } catch (e) {
+    /* the parameter stays in the address bar, which is harmless */
+  }
+
+  // The built entry lives under /assets/. The dev server's /src/main.tsx does
+  // not, so a syntax error while developing is left to Vite's own overlay.
+  function isEntry(el) {
+    return !!el && el.tagName === 'SCRIPT' && el.type === 'module' && /\/assets\//.test(el.src || '');
+  }
+
+  function alreadyTried() {
+    try {
+      return !!sessionStorage.getItem(MARKER);
+    } catch (e) {
+      // Without the marker there is no loop protection, so do nothing.
+      return true;
+    }
+  }
+
+  function markTried() {
+    try {
+      sessionStorage.setItem(MARKER, String(Date.now()));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  // Same test as probeNow() in src/sync/connectivity.ts: TREK's own health JSON,
+  // not an edge proxy's login page and not a request that never came back.
+  function serverAnswers() {
+    var ctrl = typeof AbortController === 'function' ? new AbortController() : null;
+    var timer = ctrl ? setTimeout(function () { ctrl.abort(); }, HEALTH_TIMEOUT_MS) : null;
+    return fetch('/api/health', {
+      credentials: 'include',
+      cache: 'no-store',
+      redirect: 'manual',
+      signal: ctrl ? ctrl.signal : undefined,
+    }).then(function (res) {
+      var type = res.headers.get('content-type') || '';
+      return res.ok && type.indexOf('application/json') !== -1;
+    }, function () {
+      return false;
+    }).then(function (ok) {
+      if (timer) clearTimeout(timer);
+      return ok;
+    });
+  }
+
+  function servedByWorker() {
+    try {
+      return !!(navigator.serviceWorker && navigator.serviceWorker.controller);
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function dropAppShell() {
+    var jobs = [];
+    if (typeof caches !== 'undefined') {
+      jobs.push(caches.keys().then(function (names) {
+        return Promise.all(names.filter(function (name) {
+          return name.indexOf('-precache-') !== -1;
+        }).map(function (name) {
+          return caches.delete(name);
+        }));
+      }));
+    }
+    if (navigator.serviceWorker) {
+      jobs.push(navigator.serviceWorker.getRegistration().then(function (reg) {
+        return reg ? reg.unregister() : false;
+      }));
+    }
+    return Promise.all(jobs);
+  }
+
+  function reloadFresh() {
+    var url = new URL(window.location.href);
+    url.searchParams.set(PARAM, Date.now().toString(36));
+    window.location.replace(url.href);
+  }
+
+  function recover() {
+    if (alreadyTried()) return;
+    // Read now: a page the worker did not serve failed on the network, and its
+    // precache has nothing to do with it.
+    var fromWorker = servedByWorker();
+    serverAnswers().then(function (ok) {
+      if (!ok || alreadyTried() || !markTried()) return;
+      var dropped = fromWorker ? dropAppShell() : Promise.resolve();
+      return dropped.then(null, function () {
+        /* reload regardless, the server has the current build */
+      }).then(reloadFresh);
+    }).then(null, function () {
+      /* never block boot */
+    });
+  }
+
+  try {
+    // Error and load events of a script do not bubble, so both are caught on
+    // their way down. On the document, since a load event never reaches window.
+    document.addEventListener('error', function (event) {
+      if (isEntry(event.target)) recover();
+    }, true);
+    // The shell started, so a later update in this session may recover too.
+    document.addEventListener('load', function (event) {
+      if (!isEntry(event.target)) return;
+      try {
+        sessionStorage.removeItem(MARKER);
+      } catch (e) {
+        /* nothing to clear */
+      }
+    }, true);
+  } catch (e) {
+    /* never block boot */
+  }
+})();

client/rtlTextAlias.js

@@ -23,3 +23,17 @@ export const rtlTextAlias = {
     '../dist/mapbox-gl-rtl-text.js',
   ),
 };
+
+/**
+ * Same shape for Plyr's icon sprite. The package publishes its JS and CSS entries
+ * and nothing else, so `plyr/dist/plyr.svg` is refused by the resolver although
+ * the file is right there. The player has to point at a copy on this origin
+ * (#2341): its default is the sprite on cdn.plyr.io, which the CSP refuses.
+ */
+export const plyrSpriteAlias = {
+  find: /^plyr\/dist\/plyr\.svg/,
+  replacement: path.join(
+    path.dirname(createRequire(import.meta.url).resolve('plyr')),
+    'plyr.svg',
+  ),
+};

client/scripts/patch-maplibre.mjs

@@ -0,0 +1,34 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join } from 'node:path'
+
+const require = createRequire(import.meta.url)
+const packagePath = require.resolve('maplibre-gl/package.json')
+const { version } = JSON.parse(readFileSync(packagePath, 'utf8'))
+
+if (version !== '5.24.0') throw new Error('Recheck the MapLibre sanitizer backport before changing its version')
+
+// Backport maplibre-gl-js#8189 without removing WebGL1 support in version 6.
+const loops = [
+  ['of elem.attributes)', 'of Array.from(elem.attributes))'],
+  ['of e.attributes)', 'of Array.from(e.attributes))'],
+]
+
+for (const filename of [
+  'src/util/dom.ts',
+  'dist/maplibre-gl.js',
+  'dist/maplibre-gl-dev.js',
+  'dist/maplibre-gl-csp.js',
+  'dist/maplibre-gl-csp-dev.js',
+]) {
+  const target = join(dirname(packagePath), filename)
+  const code = readFileSync(target, 'utf8')
+  const loop = loops.find(([before, after]) => code.includes(before) || code.includes(after))
+  if (!loop) throw new Error(`MapLibre sanitizer loop not found in ${filename}`)
+  const [before, after] = loop
+  if (code.split(before).length === 1 && code.split(after).length === 2) continue
+  if (code.split(before).length !== 2 || code.includes(after)) {
+    throw new Error(`Unexpected MapLibre sanitizer in ${filename}`)
+  }
+  writeFileSync(target, code.replace(before, after))
+}

client/src/App.test.tsx

@@ -580,24 +580,44 @@ describe('Version cache-busting', () => {
     expect(reload).not.toHaveBeenCalled()
   })
 
-  it('FE-COMP-APP-027: the version marker is written even if the update path throws (#2228)', async () => {
-    // The marker used to be written after the purge and outside its try, so a
-    // throwing step left it unwritten and the whole destructive path repeated on
-    // every launch, for good.
+  it('FE-COMP-APP-027: an update path that throws is retried on the next launch, harmlessly (#2228)', async () => {
+    // A handover that never happened must not be recorded as done, or the
+    // device stays on the old build for good. The retry this buys has to be
+    // harmless: the purge that once repeated on every launch is gone, and a
+    // failure neither deletes anything nor reloads into the old worker's shell.
     localStorage.setItem('trek_app_version', '2.9.9')
+    const reload = vi.fn()
+    Object.defineProperty(window, 'location', { writable: true, value: { ...window.location, reload } })
+    const cachesDelete = vi.fn().mockResolvedValue(true)
+    const unregister = vi.fn().mockResolvedValue(true)
+    vi.stubGlobal('caches', { keys: vi.fn().mockResolvedValue(['workbox-precache-v2', 'map-tiles']), delete: cachesDelete })
+    const getRegistration = vi.fn().mockRejectedValue(new Error('no worker'))
     Object.defineProperty(navigator, 'serviceWorker', {
       configurable: true,
-      value: { getRegistration: vi.fn().mockRejectedValue(new Error('no worker')), addEventListener: vi.fn() },
+      value: { getRegistration, getRegistrations: vi.fn().mockResolvedValue([{ unregister }]), addEventListener: vi.fn() },
     })
 
     server.use(
       http.get('/api/auth/app-config', () =>
-        HttpResponse.json({ version: '2.9.10' })
+        HttpResponse.json({ version: '2.9.10', places_provider: 'google' })
       )
     )
     seedAuth()
+    const first = renderApp('/')
+    await waitFor(() => expect(getRegistration).toHaveBeenCalledTimes(1))
+    await act(async () => { await Promise.resolve() })
+    first.unmount()
+    expect(localStorage.getItem('trek_app_version')).toBe('2.9.9')
+
     renderApp('/')
-    await waitFor(() => expect(localStorage.getItem('trek_app_version')).toBe('2.9.10'))
+    await waitFor(() => expect(getRegistration).toHaveBeenCalledTimes(2))
+    await act(async () => { await Promise.resolve() })
+    expect(localStorage.getItem('trek_app_version')).toBe('2.9.9')
+    expect(reload).not.toHaveBeenCalled()
+    expect(cachesDelete).not.toHaveBeenCalled()
+    expect(unregister).not.toHaveBeenCalled()
+    // Without a reload the session carries on, so the rest of the config applies.
+    expect(useAuthStore.getState().placesProvider).toBe('google')
   })
 })
 

client/src/App.tsx

@@ -17,6 +17,7 @@ import MobileShell from './mobile/MobileShell'
 import MRouteFallback from './mobile/components/MRouteFallback'
 import ErrorBoundary from './components/shared/ErrorBoundary'
 import { lazyWithRetry } from './utils/lazyWithRetry'
+import { reconcileAppVersion } from './utils/versionHandover'
 import { useIsPhone } from './mobile/useIsPhone'
 import { TranslationProvider, useTranslation } from './i18n'
 import { authApi, isAuthPublicPath } from './api/client'
@@ -24,6 +25,7 @@ import { tripRepo } from './repo/tripRepo'
 import { readStartDestination, tripStartPath, DEFAULT_START_PAGE, DEFAULT_START_TRIP_TAB, SETTINGS_WAIT_MS, START_DESTINATION_ROUTE } from './utils/startDestination'
 import { usePermissionsStore, PermissionLevel } from './store/permissionsStore'
 import { useInAppNotificationListener } from './hooks/useInAppNotificationListener.ts'
+import { useRoadtripPreferencesSync } from './hooks/useRoadtripPreferencesSync'
 import { registerSyncTriggers, unregisterSyncTriggers } from './sync/syncTriggers'
 import OfflineBanner from './components/Layout/OfflineBanner'
 import { SystemNoticeHost } from './components/SystemNotices/SystemNoticeHost.js'
@@ -283,7 +285,7 @@ function RouteFallback() {
 }
 
 export default function App() {
-  const { loadUser, isAuthenticated, demoMode, setManaged, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, setPlacesEnrichEnabled, setPlaceShadowEnabled } = useAuthStore()
+  const { loadUser, isAuthenticated, demoMode, setManaged, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setHasAmapKey, setPlacesProvider, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, setPlacesEnrichEnabled, setPlaceShadowEnabled } = useAuthStore()
   const { loadSettings } = useSettingsStore()
   const { loadAddons } = useAddonStore()
   const { loadPlugins } = usePluginStore()
@@ -300,13 +302,15 @@ export default function App() {
         loadUser()
       }
     }
-    authApi.getAppConfig().then(async (config: { managed?: boolean; demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; places_enrich_enabled?: boolean; place_shadow_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
+    authApi.getAppConfig().then(async (config: { managed?: boolean; demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; has_amap_key?: boolean; places_provider?: string; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; places_enrich_enabled?: boolean; place_shadow_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
       setManaged(!!config?.managed)
       setDemoMode(!!config?.demo_mode)
       if (config?.dev_mode) setDevMode(true)
       if (config?.is_prerelease !== undefined) setIsPrerelease(config.is_prerelease)
       if (config?.version) setAppVersion(config.version)
       if (config?.has_maps_key !== undefined) setHasMapsKey(config.has_maps_key)
+      if (config?.has_amap_key !== undefined) setHasAmapKey(config.has_amap_key)
+      if (config?.places_provider) setPlacesProvider(config.places_provider)
       if (config?.timezone) setServerTimezone(config.timezone)
       if (config?.require_mfa !== undefined) setAppRequireMfa(!!config.require_mfa)
       if (config?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(config.trip_reminders_enabled)
@@ -316,54 +320,15 @@ export default function App() {
       if (config?.places_enrich_enabled !== undefined) setPlacesEnrichEnabled(config.places_enrich_enabled)
       if (config?.place_shadow_enabled !== undefined) setPlaceShadowEnabled(config.place_shadow_enabled)
       if (config?.permissions) usePermissionsStore.getState().setPermissions(config.permissions)
-
-      // A version is a short release tag and nothing else. It arrives over the
-      // wire and is written to this device's storage, so it is rebuilt from the
-      // characters a tag may contain and kept only when nothing had to be
-      // stripped. Anything else is ignored, which also keeps a malformed value
-      // from being compared against the stored marker and starting an update on
-      // every launch.
-      const reportedVersion = typeof config?.version === 'string' ? config.version : ''
-      const version = reportedVersion.replace(/[^\w.+-]/g, '').slice(0, 64)
-      if (version && version === reportedVersion) {
-        const storedVersion = localStorage.getItem('trek_app_version')
-        // Record the version BEFORE acting on it. The old code wrote the marker
-        // after the purge and outside its try, so a throwing setItem (private
-        // mode, blocked site data, quota) left the caches deleted, the marker
-        // unwritten and the reload unreached, and the purge then repeated on
-        // every single launch, permanently (#2228).
-        try { localStorage.setItem('trek_app_version', version) } catch { /* site data blocked */ }
-        if (storedVersion && storedVersion !== version) {
-          // A newer build is deployed. Ask the service worker to fetch it and
-          // hand over; Workbox ('autoUpdate' + skipWaiting + clientsClaim)
-          // installs the new precache and only then drops the outdated one, so
-          // there is never a moment without an app shell.
-          //
-          // This used to delete EVERY Cache Storage bucket and unregister EVERY
-          // worker instead. That left the device with no shell and no worker
-          // until a fresh ~22 MB precache finished (minutes on mobile data),
-          // and anyone who closed the app or lost signal in that window was
-          // left with a PWA that could no longer start offline at all. It also
-          // threw away the map tiles and file blobs the user had deliberately
-          // downloaded for offline use (#2228).
-          try {
-            const reg = 'serviceWorker' in navigator ? await navigator.serviceWorker.getRegistration() : undefined
-            if (reg) {
-              navigator.serviceWorker.addEventListener('controllerchange', () => window.location.reload(), { once: true })
-              await reg.update()
-              return
-            }
-          } catch { /* fall through to a plain reload */ }
-          window.location.reload()
-          return
-        }
-      }
+      // Last, since a new release reloads the page from here.
+      await reconcileAppVersion(config?.version)
     }).catch(() => {})
   }, [])
 
   const { settings } = useSettingsStore()
 
   useInAppNotificationListener()
+  useRoadtripPreferencesSync()
 
   useEffect(() => {
     if (isAuthenticated) {

client/src/App.versionHandover.test.tsx

@@ -0,0 +1,281 @@
+import React from 'react'
+import { render, waitFor, act } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { http, HttpResponse } from 'msw'
+import { server } from '../tests/helpers/msw/server'
+import { useAuthStore } from './store/authStore'
+import { resetAllStores } from '../tests/helpers/store'
+import App from './App'
+
+/*
+ * #2458: an installed PWA kept serving the previous UI after a server upgrade.
+ *
+ * The launch probe compares the server's version with a marker in localStorage
+ * and, on a mismatch, asks the service worker to fetch the new build and reloads
+ * once it has taken over. These tests drive that probe across consecutive
+ * launches against a fake service-worker container, so a handover that never
+ * completed can be told apart from one that did.
+ *
+ * The fake is installed before App is imported (vi.hoisted), so code that
+ * notes the controlling worker when its module loads sees the worker that
+ * served this page, exactly as in the browser.
+ */
+const sw = vi.hoisted(() => {
+  class FakeWorker extends EventTarget {
+    state: string
+    readonly scriptURL = '/sw.js'
+    constructor(state: string) {
+      super()
+      this.state = state
+    }
+    become(state: string) {
+      this.state = state
+      this.dispatchEvent(new Event('statechange'))
+    }
+  }
+  class FakeRegistration extends EventTarget {
+    active: FakeWorker | null = null
+    installing: FakeWorker | null = null
+    waiting: FakeWorker | null = null
+    readonly scope = '/'
+    update = vi.fn()
+  }
+  class FakeContainer extends EventTarget {
+    controller: FakeWorker | null = null
+    getRegistration = vi.fn()
+    // Listeners a page adds die with that page. Those added while modules load
+    // (before `trackPage` is switched on) stand for module-level code and stay.
+    trackPage = false
+    private pageListeners: Array<[string, EventListenerOrEventListenerObject, boolean | AddEventListenerOptions | undefined]> = []
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions) {
+      super.addEventListener(type, listener, options)
+      if (this.trackPage && listener) this.pageListeners.push([type, listener, options])
+    }
+    dropPageListeners() {
+      for (const [type, listener, options] of this.pageListeners) super.removeEventListener(type, listener, options)
+      this.pageListeners = []
+    }
+  }
+  const oldWorker = new FakeWorker('activated')
+  const registration = new FakeRegistration()
+  const container = new FakeContainer()
+  registration.active = oldWorker
+  container.controller = oldWorker
+  container.getRegistration.mockImplementation(async () => registration)
+  Object.defineProperty(navigator, 'serviceWorker', { configurable: true, value: container })
+  return { FakeWorker, registration, container, oldWorker }
+})
+
+vi.mock('./pages/LoginPage', () => ({ default: () => <div>Login</div> }))
+vi.mock('./pages/DashboardPage', () => ({ default: () => <div>Dashboard</div> }))
+vi.mock('./hooks/useInAppNotificationListener.ts', () => ({ useInAppNotificationListener: vi.fn() }))
+
+// Every import above has been evaluated by now; from here on a listener belongs to a page.
+sw.container.trackPage = true
+
+const reload = vi.fn()
+let configHits = 0
+
+function serveVersion(version: string, gate?: Promise<void>) {
+  server.use(
+    http.get('/api/auth/app-config', async () => {
+      configHits++
+      if (gate) await gate
+      return HttpResponse.json({ version })
+    }),
+  )
+}
+
+/** The browser's handover: the new worker installs, activates and claims the page. */
+function handOver() {
+  const next = new sw.FakeWorker('activated')
+  sw.registration.installing = null
+  sw.registration.active = next
+  sw.container.controller = next
+  sw.container.dispatchEvent(new Event('controllerchange'))
+}
+
+/** update() finds a new sw.js and starts installing it; `then` decides how the install ends. */
+function updateStartsInstall(then: 'activates' | 'fails') {
+  sw.registration.update.mockImplementation(async () => {
+    const next = new sw.FakeWorker('installing')
+    sw.registration.installing = next
+    setTimeout(() => {
+      if (then === 'activates') {
+        next.become('activated')
+        handOver()
+      } else {
+        // Workbox precaching is all-or-nothing: one failed fetch out of ~463
+        // rejects the install event and the new worker is thrown away.
+        sw.registration.installing = null
+        next.become('redundant')
+      }
+    }, 0)
+    return sw.registration
+  })
+}
+
+/** One cold start of the installed app: fresh page, fresh session, same localStorage. */
+async function launch() {
+  sessionStorage.clear()
+  const hitsBefore = configHits
+  const view = render(
+    <MemoryRouter initialEntries={['/']}>
+      <App />
+    </MemoryRouter>,
+  )
+  await waitFor(() => expect(configHits).toBe(hitsBefore + 1))
+  // Let the probe, update() and the fake install run to completion.
+  await act(async () => { await new Promise(r => setTimeout(r, 50)) })
+  view.unmount()
+  sw.container.dropPageListeners()
+}
+
+beforeEach(() => {
+  resetAllStores()
+  vi.clearAllMocks()
+  configHits = 0
+  sw.registration.active = sw.oldWorker
+  sw.registration.installing = null
+  sw.registration.waiting = null
+  sw.registration.update.mockReset()
+  sw.registration.update.mockResolvedValue(sw.registration)
+  sw.container.controller = sw.oldWorker
+  sw.container.dropPageListeners()
+  sw.container.getRegistration.mockReset()
+  sw.container.getRegistration.mockImplementation(async () => sw.registration)
+  reload.mockReset()
+  Object.defineProperty(window, 'location', { writable: true, value: { ...window.location, reload } })
+  server.use(
+    http.get('/api/health/features', () => HttpResponse.json({ bookingImport: false, aiParsing: false })),
+    http.get('/api/system-notices/active', () => HttpResponse.json([])),
+  )
+  useAuthStore.setState({
+    isLoading: false,
+    isAuthenticated: false,
+    user: null,
+    appRequireMfa: false,
+    loadUser: vi.fn().mockResolvedValue(undefined),
+  })
+})
+
+describe('#2458 version handover: behaviour that must survive the fix', () => {
+  it('FE-COMP-APP-2458-P1: a confirmed handover reloads once and is not repeated on the next launch', async () => {
+    localStorage.setItem('trek_app_version', '4.3.0')
+    serveVersion('4.3.1')
+    updateStartsInstall('activates')
+
+    await launch()
+    expect(sw.registration.update).toHaveBeenCalledTimes(1)
+    expect(reload).toHaveBeenCalledTimes(1)
+    expect(localStorage.getItem('trek_app_version')).toBe('4.3.1')
+
+    await launch()
+    expect(sw.registration.update).toHaveBeenCalledTimes(1)
+    expect(reload).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-COMP-APP-2458-P2: nothing to hand over (sw.js unchanged, same worker in control) neither reloads nor retries', async () => {
+    // A release that changed nothing the precache holds leaves sw.js byte-identical,
+    // so update() installs nothing. The bundle this page runs is already current.
+    localStorage.setItem('trek_app_version', '4.3.0')
+    serveVersion('4.3.1')
+
+    await launch()
+    expect(sw.registration.update).toHaveBeenCalledTimes(1)
+    expect(reload).not.toHaveBeenCalled()
+
+    await launch()
+    expect(sw.registration.update).toHaveBeenCalledTimes(1)
+    expect(reload).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    ['a self-built image without the build arg', 'dev'],
+    ['a test instance pinned to an older tag', '4.0.0'],
+    ['a prerelease image, whose bundle keeps the last stable version', '4.4.0-pre.3'],
+  ])('FE-COMP-APP-2458-P3: %s (server says %s, bundle is built as another version) never loops', async (_label, serverVersion) => {
+    // The server reports APP_VERSION, the bundle carries client/package.json. On
+    // these setups the two never agree, so a check against the bundle's own
+    // version would see an update on every launch.
+    serveVersion(serverVersion)
+
+    await launch()
+    await launch()
+    await launch()
+    expect(reload).not.toHaveBeenCalled()
+    expect(sw.registration.update).not.toHaveBeenCalled()
+  })
+})
+
+describe('#2458 version handover: the reported defect', () => {
+  it('FE-COMP-APP-2458-01: an update() that rejects is retried on the next launch', async () => {
+    localStorage.setItem('trek_app_version', '4.3.0')
+    serveVersion('4.3.1')
+    sw.registration.update.mockRejectedValue(new TypeError('Failed to update a ServiceWorker: network error'))
+
+    await launch()
+    expect(sw.registration.update).toHaveBeenCalledTimes(1)
+
+    // Next cold start, network fine this time.
+    updateStartsInstall('activates')
+    await launch()
+    expect(sw.registration.update).toHaveBeenCalledTimes(2)
+    expect(reload).toHaveBeenCalled()
+  })
+
+  it('FE-COMP-APP-2458-02: a failed update() does not reload into the shell the same worker serves again', async () => {
+    // The old worker still controls the page, so a plain reload is answered from
+    // its precache: the same old UI, now with the marker saying it is current.
+    localStorage.setItem('trek_app_version', '4.3.0')
+    serveVersion('4.3.1')
+    sw.registration.update.mockRejectedValue(new TypeError('Failed to update a ServiceWorker: network error'))
+
+    await launch()
+    expect(reload).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-APP-2458-03: an install that goes redundant is retried on the next launch', async () => {
+    localStorage.setItem('trek_app_version', '4.3.0')
+    serveVersion('4.3.1')
+    updateStartsInstall('fails')
+
+    await launch()
+    expect(sw.registration.update).toHaveBeenCalledTimes(1)
+    expect(reload).not.toHaveBeenCalled()
+
+    updateStartsInstall('activates')
+    await launch()
+    expect(sw.registration.update).toHaveBeenCalledTimes(2)
+    expect(reload).toHaveBeenCalledTimes(1)
+  })
+
+  // Kept last: it swaps the controlling worker mid-launch, which code that
+  // remembers "the controller changed since this page loaded" keeps seeing.
+  it('FE-COMP-APP-2458-04: a worker that took over before the probe answered still reloads the page', async () => {
+    // The browser checks sw.js on every navigation by itself. When that check
+    // installs and activates the new worker before /api/auth/app-config has
+    // answered, the takeover happens while nobody listens, and update() then
+    // finds nothing newer. The page keeps running the bundle the old worker served.
+    localStorage.setItem('trek_app_version', '4.3.0')
+    let open!: () => void
+    const gate = new Promise<void>(r => { open = r })
+    serveVersion('4.3.1', gate)
+
+    sessionStorage.clear()
+    const view = render(
+      <MemoryRouter initialEntries={['/']}>
+        <App />
+      </MemoryRouter>,
+    )
+    await waitFor(() => expect(configHits).toBe(1))
+    act(() => handOver())
+    open()
+    await act(async () => { await new Promise(r => setTimeout(r, 50)) })
+    view.unmount()
+    sw.container.dropPageListeners()
+
+    expect(reload).toHaveBeenCalledTimes(1)
+  })
+})

client/src/api/assignmentEndDay.ts

@@ -0,0 +1,7 @@
+import { assignmentSchema, type AssignmentEndDayRequest } from '@trek/shared'
+import { apiClient } from './client'
+
+export async function saveAssignmentEndDay(tripId: number | string, id: number, body: AssignmentEndDayRequest) {
+  const saved = await apiClient.put(`/trips/${tripId}/assignments/${id}/end-day`, body)
+  return assignmentSchema.parse(saved.data.assignment)
+}

client/src/api/client.surface.test.ts

@@ -1,4 +1,4 @@
-// FE-APISURF-001 to FE-APISURF-054
+// FE-APISURF-001 to FE-APISURF-059
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import type { AxiosResponse } from 'axios'
 import { http, HttpResponse } from 'msw'
@@ -10,6 +10,7 @@ import {
   mapsApi, airportsApi, budgetApi, filesApi, reservationsApi, healthApi, weatherApi,
   configApi, helpApi, settingsApi, accommodationsApi, dayNotesApi, collabApi, backupApi,
   shareApi, transitApi, tripInviteApi, notificationsApi, inAppNotificationsApi, memoriesApi,
+  docsyncApi, DOCSYNC_RUN_TIMEOUT_MS, DOCSYNC_UPSTREAM_TIMEOUT_MS,
 } from './client'
 
 interface Recorded { method: string; url: string; body: unknown }
@@ -454,6 +455,7 @@ describe('client > endpoint wiring', () => {
       { n: 'createSettlement', r: () => budgetApi.createSettlement(1, { from_user_id: 4, to_user_id: 5, amount: 10 }), e: 'POST /api/trips/1/budget/settlements' },
       { n: 'updateSettlement', r: () => budgetApi.updateSettlement(1, 6, { from_user_id: 4, to_user_id: 5, amount: 12 }), e: 'PUT /api/trips/1/budget/settlements/6' },
       { n: 'deleteSettlement', r: () => budgetApi.deleteSettlement(1, 6), e: 'DELETE /api/trips/1/budget/settlements/6' },
+      { n: 'freezeRates', r: () => budgetApi.freezeRates(1, {}), e: 'POST /api/trips/1/budget/freeze-rates' },
       { n: 'reorderItems', r: () => budgetApi.reorderItems(1, [2, 3]), e: 'PUT /api/trips/1/budget/reorder/items' },
       { n: 'reorderCategories', r: () => budgetApi.reorderCategories(1, ['Food']), e: 'PUT /api/trips/1/budget/reorder/categories' },
     ])
@@ -571,6 +573,19 @@ describe('client > request payloads', () => {
     expect((await traceOne(() => journeyApi.reorderEntries(2, [8, 7]))).body).toEqual({ orderedIds: [8, 7] })
   })
 
+  it('FE-APISURF-059: the settlement carries the display rate only when the caller has one', async () => {
+    expect((await traceOne(() => budgetApi.settlement(1, 'EUR', 0.61))).url).toBe('/api/trips/1/budget/settlement?base=EUR&base_rate=0.61')
+    expect((await traceOne(() => budgetApi.settlement(1, 'EUR', null))).url).toBe('/api/trips/1/budget/settlement?base=EUR')
+    expect((await traceOne(() => budgetApi.settlement(1))).url).toBe('/api/trips/1/budget/settlement')
+    const lent = { fallback_fx: { base: 'AUD', rates: { VND: 18241.3 } } }
+    expect((await traceOne(() => budgetApi.freezeRates(1, lent))).body).toEqual(lent)
+  })
+
+  it('FE-APISURF-058: a dated day is asked for with the dated flag alone', async () => {
+    const rec = await traceOne(() => daysApi.create(1, { dated: true }))
+    expect(rec).toMatchObject({ method: 'POST', url: '/api/trips/1/days', body: { dated: true } })
+  })
+
   it('FE-APISURF-023: user-id collections are sent as user_ids', async () => {
     expect((await traceOne(() => assignmentsApi.setParticipants(1, 7, [4, 5]))).body).toEqual({ user_ids: [4, 5] })
     expect((await traceOne(() => budgetApi.setMembers(1, 2, [4]))).body).toEqual({ user_ids: [4] })
@@ -665,6 +680,12 @@ describe('client > request payloads', () => {
     expect(rec.method).toBe('DELETE')
     expect(rec.body).toEqual({ password: 'hunter2' })
   })
+
+  it('FE-APISURF-056: docsyncApi.createScope names the connection in the path only', async () => {
+    const rec = await traceOne(() => docsyncApi.createScope(1, 5, 'Norway'))
+    expect(`${rec.method} ${rec.url}`).toBe('POST /api/trips/1/docsync/connections/5/scopes')
+    expect(rec.body).toEqual({ name: 'Norway' })
+  })
 })
 
 describe('client > query parameters', () => {
@@ -895,4 +916,47 @@ describe('client > multipart uploads', () => {
       expect(call[2]).toMatchObject({ timeout: 40000 })
     }
   })
+
+  it('FE-APISURF-057: every document-sync call that reaches the store outlives the 8s global timeout', async () => {
+    const post = spyPost()
+    const get = vi.spyOn(apiClient, 'get').mockResolvedValue({ data: { ok: true } } as unknown as AxiosResponse)
+    const del = vi.spyOn(apiClient, 'delete').mockResolvedValue({ data: { ok: true } } as unknown as AxiosResponse)
+
+    // The server allows each request to a store 15 s, and a run waits for the
+    // whole listing and every transfer; cut off at 8 s the browser reported a
+    // failure while the server carried on and finished.
+    await docsyncApi.testConnection(1, { providerId: 'paperless' })
+    await docsyncApi.createScope(1, 5, 'Norway')
+    await docsyncApi.createLink(1, { connectionId: 5 })
+    await docsyncApi.listScopes(1, 5)
+    await docsyncApi.deleteLink(1, 9)
+
+    expect(post.mock.calls.map(c => c[0])).toEqual([
+      '/trips/1/docsync/connections/test',
+      '/trips/1/docsync/connections/5/scopes',
+      '/trips/1/docsync/links',
+    ])
+    for (const call of post.mock.calls) {
+      expect(call[2]).toMatchObject({ timeout: DOCSYNC_UPSTREAM_TIMEOUT_MS })
+    }
+    expect(get.mock.calls[0][0]).toBe('/trips/1/docsync/connections/5/scopes')
+    expect(get.mock.calls[0][1]).toMatchObject({ timeout: DOCSYNC_UPSTREAM_TIMEOUT_MS })
+    expect(del.mock.calls[0][0]).toBe('/trips/1/docsync/links/9')
+    expect(del.mock.calls[0][1]).toMatchObject({ timeout: DOCSYNC_UPSTREAM_TIMEOUT_MS })
+    expect(DOCSYNC_UPSTREAM_TIMEOUT_MS).toBeGreaterThan(8000)
+
+    // A run, and a conflict choice that runs the binding afterwards.
+    post.mockClear()
+    await docsyncApi.syncNow(1, 9)
+    await docsyncApi.resolve(1, 4, 'trek')
+
+    expect(post.mock.calls.map(c => c[0])).toEqual([
+      '/trips/1/docsync/links/9/sync',
+      '/trips/1/docsync/items/4/resolve',
+    ])
+    for (const call of post.mock.calls) {
+      expect(call[2]).toMatchObject({ timeout: DOCSYNC_RUN_TIMEOUT_MS })
+    }
+    expect(DOCSYNC_RUN_TIMEOUT_MS).toBeGreaterThan(DOCSYNC_UPSTREAM_TIMEOUT_MS)
+  })
 })

client/src/api/client.ts

@@ -1,7 +1,7 @@
 import { isEffectivelyOffline } from '../sync/networkMode'
 import axios, { AxiosInstance } from 'axios'
 import type { z } from 'zod'
-import type { Place } from '../types'
+import type { Day, Place, Trip } from '../types'
 import type { TransitProvider } from '@trek/shared'
 import { randomId } from '../utils/randomId'
 import {
@@ -21,6 +21,7 @@ import {
   type RegisterRequest, type LoginRequest, type ForgotPasswordRequest,
   type ResetPasswordRequest, type ChangePasswordRequest,
   type MfaVerifyLoginRequest, type MfaEnableRequest, type McpTokenCreateRequest,
+  type ApiTokenCreateRequest, type PublicApiScope,
   type TripAddMemberRequest, type TripTransferOwnershipRequest,
   type TripCreateGuestRequest, type TripRenameGuestRequest, type AssignmentReorderRequest,
   type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
@@ -39,6 +40,8 @@ import {
   type PackingImportRequest, type PackingBagMembersRequest, type PackingUpdateBagRequest,
   type PackingCategoryAssigneesRequest, type PackingApplyTemplateRequest,
   type BudgetUpdateMembersRequest, type BudgetToggleMemberPaidRequest, type BudgetReorderCategoriesRequest,
+  type BudgetCreateSettlementRequest, type BudgetUpdateSettlementRequest, type BudgetSettlementQuery,
+  type BudgetFreezeRatesRequest, type BudgetFreezeRatesResponse,
   type TodoCategoryAssigneesRequest,
   type CollabNoteCreateRequest, type CollabNoteUpdateRequest, type CollabPollCreateRequest,
   type CollabPollVoteRequest, type CollabMessageCreateRequest, type CollabReactionRequest,
@@ -342,7 +345,10 @@ export const authApi = {
   // and a key of the wrong kind is refused like one that does not exist.
   apiKeys: {
     list: () => apiClient.get('/auth/api-tokens').then(r => r.data),
-    create: (name: string) => apiClient.post('/auth/api-tokens', { name } satisfies McpTokenCreateRequest).then(r => r.data),
+    // `scopes` narrows what the key may read (#2279). Omitted means everything,
+    // which is what every key minted before scopes existed still does.
+    create: (name: string, scopes?: PublicApiScope[]) =>
+      apiClient.post('/auth/api-tokens', { name, ...(scopes?.length ? { scopes } : {}) } satisfies ApiTokenCreateRequest).then(r => r.data),
     delete: (id: number) => apiClient.delete(`/auth/api-tokens/${id}`).then(r => r.data),
   },
   passkey: {
@@ -430,11 +436,17 @@ export const tripsApi = {
 
 export const daysApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/days`).then(r => r.data),
-  create: (tripId: number | string, data: DayCreateRequest) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
+  // `trip` comes along when the new day changed the trip itself: a dated day
+  // (`dated: true`) moved its end date, an insert at a position grew it by a day.
+  create: (tripId: number | string, data: DayCreateRequest): Promise<{ day: Day; trip?: Trip }> =>
+    apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
   update: (tripId: number | string, dayId: number | string, data: DayUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
   // Whole-day default route mode (#1281); per-segment leg modes override it.
   updateTransport: (tripId: number | string, dayId: number | string, mode: string | null) => apiClient.put(`/trips/${tripId}/days/${dayId}/transport`, { transport_mode: mode }).then(r => r.data),
-  delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
+  // Answers with the trip in list shape: its day count changed, and its end
+  // date when the day took the last date along.
+  delete: (tripId: number | string, dayId: number | string): Promise<{ success: boolean; trip?: Trip }> =>
+    apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
   reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/reorder`, { orderedIds } satisfies DayReorderRequest).then(r => r.data),
 }
 
@@ -667,6 +679,8 @@ export const adminApi = {
   updatePlacesAutocomplete: (enabled: boolean) => apiClient.put('/admin/places-autocomplete', { enabled }).then(r => r.data),
   getPlacesDetails: () => apiClient.get('/admin/places-details').then(r => r.data),
   updatePlacesDetails: (enabled: boolean) => apiClient.put('/admin/places-details', { enabled }).then(r => r.data),
+  getPlacesGoogleOnly: () => apiClient.get('/admin/places-google-only').then(r => r.data),
+  updatePlacesGoogleOnly: (enabled: boolean) => apiClient.put('/admin/places-google-only', { enabled }).then(r => r.data),
   getPlacesEnrich: () => apiClient.get('/admin/places-enrich').then(r => r.data),
   updatePlacesEnrich: (enabled: boolean) => apiClient.put('/admin/places-enrich', { enabled }).then(r => r.data),
   getTransitProvider: () => apiClient.get('/admin/transit-provider').then(r => r.data),
@@ -999,6 +1013,9 @@ export const journeyApi = {
     postMultipart(`/journeys/${journeyId}/gallery/photos`, formData, opts),
   uploadGalleryVideo: (journeyId: number, formData: FormData, opts?: UploadOptions) =>
     postMultipart(`/journeys/${journeyId}/gallery/video`, formData, opts),
+  /** A clip on one entry: the video plus the poster frame the browser grabbed (issue #2341). */
+  uploadEntryVideo: (entryId: number, formData: FormData, opts?: UploadOptions) =>
+    postMultipart(`/journeys/entries/${entryId}/video`, formData, opts),
   addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) } satisfies JourneyProviderPhotosRequest).then(r => r.data),
   addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
   addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) }).then(r => r.data),
@@ -1018,6 +1035,9 @@ export const journeyApi = {
 
   // Preferences
   updatePreferences: (id: number, data: { hide_skeletons?: boolean }) => apiClient.patch(`/journeys/${id}/preferences`, data).then(r => r.data),
+  /** Bring every waved-away trip suggestion back. Answers with how many returned. */
+  restoreSuggestions: (id: number): Promise<{ restored: number }> =>
+    apiClient.post(`/journeys/${id}/suggestions/restore`).then(r => r.data),
 
   // Share
   getShareLink: (id: number) => apiClient.get(`/journeys/${id}/share-link`).then(r => r.data),
@@ -1040,7 +1060,10 @@ const MEMORIES_TIMEOUT = 0
 export const memoriesApi = {
   status: (provider: string): Promise<{ connected: boolean }> =>
     apiClient.get(`/integrations/memories/${provider}/status`, { timeout: MEMORIES_TIMEOUT }).then(r => r.data),
-  search: (provider: string, body: { from: string; to: string; page: number; size: number }, signal?: AbortSignal) =>
+  // utc_offset_minutes says which 24 hours from/to name. It is NOT the Synology
+  // `offset`, which is rows to skip: one body goes to whichever provider, so the
+  // two names have to stay apart (#2336).
+  search: (provider: string, body: { from: string; to: string; page: number; size: number; utc_offset_minutes?: number }, signal?: AbortSignal) =>
     apiClient.post(`/integrations/memories/${provider}/search`, body, { timeout: MEMORIES_TIMEOUT, signal }).then(r => r.data),
   albums: (provider: string) =>
     apiClient.get(`/integrations/memories/${provider}/albums`, { timeout: MEMORIES_TIMEOUT }).then(r => r.data),
@@ -1201,14 +1224,19 @@ export const mapsApi = {
    * caller of this one function gets them without knowing they exist. Appended rather
    * than interleaved: the core list is ordered by relevance and has earned that order,
    * and a plugin's row carries its own `source` for a caller that wants to mark it.
+   *
+   * `provider: 'google'` sends this one search to Google alone, the "search Google
+   * instead" link under a list the index answered with the wrong place. The server
+   * ignores it unless Google holds the keyed slot: without a Google key, or with
+   * Amap or OpenStreetMap picked as the provider, the index answers as usual.
    */
-  search: (query: string, lang?: string, locationBias?: { lat: number; lng: number; radius?: number }) =>
+  search: (query: string, lang?: string, locationBias?: { lat: number; lng: number; radius?: number }, provider?: 'google') =>
     withCachedPlaces(query, (places) => ({ places, source: 'offline-cache' }), async () => {
       // Side by side, so the wait is the slower of the two rather than their sum. Only
       // the core call may reject: that rejection is what hands withCachedPlaces the
       // offline path, and a plugin failure must never trigger it.
       const [core, extra] = await Promise.all([
-        apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query, locationBias }).then(r => checkInDev(mapsSearchResultSchema, r.data, 'maps.search')),
+        apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query, locationBias, ...(provider ? { provider } : {}) }).then(r => checkInDev(mapsSearchResultSchema, r.data, 'maps.search')),
         pluginSearchPlaces(query, lang, locationBias),
       ])
       if (extra.length === 0) return core
@@ -1326,9 +1354,13 @@ export const budgetApi = {
   togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid } satisfies BudgetToggleMemberPaidRequest).then(r => r.data),
   setPayers: (tripId: number | string, id: number, payers: { user_id: number; amount: number }[]) => apiClient.put(`/trips/${tripId}/budget/${id}/payers`, { payers }).then(r => r.data),
   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; currency?: string }) => 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; currency?: string }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
+  // `baseRate` is units of `base` per 1 trip currency from the client's own rates. The server
+  // uses it only in place of a display quote it cannot fetch itself, which also reads legacy
+  // transfers without a currency (in the display currency, as with a live quote).
+  settlement: (tripId: number | string, base?: string, baseRate?: number | null) => apiClient.get(`/trips/${tripId}/budget/settlement`, base ? { params: { base, ...(baseRate != null ? { base_rate: baseRate } : {}) } satisfies BudgetSettlementQuery } : undefined).then(r => r.data),
+  createSettlement: (tripId: number | string, data: BudgetCreateSettlementRequest) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
+  updateSettlement: (tripId: number | string, settlementId: number, data: BudgetUpdateSettlementRequest) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
+  freezeRates: (tripId: number | string, data: BudgetFreezeRatesRequest): Promise<BudgetFreezeRatesResponse> => apiClient.post(`/trips/${tripId}/budget/freeze-rates`, 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),
@@ -1348,6 +1380,64 @@ export const filesApi = {
   getLinks: (tripId: number | string, fileId: number) => apiClient.get(`/trips/${tripId}/files/${fileId}/links`).then(r => r.data),
 }
 
+/**
+ * How long the browser waits for a document-sync call that makes the server go
+ * and ask the store.
+ *
+ * The shared 8 s on `apiClient` is right for TREK's own routes and wrong for
+ * these, for the reason `dawarich.ts` gives: the server allows each request to
+ * a store 15 s by itself (20 s for Papra), a connection test may probe more
+ * than once, and binding or unbinding first registers or removes a webhook at
+ * the store. Cut off at 8 s, the browser reported a failure while the server
+ * carried on and finished, so a listing that took twelve seconds read as a
+ * broken store.
+ */
+export const DOCSYNC_UPSTREAM_TIMEOUT_MS = 60_000
+
+/**
+ * A run is longer again. The server answers only once the whole of it is
+ * through: a listing of up to 40 pages, then up to 25 transfers at up to 120 s
+ * each, and Paperless-ngx holds every push until its consume task has run.
+ * Resolving a conflict runs the binding afterwards, so it waits just as long.
+ * Ten minutes covers a full transfer budget of ordinary documents; a run that
+ * outlasts it still finishes on the server, and the `docsync:changed` ping
+ * refreshes the dialog when it does.
+ */
+export const DOCSYNC_RUN_TIMEOUT_MS = 600_000
+
+const docsyncUpstream = { timeout: DOCSYNC_UPSTREAM_TIMEOUT_MS }
+const docsyncRun = { timeout: DOCSYNC_RUN_TIMEOUT_MS }
+
+/**
+ * Document sync: one provider connection per trip, shared by every member.
+ *
+ * Trip-scoped rather than user-scoped on purpose: a per-user connection would
+ * make a document's visibility depend on whose credentials fetched it, which is
+ * the opposite of what a shared trip needs.
+ */
+export const docsyncApi = {
+  providers: (tripId: number | string) => apiClient.get(`/trips/${tripId}/docsync/providers`).then(r => r.data),
+  status: (tripId: number | string) => apiClient.get(`/trips/${tripId}/docsync/status`).then(r => r.data),
+  listConnections: (tripId: number | string) => apiClient.get(`/trips/${tripId}/docsync/connections`).then(r => r.data),
+  saveConnection: (tripId: number | string, data: unknown) => apiClient.put(`/trips/${tripId}/docsync/connections`, data).then(r => r.data),
+  testConnection: (tripId: number | string, data: unknown) => apiClient.post(`/trips/${tripId}/docsync/connections/test`, data, docsyncUpstream).then(r => r.data),
+  deleteConnection: (tripId: number | string, connectionId: number) => apiClient.delete(`/trips/${tripId}/docsync/connections/${connectionId}`).then(r => r.data),
+  listScopes: (tripId: number | string, connectionId: number, q?: string) =>
+    apiClient.get(`/trips/${tripId}/docsync/connections/${connectionId}/scopes`, { params: q ? { q } : {}, ...docsyncUpstream }).then(r => r.data),
+  createScope: (tripId: number | string, connectionId: number, name: string) =>
+    apiClient.post(`/trips/${tripId}/docsync/connections/${connectionId}/scopes`, { name }, docsyncUpstream).then(r => r.data),
+  listLinks: (tripId: number | string) => apiClient.get(`/trips/${tripId}/docsync/links`).then(r => r.data),
+  createLink: (tripId: number | string, data: unknown) => apiClient.post(`/trips/${tripId}/docsync/links`, data, docsyncUpstream).then(r => r.data),
+  updateLink: (tripId: number | string, linkId: number, data: unknown) => apiClient.patch(`/trips/${tripId}/docsync/links/${linkId}`, data).then(r => r.data),
+  deleteLink: (tripId: number | string, linkId: number) => apiClient.delete(`/trips/${tripId}/docsync/links/${linkId}`, docsyncUpstream).then(r => r.data),
+  syncNow: (tripId: number | string, linkId: number, full = false) =>
+    apiClient.post(`/trips/${tripId}/docsync/links/${linkId}/sync`, { full }, docsyncRun).then(r => r.data),
+  items: (tripId: number | string, state?: string) =>
+    apiClient.get(`/trips/${tripId}/docsync/items`, { params: state ? { state } : {} }).then(r => r.data),
+  resolve: (tripId: number | string, itemId: number, keep: 'trek' | 'provider' | 'both') =>
+    apiClient.post(`/trips/${tripId}/docsync/items/${itemId}/resolve`, { keep }, docsyncRun).then(r => r.data),
+}
+
 export const reservationsApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/reservations`).then(r => r.data),
   upcoming: () => apiClient.get('/reservations/upcoming').then(r => r.data),
@@ -1424,7 +1514,7 @@ export const accommodationsApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/accommodations`).then(r => r.data),
   create: (tripId: number | string, data: AccommodationCreateRequest) => apiClient.post(`/trips/${tripId}/accommodations`, data).then(r => r.data),
   update: (tripId: number | string, id: number, data: AccommodationUpdateRequest) => apiClient.put(`/trips/${tripId}/accommodations/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/accommodations/${id}`).then(r => r.data),
+  delete: (tripId: number | string, id: number, opts?: { keepStop?: boolean }) => apiClient.delete(`/trips/${tripId}/accommodations/${id}`, opts?.keepStop ? { params: { keepStop: 'true' } } : undefined).then(r => r.data),
 }
 
 export const dayNotesApi = {

client/src/api/collections.test.ts

@@ -1,4 +1,4 @@
-// FE-API-COLLECTIONS-001 to FE-API-COLLECTIONS-032
+// FE-API-COLLECTIONS-001 to FE-API-COLLECTIONS-034
 //
 // The Collections addon wrapper is thin, but every method encodes a URL, a verb and a
 // request-body shape that the server contract depends on. These tests drive each method
@@ -342,4 +342,23 @@ describe('collectionsApi', () => {
     expect(requestBody).toEqual({ label_ids: [3], place_ids: [10] })
     expect(res.changed).toBe(1)
   })
+
+  it('FE-API-COLLECTIONS-033: exportGpx() reads the GPX of a list by id', async () => {
+    server.use(http.get(`${BASE}/:id/export/gpx`, record({ name: 'Tokyo', gpx: '<gpx/>', waypoints: 0, omitted: 2 })))
+
+    const res = await collectionsApi.exportGpx(1)
+
+    expect(requestUrl).toContain(`${BASE}/1/export/gpx`)
+    expect(res).toEqual({ name: 'Tokyo', gpx: '<gpx/>', waypoints: 0, omitted: 2 })
+  })
+
+  it('FE-API-COLLECTIONS-034: readGpx() posts the document and its file name', async () => {
+    const file = { format: 'trek.collection', version: 1, name: 'Tokyo', places: [] }
+    server.use(http.post(`${BASE}/gpx/read`, record({ file, skipped: 0, track_points: 12 })))
+
+    const res = await collectionsApi.readGpx({ gpx: '<gpx/>', file_name: 'tokyo.gpx' })
+
+    expect(requestBody).toEqual({ gpx: '<gpx/>', file_name: 'tokyo.gpx' })
+    expect(res).toEqual({ file, skipped: 0, track_points: 12 })
+  })
 })

client/src/api/collections.ts

@@ -10,6 +10,13 @@ import type {
   CollectionSavePlaceRequest,
   CollectionSaveFromTripRequest,
   CollectionImportablesResponse,
+  CollectionFile,
+  CollectionImportRequest,
+  CollectionImportIntoRequest,
+  CollectionImportResult,
+  CollectionGpxExport,
+  CollectionGpxReadRequest,
+  CollectionGpxReadResult,
   CollectionPlaceUpdateRequest,
   CollectionCopyToTripRequest,
   CollectionInviteRequest,
@@ -53,6 +60,21 @@ export const collectionsApi = {
     ax.get(base).then((r: AxiosResponse) => r.data),
   get: (id: number): Promise<CollectionDetailResponse> =>
     ax.get(`${base}/${id}`).then((r: AxiosResponse) => r.data),
+  // Export / import as a file (#2198). The export body IS the file; the import
+  // sends the parsed file back through the same contract.
+  exportFile: (id: number): Promise<CollectionFile> =>
+    ax.get(`${base}/${id}/export`).then((r: AxiosResponse) => r.data),
+  importFile: (body: CollectionImportRequest): Promise<CollectionImportResult> =>
+    ax.post(`${base}/import`, body satisfies CollectionImportRequest).then((r: AxiosResponse) => r.data),
+  /** The same file into a list that already exists: it only ever adds to it. */
+  importFileInto: (id: number, body: CollectionImportIntoRequest): Promise<CollectionImportResult> =>
+    ax.post(`${base}/${id}/import`, body satisfies CollectionImportIntoRequest).then((r: AxiosResponse) => r.data),
+  // The same list as GPX (#2301). A GPX is read by the server into a list file,
+  // which then goes through importFile above like any other.
+  exportGpx: (id: number): Promise<CollectionGpxExport> =>
+    ax.get(`${base}/${id}/export/gpx`).then((r: AxiosResponse) => r.data),
+  readGpx: (body: CollectionGpxReadRequest): Promise<CollectionGpxReadResult> =>
+    ax.post(`${base}/gpx/read`, body satisfies CollectionGpxReadRequest).then((r: AxiosResponse) => r.data),
   // Both answer with the bare collection, not a { collection } envelope — the
   // controller returns the service's `Collection` straight through, and the e2e
   // suite pins that shape. Declaring the envelope made createCollection() resolve

client/src/api/dawarich.test.ts

@@ -0,0 +1,459 @@
+/**
+ * FE-DAWARICH-API-001 to FE-DAWARICH-API-019, plus FE-DAWARICH-API-040 and -041
+ * for how long the browser waits.
+ *
+ * `dawarichApi` is one line per endpoint: a verb, a URL, and the shape of what
+ * goes into the body or the query string. There is no logic in it to get wrong,
+ * which is exactly why a mistake here is so quiet: a wrong path or a dropped
+ * query parameter does not throw, it hands the layer above an empty answer, and
+ * the panel three levels up simply shows nothing. Every method is therefore
+ * driven through MSW and its verb, path and payload pinned.
+ *
+ * Three things here matter more than the URL bookkeeping:
+ *
+ *  - **`offset`.** Recorded points are bare instants, so the reader's own UTC
+ *    offset is the one fact the server cannot derive. Both track calls send it,
+ *    and they send it negated: `getTimezoneOffset()` counts minutes *behind*
+ *    local time, the wire wants minutes *ahead* of UTC. Were it to stop being
+ *    sent, or to be sent unsigned, an evening east of UTC would land on the
+ *    previous day of the trip and nothing would fail anywhere. The line would
+ *    just be drawn on the wrong day, which is the whole reason the parameter
+ *    exists. Hence two zones rather than one: a single European fixture cannot
+ *    tell a negation from a magnitude.
+ *  - **The failure reaches the caller intact.** `useDawarichConnection` and
+ *    `useDawarichSuggestions` both translate `err.response.data.code` into the
+ *    reader's language. A `.catch()` added anywhere in this file would turn
+ *    every upstream failure into a silent success with an undefined body.
+ *  - **An abort really cancels.** The track overlay issues a fresh request
+ *    whenever the looked-at window changes and aborts the previous one; a call
+ *    that resolved anyway would repaint the map with the older answer.
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { http, HttpResponse, delay, type JsonBodyType } from 'msw'
+import { server } from '../../tests/helpers/msw/server'
+import { dawarichApi, DAWARICH_ATLAS_TIMEOUT_MS, DAWARICH_UPSTREAM_TIMEOUT_MS } from './dawarich'
+import apiClient from './client'
+import type {
+  DawarichAtlasSuggestions,
+  DawarichBucketScan,
+  DawarichConnection,
+  DawarichSuggestion,
+  DawarichSuggestionList,
+  DawarichTrack,
+} from '@trek/shared'
+
+const BASE = '/api/integrations/dawarich'
+
+let requestUrl = ''
+let requestBody: unknown
+
+/** Records the url and the parsed JSON body of the intercepted request, then answers with `data`. */
+function record<T extends JsonBodyType>(data: T) {
+  return async ({ request }: { request: Request }) => {
+    requestUrl = request.url
+    const text = await request.text()
+    requestBody = text ? JSON.parse(text) : undefined
+    return HttpResponse.json(data)
+  }
+}
+
+function query(): URLSearchParams {
+  return new URL(requestUrl).searchParams
+}
+
+const connection: DawarichConnection = {
+  url: 'https://dawarich.example',
+  apiKeyMasked: '••••••••',
+  allowInsecureTls: false,
+  syncEnabled: true,
+  connected: true,
+  lastSyncAt: '2026-09-13T21:00:00Z',
+  lastSyncState: 'ok',
+  lastSyncError: null,
+  capabilities: null,
+}
+
+const suggestion: DawarichSuggestion = {
+  id: 41,
+  sourceVisitId: 'v-41',
+  tripId: 7,
+  tripTitle: 'Koeln',
+  name: 'Cafe Reichard',
+  lat: 50.94,
+  lng: 6.96,
+  startedAt: '2026-09-10T10:15:00+02:00',
+  endedAt: '2026-09-10T12:40:00+02:00',
+  durationMinutes: 145,
+  localDate: '2026-09-10',
+  sourceStatus: 'suggested',
+  confidence: 82,
+  confidenceBand: 'high',
+  state: 'new',
+  target: null,
+  acceptedPlaceId: null,
+  acceptedJournalEntryId: null,
+  acceptedBucketListItemId: null,
+  sourceChanged: false,
+  sourceMissing: false,
+  matchedBucketListItemId: null,
+  matchedBucketListName: null,
+  countryCode: 'DE',
+  firstSeenAt: '2026-09-10T06:00:00Z',
+  lastSeenAt: '2026-09-10T06:00:00Z',
+}
+
+const suggestionList: DawarichSuggestionList = {
+  suggestions: [suggestion],
+  connected: true,
+  lastSyncAt: '2026-09-13T21:00:00Z',
+  lastSyncState: 'ok',
+  lastSyncError: null,
+}
+
+const track: DawarichTrack = {
+  days: [{ date: '2026-09-10', segments: [] }],
+  source: 'tracks',
+  fetchedAt: '2026-09-13T21:05:00Z',
+  pointCount: 0,
+  truncated: false,
+}
+
+const bucketScan: DawarichBucketScan = {
+  matches: [{ itemId: 3, name: 'Uluru', match: null, alreadyVisited: false }],
+  skippedWithoutCoordinates: 1,
+  truncated: false,
+  fetchedAt: '2026-09-13T21:05:00Z',
+}
+
+const atlas: DawarichAtlasSuggestions = {
+  countries: [{ countryCode: 'DE', sourceName: 'Germany', cities: [], alreadyVisited: false }],
+  unresolved: ['Kosovo'],
+  fetchedAt: '2026-09-13T21:05:00Z',
+}
+
+beforeEach(() => {
+  requestUrl = ''
+  requestBody = undefined
+  // Berlin in summer. localOffsetMinutes() negates getTimezoneOffset(), so the
+  // value on the wire is +120 (positive for a zone ahead of UTC), which is the
+  // sign convention the server's day resolution expects.
+  vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(-120)
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('dawarichApi connection', () => {
+  it('FE-DAWARICH-API-001: getSettings() reads the connection card and unwraps the body', async () => {
+    server.use(http.get(`${BASE}/settings`, record(connection)))
+
+    const res = await dawarichApi.getSettings()
+
+    expect(requestUrl).toContain(`${BASE}/settings`)
+    expect(res).toEqual(connection)
+  })
+
+  // The three warning fields are why this endpoint does not just answer
+  // `{ success }`: the server writes its sentence in English, the client renders
+  // the code in the reader's language and quotes the resolved address back.
+  // Dropping any of them leaves a private-IP connection looking perfectly healthy.
+  it('FE-DAWARICH-API-002: saveSettings() puts the settings and keeps the warning triple', async () => {
+    server.use(
+      http.put(
+        `${BASE}/settings`,
+        record({
+          success: true,
+          warning: 'That host resolves to a private address.',
+          warningCode: 'private_ip',
+          warningIp: '192.168.178.72',
+        }),
+      ),
+    )
+
+    const res = await dawarichApi.saveSettings({
+      url: 'https://dawarich.lan',
+      apiKey: 'secret',
+      allowInsecureTls: true,
+      syncEnabled: false,
+    })
+
+    expect(requestBody).toEqual({
+      url: 'https://dawarich.lan',
+      apiKey: 'secret',
+      allowInsecureTls: true,
+      syncEnabled: false,
+    })
+    expect(res.warningCode).toBe('private_ip')
+    expect(res.warningIp).toBe('192.168.178.72')
+    expect(res.warning).toContain('private address')
+  })
+
+  it('FE-DAWARICH-API-003: disconnect() deletes the stored connection', async () => {
+    server.use(http.delete(`${BASE}/settings`, record({ success: true })))
+
+    expect(await dawarichApi.disconnect()).toEqual({ success: true })
+    expect(requestUrl).toContain(`${BASE}/settings`)
+  })
+
+  // A probe runs before anything is stored, so the body is deliberately partial:
+  // a url with no key is the shape the connect dialog sends on its first attempt.
+  it('FE-DAWARICH-API-004: test() posts a partial settings body and returns the probe verdict', async () => {
+    server.use(http.post(`${BASE}/test`, record({ connected: false, error: 'unauthorized' })))
+
+    const res = await dawarichApi.test({ url: 'https://dawarich.example' })
+
+    expect(requestBody).toEqual({ url: 'https://dawarich.example' })
+    expect(res.connected).toBe(false)
+    expect(res.error).toBe('unauthorized')
+  })
+
+  // `alreadyRunning` is how a second press of Sync Now is told apart from a sync
+  // that genuinely found nothing; both report created/updated/missing as zero.
+  it('FE-DAWARICH-API-005: syncNow() posts to the sync endpoint and passes alreadyRunning through', async () => {
+    server.use(http.post(`${BASE}/sync`, record({ state: 'ok', created: 0, updated: 0, missing: 0, alreadyRunning: true })))
+
+    const res = await dawarichApi.syncNow()
+
+    expect(requestUrl).toContain(`${BASE}/sync`)
+    expect(res.alreadyRunning).toBe(true)
+  })
+})
+
+describe('dawarichApi suggestions', () => {
+  it('FE-DAWARICH-API-006: listSuggestions() sends the filter as query params, and none when unfiltered', async () => {
+    server.use(http.get(`${BASE}/suggestions`, record(suggestionList)))
+
+    const res = await dawarichApi.listSuggestions({ tripId: 7, state: 'new' })
+    expect(query().get('tripId')).toBe('7')
+    expect(query().get('state')).toBe('new')
+    expect(res.suggestions).toHaveLength(1)
+
+    await dawarichApi.listSuggestions()
+    expect(new URL(requestUrl).search).toBe('')
+  })
+
+  it('FE-DAWARICH-API-007: accept() posts the corrected stay to the suggestion it belongs to', async () => {
+    server.use(
+      http.post(
+        `${BASE}/suggestions/:id/accept`,
+        record({ suggestion, createdPlaceId: 900, createdJournalEntryId: null, bucketListItemId: null }),
+      ),
+    )
+
+    const res = await dawarichApi.accept(41, { target: 'place', tripId: 7, dayId: 12, name: 'Cafe Reichard', time: '10:15' })
+
+    expect(requestUrl).toContain(`${BASE}/suggestions/41/accept`)
+    expect(requestBody).toEqual({ target: 'place', tripId: 7, dayId: 12, name: 'Cafe Reichard', time: '10:15' })
+    expect(res.createdPlaceId).toBe(900)
+  })
+
+  it('FE-DAWARICH-API-008: setState() puts the new state on the suggestion', async () => {
+    server.use(http.put(`${BASE}/suggestions/:id/state`, record({ ...suggestion, state: 'dismissed' })))
+
+    const res = await dawarichApi.setState(41, 'dismissed')
+
+    expect(requestUrl).toContain(`${BASE}/suggestions/41/state`)
+    expect(requestBody).toEqual({ state: 'dismissed' })
+    expect(res.state).toBe('dismissed')
+  })
+})
+
+describe('dawarichApi bucket list', () => {
+  it('FE-DAWARICH-API-009: scanBucketList() posts to the scan endpoint', async () => {
+    server.use(http.post(`${BASE}/bucket-list/scan`, record(bucketScan)))
+
+    const res = await dawarichApi.scanBucketList()
+
+    expect(requestUrl).toContain(`${BASE}/bucket-list/scan`)
+    expect(res.skippedWithoutCoordinates).toBe(1)
+  })
+
+  // `visitedAt` is optional because the default is "whenever the recording says",
+  // which only the server knows. An omitted one must not turn into a null on the
+  // wire, which the server would read as an instruction to store no date at all.
+  it('FE-DAWARICH-API-010: confirmBucketVisits() sends visitedAt only when the caller supplied one', async () => {
+    server.use(http.post(`${BASE}/bucket-list/confirm`, record({ updated: 2 })))
+
+    const res = await dawarichApi.confirmBucketVisits([3, 4], '2026-09-10T10:15:00Z')
+    expect(requestBody).toEqual({ itemIds: [3, 4], visitedAt: '2026-09-10T10:15:00Z' })
+    expect(res.updated).toBe(2)
+
+    await dawarichApi.confirmBucketVisits([3])
+    expect(requestBody).toEqual({ itemIds: [3] })
+  })
+
+  it('FE-DAWARICH-API-011: clearBucketVisit() deletes the visit off one entry', async () => {
+    server.use(http.delete(`${BASE}/bucket-list/:id/visit`, record({ success: true })))
+
+    expect(await dawarichApi.clearBucketVisit(3)).toEqual({ success: true })
+    expect(requestUrl).toContain(`${BASE}/bucket-list/3/visit`)
+  })
+})
+
+describe('dawarichApi atlas', () => {
+  it('FE-DAWARICH-API-012: atlasSuggestions() sends the window as from/to', async () => {
+    server.use(http.get(`${BASE}/atlas/suggestions`, record(atlas)))
+
+    const res = await dawarichApi.atlasSuggestions('2026-01-01', '2026-12-31')
+
+    expect(query().get('from')).toBe('2026-01-01')
+    expect(query().get('to')).toBe('2026-12-31')
+    expect(res.unresolved).toEqual(['Kosovo'])
+  })
+
+  it('FE-DAWARICH-API-013: acceptAtlasCountries() posts the codes the user ticked', async () => {
+    server.use(http.post(`${BASE}/atlas/accept`, record({ marked: 2 })))
+
+    const res = await dawarichApi.acceptAtlasCountries(['DE', 'NL'])
+
+    expect(requestBody).toEqual({ countryCodes: ['DE', 'NL'] })
+    expect(res.marked).toBe(2)
+  })
+})
+
+describe('dawarichApi track overlay', () => {
+  it('FE-DAWARICH-API-014: tripTrack() sends the range plus the reader\'s own UTC offset', async () => {
+    server.use(http.get(`${BASE}/trips/:id/track`, record(track)))
+
+    const res = await dawarichApi.tripTrack(7, { from: '2026-09-10', to: '2026-09-12' })
+
+    expect(new URL(requestUrl).pathname).toBe(`${BASE}/trips/7/track`)
+    expect(query().get('from')).toBe('2026-09-10')
+    expect(query().get('to')).toBe('2026-09-12')
+    expect(query().get('offset')).toBe('120')
+    expect(res.source).toBe('tracks')
+  })
+
+  // The whole-trip case passes no range at all. The offset still has to be there:
+  // without it the server has to guess a day boundary for every recorded instant.
+  it('FE-DAWARICH-API-015: tripTrack() without a range still sends the offset and nothing else', async () => {
+    server.use(http.get(`${BASE}/trips/:id/track`, record(track)))
+
+    await dawarichApi.tripTrack(7)
+
+    expect([...query().keys()]).toEqual(['offset'])
+    expect(query().get('offset')).toBe('120')
+  })
+
+  it('FE-DAWARICH-API-016: windowTrack() sends from, to and the offset to the window endpoint', async () => {
+    server.use(http.get(`${BASE}/track`, record(track)))
+
+    const res = await dawarichApi.windowTrack('2026-09-10', '2026-09-12')
+
+    expect(new URL(requestUrl).pathname).toBe(`${BASE}/track`)
+    expect(query().get('from')).toBe('2026-09-10')
+    expect(query().get('to')).toBe('2026-09-12')
+    expect(query().get('offset')).toBe('120')
+    expect(res.pointCount).toBe(0)
+  })
+
+  // The health handler is here because the axios error interceptor probes
+  // reachability whenever an error carries no response, and a cancellation is
+  // exactly that. Answering the probe keeps the detour short; whichever verdict
+  // it comes back with, the cancellation has to be re-rejected untouched, and
+  // that is what this pins.
+  it('FE-DAWARICH-API-017: an aborted windowTrack rejects as a cancellation, not as a result', async () => {
+    server.use(
+      http.get('/api/health', () => HttpResponse.json({ status: 'ok' })),
+      http.get(`${BASE}/track`, async () => {
+        await delay(50)
+        return HttpResponse.json(track)
+      }),
+    )
+
+    const ctrl = new AbortController()
+    const pending = dawarichApi.windowTrack('2026-09-10', '2026-09-12', ctrl.signal)
+    ctrl.abort()
+
+    await expect(pending).rejects.toMatchObject({ code: 'ERR_CANCELED' })
+  })
+
+  // Nothing in this file catches, on purpose: the connection card and the
+  // suggestions hook both read the upstream reason off `response.data.code` to
+  // say it in the reader's language. A swallowed rejection would reach them as a
+  // successful call carrying an undefined body.
+  it('FE-DAWARICH-API-018: a 502 rejects with the upstream reason code intact', async () => {
+    server.use(
+      http.get(`${BASE}/suggestions`, () =>
+        HttpResponse.json({ error: 'Dawarich is unreachable', code: 'unreachable' }, { status: 502 }),
+      ),
+    )
+
+    await expect(dawarichApi.listSuggestions()).rejects.toMatchObject({
+      response: { status: 502, data: { code: 'unreachable' } },
+    })
+  })
+
+  // Every other test here runs in Berlin, where -120 negated and -120 made
+  // positive look identical. New York separates them: the platform reports +300
+  // and the wire has to carry -300. A `Math.abs` slipped in would leave every
+  // European install working perfectly and put every American one a day out,
+  // which is the kind of bug that gets reported as "sometimes wrong".
+  //
+  // UTC is the second half of the pair: the offset there is falsy, and a guard
+  // that only sends it "when there is one" would drop it exactly for the readers
+  // whose day boundary the server would then have to guess.
+  it('FE-DAWARICH-API-019: the offset is the negation of getTimezoneOffset, not its magnitude', async () => {
+    server.use(http.get(`${BASE}/track`, record(track)))
+
+    vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(300)
+    await dawarichApi.windowTrack('2026-09-10', '2026-09-12')
+    expect(query().get('offset')).toBe('-300')
+
+    vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(0)
+    await dawarichApi.windowTrack('2026-09-10', '2026-09-12')
+    expect(query().get('offset')).toBe('0')
+  })
+})
+
+describe('dawarichApi: how long the browser waits', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('FE-DAWARICH-API-040: every call that makes the server ask Dawarich outlasts the shared 8 s', async () => {
+    // The server gives each request to Dawarich 15 s on its own. At the shared
+    // 8 s the browser gave up first, the server cached the answer anyway, and the
+    // recorded route turned up only after a reload.
+    const get = vi.spyOn(apiClient, 'get').mockResolvedValue({ data: {} })
+    const post = vi.spyOn(apiClient, 'post').mockResolvedValue({ data: {} })
+    const put = vi.spyOn(apiClient, 'put').mockResolvedValue({ data: {} })
+
+    await dawarichApi.tripTrack(7)
+    await dawarichApi.windowTrack('2026-09-01T00:00:00Z', '2026-09-02T00:00:00Z')
+    await dawarichApi.test({ url: 'https://dawarich.example' })
+    await dawarichApi.syncNow()
+    await dawarichApi.scanBucketList()
+    await dawarichApi.saveSettings({ url: 'https://dawarich.example', allowInsecureTls: false, syncEnabled: true })
+
+    const configs = [
+      ...get.mock.calls.map(call => call[1]),
+      ...post.mock.calls.map(call => call[2]),
+      ...put.mock.calls.map(call => call[2]),
+    ]
+    expect(configs).toHaveLength(6)
+    for (const config of configs) {
+      expect(config).toEqual(expect.objectContaining({ timeout: DAWARICH_UPSTREAM_TIMEOUT_MS }))
+    }
+    expect(DAWARICH_UPSTREAM_TIMEOUT_MS).toBeGreaterThan(15_000)
+    // The track calls still carry their offset alongside the longer wait.
+    expect(get.mock.calls[0][1]).toEqual(expect.objectContaining({ params: expect.objectContaining({ offset: expect.any(Number) }) }))
+  })
+
+  it('FE-DAWARICH-API-041: the Atlas waits longest, and the purely local calls keep the shared default', async () => {
+    const get = vi.spyOn(apiClient, 'get').mockResolvedValue({ data: {} })
+    const post = vi.spyOn(apiClient, 'post').mockResolvedValue({ data: {} })
+
+    await dawarichApi.atlasSuggestions('2025-09-14T00:00:00Z', '2026-09-14T00:00:00Z')
+    expect(get.mock.calls[0][1]).toEqual(expect.objectContaining({ timeout: DAWARICH_ATLAS_TIMEOUT_MS }))
+    expect(DAWARICH_ATLAS_TIMEOUT_MS).toBeGreaterThan(DAWARICH_UPSTREAM_TIMEOUT_MS)
+
+    // Reading suggestions and confirming countries touch TREK's own database
+    // only; a two-minute wait there would just hide a stuck server.
+    await dawarichApi.listSuggestions()
+    await dawarichApi.acceptAtlasCountries(['DE'])
+    expect(get.mock.calls[1][1]).not.toEqual(expect.objectContaining({ timeout: expect.anything() }))
+    expect(post.mock.calls[0][2]).toBeUndefined()
+  })
+})

client/src/api/dawarich.ts

@@ -0,0 +1,107 @@
+import apiClient from './client'
+import type {
+  DawarichAccept,
+  DawarichAcceptResult,
+  DawarichAtlasSuggestions,
+  DawarichBucketScan,
+  DawarichConnection,
+  DawarichSettings,
+  DawarichStatus,
+  DawarichSuggestion,
+  DawarichSuggestionList,
+  DawarichTrack,
+} from '@trek/shared'
+
+/**
+ * The Dawarich surface, in its own file rather than in the `client.ts` god
+ * module. Types come from the shared contracts, so a server change that the
+ * client has not caught up with is a typecheck failure rather than a runtime
+ * surprise.
+ */
+/**
+ * How long the browser waits for a call that makes the server go and ask
+ * Dawarich.
+ *
+ * The shared 8 s on `apiClient` is right for TREK's own routes and wrong for
+ * these: the server allows each request to Dawarich 15 s by itself, walks pages
+ * of points for a route, and runs six probes one after another to test a
+ * connection. Cut off at 8 s, the browser gave up while the server carried on
+ * and cached the answer, so the recorded route showed "unavailable" and then
+ * appeared on the next reload.
+ */
+export const DAWARICH_UPSTREAM_TIMEOUT_MS = 120_000
+
+/**
+ * The Atlas asks for a year of visited cities a month at a time, one request
+ * after another, so it gets longer again. Still bounded, and under Node's own
+ * five-minute request limit on the server side.
+ */
+export const DAWARICH_ATLAS_TIMEOUT_MS = 240_000
+
+const upstream = { timeout: DAWARICH_UPSTREAM_TIMEOUT_MS }
+
+export const dawarichApi = {
+  // ── Connection ─────────────────────────────────────────────────────────────
+  getSettings: (): Promise<DawarichConnection> =>
+    apiClient.get('/integrations/dawarich/settings').then(r => r.data),
+  saveSettings: (data: DawarichSettings): Promise<{
+    success: boolean
+    /** The server's own sentence, English — the fallback when the code below is unknown here. */
+    warning?: string
+    /** What the warning is about, so the UI can say it in the reader's language. */
+    warningCode?: string
+    /** The address it resolved to, for the private-IP warning. */
+    warningIp?: string
+  }> =>
+    apiClient.put('/integrations/dawarich/settings', data, upstream).then(r => r.data),
+  disconnect: (): Promise<{ success: boolean }> =>
+    apiClient.delete('/integrations/dawarich/settings').then(r => r.data),
+  test: (data: Partial<DawarichSettings>): Promise<DawarichStatus> =>
+    apiClient.post('/integrations/dawarich/test', data, upstream).then(r => r.data),
+  syncNow: (): Promise<{ state: string; created: number; updated: number; missing: number; alreadyRunning?: boolean }> =>
+    apiClient.post('/integrations/dawarich/sync', undefined, upstream).then(r => r.data),
+
+  // ── Suggestions ────────────────────────────────────────────────────────────
+  listSuggestions: (params?: { tripId?: number; state?: string }): Promise<DawarichSuggestionList> =>
+    apiClient.get('/integrations/dawarich/suggestions', { params }).then(r => r.data),
+  accept: (id: number, body: DawarichAccept): Promise<DawarichAcceptResult> =>
+    apiClient.post(`/integrations/dawarich/suggestions/${id}/accept`, body).then(r => r.data),
+  setState: (id: number, state: 'new' | 'dismissed'): Promise<DawarichSuggestion> =>
+    apiClient.put(`/integrations/dawarich/suggestions/${id}/state`, { state }).then(r => r.data),
+
+  // ── Bucket list ────────────────────────────────────────────────────────────
+  scanBucketList: (): Promise<DawarichBucketScan> =>
+    apiClient.post('/integrations/dawarich/bucket-list/scan', undefined, upstream).then(r => r.data),
+  confirmBucketVisits: (itemIds: number[], visitedAt?: string): Promise<{ updated: number }> =>
+    apiClient.post('/integrations/dawarich/bucket-list/confirm', { itemIds, visitedAt }).then(r => r.data),
+  clearBucketVisit: (itemId: number): Promise<{ success: boolean }> =>
+    apiClient.delete(`/integrations/dawarich/bucket-list/${itemId}/visit`).then(r => r.data),
+
+  // ── Atlas ──────────────────────────────────────────────────────────────────
+  atlasSuggestions: (from: string, to: string): Promise<DawarichAtlasSuggestions> =>
+    apiClient
+      .get('/integrations/dawarich/atlas/suggestions', { params: { from, to }, timeout: DAWARICH_ATLAS_TIMEOUT_MS })
+      .then(r => r.data),
+  acceptAtlasCountries: (countryCodes: string[]): Promise<{ marked: number }> =>
+    apiClient.post('/integrations/dawarich/atlas/accept', { countryCodes }).then(r => r.data),
+
+  // ── Track overlay ──────────────────────────────────────────────────────────
+  //
+  // Recorded points are bare instants, so the server cannot know which day they
+  // belong to without being told whose day is meant. The browser is the only
+  // party that knows, so it says so — otherwise an evening east of UTC lands on
+  // the wrong day of the trip.
+  tripTrack: (tripId: number, params?: { from?: string; to?: string }, signal?: AbortSignal): Promise<DawarichTrack> =>
+    apiClient
+      .get(`/integrations/dawarich/trips/${tripId}/track`, { ...upstream, params: { ...params, offset: localOffsetMinutes() }, signal })
+      .then(r => r.data),
+  windowTrack: (from: string, to: string, signal?: AbortSignal): Promise<DawarichTrack> =>
+    apiClient
+      .get('/integrations/dawarich/track', { ...upstream, params: { from, to, offset: localOffsetMinutes() }, signal })
+      .then(r => r.data),
+}
+
+/** The reader's own UTC offset in minutes — +120 for Berlin in summer. */
+function localOffsetMinutes(): number {
+  return -new Date().getTimezoneOffset()
+}

client/src/api/schoolHolidayCatalog.ts

@@ -0,0 +1,13 @@
+import { schoolHolidayCatalogSchema, schoolHolidayRegionDetailSchema, type SchoolHolidayCountryRequest, type SchoolHolidayRegionRequest } from '@trek/shared'
+import apiClient from './client'
+
+const base = '/school-holiday-catalog'
+export const schoolHolidayCatalogApi = {
+  catalog: () => apiClient.get(base).then(r => schoolHolidayCatalogSchema.parse(r.data)),
+  region: (id: number) => apiClient.get(`${base}/regions/${id}`).then(r => schoolHolidayRegionDetailSchema.parse(r.data)),
+  createCountry: (country: SchoolHolidayCountryRequest) => apiClient.post(`${base}/countries`, country),
+  deleteCountry: (code: string) => apiClient.delete(`${base}/countries/${code}`),
+  createRegion: (country: string, region: SchoolHolidayRegionRequest) => apiClient.post(`${base}/countries/${country}/regions`, region).then(r => schoolHolidayRegionDetailSchema.parse(r.data)),
+  updateRegion: (id: number, region: SchoolHolidayRegionRequest) => apiClient.put(`${base}/regions/${id}`, region).then(r => schoolHolidayRegionDetailSchema.parse(r.data)),
+  deleteRegion: (id: number, revision: number) => apiClient.delete(`${base}/regions/${id}`, { params: { revision } }),
+}

client/src/api/wsEventPolicy.ts

@@ -35,6 +35,9 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
   // second copy of the same list to keep in step.
   'roadtripVia:changed',
   'roadtripTrack:changed',
+  'roadtripPreferences:changed',
+  // components/Roadtrip/useDayBoundaries reloads the shared boundaries.
+  'roadtripBoundary:changed',
   // In-app notifications — hooks/useInAppNotificationListener
   'notification:new',
   'notification:updated',
@@ -78,6 +81,12 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
   // who has the book open, and where their pointers are)
   'journey:book:peers',
   'journey:book:cursor',
+  // Document sync: components/Files/docsync/useDocSync re-reads the bindings
+  // and their counts, and components/Files/docsync/useDocSyncOffered asks
+  // again whether the Files screen offers the sync button. Content-free like
+  // the bag ping: what a run changed is per-binding server state, and the
+  // files it moved arrive as file:* events.
+  'docsync:changed',
   // Booking import — BackgroundTasks/BackgroundTasksWidget ('import:' prefix listener)
   'import:progress',
   'import:done',

client/src/components/Admin/AddonManager.test.tsx

@@ -1,4 +1,4 @@
-// FE-ADMIN-ADDON-001 to FE-ADMIN-ADDON-025
+// FE-ADMIN-ADDON-001 to FE-ADMIN-ADDON-037
 import { render, screen, waitFor } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { delay, http, HttpResponse } from 'msw';
@@ -418,7 +418,102 @@ describe('AddonManager', () => {
     expect(isOn(addonToggle('Todo List'))).toBe(true);
   });
 
-  it('FE-ADMIN-ADDON-018: the collab sub-features render their state and report the toggled key', async () => {
+  it('FE-ADMIN-ADDON-033: document providers hang off Documents with their glyphs and stay out of the count', async () => {
+    server.use(addonsRoute([
+      buildAddon({ id: 'documents', name: 'Documents', icon: 'FileText', enabled: true }),
+      buildAddon({ id: 'journey', name: 'Journey', type: 'global', icon: 'Compass', enabled: false }),
+      buildAddon({ id: 'paperless', name: 'Paperless-ngx', description: 'Document archive', type: 'document_provider', enabled: true }),
+      buildAddon({ id: 'nextcloud', name: 'Nextcloud', description: 'WebDAV files', type: 'document_provider', enabled: false }),
+    ]));
+    render(<AddonManager />);
+
+    await screen.findByText('Paperless-ngx');
+    const paperlessRow = screen.getByText('Paperless-ngx').closest('li') as HTMLElement;
+    expect(paperlessRow.querySelector('svg')).toBeInTheDocument();
+    expect(isOn(subToggle('Paperless-ngx'))).toBe(true);
+    expect(isOn(subToggle('Nextcloud'))).toBe(false);
+    // Documents and Journey are the addons; an enabled provider is a shelf row
+    // and must not turn 1/2 into 2/2.
+    expect(screen.getByText('1/2')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-ADDON-034: document providers stay hidden while Documents itself is off', async () => {
+    server.use(addonsRoute([
+      buildAddon({ id: 'documents', name: 'Documents', icon: 'FileText', enabled: false }),
+      buildAddon({ id: 'paperless', name: 'Paperless-ngx', type: 'document_provider', enabled: true }),
+    ]));
+    render(<AddonManager />);
+
+    await screen.findByText('Documents');
+    expect(screen.queryByText('Paperless-ngx')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-ADDON-035: switching Documents off and on again shows the cascaded providers as off', async () => {
+    const user = userEvent.setup();
+    let loads = 0;
+    let documentsOn = true;
+    let paperlessOn = true;
+    server.use(
+      http.get('/api/admin/addons', () => {
+        loads += 1;
+        return HttpResponse.json({
+          addons: [
+            buildAddon({ id: 'documents', name: 'Documents', icon: 'FileText', enabled: documentsOn }),
+            buildAddon({ id: 'paperless', name: 'Paperless-ngx', type: 'document_provider', enabled: paperlessOn }),
+          ],
+        });
+      }),
+      http.put('/api/admin/addons/documents', async ({ request }) => {
+        documentsOn = (await request.json() as { enabled: boolean }).enabled;
+        if (!documentsOn) paperlessOn = false;
+        return HttpResponse.json({ success: true });
+      }),
+    );
+    render(<><ToastContainer /><AddonManager /></>);
+    await screen.findByText('Paperless-ngx');
+
+    await user.click(addonToggle('Documents'));
+    await screen.findByText('Addon updated');
+    expect(loads).toBe(2);
+    expect(screen.queryByText('Paperless-ngx')).not.toBeInTheDocument();
+
+    await user.click(addonToggle('Documents'));
+
+    await screen.findByText('Paperless-ngx');
+    expect(isOn(subToggle('Paperless-ngx'))).toBe(false);
+  });
+
+  it('FE-ADMIN-ADDON-036: toggling a document provider persists it without re-reading the list', async () => {
+    const user = userEvent.setup();
+    let loads = 0;
+    let body: unknown = null;
+    server.use(
+      http.get('/api/admin/addons', () => {
+        loads += 1;
+        return HttpResponse.json({
+          addons: [
+            buildAddon({ id: 'documents', name: 'Documents', icon: 'FileText', enabled: true }),
+            buildAddon({ id: 'papra', name: 'Papra', type: 'document_provider', enabled: false }),
+          ],
+        });
+      }),
+      http.put('/api/admin/addons/papra', async ({ request }) => {
+        body = await request.json();
+        return HttpResponse.json({ success: true });
+      }),
+    );
+    render(<><ToastContainer /><AddonManager /></>);
+    await screen.findByText('Papra');
+
+    await user.click(subToggle('Papra'));
+
+    await screen.findByText('Addon updated');
+    expect(body).toEqual({ enabled: true });
+    expect(loads).toBe(1);
+    expect(isOn(subToggle('Papra'))).toBe(true);
+  });
+
+  it('FE-ADMIN-ADDON-018:the collab sub-features render their state and report the toggled key', async () => {
     const user = userEvent.setup();
     const onToggleCollabFeature = vi.fn();
     server.use(addonsRoute([buildAddon({ id: 'collab', name: 'Collab', enabled: true })]));
@@ -448,6 +543,22 @@ describe('AddonManager', () => {
     expect(screen.queryByText('Polls')).not.toBeInTheDocument();
   });
 
+  it('FE-ADMIN-ADDON-037: the links row describes the feature, not an empty list', async () => {
+    // The row's tooltip is its description. The links tab's empty state read as a
+    // status here, and a status that never changes reads as a broken feature.
+    server.use(addonsRoute([buildAddon({ id: 'collab', name: 'Collab', enabled: true })]));
+    render(
+      <AddonManager
+        collabFeatures={{ chat: true, notes: true, links: true, polls: true, whatsnext: true }}
+        onToggleCollabFeature={vi.fn()}
+      />,
+    );
+
+    const links = await screen.findByText('Links');
+    expect(links).toHaveAttribute('title');
+    expect(links.getAttribute('title')).not.toBe('No shared links yet');
+  });
+
   it('FE-ADMIN-ADDON-020: a disabled AI-parsing addon renders the row without its config block', async () => {
     server.use(addonsRoute([{ ...llmAddon({ provider: 'local' }), enabled: false }]));
     render(<AddonManager />);
@@ -473,7 +584,7 @@ describe('AddonManager', () => {
   it('FE-ADMIN-ADDON-021: the local provider lists installed models and a chip fills the model field', async () => {
     const user = userEvent.setup();
     const urls: (string | null)[] = [];
-    server.use(addonsRoute([llmAddon({ provider: 'local' })]), modelsRoute(['qwen3:8b', 'llama3:8b'], urls));
+    server.use(addonsRoute([llmAddon({ provider: 'local' })]), modelsRoute(['qwen3.5:4b', 'llama3:8b'], urls));
     render(<AddonManager />);
 
     await screen.findByText('Installed on the server');
@@ -483,9 +594,9 @@ describe('AddonManager', () => {
     await user.click(screen.getByRole('button', { name: 'llama3:8b' }));
     expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('llama3:8b');
 
-    // qwen3:8b is already installed, so the recommended row offers "Use" instead of "Pull"
+    // qwen3.5:4b is already installed, so the recommended row offers "Use" instead of "Pull"
     await user.click(screen.getByRole('button', { name: 'Use' }));
-    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3:8b');
+    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3.5:4b');
     expect(screen.getByRole('button', { name: 'Selected' })).toBeDisabled();
   });
 
@@ -545,7 +656,7 @@ describe('AddonManager', () => {
       addonsRoute([llmAddon({ provider: 'local' })]),
       http.get('/api/admin/llm/local/models', () => {
         modelCalls += 1;
-        return HttpResponse.json({ models: modelCalls === 1 ? [] : [{ name: 'qwen3:8b', size: 1 }] });
+        return HttpResponse.json({ models: modelCalls === 1 ? [] : [{ name: 'qwen3.5:4b', size: 1 }] });
       }),
       http.post('/api/admin/llm/local/pull', async ({ request }) => {
         pulled = await request.json();
@@ -565,8 +676,8 @@ describe('AddonManager', () => {
     expect(screen.getByText('starting…')).toBeInTheDocument();
 
     await screen.findByText('Model pulled');
-    expect(pulled).toEqual({ baseUrl: 'http://localhost:11434/v1', model: 'qwen3:8b' });
-    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3:8b');
+    expect(pulled).toEqual({ baseUrl: 'http://localhost:11434/v1', model: 'qwen3.5:4b' });
+    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3.5:4b');
     await waitFor(() => expect(screen.getByRole('button', { name: 'Selected' })).toBeDisabled());
   });
 

client/src/components/Admin/AddonManager.tsx

@@ -7,6 +7,9 @@ import { useToast } from '../shared/Toast'
 import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane, Server, Cloud, Bookmark, Users, Loader2 } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
 import EmptyState from '../shared/EmptyState'
+import DawarichIcon from '../shared/DawarichIcon'
+import AirTrailIcon from '../shared/AirTrailIcon'
+import { DOCUMENT_PROVIDER_ICONS } from '../shared/DocumentProviderIcons'
 import AddonTile from './AddonTile'
 import AddonSubRow from './AddonSubRow'
 
@@ -15,6 +18,9 @@ import AddonSubRow from './AddonSubRow'
 // used to land on the fallback.
 const ICON_MAP = {
   ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane, Bookmark, Users, Sparkles,
+  // Dawarich ships a brand mark rather than a lucide name, the same way the photo
+  // providers below do. Keyed by the string in the addons table.
+  Dawarich: DawarichIcon,
 }
 
 function ImmichIcon({ size = 14 }: { size?: number }) {
@@ -36,6 +42,9 @@ function SynologyIcon({ size = 14 }: { size?: number }) {
 const PROVIDER_ICONS: Record<string, ComponentType<{ size?: number }>> = {
   immich: ImmichIcon,
   synologyphotos: SynologyIcon,
+  // The document providers' own marks, single-colour so they read as glyphs in
+  // a row of lucide icons and invert with the theme.
+  ...DOCUMENT_PROVIDER_ICONS,
 }
 
 interface Addon {
@@ -59,9 +68,20 @@ interface ProviderOption {
 interface AddonIconProps {
   name: string
   size?: number
+  /** A switched-off addon greys its icon out, brand marks included. */
+  enabled?: boolean
 }
 
-function AddonIcon({ name, size = 20 }: AddonIconProps) {
+function AddonIcon({ name, size = 20, enabled = true }: AddonIconProps) {
+  // The brand marks are badges, not glyphs: they fill the framed slot instead of
+  // sitting in the middle of it at glyph size, and they grey out when the addon
+  // is off — the lucide glyphs get that from the slot's text colour, an <img>
+  // has to be told.
+  if (name === 'Dawarich') return <DawarichIcon fill muted={!enabled} />
+  // 'Plane' is the icon string airtrail was seeded with, and INSERT OR IGNORE
+  // means every existing install still carries it — so the brand is keyed on
+  // that rather than on a new name no row would ever have.
+  if (name === 'Plane') return <AirTrailIcon fill muted={!enabled} />
   const Icon = ICON_MAP[name] || Puzzle
   return <Icon size={size} />
 }
@@ -79,7 +99,7 @@ interface CollabFeatures { chat: boolean; notes: boolean; links?: boolean; polls
 const COLLAB_SUB_FEATURES = [
   { key: 'chat', icon: MessageCircle, titleKey: 'admin.collab.chat.title', subtitleKey: 'admin.collab.chat.subtitle' },
   { key: 'notes', icon: StickyNote, titleKey: 'admin.collab.notes.title', subtitleKey: 'admin.collab.notes.subtitle' },
-  { key: 'links', icon: Link2, titleKey: 'collab.tabs.links', subtitleKey: 'collab.links.empty' },
+  { key: 'links', icon: Link2, titleKey: 'collab.tabs.links', subtitleKey: 'admin.collab.links.subtitle' },
   { key: 'polls', icon: BarChart3, titleKey: 'admin.collab.polls.title', subtitleKey: 'admin.collab.polls.subtitle' },
   { key: 'whatsnext', icon: Sparkles, titleKey: 'admin.collab.whatsnext.title', subtitleKey: 'admin.collab.whatsnext.subtitle' },
 ] as const
@@ -121,7 +141,9 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     // Journey off disables every photo provider with it, and the response carries
     // only Journey. Without re-reading, switching Journey back on brings the shelf
     // up with providers the database has long since turned off.
-    if (addon.id === 'journey') await loadAddons()
+    // Same for Documents: switching it off disables every document provider in
+    // the database, and the response carries only the addon itself.
+    if (addon.id === 'journey' || addon.id === 'documents') await loadAddons()
     toast.success(t('admin.addons.toast.updated'))
   }
 
@@ -129,12 +151,17 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     return addon.type === 'photo_provider'
   }
 
+  const isDocumentProviderAddon = (addon: Addon) => {
+    return addon.type === 'document_provider'
+  }
+
   const isPhotosAddon = (addon: Addon) => {
     const haystack = `${addon.id} ${addon.name} ${addon.description}`.toLowerCase()
     return addon.type === 'trip' && (addon.icon === 'Image' || haystack.includes('photo') || haystack.includes('memories'))
   }
 
   const photoProviderAddons = addons.filter(isPhotoProviderAddon)
+  const documentProviderAddons = addons.filter(isDocumentProviderAddon)
   const tripAddons = addons.filter(a => a.type === 'trip' && !isPhotosAddon(a))
   const globalAddons = addons.filter(a => a.type === 'global')
   const integrationAddons = addons.filter(a => a.type === 'integration')
@@ -145,6 +172,13 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
       enabled: provider.enabled,
       toggle: () => handleToggle(provider),
     }))
+  const documentProviderOptions: ProviderOption[] = documentProviderAddons.map((provider) => ({
+      key: provider.id,
+      label: provider.name,
+      description: provider.description,
+      enabled: provider.enabled,
+      toggle: () => handleToggle(provider),
+    }))
 
   if (loading) {
     return (
@@ -184,6 +218,25 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
         )
       })
     }
+    // Document providers are the Documents tile's shelf, the way photo providers
+    // are Journey's. Unlike those they carry no credential form here: a document
+    // connection belongs to a trip, not to a user, so it is entered in the trip's
+    // file manager. The admin decides only whether a provider may be offered.
+    if (addon.id === 'documents' && addon.enabled && documentProviderOptions.length > 0) {
+      return documentProviderOptions.map(provider => {
+        const ProviderIcon = PROVIDER_ICONS[provider.key]
+        return (
+          <AddonSubRow
+            key={provider.key}
+            icon={ProviderIcon ? <ProviderIcon size={14} /> : undefined}
+            title={provider.label}
+            description={provider.description}
+            enabled={provider.enabled}
+            onToggle={provider.toggle}
+          />
+        )
+      })
+    }
     if (addon.id === 'journey' && addon.enabled && providerOptions.length > 0) {
       return providerOptions.map(provider => {
         const ProviderIcon = PROVIDER_ICONS[provider.key]
@@ -212,7 +265,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     return (
       <AddonTile
         key={addon.id}
-        icon={<AddonIcon name={addon.icon} size={18} />}
+        icon={<AddonIcon name={addon.icon} size={18} enabled={addon.enabled} />}
         name={label.name}
         description={label.description}
         enabled={addon.enabled}
@@ -232,7 +285,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     { key: 'global', addons: globalAddons },
     { key: 'integration', addons: integrationAddons },
   ].filter(g => g.addons.length > 0)
-  const enabledCount = addons.filter(a => a.type !== 'photo_provider' && a.enabled).length
+  const enabledCount = addons.filter(a => a.type !== 'photo_provider' && a.type !== 'document_provider' && a.enabled).length
   const totalCount = tripAddons.length + globalAddons.length + integrationAddons.length
 
   return (
@@ -308,7 +361,7 @@ const DEFAULT_OLLAMA_URL = 'http://localhost:11434/v1'
  *  one model per document via Ollama's grammar-constrained `format`; "thinking" is disabled
  *  automatically, so the Qwen3 family works without any tuning. A host only needs one. */
 const RECOMMENDED_MODELS: { id: string; label: string; note: string; recommended: boolean; vision: boolean }[] = [
-  { id: 'qwen3:8b', label: 'Qwen3 — 8B', note: 'Recommended · best extraction quality & speed on CPU (thinking auto-disabled) · Apache-2.0', recommended: true, vision: false },
+  { id: 'qwen3.5:4b', label: 'Qwen3.5 — 4B', note: 'Recommended · small and quick on CPU, 3.4 GB download, 256K context (thinking auto-disabled) · Apache-2.0', recommended: true, vision: true },
 ]
 
 /**

client/src/components/Admin/AddonTile.tsx

@@ -44,7 +44,9 @@ export default function AddonTile({
     >
       <div className="flex items-start gap-3 p-4">
         <div
-          className={`grid h-10 w-10 shrink-0 place-items-center rounded-xl ${
+          // overflow-hidden so a brand mark that fills the slot keeps the slot's
+          // rounded corners instead of squaring them off.
+          className={`grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-xl ${
             enabled ? 'border border-accent bg-accent-subtle text-accent-on' : 'bg-surface-tertiary text-content-faint'
           }`}
         >

client/src/components/Admin/CategoryManager.tsx

@@ -192,7 +192,7 @@ export default function CategoryManager() {
       <div className="flex items-center justify-between mb-6">
         <div>
           <h2 className="font-semibold text-content">{t('categories.title')}</h2>
-          <p className="text-xs mt-1 text-content-muted">{t('categories.subtitle')}</p>
+          <p className="mt-1 text-caption text-content-faint">{t('categories.subtitle')}</p>
         </div>
         <button type="button" onClick={handleStartCreate}
           className="flex items-center gap-2 bg-slate-900 text-white px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium">

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -19,6 +19,7 @@ import {
   type GlMapProvider,
 } from '../Map/glProviders'
 import { useAuthStore } from '../../store/authStore'
+import RoutingInstanceFields, { type RoutingDefaults } from './RoutingInstanceFields'
 
 const MAP_PRESETS = [
   { name: 'OpenStreetMap', url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' },
@@ -34,7 +35,7 @@ const MAP_PRESETS = [
   { name: 'Stadia Smooth', url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png' },
 ]
 
-type Defaults = {
+type Defaults = RoutingDefaults & {
   temperature_unit?: string
   distance_unit?: DistanceUnit
   dark_mode?: string | boolean
@@ -43,8 +44,6 @@ type Defaults = {
   blur_booking_codes?: boolean
   map_tile_url?: string
   carto_api_key?: string
-  routing_base_url?: string
-  valhalla_base_url?: string
   map_provider?: string
   mapbox_access_token?: string
   mapbox_style?: string
@@ -121,8 +120,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   const managed = useAuthStore((s) => s.managed)
   const [mapboxToken, setMapboxToken] = useState('')
   const [cartoKey, setCartoKey] = useState('')
-  const [routingBase, setRoutingBase] = useState('')
-  const [valhallaBase, setValhallaBase] = useState('')
   const [mapboxStyle, setMapboxStyle] = useState('')
 
   useEffect(() => {
@@ -132,8 +129,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       setMapTileUrl(normalizeTileUrl(data.map_tile_url || ''))
       setMapboxToken(data.mapbox_access_token || '')
       setCartoKey(data.carto_api_key || '')
-      setRoutingBase(data.routing_base_url || '')
-      setValhallaBase(data.valhalla_base_url || '')
       setMapboxStyle(provider === 'leaflet' ? (data.mapbox_style || '') : styleForProvider(provider, provider === 'maplibre-gl' ? data.maplibre_style : data.mapbox_style))
       setLoaded(true)
     }).catch(() => setLoaded(true))
@@ -156,8 +151,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       if (key === 'map_tile_url') setMapTileUrl('')
       if (key === 'mapbox_access_token') setMapboxToken('')
       if (key === 'carto_api_key') setCartoKey('')
-      if (key === 'routing_base_url') setRoutingBase('')
-      if (key === 'valhalla_base_url') setValhallaBase('')
       if (key === 'mapbox_style' || key === 'maplibre_style') {
         const provider = normalizeProvider(defaults.map_provider)
         setMapboxStyle(provider === 'leaflet' ? '' : defaultStyleForProvider(provider))
@@ -387,53 +380,10 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           <p className="text-xs mt-1 text-content-faint">{t('admin.defaultSettings.cartoKeyHint')}</p>
         </div>
         )}
-        {/* Instance configuration, not a taste, which is why it sits here rather
-            than in a user's own Map settings. The origin has to appear in the CSP
-            `connect-src` the server emits at boot, and that list is built from
-            this default — a value on a personal settings row is read by the route
-            calculator and then refused by the browser, so the whole app stops
-            routing with no error it could report. The write route refuses one
-            from a non-admin for the same reason. */}
         {!managed && (
-        <div style={{ marginTop: 14 }}>
-          <label className="block text-sm font-medium mb-1.5 text-content-secondary">
-            {t('settings.routingBase')}
-            <ResetButton field="routing_base_url" />
-          </label>
-          <input
-            type="text"
-            value={routingBase}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRoutingBase(e.target.value)}
-            onBlur={() => save({ routing_base_url: routingBase.trim() })}
-            placeholder="https://osrm.example.org"
-            spellCheck={false}
-            autoComplete="off"
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-          />
-          <p className="text-xs mt-1 text-content-faint">{t('settings.routingBaseHint')}</p>
-        </div>
-        )}
-        {/* The second engine, next to the first because it is the same kind of decision
-            and carries the same restart caveat. Only ever asked to leave a road class
-            out of one leg, which is the one question the OSRM above refuses. */}
-        {!managed && (
-        <div style={{ marginTop: 14 }}>
-          <label className="block text-sm font-medium mb-1.5 text-content-secondary">
-            {t('settings.valhallaBase')}
-            <ResetButton field="valhalla_base_url" />
-          </label>
-          <input
-            type="text"
-            value={valhallaBase}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValhallaBase(e.target.value)}
-            onBlur={() => save({ valhalla_base_url: valhallaBase.trim() })}
-            placeholder="https://valhalla.example.org"
-            spellCheck={false}
-            autoComplete="off"
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-          />
-          <p className="text-xs mt-1 text-content-faint">{t('settings.valhallaBaseHint')}</p>
-        </div>
+          <div className="mt-3.5">
+            <RoutingInstanceFields defaults={defaults} onSave={save} onReset={reset} />
+          </div>
         )}
         <div style={{ position: 'relative', height: '200px', width: '100%', marginTop: 12 }}>
           {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}

client/src/components/Admin/PackingTemplateManager.tsx

@@ -156,7 +156,7 @@ export default function PackingTemplateManager() {
       <div className="p-5 border-b border-slate-100 flex items-center justify-between">
         <div>
           <h2 className="font-semibold text-slate-900">{t('admin.packingTemplates.title')}</h2>
-          <p className="text-xs text-slate-400 mt-1">{t('admin.packingTemplates.subtitle')}</p>
+          <p className="mt-1 text-caption text-content-faint">{t('admin.packingTemplates.subtitle')}</p>
         </div>
         <button type="button" onClick={() => setShowCreate(true)}
           className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors">

client/src/components/Admin/RoutingInstanceFields.tsx

@@ -0,0 +1,64 @@
+import { useId, useState } from 'react'
+import { useTranslation } from '../../i18n/TranslationContext'
+
+export interface RoutingDefaults {
+  routing_base_url?: string
+  valhalla_base_url?: string
+}
+
+interface RoutingFieldsProps {
+  defaults: RoutingDefaults
+  onSave: (patch: RoutingDefaults) => Promise<void>
+  onReset: (key: keyof RoutingDefaults) => Promise<void>
+  hintClassName?: string
+}
+
+const ROUTERS = [
+  { key: 'routing_base_url', label: 'settings.routingBase', hint: 'settings.routingBaseHint', placeholder: 'https://osrm.example.org' },
+  { key: 'valhalla_base_url', label: 'settings.valhallaBase', hint: 'settings.valhallaBaseHint', placeholder: 'https://valhalla.example.org' },
+] as const
+
+function RoutingUrlField({ router, defaults, onSave, onReset, hintClassName = 'text-caption leading-relaxed text-content-faint' }: RoutingFieldsProps & { router: typeof ROUTERS[number] }) {
+  const { t } = useTranslation()
+  const id = useId()
+  const [draft, setDraft] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const saved = defaults[router.key] ?? ''
+  const commit = async () => {
+    if (draft === null) return
+    const value = draft.trim()
+    if (value === saved) { setDraft(null); return }
+    setSaving(true)
+    try { await onSave({ [router.key]: value }) }
+    finally { setDraft(null); setSaving(false) }
+  }
+  const reset = async () => {
+    setSaving(true)
+    try { await onReset(router.key) }
+    finally { setDraft(null); setSaving(false) }
+  }
+  return (
+    <div className="min-w-0 space-y-1.5" aria-busy={saving}>
+      <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+        <label htmlFor={id} className="text-body font-medium text-content-secondary">{t(router.label)}</label>
+        {defaults[router.key] !== undefined && (
+          <button type="button" disabled={saving} onClick={reset} className="text-caption text-content-muted underline disabled:opacity-50">
+            {t('admin.defaultSettings.resetToBuiltIn')}
+          </button>
+        )}
+      </div>
+      <input id={id} type="url" inputMode="url" value={draft ?? saved} disabled={saving}
+        onChange={e => setDraft(e.target.value)} onBlur={commit}
+        onKeyDown={e => { if (e.key === 'Enter') e.currentTarget.blur() }}
+        placeholder={router.placeholder} spellCheck={false} autoComplete="off" autoCapitalize="none"
+        aria-describedby={`${id}-hint`}
+        className="min-h-11 w-full min-w-0 rounded-lg border border-edge bg-surface-input px-3 py-2 text-body text-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50"
+      />
+      <p id={`${id}-hint`} className={hintClassName}>{t(router.hint)}</p>
+    </div>
+  )
+}
+
+export default function RoutingInstanceFields(props: RoutingFieldsProps) {
+  return <div className="flex flex-col gap-3">{ROUTERS.map(router => <RoutingUrlField key={router.key} router={router} {...props} />)}</div>
+}

client/src/components/Admin/SchoolHolidayCatalog.test.tsx

@@ -0,0 +1,160 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { http, HttpResponse } from 'msw'
+import { within } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '../../../tests/helpers/render'
+import { server } from '../../../tests/helpers/msw/server'
+import { resetAllStores } from '../../../tests/helpers/store'
+import SchoolHolidayCatalog from './SchoolHolidayCatalog'
+import SchoolHolidayRegionEditor from './SchoolHolidayRegionEditor'
+import { fetchSchoolHolidayRegionOptions } from '../Vacay/holidayRegions'
+import { useSchoolHolidayCountries } from '../Vacay/useSchoolHolidayCountries'
+import { useVacayStore } from '../../store/vacayStore'
+import type { SchoolHolidayRegionDetail } from '@trek/shared'
+
+const region: SchoolHolidayRegionDetail = { id: 7, code: 'US-MANUAL-7', country: 'US', name: 'Seattle schools', revision: 1, holidays: [{ name: 'Winter break', startDate: '2026-12-20', endDate: '2027-01-06' }] }
+const catalog = { countries: [{ code: 'US', name: 'USA' }], regions: [region] }
+beforeEach(() => resetAllStores())
+
+function enterDate(label: string, value: string) {
+  const picker = within(screen.getByRole('group', { name: label }))
+  fireEvent.click(picker.getByRole('button', { name: /enter.*manually/i }))
+  const input = picker.getByRole('textbox')
+  fireEvent.change(input, { target: { value } })
+  fireEvent.blur(input)
+}
+
+describe('manual school holiday administration', () => {
+  it('creates a country, a district and its named periods', async () => {
+    let created = false
+    const saves: unknown[] = []
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json({ countries: created ? catalog.countries : [], regions: [] })),
+      http.post('/api/school-holiday-catalog/countries', async ({ request }) => { expect(await request.json()).toEqual({ code: 'US', name: 'USA' }); created = true; return HttpResponse.json(catalog.countries[0]) }),
+      http.post('/api/school-holiday-catalog/countries/US/regions', async ({ request }) => { saves.push(await request.json()); return HttpResponse.json(region) }),
+    )
+    render(<SchoolHolidayCatalog />)
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Add country' })).toBeEnabled())
+    fireEvent.click(screen.getByRole('button', { name: 'Add country' }))
+    fireEvent.change(screen.getByLabelText('Country'), { target: { value: 'USA' } })
+    fireEvent.change(screen.getByLabelText('Country code (e.g. US)'), { target: { value: 'us' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Add region' })).toBeEnabled())
+    fireEvent.click(screen.getByRole('button', { name: 'Add region' }))
+    fireEvent.change(screen.getByLabelText('Region or school district'), { target: { value: 'Seattle schools' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add holiday period' }))
+    fireEvent.change(screen.getByLabelText('Holiday name'), { target: { value: 'Winter break' } })
+    enterDate('Start date', '2026-12-20')
+    enterDate('End date', '2027-01-06')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(saves).toEqual([{ name: region.name, revision: 0, holidays: region.holidays }]))
+    await waitFor(() => expect(screen.queryByLabelText('Holiday name')).not.toBeInTheDocument())
+  })
+
+  it('opens existing periods and keeps edits after a failed save', async () => {
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json(catalog)),
+      http.get('/api/school-holiday-catalog/regions/7', () => HttpResponse.json(region)),
+      http.put('/api/school-holiday-catalog/regions/7', () => HttpResponse.json({ error: 'This region changed. Reopen it before saving again.' }, { status: 409 })),
+    )
+    render(<SchoolHolidayCatalog />)
+    fireEvent.click(await screen.findByRole('button', { name: 'Seattle schools' }))
+    await screen.findByDisplayValue('Winter break')
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled())
+    fireEvent.change(screen.getByLabelText('Holiday name'), { target: { value: 'New name' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('This region changed')
+    expect(screen.getByLabelText('Holiday name')).toHaveValue('New name')
+  })
+
+  it('validates names and confirms discarding changes', async () => {
+    const save = vi.fn()
+    const close = vi.fn()
+    render(<SchoolHolidayRegionEditor region={region} busy={false} error="" onClose={close} onSave={save} />)
+    fireEvent.change(screen.getByLabelText('Holiday name'), { target: { value: ' ' } })
+    fireEvent.submit(screen.getByRole('button', { name: 'Save' }).closest('form')!)
+    expect(save).not.toHaveBeenCalled()
+    expect(screen.getByRole('alert')).toHaveTextContent('Check the names and dates')
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(screen.getByText('Discard unsaved changes?')).toBeInTheDocument()
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('removes a period and saves an existing region without changing its revision token', () => {
+    const save = vi.fn()
+    render(<SchoolHolidayRegionEditor region={region} busy={false} error="" onClose={vi.fn()} onSave={save} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Delete Winter break' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(save).toHaveBeenCalledWith({ name: region.name, revision: 1, holidays: [] })
+  })
+
+  it('blocks offline edits but still lets the dialog close', () => {
+    const close = vi.fn()
+    render(<SchoolHolidayRegionEditor region={region} busy={false} offline error="Offline" onClose={close} onSave={vi.fn()} />)
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(close).toHaveBeenCalledOnce()
+  })
+
+  it('keeps deletion conflicts visible and allows retrying the catalog', async () => {
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json(catalog)),
+      http.delete('/api/school-holiday-catalog/regions/7', ({ request }) => {
+        expect(new URL(request.url).searchParams.get('revision')).toBe('1')
+        return HttpResponse.json({ error: 'Region is in use' }, { status: 409 })
+      }),
+    )
+    render(<SchoolHolidayCatalog />)
+    fireEvent.click(await screen.findByRole('button', { name: 'Delete Seattle schools' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('Region is in use')
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }))
+    await waitFor(() => expect(screen.queryByRole('alert')).not.toBeInTheDocument())
+    expect(screen.getByRole('button', { name: 'Seattle schools' })).toBeInTheDocument()
+  })
+
+  it('keeps national API calendars selectable alongside manual regions', async () => {
+    server.use(http.get('/api/school-holiday-catalog', () => HttpResponse.json({ countries: [{ code: 'IE', name: 'Ireland' }], regions: [{ ...region, country: 'IE', code: 'IE-MANUAL-7' }] })))
+    expect(await fetchSchoolHolidayRegionOptions('IE')).toEqual([{ value: 'IE', label: 'IE' }, { value: 'IE-MANUAL-7', label: region.name }])
+  })
+
+  it('keeps API regions available if loading the manual catalog fails', async () => {
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json({}, { status: 502 })),
+      http.get('/api/addons/vacay/school-holidays/regions/DE', () => HttpResponse.json({ subdivisions: [{ code: 'DE-BY', name: [{ language: 'EN', text: 'Bavaria' }] }] })),
+    )
+    expect(await fetchSchoolHolidayRegionOptions('DE')).toEqual([{ value: 'DE-BY', label: 'Bavaria' }])
+    await expect(fetchSchoolHolidayRegionOptions('US')).rejects.toThrow()
+  })
+
+  it('offers USA independently of provider countries and fetches only local regions', async () => {
+    const provider = vi.fn(() => HttpResponse.json([]))
+    server.use(http.get('/api/school-holiday-catalog', () => HttpResponse.json(catalog)), http.get('/api/addons/vacay/school-holidays/regions/US', provider))
+    function Countries() { const { countries } = useSchoolHolidayCountries(); return <>{countries.map(country => <span key={country.value}>{country.label}</span>)}</> }
+    render(<Countries />)
+    expect(await screen.findByText('USA')).toBeInTheDocument()
+    expect(await fetchSchoolHolidayRegionOptions('US')).toEqual([{ value: 'US-MANUAL-7', label: 'Seattle schools' }])
+    expect(provider).not.toHaveBeenCalled()
+  })
+
+  it('keeps manual regions usable when a supported country provider fails', async () => {
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json({ countries: [{ code: 'DE', name: 'Germany' }], regions: [{ ...region, country: 'DE', code: 'DE-MANUAL-7' }] })),
+      http.get('/api/addons/vacay/school-holidays/regions/DE', () => HttpResponse.json({}, { status: 502 })),
+    )
+    expect(await fetchSchoolHolidayRegionOptions('DE')).toEqual([{ value: 'DE-MANUAL-7', label: region.name }])
+  })
+
+  it('renders manual dates with inclusive boundaries without touching leave entries', async () => {
+    server.use(http.get('/api/school-holiday-catalog/regions/7/holidays/2026', () => HttpResponse.json(region.holidays)))
+    useVacayStore.setState({
+      selectedYear: 2026,
+      plan: { id: 1, school_holidays_enabled: true, holidays_enabled: false, holidays_region: null, block_weekends: true, company_holidays_enabled: true, carry_over_enabled: false, holiday_calendars: [{ id: 1, plan_id: 1, region: region.code, label: 'School', color: '#a5f3fc', sort_order: 0, type: 'school_holiday' }] },
+      entries: [{ plan_id: 1, user_id: 1, date: '2026-12-23', fraction: 1, kind: 'vacation' }],
+    })
+    const entries = useVacayStore.getState().entries
+    await useVacayStore.getState().loadHolidays(2026)
+    expect(useVacayStore.getState().holidays['2026-12-20']).toBeDefined()
+    expect(useVacayStore.getState().holidays['2026-12-31']).toBeDefined()
+    expect(useVacayStore.getState().entries).toBe(entries)
+  })
+});

client/src/components/Admin/SchoolHolidayCatalog.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import { Plus, Trash2 } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useSchoolHolidayCatalog } from './useSchoolHolidayCatalog'
+import SchoolHolidayRegionEditor, { holidayButtonClass, holidayInputClass } from './SchoolHolidayRegionEditor'
+import ConfirmDialog from '../shared/ConfirmDialog'
+import ErrorBoundary from '../shared/ErrorBoundary'
+import CustomSelect from '../shared/CustomSelect'
+
+export default function SchoolHolidayCatalog() {
+  return <ErrorBoundary boundaryId="school-holiday-catalog"><Catalog /></ErrorBoundary>
+}
+
+function Catalog() {
+  const { t } = useTranslation()
+  const state = useSchoolHolidayCatalog()
+  const [country, setCountry] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [code, setCode] = useState('')
+  const [name, setName] = useState('')
+  const [remove, setRemove] = useState<{ label: string; action: () => Promise<boolean> } | null>(null)
+  const selectedCountry = state.catalog.countries.find(item => item.code === country)?.code || state.catalog.countries[0]?.code || ''
+  const regions = state.catalog.regions.filter(region => region.country === selectedCountry)
+  const disabled = state.busy || state.loading || state.offline
+  const addRegion = () => state.setEditor({ id: 0, country: selectedCountry, name: '', code: '', revision: 0, holidays: [] })
+
+  return <section className="space-y-4 rounded-2xl border border-edge bg-surface-card p-4 sm:p-6">
+    <div>
+      <h2 className="font-semibold text-content">{t('schoolCatalog.title')}</h2>
+      <p className="mt-1 text-caption text-content-faint">{t('schoolCatalog.hint')}</p>
+    </div>
+    {state.offline && <p role="status" className="text-body text-warning">{t('schoolCatalog.offline')}</p>}
+    {state.loading && <p role="status" className="text-body text-content-muted">{t('common.loading')}</p>}
+    {state.error && !state.editor && <div role="alert" className="space-y-2 text-body text-danger">{state.error}<button type="button" disabled={disabled} onClick={() => void state.refresh()} className={`${holidayButtonClass} block`}>{t('schoolCatalog.retry')}</button></div>}
+    <fieldset disabled={disabled} className="space-y-4">
+      {state.catalog.countries.length > 0 && <div className="flex items-end gap-2">
+        <div className="min-w-0 flex-1 space-y-1 text-body"><span>{t('schoolCatalog.country')}</span>
+          <CustomSelect value={selectedCountry} onChange={value => setCountry(String(value))} options={state.catalog.countries.map(item => ({ value: item.code, label: item.name }))} placeholder={t('schoolCatalog.country')} searchable disabled={disabled} />
+        </div>
+        <button type="button" disabled={adding} title={t('schoolCatalog.addCountry')} aria-label={t('schoolCatalog.addCountry')} onClick={() => setAdding(true)} className={`${holidayButtonClass} inline-flex shrink-0 items-center justify-center`}><Plus size={18} /></button>
+        <button type="button" disabled={regions.length > 0} title={t('schoolCatalog.deleteHint')} className={holidayButtonClass} aria-label={t('schoolCatalog.deleteCountry')} onClick={() => setRemove({ label: selectedCountry, action: () => state.deleteCountry(selectedCountry) })}><Trash2 size={18} /></button>
+      </div>}
+      {!adding && state.catalog.countries.length === 0 && <button type="button" onClick={() => setAdding(true)} className={`${holidayButtonClass} flex items-center gap-2`}><Plus size={16} />{t('schoolCatalog.addCountry')}</button>}
+      {adding && <form className="space-y-3 rounded-xl border border-edge p-3" onSubmit={async event => {
+        event.preventDefault()
+        if (await state.createCountry({ code, name: name.trim() })) { setCountry(code); setAdding(false); setCode(''); setName('') }
+      }}>
+        <label className="block space-y-1 text-body"><span>{t('schoolCatalog.country')}</span><input autoFocus required maxLength={100} className={holidayInputClass} value={name} onChange={event => setName(event.target.value)} /></label>
+        <label className="block space-y-1 text-body"><span>{t('schoolCatalog.code')}</span><input required pattern="[A-Z]{2}" maxLength={2} className={holidayInputClass} value={code} onChange={event => setCode(event.target.value.toUpperCase())} placeholder="US" /></label>
+        <div className="flex gap-2"><button type="submit" className={holidayButtonClass}>{t('common.save')}</button><button type="button" onClick={() => setAdding(false)} className={holidayButtonClass}>{t('common.cancel')}</button></div>
+      </form>}
+      {selectedCountry && <>
+        {regions.length === 0 && <p className="text-body text-content-muted">{t('schoolCatalog.empty')}</p>}
+        <ul className="divide-y divide-edge">{regions.map(region => <li key={region.id} className="flex items-center gap-2 py-2">
+          <button type="button" className={`${holidayButtonClass} min-w-0 flex-1 text-left`} onClick={() => void state.openRegion(region.id)}>{region.name}</button>
+          <button type="button" title={t('schoolCatalog.addRegion')} aria-label={t('schoolCatalog.addRegion')} className={`${holidayButtonClass} inline-flex shrink-0 items-center justify-center`} onClick={addRegion}><Plus size={18} /></button>
+          <button type="button" aria-label={`${t('common.delete')} ${region.name}`} className={holidayButtonClass} onClick={() => setRemove({ label: region.name, action: () => state.deleteRegion(region.id, region.revision) })}><Trash2 size={18} /></button>
+        </li>)}</ul>
+        {regions.length === 0 && <button type="button" className={`${holidayButtonClass} flex items-center gap-2`} onClick={addRegion}><Plus size={16} />{t('schoolCatalog.addRegion')}</button>}
+      </>}
+    </fieldset>
+    {state.editor && <SchoolHolidayRegionEditor key={state.editor.id} region={state.editor} busy={state.busy} offline={state.offline} error={state.offline ? t('schoolCatalog.offline') : state.error} onClose={() => state.setEditor(null)} onSave={body => { if (state.editor) void state.saveRegion(state.editor.country, state.editor.id, body) }} />}
+    <ConfirmDialog isOpen={Boolean(remove)} onClose={() => setRemove(null)} title={t('common.delete')} message={`${remove?.label || ''}. ${t('schoolCatalog.deleteHint')}`} onConfirm={() => { if (remove) void remove.action(); setRemove(null) }} />
+  </section>
+}

client/src/components/Admin/SchoolHolidayRegionEditor.tsx

@@ -0,0 +1,75 @@
+import { useId, useState } from 'react'
+import { Plus, Trash2 } from 'lucide-react'
+import { schoolHolidayRegionRequestSchema, type SchoolHolidayRegionDetail, type SchoolHolidayRegionRequest } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import Modal from '../shared/Modal'
+import ConfirmDialog from '../shared/ConfirmDialog'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+
+export const holidayInputClass = 'w-full rounded-lg border border-edge bg-surface-input px-3 py-2 text-body text-content'
+export const holidayButtonClass = 'rounded-lg border border-edge px-3 py-2 text-body font-medium text-content hover:bg-surface-hover disabled:opacity-50'
+
+export default function SchoolHolidayRegionEditor({ region, busy, offline = false, error, onClose, onSave }: {
+  region: SchoolHolidayRegionDetail
+  busy: boolean
+  offline?: boolean
+  error: string
+  onClose: () => void
+  onSave: (body: SchoolHolidayRegionRequest) => void
+}) {
+  const { t } = useTranslation()
+  const fieldId = useId()
+  const [name, setName] = useState(region.name)
+  const [holidays, setHolidays] = useState(region.holidays.map((holiday, index) => ({ ...holiday, key: index })))
+  const [nextKey, setNextKey] = useState(holidays.length)
+  const [discard, setDiscard] = useState(false)
+  const [invalid, setInvalid] = useState(false)
+  const body = { name, revision: region.revision, holidays: holidays.map(({ name, startDate, endDate }) => ({ name, startDate, endDate })) }
+  const dirty = name !== region.name || JSON.stringify(body.holidays) !== JSON.stringify(region.holidays)
+  const close = () => { if (!busy) { if (dirty) setDiscard(true); else onClose() } }
+
+  return <>
+    <Modal isOpen onClose={close} title={t('schoolCatalog.region')} size="xl">
+      <form className="space-y-4" onSubmit={event => {
+        event.preventDefault()
+        const parsed = schoolHolidayRegionRequestSchema.safeParse(body)
+        setInvalid(!parsed.success)
+        if (parsed.success) onSave(parsed.data)
+      }}>
+        <fieldset disabled={busy || offline} className="space-y-4">
+          <label className="block space-y-1 text-body"><span>{t('schoolCatalog.region')}</span>
+            <input autoFocus required maxLength={150} className={holidayInputClass} value={name} onChange={event => setName(event.target.value)} />
+          </label>
+          <p className="text-caption text-content-muted">{t('schoolCatalog.periodHint')}</p>
+          {holidays.map((holiday, index) => <div key={holiday.key} className="space-y-2 rounded-xl border border-edge p-3">
+            <div className="space-y-1 text-body">
+              <label htmlFor={`${fieldId}-holiday-${holiday.key}`}>{t('schoolCatalog.name')}</label>
+              <div className="flex items-stretch gap-2">
+                <input id={`${fieldId}-holiday-${holiday.key}`} required maxLength={150} className={`${holidayInputClass} min-w-0 flex-1`} value={holiday.name} onChange={event => setHolidays(rows => rows.map(row => row.key === holiday.key ? { ...row, name: event.target.value } : row))} />
+                <button type="button" className="flex shrink-0 items-center justify-center rounded-[10px] border border-edge px-[9px] text-content-faint transition-colors hover:border-[color:var(--text-faint)] hover:text-content disabled:opacity-50" aria-label={`${t('common.delete')} ${holiday.name || index + 1}`} onClick={() => setHolidays(rows => rows.filter(row => row.key !== holiday.key))}><Trash2 size={13} /></button>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              <div role="group" aria-label={t('schoolCatalog.start')} className="min-w-0 space-y-1 text-caption"><span>{t('schoolCatalog.start')}</span>
+                <CustomDatePicker key={String(busy || offline)} value={holiday.startDate} placeholder={t('schoolCatalog.start')} max={holiday.endDate || undefined} onChange={startDate => setHolidays(rows => rows.map(row => row.key === holiday.key ? { ...row, startDate } : row))} />
+              </div>
+              <div role="group" aria-label={t('schoolCatalog.end')} className="min-w-0 space-y-1 text-caption"><span>{t('schoolCatalog.end')}</span>
+                <CustomDatePicker key={String(busy || offline)} value={holiday.endDate} placeholder={t('schoolCatalog.end')} min={holiday.startDate || undefined} onChange={endDate => setHolidays(rows => rows.map(row => row.key === holiday.key ? { ...row, endDate } : row))} />
+              </div>
+            </div>
+          </div>)}
+          <button type="button" disabled={holidays.length >= 500} className={`${holidayButtonClass} flex items-center gap-2`} onClick={() => {
+            setHolidays(rows => [...rows, { key: nextKey, name: '', startDate: '', endDate: '' }]); setNextKey(key => key + 1)
+          }}><Plus size={16} />{t('schoolCatalog.addPeriod')}</button>
+          {invalid && <p role="alert" className="text-body text-danger">{t('schoolCatalog.invalid')}</p>}
+          {error && <p role="alert" className="text-body text-danger">{error}</p>}
+        </fieldset>
+          <div className="flex justify-end gap-2 border-t border-edge pt-4">
+            <button type="button" className={holidayButtonClass} onClick={close}>{t('common.cancel')}</button>
+            <button type="submit" disabled={busy || offline} aria-busy={busy} className="rounded-lg bg-accent px-4 py-2 text-body font-semibold text-accent-text disabled:opacity-50">{busy ? t('common.loading') : t('common.save')}</button>
+          </div>
+      </form>
+    </Modal>
+    <ConfirmDialog isOpen={discard} onClose={() => setDiscard(false)} onConfirm={onClose} title={t('common.cancel')} message={t('schoolCatalog.discard')} />
+  </>
+}

client/src/components/Admin/useSchoolHolidayCatalog.ts

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { SchoolHolidayCatalog, SchoolHolidayCountryRequest, SchoolHolidayRegionDetail, SchoolHolidayRegionRequest } from '@trek/shared'
+import { schoolHolidayCatalogRepo as catalogRepo } from '../../repo/schoolHolidayCatalogRepo'
+import { useTranslation } from '../../i18n'
+import { useNetworkMode } from '../../hooks/useNetworkMode'
+
+export function useSchoolHolidayCatalog() {
+  const { t } = useTranslation()
+  const { offline } = useNetworkMode()
+  const [catalog, setCatalog] = useState<SchoolHolidayCatalog>({ countries: [], regions: [] })
+  const [loading, setLoading] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [editor, setEditor] = useState<SchoolHolidayRegionDetail | null>(null)
+  const mounted = useRef(true)
+  const pending = useRef(false)
+  useEffect(() => { mounted.current = true; return () => { mounted.current = false } }, [])
+
+  const reload = useCallback(async () => {
+    catalogRepo.requireOnline()
+    const catalog = await catalogRepo.catalog()
+    if (mounted.current) setCatalog(catalog)
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    if (offline) { setLoading(false); return }
+    setLoading(true)
+    catalogRepo.catalog().then(catalog => {
+      if (!cancelled) { setCatalog(catalog); setError('') }
+    }).catch(() => { if (!cancelled) setError(t('common.error')) })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [offline, t])
+
+  async function run(action: () => Promise<unknown>, after?: () => void) {
+    if (pending.current) return false
+    pending.current = true
+    setBusy(true)
+    setError('')
+    try {
+      catalogRepo.requireOnline()
+      await action()
+      if (mounted.current) after?.()
+      try {
+        await reload()
+      } catch {
+        if (mounted.current) setError(t('schoolCatalog.refreshError'))
+      }
+      return true
+    } catch (failure) {
+      if (mounted.current) {
+        const message = failure instanceof Error ? failure.message : ''
+        const http = failure as { response?: { data?: { error?: string } } }
+        setError(http.response?.data?.error || message || t('common.error'))
+      }
+      return false
+    } finally {
+      pending.current = false
+      if (mounted.current) setBusy(false)
+    }
+  }
+
+  return {
+    catalog, loading, busy, error, offline, editor, setEditor,
+    refresh: () => run(async () => {}),
+    createCountry: (country: SchoolHolidayCountryRequest) => run(() => catalogRepo.createCountry(country)),
+    deleteCountry: (code: string) => run(() => catalogRepo.deleteCountry(code)),
+    openRegion: (id: number) => run(async () => {
+      const region = await catalogRepo.region(id)
+      if (mounted.current) setEditor(region)
+    }),
+    saveRegion: (country: string, id: number, body: SchoolHolidayRegionRequest) => run(
+      () => id ? catalogRepo.updateRegion(id, body) : catalogRepo.createRegion(country, body),
+      () => setEditor(null),
+    ),
+    deleteRegion: (id: number, revision: number) => run(() => catalogRepo.deleteRegion(id, revision)),
+  }
+}

client/src/components/Atlas/useGlassGlare.ts

@@ -0,0 +1,48 @@
+import { useRef, type RefObject } from 'react'
+
+export interface GlassGlare {
+  /** Goes on the panel itself — the glare is measured against its box. */
+  panelRef: RefObject<HTMLDivElement | null>
+  /** The soft light under the cursor. */
+  glareRef: RefObject<HTMLDivElement | null>
+  /** The lit stretch of border around it. */
+  borderGlareRef: RefObject<HTMLDivElement | null>
+  onMouseMove: (e: { clientX: number; clientY: number }) => void
+  onMouseLeave: () => void
+}
+
+/**
+ * The Atlas panels' liquid-glass hover: a pool of light under the cursor and the
+ * piece of border nearest to it lighting up.
+ *
+ * Extracted so a second panel beside the first one behaves identically. Two
+ * hand-copied versions of a gradient are two versions that drift, and the whole
+ * point of the effect is that the panels look like one material.
+ *
+ * Written straight to the DOM rather than through state: this runs on every
+ * mousemove, and a re-render per frame would cost more than the effect is worth.
+ */
+export function useGlassGlare(dark: boolean): GlassGlare {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const glareRef = useRef<HTMLDivElement>(null)
+  const borderGlareRef = useRef<HTMLDivElement>(null)
+
+  const onMouseMove = (e: { clientX: number; clientY: number }): void => {
+    if (!panelRef.current || !glareRef.current || !borderGlareRef.current) return
+    const rect = panelRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    glareRef.current.style.background = `radial-gradient(circle 300px at ${x}px ${y}px, ${dark ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.25)'} 0%, transparent 70%)`
+    glareRef.current.style.opacity = '1'
+    borderGlareRef.current.style.opacity = '1'
+    borderGlareRef.current.style.maskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+    borderGlareRef.current.style.webkitMaskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+  }
+
+  const onMouseLeave = (): void => {
+    if (glareRef.current) glareRef.current.style.opacity = '0'
+    if (borderGlareRef.current) borderGlareRef.current.style.opacity = '0'
+  }
+
+  return { panelRef, glareRef, borderGlareRef, onMouseMove, onMouseLeave }
+}

client/src/components/BackgroundTasks/BackgroundTasksWidget.extra.test.tsx

@@ -1,4 +1,4 @@
-// FE-W4BGT-001 to FE-W4BGT-022
+// FE-W4BGT-001 to FE-W4BGT-024
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { screen, act, waitFor } from '@testing-library/react'
 import { render, fireEvent } from '../../../tests/helpers/render'
@@ -276,3 +276,31 @@ describe('BackgroundTasksWidget — AI retry', () => {
     expect(await screen.findByText('No model configured')).toBeInTheDocument()
   })
 })
+
+/**
+ * The reporter's phone showed a green tick beside "No reservations could be
+ * extracted" and two warnings (#2477). A parse that found nothing is not a
+ * success, so it wears the warning mark; the tick stays for a parse that did.
+ */
+describe('BackgroundTasksWidget: the mark on a finished job (#2477)', () => {
+  it('FE-W4BGT-023: a job that found nothing shows the warning mark, not the success tick', () => {
+    useBackgroundTasksStore.setState({
+      tasks: [task({ items: [], warnings: ['Incomplete LodgingReservation in booking.pdf[0] (no reservationFor)'] })],
+    })
+    const { baseElement } = render(<BackgroundTasksWidget />)
+
+    expect(screen.getByText('No reservations could be extracted from the uploaded files.')).toBeInTheDocument()
+    expect(baseElement.querySelector('svg.lucide-alert-triangle')).toHaveAttribute('stroke', 'var(--warning)')
+    expect(baseElement.querySelector('svg.lucide-check-circle2')).toBeNull()
+    expect(baseElement.querySelector('.animate-spin')).toBeNull()
+  })
+
+  it('FE-W4BGT-024: a job with items keeps the success tick, even with warnings', () => {
+    useBackgroundTasksStore.setState({ tasks: [task({ items: [{ id: 1 }] as never, warnings: ['could not locate "X"'] })] })
+    const { baseElement } = render(<BackgroundTasksWidget />)
+
+    // The theme's own success colour, so it follows light and dark.
+    expect(baseElement.querySelector('svg.lucide-check-circle2')).toHaveAttribute('stroke', 'var(--success)')
+    expect(baseElement.querySelector('svg.lucide-alert-triangle')).toBeNull()
+  })
+})

client/src/components/BackgroundTasks/BackgroundTasksWidget.tsx

@@ -1,7 +1,7 @@
 import { createPortal } from 'react-dom'
 import { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router'
-import { Loader2, CheckCircle2, AlertCircle, X } from 'lucide-react'
+import { Loader2, CheckCircle2, AlertCircle, AlertTriangle, X } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { addListener, removeListener } from '../../api/websocket'
 import { reservationsApi, healthApi } from '../../api/client'
@@ -141,8 +141,12 @@ export default function BackgroundTasksWidget() {
         >
           <div style={{ flexShrink: 0, marginTop: 1 }}>
             {(task.status === 'running' || (task.status === 'done' && task.items === undefined)) && <Loader2 size={16} className="animate-spin" color="var(--accent)" />}
-            {task.status === 'done' && task.items !== undefined && <CheckCircle2 size={16} color="#10b981" />}
-            {task.status === 'error' && <AlertCircle size={16} color="#ef4444" />}
+            {task.status === 'done' && task.items !== undefined && task.items.length > 0 && <CheckCircle2 size={16} color="var(--success)" />}
+            {/* A parse that found nothing is not a success, whatever the job
+                status says: the same card used to show a green tick next to
+                "no reservations could be extracted" (#2477). */}
+            {task.status === 'done' && task.items?.length === 0 && <AlertTriangle size={16} color="var(--warning)" />}
+            {task.status === 'error' && <AlertCircle size={16} color="var(--danger)" />}
           </div>
 
           <div style={{ flex: 1, minWidth: 0 }}>

client/src/components/Budget/CostsPanel.helpers.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { calculateTicketShares, hasTicketSplit, payerSum, payersBalanced, readTicketItems, readUserNote, rebalancePayers, splitCents, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
+import { calculateTicketShares, finalBudgetFor, finalBudgetSources, hasTicketSplit, paidByUser, payerSum, payersBalanced, readTicketItems, readUserNote, rebalancePayers, settlementDate, splitCents, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
 
 describe('splitCents', () => {
   it('splits evenly when it divides cleanly', () => {
@@ -188,6 +188,21 @@ describe('readUserNote', () => {
   })
 })
 
+describe('settlementDate', () => {
+  it('prefers settled_at over created_at', () => {
+    expect(settlementDate({ settled_at: '2026-07-05', created_at: '2026-07-01T09:00:00Z' })).toBe('2026-07-05')
+  })
+
+  it('falls back to the day it was recorded when settled_at is unset', () => {
+    expect(settlementDate({ created_at: '2026-07-01T09:00:00Z' })).toBe('2026-07-01')
+    expect(settlementDate({ settled_at: null, created_at: '2026-07-01T09:00:00Z' })).toBe('2026-07-01')
+  })
+
+  it('is empty when neither is set', () => {
+    expect(settlementDate({})).toBe('')
+  })
+})
+
 // ── Receipt splits have to reconcile (#1382) ─────────────────────────────────
 
 describe('calculateTicketShares', () => {
@@ -231,3 +246,67 @@ describe('calculateTicketShares', () => {
     expect(calculateTicketShares([])).toEqual({ shares: {}, total: 0 })
   })
 })
+
+describe('paidByUser', () => {
+  it('adds up what one participant fronted and ignores the other payers', () => {
+    const item = { payers: [{ user_id: 1, amount: 30 }, { user_id: 2, amount: 70 }, { user_id: 1, amount: 5 }] }
+    expect(paidByUser(item, 1)).toBe(35)
+    expect(paidByUser(item, 2)).toBe(70)
+    expect(paidByUser(item, 3)).toBe(0)
+  })
+
+  it('is zero for an expense with no payer list', () => {
+    expect(paidByUser({ payers: null }, 1)).toBe(0)
+    expect(paidByUser({}, 1)).toBe(0)
+  })
+})
+
+describe('finalBudgetFor', () => {
+  const finals = [{
+    user_id: 1, username: 'alice', avatar_url: null, expenses: 100, reimbursed: 50, pending: 0, final: 50,
+    sources: { fronted: [{ item_id: 1, cents: 10000 }], moved: [], outstanding: [] },
+  }]
+
+  it("returns the server's row for a participant in the ledger", () => {
+    expect(finalBudgetFor(finals, { id: 1, username: 'alice' })).toBe(finals[0])
+  })
+
+  it('reads a participant the ledger left out as costing nothing, with nothing behind it', () => {
+    expect(finalBudgetFor(finals, { id: 2, username: 'bob' })).toEqual({
+      user_id: 2, username: 'bob', avatar_url: null, expenses: 0, reimbursed: 0, pending: 0, final: 0,
+      sources: { fronted: [], moved: [], outstanding: [] },
+    })
+  })
+})
+
+describe('finalBudgetSources', () => {
+  const items = [{ id: 1, name: 'Dinner' }, { id: 2, name: 'Taxi' }]
+  const sources = {
+    fronted: [{ item_id: 1, cents: 6000 }, { item_id: 3, cents: -1000 }],
+    moved: [
+      { settlement_id: 1, from_user_id: 2, to_user_id: 1, cents: 1500 },
+      { settlement_id: 2, from_user_id: 1, to_user_id: 3, cents: -500 },
+    ],
+    outstanding: [{ from_user_id: 3, to_user_id: 1, cents: 501 }],
+  }
+
+  it("names the expenses and prints the server's cents as amounts, a refund's negative row included", () => {
+    const { fronted } = finalBudgetSources({ sources }, items)
+    // An expense the list does not know yet keeps its row; only the name is missing.
+    expect(fronted).toEqual([{ item_id: 1, name: 'Dinner', amount: 60 }, { item_id: 3, name: '?', amount: -10 }])
+  })
+
+  it('keeps the transfers and open flows signed as the server sent them', () => {
+    const { moved, outstanding } = finalBudgetSources({ sources }, items)
+    expect(moved).toEqual([
+      { settlement_id: 1, from_user_id: 2, to_user_id: 1, amount: 15 },
+      { settlement_id: 2, from_user_id: 1, to_user_id: 3, amount: -5 },
+    ])
+    expect(outstanding).toEqual([{ from_user_id: 3, to_user_id: 1, amount: 5.01 }])
+  })
+
+  it('is empty for a participant with no activity', () => {
+    expect(finalBudgetSources({ sources: { fronted: [], moved: [], outstanding: [] } }, items))
+      .toEqual({ fronted: [], moved: [], outstanding: [] })
+  })
+})

client/src/components/Budget/CostsPanel.helpers.ts

@@ -11,6 +11,7 @@
  * Amounts are the raw input strings, parsed on use (same as customAmounts).
  */
 
+import type { BudgetParticipantFinal } from '@trek/shared'
 import { currencyDecimals } from '../../utils/formatters'
 
 // The split and receipt fields guard their own precision on every keystroke, so the
@@ -34,6 +35,67 @@ export function splitCents(amount: number, n: number): number[] {
   return Array.from({ length: n }, (_, i) => (base + (i < rem ? 1 : 0)) / 100)
 }
 
+/**
+ * The calendar day a settle-up payment counts on for grouping/filtering: its own
+ * `settled_at` if the user set one, else the day it was recorded (`created_at`).
+ * Mirrors `expense_date` falling back nowhere on a budget item — a settlement's
+ * `created_at` doubled as its date before `settled_at` existed, so this keeps
+ * every pre-existing row grouped exactly where it already was.
+ */
+export function settlementDate(s: { settled_at?: string | null; created_at?: string | null }): string {
+  return (s.settled_at || s.created_at || '').slice(0, 10)
+}
+
+/**
+ * What one participant fronted for an expense, in the expense's own currency.
+ *
+ * Several payers can share one bill, and the same person can appear only once,
+ * but the reduce covers a row that somehow carries them twice rather than
+ * picking one of the two. The caller converts the result — this file never
+ * touches exchange rates.
+ */
+export function paidByUser(
+  item: { payers?: { user_id: number; amount: number }[] | null },
+  userId: number,
+): number {
+  return (item.payers || []).filter(p => p.user_id === userId).reduce((a, p) => a + p.amount, 0)
+}
+
+/** The figures a final budget is made of, for someone the server left out of the ledger. */
+export function finalBudgetFor(finals: BudgetParticipantFinal[], member: { id: number; username: string }): BudgetParticipantFinal {
+  // Absent means they neither fronted anything nor were split into an expense:
+  // the trip has cost them nothing, which is worth a row of its own.
+  return finals.find(f => f.user_id === member.id) || {
+    user_id: member.id, username: member.username, avatar_url: null,
+    expenses: 0, reimbursed: 0, pending: 0, final: 0,
+    sources: { fronted: [], moved: [], outstanding: [] },
+  }
+}
+
+/**
+ * The rows behind one traveler's final budget, ready to print. They arrive as
+ * ids and display cents: the server spreads each of the three figures over its
+ * rows with the same largest-remainder split the figure came from, so every list
+ * adds up to the line it sits under, in whatever currency was asked for and
+ * whether or not the live rates have loaded yet. Only the expense names are
+ * looked up here; who "you" is in a transfer is the shell's call.
+ */
+export function finalBudgetSources(
+  row: Pick<BudgetParticipantFinal, 'sources'>,
+  items: { id: number; name: string }[],
+): {
+  fronted: { item_id: number; name: string; amount: number }[]
+  moved: { settlement_id: number; from_user_id: number; to_user_id: number; amount: number }[]
+  outstanding: { from_user_id: number; to_user_id: number; amount: number }[]
+} {
+  const { fronted, moved, outstanding } = row.sources
+  return {
+    fronted: fronted.map(r => ({ item_id: r.item_id, name: items.find(i => i.id === r.item_id)?.name ?? '?', amount: r.cents / 100 })),
+    moved: moved.map(r => ({ settlement_id: r.settlement_id, from_user_id: r.from_user_id, to_user_id: r.to_user_id, amount: r.cents / 100 })),
+    outstanding: outstanding.map(r => ({ from_user_id: r.from_user_id, to_user_id: r.to_user_id, amount: r.cents / 100 })),
+  }
+}
+
 /** Sum the amounts of the selected payers. */
 export function payerSum(amounts: Record<number, string>, ids: Set<number>): number {
   return [...ids].reduce((a, id) => a + (Number.parseFloat(amounts[id]) || 0), 0)

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

@@ -11,15 +11,20 @@ import { usePermissionsStore } from '../../store/permissionsStore'
 import { clearExchangeRateCache } from '../../hooks/useExchangeRates'
 import { resetAllStores, seedStore } from '../../../tests/helpers/store'
 import { buildUser, buildTrip, buildBudgetItem, buildSettings } from '../../../tests/helpers/factories'
+import type { BudgetParticipantFinal } from '@trek/shared'
 import type { BudgetItem } from '../../types'
 import CostsPanel, { ExpenseModal } from './CostsPanel'
 import { splitEqualShares, calculateTicketShares, type TicketItem } from './CostsPanel.helpers'
+import { resetFreezeAttempts } from './useFreezeMissingRates'
 
 const tripMembers = [
   { id: 1, username: 'alice', avatar_url: null },
   { id: 2, username: 'bob', avatar_url: null },
 ]
 
+/** Bob's buttons in the expense form — his final-budget row in the sidebar answers to his name too. */
+const bobInForm = () => screen.getAllByRole('button', { name: /bob/i }).filter(b => !b.hasAttribute('aria-expanded'))
+
 beforeEach(() => {
   resetAllStores()
   seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true })
@@ -610,7 +615,7 @@ describe('CostsPanel — settlements in the ledger', () => {
 
     await user.type(itemNames[1], 'chocolate cake')
     await user.type(itemPrices[2], '50')
-    const bobButtons = screen.getAllByRole('button', { name: /bob/i })
+    const bobButtons = bobInForm()
     await user.click(bobButtons[1])
 
     await user.type(itemNames[2], 'Milk')
@@ -740,7 +745,7 @@ describe('CostsPanel — settlements in the ledger', () => {
 
 type Flow = { from: { user_id: number; username: string }; to: { user_id: number; username: string }; amount: number }
 type Balance = { user_id: number; username: string; avatar_url: string | null; balance: number }
-type Payment = { id: number; from_user_id: number; to_user_id: number; amount: number; currency?: string | null; created_at?: string }
+type Payment = { id: number; from_user_id: number; to_user_id: number; amount: number; currency?: string | null; exchange_rate?: number; created_at?: string; settled_at?: string | null }
 
 // `members` here is the wire shape the panel reads; `paid` is only set by the server.
 type MemberFixture = { user_id: number; username?: string; amount?: number; paid?: number }
@@ -749,7 +754,7 @@ const expense = (over: Partial<Omit<BudgetItem, 'members'>> & { members?: Member
 
 function mount(
   items: BudgetItem[],
-  settlement: { balances?: Balance[]; flows?: Flow[]; settlements?: Payment[] } = {},
+  settlement: { balances?: Balance[]; flows?: Flow[]; settlements?: Payment[]; finalBudgets?: BudgetParticipantFinal[] } = {},
   entries?: string[],
 ) {
   server.use(
@@ -826,8 +831,71 @@ describe('CostsPanel — overview', () => {
     mount([], { balances: [{ user_id: 1, username: 'alice', avatar_url: null, balance: 0 }] })
 
     // Both travellers appear; neither has a signed amount.
-    await screen.findByText('Balances')
-    expect(screen.getAllByText('0,00 €')).toHaveLength(2)
+    const balances = (await screen.findByText('Balances')).parentElement as HTMLElement
+    expect(within(balances).getAllByText('0,00 €')).toHaveLength(2)
+  })
+
+  it('FE-W5COSTS-004b: the final budget gives one amount per traveler and its arithmetic on click', async () => {
+    // Dinner is 100 USD fronted by Alice, booked by the server at the rate frozen
+    // on entry as 92 €; taxi 30 € by Bob; both split evenly, so the trip costs each
+    // of them 61. Bob has sent 15 of the 31 he owed, 16 is still open. No live rate
+    // is loaded here, so a client converting the dinner itself would print 100 €.
+    const user = userEvent.setup()
+    mount([{ ...dinner(), currency: 'USD', total_price: 100, payers: [{ user_id: 1, amount: 100 }] }, taxi()], {
+      balances: [
+        { user_id: 1, username: 'alice', avatar_url: null, balance: 16 },
+        { user_id: 2, username: 'bob', avatar_url: null, balance: -16 },
+      ],
+      flows: [{ from: { user_id: 2, username: 'bob' }, to: { user_id: 1, username: 'alice' }, amount: 16 }],
+      settlements: [{ id: 9, from_user_id: 2, to_user_id: 1, amount: 15, currency: 'EUR', created_at: '2025-06-17 10:00:00' }],
+      finalBudgets: [
+        {
+          user_id: 1, username: 'alice', avatar_url: null, expenses: 92, reimbursed: 15, pending: 16, final: 61,
+          sources: {
+            fronted: [{ item_id: 101, cents: 9200 }],
+            moved: [{ settlement_id: 9, from_user_id: 2, to_user_id: 1, cents: 1500 }],
+            outstanding: [{ from_user_id: 2, to_user_id: 1, cents: 1600 }],
+          },
+        },
+        {
+          user_id: 2, username: 'bob', avatar_url: null, expenses: 30, reimbursed: -15, pending: -16, final: 61,
+          sources: {
+            fronted: [{ item_id: 102, cents: 3000 }],
+            moved: [{ settlement_id: 9, from_user_id: 2, to_user_id: 1, cents: -1500 }],
+            outstanding: [{ from_user_id: 2, to_user_id: 1, cents: -1600 }],
+          },
+        },
+      ],
+    })
+
+    const card = (await screen.findByText('Final budget')).parentElement as HTMLElement
+    await waitFor(() => expect(within(card).getAllByText('61,00 €')).toHaveLength(2))
+    // The main view stays one figure per person until someone asks for more.
+    expect(within(card).queryByText('Expenses paid')).toBeNull()
+
+    const alice = within(card).getByRole('button', { name: /You/ })
+    await user.click(alice)
+    expect(alice).toHaveAttribute('aria-expanded', 'true')
+    // The dinner is the server's 92 €, once as the line and once as its only row; the
+    // 100 USD is never converted again here. What was entered labels the row (#2525).
+    expect(within(card).getAllByText('+92,00 €')).toHaveLength(2)
+    expect(within(card).queryByText(/100,00/)).toBeNull()
+    expect(within(card).getByText('· $100.00')).toBeInTheDocument()
+    // Received and still pending both lower her cost, each line with its one row.
+    expect(within(card).getAllByText('−15,00 €')).toHaveLength(2)
+    expect(within(card).getAllByText('−16,00 €')).toHaveLength(2)
+    expect(within(card).getByText('Dinner')).toBeInTheDocument()
+    expect(within(card).queryByText('Taxi')).toBeNull()
+    expect(within(card).getAllByText(/^bob → /)).toHaveLength(2)
+
+    // Opening Bob closes Alice: what he sent back and what he still owes raise his.
+    await user.click(within(card).getByRole('button', { name: /bob/ }))
+    expect(alice).toHaveAttribute('aria-expanded', 'false')
+    expect(within(card).getAllByText('+30,00 €')).toHaveLength(2)
+    expect(within(card).getAllByText('+15,00 €')).toHaveLength(2)
+    expect(within(card).getAllByText('+16,00 €')).toHaveLength(2)
+    expect(within(card).getByText('Taxi')).toBeInTheDocument()
+    expect(within(card).queryByText('Dinner')).toBeNull()
   })
 
   it('FE-W5COSTS-005: the category breakdown ranks categories by spend', async () => {
@@ -980,8 +1048,8 @@ describe('CostsPanel — settle up', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await screen.findByText('Balances')
-    // Settle up and Balances both hang off the one failed request.
-    await waitFor(() => expect(screen.getAllByText('Unknown error')).toHaveLength(2))
+    // Settle up, Balances and Final budget all hang off the one failed request.
+    await waitFor(() => expect(screen.getAllByText('Unknown error')).toHaveLength(3))
     expect(screen.queryByText("Everyone's square")).toBeNull()
   })
 
@@ -1051,6 +1119,21 @@ describe('CostsPanel — filtering the ledger', () => {
     expect(screen.queryByText('Payment')).not.toBeInTheDocument()
   })
 
+  it('FE-W5COSTS-076: a payment groups by its own settled day, not the day it was recorded', async () => {
+    // Recorded (created_at) on the 16th, but settled on the 15th — the ledger
+    // must follow settled_at, the same way it already follows expense_date over
+    // an expense's own created_at.
+    mount([dinner(), taxi()], { settlements: [{ ...payment, settled_at: '2025-06-15' }] })
+
+    await screen.findByText('Taxi')
+    fireEvent.click(screen.getByRole('button', { name: /All days/ }))
+    pickOption('Sun, Jun 15')
+
+    expect(screen.getByText('Dinner')).toBeInTheDocument()
+    expect(screen.queryByText('Taxi')).not.toBeInTheDocument()
+    expect(screen.getByText('Payment')).toBeInTheDocument()
+  })
+
   it('FE-W5COSTS-018: expenses without a date are grouped under "No date"', async () => {
     mount([expense({ id: 120, name: 'Souvenirs', category: 'shopping', total_price: 12, expense_date: null })])
 
@@ -1104,6 +1187,26 @@ describe('CostsPanel — expense rows', () => {
     expect(screen.getByText(/\$20\.00 → 10,00 €/)).toBeInTheDocument()
   })
 
+  it('FE-W5COSTS-078: a booked rate outlives the live one, for the expense and for the transfer', async () => {
+    // What a tester hit after settling up: the euro moved, and so did a bill that had
+    // already been paid. A cost is money that changed hands at a rate that was true that
+    // day, so the frozen rate wins over whatever the market says this morning.
+    localStorage.setItem('trek_fx_EUR', JSON.stringify({ rates: { EUR: 1, USD: 2 }, ts: Date.now() }))
+    mount([expense({
+      id: 131, name: 'Diner', category: 'food', total_price: 120, currency: 'USD', exchange_rate: 1.2,
+      expense_date: '2025-06-15',
+      payers: [{ user_id: 1, amount: 120 }],
+      members: [{ user_id: 1, username: 'alice' }, { user_id: 2, username: 'bob' }],
+    })], { settlements: [{ id: 9, from_user_id: 2, to_user_id: 1, amount: 24, currency: 'USD', exchange_rate: 1.2, created_at: '2025-06-15 09:00:00' }] })
+
+    await screen.findByText('Diner')
+    // 120 USD at the booked 1.2 per euro is 100 euro. At today's 2 it would read 60,00 euro.
+    expect(screen.getByText(/\$120\.00 → 100,00 €/)).toBeInTheDocument()
+    expect(screen.queryByText(/60,00 €/)).toBeNull()
+    // The settled transfer is read back the same way: 24 USD booked at 1.2 is 20 euro.
+    expect(screen.getByText(/\$24\.00 → 20,00 €/)).toBeInTheDocument()
+  })
+
   it('FE-W5COSTS-022: deleting an expense removes it, and a failure is reported', async () => {
     const addToast = vi.fn()
     window.__addToast = addToast as unknown as typeof window.__addToast
@@ -1252,6 +1355,62 @@ describe('CostsPanel — payment modal', () => {
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Unknown error', 'error', undefined))
     delete window.__addToast
   })
+
+  it('FE-W5COSTS-074: a new payment defaults its day to today, by the local calendar', async () => {
+    vi.useFakeTimers({ toFake: ['Date'] })
+    const behindUtc = new Date(2026, 7, 12).getTimezoneOffset() > 0
+    vi.setSystemTime(new Date(2026, 7, 12, behindUtc ? 23 : 1, 30, 0))
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+    let posted: Record<string, unknown> | null = null
+    server.use(http.post('/api/trips/1/budget/settlements', async ({ request }) => {
+      posted = await request.json() as Record<string, unknown>
+      return HttpResponse.json({ settlement: { id: 9 } })
+    }))
+    mount([])
+
+    try {
+      await user.click(await screen.findByRole('button', { name: 'Add payment' }))
+      await user.type(await screen.findByPlaceholderText('0.00'), '10')
+      const submits = screen.getAllByRole('button', { name: 'Add payment' })
+      await user.click(submits[submits.length - 1])
+
+      await waitFor(() => expect(posted).toBeTruthy())
+      expect(posted!.settled_at).toBe('2026-08-12')
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('FE-W5COSTS-075: editing a payment keeps its own settled day, not the day it was recorded', async () => {
+    const user = userEvent.setup()
+    let put: Record<string, unknown> | null = null
+    server.use(http.put('/api/trips/1/budget/settlements/7', async ({ request }) => {
+      put = await request.json() as Record<string, unknown>
+      return HttpResponse.json({ settlement: { id: 7 } })
+    }))
+    mount([], { settlements: [{ id: 7, from_user_id: 2, to_user_id: 1, amount: 30, settled_at: '2025-06-10', created_at: '2025-06-16 10:00:00' }] })
+
+    await user.click(await screen.findByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => expect(put).toBeTruthy())
+    expect(put!.settled_at).toBe('2025-06-10')
+  })
+
+  it('FE-W5COSTS-077: a payment cannot be saved without a day', async () => {
+    // Cleared, the server would store NULL and the ledger would quietly move
+    // the payment back to the day it was recorded on.
+    const user = userEvent.setup()
+    mount([], { settlements: [{ id: 7, from_user_id: 2, to_user_id: 1, amount: 30, settled_at: '2025-06-10', created_at: '2025-06-16 10:00:00' }] })
+
+    await user.click(await screen.findByTitle('Edit'))
+    const save = screen.getByRole('button', { name: 'Save' })
+    expect(save).toBeEnabled()
+
+    await user.click(document.querySelector('button[aria-haspopup="dialog"]') as HTMLElement)
+    await user.click(screen.getByRole('button', { name: 'Clear date' }))
+    expect(save).toBeDisabled()
+  })
 })
 
 describe('CostsPanel — expense modal', () => {
@@ -1289,7 +1448,7 @@ describe('CostsPanel — expense modal', () => {
     const rows = screen.getAllByPlaceholderText('Item name')
     await user.click(rows[1].parentElement!.parentElement!.querySelectorAll('button')[0])
     expect(screen.queryByDisplayValue('Cake')).not.toBeInTheDocument()
-    await user.click(screen.getAllByRole('button', { name: /bob/i })[0])
+    await user.click(bobInForm()[0])
 
     await user.click(screen.getByRole('button', { name: 'Save' }))
     await waitFor(() => expect(put).toBeTruthy())
@@ -1330,7 +1489,8 @@ describe('CostsPanel — expense modal', () => {
     expect(screen.getByDisplayValue('30,00')).toBeInTheDocument()
 
     // Excluding Bob drops his amount; the split no longer matches the total.
-    await user.click(screen.getByRole('button', { name: /bob/i }))
+    expect(bobInForm()).toHaveLength(1)
+    await user.click(bobInForm()[0])
     expect(screen.getByText(/Sum of splits/)).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
 
@@ -2135,3 +2295,390 @@ describe('CostsPanel — expense modal in another language', () => {
     expect(screen.queryByText('Excluded')).not.toBeInTheDocument()
   })
 })
+
+// ── #2525: a bill entered in the display currency on a trip kept in another ───
+describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
+  // The reporter's setup: a euro trip, read in dollars, with the bill entered in
+  // dollars. It was booked at 1.17 dollars to the euro, 685.26 EUR, and that is what
+  // the balances and settle-up net. Today the euro buys 1.1551 dollars, so those
+  // euros are $791.55. The dollar's own quote is rounded separately (0.865706 per
+  // dollar is 1.155126 per euro), which is why the panel converts with the euro's.
+  beforeEach(() => {
+    seedAlice()
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'USD' } })
+    clearExchangeRateCache()
+    localStorage.setItem('trek_fx_USD', JSON.stringify({ rates: { USD: 1, EUR: 0.865706 }, ts: Date.now() }))
+    localStorage.setItem('trek_fx_EUR', JSON.stringify({ rates: { EUR: 1, USD: 1.1551, SEK: 10 }, ts: Date.now() }))
+  })
+  afterEach(clearExchangeRateCache)
+
+  const hotel = (over: Partial<BudgetItem> = {}) => expense({
+    id: 401, name: 'Aparthotel Silver', category: 'accommodation', total_price: 801.76, currency: 'USD', exchange_rate: 1.17,
+    expense_date: '2026-08-06',
+    payers: [{ user_id: 1, amount: 801.76 }],
+    members: [{ user_id: 1, username: 'alice' }, { user_id: 2, username: 'bob' }],
+    ...over,
+  })
+
+  it('FE-W5COSTS-079: a bill whose rate moved shows what was entered and what it was booked at', async () => {
+    mount([hotel()])
+
+    await screen.findByText('Aparthotel Silver')
+    // The entered amount was nowhere on the row, so $791.57 read as a wrong copy of
+    // the 801.76 in the dialog. The pill beside the line is the last step.
+    expect(screen.getByText(/^\$801\.76 → 685,26\s€$/)).toBeInTheDocument()
+    // Row total and payer chip stay the booked euros at today's rate, and so does what
+    // I lent: half of 685.26 EUR, the figure settle-up offers. Printing $400.88 here
+    // had Bob pay back more than he owed and reopened the trip.
+    expect(screen.getAllByText('$791.55')).toHaveLength(2)
+    expect(screen.getByText('you lent $395.77')).toBeInTheDocument()
+    expect(screen.queryByText('you lent $400.88')).toBeNull()
+  })
+
+  it('FE-W5COSTS-087: a bill booked at today\'s rate reads exactly as typed everywhere on the page', async () => {
+    mount([
+      hotel({ id: 407, name: 'Villa', total_price: 12345.67, exchange_rate: 1.1551, payers: [{ user_id: 1, amount: 12345.67 }] }),
+      hotel({ id: 408, name: 'Unpaid deposit', total_price: 250, exchange_rate: 1.1551, payers: [], members: [] }),
+    ])
+
+    await screen.findByText('Villa')
+    // Pill and payer chip; converting back with the dollar's own quote gave $12,346.05.
+    expect(screen.getAllByText('$12,345.67')).toHaveLength(2)
+    expect(screen.queryByText(/12,346\.0[56]/)).toBeNull()
+    expect(screen.getByText('$12,595.67 spent')).toBeInTheDocument()
+    const total = screen.getByText('Total trip spend').parentElement!.parentElement!.parentElement!
+    expect(total.textContent).toContain('$12,595.67')
+    const outstanding = screen.getByText('Outstanding amount').parentElement!.parentElement!.parentElement!
+    expect(outstanding.textContent).toContain('$250.00')
+    // Nothing to explain under either row.
+    expect(screen.queryByText(/^\$12,345\.67 →/)).toBeNull()
+    expect(screen.queryByText(/^\$250\.00 →/)).toBeNull()
+  })
+
+  it('FE-W5COSTS-088: the CSV export adds the trip-currency amount every sum is built from', async () => {
+    let exported: Blob | null = null
+    const createObjURL = vi.spyOn(URL, 'createObjectURL').mockImplementation(b => { exported = b as Blob; return 'blob:mock' })
+    const revokeObjURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    try {
+      mount([hotel()])
+      await screen.findByText('Aparthotel Silver')
+      fireEvent.click(screen.getByTitle('Export CSV'))
+      await waitFor(() => expect(exported).toBeTruthy())
+      const lines = (await exported!.text()).replace(/^\uFEFF/, '').split('\r\n')
+      expect(lines[0]).toBe('Date;Name;Category;Amount;Currency;Amount (EUR);Amount (USD);Note')
+      expect(lines[1]).toMatch(/;801\.76;USD;685\.26;791\.55;$/)
+    } finally {
+      createObjURL.mockRestore(); revokeObjURL.mockRestore(); clickSpy.mockRestore()
+    }
+  })
+
+  it('FE-W5COSTS-080: the totals add up the figures the rows show', async () => {
+    mount([
+      hotel(),
+      hotel({ id: 402, name: 'Dinner', category: 'food', total_price: 120, payers: [{ user_id: 2, amount: 120 }] }),
+    ])
+
+    await screen.findByText('Aparthotel Silver')
+    // 120 USD at 1.17 is 102.56 EUR, $118.47 today; with the hotel's $791.55 that is
+    // $910.02, on the day header and on the total spend card.
+    expect(screen.getByText(/^\$120\.00 → 102,56\s€$/)).toBeInTheDocument()
+    expect(screen.getByText('$910.02 spent')).toBeInTheDocument()
+    // Label, its text block, the header row, then the card itself.
+    const card = screen.getByText('Total trip spend').parentElement!.parentElement!.parentElement!
+    expect(card.textContent).toContain('$910.02')
+  })
+
+  it('FE-W5COSTS-084: the totals follow the rates when they arrive after the expenses', async () => {
+    // Nothing cached: the rates land after the expenses and the settlement, and the
+    // totals used to keep the figure they were first added up with.
+    clearExchangeRateCache()
+    server.use(http.get('https://api.frankfurter.dev/v2/rates', async () => {
+      await new Promise(r => setTimeout(r, 150))
+      return HttpResponse.json([{ quote: 'EUR', rate: 0.8 }])
+    }))
+    mount([hotel({ id: 406, name: 'Museum', category: 'activities', total_price: 100, currency: 'EUR', exchange_rate: 1, payers: [{ user_id: 1, amount: 100 }] })])
+
+    // 100 euro at 0.8 euro to the dollar.
+    expect(await screen.findByText(/100,00\s€ → \$125\.00/)).toBeInTheDocument()
+    const card = screen.getByText('Total trip spend').parentElement!.parentElement!.parentElement!
+    await waitFor(() => expect(card.textContent).toContain('$125.00'))
+  })
+
+  it('FE-W5COSTS-081: a euro row converts live, a third currency shows the euros it was booked at', async () => {
+    mount([
+      hotel({ id: 403, name: 'Museum', category: 'activities', total_price: 100, currency: 'EUR', exchange_rate: 1, payers: [{ user_id: 1, amount: 100 }] }),
+      hotel({ id: 404, name: 'Ferry', category: 'transport', total_price: 1000, currency: 'SEK', exchange_rate: 10, payers: [{ user_id: 1, amount: 1000 }] }),
+      // Written before the freeze existed: nothing was booked, so dollars stay dollars.
+      hotel({ id: 405, name: 'Old taxi', category: 'transport', total_price: 50, currency: 'USD', exchange_rate: 1, payers: [{ user_id: 1, amount: 50 }] }),
+    ])
+
+    await screen.findByText('Museum')
+    // The trip currency has no frozen rate of its own and goes to dollars live.
+    expect(screen.getByText(/^100,00\s€ → \$115\.51$/)).toBeInTheDocument()
+    // 1000 SEK at 10 per euro is 100 euro, then live to dollars in the pill.
+    expect(screen.getByText(/^1\s000,00\skr → 100,00\s€$/)).toBeInTheDocument()
+    expect(screen.getAllByText('$50.00').length).toBeGreaterThanOrEqual(2)
+    expect(screen.queryByText(/^\$50\.00 →/)).toBeNull()
+  })
+
+  it('FE-W5COSTS-082: a payment recorded in dollars is booked like an expense, a legacy one stays as entered', async () => {
+    mount([hotel()], {
+      settlements: [
+        { id: 21, from_user_id: 2, to_user_id: 1, amount: 400.88, currency: 'USD', exchange_rate: 1.17, created_at: '2026-08-07 09:00:00' },
+        // Rows from before transfers had a currency were entered in the display
+        // currency, which is how the server settles them.
+        { id: 22, from_user_id: 2, to_user_id: 1, amount: 30, currency: null, created_at: '2026-08-08 09:00:00' },
+      ],
+    })
+
+    await screen.findByText('Aparthotel Silver')
+    expect(screen.getByText(/\$400\.88 → 342,63\s€$/)).toBeInTheDocument()
+    expect(screen.getByText('$395.77')).toBeInTheDocument()
+    expect(screen.getByText('$30.00')).toBeInTheDocument()
+    expect(screen.queryByText('$34.65')).toBeNull()
+  })
+
+  it('FE-W5COSTS-085: the edit dialog previews the rate the save keeps, the one the row was booked at', async () => {
+    const user = userEvent.setup()
+    mount([hotel()])
+
+    await screen.findByText('Aparthotel Silver')
+    await user.click(screen.getByTitle('Edit'))
+    expect(await screen.findByDisplayValue('801.76')).toBeInTheDocument()
+    // Same currency as the list, so the dialog said nothing, and 801.76 there beside
+    // $791.57 in the list looked like two different expenses.
+    const hint = screen.getByText(/live rate/).parentElement as HTMLElement
+    expect(within(hint).getByText('$801.76')).toBeInTheDocument()
+    expect(within(hint).getByText(/^685,26\s€$/)).toBeInTheDocument()
+    expect(within(hint).getByText('$791.55')).toBeInTheDocument()
+    // Each share next to what it counts as, the figure the row's "you lent" is made of.
+    expect(screen.getByText(/Split 2 ways · \$400\.88 → \$395\.77 each/)).toBeInTheDocument()
+  })
+
+  it('FE-W5COSTS-086: the final budget names the bill by what was entered beside its booked figure', async () => {
+    const user = userEvent.setup()
+    mount([hotel()], {
+      balances: [
+        { user_id: 1, username: 'alice', avatar_url: null, balance: 395.78 },
+        { user_id: 2, username: 'bob', avatar_url: null, balance: -395.78 },
+      ],
+      flows: [{ from: { user_id: 2, username: 'bob' }, to: { user_id: 1, username: 'alice' }, amount: 395.78 }],
+      finalBudgets: [
+        {
+          user_id: 1, username: 'alice', avatar_url: null, expenses: 791.55, reimbursed: 0, pending: 395.78, final: 395.77,
+          sources: { fronted: [{ item_id: 401, cents: 79155 }], moved: [], outstanding: [{ from_user_id: 2, to_user_id: 1, cents: 39578 }] },
+        },
+      ],
+    })
+
+    const card = (await screen.findByText('Final budget')).parentElement as HTMLElement
+    await user.click(await within(card).findByRole('button', { name: /You/ }))
+    expect(within(card).getAllByText('+$791.55')).toHaveLength(2)
+    expect(within(card).getByText('Aparthotel Silver')).toBeInTheDocument()
+    expect(within(card).getByText('· $801.76')).toBeInTheDocument()
+  })
+
+  it('FE-W5COSTS-089: the final budget lists a bill that reads as typed without a second amount', async () => {
+    const user = userEvent.setup()
+    mount([hotel({ exchange_rate: 1.1551 })], {
+      balances: [
+        { user_id: 1, username: 'alice', avatar_url: null, balance: 400.88 },
+        { user_id: 2, username: 'bob', avatar_url: null, balance: -400.88 },
+      ],
+      flows: [{ from: { user_id: 2, username: 'bob' }, to: { user_id: 1, username: 'alice' }, amount: 400.88 }],
+      finalBudgets: [
+        {
+          user_id: 1, username: 'alice', avatar_url: null, expenses: 801.76, reimbursed: 0, pending: 400.88, final: 400.88,
+          sources: { fronted: [{ item_id: 401, cents: 80176 }], moved: [], outstanding: [{ from_user_id: 2, to_user_id: 1, cents: 40088 }] },
+        },
+      ],
+    })
+
+    const card = (await screen.findByText('Final budget')).parentElement as HTMLElement
+    await user.click(await within(card).findByRole('button', { name: /You/ }))
+    expect(within(card).getAllByText('+$801.76')).toHaveLength(2)
+    expect(within(card).queryByText('· $801.76')).toBeNull()
+  })
+
+  it('FE-W5COSTS-083: an expense saved without a currency opens in the trip currency, not the display one', async () => {
+    const user = userEvent.setup()
+    let put: Record<string, unknown> | null = null
+    server.use(http.put('/api/trips/1/budget/405', async ({ request }) => {
+      put = await request.json() as Record<string, unknown>
+      return HttpResponse.json({ item: hotel({ id: 405, currency: 'EUR' }) })
+    }))
+    mount([hotel({ id: 405, name: 'Tram pass', category: 'transport', total_price: 100, currency: null, exchange_rate: 1, payers: [{ user_id: 1, amount: 100 }] })])
+
+    await screen.findByText('Tram pass')
+    // The list reads the missing currency as the trip's own.
+    expect(screen.getByText(/100,00\s€ → \$115\.51/)).toBeInTheDocument()
+
+    await user.click(screen.getByTitle('Edit'))
+    expect(await screen.findByDisplayValue('100,00')).toBeInTheDocument()
+    // Seeding the display currency here would label 100 euro as 100 dollars, and a
+    // plain save would then store it that way.
+    expect(screen.getByText(/^EUR/)).toBeInTheDocument()
+    expect(screen.queryByText(/^USD/)).toBeNull()
+
+    // Saving without touching anything keeps the 100 euro.
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(put).toMatchObject({ total_price: 100, currency: 'EUR' }))
+  })
+})
+
+// ── A bill the server cannot convert: VND on an AUD trip ────────────────────────
+describe('CostsPanel: a bill the server cannot convert', () => {
+  // The reporter's setup: an AUD trip whose server cannot fetch rates while the browser
+  // can. An 8,920,000 VND dinner that never froze a rate was counted as 8,920,000 AUD.
+  // The settlement now leaves it out and lists it, and an editor's browser lends its AUD
+  // table to freeze a rate on it.
+  const pho = () => expense({
+    id: 501, name: 'Pho', category: 'food', total_price: 8920000, currency: 'VND', exchange_rate: 1,
+    expense_date: '2026-09-20',
+    payers: [{ user_id: 1, amount: 8920000 }],
+    members: [{ user_id: 1, username: 'alice' }, { user_id: 2, username: 'bob' }],
+  })
+  const leftOut = { balances: [], flows: [], settlements: [], currency: 'AUD', unconverted: { item_ids: [501], settlement_ids: [], currencies: ['VND'] } }
+
+  beforeEach(() => {
+    seedAlice()
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'AUD' } })
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'AUD' }) })
+    clearExchangeRateCache()
+    resetFreezeAttempts()
+    localStorage.setItem('trek_fx_AUD', JSON.stringify({ rates: { AUD: 1, VND: 18241.3, EUR: 0.61 }, ts: Date.now() }))
+  })
+  afterEach(clearExchangeRateCache)
+
+  it('FE-W5COSTS-090: VND/AUD regression: an editor heals the bill with the cached quote and the healed balances load', async () => {
+    let healed = false
+    const frozen: unknown[] = []
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [pho()] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json(healed
+        ? {
+            // 8,920,000 VND at 18,241.3 is 489.00 AUD, half of it Bob's.
+            balances: [
+              { user_id: 1, username: 'alice', avatar_url: null, balance: 244.5 },
+              { user_id: 2, username: 'bob', avatar_url: null, balance: -244.5 },
+            ],
+            flows: [{ from: { user_id: 2, username: 'bob' }, to: { user_id: 1, username: 'alice' }, amount: 244.5 }],
+            settlements: [],
+            currency: 'AUD',
+            unconverted: { item_ids: [], settlement_ids: [], currencies: [] },
+          }
+        : leftOut)),
+      http.post('/api/trips/1/budget/freeze-rates', async ({ request }) => {
+        frozen.push(await request.json())
+        healed = true
+        return HttpResponse.json({ items: [{ ...pho(), exchange_rate: 18241.3 }], settlements: [], unresolved: [] })
+      }),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    // Only the currency the settlement is missing, at the rate the browser holds.
+    await waitFor(() => expect(frozen).toEqual([{ fallback_fx: { base: 'AUD', rates: { VND: 18241.3 } } }]))
+    // The settlement is read again and Bob's half can be settled.
+    expect(await screen.findByRole('button', { name: 'Settle' })).toBeInTheDocument()
+    expect(screen.getAllByText(/244\.50/).length).toBeGreaterThan(0)
+    // Nothing on the page counts the bill as 8,920,000 dollars any more.
+    expect(screen.queryByText(/\$8,920,000/)).toBeNull()
+    expect(frozen).toHaveLength(1)
+  })
+
+  it('FE-W5COSTS-091: a viewer\'s browser never freezes anything', async () => {
+    seedStore(usePermissionsStore, { permissions: { budget_edit: 'admin' } })
+    let frozen = 0
+    server.use(http.post('/api/trips/1/budget/freeze-rates', () => {
+      frozen += 1
+      return HttpResponse.json({ items: [], settlements: [], unresolved: [] })
+    }))
+    mount([pho()], leftOut)
+
+    await screen.findByText('Pho')
+    await new Promise(r => setTimeout(r, 50))
+    expect(frozen).toBe(0)
+  })
+
+  it('FE-W5COSTS-092: settle-up in the display currency lends its rate and asks the settlement in it', async () => {
+    // Read in euros: the browser has the AUD table, the server has no quote at all.
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    const asked: { base: string | null; baseRate: string | null }[] = []
+    const posted: Record<string, unknown>[] = []
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', ({ request }) => {
+        const url = new URL(request.url)
+        asked.push({ base: url.searchParams.get('base'), baseRate: url.searchParams.get('base_rate') })
+        return HttpResponse.json({
+          balances: [], settlements: [], currency: 'EUR', unconverted: { item_ids: [], settlement_ids: [], currencies: [] },
+          flows: [{ from: { user_id: 2, username: 'bob' }, to: { user_id: 1, username: 'alice' }, amount: 20 }],
+        })
+      }),
+      http.post('/api/trips/1/budget/settlements', async ({ request }) => {
+        posted.push(await request.json() as Record<string, unknown>)
+        return HttpResponse.json({ settlement: { id: 1 } })
+      }),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Settle' }))
+    await waitFor(() => expect(posted).toHaveLength(1))
+    // The transfer freezes at the rate the settlement was labelled with, so it cancels its
+    // flow to the cent.
+    expect(posted[0]).toMatchObject({ from_user_id: 2, to_user_id: 1, amount: 20, currency: 'EUR', fallback_fx: { base: 'AUD', rates: { EUR: 0.61 } } })
+    expect(asked.length).toBeGreaterThan(0)
+    expect(asked.every(a => a.base === 'EUR' && a.baseRate === '0.61')).toBe(true)
+
+    const settleAll = screen.getByRole('button', { name: 'Settle up' })
+    fireEvent.click(settleAll)
+    await waitFor(() => expect(posted).toHaveLength(2))
+    expect(posted[1]).toMatchObject({ amount: 20, currency: 'EUR', fallback_fx: { base: 'AUD', rates: { EUR: 0.61 } } })
+  })
+
+  it('FE-W5COSTS-093: a payment added by hand lends the rate for its currency too', async () => {
+    const user = userEvent.setup()
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    let posted: Record<string, unknown> | null = null
+    server.use(http.post('/api/trips/1/budget/settlements', async ({ request }) => {
+      posted = await request.json() as Record<string, unknown>
+      return HttpResponse.json({ settlement: { id: 1 } })
+    }))
+    mount([])
+
+    await user.click(await screen.findByRole('button', { name: 'Add payment' }))
+    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    const submits = screen.getAllByRole('button', { name: 'Add payment' })
+    await user.click(submits[submits.length - 1])
+
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted).toMatchObject({ amount: 25, currency: 'EUR', fallback_fx: { base: 'AUD', rates: { EUR: 0.61 } } })
+  })
+
+  it('FE-W5COSTS-094: a display rate the settlement query would refuse is not sent', async () => {
+    // A trip in gold read in rials: 2.6 billion rials to the ounce is past the 1e9 the query
+    // takes, and sent as `base_rate` it would fail the whole settlement with a 400.
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'XAU' }) })
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'IRR' } })
+    localStorage.setItem('trek_fx_XAU', JSON.stringify({ rates: { XAU: 1, IRR: 2.6e9 }, ts: Date.now() }))
+    localStorage.setItem('trek_fx_IRR', JSON.stringify({ rates: { IRR: 1, XAU: 1 / 2.6e9 }, ts: Date.now() }))
+    const asked: { base: string | null; baseRate: string | null }[] = []
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', ({ request }) => {
+        const url = new URL(request.url)
+        asked.push({ base: url.searchParams.get('base'), baseRate: url.searchParams.get('base_rate') })
+        return HttpResponse.json({
+          balances: [], flows: [], settlements: [], currency: 'XAU', unconverted: { item_ids: [], settlement_ids: [], currencies: [] },
+        })
+      }),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await waitFor(() => expect(asked.length).toBeGreaterThan(0))
+    // Still asked in rials, only without the figure; the server answers in the trip
+    // currency when it has no quote of its own.
+    expect(asked.every(a => a.base === 'IRR' && a.baseRate === null)).toBe(true)
+  })
+})

client/src/components/Budget/CostsPanel.tsx

@@ -9,7 +9,9 @@ import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { budgetApi } from '../../api/client'
 import { saveWithReceipts } from './receiptUploads'
-import { useExchangeRates } from '../../hooks/useExchangeRates'
+import { convertBooked, convertedLine, tripAmountOf, useExchangeRates, withFallbackFx } from '../../hooks/useExchangeRates'
+import { splitShareLabel, useExpenseFx } from './expenseFx'
+import { useFreezeMissingRates } from './useFreezeMissingRates'
 import { useIsMobile } from '../../hooks/useIsMobile'
 import { formatMoney, currencyDecimals, currencyLocale, localizeAmountInput, amountToInputString } from '../../utils/formatters'
 import { downloadBlob, openFile } from '../../utils/fileDownload'
@@ -18,9 +20,10 @@ import CustomSelect from '../shared/CustomSelect'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import { localToday } from '../Planner/today'
 import { SYMBOLS, currenciesWith, SPLIT_COLORS } from './BudgetPanel.constants'
-import { amountPattern, calculateTicketShares, hasTicketSplit, NOTE_MAX, payersBalanced, readTicketItems, readUserNote, rebalancePayers, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
+import { amountPattern, calculateTicketShares, finalBudgetFor, finalBudgetSources, hasTicketSplit, NOTE_MAX, paidByUser, payersBalanced, readTicketItems, readUserNote, rebalancePayers, settlementDate, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
 import { COST_CATEGORY_LIST, catMeta } from './costsCategories'
 import { ReceiptPreviewModal } from './ReceiptPreviewModal'
+import type { BudgetParticipantFinal, BudgetUnconverted } from '@trek/shared'
 import type { BudgetItem, BudgetItemReceipt } from '../../types'
 import type { TripMember } from './BudgetPanelMemberChips'
 import GuestBadge from '../shared/GuestBadge'
@@ -40,7 +43,14 @@ interface Settlement {
   // The currency the transfer was entered in. Legacy rows predate it (null) and are
   // read as the display currency, which is what the server assumes for them too.
   currency?: string | null
+  // The rate frozen when the transfer was settled, in units of `currency` per 1 trip
+  // currency (#1445). Absent, or exactly 1, on rows written before the freeze existed.
+  exchange_rate?: number
   created_at?: string
+  // The day the transfer actually happened; editable, unlike created_at (when it
+  // was recorded). Null/absent on rows predating this field — settlementDate()
+  // falls back to created_at for those.
+  settled_at?: string | null
   from_username?: string
   to_username?: string
 }
@@ -48,6 +58,14 @@ interface SettlementData {
   balances: { user_id: number; username: string; avatar_url: string | null; balance: number }[]
   flows: { from: { user_id: number; username: string }; to: { user_id: number; username: string }; amount: number }[]
   settlements: Settlement[]
+  // What the trip ends up costing each participant. Computed server-side off the
+  // same ledger as the balances, so the breakdown can't contradict them.
+  finalBudgets: BudgetParticipantFinal[]
+  // The currency the figures are in: the display currency, or the trip's own when
+  // neither the server nor `base_rate` could quote the pair.
+  currency?: string
+  // Rows no rate could convert, left out of every figure above.
+  unconverted?: BudgetUnconverted
 }
 
 // One row in the unified Costs ledger — either an expense or a settle-up payment,
@@ -74,7 +92,8 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   const base = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
   // Pre-rework rows stored currency = NULL, meaning "the trip's own currency".
   const tripCurrency = (trip?.currency || base).toUpperCase()
-  const { convert } = useExchangeRates(base)
+  // Anchored on the trip currency's quote, the one the server books with (#2525).
+  const { convert, displayPerTrip } = useExchangeRates(base, tripCurrency)
   const curOf = useCallback((e: BudgetItem) => (e.currency || tripCurrency), [tripCurrency])
   const [settlement, setSettlement] = useState<SettlementData | null>(null)
   // A failed settlement read leaves `settlement` null, which the empty views would
@@ -90,6 +109,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   // One note open at a time: two expanded rows next to each other read as a mess,
   // and the point of the collapse is that the list stays scannable.
   const [expandedNoteId, setExpandedNoteId] = useState<number | null>(null)
+  // One open final-budget breakdown at a time, for the same reason a single note
+  // is expanded at a time: the card is a sidebar, not a report.
+  const [expandedFinalId, setExpandedFinalId] = useState<number | null>(null)
   const [editingSettlement, setEditingSettlement] = useState<Settlement | null>(null)
   const [addingPayment, setAddingPayment] = useState(false)
 
@@ -105,14 +127,20 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   const fmt = useCallback((v: number, c = base) => formatMoney(v, c, locale), [base, locale])
   const fmt0 = useCallback((v: number, c = base) => formatMoney(v, c, locale, { decimals: 0 }), [base, locale])
 
+  // The browser's own figure for the display currency goes along, for the server to
+  // answer in it when it cannot fetch a quote itself.
   const loadSettlement = useCallback(() => {
-    budgetApi.settlement(tripId, base)
+    budgetApi.settlement(tripId, base, base !== tripCurrency ? displayPerTrip : null)
       .then(s => { setSettlement(s); setSettlementError(false) })
       .catch(() => setSettlementError(true))
-  }, [tripId, base])
+  }, [tripId, base, tripCurrency, displayPerTrip])
 
   useEffect(() => { loadBudgetItems(tripId); loadSettlement() }, [tripId])
-  useEffect(() => { loadSettlement() }, [budgetItems.length, base])
+  useEffect(() => { loadSettlement() }, [budgetItems.length, loadSettlement])
+
+  // Rows the server could not count get a rate frozen from the browser's, and the
+  // settlement is read again once they count.
+  useFreezeMissingRates({ tripId, tripCurrency, canEdit, unconverted: settlement?.unconverted, onHealed: loadSettlement })
 
   // The bottom-nav "+" on the Costs tab opens the add-expense modal via ?create=expense.
   const [searchParams, setSearchParams] = useSearchParams()
@@ -124,8 +152,24 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   }, [searchParams])
 
   // ── derived expense maths (everything converted to the base currency) ────
-  const baseTotal = (e: BudgetItem) => convert(e.total_price || 0, curOf(e))
-  const myPaidOf = (e: BudgetItem) => (e.payers || []).filter(p => p.user_id === me).reduce((a, p) => a + convert(p.amount, curOf(e)), 0)
+  // Booked, not live: an expense entered in a foreign currency keeps the rate it was
+  // entered at, which is the same rule the server settles by (#1335).
+  const booked = useCallback(
+    (amount: number, e: BudgetItem) => convertBooked(amount, e.currency, e.exchange_rate, tripCurrency, convert),
+    [convert, tripCurrency],
+  )
+  const baseTotal = (e: BudgetItem) => booked(e.total_price || 0, e)
+  // A transfer freezes its own rate at settle time, in its own table (#1445). One
+  // without a currency predates that and was entered in the display currency, which
+  // is how the server settles it too, not in the trip's.
+  const settled = useCallback(
+    (s: Settlement) => convertBooked(s.amount, s.currency || base, s.exchange_rate, tripCurrency, convert),
+    [convert, tripCurrency, base],
+  )
+  const myPaidOf = (e: BudgetItem) => booked(paidByUser(e, me), e)
+  // The line under an amount shown converted: what was entered, then where it went (#2525).
+  const lineOf = (amount: number, e: BudgetItem, shown: number) =>
+    convertedLine(amount, e.currency, e.exchange_rate, tripCurrency, base, shown)
   // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
   // total but stays out of settlements until who-paid is filled in. A negative
   // total (a refund, #2176) is just as unfinished until its recipient is named.
@@ -137,13 +181,15 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const myMember = (e.members || []).find(m => m.user_id === me)
     if (!myMember) return 0
     if (myMember.amount !== null && myMember.amount !== undefined) {
-      return convert(myMember.amount, curOf(e))
+      return booked(myMember.amount, e)
     }
     const shares = splitEqualShares(e.total_price || 0, e.members || [], e.id)
     const myShare = shares[me] || 0
-    return convert(myShare, curOf(e))
+    return booked(myShare, e)
   }
 
+  // `booked` carries the rates. They can land after the expenses, and without it in the
+  // deps the cards kept the sums they were first added up with while the rows moved on.
   const totals = useMemo(() => {
     const totalSpend = budgetItems.reduce((a, e) => a + baseTotal(e), 0)
     const myPaid = budgetItems.reduce((a, e) => a + myPaidOf(e), 0)
@@ -153,7 +199,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const outstanding = budgetItems.reduce((a, e) => (isUnfinished(e) ? a + baseTotal(e) : a), 0)
     const outstandingCount = budgetItems.filter(isUnfinished).length
     return { totalSpend, myPaid, myShare, owe, owed, outstanding, outstandingCount }
-  }, [budgetItems, settlement, me])
+  }, [budgetItems, settlement, me, booked])
 
   // ── filtering + day grouping ────────────────────────────────────────────
   const filtered = useMemo(() => {
@@ -167,7 +213,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const q = search.trim().toLowerCase()
     if (q) list = list.filter(e => e.name.toLowerCase().includes(q))
     return list
-  }, [budgetItems, filter, search, catFilter, dayFilter, me])
+  }, [budgetItems, filter, search, catFilter, dayFilter, me, booked])
 
   // 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,
@@ -178,14 +224,14 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     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)
-    if (dayFilter) list = list.filter(s => (s.created_at || '').slice(0, 10) === dayFilter)
+    if (dayFilter) list = list.filter(s => settlementDate(s) === dayFilter)
     return list
   }, [settlement, filter, search, catFilter, dayFilter, me])
 
   const dayGroups = useMemo(() => {
     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 })),
+      ...filteredSettlements.map(s => ({ kind: 'payment' as const, date: settlementDate(s), s })),
     ]
     const labelOf = (date: string) => {
       if (!date) return t('costs.noDate')
@@ -220,7 +266,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   // ── settle actions ──────────────────────────────────────────────────────
   const settleFlow = async (fromId: number, toId: number, amount: number) => {
     try {
-      await budgetApi.createSettlement(tripId, { from_user_id: fromId, to_user_id: toId, amount, currency: base })
+      await budgetApi.createSettlement(tripId, withFallbackFx({ from_user_id: fromId, to_user_id: toId, amount, currency: base }, tripCurrency))
       loadSettlement()
     } catch { toast.error(t('common.unknownError')) }
   }
@@ -231,7 +277,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const flows = settlement?.flows || []
     if (!flows.length) return
     try {
-      for (const f of flows) await budgetApi.createSettlement(tripId, { from_user_id: f.from.user_id, to_user_id: f.to.user_id, amount: f.amount, currency: base })
+      for (const f of flows) await budgetApi.createSettlement(tripId, withFallbackFx({ from_user_id: f.from.user_id, to_user_id: f.to.user_id, amount: f.amount, currency: base }, tripCurrency))
     } catch { toast.error(t('common.unknownError')) }
     // Refresh even when one transfer failed: the ones created before it are real,
     // and leaving them in the flow list invites a second, doubled settle-up.
@@ -265,15 +311,20 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     }
     const fmtDate = (iso: string) => { if (!iso) return ''; try { return new Date(iso + 'T00:00:00Z').toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: 'UTC' }) } catch { return iso } }
 
-    const header = ['Date', 'Name', 'Category', 'Amount', 'Currency', 'Amount (' + base + ')', 'Note']
+    // Read in another currency than the trip's, what each row counts as in the trip
+    // currency too, the figure every sum is built from (#2525).
+    const tripCol = tripCurrency !== base
+    const header = ['Date', 'Name', 'Category', 'Amount', 'Currency', ...(tripCol ? ['Amount (' + tripCurrency + ')'] : []), 'Amount (' + base + ')', 'Note']
     const rows = [header.join(sep)]
     const items = budgetItems.slice().sort((a, b) => (a.expense_date || '').localeCompare(b.expense_date || ''))
     for (const e of items) {
       const cur = curOf(e)
       const note = readUserNote(e)
+      const inTrip = tripAmountOf(e.total_price || 0, e.currency, e.exchange_rate, tripCurrency, convert)
       rows.push([
         esc(fmtDate(e.expense_date || '')), esc(e.name), esc(t(catMeta(e.category).labelKey)),
         (e.total_price || 0).toFixed(currencyDecimals(cur)), cur,
+        ...(tripCol ? [inTrip.toFixed(currencyDecimals(tripCurrency))] : []),
         baseTotal(e).toFixed(currencyDecimals(base)),
         esc(note),
       ].join(sep))
@@ -474,6 +525,12 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
             {BalancesList({ balances: settlement?.balances || [] })}
           </div>
 
+          {/* final budget */}
+          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
+            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.finalBudget')}</div>
+            {FinalBudgetList()}
+          </div>
+
           {/* by category */}
           <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
             <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
@@ -490,7 +547,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       )}
 
       {(editingSettlement || addingPayment) && (
-        <SettlementModal tripId={tripId} people={people} me={me} editing={editingSettlement} currency={base}
+        <SettlementModal tripId={tripId} people={people} me={me} editing={editingSettlement} currency={base} tripCurrency={tripCurrency}
           onClose={() => { setEditingSettlement(null); setAddingPayment(false) }}
           onSaved={() => { setEditingSettlement(null); setAddingPayment(false); loadSettlement() }} />
       )}
@@ -694,6 +751,12 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           {BalancesList({ balances: settlement?.balances || [] })}
         </div>
 
+        {/* Final budget */}
+        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+          <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.finalBudget')}</div>
+          {FinalBudgetList()}
+        </div>
+
         {/* By category */}
         <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
           <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
@@ -731,7 +794,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   function ExpenseRow({ e }: { e: BudgetItem }) {
     const c = catMeta(e.category)
     const Icon = c.Icon
-    const cur = curOf(e)
+    const line = lineOf(e.total_price || 0, e, baseTotal(e))
     const payers = (e.payers || []).filter(p => p.amount !== 0)
     const net = round2(myPaidOf(e) - myShareOf(e))
     const unfinished = isUnfinished(e)
@@ -800,9 +863,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
               </button>
             )}
           </div>
-          {cur !== base && (
+          {line && (
             <div className="text-content-faint" style={{ marginTop: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-              {fmt(e.total_price, cur)} {'→'} {fmt(baseTotal(e))}
+              {fmt(line.entered.amount, line.entered.currency)} {'→'} {fmt(line.into.amount, line.into.currency)}
             </div>
           )}
           {/* Under the name, because a chip reading "Y 122,00" says nothing on
@@ -812,7 +875,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
               {payers.map(p => (
                 <span key={p.user_id} className="bg-surface-secondary border border-edge" title={personName(p.user_id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px 3px 3px', borderRadius: 999, fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))' }}>
                   <Avatar id={p.user_id} size={18} />
-                  <span className="text-content" style={{ fontWeight: 700 }}>{fmt(convert(p.amount, cur))}</span>
+                  <span className="text-content" style={{ fontWeight: 700 }}>{fmt(booked(p.amount, e))}</span>
                 </span>
               ))}
             </div>
@@ -857,6 +920,8 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   function SettlementRow({ s }: { s: Settlement }) {
     // Legacy transfers carry no currency and were entered in the display base.
     const cur = (s.currency || base).toUpperCase()
+    // Booked in the trip currency like an expense, so it is explained the same way.
+    const line = convertedLine(s.amount, cur, s.exchange_rate, tripCurrency, base, settled(s))
     return (
       <div style={{ display: 'flex', alignItems: 'stretch', gap: 8 }}>
       <div className="bg-surface-card border border-edge exp-row" style={{ flex: 1, minWidth: 0, display: 'grid', gridTemplateColumns: isMobile ? '46px 1fr auto' : '46px minmax(200px, 1fr) minmax(0, 1.5fr) auto', gap: isMobile ? 16 : 18, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
@@ -864,7 +929,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
         <div style={{ minWidth: 0 }}>
           <div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, marginBottom: 6 }}>
             {t('costs.payment')}
-            {cur !== base && <span className="text-content-faint" style={{ fontWeight: 400, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}> · {fmt(s.amount, cur)} → {fmt(convert(s.amount, cur))}</span>}
+            {line && <span className="text-content-faint" style={{ fontWeight: 400, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}> · {fmt(line.entered.amount, line.entered.currency)} → {fmt(line.into.amount, line.into.currency)}</span>}
           </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} />
@@ -875,7 +940,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
             on the same axis as every expense above it. */}
         {!isMobile && <span />}
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
-          <span className="bg-surface-secondary border border-edge text-content" style={{ display: 'inline-flex', alignItems: 'center', padding: '6px 13px', borderRadius: 999, fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{fmt(convert(s.amount, cur))}</span>
+          <span className="bg-surface-secondary border border-edge text-content" style={{ display: 'inline-flex', alignItems: 'center', padding: '6px 13px', borderRadius: 999, fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{fmt(settled(s))}</span>
         </div>
       </div>
       {canEdit && (
@@ -918,6 +983,124 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     )
   }
 
+  /**
+   * What the trip actually costs each traveler — one amount per person, with the
+   * arithmetic behind it a click away.
+   *
+   * The four figures come from the settlement response, not from a second pass
+   * over the expenses here: the server nets them in the same integer cents as
+   * the balances, so `expenses − reimbursed − pending` always lands on the total
+   * printed beside the name. The lists under the breakdown are the rows those
+   * figures came from, which is what makes an unexpected total explainable.
+   */
+  function FinalBudgetList() {
+    if (settlementError) return loadFailed()
+    const finals = settlement?.finalBudgets || []
+    const rows = people.map(p => finalBudgetFor(finals, p))
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {rows.map(r => {
+          const open = expandedFinalId === r.user_id
+          return (
+            <div key={r.user_id}>
+              <button type="button" onClick={() => setExpandedFinalId(open ? null : r.user_id)} aria-expanded={open}
+                className="text-content"
+                style={{ display: 'grid', gridTemplateColumns: '28px 1fr auto 14px', gap: 10, alignItems: 'center', width: '100%', padding: '7px 0', background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' }}>
+                <Avatar id={r.user_id} size={28} />
+                <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{personName(r.user_id)}</span>
+                <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 700 }}>{fmt(r.final)}</span>
+                <ChevronDown size={14} className="text-content-faint" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
+              </button>
+              {open && FinalBudgetBreakdown({ row: r })}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  /** The three lines behind one traveler's final budget, and the rows they add up from. */
+  function FinalBudgetBreakdown({ row }: { row: BudgetParticipantFinal }) {
+    // Each line is signed by what it does to the final, so the column reads as the
+    // subtraction it is: a reimbursement this traveler *sent* raises their cost and
+    // shows as a plus, which "received: −50" could never say. The rows under a line
+    // carry the same sign, so they visibly add up to it. Their amounts are the
+    // server's display cents, not a conversion of the expense list done here.
+    const signed = (v: number) => (v < 0 ? '−' : '+') + fmt(Math.abs(v))
+    const { fronted, moved, outstanding } = finalBudgetSources(row, budgetItems)
+    // Beside a converted row's name, what was entered, so the breakdown names the bill
+    // the way the list above it does rather than by a figure nobody typed.
+    const enteredOf = (itemId: number, shown: number) => {
+      const e = budgetItems.find(i => i.id === itemId)
+      const line = e ? lineOf(paidByUser(e, row.user_id), e, shown) : null
+      return line ? fmt(line.entered.amount, line.entered.currency) : null
+    }
+    const lineCls = { display: 'flex', alignItems: 'baseline', gap: 10, fontSize: 'calc(12px * var(--fs-scale-body, 1))' } as const
+    const detail = (label: string, value: string) => (
+      <div style={lineCls}>
+        <span className="text-content-muted" style={{ minWidth: 0, flex: 1 }}>{label}</span>
+        <span className="text-content" style={{ fontWeight: 600, whiteSpace: 'nowrap' }}>{value}</span>
+      </div>
+    )
+    const transferLabel = (fromId: number, toId: number) => `${personName(fromId)} → ${toId === me ? t('costs.youLower') : personName(toId)}`
+    // Capped and scrollable: a long trip's expense list would otherwise push the
+    // rest of the sidebar off the screen every time a name is tapped.
+    const listCls = { display: 'flex', flexDirection: 'column', gap: 5, marginTop: 6, maxHeight: 180, overflowY: 'auto' } as const
+    return (
+      <div className="bg-surface-secondary" style={{ borderRadius: 12, padding: '11px 12px', margin: '2px 0 8px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {detail(t('costs.finalExpenses'), signed(row.expenses))}
+          {detail(t('costs.finalReimbursed'), signed(-row.reimbursed))}
+          {detail(t('costs.finalPending'), signed(-row.pending))}
+        </div>
+        {fronted.length > 0 && (
+          <div>
+            <div className={labelCls}>{t('costs.finalExpenses')}</div>
+            <div style={listCls}>
+              {fronted.map(r => {
+                const entered = enteredOf(r.item_id, r.amount)
+                return (
+                  <div key={r.item_id} style={lineCls}>
+                    <span className="text-content-muted" style={{ minWidth: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      {r.name}{entered && <span className="text-content-faint"> · {entered}</span>}
+                    </span>
+                    <span className="text-content" style={{ whiteSpace: 'nowrap' }}>{signed(r.amount)}</span>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+        {moved.length > 0 && (
+          <div>
+            <div className={labelCls}>{t('costs.finalReimbursed')}</div>
+            <div style={listCls}>
+              {moved.map(r => (
+                <div key={r.settlement_id} style={lineCls}>
+                  <span className="text-content-muted" style={{ minWidth: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{transferLabel(r.from_user_id, r.to_user_id)}</span>
+                  <span className="text-content" style={{ whiteSpace: 'nowrap' }}>{signed(-r.amount)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {outstanding.length > 0 && (
+          <div>
+            <div className={labelCls}>{t('costs.finalPending')}</div>
+            <div style={listCls}>
+              {outstanding.map((r, i) => (
+                <div key={i} style={lineCls}>
+                  <span className="text-content-muted" style={{ minWidth: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{transferLabel(r.from_user_id, r.to_user_id)}</span>
+                  <span className="text-content" style={{ whiteSpace: 'nowrap' }}>{signed(-r.amount)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
   function CategoryBreakdown() {
     // Categories net refunds against spend (#2176): a negative entry lowers its
     // category's sum, and a category that nets negative keeps its own row —
@@ -1002,8 +1185,8 @@ function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; A
 // A transfer can be made in any currency — paying a rouble debt in euros is normal —
 // so it carries its own, defaulting to the display currency. The server freezes its
 // FX rate on write, the same way an expense's is frozen.
-function SettlementModal({ tripId, people, me, editing, currency, onClose, onSaved }: {
-  tripId: number; people: TripMember[]; me: number; editing: Settlement | null; currency: string; onClose: () => void; onSaved: () => void
+function SettlementModal({ tripId, people, me, editing, currency, tripCurrency, onClose, onSaved }: {
+  tripId: number; people: TripMember[]; me: number; editing: Settlement | null; currency: string; tripCurrency: string; onClose: () => void; onSaved: () => void
 }) {
   const { t } = useTranslation()
   const toast = useToast()
@@ -1014,16 +1197,17 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
   // "4.90" and not "4.9" (#2175) — and a JPY transfer gets no fake decimals.
   const [amount, setAmount] = useState<string>(editing ? amountToInputString(editing.amount, (editing.currency || currency).toUpperCase()) : '')
   const [cur, setCur] = useState<string>((editing?.currency || currency).toUpperCase())
+  const [day, setDay] = useState(editing ? settlementDate(editing) : localToday())
   const [saving, setSaving] = useState(false)
 
   const amt = Number.parseFloat(amount) || 0
-  const valid = amt > 0 && fromId !== toId
+  const valid = amt > 0 && fromId !== toId && !!day
   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, currency: cur }
+    const data = withFallbackFx({ from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency: cur, settled_at: day }, tripCurrency)
     try {
       if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
       else await budgetApi.createSettlement(tripId, data)
@@ -1067,6 +1251,10 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
               style={{ width: '100%' }} />
           </div>
         </div>
+        <div>
+          <label className={labelCls}>{t('costs.day')}</label>
+          <CustomDatePicker value={day} onChange={setDay} style={{ width: '100%' }} />
+        </div>
       </div>
     </Modal>
   )
@@ -1089,12 +1277,13 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
   const toast = useToast()
   const isMobile = useIsMobile()
   const { addBudgetItem, updateBudgetItem } = useTripStore()
-  const { convert } = useExchangeRates(base)
   const sym = (c: string) => SYMBOLS[c] || (c + ' ')
+  // A saved expense without a currency opens in the trip's own (#2525).
+  const { tripCurrency: tripCur, editingCurrency, preview } = useExpenseFx(base, editing)
 
   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 [currency, setCurrency] = useState(editingCurrency)
   const [day, setDay] = useState(editing?.expense_date || localToday())
   const [note, setNote] = useState(() => readUserNote(editing))
   // Edit and prefill seeds are padded to the currency's decimals (#2175): the DB
@@ -1102,7 +1291,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
   // 5,00 as "5". A prefill has no currency of its own — it is read as `base`,
   // which is also what the currency field starts on.
   const [total, setTotal] = useState<string>(() => {
-    if (editing) return editing.total_price ? amountToInputString(editing.total_price, (editing.currency || base).toUpperCase()) : ''
+    if (editing) return editing.total_price ? amountToInputString(editing.total_price, editingCurrency) : ''
     if (prefill?.amount != null) return amountToInputString(prefill.amount, base)
     return ''
   })
@@ -1186,6 +1375,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
   }, [ticketItems])
 
   const totalNum = isTicketMode ? ticketInfo.total : (Number.parseFloat(total) || 0)
+  const fx = preview(totalNum, currency)
   const splitSum = [...participants].reduce((sum, id) => sum + (Number.parseFloat(customAmounts[id]) || 0), 0)
   const customBalanced = Math.round(splitSum * 100) === Math.round(totalNum * 100)
   // How much is still to be handed out, read on the total's own side: on a refund
@@ -1443,12 +1633,18 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
           </div>
         </div>
 
-        {currency !== base && totalNum !== 0 && (
+        {fx && (
           <div className="bg-surface-secondary border border-edge text-content-muted" style={{ borderRadius: 10, padding: '10px 12px', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
             <span>{formatMoney(totalNum, currency, locale)}</span>
-            <span className="text-content-faint">≈</span>
-            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(totalNum, currency), base, locale)}</span>
-            <span className="text-content-faint">· {t('costs.liveRate')}</span>
+            {fx.inTrip != null && <>
+              <span className="text-content-faint">→</span>
+              <span className={fx.shown == null ? 'text-content' : undefined} style={fx.shown == null ? { fontWeight: 600 } : undefined}>{formatMoney(fx.inTrip, tripCur, locale)}</span>
+            </>}
+            {fx.shown != null && <>
+              <span className="text-content-faint">≈</span>
+              <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(fx.shown, base, locale)}</span>
+              <span className="text-content-faint">· {t('costs.liveRate')}</span>
+            </>}
           </div>
         )}
 
@@ -1675,7 +1871,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
               <div style={{ marginTop: 10, fontSize: 12.5, display: 'flex', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
                 {splitMode === 'equally' ? (
                   <span className="text-content-faint">
-                    {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: sym(currency) + each.toFixed(2) })}
+                    {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: splitShareLabel(each, currency, fx, participants.size, base, sym, locale) })}
                   </span>
                 ) : (
                   <span style={{ fontWeight: 600, color: customBalanced ? '#16a34a' : '#dc2626' }}>

client/src/components/Budget/expenseFx.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { formatMoney } from '../../utils/formatters'
+import { editingCurrencyOf, expenseFxPreview, splitShareLabel } from './expenseFx'
+
+// A euro trip read in dollars, converted with the euro's own quote: one euro is 1.1551
+// dollars today, and 1.17 on the day the hotel was booked (#2525).
+const convert = (amount: number, from: string | null | undefined): number =>
+  (amount / ({ EUR: 1, USD: 1.1551, JPY: 170 } as Record<string, number>)[(from || 'USD').toUpperCase()]) * 1.1551
+const hotel = { currency: 'USD', exchange_rate: 1.17 }
+const base = { editing: hotel, editingCurrency: 'USD', tripCurrency: 'EUR', base: 'USD', convert }
+
+describe('editingCurrencyOf', () => {
+  it('opens a saved expense without a currency in the trip currency', () => {
+    expect(editingCurrencyOf({ currency: null }, 'eur', 'USD')).toBe('EUR')
+    expect(editingCurrencyOf({ currency: 'jpy' }, 'EUR', 'USD')).toBe('JPY')
+  })
+
+  it('starts a new expense, or one on a trip without a currency, in the display currency', () => {
+    expect(editingCurrencyOf(null, 'EUR', 'usd')).toBe('USD')
+    expect(editingCurrencyOf({ currency: null }, null, 'usd')).toBe('USD')
+  })
+})
+
+describe('expenseFxPreview', () => {
+  it('previews an edit that keeps the currency at the rate frozen on entry', () => {
+    const fx = expenseFxPreview({ ...base, total: 801.76, currency: 'USD' })!
+    expect(fx.inTrip).toBeCloseTo(685.26, 2)
+    expect(fx.shown).toBeCloseTo(791.55, 2)
+  })
+
+  it('has nothing to preview for a bill in the display currency that reads back as typed', () => {
+    expect(expenseFxPreview({ ...base, editing: { currency: 'USD', exchange_rate: 1.1551 }, total: 12345.67, currency: 'USD' })).toBeNull()
+    expect(expenseFxPreview({ ...base, editing: null, total: 250, currency: 'USD' })).toBeNull()
+    expect(expenseFxPreview({ ...base, total: 0, currency: 'USD' })).toBeNull()
+  })
+
+  it('previews a new or re-currencied amount at today\'s rate', () => {
+    expect(expenseFxPreview({ ...base, editing: null, total: 1700, currency: 'JPY' })).toEqual({ inTrip: null, shown: convert(1700, 'JPY') })
+    // Switching the hotel to yen re-freezes on save, so the old rate does not apply.
+    expect(expenseFxPreview({ ...base, total: 1700, currency: 'JPY' })?.inTrip).toBeNull()
+  })
+
+  it('stops at the trip amount when the viewer reads the trip currency', () => {
+    expect(expenseFxPreview({ ...base, base: 'EUR', total: 801.76, currency: 'USD' })).toEqual({ inTrip: 801.76 / 1.17, shown: null })
+  })
+})
+
+describe('splitShareLabel', () => {
+  const sym = (c: string) => (c === 'USD' ? '$' : c + ' ')
+
+  it('prints the entered share, then the share the row lends or borrows', () => {
+    const fx = expenseFxPreview({ ...base, total: 801.76, currency: 'USD' })
+    expect(splitShareLabel(400.88, 'USD', fx, 2, 'USD', sym, 'en-US')).toBe('$400.88 → $395.77')
+    // Read in the trip currency, the share is the booked euros.
+    const inEur = expenseFxPreview({ ...base, base: 'EUR', total: 801.76, currency: 'USD' })
+    expect(splitShareLabel(400.88, 'USD', inEur, 2, 'EUR', sym, 'en-US')).toBe(`$400.88 → ${formatMoney(342.63, 'EUR', 'en-US')}`)
+  })
+
+  it('prints the entered share alone when nothing is converted', () => {
+    expect(splitShareLabel(125, 'USD', null, 2, 'USD', sym, 'en-US')).toBe('$125.00')
+    expect(splitShareLabel(0, 'USD', { inTrip: null, shown: 10 }, 0, 'USD', sym, 'en-US')).toBe('$0.00')
+  })
+})

client/src/components/Budget/expenseFx.ts

@@ -0,0 +1,87 @@
+import { bookedInTrip, useExchangeRates } from '../../hooks/useExchangeRates'
+import { useTripStore } from '../../store/tripStore'
+import { currencyDecimals, formatMoney } from '../../utils/formatters'
+
+/**
+ * The conversion preview of the expense editors, shared by the desktop ExpenseModal and the
+ * phone MCostSheet so the two can never preview the same save differently (#2525). The
+ * editors only lay it out.
+ */
+
+interface EditedExpense {
+  currency?: string | null
+  exchange_rate?: number | null
+}
+
+/**
+ * The currency an edited expense opens in. A saved expense without a currency is in the
+ * trip's own, which is how the lists read it; opening it in the display currency relabelled
+ * the amount, and a save then stored it in that currency.
+ */
+export function editingCurrencyOf(editing: EditedExpense | null | undefined, tripCurrency: string | null | undefined, base: string): string {
+  return ((editing && (editing.currency || tripCurrency)) || base).toUpperCase()
+}
+
+export interface ExpenseFx {
+  /** The amount in the trip currency, when the save keeps a rate frozen on entry. */
+  inTrip: number | null
+  /** The amount in the display currency at today's rate; null when `inTrip` already is. */
+  shown: number | null
+}
+
+/**
+ * What the amount being edited will count as. An edit that keeps the currency keeps the rate
+ * frozen when the expense was entered (the server re-freezes only when the currency changes),
+ * so it is previewed at that rate, the way the list will show it after the save. Anything
+ * else is previewed at today's rate. Null when there is nothing to convert, including a bill
+ * in the display currency that still reads back as typed.
+ */
+export function expenseFxPreview(args: {
+  total: number
+  currency: string
+  editing: EditedExpense | null | undefined
+  editingCurrency: string
+  tripCurrency: string
+  base: string
+  convert: (amount: number, from: string | null | undefined) => number
+}): ExpenseFx | null {
+  const { total, currency, editing, editingCurrency, tripCurrency, base, convert } = args
+  if (total === 0) return null
+  const inTrip = editing && currency === editingCurrency ? bookedInTrip(total, currency, editing.exchange_rate, tripCurrency) : null
+  if (currency === base && inTrip == null) return null
+  const shown = inTrip == null ? convert(total, currency) : convert(inTrip, tripCurrency)
+  const unit = 10 ** currencyDecimals(base)
+  if (currency === base && Math.round(shown * unit) === Math.round(total * unit)) return null
+  return { inTrip, shown: inTrip != null && tripCurrency === base ? null : shown }
+}
+
+/**
+ * One equal share as the split summary prints it, "$400.88", followed by what that share
+ * counts as when the amount is converted, "$400.88 → $390.54". That second figure is the
+ * one the row's "you lent" is made of, so the editor and the row cannot disagree.
+ */
+export function splitShareLabel(
+  each: number,
+  currency: string,
+  fx: ExpenseFx | null,
+  participants: number,
+  base: string,
+  sym: (currency: string) => string,
+  locale: string,
+): string {
+  const entered = sym(currency) + each.toFixed(2)
+  const whole = fx ? (fx.shown ?? fx.inTrip) : null
+  if (whole == null || participants <= 0) return entered
+  return `${entered} → ${formatMoney(whole / participants, base, locale)}`
+}
+
+/** Everything an expense editor needs to preview a conversion, from the trip in the store. */
+export function useExpenseFx(base: string, editing: EditedExpense | null | undefined) {
+  const storedTripCurrency = useTripStore(s => s.trip?.currency)
+  const tripCurrency = (storedTripCurrency || base).toUpperCase()
+  const { convert } = useExchangeRates(base, tripCurrency)
+  const editingCurrency = editingCurrencyOf(editing, storedTripCurrency, base)
+  const preview = (total: number, currency: string) =>
+    expenseFxPreview({ total, currency, editing, editingCurrency, tripCurrency, base, convert })
+  return { tripCurrency, editingCurrency, preview }
+}

client/src/components/Budget/useFreezeMissingRates.test.ts

@@ -0,0 +1,123 @@
+// FE-FREEZE-RATES-001 to FE-FREEZE-RATES-006
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import type { BudgetUnconverted } from '@trek/shared'
+import { server } from '../../../tests/helpers/msw/server'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { buildBudgetItem } from '../../../tests/helpers/factories'
+import { useTripStore } from '../../store/tripStore'
+import { setForcedOffline } from '../../sync/networkMode'
+import { clearExchangeRateCache } from '../../hooks/useExchangeRates'
+import { resetFreezeAttempts, useFreezeMissingRates } from './useFreezeMissingRates'
+
+// The reporter's setup: an AUD trip whose server cannot fetch rates, and a VND bill that
+// never froze one. The browser has today's AUD table.
+const bill = () => buildBudgetItem({ id: 11, trip_id: 5, name: 'Pho', total_price: 8920000, currency: 'VND', exchange_rate: 1 })
+const pending: BudgetUnconverted = { item_ids: [11], settlement_ids: [3], currencies: ['VND'] }
+
+type Props = Parameters<typeof useFreezeMissingRates>[0]
+
+function mountHook(over: Partial<Props> = {}) {
+  const onHealed = vi.fn()
+  const props: Props = { tripId: 5, tripCurrency: 'AUD', canEdit: true, unconverted: pending, onHealed, ...over }
+  const view = renderHook((p: Props) => useFreezeMissingRates(p), { initialProps: props })
+  return { ...view, onHealed, props }
+}
+
+let posted: unknown[] = []
+
+function serveFreeze(reply: () => Response = () => HttpResponse.json({
+  items: [{ ...bill(), exchange_rate: 18241.3 }],
+  settlements: [{ id: 3, trip_id: 5, from_user_id: 2, to_user_id: 1, amount: 100000, currency: 'VND', exchange_rate: 18241.3 }],
+  unresolved: [],
+})) {
+  server.use(http.post('/api/trips/5/budget/freeze-rates', async ({ request }) => {
+    posted.push(await request.json())
+    return reply()
+  }))
+}
+
+/** Lets a heal that was never going to send anything run to its end. */
+const settle = () => act(async () => { await new Promise(r => setTimeout(r, 30)) })
+
+beforeEach(() => {
+  resetAllStores()
+  resetFreezeAttempts()
+  clearExchangeRateCache()
+  posted = []
+  localStorage.setItem('trek_fx_AUD', JSON.stringify({ rates: { AUD: 1, VND: 18241.3, EUR: 0.61 }, ts: Date.now() }))
+  seedStore(useTripStore, { budgetItems: [bill()] })
+  serveFreeze()
+})
+
+afterEach(() => {
+  setForcedOffline(false)
+  vi.restoreAllMocks()
+})
+
+describe('useFreezeMissingRates', () => {
+  it('FE-FREEZE-RATES-001: lends the fresh rates for the listed currencies and reloads once rows count', async () => {
+    const { onHealed } = mountHook()
+
+    await waitFor(() => expect(onHealed).toHaveBeenCalledTimes(1))
+    // Only the currency the settlement is missing goes out, never the whole table.
+    expect(posted).toEqual([{ fallback_fx: { base: 'AUD', rates: { VND: 18241.3 } } }])
+    expect(useTripStore.getState().budgetItems[0].exchange_rate).toBe(18241.3)
+  })
+
+  it('FE-FREEZE-RATES-002: asks once per set of rows, however often the settlement is read', async () => {
+    const { onHealed, props, rerender } = mountHook()
+    await waitFor(() => expect(onHealed).toHaveBeenCalledTimes(1))
+
+    // The same rows in another order, then again after a reload: nothing new to ask.
+    rerender({ ...props, unconverted: { item_ids: [11], settlement_ids: [3], currencies: ['VND'] } })
+    rerender({ ...props, unconverted: { settlement_ids: [3], item_ids: [11], currencies: ['VND'] } })
+    await settle()
+    expect(posted).toHaveLength(1)
+
+    // Another row is another attempt.
+    rerender({ ...props, unconverted: { item_ids: [11, 12], settlement_ids: [3], currencies: ['VND'] } })
+    await waitFor(() => expect(posted).toHaveLength(2))
+  })
+
+  it('FE-FREEZE-RATES-003: never asks for a viewer, offline, or with nothing left out', async () => {
+    mountHook({ canEdit: false })
+    mountHook({ unconverted: { item_ids: [], settlement_ids: [], currencies: [] } })
+    mountHook({ unconverted: undefined })
+    setForcedOffline(true)
+    mountHook({ unconverted: { item_ids: [21], settlement_ids: [], currencies: ['VND'] } })
+    await settle()
+
+    expect(posted).toEqual([])
+  })
+
+  it('FE-FREEZE-RATES-004: sends nothing when the browser has no rate for the currency either', async () => {
+    const { onHealed } = mountHook({ unconverted: { item_ids: [31], settlement_ids: [], currencies: ['JPY'] } })
+    await settle()
+
+    expect(posted).toEqual([])
+    expect(onHealed).not.toHaveBeenCalled()
+  })
+
+  it('FE-FREEZE-RATES-005: does not reload when the server froze nothing', async () => {
+    serveFreeze(() => HttpResponse.json({ items: [], settlements: [], unresolved: ['VND'] }))
+    const { onHealed } = mountHook()
+
+    await waitFor(() => expect(posted).toHaveLength(1))
+    await settle()
+    expect(onHealed).not.toHaveBeenCalled()
+  })
+
+  it('FE-FREEZE-RATES-006: a refused heal is logged, not thrown, and not retried in a loop', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    serveFreeze(() => HttpResponse.json({ error: 'The trip currency changed. Reload and try again.' }, { status: 409 }))
+    const { onHealed, props, rerender } = mountHook()
+
+    await waitFor(() => expect(warn).toHaveBeenCalled())
+    rerender({ ...props })
+    await settle()
+    expect(posted).toHaveLength(1)
+    expect(onHealed).not.toHaveBeenCalled()
+  })
+})

client/src/components/Budget/useFreezeMissingRates.ts

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react'
+import type { BudgetFallbackFx, BudgetUnconverted } from '@trek/shared'
+import { fetchFreshRates, isSendableRate } from '../../hooks/useExchangeRates'
+import { useTripStore } from '../../store/tripStore'
+import { isEffectivelyOffline } from '../../sync/networkMode'
+
+/**
+ * Every set of rows already tried, by trip, trip currency and ids. The settlement lists a
+ * row it cannot count until a rate is frozen on it; one the browser has no rate for either
+ * stays listed, and without this every reload of the settlement would ask again.
+ */
+const tried = new Set<string>()
+
+/** Test-only: the attempts outlive a vitest file's individual tests. */
+export function resetFreezeAttempts(): void {
+  tried.clear()
+}
+
+/**
+ * Heals the rows the settlement leaves out (`unconverted`): expenses and transfers in a
+ * foreign currency that never froze a rate, while the server cannot fetch one. That is the
+ * setup where the server's own fetch fails and the browser's works, so an editor's browser
+ * lends its fresh rates to POST …/budget/freeze-rates. The server still prefers its own rate
+ * and never touches a row that is frozen already.
+ *
+ * Runs for an editor only, online, and once per set of rows. No request goes out when the
+ * browser has no rate for any of the listed currencies either. `onHealed` runs when the
+ * server froze something, so the caller can reload the settlement.
+ *
+ * Deliberately not in the mutation queue: the heal is derived and idempotent, and a replay
+ * hours later would freeze a rate from another day.
+ */
+export function useFreezeMissingRates({ tripId, tripCurrency, canEdit, unconverted, onHealed }: {
+  tripId: number
+  tripCurrency: string
+  canEdit: boolean
+  unconverted: BudgetUnconverted | null | undefined
+  onHealed: () => void
+}): void {
+  const onHealedRef = useRef(onHealed)
+  useEffect(() => { onHealedRef.current = onHealed })
+  const mounted = useRef(true)
+  useEffect(() => {
+    mounted.current = true
+    return () => { mounted.current = false }
+  }, [])
+
+  const trip = (tripCurrency || '').toUpperCase()
+  const itemIds = [...(unconverted?.item_ids ?? [])].sort((a, b) => a - b).join(',')
+  const settlementIds = [...(unconverted?.settlement_ids ?? [])].sort((a, b) => a - b).join(',')
+  const currencies = (unconverted?.currencies ?? []).join(',')
+
+  useEffect(() => {
+    if (!canEdit || !trip || (!itemIds && !settlementIds) || isEffectivelyOffline()) return
+    const key = `${tripId}:${trip}:${itemIds}:${settlementIds}`
+    if (tried.has(key)) return
+    tried.add(key)
+
+    const heal = async (): Promise<void> => {
+      const rates = await fetchFreshRates(trip)
+      const lent: Record<string, number> = {}
+      for (const cur of currencies.split(',')) {
+        const rate = rates?.[cur]
+        if (isSendableRate(rate)) lent[cur] = rate
+      }
+      if (Object.keys(lent).length === 0) return
+      const fallback: BudgetFallbackFx = { base: trip, rates: lent }
+      const result = await useTripStore.getState().freezeMissingRates(tripId, fallback)
+      if (mounted.current && (result.items.length > 0 || result.settlements.length > 0)) onHealedRef.current()
+    }
+    heal().catch((err: unknown) => console.warn('Could not freeze the missing exchange rates:', err))
+  }, [canEdit, trip, tripId, itemIds, settlementIds, currencies])
+}

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

@@ -708,4 +708,31 @@ describe('CollabChat', () => {
       { timeout: 3000 }
     );
   });
+
+  // The strip shows the four pictures that will go out; the two the cap turned away
+  // vanish without a word otherwise, and the sender believes all six were sent.
+  it('FE-COMP-CHAT-037: picking more images than fit on one message says so, and says it once', async () => {
+    const addToast = vi.fn();
+    window.__addToast = addToast as unknown as typeof window.__addToast;
+    let minted = 0;
+    const createObjURL = vi.spyOn(URL, 'createObjectURL').mockImplementation(() => `blob:mock/${++minted}`);
+    const revokeObjURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+    try {
+      render(<CollabChat {...defaultProps} />);
+      await screen.findByText('Start the conversation');
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      const files = Array.from({ length: 6 }, (_, i) => new File([new Uint8Array(8)], `${i}.png`, { type: 'image/png' }));
+
+      fireEvent.change(input, { target: { files } });
+
+      await waitFor(() => expect(document.querySelectorAll('img[src^="blob:mock/"]')).toHaveLength(4));
+      expect(addToast).toHaveBeenCalledTimes(1);
+      const [message, type] = addToast.mock.calls[0];
+      expect(type).toBe('error');
+      expect(message).not.toBe('Only JPEG, PNG, GIF and WebP images up to 10 MB are allowed');
+    } finally {
+      delete window.__addToast;
+      createObjURL.mockRestore(); revokeObjURL.mockRestore();
+    }
+  });
 });

client/src/components/Collab/CollabChat.tsx

@@ -48,8 +48,8 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
           </div>
         )}
 
-        {imagePreviews.length > 0 && <div style={{ display: 'flex', gap: 8, marginBottom: 8, overflowX: 'auto' }}>{imagePreviews.map((url, i) => <div key={url} style={{ position: 'relative' }}><img src={url} alt="" style={{ width: 56, height: 56, objectFit: 'cover', borderRadius: 8 }} /><button type="button" onClick={() => removeImage(i)} aria-label="Remove image" style={{ position: 'absolute', top: -6, right: -6, border: 0, borderRadius: '50%', background: 'var(--text-primary)', color: 'var(--bg-primary)', width: 18, height: 18, cursor: 'pointer' }}>×</button></div>)}</div>}
-        {uploadProgress > 0 && uploadProgress < 100 && <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>Uploading {uploadProgress}%</div>}
+        {imagePreviews.length > 0 && <div style={{ display: 'flex', gap: 8, marginBottom: 8, overflowX: 'auto' }}>{imagePreviews.map((url, i) => <div key={url} style={{ position: 'relative' }}><img src={url} alt="" style={{ width: 56, height: 56, objectFit: 'cover', borderRadius: 8 }} /><button type="button" onClick={() => removeImage(i)} aria-label={t('places.removeImage')} style={{ position: 'absolute', top: -6, right: -6, border: 0, borderRadius: '50%', background: 'var(--text-primary)', color: 'var(--bg-primary)', width: 18, height: 18, cursor: 'pointer' }}>×</button></div>)}</div>}
+        {uploadProgress > 0 && uploadProgress < 100 && <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>{t('collab.chat.uploading', { percent: uploadProgress })}</div>}
         <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
           {/* Emoji button */}
           {canEdit && (
@@ -63,7 +63,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
             </button>
           )}
 
-          {canEdit && <><input ref={imageInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple hidden onChange={e => { if (e.target.files) addImageFiles(e.target.files); e.currentTarget.value = '' }} /><button type="button" onClick={() => imageInputRef.current?.click()} aria-label="Attach images" style={{ width: 34, height: 34, borderRadius: '50%', border: 'none', background: 'transparent', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0 }}><ImagePlus size={19} /></button></>}
+          {canEdit && <><input ref={imageInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple hidden onChange={e => { if (e.target.files) addImageFiles(e.target.files); e.currentTarget.value = '' }} /><button type="button" onClick={() => imageInputRef.current?.click()} aria-label={t('collab.chat.attachImages')} style={{ width: 34, height: 34, borderRadius: '50%', border: 'none', background: 'transparent', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0 }}><ImagePlus size={19} /></button></>}
 
           <textarea
             ref={textareaRef}

client/src/components/Collab/CollabChatAttachment.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react'
 import { X } from 'lucide-react'
+import { useTranslation } from '../../i18n'
 
 export function CollabChatAttachment({ attachment }: { attachment: { url: string; original_name?: string; mime_type?: string } }) {
+  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const alt = attachment.original_name || t('collab.chat.attachedImage')
   return <>
-    <img src={attachment.url} alt={attachment.original_name || 'Attached image'} onClick={() => setOpen(true)} style={{ display: 'block', width: 180, maxWidth: '100%', maxHeight: 220, objectFit: 'cover', borderRadius: 10, cursor: 'zoom-in', marginTop: 4 }} />
-    {open && <div role="dialog" onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,.82)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}><button aria-label="Close image" onClick={() => setOpen(false)} style={{ position: 'fixed', top: 18, right: 18, background: 'rgba(255,255,255,.15)', color: '#fff', border: 0, borderRadius: '50%', width: 36, height: 36 }}><X size={20} /></button><img src={attachment.url} alt={attachment.original_name || 'Attached image'} onClick={e => e.stopPropagation()} style={{ maxWidth: '95vw', maxHeight: '90vh', objectFit: 'contain' }} /></div>}
+    <img src={attachment.url} alt={alt} onClick={() => setOpen(true)} style={{ display: 'block', width: 180, maxWidth: '100%', maxHeight: 220, objectFit: 'cover', borderRadius: 10, cursor: 'zoom-in', marginTop: 4 }} />
+    {open && <div role="dialog" onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,.82)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}><button aria-label={t('collab.chat.closeImage')} onClick={() => setOpen(false)} style={{ position: 'fixed', top: 18, right: 18, background: 'rgba(255,255,255,.15)', color: '#fff', border: 0, borderRadius: '50%', width: 36, height: 36 }}><X size={20} /></button><img src={attachment.url} alt={alt} onClick={e => e.stopPropagation()} style={{ maxWidth: '95vw', maxHeight: '90vh', objectFit: 'contain' }} /></div>}
   </>
 }

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

@@ -0,0 +1,234 @@
+// FE-COMP-LINKS-001 to FE-COMP-LINKS-013
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fireEvent, render, screen, waitFor, within } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { usePermissionsStore } from '../../store/permissionsStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildTrip } from '../../../tests/helpers/factories';
+import CollabLinks from './CollabLinks';
+
+const currentUser = buildUser({ id: 1, username: 'testuser' });
+
+const buildLink = (overrides: Record<string, unknown> = {}) => ({
+  id: 1,
+  title: 'Ferry timetable',
+  url: 'https://ferries.example/timetable',
+  pinned: 0,
+  ...overrides,
+});
+
+beforeEach(() => {
+  resetAllStores();
+  vi.clearAllMocks();
+  server.use(
+    http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [] })),
+  );
+  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1, user_id: 1 }) });
+});
+
+describe('CollabLinks', () => {
+  it('FE-COMP-LINKS-001: empty list shows the mascot state, not a bare line of text', async () => {
+    render(<CollabLinks tripId={1} />);
+    expect(await screen.findByText(/no shared links yet|collab\.links\.empty/i)).toBeInTheDocument();
+    // The mascot carries the scene class; it is what makes this panel match its siblings.
+    await waitFor(() => expect(document.querySelector('.trek--links')).toBeInTheDocument());
+  });
+
+  it('FE-COMP-LINKS-002: the header names the panel and carries the add button', async () => {
+    render(<CollabLinks tripId={1} />);
+    const heading = await screen.findByRole('heading', { level: 3 });
+    expect(heading).toHaveTextContent(/links/i);
+    expect(heading).toHaveStyle({ textTransform: 'uppercase' });
+    expect(screen.getByRole('button', { name: /add link|collab\.links\.add/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-003: renders a link with its title and url', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [buildLink()] })),
+    );
+    render(<CollabLinks tripId={1} />);
+    expect(await screen.findByText('Ferry timetable')).toBeInTheDocument();
+    // The chip shows the host, not the whole address, and links to the address itself.
+    expect(screen.getByText('ferries.example')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /ferry timetable/i })).toHaveAttribute('href', 'https://ferries.example/timetable');
+  });
+
+  it('FE-COMP-LINKS-004: the add button opens the form in a dialog, not inside the list', async () => {
+    const user = userEvent.setup();
+    render(<CollabLinks tripId={1} />);
+    await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
+    expect(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-005: saving posts the link and closes the form', async () => {
+    const user = userEvent.setup();
+    let posted: Record<string, unknown> | null = null;
+    server.use(
+      http.post('/api/trips/1/collab/links', async ({ request }) => {
+        posted = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json({ link: buildLink({ id: 7, title: 'Ferry timetable' }) });
+      }),
+    );
+    render(<CollabLinks tripId={1} />);
+    await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
+    await user.type(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i), 'Ferry timetable');
+    await user.type(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i), 'https://ferries.example/timetable');
+    await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
+
+    await waitFor(() => expect(posted).toEqual({ title: 'Ferry timetable', url: 'https://ferries.example/timetable' }));
+    await waitFor(() => expect(screen.queryByLabelText(/link title|collab\.links\.titlePlaceholder/i)).not.toBeInTheDocument());
+    expect(await screen.findByText('Ferry timetable')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-006: a failed save keeps the form open so the input is not lost', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/trips/1/collab/links', () => new HttpResponse(null, { status: 500 })),
+    );
+    render(<CollabLinks tripId={1} />);
+    await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
+    await user.type(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i), 'Ferry timetable');
+    await user.type(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i), 'https://ferries.example/timetable');
+    await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
+
+    expect(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i)).toHaveValue('Ferry timetable');
+  });
+
+  it('FE-COMP-LINKS-007: pin and delete are offered on a link', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [buildLink()] })),
+    );
+    render(<CollabLinks tripId={1} />);
+    expect(await screen.findByRole('button', { name: /pin link|collab\.links\.pin/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /delete link|collab\.links\.delete/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-009: a link can be edited in place, title and address alike', async () => {
+    // #2414: a link used to be delete-and-add once it needed a correction.
+    const user = userEvent.setup();
+    let put: Record<string, unknown> | null = null;
+    server.use(
+      http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [buildLink()] })),
+      http.put('/api/trips/1/collab/links/1', async ({ request }) => {
+        put = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json({ link: buildLink({ title: 'Ferry timetable 2026', url: 'https://ferries.example/2026' }) });
+      }),
+    );
+    render(<CollabLinks tripId={1} />);
+    await user.click(await screen.findByRole('button', { name: /edit link|collab\.links\.edit/i }));
+    const title = await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i);
+    expect(title).toHaveValue('Ferry timetable');
+    await user.clear(title);
+    await user.type(title, 'Ferry timetable 2026');
+    const url = screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i);
+    expect(url).toHaveValue('https://ferries.example/timetable');
+    await user.clear(url);
+    await user.type(url, 'https://ferries.example/2026');
+    await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
+
+    await waitFor(() => expect(put).toEqual({ title: 'Ferry timetable 2026', url: 'https://ferries.example/2026' }));
+    await waitFor(() => expect(screen.queryByLabelText(/link title|collab\.links\.titlePlaceholder/i)).not.toBeInTheDocument());
+    expect(await screen.findByText('Ferry timetable 2026')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /ferry timetable 2026/i })).toHaveAttribute('href', 'https://ferries.example/2026');
+  });
+
+  it('FE-COMP-LINKS-010: the chip is the link and opens the address in a new tab', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [buildLink()] })),
+    );
+    render(<CollabLinks tripId={1} />);
+    const open = await screen.findByRole('link', { name: /ferry timetable/i });
+    expect(open).toHaveAttribute('href', 'https://ferries.example/timetable');
+    expect(open).toHaveAttribute('target', '_blank');
+    // The host stands beside the title; the whole address would not fit a chip.
+    expect(screen.getByText('ferries.example')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-011: deleting asks first, and the DELETE goes out only once confirmed', async () => {
+    // The link goes for every member, and on the phone the button is a thumb's
+    // width from pin: the notes panel guards the same way.
+    const user = userEvent.setup();
+    let deleted = false;
+    server.use(
+      http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [buildLink()] })),
+      http.delete('/api/trips/1/collab/links/1', () => { deleted = true; return HttpResponse.json({ success: true }); }),
+    );
+    render(<CollabLinks tripId={1} />);
+    await user.click(await screen.findByRole('button', { name: /delete link|collab\.links\.delete/i }));
+    expect(await screen.findByText(/delete link\?|collab\.links\.confirmDeleteTitle/i)).toBeInTheDocument();
+    expect(deleted).toBe(false);
+    expect(screen.getByText('Ferry timetable')).toBeInTheDocument();
+
+    // The confirm button of the question itself, found by its role rather than a colour class.
+    const question = screen.getByText(/delete link\?|collab\.links\.confirmDeleteTitle/i).closest('.trek-modal-enter') as HTMLElement;
+    await user.click(within(question).getByRole('button', { name: /^(delete|common\.delete)$/i }));
+    await waitFor(() => expect(deleted).toBe(true));
+    await waitFor(() => expect(screen.queryByText('Ferry timetable')).not.toBeInTheDocument());
+  });
+
+  it('FE-COMP-LINKS-012: a corrected address gets a fresh favicon attempt', async () => {
+    // The icon remembers a favicon that failed, and an edit keeps the chip's id,
+    // so the corrected address kept the generic glyph until the panel remounted.
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [buildLink({ url: 'https://old.example/page' })] })),
+      http.put('/api/trips/1/collab/links/1', () => HttpResponse.json({ link: buildLink({ url: 'https://new.example/page' }) })),
+    );
+    render(<CollabLinks tripId={1} />);
+    const chip = await screen.findByRole('link', { name: /ferry timetable/i });
+    fireEvent.error(chip.querySelector('img') as HTMLImageElement);
+    await waitFor(() => expect(chip.querySelector('img')).toBeNull());
+
+    await user.click(screen.getByRole('button', { name: /edit link|collab\.links\.edit/i }));
+    const url = await screen.findByLabelText(/https|collab\.links\.urlPlaceholder/i);
+    await user.clear(url);
+    await user.type(url, 'https://new.example/page');
+    await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
+
+    await waitFor(() => expect(screen.getByRole('link', { name: /ferry timetable/i }).querySelector('img'))
+      .toHaveAttribute('src', 'https://new.example/favicon.ico'));
+  });
+
+  it('FE-COMP-LINKS-013: on touch the chip actions are finger-sized and apart', () => {
+    // jsdom lays nothing out, so the rule is the assertion. The phone Collab tab
+    // mounts this chip; 22px buttons a pixel apart put delete one slip from pin.
+    const css = readFileSync(resolve(process.cwd(), 'src/index.css'), 'utf8');
+    const at = css.indexOf('@media (hover: none) {\n  .collab-link-chip__actions');
+    expect(at, 'touch rules for the chip actions missing from index.css').toBeGreaterThan(-1);
+    const touch = css.slice(at, css.indexOf('\n}', at));
+    expect(touch).toMatch(/\.collab-link-chip__actions \{[^}]*gap:\s*4px/);
+    const action = /\.collab-link-chip__action \{([^}]*)\}/.exec(touch)?.[1] ?? '';
+    for (const side of ['width', 'height']) {
+      expect(Number(new RegExp(`${side}:\\s*(\\d+)px`).exec(action)?.[1]), side).toBeGreaterThanOrEqual(24);
+    }
+    // The height comes back through the margin, so the chip itself stays 36px.
+    expect(action).toMatch(/margin:\s*-4px 0/);
+  });
+
+  it('FE-COMP-LINKS-008: a viewer without edit rights gets no add button', async () => {
+    // collab_edit reserved for the owner, on somebody else's trip.
+    seedStore(usePermissionsStore, { permissions: { collab_edit: 'trip_owner' } });
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, user_id: 99 }) });
+    render(<CollabLinks tripId={1} />);
+    expect(await screen.findByText(/no shared links yet|collab\.links\.empty/i)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /add link|collab\.links\.add/i })).not.toBeInTheDocument();
+  });
+});

client/src/components/Collab/CollabLinks.tsx

@@ -1,12 +1,17 @@
-import { FormEvent, useEffect, useState } from 'react'
-import { ExternalLink, Link2, Pin, Plus, Trash2, X } from 'lucide-react'
+import { CSSProperties, FormEvent, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { ExternalLink, Link2, Pencil, Pin, Plus, Trash2, X } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
+import ConfirmDialog from '../shared/ConfirmDialog'
+import EmptyState from '../shared/EmptyState'
 import { useToast } from '../shared/Toast'
 
+const FONT = "var(--font-system)"
+
 interface CollabLink {
   id: number
   title: string
@@ -14,12 +19,89 @@ interface CollabLink {
   pinned: boolean | number
 }
 
-function LinkIcon({ url, title }: { url: string; title: string }) {
+function LinkIcon({ url }: { url: string }) {
   const [failed, setFailed] = useState(false)
   let favicon = ''
-  try { favicon = new URL('/favicon.ico', url).href } catch { favicon = '' }
-  if (!favicon || failed) return <span aria-hidden="true" style={{ display: 'grid', placeItems: 'center', width: 28, height: 28, flex: '0 0 28px', borderRadius: 7, background: 'var(--bg-secondary)', color: 'var(--text-faint)' }}><Link2 size={15} /></span>
-  return <img src={favicon} alt="" aria-hidden="true" title={title} onError={() => setFailed(true)} style={{ width: 28, height: 28, flex: '0 0 28px', borderRadius: 7, objectFit: 'contain', background: 'var(--bg-secondary)' }} />
+  try { favicon = new URL('/favicon.ico', url).href } catch { /* not a parseable url, fall through to the glyph */ }
+  return (
+    <span className="collab-link-chip__icon" aria-hidden="true">
+      {!favicon || failed ? <Link2 size={13} /> : <img src={favicon} alt="" onError={() => setFailed(true)} />}
+      <span className="collab-link-chip__go"><ExternalLink size={13} /></span>
+    </span>
+  )
+}
+
+/** The part of the address worth a chip's width: the host, without a leading www. */
+function hostOf(url: string): string {
+  try { return new URL(url).hostname.replace(/^www\./, '') } catch { return url }
+}
+
+/**
+ * The add and edit form as a modal, like the poll and note panels next to it.
+ * Inline it pushed the list down and gave the panel a second header, which is
+ * what made this tab read as a different app from its four siblings. With a
+ * link handed in it edits that link (#2414): a link used to be delete-and-add
+ * once its title or address needed a correction.
+ */
+function LinkModal({ link, onClose, onSave }: { link?: CollabLink; onClose: () => void; onSave: (link: { title: string; url: string }) => Promise<void> }) {
+  const { t } = useTranslation()
+  const [title, setTitle] = useState(link?.title ?? '')
+  const [url, setUrl] = useState(link?.url ?? '')
+  const [busy, setBusy] = useState(false)
+  const valid = title.trim().length > 0 && url.trim().length > 0
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault()
+    if (!valid || busy) return
+    setBusy(true)
+    try {
+      await onSave({ title: title.trim(), url: url.trim() })
+      onClose()
+    } catch {
+      // The caller already said what went wrong; the form stays open with the input in it.
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const field: CSSProperties = {
+    width: '100%', boxSizing: 'border-box', padding: '8px 12px', borderRadius: 10, fontFamily: 'inherit',
+    fontSize: 'calc(13px * var(--fs-scale-body, 1))', outline: 'none',
+    border: '1px solid var(--border-primary)', background: 'var(--bg-input)', color: 'var(--text-primary)',
+  }
+  const label: CSSProperties = {
+    fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600,
+    color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4,
+  }
+
+  return createPortal(
+    <div role="presentation" style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16, fontFamily: FONT }} onClick={e => { if (e.target === e.currentTarget) onClose() }}>
+      <form style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 400, maxHeight: '90vh', overflow: 'auto', border: '1px solid var(--border-faint)' }} onSubmit={submit}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 12px', borderBottom: '1px solid var(--border-faint)' }}>
+          <h3 style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t(link ? 'collab.links.edit' : 'collab.links.add')}</h3>
+          <button type="button" onClick={onClose} aria-label={t('collab.links.cancel')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}><X size={16} /></button>
+        </div>
+        <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <div>
+            <label htmlFor="collab-link-title" style={{ ...label, display: 'block' }}>{t('collab.links.titlePlaceholder')}</label>
+            <input id="collab-link-title" value={title} onChange={e => setTitle(e.target.value)} placeholder={t('collab.links.titlePlaceholder')} autoFocus style={field} />
+          </div>
+          <div>
+            <label htmlFor="collab-link-url" style={{ ...label, display: 'block' }}>{t('collab.links.urlPlaceholder')}</label>
+            <input id="collab-link-url" type="url" required value={url} onChange={e => setUrl(e.target.value)} placeholder={t('collab.links.urlPlaceholder')} style={field} />
+          </div>
+          <button type="submit" disabled={!valid || busy} style={{
+            width: '100%', borderRadius: 99, padding: '9px 14px', background: valid && !busy ? 'var(--accent)' : 'var(--border-primary)',
+            color: valid && !busy ? 'var(--accent-text)' : 'var(--text-faint)', fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+            fontWeight: 600, border: 'none', cursor: valid && !busy ? 'pointer' : 'default', fontFamily: FONT,
+          }}>
+            {busy ? '...' : t('collab.links.save')}
+          </button>
+        </div>
+      </form>
+    </div>,
+    document.body,
+  )
 }
 
 export default function CollabLinks({ tripId }: { tripId: number }) {
@@ -28,10 +110,16 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
   const canEdit = useCanDo()('collab_edit', trip)
   const toast = useToast()
   const [links, setLinks] = useState<CollabLink[]>([])
-  const [title, setTitle] = useState('')
-  const [url, setUrl] = useState('')
-  const [busy, setBusy] = useState(false)
-  const [expanded, setExpanded] = useState(false)
+  const [showForm, setShowForm] = useState(false)
+  const [editing, setEditing] = useState<CollabLink | null>(null)
+  const [pendingDeleteId, setPendingDeleteId] = useState<number | null>(null)
+
+  // Both are new objects on every render, so depending on them would reload the
+  // list after each keystroke and drop a link that was just added back out of it.
+  const toastRef = useRef(toast)
+  toastRef.current = toast
+  const tRef = useRef(t)
+  tRef.current = t
 
   useEffect(() => {
     let cancelled = false
@@ -40,10 +128,10 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
       .catch(err => {
         if (cancelled) return
         console.error('Failed to load collab links:', err)
-        toast.error(t('common.error'))
+        toastRef.current.error(tRef.current('common.error'))
       })
     return () => { cancelled = true }
-  }, [tripId, toast, t])
+  }, [tripId])
 
   // Live sync, the same shape the notes panel uses. Without it the three
   // collab:link events the server broadcasts would arrive nowhere and a link
@@ -73,19 +161,14 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
   // Every write says something when it fails. Silence left the pin looking
   // unchanged and the delete looking ignored, with an unhandled rejection in
   // the console as the only trace.
-  const add = async (event?: FormEvent) => {
-    event?.preventDefault()
-    if (!title.trim() || !url.trim() || busy) return
-    setBusy(true)
+  const add = async (data: { title: string; url: string }) => {
     try {
-      const d = await collabApi.createLink(tripId, { title: title.trim(), url: url.trim() })
+      const d = await collabApi.createLink(tripId, data)
       setLinks(v => [d.link, ...v])
-      setTitle(''); setUrl(''); setExpanded(false)
     } catch (err) {
       console.error('Failed to add collab link:', err)
       toast.error(t('common.error'))
-    } finally {
-      setBusy(false)
+      throw err
     }
   }
 
@@ -99,6 +182,17 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
     }
   }
 
+  const edit = async (link: CollabLink, data: { title: string; url: string }) => {
+    try {
+      const d = await collabApi.updateLink(tripId, link.id, data)
+      setLinks(v => v.map(x => x.id === link.id ? d.link : x))
+    } catch (err) {
+      console.error('Failed to edit collab link:', err)
+      toast.error(t('common.error'))
+      throw err
+    }
+  }
+
   const remove = async (id: number) => {
     try {
       await collabApi.deleteLink(tripId, id)
@@ -108,16 +202,76 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
       toast.error(t('common.error'))
     }
   }
-  return <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 14px', borderBottom: '1px solid var(--border-faint)' }}><Link2 size={18} aria-hidden="true" /><strong>{t('collab.tabs.links')}</strong><span style={{ marginLeft: 'auto', color: 'var(--text-faint)', fontSize: 12 }}>{links.length}</span></div>
-    {canEdit && <div style={{ padding: 10, borderBottom: '1px solid var(--border-faint)' }}>
-      <button type="button" onClick={() => setExpanded(v => !v)} aria-expanded={expanded} aria-controls={`collab-link-form-${tripId}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: 0, borderRadius: 8, padding: '7px 10px', background: 'var(--bg-secondary)', color: 'var(--text-primary)', cursor: 'pointer', fontWeight: 600 }}>{expanded ? <X size={16} aria-hidden="true" /> : <Plus size={16} aria-hidden="true" />}{expanded ? t('collab.links.cancel') : t('collab.links.add')}</button>
-      {expanded && <form id={`collab-link-form-${tripId}`} onSubmit={add} style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
-        <label htmlFor={`collab-link-title-${tripId}`} style={{ position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0 }}>{t('collab.links.titlePlaceholder')}</label>
-        <input id={`collab-link-title-${tripId}`} value={title} onChange={e => setTitle(e.target.value)} placeholder={t('collab.links.titlePlaceholder')} autoFocus style={{ padding: 8, borderRadius: 8, border: '1px solid var(--border-primary)', background: 'var(--bg-input)', color: 'var(--text-primary)' }} />
-        <div style={{ display: 'flex', gap: 6 }}><label htmlFor={`collab-link-url-${tripId}`} style={{ position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0 }}>{t('collab.links.urlPlaceholder')}</label><input id={`collab-link-url-${tripId}`} type="url" required value={url} onChange={e => setUrl(e.target.value)} placeholder={t('collab.links.urlPlaceholder')} style={{ flex: 1, minWidth: 0, padding: 8, borderRadius: 8, border: '1px solid var(--border-primary)', background: 'var(--bg-input)', color: 'var(--text-primary)' }} /><button type="submit" disabled={busy || !title.trim() || !url.trim()} aria-label={t('collab.links.save')} style={{ width: 36, border: 0, borderRadius: 8, background: 'var(--accent)', color: 'var(--accent-text)', cursor: 'pointer' }}><Plus size={18} aria-hidden="true" /></button></div>
-      </form>}
-    </div>}
-    <div style={{ flex: 1, overflowY: 'auto', padding: 10 }}>{links.length === 0 ? <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-faint)' }}>{t('collab.links.empty')}</div> : links.map(link => <div key={link.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 6px', borderBottom: '1px solid var(--border-faint)' }}><LinkIcon url={link.url} title={link.title} /><a href={link.url} target="_blank" rel="noreferrer" style={{ flex: 1, minWidth: 0, color: 'var(--text-primary)', textDecoration: 'none' }}><div style={{ fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link.title}</div><div style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link.url}</div></a><ExternalLink size={15} color="var(--text-faint)" aria-hidden="true" />{canEdit && <><button type="button" onClick={() => toggle(link)} aria-label={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')} style={{ border: 0, background: 'transparent', color: link.pinned ? 'var(--accent)' : 'var(--text-faint)', cursor: 'pointer' }}><Pin size={15} fill={link.pinned ? 'currentColor' : 'none'} aria-hidden="true" /></button><button type="button" onClick={() => remove(link.id)} aria-label={t('collab.links.delete')} style={{ border: 0, background: 'transparent', color: 'var(--text-faint)', cursor: 'pointer' }}><Trash2 size={15} aria-hidden="true" /></button></>}</div>)}</div>
-  </div>
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
+        <h3 style={{ margin: 0, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: 0.3, textTransform: 'uppercase' }}>
+          <Link2 size={14} color="var(--text-faint)" />
+          {t('collab.tabs.links')}
+        </h3>
+        {canEdit && (
+          <button type="button" onClick={() => setShowForm(true)} style={{
+            display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
+            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600,
+            fontFamily: FONT, border: 'none', cursor: 'pointer',
+          }}>
+            <Plus size={12} /> {t('collab.links.add')}
+          </button>
+        )}
+      </div>
+
+      {/* Content: one chip per link, two to a row (see .collab-link-chip). The chip is
+          the link, with the host beside the title; the actions sit in its tail. */}
+      <div className="chat-scroll collab-link-grid" style={{ flex: 1, overflowY: 'auto', padding: '2px 12px 12px' }}>
+        {links.length === 0 ? (
+          <EmptyState scene="links" title={t('collab.links.empty')} />
+        ) : (
+          <div className="collab-link-grid__cells">
+            {links.map(link => (
+              <div key={link.id} className={link.pinned ? 'collab-link-chip collab-link-chip--pinned' : 'collab-link-chip'}>
+                <a className="collab-link-chip__main" href={link.url} target="_blank" rel="noreferrer" title={t('collab.links.open')}>
+                  {/* Keyed on the address: the icon remembers a favicon that failed, and
+                      an edit keeps the chip's id, so a corrected address got the glyph. */}
+                  <LinkIcon key={link.url} url={link.url} />
+                  <span className="collab-link-chip__text">
+                    <span className="collab-link-chip__title">{link.title}</span>
+                    <span className="collab-link-chip__host">{hostOf(link.url)}</span>
+                  </span>
+                </a>
+                {canEdit && (
+                  <span className="collab-link-chip__actions">
+                    <button type="button" className="collab-link-chip__action" onClick={() => setEditing(link)} aria-label={t('collab.links.edit')} title={t('collab.links.edit')}>
+                      <Pencil size={13} aria-hidden="true" />
+                    </button>
+                    <button type="button" className={link.pinned ? 'collab-link-chip__action collab-link-chip__action--on' : 'collab-link-chip__action'} onClick={() => toggle(link)} aria-label={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')} title={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')}>
+                      <Pin size={13} fill={link.pinned ? 'currentColor' : 'none'} aria-hidden="true" />
+                    </button>
+                    <button type="button" className="collab-link-chip__action" onClick={() => setPendingDeleteId(link.id)} aria-label={t('collab.links.delete')} title={t('collab.links.delete')}>
+                      <Trash2 size={13} aria-hidden="true" />
+                    </button>
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Create and edit modals */}
+      {showForm && <LinkModal onClose={() => setShowForm(false)} onSave={add} />}
+      {editing && <LinkModal key={editing.id} link={editing} onClose={() => setEditing(null)} onSave={data => edit(editing, data)} />}
+
+      {/* The delete is shared: the link goes for every member, and on the phone the
+          button is a thumb's width from pin. Same guard as the notes panel. */}
+      <ConfirmDialog
+        isOpen={pendingDeleteId !== null}
+        onClose={() => setPendingDeleteId(null)}
+        onConfirm={() => (pendingDeleteId !== null ? remove(pendingDeleteId) : undefined)}
+        title={t('collab.links.confirmDeleteTitle')}
+        message={t('collab.links.confirmDeleteBody')}
+      />
+    </div>
+  )
 }

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

@@ -201,7 +201,9 @@ describe('CollabNotes', () => {
     // Deleting now asks for confirmation first — the note stays until confirmed.
     expect(screen.getByText('Delete note?')).toBeInTheDocument();
     expect(screen.getByText('Remove Me')).toBeInTheDocument();
-    await user.click(document.querySelector('button.bg-red-600') as HTMLElement);
+    // The confirm button of the question itself, found by its role rather than a colour class.
+    const question = screen.getByText('Delete note?').closest('.trek-modal-enter') as HTMLElement;
+    await user.click(within(question).getByRole('button', { name: 'Delete' }));
     await waitFor(() => expect(screen.queryByText('Remove Me')).not.toBeInTheDocument());
   });
 

client/src/components/Collab/useChatImages.test.ts

@@ -0,0 +1,135 @@
+/**
+ * FE-CHATIMG-001..009: the pictures pinned to a chat message before it is sent.
+ *
+ * The reason this file exists: the hook used to create object URLs and enqueue
+ * the preview state from inside a `setFiles` updater. React invokes an updater
+ * an extra time in development, so one picked image produced two preview URLs
+ * against one file, the composer strip drew two thumbnails for one attachment,
+ * and removing one of them left a preview for a picture that would not be sent.
+ * `renderHook` under StrictMode is what reproduces it.
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { StrictMode } from 'react'
+import { act, renderHook } from '@testing-library/react'
+import { useChatImages, MAX_CHAT_IMAGES, type ChatImageDrop } from './useChatImages'
+
+let nextUrl = 0
+const revoked: string[] = []
+
+beforeEach(() => {
+  nextUrl = 0
+  revoked.length = 0
+  vi.stubGlobal('URL', {
+    ...URL,
+    createObjectURL: vi.fn(() => `blob:mock/${++nextUrl}`),
+    revokeObjectURL: vi.fn((url: string) => { revoked.push(url) }),
+  })
+})
+
+const img = (name: string, size = 1024) =>
+  new File([new Uint8Array(size)], name, { type: 'image/png' })
+
+const strict = () => renderHook(() => useChatImages(), { wrapper: StrictMode })
+
+describe('useChatImages', () => {
+  it('FE-CHATIMG-001: one picked image is one file and one preview, in StrictMode', () => {
+    const { result } = strict()
+
+    act(() => { result.current.add([img('a.png')]) })
+
+    expect(result.current.files).toHaveLength(1)
+    expect(result.current.previews).toHaveLength(1)
+    expect(result.current.previews[0]).toBe('blob:mock/1')
+  })
+
+  it('FE-CHATIMG-002: removing the only image empties both lists and revokes its URL', () => {
+    const { result } = strict()
+    act(() => { result.current.add([img('a.png')]) })
+
+    act(() => { result.current.remove(0) })
+
+    expect(result.current.files).toEqual([])
+    expect(result.current.previews).toEqual([])
+    expect(revoked).toEqual(['blob:mock/1'])
+  })
+
+  it('FE-CHATIMG-003: files and previews stay in step across several adds', () => {
+    const { result } = strict()
+
+    act(() => { result.current.add([img('a.png')]) })
+    act(() => { result.current.add([img('b.png'), img('c.png')]) })
+
+    expect(result.current.files.map(f => f.name)).toEqual(['a.png', 'b.png', 'c.png'])
+    expect(result.current.previews).toEqual(['blob:mock/1', 'blob:mock/2', 'blob:mock/3'])
+  })
+
+  it('FE-CHATIMG-004: a rejected type is reported and nothing is pinned for it', () => {
+    const { result } = strict()
+    let ok = true
+
+    act(() => { ok = result.current.add([new File(['x'], 'notes.pdf', { type: 'application/pdf' })]) })
+
+    expect(ok).toBe(false)
+    expect(result.current.files).toEqual([])
+    expect(result.current.previews).toEqual([])
+  })
+
+  it('FE-CHATIMG-005: the cap holds and no URL is minted for what it turns away', () => {
+    const { result } = strict()
+
+    act(() => { result.current.add(Array.from({ length: MAX_CHAT_IMAGES + 2 }, (_, i) => img(`${i}.png`))) })
+
+    expect(result.current.files).toHaveLength(MAX_CHAT_IMAGES)
+    expect(result.current.previews).toHaveLength(MAX_CHAT_IMAGES)
+  })
+
+  it('FE-CHATIMG-006: clear revokes every URL it handed out', () => {
+    const { result } = strict()
+    act(() => { result.current.add([img('a.png'), img('b.png')]) })
+
+    act(() => { result.current.clear() })
+
+    expect(result.current.files).toEqual([])
+    expect(revoked.sort()).toEqual(['blob:mock/1', 'blob:mock/2'])
+  })
+
+  // The strip shows what will be sent, so a picture the cap turned away is as gone as
+  // one of the wrong kind. The sender hears about both, and hears which it was.
+  it('FE-CHATIMG-007: a pick past the cap is reported as an overflow and is not a clean add', () => {
+    const { result } = strict()
+    const drops: ChatImageDrop[] = []
+    let ok = true
+
+    act(() => {
+      ok = result.current.add(Array.from({ length: MAX_CHAT_IMAGES + 2 }, (_, i) => img(`${i}.png`)), d => drops.push(d))
+    })
+
+    expect(ok).toBe(false)
+    expect(drops).toEqual([{ rejected: 0, overflow: 2 }])
+    expect(result.current.files).toHaveLength(MAX_CHAT_IMAGES)
+  })
+
+  it('FE-CHATIMG-008: a wrong kind and an overflow in one pick are told apart', () => {
+    const { result } = strict()
+    act(() => { result.current.add([img('a.png'), img('b.png'), img('c.png')]) })
+    const drops: ChatImageDrop[] = []
+
+    act(() => {
+      result.current.add([new File(['x'], 'notes.pdf', { type: 'application/pdf' }), img('d.png'), img('e.png')], d => drops.push(d))
+    })
+
+    expect(result.current.files.map(f => f.name)).toEqual(['a.png', 'b.png', 'c.png', 'd.png'])
+    expect(drops).toEqual([{ rejected: 1, overflow: 1 }])
+  })
+
+  it('FE-CHATIMG-009: a pick that fits is a clean add and reports nothing', () => {
+    const { result } = strict()
+    const onDrop = vi.fn()
+    let ok = false
+
+    act(() => { ok = result.current.add([img('a.png')], onDrop) })
+
+    expect(ok).toBe(true)
+    expect(onDrop).not.toHaveBeenCalled()
+  })
+})

client/src/components/Collab/useChatImages.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 /**
  * The images pinned to a chat message before it is sent.
@@ -7,71 +7,94 @@ import { useCallback, useEffect, useRef, useState } from 'react'
  * their own copy of the same picking, previewing and clearing, which is two
  * places for the same leak and a duplication bill on every line.
  *
- * Object URLs are held in a ref and revoked when the file they belong to goes,
- * when the list is cleared and on unmount. Rebuilding every preview on each
- * change, which is what both copies did, leaked one URL per image per keystroke
- * of picking, and did it from inside a setState updater, so React ran it twice
- * in development and leaked twice as fast.
+ * A file and the object URL that previews it are one thing, so they are stored
+ * as one thing and the two arrays the callers read are derived from it. Every
+ * mutator computes the next list first and then commits it: nothing is created
+ * or revoked inside a state updater, because React invokes those an extra time
+ * in development and the second run would mint a second URL for the same file.
+ * That is what the strip showed as two thumbnails for one attachment, and
+ * removing one of them left a preview for a picture that was never sent.
+ *
+ * The ref is the list, the state is the render of it. Written together so two
+ * calls in the same tick see each other, which a functional updater would give
+ * for free and a plain array would not.
  */
 export const CHAT_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
 export const MAX_CHAT_IMAGES = 4
 export const MAX_CHAT_IMAGE_BYTES = 10 * 1024 * 1024
 
+interface PickedImage {
+  file: File
+  url: string
+}
+
+/**
+ * What an add() left out: files of the wrong type or over the size limit, and
+ * valid files past the cap of MAX_CHAT_IMAGES. Either can be zero, both cannot.
+ */
+export interface ChatImageDrop {
+  rejected: number
+  overflow: number
+}
+
 export interface ChatImages {
   files: File[]
   previews: string[]
-  /** Returns false when something was dropped, so the caller can say why. */
-  add: (incoming: FileList | File[]) => boolean
+  /**
+   * Returns false when something was dropped, so the caller can say why. The
+   * optional callback tells it what was dropped, because a picture past the cap
+   * is a different message from a picture of the wrong kind.
+   */
+  add: (incoming: FileList | File[], onDrop?: (drop: ChatImageDrop) => void) => boolean
   remove: (index: number) => void
   clear: () => void
 }
 
 export function useChatImages(): ChatImages {
-  const [files, setFiles] = useState<File[]>([])
-  const [previews, setPreviews] = useState<string[]>([])
-  const urls = useRef<string[]>([])
+  const [items, setItems] = useState<PickedImage[]>([])
+  const itemsRef = useRef<PickedImage[]>([])
 
-  const revokeAll = useCallback(() => {
-    urls.current.forEach(URL.revokeObjectURL)
-    urls.current = []
+  const commit = useCallback((next: PickedImage[]) => {
+    itemsRef.current = next
+    setItems(next)
   }, [])
 
-  useEffect(() => revokeAll, [revokeAll])
+  // Unmount with pictures still pinned: the URLs outlive the component otherwise.
+  useEffect(() => () => {
+    itemsRef.current.forEach(item => URL.revokeObjectURL(item.url))
+    itemsRef.current = []
+  }, [])
 
-  const add = useCallback((incoming: FileList | File[]) => {
+  const add = useCallback((incoming: FileList | File[], onDrop?: (drop: ChatImageDrop) => void) => {
     const all = Array.from(incoming)
     const valid = all.filter(f => CHAT_IMAGE_TYPES.includes(f.type) && f.size <= MAX_CHAT_IMAGE_BYTES)
-    if (valid.length) {
-      setFiles(prev => {
-        const room = MAX_CHAT_IMAGES - prev.length
-        const added = valid.slice(0, Math.max(0, room))
-        // Only the new files get a URL; the ones already in the list keep theirs.
-        const fresh = added.map(URL.createObjectURL)
-        urls.current = [...urls.current, ...fresh]
-        setPreviews(p => [...p, ...fresh])
-        return [...prev, ...added]
-      })
+    const room = MAX_CHAT_IMAGES - itemsRef.current.length
+    const added = valid.slice(0, Math.max(0, room))
+    if (added.length) {
+      // Only the new files get a URL; the ones already in the list keep theirs.
+      commit([...itemsRef.current, ...added.map(file => ({ file, url: URL.createObjectURL(file) }))])
     }
-    return valid.length === all.length
-  }, [])
+    // A picture the cap turned away is as gone as one of the wrong kind: the strip
+    // shows what will be sent, and the sender deserves to hear why it is short.
+    const drop = { rejected: all.length - valid.length, overflow: valid.length - added.length }
+    if (drop.rejected || drop.overflow) onDrop?.(drop)
+    return drop.rejected === 0 && drop.overflow === 0
+  }, [commit])
 
   const remove = useCallback((index: number) => {
-    setFiles(prev => prev.filter((_, i) => i !== index))
-    setPreviews(prev => {
-      const gone = prev[index]
-      if (gone) {
-        URL.revokeObjectURL(gone)
-        urls.current = urls.current.filter(u => u !== gone)
-      }
-      return prev.filter((_, i) => i !== index)
-    })
-  }, [])
+    const gone = itemsRef.current[index]
+    if (!gone) return
+    URL.revokeObjectURL(gone.url)
+    commit(itemsRef.current.filter((_, i) => i !== index))
+  }, [commit])
 
   const clear = useCallback(() => {
-    revokeAll()
-    setFiles([])
-    setPreviews([])
-  }, [revokeAll])
+    itemsRef.current.forEach(item => URL.revokeObjectURL(item.url))
+    commit([])
+  }, [commit])
+
+  const files = useMemo(() => items.map(item => item.file), [items])
+  const previews = useMemo(() => items.map(item => item.url), [items])
 
   return { files, previews, add, remove, clear }
 }

client/src/components/Collab/useCollabChat.ts

@@ -5,7 +5,7 @@ import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
-import { useChatImages } from './useChatImages'
+import { useChatImages, MAX_CHAT_IMAGES } from './useChatImages'
 import { useToast } from '../shared/Toast'
 
 export function useCollabChat(tripId: any, currentUser: any) {
@@ -122,7 +122,10 @@ export function useCollabChat(tripId: any, currentUser: any) {
 
   /* ── send ── */
   const addImageFiles = useCallback((incoming: File[] | FileList) => {
-    if (!images.add(incoming)) toast.error(t('collab.chat.imageRejected'))
+    images.add(incoming, ({ rejected, overflow }) => {
+      if (rejected) toast.error(t('collab.chat.imageRejected'))
+      if (overflow) toast.error(t('collab.chat.imageLimit', { max: MAX_CHAT_IMAGES }))
+    })
   }, [images, toast, t])
   const removeImage = images.remove
   const handlePaste = useCallback((e: ClipboardEvent) => { if (e.clipboardData.files.length) addImageFiles(e.clipboardData.files) }, [addImageFiles])

client/src/components/Collections/CollectionExportMenu.test.tsx

@@ -0,0 +1,120 @@
+// FE-COMP-COLEXPORT-001 to FE-COMP-COLEXPORT-008
+import React from 'react';
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { useTranslation } from '../../i18n/TranslationContext';
+import CollectionExportMenu from './CollectionExportMenu';
+
+type MenuProps = Omit<React.ComponentProps<typeof CollectionExportMenu>, 't'>;
+
+function Harness(props: MenuProps): React.ReactElement {
+  const { t } = useTranslation();
+  return (
+    <>
+      <CollectionExportMenu {...props} t={t} />
+      <button type="button">Somewhere else</button>
+    </>
+  );
+}
+
+function renderMenu(overrides: Partial<MenuProps> = {}) {
+  const props: MenuProps = { onExport: vi.fn(), ...overrides };
+  render(<Harness {...props} />);
+  return props;
+}
+
+const trigger = () => screen.getByRole('button', { name: 'Export' });
+const items = () => screen.getAllByRole('menuitem');
+
+describe('CollectionExportMenu (#2301)', () => {
+  it('FE-COMP-COLEXPORT-001: is a closed menu button until pressed', () => {
+    renderMenu();
+    expect(trigger()).toHaveAttribute('aria-haspopup', 'menu');
+    expect(trigger()).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('FE-COMP-COLEXPORT-002: offers both formats, each with its extension and what it is for', async () => {
+    renderMenu();
+    await userEvent.click(trigger());
+
+    const menu = screen.getByRole('menu', { name: 'Download this list as a file' });
+    expect(trigger()).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger()).toHaveAttribute('aria-controls', menu.id);
+    expect(items().map(item => item.textContent)).toEqual([
+      'TREK list.trekcollection.jsonFor another TREK, with labels and status',
+      'GPX.gpxWaypoints for OsmAnd, Organic Maps, Garmin and other map apps',
+    ]);
+  });
+
+  it('FE-COMP-COLEXPORT-003: exports the picked format, closes and gives focus back', async () => {
+    const props = renderMenu();
+    await userEvent.click(trigger());
+
+    await userEvent.click(screen.getByRole('menuitem', { name: /GPX/ }));
+
+    expect(props.onExport).toHaveBeenCalledWith('gpx');
+    expect(screen.queryByRole('menu')).toBeNull();
+    expect(trigger()).toHaveFocus();
+  });
+
+  it('FE-COMP-COLEXPORT-004: moves focus into the menu and walks it with the arrow keys, Home and End', async () => {
+    renderMenu();
+    await userEvent.click(trigger());
+    await waitFor(() => expect(items()[0]).toHaveFocus());
+
+    await userEvent.keyboard('{ArrowDown}');
+    expect(items()[1]).toHaveFocus();
+    // Past the end wraps round, as it does in every menu.
+    await userEvent.keyboard('{ArrowDown}');
+    expect(items()[0]).toHaveFocus();
+    await userEvent.keyboard('{ArrowUp}');
+    expect(items()[1]).toHaveFocus();
+    await userEvent.keyboard('{Home}');
+    expect(items()[0]).toHaveFocus();
+    await userEvent.keyboard('{End}');
+    expect(items()[1]).toHaveFocus();
+  });
+
+  it('FE-COMP-COLEXPORT-005: opens from the keyboard and picks with Enter', async () => {
+    const props = renderMenu();
+    trigger().focus();
+
+    await userEvent.keyboard('{ArrowDown}');
+    await waitFor(() => expect(items()[0]).toHaveFocus());
+    await userEvent.keyboard('{Enter}');
+
+    expect(props.onExport).toHaveBeenCalledWith('trek');
+  });
+
+  it('FE-COMP-COLEXPORT-006: closes on Escape without exporting, and gives focus back', async () => {
+    const props = renderMenu();
+    await userEvent.click(trigger());
+    await waitFor(() => expect(items()[0]).toHaveFocus());
+
+    await userEvent.keyboard('{Escape}');
+
+    expect(screen.queryByRole('menu')).toBeNull();
+    expect(trigger()).toHaveFocus();
+    expect(props.onExport).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLEXPORT-007: closes on a click anywhere else, and on Tab', async () => {
+    renderMenu();
+    await userEvent.click(trigger());
+    await userEvent.click(screen.getByRole('button', { name: 'Somewhere else' }));
+    expect(screen.queryByRole('menu')).toBeNull();
+
+    await userEvent.click(trigger());
+    await waitFor(() => expect(items()[0]).toHaveFocus());
+    await userEvent.keyboard('{Tab}');
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('FE-COMP-COLEXPORT-008: cannot be opened while an export is still running', async () => {
+    renderMenu({ exporting: true });
+    expect(trigger()).toBeDisabled();
+    await userEvent.click(trigger());
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+});

client/src/components/Collections/CollectionExportMenu.tsx

@@ -0,0 +1,168 @@
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Download, FileJson, Loader2, Route, type LucideIcon } from 'lucide-react'
+import type { TranslationFn } from '../../types'
+import { useAnchoredPosition } from '../../hooks/useAnchoredPosition'
+import { COLLECTION_FILE_EXTENSION, COLLECTION_GPX_EXTENSION, type CollectionExportFormat } from './collectionFile'
+
+interface CollectionExportMenuProps {
+  onExport: (format: CollectionExportFormat) => void
+  exporting?: boolean
+  t: TranslationFn
+}
+
+interface FormatOption {
+  format: CollectionExportFormat
+  icon: LucideIcon
+  label: string
+  extension: string
+  hint: string
+}
+
+/** Wide enough for the longest hint on one or two lines at the default text size. */
+const MENU_WIDTH = 300
+
+/**
+ * Export in the list hero: a menu of the two formats a list can leave in (#2301).
+ *
+ * The TREK file carries everything and is for another TREK; GPX carries the
+ * places as waypoints and is for every other map app. Choosing is the whole
+ * interaction, so it is a menu rather than a dialog.
+ *
+ * Portalled, because the hero clips its overflow, and placed against the
+ * trigger's right edge, where the button sits. A menu in the WAI-ARIA sense:
+ * focus moves into it on open, the arrow keys, Home and End walk it, Escape
+ * closes it and gives focus back to the button, and Tab leaves it closed.
+ */
+export default function CollectionExportMenu({ onExport, exporting, t }: CollectionExportMenuProps): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const menuId = useId()
+  const anchored = useAnchoredPosition(triggerRef, open, { estimatedHeight: 150, offset: 6 })
+  // Focusable only once positioned: until then the menu is hidden, and a hidden
+  // element refuses focus.
+  const placed = open && anchored !== null
+
+  const options: FormatOption[] = [
+    {
+      format: 'trek', icon: FileJson, label: t('collections.file.formatTrek'),
+      extension: COLLECTION_FILE_EXTENSION, hint: t('collections.file.formatTrekHint'),
+    },
+    {
+      format: 'gpx', icon: Route, label: 'GPX',
+      extension: COLLECTION_GPX_EXTENSION, hint: t('collections.file.formatGpxHint'),
+    },
+  ]
+
+  const items = () => Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])
+
+  const close = useCallback((refocus: boolean) => {
+    setOpen(false)
+    if (refocus) triggerRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    if (placed) menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]')?.focus()
+  }, [placed])
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (e: MouseEvent) => {
+      const target = e.target as Node
+      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return
+      close(false)
+    }
+    document.addEventListener('mousedown', onPointerDown)
+    return () => document.removeEventListener('mousedown', onPointerDown)
+  }, [open, close])
+
+  const onMenuKeyDown = (e: React.KeyboardEvent) => {
+    const all = items()
+    const at = all.indexOf(document.activeElement as HTMLElement)
+    const focus = (index: number) => {
+      e.preventDefault()
+      all[(index + all.length) % all.length]?.focus()
+    }
+    if (e.key === 'ArrowDown') focus(at + 1)
+    else if (e.key === 'ArrowUp') focus(at - 1)
+    else if (e.key === 'Home') focus(0)
+    else if (e.key === 'End') focus(all.length - 1)
+    else if (e.key === 'Escape') {
+      e.preventDefault()
+      close(true)
+    } else if (e.key === 'Tab') close(false)
+  }
+
+  const pick = (format: CollectionExportFormat) => {
+    close(true)
+    onExport(format)
+  }
+
+  // Pinned by its right edge, under the button, so it grows leftwards into the hero.
+  const right = anchored ? Math.max(8, window.innerWidth - anchored.left - anchored.width) : 8
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => setOpen(o => !o)}
+        onKeyDown={e => {
+          if (e.key === 'ArrowDown' && !open) {
+            e.preventDefault()
+            setOpen(true)
+          }
+        }}
+        disabled={exporting}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? menuId : undefined}
+        aria-label={t('collections.file.export')}
+        title={t('collections.file.exportTitle')}
+        className="col-glass-btn"
+      >
+        {exporting ? <Loader2 size={15} className="animate-spin" /> : <Download size={15} />}
+        <span className="txt">{t('collections.file.export')}</span>
+      </button>
+      {open && createPortal(
+        <div
+          ref={menuRef}
+          id={menuId}
+          role="menu"
+          aria-label={t('collections.file.exportTitle')}
+          onKeyDown={onMenuKeyDown}
+          className="trek-popover-enter fixed z-[var(--z-toast)] p-1.5 rounded-xl border border-edge bg-surface-card shadow-dropdown"
+          style={{
+            ...(anchored?.flipped ? { bottom: anchored.bottom } : { top: anchored?.top ?? 0 }),
+            right,
+            width: MENU_WIDTH,
+            maxWidth: 'calc(100vw - 16px)',
+            visibility: anchored ? 'visible' : 'hidden',
+          }}
+        >
+          {options.map(option => (
+            <button
+              key={option.format}
+              type="button"
+              role="menuitem"
+              tabIndex={-1}
+              onClick={() => pick(option.format)}
+              className="w-full flex items-start gap-3 px-3 py-2.5 rounded-lg text-left transition-colors hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
+            >
+              <option.icon size={16} className="mt-0.5 shrink-0 text-content-faint" aria-hidden />
+              <span className="flex-1 min-w-0">
+                <span className="flex items-baseline justify-between gap-3">
+                  <span className="text-body font-semibold text-content">{option.label}</span>
+                  <span className="text-caption text-content-faint">{option.extension}</span>
+                </span>
+                <span className="block text-caption text-content-muted">{option.hint}</span>
+              </span>
+            </button>
+          ))}
+        </div>,
+        document.body,
+      )}
+    </>
+  )
+}

client/src/components/Collections/CollectionHero.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-COLHERO-001 to FE-COMP-COLHERO-011
+// FE-COMP-COLHERO-001 to FE-COMP-COLHERO-015
 import React from 'react';
 import { render, screen, within } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
@@ -160,4 +160,42 @@ describe('CollectionHero', () => {
     expect(within(share).queryByText('3')).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Share' })).not.toBeInTheDocument();
   });
+
+  // ── Export as a file (#2198) ───────────────────────────────────────────
+
+  it('FE-COMP-COLHERO-012: offers Export beside Edit and Share, in that order', async () => {
+    const onExport = vi.fn();
+    renderHero({ canEdit: true, canShare: true, isOwner: true, onExport });
+
+    const actions = ['Edit', 'Export', 'Share'].map(name => screen.getByRole('button', { name }));
+    // Reading order in the DOM is the reading order on screen.
+    const all = [...document.querySelectorAll('.col-hero-actions button')];
+    expect(all).toEqual(actions);
+
+    // Export asks which format first (#2301).
+    await userEvent.click(actions[1]);
+    await userEvent.click(screen.getByRole('menuitem', { name: /TREK list/ }));
+    expect(onExport).toHaveBeenCalledWith('trek');
+  });
+
+  it('FE-COMP-COLHERO-013: has no Export button where there is no list to export', () => {
+    renderHero({ onExport: undefined });
+    expect(screen.queryByRole('button', { name: 'Export' })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLHERO-014: a viewer may export, since exporting reads and does not write', async () => {
+    const onExport = vi.fn();
+    renderHero({ canEdit: false, canShare: false, isOwner: false, onExport });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Export' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: /GPX/ }));
+
+    expect(onExport).toHaveBeenCalledWith('gpx');
+    expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLHERO-015: refuses a second click while the first export is still running', () => {
+    renderHero({ onExport: vi.fn(), exporting: true });
+    expect(screen.getByRole('button', { name: 'Export' })).toBeDisabled();
+  });
 });

client/src/components/Collections/CollectionHero.tsx

@@ -3,6 +3,8 @@ import { avatarSrc } from '../../utils/avatarSrc'
 import { Share2, Users, Link2, Pencil } from 'lucide-react'
 import type { CollectionMember, CollectionLink } from '@trek/shared'
 import type { TranslationFn } from '../../types'
+import CollectionExportMenu from './CollectionExportMenu'
+import type { CollectionExportFormat } from './collectionFile'
 
 const AV_COLORS = ['#6366f1', '#ec4899', '#14b8a6', '#f97316', '#8b5cf6', '#3b82f6', '#ef4444', '#22c55e']
 
@@ -26,14 +28,18 @@ interface CollectionHeroProps {
   onEdit: () => void
   shareMemberCount: number
   onShare: () => void
+  /** Absent on the "All saved" pseudo-list, which is a view rather than a list. */
+  onExport?: (format: CollectionExportFormat) => void
+  exporting?: boolean
   t: TranslationFn
 }
 
 /**
  * The page header — a colour-washed (or cover-image) glass hero that gives the
  * active list an identity: an eyebrow with the sharing state + member avatars,
- * the big list name, an optional description + link chips, and a Share action
- * top-right. Filtering lives in the toolbar above the places, not here.
+ * the big list name, an optional description + link chips, and the Edit,
+ * Export and Share actions top-right. Filtering lives in the toolbar above the
+ * places, not here.
  * Modelled on the dashboard hero-trip.
  */
 function linkHost(url: string): string {
@@ -42,7 +48,7 @@ function linkHost(url: string): string {
 
 export default function CollectionHero({
   eyebrow, title, color, coverImage, description, links,
-  members, canShare, isOwner, canEdit, onEdit, shareMemberCount, onShare, t,
+  members, canShare, isOwner, canEdit, onEdit, shareMemberCount, onShare, onExport, exporting, t,
 }: CollectionHeroProps): React.ReactElement {
   const accepted = members.filter(m => m.status === 'accepted' || m.is_owner)
   const showAvatars = accepted.length > 1
@@ -94,6 +100,7 @@ export default function CollectionHero({
                 <span className="txt">{t('common.edit')}</span>
               </button>
             )}
+            {onExport && <CollectionExportMenu onExport={onExport} exporting={exporting} t={t} />}
             {canShare && (
               <button
                 type="button"

client/src/components/Collections/CollectionMap.tsx

@@ -29,7 +29,10 @@ export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, on
       <MapViewAuto
         places={pts}
         selectedPlaceId={selectedPlaceId}
-        hoverDisabled
+        // Hover was off here, so a wall of round photos gave no way to tell what any of
+        // them were without clicking. The trip map has said what a marker is all along;
+        // this one adds the rating, because "which of these did I like" is exactly the
+        // question a small picture cannot answer.
         onMarkerClick={onOpenPlace}
         onMapClick={onDeselect ? () => onDeselect() : undefined}
         // No center/zoom: the map frames itself on the collection's places at mount, and

client/src/components/Collections/CollectionPlaceDetail.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-COLDETAIL-001 to FE-COMP-COLDETAIL-043
+// FE-COMP-COLDETAIL-001 to FE-COMP-COLDETAIL-048
 import React from 'react';
 import { render, screen, fireEvent, waitFor, within } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
@@ -602,3 +602,89 @@ describe('CollectionPlaceDetail: editable address', () => {
     expect(screen.getByPlaceholderText('Street, City, Country')).toHaveValue('Somewhere');
   });
 });
+
+// ── Cover controls sit beside the close button ───────────────────────────────
+
+describe('CollectionPlaceDetail: cover controls', () => {
+  it('FE-COMP-COLDETAIL-044: the camera sits in the top right row, just left of the close button', async () => {
+    renderDetail({ canEdit: true, onUploadImage: vi.fn() });
+    const camera = await screen.findByRole('button', { name: 'Upload image' });
+    const close = screen.getByRole('button', { name: 'Close' });
+
+    const row = close.parentElement as HTMLElement;
+    expect(camera.parentElement).toBe(row);
+    expect(camera.nextElementSibling).toBe(close);
+    // Same class as the close button, so the same round look, hover and phone size.
+    expect(camera).toHaveClass('col-detail-close');
+    // The category chip keeps the top left corner to itself.
+    const chip = screen.getByText('Food').closest('.col-detail-cover-cat') as HTMLElement;
+    expect(row.contains(chip)).toBe(false);
+  });
+
+  it('FE-COMP-COLDETAIL-045: with a custom cover the row reads remove, change, close and change still opens the picker', async () => {
+    const user = userEvent.setup();
+    renderDetail({ canEdit: true, onUploadImage: vi.fn(), place: { ...place, image_url: '/uploads/places/mock.jpg' } });
+    const change = await screen.findByRole('button', { name: 'Change image' });
+    const remove = screen.getByRole('button', { name: 'Remove image' });
+    const close = screen.getByRole('button', { name: 'Close' });
+
+    expect(Array.from((close.parentElement as HTMLElement).querySelectorAll('button'))).toEqual([remove, change, close]);
+    expect(remove).toHaveClass('col-detail-close');
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const clicked = vi.fn();
+    input.addEventListener('click', clicked);
+    await user.click(change);
+    expect(clicked).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-COLDETAIL-046: while an upload runs the camera spins, ignores clicks and the remove control steps aside', async () => {
+    const user = userEvent.setup();
+    const onUploadImage = vi.fn(() => new Promise<void>(() => {}));
+    renderDetail({ canEdit: true, onUploadImage, place: { ...place, image_url: '/uploads/places/mock.jpg' } });
+    await screen.findByRole('button', { name: 'Change image' });
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [new File(['x'], 'cover.png', { type: 'image/png' })] } });
+
+    const change = screen.getByRole('button', { name: 'Change image' });
+    await waitFor(() => expect(change.querySelector('.animate-spin')).not.toBeNull());
+    expect(screen.queryByRole('button', { name: 'Remove image' })).not.toBeInTheDocument();
+    expect(change.nextElementSibling).toBe(screen.getByRole('button', { name: 'Close' }));
+
+    const clicked = vi.fn();
+    input.addEventListener('click', clicked);
+    await user.click(change);
+    expect(clicked).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLDETAIL-047: a long category shares the top bar with the controls and ellipsizes instead of running under them', async () => {
+    const long = 'Restaurants, cafes and late night bars';
+    renderDetail({
+      canEdit: true,
+      onUploadImage: vi.fn(),
+      place: { ...place, image_url: '/uploads/places/mock.jpg', category: { id: 1, name: long, color: '#f00', icon: null } },
+    });
+    const controls = (await screen.findByRole('button', { name: 'Close' })).parentElement as HTMLElement;
+    const text = screen.getByText(long);
+    const chip = text.closest('.col-detail-cover-cat') as HTMLElement;
+    const bar = controls.parentElement as HTMLElement;
+
+    expect(controls.querySelectorAll('button')).toHaveLength(3);
+    // Chip first, controls last in one flex bar: the chip only gets what the buttons leave.
+    expect(Array.from(bar.children)).toEqual([chip, controls]);
+    expect(bar).toHaveClass('absolute', 'flex', 'left-[14px]', 'right-[12px]', 'top-[12px]');
+    expect(controls).toHaveClass('ms-auto', 'flex-none');
+    expect(chip).toHaveClass('min-w-0');
+    expect(text).toHaveClass('truncate');
+  });
+
+  it('FE-COMP-COLDETAIL-048: without a category the controls still hold the end of the bar', async () => {
+    renderDetail({ canEdit: true, onUploadImage: vi.fn(), place: { ...place, category: undefined } });
+    const controls = (await screen.findByRole('button', { name: 'Close' })).parentElement as HTMLElement;
+
+    expect(document.querySelector('.col-detail-cover-cat')).toBeNull();
+    expect(Array.from((controls.parentElement as HTMLElement).children)).toEqual([controls]);
+    expect(controls).toHaveClass('ms-auto');
+  });
+});

client/src/components/Collections/CollectionPlaceDetail.tsx

@@ -180,39 +180,45 @@ export default function CollectionPlaceDetail({
       <div className="col-detail-cover" style={banner ? undefined : { backgroundImage: entityGradient(place.id) }}>
         {banner && <img src={banner} alt="" />}
         <div className="col-detail-cover-scrim" />
-        {place.category?.name && (
-          <span className="col-detail-cover-cat" style={{ ['--cat' as string]: place.category.color || '#6366f1' }}>
-            <CatIcon size={12} /> {place.category.name}
-          </span>
-        )}
-        <button type="button" className="col-detail-close" onClick={onClose} aria-label={t('common.close')}><X size={16} /></button>
-        {canEdit && onUploadImage && (
-          <div style={{ position: 'absolute', top: 10, left: 10, display: 'flex', gap: 6, zIndex: 2 }}>
-            <Tooltip label={place.image_url ? t('places.changeImage') : t('places.uploadImage')} placement="bottom">
-              <button
-                type="button"
-                onClick={() => { if (!imgBusy) coverInputRef.current?.click() }}
-                aria-label={place.image_url ? t('places.changeImage') : t('places.uploadImage')}
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: 8, border: 'none', cursor: imgBusy ? 'default' : 'pointer', background: 'rgba(0,0,0,0.55)', color: '#fff', backdropFilter: 'blur(4px)' }}
-              >
-                {imgBusy ? <Loader2 size={15} className="animate-spin" /> : <Camera size={15} />}
-              </button>
-            </Tooltip>
-            {place.image_url && !imgBusy && (
-              <Tooltip label={t('places.removeImage')} placement="bottom">
-                <button
-                  type="button"
-                  onClick={handleImageRemove}
-                  aria-label={t('places.removeImage')}
-                  style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: 8, border: 'none', cursor: 'pointer', background: 'rgba(0,0,0,0.55)', color: '#fff', backdropFilter: 'blur(4px)' }}
-                >
-                  <Trash2 size={15} />
-                </button>
-              </Tooltip>
+        {/* Chip and cover controls share the top bar. The controls keep the end and
+            never shrink, so a long category name ellipsizes instead of sliding under
+            them, however many buttons there are and whatever size phones give them. */}
+        <div className="absolute left-[14px] right-[12px] top-[12px] z-[2] flex items-center gap-[8px]">
+          {place.category?.name && (
+            <span className="col-detail-cover-cat min-w-0" style={{ ['--cat' as string]: place.category.color || '#6366f1' }}>
+              <CatIcon size={12} className="flex-none" />
+              <span className="truncate">{place.category.name}</span>
+            </span>
+          )}
+          {/* The cover controls wear the close button's class, so they get its look,
+              hover and phone size. */}
+          <div className="ms-auto flex flex-none gap-[6px]">
+            {canEdit && onUploadImage && (
+              <>
+                <input ref={coverInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp,.heic,.heif" style={{ display: 'none' }} onChange={handleCoverPick} />
+                {place.image_url && !imgBusy && (
+                  <Tooltip label={t('places.removeImage')} placement="bottom">
+                    <button type="button" className="col-detail-close" onClick={handleImageRemove} aria-label={t('places.removeImage')}>
+                      <Trash2 size={16} />
+                    </button>
+                  </Tooltip>
+                )}
+                <Tooltip label={place.image_url ? t('places.changeImage') : t('places.uploadImage')} placement="bottom">
+                  <button
+                    type="button"
+                    className="col-detail-close"
+                    style={imgBusy ? { cursor: 'default' } : undefined}
+                    onClick={() => { if (!imgBusy) coverInputRef.current?.click() }}
+                    aria-label={place.image_url ? t('places.changeImage') : t('places.uploadImage')}
+                  >
+                    {imgBusy ? <Loader2 size={16} className="animate-spin" /> : <Camera size={16} />}
+                  </button>
+                </Tooltip>
+              </>
             )}
-            <input ref={coverInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp,.heic,.heif" style={{ display: 'none' }} onChange={handleCoverPick} />
+            <button type="button" className="col-detail-close" onClick={onClose} aria-label={t('common.close')}><X size={16} /></button>
           </div>
-        )}
+        </div>
         <div className="col-detail-head">
           {editing
             ? <input value={name} onChange={e => setName(e.target.value)} className="col-detail-name-input" autoFocus aria-label={t('collections.listName')} />
@@ -222,35 +228,12 @@ export default function CollectionPlaceDetail({
 
       <div className="col-detail-body">
         {/* Meta (view only) */}
-        {!editing && (place.address || navigationTargets.length > 0) && (
+        {!editing && place.address && (
           <div className="col-detail-meta">
             {place.address && <span className="col-detail-addr"><MapPin size={12} /> {place.address}</span>}
             {/* Same picker as inside a trip (#1455). A saved place is somewhere
                 you intend to go, and until now the only way to get directions
                 was to add it to a trip first. */}
-            {navigationTargets.length > 0 && (
-              <>
-                <button
-                  ref={navBtnRef}
-                  type="button"
-                  className="col-detail-nav"
-                  onClick={() => {
-                    if (navigationTargets.length === 1) openNavigationTarget(navigationTargets[0])
-                    else setNavOpen(o => !o)
-                  }}
-                >
-                  <Navigation size={12} />
-                  {navigationTargets.length === 1 ? navigationTargets[0].label : t('inspector.navigation')}
-                </button>
-                {navOpen && (
-                  <NavigationMenu
-                    targets={navigationTargets}
-                    anchor={navBtnRef.current}
-                    onClose={() => setNavOpen(false)}
-                  />
-                )}
-              </>
-            )}
           </div>
         )}
 
@@ -258,9 +241,22 @@ export default function CollectionPlaceDetail({
         <StatusSegment status={place.status} onSet={canEdit ? onSetStatus : () => {}} t={t} />
 
         {/* Collaborative rating (#1435) — every member votes; the average shows. */}
-        {onRate && (
-          <div style={{ padding: '2px 0' }}>
-            <PlaceRating ratings={place.ratings ?? []} ratingAvg={place.rating_avg} onRate={onRate} />
+        {/* Rating and labels on one line, each on its own ground.
+            A bare line of stars read as another row of text, and the labels tried the
+            cover photo first — where a blue chip on a blue sky is simply not there.
+            Side by side they are two badges answering two questions about the place. */}
+        {(onRate || assignedLabels.length > 0) && (
+          <div className="col-detail-badges">
+            {onRate && (
+              <div className="col-detail-rating">
+                <PlaceRating ratings={place.ratings ?? []} ratingAvg={place.rating_avg} onRate={onRate} />
+              </div>
+            )}
+            {!editing && assignedLabels.map(l => (
+              <span key={l.id} className="col-labelchip on static big" style={{ ['--label' as string]: l.color || 'var(--accent)' }}>
+                <span className="col-labelchip-dot" /> {l.name}
+              </span>
+            ))}
           </div>
         )}
 
@@ -334,15 +330,6 @@ export default function CollectionPlaceDetail({
           </div>
         ) : (
           <>
-            {assignedLabels.length > 0 && (
-              <div className="col-detail-labels">
-                {assignedLabels.map(l => (
-                  <span key={l.id} className="col-labelchip on static" style={{ ['--label' as string]: l.color || 'var(--accent)' }}>
-                    <span className="col-labelchip-dot" /> {l.name}
-                  </span>
-                ))}
-              </div>
-            )}
             {place.description && (
               <div className="col-detail-md collab-note-md">
                 <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{place.description}</Markdown>
@@ -371,6 +358,32 @@ export default function CollectionPlaceDetail({
           <>
             {canEdit && <button type="button" onClick={() => setEditing(true)} className="col-detail-btn"><Pencil size={14} /> {t('common.edit')}</button>}
             <button type="button" onClick={onCopyToTrip} className="col-detail-btn"><Copy size={14} /> {t('collections.copyToTrip')}</button>
+            {/* Beside the other two rather than up by the address: getting directions is
+                something you DO with the place, like editing it or copying it into a
+                trip, and the row of things you do belongs in one place. */}
+            {navigationTargets.length > 0 && (
+              <>
+                <button
+                  ref={navBtnRef}
+                  type="button"
+                  className="col-detail-btn"
+                  onClick={() => {
+                    if (navigationTargets.length === 1) openNavigationTarget(navigationTargets[0])
+                    else setNavOpen(o => !o)
+                  }}
+                >
+                  <Navigation size={14} />
+                  {navigationTargets.length === 1 ? navigationTargets[0].label : t('inspector.navigation')}
+                </button>
+                {navOpen && (
+                  <NavigationMenu
+                    targets={navigationTargets}
+                    anchor={navBtnRef.current}
+                    onClose={() => setNavOpen(false)}
+                  />
+                )}
+              </>
+            )}
             <div className="col-detail-footer-spacer" />
             {canDelete && <button type="button" onClick={onRemove} className="col-detail-btn danger"><Trash2 size={14} /> {t('collections.removeFromList')}</button>}
           </>

client/src/components/Collections/ImportCollectionModal.test.tsx

@@ -0,0 +1,330 @@
+// FE-COMP-COLLIMPORT-001 to FE-COMP-COLLIMPORT-026
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import type { Collection, CollectionFile } from '@trek/shared';
+import { useTranslation } from '../../i18n/TranslationContext';
+import ImportCollectionModal from './ImportCollectionModal';
+import type { GpxReader } from './collectionFile';
+
+// The modal takes `t` as a prop, so this harness forwards the real English
+// translator and the assertions read as the strings a person sees.
+function Harness(props: Omit<React.ComponentProps<typeof ImportCollectionModal>, 't'>) {
+  const { t } = useTranslation();
+  return <ImportCollectionModal {...props} t={t} />;
+}
+
+const listFile: CollectionFile = {
+  format: 'trek.collection', version: 1, name: 'Lisbon',
+  description: 'Worth it if you have three days',
+  color: '#ef4444',
+  labels: [{ name: 'Must see', color: '#ff0000' }, { name: 'Rainy day', color: '#00ff00' }],
+  places: [{ name: 'Time Out Market' }, { name: 'Miradouro' }, { name: 'Pastéis de Belém' }],
+} as CollectionFile;
+
+function renderModal(overrides: Partial<React.ComponentProps<typeof ImportCollectionModal>> = {}) {
+  const props = {
+    onImport: vi.fn().mockResolvedValue(undefined),
+    onReadGpx: vi.fn().mockRejectedValue(new Error('no GPX expected here')),
+    onClose: vi.fn(),
+    ...overrides,
+  };
+  render(<Harness {...props} />);
+  return props;
+}
+
+/** Put a file into the hidden input the way a file picker would. */
+async function choose(content: string, name = 'list.trekcollection.json') {
+  const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+  const file = new File([content], name, { type: name.endsWith('.gpx') ? 'application/gpx+xml' : 'application/json' });
+  // jsdom's File has no usable text(); the component awaits it.
+  Object.defineProperty(file, 'text', { value: () => Promise.resolve(content) });
+  await userEvent.upload(input, file);
+}
+
+const importButton = () => screen.getByRole('button', { name: 'Import' });
+
+describe('ImportCollectionModal (#2198)', () => {
+  it('FE-COMP-COLLIMPORT-001: opens asking for a file, with Import not yet possible', () => {
+    renderModal();
+    expect(screen.getByText('Choose a list file')).toBeInTheDocument();
+    expect(importButton()).toBeDisabled();
+  });
+
+  it('FE-COMP-COLLIMPORT-002: shows what the file holds before anything is imported', async () => {
+    const props = renderModal();
+    await choose(JSON.stringify(listFile));
+
+    await waitFor(() => expect(screen.getByText('Worth it if you have three days')).toBeInTheDocument());
+    expect(screen.getByText('3 places')).toBeInTheDocument();
+    expect(screen.getByText('2 labels')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument();
+    expect(importButton()).toBeEnabled();
+    expect(props.onImport).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLLIMPORT-003: leaves the label count out when the file has none', async () => {
+    renderModal();
+    await choose(JSON.stringify({ ...listFile, labels: [] }));
+    await waitFor(() => expect(screen.getByText('3 places')).toBeInTheDocument());
+    expect(screen.queryByText(/labels$/)).toBeNull();
+  });
+
+  it('FE-COMP-COLLIMPORT-004: imports the file under its own name', async () => {
+    const props = renderModal();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(importButton()).toBeEnabled());
+
+    await userEvent.click(importButton());
+
+    await waitFor(() => expect(props.onImport).toHaveBeenCalledTimes(1));
+    // No name argument: the file's own name was kept.
+    expect(props.onImport).toHaveBeenCalledWith(expect.objectContaining({ name: 'Lisbon' }), undefined);
+  });
+
+  it('FE-COMP-COLLIMPORT-005: imports under a name the person typed instead', async () => {
+    const props = renderModal();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument());
+
+    await userEvent.clear(screen.getByDisplayValue('Lisbon'));
+    await userEvent.type(screen.getByRole('textbox'), 'Lisbon (from Ana)');
+    await userEvent.click(importButton());
+
+    await waitFor(() => expect(props.onImport).toHaveBeenCalledWith(expect.anything(), 'Lisbon (from Ana)'));
+  });
+
+  it('FE-COMP-COLLIMPORT-006: will not import under an empty name', async () => {
+    renderModal();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument());
+
+    await userEvent.clear(screen.getByRole('textbox'));
+
+    expect(importButton()).toBeDisabled();
+  });
+
+  it('FE-COMP-COLLIMPORT-007: says what is wrong with a file it cannot use', async () => {
+    renderModal();
+
+    await choose('not json');
+    await waitFor(() => expect(screen.getByText('That file could not be read.')).toBeInTheDocument());
+
+    await choose(JSON.stringify({ format: 'something.else' }));
+    await waitFor(() => expect(screen.getByText('That is not a TREK list file.')).toBeInTheDocument());
+  });
+
+  it('FE-COMP-COLLIMPORT-008: takes a good file after a bad one, and forgets the complaint', async () => {
+    renderModal();
+    await choose('not json');
+    await waitFor(() => expect(screen.getByText('That file could not be read.')).toBeInTheDocument());
+
+    await choose(JSON.stringify(listFile));
+
+    await waitFor(() => expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument());
+    expect(screen.queryByText('That file could not be read.')).toBeNull();
+  });
+
+  it('FE-COMP-COLLIMPORT-009: keeps the dialog open and says why when the import fails', async () => {
+    const props = renderModal({ onImport: vi.fn().mockRejectedValue(new Error('the server said no')) });
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(importButton()).toBeEnabled());
+
+    await userEvent.click(importButton());
+
+    await waitFor(() => expect(screen.getByText('the server said no')).toBeInTheDocument());
+    expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument();
+    expect(props.onClose).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLLIMPORT-010: closes without importing on Cancel', async () => {
+    const props = renderModal();
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+    expect(props.onImport).not.toHaveBeenCalled();
+  });
+});
+
+describe('ImportCollectionModal with a GPX (#2301)', () => {
+  const gpx = '<?xml version="1.0"?><gpx version="1.1"><wpt lat="1" lon="2"><name>Pena Palace</name></wpt></gpx>';
+  const gpxFile: CollectionFile = {
+    format: 'trek.collection', version: 1, name: 'Sintra loop',
+    places: [{ name: 'Pena Palace' }, { name: 'Moorish Castle' }],
+  } as CollectionFile;
+  const refusal = (code: string) => Object.assign(new Error('Request failed'), { response: { status: 400, data: { error: 'no', code } } });
+
+  it('FE-COMP-COLLIMPORT-011: says which files it takes', () => {
+    renderModal();
+    expect(screen.getByText('.trekcollection.json · .gpx')).toBeInTheDocument();
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(input.accept).toContain('.gpx');
+  });
+
+  it('FE-COMP-COLLIMPORT-012: shows what a GPX holds, and what of it will not become a place', async () => {
+    const onReadGpx = vi.fn().mockResolvedValue({ file: gpxFile, skipped: 2, track_points: 8 });
+    const props = renderModal({ onReadGpx });
+
+    await choose(gpx, 'sintra.gpx');
+
+    await waitFor(() => expect(screen.getByDisplayValue('Sintra loop')).toBeInTheDocument());
+    expect(onReadGpx).toHaveBeenCalledWith(gpx, 'sintra.gpx');
+    expect(screen.getByText('2 places')).toBeInTheDocument();
+    expect(screen.getByText('2 waypoints without usable coordinates are left out.')).toBeInTheDocument();
+    expect(screen.getByText('This file also has 8 track points. Tracks are not imported, only waypoints.')).toBeInTheDocument();
+    // The note about ratings and members is about TREK files; a GPX never had any.
+    expect(screen.queryByText(/Ratings, members/)).toBeNull();
+
+    await userEvent.click(importButton());
+    await waitFor(() => expect(props.onImport).toHaveBeenCalledWith(gpxFile, undefined));
+  });
+
+  it('FE-COMP-COLLIMPORT-013: imports a GPX under a name the person typed', async () => {
+    const props = renderModal({ onReadGpx: vi.fn().mockResolvedValue({ file: gpxFile, skipped: 0, track_points: 0 }) });
+    await choose(gpx, 'sintra.gpx');
+    await waitFor(() => expect(screen.getByDisplayValue('Sintra loop')).toBeInTheDocument());
+
+    await userEvent.clear(screen.getByRole('textbox'));
+    await userEvent.type(screen.getByRole('textbox'), 'Sintra with the kids');
+    await userEvent.click(importButton());
+
+    await waitFor(() => expect(props.onImport).toHaveBeenCalledWith(gpxFile, 'Sintra with the kids'));
+    expect(screen.queryByText(/track points/)).toBeNull();
+  });
+
+  it('FE-COMP-COLLIMPORT-014: will not make an empty list of a GPX that only has a track', async () => {
+    const trackOnly = { ...gpxFile, places: [] };
+    renderModal({ onReadGpx: vi.fn().mockResolvedValue({ file: trackOnly, skipped: 0, track_points: 120 }) });
+
+    await choose(gpx, 'track.gpx');
+
+    await waitFor(() => expect(screen.getByText('This GPX file has no waypoints, so there is nothing to import.')).toBeInTheDocument());
+    expect(screen.getByText('This file also has 120 track points. Tracks are not imported, only waypoints.')).toBeInTheDocument();
+    expect(importButton()).toBeDisabled();
+  });
+
+  it('FE-COMP-COLLIMPORT-015: says in its own words why a GPX was refused', async () => {
+    const onReadGpx = vi.fn()
+      .mockRejectedValueOnce(refusal('not-gpx'))
+      .mockRejectedValueOnce(refusal('too-many-places'))
+      .mockRejectedValueOnce(refusal('unreadable'));
+    renderModal({ onReadGpx });
+
+    await choose(gpx, 'a.gpx');
+    await waitFor(() => expect(screen.getByText('That is not a GPX file.')).toBeInTheDocument());
+    await choose(gpx, 'b.gpx');
+    await waitFor(() => expect(screen.getByText(
+      'That file has more than 1000 places. Split it and import the parts one at a time.',
+    )).toBeInTheDocument());
+    await choose(gpx, 'c.gpx');
+    await waitFor(() => expect(screen.getByText('That file could not be read.')).toBeInTheDocument());
+    expect(importButton()).toBeDisabled();
+  });
+
+  it('FE-COMP-COLLIMPORT-016: says it is reading while the server reads, and why it could not', async () => {
+    let fail: ((err: unknown) => void) | null = null;
+    const onReadGpx = vi.fn<GpxReader>(() => new Promise((_, reject) => { fail = reject; }));
+    renderModal({ onReadGpx });
+
+    await choose(gpx, 'slow.gpx');
+    await waitFor(() => expect(screen.getByText('Reading the file…')).toBeInTheDocument());
+
+    fail!(Object.assign(new Error('x'), { response: { status: 503, data: { error: 'The server is busy' } } }));
+
+    await waitFor(() => expect(screen.getByText('The server is busy')).toBeInTheDocument());
+    expect(screen.getByText('Choose a list file')).toBeInTheDocument();
+  });
+});
+
+// ── The same file into a list that is already there (#2301 follow-up) ────────
+
+describe('ImportCollectionModal into an existing list', () => {
+  const lists = [
+    { id: 7, owner_id: 1, name: 'Lisbon 2027', color: '#22c55e', place_count: 4 },
+    { id: 9, owner_id: 1, name: 'Porto', color: '#3b82f6', place_count: 2 },
+  ] as Collection[];
+
+  const intoProps = (over: Partial<React.ComponentProps<typeof ImportCollectionModal>> = {}) =>
+    renderModal({ onImportInto: vi.fn().mockResolvedValue(undefined), lists, ...over });
+
+  it('FE-COMP-COLLIMPORT-020: offers the choice only once a file has been read', async () => {
+    intoProps();
+    expect(screen.queryByText('Add to a list')).not.toBeInTheDocument();
+
+    await choose(JSON.stringify(listFile));
+
+    await waitFor(() => expect(screen.getByText('Add to a list')).toBeInTheDocument());
+    expect(screen.getByText('New list')).toBeInTheDocument();
+    // A new list stays the default, so nothing changes for anyone who ignores it.
+    expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument();
+    expect(importButton()).toBeEnabled();
+  });
+
+  it('FE-COMP-COLLIMPORT-021: keeps to a new list when there is nothing to add to', async () => {
+    renderModal({ onImportInto: vi.fn(), lists: [] });
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument());
+
+    expect(screen.queryByText('Add to a list')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLIMPORT-022: adds the file to the list that was picked, and asks for no name', async () => {
+    const props = intoProps();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByText('Add to a list')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Add to a list'));
+    expect(screen.queryByDisplayValue('Lisbon')).not.toBeInTheDocument();
+    await userEvent.click(screen.getByText('Porto'));
+    await userEvent.click(screen.getByRole('button', { name: 'Add to list' }));
+
+    await waitFor(() => expect(props.onImportInto).toHaveBeenCalledWith(expect.objectContaining({ name: 'Lisbon' }), 9));
+    expect(props.onImport).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLLIMPORT-023: starts on the list that is open, whatever order they come in', async () => {
+    const props = intoProps({ defaultListId: 9 });
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByText('Add to a list')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Add to a list'));
+    await userEvent.click(screen.getByRole('button', { name: 'Add to list' }));
+
+    await waitFor(() => expect(props.onImportInto).toHaveBeenCalledWith(expect.anything(), 9));
+  });
+
+  it('FE-COMP-COLLIMPORT-024: says what adding to a list does and does not do', async () => {
+    intoProps();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByText('Add to a list')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Add to a list'));
+
+    expect(screen.getByText(/Places the list already has stay as they are/)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLIMPORT-025: keeps the dialog open and says why when adding fails', async () => {
+    const onImportInto = vi.fn().mockRejectedValue(
+      Object.assign(new Error('x'), { response: { status: 403, data: { error: 'You have read-only access to this list' } } }),
+    );
+    intoProps({ onImportInto });
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByText('Add to a list')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Add to a list'));
+    await userEvent.click(screen.getByRole('button', { name: 'Add to list' }));
+
+    await waitFor(() => expect(screen.getByText('You have read-only access to this list')).toBeInTheDocument());
+  });
+
+  it('FE-COMP-COLLIMPORT-026: goes back to a new list with the name it started with', async () => {
+    const props = intoProps();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByText('Add to a list')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Add to a list'));
+    await userEvent.click(screen.getByText('New list'));
+    await userEvent.click(importButton());
+
+    await waitFor(() => expect(props.onImport).toHaveBeenCalledWith(expect.objectContaining({ name: 'Lisbon' }), undefined));
+    expect(props.onImportInto).not.toHaveBeenCalled();
+  });
+});

client/src/components/Collections/ImportCollectionModal.tsx

@@ -0,0 +1,373 @@
+import React, { useMemo, useRef, useState } from 'react'
+import { Upload, FileJson, Loader2, MapPin, Tag, AlertCircle, Route, Info, Plus, FolderInput, Check, Search, Bookmark } from 'lucide-react'
+import Modal from '../shared/Modal'
+import { MAX_COLLECTION_FILE_PLACES, type Collection, type CollectionFile } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+import { getApiErrorMessage } from '../../types'
+import {
+  readCollectionFile,
+  type CollectionFileError,
+  type GpxLeftovers,
+  type GpxReader,
+  COLLECTION_FILE_EXTENSION,
+  COLLECTION_GPX_EXTENSION,
+} from './collectionFile'
+
+interface ImportCollectionModalProps {
+  onImport: (file: CollectionFile, name?: string) => Promise<void>
+  /** Adds the file to a list that is already there. Without it the dialog only makes new ones. */
+  onImportInto?: (file: CollectionFile, collectionId: number) => Promise<void>
+  /** The lists this person may add to; the server applies the same rule again. */
+  lists?: Collection[]
+  /** The list that is open, so the obvious target is the one already selected. */
+  defaultListId?: number | null
+  /** Reads a GPX into a list file (#2301); the server does the parsing. */
+  onReadGpx: GpxReader
+  onClose: () => void
+  t: TranslationFn
+}
+
+/** Keyed by the error type, so a new way for a file to fail does not build without its words. */
+const ERROR_KEYS: Record<CollectionFileError, string> = {
+  'too-large': 'collections.file.errorTooLarge',
+  unreadable: 'collections.file.errorUnreadable',
+  'not-a-collection': 'collections.file.errorNotACollection',
+  'not-gpx': 'collections.file.errorNotGpx',
+  'too-many-places': 'collections.file.errorTooManyPlaces',
+}
+
+/** What a GPX held besides its places, said before anything is imported. */
+function GpxNotes({ leftovers, placeCount, t }: { leftovers: GpxLeftovers; placeCount: number; t: TranslationFn }) {
+  const notes = [
+    placeCount === 0 && t('collections.file.gpxEmpty'),
+    leftovers.skipped > 0 && t('collections.file.gpxSkipped', { count: leftovers.skipped }),
+    leftovers.trackPoints > 0 && t('collections.file.gpxTrack', { count: leftovers.trackPoints }),
+  ].filter(Boolean)
+  if (notes.length === 0) return null
+  return (
+    <ul className="flex flex-col gap-1">
+      {notes.map(note => (
+        <li key={note as string} className="flex items-start gap-2 text-[12px] text-content-muted">
+          <Info size={13} className="shrink-0 mt-0.5 text-content-faint" />
+          <span>{note}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/** One of the two answers to "where do these places go", as a card you can tap. */
+function TargetCard({ active, icon: Icon, title, hint, onClick }: {
+  active: boolean
+  icon: typeof Plus
+  title: string
+  hint: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={`relative flex flex-col items-start gap-1.5 px-3 py-3 rounded-xl border text-left transition-colors ${
+        active ? 'border-accent bg-surface-hover' : 'border-edge hover:bg-surface-hover'
+      }`}
+    >
+      <span className={`w-8 h-8 rounded-lg flex items-center justify-center ${active ? 'bg-accent text-accent-text' : 'bg-surface-input text-content-muted'}`}>
+        <Icon size={15} />
+      </span>
+      <span className="text-[13px] font-semibold text-content">{title}</span>
+      <span className="text-[11.5px] text-content-faint leading-snug">{hint}</span>
+      {active && (
+        <span className="absolute top-2 right-2 w-4 h-4 rounded-full bg-accent text-accent-text flex items-center justify-center">
+          <Check size={11} strokeWidth={3} />
+        </span>
+      )}
+    </button>
+  )
+}
+
+/** The lists the file may be added to, the open one first. */
+function ListChoice({ lists, selectedId, onSelect, t }: {
+  lists: Collection[]
+  selectedId: number | null
+  onSelect: (id: number) => void
+  t: TranslationFn
+}) {
+  const [search, setSearch] = useState('')
+  const shown = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return q ? lists.filter(l => l.name.toLowerCase().includes(q)) : lists
+  }, [lists, search])
+
+  return (
+    <div className="flex flex-col gap-2">
+      {lists.length > 5 && (
+        <div className="relative">
+          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-content-faint" />
+          <input
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder={t('collections.file.searchLists')}
+            className="w-full pl-8 pr-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+          />
+        </div>
+      )}
+      <div className="flex flex-col gap-1 max-h-[34vh] overflow-y-auto -mx-1 px-1">
+        {shown.map(list => {
+          const active = list.id === selectedId
+          return (
+            <button
+              key={list.id}
+              type="button"
+              onClick={() => onSelect(list.id)}
+              aria-pressed={active}
+              className={`flex items-center gap-3 px-3 py-2.5 rounded-xl border text-left transition-colors ${
+                active ? 'border-accent bg-surface-hover' : 'border-edge bg-surface-card hover:bg-surface-hover'
+              }`}
+            >
+              <span className="w-9 h-9 min-w-[36px] rounded-lg flex items-center justify-center shrink-0 text-white" style={{ background: list.color || '#6366f1' }}>
+                <Bookmark size={15} />
+              </span>
+              <span className="flex-1 min-w-0">
+                <span className="block text-[13px] font-semibold text-content truncate">{list.name}</span>
+                <span className="block text-[11.5px] text-content-faint">{t('collections.placeCount', { count: list.place_count ?? 0 })}</span>
+              </span>
+              {active && <Check size={16} className="shrink-0 text-accent" />}
+            </button>
+          )
+        })}
+        {shown.length === 0 && (
+          <p className="text-center text-[13px] text-content-faint py-6">{t('collections.noOtherLists')}</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Read a list file or a GPX and make a list of it (#2198, #2301).
+ *
+ * Two steps on purpose. A file from somebody else is an unknown quantity, so
+ * it is read and shown first — how many places, which labels, what the list is
+ * called — and only then imported. The name is editable in the same breath,
+ * because a file called "Lisbon" from a friend is usually worth calling
+ * "Lisbon (from Ana)" on the way in, and renaming it afterwards means finding
+ * the list editor.
+ *
+ * A list file never leaves the browser as a file: it is parsed here. A GPX is
+ * read by the server into the same kind of list file, and from then on the two
+ * are one path: what goes to the import is a list file, through the same
+ * contract the server validates against.
+ *
+ * The file can go into a list that is already there instead of a new one. That
+ * is a choice rather than the default, because the two do different things: a
+ * new list is the file as it stands, while adding to a list leaves everything
+ * in it alone and skips the places it already has.
+ */
+export default function ImportCollectionModal({
+  onImport, onImportInto, lists, defaultListId, onReadGpx, onClose, t,
+}: ImportCollectionModalProps): React.ReactElement {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [file, setFile] = useState<CollectionFile | null>(null)
+  const [leftovers, setLeftovers] = useState<GpxLeftovers | null>(null)
+  const [name, setName] = useState('')
+  const [error, setError] = useState<CollectionFileError | 'failed' | null>(null)
+  const [failedMessage, setFailedMessage] = useState<string | null>(null)
+  const [reading, setReading] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [dragging, setDragging] = useState(false)
+  const [target, setTarget] = useState<'new' | 'existing'>('new')
+  // The open list first: it is the one somebody importing from inside a list means.
+  const targets = useMemo(() => {
+    const all = lists ?? []
+    const open = all.find(l => l.id === defaultListId)
+    return open ? [open, ...all.filter(l => l.id !== open.id)] : all
+  }, [lists, defaultListId])
+  const [listId, setListId] = useState<number | null>(() => targets[0]?.id ?? null)
+  const canChoose = !!onImportInto && targets.length > 0
+  const intoExisting = canChoose && target === 'existing'
+
+  const take = async (chosen: File | undefined) => {
+    if (!chosen || reading) return
+    setError(null)
+    setFailedMessage(null)
+    setReading(true)
+    try {
+      const result = await readCollectionFile(chosen, onReadGpx)
+      setFile(result.file)
+      setLeftovers(result.gpx ?? null)
+      setError(result.error)
+      if (result.file) setName(result.file.name)
+    } catch (err) {
+      setFile(null)
+      setLeftovers(null)
+      setError('failed')
+      setFailedMessage(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setReading(false)
+    }
+  }
+
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragging(false)
+    void take(e.dataTransfer.files?.[0])
+  }
+
+  const submit = async () => {
+    if (!file || busy) return
+    setBusy(true)
+    setError(null)
+    setFailedMessage(null)
+    try {
+      if (intoExisting && listId != null) {
+        await onImportInto!(file, listId)
+      } else {
+        const trimmed = name.trim()
+        await onImport(file, trimmed && trimmed !== file.name ? trimmed : undefined)
+      }
+    } catch (err) {
+      setError('failed')
+      setFailedMessage(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const errorText = error === 'failed'
+    ? (failedMessage ?? t('common.error'))
+    : error ? t(ERROR_KEYS[error], { count: MAX_COLLECTION_FILE_PLACES }) : null
+
+  // A GPX of nothing but a track would make an empty list, which is never what was meant.
+  const nothingToImport = !!leftovers && !!file && file.places.length === 0
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      title={t('collections.file.importTitle')}
+      size="sm"
+      footer={
+        <div className="flex justify-end gap-2">
+          <button type="button" onClick={onClose} className="px-4 py-2 rounded-lg text-[13px] font-medium text-content-muted hover:bg-surface-hover transition-colors">
+            {t('common.cancel')}
+          </button>
+          <button
+            type="button"
+            onClick={submit}
+            disabled={!file || busy || nothingToImport || (intoExisting ? listId == null : !name.trim())}
+            className="px-4 py-2 rounded-lg text-[13px] font-semibold bg-accent text-accent-text disabled:opacity-50 transition-opacity inline-flex items-center gap-2"
+          >
+            {busy && <Loader2 size={14} className="animate-spin" />}
+            {intoExisting ? t('collections.file.confirmInto') : t('collections.file.confirm')}
+          </button>
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-3">
+        <input
+          ref={inputRef}
+          type="file"
+          accept=".json,application/json,.gpx,application/gpx+xml"
+          className="hidden"
+          onChange={e => { void take(e.target.files?.[0]); e.target.value = '' }}
+        />
+
+        {!file ? (
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            onDragOver={e => { e.preventDefault(); setDragging(true) }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={onDrop}
+            disabled={reading}
+            aria-busy={reading}
+            className={`flex flex-col items-center justify-center gap-2 px-4 py-10 rounded-xl border border-dashed transition-colors ${
+              dragging ? 'border-accent bg-surface-hover' : 'border-edge hover:bg-surface-hover'
+            }`}
+          >
+            {reading ? <Loader2 size={22} className="text-content-faint animate-spin" /> : <Upload size={22} className="text-content-faint" />}
+            <span className="text-[13px] font-medium text-content">
+              {reading ? t('collections.file.reading') : t('collections.file.choose')}
+            </span>
+            <span className="text-[11.5px] text-content-faint">{COLLECTION_FILE_EXTENSION} · {COLLECTION_GPX_EXTENSION}</span>
+          </button>
+        ) : (
+          <>
+            <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl border border-edge bg-surface-card">
+              <span className="w-9 h-9 min-w-[36px] rounded-lg flex items-center justify-center shrink-0 text-white" style={{ background: file.color || '#6366f1' }}>
+                {leftovers ? <Route size={15} /> : <FileJson size={15} />}
+              </span>
+              <span className="flex-1 min-w-0">
+                <span className="block text-[13px] font-semibold text-content truncate">{file.name}</span>
+                <span className="flex items-center gap-3 text-[11.5px] text-content-faint">
+                  <span className="inline-flex items-center gap-1"><MapPin size={11} />{t('collections.placeCount', { count: file.places.length })}</span>
+                  {file.labels && file.labels.length > 0 && (
+                    <span className="inline-flex items-center gap-1"><Tag size={11} />{t('collections.file.labelCount', { count: file.labels.length })}</span>
+                  )}
+                </span>
+              </span>
+              <button type="button" onClick={() => inputRef.current?.click()} className="text-[12px] font-medium text-accent shrink-0 hover:underline">
+                {t('collections.file.change')}
+              </button>
+            </div>
+
+            {file.description && (
+              <p className="text-[12px] text-content-muted whitespace-pre-wrap">{file.description}</p>
+            )}
+
+            {leftovers && <GpxNotes leftovers={leftovers} placeCount={file.places.length} t={t} />}
+
+            {canChoose && (
+              <div className="grid grid-cols-2 gap-2">
+                <TargetCard
+                  active={target === 'new'}
+                  icon={Plus}
+                  title={t('collections.file.targetNew')}
+                  hint={t('collections.file.targetNewHint')}
+                  onClick={() => setTarget('new')}
+                />
+                <TargetCard
+                  active={intoExisting}
+                  icon={FolderInput}
+                  title={t('collections.file.targetExisting')}
+                  hint={t('collections.file.targetExistingHint')}
+                  onClick={() => setTarget('existing')}
+                />
+              </div>
+            )}
+
+            {intoExisting ? (
+              <>
+                <ListChoice lists={targets} selectedId={listId} onSelect={setListId} t={t} />
+                <p className="text-[11.5px] text-content-faint">{t('collections.file.intoHint')}</p>
+              </>
+            ) : (
+              <>
+                <label className="flex flex-col gap-1.5">
+                  <span className="text-[12px] font-medium text-content-muted">{t('collections.listName')}</span>
+                  <input
+                    value={name}
+                    onChange={e => setName(e.target.value)}
+                    maxLength={120}
+                    className="w-full px-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+                  />
+                </label>
+
+                {!leftovers && <p className="text-[11.5px] text-content-faint">{t('collections.file.hint')}</p>}
+              </>
+            )}
+          </>
+        )}
+
+        {errorText && (
+          <p className="flex items-start gap-2 text-[12px] text-danger">
+            <AlertCircle size={13} className="shrink-0 mt-0.5" />
+            <span>{errorText}</span>
+          </p>
+        )}
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/ListsRail.test.tsx

@@ -35,6 +35,7 @@ function renderRail(overrides: Partial<RailProps> = {}) {
     incomingInvites: [],
     onSelect: vi.fn(),
     onNewList: vi.fn(),
+    onImportList: vi.fn(),
     onAcceptInvite: vi.fn(),
     onDeclineInvite: vi.fn(),
     ...overrides,
@@ -93,7 +94,7 @@ describe('ListsRail', () => {
   it('FE-COMP-LISTSRAIL-007: renders a Shared section with its lists only when there are shared lists', () => {
     const { unmount } = render(<Harness {...{
       ownedLists: [rome], sharedLists: [], activeId: null, incomingInvites: [],
-      onSelect: vi.fn(), onNewList: vi.fn(), onAcceptInvite: vi.fn(), onDeclineInvite: vi.fn(),
+      onSelect: vi.fn(), onNewList: vi.fn(), onImportList: vi.fn(), onAcceptInvite: vi.fn(), onDeclineInvite: vi.fn(),
     }} />);
     expect(screen.queryByText('Shared')).not.toBeInTheDocument();
     unmount();
@@ -127,4 +128,18 @@ describe('ListsRail', () => {
     expect(screen.queryByText('Invites')).not.toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'All saved' })).toBeInTheDocument();
   });
+
+  it('FE-COMP-LISTSRAIL-011: offers Import beside New list, and it opens the file dialog (#2198)', async () => {
+    const user = userEvent.setup();
+    const props = renderRail();
+
+    const importBtn = screen.getByRole('button', { name: 'Import a list from a file' });
+    await user.click(importBtn);
+
+    expect(props.onImportList).toHaveBeenCalledTimes(1);
+    expect(props.onNewList).not.toHaveBeenCalled();
+    // New list keeps its label; import is the icon beside it.
+    expect(screen.getByRole('button', { name: 'New list' })).toHaveTextContent('New list');
+    expect(importBtn).toHaveTextContent('');
+  });
 });

client/src/components/Collections/ListsRail.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Plus, Layers, Users } from 'lucide-react'
+import { Plus, Layers, Users, Upload } from 'lucide-react'
 import type { Collection } from '@trek/shared'
 import type { TranslationFn } from '../../types'
 import { ALL_SAVED } from '../../store/collectionStore'
@@ -12,6 +12,8 @@ interface ListsRailProps {
   incomingInvites: IncomingCollectionInvite[]
   onSelect: (id: ActiveCollectionId) => void
   onNewList: () => void
+  /** Read a list file as a new list (#2198). */
+  onImportList: () => void
   onAcceptInvite: (id: number) => void
   onDeclineInvite: (id: number) => void
   t: TranslationFn
@@ -30,7 +32,7 @@ function ListRow({ list, active, onSelect }: { list: Collection; active: boolean
 }
 
 /**
- * Left rail of the user's lists: a "New list" action, the "All saved" union
+ * Left rail of the user's lists: "New list" and "Import list" actions, the "All saved" union
  * pseudo-list, owned lists (colour dot + count), a shared section, and an
  * incoming-invites block. Selecting a list makes it active; editing / deleting
  * happens from the Edit button in the hero of the active list.
@@ -38,14 +40,27 @@ function ListRow({ list, active, onSelect }: { list: Collection; active: boolean
 export default function ListsRail(props: ListsRailProps): React.ReactElement {
   const {
     ownedLists, sharedLists, activeId, incomingInvites,
-    onSelect, onNewList, onAcceptInvite, onDeclineInvite, t,
+    onSelect, onNewList, onImportList, onAcceptInvite, onDeclineInvite, t,
   } = props
 
   return (
     <>
-      <button type="button" onClick={onNewList} className="col-rail-new">
-        <Plus size={16} /> {t('collections.newList')}
-      </button>
+      <div className="col-rail-newrow">
+        <button type="button" onClick={onNewList} className="col-rail-new">
+          <Plus size={16} /> {t('collections.newList')}
+        </button>
+        {/* Import sits beside New rather than in the hero: a file becomes a NEW
+            list, so it belongs where lists are made, not on the one open. */}
+        <button
+          type="button"
+          onClick={onImportList}
+          className="col-rail-new col-rail-import"
+          aria-label={t('collections.file.importButton')}
+          title={t('collections.file.importTitle')}
+        >
+          <Upload size={15} />
+        </button>
+      </div>
 
       <div className="col-row">
         <button type="button" onClick={() => onSelect(ALL_SAVED)} className={`col-row-btn${activeId === ALL_SAVED ? ' on' : ''}`}>

client/src/components/Collections/collectionFile.test.ts

@@ -0,0 +1,198 @@
+// FE-COLL-FILE-001 to FE-COLL-FILE-020
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import {
+  collectionFileName,
+  downloadCollectionFile,
+  downloadCollectionGpx,
+  readCollectionFile,
+  COLLECTION_FILE_EXTENSION,
+  COLLECTION_GPX_EXTENSION,
+  type GpxReader,
+} from './collectionFile'
+import type { CollectionFile } from '@trek/shared'
+
+const file = (over: Partial<CollectionFile> = {}): CollectionFile => ({
+  format: 'trek.collection', version: 1, name: 'Lisbon', places: [{ name: 'Time Out Market' }], ...over,
+} as CollectionFile)
+
+/** A File whose text() the jsdom build does not provide on its own. */
+function asFile(content: string, size = content.length, name = 'list.trekcollection.json'): File {
+  return { size, name, text: () => Promise.resolve(content) } as unknown as File
+}
+
+/** A reader that must not be reached: a list file is never sent to the server. */
+const noGpx: GpxReader = () => { throw new Error('a list file went to the GPX reader') }
+
+/** A rejection the way axios delivers the server's refusal. */
+const refused = (code: string) => Object.assign(new Error('Request failed'), { response: { status: 400, data: { error: 'no', code } } })
+
+describe('collectionFileName', () => {
+  it('FE-COLL-FILE-001: turns a list name into a short ascii file name', () => {
+    expect(collectionFileName('Lisbon')).toBe('lisbon' + COLLECTION_FILE_EXTENSION)
+    expect(collectionFileName('Wochenende in Rom!')).toBe('wochenende-in-rom' + COLLECTION_FILE_EXTENSION)
+    expect(collectionFileName('東京')).toBe('collection' + COLLECTION_FILE_EXTENSION)
+  })
+
+  it('FE-COLL-FILE-002: caps a very long name rather than producing an unusable file name', () => {
+    const name = collectionFileName('a'.repeat(200))
+    expect(name).toBe('a'.repeat(40) + COLLECTION_FILE_EXTENSION)
+  })
+
+  it('FE-COLL-FILE-013: names a GPX the same way, with its own extension', () => {
+    expect(collectionFileName('Wochenende in Rom!', COLLECTION_GPX_EXTENSION)).toBe('wochenende-in-rom.gpx')
+  })
+})
+
+describe('downloads', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+  })
+
+  /** Captures what would be downloaded, and under which name. */
+  function captureDownload() {
+    vi.useFakeTimers()
+    const revoke = vi.fn()
+    const created: Blob[] = []
+    const names: string[] = []
+    vi.stubGlobal('URL', {
+      createObjectURL: (b: Blob) => { created.push(b); return 'blob:x' },
+      revokeObjectURL: revoke,
+    })
+    const click = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function (this: HTMLAnchorElement) {
+      expect(this.href).toContain('blob:')
+      names.push(this.download)
+    })
+    return { revoke, created, names, click }
+  }
+
+  it('FE-COLL-FILE-003: hands the browser a named JSON blob and releases it afterwards', () => {
+    const { revoke, created, names, click } = captureDownload()
+
+    downloadCollectionFile(file())
+
+    expect(click).toHaveBeenCalledTimes(1)
+    expect(names).toEqual(['lisbon' + COLLECTION_FILE_EXTENSION])
+    expect(created[0].type).toBe('application/json')
+    expect(document.querySelector('a')).toBeNull()
+    expect(revoke).not.toHaveBeenCalled()
+    vi.runAllTimers()
+    expect(revoke).toHaveBeenCalledWith('blob:x')
+  })
+
+  it('FE-COLL-FILE-014: hands the browser a GPX under the list name', async () => {
+    const { created, names } = captureDownload()
+
+    downloadCollectionGpx('Lisbon', '<gpx/>')
+
+    expect(names).toEqual(['lisbon.gpx'])
+    expect(created[0].type).toBe('application/gpx+xml')
+    expect(await created[0].text()).toBe('<gpx/>')
+  })
+})
+
+describe('readCollectionFile', () => {
+  it('FE-COLL-FILE-004: reads one of ours', async () => {
+    const result = await readCollectionFile(asFile(JSON.stringify(file())), noGpx)
+    expect(result.error).toBeNull()
+    expect(result.file?.name).toBe('Lisbon')
+    expect(result.gpx).toBeUndefined()
+  })
+
+  it('FE-COLL-FILE-005: refuses a file too large to be one, without reading it', async () => {
+    const text = vi.fn()
+    const huge = { size: 1024 * 1024 + 1, text } as unknown as File
+    const result = await readCollectionFile(huge, noGpx)
+    expect(result).toEqual({ file: null, error: 'too-large' })
+    expect(text).not.toHaveBeenCalled()
+  })
+
+  it('FE-COLL-FILE-006: says a file is unreadable when it is not JSON', async () => {
+    expect(await readCollectionFile(asFile('not json at all'), noGpx)).toEqual({ file: null, error: 'unreadable' })
+  })
+
+  it('FE-COLL-FILE-007: says a JSON that is not a list is not a list', async () => {
+    for (const content of ['{}', '[]', 'null', '"a string"', JSON.stringify({ format: 'something.else', version: 1, name: 'x', places: [] })]) {
+      expect(await readCollectionFile(asFile(content), noGpx), content).toEqual({ file: null, error: 'not-a-collection' })
+    }
+  })
+
+  it('FE-COLL-FILE-008: refuses a list with no name, since the list would have none', async () => {
+    const result = await readCollectionFile(asFile(JSON.stringify({ format: 'trek.collection', version: 1, name: '', places: [] })), noGpx)
+    expect(result.error).toBe('not-a-collection')
+  })
+
+  it('FE-COLL-FILE-009: reads an empty list, which is a list somebody has not filled yet', async () => {
+    const result = await readCollectionFile(asFile(JSON.stringify(file({ places: [] }))), noGpx)
+    expect(result.error).toBeNull()
+    expect(result.file?.places).toEqual([])
+  })
+
+  it('FE-COLL-FILE-010: keeps a place the envelope does not check, for the server to judge', async () => {
+    // The envelope counts places; each one is validated where it is written.
+    const result = await readCollectionFile(asFile(JSON.stringify(file({
+      places: [{ name: 'Fine' }, { nonsense: true }] as never,
+    }))), noGpx)
+    expect(result.error).toBeNull()
+    expect(result.file?.places).toHaveLength(2)
+  })
+
+  it('FE-COLL-FILE-011: refuses a file carrying more places than the contract allows', async () => {
+    const tooMany = Array.from({ length: 1001 }, (_, i) => ({ name: `Place ${i}` }))
+    const result = await readCollectionFile(asFile(JSON.stringify(file({ places: tooMany as never }))), noGpx)
+    expect(result.error).toBe('not-a-collection')
+  })
+
+  it('FE-COLL-FILE-012: reads a file from a later version, since its additions are optional', async () => {
+    const result = await readCollectionFile(asFile(JSON.stringify({ ...file(), version: 99, somethingNew: 'x' })), noGpx)
+    expect(result.error).toBeNull()
+    expect(result.file?.version).toBe(99)
+  })
+})
+
+describe('readCollectionFile with a GPX (#2301)', () => {
+  const gpx = '<?xml version="1.0"?><gpx version="1.1"><wpt lat="1" lon="2"><name>A</name></wpt></gpx>'
+
+  it('FE-COLL-FILE-015: sends a GPX to the reader with its file name and keeps what did not become a place', async () => {
+    const read = vi.fn<GpxReader>().mockResolvedValue({ file: file({ name: 'Favourites' }), skipped: 2, track_points: 40 })
+
+    const result = await readCollectionFile(asFile(gpx, gpx.length, 'favourites.gpx'), read)
+
+    expect(read).toHaveBeenCalledWith(gpx, 'favourites.gpx')
+    expect(result).toEqual({ file: expect.objectContaining({ name: 'Favourites' }), error: null, gpx: { skipped: 2, trackPoints: 40 } })
+  })
+
+  it('FE-COLL-FILE-016: knows a GPX by what it is, not by what it is called', async () => {
+    const read = vi.fn<GpxReader>().mockResolvedValue({ file: file(), skipped: 0, track_points: 0 })
+    // A byte-order mark and a blank line before the declaration, under a .xml name.
+    await readCollectionFile(asFile(String.fromCharCode(0xfeff) + '\n  ' + gpx, 100, 'export.xml'), read)
+    expect(read).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-COLL-FILE-017: holds a GPX to the same size limit, before reading it', async () => {
+    const read = vi.fn<GpxReader>()
+    expect(await readCollectionFile(asFile(gpx, 1024 * 1024 + 1, 'big.gpx'), read)).toEqual({ file: null, error: 'too-large' })
+    expect(read).not.toHaveBeenCalled()
+  })
+
+  it('FE-COLL-FILE-018: turns the reason the server refused a GPX into the dialog\'s own', async () => {
+    for (const code of ['unreadable', 'not-gpx', 'too-many-places', 'too-large'] as const) {
+      const read = vi.fn<GpxReader>().mockRejectedValue(refused(code))
+      expect(await readCollectionFile(asFile(gpx), read), code).toEqual({ file: null, error: code, gpx: null })
+    }
+  })
+
+  it('FE-COLL-FILE-019: passes on a failure that was not about the file', async () => {
+    const offline = vi.fn<GpxReader>().mockRejectedValue(new Error('Network Error'))
+    await expect(readCollectionFile(asFile(gpx), offline)).rejects.toThrow('Network Error')
+
+    const unknownCode = vi.fn<GpxReader>().mockRejectedValue(refused('something-new'))
+    await expect(readCollectionFile(asFile(gpx), unknownCode)).rejects.toThrow('Request failed')
+  })
+
+  it('FE-COLL-FILE-020: says a file is unreadable when its text cannot be had at all', async () => {
+    const broken = { size: 10, name: 'x.gpx', text: () => Promise.reject(new Error('gone')) } as unknown as File
+    expect(await readCollectionFile(broken, noGpx)).toEqual({ file: null, error: 'unreadable' })
+  })
+})

client/src/components/Collections/collectionFile.ts

@@ -0,0 +1,141 @@
+import {
+  COLLECTION_GPX_PROBLEMS,
+  collectionFileSchema,
+  MAX_COLLECTION_FILE_BYTES,
+  type CollectionFile,
+  type CollectionGpxProblem,
+  type CollectionGpxReadResult,
+} from '@trek/shared'
+
+/**
+ * The browser half of list export and import (#2198, #2301).
+ *
+ * Both files are built by the server, which is also where the decision about
+ * what may leave the instance lives (`collection-file.schema.ts`). This module
+ * only hands one to the browser as a download, and reads a chosen file back
+ * into something the import request will accept.
+ *
+ * A file that arrives here is a stranger's and is treated as one. A list file
+ * is read locally, never uploaded, parsed rather than evaluated, size-capped
+ * before parsing, and put through the shared contract so a field this build
+ * does not know is dropped instead of travelling on. A GPX is size-capped the
+ * same way and then sent as text to the server, which reads it with the XML
+ * library the trip importer already uses and hands back a list file: one side
+ * that parses XML, and it is the one that enforces the limits.
+ */
+
+export const COLLECTION_FILE_EXTENSION = '.trekcollection.json'
+export const COLLECTION_GPX_EXTENSION = '.gpx'
+
+/** The two ways a list can leave: whole, for another TREK, or as waypoints for everything else. */
+export type CollectionExportFormat = 'trek' | 'gpx'
+
+/** A file name from a list name: lowercase, ascii-ish, short. */
+export function collectionFileName(name: string, extension = COLLECTION_FILE_EXTENSION): string {
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 40)
+  return `${slug || 'collection'}${extension}`
+}
+
+function download(content: string, type: string, fileName: string): void {
+  const url = URL.createObjectURL(new Blob([content], { type }))
+  const a = document.createElement('a')
+  a.href = url
+  a.download = fileName
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  // Revoked on the next tick: revoking synchronously can cancel the download
+  // in some browsers before it has started reading the blob.
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+/** Hand the file to the browser as a download. */
+export function downloadCollectionFile(file: CollectionFile): void {
+  download(JSON.stringify(file, null, 2), 'application/json', collectionFileName(file.name))
+}
+
+/** Hand a list's GPX to the browser as a download, named like its list file would be. */
+export function downloadCollectionGpx(listName: string, gpx: string): void {
+  download(gpx, 'application/gpx+xml', collectionFileName(listName, COLLECTION_GPX_EXTENSION))
+}
+
+export type CollectionFileError = 'not-a-collection' | CollectionGpxProblem
+
+/** What a GPX held that did not become a place. */
+export interface GpxLeftovers {
+  /** Waypoints without usable coordinates. */
+  skipped: number
+  /** Track points and unnamed route points: lines, not places. */
+  trackPoints: number
+}
+
+/**
+ * Exactly one of `file` and `error` is set; `gpx` only when the file was one.
+ *
+ * Nullable fields rather than a discriminated union on an `ok` flag: the
+ * client compiles with `strict: false`, and without `strictNullChecks` a
+ * `{ok: true} | {ok: false}` union does not narrow, so every read of the
+ * failure branch would need a cast.
+ */
+export interface ParsedCollectionFile {
+  file: CollectionFile | null
+  error: CollectionFileError | null
+  gpx?: GpxLeftovers | null
+}
+
+/** Reads a GPX document into a list file. The server does that, so the caller supplies it. */
+export type GpxReader = (gpx: string, fileName: string) => Promise<CollectionGpxReadResult>
+
+/** A list file is JSON and JSON never opens with `<`, so this is all the sniffing a GPX needs. */
+function looksLikeXml(text: string): boolean {
+  const withoutBom = text.charCodeAt(0) === 0xfeff ? text.slice(1) : text
+  return withoutBom.trimStart().startsWith('<')
+}
+
+/** The reason the server gave for refusing a GPX, when it gave one this build knows. */
+function gpxProblemOf(err: unknown): CollectionGpxProblem | null {
+  const code: unknown = (err as { response?: { data?: { code?: unknown } } } | null)?.response?.data?.code
+  return COLLECTION_GPX_PROBLEMS.find(problem => problem === code) ?? null
+}
+
+async function readGpx(text: string, fileName: string, reader: GpxReader): Promise<ParsedCollectionFile> {
+  try {
+    const result = await reader(text, fileName)
+    return { file: result.file, error: null, gpx: { skipped: result.skipped, trackPoints: result.track_points } }
+  } catch (err) {
+    const problem = gpxProblemOf(err)
+    // No code means the failure was not the file's (offline, a 500), and that
+    // is for the dialog to report as it reports a failed import.
+    if (!problem) throw err
+    return { file: null, error: problem, gpx: null }
+  }
+}
+
+/**
+ * Read a chosen file into a list file, or say why it is not one.
+ *
+ * The failures are kept apart because they are different things a person can
+ * do something about: a file too big to be one of ours, a file that is not
+ * readable at all, a JSON that is not a TREK list, an XML that is not a GPX,
+ * and a GPX with more places than a list may hold.
+ */
+export async function readCollectionFile(file: File, readGpxFile: GpxReader): Promise<ParsedCollectionFile> {
+  if (file.size > MAX_COLLECTION_FILE_BYTES) return { file: null, error: 'too-large' }
+  let text: string
+  try {
+    text = await file.text()
+  } catch {
+    return { file: null, error: 'unreadable' }
+  }
+  if (looksLikeXml(text)) return readGpx(text, file.name ?? '', readGpxFile)
+  let raw: unknown
+  try {
+    raw = JSON.parse(text)
+  } catch {
+    return { file: null, error: 'unreadable' }
+  }
+  const parsed = collectionFileSchema.safeParse(raw)
+  return parsed.success
+    ? { file: parsed.data, error: null }
+    : { file: null, error: 'not-a-collection' }
+}

client/src/components/Dawarich/DawarichAcceptDialog.test.tsx

@@ -0,0 +1,568 @@
+// FE-DAWARICH-ACCEPT-001 to FE-DAWARICH-ACCEPT-026
+/**
+ * The review step between a detector's guess and a row in somebody's trip.
+ *
+ * This dialog is the only thing standing between Dawarich's visit detector and
+ * real data, and almost all of its behaviour is invisible until it is wrong:
+ * which fields are prefilled, which of them are sent back, and which are left
+ * out because the user did not actually change them. The server takes the body
+ * at face value (an accidental `name` or `date` in it silently overrides the
+ * recording), so "only what was corrected travels" is the contract worth
+ * pinning, and it is the one a refactor breaks first.
+ *
+ * The rest is the shape of the three targets. `place` needs a trip and offers a
+ * day (and no date: the day IS where it lands, and the server reads no date for
+ * a place), `journal` needs a journey, a date and a story, `bucket_list` needs a
+ * matched wish and hides the clock entirely because ticking a wish off uses the
+ * recorded timestamp and nothing else. Each of the three can be in a state
+ * where there is nothing to write to (no trips, no journeys, no matched wish),
+ * and in each of those the confirm button has to be inert rather than sending a
+ * body the server will reject with a 400.
+ *
+ * The seeding is keyed on the stay, not on the target, and one live instance
+ * serves all three rails. That makes two things true at once that are easy to
+ * get wrong together: what the user typed survives a switch from the place rail
+ * to the journal rail, and the trip and day they chose under the place rail
+ * must not travel in the journal body they then confirm.
+ *
+ * Both shells are covered: the phone gets an MSheet with its own footer, the
+ * desktop a Modal, and the fields in between are the same element tree. A
+ * regression that dropped one shell would otherwise only show up on a device.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { fireEvent } from '@testing-library/react'
+import type { DawarichSuggestion } from '@trek/shared'
+import { render, screen } from '../../../tests/helpers/render'
+import DawarichAcceptDialog, { type AcceptTargetOption } from './DawarichAcceptDialog'
+
+// The one thing the dialog reads about the device. A hoisted flag rather than a
+// resize: useIsPhone is matchMedia-driven and the global stub always answers false.
+const phone = vi.hoisted(() => ({ value: false }))
+vi.mock('../../mobile/useIsPhone', () => ({ useIsPhone: () => phone.value }))
+
+/**
+ * A stay as the suggestions endpoint hands it over. The offsets are real ones:
+ * `clockOf` slices the local wall clock straight out of the string rather than
+ * converting it, so a fixture in UTC would quietly test a different code path
+ * than the one production sees.
+ */
+function stay(over: Partial<DawarichSuggestion> = {}): DawarichSuggestion {
+  return {
+    id: 1,
+    sourceVisitId: '1',
+    tripId: null,
+    tripTitle: null,
+    name: 'Cafe Reichard',
+    lat: 50.94,
+    lng: 6.96,
+    startedAt: '2026-09-10T10:15:00+02:00',
+    endedAt: '2026-09-10T12:40:00+02:00',
+    durationMinutes: 145,
+    localDate: '2026-09-10',
+    sourceStatus: 'suggested',
+    confidence: null,
+    confidenceBand: null,
+    state: 'new',
+    target: null,
+    acceptedPlaceId: null,
+    acceptedJournalEntryId: null,
+    acceptedBucketListItemId: null,
+    sourceChanged: false,
+    sourceMissing: false,
+    matchedBucketListItemId: null,
+    matchedBucketListName: null,
+    countryCode: null,
+    firstSeenAt: '2026-09-10T06:00:00Z',
+    lastSeenAt: '2026-09-10T06:00:00Z',
+    ...over,
+  }
+}
+
+const TRIPS: AcceptTargetOption[] = [
+  { id: 31, label: 'Rhineland' },
+  { id: 32, label: 'Alps' },
+]
+
+// Distinct labels per trip so "the day list followed the trip" is observable
+// without reading ids out of the DOM.
+const DAYS: Record<number, AcceptTargetOption[]> = {
+  31: [
+    { id: 401, label: 'Day 1', badge: '10 Sept' },
+    { id: 402, label: 'Day 2', badge: '11 Sept' },
+  ],
+  32: [{ id: 501, label: 'Alpine day', badge: '01 Oct' }],
+}
+const daysForTrip = (tripId: number): AcceptTargetOption[] => DAYS[tripId] ?? []
+
+const JOURNALS: AcceptTargetOption[] = [
+  { id: 71, label: 'Rhine notebook' },
+  { id: 72, label: 'Alpine notebook' },
+]
+
+type Props = React.ComponentProps<typeof DawarichAcceptDialog>
+
+function open(props: Partial<Props> = {}) {
+  const onConfirm = vi.fn()
+  const onCancel = vi.fn()
+  const all: Props = { suggestion: stay(), target: 'place', ...props, onConfirm, onCancel }
+  const view = render(<DawarichAcceptDialog {...all} />)
+  return {
+    ...view,
+    onConfirm,
+    onCancel,
+    /** Re-render with the same props bar the ones named: the parent's own update path. */
+    update: (next: Partial<Props>) => view.rerender(<DawarichAcceptDialog {...all} {...next} />),
+  }
+}
+
+/** Open a CustomSelect by its trigger, then pick the option with this label. */
+function pick(triggerName: string | RegExp, optionLabel: string): void {
+  fireEvent.click(screen.getByRole('button', { name: triggerName }))
+  fireEvent.click(screen.getByText(optionLabel))
+}
+
+/** Type into the date field's keyboard entry, which takes ISO as-is. */
+function typeDate(iso: string): void {
+  fireEvent.click(screen.getByRole('button', { name: 'Enter date manually' }))
+  const input = screen.getByLabelText('Enter date manually')
+  fireEvent.change(input, { target: { value: iso } })
+  fireEvent.keyDown(input, { key: 'Enter' })
+}
+
+beforeEach(() => {
+  phone.value = false
+})
+
+describe('DawarichAcceptDialog', () => {
+  it('FE-DAWARICH-ACCEPT-001: nothing is on screen while no stay is pending', () => {
+    open({ suggestion: null, trips: TRIPS })
+    // The panel portals to document.body, so "empty container" proves nothing:
+    // the absence of the title and the confirm button does.
+    expect(screen.queryByText('Add this stay as a place')).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Add place' })).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-002: every field opens prefilled from the recording', () => {
+    open({ trips: TRIPS, daysForTrip })
+
+    expect(screen.getByRole('heading', { name: 'Add this stay as a place' })).toBeInTheDocument()
+    expect(screen.getByLabelText('Name')).toHaveValue('Cafe Reichard')
+    // The wall clock out of the offset the recording carries, not UTC.
+    expect(screen.getByLabelText('Arrived')).toHaveValue('10:15')
+    expect(screen.getByLabelText('Left')).toHaveValue('12:40')
+    expect(screen.getByLabelText('Notes')).toHaveValue('')
+    expect(screen.getByText(/^Recorded /)).toBeInTheDocument()
+    expect(screen.getByText('145 min')).toBeInTheDocument()
+    // No trip of its own, so the first trip the user may write to.
+    expect(screen.getByRole('button', { name: 'Rhineland' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Not on a day yet' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ACCEPT-003: an untouched stay sends only the target, its trip and the recorded clock', () => {
+    const { onConfirm } = open({ suggestion: stay({ tripId: 32 }), trips: TRIPS, daysForTrip })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+
+    // No name, no notes, no date: the server falls back to the recording for
+    // each of those, and repeating them would turn every accept into an edit.
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 32, time: '10:15', endTime: '12:40' })
+  })
+
+  it('FE-DAWARICH-ACCEPT-004: every correction travels, the day included', () => {
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Café Reichard am Dom' } })
+    fireEvent.change(screen.getByLabelText('Notes'), { target: { value: 'Two hours and a lot of cake.' } })
+    fireEvent.change(screen.getByLabelText('Arrived'), { target: { value: '09:00' } })
+    fireEvent.change(screen.getByLabelText('Left'), { target: { value: '11:45' } })
+    pick('Not on a day yet', 'Day 1')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+
+    // The day is the only calendar fact a place carries: there is no date in
+    // this body because there is no date field on this rail.
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'place',
+      tripId: 31,
+      dayId: 401,
+      name: 'Café Reichard am Dom',
+      notes: 'Two hours and a lot of cake.',
+      time: '09:00',
+      endTime: '11:45',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-005: a name or note that says nothing new is left out of the body', () => {
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+    const untouched = { target: 'place', tripId: 31, time: '10:15', endTime: '12:40' }
+
+    // Emptied entirely: the recording's own name is what should survive.
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: '   ' } })
+    fireEvent.change(screen.getByLabelText('Notes'), { target: { value: '   ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenLastCalledWith(untouched)
+
+    // Retyped with padding around it: after trimming this is the same name, and
+    // sending it would write a "correction" nobody made.
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: '  Cafe Reichard  ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenLastCalledWith(untouched)
+  })
+
+  it('FE-DAWARICH-ACCEPT-006: unplanned is an answer, not a missing one', () => {
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    pick('Not on a day yet', 'Day 1')
+    // The date rides along as the trigger's badge rather than inside its label.
+    expect(screen.getByRole('button', { name: /Day 1/ })).toHaveTextContent('10 Sept')
+
+    // Back to "not on a day yet": the sentinel option has to clear the choice
+    // rather than be stored as a day id of its own.
+    pick(/Day 1/, 'Not on a day yet')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 31, time: '10:15', endTime: '12:40' })
+  })
+
+  it('FE-DAWARICH-ACCEPT-007: changing the trip drops the day that belonged to the old one', () => {
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    pick('Not on a day yet', 'Day 2')
+    pick('Rhineland', 'Alps')
+
+    // Day 2 is a day of the Rhineland trip; keeping it would attach the place to
+    // somebody else's day, which the server refuses with a 400.
+    expect(screen.getByRole('button', { name: 'Not on a day yet' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Not on a day yet' }))
+    expect(screen.getByText('Alpine day')).toBeInTheDocument()
+    expect(screen.queryByText('Day 2')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 32, time: '10:15', endTime: '12:40' })
+  })
+
+  it('FE-DAWARICH-ACCEPT-008: the trip falls back from the stay to the first writable one to nothing', () => {
+    // The stay's own trip wins: it is the one whose dates the recording fell into.
+    const own = open({ suggestion: stay({ tripId: 32 }), trips: TRIPS, daysForTrip })
+    expect(screen.getByRole('button', { name: 'Alps' })).toBeInTheDocument()
+    own.unmount()
+
+    const first = open({ trips: TRIPS, daysForTrip })
+    expect(screen.getByRole('button', { name: 'Rhineland' })).toBeInTheDocument()
+    first.unmount()
+
+    // No trip at all: the picker admits it and the confirm is inert, because a
+    // place with no trip is a 400 rather than a partial success.
+    open({ trips: [], daysForTrip })
+    expect(screen.getByRole('button', { name: 'Choose a trip' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add place' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ACCEPT-009: with no day resolver the day picker offers only "not on a day yet"', () => {
+    // The trip rail passes a resolver; an Atlas-side or MCP-shaped caller need
+    // not, and the picker has to survive that rather than throw.
+    open({ trips: TRIPS })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Not on a day yet' }))
+    expect(screen.getAllByText('Not on a day yet')).toHaveLength(2)
+    expect(screen.queryByText('Day 1')).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-010: the journal target asks for a story and sends the chosen journey', () => {
+    const { onConfirm } = open({ target: 'journal', journals: JOURNALS })
+
+    expect(screen.getByRole('heading', { name: 'Write a journal entry' })).toBeInTheDocument()
+    // A story gets room to be one; notes on a place do not need five rows.
+    expect(screen.getByLabelText('Your story')).toHaveAttribute('rows', '5')
+    expect(screen.getByText('Add photos to the entry after it is created.')).toBeInTheDocument()
+    // No trip or day rail here: the entry belongs to a journey, not to a day.
+    expect(screen.queryByText('Day')).toBeNull()
+    expect(screen.queryByText('Trip')).toBeNull()
+
+    fireEvent.change(screen.getByLabelText('Your story'), { target: { value: 'Cake, then the cathedral.' } })
+    pick('Rhine notebook', 'Alpine notebook')
+    fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'journal',
+      journalId: 72,
+      notes: 'Cake, then the cathedral.',
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-011: with no journey to write to, the journal confirm is inert', () => {
+    open({ target: 'journal' })
+
+    expect(screen.getByRole('button', { name: 'Choose a journal' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add entry' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ACCEPT-012: ticking a wish off states the rule and sends the matched wish', () => {
+    const { onConfirm } = open({
+      target: 'bucket_list',
+      suggestion: stay({ matchedBucketListItemId: 88, matchedBucketListName: 'Museum Ludwig' }),
+    })
+
+    expect(screen.getByRole('heading', { name: 'Tick off a wish' })).toBeInTheDocument()
+    // Why a stay at a café is being offered against a museum: the rule, spelled out.
+    expect(screen.getByText(/On your wishlist: Museum Ludwig/)).toHaveTextContent('within 250 m and after 20 minutes')
+    // Nothing here is editable but the wish it ticks off: the visit's own
+    // timestamp is what gets stored, so a clock or a note would be theatre.
+    expect(screen.queryByLabelText('Arrived')).toBeNull()
+    expect(screen.queryByLabelText('Left')).toBeNull()
+    expect(screen.queryByLabelText('Notes')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Tick it off' }))
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'bucket_list',
+      bucketListItemId: 88,
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-013: a stay that matched no wish cannot be ticked off', () => {
+    open({ target: 'bucket_list', suggestion: stay() })
+
+    expect(screen.getByRole('button', { name: 'Tick it off' })).toBeDisabled()
+    expect(screen.queryByText(/On your wishlist/)).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-014: a write already in flight blocks a second one', () => {
+    // Everything is answered, so only `busy` can be holding the button, which is
+    // the point: double-accepting a stay creates two places out of one recording.
+    open({ trips: TRIPS, daysForTrip, busy: true })
+
+    expect(screen.getByRole('button', { name: 'Add place' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ACCEPT-015: backing out writes nothing, by button or by Escape', () => {
+    const { onCancel, onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(onCancel).toHaveBeenCalledTimes(2)
+    expect(onConfirm).not.toHaveBeenCalled()
+  })
+
+  it("FE-DAWARICH-ACCEPT-016: the source's own verdict is shown only while it is unconfirmed", () => {
+    const unconfirmed = open({ trips: TRIPS, suggestion: stay({ sourceStatus: 'suggested' }) })
+    expect(screen.getByText('Detected, unconfirmed')).toBeInTheDocument()
+    unconfirmed.unmount()
+
+    // Confirmed in Dawarich: saying so would be noise, the badge is simply gone.
+    open({ trips: TRIPS, suggestion: stay({ sourceStatus: 'confirmed' }) })
+    expect(screen.queryByText('Detected, unconfirmed')).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-017: only the bands Dawarich actually emits are shown, and only "low" warns', () => {
+    const low = open({ trips: TRIPS, suggestion: stay({ confidenceBand: 'low', confidence: 20 }) })
+    expect(screen.getByText('Uncertain detection').parentElement?.className).toContain('text-warning')
+    low.unmount()
+
+    const high = open({ trips: TRIPS, suggestion: stay({ confidenceBand: 'high', confidence: 90 }) })
+    // A confident detection is a fact, not a warning. Same badge, neutral tone.
+    expect(screen.getByText('Confident detection').parentElement?.className).toContain('text-content-secondary')
+    high.unmount()
+
+    const none = open({ trips: TRIPS, suggestion: stay({ confidenceBand: null }) })
+    expect(screen.queryByText(/detection$/)).toBeNull()
+    none.unmount()
+
+    // A band a later Dawarich invents: nothing at all, rather than a raw key.
+    open({ trips: TRIPS, suggestion: stay({ confidenceBand: 'certain', confidence: 100 }) })
+    expect(screen.queryByText(/dawarich\.confidence/)).toBeNull()
+    expect(screen.queryByText(/detection$/)).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-018: a recording with no readable clock or date sends neither', () => {
+    // Dawarich has shipped date-only and non-ISO timestamps; the clock parser
+    // answers with an empty string rather than a guess, and an empty string must
+    // not reach the body as `time: ""` or `date: ""`. On the journal rail,
+    // because that is the one rail that shows the date beside the clock.
+    const { onConfirm } = open({
+      target: 'journal',
+      journals: JOURNALS,
+      suggestion: stay({ startedAt: '2026-09-10', endedAt: '2026-09-10', localDate: '' }),
+    })
+
+    expect(screen.getByLabelText('Arrived')).toHaveValue('')
+    expect(screen.getByLabelText('Left')).toHaveValue('')
+    expect(screen.getByRole('button', { name: 'Date' })).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'journal', journalId: 71 })
+  })
+
+  it('FE-DAWARICH-ACCEPT-019: the fields follow the stay, and survive a re-render of the same one', () => {
+    const { update } = open({ trips: TRIPS, daysForTrip })
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Edited by hand' } })
+
+    // A fresh object for the same row: a parent re-render, not a new decision.
+    // Re-seeding here would eat what the user typed mid-sentence.
+    update({ suggestion: stay() })
+    expect(screen.getByLabelText('Name')).toHaveValue('Edited by hand')
+
+    update({
+      suggestion: stay({
+        id: 2,
+        name: 'Kölner Dom',
+        tripId: 32,
+        localDate: '2026-09-11',
+        startedAt: '2026-09-11T08:00:00+02:00',
+        endedAt: '2026-09-11T09:30:00+02:00',
+      }),
+    })
+    expect(screen.getByLabelText('Name')).toHaveValue('Kölner Dom')
+    expect(screen.getByLabelText('Arrived')).toHaveValue('08:00')
+    expect(screen.getByRole('button', { name: 'Alps' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ACCEPT-020: on a phone it is a sheet, and its footer confirms', () => {
+    phone.value = true
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    expect(screen.getByRole('dialog', { name: 'Add this stay as a place' })).toBeInTheDocument()
+    // The desktop modal's own heading is the tell that the wrong shell rendered.
+    expect(screen.queryByRole('heading', { name: 'Add this stay as a place' })).toBeNull()
+
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Reichard' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'place',
+      tripId: 31,
+      name: 'Reichard',
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-021: the phone sheet backs out from its header and its footer, and blocks an impossible write', () => {
+    phone.value = true
+    const { onCancel, onConfirm } = open({ target: 'journal' })
+
+    expect(screen.getByRole('button', { name: 'Add entry' })).toBeDisabled()
+
+    // Two ways out of the sheet, both the same door: the header's close circle
+    // and the footer's cancel pill.
+    const exits = screen.getAllByRole('button', { name: 'Cancel' })
+    expect(exits).toHaveLength(2)
+    exits.forEach(button => fireEvent.click(button))
+
+    expect(onCancel).toHaveBeenCalledTimes(2)
+    expect(onConfirm).not.toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-ACCEPT-022: the name stays editable on the wishlist rail, and a correction travels', () => {
+    // The clock, the date and the notes are all hidden for a wish, which is
+    // exactly why the one field that survives is worth naming: the detector's
+    // guess at a place name is what a tick-off is filed under, and "hide
+    // everything that is not the wish" is the tidy-up that would take it away.
+    const { onConfirm } = open({
+      target: 'bucket_list',
+      suggestion: stay({ matchedBucketListItemId: 88, matchedBucketListName: 'Museum Ludwig' }),
+    })
+
+    expect(screen.getByLabelText('Name')).toHaveValue('Cafe Reichard')
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Museum Ludwig' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Tick it off' }))
+
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'bucket_list',
+      bucketListItemId: 88,
+      name: 'Museum Ludwig',
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-023: a new stay arrives with no day chosen, whatever the last one had', () => {
+    const { onConfirm, update } = open({ trips: TRIPS, daysForTrip })
+
+    pick('Not on a day yet', 'Day 2')
+
+    // Same trip, so the day list does not change and a stale `dayId` would stay
+    // a legal value, which is the dangerous version of this bug: the second
+    // stay is filed silently on the day somebody picked for the first.
+    update({ suggestion: stay({ id: 3, name: 'Kölner Dom', tripId: 31 }) })
+    expect(screen.getByRole('button', { name: 'Not on a day yet' })).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 31, time: '10:15', endTime: '12:40' })
+  })
+
+  it('FE-DAWARICH-ACCEPT-024: switching rails keeps what was typed and leaks no trip into the journal body', () => {
+    const { onConfirm, update } = open({ trips: TRIPS, daysForTrip })
+
+    fireEvent.change(screen.getByLabelText('Notes'), { target: { value: 'Cake, then the cathedral.' } })
+    pick('Not on a day yet', 'Day 1')
+
+    // Backing out of "add as a place" and choosing "write a journal entry" on
+    // the same row is one instance and one stay, so nothing is re-seeded.
+    update({ target: 'journal', journals: JOURNALS })
+    expect(screen.getByLabelText('Your story')).toHaveValue('Cake, then the cathedral.')
+
+    // The journal was never chosen, because the seeding runs off the stay and
+    // the stay has not changed. Offering a confirm here would send a body with
+    // no journalId in it.
+    expect(screen.getByRole('button', { name: 'Choose a journal' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add entry' })).toBeDisabled()
+
+    pick('Choose a journal', 'Rhine notebook')
+    fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+
+    // Trip 31 and day 401 are still held in state. A journal entry belongs to a
+    // journey, and the server reads the body at face value.
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'journal',
+      journalId: 71,
+      notes: 'Cake, then the cathedral.',
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-025: the place rail offers no date, because the day picker is where a place lands', () => {
+    open({ trips: TRIPS, daysForTrip })
+
+    // A place has no date of its own: the server reads a date for a journal
+    // entry and for nothing else, so a date field on this rail was one whose
+    // change moved the place nowhere while the toast still said it landed.
+    // The clock stays, the server does read that.
+    expect(screen.queryByText('Date')).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Enter date manually' })).toBeNull()
+    expect(screen.getByLabelText('Arrived')).toHaveValue('10:15')
+    expect(screen.getByLabelText('Left')).toHaveValue('12:40')
+    expect(screen.getByRole('button', { name: 'Not on a day yet' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ACCEPT-026: a corrected date travels with a journal entry, and never with a place', () => {
+    // Both rails on one stay, so the dialog holds the corrected date in state
+    // across the switch: the same shape as switching rails with a note typed.
+    const { onConfirm, update } = open({ target: 'journal', journals: JOURNALS, trips: TRIPS, daysForTrip })
+
+    expect(screen.getByText('Date')).toBeInTheDocument()
+    typeDate('2026-09-12')
+    fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+    expect(onConfirm).toHaveBeenLastCalledWith({
+      target: 'journal',
+      journalId: 71,
+      date: '2026-09-12',
+      time: '10:15',
+      endTime: '12:40',
+    })
+
+    // Same stay, now as a place. The corrected date is still in state and would
+    // be silently dropped by the server; it must not be in the body at all,
+    // so what the dialog claims to send is what is actually written.
+    update({ target: 'place' })
+    expect(screen.queryByText('Date')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenLastCalledWith({ target: 'place', tripId: 31, time: '10:15', endTime: '12:40' })
+  })
+})

client/src/components/Dawarich/DawarichAcceptDialog.tsx

@@ -0,0 +1,402 @@
+import React, { useMemo, useState } from 'react'
+import { Gauge, Hourglass, CircleDashed, Star } from 'lucide-react'
+import type { DawarichAccept, DawarichSuggestion, DawarichSuggestionTarget } from '@trek/shared'
+import { DAWARICH_BUCKET_MATCH_MIN_MINUTES, DAWARICH_BUCKET_MATCH_RADIUS_M } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import Modal from '../shared/Modal'
+import MSheet from '../../mobile/components/MSheet'
+import { FormSheetFooter, FormSheetHeader } from '../../mobile/screens/trip/sheets/PlSheetChrome'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import DawarichIcon from '../shared/DawarichIcon'
+import DawarichBadge from './DawarichBadge'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import CustomTimePicker from '../shared/CustomTimePicker'
+import CustomSelect from '../shared/CustomSelect'
+
+export interface AcceptTargetOption {
+  id: number
+  label: string
+  /** Secondary half of the label — a day's date beside its number. */
+  badge?: string
+}
+
+export interface DawarichAcceptDialogProps {
+  suggestion: DawarichSuggestion | null
+  target: DawarichSuggestionTarget
+  /** Trips the user may write to, for the `place` target. */
+  trips?: AcceptTargetOption[]
+  /** Days of the chosen trip, resolved by the caller. */
+  daysForTrip?: (tripId: number) => AcceptTargetOption[]
+  /** Journeys the user may edit, for the `journal` target. */
+  journals?: AcceptTargetOption[]
+  busy?: boolean
+  onCancel: () => void
+  onConfirm: (body: DawarichAccept) => void
+}
+
+/**
+ * The review step: see what was recorded, correct it, then decide where it goes.
+ *
+ * The whole reason the integration is not a one-click import. A visit detector
+ * is right most of the time and confidently wrong the rest, and the difference
+ * between the two is a judgement only the traveller can make — so the values
+ * are prefilled from the recording and every one of them is editable before
+ * anything is written.
+ *
+ * What it does NOT do is offer to edit the recording. Dawarich owns that, and
+ * a correction made here would be lost the next time the detector ran.
+ *
+ * Three targets, because `DawarichSuggestionTarget` has three. The trip and
+ * journal rails open the first two; `bucket_list` is reached through MCP, where
+ * an assistant can accept a stay against a wish. The branch is kept for that and
+ * for the day an Atlas-side entry point wants it — the server has always been
+ * able to do it, and a dialog that could only handle two of three targets would
+ * be the thing that had to be fixed then.
+ */
+export default function DawarichAcceptDialog({
+  suggestion,
+  target,
+  trips = [],
+  daysForTrip,
+  journals = [],
+  busy = false,
+  onCancel,
+  onConfirm,
+}: DawarichAcceptDialogProps): React.ReactElement | null {
+  const { t, locale } = useTranslation()
+  const phone = useIsPhone()
+
+  const [name, setName] = useState('')
+  const [notes, setNotes] = useState('')
+  const [date, setDate] = useState('')
+  const [time, setTime] = useState('')
+  const [endTime, setEndTime] = useState('')
+  const [tripId, setTripId] = useState<number | ''>('')
+  const [dayId, setDayId] = useState<number | ''>('')
+  const [journalId, setJournalId] = useState<number | ''>('')
+  // Re-seeded whenever a different suggestion opens the dialog, so the fields
+  // always describe the row the user just pressed rather than the previous one.
+  const [seededFor, setSeededFor] = useState<number | null>(null)
+
+  if (suggestion && seededFor !== suggestion.id) {
+    setSeededFor(suggestion.id)
+    setName(suggestion.name)
+    setNotes('')
+    setDate(suggestion.localDate)
+    setTime(clockOf(suggestion.startedAt))
+    setEndTime(clockOf(suggestion.endedAt))
+    setTripId(suggestion.tripId ?? (trips[0]?.id ?? ''))
+    setDayId('')
+    setJournalId(journals[0]?.id ?? '')
+  }
+
+  const days = useMemo(
+    () => (typeof tripId === 'number' && daysForTrip ? daysForTrip(tripId) : []),
+    [tripId, daysForTrip],
+  )
+
+  if (!suggestion) return null
+
+  const missingTarget =
+    (target === 'place' && typeof tripId !== 'number') ||
+    (target === 'journal' && typeof journalId !== 'number') ||
+    (target === 'bucket_list' && suggestion.matchedBucketListItemId === null)
+
+  const confirm = () => {
+    const body: DawarichAccept = { target }
+    if (target === 'place') {
+      if (typeof tripId === 'number') body.tripId = tripId
+      if (typeof dayId === 'number') body.dayId = dayId
+    }
+    if (target === 'journal' && typeof journalId === 'number') body.journalId = journalId
+    if (target === 'bucket_list' && suggestion.matchedBucketListItemId !== null) {
+      body.bucketListItemId = suggestion.matchedBucketListItemId
+    }
+    if (name.trim() && name.trim() !== suggestion.name) body.name = name.trim()
+    if (notes.trim()) body.notes = notes.trim()
+    // Only an entry carries a date. A place lands on the day chosen below and
+    // the server reads nothing else for it, so a date corrected on the journal
+    // rail must not ride along when the same stay is then added as a place.
+    if (target === 'journal' && date && date !== suggestion.localDate) body.date = date
+    if (time) body.time = time
+    if (endTime) body.endTime = endTime
+    onConfirm(body)
+  }
+
+  // The same fields in both shells — only the frame around them differs.
+  const fields = (
+      <div className="space-y-4">
+        {/* What was recorded, before anything the user changed. Kept visible so a
+            corrected field can be compared against the source rather than
+            replacing it invisibly. */}
+        {/* What Dawarich recorded, as facts rather than as a sentence with
+            separators in it: a line for when, and a row of the same badges the
+            review list uses so the dialog and the list read as one thing. */}
+        <div className="rounded-xl border p-3 border-edge bg-surface-secondary">
+          <div className="flex items-center gap-2">
+            <span className="flex-shrink-0 overflow-hidden rounded-[6px]">
+              <DawarichIcon size={20} />
+            </span>
+            <p className="min-w-0 flex-1 text-caption text-content">
+              {t('dawarich.accept.recorded', {
+                from: new Date(suggestion.startedAt).toLocaleString(locale),
+                to: new Date(suggestion.endedAt).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }),
+              })}
+            </p>
+          </div>
+          <div className="mt-2 flex flex-wrap items-center gap-1">
+            <DawarichBadge icon={Hourglass} size="sm">
+              {t('dawarich.accept.duration', { minutes: suggestion.durationMinutes })}
+            </DawarichBadge>
+            {/* The source's own verdict, shown here rather than on every row of
+                the list: since Dawarich 1.12.0 "unconfirmed" is the normal state
+                of a visit, so it says nothing in a list and something here, where
+                somebody is deciding whether to trust this one. */}
+            {suggestion.sourceStatus === 'suggested' && (
+              <DawarichBadge icon={CircleDashed} size="sm">{t('dawarich.sourceStatus.suggested')}</DawarichBadge>
+            )}
+            {KNOWN_BANDS.includes(suggestion.confidenceBand ?? '') && (
+              <DawarichBadge
+                icon={Gauge}
+                size="sm"
+                tone={suggestion.confidenceBand === 'low' ? 'warning' : 'neutral'}
+              >
+                {t('dawarich.confidence.' + suggestion.confidenceBand)}
+              </DawarichBadge>
+            )}
+          </div>
+        </div>
+
+        {/* Why this stay is being offered against a wish at all. The row that
+            led here shows the wish's name and nothing else, which leaves the
+            reader to guess what a star beside a café has to do with a museum —
+            it is the rule, and the rule is short enough to state. */}
+        {target === 'bucket_list' && suggestion.matchedBucketListName && (
+          <p className="flex items-start gap-1.5 text-caption text-content-muted">
+            <Star className="w-3 h-3 flex-shrink-0 mt-0.5 text-accent-on" />
+            <span>
+              {t('dawarich.suggestions.matchesWish', { name: suggestion.matchedBucketListName })}
+              {' — '}
+              {t('dawarich.bucket.rule', {
+                meters: DAWARICH_BUCKET_MATCH_RADIUS_M,
+                minutes: DAWARICH_BUCKET_MATCH_MIN_MINUTES,
+              })}
+            </span>
+          </p>
+        )}
+
+        <div>
+          <label htmlFor="dawarich-accept-name" className="block text-caption font-medium mb-1.5 text-content-secondary">
+            {t('dawarich.accept.name')}
+          </label>
+          <input
+            id="dawarich-accept-name"
+            type="text"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            className="w-full px-3 py-2.5 border rounded-lg text-body focus:outline-none focus:ring-2 ring-accent border-edge bg-surface-input text-content"
+          />
+        </div>
+
+        {/* TREK's own pickers, not the browser's. A native `type="date"` paints
+            itself from the OS locale and a native `type="time"` ignores the 12h/24h
+            setting outright (#2067) — and neither follows the colour scheme. The
+            date column is the wide one because a localized date is long and a
+            clock never is.
+
+            The date is the journal rail's alone. A place has no date of its own:
+            the day picker below is where it lands, and a date field beside that
+            picker was a second answer to the same question, one the server never
+            read. The two clocks then share the row the way they do on the place
+            form. */}
+        {target !== 'bucket_list' && (
+          <div
+            className={`grid grid-cols-1 gap-2 ${
+              target === 'journal' ? 'sm:grid-cols-[minmax(0,1fr)_124px_124px]' : 'sm:grid-cols-2'
+            }`}
+          >
+            {target === 'journal' && (
+              <div>
+                <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                  {t('dawarich.accept.date')}
+                </span>
+                <CustomDatePicker value={date} onChange={setDate} />
+              </div>
+            )}
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.from')}
+              </span>
+              <CustomTimePicker value={time} onChange={setTime} aria-label={t('dawarich.accept.from')} />
+            </div>
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.to')}
+              </span>
+              <CustomTimePicker value={endTime} onChange={setEndTime} aria-label={t('dawarich.accept.to')} />
+            </div>
+          </div>
+        )}
+
+        {/* Stacked and full width, in the order the choice is actually made: the
+            day is what somebody is deciding, the trip is usually already right.
+            Side by side, both pickers were half as wide as their longest option
+            and the menus opened narrower than the text in them. */}
+        {target === 'place' && (
+          <div className="space-y-3">
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.day')}
+              </span>
+              {/* Unplanned is a real answer, not a missing one: half the places on
+                  a trip sit on no day, and forcing a choice here would invent one. */}
+              <CustomSelect
+                value={dayId === '' ? NO_DAY : dayId}
+                onChange={next => setDayId(next === NO_DAY || typeof next !== 'number' ? '' : next)}
+                options={[
+                  { value: NO_DAY, label: t('dawarich.accept.noDay') },
+                  // The date rides as the option's badge rather than inside its
+                  // label: the day number is what people scan for, and the date
+                  // is the confirmation they read second.
+                  ...days.map(day => ({ value: day.id, label: day.label, badge: day.badge })),
+                ]}
+                style={{ width: '100%' }}
+              />
+            </div>
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.trip')}
+              </span>
+              <CustomSelect
+                value={tripId}
+                onChange={next => { setTripId(typeof next === 'number' ? next : ''); setDayId('') }}
+                options={trips.map(trip => ({ value: trip.id, label: trip.label }))}
+                placeholder={t('dawarich.accept.pickTrip')}
+                style={{ width: '100%' }}
+              />
+            </div>
+          </div>
+        )}
+
+        {target === 'journal' && (
+          <div>
+            <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+              {t('dawarich.accept.journal')}
+            </span>
+            <CustomSelect
+              value={journalId}
+              onChange={next => setJournalId(typeof next === 'number' ? next : '')}
+              options={journals.map(journal => ({ value: journal.id, label: journal.label }))}
+              placeholder={t('dawarich.accept.pickJournal')}
+              style={{ width: '100%' }}
+            />
+          </div>
+        )}
+
+        {target !== 'bucket_list' && (
+          <div>
+            <label htmlFor="dawarich-accept-notes" className="block text-caption font-medium mb-1.5 text-content-secondary">
+              {target === 'journal' ? t('dawarich.accept.story') : t('dawarich.accept.notes')}
+            </label>
+            <textarea
+              id="dawarich-accept-notes"
+              value={notes}
+              onChange={e => setNotes(e.target.value)}
+              rows={target === 'journal' ? 5 : 3}
+              placeholder={t('dawarich.accept.storyPlaceholder')}
+              className="w-full px-3 py-2.5 border rounded-lg text-body resize-none focus:outline-none focus:ring-2 ring-accent border-edge bg-surface-input text-content"
+            />
+            {target === 'journal' && (
+              <p className="mt-1 text-caption text-content-muted">{t('dawarich.accept.photosHint')}</p>
+            )}
+          </div>
+        )}
+      </div>
+  )
+
+  const title = t(`dawarich.accept.title.${target}`)
+
+  // The phone shell has its own sheet, its own rounding and its own footer pill,
+  // and every other form on it uses them. A desktop modal scaled down would be
+  // the one dialog in the app that came from somewhere else.
+  if (phone) {
+    return (
+      <MSheet open onClose={onCancel} variant="bottom" material="glass" ariaLabel={title}>
+        <div className="flex max-h-[88dvh] min-h-0 flex-col">
+          <FormSheetHeader
+            // The mark fills the tile edge to edge, rounded like every other
+            // avatar-sized badge in the shell — a small logo floating in a grey
+            // square reads as a placeholder.
+            leading={
+              <span className="flex h-10 w-10 flex-none overflow-hidden rounded-[13px]">
+                <DawarichIcon size={40} />
+              </span>
+            }
+            title={title}
+            onClose={onCancel}
+            closeLabel={t('common.cancel')}
+          />
+          <div className="min-h-0 flex-1 overflow-y-auto px-[18px] pb-3">{fields}</div>
+          <FormSheetFooter
+            onCancel={onCancel}
+            cancelLabel={t('common.cancel')}
+            onSubmit={confirm}
+            submitLabel={t(`dawarich.accept.confirm.${target}`)}
+            submitDisabled={busy || missingTarget}
+          />
+        </div>
+      </MSheet>
+    )
+  }
+
+  return (
+    <Modal
+      isOpen
+      onClose={onCancel}
+      size="lg"
+      title={title}
+      footer={
+        <div className="flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 rounded-lg text-body border border-edge text-content-secondary"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="button"
+            onClick={confirm}
+            disabled={busy || missingTarget}
+            className="px-4 py-2 rounded-lg text-body font-medium bg-accent text-accent-text hover:bg-accent-hover disabled:opacity-50"
+          >
+            {t(`dawarich.accept.confirm.${target}`)}
+          </button>
+        </div>
+      }
+    >
+      {fields}
+    </Modal>
+  )
+}
+
+/**
+ * The bands Dawarich actually emits (>=70 high, >=40 medium, else low).
+ * A band a later version adds is shown as nothing rather than as a raw English
+ * word or a missing translation key.
+ */
+const KNOWN_BANDS = ['high', 'medium', 'low']
+
+/**
+ * "No day" as a real option value.
+ *
+ * CustomSelect uses strict equality on its values and treats the empty string as
+ * "nothing chosen", which would make the placeholder and the deliberate answer
+ * indistinguishable — and unplanned is a deliberate answer here.
+ */
+const NO_DAY = '__none__'
+
+/** `HH:MM` out of an ISO timestamp, in the offset the timestamp carries. */
+function clockOf(iso: string): string {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(iso) ? iso.slice(11, 16) : ''
+}

client/src/components/Dawarich/DawarichAtlasDialog.test.tsx

@@ -0,0 +1,637 @@
+// FE-DAWARICH-ATLASDLG-001 to FE-DAWARICH-ATLASDLG-029
+/**
+ * The room where Dawarich's two Atlas questions get answered.
+ *
+ * Nothing in here runs on its own, and that is the whole design: the Atlas is a
+ * curated list that carries tombstones precisely so a country somebody removed
+ * stays removed, so every read and every write starts with a person pressing a
+ * button. What is worth pinning is therefore not "does it fetch" but everything
+ * arranged around the fetch.
+ *
+ *  - **What is written, and dated when.** A wish is ticked off on the day it was
+ *    reached, not on today, and wishes reached on the same day travel in one
+ *    request. A regression here either back-dates somebody's list wrongly or
+ *    turns one confirmation into twenty requests.
+ *  - **The five states each half can be in.** Unasked, in flight, answered,
+ *    answered with nothing, answered with caveats. The confirm button is
+ *    rendered or absent rather than merely greyed out, so each state has to
+ *    decide whether that control exists at all, and the caveats under the list
+ *    are only said when there is something to say.
+ *  - **Refusing to write blind.** Offline is not a server error: nothing was
+ *    sent, and "something went wrong talking to Dawarich" for a train tunnel
+ *    sends people hunting for a bug in their own instance.
+ *  - **Both shells.** The phone gets an MSheet with its own footer, the desktop
+ *    a Modal; the body between them is the same tree, so a regression that
+ *    dropped one shell would otherwise only surface on a device.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '../../../tests/helpers/render'
+import { act, fireEvent } from '@testing-library/react'
+import { setForcedOffline } from '../../sync/networkMode'
+import { DawarichOfflineError } from '../../repo/dawarichRepo'
+import DawarichAtlasDialog from './DawarichAtlasDialog'
+
+const toast = { success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn() }
+vi.mock('../shared/Toast', () => ({ useToast: () => toast, default: () => toast }))
+
+const repo = {
+  bucketScan: vi.fn(),
+  atlasSuggestions: vi.fn(),
+}
+vi.mock('../../repo/dawarichRepo', () => ({
+  dawarichRepo: {
+    bucketScan: (...args: unknown[]) => repo.bucketScan(...args),
+    atlasSuggestions: (...args: unknown[]) => repo.atlasSuggestions(...args),
+  },
+  DawarichOfflineError: class extends Error {},
+}))
+
+const api = {
+  confirmBucketVisits: vi.fn(),
+  acceptAtlasCountries: vi.fn(),
+}
+vi.mock('../../api/dawarich', () => ({
+  dawarichApi: {
+    confirmBucketVisits: (...args: unknown[]) => api.confirmBucketVisits(...args),
+    acceptAtlasCountries: (...args: unknown[]) => api.acceptAtlasCountries(...args),
+  },
+}))
+
+// The one thing the dialog reads about the device. A hoisted flag rather than a
+// resize: useIsPhone is matchMedia-driven and the global stub always answers false.
+const phone = vi.hoisted(() => ({ value: false }))
+vi.mock('../../mobile/useIsPhone', () => ({ useIsPhone: () => phone.value }))
+
+const SCAN = {
+  matches: [
+    {
+      itemId: 11,
+      name: 'Museum Ludwig',
+      match: { at: '2026-09-10T14:00:00Z', minutes: 145, distanceMeters: 49, points: 60 },
+      alreadyVisited: false,
+    },
+    {
+      itemId: 12,
+      name: 'Kölner Dom',
+      match: { at: '2026-09-09T14:00:00Z', minutes: 30, distanceMeters: 80, points: 12 },
+      alreadyVisited: true,
+    },
+    { itemId: 13, name: 'Rheinpark', match: null, alreadyVisited: false },
+  ],
+  skippedWithoutCoordinates: 2,
+  truncated: false,
+  fetchedAt: '2026-09-12T10:00:00Z',
+}
+
+const COUNTRIES = {
+  countries: [
+    { countryCode: 'DE', sourceName: 'Germany', cities: [{ name: 'Cologne', minutes: 400, lastSeenAt: '2026-09-10T10:00:00Z' }], alreadyVisited: true },
+    { countryCode: 'NL', sourceName: 'Netherlands', cities: [{ name: 'Maastricht', minutes: 90, lastSeenAt: '2026-09-08T10:00:00Z' }], alreadyVisited: false },
+  ],
+  unresolved: ['Freedonia'],
+  fetchedAt: '2026-09-12T10:00:00Z',
+}
+
+/**
+ * Three wishes reached on two days. The pair sharing a timestamp is the whole
+ * point of the fixture: the dialog groups by the date it is about to write, and
+ * a regression that lost the grouping would send one request per wish. The
+ * third one sits far enough away to be reported in kilometres rather than
+ * metres, which is the other half of the row's arithmetic.
+ */
+const SAME_DAY = {
+  matches: [
+    {
+      itemId: 21,
+      name: 'Van Gogh Museum',
+      match: { at: '2026-08-02T11:00:00Z', minutes: 95, distanceMeters: 30, points: 40 },
+      alreadyVisited: false,
+    },
+    {
+      itemId: 22,
+      name: 'Rijksmuseum',
+      match: { at: '2026-08-02T11:00:00Z', minutes: 120, distanceMeters: 55, points: 51 },
+      alreadyVisited: false,
+    },
+    {
+      itemId: 23,
+      name: 'Kinderdijk',
+      match: { at: '2026-07-30T09:00:00Z', minutes: 70, distanceMeters: 1400, points: 22 },
+      alreadyVisited: false,
+    },
+  ],
+  skippedWithoutCoordinates: 0,
+  truncated: false,
+  fetchedAt: '2026-09-12T10:00:00Z',
+}
+
+/**
+ * A reading with nothing to apologise for: no unmatched names, one country with
+ * more cities than fit beside a flag and one with none at all.
+ */
+const MORE_COUNTRIES = {
+  countries: [
+    {
+      countryCode: 'FR',
+      sourceName: 'France',
+      cities: ['Paris', 'Lyon', 'Nice', 'Nantes'].map(name => ({
+        name,
+        minutes: 120,
+        lastSeenAt: '2026-08-02T10:00:00Z',
+      })),
+      alreadyVisited: false,
+    },
+    { countryCode: 'BE', sourceName: 'Belgium', cities: [], alreadyVisited: false },
+  ],
+  unresolved: [],
+  fetchedAt: '2026-09-12T10:00:00Z',
+}
+
+/** A promise this test settles by hand, to pin down what is on screen mid-flight. */
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>(res => {
+    resolve = res
+  })
+  return { promise, resolve }
+}
+
+function open(props: Partial<React.ComponentProps<typeof DawarichAtlasDialog>> = {}) {
+  return render(<DawarichAtlasDialog isOpen onClose={vi.fn()} {...props} />)
+}
+
+beforeEach(() => {
+  phone.value = false
+  setForcedOffline(false)
+  toast.success.mockReset()
+  toast.error.mockReset()
+  repo.bucketScan.mockReset().mockResolvedValue(SCAN)
+  repo.atlasSuggestions.mockReset().mockResolvedValue(COUNTRIES)
+  api.confirmBucketVisits.mockReset().mockResolvedValue({ updated: 1 })
+  api.acceptAtlasCountries.mockReset().mockResolvedValue({ marked: 1 })
+})
+
+// Force-offline is module state, not component state: left on, it would leak
+// into the next file's writes.
+afterEach(() => setForcedOffline(false))
+
+describe('DawarichAtlasDialog', () => {
+  it('FE-DAWARICH-ATLASDLG-001: asks nothing on its own — the scan runs when the reader says so', () => {
+    open()
+    expect(repo.bucketScan).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Check wishlist' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-002: offers no confirmation before there is anything to confirm', () => {
+    open()
+    // Hidden until a result is on screen rather than merely disabled: a greyed
+    // out "Tick off 0" is a dead control asking to be understood, and `hidden`
+    // keeps it out of the accessibility tree too.
+    expect(screen.queryByRole('button', { name: /Tick off/ })).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-003: a scan lists what it found, with the distance, the time and the day', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+    const row = screen.getByRole('checkbox', { name: 'Museum Ludwig' })
+    expect(row.textContent).toContain('49 m away')
+    expect(row.textContent).toContain('2 h 25 min')
+    // A wish with no match at all is not a row — there is nothing to decide.
+    expect(screen.queryByRole('checkbox', { name: 'Rheinpark' })).not.toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-004: open wishes start selected, already ticked ones do not', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('checkbox', { name: 'Kölner Dom' })).toHaveAttribute('aria-checked', 'false')
+    expect(screen.getByRole('checkbox', { name: 'Kölner Dom' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-005: unticking a row takes it out of what gets written', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Museum Ludwig' }))
+
+    expect(screen.getByRole('button', { name: /Tick off 0/ })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-006: confirming writes exactly the picked wishes and reports back', async () => {
+    const onChanged = vi.fn()
+    open({ onChanged })
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+
+    // With the date the stay was actually reached on — a wish from last year
+    // ticked off with today's date is a wrong entry in a list people keep.
+    await waitFor(() => expect(api.confirmBucketVisits).toHaveBeenCalledWith([11], '2026-09-10T14:00:00Z'))
+    expect(onChanged).toHaveBeenCalled()
+    // Marked in place rather than rescanned — one upstream request per wish is
+    // not worth spending to tell the reader what they just did.
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeDisabled())
+    expect(repo.bucketScan).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-ATLASDLG-007: the countries tab offers only what the Atlas does not already have', async () => {
+    open({ initialTab: 'countries' })
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+    expect(screen.queryByRole('checkbox', { name: 'Germany' })).not.toBeInTheDocument()
+    // A country Dawarich named but TREK could not code is said out loud, not dropped.
+    expect(screen.getByText(/Freedonia/)).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-008: confirming countries sends their codes', async () => {
+    open({ initialTab: 'countries' })
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    await waitFor(() => expect(api.acceptAtlasCountries).toHaveBeenCalledWith(['NL']))
+  })
+
+  it('FE-DAWARICH-ATLASDLG-009: a scan that fails says so and leaves the dialog usable', async () => {
+    repo.bucketScan.mockRejectedValue({ response: { data: { error: 'Dawarich rejected the API key.' } } })
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Dawarich rejected the API key.'))
+    expect(screen.getByRole('button', { name: 'Check wishlist' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-010: while the recordings are being read there are placeholders and nothing to press', async () => {
+    const scan = deferred<typeof SCAN>()
+    repo.bucketScan.mockReturnValueOnce(scan.promise)
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    expect(screen.getByText('Checking…')).toBeInTheDocument()
+    expect(screen.queryByRole('checkbox')).toBeNull()
+    // Neither control exists yet: there is nothing to confirm, and "check again"
+    // before the first answer is a second request for the same thing.
+    expect(screen.queryByRole('button', { name: /Tick off/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Check again' })).toBeNull()
+
+    await act(async () => {
+      scan.resolve(SCAN)
+    })
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+  })
+
+  it('FE-DAWARICH-ATLASDLG-011: a scan that found nothing says so in a sentence and offers no confirmation', async () => {
+    repo.bucketScan.mockResolvedValue({ ...SCAN, matches: [], skippedWithoutCoordinates: 0 })
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() =>
+      expect(screen.getByText('Nothing on your wishlist turned up in your recordings.')).toBeInTheDocument(),
+    )
+    // Absent, not greyed out: a dead "Tick off 0" under an empty state only asks
+    // to be understood.
+    expect(screen.queryByRole('button', { name: /Tick off/ })).toBeNull()
+    // The rule stays on screen, because it is the answer to "why did nothing
+    // turn up": driving past a wish does not count as reaching it.
+    expect(screen.getByText(/A wish counts as reached within 250 m and after 20 minutes/)).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-012: the caveats under a scan are only said when there are any', async () => {
+    repo.bucketScan.mockResolvedValue({ ...SCAN, skippedWithoutCoordinates: 0, truncated: true })
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() =>
+      expect(screen.getByText('Only the first entries were checked. Run it again for the rest.')).toBeInTheDocument(),
+    )
+    // Nothing was skipped this time, so nothing is said about skipping: a
+    // "0 entries have no coordinates" line is noise dressed as information.
+    expect(screen.queryByText(/have no coordinates/)).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-013: a country shows the first of its cities, one without any shows none', async () => {
+    repo.atlasSuggestions.mockResolvedValue(MORE_COUNTRIES)
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'France' })).toBeInTheDocument())
+    const france = screen.getByRole('checkbox', { name: 'France' })
+    // The badge counts all four; the line beside it names three, which is what
+    // fits beside a flag at the width a phone gives this dialog.
+    expect(france.textContent).toContain('4 cities')
+    expect(france.textContent).toContain('Paris, Lyon, Nice')
+    expect(france.textContent).not.toContain('Nantes')
+    expect(screen.getByRole('checkbox', { name: 'Belgium' }).textContent).not.toContain('cities')
+    // Everything matched, so the dialog does not mention matching at all.
+    expect(screen.queryByText(/could not match these to a country/)).toBeNull()
+    expect(screen.getByText('The last 12 months were looked at.')).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-014: a reading with nothing new in it says so rather than showing an empty list', async () => {
+    // Germany alone, and the Atlas already has it.
+    repo.atlasSuggestions.mockResolvedValue({ ...COUNTRIES, countries: [COUNTRIES.countries[0]] })
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+
+    await waitFor(() =>
+      expect(screen.getByText('Your recordings show no countries TREK does not already have.')).toBeInTheDocument(),
+    )
+    expect(screen.queryByRole('button', { name: /Add \d+ countries/ })).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-015: wishes reached on one day travel in one request, another day in its own', async () => {
+    repo.bucketScan.mockResolvedValue(SAME_DAY)
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Rijksmuseum' })).toBeInTheDocument())
+    // Over a kilometre out is said in kilometres: "1400 m away" is a
+    // measurement, "1.4 km away" is how far it was.
+    expect(screen.getByRole('checkbox', { name: 'Kinderdijk' }).textContent).toContain('1.4 km away')
+
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 3/ }))
+
+    await waitFor(() => expect(api.confirmBucketVisits).toHaveBeenCalledTimes(2))
+    // Grouped by date, not ordered by it: the row order inside a day is the
+    // sort's business and nothing here depends on it.
+    const calls = api.confirmBucketVisits.mock.calls as Array<[number[], string]>
+    const byDate = new Map(calls.map(([ids, at]) => [at, [...ids].sort((a, b) => a - b)]))
+    expect(byDate.get('2026-08-02T11:00:00Z')).toEqual([21, 22])
+    expect(byDate.get('2026-07-30T09:00:00Z')).toEqual([23])
+    // Both answers counted, not just the last one to come back.
+    expect(toast.success).toHaveBeenCalledWith('2 wishes ticked off')
+  })
+
+  it('FE-DAWARICH-ATLASDLG-016: an unticked wish is left out of the write entirely', async () => {
+    repo.bucketScan.mockResolvedValue(SAME_DAY)
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Kinderdijk' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Kinderdijk' }))
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Rijksmuseum' }))
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+
+    // One request, for one day, carrying one id. The day whose other wish was
+    // dropped does not travel half-empty, and the other day does not travel at all.
+    await waitFor(() => expect(api.confirmBucketVisits).toHaveBeenCalledTimes(1))
+    expect(api.confirmBucketVisits).toHaveBeenCalledWith([21], '2026-08-02T11:00:00Z')
+  })
+
+  it('FE-DAWARICH-ATLASDLG-017: a row that was unticked can be put back', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Museum Ludwig' }))
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toHaveAttribute('aria-checked', 'false')
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Museum Ludwig' }))
+
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('button', { name: /Tick off 1/ })).toBeEnabled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-018: offline, a wish confirmation is refused before anything is sent', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    setForcedOffline(true)
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+
+    expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('TREK is offline right now'))
+    // Not attempted at all: a confirmation fired into a dead connection hangs to
+    // a timeout and then reports a server error for something no server saw.
+    expect(api.confirmBucketVisits).not.toHaveBeenCalled()
+    // And the selection survives, so pressing it again once there is signal is enough.
+    expect(screen.getByRole('button', { name: /Tick off 1/ })).toBeEnabled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-019: offline, a country confirmation is refused before anything is sent', async () => {
+    open({ initialTab: 'countries' })
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    setForcedOffline(true)
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('TREK is offline right now'))
+    expect(api.acceptAtlasCountries).not.toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-020: a write that failed leaves every row exactly as it was', async () => {
+    // A rejection with no `{ error }` envelope at all: a socket that died
+    // mid-request rather than a server that answered.
+    api.confirmBucketVisits.mockRejectedValue(new Error('socket hang up'))
+    const onChanged = vi.fn()
+    open({ onChanged })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Something went wrong talking to Dawarich.'))
+    // Nothing was marked off locally, so a second attempt still has something to
+    // send, and the Atlas is not asked to re-read for a write that never landed.
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeEnabled()
+    expect(onChanged).not.toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-021: a refusal carrying no readable reason still gets a sentence', async () => {
+    // An `{ error }` that is not a string is not a message: falling through to
+    // the generic sentence beats printing "[object Object]" at somebody.
+    api.acceptAtlasCountries.mockRejectedValue({ response: { data: { error: { code: 502 } } } })
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Something went wrong talking to Dawarich.'))
+    expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('FE-DAWARICH-ATLASDLG-022: a read that never left the device reads as a connection, not a failure', async () => {
+    // The repo refuses offline reads itself, and its refusal has to survive the
+    // trip through failureText as the connection message rather than as
+    // "something went wrong talking to Dawarich", which points at the instance.
+    repo.atlasSuggestions.mockRejectedValue(new DawarichOfflineError())
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+
+    await waitFor(() =>
+      expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('TREK is offline right now')),
+    )
+    // Still unasked, so the button that asks is the one on screen.
+    expect(screen.getByRole('button', { name: 'Look for countries' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-023: the other tab asks the other question, and each keeps its own answer', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Countries/ }))
+
+    // Switching tabs asks nothing on its own: a country reading costs an
+    // upstream request, and nobody asked for it by moving their eyes.
+    expect(repo.atlasSuggestions).not.toHaveBeenCalled()
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Wishlist/ }))
+
+    // The scan is still there, and was not repeated for the return trip.
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument()
+    expect(repo.bucketScan).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-ATLASDLG-024: "Check again" re-runs the scan and is inert while it runs', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    const second = deferred<typeof SCAN>()
+    repo.bucketScan.mockReturnValueOnce(second.promise)
+    fireEvent.click(screen.getByRole('button', { name: 'Check again' }))
+
+    // A second press while the first is in flight would run the whole scan twice:
+    // one upstream request per wish, for the same answer.
+    expect(screen.getByRole('button', { name: 'Check again' })).toBeDisabled()
+
+    await act(async () => {
+      second.resolve(SCAN)
+    })
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Check again' })).toBeEnabled())
+    expect(repo.bucketScan).toHaveBeenCalledTimes(2)
+  })
+
+  it('FE-DAWARICH-ATLASDLG-025: "Check again" on the countries tab re-reads the countries, not the wishes', async () => {
+    open({ initialTab: 'countries' })
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check again' }))
+
+    await waitFor(() => expect(repo.atlasSuggestions).toHaveBeenCalledTimes(2))
+    expect(repo.bucketScan).not.toHaveBeenCalled()
+    // A year back from the moment it was asked, both times: the window is the
+    // same question asked again, not a widening one.
+    const calls = repo.atlasSuggestions.mock.calls as Array<[string, string]>
+    for (const [from, to] of calls) {
+      expect(Date.parse(to) - Date.parse(from)).toBe(365 * 24 * 60 * 60 * 1000)
+    }
+    expect(Date.parse(calls[1][0])).toBeGreaterThanOrEqual(Date.parse(calls[0][0]))
+  })
+
+  it('FE-DAWARICH-ATLASDLG-026: on a phone it is a sheet, and the count and the confirm live in its own footer', async () => {
+    phone.value = true
+    const onClose = vi.fn()
+    open({ onClose })
+
+    expect(screen.getByRole('dialog', { name: 'Dawarich' })).toBeInTheDocument()
+    // The desktop modal puts the title in a heading: its absence is the tell
+    // that the right shell rendered.
+    expect(screen.queryByRole('heading', { name: /Dawarich/ })).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    expect(screen.getByText('1 selected')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+    await waitFor(() => expect(api.confirmBucketVisits).toHaveBeenCalledWith([11], '2026-09-10T14:00:00Z'))
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-027: a country that was just added stops being offered, and the Atlas is told', async () => {
+    const onChanged = vi.fn()
+    open({ initialTab: 'countries', onChanged })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    await waitFor(() => expect(toast.success).toHaveBeenCalledWith('1 countries added'))
+    // Marked in place rather than re-read: the reading costs an upstream request
+    // and the only thing that changed is what the reader just pressed. The row
+    // leaving the list is what says the write landed.
+    await waitFor(() =>
+      expect(screen.getByText('Your recordings show no countries TREK does not already have.')).toBeInTheDocument(),
+    )
+    expect(screen.queryByRole('checkbox', { name: 'Netherlands' })).toBeNull()
+    expect(screen.queryByRole('button', { name: /Add \d+ countries/ })).toBeNull()
+    expect(repo.atlasSuggestions).toHaveBeenCalledTimes(1)
+    // The Atlas keeps its own map and its own counts; without this the country
+    // it was just told about only appears there after a reload.
+    expect(onChanged).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-ATLASDLG-028: a request that died without a reason at all still gets a sentence', async () => {
+    // An aborted request rejects with nothing: not an Error, not a response.
+    // Reaching into `.response.data` on that must not be the thing that takes
+    // the dialog down, because a crash here loses the scan the reader is
+    // looking at as well as the message they needed.
+    repo.bucketScan.mockRejectedValue(undefined)
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Something went wrong talking to Dawarich.'))
+    expect(screen.getByRole('button', { name: 'Check wishlist' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-029: a country can be unticked and put back, and only the ticked ones are written', async () => {
+    // Both offers start ticked, which is the useful default but not the answer
+    // every time: a border crossed on the way to somewhere else is a country
+    // Dawarich saw and the reader does not want in their Atlas. Taking one out
+    // has to actually take it out of the write, and changing one's mind has to
+    // put it back, because the Atlas carries tombstones and an unwanted country
+    // added here is removed by hand afterwards.
+    repo.atlasSuggestions.mockResolvedValue(MORE_COUNTRIES)
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Belgium' })).toBeInTheDocument())
+    expect(screen.getByRole('button', { name: /Add 2 countries/ })).toBeEnabled()
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Belgium' }))
+    expect(screen.getByRole('checkbox', { name: 'Belgium' })).toHaveAttribute('aria-checked', 'false')
+
+    // Out and back in again: the tick is a toggle, not a one-way door.
+    fireEvent.click(screen.getByRole('checkbox', { name: 'France' }))
+    expect(screen.getByRole('button', { name: /Add 0 countries/ })).toBeDisabled()
+    fireEvent.click(screen.getByRole('checkbox', { name: 'France' }))
+    expect(screen.getByRole('checkbox', { name: 'France' })).toHaveAttribute('aria-checked', 'true')
+
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    // Belgium was never sent, so nothing has to be undone in the Atlas after.
+    await waitFor(() => expect(api.acceptAtlasCountries).toHaveBeenCalledWith(['FR']))
+    await waitFor(() => expect(toast.success).toHaveBeenCalledWith('1 countries added'))
+    // And it is still on offer, still unticked, for the trip it does belong to.
+    expect(screen.getByRole('checkbox', { name: 'Belgium' })).toHaveAttribute('aria-checked', 'false')
+  })
+})

client/src/components/Dawarich/DawarichAtlasDialog.tsx

@@ -0,0 +1,578 @@
+import React, { useState } from 'react'
+import { Building2, Check, CalendarDays, Globe2, Hourglass, Info, Loader2, MapPin, RefreshCw, Star } from 'lucide-react'
+import type { DawarichAtlasSuggestions, DawarichBucketScan } from '@trek/shared'
+import { DAWARICH_BUCKET_MATCH_MIN_MINUTES, DAWARICH_BUCKET_MATCH_RADIUS_M } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { Skeleton } from '../shared/Skeleton'
+import { SlidingTabs } from '../shared/SlidingTabs'
+import Modal from '../shared/Modal'
+import MSheet from '../../mobile/components/MSheet'
+import { FormSheetHeader } from '../../mobile/screens/trip/sheets/PlSheetChrome'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import DawarichIcon from '../shared/DawarichIcon'
+import DawarichBadge from './DawarichBadge'
+import { dawarichApi } from '../../api/dawarich'
+import { dawarichRepo, DawarichOfflineError } from '../../repo/dawarichRepo'
+import { isEffectivelyOffline } from '../../sync/networkMode'
+import { formatDuration } from './dawarichSuggestionModel'
+import { cityLine, countryLabel, countryWindow, formatDistance, newCountries, orderedMatches } from './dawarichAtlasModel'
+
+type Tab = 'wishes' | 'countries'
+
+/**
+ * Everything Dawarich can answer about the Atlas, in a room of its own.
+ *
+ * It used to be a card wedged under the wishlist, which made two different
+ * questions — "which wishes did I actually reach?" and "which countries was I
+ * in?" — look like one paragraph of small print. Both are offers that need
+ * reading before they are accepted, and reading needs space, so they get a
+ * dialog with a tab each, one selection model and one confirm button.
+ *
+ * Nothing here runs on its own. The Atlas is curated — it carries tombstones
+ * precisely so a country somebody removed stays removed — and a background job
+ * that ticked countries off would be fighting its owner.
+ */
+export default function DawarichAtlasDialog({
+  isOpen,
+  initialTab = 'wishes',
+  onClose,
+  onChanged,
+}: {
+  isOpen: boolean
+  /** Which question was asked to open it — the panel has a button per tab. */
+  initialTab?: Tab
+  onClose: () => void
+  /** Called after something was written, so the Atlas can re-read itself. */
+  onChanged?: () => void
+}): React.ReactElement {
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const phone = useIsPhone()
+  const [tab, setTab] = useState<Tab>(initialTab)
+
+  const [scan, setScan] = useState<DawarichBucketScan | null>(null)
+  const [scanning, setScanning] = useState(false)
+  const [picked, setPicked] = useState<Set<number>>(new Set())
+
+  const [countries, setCountries] = useState<DawarichAtlasSuggestions | null>(null)
+  const [loadingCountries, setLoadingCountries] = useState(false)
+  const [pickedCountries, setPickedCountries] = useState<Set<string>>(new Set())
+  // One write at a time: the button stays on screen while the request is in
+  // flight, and a second press would send the same confirmation twice.
+  const [writing, setWriting] = useState(false)
+
+  const matches = orderedMatches(scan?.matches ?? [])
+  const openMatches = matches.filter(match => !match.alreadyVisited)
+  const offered = newCountries(countries?.countries ?? [])
+
+  const runScan = async (): Promise<void> => {
+    setScanning(true)
+    try {
+      const result = await dawarichRepo.bucketScan()
+      setScan(result)
+      // Everything with a match and not already ticked starts selected: the
+      // common case is "yes, all of those", and unticking the odd one is less
+      // work than ticking twenty.
+      setPicked(new Set(result.matches.filter(m => m.match && !m.alreadyVisited).map(m => m.itemId)))
+    } catch (err) {
+      toast.error(failureText(err, t))
+    } finally {
+      setScanning(false)
+    }
+  }
+
+  const loadCountries = async (): Promise<void> => {
+    setLoadingCountries(true)
+    try {
+      const { from, to } = countryWindow(new Date())
+      const result = await dawarichRepo.atlasSuggestions(from, to)
+      setCountries(result)
+      setPickedCountries(new Set(newCountries(result.countries).map(c => c.countryCode)))
+    } catch (err) {
+      toast.error(failureText(err, t))
+    } finally {
+      setLoadingCountries(false)
+    }
+  }
+
+  const confirmWishes = async (): Promise<void> => {
+    if (picked.size === 0 || writing) return
+    // Writes are online-only: the reads are gated in the repo, and firing a
+    // confirmation into a dead connection would hang to a timeout and then
+    // report a server error for something the server never saw.
+    if (isEffectivelyOffline()) {
+      toast.error(t('dawarich.error.offline'))
+      return
+    }
+    setWriting(true)
+    try {
+      // Ticked off on the day each wish was reached, not on today. The dialog is
+      // holding that date for every row it is about to write, so it says it;
+      // grouping by date keeps that to one request per day rather than per wish.
+      const byDate = new Map<string, number[]>()
+      for (const m of matches) {
+        if (!picked.has(m.itemId) || !m.match) continue
+        const bucket = byDate.get(m.match.at)
+        if (bucket) bucket.push(m.itemId)
+        else byDate.set(m.match.at, [m.itemId])
+      }
+      const results = await Promise.all(
+        [...byDate].map(([at, ids]) => dawarichApi.confirmBucketVisits(ids, at)),
+      )
+      const result = { updated: results.reduce((sum, r) => sum + r.updated, 0) }
+      toast.success(t('dawarich.bucket.confirmed', { count: result.updated }))
+      // Marked in place rather than rescanned: the scan costs one upstream
+      // request per wish, and the reader already knows what they just ticked.
+      setScan(prev =>
+        prev === null
+          ? prev
+          : { ...prev, matches: prev.matches.map(m => (picked.has(m.itemId) ? { ...m, alreadyVisited: true } : m)) },
+      )
+      setPicked(new Set())
+      onChanged?.()
+    } catch (err) {
+      toast.error(failureText(err, t))
+    } finally {
+      setWriting(false)
+    }
+  }
+
+  const confirmCountries = async (): Promise<void> => {
+    if (pickedCountries.size === 0 || writing) return
+    if (isEffectivelyOffline()) {
+      toast.error(t('dawarich.error.offline'))
+      return
+    }
+    setWriting(true)
+    try {
+      const result = await dawarichApi.acceptAtlasCountries([...pickedCountries])
+      toast.success(t('dawarich.atlas.accepted', { count: result.marked }))
+      setCountries(prev =>
+        prev === null
+          ? prev
+          : {
+              ...prev,
+              countries: prev.countries.map(c =>
+                pickedCountries.has(c.countryCode) ? { ...c, alreadyVisited: true } : c,
+              ),
+            },
+      )
+      setPickedCountries(new Set())
+      onChanged?.()
+    } catch (err) {
+      toast.error(failureText(err, t))
+    } finally {
+      setWriting(false)
+    }
+  }
+
+  const toggle = <T,>(set: Set<T>, value: T): Set<T> => {
+    const next = new Set(set)
+    if (next.has(value)) next.delete(value)
+    else next.add(value)
+    return next
+  }
+
+  const busy = tab === 'wishes' ? scanning : loadingCountries
+  const loaded = tab === 'wishes' ? scan !== null : countries !== null
+  const selected = tab === 'wishes' ? picked.size : pickedCountries.size
+  // Nothing was found, so there is nothing to confirm — the empty state says so
+  // in a sentence, and a greyed-out "Add 0 countries" underneath it only asks to
+  // be understood.
+  const anything = tab === 'wishes' ? matches.length > 0 : offered.length > 0
+
+  // The same two questions in both shells — only the frame differs.
+  const body = (
+      <div className="space-y-4">
+        <SlidingTabs<Tab>
+          tabs={[
+            { id: 'wishes', label: t('dawarich.atlas.tab.wishes'), icon: Star, count: openMatches.length || undefined },
+            { id: 'countries', label: t('dawarich.atlas.tab.countries'), icon: Globe2, count: offered.length || undefined },
+          ]}
+          activeTab={tab}
+          onChange={setTab}
+          size="sm"
+          fullWidth
+        />
+
+        {tab === 'wishes' ? (
+          <Section
+            icon={Star}
+            title={t('dawarich.bucket.title')}
+            description={t('dawarich.bucket.description')}
+            action={t('dawarich.bucket.scan')}
+            busyLabel={t('dawarich.bucket.scanning')}
+            busy={scanning}
+            loaded={scan !== null}
+            onRun={() => { void runScan() }}
+            empty={matches.length === 0}
+            emptyLabel={t('dawarich.bucket.noMatches')}
+            notes={[
+              scan && scan.skippedWithoutCoordinates > 0
+                ? t('dawarich.bucket.skipped', { count: scan.skippedWithoutCoordinates })
+                : null,
+              scan?.truncated ? t('dawarich.bucket.truncated') : null,
+              t('dawarich.bucket.rule', {
+                meters: DAWARICH_BUCKET_MATCH_RADIUS_M,
+                minutes: DAWARICH_BUCKET_MATCH_MIN_MINUTES,
+              }),
+            ]}
+          >
+            {matches.map(match => (
+              <Row
+                key={match.itemId}
+                name={match.name}
+                checked={picked.has(match.itemId)}
+                disabled={match.alreadyVisited}
+                onToggle={() => setPicked(prev => toggle(prev, match.itemId))}
+                leading={
+                  <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-surface-secondary">
+                    <Star className="w-4 h-4 text-accent-on" />
+                  </span>
+                }
+              >
+                {match.alreadyVisited ? (
+                  <DawarichBadge icon={Check} tone="success" size="sm">
+                    {t('dawarich.bucket.alreadyVisited')}
+                  </DawarichBadge>
+                ) : (
+                  <>
+                    <DawarichBadge icon={MapPin} size="sm">
+                      {formatDistance(match.match!.distanceMeters, t)}
+                    </DawarichBadge>
+                    <DawarichBadge icon={Hourglass} size="sm">
+                      {formatDuration(match.match!.minutes, t)}
+                    </DawarichBadge>
+                    <DawarichBadge icon={CalendarDays} size="sm">
+                      {new Date(match.match!.at).toLocaleDateString(locale, {
+                        weekday: 'short',
+                        day: 'numeric',
+                        month: 'short',
+                      })}
+                    </DawarichBadge>
+                  </>
+                )}
+              </Row>
+            ))}
+          </Section>
+        ) : (
+          <Section
+            icon={Globe2}
+            title={t('dawarich.atlas.title')}
+            description={t('dawarich.atlas.description')}
+            action={t('dawarich.atlas.load')}
+            busyLabel={t('dawarich.atlas.loading')}
+            busy={loadingCountries}
+            loaded={countries !== null}
+            onRun={() => { void loadCountries() }}
+            empty={offered.length === 0}
+            emptyLabel={t('dawarich.atlas.empty')}
+            notes={[
+              countries && countries.unresolved.length > 0
+                ? t('dawarich.atlas.unresolved', { names: countries.unresolved.join(', ') })
+                : null,
+              countries ? t('dawarich.atlas.window') : null,
+            ]}
+          >
+            {offered.map(country => (
+              <Row
+                key={country.countryCode}
+                name={countryLabel(country.countryCode, country.sourceName, locale)}
+                checked={pickedCountries.has(country.countryCode)}
+                onToggle={() => setPickedCountries(prev => toggle(prev, country.countryCode))}
+                leading={
+                  // The Atlas page draws its countries with the same flags, and a
+                  // list of country names without them looks like a spreadsheet.
+                  <img
+                    src={`https://flagcdn.com/w40/${country.countryCode.toLowerCase()}.png`}
+                    alt=""
+                    className="h-6 w-8 flex-shrink-0 rounded object-cover"
+                  />
+                }
+              >
+                {country.cities.length > 0 && (
+                  <>
+                    <DawarichBadge icon={Building2} size="sm">
+                      {country.cities.length === 1
+                        ? t('dawarich.atlas.citiesOne')
+                        : t('dawarich.atlas.cities', { count: country.cities.length })}
+                    </DawarichBadge>
+                    <span className="min-w-0 truncate text-caption text-content-muted">
+                      {cityLine(country.cities)}
+                    </span>
+                  </>
+                )}
+              </Row>
+            ))}
+          </Section>
+        )}
+      </div>
+  )
+
+  // Rendered or not, rather than `hidden`: the attribute loses to the display
+  // utility on the class list, so the button stayed on screen greyed out.
+  const confirmButton = !loaded || !anything ? null : (
+    <button
+      type="button"
+      onClick={() => { void (tab === 'wishes' ? confirmWishes() : confirmCountries()) }}
+      disabled={selected === 0 || writing}
+      className={
+        phone
+          ? 'inline-flex h-[38px] items-center gap-2 rounded-full bg-m-act px-4 text-[0.8125rem] font-bold text-m-actfg disabled:opacity-40'
+          : 'inline-flex items-center gap-2 rounded-lg bg-accent px-3.5 py-2 text-caption font-semibold text-accent-text hover:bg-accent-hover disabled:opacity-40'
+      }
+    >
+      <Check className="w-3.5 h-3.5" />
+      {tab === 'wishes'
+        ? t('dawarich.bucket.confirm', { count: selected })
+        : t('dawarich.atlas.accept', { count: selected })}
+    </button>
+  )
+
+  const againButton = loaded ? (
+    <button
+      type="button"
+      onClick={() => { void (tab === 'wishes' ? runScan() : loadCountries()) }}
+      disabled={busy}
+      className={
+        phone
+          ? 'inline-flex h-[38px] items-center gap-2 rounded-full border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-4 text-[0.8125rem] font-bold text-m-muted disabled:opacity-50'
+          : 'inline-flex items-center gap-2 rounded-lg border border-edge px-3 py-2 text-caption font-medium text-content-secondary hover:bg-surface-hover disabled:opacity-50'
+      }
+    >
+      {busy ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
+      {t('dawarich.again')}
+    </button>
+  ) : null
+
+  // The phone shell has its own sheet, its own rounding and its own pill
+  // buttons, and every other panel on it uses them.
+  if (phone) {
+    return (
+      <MSheet open={isOpen} onClose={onClose} variant="bottom" material="glass" ariaLabel={t('dawarich.title')}>
+        <div className="flex max-h-[88dvh] min-h-0 flex-col">
+          <FormSheetHeader
+            leading={
+              <span className="flex h-10 w-10 flex-none overflow-hidden rounded-[13px]">
+                <DawarichIcon size={40} />
+              </span>
+            }
+            title={t('dawarich.title')}
+            subtitle={t('dawarich.atlas.dialogSubtitle')}
+            onClose={onClose}
+            closeLabel={t('common.close')}
+          />
+          <div className="min-h-0 flex-1 overflow-y-auto px-[18px] pb-3">{body}</div>
+          <div className="flex flex-none items-center gap-2 border-t border-[color:var(--m-rowbr)] px-[18px] pb-4 pt-3">
+            <span className="min-w-0 flex-1 truncate font-geist text-[0.71875rem] text-m-muted">
+              {selected > 0 ? t('dawarich.selected', { count: selected }) : ''}
+            </span>
+            {againButton}
+            {confirmButton}
+          </div>
+        </div>
+      </MSheet>
+    )
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size="xl"
+      title={
+        <span className="flex items-center gap-2.5">
+          {/* Rounded, like every other avatar-sized mark in TREK: the logo is a
+              square badge and a hard corner beside a rounded dialog reads as a
+              pasted-in image. */}
+          <span className="flex-shrink-0 overflow-hidden rounded-lg">
+            <DawarichIcon size={26} />
+          </span>
+          <span className="min-w-0">
+            <span className="block truncate text-subtitle font-semibold text-content">{t('dawarich.title')}</span>
+            <span className="block truncate text-caption font-normal text-content-muted">
+              {t('dawarich.atlas.dialogSubtitle')}
+            </span>
+          </span>
+        </span>
+      }
+      footer={
+        <div className="flex w-full items-center justify-between gap-3">
+          <span className="text-caption text-content-muted">
+            {selected > 0 ? t('dawarich.selected', { count: selected }) : ''}
+          </span>
+          <div className="flex items-center gap-2">
+            {againButton}
+            {confirmButton}
+          </div>
+        </div>
+      }
+    >
+      {body}
+    </Modal>
+  )
+}
+
+/**
+ * One half of the dialog: the pitch before anything has been asked, the wait
+ * while it is being asked, and the answer.
+ *
+ * Both halves behave identically, which is the point — the two questions are
+ * different, the shape of answering them is not.
+ */
+function Section({
+  icon: Icon,
+  title,
+  description,
+  action,
+  busyLabel,
+  busy,
+  loaded,
+  onRun,
+  empty,
+  emptyLabel,
+  notes,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string }>
+  title: string
+  description: string
+  action: string
+  busyLabel: string
+  busy: boolean
+  loaded: boolean
+  onRun: () => void
+  empty: boolean
+  emptyLabel: string
+  notes: (string | null)[]
+  children: React.ReactNode
+}): React.ReactElement {
+  if (busy) {
+    return (
+      <div className="space-y-2" aria-busy>
+        <p className="text-caption text-content-muted">{busyLabel}</p>
+        {[0, 1, 2].map(i => (
+          <div key={i} className="flex items-center gap-3 rounded-xl border border-edge p-3">
+            <Skeleton width={32} height={32} radius={8} />
+            <div className="flex-1 space-y-1.5">
+              <Skeleton width="45%" height={13} radius={4} />
+              <Skeleton width="70%" height={11} radius={4} />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (!loaded) {
+    return (
+      <div className="flex flex-col items-center rounded-xl border border-dashed border-edge px-6 py-8 text-center">
+        <span className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-surface-secondary">
+          <Icon className="w-5 h-5 text-content-secondary" />
+        </span>
+        <p className="text-body font-semibold text-content">{title}</p>
+        <p className="mt-1.5 max-w-md text-caption text-content-muted">{description}</p>
+        <button
+          type="button"
+          onClick={onRun}
+          className="mt-4 inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-caption font-semibold text-accent-text hover:bg-accent-hover"
+        >
+          <RefreshCw className="w-3.5 h-3.5" />
+          {action}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {empty ? (
+        <div className="rounded-xl border border-dashed border-edge px-6 py-8 text-center text-caption text-content-muted">
+          {emptyLabel}
+        </div>
+      ) : (
+        <div className="space-y-1.5">{children}</div>
+      )}
+      {notes.filter(Boolean).length > 0 && (
+        <div className="space-y-1 border-t border-edge-faint pt-2.5">
+          {notes.filter(Boolean).map(note => (
+            <p key={note} className="flex items-start gap-1.5 text-caption text-content-faint">
+              <Info className="w-3 h-3 flex-shrink-0 mt-0.5" />
+              {note}
+            </p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * A selectable answer: what it is on the left, why it is being offered
+ * underneath, and a tick that says whether it will be applied.
+ *
+ * The whole row is the control — a 16px checkbox is a hard target on a phone,
+ * and there is nothing else in the row to click.
+ */
+function Row({
+  name,
+  checked,
+  disabled = false,
+  onToggle,
+  leading,
+  children,
+}: {
+  name: string
+  checked: boolean
+  disabled?: boolean
+  onToggle: () => void
+  leading: React.ReactNode
+  children: React.ReactNode
+}): React.ReactElement {
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      aria-label={name}
+      disabled={disabled}
+      onClick={onToggle}
+      className={`flex w-full items-center gap-3 rounded-xl border p-2.5 text-left transition-colors ${
+        checked ? 'border-accent bg-accent-subtle' : 'border-edge hover:bg-surface-hover'
+      } ${disabled ? 'opacity-60' : ''}`}
+    >
+      <span
+        aria-hidden
+        className={`flex h-4 w-4 flex-shrink-0 items-center justify-center rounded ${
+          checked ? 'bg-accent' : 'border-[1.5px] border-edge'
+        }`}
+      >
+        {checked && <Check className="w-2.5 h-2.5 text-accent-text" strokeWidth={3} />}
+      </span>
+      {leading}
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-body font-medium text-content">{name}</span>
+        <span className="mt-1 flex flex-wrap items-center gap-1">{children}</span>
+      </span>
+    </button>
+  )
+}
+
+/**
+ * What to tell the reader when a question could not be asked.
+ *
+ * Being offline is not an error the server reported — nothing was sent — and
+ * "something went wrong" for a plane journey is the kind of message that sends
+ * somebody looking for a bug in their Dawarich instance.
+ */
+function failureText(err: unknown, t: (key: string) => string): string {
+  if (err instanceof DawarichOfflineError) return t('dawarich.error.offline')
+  return errorText(err) ?? t('dawarich.error.unknown')
+}
+
+/** The server's `{ error }` envelope, when there is one. */
+function errorText(err: unknown): string | null {
+  const data = (err as { response?: { data?: { error?: unknown } } })?.response?.data
+  return typeof data?.error === 'string' ? data.error : null
+}

client/src/components/Dawarich/DawarichAtlasSidePanel.test.tsx

@@ -0,0 +1,174 @@
+// FE-DAWARICH-ATLASPANEL-001 to FE-DAWARICH-ATLASPANEL-007
+/**
+ * Dawarich's own panel on the Atlas, beside the stats.
+ *
+ * The panel itself holds almost no logic, and the little it does hold is the
+ * kind that is invisible until it is wrong:
+ *
+ *  - **It has to disappear completely when the addon is off.** Not empty, not a
+ *    blank pane of glass in the row beside the stats: absent, so an Atlas
+ *    without Dawarich looks exactly as it did before the integration landed.
+ *  - **It has to ask the question that was pressed.** Two tiles, one dialog, one
+ *    `initialTab` between them. Wiring both tiles to the same tab is a bug that
+ *    looks like a working panel.
+ *  - **It mounts the dialog on open and throws it away on close**, deliberately,
+ *    so a second visit starts from a fresh question rather than from a scan
+ *    somebody ran an hour ago.
+ *  - **It is made of the same glass as the Atlas panel next to it.** The tint
+ *    and the cursor glare are hand-written rgba rather than tokens (a solid
+ *    surface token would punch an opaque hole in a panel floating over a blurred
+ *    map), so nothing but a test stops the two panels drifting apart in the
+ *    dark theme.
+ *
+ * The dialog is pinned by its own file and stands in for itself here, so the
+ * panel's decisions are observable without a scan and without mocking Dawarich.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { fireEvent } from '@testing-library/react'
+import { render, screen } from '../../../tests/helpers/render'
+import { useAddonStore } from '../../store/addonStore'
+import DawarichAtlasSidePanel from './DawarichAtlasSidePanel'
+
+vi.mock('./DawarichAtlasDialog', () => ({
+  default: ({
+    initialTab,
+    onClose,
+    onChanged,
+  }: {
+    initialTab: string
+    onClose: () => void
+    onChanged?: () => void
+  }) => (
+    <div data-testid="atlas-dialog">
+      <span>asked: {initialTab}</span>
+      <button type="button" onClick={onClose}>
+        dismiss
+      </button>
+      <button type="button" onClick={() => onChanged?.()}>
+        wrote something
+      </button>
+    </div>
+  ),
+}))
+
+const ADDON = { id: 'dawarich', name: 'Dawarich', type: 'integration', icon: 'route', enabled: true }
+
+/** The glass the Atlas hands down, reduced to the one property jsdom can answer for. */
+const GLASS: React.CSSProperties = { borderRadius: 20 }
+
+/** Inline rgba comes back from jsdom respaced; nothing here cares about the spaces. */
+const rgba = (el: HTMLElement): string => el.style.background.replace(/\s/g, '')
+
+function mount(props: Partial<React.ComponentProps<typeof DawarichAtlasSidePanel>> = {}) {
+  return render(<DawarichAtlasSidePanel style={GLASS} dark {...props} />)
+}
+
+beforeEach(() => {
+  useAddonStore.setState({ addons: [ADDON], loaded: true })
+})
+
+afterEach(() => {
+  useAddonStore.setState({ addons: [], loaded: false })
+})
+
+describe('DawarichAtlasSidePanel', () => {
+  it('FE-DAWARICH-ATLASPANEL-001: an Atlas without the addon gets no panel at all', () => {
+    useAddonStore.setState({ addons: [{ ...ADDON, enabled: false }] })
+
+    const { container } = mount()
+
+    // Nothing rendered, rather than an empty pane of glass in the row: the
+    // panel is stretched to the height of the stats beside it, so an empty one
+    // would be a visible hole.
+    expect(container).toBeEmptyDOMElement()
+    expect(screen.queryByRole('button', { name: 'Wishlist' })).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-002: with the addon on it offers two questions and asks neither', () => {
+    const { container } = mount()
+
+    expect(screen.getByText('Dawarich')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Wishlist' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Countries' })).toBeInTheDocument()
+    // A scan costs one upstream request per wish. Nothing is asked until asked.
+    expect(screen.queryByTestId('atlas-dialog')).toBeNull()
+    // And it wears the glass it was handed rather than one of its own.
+    expect(container.firstElementChild).toHaveStyle({ borderRadius: '20px' })
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-003: the wishlist tile opens the dialog on the wishlist, and closing puts it away', () => {
+    mount()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Wishlist' }))
+
+    expect(screen.getByText('asked: wishes')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'dismiss' }))
+
+    // Unmounted, not hidden: the next visit starts from a clean question rather
+    // than from an answer that is an hour old.
+    expect(screen.queryByTestId('atlas-dialog')).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-004: the countries tile opens the same dialog on the other question', () => {
+    mount()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Countries' }))
+
+    expect(screen.getByText('asked: countries')).toBeInTheDocument()
+    expect(screen.queryByText('asked: wishes')).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-005: what the dialog wrote is reported up to the Atlas', () => {
+    // The Atlas keeps its own counts and its own map. Without this the confirmed
+    // countries only appear after a reload.
+    const onChanged = vi.fn()
+    mount({ onChanged })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Countries' }))
+    fireEvent.click(screen.getByRole('button', { name: 'wrote something' }))
+
+    expect(onChanged).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-006: the tiles are a tint of the light the panel is made of, per theme', () => {
+    const { rerender } = render(<DawarichAtlasSidePanel style={GLASS} dark={false} />)
+    const wishes = screen.getByRole('button', { name: 'Wishlist' })
+
+    expect(rgba(wishes)).toBe('rgba(0,0,0,0.05)')
+    fireEvent.mouseEnter(wishes)
+    expect(rgba(wishes)).toBe('rgba(0,0,0,0.09)')
+    fireEvent.mouseLeave(wishes)
+    expect(rgba(wishes)).toBe('rgba(0,0,0,0.05)')
+
+    rerender(<DawarichAtlasSidePanel style={GLASS} dark />)
+
+    // Inverted on the dark map, not merely darkened: the tile is light added to
+    // the glass, and a black tint on a dark blurred map is an invisible button.
+    expect(rgba(screen.getByRole('button', { name: 'Wishlist' }))).toBe('rgba(255,255,255,0.07)')
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-007: the glass glare follows the cursor and goes out behind it', () => {
+    const { container } = mount()
+    const panel = container.firstElementChild as HTMLElement
+    const [glare, borderGlare] = Array.from(panel.children) as HTMLElement[]
+
+    expect(glare.style.opacity).toBe('0')
+
+    fireEvent.mouseMove(panel, { clientX: 140, clientY: 60 })
+
+    // The pool of light has to sit under the pointer, not merely exist: the
+    // panel's box measures as the origin here, so the cursor's own coordinates
+    // are what should end up in the gradient. An effect that lit up in a fixed
+    // spot would pass an opacity-only assertion and look broken on screen.
+    expect(glare.style.background).toContain('at 140px 60px')
+    expect(glare.style.opacity).toBe('1')
+    expect(borderGlare.style.opacity).toBe('1')
+
+    fireEvent.mouseLeave(panel)
+
+    expect(glare.style.opacity).toBe('0')
+    expect(borderGlare.style.opacity).toBe('0')
+  })
+})

client/src/components/Dawarich/DawarichAtlasSidePanel.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import { Globe2, Star } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useAddonStore } from '../../store/addonStore'
+import { Tooltip } from '../shared/Tooltip'
+import { useGlassGlare } from '../Atlas/useGlassGlare'
+import DawarichIcon from '../shared/DawarichIcon'
+import DawarichAtlasDialog from './DawarichAtlasDialog'
+
+type Question = 'wishes' | 'countries'
+
+/**
+ * Dawarich's own panel on the Atlas, beside the stats.
+ *
+ * The Atlas is a map with a single glass panel floating over it, and everything
+ * it offers lives in that panel. Dawarich answers two questions about the same
+ * map — which wishes were actually reached, and which countries the recordings
+ * say you were in — but they are *its* answers, not the Atlas's own numbers, and
+ * squeezed under the wishlist they read as fine print nobody asked for.
+ *
+ * So it gets a panel of its own, in the same glass and stretched to the same
+ * height, and the two questions are two tiles built like the stat blocks beside
+ * them: a mark, then a small capitalised label. The lists they produce open in a
+ * dialog — they are offers to read and confirm, and a bar over a world map is no
+ * place to read anything.
+ *
+ * Renders nothing when the addon is off, so an Atlas without Dawarich looks
+ * exactly as it did before.
+ */
+export default function DawarichAtlasSidePanel({
+  style,
+  dark,
+  onChanged,
+}: {
+  /** The glass the Atlas panels are made of, handed down so the two cannot drift. */
+  style: React.CSSProperties
+  dark: boolean
+  /** Called after something was written, so the Atlas can re-read itself. */
+  onChanged?: () => void
+}): React.ReactElement | null {
+  const { t } = useTranslation()
+  const addonEnabled = useAddonStore(state => state.isEnabled)
+  const [asked, setAsked] = useState<Question | null>(null)
+  const glare = useGlassGlare(dark)
+
+  if (!addonEnabled('dawarich')) return null
+
+  // theme-lint-disable — the panel floats on a blurred map: a solid surface
+  // token would punch an opaque hole in the glass, so the tiles are a tint of
+  // the same light the panel is made of.
+  const tile = dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.05)'
+  const tileHover = dark ? 'rgba(255,255,255,0.13)' : 'rgba(0,0,0,0.09)'
+
+  const question = (id: Question, Icon: React.ComponentType<{ size?: number; strokeWidth?: number }>, label: string) => (
+    <button
+      type="button"
+      onClick={() => setAsked(id)}
+      className="group flex flex-col items-center justify-center text-content-secondary hover:text-content"
+      style={{
+        background: tile,
+        border: 'none',
+        borderRadius: 14,
+        cursor: 'pointer',
+        fontFamily: 'inherit',
+        gap: 6,
+        minWidth: 74,
+        padding: '10px 12px',
+        transition: 'background 0.15s ease, color 0.15s ease',
+      }}
+      onMouseEnter={e => { e.currentTarget.style.background = tileHover }}
+      onMouseLeave={e => { e.currentTarget.style.background = tile }}
+    >
+      <Icon size={17} strokeWidth={2} />
+      <span
+        className="font-bold uppercase tracking-wide whitespace-nowrap"
+        style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))' }}
+      >
+        {label}
+      </span>
+    </button>
+  )
+
+  return (
+    <>
+      <div
+        ref={glare.panelRef}
+        onMouseMove={glare.onMouseMove}
+        onMouseLeave={glare.onMouseLeave}
+        className="relative hidden md:flex flex-col justify-center gap-3 overflow-hidden px-5 py-4"
+        style={style}
+      >
+        {/* Liquid glass glare, and the border glow that follows the cursor —
+            the same two layers the Atlas panel carries. */}
+        <div ref={glare.glareRef} className="absolute inset-0 pointer-events-none" style={{ opacity: 0, transition: 'opacity 0.3s ease', borderRadius: 20 }} />
+        <div ref={glare.borderGlareRef} className="absolute inset-0 pointer-events-none" style={{
+          opacity: 0, transition: 'opacity 0.3s ease', borderRadius: 20,
+          border: dark ? '1.5px solid rgba(255,255,255,0.5)' : '2px solid rgba(0,0,0,0.15)',
+        }} />
+        {/* The long explanation moved into the tooltip: on a panel this size it
+            was three lines of grey that said what the two tiles already say. */}
+        <Tooltip label={t('dawarich.atlas.trigger')} placement="top">
+          <span className="relative flex items-center justify-center gap-2.5">
+            <span className="flex-shrink-0 overflow-hidden rounded-[9px]">
+              <DawarichIcon size={30} />
+            </span>
+            <span
+              className="truncate font-black tracking-tight text-content"
+              style={{ fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))' }}
+            >
+              {t('dawarich.title')}
+            </span>
+          </span>
+        </Tooltip>
+
+        <div className="relative flex items-stretch gap-2">
+          {question('wishes', Star, t('dawarich.atlas.tab.wishes'))}
+          {question('countries', Globe2, t('dawarich.atlas.tab.countries'))}
+        </div>
+      </div>
+
+      {/* Mounted on open so every visit starts from a clean question rather than
+          from a scan somebody ran an hour ago. */}
+      {asked !== null && (
+        <DawarichAtlasDialog
+          isOpen
+          initialTab={asked}
+          onClose={() => setAsked(null)}
+          onChanged={onChanged}
+        />
+      )}
+    </>
+  )
+}

client/src/components/Dawarich/DawarichBadge.test.tsx

@@ -0,0 +1,172 @@
+// FE-DAWARICH-BADGE-001 to FE-DAWARICH-BADGE-007
+/**
+ * The one pill the whole Dawarich surface is drawn from, pinned prop by prop.
+ *
+ * It is nine lines of JSX, which is exactly why it is worth a test: the review
+ * list, the accept dialog and the Atlas dialog all render it, so a change here
+ * lands in three places at once and none of their tests would name it as the
+ * culprit.
+ *
+ * What is worth holding still, roughly in the order of what breaks worst:
+ *
+ *  - **Icon-only means named.** `children === undefined` is the switch that
+ *    turns a badge into a round dot of colour, and it is the same switch that
+ *    adds `role="img"` and the accessible name. Lose the pairing and the low
+ *    confidence flag, the "source gone" flag and the "source changed" flag all
+ *    become unlabelled squares that a screen reader reads as nothing at all.
+ *  - **`children === undefined`, not `!children`.** The day header counts its
+ *    stays with the array length, so a falsy check would turn a legitimate
+ *    count of zero into an unlabelled dot.
+ *  - **The tone is the meaning.** Five tones, each a pair of theme tokens; a
+ *    warning that quietly maps to the neutral pair still reads as a fact worth
+ *    ignoring, which is the opposite of what it is there to say.
+ *  - **The type scales with the reader's setting.** Both sizes go through
+ *    `--fs-scale-caption`; a raw `fontSize: 11` would look identical in review
+ *    and ignore the text-size preference entirely.
+ *  - **A badge with something to add gets TREK's tooltip, one without gets
+ *    none.** `title` wins over `label` as the hover text, so a pointer user can
+ *    be told more than the accessible name says.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, act } from '../../../tests/helpers/render'
+import { fireEvent } from '@testing-library/react'
+import DawarichBadge from './DawarichBadge'
+
+type BadgeProps = React.ComponentProps<typeof DawarichBadge>
+
+// The clock goes in before anything renders, the way Tooltip's own suite does
+// it: swapping timers out from under a mounted tree leaves whatever it already
+// scheduled on the real clock. `shouldAdvanceTime` keeps real time moving, so
+// the locale promise the render helper's provider starts still settles.
+beforeEach(() => {
+  vi.useFakeTimers({ shouldAdvanceTime: true })
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+/**
+ * Stands in for a lucide icon. All the badge does with one is hand it a
+ * className, so that string is the only thing worth asserting about it.
+ */
+function StubIcon({ className }: { className?: string }) {
+  return <svg data-testid="badge-icon" className={className} />
+}
+
+function badge(props: BadgeProps) {
+  const view = render(<DawarichBadge {...props} />)
+  return { ...view, el: view.container.firstElementChild as HTMLElement }
+}
+
+/**
+ * What the badge says on hover, or null when it has nothing to add and is
+ * therefore not wrapped in a tooltip at all. The tooltip opens on a 250 ms
+ * timer, so the clock has to be moved on by hand for either answer to be true
+ * rather than merely early.
+ */
+function hoverText(el: HTMLElement): string | null {
+  fireEvent.mouseEnter(el)
+  // One window covers both steps: the 250 ms open timer, and the effect that
+  // measures the trigger afterwards. Until that effect lands the portal is
+  // `visibility: hidden`, which is invisible to a role query as well as to a
+  // reader, so a half-flushed tooltip would read as no tooltip at all.
+  act(() => { vi.advanceTimersByTime(300) })
+  return screen.queryByRole('tooltip')?.textContent ?? null
+}
+
+describe('DawarichBadge', () => {
+  it('FE-DAWARICH-BADGE-001: the default pill is neutral, xs, and says nothing on hover', () => {
+    const { el } = badge({ children: '3 stays' })
+
+    expect(el).toHaveTextContent('3 stays')
+    expect(el).toHaveClass('h-[18px]', 'px-1.5', 'bg-surface-secondary', 'text-content-secondary')
+    // A pill that already reads "3 stays" needs no image role and no name of
+    // its own: both would make a screen reader announce the same thing twice.
+    expect(el).not.toHaveAttribute('role')
+    expect(el).not.toHaveAttribute('aria-label')
+    expect(el.style.fontSize).toBe('calc(10px * var(--fs-scale-caption, 1))')
+    expect(el.querySelector('[data-testid="badge-icon"]')).toBeNull()
+    // No title and no label, so there is nothing a tooltip could add.
+    expect(hoverText(el)).toBeNull()
+  })
+
+  it('FE-DAWARICH-BADGE-002: sm raises the box, the icon and the type together', () => {
+    const { el } = badge({ icon: StubIcon, size: 'sm', children: '2 h 25 min' })
+
+    expect(el).toHaveClass('h-[20px]', 'px-1.5')
+    expect(el.style.fontSize).toBe('calc(11px * var(--fs-scale-caption, 1))')
+    expect(screen.getByTestId('badge-icon').getAttribute('class')).toBe('w-3 h-3 flex-shrink-0')
+    // The text truncates and the glyph does not: a long name must run out of
+    // room before it squeezes the icon out of shape.
+    expect(el.querySelector('.truncate')).toHaveTextContent('2 h 25 min')
+  })
+
+  it('FE-DAWARICH-BADGE-003: an icon-only pill is square, named, and offers its name on hover', () => {
+    const { el } = badge({ icon: StubIcon, tone: 'warning', label: 'Low confidence' })
+
+    expect(el).toHaveAttribute('role', 'img')
+    expect(el).toHaveAttribute('aria-label', 'Low confidence')
+    expect(el).toHaveClass('w-[18px]', 'justify-center', 'bg-warning-soft', 'text-warning')
+    // Side padding would make the circle an oval, and there is no text to pad
+    // away from in the first place.
+    expect(el).not.toHaveClass('px-1.5')
+    expect(el.querySelector('.truncate')).toBeNull()
+    expect(screen.getByTestId('badge-icon').getAttribute('class')).toBe('w-2.5 h-2.5 flex-shrink-0')
+    // No title, so the accessible name doubles as the hover text and a pointer
+    // user is told exactly what a screen reader is told.
+    expect(hoverText(el)).toBe('Low confidence')
+  })
+
+  it('FE-DAWARICH-BADGE-004: the square grows with the size, so the dot stays a circle', () => {
+    const { el } = badge({ icon: StubIcon, size: 'sm', label: 'Source gone' })
+
+    expect(el).toHaveClass('h-[20px]', 'w-[20px]', 'justify-center')
+    expect(el).not.toHaveClass('w-[18px]')
+  })
+
+  it('FE-DAWARICH-BADGE-005: title is the hover text, label stays the name', () => {
+    const { el } = badge({
+      icon: StubIcon,
+      tone: 'warning',
+      label: 'Low confidence',
+      title: 'Dawarich is not sure this stay happened',
+    })
+
+    // The two are not interchangeable: the name is what the badge is, the title
+    // is what it has to add, and a screen reader would drown in the long one.
+    expect(el).toHaveAttribute('aria-label', 'Low confidence')
+    expect(hoverText(el)).toBe('Dawarich is not sure this stay happened')
+  })
+
+  it('FE-DAWARICH-BADGE-006: every tone keeps its own pair of theme tokens', () => {
+    const tones: Array<[NonNullable<BadgeProps['tone']>, string[]]> = [
+      ['neutral', ['bg-surface-secondary', 'text-content-secondary']],
+      ['quiet', ['bg-surface-secondary', 'text-content-faint']],
+      ['accent', ['bg-accent-subtle', 'text-accent-on']],
+      ['success', ['bg-success-soft', 'text-success']],
+      ['warning', ['bg-warning-soft', 'text-warning']],
+    ]
+
+    for (const [tone, classes] of tones) {
+      const { el, unmount } = badge({ tone, children: tone })
+      // Tokens rather than colour literals, or the badge stops following the
+      // user's scheme the moment they pick one.
+      expect(el).toHaveClass(...classes)
+      unmount()
+    }
+  })
+
+  it('FE-DAWARICH-BADGE-007: a zero is a child, not an absent one', () => {
+    // The day header counts its stays with the array length. Icon-only is
+    // `children === undefined` and not a falsy check for exactly this reason: a
+    // count of 0 that turned into an unlabelled dot would be a day that lost
+    // its number.
+    const { el } = badge({ tone: 'quiet', children: 0 })
+
+    expect(el).toHaveTextContent('0')
+    expect(el).not.toHaveAttribute('role')
+    expect(el).toHaveClass('px-1.5')
+  })
+})

client/src/components/Dawarich/DawarichBadge.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Tooltip } from '../shared/Tooltip'
+
+/**
+ * One badge shape for everything Dawarich shows.
+ *
+ * Fixed height and a single radius, so a row of them lines up however many there
+ * are; the tone is the only thing that varies, and it carries the meaning rather
+ * than decorating it. `quiet` is for a fact worth stating and not worth looking
+ * at twice.
+ *
+ * It lives in its own file because the review list, the accept dialog and the
+ * Atlas dialog all use it, and three copies of a pill is how two of them end up
+ * a pixel apart.
+ */
+export default function DawarichBadge({
+  icon: Icon,
+  tone = 'neutral',
+  size = 'xs',
+  title,
+  label,
+  children,
+}: {
+  icon?: React.ComponentType<{ className?: string }>
+  tone?: 'neutral' | 'quiet' | 'accent' | 'success' | 'warning'
+  /**
+   * `xs` matches the places rail, where the panel sits beside rows of that size;
+   * `sm` is for the dialogs, which are read at arm's length rather than scanned.
+   */
+  size?: 'xs' | 'sm'
+  /** Hover text. Defaults to `label` when the badge is icon-only. */
+  title?: string
+  /**
+   * The accessible name for an icon-only badge. Passing it instead of children
+   * is what makes a flag a round dot of colour without turning a screen reader
+   * into someone staring at an unlabelled icon.
+   */
+  label?: string
+  children?: React.ReactNode
+}): React.ReactElement {
+  const tones: Record<string, string> = {
+    neutral: 'bg-surface-secondary text-content-secondary',
+    quiet: 'bg-surface-secondary text-content-faint',
+    accent: 'bg-accent-subtle text-accent-on',
+    success: 'bg-success-soft text-success',
+    warning: 'bg-warning-soft text-warning',
+  }
+  const metrics =
+    size === 'sm'
+      ? { style: { fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }, box: 'h-[20px]', icon: 'w-3 h-3' }
+      : { style: { fontSize: 'calc(10px * var(--fs-scale-caption, 1))' }, box: 'h-[18px]', icon: 'w-2.5 h-2.5' }
+  const iconOnly = children === undefined
+  const hint = title ?? label
+  const badge = (
+    <span
+      aria-label={iconOnly ? label : undefined}
+      role={iconOnly ? 'img' : undefined}
+      style={metrics.style}
+      className={`inline-flex ${metrics.box} max-w-full flex-shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold ${
+        iconOnly ? (size === 'sm' ? 'w-[20px] justify-center' : 'w-[18px] justify-center') : 'px-1.5'
+      } ${tones[tone]}`}
+    >
+      {Icon && <Icon className={`${metrics.icon} flex-shrink-0`} />}
+      {!iconOnly && <span className="truncate">{children}</span>}
+    </span>
+  )
+  // TREK's own tooltip rather than the browser's: the native one ignores the
+  // colour scheme, waits a second and a half, and cannot be read on a touch
+  // device at all. A badge with nothing to add gets none.
+  return hint ? <Tooltip label={hint} placement="top">{badge}</Tooltip> : badge
+}

client/src/components/Dawarich/DawarichSuggestionsPanel.test.tsx

@@ -0,0 +1,640 @@
+// FE-DAWARICH-PANEL-001 to FE-DAWARICH-PANEL-033
+/**
+ * The review panel both shells share, pinned end to end.
+ *
+ * `useDawarichSuggestions` is mocked rather than the network: the hook is
+ * already covered on its own, and driving the panel through six `status`
+ * values, a busy row and a refused accept via MSW would mean six round trips to
+ * assert one branch each. What is NOT mocked is anything the panel renders
+ * itself, `DawarichAcceptDialog` included, because the wiring between a row's
+ * button and that dialog's confirm is exactly the part that would rot silently.
+ *
+ * What is worth pinning here, roughly in the order of what breaks worst:
+ *
+ *  - **The panel renders nothing when there is nothing to review.** A connected,
+ *    quiet integration is meant to be invisible; the moment that early return
+ *    goes, every trip in the app grows a permanent empty card explaining that
+ *    Dawarich found nothing.
+ *  - **`accept` is the only path that writes.** The dialog closes and the host
+ *    is notified only when the hook says the write landed, so a refused accept
+ *    has to leave the dialog standing with the user's corrections still in it.
+ *  - **The two accept buttons are conditional on there being somewhere to put
+ *    the stay.** The planner has no journey list and the journal has no trip
+ *    list; offering the missing one opens an empty picker.
+ *  - **A shrinking place count means somebody deleted what an acceptance
+ *    created**, which puts the stay back into review on the server. If that
+ *    effect stops firing, the row stays hidden until a full reload.
+ *  - **The phone shell paints from `--m-*`.** Both shells run this one
+ *    component, so every palette fork inside it is real behaviour that no
+ *    mobile-screen test covers.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, act, within } from '../../../tests/helpers/render'
+import { fireEvent } from '@testing-library/react'
+import type { DawarichSuggestion } from '@trek/shared'
+import type { Place } from '../../types'
+import type { DawarichSuggestionsState } from '../../hooks/useDawarichSuggestions'
+import { useTripStore } from '../../store/tripStore'
+import DawarichSuggestionsPanel from './DawarichSuggestionsPanel'
+
+// The hook is the panel's whole world: status, rows, the busy row and the three
+// mutations. Held in a `let` the factory reads lazily, so each test hands the
+// panel a different world without re-importing the component.
+let S: DawarichSuggestionsState
+const seenFilter = vi.fn()
+vi.mock('../../hooks/useDawarichSuggestions', () => ({
+  useDawarichSuggestions: (filter?: { tripId?: number }) => {
+    seenFilter(filter)
+    return S
+  },
+}))
+
+// Both the panel and the accept dialog read this module, and the relative
+// specifier resolves to the same file from either, so one mock flips the whole
+// tree between the desktop tokens and the phone's own palette.
+let phone = false
+vi.mock('../../mobile/useIsPhone', () => ({ useIsPhone: () => phone }))
+
+function stay(over: Partial<DawarichSuggestion> & { id: number; localDate: string }): DawarichSuggestion {
+  return {
+    id: over.id,
+    sourceVisitId: String(over.id),
+    tripId: over.tripId ?? null,
+    tripTitle: over.tripTitle ?? null,
+    name: over.name ?? 'Cafe Reichard',
+    lat: over.lat ?? 50.94,
+    lng: over.lng ?? 6.96,
+    startedAt: over.startedAt ?? `${over.localDate}T10:15:00+02:00`,
+    endedAt: over.endedAt ?? `${over.localDate}T12:40:00+02:00`,
+    durationMinutes: over.durationMinutes ?? 145,
+    localDate: over.localDate,
+    sourceStatus: over.sourceStatus ?? 'suggested',
+    confidence: over.confidence ?? null,
+    confidenceBand: over.confidenceBand ?? null,
+    state: over.state ?? 'new',
+    target: over.target ?? null,
+    acceptedPlaceId: over.acceptedPlaceId ?? null,
+    acceptedJournalEntryId: over.acceptedJournalEntryId ?? null,
+    acceptedBucketListItemId: over.acceptedBucketListItemId ?? null,
+    sourceChanged: over.sourceChanged ?? false,
+    sourceMissing: over.sourceMissing ?? false,
+    matchedBucketListItemId: over.matchedBucketListItemId ?? null,
+    matchedBucketListName: over.matchedBucketListName ?? null,
+    countryCode: over.countryCode ?? null,
+    firstSeenAt: over.firstSeenAt ?? '2026-09-10T06:00:00Z',
+    lastSeenAt: over.lastSeenAt ?? '2026-09-10T06:00:00Z',
+  }
+}
+
+const accept = vi.fn<(id: number, body: unknown) => Promise<boolean>>()
+const dismiss = vi.fn<(id: number) => Promise<void>>()
+const restore = vi.fn<(id: number) => Promise<void>>()
+const reload = vi.fn()
+
+function hookState(over: Partial<DawarichSuggestionsState> = {}): DawarichSuggestionsState {
+  return {
+    suggestions: [],
+    status: 'ready',
+    lastSyncAt: null,
+    lastSyncState: 'ok',
+    lastSyncError: null,
+    busyId: null,
+    reload,
+    accept,
+    dismiss,
+    restore,
+    ...over,
+  }
+}
+
+/** Only the one field the panel's place-count effect reads. */
+function places(count: number): Place[] {
+  return Array.from({ length: count }, (_, i) => ({ id: i + 1 })) as unknown as Place[]
+}
+
+const TRIPS = [{ id: 5, label: 'Cologne' }]
+const JOURNALS = [{ id: 9, label: 'Rhine notes' }]
+
+function panel(props: Partial<React.ComponentProps<typeof DawarichSuggestionsPanel>> = {}) {
+  return render(<DawarichSuggestionsPanel {...props} />)
+}
+
+/** The collapsible header, which is also the only element carrying aria-expanded. */
+function header(): HTMLElement {
+  return screen.getByRole('button', { name: /From Dawarich/ })
+}
+
+/** The row card holding a given stay name, for scoping a query to one row. */
+function rowOf(container: HTMLElement, name: string): HTMLElement {
+  const row = within(container).getByText(name).closest('.items-stretch')
+  if (!row) throw new Error(`no row found for ${name}`)
+  return row as HTMLElement
+}
+
+beforeEach(() => {
+  phone = false
+  S = hookState()
+  seenFilter.mockReset()
+  accept.mockReset().mockResolvedValue(true)
+  dismiss.mockReset().mockResolvedValue(undefined)
+  restore.mockReset().mockResolvedValue(undefined)
+  reload.mockReset()
+  useTripStore.setState({ places: [] })
+})
+
+afterEach(() => {
+  useTripStore.setState({ places: [] })
+})
+
+describe('DawarichSuggestionsPanel: whether it shows up at all', () => {
+  it('FE-DAWARICH-PANEL-001: an addon nobody switched on renders nothing', () => {
+    S = hookState({ status: 'idle' })
+    const { container } = panel()
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('FE-DAWARICH-PANEL-002: connected and quiet is invisible, not an empty card', () => {
+    // Read successfully, nothing pending and nothing in the history: the panel
+    // stays out of the rail rather than explaining that it found nothing.
+    S = hookState({ status: 'ready', suggestions: [] })
+    const { container } = panel()
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('FE-DAWARICH-PANEL-003: it does show up while it is still reading, before it knows', () => {
+    S = hookState({ status: 'loading', suggestions: [] })
+    panel()
+    // Twice: once under the title, once in the opened body.
+    expect(screen.getAllByText('Reading Dawarich…')).toHaveLength(2)
+    expect(header()).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('FE-DAWARICH-PANEL-004: a failed read is said in the danger colour, without the stale error under it', () => {
+    S = hookState({ status: 'unavailable', lastSyncError: 'Dawarich rejected the API key.' })
+    const { container } = panel()
+
+    const line = container.querySelector('p.text-danger')
+    expect(line).not.toBeNull()
+    expect(line).toHaveTextContent('Dawarich could not be read.')
+    // The sync error belongs above a list that did load. Beside "could not be
+    // read" it is the same news twice in two different wordings.
+    expect(screen.queryByText('Dawarich rejected the API key.')).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-005: not-connected and offline each get their own sentence', () => {
+    S = hookState({ status: 'disconnected' })
+    const { unmount } = panel()
+    expect(screen.getAllByText('Connect Dawarich in Settings to see your stays here.')).toHaveLength(2)
+    unmount()
+
+    S = hookState({ status: 'offline' })
+    panel()
+    expect(screen.getAllByText('The recorded route needs a connection')).toHaveLength(2)
+  })
+
+  it('FE-DAWARICH-PANEL-006: freshness reads as a relative time, and says so when there is none', () => {
+    S = hookState({
+      suggestions: [stay({ id: 1, localDate: '2026-09-10' })],
+      lastSyncAt: new Date(Date.now() - 120_000).toISOString(),
+    })
+    const { unmount } = panel()
+    // "checked 2 minutes ago" answers the question; a stamp makes the reader
+    // do the subtraction.
+    expect(header()).toHaveTextContent(/checked 2 minutes ago/)
+    unmount()
+
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })], lastSyncAt: null })
+    panel()
+    expect(header()).toHaveTextContent('Not checked yet')
+  })
+
+  it('FE-DAWARICH-PANEL-007: the trip filter is handed to the hook', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    panel({ tripId: 5 })
+    expect(seenFilter).toHaveBeenCalledWith({ tripId: 5 })
+  })
+})
+
+describe('DawarichSuggestionsPanel: the list', () => {
+  it('FE-DAWARICH-PANEL-008: stays are grouped by day, newest day first, each day counted', () => {
+    S = hookState({
+      suggestions: [
+        stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig', startedAt: '2026-09-10T18:00:00+02:00' }),
+        stay({ id: 2, localDate: '2026-09-10', name: 'Cafe Reichard' }),
+        stay({ id: 3, localDate: '2026-09-11', name: 'Koelner Dom' }),
+      ],
+    })
+    const { container } = panel({ trips: TRIPS })
+
+    const headings = Array.from(container.querySelectorAll('.uppercase')).map(node => node.textContent)
+    expect(headings).toEqual(['Fri, Sep 11', 'Thu, Sep 10'])
+    // The badge in the header repeats what the open list adds up to.
+    expect(header()).toHaveTextContent('3')
+    // The times, which are the only thing telling two stays on one day apart.
+    const row = rowOf(container, 'Cafe Reichard')
+    expect(row).toHaveTextContent('10:15')
+    expect(row).toHaveTextContent('12:40')
+    expect(row).toHaveTextContent('2 h 25 min')
+  })
+
+  it('FE-DAWARICH-PANEL-009: collapsed to start, and the header is the way back in', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig' })] })
+    panel({ initiallyCollapsed: true, trips: TRIPS })
+
+    expect(header()).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByText('Museum Ludwig')).toBeNull()
+
+    fireEvent.click(header())
+
+    expect(header()).toHaveAttribute('aria-expanded', 'true')
+    expect(screen.getByText('Museum Ludwig')).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-010: bare drops the card and its header, and cannot be collapsed shut', () => {
+    S = hookState({
+      suggestions: [stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig' })],
+      lastSyncAt: null,
+    })
+    // The phone journey opens this list inside a sheet that already carries a
+    // title, and `initiallyCollapsed` must not fold it away in there.
+    const { container } = panel({ bare: true, initiallyCollapsed: true, trips: TRIPS })
+
+    expect(screen.queryByRole('button', { name: /From Dawarich/ })).toBeNull()
+    expect(screen.getByText('Museum Ludwig')).toBeInTheDocument()
+    // Read the property rather than the attribute: what matters is that the
+    // card is gone, not how React chooses to serialise an empty className.
+    expect(container.querySelector('section')?.className).toBe('')
+    // The freshness line survives the missing header, as a plain paragraph.
+    expect(screen.getByText('Not checked yet')).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-011: a sync error rides above a list that did load', () => {
+    S = hookState({
+      status: 'ready',
+      suggestions: [stay({ id: 1, localDate: '2026-09-10' })],
+      lastSyncError: 'Dawarich asked TREK to slow down. Try again shortly.',
+    })
+    panel({ trips: TRIPS })
+    expect(screen.getByText('Dawarich asked TREK to slow down. Try again shortly.')).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-012: a row carries the flags worth interrupting for, and gone beats changed', () => {
+    S = hookState({
+      suggestions: [
+        stay({
+          id: 1,
+          localDate: '2026-09-10',
+          name: 'Museum Ludwig',
+          confidenceBand: 'low',
+          // Both set on purpose: a stay that vanished upstream may well have
+          // changed before it went, and saying both is two warnings about one
+          // row where only the fatal one matters.
+          sourceChanged: true,
+          sourceMissing: true,
+        }),
+      ],
+    })
+    panel({ trips: TRIPS })
+
+    expect(screen.getByRole('img', { name: 'Unsure' })).toBeInTheDocument()
+    expect(screen.getByRole('img', { name: 'Gone from Dawarich' })).toBeInTheDocument()
+    expect(screen.queryByRole('img', { name: 'Changed in Dawarich' })).toBeNull()
+    expect(screen.getByText(/no longer exists in Dawarich/)).toBeInTheDocument()
+    expect(screen.queryByText(/has changed in Dawarich/)).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-013: a stay that only changed says exactly that, in full', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10', sourceChanged: true })] })
+    panel({ trips: TRIPS })
+
+    expect(screen.getByRole('img', { name: 'Changed in Dawarich' })).toBeInTheDocument()
+    expect(screen.getByText(/has changed in Dawarich since you used it/)).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-014: the trip name shows only where rows can come from more than one trip', () => {
+    const rows = [stay({ id: 1, localDate: '2026-09-10', tripId: 5, tripTitle: 'Cologne' })]
+    S = hookState({ suggestions: rows })
+    const { unmount } = panel({ trips: TRIPS })
+    expect(screen.getByText('Cologne')).toBeInTheDocument()
+    unmount()
+
+    // Inside one trip's rail every row is from that trip, so the name is noise.
+    S = hookState({ suggestions: rows })
+    panel({ tripId: 5, trips: TRIPS })
+    expect(screen.queryByText('Cologne')).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-015: a stay with no trip behind it gets no empty badge', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10', tripId: null, tripTitle: null })] })
+    const { container } = panel({ trips: TRIPS })
+    // Two badges on the row, the clock and the duration, and nothing else.
+    expect(rowOf(container, 'Cafe Reichard').querySelectorAll('.rounded-full.font-semibold')).toHaveLength(2)
+  })
+})
+
+describe('DawarichSuggestionsPanel: acting on a stay', () => {
+  it('FE-DAWARICH-PANEL-016: an action is offered only where there is somewhere to put the stay', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    const { unmount } = panel({ trips: [], journals: [] })
+
+    // No trips and no journeys: only "not a place I visited" is still an answer.
+    expect(screen.queryByRole('button', { name: 'Add as a place' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Write a journal entry' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Not a place I visited' })).toBeInTheDocument()
+    unmount()
+
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS, journals: JOURNALS })
+    expect(screen.getByRole('button', { name: 'Add as a place' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Write a journal entry' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-017: dismissing hands the row id straight to the hook', () => {
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Not a place I visited' }))
+
+    expect(dismiss).toHaveBeenCalledWith(42)
+  })
+
+  it('FE-DAWARICH-PANEL-018: the row being written is the row that goes dead, and only that one', () => {
+    S = hookState({
+      suggestions: [
+        stay({ id: 42, localDate: '2026-09-10', name: 'Museum Ludwig' }),
+        stay({ id: 43, localDate: '2026-09-11', name: 'Koelner Dom' }),
+      ],
+      busyId: 42,
+    })
+    const { container } = panel({ trips: TRIPS })
+
+    expect(within(rowOf(container, 'Museum Ludwig')).getByRole('button', { name: 'Add as a place' })).toBeDisabled()
+    expect(within(rowOf(container, 'Koelner Dom')).getByRole('button', { name: 'Add as a place' })).toBeEnabled()
+  })
+
+  it('FE-DAWARICH-PANEL-019: accepting opens the review step and reports a write that landed', async () => {
+    const onAccepted = vi.fn()
+    const daysForTrip = vi.fn((tripId: number) => [{ id: 70 + tripId, label: 'Day 1', badge: 'Thu, Sep 10' }])
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10', name: 'Museum Ludwig' })] })
+    panel({ trips: TRIPS, journals: JOURNALS, daysForTrip, onAccepted })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add as a place' }))
+
+    // The dialog opens on the row that was pressed, for the target that was pressed.
+    expect(screen.getByRole('heading', { name: 'Add this stay as a place' })).toBeInTheDocument()
+    expect(daysForTrip).toHaveBeenCalledWith(5)
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    })
+
+    expect(accept).toHaveBeenCalledWith(42, expect.objectContaining({ target: 'place', tripId: 5 }))
+    // Only now: the host refreshes its own list off the back of a write that landed.
+    expect(onAccepted).toHaveBeenCalledWith(expect.objectContaining({ id: 42 }))
+    expect(screen.queryByRole('heading', { name: 'Add this stay as a place' })).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-020: a refused write leaves the dialog standing, with the correction still in it', async () => {
+    const onAccepted = vi.fn()
+    accept.mockResolvedValue(false)
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS, journals: JOURNALS, onAccepted })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Write a journal entry' }))
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Corrected name' } })
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+    })
+
+    expect(accept).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({ target: 'journal', journalId: 9, name: 'Corrected name' }),
+    )
+    // Closing here would throw away what the user typed and leave them nothing
+    // to retry with.
+    expect(screen.getByRole('heading', { name: 'Write a journal entry' })).toBeInTheDocument()
+    expect(screen.getByLabelText('Name')).toHaveValue('Corrected name')
+    expect(onAccepted).not.toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-PANEL-021: a host that wants no callback still gets its dialog closed', async () => {
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS, journals: JOURNALS })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Write a journal entry' }))
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+    })
+
+    expect(accept).toHaveBeenCalledTimes(1)
+    expect(screen.queryByRole('heading', { name: 'Write a journal entry' })).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-022: cancelling writes nothing', () => {
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS, journals: JOURNALS })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add as a place' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+
+    expect(screen.queryByRole('heading', { name: 'Add this stay as a place' })).toBeNull()
+    expect(accept).not.toHaveBeenCalled()
+  })
+})
+
+describe('DawarichSuggestionsPanel: what was already dealt with', () => {
+  const handledRows = [
+    stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig', state: 'accepted', target: 'place' }),
+    stay({ id: 2, localDate: '2026-09-09', name: 'Koelner Dom', state: 'dismissed' }),
+    // Accepted before `target` was recorded: the wording falls back rather than
+    // printing a missing translation key at somebody.
+    stay({ id: 3, localDate: '2026-09-08', name: 'Rheinpark', state: 'accepted', target: null }),
+  ]
+
+  it('FE-DAWARICH-PANEL-023: the history stays folded away until it is asked for', () => {
+    S = hookState({ suggestions: handledRows })
+    panel({ trips: TRIPS })
+
+    expect(screen.queryByText('Museum Ludwig')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show 3 already dealt with' }))
+
+    expect(screen.getByText('Museum Ludwig')).toBeInTheDocument()
+    expect(screen.getByText('Added as a place')).toBeInTheDocument()
+    expect(screen.getByText('Dismissed')).toBeInTheDocument()
+    expect(screen.getByText('In the journal')).toBeInTheDocument()
+    // A history row carries its own date, which the open list keeps in the day
+    // heading it no longer sits under.
+    expect(screen.getByText('Thu, Sep 10')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hide the ones already dealt with' }))
+    expect(screen.queryByText('Museum Ludwig')).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-024: only a dismissal can be put back, and it goes through the hook', () => {
+    S = hookState({ suggestions: handledRows })
+    const { container } = panel({ trips: TRIPS })
+    fireEvent.click(screen.getByRole('button', { name: 'Show 3 already dealt with' }))
+
+    // An accepted stay already produced a place or an entry; "put back" there
+    // would mean silently unpicking something the user wrote.
+    expect(within(rowOf(container, 'Museum Ludwig')).queryByRole('button', { name: 'Put back' })).toBeNull()
+    // And no history row offers the accept buttons a second time.
+    expect(within(rowOf(container, 'Koelner Dom')).queryByRole('button', { name: 'Add as a place' })).toBeNull()
+
+    fireEvent.click(within(rowOf(container, 'Koelner Dom')).getByRole('button', { name: 'Put back' }))
+
+    expect(restore).toHaveBeenCalledWith(2)
+  })
+
+  it('FE-DAWARICH-PANEL-025: a restore in flight disables the button that started it', () => {
+    S = hookState({ suggestions: handledRows, busyId: 2 })
+    const { container } = panel({ trips: TRIPS })
+    fireEvent.click(screen.getByRole('button', { name: 'Show 3 already dealt with' }))
+
+    expect(within(rowOf(container, 'Koelner Dom')).getByRole('button', { name: 'Put back' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-PANEL-026: nothing left open says so instead of showing an empty day', () => {
+    S = hookState({ suggestions: [handledRows[0]] })
+    const { container } = panel({ trips: TRIPS })
+
+    expect(screen.getByText('Everything recorded here has been dealt with.')).toBeInTheDocument()
+    // And the count badge goes with the last open row rather than showing a zero.
+    expect(container.querySelector('.text-accent-text')).toBeNull()
+  })
+})
+
+describe('DawarichSuggestionsPanel: the deleted-place hint', () => {
+  it('FE-DAWARICH-PANEL-027: a shrinking place count reloads, a growing one does not', () => {
+    useTripStore.setState({ places: places(3) })
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    panel({ tripId: 5, trips: TRIPS })
+
+    // Mounting is not a shrink.
+    expect(reload).not.toHaveBeenCalled()
+
+    // Deleting the place an acceptance created is how somebody says "not that
+    // one" after the fact, and the server puts the stay back into review.
+    act(() => { useTripStore.setState({ places: places(2) }) })
+    expect(reload).toHaveBeenCalledTimes(1)
+
+    // A place appearing is usually this panel's own doing.
+    act(() => { useTripStore.setState({ places: places(6) }) })
+    expect(reload).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-PANEL-028: outside a trip the place count is not this panel\'s business', () => {
+    useTripStore.setState({ places: places(3) })
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    // The journal shell mounts this without a trip, and whatever trip happens to
+    // be loaded has nothing to do with the rows it shows.
+    panel({ trips: TRIPS })
+
+    act(() => { useTripStore.setState({ places: places(1) }) })
+
+    expect(reload).not.toHaveBeenCalled()
+  })
+})
+
+describe('DawarichSuggestionsPanel: the phone shell', () => {
+  it('FE-DAWARICH-PANEL-029: the phone paints from its own palette, header to action pill', () => {
+    phone = true
+    S = hookState({
+      suggestions: [
+        stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig', sourceChanged: true }),
+        stay({ id: 2, localDate: '2026-09-09', name: 'Koelner Dom', state: 'dismissed' }),
+      ],
+      lastSyncAt: new Date(Date.now() - 60_000).toISOString(),
+    })
+    const { container } = panel({ trips: TRIPS, journals: JOURNALS })
+    fireEvent.click(screen.getByRole('button', { name: 'Show 1 already dealt with' }))
+
+    // A card in the desktop surface tokens glares inside the mobile shell, and
+    // neither token set exists outside its own shell, so every surface here has
+    // to come from the `--m-*` palette.
+    expect(container.querySelector('section')?.className).toContain('var(--m-ic)')
+    expect(header().className).toContain('var(--m-inner)')
+    expect(container.querySelector('.bg-m-card')).not.toBeNull()
+    expect(container.querySelector('.bg-m-act')).not.toBeNull()
+    expect(container.querySelector('.text-m-ink')).not.toBeNull()
+    expect(container.querySelectorAll('.text-m-muted').length).toBeGreaterThan(0)
+    expect(container.querySelector('.text-m-faint')).not.toBeNull()
+    // The actions keep their accessible names, which is what makes dropping the
+    // hover-only tooltip on a touch device cost nothing.
+    expect(screen.getByRole('button', { name: 'Add as a place' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-030: bare on a phone, with nothing left open', () => {
+    phone = true
+    S = hookState({
+      suggestions: [stay({ id: 1, localDate: '2026-09-10', state: 'accepted', target: 'journal' })],
+      lastSyncAt: null,
+    })
+    const { container } = panel({ bare: true, trips: TRIPS })
+
+    expect(screen.queryByRole('button', { name: /From Dawarich/ })).toBeNull()
+    expect(screen.getByText('Everything recorded here has been dealt with.').className).toContain('text-m-muted')
+    expect(screen.getByText('Not checked yet').className).toContain('text-m-muted')
+    expect(container.querySelector('section')?.className).toBe('')
+  })
+
+  it('FE-DAWARICH-PANEL-033: folded shut on a phone, the arrow that says so comes from the phone palette', () => {
+    phone = true
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig' })] })
+    // The planner mounts this one collapsed, so on a phone the right-pointing
+    // arrow is the header's ordinary state and not an edge case. It is also the
+    // only part of the header an expanded phone never paints, which is exactly
+    // how a desktop token would survive in there unnoticed.
+    const { container } = panel({ initiallyCollapsed: true, trips: TRIPS })
+
+    expect(header()).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByText('Museum Ludwig')).toBeNull()
+    expect(container.querySelector('.lucide-chevron-right.text-m-faint')).not.toBeNull()
+    expect(container.querySelector('.lucide-chevron-down')).toBeNull()
+    expect(container.querySelector('.text-content-faint')).toBeNull()
+  })
+})
+
+describe('DawarichSuggestionsPanel: the desktop tooltip', () => {
+  it('FE-DAWARICH-PANEL-031: a row action explains itself on focus, where there is a pointer to do it with', () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    try {
+      S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+      panel({ trips: TRIPS })
+
+      fireEvent.focus(screen.getByRole('button', { name: 'Not a place I visited' }))
+      act(() => { vi.advanceTimersByTime(300) })
+
+      // The icon is the whole button, so without this a square is a mystery to
+      // anybody who has not pressed one before. Reaching it by keyboard is the
+      // one route where there is no hover to discover it with.
+      expect(screen.getByRole('tooltip')).toHaveTextContent('Not a place I visited')
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
+
+describe('DawarichSuggestionsPanel: open and handled in the same list', () => {
+  it('FE-DAWARICH-PANEL-032: the two halves are counted separately and only the open half gets days', () => {
+    S = hookState({
+      suggestions: [
+        stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig' }),
+        stay({ id: 2, localDate: '2026-09-09', name: 'Koelner Dom', state: 'accepted', target: 'place' }),
+        stay({ id: 3, localDate: '2026-09-08', name: 'Rheinpark', state: 'dismissed' }),
+      ],
+    })
+    const { container } = panel({ trips: TRIPS })
+
+    // Counting all three would send somebody looking for work that is done.
+    expect(container.querySelector('.bg-accent')).toHaveTextContent('1')
+    expect(screen.getByRole('button', { name: 'Show 2 already dealt with' })).toBeInTheDocument()
+    // And the day rail is built from the open half alone: a heading for a day
+    // whose only stay was dismissed is an empty day with a coloured dot on it.
+    expect(container.querySelectorAll('.uppercase')).toHaveLength(1)
+    expect(screen.getByText('Thu, Sep 10')).toBeInTheDocument()
+  })
+})

client/src/components/Dawarich/DawarichSuggestionsPanel.tsx

@@ -0,0 +1,540 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { ChevronDown, ChevronRight, MapPin, BookOpen, Check, X, RotateCcw, AlertTriangle, Clock, Hourglass, CalendarDays, Briefcase, Gauge, History, Unplug } from 'lucide-react'
+import type { DawarichAccept, DawarichSuggestion, DawarichSuggestionTarget } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import { useDawarichSuggestions } from '../../hooks/useDawarichSuggestions'
+import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import { relativeTime } from '../../utils/relativeTime'
+import { Tooltip } from '../shared/Tooltip'
+import DawarichIcon from '../shared/DawarichIcon'
+import Badge from './DawarichBadge'
+import DawarichAcceptDialog, { type AcceptTargetOption } from './DawarichAcceptDialog'
+import { formatDayHeading, formatDuration, groupByDay, timeRange } from './dawarichSuggestionModel'
+
+/**
+ * The panel sits inside the places rail, and it has to read at the same size as
+ * the rows below it — `text-body` (14px) and `text-caption` (12px) made every
+ * line of it a size larger than the trip's own places, which is the one thing a
+ * panel about somebody else's data must not be.
+ *
+ * These are the rail's own figures (PlacesSidebarRow uses exactly 13 / 11 / 10),
+ * kept as calc() against the per-tier multipliers so the appearance text-size
+ * control still reaches them — a bare number would not.
+ */
+const TYPE = {
+  name: { fontSize: 'calc(13px * var(--fs-scale-body, 1))' },
+  meta: { fontSize: 'calc(11px * var(--fs-scale-caption, 1))' },
+  micro: { fontSize: 'calc(10px * var(--fs-scale-caption, 1))' },
+} as const
+
+export interface DawarichSuggestionsPanelProps {
+  /** Only stays that fall inside this trip. */
+  tripId?: number
+  /** Trips the user may write a place into. */
+  trips?: AcceptTargetOption[]
+  daysForTrip?: (tripId: number) => AcceptTargetOption[]
+  /** Journeys the user may add an entry to. */
+  journals?: AcceptTargetOption[]
+  /** Called after something was written, so the host can refresh its own list. */
+  onAccepted?: (suggestion: DawarichSuggestion) => void
+  /** Start collapsed. The planner does; the journal does not. */
+  initiallyCollapsed?: boolean
+  /**
+   * Drop the panel's own card and header.
+   *
+   * For a sheet that already carries both — the phone's journey opens this list
+   * in one, and a second "From Dawarich" under the first is a stutter.
+   */
+  bare?: boolean
+}
+
+/**
+ * The stays Dawarich recorded, waiting to be reviewed.
+ *
+ * One component for both shells. The phone and the desktop place it
+ * differently, but the rows are the same rows, and a second copy of them is a
+ * second thing to keep in step — the same reasoning as `TripRouteOverviewPanel`
+ * next door, and the same reason SonarCloud's duplication budget exists.
+ *
+ * **Grouped by day, and coloured like the map.** A day of travel produces four
+ * or five stays; repeating the full date on each of them buries the one thing
+ * that tells them apart, which is the time. The day's dot carries the colour its
+ * line is drawn in on the trip map, so "the purple day" means the same thing in
+ * both places.
+ *
+ * The panel renders **nothing at all** when there is nothing to review. An
+ * integration that is connected and quiet should be invisible, not a permanent
+ * empty card explaining that it found nothing.
+ */
+export default function DawarichSuggestionsPanel({
+  tripId,
+  trips = [],
+  daysForTrip,
+  journals = [],
+  onAccepted,
+  initiallyCollapsed = false,
+  bare = false,
+}: DawarichSuggestionsPanelProps): React.ReactElement | null {
+  const { t, locale } = useTranslation()
+  const S = useDawarichSuggestions({ tripId })
+  // The phone shell has its own palette (`--m-*`): a card in the desktop surface
+  // tokens glares next to it. Same component, the shell's own colours.
+  const phone = useIsPhone()
+  const [collapsed, setCollapsed] = useState(initiallyCollapsed)
+  const [showHandled, setShowHandled] = useState(false)
+  const [pending, setPending] = useState<{ suggestion: DawarichSuggestion; target: DawarichSuggestionTarget } | null>(null)
+
+  // Deleting the place an acceptance created is how somebody says "not that
+  // one" after the fact: the server puts the stay back into review, and a
+  // shrinking place count is what tells us to go and ask. Only a shrink — a
+  // place being added is usually this panel's own doing.
+  const placeCount = useTripStore(state => (tripId === undefined ? 0 : state.places.length))
+  const lastPlaceCount = useRef(placeCount)
+  const reload = S.reload
+  useEffect(() => {
+    const shrank = placeCount < lastPlaceCount.current
+    lastPlaceCount.current = placeCount
+    if (shrank) reload()
+  }, [placeCount, reload])
+
+  const open = useMemo(() => S.suggestions.filter(item => item.state === 'new'), [S.suggestions])
+  const handled = useMemo(() => S.suggestions.filter(item => item.state !== 'new'), [S.suggestions])
+  const openDays = useMemo(() => groupByDay(open), [open])
+
+  // Nothing to review and nothing to report: stay out of the way entirely.
+  if (S.status === 'idle') return null
+  if (S.status === 'ready' && open.length === 0 && handled.length === 0) return null
+
+  const confirm = async (body: DawarichAccept) => {
+    if (!pending) return
+    const ok = await S.accept(pending.suggestion.id, body)
+    if (ok) {
+      onAccepted?.(pending.suggestion)
+      setPending(null)
+    }
+  }
+
+  const rowProps = {
+    phone,
+    // Offered only where there is somewhere to put it: the planner has no
+    // journey list, and a button that opens an empty picker is worse than none.
+    allowJournal: journals.length > 0,
+    allowPlace: trips.length > 0,
+    // The trip name is noise when every row is from the same trip.
+    showTrip: tripId === undefined,
+    // In the trip rail the arrival is the half that places a stop; how long somebody stood
+    // there is a second figure on a row that already does not wrap.
+    showDuration: tripId === undefined,
+  }
+
+  return (
+    <section
+      className={
+        bare
+          ? ''
+          : `rounded-2xl overflow-hidden ${phone ? 'bg-[color:var(--m-ic)]' : 'border border-edge bg-surface-secondary'}`
+      }
+    >
+      {bare ? (
+        <p className={`px-1 pb-2 ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.micro}>
+          {statusLine(S, open.length, t, locale)}
+        </p>
+      ) : (
+      <button
+        type="button"
+        onClick={() => setCollapsed(value => !value)}
+        aria-expanded={!collapsed}
+        className={`w-full flex items-center gap-2.5 px-3.5 py-2.5 text-left ${
+          phone ? 'active:bg-[color:var(--m-inner)]' : 'hover:bg-surface-hover'
+        }`}
+      >
+        {/* Rounded, like every other avatar-sized mark in TREK: the logo is a
+            square badge and a hard corner beside a rounded card reads as a
+            pasted-in image. */}
+        <span className="flex-shrink-0 overflow-hidden rounded-[6px]">
+          <DawarichIcon size={22} />
+        </span>
+        <span className="flex-1 min-w-0">
+          <span className={`block truncate font-semibold leading-tight ${phone ? 'text-m-ink' : 'text-content'}`} style={TYPE.name}>
+            {t('dawarich.suggestions.title')}
+          </span>
+          <span className={`block truncate ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.micro}>
+            {statusLine(S, open.length, t, locale)}
+          </span>
+        </span>
+        {open.length > 0 && (
+          <span
+            className={`flex-shrink-0 min-w-[18px] h-[18px] px-1.5 inline-flex items-center justify-center rounded-full font-bold ${
+              phone ? 'bg-m-act text-m-actfg' : 'bg-accent text-accent-text'
+            }`}
+            style={TYPE.micro}
+          >
+            {open.length}
+          </span>
+        )}
+        {collapsed
+          ? <ChevronRight className={`w-3.5 h-3.5 flex-shrink-0 ${phone ? 'text-m-faint' : 'text-content-faint'}`} />
+          : <ChevronDown className={`w-3.5 h-3.5 flex-shrink-0 ${phone ? 'text-m-faint' : 'text-content-faint'}`} />}
+      </button>
+      )}
+
+      {(bare || !collapsed) && (
+        <div className="border-t border-edge-secondary">
+          {S.status !== 'ready' && (
+            <p className={`px-3.5 py-2.5 ${S.status === 'unavailable' ? 'text-danger' : 'text-content-secondary'}`} style={TYPE.meta}>
+              {statusLine(S, open.length, t, locale)}
+            </p>
+          )}
+
+          {S.lastSyncError && S.status === 'ready' && (
+            <p className="px-3.5 pt-2.5 text-danger" style={TYPE.meta}>{S.lastSyncError}</p>
+          )}
+
+          {open.length === 0 && S.status === 'ready' && (
+            <p className={`px-3.5 py-2.5 ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.meta}>{t('dawarich.suggestions.allHandled')}</p>
+          )}
+
+          {openDays.map(day => (
+            <div key={day.date}>
+              <div className="flex items-center gap-2 px-3.5 pt-2.5 pb-1">
+                {/* The colour this day's line is drawn in on the map. */}
+                <span
+                  aria-hidden="true"
+                  className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                  style={{ background: day.color }}
+                />
+                <span className={`font-bold uppercase tracking-wider whitespace-nowrap ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.micro}>
+                  {formatDayHeading(day.date, locale)}
+                </span>
+                <span className="flex-1 h-px bg-edge-faint" />
+                <Badge tone="quiet">{day.stays.length}</Badge>
+              </div>
+              {day.stays.map(suggestion => (
+                <SuggestionRow
+                  key={suggestion.id}
+                  suggestion={suggestion}
+                  busy={S.busyId === suggestion.id}
+                  {...rowProps}
+                  onAccept={target => setPending({ suggestion, target })}
+                  onDismiss={() => S.dismiss(suggestion.id)}
+                />
+              ))}
+            </div>
+          ))}
+
+          {handled.length > 0 && (
+            <div className="border-t border-edge-faint">
+              <button
+                type="button"
+                onClick={() => setShowHandled(value => !value)}
+                className={`w-full px-3.5 py-2 text-left ${
+                  phone ? 'text-m-muted active:bg-[color:var(--m-inner)]' : 'text-content-muted hover:bg-surface-hover'
+                }`}
+                style={TYPE.meta}
+              >
+                {showHandled
+                  ? t('dawarich.suggestions.hideHandled')
+                  : t('dawarich.suggestions.showHandled', { count: handled.length })}
+              </button>
+              {showHandled &&
+                handled.map(suggestion => (
+                  <SuggestionRow
+                    key={suggestion.id}
+                    suggestion={suggestion}
+                    busy={S.busyId === suggestion.id}
+                    showTrip={rowProps.showTrip}
+                    showDate
+                    onRestore={suggestion.state === 'dismissed' ? () => S.restore(suggestion.id) : undefined}
+                  />
+                ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <DawarichAcceptDialog
+        suggestion={pending?.suggestion ?? null}
+        target={pending?.target ?? 'journal'}
+        trips={trips}
+        daysForTrip={daysForTrip}
+        journals={journals}
+        busy={S.busyId !== null}
+        onCancel={() => setPending(null)}
+        onConfirm={confirm}
+      />
+    </section>
+  )
+}
+
+/**
+ * One stay: a name, when it was, and how to act on it.
+ *
+ * Two lines and no chip soup. The meta line carries only what varies — how long,
+ * and the two things worth interrupting for: a wish this fulfils, and a
+ * detection the source itself was unsure about. The "detected, unconfirmed"
+ * label that used to sit on nearly every row is gone: since Dawarich 1.12.0
+ * unconfirmed is the normal state of a visit, so saying it everywhere said
+ * nothing. Reviewing it here *is* the confirmation.
+ *
+ * The actions fade in on hover on a pointer device and stay visible on touch,
+ * where there is no hover to reveal them.
+ */
+/**
+ * One stay, as a card with its actions clipped to the side.
+ *
+ * Exported because the journal draws these rows in its own timeline now — folded into a
+ * day rather than stacked in a panel above it — and a second copy of a row this detailed
+ * would be two things to keep in step, plus a straight hit on the duplication budget.
+ */
+export function SuggestionRow({
+  suggestion,
+  busy,
+  allowJournal = false,
+  allowPlace = false,
+  showTrip = false,
+  showDate = false,
+  showDuration = true,
+  phone = false,
+  onAccept,
+  onDismiss,
+  onRestore,
+}: {
+  suggestion: DawarichSuggestion
+  busy: boolean
+  allowJournal?: boolean
+  allowPlace?: boolean
+  showTrip?: boolean
+  showDate?: boolean
+  /** How long the stay lasted. Off in the trip rail, where the arrival is the useful half. */
+  showDuration?: boolean
+  /** Rendered inside the phone shell, which has its own palette and its own reach. */
+  phone?: boolean
+  onAccept?: (target: DawarichSuggestionTarget) => void
+  onDismiss?: () => void
+  onRestore?: () => void
+}): React.ReactElement {
+  const { t, locale } = useTranslation()
+  // The traveller's own clock: these times used to come straight out of the timestamp, so
+  // a 12-hour setting got 24-hour times here and nowhere else.
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+
+  return (
+    <div className="flex items-stretch gap-[6px] px-3 py-[5px]">
+      {/* A stay is a card with its actions clipped to the side — the shape an
+          expense already has in Costs. One layout in both shells; only the
+          palette differs, because the phone paints from `--m-*` and the desktop
+          from the semantic tokens, and neither set exists outside its own. */}
+      <div
+        className={`flex min-w-0 flex-1 flex-col justify-center rounded-2xl border px-[11px] py-[9px] ${
+          phone ? 'border-[color:var(--m-gbr)] bg-m-card' : 'border-edge bg-surface-card'
+        }`}
+      >
+        {/* The name gets the line, and the one badge that is about the name
+            itself rides with it: "Unsure" qualifies what this place is called,
+            not how long somebody stayed, and two lines below the name it read as
+            one more fact among the times. It never pushes the name out — the
+            name truncates, the flag does not. */}
+        <p className={`flex items-center gap-1.5 font-medium ${phone ? 'text-m-ink' : 'text-content'}`} style={TYPE.name}>
+          <span className="truncate">{suggestion.name}</span>
+          {/* The mark, never the word: the name is what the line is for, and
+              "Unsure" beside it is a caption competing with a title. The tooltip
+              and the accessible name still say it in full. */}
+          {suggestion.confidenceBand === 'low' && (
+            <Badge icon={Gauge} tone="warning" label={t('dawarich.badge.lowConfidence')} title={t('dawarich.confidence.low')} />
+          )}
+        </p>
+
+        {/* One badge row, one badge shape, colour carrying the meaning: neutral
+            for a fact, accent for a wish this fulfils, success for what was
+            already taken, amber for the two things worth interrupting for.
+            Nothing wraps — a row that reflows every time a name is long reads as
+            a mess, so it stays one line and the badges that do not fit are cut
+            off rather than pushed onto a second. */}
+        {/* Wraps, and only here: each badge is a fixed-height pill whose own text
+            never breaks, so a second line of them reads as a second line of
+            badges rather than as a paragraph coming apart. Cutting them off
+            instead would hide the wish a stay fulfils, which is the one thing in
+            the row worth the space. */}
+        <div className="mt-1 flex flex-wrap items-center gap-1">
+          {/* Ordered by what a reader needs first, because the rail is narrow and
+              the row does not wrap: how long, then what it would fulfil, then the
+              flags. The flags are icon-only — the word costs half the row and the
+              sentence under the badges says it properly anyway. */}
+          {showDate && (
+            <Badge icon={CalendarDays}>{formatDayHeading(suggestion.localDate, locale)}</Badge>
+          )}
+          <Badge icon={Clock}>{timeRange(suggestion.startedAt, suggestion.endedAt, is12h)}</Badge>
+          {showDuration && <Badge icon={Hourglass}>{formatDuration(suggestion.durationMinutes, t)}</Badge>}
+
+          {suggestion.state === 'accepted' && (
+            <Badge icon={Check} tone="success">
+              {t('dawarich.suggestions.acceptedAs.' + (suggestion.target ?? 'journal'))}
+            </Badge>
+          )}
+          {suggestion.state === 'dismissed' && (
+            <Badge icon={X} tone="quiet">{t('dawarich.suggestions.dismissed')}</Badge>
+          )}
+
+          {showTrip && suggestion.tripTitle && (
+            <Badge icon={Briefcase}>{suggestion.tripTitle}</Badge>
+          )}
+
+          {suggestion.sourceMissing && (
+            <Badge icon={Unplug} tone="warning" label={t('dawarich.badge.sourceMissing')} />
+          )}
+          {!suggestion.sourceMissing && suggestion.sourceChanged && (
+            <Badge icon={History} tone="warning" label={t('dawarich.badge.sourceChanged')} />
+          )}
+        </div>
+
+        {/* The long form of the two warnings, under the badges: the badge is the
+            flag, this is what it means, and somebody reading the panel for the
+            first time should not have to hover to find out. */}
+        {(suggestion.sourceChanged || suggestion.sourceMissing) && (
+          <p className={`mt-1 flex items-start gap-1.5 ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.meta}>
+            <AlertTriangle className="w-3 h-3 flex-shrink-0 mt-px text-warning" />
+            {suggestion.sourceMissing
+              ? t('dawarich.suggestions.sourceMissing')
+              : t('dawarich.suggestions.sourceChanged')}
+          </p>
+        )}
+      </div>
+
+      {/* Always on screen. Hiding them until hover made the only two things a row
+          is for invisible to anyone who had not discovered that hovering did
+          something — and on a touch screen there is no hover at all.
+
+          A column beside the text in the desktop rail, which is narrow and tall;
+          a row on a phone, where there is width to spare and a stack of small
+          squares reads as a scrollbar. Centred either way, against the name and
+          the time it belongs to. */}
+      {onAccept && (
+        <div className={ACTIONS(phone)}>
+          {allowJournal && (
+            <RowAction
+              label={t('dawarich.suggestions.asJournal')}
+              icon={<BookOpen className="w-3.5 h-3.5" />}
+              disabled={busy}
+              phone={phone}
+              onClick={() => onAccept('journal')}
+            />
+          )}
+          {allowPlace && (
+            <RowAction
+              label={t('dawarich.suggestions.asPlace')}
+              icon={<MapPin className="w-3.5 h-3.5" />}
+              disabled={busy}
+              phone={phone}
+              onClick={() => onAccept('place')}
+            />
+          )}
+          {onDismiss && (
+            <RowAction
+              label={t('dawarich.suggestions.dismiss')}
+              icon={<X className="w-3.5 h-3.5" />}
+              disabled={busy}
+              phone={phone}
+              onClick={onDismiss}
+            />
+          )}
+        </div>
+      )}
+
+      {onRestore && (
+        <div className={ACTIONS(phone)}>
+          <RowAction
+            label={t('dawarich.suggestions.restore')}
+            icon={<RotateCcw className="w-3.5 h-3.5" />}
+            disabled={busy}
+            phone={phone}
+            onClick={onRestore}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Where a row keeps its actions: a pill clipped to the side of the card, the
+ * same in both shells, painted from whichever palette the shell has.
+ */
+const ACTIONS = (phone: boolean): string =>
+  'flex flex-none flex-col gap-1 rounded-full border p-[5px] ' +
+  (phone ? 'border-[color:var(--m-gbr)] bg-[color:var(--m-glass)]' : 'border-edge bg-surface')
+
+/**
+ * One action on a row: a real target with a real accessible name.
+ *
+ * A square with a border rather than a bare glyph, because a bare glyph on a
+ * white rail reads as decoration; this reads as a button, which is what it is.
+ * The label is a tooltip and the accessible name — spelling it out beside the
+ * icon would cost the row the width its name needs.
+ *
+ * All of them look the same. Marking one as the primary action would be TREK
+ * deciding for the reader which of "put it on the map" and "write about it" they
+ * meant, and the whole review step exists because that is theirs to decide.
+ *
+ * Hover fills the square with the inverse surface — near-black in the light
+ * scheme, near-white in the dark one — so the button somebody is about to press
+ * is unmistakable without inventing a colour the theme does not have.
+ */
+function RowAction({
+  label,
+  icon,
+  disabled,
+  phone = false,
+  onClick,
+}: {
+  label: string
+  icon: React.ReactNode
+  disabled?: boolean
+  phone?: boolean
+  onClick: () => void
+}): React.ReactElement {
+  const button = (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      className={`flex h-[26px] w-[26px] flex-none items-center justify-center rounded-full transition-all disabled:opacity-40 ${
+        phone
+          ? 'text-m-muted active:scale-95'
+          : 'text-content-secondary hover:bg-inverse hover:text-inverse-text'
+      }`}
+    >
+      {icon}
+    </button>
+  )
+  // No tooltip on a phone: there is no hover to open it with, and the label is
+  // already the button's accessible name.
+  return phone ? button : <Tooltip label={label} placement="left">{button}</Tooltip>
+}
+
+/**
+ * Where the data came from and how fresh it is, in one line under the title.
+ *
+ * Relative rather than a stamp: "checked 2 minutes ago" answers the question
+ * somebody actually has, and "9/12/2026, 6:40:19 PM" makes them do the
+ * subtraction themselves — on two lines, seconds included.
+ */
+function statusLine(
+  state: ReturnType<typeof useDawarichSuggestions>,
+  openCount: number,
+  t: (key: string, params?: Record<string, unknown>) => string,
+  locale: string,
+): string {
+  if (state.status === 'loading') return t('dawarich.suggestions.loading')
+  if (state.status === 'disconnected') return t('dawarich.suggestions.notConnected')
+  if (state.status === 'offline') return t('dawarich.trail.offline')
+  if (state.status === 'unavailable') return t('dawarich.suggestions.unavailable')
+
+  // Just the freshness. The count sits in the badge beside this line, and
+  // gluing the two together with a separator said the same thing twice.
+  return state.lastSyncAt
+    ? t('dawarich.checkedAgo', { ago: relativeTime(Date.parse(state.lastSyncAt), locale) })
+    : t('dawarich.neverSynced')
+}

client/src/components/Dawarich/dawarichAtlasModel.test.ts

@@ -0,0 +1,188 @@
+// FE-DAWARICH-ATLASMODEL-001 to FE-DAWARICH-ATLASMODEL-014
+/**
+ * The Atlas dialog's arithmetic, with no React around it.
+ *
+ * Everything here is small enough to look correct and wrong enough to matter if
+ * it is not. Three of the five carry a real trap:
+ *
+ *  1. `orderedMatches` sorts on two keys with a hand-written comparator that
+ *     never returns 0. That is fine for ordering and a hazard for anything else,
+ *     so the cases below check that the order is the same whichever way round
+ *     the input arrives and that two wishes reached at the same moment both
+ *     survive the sort rather than one of them being swapped away.
+ *  2. `countryLabel` runs on whatever `Intl` the device shipped. A WebView
+ *     without `Intl.DisplayNames` throws, one with a partial region table
+ *     answers `undefined`, and both have to end up as Dawarich's own spelling
+ *     rather than as a crash or an empty label beside a flag.
+ *  3. `formatDistance` switches units at exactly a kilometre, which is the one
+ *     input a refactor gets wrong.
+ */
+import { describe, it, expect } from 'vitest'
+import type { DawarichAtlasCountry, DawarichBucketMatch } from '@trek/shared'
+import {
+  cityLine,
+  countryLabel,
+  countryWindow,
+  formatDistance,
+  newCountries,
+  orderedMatches,
+} from './dawarichAtlasModel'
+
+function match(over: Partial<DawarichBucketMatch> & { itemId: number }): DawarichBucketMatch {
+  return {
+    itemId: over.itemId,
+    name: over.name ?? `Wish ${over.itemId}`,
+    match: over.match === undefined ? { at: '2026-09-01T10:00:00Z', minutes: 90, distanceMeters: 40, points: 12 } : over.match,
+    alreadyVisited: over.alreadyVisited ?? false,
+  }
+}
+
+function country(over: Partial<DawarichAtlasCountry> & { countryCode: string }): DawarichAtlasCountry {
+  return {
+    countryCode: over.countryCode,
+    sourceName: over.sourceName ?? over.countryCode,
+    cities: over.cities ?? [],
+    alreadyVisited: over.alreadyVisited ?? false,
+  }
+}
+
+const t = (key: string, params?: Record<string, unknown>): string =>
+  `${key}:${JSON.stringify(params ?? {})}`
+
+describe('countryWindow', () => {
+  it('FE-DAWARICH-ATLASMODEL-001: asks for exactly the year before the given moment', () => {
+    const now = new Date('2026-09-12T18:00:00Z')
+    const { from, to } = countryWindow(now)
+    expect(to).toBe('2026-09-12T18:00:00.000Z')
+    expect(from).toBe('2025-09-12T18:00:00.000Z')
+  })
+})
+
+describe('orderedMatches', () => {
+  it('FE-DAWARICH-ATLASMODEL-002: drops wishes the recordings found nothing for', () => {
+    const ordered = orderedMatches([match({ itemId: 1, match: null }), match({ itemId: 2 })])
+    expect(ordered.map(m => m.itemId)).toEqual([2])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-003: open wishes lead, already ticked ones follow', () => {
+    const ordered = orderedMatches([
+      match({ itemId: 1, alreadyVisited: true }),
+      match({ itemId: 2 }),
+    ])
+    expect(ordered.map(m => m.itemId)).toEqual([2, 1])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-004: within a group the most recent visit comes first', () => {
+    const ordered = orderedMatches([
+      match({ itemId: 1, match: { at: '2026-01-02T10:00:00Z', minutes: 30, distanceMeters: 10, points: 3 } }),
+      match({ itemId: 2, match: { at: '2026-06-02T10:00:00Z', minutes: 30, distanceMeters: 10, points: 3 } }),
+    ])
+    expect(ordered.map(m => m.itemId)).toEqual([2, 1])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-005: leaves the caller\'s array untouched', () => {
+    const input = [match({ itemId: 1, alreadyVisited: true }), match({ itemId: 2 })]
+    orderedMatches(input)
+    expect(input.map(m => m.itemId)).toEqual([1, 2])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-011: the order they arrive in does not change the order they are shown in', () => {
+    // Both arms of both comparisons. A comparator that answers consistently one
+    // way round and not the other sorts whatever the scan happened to return,
+    // which is a list that reshuffles itself between two identical scans.
+    const ticked = match({ itemId: 1, alreadyVisited: true })
+    const openWish = match({ itemId: 2 })
+    expect(orderedMatches([ticked, openWish]).map(m => m.itemId)).toEqual([2, 1])
+    expect(orderedMatches([openWish, ticked]).map(m => m.itemId)).toEqual([2, 1])
+
+    const older = match({ itemId: 3, match: { at: '2026-01-02T10:00:00Z', minutes: 30, distanceMeters: 10, points: 3 } })
+    const newer = match({ itemId: 4, match: { at: '2026-06-02T10:00:00Z', minutes: 30, distanceMeters: 10, points: 3 } })
+    expect(orderedMatches([older, newer]).map(m => m.itemId)).toEqual([4, 3])
+    expect(orderedMatches([newer, older]).map(m => m.itemId)).toEqual([4, 3])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-012: two wishes reached in the same moment both survive the sort', () => {
+    // The comparator never answers 0, so equal timestamps are reported as "swap"
+    // in both directions. Ordering them either way is fine; losing one is not.
+    const at = '2026-08-02T11:00:00Z'
+    const ordered = orderedMatches([
+      match({ itemId: 1, match: { at, minutes: 95, distanceMeters: 30, points: 40 } }),
+      match({ itemId: 2, match: { at, minutes: 120, distanceMeters: 55, points: 51 } }),
+    ])
+    expect(ordered.map(m => m.itemId).sort((a, b) => a - b)).toEqual([1, 2])
+  })
+})
+
+describe('newCountries', () => {
+  it('FE-DAWARICH-ATLASMODEL-006: only the ones a confirmation would actually change', () => {
+    const offered = newCountries([
+      country({ countryCode: 'DE', alreadyVisited: true }),
+      country({ countryCode: 'NL' }),
+    ])
+    expect(offered.map(c => c.countryCode)).toEqual(['NL'])
+  })
+})
+
+describe('countryLabel', () => {
+  it('FE-DAWARICH-ATLASMODEL-007: names the country in the reader\'s language', () => {
+    expect(countryLabel('NL', 'Netherlands', 'de')).toBe('Niederlande')
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-008: falls back to Dawarich\'s own spelling for a code it cannot name', () => {
+    // Not an ISO region: Intl either throws or echoes it back, and neither is a
+    // name a reader would recognise.
+    expect(countryLabel('ZZZZ', 'Freedonia', 'en')).toBe('Freedonia')
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-013: a runtime whose Intl names nothing still labels the row', () => {
+    // The other half of the fallback, and the one no desktop browser reproduces:
+    // a WebView that ships Intl.DisplayNames with a partial region table answers
+    // `undefined` instead of throwing, and an empty string beside a flag is a
+    // row nobody can identify.
+    const real = Intl.DisplayNames
+    Object.defineProperty(Intl, 'DisplayNames', {
+      configurable: true,
+      writable: true,
+      value: class {
+        of(): string | undefined {
+          return undefined
+        }
+      },
+    })
+    try {
+      expect(countryLabel('NL', 'Netherlands', 'en')).toBe('Netherlands')
+    } finally {
+      Object.defineProperty(Intl, 'DisplayNames', { configurable: true, writable: true, value: real })
+    }
+  })
+})
+
+describe('cityLine', () => {
+  it('FE-DAWARICH-ATLASMODEL-009: lists the first few cities and stops', () => {
+    const cities = ['Cologne', 'Bonn', 'Aachen', 'Trier'].map(name => ({
+      name,
+      minutes: 60,
+      lastSeenAt: '2026-09-01T10:00:00Z',
+    }))
+    expect(cityLine(cities)).toBe('Cologne, Bonn, Aachen')
+    expect(cityLine(cities, 1)).toBe('Cologne')
+    expect(cityLine([])).toBe('')
+  })
+})
+
+describe('formatDistance', () => {
+  it('FE-DAWARICH-ATLASMODEL-010: metres up to a kilometre, then kilometres with one decimal', () => {
+    expect(formatDistance(49.4, t)).toBe('dawarich.bucket.metersAway:{"meters":49}')
+    expect(formatDistance(999, t)).toBe('dawarich.bucket.metersAway:{"meters":999}')
+    expect(formatDistance(1400, t)).toBe('dawarich.bucket.kilometersAway:{"km":"1.4"}')
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-014: exactly a kilometre is already a kilometre', () => {
+    // The switch is `< 1000`, so 1000 belongs to the other unit. Off by one here
+    // reads as "1000 m away", which is the phrasing the rule exists to avoid.
+    expect(formatDistance(1000, t)).toBe('dawarich.bucket.kilometersAway:{"km":"1.0"}')
+    // One decimal, rounded, not truncated: 1049 and 1051 are not the same walk.
+    expect(formatDistance(1049, t)).toBe('dawarich.bucket.kilometersAway:{"km":"1.0"}')
+    expect(formatDistance(1051, t)).toBe('dawarich.bucket.kilometersAway:{"km":"1.1"}')
+  })
+})

client/src/components/Dawarich/dawarichAtlasModel.ts

@@ -0,0 +1,84 @@
+import type { DawarichAtlasCountry, DawarichBucketMatch } from '@trek/shared'
+
+/**
+ * Pure shaping for the Atlas dialog — no React, so the ordering, the naming and
+ * the window arithmetic can be tested without rendering anything.
+ */
+
+/**
+ * A year back from the given moment.
+ *
+ * Long enough to cover the trips someone would be filling in, short enough that
+ * a self-hosted instance is not asked to aggregate a decade of points for a card
+ * nobody was looking at. Takes `now` rather than reading the clock so the window
+ * is testable.
+ */
+export function countryWindow(now: Date): { from: string; to: string } {
+  const from = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000)
+  return { from: from.toISOString(), to: now.toISOString() }
+}
+
+/**
+ * The wishes worth showing, best first.
+ *
+ * Only entries the recordings actually found; the ones still open lead, because
+ * they are the ones the reader can act on, and within each group the most recent
+ * visit comes first — a wish reached last week is easier to confirm than one
+ * reached ten months ago.
+ */
+export function orderedMatches(matches: DawarichBucketMatch[]): DawarichBucketMatch[] {
+  return matches
+    .filter(match => match.match !== null)
+    .slice()
+    .sort((a, b) => {
+      if (a.alreadyVisited !== b.alreadyVisited) return a.alreadyVisited ? 1 : -1
+      return (b.match?.at ?? '') < (a.match?.at ?? '') ? -1 : 1
+    })
+}
+
+/** The countries a confirmation would actually change. */
+export function newCountries(countries: DawarichAtlasCountry[]): DawarichAtlasCountry[] {
+  return countries.filter(country => !country.alreadyVisited)
+}
+
+/**
+ * A country's name in the reader's language, falling back to Dawarich's own
+ * spelling.
+ *
+ * `Intl.DisplayNames` is missing on older WebViews and throws on a code it does
+ * not know, so both are caught — the Atlas page's own resolver does the same.
+ */
+export function countryLabel(code: string, sourceName: string, locale: string): string {
+  try {
+    return new Intl.DisplayNames([locale], { type: 'region' }).of(code) || sourceName
+  } catch {
+    return sourceName
+  }
+}
+
+/**
+ * The first few cities, as one line.
+ *
+ * Three is what fits beside a flag at the width the dialog has on a phone, and
+ * the count badge beside it already says how many there were in total.
+ */
+export function cityLine(cities: DawarichAtlasCountry['cities'], limit = 3): string {
+  return cities
+    .slice(0, limit)
+    .map(city => city.name)
+    .join(', ')
+}
+
+/**
+ * A distance a person would say out loud: metres up to a kilometre, then one
+ * decimal of a kilometre. `1400 m away` is a measurement; `1.4 km away` is how
+ * far it was.
+ */
+export function formatDistance(
+  meters: number,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): string {
+  return meters < 1000
+    ? t('dawarich.bucket.metersAway', { meters: Math.round(meters) })
+    : t('dawarich.bucket.kilometersAway', { km: (meters / 1000).toFixed(1) })
+}

client/src/components/Dawarich/dawarichSuggestionModel.test.ts

@@ -0,0 +1,215 @@
+// FE-DAWARICH-SUGMODEL-001 to FE-DAWARICH-SUGMODEL-014
+import { describe, it, expect } from 'vitest'
+import type { DawarichSuggestion } from '@trek/shared'
+import {
+  clockOf,
+  formatDayHeading,
+  formatDayOption,
+  formatDuration,
+  groupByDay,
+  openStaysByDate,
+  timeRange,
+} from './dawarichSuggestionModel'
+
+function stay(over: Partial<DawarichSuggestion> & { id: number; localDate: string }): DawarichSuggestion {
+  return {
+    id: over.id,
+    sourceVisitId: String(over.id),
+    tripId: over.tripId ?? null,
+    tripTitle: over.tripTitle ?? null,
+    name: over.name ?? 'Cafe Reichard',
+    lat: over.lat ?? 50.94,
+    lng: over.lng ?? 6.96,
+    startedAt: over.startedAt ?? `${over.localDate}T10:15:00+02:00`,
+    endedAt: over.endedAt ?? `${over.localDate}T12:40:00+02:00`,
+    durationMinutes: over.durationMinutes ?? 145,
+    localDate: over.localDate,
+    sourceStatus: over.sourceStatus ?? 'suggested',
+    confidence: over.confidence ?? null,
+    confidenceBand: over.confidenceBand ?? null,
+    state: over.state ?? 'new',
+    target: over.target ?? null,
+    acceptedPlaceId: over.acceptedPlaceId ?? null,
+    acceptedJournalEntryId: over.acceptedJournalEntryId ?? null,
+    acceptedBucketListItemId: over.acceptedBucketListItemId ?? null,
+    sourceChanged: over.sourceChanged ?? false,
+    sourceMissing: over.sourceMissing ?? false,
+    matchedBucketListItemId: over.matchedBucketListItemId ?? null,
+    matchedBucketListName: over.matchedBucketListName ?? null,
+    countryCode: over.countryCode ?? null,
+    firstSeenAt: over.firstSeenAt ?? '2026-09-10T06:00:00Z',
+    lastSeenAt: over.lastSeenAt ?? '2026-09-10T06:00:00Z',
+  }
+}
+
+const t = (key: string, params?: Record<string, unknown>): string =>
+  `${key}:${JSON.stringify(params ?? {})}`
+
+describe('groupByDay', () => {
+  it('FE-DAWARICH-SUGMODEL-001: newest day first, earliest stay first within a day', () => {
+    const days = groupByDay([
+      stay({ id: 1, localDate: '2026-09-10', startedAt: '2026-09-10T18:00:00+02:00' }),
+      stay({ id: 2, localDate: '2026-09-11' }),
+      stay({ id: 3, localDate: '2026-09-10', startedAt: '2026-09-10T09:00:00+02:00' }),
+    ])
+    expect(days.map(d => d.date)).toEqual(['2026-09-11', '2026-09-10'])
+    expect(days[1].stays.map(s => s.id)).toEqual([3, 1])
+  })
+
+  it('FE-DAWARICH-SUGMODEL-002: the colour counts from the oldest day, like the map does', () => {
+    const days = groupByDay([
+      stay({ id: 1, localDate: '2026-09-10' }),
+      stay({ id: 2, localDate: '2026-09-11' }),
+    ])
+    const oldest = days.find(d => d.date === '2026-09-10')!
+    const newest = days.find(d => d.date === '2026-09-11')!
+    expect(oldest.color).not.toBe(newest.color)
+    // Same input in a different order paints the same day the same colour.
+    const again = groupByDay([
+      stay({ id: 2, localDate: '2026-09-11' }),
+      stay({ id: 1, localDate: '2026-09-10' }),
+    ])
+    expect(again.find(d => d.date === '2026-09-10')!.color).toBe(oldest.color)
+  })
+
+  it('FE-DAWARICH-SUGMODEL-003: nothing in, nothing out', () => {
+    expect(groupByDay([])).toEqual([])
+  })
+
+  it('FE-DAWARICH-SUGMODEL-013: a day that already reads in order is left in it', () => {
+    // Three stays rather than two: with two, a comparator that answered the
+    // same thing both ways would still look right half the time.
+    const input = [
+      stay({ id: 1, localDate: '2026-09-10', startedAt: '2026-09-10T09:00:00+02:00' }),
+      stay({ id: 2, localDate: '2026-09-10', startedAt: '2026-09-10T18:00:00+02:00' }),
+      stay({ id: 3, localDate: '2026-09-10', startedAt: '2026-09-10T13:30:00+02:00' }),
+    ]
+
+    const days = groupByDay(input)
+
+    expect(days).toHaveLength(1)
+    expect(days[0].stays.map(s => s.id)).toEqual([1, 3, 2])
+    // The list handed in belongs to the store. Sorting it in place would
+    // reorder what the panel is rendering from underneath it.
+    expect(input.map(s => s.id)).toEqual([1, 2, 3])
+  })
+})
+
+describe('clockOf / timeRange', () => {
+  it('FE-DAWARICH-SUGMODEL-004: reads the clock out of the timestamp\'s own offset', () => {
+    expect(clockOf('2026-09-10T10:15:00+02:00')).toBe('10:15')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-005: an unreadable timestamp has no clock', () => {
+    expect(clockOf('yesterday')).toBe('')
+    expect(clockOf('')).toBe('')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-006: a range when both ends read, the arrival alone when the end does not', () => {
+    expect(timeRange('2026-09-10T10:15:00+02:00', '2026-09-10T12:40:00+02:00', false)).toBe('10:15 – 12:40')
+    expect(timeRange('2026-09-10T10:15:00+02:00', 'nonsense', false)).toBe('10:15')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-007: no arrival, no range', () => {
+    expect(timeRange('nonsense', '2026-09-10T12:40:00+02:00', false)).toBe('')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-012: a twelve-hour clock gets twelve-hour times, both ends of the range', () => {
+    // These were cut out of the timestamp and printed as they stood, so a traveller on a
+    // 12-hour clock read every Dawarich time in 24-hour while the rest of the app obeyed
+    // the setting.
+    expect(timeRange('2026-09-10T10:15:00+02:00', '2026-09-10T12:40:00+02:00', true)).toBe('10:15 AM – 12:40 PM')
+    expect(timeRange('2026-09-10T14:05:00+02:00', '2026-09-10T23:00:00+02:00', true)).toBe('2:05 PM – 11:00 PM')
+    // Midnight is 12 AM, not 0 AM, and noon is 12 PM.
+    expect(timeRange('2026-09-10T00:30:00+02:00', '2026-09-10T12:00:00+02:00', true)).toBe('12:30 AM – 12:00 PM')
+  })
+})
+
+describe('formatDuration', () => {
+  it('FE-DAWARICH-SUGMODEL-008: minutes under an hour, hours above it, both when there is a remainder', () => {
+    expect(formatDuration(45, t)).toBe('dawarich.duration.minutes:{"minutes":45}')
+    expect(formatDuration(120, t)).toBe('dawarich.duration.hours:{"hours":2}')
+    expect(formatDuration(145, t)).toBe('dawarich.duration.hoursMinutes:{"hours":2,"minutes":25}')
+  })
+})
+
+describe('formatDayHeading', () => {
+  it('FE-DAWARICH-SUGMODEL-009: reads as the local date, not as yesterday', () => {
+    // Built from the date parts rather than from a Date at midnight UTC, which
+    // is the difference between "Thu, 10 Sept" and "Wed, 9 Sept" west of UTC.
+    expect(formatDayHeading('2026-09-10', 'en-GB')).toContain('10')
+    expect(formatDayHeading('2026-09-10', 'en-GB')).toMatch(/Thu/)
+  })
+
+  it('FE-DAWARICH-SUGMODEL-010: an unparseable date is shown as it came', () => {
+    expect(formatDayHeading('not-a-date', 'en-GB')).toBe('not-a-date')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-014: a date missing its month or its day is shown as it came too', () => {
+    // Each guard on its own, because `Date` would rather guess than refuse:
+    // month 0 rolls the heading back into December of the previous year, and a
+    // missing day silently becomes the first of the month. Either one reads as
+    // a real date, which is worse than showing the string that arrived.
+    expect(formatDayHeading('2026-00-10', 'en-GB')).toBe('2026-00-10')
+    expect(formatDayHeading('2026-09-00', 'en-GB')).toBe('2026-09-00')
+    expect(formatDayHeading('2026-09', 'en-GB')).toBe('2026-09')
+  })
+})
+
+describe('formatDayOption', () => {
+  it('FE-DAWARICH-SUGMODEL-011: the day number is the label, the date rides along as a badge', () => {
+    const option = formatDayOption(3, '2026-09-10', 'en-GB', t)
+    expect(option.label).toBe('planner.dayN:{"n":3}')
+    expect(option.badge).toMatch(/10/)
+  })
+
+  it('FE-DAWARICH-SUGMODEL-012: a day without a date gets no badge rather than an empty one', () => {
+    expect(formatDayOption(1, null, 'en-GB', t)).toEqual({ label: 'planner.dayN:{"n":1}', badge: undefined })
+  })
+})
+
+describe('openStaysByDate', () => {
+  it('FE-DAWARICH-SUGMODEL-015: buckets the open stays by their own local day', () => {
+    // What a journal timeline asks for: it draws one day and folds that day's stays into
+    // it, so it looks them up by date rather than walking a flat list per day.
+    const byDate = openStaysByDate([
+      stay({ id: 1, localDate: '2026-09-10' }),
+      stay({ id: 2, localDate: '2026-09-11' }),
+      stay({ id: 3, localDate: '2026-09-10' }),
+    ])
+
+    expect([...byDate.keys()].sort()).toEqual(['2026-09-10', '2026-09-11'])
+    expect(byDate.get('2026-09-10')!.map(s => s.id)).toEqual([1, 3])
+  })
+
+  it('FE-DAWARICH-SUGMODEL-016: within a day they are in the order they were lived', () => {
+    // A run of stays reads as an afternoon only in that order; whatever order the server
+    // sent them in is not it.
+    const byDate = openStaysByDate([
+      stay({ id: 1, localDate: '2026-09-10', startedAt: '2026-09-10T16:00:00+02:00' }),
+      stay({ id: 2, localDate: '2026-09-10', startedAt: '2026-09-10T08:30:00+02:00' }),
+      stay({ id: 3, localDate: '2026-09-10', startedAt: '2026-09-10T12:15:00+02:00' }),
+    ])
+
+    expect(byDate.get('2026-09-10')!.map(s => s.id)).toEqual([2, 3, 1])
+  })
+
+  it('FE-DAWARICH-SUGMODEL-017: only what is still waiting', () => {
+    // An accepted stay is an entry on that timeline already, and a dismissed one was waved
+    // away on purpose; offering either again is offering to do it twice.
+    const byDate = openStaysByDate([
+      stay({ id: 1, localDate: '2026-09-10', state: 'accepted' }),
+      stay({ id: 2, localDate: '2026-09-10', state: 'dismissed' }),
+      stay({ id: 3, localDate: '2026-09-10' }),
+    ])
+
+    expect(byDate.get('2026-09-10')!.map(s => s.id)).toEqual([3])
+  })
+
+  it('FE-DAWARICH-SUGMODEL-018: a day whose every stay is handled is not a day at all', () => {
+    // An empty bucket would draw a fold saying "0 stays" on a day that has none.
+    const byDate = openStaysByDate([stay({ id: 1, localDate: '2026-09-10', state: 'accepted' })])
+
+    expect(byDate.size).toBe(0)
+  })
+})

client/src/components/Dawarich/dawarichSuggestionModel.ts

@@ -0,0 +1,149 @@
+import type { DawarichSuggestion } from '@trek/shared'
+import { dayColor } from '../Map/dawarichTrail'
+import { formatClockTime } from '../../utils/formatters'
+
+/**
+ * Pure shaping for the suggestions panel — no React, so the grouping and the
+ * formatting can be tested without rendering anything.
+ */
+
+export interface SuggestionDay {
+  /** `YYYY-MM-DD`, the stay's own local date. */
+  date: string
+  /** The colour this day is drawn in on the map, so the panel and the line agree. */
+  color: string
+  stays: DawarichSuggestion[]
+}
+
+/**
+ * Group stays by the local day they happened on, newest day first, and give each
+ * day the colour the map draws it in.
+ *
+ * The grouping is what turns a flat list into something readable: a day of
+ * travel produces four or five stays, and repeating the full date on every row
+ * buries the one thing that distinguishes them — the time.
+ *
+ * The colour index counts days from the OLDEST, matching how the track overlay
+ * numbers them, so "the purple line" and "the purple day" are the same day.
+ */
+export function groupByDay(suggestions: DawarichSuggestion[]): SuggestionDay[] {
+  const byDate = new Map<string, DawarichSuggestion[]>()
+  for (const stay of suggestions) {
+    const bucket = byDate.get(stay.localDate)
+    if (bucket) bucket.push(stay)
+    else byDate.set(stay.localDate, [stay])
+  }
+
+  // ISO dates, so lexicographic order IS chronological order. Spelled out rather than
+  // left bare, and deliberately not locale-aware, which would vary by runtime.
+  const oldestFirst = [...byDate.keys()].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+  return oldestFirst
+    .map((date, index) => ({
+      date,
+      color: dayColor(index),
+      // Within a day, earliest first: that is the order they were lived in.
+      stays: byDate.get(date)!.slice().sort((a, b) => (a.startedAt < b.startedAt ? -1 : 1)),
+    }))
+    .reverse()
+}
+
+/**
+ * The stays still waiting, by the local day they happened on.
+ *
+ * What a journal timeline needs: it draws one day at a time and folds that day's stays
+ * into it, so it asks by date rather than walking a flat list per day. Only `new` ones —
+ * an accepted stay is already an entry on that timeline and a dismissed one was waved
+ * away on purpose — and within a day the order is the order they were lived in, which is
+ * what makes a run of them read as an afternoon.
+ *
+ * A Map rather than the day list `groupByDay` builds: that one is ordered newest-first for
+ * a panel to print, and this one is looked up by the day the timeline is already drawing.
+ */
+export function openStaysByDate(suggestions: DawarichSuggestion[]): Map<string, DawarichSuggestion[]> {
+  const byDate = new Map<string, DawarichSuggestion[]>();
+  for (const stay of suggestions) {
+    if (stay.state !== 'new') continue;
+    const bucket = byDate.get(stay.localDate);
+    if (bucket) bucket.push(stay);
+    else byDate.set(stay.localDate, [stay]);
+  }
+  for (const stays of byDate.values()) stays.sort((a, b) => (a.startedAt < b.startedAt ? -1 : 1));
+  return byDate;
+}
+
+/** `HH:MM` out of an ISO timestamp, in the offset the timestamp carries. */
+export function clockOf(iso: string): string {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(iso) ? iso.slice(11, 16) : ''
+}
+
+/**
+ * `10:15 – 12:40`, or just the arrival when the end is unreadable.
+ *
+ * An en dash with hair spaces rather than a hyphen: this is a range, and it sits
+ * next to times often enough that the difference is visible.
+ *
+ * `is12h` is not optional on purpose. These clocks were cut straight out of the
+ * timestamp and printed, so a traveller on a 12-hour clock read every Dawarich time in
+ * 24-hour while the rest of the app obeyed the setting. A required argument makes the
+ * next caller answer the question rather than inherit the bug.
+ */
+export function timeRange(startedAt: string, endedAt: string, is12h: boolean): string {
+  const from = formatClockTime(clockOf(startedAt), is12h)
+  const to = formatClockTime(clockOf(endedAt), is12h)
+  if (!from) return ''
+  return to ? `${from} – ${to}` : from
+}
+
+/**
+ * A duration a person would say out loud.
+ *
+ * "285 min" is a number from a database; "4 h 45 min" is how long somebody was
+ * somewhere. The two label keys carry the units so a locale can put them where
+ * it wants them.
+ */
+export function formatDuration(
+  minutes: number,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): string {
+  if (minutes < 60) return t('dawarich.duration.minutes', { minutes })
+  const hours = Math.floor(minutes / 60)
+  const rest = minutes % 60
+  return rest === 0
+    ? t('dawarich.duration.hours', { hours })
+    : t('dawarich.duration.hoursMinutes', { hours, minutes: rest })
+}
+
+/**
+ * A stay's day header, in the reader's language: `Thu, 10 Sept`.
+ *
+ * Built from the date string rather than from a Date at midnight UTC, so a
+ * reader east or west of UTC does not see yesterday.
+ */
+export function formatDayHeading(date: string, locale: string): string {
+  const [year, month, day] = date.split('-').map(Number)
+  if (!year || !month || !day) return date
+  return new Date(year, month - 1, day).toLocaleDateString(locale, {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'short',
+  })
+}
+
+/**
+ * How a trip day reads in the accept dialog's picker.
+ *
+ * `1. 2026-09-09` is a row out of a database. What a person recognises is the
+ * number the planner gives the day and the weekday it fell on, which is exactly
+ * what the day rail shows them — so the picker says the same thing.
+ */
+export function formatDayOption(
+  dayNumber: number,
+  date: string | null | undefined,
+  locale: string,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): { label: string; badge?: string } {
+  return {
+    label: t('planner.dayN', { n: dayNumber }),
+    badge: date ? formatDayHeading(date, locale) : undefined,
+  }
+}

client/src/components/Dawarich/dawarichTripRefresh.test.ts

@@ -0,0 +1,112 @@
+/**
+ * FE-DAWARICH-API-030 to FE-DAWARICH-API-032
+ *
+ * Two lines of code, and both of them are the kind that rot without a sound.
+ *
+ * Accepting a recorded stay into a trip is written entirely server-side, so the
+ * planner learns nothing about the place it produced until something pulls the
+ * trip back in. This is that something, and both trip shells (the desktop
+ * `PlacesSidebar` and the phone `MPlacesBrowser`) call it as a one-liner
+ * precisely so the two copies cannot drift apart. What the tests hold is:
+ *
+ *  - **Both refreshes are started, not one.** A stay accepted onto a day creates
+ *    an assignment as well as a place, so refreshing only the places leaves the
+ *    day rail one entry short until a reload. That is a plausible "simplification"
+ *    for someone reading the call site, and nothing else in the app would notice.
+ *  - **They run together, not in sequence.** `Promise.all` fires both before
+ *    awaiting either; rewritten as two awaits it still works, just twice as
+ *    slowly, and the button keeps spinning for both round trips. The order check
+ *    below is synchronous, so it distinguishes the two shapes without timing.
+ *  - **The id goes through verbatim.** The phone shell hands over a route param,
+ *    which is a string; the desktop one hands over a number. Coercing either
+ *    direction here would break the other caller.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { useTripStore } from '../../store/tripStore'
+import { refreshTripAfterAccept } from './dawarichTripRefresh'
+
+const original = {
+  refreshPlaces: useTripStore.getState().refreshPlaces,
+  refreshDays: useTripStore.getState().refreshDays,
+}
+
+afterEach(() => {
+  useTripStore.setState(original)
+})
+
+describe('refreshTripAfterAccept', () => {
+  it('FE-DAWARICH-API-030: starts the day refresh without waiting for the place refresh', async () => {
+    const order: string[] = []
+    let releasePlaces!: () => void
+    // A gate rather than a timer: with Promise.all both calls are made before
+    // anything is awaited, so the day refresh has already run by the time control
+    // returns. Rewritten as `await a; await b` it would still be waiting here.
+    const placesGate = new Promise<void>(resolve => {
+      releasePlaces = resolve
+    })
+
+    useTripStore.setState({
+      refreshPlaces: vi.fn(async (_tripId: number | string) => {
+        order.push('places:called')
+        await placesGate
+        order.push('places:settled')
+      }),
+      refreshDays: vi.fn(async (_tripId: number | string) => {
+        order.push('days:called')
+      }),
+    })
+
+    const pending = refreshTripAfterAccept(7)
+    expect(order).toEqual(['places:called', 'days:called'])
+
+    releasePlaces()
+    await pending
+    expect(order).toEqual(['places:called', 'days:called', 'places:settled'])
+  })
+
+  it('FE-DAWARICH-API-031: resolves only once both refreshes have finished', async () => {
+    let releaseDays!: () => void
+    const daysGate = new Promise<void>(resolve => {
+      releaseDays = resolve
+    })
+    let settled = false
+
+    useTripStore.setState({
+      refreshPlaces: vi.fn(async (_tripId: number | string) => {}),
+      refreshDays: vi.fn(async (_tripId: number | string) => {
+        await daysGate
+      }),
+    })
+
+    const pending = refreshTripAfterAccept(7).then(() => {
+      settled = true
+    })
+
+    // Drain the microtask queue: the places half is already done, so anything
+    // that only awaited that one would be finished by now.
+    await Promise.resolve()
+    await Promise.resolve()
+    expect(settled).toBe(false)
+
+    releaseDays()
+    await pending
+    expect(settled).toBe(true)
+  })
+
+  it('FE-DAWARICH-API-032: hands both refreshes the id exactly as the caller gave it', async () => {
+    const refreshPlaces = vi.fn(async (_tripId: number | string) => {})
+    const refreshDays = vi.fn(async (_tripId: number | string) => {})
+    useTripStore.setState({ refreshPlaces, refreshDays })
+
+    // The phone shell reads the trip id off the route, so it is a string there
+    // and a number on the desktop. Both repos accept either; a cast added here
+    // would only break whichever caller was not the one being looked at.
+    await refreshTripAfterAccept('42')
+    expect(refreshPlaces).toHaveBeenCalledWith('42')
+    expect(refreshDays).toHaveBeenCalledWith('42')
+
+    await refreshTripAfterAccept(42)
+    expect(refreshPlaces).toHaveBeenLastCalledWith(42)
+    expect(refreshDays).toHaveBeenLastCalledWith(42)
+  })
+})

client/src/components/Dawarich/dawarichTripRefresh.ts

@@ -0,0 +1,18 @@
+import { useTripStore } from '../../store/tripStore'
+
+/**
+ * Pull the trip back in after a stay was accepted into it.
+ *
+ * The acceptance is written server-side, so the planner knows nothing about the
+ * place it produced until somebody reloads the page — which is exactly what a
+ * person should never have to do after pressing a button. Both trip shells call
+ * this, which is also why it is a plain function rather than a hook: one line at
+ * each call site keeps the desktop and phone copies from drifting.
+ *
+ * Places and days both, because a stay accepted onto a day creates an assignment
+ * as well, and the day rail would otherwise stay one place short.
+ */
+export async function refreshTripAfterAccept(tripId: number | string): Promise<void> {
+  const store = useTripStore.getState()
+  await Promise.all([store.refreshPlaces(tripId), store.refreshDays(tripId)])
+}

client/src/components/Files/FileManager.test.tsx

@@ -1,10 +1,11 @@
-// FE-COMP-FILEMANAGER-001 to FE-COMP-FILEMANAGER-012
+// FE-COMP-FILEMANAGER-001 to FE-COMP-FILEMANAGER-038
 import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
 import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
+import { useDocSyncOfferStore } from '../../store/docSyncOfferStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { buildUser, buildTrip } from '../../../tests/helpers/factories';
 import type { TripFile } from '../../types';
@@ -104,6 +105,15 @@ beforeEach(() => {
     }),
   );
 
+  // Document sync, as a fresh install has it: every provider off, nothing bound.
+  useDocSyncOfferStore.setState({ bound: {}, providers: null });
+  server.use(
+    http.get('/api/trips/:tripId/docsync/providers', () => HttpResponse.json([])),
+    http.get('/api/trips/:tripId/docsync/links', () => HttpResponse.json([])),
+    http.get('/api/trips/:tripId/docsync/connections', () => HttpResponse.json([])),
+    http.get('/api/trips/:tripId/docsync/status', () => HttpResponse.json({ links: [], items: {} })),
+  );
+
   // Stub window.confirm
   vi.spyOn(window, 'confirm').mockReturnValue(true);
 });
@@ -631,4 +641,60 @@ describe('FileManager', () => {
       expect(call[0]).toBeInstanceOf(FormData);
     });
   });
+
+  describe('document sync button', () => {
+    const paperless = { id: 'paperless', name: 'Paperless-ngx', description: null, icon: 'paperless', available: true, fields: [] };
+    const trashButton = () => screen.getByText('Trash').closest('button') as HTMLButtonElement;
+
+    it('FE-COMP-FILEMANAGER-036: with no provider on and nothing bound there is no sync button, and the trash sits flush right', async () => {
+      const asked: string[] = [];
+      server.use(
+        http.get('/api/trips/:tripId/docsync/links', () => {
+          asked.push('links');
+          return HttpResponse.json([]);
+        }),
+      );
+      render(<FileManager {...defaultProps} />);
+
+      await waitFor(() => expect(asked).toContain('links'));
+      expect(screen.queryByTitle('Document sync')).not.toBeInTheDocument();
+      expect(trashButton()).toHaveStyle({ marginLeft: 'auto' });
+    });
+
+    it('FE-COMP-FILEMANAGER-037: somebody who may bind the trip gets it once a provider is on, and it opens the panel', async () => {
+      server.use(http.get('/api/trips/:tripId/docsync/providers', () => HttpResponse.json([paperless])));
+      render(<FileManager {...defaultProps} />);
+      const user = userEvent.setup();
+
+      const button = await screen.findByTitle('Document sync');
+      expect(button).toHaveStyle({ marginLeft: 'auto' });
+      expect(trashButton().style.marginLeft).toBe('');
+
+      await user.click(button);
+      expect(await screen.findByText('Connect a provider')).toBeInTheDocument();
+    });
+
+    it('FE-COMP-FILEMANAGER-038: a member sees it on a bound trip only', async () => {
+      seedStore(useAuthStore, { user: buildUser({ id: 999, role: 'user' }), isAuthenticated: true });
+      server.use(
+        http.get('/api/trips/:tripId/docsync/providers', () => HttpResponse.json([paperless])),
+        http.get('/api/trips/:tripId/docsync/links', () => HttpResponse.json([{ id: 1, providerId: 'paperless' }])),
+      );
+      const { unmount } = render(<FileManager {...defaultProps} />);
+      expect(await screen.findByTitle('Document sync')).toBeInTheDocument();
+      unmount();
+
+      useDocSyncOfferStore.setState({ bound: {}, providers: null });
+      const asked: string[] = [];
+      server.use(
+        http.get('/api/trips/:tripId/docsync/links', () => {
+          asked.push('links');
+          return HttpResponse.json([]);
+        }),
+      );
+      render(<FileManager {...defaultProps} />);
+      await waitFor(() => expect(asked).toContain('links'));
+      expect(screen.queryByTitle('Document sync')).not.toBeInTheDocument();
+    });
+  });
 });

client/src/components/Files/FileManager.tsx

@@ -7,6 +7,7 @@ import { isMarkdown } from './FileManager.helpers'
 import { FileManagerToolbar } from './FileManagerToolbar'
 import { TrashView } from './FileManagerTrashView'
 import { FilesView } from './FileManagerFilesView'
+import DocSyncPanel from './docsync/DocSyncPanel'
 
 export default function FileManager(props: FileManagerProps) {
   const S = useFileManager(props)
@@ -24,6 +25,19 @@ export default function FileManager(props: FileManagerProps) {
         ? <MarkdownPreviewModal {...S} />
         : <PdfPreviewModal {...S} />)}
 
+      {/* Document sync opens as its own dialog: it is configuration for the
+          documents on this screen, so it belongs here rather than in settings,
+          but it is a task with a beginning and an end and does not belong
+          inside the list it configures. */}
+      {S.showDocSync && (
+        <DocSyncPanel
+          tripId={props.tripId}
+          tripTitle={S.trip?.title}
+          canManage={S.canManageSync}
+          onClose={() => S.setShowDocSync(false)}
+        />
+      )}
+
       {/* Toolbar */}
       <FileManagerToolbar {...S} />
 

client/src/components/Files/FileManagerToolbar.tsx

@@ -1,8 +1,8 @@
-import { Star, Trash2 } from 'lucide-react'
+import { FolderSync, Star, Trash2 } from 'lucide-react'
 import type { FileManagerState } from './useFileManager'
 
 export function FileManagerToolbar(S: FileManagerState) {
-  const { showTrash, t, files, filterType, setFilterType, toggleTrash } = S
+  const { showTrash, t, files, filterType, setFilterType, toggleTrash, setShowDocSync, docSyncOffered } = S
   return (
     <div style={{ padding: '24px 28px 0', flexShrink: 0 }} className="max-md:!px-4 max-md:!pt-4">
       <div style={{
@@ -63,12 +63,29 @@ export function FileManagerToolbar(S: FileManagerState) {
           </>
         )}
 
+        {/* Opens the sync panel. Placed next to the trash rather than in a menu
+            because the question it answers, "where do these documents live",
+            belongs on the same screen as the documents. Only where there is
+            something behind it: see useDocSyncOffered. */}
+        {docSyncOffered && (
+          <button type="button" onClick={() => setShowDocSync(true)} title={t('docsync.title')} style={{
+            appearance: 'none', border: '1px solid var(--edge)', cursor: 'pointer', fontFamily: 'inherit',
+            display: 'inline-flex', alignItems: 'center', gap: 6,
+            padding: '9px 12px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
+            background: 'transparent', color: 'var(--content-muted)', flexShrink: 0, marginLeft: 'auto',
+          }}>
+            <FolderSync size={14} strokeWidth={2.5} /> <span className="hidden sm:inline">{t('docsync.title')}</span>
+          </button>
+        )}
+
+        {/* The first of the two takes the free space, so without the sync
+            button the trash sits flush right the way it always has. */}
         <button type="button" onClick={toggleTrash} style={{
           appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
           display: 'inline-flex', alignItems: 'center', gap: 6,
           padding: '9px 14px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
           background: 'var(--accent)', color: 'var(--accent-text)',
-          flexShrink: 0, marginLeft: 'auto',
+          flexShrink: 0, marginLeft: docSyncOffered ? undefined : 'auto',
           opacity: showTrash ? 1 : 0.88,
           transition: 'opacity 0.15s ease',
         }}

client/src/components/Files/docsync/DocSyncBinding.test.tsx

@@ -0,0 +1,423 @@
+// FE-DOCSYNC-BIND-001 to FE-DOCSYNC-BIND-030
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import en from '@trek/shared/i18n/en'
+import { render, screen, fireEvent, waitFor, within } from '../../../../tests/helpers/render'
+import DocSyncBinding from './DocSyncBinding'
+import type { DocSyncLink, useDocSync } from './useDocSync'
+
+type Sync = ReturnType<typeof useDocSync>
+
+const syncNow = vi.fn(async (_linkId: number) => ({ state: 'ok', pulled: 0, pushed: 0, conflicts: 0, missing: 0 }))
+const updateLink = vi.fn(async (_linkId: number, _patch: Record<string, unknown>) => {})
+const removeLink = vi.fn(async (_linkId: number) => {})
+
+const WEBHOOK = 'https://trek.example/api/trips/3/docsync/hooks/abc123'
+
+function makeLink(overrides: Partial<DocSyncLink> = {}): DocSyncLink {
+  return {
+    id: 4,
+    connectionId: 1,
+    providerId: 'paperless',
+    scopeKey: 'trek-trip-3',
+    remoteLabel: 'Lisbon papers',
+    remoteRootPath: '/TREK/Lisbon',
+    direction: 'both',
+    deletePolicy: 'unlink',
+    conflictPolicy: 'manual',
+    syncEnabled: true,
+    lastSyncAt: null,
+    lastSyncState: 'ok',
+    lastSyncError: null,
+    webhookUrl: null,
+    holdings: { inTrek: 3, atProvider: 2, paired: 2, missing: 1 },
+    ...overrides,
+  }
+}
+
+function makeSync(overrides: Partial<Sync> = {}): Sync {
+  return {
+    providers: [],
+    connections: [],
+    links: [],
+    itemCounts: {},
+    loading: false,
+    busy: null,
+    error: null,
+    connectionFor: () => null,
+    load: vi.fn(),
+    saveConnection: vi.fn(),
+    testConnection: vi.fn(),
+    loadScopes: vi.fn(),
+    createScope: vi.fn(),
+    createLink: vi.fn(),
+    updateLink,
+    removeLink,
+    syncNow,
+    resolveConflict: vi.fn(),
+    lastRunFor: () => ({ pulled: 0, pushed: 0 }),
+    ...overrides,
+  } as unknown as Sync
+}
+
+function renderCard(
+  opts: {
+    link?: Partial<DocSyncLink>
+    sync?: Partial<Sync>
+    canManage?: boolean
+    providerName?: string
+    onReconnect?: () => void
+  } = {},
+) {
+  const utils = render(
+    <DocSyncBinding
+      link={makeLink(opts.link)}
+      providerName={opts.providerName ?? 'Paperless'}
+      sync={makeSync(opts.sync)}
+      canManage={opts.canManage ?? true}
+      onReconnect={opts.onReconnect}
+    />,
+  )
+  const header = utils.container.querySelector('header') as HTMLElement
+  return { ...utils, header }
+}
+
+const openSettings = () => fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
+
+const rowFor = (label: string) => screen.getByText(label).closest('div') as HTMLElement
+
+const UNLINK_QUESTION = 'Documents stay in TREK and at the store. Only the pairing between them goes.'
+
+/** The confirmation the disconnect button opens; it renders in a portal. */
+const unlinkDialog = () => within(screen.getByText(UNLINK_QUESTION).closest('.trek-modal-enter') as HTMLElement)
+
+/** Named through the same fallback chain `t()` uses, so the label can land in the locales later. */
+const reconnectButton = () =>
+  screen.queryByRole('button', { name: (en as unknown as Record<string, string>)['docsync.binding.reconnect'] ?? 'docsync.binding.reconnect' })
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('DocSyncBinding: running a sync', () => {
+  it('FE-DOCSYNC-BIND-001: "Sync now" asks the hook to run this binding', () => {
+    renderCard()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Sync now' }))
+
+    expect(syncNow).toHaveBeenCalledWith(4)
+  })
+
+  it('FE-DOCSYNC-BIND-002: while this binding runs the button reads "Syncing" and refuses another click', () => {
+    renderCard({ sync: { busy: 'sync-4' } })
+
+    const button = screen.getByRole('button', { name: 'Syncing' })
+    expect(button).toBeDisabled()
+    expect(screen.queryByRole('button', { name: 'Sync now' })).not.toBeInTheDocument()
+
+    fireEvent.click(button)
+    expect(syncNow).not.toHaveBeenCalled()
+  })
+
+  it('FE-DOCSYNC-BIND-003: a run on another binding leaves this card ready', () => {
+    renderCard({ sync: { busy: 'sync-9' } })
+
+    expect(screen.getByRole('button', { name: 'Sync now' })).toBeEnabled()
+  })
+
+  it('FE-DOCSYNC-BIND-004: the disconnect button asks first and unlinks once that is confirmed', () => {
+    // As the phone does. The button sits beside "Sync now", and a binding
+    // cannot be put back: rebinding the same folder starts from nothing.
+    renderCard()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Disconnect' }))
+
+    expect(removeLink).not.toHaveBeenCalled()
+    expect(screen.getByText(UNLINK_QUESTION)).toBeInTheDocument()
+
+    fireEvent.click(unlinkDialog().getByRole('button', { name: 'Disconnect' }))
+
+    expect(removeLink).toHaveBeenCalledWith(4)
+    expect(screen.queryByText(UNLINK_QUESTION)).not.toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-027: cancelling the question leaves the binding as it was', () => {
+    renderCard()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Disconnect' }))
+    fireEvent.click(unlinkDialog().getByRole('button', { name: 'Cancel' }))
+
+    expect(removeLink).not.toHaveBeenCalled()
+    expect(screen.queryByText(UNLINK_QUESTION)).not.toBeInTheDocument()
+  })
+})
+
+describe('DocSyncBinding: a refused credential', () => {
+  it('FE-DOCSYNC-BIND-028: offers to sign in again beside the notice, and hands the click to the panel', () => {
+    // The sidebar opens the credential form only for a store with no
+    // connection yet, so a rotated token had no way back in from the app.
+    const onReconnect = vi.fn()
+    renderCard({ link: { lastSyncState: 'needs_reauth', lastSyncError: 'unauthorized' }, onReconnect })
+
+    expect(screen.getByText('Sign in again · The credentials were refused.')).toBeInTheDocument()
+    fireEvent.click(reconnectButton() as HTMLElement)
+
+    expect(onReconnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DOCSYNC-BIND-029: a refusal recorded as a failed run offers it too', () => {
+    const onReconnect = vi.fn()
+    renderCard({ link: { lastSyncState: 'failed', lastSyncError: 'unauthorized' }, onReconnect })
+
+    expect(reconnectButton()).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-030: is not offered to a member, for another failure, or while the provider is switched off', () => {
+    const onReconnect = vi.fn()
+    const refused = { lastSyncState: 'needs_reauth', lastSyncError: 'unauthorized' } as const
+
+    const member = renderCard({ link: refused, onReconnect, canManage: false })
+    expect(reconnectButton()).not.toBeInTheDocument()
+    member.unmount()
+
+    const other = renderCard({ link: { lastSyncState: 'failed', lastSyncError: 'unreachable' }, onReconnect })
+    expect(reconnectButton()).not.toBeInTheDocument()
+    other.unmount()
+
+    // An admin has switched the store off: the paused notice stands in front,
+    // and a new credential would change nothing until it is back on.
+    const paused = renderCard({ link: { ...refused, providerOff: true }, onReconnect })
+    expect(reconnectButton()).not.toBeInTheDocument()
+    paused.unmount()
+
+    // The panel could not find the provider's form: nothing to open.
+    renderCard({ link: refused })
+    expect(reconnectButton()).not.toBeInTheDocument()
+    expect(onReconnect).not.toHaveBeenCalled()
+  })
+})
+
+describe('DocSyncBinding: what it says about itself', () => {
+  it('FE-DOCSYNC-BIND-005: a healthy binding shows its state as a dot, not as a word', () => {
+    renderCard()
+
+    expect(screen.queryByText('In sync')).not.toBeInTheDocument()
+    const dot = screen.getByTitle('In sync')
+    expect(dot).toBeInTheDocument()
+    expect(dot).toBeEmptyDOMElement()
+  })
+
+  it('FE-DOCSYNC-BIND-006: a failing binding spells the state out and appends the reason', () => {
+    renderCard({ link: { lastSyncState: 'failed', lastSyncError: 'unauthorized' } })
+
+    expect(screen.getByText('Failed')).toBeInTheDocument()
+    expect(screen.getByText('Failed · The credentials were refused.')).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-007: a failing binding without a reason code shows the state alone', () => {
+    renderCard({ link: { lastSyncState: 'failed', lastSyncError: null } })
+
+    // once as the header badge, once as the banner underneath it
+    expect(screen.getAllByText('Failed')).toHaveLength(2)
+  })
+
+  it('FE-DOCSYNC-BIND-008: a partly synced binding also gets the banner', () => {
+    renderCard({ link: { lastSyncState: 'partial', lastSyncError: 'too_large' } })
+
+    expect(screen.getByText('Partly synced · The file is larger than the provider accepts.')).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-009: a binding that never ran names its state but raises no alarm', () => {
+    renderCard({ link: { lastSyncState: 'never', lastSyncAt: null } })
+
+    expect(screen.getAllByText('Not synced yet')).toHaveLength(1)
+    expect(screen.getByText('not run yet')).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-026: a binding whose provider an admin switched off says it is paused, not what the last run said', () => {
+    // The server leaves the binding's own state as the last run wrote it, so
+    // without this the card went on reporting an old failure, or nothing.
+    renderCard({ link: { providerOff: true, lastSyncState: 'failed', lastSyncError: 'unauthorized' } })
+
+    expect(screen.getByText('Paused: an administrator has switched this provider off. Syncing resumes once it is back on.')).toBeInTheDocument()
+    expect(screen.queryByText('Failed · The credentials were refused.')).not.toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-010: a paused binding is badged, an active one is not', () => {
+    const { unmount } = renderCard({ link: { syncEnabled: false } })
+    expect(screen.getByText('Paused')).toBeInTheDocument()
+    unmount()
+
+    renderCard({ link: { syncEnabled: true } })
+    expect(screen.queryByText('Paused')).not.toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-011: the last run is shown as elapsed time once there is one', () => {
+    renderCard({ link: { lastSyncAt: new Date(Date.now() - 2 * 3600_000).toISOString() } })
+
+    expect(screen.getByText(/hours ago/)).toBeInTheDocument()
+    expect(screen.queryByText('not run yet')).not.toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-012: the folder falls back to the path, then to the scope key', () => {
+    const { unmount } = renderCard({ link: { remoteLabel: '' } })
+    expect(screen.getByText('/TREK/Lisbon')).toBeInTheDocument()
+    unmount()
+
+    renderCard({ link: { remoteLabel: '', remoteRootPath: null } })
+    expect(screen.getByText('trek-trip-3')).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-013: names the store it is handed in the header and at the far end of the flow', () => {
+    const { header } = renderCard({ providerName: 'Paperless-ngx' })
+
+    expect(within(header).getByText('Paperless-ngx')).toBeInTheDocument()
+    expect(screen.getAllByText('Paperless-ngx')).toHaveLength(2)
+    expect(screen.queryByText('paperless')).not.toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-014: the flow bar gets the holdings, and zeros when there are none', () => {
+    const { unmount } = renderCard()
+    expect(screen.getByText('3')).toBeInTheDocument()
+    expect(screen.getByText('2')).toBeInTheDocument()
+    unmount()
+
+    renderCard({ link: { holdings: undefined } })
+    expect(screen.getAllByText('0')).toHaveLength(2)
+  })
+})
+
+describe('DocSyncBinding: the settings section', () => {
+  it('FE-DOCSYNC-BIND-015: the settings stay folded away until they are opened', () => {
+    renderCard()
+
+    const toggle = screen.getByRole('button', { name: 'Settings' })
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByText('Sync automatically')).not.toBeInTheDocument()
+    expect(screen.queryByText('When a document is deleted')).not.toBeInTheDocument()
+
+    fireEvent.click(toggle)
+
+    expect(toggle).toHaveAttribute('aria-expanded', 'true')
+    expect(screen.getByText('Sync automatically')).toBeInTheDocument()
+    expect(screen.getByText('When a document is deleted')).toBeInTheDocument()
+
+    fireEvent.click(toggle)
+    expect(screen.queryByText('Sync automatically')).not.toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-016: a member gets no settings section and no disconnect button', () => {
+    renderCard({ canManage: false })
+
+    expect(screen.queryByRole('button', { name: 'Settings' })).not.toBeInTheDocument()
+    expect(screen.queryByText('Sync automatically')).not.toBeInTheDocument()
+    expect(screen.queryByText('When a document is deleted')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Disconnect' })).not.toBeInTheDocument()
+    // a member may still trigger a run
+    expect(screen.getByRole('button', { name: 'Sync now' })).toBeEnabled()
+  })
+
+  it('FE-DOCSYNC-BIND-017: turning "sync automatically" off patches the link', () => {
+    renderCard()
+    openSettings()
+
+    fireEvent.click(within(rowFor('Sync automatically')).getByRole('button'))
+
+    expect(updateLink).toHaveBeenCalledWith(4, { syncEnabled: false })
+  })
+
+  it('FE-DOCSYNC-BIND-018: turning it back on patches the other way', () => {
+    renderCard({ link: { syncEnabled: false } })
+    openSettings()
+
+    const toggle = within(rowFor('Sync automatically')).getByRole('button')
+    expect(toggle).toHaveAttribute('aria-pressed', 'false')
+    fireEvent.click(toggle)
+
+    expect(updateLink).toHaveBeenCalledWith(4, { syncEnabled: true })
+  })
+
+  it('FE-DOCSYNC-BIND-019: choosing another delete policy patches the link', () => {
+    renderCard()
+    openSettings()
+
+    const trigger = within(rowFor('When a document is deleted')).getByRole('button')
+    expect(trigger).toHaveTextContent('Keep both copies')
+
+    fireEvent.click(trigger)
+    fireEvent.click(screen.getByRole('button', { name: 'Move to recycle bin' }))
+
+    expect(updateLink).toHaveBeenCalledWith(4, { deletePolicy: 'trash' })
+  })
+})
+
+describe('DocSyncBinding: the webhook URL', () => {
+  const realClipboard = navigator.clipboard
+
+  afterEach(() => {
+    Object.defineProperty(navigator, 'clipboard', { value: realClipboard, configurable: true, writable: true })
+  })
+
+  const stubClipboard = (writeText: (text: string) => Promise<void>) => {
+    Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true, writable: true })
+  }
+
+  it('FE-DOCSYNC-BIND-020: a binding without a webhook shows no webhook section', () => {
+    renderCard({ link: { webhookUrl: null } })
+    openSettings()
+
+    expect(screen.queryByText('Instant updates')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Copy' })).not.toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-021: a binding with a webhook shows the URL for pasting', () => {
+    renderCard({ link: { webhookUrl: WEBHOOK } })
+    openSettings()
+
+    expect(screen.getByText('Instant updates')).toBeInTheDocument()
+    expect(screen.getByText(WEBHOOK)).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-022: copying the webhook puts it on the clipboard and confirms', async () => {
+    const writeText = vi.fn(async (_text: string) => {})
+    stubClipboard(writeText)
+    renderCard({ link: { webhookUrl: WEBHOOK } })
+    openSettings()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Copy' }))
+
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith(WEBHOOK))
+    expect(await screen.findByRole('button', { name: 'Copied' })).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-BIND-023: a blocked clipboard leaves the URL on screen and the button unchanged', async () => {
+    const writeText = vi.fn(async (_text: string) => { throw new Error('not allowed') })
+    stubClipboard(writeText)
+    renderCard({ link: { webhookUrl: WEBHOOK } })
+    openSettings()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Copy' }))
+
+    await waitFor(() => expect(writeText).toHaveBeenCalled())
+    expect(screen.queryByRole('button', { name: 'Copied' })).not.toBeInTheDocument()
+    expect(screen.getByText(WEBHOOK)).toBeInTheDocument()
+  })
+})
+
+describe('DocSyncBinding: the direction lanes', () => {
+  it('FE-DOCSYNC-BIND-024: switching a lane off patches the direction', () => {
+    renderCard()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Out to the store' }))
+
+    expect(updateLink).toHaveBeenCalledWith(4, { direction: 'pull' })
+  })
+
+  it('FE-DOCSYNC-BIND-025: a member cannot change the direction', () => {
+    renderCard({ canManage: false })
+
+    const lane = screen.getByRole('button', { name: 'Out to the store' })
+    expect(lane).toBeDisabled()
+    fireEvent.click(lane)
+    expect(updateLink).not.toHaveBeenCalled()
+  })
+})

client/src/components/Files/docsync/DocSyncBinding.tsx

@@ -0,0 +1,258 @@
+import { useState } from 'react'
+import {
+  AlertTriangle, Check, ChevronDown, Clock, Copy, FolderOpen, Link2Off, RefreshCw,
+} from 'lucide-react'
+import ConfirmDialog from '../../shared/ConfirmDialog'
+import CustomSelect from '../../shared/CustomSelect'
+import ToggleSwitch from '../../Settings/ToggleSwitch'
+import Tooltip from '../../shared/Tooltip'
+import { useTranslation } from '../../../i18n/TranslationContext'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import DocSyncFlow, { type SyncDirection } from './DocSyncFlow'
+import { Badge, CONFLICT_POLICIES, conflictPolicyKey, LastRun, StateBadge } from './DocSyncBits'
+import { bindingNotice, needsReauth, type DocSyncLink, type useDocSync } from './useDocSync'
+
+/**
+ * One binding: where this trip's documents live, which way they move, and what
+ * happened last time.
+ *
+ * The flow bar carries the direction because that is the one thing this feature
+ * is about. Everything a person sets once and forgets (the delete rule, the
+ * webhook URL) is folded away behind "Settings" so the card stays a status
+ * card rather than a form.
+ */
+export default function DocSyncBinding({
+  link,
+  providerName,
+  sync,
+  canManage,
+  onReconnect,
+}: {
+  link: DocSyncLink
+  providerName: string
+  sync: ReturnType<typeof useDocSync>
+  canManage: boolean
+  /**
+   * Opens the credential form for this binding's store. Only the panel can,
+   * because the form needs the provider's field list, which the card does
+   * not carry; left out, a refused credential is reported but not curable.
+   */
+  onReconnect?: () => void
+}) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [confirmUnlink, setConfirmUnlink] = useState(false)
+  const Icon = DOCUMENT_PROVIDER_ICONS[link.providerId]
+  const busy = sync.busy === `sync-${link.id}`
+  const notice = bindingNotice(link, t)
+  // Not while the provider is switched off: the paused notice stands in front
+  // of the refusal then, and a new credential would change nothing until an
+  // admin turns the provider back on.
+  const reconnect = canManage && onReconnect && !link.providerOff && needsReauth(link) ? onReconnect : null
+
+  const copyWebhook = async () => {
+    if (!link.webhookUrl) return
+    try {
+      await navigator.clipboard.writeText(link.webhookUrl)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1600)
+    } catch {
+      // Clipboard is blocked outside a secure context; the URL is selectable.
+    }
+  }
+
+  return (
+    <article className="overflow-hidden rounded-2xl border border-edge bg-surface shadow-card">
+      <header className="flex flex-wrap items-start gap-x-3 gap-y-3 px-4 py-3.5">
+        <span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl border border-edge bg-surface-secondary">
+          {Icon ? <Icon className="h-5 w-5 text-content" /> : null}
+        </span>
+
+        <span className="min-w-0 flex-1">
+          <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
+            <span className="truncate text-subtitle font-semibold text-content">
+              {providerName}
+            </span>
+            {/* A healthy binding needs no word for it: the dot is the whole
+                message, and the states that do need words get them below. */}
+            <StateBadge state={link.lastSyncState} compact={link.lastSyncState === 'ok'} />
+            {!link.syncEnabled && <Badge tone="neutral">{t('docsync.binding.autoOff')}</Badge>}
+          </span>
+
+          {/* Where and when, as two facts rather than a sentence. They are what
+              a member checks before asking why a file has not turned up. */}
+          <span className="mt-1.5 flex flex-wrap items-center gap-1.5">
+            <Badge tone="neutral" icon={<FolderOpen size={12} />} title={link.remoteRootPath || undefined}>
+              <span className="max-w-[12rem] truncate">
+                {link.remoteLabel || link.remoteRootPath || link.scopeKey}
+              </span>
+            </Badge>
+            <Badge tone="neutral" icon={<Clock size={12} />}>
+              <LastRun at={link.lastSyncAt} />
+            </Badge>
+          </span>
+        </span>
+
+        {/* Both controls are h-9 so the square one cannot sit a pixel off the
+            other: the two together read as one segmented control. */}
+        <span className="flex shrink-0 items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => void sync.syncNow(link.id)}
+            disabled={busy}
+            className="flex h-9 items-center gap-2 rounded-lg border border-edge bg-surface px-3 text-caption font-medium text-content-secondary transition-colors hover:bg-surface-hover disabled:opacity-60"
+          >
+            <RefreshCw size={14} className={busy ? 'animate-spin' : ''} />
+            {/* Taken out of the layout below sm rather than out of the document:
+                `hidden` left a screen reader announcing a bare "button" there,
+                and an aria-label would have frozen the name while the visible
+                text still changes to "Syncing". */}
+            <span className="sr-only sm:not-sr-only">{busy ? t('docsync.syncing') : t('docsync.syncNow')}</span>
+          </button>
+          {/* Asked first, as the phone does: the button sits a hand's width
+              from "Sync now", and a binding cannot be put back. Rebinding the
+              same folder starts from nothing and copies both sides over
+              again. */}
+          {canManage && (
+            <Tooltip label={t('docsync.unlink')}>
+              <button
+                type="button"
+                onClick={() => setConfirmUnlink(true)}
+                className="grid h-9 w-9 place-items-center rounded-lg border border-edge bg-surface text-content-muted transition-colors hover:bg-danger-soft hover:text-danger"
+                aria-label={t('docsync.unlink')}
+              >
+                <Link2Off size={14} />
+              </button>
+            </Tooltip>
+          )}
+        </span>
+      </header>
+
+      {notice && (
+        <p className="mx-4 mb-3 flex items-start gap-2 rounded-lg bg-warning-soft px-3 py-2 text-caption text-warning">
+          <AlertTriangle size={13} className="mt-px shrink-0" />
+          <span className="min-w-0 flex-1">{notice}</span>
+          {/* The one state a person can act on from here. Without this the
+              only way past a rotated token was the API: the sidebar opens the
+              form for a store that has no connection yet, and this one has. */}
+          {reconnect && (
+            <button
+              type="button"
+              onClick={reconnect}
+              className="shrink-0 rounded-lg border border-edge bg-surface px-2.5 py-1 text-caption font-medium text-content transition-colors hover:bg-surface-hover"
+            >
+              {t('docsync.binding.reconnect')}
+            </button>
+          )}
+        </p>
+      )}
+
+      <ConfirmDialog
+        isOpen={confirmUnlink}
+        onClose={() => setConfirmUnlink(false)}
+        onConfirm={() => void sync.removeLink(link.id)}
+        title={t('docsync.unlink')}
+        message={t('docsync.confirmUnlink')}
+        confirmLabel={t('docsync.unlink')}
+      />
+
+      <div className="px-4 pb-3">
+        <DocSyncFlow
+          direction={link.direction}
+          providerId={link.providerId}
+          providerName={providerName}
+          running={busy}
+          holdings={link.holdings ?? { inTrek: 0, atProvider: 0, paired: 0, missing: 0 }}
+          disabled={!canManage}
+          onChange={(next: SyncDirection) => void sync.updateLink(link.id, { direction: next })}
+        />
+      </div>
+
+      {canManage && (
+        <>
+          <button
+            type="button"
+            onClick={() => setOpen(!open)}
+            aria-expanded={open}
+            className="flex w-full items-center gap-1.5 border-t border-edge-faint px-4 py-2.5 text-left text-caption text-content-muted transition-colors hover:bg-surface-hover"
+          >
+            <ChevronDown size={13} className={`transition-transform ${open ? 'rotate-180' : ''}`} />
+            {t('docsync.binding.settings')}
+          </button>
+
+          {open && (
+            <div className="space-y-3 border-t border-edge-faint bg-surface-secondary px-4 py-3">
+              <Row label={t('docsync.deletePolicy')} hint={t('docsync.binding.deleteHint')}>
+                <CustomSelect
+                  size="sm"
+                  value={link.deletePolicy}
+                  onChange={v => void sync.updateLink(link.id, { deletePolicy: String(v) })}
+                  options={[
+                    { value: 'unlink', label: t('docsync.deleteUnlink') },
+                    { value: 'trash', label: t('docsync.deleteTrash') },
+                  ]}
+                />
+              </Row>
+
+              <Row label={t('docsync.conflictPolicy')} hint={t('docsync.binding.conflictHint')}>
+                <CustomSelect
+                  size="sm"
+                  value={link.conflictPolicy}
+                  onChange={v => void sync.updateLink(link.id, { conflictPolicy: String(v) })}
+                  options={CONFLICT_POLICIES.map(p => ({ value: p, label: t(conflictPolicyKey(p)) }))}
+                />
+              </Row>
+
+              <Row label={t('docsync.syncEnabled')} hint={t('docsync.binding.autoHint')}>
+                <span className="flex justify-end">
+                  <ToggleSwitch
+                    on={link.syncEnabled}
+                    onToggle={() => void sync.updateLink(link.id, { syncEnabled: !link.syncEnabled })}
+                  />
+                </span>
+              </Row>
+
+              {/* Only where TREK could not subscribe itself. Papra's webhook CRUD
+                  is closed to API keys and Nextcloud's needs admin rights, so the
+                  person pastes this in by hand; polling carries it either way. */}
+              {link.webhookUrl && (
+                <div>
+                  {/* Same tier as the two rows above it: this is the third
+                      setting, not a footnote to the second. */}
+                  <span className="block text-body text-content">{t('docsync.binding.webhookTitle')}</span>
+                  <p className="mt-1 text-caption text-content-muted">{t('docsync.webhookHint')}</p>
+                  <div className="mt-1.5 flex items-stretch gap-1.5">
+                    <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap rounded-lg border border-edge bg-surface px-2.5 py-1.5 text-caption text-content-secondary">
+                      {link.webhookUrl}
+                    </code>
+                    <button
+                      type="button"
+                      onClick={() => void copyWebhook()}
+                      className="flex shrink-0 items-center gap-1.5 rounded-lg border border-edge px-2.5 text-caption text-content-secondary transition-colors hover:bg-surface-hover"
+                    >
+                      {copied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
+                      {copied ? t('docsync.binding.copied') : t('docsync.binding.copy')}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </article>
+  )
+}
+
+function Row({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <span className="min-w-0">
+        <span className="block text-body text-content">{label}</span>
+        {hint && <span className="mt-0.5 block text-caption text-content-muted">{hint}</span>}
+      </span>
+      <span className="w-56 shrink-0">{children}</span>
+    </div>
+  )
+}

client/src/components/Files/docsync/DocSyncBits.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from 'react'
+import { useTranslation } from '../../../i18n/TranslationContext'
+import { relativeTime } from '../../../utils/relativeTime'
+
+/**
+ * The small shared pieces of the document-sync dialog.
+ *
+ * They live together because the panel, the store list and the binding card all
+ * label the same five sync states, and three hand-written copies of that mapping
+ * is how one of them ends up saying something different from the other two.
+ */
+
+export type Tone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger'
+
+const TONES: Record<Tone, string> = {
+  neutral: 'bg-surface-secondary text-content-secondary',
+  accent: 'bg-accent-subtle text-accent-on',
+  success: 'bg-success-soft text-success',
+  warning: 'bg-warning-soft text-warning',
+  danger: 'bg-danger-soft text-danger',
+}
+
+/** A count or a short label, on a tinted pill. */
+export function Badge({
+  tone = 'neutral',
+  icon,
+  children,
+  title,
+}: {
+  tone?: Tone
+  icon?: ReactNode
+  children: ReactNode
+  title?: string
+}) {
+  return (
+    <span
+      title={title}
+      className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2 py-0.5 text-caption font-medium ${TONES[tone]}`}
+    >
+      {icon}
+      {children}
+    </span>
+  )
+}
+
+/** The tone each sync state carries, in one place. */
+function toneForState(state: string): Tone {
+  if (state === 'ok') return 'success'
+  if (state === 'partial') return 'warning'
+  if (state === 'never') return 'neutral'
+  return 'danger'
+}
+
+/**
+ * A binding's state as a dot plus its word.
+ *
+ * A dot alone is a colour puzzle and a word alone is easy to skim past; the two
+ * together survive both colour blindness and a glance.
+ */
+export function StateBadge({ state, compact }: { state: string; compact?: boolean }) {
+  const { t } = useTranslation()
+  const tone = toneForState(state)
+  const dot =
+    tone === 'success' ? 'bg-success'
+    : tone === 'warning' ? 'bg-warning'
+    : tone === 'danger' ? 'bg-danger'
+    : 'bg-content-faint'
+
+  if (compact) return <span className={`h-2 w-2 shrink-0 rounded-full ${dot}`} title={t(`docsync.linkState.${state}`)} />
+
+  return (
+    <Badge tone={tone} icon={<span className={`h-1.5 w-1.5 rounded-full ${dot}`} />}>
+      {t(`docsync.linkState.${state}`)}
+    </Badge>
+  )
+}
+
+/** "2h ago", or "never" when a binding has not run yet. */
+export function LastRun({ at }: { at: string | null }) {
+  const { t, language, locale } = useTranslation()
+  if (!at) return <span className="text-content-faint">{t('docsync.binding.neverRun')}</span>
+  const ms = Date.parse(at)
+  if (Number.isNaN(ms)) return null
+  return <span title={new Date(ms).toLocaleString(locale)}>{relativeTime(ms, language)}</span>
+}
+
+/**
+ * The three answers to "both sides changed", in the order they are offered.
+ *
+ * Shared because the phone offers them as one cycling button and the desktop as
+ * a dropdown: two lists would drift, and a binding would then say one thing on
+ * a laptop and another on a phone.
+ */
+export const CONFLICT_POLICIES = ['manual', 'trek_wins', 'provider_wins'] as const
+
+export type ConflictPolicy = (typeof CONFLICT_POLICIES)[number]
+
+/** The next answer in that ring, for the phone's single button. */
+export function nextConflictPolicy(current: string): ConflictPolicy {
+  const at = (CONFLICT_POLICIES as readonly string[]).indexOf(current)
+  return CONFLICT_POLICIES[(at + 1) % CONFLICT_POLICIES.length]
+}
+
+/** The label key for one answer. */
+export function conflictPolicyKey(policy: string): string {
+  return `docsync.onConflict.${(CONFLICT_POLICIES as readonly string[]).includes(policy) ? policy : 'manual'}`
+}

client/src/components/Files/docsync/DocSyncConnectModal.test.tsx

@@ -0,0 +1,494 @@
+// FE-DOCSYNC-CONNECT-001 to FE-DOCSYNC-CONNECT-027
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import en from '@trek/shared/i18n/en'
+import { render, screen, fireEvent, waitFor, act, within } from '../../../../tests/helpers/render'
+import type { DocSyncConnection, DocSyncProvider } from './useDocSync'
+
+/** What the app really shows: `en` is bundled, so `t()` resolves for real here. */
+const tx = (key: string): string => (en as unknown as Record<string, string>)[key] ?? key
+
+const providers = vi.fn(async (_tripId: number | string): Promise<unknown> => [])
+const listConnections = vi.fn(async (_tripId: number | string): Promise<unknown> => [])
+const listLinks = vi.fn(async (_tripId: number | string): Promise<unknown> => [])
+const status = vi.fn(async (_tripId: number | string): Promise<unknown> => ({ items: {}, links: [] }))
+const saveConnection = vi.fn(async (_tripId: number | string, _data: unknown): Promise<unknown> => ({ id: 1 }))
+const testConnection = vi.fn(async (_tripId: number | string, _data: unknown): Promise<unknown> => ({ connected: true }))
+
+vi.mock('../../../api/client', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../api/client')>()
+  return {
+    ...actual,
+    docsyncApi: {
+      ...actual.docsyncApi,
+      providers: (tripId: number | string) => providers(tripId),
+      status: (tripId: number | string) => status(tripId),
+      listConnections: (tripId: number | string) => listConnections(tripId),
+      listLinks: (tripId: number | string) => listLinks(tripId),
+      saveConnection: (tripId: number | string, data: unknown) => saveConnection(tripId, data),
+      testConnection: (tripId: number | string, data: unknown) => testConnection(tripId, data),
+    },
+  }
+})
+
+import DocSyncConnectModal from './DocSyncConnectModal'
+import { useDocSync } from './useDocSync'
+
+const TRIP_ID = 42
+
+const nextcloud: DocSyncProvider = {
+  id: 'nextcloud',
+  name: 'Nextcloud',
+  description: 'Two-way document sync with a Nextcloud folder over WebDAV',
+  icon: 'Cloud',
+  available: true,
+  fields: [
+    { field_key: 'base_url', label: 'providerUrl', input_type: 'url', placeholder: 'https://cloud.example.com', hint: null, required: true, secret: false },
+    { field_key: 'login_name', label: 'providerUsername', input_type: 'text', placeholder: 'username', hint: 'hintNextcloudLogin', required: true, secret: false },
+    { field_key: 'app_password', label: 'providerAppPassword', input_type: 'password', placeholder: 'app password', hint: 'hintNextcloudAppPassword', required: true, secret: true },
+    { field_key: 'base_path', label: 'providerBasePath', input_type: 'text', placeholder: '/TREK', hint: 'hintBasePath', required: false, secret: false },
+    { field_key: 'allow_insecure_tls', label: 'allowInsecureTls', input_type: 'checkbox', placeholder: null, hint: null, required: false, secret: false },
+  ],
+}
+
+/** Synology is the one provider with a secret that is NOT a password box (the OTP). */
+const synology: DocSyncProvider = {
+  id: 'synologydrive',
+  name: 'Synology Drive',
+  description: 'Two-way document sync with a folder on a Synology NAS',
+  icon: 'HardDrive',
+  available: true,
+  fields: [
+    { field_key: 'base_url', label: 'providerUrl', input_type: 'url', placeholder: 'https://nas.example.com:5001', hint: 'hintSynologyUrl', required: true, secret: false },
+    { field_key: 'password', label: 'providerPassword', input_type: 'password', placeholder: 'password', hint: null, required: true, secret: true },
+    { field_key: 'otp_code', label: 'providerOTP', input_type: 'text', placeholder: '123456', hint: 'hintSynologyOtp', required: false, secret: true },
+    { field_key: 'allow_insecure_tls', label: 'allowInsecureTls', input_type: 'checkbox', placeholder: null, hint: null, required: false, secret: false },
+  ],
+}
+
+const connection = (overrides: Partial<DocSyncConnection> = {}): DocSyncConnection => ({
+  id: 9,
+  providerId: 'nextcloud',
+  baseUrl: 'https://cloud.example.com',
+  settings: { login_name: 'maurice', base_path: '/Archive/TREK' },
+  secrets: { app_password: 'stored' },
+  allowInsecureTls: false,
+  lastProbeState: 'ok',
+  lastProbeError: null,
+  ...overrides,
+})
+
+function Harness({
+  provider,
+  onClose,
+  onConnected,
+  waitForConnection,
+}: {
+  provider: DocSyncProvider
+  onClose: () => void
+  onConnected: (providerId: string) => void
+  /**
+   * Hold the dialog back until the stored connection is in hand, the way the
+   * panel does: it only offers "connect" once it knows what is already there.
+   */
+  waitForConnection?: boolean
+}) {
+  const sync = useDocSync(TRIP_ID, true)
+  if (waitForConnection && !sync.connectionFor(provider.id)) return null
+  return <DocSyncConnectModal provider={provider} sync={sync} onClose={onClose} onConnected={onConnected} />
+}
+
+/** Let the hook's initial load land before anything is asserted. */
+async function flush() {
+  await act(async () => {
+    await new Promise(resolve => setTimeout(resolve, 0))
+  })
+}
+
+async function open(provider: DocSyncProvider = nextcloud, waitForConnection = false) {
+  const onClose = vi.fn()
+  const onConnected = vi.fn()
+  const utils = render(
+    <Harness provider={provider} onClose={onClose} onConnected={onConnected} waitForConnection={waitForConnection} />,
+  )
+  await flush()
+  return { ...utils, onClose, onConnected }
+}
+
+const testButton = () => screen.getByRole('button', { name: tx('docsync.test') })
+const connectButton = () => screen.getByRole('button', { name: tx('docsync.connect.submit') })
+
+function fillNextcloud() {
+  fireEvent.change(screen.getByPlaceholderText('https://cloud.example.com'), { target: { value: 'https://cloud.example.com' } })
+  fireEvent.change(screen.getByPlaceholderText('username'), { target: { value: 'maurice' } })
+  fireEvent.change(screen.getByPlaceholderText('app password'), { target: { value: 'app-pw' } })
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  providers.mockResolvedValue([])
+  listConnections.mockResolvedValue([])
+  listLinks.mockResolvedValue([])
+  status.mockResolvedValue({ items: {}, links: [] })
+  saveConnection.mockResolvedValue({ id: 1 })
+  testConnection.mockResolvedValue({ connected: true })
+})
+
+describe('DocSyncConnectModal form', () => {
+  it('FE-DOCSYNC-CONNECT-001: renders one labelled box per provider field and leaves the TLS field to the switch', async () => {
+    const { baseElement } = await open()
+
+    expect(screen.getByText(tx('docsync.providerUrl'))).toBeInTheDocument()
+    expect(screen.getByText(tx('docsync.providerUsername'))).toBeInTheDocument()
+    expect(screen.getByText(tx('docsync.providerAppPassword'))).toBeInTheDocument()
+    expect(screen.getByText(tx('docsync.providerBasePath'))).toBeInTheDocument()
+    // allow_insecure_tls is a switch, not a fifth text box
+    expect(baseElement.querySelectorAll('input')).toHaveLength(4)
+    expect(screen.getByText(tx('docsync.allowInsecureTls'))).toBeInTheDocument()
+    expect(screen.getByRole('button', { pressed: false })).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-CONNECT-002: a password field is masked and the other boxes are not', async () => {
+    await open()
+
+    expect(screen.getByPlaceholderText('app password')).toHaveAttribute('type', 'password')
+    expect(screen.getByPlaceholderText('https://cloud.example.com')).toHaveAttribute('type', 'text')
+    expect(screen.getByPlaceholderText('username')).toHaveAttribute('type', 'text')
+    expect(screen.getByPlaceholderText('/TREK')).toHaveAttribute('type', 'text')
+  })
+
+  it('FE-DOCSYNC-CONNECT-003: a secret the provider declares as plain text stays readable', async () => {
+    await open(synology)
+
+    expect(screen.getByPlaceholderText('password')).toHaveAttribute('type', 'password')
+    expect(screen.getByPlaceholderText('123456')).toHaveAttribute('type', 'text')
+  })
+
+  it('FE-DOCSYNC-CONNECT-004: only the optional fields carry the optional mark', async () => {
+    await open()
+    const optional = tx('docsync.connect.optional')
+
+    const basePath = screen.getByPlaceholderText('/TREK').closest('label') as HTMLElement
+    expect(within(basePath).getByText(optional)).toBeInTheDocument()
+
+    for (const placeholder of ['https://cloud.example.com', 'username', 'app password']) {
+      const field = screen.getByPlaceholderText(placeholder).closest('label') as HTMLElement
+      expect(within(field).queryByText(optional)).not.toBeInTheDocument()
+    }
+    expect(screen.getAllByText(optional)).toHaveLength(1)
+  })
+
+  it('FE-DOCSYNC-CONNECT-005: a field hint is translated, and a field without one gets no line', async () => {
+    await open()
+
+    const username = screen.getByPlaceholderText('username').closest('label') as HTMLElement
+    expect(within(username).getByText(tx('docsync.hintNextcloudLogin'))).toBeInTheDocument()
+
+    const baseUrl = screen.getByPlaceholderText('https://cloud.example.com').closest('label') as HTMLElement
+    expect(baseUrl.textContent?.trim()).toBe(tx('docsync.providerUrl'))
+  })
+
+  it('FE-DOCSYNC-CONNECT-006: the dialog is headed by the provider and explains what it will do', async () => {
+    await open()
+
+    expect(screen.getByRole('heading', { name: nextcloud.name })).toBeInTheDocument()
+    expect(screen.getByText(tx('docsync.connect.about.nextcloud'))).toBeInTheDocument()
+    expect(screen.getByText(tx('docsync.connect.insecureHint'))).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-CONNECT-007: escape closes the dialog without saving', async () => {
+    const { onClose, onConnected } = await open()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(onClose).toHaveBeenCalled()
+    expect(onConnected).not.toHaveBeenCalled()
+    expect(saveConnection).not.toHaveBeenCalled()
+  })
+})
+
+describe('DocSyncConnectModal required fields', () => {
+  it('FE-DOCSYNC-CONNECT-008: nothing can be saved or probed while a required field is empty', async () => {
+    await open()
+
+    expect(connectButton()).toBeDisabled()
+    expect(testButton()).toBeDisabled()
+
+    fireEvent.click(connectButton())
+    fireEvent.click(testButton())
+
+    expect(saveConnection).not.toHaveBeenCalled()
+    expect(testConnection).not.toHaveBeenCalled()
+  })
+
+  it('FE-DOCSYNC-CONNECT-009: a missing password alone is enough to refuse the save', async () => {
+    await open()
+
+    fireEvent.change(screen.getByPlaceholderText('https://cloud.example.com'), { target: { value: 'https://cloud.example.com' } })
+    fireEvent.change(screen.getByPlaceholderText('username'), { target: { value: 'maurice' } })
+
+    expect(connectButton()).toBeDisabled()
+
+    fireEvent.change(screen.getByPlaceholderText('app password'), { target: { value: 'app-pw' } })
+
+    expect(connectButton()).toBeEnabled()
+  })
+
+  it('FE-DOCSYNC-CONNECT-010: an address of nothing but spaces does not count as filled', async () => {
+    await open()
+
+    fillNextcloud()
+    expect(connectButton()).toBeEnabled()
+
+    fireEvent.change(screen.getByPlaceholderText('https://cloud.example.com'), { target: { value: '   ' } })
+
+    expect(connectButton()).toBeDisabled()
+    expect(testButton()).toBeDisabled()
+  })
+
+  it('FE-DOCSYNC-CONNECT-011: an empty optional field does not hold the save back', async () => {
+    const { onConnected } = await open()
+
+    fillNextcloud()
+    fireEvent.click(connectButton())
+
+    await waitFor(() => expect(onConnected).toHaveBeenCalled())
+    expect(saveConnection).toHaveBeenCalledWith(TRIP_ID, {
+      providerId: 'nextcloud',
+      baseUrl: 'https://cloud.example.com',
+      credentials: { base_url: 'https://cloud.example.com', login_name: 'maurice', app_password: 'app-pw' },
+      allowInsecureTls: false,
+    })
+  })
+})
+
+describe('DocSyncConnectModal probe verdict', () => {
+  it('FE-DOCSYNC-CONNECT-012: the probe carries the typed address, credentials and TLS choice', async () => {
+    await open()
+
+    fillNextcloud()
+    fireEvent.change(screen.getByPlaceholderText('/TREK'), { target: { value: '/Archive' } })
+    fireEvent.click(testButton())
+
+    await waitFor(() => expect(testConnection).toHaveBeenCalledWith(TRIP_ID, {
+      providerId: 'nextcloud',
+      baseUrl: 'https://cloud.example.com',
+      credentials: {
+        base_url: 'https://cloud.example.com',
+        login_name: 'maurice',
+        app_password: 'app-pw',
+        base_path: '/Archive',
+      },
+      allowInsecureTls: false,
+    }))
+    expect(saveConnection).not.toHaveBeenCalled()
+  })
+
+  it('FE-DOCSYNC-CONNECT-013: a reachable provider names the account it signed in as', async () => {
+    testConnection.mockResolvedValueOnce({ connected: true, account: 'maurice' })
+    await open()
+
+    fillNextcloud()
+    fireEvent.click(testButton())
+
+    const line = tx('docsync.connect.okAs').replace('{account}', 'maurice')
+    expect(await screen.findByText(line)).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-CONNECT-014: a reachable provider without an account just reports the connection', async () => {
+    testConnection.mockResolvedValueOnce({ connected: true })
+    await open()
+
+    fillNextcloud()
+    fireEvent.click(testButton())
+
+    expect(await screen.findByText(tx('docsync.connected'))).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-CONNECT-015: a refused credential shows the translated reason', async () => {
+    testConnection.mockResolvedValueOnce({ connected: false, error: 'unauthorized' })
+    await open()
+
+    fillNextcloud()
+    fireEvent.click(testButton())
+
+    const line = await screen.findByText(tx('docsync.error.unauthorized'))
+    expect(line).toBeInTheDocument()
+    expect(screen.queryByText(tx('docsync.connected'))).not.toBeInTheDocument()
+    expect(line.parentElement?.querySelector('svg')?.getAttribute('class')).not.toMatch(/shield/)
+  })
+
+  it('FE-DOCSYNC-CONNECT-016: an address TREK itself blocked is marked with the shield, not the warning', async () => {
+    testConnection.mockResolvedValueOnce({ connected: false, error: 'ssrf_blocked' })
+    await open()
+
+    fillNextcloud()
+    fireEvent.click(testButton())
+
+    const line = await screen.findByText(tx('docsync.error.ssrf_blocked'))
+    expect(line.parentElement?.querySelector('svg')?.getAttribute('class')).toMatch(/shield/)
+  })
+
+  it('FE-DOCSYNC-CONNECT-017: a failure with no reason falls back to the unknown message', async () => {
+    testConnection.mockResolvedValueOnce({ connected: false })
+    await open()
+
+    fillNextcloud()
+    fireEvent.click(testButton())
+
+    expect(await screen.findByText(tx('docsync.error.unknown'))).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-CONNECT-018: a request that throws still lands as a verdict rather than an empty footer', async () => {
+    testConnection.mockRejectedValueOnce({ response: { data: { error: 'timeout' } } })
+    await open()
+
+    fillNextcloud()
+    fireEvent.click(testButton())
+
+    expect(await screen.findByText(tx('docsync.error.timeout'))).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-CONNECT-019: while the probe runs the dialog says so and the probe button is locked', async () => {
+    let settle: (value: unknown) => void = () => {}
+    testConnection.mockImplementationOnce(() => new Promise(resolve => { settle = resolve }))
+    await open()
+
+    fillNextcloud()
+    fireEvent.click(testButton())
+
+    expect(screen.getByText(tx('docsync.connect.testing'))).toBeInTheDocument()
+    expect(testButton()).toBeDisabled()
+
+    await act(async () => {
+      settle({ connected: true })
+      await new Promise(resolve => setTimeout(resolve, 0))
+    })
+
+    expect(screen.queryByText(tx('docsync.connect.testing'))).not.toBeInTheDocument()
+    expect(screen.getByText(tx('docsync.connected'))).toBeInTheDocument()
+    expect(testButton()).toBeEnabled()
+  })
+})
+
+describe('DocSyncConnectModal saving', () => {
+  it('FE-DOCSYNC-CONNECT-020: a successful save reports the connected provider upward', async () => {
+    const { onConnected, onClose } = await open()
+
+    fillNextcloud()
+    fireEvent.click(connectButton())
+
+    await waitFor(() => expect(onConnected).toHaveBeenCalledWith('nextcloud'))
+    expect(onConnected).toHaveBeenCalledTimes(1)
+    expect(onClose).not.toHaveBeenCalled()
+    // the freshly stored connection is read back, not assumed
+    expect(listConnections).toHaveBeenCalledTimes(2)
+  })
+
+  it('FE-DOCSYNC-CONNECT-021: a rejected save reports nothing upward and leaves the form standing', async () => {
+    saveConnection.mockRejectedValueOnce({ response: { data: { error: 'unauthorized' } } })
+    const { onConnected, onClose } = await open()
+
+    fillNextcloud()
+    fireEvent.click(connectButton())
+
+    await waitFor(() => expect(saveConnection).toHaveBeenCalled())
+    expect(onConnected).not.toHaveBeenCalled()
+    expect(onClose).not.toHaveBeenCalled()
+    expect(screen.getByPlaceholderText('app password')).toHaveValue('app-pw')
+  })
+
+  it('FE-DOCSYNC-CONNECT-022: the save button is locked while the write is in flight', async () => {
+    let settle: (value: unknown) => void = () => {}
+    saveConnection.mockImplementationOnce(() => new Promise(resolve => { settle = resolve }))
+    const { onConnected } = await open()
+
+    fillNextcloud()
+    fireEvent.click(connectButton())
+
+    expect(connectButton()).toBeDisabled()
+
+    await act(async () => {
+      settle({ id: 1 })
+      await new Promise(resolve => setTimeout(resolve, 0))
+    })
+
+    expect(onConnected).toHaveBeenCalledWith('nextcloud')
+  })
+
+  it('FE-DOCSYNC-CONNECT-023: the self-signed switch starts off and travels with the request', async () => {
+    await open()
+
+    fillNextcloud()
+    fireEvent.click(screen.getByRole('button', { pressed: false }))
+
+    expect(screen.getByRole('button', { pressed: true })).toBeInTheDocument()
+
+    fireEvent.click(connectButton())
+
+    await waitFor(() => expect(saveConnection).toHaveBeenCalledWith(TRIP_ID, expect.objectContaining({ allowInsecureTls: true })))
+  })
+})
+
+describe('DocSyncConnectModal with a connection already stored', () => {
+  it('FE-DOCSYNC-CONNECT-024: the stored settings come back, the saved secret is only hinted at, and it saves untouched', async () => {
+    listConnections.mockResolvedValue([connection({ settings: { login_name: 'maurice', base_path: '/Archive/TREK', app_password: 'never-echo-me' } })])
+    const { onConnected } = await open(nextcloud, true)
+
+    expect(await screen.findByPlaceholderText('••••••••')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('username')).toHaveValue('maurice')
+    expect(screen.getByPlaceholderText('/TREK')).toHaveValue('/Archive/TREK')
+    // a secret is never echoed back into the box, whatever the settings blob holds
+    expect(screen.getByPlaceholderText('••••••••')).toHaveValue('')
+
+    // the stored secret counts as filled, so nothing has to be retyped
+    expect(connectButton()).toBeEnabled()
+    fireEvent.click(connectButton())
+
+    await waitFor(() => expect(onConnected).toHaveBeenCalledWith('nextcloud'))
+    expect(saveConnection).toHaveBeenCalledWith(TRIP_ID, {
+      providerId: 'nextcloud',
+      baseUrl: 'https://cloud.example.com',
+      credentials: {},
+      allowInsecureTls: false,
+    })
+  })
+
+  it('FE-DOCSYNC-CONNECT-025: the stored self-signed choice is the one the switch starts on', async () => {
+    listConnections.mockResolvedValue([connection({ allowInsecureTls: true })])
+    await open(nextcloud, true)
+
+    expect(screen.getByRole('button', { pressed: true })).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-CONNECT-026: a connection that lands after the dialog is open still sets the switch', async () => {
+    // The switch used to be seeded by a useState initialiser, so it only ever
+    // read the connection that existed at the moment the dialog mounted: a
+    // stored "allow self-signed" showed as off, and the next save wrote that
+    // back. A security switch turning itself off unasked is the bad version of
+    // a stale field, so it now reads through until somebody touches it.
+    listConnections.mockResolvedValue([connection({ allowInsecureTls: true })])
+    await open(nextcloud, false)
+
+    await screen.findByPlaceholderText('••••••••')
+    await waitFor(() => expect(screen.getByRole('button', { pressed: true })).toBeInTheDocument())
+  })
+
+  it('FE-DOCSYNC-CONNECT-027: the stored address is shown as well as submitted', async () => {
+    listConnections.mockResolvedValue([connection()])
+    const { onConnected } = await open(nextcloud, true)
+
+    await screen.findByPlaceholderText('••••••••')
+    // The address is a column of its own rather than a settings entry. Reading
+    // it out of settings left the box empty over its placeholder while the form
+    // went on submitting the stored value, the field and the request quietly
+    // disagreeing about what the connection is.
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText('https://cloud.example.com')).toHaveValue('https://cloud.example.com'),
+    )
+
+    fireEvent.click(connectButton())
+
+    await waitFor(() => expect(onConnected).toHaveBeenCalled())
+    expect(saveConnection).toHaveBeenCalledWith(TRIP_ID, expect.objectContaining({ baseUrl: 'https://cloud.example.com' }))
+  })
+})

client/src/components/Files/docsync/DocSyncConnectModal.tsx

@@ -0,0 +1,189 @@
+import { useState } from 'react'
+import { AlertTriangle, Check, Loader2, ShieldAlert } from 'lucide-react'
+import Modal from '../../shared/Modal'
+import ToggleSwitch from '../../Settings/ToggleSwitch'
+import { useTranslation } from '../../../i18n/TranslationContext'
+import { useConnectForm } from './useConnectForm'
+import { Badge } from './DocSyncBits'
+import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
+import type { DocSyncProvider, useDocSync } from './useDocSync'
+
+/**
+ * Connecting a store, as a dialog rather than a panel that unfolds in place.
+ *
+ * Entering a URL and a token is a task with a beginning and an end, and doing it
+ * inside the list meant the list jumped around while someone typed. The dialog
+ * also gives the probe result somewhere to live that is not a line of text
+ * squeezed between two fields.
+ */
+export default function DocSyncConnectModal({
+  provider,
+  sync,
+  onClose,
+  onConnected,
+}: {
+  provider: DocSyncProvider
+  sync: ReturnType<typeof useDocSync>
+  onClose: () => void
+  onConnected: (providerId: string) => void
+}) {
+  const { t } = useTranslation()
+  const existing = sync.connectionFor(provider.id)
+  const Icon = DOCUMENT_PROVIDER_ICONS[provider.id]
+
+  const form = useConnectForm(provider, existing, sync)
+  const [verdict, setVerdict] = useState<{ connected: boolean; account?: string; error?: string } | null>(null)
+
+  const test = async () => setVerdict(await form.probe())
+
+  const save = async () => {
+    if (await form.save()) onConnected(provider.id)
+  }
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      size="md"
+      title={
+        <span className="flex items-center gap-2.5">
+          {Icon && <Icon className="h-5 w-5 text-content" />}
+          <span>{provider.name}</span>
+        </span>
+      }
+      footer={
+        <div className="flex items-center justify-between gap-3">
+          <Verdict verdict={verdict} busy={sync.busy === 'test'} failure={sync.error} />
+          <div className="flex shrink-0 items-center gap-2">
+            <button
+              type="button"
+              onClick={() => void test()}
+              disabled={!form.complete || sync.busy === 'test'}
+              className="rounded-lg border border-edge px-3.5 py-2 text-body text-content-secondary transition-colors hover:bg-surface-hover disabled:opacity-50"
+            >
+              {t('docsync.test')}
+            </button>
+            <button
+              type="button"
+              onClick={() => void save()}
+              disabled={!form.complete || sync.busy === 'save'}
+              className="flex items-center gap-2 rounded-lg bg-accent px-3.5 py-2 text-body font-medium text-accent-text transition-opacity hover:opacity-90 disabled:opacity-50"
+            >
+              {sync.busy === 'save' && <Loader2 size={14} className="animate-spin" />}
+              {t('docsync.connect.submit')}
+            </button>
+          </div>
+        </div>
+      }
+    >
+      <div className="space-y-4">
+        <p className="text-caption text-content-muted">{t(`docsync.connect.about.${provider.id}`)}</p>
+
+        {form.fields.map(f => (
+          <Field
+            key={f.field_key}
+            label={t(form.labelKey(f))}
+            hint={form.hintKey(f) ? t(form.hintKey(f) as string) : undefined}
+            required={f.required}
+          >
+            <input
+              type={f.input_type === 'password' ? 'password' : 'text'}
+              value={form.valueOf(f.field_key)}
+              placeholder={form.placeholderOf(f)}
+              onChange={e => form.setValue(f.field_key, e.target.value)}
+              className="w-full rounded-lg border border-edge bg-surface-input px-3 py-2.5 text-body text-content ring-accent transition-shadow placeholder:text-content-faint focus:outline-none focus:ring-2"
+            />
+          </Field>
+        ))}
+
+        <label className="flex items-start justify-between gap-4 rounded-lg border border-edge bg-surface-secondary px-3 py-2.5">
+          <span className="min-w-0">
+            <span className="block text-body text-content">{t('docsync.allowInsecureTls')}</span>
+            <span className="mt-0.5 block text-caption text-content-muted">
+              {t('docsync.connect.insecureHint')}
+            </span>
+          </span>
+          <span className="shrink-0 pt-0.5">
+            <ToggleSwitch on={form.insecureTls} onToggle={() => form.setInsecureTls(!form.insecureTls)} />
+          </span>
+        </label>
+      </div>
+    </Modal>
+  )
+}
+
+function Field({
+  label,
+  hint,
+  required,
+  children,
+}: {
+  label: string
+  hint?: string
+  required?: boolean
+  children: React.ReactNode
+}) {
+  const { t } = useTranslation()
+  return (
+    <label className="block">
+      <span className="mb-1.5 flex items-center gap-2">
+        <span className="text-body font-medium text-content">{label}</span>
+        {!required && <Badge tone="neutral">{t('docsync.connect.optional')}</Badge>}
+      </span>
+      {children}
+      {hint && <span className="mt-1.5 block text-caption text-content-muted">{hint}</span>}
+    </label>
+  )
+}
+
+/** The probe result, in the footer where it stays put while the form scrolls. */
+function Verdict({
+  verdict,
+  busy,
+  failure,
+}: {
+  verdict: { connected: boolean; account?: string; error?: string } | null
+  busy: boolean
+  /** A call that failed outside the connection test (saving, most of all). */
+  failure: string | null
+}) {
+  const { t } = useTranslation()
+  if (busy) {
+    return (
+      <span className="flex min-w-0 items-center gap-2 text-caption text-content-muted">
+        <Loader2 size={14} className="animate-spin" />
+        {t('docsync.connect.testing')}
+      </span>
+    )
+  }
+  // A save that the server refused left the dialog open with the button back to
+  // normal and nothing else said, which reads as nothing having happened. The
+  // test verdict wins the space when there is one: it is the more specific
+  // answer and the one the person just asked for.
+  if (!verdict && failure) {
+    return (
+      <span className="flex min-w-0 items-center gap-2 text-caption text-danger">
+        <AlertTriangle size={14} />
+        <span className="truncate">{t(`docsync.error.${failure}`)}</span>
+      </span>
+    )
+  }
+  if (!verdict) return <span />
+  if (verdict.connected) {
+    return (
+      <span className="flex min-w-0 items-center gap-2 text-caption text-success">
+        <Check size={14} strokeWidth={2.5} />
+        <span className="truncate">
+          {verdict.account ? t('docsync.connect.okAs', { account: verdict.account }) : t('docsync.connected')}
+        </span>
+      </span>
+    )
+  }
+  const blocked = verdict.error === 'ssrf_blocked' || verdict.error === 'tls_untrusted'
+  return (
+    <span className="flex min-w-0 items-center gap-2 text-caption text-danger">
+      {blocked ? <ShieldAlert size={14} /> : <AlertTriangle size={14} />}
+      <span className="truncate">{t(`docsync.error.${verdict.error || 'unknown'}`)}</span>
+    </span>
+  )
+}