chore(ci): lower the knip export baseline the planner's zone fix brought down

The field-to-column map of shared place details moves to @trek/shared,
where places and place-contrib both read it without depending on each
other, and the assistant reads a recorded call's arguments with a helper
of its own instead of reaching into the AI providers. The catch-up's
country from the address is taken back out: it made place-contrib depend
on atlas, which already depends on it, and it waits for a shared country
lookup both can use.

.github/workflows/close-stale-invalid-titles.yml

@@ -14,7 +14,7 @@ jobs:
     timeout-minutes: 45
     steps:
       - name: Close stale invalid-title issues
-        uses: actions/github-script@v8
+        uses: actions/github-script@v9
         with:
           script: |
             const badTitles = [

.github/workflows/close-stale-wrong-branch.yml

@@ -15,7 +15,7 @@ jobs:
     timeout-minutes: 45
     steps:
       - name: Close stale wrong-base-branch PRs
-        uses: actions/github-script@v8
+        uses: actions/github-script@v9
         with:
           script: |
             const { data: pulls } = await github.rest.pulls.list({

.github/workflows/close-untitled-issues.yml

@@ -14,7 +14,7 @@ jobs:
     timeout-minutes: 45
     steps:
       - name: Flag or redirect issue
-        uses: actions/github-script@v8
+        uses: actions/github-script@v9
         with:
           script: |
             const title = context.payload.issue.title.trim();

.github/workflows/docker-dev.yml

@@ -175,7 +175,7 @@ jobs:
 
       - uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
 
-      - uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+      - uses: docker/login-action@81c6f93d4bc991e510b342a00b419b3bb4efc5c6 # v4.7.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -236,7 +236,7 @@ jobs:
 
       - uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
 
-      - uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+      - uses: docker/login-action@81c6f93d4bc991e510b342a00b419b3bb4efc5c6 # v4.7.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/docker.yml

@@ -342,7 +342,7 @@ jobs:
 
       - uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
 
-      - uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+      - uses: docker/login-action@81c6f93d4bc991e510b342a00b419b3bb4efc5c6 # v4.7.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -401,7 +401,7 @@ jobs:
 
       - uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
 
-      - uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+      - uses: docker/login-action@81c6f93d4bc991e510b342a00b419b3bb4efc5c6 # v4.7.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/enforce-target-branch.yml

@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Flag or clear wrong base branch
-        uses: actions/github-script@v8
+        uses: actions/github-script@v9
         with:
           script: |
             const base = context.payload.pull_request.base.ref;

.github/workflows/lint-prettier.yml

@@ -36,7 +36,7 @@ jobs:
 
       - name: Comment on PR if checks failed
         if: steps.checks.outcome == 'failure'
-        uses: actions/github-script@v8
+        uses: actions/github-script@v9
         with:
           script: |
             await github.rest.issues.createComment({

.github/workflows/security.yml

@@ -74,12 +74,12 @@ jobs:
           load: true
           tags: trek:scan
 
-      - uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+      - uses: docker/login-action@81c6f93d4bc991e510b342a00b419b3bb4efc5c6 # v4.7.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - uses: docker/scout-action@221e7f4860634eeb1579e3bd7ca232e577bd1864 # v1.26.0
+      - uses: docker/scout-action@e7e2a72bf1485d10a58f30696b6c513b261ce4fa # v1.29.0
         with:
           command: cves
           image: trek:scan

.github/workflows/test.yml

@@ -1100,7 +1100,7 @@ jobs:
           path: plugin-sdk/coverage/
 
       - name: Scan
-        uses: SonarSource/sonarqube-scan-action@d209202bc7d53ff1cc128f7f907dac145c9d6ae9 # v8.3.0
+        uses: SonarSource/sonarqube-scan-action@4d1dc0c91ee400dcf8a6dddf2f705ac36542e304 # v8.4.0
         env:
           # SonarQube Cloud is the scan action's default host, so no
           # SONAR_HOST_URL — the token is a sonarcloud.io token for the
@@ -1274,6 +1274,14 @@ jobs:
             --set httpRoute.enabled=true \
             --set 'httpRoute.parentRefs[0].name=gateway' \
             > "$out/http-route.yaml"
+          helm template trek charts/trek \
+            --set podSecurityContext.runAsUser=1000 \
+            --set podSecurityContext.runAsGroup=1000 \
+            --set podSecurityContext.runAsNonRoot=true \
+            --set podSecurityContext.seccompProfile.type=RuntimeDefault \
+            --set securityContext.allowPrivilegeEscalation=false \
+            --set 'securityContext.capabilities.drop[0]=ALL' \
+            > "$out/non-root.yaml"
           helm template trek charts/trek \
             --set ingress.enabled=true \
             --set fullnameOverride=custom-trek \

README.md

@@ -36,7 +36,7 @@ TREK has grown from a travel planner into a whole ecosystem for trips: plan toge
  
 <a href="https://github.com/liketrek/TREK"><img alt="Stars" src="https://img.shields.io/github/stars/liketrek/trek?style=for-the-badge&label=Stars&color=6B7280" /></a>
 
-<sub>PUBLIC SERVICES PROUDLY SPONSORED BY</sub><br /><a href="https://cloud.dataforest.net/?mtm_campaign=trek"><picture><source media="(prefers-color-scheme: dark)" srcset="docs/sponsors/dataforest-light.svg" /><source media="(prefers-color-scheme: light)" srcset="docs/sponsors/dataforest-dark.svg" /><img src="docs/sponsors/dataforest-dark.svg" alt="dataforest cloud" height="30" /></picture></a>
+<sub>PUBLIC SERVICES PROUDLY SPONSORED BY</sub><br /><a href="https://cloud.dataforest.net/en?mtm_campaign=trek"><picture><source media="(prefers-color-scheme: dark)" srcset="docs/sponsors/dataforest-light.svg" /><source media="(prefers-color-scheme: light)" srcset="docs/sponsors/dataforest-dark.svg" /><img src="docs/sponsors/dataforest-dark.svg" alt="dataforest cloud" height="30" /></picture></a>
 </div>
 
 ---
@@ -218,13 +218,13 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu
 
 <br />
 
-## Powered by dataforest cloud
+## Powered by [dataforest cloud](https://cloud.dataforest.net/en?mtm_campaign=trek)
 
 <div align="center">
 
 <br />
 
-<a href="https://cloud.dataforest.net/?mtm_campaign=trek">
+<a href="https://cloud.dataforest.net/en?mtm_campaign=trek">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="docs/sponsors/dataforest-light.svg" />
     <source media="(prefers-color-scheme: light)" srcset="docs/sponsors/dataforest-dark.svg" />
@@ -235,17 +235,17 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu
 <br />
 <br />
 
-**Every TREK installation in the world searches through servers that dataforest cloud sponsors.**
+**Every TREK installation in the world searches through servers that [dataforest cloud](https://cloud.dataforest.net/en?mtm_campaign=trek) sponsors.**
 
-The place index with over 88 million places, the address search in every TREK language and the planet-wide routing all run on dataforest cloud in Frankfurt, Germany, free of charge for everyone who self-hosts TREK. Without this sponsorship, these services would not exist in this form.
+The place index with over 88 million places, the address search in every TREK language and the planet-wide routing all run on [dataforest cloud](https://cloud.dataforest.net/en?mtm_campaign=trek) in Frankfurt, Germany, free of charge for everyone who self-hosts TREK. Without this sponsorship, these services would not exist in this form.
 
-Thank you, dataforest, for backing open source this generously. 💚
+Thank you, [dataforest](https://cloud.dataforest.net/en?mtm_campaign=trek), for backing open source this generously. 💚
 
 <br />
 
-<a href="https://cloud.dataforest.net/?mtm_campaign=trek"><img alt="Visit dataforest cloud" src="https://img.shields.io/badge/Visit-dataforest_cloud-02C382?style=for-the-badge" /></a>
+<a href="https://cloud.dataforest.net/en?mtm_campaign=trek"><img alt="Visit dataforest cloud" src="https://img.shields.io/badge/Visit-dataforest_cloud-02C382?style=for-the-badge" /></a>
 
-Looking for a server for your own TREK? dataforest cloud is where TREK's own services live.
+Looking for a server for your own TREK? [dataforest cloud](https://cloud.dataforest.net/en?mtm_campaign=trek) is where TREK's own services live.
 
 </div>
 
@@ -277,7 +277,7 @@ Open `http://localhost:3000`, or `http://<server-ip>:3000` from another machine.
 `COOKIE_SECURE=false` is only for trying TREK over plain HTTP: without it the browser drops the session cookie and the login does not stick. Once TREK sits behind HTTPS (see [Reverse Proxy](#reverse-proxy)), remove it.
 
 > [!TIP]
-> **No server yet?** TREK's own public services run on [**dataforest cloud**](https://cloud.dataforest.net/?mtm_campaign=trek), our infrastructure sponsor. A small seed is plenty for a TREK instance and is ready within a minute.
+> **No server yet?** TREK's own public services run on [**dataforest cloud**](https://cloud.dataforest.net/en?mtm_campaign=trek), our infrastructure sponsor. A small seed is plenty for a TREK instance and is ready within a minute.
 
 <div align="center">
 

charts/README.md

@@ -56,4 +56,5 @@ See `values.yaml` for more options.
 - `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.**
 - Web Push needs no chart settings: TREK generates its key pair on first start and keeps it in the database on the data PVC. To bring your own pair, set `env.VAPID_PUBLIC_KEY` and `secretEnv.VAPID_PRIVATE_KEY` together (and optionally `env.VAPID_SUBJECT`); changing the pair later means every device has to turn push on again.
 - Set `env.OIDC_DISCOVERY_URL` to override the auto-constructed OIDC discovery endpoint. Required for providers (e.g. Authentik) that expose it at a non-standard path.
+- `podSecurityContext` defaults to `fsGroup: 1000` with `fsGroupChangePolicy: OnRootMismatch`, and `securityContext` (the container's) is empty. The container then starts as root, hands `/app/data` and `/app/uploads` to `node` (uid 1000) if the directory or anything directly inside it is not owned by `node` yet, and drops to `node`. Deeper files are not checked. Only the owning user is changed (plus a `root` group), so a different `fsGroup` stays in place. A volume that refuses `chown` (NFS with `root_squash`) logs a warning instead; set `runAsUser: 1000` then. To run as `node` from the start, for example under the `restricted` Pod Security Standard, set `podSecurityContext.runAsUser: 1000` and `runAsGroup: 1000`; the image then skips that step and the privilege drop. See the example in `values.yaml`.
 - Use `extraVolumes` and `extraVolumeMounts` to add your own volumes to the pod. To give the booking import more KItinerary extractors, mount a ConfigMap at `/usr/local/share/kitinerary/extractors`, with one `.json` and one `.js` key for each extractor; see the example in `values.yaml`.

charts/trek/templates/deployment.yaml

@@ -29,12 +29,18 @@ spec:
         - name: {{ .name }}
         {{- end }}
       {{- end }}
+      {{- with .Values.podSecurityContext }}
       securityContext:
-        fsGroup: 1000
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
       containers:
         - name: trek
           image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
           imagePullPolicy: {{ .Values.image.pullPolicy }}
+          {{- with .Values.securityContext }}
+          securityContext:
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
           {{- with .Values.resources }}
           resources:
             {{- toYaml . | nindent 12 }}

charts/trek/values.yaml

@@ -10,6 +10,34 @@ image:
 # processes on one host, which network filesystems do not provide.
 updateStrategy: Recreate
 
+# Pod-level security context. fsGroup gives the node user (uid/gid 1000) group access
+# to the data and uploads volumes; OnRootMismatch lets the kubelet skip its recursive
+# permission walk once the volume root already matches, so a big PVC does not hold up
+# every start.
+#
+# By default the container starts as root, hands any files that are not node's yet to
+# node, and then drops to node itself. To start it as node straight away (needed under
+# the "restricted" Pod Security Standard), add the user here and lock the container
+# down below; the image then skips the ownership step and the privilege drop:
+#   podSecurityContext:
+#     fsGroup: 1000
+#     fsGroupChangePolicy: OnRootMismatch
+#     runAsUser: 1000
+#     runAsGroup: 1000
+#     runAsNonRoot: true
+#     seccompProfile:
+#       type: RuntimeDefault
+#   securityContext:
+#     allowPrivilegeEscalation: false
+#     capabilities:
+#       drop: [ALL]
+podSecurityContext:
+  fsGroup: 1000
+  fsGroupChangePolicy: OnRootMismatch
+
+# Security context of the trek container itself. Empty by default.
+securityContext: {}
+
 # Optional image pull secrets for private registries
 imagePullSecrets: []
   # - name: my-registry-secret

client/e2e/collection-row-names-2981.spec.ts

@@ -0,0 +1,104 @@
+import { expect, test, type Locator } from '@playwright/test';
+
+// #2981: labels, category and status took the whole row, so a place with two or
+// three long labels showed one letter of its name or none, and the status pill
+// ran out of the card. Measured in a real browser because the layout is the bug.
+const PLACES = [
+  { name: 'Oceanario de Lisboa', labels: ['Core shortlist', 'Heritage specialist', 'Pair with another stop'] },
+  { name: 'Cove of Ursa', labels: ['Heritage specialist', 'Pair with another stop'] },
+  { name: 'A Vida Portuguesa', labels: ['Flagship', 'Market', 'Core shortlist', 'Pair with another stop'] },
+  { name: 'Torre de Belem', labels: [] as string[] },
+];
+
+async function expectInside(row: Locator) {
+  const escapes = await row.evaluate((el) => {
+    const box = el.getBoundingClientRect();
+    return Array.from(el.querySelectorAll('*')).filter((child) => {
+      // The strip's hidden measuring copy is meant to run past the bar.
+      if (child.closest('[aria-hidden="true"]')) return false;
+      const r = child.getBoundingClientRect();
+      return r.width > 0 && (r.left < box.left - 0.5 || r.right > box.right + 0.5);
+    }).length;
+  });
+  expect(escapes).toBe(0);
+}
+
+for (const viewport of [
+  { width: 1920, height: 1000 },
+  { width: 1400, height: 900 },
+  { width: 1024, height: 800 },
+]) {
+  test(`place names stay readable next to long labels at ${viewport.width}px`, async ({ page }) => {
+    test.setTimeout(90_000);
+    await page.setViewportSize(viewport);
+    const addonsResponse = await page.request.get('/api/admin/addons');
+    expect(addonsResponse.ok()).toBeTruthy();
+    const { addons } = await addonsResponse.json();
+    const original = addons.find((addon: { id: string }) => addon.id === 'collections');
+    expect(original).toBeDefined();
+    let collectionId: number | undefined;
+
+    try {
+      expect((await page.request.put('/api/admin/addons/collections', { data: { enabled: true } })).ok()).toBeTruthy();
+      const created = await page.request.post('/api/addons/collections', { data: { name: `Rows ${viewport.width}` } });
+      expect(created.ok()).toBeTruthy();
+      const body = await created.json();
+      collectionId = (body.collection ?? body).id as number;
+
+      const labelIds = new Map<string, number>();
+      for (const name of new Set(PLACES.flatMap((p) => p.labels))) {
+        const res = await page.request.post('/api/addons/collections/labels', {
+          data: { collection_id: collectionId, name, color: '#2563eb' },
+        });
+        expect(res.ok(), `label ${name}`).toBeTruthy();
+        const label = await res.json();
+        labelIds.set(name, (label.label ?? label).id);
+      }
+      for (const place of PLACES) {
+        const res = await page.request.post('/api/addons/collections/places', {
+          data: {
+            collection_id: collectionId,
+            name: place.name,
+            address: 'Rua Anchieta 11, 1200-023 Lisboa, Portugal',
+            lat: 38.71,
+            lng: -9.14,
+          },
+        });
+        expect(res.ok(), `place ${place.name}`).toBeTruthy();
+        const saved = await res.json();
+        if (!place.labels.length) continue;
+        const assign = await page.request.post('/api/addons/collections/labels/assign', {
+          data: { label_ids: place.labels.map((l) => labelIds.get(l)), place_ids: [(saved.place ?? saved).id] },
+        });
+        expect(assign.ok()).toBeTruthy();
+      }
+
+      await page.goto(`/collections/${collectionId}`);
+      const rows = page.locator('.col-lrow');
+      await expect(rows).toHaveCount(PLACES.length);
+      for (const place of PLACES) {
+        const row = rows.filter({ hasText: place.name });
+        const name = row.locator('.li .t');
+        await expect(name).toHaveText(place.name);
+        // The whole name fits: it is not cut to an ellipsis.
+        expect(await name.evaluate((el) => el.scrollWidth <= el.clientWidth + 1)).toBe(true);
+        await expectInside(row);
+        // Every label is either on the row or counted by its "+N" chip.
+        const shown = await row.locator('.col-lrow-label:not(.is-over)').count();
+        // Read without waiting: a row whose labels all fit has no "+N".
+        const [more] = await row.locator('.col-lrow-more').allTextContents();
+        expect(shown + (more ? Number(more.replace('+', '')) : 0)).toBe(place.labels.length);
+      }
+      // The map's label strip stays inside the map: whole, or folded into its button.
+      const topbar = page.locator('.col-map-topbar');
+      if (await topbar.count()) await expectInside(topbar);
+    } finally {
+      if (collectionId !== undefined) {
+        expect((await page.request.delete(`/api/addons/collections/${collectionId}`)).ok()).toBeTruthy();
+      }
+      expect(
+        (await page.request.put('/api/admin/addons/collections', { data: { enabled: !!original.enabled } })).ok()
+      ).toBeTruthy();
+    }
+  });
+}

client/e2e/places-selection-bar.spec.ts

@@ -0,0 +1,110 @@
+import { expect, test, type Locator } from '@playwright/test';
+
+// A visible DOM node can still be clipped by a panel. Check the whole bar
+// before interacting: Playwright's automatic scroll-into-view could mask it.
+async function expectBarInsidePanel(bar: Locator, panel: Locator) {
+  await expect(bar).toBeInViewport({ ratio: 1 });
+  await expect
+    .poll(async () => {
+      const bounds = await bar.boundingBox();
+      const parent = await panel.boundingBox();
+      return (
+        !!bounds &&
+        !!parent &&
+        bounds.y >= parent.y &&
+        bounds.y + bounds.height <= parent.y + parent.height + 1 &&
+        bounds.x >= parent.x &&
+        bounds.x + bounds.width <= parent.x + parent.width + 1
+      );
+    })
+    .toBe(true);
+}
+
+for (const layout of [
+  { name: 'desktop', viewport: { width: 1440, height: 900 }, hasTouch: false },
+  { name: 'tablet', viewport: { width: 834, height: 1112 }, hasTouch: true },
+  { name: 'short desktop', viewport: { width: 1280, height: 600 }, hasTouch: false },
+]) {
+  test.describe(layout.name, () => {
+    test.use({
+      viewport: layout.viewport,
+      hasTouch: layout.hasTouch,
+    });
+
+    for (const tours of [false, true]) {
+      for (const count of [10, 27, 190]) {
+        test(`${count} places, Tours ${tours ? 'on' : 'off'}: selection bar stays reachable`, async ({ page }) => {
+          test.setTimeout(90_000);
+          const activate = (button: Locator) => (layout.hasTouch ? button.tap() : button.click());
+          const addonsResponse = await page.request.get('/api/admin/addons');
+          expect(addonsResponse.ok()).toBeTruthy();
+          const { addons } = await addonsResponse.json();
+          const originalTours = addons.find((addon: { id: string }) => addon.id === 'tours');
+          expect(originalTours).toBeDefined();
+          let tripId: number | undefined;
+
+          try {
+            expect((await page.request.put('/api/admin/addons/tours', { data: { enabled: tours } })).ok()).toBeTruthy();
+            const tripResponse = await page.request.post('/api/trips', {
+              data: {
+                title: `Selection bar ${layout.name} ${count}`,
+                start_date: '2027-01-01',
+                end_date: '2027-01-02',
+              },
+            });
+            expect(tripResponse.ok()).toBeTruthy();
+            tripId = (await tripResponse.json()).trip.id;
+            for (let i = 1; i <= count; i++) {
+              const response = await page.request.post(`/api/trips/${tripId}/places`, {
+                data: { name: `Selection place ${i}`, lat: 48.85, lng: 2.35 },
+              });
+              expect(response.ok(), `seed place ${i}`).toBeTruthy();
+            }
+
+            await page.goto(`/trips/${tripId}`);
+            if (layout.name === 'tablet') await page.locator('button[aria-label="Places"]').click();
+            const sidebar = page
+              .locator('[data-touch-drag]')
+              .filter({ has: page.getByRole('button', { name: 'Select', exact: true }) });
+            const panel = sidebar.locator('..');
+            const rows = sidebar.getByRole('option');
+            await expect(rows).toHaveCount(count);
+            await expect(panel.getByRole('tab', { name: 'Tours', exact: true })).toHaveCount(tours ? 1 : 0);
+            await activate(sidebar.getByRole('button', { name: 'Select', exact: true }));
+            const bar = sidebar.getByRole('status').locator('../..');
+            await expectBarInsidePanel(bar, panel);
+
+            const list = sidebar.locator('.trek-stagger');
+            const before = await bar.boundingBox();
+            // Only the list scrolls; the bar must remain at the panel's foot.
+            await list.evaluate((el) => {
+              el.scrollTop = el.scrollHeight;
+            });
+            if (count >= 27) await expect.poll(() => list.evaluate((el) => el.scrollTop)).toBeGreaterThan(0);
+            await expectBarInsidePanel(bar, panel);
+            expect((await bar.boundingBox())?.y).toBe(before?.y);
+            await activate(sidebar.getByRole('button', { name: 'Select all', exact: true }));
+            await expect(sidebar.getByRole('status')).toHaveText(String(count));
+            await activate(sidebar.getByRole('button', { name: 'Done', exact: true }));
+            await expect(sidebar.getByRole('status')).toHaveCount(0);
+
+            await activate(sidebar.getByRole('button', { name: 'Select', exact: true }));
+            await list.evaluate((el) => {
+              el.scrollTop = 0;
+            });
+            await expectBarInsidePanel(bar, panel);
+            await activate(sidebar.getByRole('button', { name: 'Select all', exact: true }));
+            await activate(sidebar.getByRole('button', { name: 'Delete selected', exact: true }));
+            await activate(page.getByRole('button', { name: 'Delete', exact: true }));
+            await expect(rows).toHaveCount(0);
+          } finally {
+            if (tripId !== undefined) expect((await page.request.delete(`/api/trips/${tripId}`)).ok()).toBeTruthy();
+            expect(
+              (await page.request.put('/api/admin/addons/tours', { data: { enabled: !!originalTours.enabled } })).ok()
+            ).toBeTruthy();
+          }
+        });
+      }
+    }
+  });
+}

client/package.json

@@ -123,7 +123,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.12",
     "autoprefixer": "^10.6.1",
     "eslint": "^10.11.0",
     "eslint-config-flat-gitignore": "^2.4.0",
@@ -138,12 +138,12 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "rollup-plugin-visualizer": "^7.1.1",
-    "sharp": "^0.35.4",
+    "sharp": "^0.35.5",
     "tailwindcss": "^3.4.19",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.70.0",
-    "vite": "8.3.0",
+    "vite": "8.3.5",
     "vite-plugin-pwa": "^1.3.0",
-    "vitest": "^4.1.11"
+    "vitest": "^4.1.12"
   }
 }

client/scripts/eslint-baseline.json

@@ -1,6 +1,6 @@
 {
   "src": {
-    "@typescript-eslint/no-non-null-assertion": 380,
+    "@typescript-eslint/no-non-null-assertion": 377,
     "@typescript-eslint/no-misused-promises": 847,
     "no-console": 88,
     "complexity": 218,
@@ -8,14 +8,14 @@
     "trek/no-swallowed-catch": 128,
     "max-params": 32,
     "trek/store-without-selector": 67,
-    "react-hooks/refs": 555,
+    "react-hooks/refs": 553,
     "react-hooks/set-state-in-effect": 193,
     "@typescript-eslint/no-floating-promises": 164,
     "react-hooks/exhaustive-deps": 116,
     "@typescript-eslint/no-unused-vars": 124,
     "react-hooks/immutability": 28,
     "max-lines-per-function": 130,
-    "react-hooks/static-components": 78,
+    "react-hooks/static-components": 50,
     "react-hooks/preserve-manual-memoization": 12,
     "no-useless-assignment": 7,
     "no-empty": 19,
@@ -25,7 +25,7 @@
     "max-depth": 21,
     "react-hooks/void-use-memo": 1,
     "@typescript-eslint/no-unused-expressions": 2,
-    "react-hooks/purity": 2,
+    "react-hooks/purity": 1,
     "preserve-caught-error": 53,
     "no-useless-escape": 1
   },
@@ -34,8 +34,8 @@
     "react-hooks/exhaustive-deps": 46
   },
   "tests": {
-    "@typescript-eslint/no-explicit-any": 490,
-    "@typescript-eslint/no-non-null-assertion": 1915,
+    "@typescript-eslint/no-explicit-any": 489,
+    "@typescript-eslint/no-non-null-assertion": 1914,
     "@typescript-eslint/no-misused-promises": 22,
     "@typescript-eslint/no-unused-vars": 51,
     "@typescript-eslint/no-floating-promises": 33,

client/scripts/feature-pairs.json

@@ -742,11 +742,8 @@
     {
       "feature": "Settings / Map: mapSettingsModel",
       "hooks": ["src/components/Settings/mapSettingsModel.ts"],
-      "desktop": ["src/components/Admin/DefaultUserSettingsTab.tsx", "src/components/Settings/MapSettingsTab.tsx"],
-      "mobile": [
-        "src/mobile/screens/admin/MAdminDefaultUserSettings.tsx",
-        "src/mobile/screens/settings/MSettingsMap.tsx"
-      ]
+      "desktop": ["src/components/Settings/MapSettingsTab.tsx"],
+      "mobile": ["src/mobile/screens/settings/MSettingsMap.tsx"]
     },
     {
       "feature": "Settings / Map: useMapSettingsForm",
@@ -983,8 +980,11 @@
     }
   ],
   "mobileOnly": {
+    "src/mobile/screens/admin/MAdminOidcCard.tsx": "Markup only; the OIDC card of MAdminSettingsSection, with the form state from useAdmin and the save from its useAdminSettingsActions handed in through props.",
     "src/mobile/screens/admin/MAdminResetMfaSheet.tsx": "Markup only; the 2FA reset confirm that MAdminSheets opens, with the reset handed in through props from its useAdminUserActions.",
     "src/mobile/screens/admin/MAdminUi.tsx": "Phone only admin UI primitives (button, card, field, input, secret input, sheet frame).",
+    "src/mobile/screens/admin/MPluginVersionDate.tsx": "Markup only; the published date of a plugin version in MAdminPluginsPanel, formatted with the user's date format through useFormatDate.",
+    "src/mobile/screens/admin/MStorageReclaimCard.tsx": "Markup only; renders the reclaim view and handlers that MAdminStoragePanel takes from useStoragePanel, the twin of StorageReclaimSection.",
     "src/mobile/screens/atlas/MAtlasSearch.tsx": "Phone full screen country search overlay; options, suggestions and selection come through props from MAtlas.",
     "src/mobile/screens/atlas/MAtlasStatsCard.tsx": "Markup only; renders the AtlasStats that MAtlas passes in.",
     "src/mobile/screens/collections/MCollCategoryPicker.tsx": "Phone only category dropdown; value and categories come through props from the collection sheets.",

client/scripts/rtl-baseline.json

@@ -34,7 +34,7 @@
   "components/Map/locationMarkerMapbox.ts": 2,
   "components/Map/nightPauseMarker.ts": 4,
   "components/Map/ratingBadge.ts": 1,
-  "components/PDF/TripPDF.tsx": 8,
+  "components/PDF/TripPDF.tsx": 7,
   "components/PDF/tripMapImage.ts": 1,
   "components/Packing/PackingListPanelBagCard.tsx": 1,
   "components/Packing/PackingListPanelCategoryGroup.tsx": 3,

client/scripts/size-baseline.json

@@ -2,23 +2,22 @@
   "e2e/help/fixtures.ts": 2291,
   "src/api/client.ts": 1873,
   "src/components/Admin/AdminPluginsPanel.test.tsx": 2704,
-  "src/components/Admin/AdminPluginsPanel.tsx": 1277,
-  "src/components/Budget/CostsPanel.test.tsx": 2736,
+  "src/components/Admin/AdminPluginsPanel.tsx": 1266,
+  "src/components/Budget/CostsPanel.test.tsx": 2730,
   "src/components/Budget/CostsPanel.tsx": 1798,
-  "src/components/Map/MapView.tsx": 1385,
+  "src/components/Map/MapView.tsx": 1255,
   "src/components/Map/MapViewGL.test.tsx": 2919,
-  "src/components/Map/MapViewGL.tsx": 2218,
-  "src/components/PDF/TripPDF.tsx": 1039,
+  "src/components/Map/MapViewGL.tsx": 2198,
   "src/components/Planner/DayDetailPanel.test.tsx": 2333,
   "src/components/Planner/DayPlanSidebar.test.tsx": 5349,
-  "src/components/Planner/DayPlanSidebar.tsx": 2936,
+  "src/components/Planner/DayPlanSidebar.tsx": 2929,
   "src/components/Planner/PlaceFormModal.test.tsx": 2836,
   "src/components/Planner/PlaceInspector.tsx": 1290,
   "src/components/Studio/TravelElements.tsx": 1559,
   "src/components/Studio/countryShapes.ts": 2595,
   "src/index.css": 1636,
   "src/mobile/screens/admin/MAdminPluginsPanel.tsx": 1507,
-  "src/pages/JourneyDetailPage.test.tsx": 4030,
+  "src/pages/JourneyDetailPage.test.tsx": 4028,
   "src/pages/LoginPage.tsx": 1348,
   "src/pages/TripPlannerPage.tsx": 1128,
   "src/pages/atlas/useAtlas.ts": 1210,

client/scripts/theme-baseline.json

@@ -71,7 +71,7 @@
   "components/Map/poiCategories.ts": 7,
   "components/Map/ratingBadge.ts": 2,
   "components/Map/reservationsMapbox.ts": 1,
-  "components/PDF/TripPDF.tsx": 53,
+  "components/PDF/TripPDF.tsx": 51,
   "components/Packing/PackingListPanelBagModal.tsx": 2,
   "components/Packing/PackingListPanelCategoryGroup.tsx": 5,
   "components/Packing/PackingListPanelHeader.tsx": 5,
@@ -284,7 +284,7 @@
   "mobile/screens/vacay/MVacay.tsx": 23,
   "mobile/screens/vacay/MVacayInviteSheet.tsx": 9,
   "mobile/screens/vacay/MVacayMonth.tsx": 3,
-  "mobile/screens/vacay/MVacaySettingsSheet.tsx": 36,
+  "mobile/screens/vacay/MVacaySettingsSheet.tsx": 35,
   "mobile/screens/vacay/MVacayShareSheet.tsx": 11,
   "mobile/screens/vacay/vacayDayModel.ts": 1,
   "pages/AtlasPage.tsx": 32,

client/scripts/theme-disable-baseline.json

@@ -20,7 +20,7 @@
   "components/Map/DawarichTrailLayer.tsx": 1,
   "components/Map/dawarichTrail.ts": 10,
   "components/Map/useDawarichTrailGL.ts": 1,
-  "components/Packing/PackingListPanelItemRow.tsx": 1,
+  "components/Packing/PackingBringersCard.tsx": 1,
   "components/Planner/DayReorderPopup.tsx": 1,
   "components/Planner/bookings/bookingsModel.ts": 1,
   "components/Planner/bookings/transitParts.tsx": 1,

client/src/App.test.tsx

@@ -436,6 +436,28 @@ describe('App — on-mount effects', () => {
     await waitFor(() => expect(setManaged).toHaveBeenCalledWith(false))
   })
 
+  it('FE-COMP-APP-018c: app-config is asked again after a failed answer, so managed is not lost', async () => {
+    // A page opened while the server restarts got a 502 here and kept every
+    // default for the session, which brought back the operator's settings.
+    let calls = 0
+    server.use(
+      http.get('/api/auth/app-config', () => {
+        calls += 1
+        return calls === 1 ? new HttpResponse(null, { status: 502 }) : HttpResponse.json({ managed: true })
+      })
+    )
+    const setManaged = vi.fn()
+    useAuthStore.setState({
+      isLoading: false,
+      isAuthenticated: false,
+      loadUser: vi.fn().mockResolvedValue(undefined),
+      setManaged,
+    })
+    renderApp('/')
+    await waitFor(() => expect(setManaged).toHaveBeenCalledWith(true), { timeout: 4000 })
+    expect(calls).toBe(2)
+  })
+
   it('FE-COMP-APP-019: loadSettings is called once the user is authenticated', async () => {
     const loadSettings = vi.fn().mockResolvedValue(undefined)
     seedAuth({ isAuthenticated: true, user: buildUser() })

client/src/App.tsx

@@ -323,7 +323,21 @@ 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; 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; max_upload_mb?: number; permissions?: Record<string, PermissionLevel> }) => {
+    // Asked again until it answers: a page opened while the server restarts got a
+    // 502 here and kept the defaults for the whole session, which on a managed
+    // install put back every setting the operator owns.
+    let cancelled = false
+    let retryTimer: ReturnType<typeof setTimeout> | undefined
+    type AppConfigAnswer = Awaited<ReturnType<typeof authApi.getAppConfig>>
+    const fetchAppConfig = (attempt: number): Promise<AppConfigAnswer> => authApi.getAppConfig().catch((err: unknown) => {
+      if (cancelled) throw err
+      return new Promise<AppConfigAnswer>((resolve, reject) => {
+        retryTimer = setTimeout(() => {
+          fetchAppConfig(attempt + 1).then(resolve, reject)
+        }, Math.min(30_000, 1_000 * 2 ** attempt))
+      })
+    })
+    fetchAppConfig(0).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; max_upload_mb?: number; permissions?: Record<string, PermissionLevel> }) => {
       setManaged(!!config?.managed)
       setDemoMode(!!config?.demo_mode)
       if (config?.dev_mode) setDevMode(true)
@@ -347,6 +361,10 @@ export default function App() {
       // Last, since a new release reloads the page from here.
       await reconcileAppVersion(config?.version)
     }).catch(() => {})
+    return () => {
+      cancelled = true
+      clearTimeout(retryTimer)
+    }
   }, [])
 
   const { settings } = useSettingsStore()
@@ -402,6 +420,10 @@ export default function App() {
   // interceptor's covers all of /public/. A route that is public to one and not
   // to the other is exactly the seam that puts a 401 back.
   const hideAuthedWidgets = isAuthPage || isAuthPublicPath(location.pathname)
+  // The Help & Docs page is the wiki, written for somebody who runs TREK
+  // themselves: keys, backups, updates, the server behind it. A managed install
+  // does not offer it; the in-app help center stays.
+  const managed = useAuthStore(s => s.managed)
 
   return (
     <TranslationProvider>
@@ -456,7 +478,7 @@ export default function App() {
             path="/help"
             element={
               <ProtectedRoute>
-                <HelpPage />
+                {managed ? <Navigate to="/dashboard" replace /> : <HelpPage />}
               </ProtectedRoute>
             }
           />
@@ -464,7 +486,7 @@ export default function App() {
             path="/help/:slug"
             element={
               <ProtectedRoute>
-                <HelpPage />
+                {managed ? <Navigate to="/dashboard" replace /> : <HelpPage />}
               </ProtectedRoute>
             }
           />

client/src/api/storageReclaim.ts

@@ -0,0 +1,15 @@
+import type { StorageReclaimConfirmRequest, StorageReclaimState } from '@trek/shared';
+import { apiClient } from './client';
+
+/** Admin > Storage, unreferenced files: the nightly deletion switch, a check on demand, and the large-share confirmation. */
+export const storageReclaimApi = {
+  setDelete: (deleteEnabled: boolean): Promise<StorageReclaimState> =>
+    apiClient.put('/admin/storage/reclaim', { deleteEnabled }).then((r) => r.data),
+  /** Starts a report-only check in the background (202); its report arrives through the admin state. */
+  check: (): Promise<{ started: true }> => apiClient.post('/admin/storage/reclaim/run').then((r) => r.data),
+  /** `unreferenced` is the count the admin was shown: the server refuses when its own count has moved on. */
+  confirm: (request: StorageReclaimConfirmRequest): Promise<StorageReclaimState> =>
+    apiClient
+      .post('/admin/storage/reclaim/confirm', request satisfies StorageReclaimConfirmRequest)
+      .then((r) => r.data),
+};

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useAuthStore } from '../../store/authStore';
 import { useSettingsStore } from '../../store/settingsStore';
 import { useAddonStore } from '../../store/addonStore';
 import { ToastContainer } from '../shared/Toast';
@@ -679,6 +680,16 @@ describe('AddonManager', () => {
     expect(isOn(screen.getByRole('button', { name: 'wanderer' }))).toBe(true);
   });
 
+  it('FE-ADMIN-ADDON-042b: a managed install has no wanderer switch under Tours', async () => {
+    seedStore(useAuthStore, { managed: true });
+    server.use(addonsRoute([buildAddon({ id: 'tours', name: 'Tours', icon: 'Mountain', enabled: true })]));
+    render(<AddonManager />);
+
+    await screen.findByRole('button', { name: /\d+ options?/, expanded: false });
+    await unfoldShelves();
+    expect(screen.queryByRole('button', { name: 'wanderer' })).not.toBeInTheDocument();
+  });
+
   it('FE-ADMIN-ADDON-043: a failed wanderer save puts the switch back', async () => {
     server.use(
       addonsRoute([buildAddon({ id: 'tours', name: 'Tours', icon: 'Mountain', enabled: true })]),

client/src/components/Admin/AddonManager.tsx

@@ -73,6 +73,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
   const {
     addons, loading, handleToggle, tripAddons, globalAddons, integrationAddons, aiAddons, providerOptions, documentProviderOptions,
     toursWanderer,
+    wandererOffered,
     toggleToursWanderer,
     mapSwitches,
   } = useAddonManager()
@@ -157,14 +158,18 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     // "N options" bar the way Collab's and Documents' are.
     if (addon.id === 'tours' && addon.enabled) {
       return [
-        <AddonSubRow
-          key="wanderer"
-          icon={<WandererMark size={14} />}
-          title={t('admin.toursWanderer.title')}
-          description={t('admin.toursWanderer.subtitle')}
-          enabled={toursWanderer}
-          onToggle={() => void toggleToursWanderer()}
-        />,
+        ...(wandererOffered
+          ? [
+              <AddonSubRow
+                key="wanderer"
+                icon={<WandererMark size={14} />}
+                title={t('admin.toursWanderer.title')}
+                description={t('admin.toursWanderer.subtitle')}
+                enabled={toursWanderer}
+                onToggle={() => void toggleToursWanderer()}
+              />,
+            ]
+          : []),
         ...mapSwitches.map(({ key, Icon, titleKey, subtitleKey, enabled, toggle }) => (
           <AddonSubRow
             key={key}

client/src/components/Admin/AdminMcpTokensPanel.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react'
 import { Key, Trash2, User, Loader2, Shield, KeyRound, Bot } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { useFormatDate } from '../../hooks/useDateFormat'
 import ConfirmDialog from '../shared/ConfirmDialog'
 import { Tooltip } from '../shared/Tooltip'
 import { fs } from '../shared/DialogShell'
@@ -64,9 +65,10 @@ export default function AdminMcpTokensPanel() {
     sessions, sessionsLoading, tokens, tokensLoading, expandedScopes, toggleScopes,
     revokeConfirmId, setRevokeConfirmId, deleteConfirmId, setDeleteConfirmId, handleRevoke, handleDelete,
   } = useMcpTokensAdmin()
-  const { t, locale } = useTranslation()
+  const { t } = useTranslation()
+  const { formatDate } = useFormatDate()
 
-  const date = (iso: string) => new Date(iso).toLocaleDateString(locale)
+  const date = (iso: string) => formatDate(new Date(iso))
 
   return (
     <div>

client/src/components/Admin/AdminPluginsPanel.tsx

@@ -11,6 +11,7 @@ import { type RangeWarning } from './useRangeBypass'
 import { deriveCaps } from './pluginCaps'
 import PluginPoiCategoryList from './PluginPoiCategoryList'
 import { useTranslation } from '../../i18n'
+import { useFormatDate } from '../../hooks/useDateFormat'
 import ConfirmDialog from '../shared/ConfirmDialog'
 import ToggleSwitch from '../Settings/ToggleSwitch'
 import CustomSelect from '../shared/CustomSelect'
@@ -33,6 +34,7 @@ import { usePluginsAdmin } from './plugins/usePluginsAdmin'
 import PluginFilterMenu from './plugins/PluginFilterMenu'
 import PluginInstalledRow from './plugins/PluginInstalledRow'
 import PluginSecurityDialog from './plugins/PluginSecurityDialog'
+import VersionLine from './plugins/VersionLine'
 
 /**
  * Admin → Plugins (#plugins). A full plugin-management surface: a segmented
@@ -303,7 +305,7 @@ export default function AdminPluginsPanel() {
 
       {versionPicker && (
         <VersionPickerDialog plugin={versionPicker.plugin} versions={versionPicker.versions} failed={versionPicker.failed}
-          busy={busy} t={t} locale={locale} onPick={pickVersion} onClose={() => setVersionPicker(null)} />
+          busy={busy} t={t} onPick={pickVersion} onClose={() => setVersionPicker(null)} />
       )}
 
       <ConfirmDialog
@@ -745,6 +747,7 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
   onInstall: (id: string, version?: string, warn?: RangeWarning) => void; onClose: () => void; t: T; locale: string
 }) {
   const { detail, failed } = usePluginDetail(item.id)
+  const { formatDate } = useFormatDate()
 
   const manifest = detail?.manifest ?? null
   const permissions = manifest?.permissions ?? []
@@ -910,7 +913,7 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
           {(item.trek || item.minTrekVersion) && (
             <Meta k={t('admin.plugins.metaRequires')} v={item.trek ? `TREK ${item.trek}` : `TREK ${item.minTrekVersion}+`} />
           )}
-          {item.reviewedAt && <Meta k={t('admin.plugins.metaReviewed')} v={new Date(item.reviewedAt).toLocaleDateString(locale)} />}
+          {item.reviewedAt && <Meta k={t('admin.plugins.metaReviewed')} v={formatDate(new Date(item.reviewedAt))} />}
           {typeof item.downloadCount === 'number' && item.downloadCount > 0 && (
             <Meta k={t('admin.plugins.downloads')} v={item.downloadCount.toLocaleString(locale)} />
           )}
@@ -934,7 +937,7 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
                 ) : (
                   <span className="text-content-faint" style={fs(11.5)}>{t('admin.plugins.versionNeedsTrek', { range: v.trek ?? '' })}</span>
                 )}>
-                <VersionLine v={v} locale={locale} />
+                <VersionLine v={v} />
               </DialogListItem>
             ))}
           </DialogList>
@@ -944,17 +947,6 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
   )
 }
 
-/** A version number with its date and, when the author signed it, a quiet tick. */
-function VersionLine({ v, locale }: { v: VersionInfo; locale: string }) {
-  return (
-    <span className="flex flex-wrap items-center gap-x-2.5 gap-y-0.5">
-      <span className={`font-geist font-semibold tabular-nums ${v.compatible ? 'text-content' : 'text-content-faint'}`} style={fs(12.5)}>v{v.version}</span>
-      {v.publishedAt && <span className="text-content-faint" style={fs(11.5)}>{new Date(v.publishedAt).toLocaleDateString(locale)}</span>}
-      {v.signed && <ShieldCheck size={13} className="flex-none text-success" />}
-    </span>
-  )
-}
-
 function Meta({ k, v }: { k: string; v: string }) {
   return (
     <div className="min-w-0 rounded-[12px] border border-edge-faint bg-surface-card px-3 py-2.5">
@@ -970,9 +962,9 @@ function Meta({ k, v }: { k: string; v: string }) {
  * caller routes a DOWNGRADE through the data-risk confirm), an incompatible one is
  * explained and never offered.
  */
-function VersionPickerDialog({ plugin, versions, failed, busy, t, locale, onPick, onClose }: {
+function VersionPickerDialog({ plugin, versions, failed, busy, t, onPick, onClose }: {
   plugin: PluginRow; versions: VersionInfo[] | null; failed: boolean; busy: string | null
-  t: T; locale: string; onPick: (version: string) => void; onClose: () => void
+  t: T; onPick: (version: string) => void; onClose: () => void
 }) {
   return (
     <DialogShell
@@ -994,7 +986,7 @@ function VersionPickerDialog({ plugin, versions, failed, busy, t, locale, onPick
             const current = v.version === plugin.version
             return (
               <div key={v.version} data-testid={`version-row-${v.version}`} className="flex items-center gap-3 px-3.5 py-2.5">
-                <div className="min-w-0 flex-1"><VersionLine v={v} locale={locale} /></div>
+                <div className="min-w-0 flex-1"><VersionLine v={v} /></div>
                 {current ? (
                   <StatusPill tone="success" icon={<Check size={11} />}>{t('admin.plugins.installed')}</StatusPill>
                 ) : v.compatible ? (

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

@@ -1,4 +1,4 @@
-// FE-ADMIN-DUS-001 to FE-ADMIN-DUS-029
+// FE-ADMIN-DUS-001 to FE-ADMIN-DUS-031
 import { render, screen, waitFor, within, fireEvent } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
@@ -70,7 +70,7 @@ function cartoInput(): HTMLInputElement {
 }
 
 /** Opens a CustomSelect by its trigger label and picks an option from the portal. */
-async function pickFromSelect(user: ReturnType<typeof userEvent.setup>, trigger: string, option: string) {
+async function pickFromSelect(user: ReturnType<typeof userEvent.setup>, trigger: string, option: string | RegExp) {
   await user.click(screen.getByRole('button', { name: trigger }));
   const choices = await screen.findAllByRole('button', { name: option });
   await user.click(choices[choices.length - 1]);
@@ -481,3 +481,34 @@ describe('DefaultUserSettingsTab week start (#2029)', () => {
     await waitFor(() => expect(puts).toEqual([{ week_start: 'sunday' }, { week_start: null }]));
   });
 });
+
+describe('DefaultUserSettingsTab date format (#2971)', () => {
+  beforeEach(() => {
+    resetAllStores();
+    seedStore(useAuthStore, { isAuthenticated: true, user: buildAdmin() });
+  });
+
+  it('FE-ADMIN-DUS-030: the date-format default saves its own key', async () => {
+    const user = userEvent.setup();
+    const { puts } = stubDefaults({ date_format: 'YYYY-MM-DD' });
+    render(<DefaultUserSettingsTab />);
+    await screen.findByText('Default User Settings');
+
+    // The choices are labelled by how they write 31 December.
+    await pickFromSelect(user, '2026-12-31', '31.12.2026');
+
+    await waitFor(() => expect(puts).toEqual([{ date_format: 'DD.MM.YYYY' }]));
+    await waitFor(() => expect(screen.getByRole('button', { name: '31.12.2026' })).toBeInTheDocument());
+  });
+
+  it('FE-ADMIN-DUS-031: auto is offered with the example of the interface language', async () => {
+    const user = userEvent.setup();
+    const { puts } = stubDefaults({ date_format: 'DD/MM/YYYY' });
+    render(<DefaultUserSettingsTab />);
+    await screen.findByText('Default User Settings');
+
+    await pickFromSelect(user, '31/12/2026', /\(12\/31\/2026\)/);
+
+    await waitFor(() => expect(puts).toEqual([{ date_format: 'auto' }]));
+  });
+});

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -10,9 +10,10 @@ import { MapView } from '../Map/MapView'
 import { SYMBOLS, currenciesWith } from '../Budget/BudgetPanel.constants'
 import type { DistanceUnit, WeekStart } from '../../types'
 import { weekStartOptions } from '../../utils/calendarWeek'
+import { dateFormatOptions } from '../../utils/dateFormat'
 import { withTileApiKey } from '../../utils/tileUrl'
 import { defaultStyleForProvider } from '../Map/glProviders'
-import { MAP_PRESETS, type MapProvider } from '../Settings/mapSettingsModel'
+import type { MapProvider } from '../Settings/mapSettingsModel'
 import RoutingInstanceFields from './RoutingInstanceFields'
 import { useDefaultUserSettings, type Defaults } from './useDefaultUserSettings'
 
@@ -66,26 +67,40 @@ function errorText(err: unknown, fallback: string): string {
   return err instanceof Error ? err.message : fallback
 }
 
+interface ResetProps {
+  shown: boolean
+  onReset: () => void
+  label: string
+}
+
+// Inside the row's own <label>, after the name: the link only shows once the
+// default is set, and the name stays the label's text.
+function ResetButton({ shown, onReset, label }: ResetProps): React.ReactElement | null {
+  if (!shown) return null
+  return (
+    <button type="button"
+      onClick={onReset}
+      className="ms-2 align-baseline font-geist font-medium normal-case tracking-normal text-content-muted underline decoration-edge underline-offset-2 hover:text-content"
+      style={fs(11)}
+    >
+      {label}
+    </button>
+  )
+}
+
 export default function DefaultUserSettingsTab(): React.ReactElement {
   const { t, locale } = useTranslation()
   const {
-    defaults, loaded, managed, isSet, save, reset, mapTileUrl, setMapTileUrl, mapboxToken, setMapboxToken,
+    defaults, loaded, managed, presets, canMapbox, isSet, save, reset, mapTileUrl, setMapTileUrl, mapboxToken, setMapboxToken,
     cartoKey, setCartoKey, mapboxStyle, setMapboxStyle, mapPreviewPlaces, mapProvider, glStylePresets, styleKey,
     saveMapProvider, pickTilePreset, pickStylePreset, commitStyle,
   } = useDefaultUserSettings({ errorMessage: errorText, previewCreatedAt: () => String(new Date()) })
 
-  // Inside the row's own <label>, after the name: the link only shows once the
-  // default is set, and the name stays the label's text.
-  const ResetButton = ({ field }: { field: keyof Defaults }) =>
-    isSet(field) ? (
-      <button type="button"
-        onClick={() => reset(field)}
-        className="ms-2 align-baseline font-geist font-medium normal-case tracking-normal text-content-muted underline decoration-edge underline-offset-2 hover:text-content"
-        style={fs(11)}
-      >
-        {t('admin.defaultSettings.resetToBuiltIn')}
-      </button>
-    ) : null
+  const resetOf = (field: keyof Defaults): ResetProps => ({
+    shown: isSet(field),
+    onReset: () => reset(field),
+    label: t('admin.defaultSettings.resetToBuiltIn'),
+  })
 
   if (!loaded) {
     return (
@@ -118,7 +133,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       <Section title={t('admin.defaultSettings.title')} icon={Settings2}>
       <SettingRows>
       {/* Color Mode */}
-      <ChoiceRow label={<>{t('settings.colorMode')} <ResetButton field="dark_mode" /></>}>
+      <ChoiceRow label={<>{t('settings.colorMode')} <ResetButton {...resetOf('dark_mode')} /></>}>
         <Segmented<string>
           label={t('settings.colorMode')}
           value={colorModeValue(darkMode)}
@@ -132,7 +147,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       </ChoiceRow>
 
       {/* Temperature */}
-      <ChoiceRow label={<>{t('settings.temperature')} <ResetButton field="temperature_unit" /></>}>
+      <ChoiceRow label={<>{t('settings.temperature')} <ResetButton {...resetOf('temperature_unit')} /></>}>
         <Segmented<string>
           label={t('settings.temperature')}
           value={defaults.temperature_unit ?? ''}
@@ -145,7 +160,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       </ChoiceRow>
 
       {/* Distance */}
-      <ChoiceRow label={<>{t('settings.distance')} <ResetButton field="distance_unit" /></>}>
+      <ChoiceRow label={<>{t('settings.distance')} <ResetButton {...resetOf('distance_unit')} /></>}>
         <Segmented<DistanceUnit | ''>
           label={t('settings.distance')}
           value={defaults.distance_unit ?? ''}
@@ -158,7 +173,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       </ChoiceRow>
 
       {/* Time Format */}
-      <ChoiceRow label={<>{t('settings.timeFormat')} <ResetButton field="time_format" /></>}>
+      <ChoiceRow label={<>{t('settings.timeFormat')} <ResetButton {...resetOf('time_format')} /></>}>
         <Segmented<string>
           label={t('settings.timeFormat')}
           value={defaults.time_format ?? ''}
@@ -171,7 +186,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       </ChoiceRow>
 
       {/* Week start: the first column of every date picker (#2029) */}
-      <ChoiceRow label={<>{t('settings.weekStart')} <ResetButton field="week_start" /></>}>
+      <ChoiceRow label={<>{t('settings.weekStart')} <ResetButton {...resetOf('week_start')} /></>}>
         <Segmented<WeekStart | ''>
           label={t('settings.weekStart')}
           value={defaults.week_start ?? ''}
@@ -180,8 +195,19 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
         />
       </ChoiceRow>
 
+      {/* Date format: every date field and numeric date (#2971) */}
+      <ChoiceRow label={<>{t('settings.dateFormat')} <ResetButton {...resetOf('date_format')} /></>}>
+        <div className="w-[220px] max-w-full">
+          <CustomSelect
+            value={defaults.date_format ?? ''}
+            onChange={value => { if (value) void save({ date_format: String(value) as Defaults['date_format'] }) }}
+            options={dateFormatOptions(locale, t('settings.dateFormatAuto'))}
+          />
+        </div>
+      </ChoiceRow>
+
       {/* Default Currency */}
-      <ChoiceRow label={<>{t('settings.currency')} <ResetButton field="default_currency" /></>}>
+      <ChoiceRow label={<>{t('settings.currency')} <ResetButton {...resetOf('default_currency')} /></>}>
         <div className="w-[220px] max-w-full">
           <CustomSelect
             value={defaults.default_currency || ''}
@@ -194,7 +220,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       </ChoiceRow>
 
       {/* Blur Booking Codes */}
-      <ChoiceRow label={<>{t('settings.blurBookingCodes')} <ResetButton field="blur_booking_codes" /></>}>
+      <ChoiceRow label={<>{t('settings.blurBookingCodes')} <ResetButton {...resetOf('blur_booking_codes')} /></>}>
         <Segmented<string>
           label={t('settings.blurBookingCodes')}
           value={onOffValue(defaults.blur_booking_codes)}
@@ -211,13 +237,13 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
 
       <Section title={t('settings.map')} icon={MapIcon}>
       {/* Map Tile URL */}
-      <EditorField label={<>{t('settings.mapTemplate')}<ResetButton field="map_tile_url" /></>} hint={t('settings.mapDefaultHint')}>
+      <EditorField label={<>{t('settings.mapTemplate')}<ResetButton {...resetOf('map_tile_url')} /></>} hint={t('settings.mapDefaultHint')}>
         <div className="flex flex-col gap-2">
           <CustomSelect
             value={mapTileUrl}
             onChange={pickTilePreset}
             placeholder={t('settings.mapTemplatePlaceholder.select')}
-            options={MAP_PRESETS.map(p => ({ value: p.url, label: p.name }))}
+            options={presets.map(p => ({ value: p.url, label: p.name }))}
           />
           <input
             type="text"
@@ -232,7 +258,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       {/* The key comes with the instance on a managed install, injected when the
           settings are read. A field here would only let somebody save a worse one. */}
       {!managed && (
-        <EditorField label={<>{t('admin.defaultSettings.cartoKey')}<ResetButton field="carto_api_key" /></>} hint={t('admin.defaultSettings.cartoKeyHint')}>
+        <EditorField label={<>{t('admin.defaultSettings.cartoKey')}<ResetButton {...resetOf('carto_api_key')} /></>} hint={t('admin.defaultSettings.cartoKeyHint')}>
           <input
             type="text"
             value={cartoKey}
@@ -273,7 +299,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       <SettingRows>
         <ChoiceRow
           stacked
-          label={<>{t('admin.defaultSettings.mapProvider')} <ResetButton field="map_provider" /></>}
+          label={<>{t('admin.defaultSettings.mapProvider')} <ResetButton {...resetOf('map_provider')} /></>}
           hint={t('admin.defaultSettings.mapProviderHint')}
         >
           <Segmented<MapProvider>
@@ -283,7 +309,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
             onChange={saveMapProvider}
             options={[
               { value: 'leaflet', label: t('admin.defaultSettings.providerLeaflet') },
-              { value: 'mapbox-gl', label: t('admin.defaultSettings.providerMapbox') },
+              ...(canMapbox ? [{ value: 'mapbox-gl' as const, label: t('admin.defaultSettings.providerMapbox') }] : []),
               { value: 'maplibre-gl', label: t('admin.defaultSettings.providerMapLibre') },
             ]}
           />
@@ -293,7 +319,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           settings are read. A field here would only let somebody save a worse one. */}
         {mapProvider === 'mapbox-gl' && !managed && (
           <div className={FIELD_ROW}>
-            <EditorField label={<>{t('admin.defaultSettings.mapboxToken')}<ResetButton field="mapbox_access_token" /></>} hint={t('admin.defaultSettings.mapboxTokenHint')}>
+            <EditorField label={<>{t('admin.defaultSettings.mapboxToken')}<ResetButton {...resetOf('mapbox_access_token')} /></>} hint={t('admin.defaultSettings.mapboxTokenHint')}>
               <input
                 type="text"
                 value={mapboxToken}
@@ -310,7 +336,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
 
         {mapProvider !== 'leaflet' && (
           <div className={FIELD_ROW}>
-            <EditorField label={<>{t('admin.defaultSettings.mapboxStyle')}<ResetButton field={styleKey} /></>}>
+            <EditorField label={<>{t('admin.defaultSettings.mapboxStyle')}<ResetButton {...resetOf(styleKey)} /></>}>
               <div className="flex flex-col gap-2">
                 <CustomSelect
                   value={mapboxStyle}
@@ -333,7 +359,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
 
         {mapProvider === 'mapbox-gl' && (
           <>
-          <ChoiceRow label={<>{t('admin.defaultSettings.mapbox3d')} <ResetButton field="mapbox_3d_enabled" /></>}>
+          <ChoiceRow label={<>{t('admin.defaultSettings.mapbox3d')} <ResetButton {...resetOf('mapbox_3d_enabled')} /></>}>
             <Segmented<string>
               label={t('admin.defaultSettings.mapbox3d')}
               value={onOffValue(defaults.mapbox_3d_enabled ?? true)}
@@ -345,7 +371,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
             />
           </ChoiceRow>
 
-          <ChoiceRow label={<>{t('admin.defaultSettings.mapboxQuality')} <ResetButton field="mapbox_quality_mode" /></>}>
+          <ChoiceRow label={<>{t('admin.defaultSettings.mapboxQuality')} <ResetButton {...resetOf('mapbox_quality_mode')} /></>}>
             <Segmented<string>
               label={t('admin.defaultSettings.mapboxQuality')}
               value={onOffValue(defaults.mapbox_quality_mode ?? false)}

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

@@ -1,4 +1,4 @@
-// FE-ADMIN-CONTRIB-001 to FE-ADMIN-CONTRIB-011
+// FE-ADMIN-CONTRIB-001 to FE-ADMIN-CONTRIB-013
 import userEvent from '@testing-library/user-event';
 import type { PlaceContribDecisionRequest, PlaceContribState } from '@trek/shared';
 import { http, HttpResponse } from 'msw';
@@ -201,4 +201,23 @@ describe('PlaceContribPanel', () => {
       vi.useRealTimers();
     }
   });
+
+  it('FE-ADMIN-CONTRIB-012: standing alone, a card the operator switched off is not shown', async () => {
+    const asked = vi.fn();
+    server.use(
+      http.get('/api/admin/places-contribute', () => {
+        asked();
+        return HttpResponse.json({ ...UNDECIDED, eligible: false, ineligibleReason: 'env_off', showPrompt: false });
+      })
+    );
+    const { container } = render(<PlaceContribPanel hideWhenSwitchedOff />);
+    await waitFor(() => expect(asked).toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('FE-ADMIN-CONTRIB-013: standing alone, any other reason is still explained', async () => {
+    serve({ ...UNDECIDED, eligible: false, ineligibleReason: 'not_production', showPrompt: false });
+    render(<PlaceContribPanel hideWhenSwitchedOff />);
+    expect(await screen.findByText('admin.contribute.ineligible.not_production')).toBeInTheDocument();
+  });
 });

client/src/components/Admin/PlaceContribPanel.tsx

@@ -61,7 +61,15 @@ function Figures({ state, t }: { state: PlaceContribState; t: TranslationFn }) {
  * way to take everything back. Turning it on for the first time opens the same
  * prompt an admin gets on the first visit, so an agreement always comes from it.
  */
-export default function PlaceContribPanel() {
+/**
+ * Standing alone (managed settings), a card that can only say "not available"
+ * because the operator switched sharing off is a dead end.
+ */
+function hiddenAlone(state: PlaceContribState, alone: boolean): boolean {
+  return alone && state.ineligibleReason === 'env_off';
+}
+
+export default function PlaceContribPanel({ hideWhenSwitchedOff = false }: { hideWhenSwitchedOff?: boolean } = {}) {
   const { t } = useTranslation();
   const toast = useToast();
   const contrib = usePlaceContrib();
@@ -70,6 +78,7 @@ export default function PlaceContribPanel() {
   const [confirm, setConfirm] = useState<'off' | 'withdraw' | null>(null);
 
   if (!state) return null;
+  if (hiddenAlone(state, hideWhenSwitchedOff)) return null;
   const status = contribStatus(state);
   const agreed = state.consent.decision === 'agreed' && state.consent.termsVersion === state.termsVersion;
   // The prompt opens by itself once per visit while the server asks for it.

client/src/components/Admin/PlaceContribPrompt.tsx

@@ -175,7 +175,7 @@ export default function PlaceContribPrompt({
           ))}
         </ul>
         <p className="m-0 leading-normal text-content-muted" style={fs(12, 'body')}>
-          {t('admin.contribute.prompt.how')}
+          {t('admin.contribute.prompt.how')} {t('admin.contribute.prompt.past')}
         </p>
       </section>
 

client/src/components/Admin/addons/useAddonManager.ts

@@ -7,6 +7,7 @@ import { cycleMapAdminApi, hikingMapAdminApi, skiRoutingAdminApi } from '../../.
 import { wandererAdminApi } from '../../../api/wanderer';
 import { useTranslation } from '../../../i18n';
 import { useAddonStore } from '../../../store/addonStore';
+import { useAuthStore } from '../../../store/authStore';
 import { useToast } from '../../shared/Toast';
 import { type Addon, type ProviderOption, isPhotosAddon } from './addonModel';
 import { aiAddonsOf, isAiAddon } from './aiAddons';
@@ -36,6 +37,9 @@ export function useAddonManager() {
   const [addons, setAddons] = useState<Addon[]>([]);
   const [loading, setLoading] = useState(true);
   const [toursWanderer, setToursWanderer] = useState(false);
+  // wanderer sends a user's searches to a server of their choosing, which a
+  // managed install's terms do not cover; the operator decides, not the admin.
+  const wandererOffered = !useAuthStore((s) => s.managed);
   const [toursHikingMap, setToursHikingMap] = useState(false);
   const [toursCycleMap, setToursCycleMap] = useState(false);
   const [toursSkiRouting, setToursSkiRouting] = useState(false);
@@ -160,6 +164,7 @@ export function useAddonManager() {
     providerOptions,
     documentProviderOptions,
     toursWanderer,
+    wandererOffered,
     toggleToursWanderer,
     mapSwitches,
   };

client/src/components/Admin/paddle/PaddleAutoLoadParts.tsx

@@ -1,6 +1,8 @@
 import type { PaddleRegionAutoMode, PaddleRegionPending } from '@trek/shared';
 import { Ban, CloudDownload, Hand, Loader2, Power, Sparkles } from 'lucide-react';
+import { useDateFormat } from '../../../hooks/useDateFormat';
 import { useTranslation } from '../../../i18n';
+import { formatDisplayDate } from '../../../utils/dateFormat';
 import { ChoiceChips, SettingRows, SETTINGS_BUTTON, SettingsHint, StatusPill } from '../../Settings/settingsKit';
 import { LABEL, Segmented } from '../../shared/dialogParts';
 import { fs } from '../../shared/DialogShell';
@@ -71,8 +73,9 @@ export function AutoLoadSettings({ admin }: { admin: Admin }) {
 function RequestRow({ request, admin }: { request: PaddleRegionPending; admin: Admin }) {
   const { t, language } = useTranslation();
   const megabytes = useMegabytes();
+  const dateFormat = useDateFormat();
   const busy = admin.busyId === request.id;
-  const date = new Date(request.requested_at).toLocaleDateString(language, { dateStyle: 'medium' });
+  const date = formatDisplayDate(new Date(request.requested_at), language, { dateStyle: 'medium' }, dateFormat);
   return (
     <div
       className={`flex flex-wrap items-center gap-x-3 gap-y-2 py-2.5 pe-2 ps-3 ${busy ? 'opacity-60' : ''}`}

client/src/components/Admin/paddle/PaddleRegionsPanel.tsx

@@ -1,7 +1,9 @@
 import type { PaddleRegion, PaddleRegionCatalogEntry } from '@trek/shared';
 import { Check, ChevronRight, Loader2, Plus, RefreshCw, Search, Trash2, Waves, WifiOff } from 'lucide-react';
 import { useId } from 'react';
+import { useDateFormat } from '../../../hooks/useDateFormat';
 import { useTranslation } from '../../../i18n';
+import { formatDisplayDate } from '../../../utils/dateFormat';
 import {
   SettingRows,
   SETTINGS_BUTTON,
@@ -258,9 +260,10 @@ function RegionNetwork({ region }: { region: PaddleRegion }) {
 
 function RegionRow({ region, admin }: { region: PaddleRegion; admin: Admin }) {
   const { t, language } = useTranslation();
+  const dateFormat = useDateFormat();
   const busy = admin.busyId === region.id;
   const date = region.source_timestamp
-    ? new Date(region.source_timestamp).toLocaleDateString(language, { dateStyle: 'medium' })
+    ? formatDisplayDate(new Date(region.source_timestamp), language, { dateStyle: 'medium' }, dateFormat)
     : null;
   return (
     <div

client/src/components/Admin/plugins/VersionLine.tsx

@@ -0,0 +1,25 @@
+import { ShieldCheck } from 'lucide-react';
+import { useFormatDate } from '../../../hooks/useDateFormat';
+import { fs } from '../../shared/DialogShell';
+import type { VersionInfo } from './pluginModel';
+
+/** A version number with its date and, when the author signed it, a quiet tick. */
+export default function VersionLine({ v }: { v: VersionInfo }) {
+  const { formatDate } = useFormatDate();
+  return (
+    <span className="flex flex-wrap items-center gap-x-2.5 gap-y-0.5">
+      <span
+        className={`font-geist font-semibold tabular-nums ${v.compatible ? 'text-content' : 'text-content-faint'}`}
+        style={fs(12.5)}
+      >
+        v{v.version}
+      </span>
+      {v.publishedAt && (
+        <span className="text-content-faint" style={fs(11.5)}>
+          {formatDate(new Date(v.publishedAt))}
+        </span>
+      )}
+      {v.signed && <ShieldCheck size={13} className="flex-none text-success" />}
+    </span>
+  );
+}

client/src/components/Admin/storage/AdminStoragePanel.test.tsx

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { MASKED_SETTING_VALUE, type StorageAdminState, type StorageCategory, type StorageConfig } from '@trek/shared';
+import { MASKED_SETTING_VALUE, STORAGE_RECLAIM_CATEGORIES, type StorageAdminState, type StorageCategory, type StorageConfig, type StorageReclaimReport } from '@trek/shared';
 import { server } from '../../../../tests/helpers/msw/server';
 import { fireEvent, render, screen, waitFor, within } from '../../../../tests/helpers/render';
 import { ToastContainer } from '../../shared/Toast';
@@ -11,6 +11,16 @@ const S3_MASKED = {
   secretAccessKey: MASKED_SETTING_VALUE, region: 'us-east-1', keyPrefix: '', retries: 1, timeoutMs: 30000,
 };
 
+/** A last check with three covers a week old and two younger ones; every other category never reclaimed. */
+function reclaimReport(): StorageReclaimReport {
+  const categories = Object.fromEntries(
+    STORAGE_RECLAIM_CATEGORIES.map((c) => [c, { objects: 0, unreferenced: { objects: 0, bytes: 0 }, eligible: { objects: 0, bytes: 0 }, deleted: { objects: 0, bytes: 0 }, confirmationRequired: false, skipped: 'not_reclaimed' as const }]),
+  ) as StorageReclaimReport['categories'];
+  categories.covers = { objects: 40, unreferenced: { objects: 5, bytes: 5000 }, eligible: { objects: 3, bytes: 3000 }, deleted: { objects: 0, bytes: 0 }, confirmationRequired: false, skipped: null };
+  categories.places = { objects: 10, unreferenced: { objects: 3, bytes: 300 }, eligible: { objects: 0, bytes: 0 }, deleted: { objects: 0, bytes: 0 }, confirmationRequired: true, skipped: null };
+  return { startedAt: Date.now() - 60_000, finishedAt: Date.now() - 30_000, mode: 'report', stopped: null, categories };
+}
+
 function baseState(overrides: Partial<StorageAdminState> = {}): StorageAdminState {
   return {
     backends: [
@@ -35,6 +45,7 @@ function baseState(overrides: Partial<StorageAdminState> = {}): StorageAdminStat
     },
     health: { replicaFailures: [] },
     seedFilePresent: false,
+    reclaim: null,
     usage: null,
     backfills: [],
     migrations: [],
@@ -1217,4 +1228,55 @@ describe('AdminStoragePanel', () => {
     expect(within(row).getByText(/Sync failed: disk full/)).toBeInTheDocument();
     expect(within(row).getByRole('button', { name: 'Sync now' })).toBeInTheDocument();
   });
+
+  it('FE-ADMIN-STOR-051: unreferenced files: the last check shows, the switch, the check and a confirmation go to the server', async () => {
+    const lastRun = reclaimReport();
+    let put: unknown = null;
+    let runs = 0;
+    let confirm: unknown = null;
+    server.use(
+      http.put('/api/admin/storage/reclaim', async ({ request }) => {
+        put = await request.json();
+        return HttpResponse.json({ deleteEnabled: true, running: false, lastRun, lastDeleteRun: null });
+      }),
+      http.post('/api/admin/storage/reclaim/run', () => {
+        runs += 1;
+        return HttpResponse.json({ started: true }, { status: 202 });
+      }),
+      http.post('/api/admin/storage/reclaim/confirm', async ({ request }) => {
+        confirm = await request.json();
+        return HttpResponse.json({ deleteEnabled: true, running: false, lastRun, lastDeleteRun: null });
+      }),
+    );
+    await renderPanel(baseState({ reclaim: { deleteEnabled: false, running: false, lastRun, lastDeleteRun: null } }));
+    // Once a check started, the state the panel polls says it runs.
+    server.use(
+      http.get('/api/admin/storage', () =>
+        HttpResponse.json(baseState({ reclaim: { deleteEnabled: true, running: runs > 0, lastRun, lastDeleteRun: null } })),
+      ),
+    );
+    expect(screen.getByText('Unreferenced files')).toBeInTheDocument();
+    expect(within(screen.getByTestId('storage-reclaim-covers')).getByText(/Can be freed/)).toBeInTheDocument();
+    expect(within(screen.getByTestId('storage-reclaim-places')).getByText(/More than a fifth/)).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Delete unreferenced files' }));
+    await waitFor(() => expect(put).toEqual({ deleteEnabled: true }));
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Delete unreferenced files' })).toHaveAttribute('aria-pressed', 'true'));
+    fireEvent.click(within(screen.getByTestId('storage-reclaim-places')).getByRole('button', { name: 'Confirm' }));
+    await waitFor(() => expect(confirm).toEqual({ category: 'places', unreferenced: 3 }));
+    fireEvent.click(screen.getByRole('button', { name: 'Check now' }));
+    await waitFor(() => expect(runs).toBe(1));
+    // The check runs in the background: the panel shows it running until the state says otherwise.
+    await waitFor(() => expect(screen.getByText('Checking…')).toBeInTheDocument());
+  });
+
+  it('FE-ADMIN-STOR-051b: a refused check names the reason in the operator\'s language', async () => {
+    server.use(
+      http.post('/api/admin/storage/reclaim/run', () =>
+        HttpResponse.json({ error: 'busy', code: 'reclaim_busy' }, { status: 409 }),
+      ),
+    );
+    await renderPanel(baseState({ reclaim: { deleteEnabled: false, running: false, lastRun: null, lastDeleteRun: null } }));
+    fireEvent.click(screen.getByRole('button', { name: 'Check now' }));
+    await waitFor(() => expect(screen.getByText('Another storage task is running. Try again in a moment.')).toBeInTheDocument());
+  });
 });

client/src/components/Admin/storage/AdminStoragePanel.tsx

@@ -38,6 +38,7 @@ import {
   StatusPill,
 } from '../../Settings/settingsKit'
 import BackendForm from './BackendForm'
+import StorageReclaimSection from './StorageReclaimSection'
 import { CACHE_CATEGORIES, primaryNameOf } from './storageModel'
 import { categoryNames, migrationPromptLine, useStoragePanel } from './useStoragePanel'
 
@@ -96,6 +97,7 @@ export default function AdminStoragePanel(): React.ReactElement {
   const {
     admin, editing, setEditing, confirmRemove, setConfirmRemove, syncPrompt, setSyncPrompt, migratePrompt,
     closeMigratePrompt, migrationQueue, handleCancelMigration, handleRefreshStats, handleStartBackfill, handleCancelBackfill, loaded,
+    reclaim, reclaimChecking, reclaimSaving, reclaimConfirming, handleReclaimCheck, handleReclaimDelete, handleReclaimConfirm,
   } = useStoragePanel()
   // Open/closed only: the render below and moveAndSave both recompute
   // computeMigrationCandidates(draft, state) fresh rather than reading the
@@ -627,6 +629,18 @@ export default function AdminStoragePanel(): React.ReactElement {
         </div>
       )}
 
+      <div className="mt-5">
+        <StorageReclaimSection
+          reclaim={reclaim}
+          checking={reclaimChecking}
+          saving={reclaimSaving}
+          confirming={reclaimConfirming}
+          onConfirm={(request) => void handleReclaimConfirm(request)}
+          onCheck={() => void handleReclaimCheck()}
+          onDelete={(enabled) => void handleReclaimDelete(enabled)}
+        />
+      </div>
+
       {editing && (
         <BackendForm
           initial={editing.initial}

client/src/components/Admin/storage/StorageReclaimSection.tsx

@@ -0,0 +1,167 @@
+import { Eraser, Loader2, ScanSearch } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from '../../../i18n';
+import { formatBytes } from '../../../utils/formatBytes';
+import { relativeTime } from '../../../utils/relativeTime';
+import Section from '../../Settings/Section';
+import ToggleSwitch from '../../Settings/ToggleSwitch';
+import { SETTINGS_BUTTON, SettingRow, SettingRows, SettingsHint, StatusPill } from '../../Settings/settingsKit';
+import { fs } from '../../shared/DialogShell';
+import type { ReclaimCount, ReclaimView } from './reclaimModel';
+
+interface Props {
+  reclaim: ReclaimView;
+  /** A check was asked for or is running. */
+  checking: boolean;
+  /** The switch is on its way to the server. */
+  saving: boolean;
+  onCheck: () => void;
+  onDelete: (enabled: boolean) => void;
+  /** The category whose confirmation is on its way. */
+  confirming: ReclaimView['lines'][number]['category'] | null;
+  onConfirm: (request: { category: ReclaimView['lines'][number]['category']; unreferenced: number }) => void;
+}
+
+/**
+ * Unreferenced files on the desktop storage panel: what the last check found,
+ * the switch that lets the nightly run delete them, a check on demand and the
+ * confirmation a category with an unusually large share of unused files waits
+ * for. The phone shows the same through MStorageReclaimCard, off the same view model.
+ */
+export default function StorageReclaimSection({
+  reclaim,
+  checking,
+  saving,
+  onCheck,
+  onDelete,
+  confirming,
+  onConfirm,
+}: Props): React.ReactElement {
+  const { t, locale } = useTranslation();
+  const count = (c: ReclaimCount) => t('storage.usage.line', { count: c.objects, size: formatBytes(c.bytes) });
+  const checked = reclaim.checkedAt !== null;
+
+  return (
+    <Section
+      title={t('storage.reclaim.title')}
+      icon={Eraser}
+      hint={t('storage.reclaim.hint')}
+      action={
+        <button
+          type="button"
+          className={SETTINGS_BUTTON}
+          style={fs(12.5, 'body')}
+          onClick={onCheck}
+          disabled={checking}
+        >
+          {checking ? (
+            <Loader2 size={14} strokeWidth={2.2} className="animate-spin" />
+          ) : (
+            <ScanSearch size={14} strokeWidth={2.2} />
+          )}
+          {checking ? t('storage.reclaim.running') : t('storage.reclaim.check')}
+        </button>
+      }
+    >
+      <SettingRows>
+        <SettingRow
+          label={t('storage.reclaim.delete')}
+          hint={t('storage.reclaim.deleteHint')}
+          dimmed={saving}
+          control={
+            <ToggleSwitch
+              on={reclaim.deleteEnabled}
+              onToggle={() => onDelete(!reclaim.deleteEnabled)}
+              label={t('storage.reclaim.delete')}
+              disabled={saving}
+            />
+          }
+        />
+        <div className="px-3.5 py-3" data-testid="storage-reclaim-summary">
+          <p className="m-0 text-content-faint" style={fs(11.5)}>
+            {reclaim.checkedAt !== null
+              ? t('storage.reclaim.checked', { age: relativeTime(reclaim.checkedAt, locale) })
+              : t('storage.reclaim.never')}
+          </p>
+          {reclaim.stopped && (
+            <p role="note" className="m-0 mt-1.5 leading-snug text-warning" style={fs(11.5)}>
+              {t(reclaim.stopped === 'failed' ? 'storage.reclaim.stoppedFailed' : 'storage.reclaim.stopped')}
+            </p>
+          )}
+          {checked && (
+            <div className="mt-2.5 grid grid-cols-1 gap-2 sm:grid-cols-3">
+              <Figure label={t('storage.reclaim.freeable')} value={count(reclaim.freeable)} />
+              <Figure label={t('storage.reclaim.waiting')} value={count(reclaim.waiting)} />
+              <Figure label={t('storage.reclaim.deleted')} value={count(reclaim.freed)} />
+            </div>
+          )}
+          {checked && !reclaim.stopped && reclaim.lines.length === 0 && (
+            <SettingsHint className="mt-2.5">{t('storage.reclaim.nothing')}</SettingsHint>
+          )}
+          {reclaim.lines.length > 0 && (
+            <ul className="m-0 mt-3 flex list-none flex-col gap-2 p-0">
+              {reclaim.lines.map((line) => (
+                <li
+                  key={line.category}
+                  data-testid={`storage-reclaim-${line.category}`}
+                  className="flex flex-col gap-1"
+                >
+                  <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+                    <span className="font-medium text-content-secondary" style={fs(12.5, 'body')}>
+                      {t(`storage.category.${line.category}`)}
+                    </span>
+                    {line.freeable.objects > 0 && (
+                      <span className="font-geist tabular-nums text-content-faint" style={fs(11.5)}>
+                        {t('storage.reclaim.freeable')}: {count(line.freeable)}
+                      </span>
+                    )}
+                    {line.waiting.objects > 0 && (
+                      <span className="font-geist tabular-nums text-content-faint" style={fs(11.5)}>
+                        {t('storage.reclaim.waiting')}: {count(line.waiting)}
+                      </span>
+                    )}
+                    {line.skipped && (
+                      <StatusPill tone="warning">{t(`storage.reclaim.skip.${line.skipped}`)}</StatusPill>
+                    )}
+                  </div>
+                  {line.confirmationRequired && (
+                    <div className="flex flex-wrap items-center gap-2.5 rounded-[10px] bg-warning-soft px-2.5 py-1.5">
+                      <p className="m-0 min-w-0 flex-1 basis-56 leading-snug text-warning" style={fs(11.5)}>
+                        {t('storage.reclaim.confirmNeeded')}
+                      </p>
+                      <button
+                        type="button"
+                        className={SETTINGS_BUTTON}
+                        style={fs(12, 'body')}
+                        onClick={() => onConfirm({ category: line.category, unreferenced: line.unreferenced })}
+                        disabled={confirming === line.category}
+                      >
+                        {confirming === line.category && (
+                          <Loader2 size={13} strokeWidth={2.2} className="animate-spin" />
+                        )}
+                        {t('storage.reclaim.confirm')}
+                      </button>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </SettingRows>
+    </Section>
+  );
+}
+
+function Figure({ label, value }: { label: string; value: string }): React.ReactElement {
+  return (
+    <div className="min-w-0 rounded-[12px] bg-surface-secondary px-3 py-2">
+      <p className="m-0 text-content-faint" style={fs(11)}>
+        {label}
+      </p>
+      <p className="m-0 mt-0.5 font-geist font-semibold tabular-nums text-content" style={fs(12.5, 'body')}>
+        {value}
+      </p>
+    </div>
+  );
+}

client/src/components/Admin/storage/reclaimModel.test.ts

@@ -0,0 +1,220 @@
+// FE-ADMIN-STOR-RECLAIM-001 to -009: the reclaim report as both storage panels show it.
+import { STORAGE_RECLAIM_CATEGORIES, type StorageReclaimCategoryReport, type StorageReclaimReport } from '@trek/shared';
+
+import { reclaimView } from './reclaimModel';
+
+const none = { objects: 0, bytes: 0 };
+
+function category(patch: Partial<StorageReclaimCategoryReport> = {}): StorageReclaimCategoryReport {
+  return {
+    objects: 0,
+    unreferenced: none,
+    eligible: none,
+    deleted: none,
+    confirmationRequired: false,
+    skipped: null,
+    ...patch,
+  };
+}
+
+function report(
+  patch: Partial<Record<(typeof STORAGE_RECLAIM_CATEGORIES)[number], StorageReclaimCategoryReport>>,
+  mode: StorageReclaimReport['mode'] = 'report'
+): StorageReclaimReport {
+  const categories = Object.fromEntries(
+    STORAGE_RECLAIM_CATEGORIES.map((c) => [c, category({ skipped: 'not_reclaimed' })])
+  ) as StorageReclaimReport['categories'];
+  return { startedAt: 1_000, finishedAt: 2_000, mode, stopped: null, categories: { ...categories, ...patch } };
+}
+
+describe('reclaimView', () => {
+  it('FE-ADMIN-STOR-RECLAIM-001: no state reads as deletion off, not running and never checked', () => {
+    expect(reclaimView(null)).toEqual({
+      deleteEnabled: false,
+      running: false,
+      checkedAt: null,
+      stopped: null,
+      freeable: none,
+      waiting: none,
+      freed: none,
+      freedAt: null,
+      lines: [],
+    });
+  });
+
+  it('FE-ADMIN-STOR-RECLAIM-002: freeable is what is a week old, waiting what is younger, summed over categories', () => {
+    const view = reclaimView({
+      deleteEnabled: true,
+      running: false,
+      lastDeleteRun: null,
+      lastRun: report({
+        covers: category({
+          objects: 40,
+          unreferenced: { objects: 5, bytes: 500 },
+          eligible: { objects: 3, bytes: 300 },
+        }),
+        places: category({ objects: 10, unreferenced: { objects: 1, bytes: 100 } }),
+      }),
+    });
+    expect(view.deleteEnabled).toBe(true);
+    expect(view.checkedAt).toBe(2_000);
+    expect(view.freeable).toEqual({ objects: 3, bytes: 300 });
+    expect(view.waiting).toEqual({ objects: 3, bytes: 300 });
+    expect(view.lines.map((line) => line.category)).toEqual(['covers', 'places']);
+  });
+
+  it('FE-ADMIN-STOR-RECLAIM-003: freed comes from the last run with deletion on, which a check on demand does not replace', () => {
+    const deleting = report(
+      {
+        files: category({
+          unreferenced: { objects: 2, bytes: 20 },
+          eligible: { objects: 2, bytes: 20 },
+          deleted: { objects: 2, bytes: 20 },
+        }),
+      },
+      'delete'
+    );
+    const view = reclaimView({
+      deleteEnabled: true,
+      running: false,
+      lastDeleteRun: { ...deleting, finishedAt: 900 },
+      lastRun: report({}),
+    });
+    expect(view.freed).toEqual({ objects: 2, bytes: 20 });
+    expect(view.freedAt).toBe(900);
+    expect(view.freeable).toEqual(none);
+    expect(view.lines).toEqual([]);
+  });
+
+  it('FE-ADMIN-STOR-RECLAIM-004: a skipped category shows its reason and counts toward nothing, one never reclaimed shows nothing', () => {
+    const view = reclaimView({
+      deleteEnabled: false,
+      running: false,
+      lastDeleteRun: null,
+      lastRun: report({ avatars: category({ skipped: 'foreign_install', unreferenced: { objects: 9, bytes: 9 } }) }),
+    });
+    expect(view.lines).toEqual([
+      {
+        category: 'avatars',
+        freeable: none,
+        waiting: none,
+        confirmationRequired: false,
+        unreferenced: 9,
+        skipped: 'foreign_install',
+      },
+    ]);
+    expect(view.waiting).toEqual(none);
+    expect(view.lines.some((line) => line.category === 'backups')).toBe(false);
+  });
+
+  it('FE-ADMIN-STOR-RECLAIM-005: a pass that stopped says why, and a category it stopped in keeps its partial figures', () => {
+    const view = reclaimView({
+      deleteEnabled: false,
+      running: false,
+      lastDeleteRun: null,
+      lastRun: {
+        ...report({ covers: category({ skipped: 'interrupted', unreferenced: { objects: 4, bytes: 40 } }) }),
+        stopped: 'failed',
+      },
+    });
+    expect(view.stopped).toBe('failed');
+    expect(view.waiting).toEqual({ objects: 4, bytes: 40 });
+    expect(view.lines[0]).toMatchObject({ category: 'covers', skipped: 'interrupted' });
+  });
+
+  it('FE-ADMIN-STOR-RECLAIM-006: a category waiting for a confirmation shows even with nothing old enough yet', () => {
+    const view = reclaimView({
+      deleteEnabled: true,
+      running: false,
+      lastDeleteRun: null,
+      lastRun: report({ places: category({ objects: 10, confirmationRequired: true }) }),
+    });
+    expect(view.lines).toEqual([
+      { category: 'places', freeable: none, waiting: none, confirmationRequired: true, unreferenced: 0, skipped: null },
+    ]);
+  });
+
+  it('FE-ADMIN-STOR-RECLAIM-007: a running check reads as running', () => {
+    expect(reclaimView({ deleteEnabled: false, running: true, lastRun: null, lastDeleteRun: null }).running).toBe(true);
+  });
+
+  it('FE-ADMIN-STOR-RECLAIM-008: a category held back by a backup or a failed delete still counts what was judged and not deleted', () => {
+    const view = reclaimView({
+      deleteEnabled: true,
+      running: false,
+      lastDeleteRun: null,
+      lastRun: report(
+        {
+          covers: category({
+            skipped: 'backup_running',
+            unreferenced: { objects: 3_000, bytes: 3_000 },
+            eligible: { objects: 3_000, bytes: 3_000 },
+          }),
+          places: category({
+            skipped: 'backup_running',
+            unreferenced: { objects: 1_500, bytes: 150 },
+            eligible: { objects: 1_200, bytes: 120 },
+            deleted: { objects: 1_000, bytes: 100 },
+          }),
+          files: category({
+            skipped: 'delete_failed',
+            unreferenced: { objects: 5, bytes: 50 },
+            eligible: { objects: 4, bytes: 40 },
+            deleted: { objects: 1, bytes: 10 },
+          }),
+        },
+        'delete'
+      ),
+    });
+    const byCategory = Object.fromEntries(view.lines.map((line) => [line.category, line]));
+    expect(byCategory.covers).toMatchObject({
+      freeable: { objects: 3_000, bytes: 3_000 },
+      waiting: none,
+      skipped: 'backup_running',
+    });
+    expect(byCategory.places).toMatchObject({
+      freeable: { objects: 200, bytes: 20 },
+      waiting: { objects: 300, bytes: 30 },
+      skipped: 'backup_running',
+    });
+    expect(byCategory.files).toMatchObject({
+      freeable: { objects: 3, bytes: 30 },
+      waiting: { objects: 1, bytes: 10 },
+      skipped: 'delete_failed',
+    });
+    expect(view.freeable).toEqual({ objects: 3_203, bytes: 3_050 });
+    expect(view.waiting).toEqual({ objects: 301, bytes: 40 });
+  });
+
+  it('FE-ADMIN-STOR-RECLAIM-009: a category whose sources or listing failed shows its reason and counts nothing', () => {
+    const view = reclaimView({
+      deleteEnabled: true,
+      running: false,
+      lastDeleteRun: null,
+      lastRun: report({
+        covers: category({ skipped: 'source_failed', objects: 12 }),
+        files: category({ skipped: 'list_failed' }),
+      }),
+    });
+    expect(view.lines).toEqual([
+      {
+        category: 'files',
+        freeable: none,
+        waiting: none,
+        confirmationRequired: false,
+        unreferenced: 0,
+        skipped: 'list_failed',
+      },
+      {
+        category: 'covers',
+        freeable: none,
+        waiting: none,
+        confirmationRequired: false,
+        unreferenced: 0,
+        skipped: 'source_failed',
+      },
+    ]);
+    expect(view.freeable).toEqual(none);
+    expect(view.waiting).toEqual(none);
+  });
+});

client/src/components/Admin/storage/reclaimModel.ts

@@ -0,0 +1,135 @@
+import {
+  STORAGE_RECLAIM_CATEGORIES,
+  type StorageReclaimCategoryReport,
+  type StorageReclaimReport,
+  type StorageReclaimState,
+} from '@trek/shared';
+
+/** A number of files and their size, as the report counts them. */
+export interface ReclaimCount {
+  objects: number;
+  bytes: number;
+}
+
+/** What one category of the last check has to say, when it has anything to say. */
+interface ReclaimCategoryLine {
+  category: (typeof STORAGE_RECLAIM_CATEGORIES)[number];
+  /** Unused for a week or more: what the nightly run deletes once deletion is on. */
+  freeable: ReclaimCount;
+  /** Unused for less than a week: these get their week first. */
+  waiting: ReclaimCount;
+  /**
+   * An unusually large share of the category looks unused: nothing in it is
+   * deleted until an admin confirms that this is expected (a cleaned-up
+   * backlog, say, rather than a second installation in the same bucket).
+   */
+  confirmationRequired: boolean;
+  /** Everything the check found unused in the category, the count a confirmation is given for. */
+  unreferenced: number;
+  /** Why the category was left alone, or stopped part way; null when it was checked through. */
+  skipped: Exclude<StorageReclaimCategoryReport['skipped'], 'not_reclaimed'> | null;
+}
+
+/** The admin's view of the reclaim pass: the switch and what the last check found. */
+export interface ReclaimView {
+  deleteEnabled: boolean;
+  /** A check, nightly or on demand, is running now. */
+  running: boolean;
+  /** When the last check finished, ms; null before the first one. */
+  checkedAt: number | null;
+  /** Why the last check stopped before the end; null when it ran through. */
+  stopped: StorageReclaimReport['stopped'];
+  freeable: ReclaimCount;
+  waiting: ReclaimCount;
+  /** What the last run with deletion on removed: a check on demand only reports, so it never resets this. */
+  freed: ReclaimCount;
+  /** When that run finished, ms; null when nothing ever ran with deletion on. */
+  freedAt: number | null;
+  /** Only the categories with something to free, something waiting, something to confirm, or a reason they were skipped. */
+  lines: ReclaimCategoryLine[];
+}
+
+const NONE: ReclaimCount = { objects: 0, bytes: 0 };
+
+function add(a: ReclaimCount, b: ReclaimCount): ReclaimCount {
+  return { objects: a.objects + b.objects, bytes: a.bytes + b.bytes };
+}
+
+function minus(a: ReclaimCount, b: ReclaimCount): ReclaimCount {
+  return { objects: Math.max(0, a.objects - b.objects), bytes: Math.max(0, a.bytes - b.bytes) };
+}
+
+function freedBy(run: StorageReclaimReport | null): ReclaimCount {
+  if (!run) return NONE;
+  return STORAGE_RECLAIM_CATEGORIES.reduce(
+    (sum, category) => add(sum, run.categories[category]?.deleted ?? NONE),
+    NONE
+  );
+}
+
+type SkipReason = StorageReclaimCategoryReport['skipped'];
+
+/**
+ * The reasons the pass gives when it left a category before judging it, so its
+ * counts mean nothing. Every other reason (a backup running, a failed delete,
+ * an interrupted pass) comes after the judgement and keeps its figures; a new
+ * reason counts by default rather than hiding what the pass found.
+ */
+const NEVER_JUDGED: ReadonlySet<SkipReason> = new Set<SkipReason>([
+  'sources_missing',
+  'shared_location',
+  'foreign_install',
+  'owner_unknown',
+  'list_failed',
+  'source_failed',
+]);
+
+/**
+ * One category of the last check as a line, or null when it has nothing to
+ * say. A category the pass stopped in still counts what it found; one it
+ * never judged counts nothing.
+ */
+function lineOf(
+  category: ReclaimCategoryLine['category'],
+  report: StorageReclaimCategoryReport | undefined
+): ReclaimCategoryLine | null {
+  if (!report || report.skipped === 'not_reclaimed') return null;
+  const judged = !NEVER_JUDGED.has(report.skipped);
+  // What was deleted on this run no longer waits to be freed.
+  const freeable = judged ? minus(report.eligible, report.deleted) : NONE;
+  const waiting = judged ? minus(report.unreferenced, report.eligible) : NONE;
+  const line = {
+    category,
+    freeable,
+    waiting,
+    confirmationRequired: report.confirmationRequired,
+    unreferenced: report.unreferenced.objects,
+    skipped: report.skipped,
+  };
+  const quiet = freeable.objects === 0 && waiting.objects === 0 && !line.confirmationRequired && line.skipped === null;
+  return quiet ? null : line;
+}
+
+/**
+ * The reclaim state as the storage panels show it, desktop and phone alike.
+ * `null` (a server from before the reclaim pass, or a state not loaded) reads
+ * as deletion off, not running and never checked.
+ */
+export function reclaimView(state: StorageReclaimState | null): ReclaimView {
+  const run = state?.lastRun ?? null;
+  const lines = STORAGE_RECLAIM_CATEGORIES.flatMap((category) => lineOf(category, run?.categories[category]) ?? []);
+  const freeable = lines.reduce((sum, line) => add(sum, line.freeable), NONE);
+  const waiting = lines.reduce((sum, line) => add(sum, line.waiting), NONE);
+  const deleteRun = state?.lastDeleteRun ?? null;
+  return {
+    deleteEnabled: state?.deleteEnabled ?? false,
+    running: state?.running ?? false,
+    checkedAt: run?.finishedAt ?? null,
+    stopped: run?.stopped ?? null,
+    freeable,
+    waiting,
+    freed: freedBy(deleteRun),
+    freedAt: deleteRun?.finishedAt ?? null,
+    lines,
+  };
+}

client/src/components/Admin/storage/storageModel.test.ts

@@ -53,6 +53,7 @@ const STATE: StorageAdminState = {
   },
   health: { replicaFailures: [] },
   seedFilePresent: false,
+  reclaim: null,
   usage: null,
   backfills: [],
   migrations: [],

client/src/components/Admin/storage/useStorageAdmin.test.tsx

@@ -14,6 +14,7 @@ function baseState(overrides: Partial<StorageAdminState> = {}): StorageAdminStat
     categories: { files: { backend: 'uploads-local', source: 'default' } } as StorageAdminState['categories'],
     health: { replicaFailures: [] },
     seedFilePresent: false,
+    reclaim: null,
     usage: null,
     backfills: [],
     migrations: [],

client/src/components/Admin/storage/useStorageAdmin.ts

@@ -1,11 +1,29 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import type { StorageAdminState, StorageBackend, StorageConfig, StorageConfigPut, StorageTestResponse } from '@trek/shared'
+import type {
+  StorageAdminState,
+  StorageBackend,
+  StorageConfig,
+  StorageConfigPut,
+  StorageReclaimConfirmRequest,
+  StorageTestResponse,
+} from '@trek/shared'
 import { adminApi } from '../../../api/client'
+import { storageReclaimApi } from '../../../api/storageReclaim'
 import { getApiErrorMessage, type ApiError } from '../../../types'
 import { settingsDocumentOf } from './storageModel'
 
 export type StorageTestResults = Record<string, StorageTestResponse | 'running'>
 
+/** A refused reclaim call: the server's code when it sent one the panel can name, its message otherwise. */
+export type ReclaimFailure = { code: string } | { message: string }
+
+function reclaimFailureOf(err: unknown, fallback: string): ReclaimFailure {
+  const code = (err as ApiError | null)?.response?.data as { code?: unknown } | undefined
+  return typeof code?.code === 'string' && code.code.startsWith('reclaim_')
+    ? { code: code.code }
+    : { message: getApiErrorMessage(err, fallback) }
+}
+
 /** 50ms under vitest so poll tests run on real timers (MSW + fake timers don't mix). */
 export const BACKFILL_POLL_MS = import.meta.env.MODE === 'test' ? 50 : 5000
 
@@ -58,6 +76,12 @@ export interface StorageAdmin {
   startMigration: (category: string, to: string) => Promise<string | null>
   cancelMigration: (category: string) => Promise<string | null>
   refreshStats: () => Promise<string | null>
+  /** Switches the nightly deletion of unreferenced files on or off; null on success. */
+  setReclaimDelete: (enabled: boolean) => Promise<ReclaimFailure | null>
+  /** Starts a check that only reports, in the background; the state polls until it is done. Null on success. */
+  checkReclaim: () => Promise<ReclaimFailure | null>
+  /** Lets the nightly run delete in a category where an unusually large share looks unused. Null on success. */
+  confirmReclaim: (request: StorageReclaimConfirmRequest) => Promise<ReclaimFailure | null>
   /** Re-GETs admin state (poll-safe — see the implementation comment below). Exposed for the panel's failed-queue recovery path. */
   refreshState: () => Promise<void>
   /**
@@ -271,7 +295,8 @@ export function useStorageAdmin(genericError: string, conflictError: string): St
   useEffect(() => {
     if (
       !state?.backfills.some((b) => b.status === 'running') &&
-      !state?.migrations.some((m) => m.status === 'running')
+      !state?.migrations.some((m) => m.status === 'running') &&
+      !state?.reclaim?.running
     )
       return
     const iv = setInterval(() => {
@@ -356,6 +381,71 @@ export function useStorageAdmin(genericError: string, conflictError: string): St
     }
   }, [genericError])
 
+  /**
+   * Writes the reclaim part of the state. It counts as a deliberate state
+   * application, so a poll GET that was in flight before it is dropped instead
+   * of putting the switch back where it was.
+   */
+  const setReclaim = useCallback((reclaim: NonNullable<StorageAdminState['reclaim']>) => {
+    const prev = stateRef.current
+    if (!prev) return
+    stateSeq.current += 1
+    const next = { ...prev, reclaim }
+    stateRef.current = next
+    setState(next)
+  }, [])
+
+  const setReclaimDelete = useCallback(
+    async (enabled: boolean): Promise<ReclaimFailure | null> => {
+      try {
+        setReclaim(await storageReclaimApi.setDelete(enabled))
+        return null
+      } catch (err: unknown) {
+        return reclaimFailureOf(err, genericError)
+      }
+    },
+    [genericError, setReclaim],
+  )
+
+  const checkReclaim = useCallback(async (): Promise<ReclaimFailure | null> => {
+    try {
+      await storageReclaimApi.check()
+      // Running from here on: the poll above picks the report up once the pass is done.
+      const current = stateRef.current?.reclaim
+      setReclaim({
+        deleteEnabled: current?.deleteEnabled ?? false,
+        running: true,
+        lastRun: current?.lastRun ?? null,
+        lastDeleteRun: current?.lastDeleteRun ?? null,
+      })
+      return null
+    } catch (err: unknown) {
+      return reclaimFailureOf(err, genericError)
+    }
+  }, [genericError, setReclaim])
+
+  const confirmReclaim = useCallback(
+    async (request: StorageReclaimConfirmRequest): Promise<ReclaimFailure | null> => {
+      try {
+        setReclaim(await storageReclaimApi.confirm(request))
+        return null
+      } catch (err: unknown) {
+        const failure = reclaimFailureOf(err, genericError)
+        // The count moved on since it was shown: show the current one before the admin confirms again.
+        if ('code' in failure && failure.code === 'reclaim_confirm_stale') {
+          try {
+            await refreshState()
+          } catch (reloadErr: unknown) {
+            // Without the new figure there is nothing to confirm against: say why instead.
+            return reclaimFailureOf(reloadErr, genericError)
+          }
+        }
+        return failure
+      }
+    },
+    [genericError, setReclaim, refreshState],
+  )
+
   return {
     state,
     storageBusy,
@@ -376,6 +466,9 @@ export function useStorageAdmin(genericError: string, conflictError: string): St
     startMigration,
     cancelMigration,
     refreshStats,
+    setReclaimDelete,
+    checkReclaim,
+    confirmReclaim,
     refreshState,
     discardDraft,
   }

client/src/components/Admin/storage/useStoragePanel.test.ts

@@ -1,4 +1,4 @@
-// FE-ADMIN-STOR-PANEL-001 to -017: the storage panel logic behind both admin shells.
+// FE-ADMIN-STOR-PANEL-001 to -020: the storage panel logic behind both admin shells.
 import { act, renderHook, waitFor } from '@testing-library/react';
 
 import { STORAGE_CATEGORIES, type StorageAdminState, type StorageBackend, type StorageConfig } from '@trek/shared';
@@ -28,6 +28,7 @@ function baseState(): StorageAdminState {
     ) as StorageAdminState['categories'],
     health: { replicaFailures: [] },
     seedFilePresent: false,
+    reclaim: null,
     usage: null,
     backfills: [],
     migrations: [],
@@ -57,6 +58,9 @@ function makeAdmin(state: StorageAdminState | null, draft?: StorageConfig): Stor
     startMigration: vi.fn(async () => null),
     cancelMigration: vi.fn(async () => null),
     refreshStats: vi.fn(async () => null),
+    setReclaimDelete: vi.fn(async () => null),
+    checkReclaim: vi.fn(async () => null),
+    confirmReclaim: vi.fn(async () => null),
     refreshState: vi.fn(async () => {}),
     discardDraft: vi.fn(async () => {}),
   };
@@ -282,3 +286,48 @@ describe('migrationPromptLine', () => {
     ).toBe('storage.migrate.promptLineUnknown {"category":"storage.category.covers","from":"a","to":"b"}');
   });
 });
+
+describe('useStoragePanel: unreferenced files', () => {
+  it('FE-ADMIN-STOR-PANEL-018: the reclaim switch and the check go through the admin hook, a failure as a toast', async () => {
+    fake.admin = makeAdmin(baseState());
+    vi.mocked(fake.admin.checkReclaim).mockResolvedValueOnce({ code: 'reclaim_busy' });
+    vi.mocked(fake.admin.setReclaimDelete).mockResolvedValueOnce({ message: 'disk full' });
+    const { result } = renderHook(() => useStoragePanel());
+    await act(async () => {
+      await result.current.handleReclaimDelete(true);
+    });
+    expect(fake.admin.setReclaimDelete).toHaveBeenCalledWith(true);
+    // A failure without a code the panel knows shows the server's message.
+    expect(toast.error).toHaveBeenCalledWith('disk full');
+    expect(result.current.reclaimSaving).toBe(false);
+    await act(async () => {
+      await result.current.handleReclaimCheck();
+    });
+    expect(fake.admin.checkReclaim).toHaveBeenCalledTimes(1);
+    // A code the panel knows is shown in the operator's language.
+    expect(toast.error).toHaveBeenCalledWith('storage.reclaim.error.reclaim_busy');
+    expect(result.current.reclaimChecking).toBe(false);
+  });
+
+  it('FE-ADMIN-STOR-PANEL-020: confirming a category goes through the admin hook and says so; a running check keeps the button busy', async () => {
+    const state = baseState();
+    state.reclaim = { deleteEnabled: true, running: true, lastRun: null, lastDeleteRun: null };
+    fake.admin = makeAdmin(state);
+    const { result } = renderHook(() => useStoragePanel());
+    expect(result.current.reclaimChecking).toBe(true);
+    await act(async () => {
+      await result.current.handleReclaimConfirm({ category: 'places', unreferenced: 3 });
+    });
+    expect(fake.admin.confirmReclaim).toHaveBeenCalledWith({ category: 'places', unreferenced: 3 });
+    expect(result.current.reclaimConfirming).toBeNull();
+    expect(toast.success).toHaveBeenCalledWith('storage.reclaim.confirmed');
+  });
+
+  it('FE-ADMIN-STOR-PANEL-019: a server without the reclaim state reads as deletion off and never checked', () => {
+    fake.admin = makeAdmin(baseState());
+    const { result } = renderHook(() => useStoragePanel());
+    expect(result.current.reclaim.deleteEnabled).toBe(false);
+    expect(result.current.reclaim.checkedAt).toBeNull();
+    expect(result.current.reclaim.lines).toEqual([]);
+  });
+});

client/src/components/Admin/storage/useStoragePanel.ts

@@ -7,11 +7,13 @@ import type {
   StorageConfig,
   StorageConfigPut,
   StorageMigrationStatus,
+  StorageReclaimConfirmRequest,
 } from '@trek/shared';
 
 import { useTranslation } from '../../../i18n';
 import { formatBytes } from '../../../utils/formatBytes';
 import { useToast } from '../../shared/Toast';
+import { reclaimView } from './reclaimModel';
 import {
   adoptedMirrorFor,
   computeMigrationCandidates,
@@ -31,7 +33,7 @@ import {
   type FoldedBackendRow,
   type MigrationCandidate,
 } from './storageModel';
-import { useStorageAdmin } from './useStorageAdmin';
+import { useStorageAdmin, type ReclaimFailure } from './useStorageAdmin';
 
 /** Display-name mapper for joined category lists: the raw id renders only in the badge. */
 export const categoryNames = (t: (key: string) => string, ids: readonly string[]): string =>
@@ -165,6 +167,35 @@ export function useStoragePanel() {
     if (error) toast.error(error);
   };
 
+  // The click itself, until the server answered; the pass that follows shows through `reclaim.running`.
+  const [reclaimStarting, setReclaimStarting] = useState(false);
+  const [reclaimSaving, setReclaimSaving] = useState(false);
+  const reclaimError = (failure: ReclaimFailure) =>
+    'code' in failure ? t(`storage.reclaim.error.${failure.code}`) : failure.message;
+  const handleReclaimCheck = async () => {
+    setReclaimStarting(true);
+    const failure = await admin.checkReclaim();
+    setReclaimStarting(false);
+    if (failure) toast.error(reclaimError(failure));
+  };
+  const handleReclaimDelete = async (enabled: boolean) => {
+    setReclaimSaving(true);
+    const failure = await admin.setReclaimDelete(enabled);
+    setReclaimSaving(false);
+    if (failure) toast.error(reclaimError(failure));
+  };
+  // The category whose confirmation is on its way, so its button waits for the answer.
+  const [reclaimConfirming, setReclaimConfirming] = useState<StorageReclaimConfirmRequest['category'] | null>(null);
+  const handleReclaimConfirm = async (request: StorageReclaimConfirmRequest) => {
+    setReclaimConfirming(request.category);
+    const failure = await admin.confirmReclaim(request);
+    setReclaimConfirming(null);
+    if (failure) toast.error(reclaimError(failure));
+    else toast.success(t('storage.reclaim.confirmed'));
+  };
+  const reclaim = reclaimView(admin.state?.reclaim ?? null);
+  const reclaimChecking = reclaimStarting || reclaim.running;
+
   const handleStartBackfill = async (row: FoldedBackendRow) => {
     if (!row.mirrorName) return;
     setSyncPrompt((prev) => (prev === row.name ? null : prev));
@@ -371,6 +402,13 @@ export function useStoragePanel() {
     migrationQueue,
     handleCancelMigration,
     handleRefreshStats,
+    reclaim,
+    reclaimChecking,
+    reclaimSaving,
+    reclaimConfirming,
+    handleReclaimCheck,
+    handleReclaimDelete,
+    handleReclaimConfirm,
     handleStartBackfill,
     handleCancelBackfill,
     loaded,

client/src/components/Admin/useAuditLog.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { adminApi } from '../../api/client';
-import { useTranslation } from '../../i18n';
+import { useFormatDate } from '../../hooks/useDateFormat';
 
 export interface AuditEntry {
   id: number;
@@ -41,7 +41,7 @@ export function auditUserLabel(e: AuditEntry): string {
  * cards render their own markup over it.
  */
 export function useAuditLog(serverTimezone?: string) {
-  const { locale } = useTranslation();
+  const { formatDateTime } = useFormatDate();
   const [entries, setEntries] = useState<AuditEntry[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(true);
@@ -92,7 +92,7 @@ export function useAuditLog(serverTimezone?: string) {
 
   const fmtTime = (iso: string) => {
     try {
-      return new Date(iso.endsWith('Z') ? iso : iso + 'Z').toLocaleString(locale, {
+      return formatDateTime(new Date(iso.endsWith('Z') ? iso : iso + 'Z'), {
         dateStyle: 'short',
         timeStyle: 'medium',
         timeZone: serverTimezone || undefined,

client/src/components/Admin/useBackupAdmin.ts

@@ -1,6 +1,7 @@
 import { type ChangeEvent, useEffect, useEffectEvent, useRef, useState } from 'react';
 
 import { backupApi } from '../../api/client';
+import { useFormatDate } from '../../hooks/useDateFormat';
 import { useTranslation } from '../../i18n';
 import { useSettingsStore } from '../../store/settingsStore';
 import { getApiErrorMessage } from '../../types';
@@ -104,7 +105,8 @@ export function useBackupAdmin({ keepSettingsWhenMissing = false }: Options = {}
   const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const toast = useToast();
-  const { t, locale } = useTranslation();
+  const { t } = useTranslation();
+  const { formatDateTime } = useFormatDate();
   const is12h = useSettingsStore((s) => s.settings.time_format) === '12h';
 
   const loadBackups = async () => {
@@ -241,7 +243,7 @@ export function useBackupAdmin({ keepSettingsWhenMissing = false }: Options = {}
         minute: '2-digit',
       };
       if (serverTimezone) opts.timeZone = serverTimezone;
-      return new Date(dateStr).toLocaleString(locale, opts);
+      return formatDateTime(new Date(dateStr), opts);
     } catch {
       return dateStr;
     }

client/src/components/Admin/useDefaultUserSettings.ts

@@ -3,7 +3,8 @@ import { useEffect, useState } from 'react';
 import { adminApi } from '../../api/client';
 import { useTranslation } from '../../i18n';
 import { useAuthStore } from '../../store/authStore';
-import type { DistanceUnit, Place, WeekStart } from '../../types';
+import { useSettingsStore } from '../../store/settingsStore';
+import type { DateFormat, DistanceUnit, Place, WeekStart } from '../../types';
 import { normalizeTileUrl } from '../../utils/tileUrl';
 import {
   defaultStyleForProvider,
@@ -11,7 +12,13 @@ import {
   normalizeStyleForProvider,
   styleSettingKey,
 } from '../Map/glProviders';
-import { type MapProvider, normalizeProvider, styleForProvider } from '../Settings/mapSettingsModel';
+import {
+  type MapProvider,
+  mapboxOffered,
+  mapPresetsFor,
+  normalizeProvider,
+  styleForProvider,
+} from '../Settings/mapSettingsModel';
 import { useToast } from '../shared/Toast';
 import type { RoutingDefaults } from './RoutingInstanceFields';
 
@@ -21,6 +28,7 @@ export type Defaults = RoutingDefaults & {
   dark_mode?: string | boolean;
   time_format?: string;
   week_start?: WeekStart;
+  date_format?: DateFormat;
   default_currency?: string;
   blur_booking_codes?: boolean;
   map_tile_url?: string;
@@ -53,6 +61,9 @@ export function useDefaultUserSettings({ errorMessage, previewCreatedAt }: Defau
   const [loaded, setLoaded] = useState(false);
   const [mapTileUrl, setMapTileUrl] = useState('');
   const managed = useAuthStore((s) => s.managed);
+  const hasAmapKey = useAuthStore((s) => s.hasAmapKey);
+  // The operator's token reaches the admin's own settings the same way it reaches everybody's.
+  const operatorMapboxToken = useSettingsStore((s) => s.settings.mapbox_access_token);
   const [mapboxToken, setMapboxToken] = useState('');
   const [cartoKey, setCartoKey] = useState('');
   const [mapboxStyle, setMapboxStyle] = useState('');
@@ -153,6 +164,8 @@ export function useDefaultUserSettings({ errorMessage, previewCreatedAt }: Defau
     defaults,
     loaded,
     managed,
+    presets: mapPresetsFor(managed, hasAmapKey),
+    canMapbox: mapboxOffered(managed, operatorMapboxToken),
     isSet,
     save,
     reset,

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

@@ -2301,15 +2301,12 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
     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()
+    // A bill in the display currency counts as typed (#2965), as the balances net it:
+    // row total and payer chip read the dollars entered, nothing to explain under it,
+    // and what I lent is half of them, which settle-up offers too.
+    expect(screen.queryByText(/^\$801\.76 → /)).toBeNull()
+    expect(screen.getAllByText('$801.76')).toHaveLength(2)
+    expect(screen.getByText('you lent $400.88')).toBeInTheDocument()
   })
 
   it('FE-W5COSTS-087: a bill booked at today\'s rate reads exactly as typed everywhere on the page', async () => {
@@ -2344,7 +2341,8 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
       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;$/)
+      // The trip-currency figure it was booked at, then the dollars as typed (#2965).
+      expect(lines[1]).toMatch(/;801\.76;USD;685\.26;801\.76;$/)
     } finally {
       createObjURL.mockRestore(); revokeObjURL.mockRestore(); clickSpy.mockRestore()
     }
@@ -2357,13 +2355,13 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
     ])
 
     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()
+    // Both in the display currency, both as typed (#2965): $801.76 and $120.00 make
+    // $921.76, on the day header and on the total spend card.
+    expect(screen.queryByText(/^\$120\.00 → /)).toBeNull()
+    expect(screen.getByText('$921.76 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')
+    expect(card.textContent).toContain('$921.76')
   })
 
   it('FE-W5COSTS-084: the totals follow the rates when they arrive after the expenses', async () => {
@@ -2399,7 +2397,7 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
     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 () => {
+  it('FE-W5COSTS-082: a payment recorded in dollars reads as entered, a legacy one too (#2965)', 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' },
@@ -2410,29 +2408,26 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
     })
 
     await screen.findByText('Aparthotel Silver')
-    expect(await screen.findByText(/\$400\.88 → 342,63\s€$/)).toBeInTheDocument()
     // The hotel's split chips can carry the same figure, so look past them to the payment.
     const outsideChips = (text: string) => screen.queryAllByText(text).filter(el => !el.closest('[data-testid="split-chip"]'))
-    expect(outsideChips('$395.77')).toHaveLength(1)
+    expect(await screen.findByText('$30.00')).toBeInTheDocument()
+    expect(screen.queryByText(/\$400\.88 → /)).toBeNull()
+    expect(outsideChips('$400.88')).toHaveLength(1)
     expect(outsideChips('$30.00')).toHaveLength(1)
     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 () => {
+  it('FE-W5COSTS-085: the edit dialog has nothing to convert for a bill in the display currency (#2965)', async () => {
     const user = userEvent.setup()
     mount([hotel()])
 
     await screen.findByText('Aparthotel Silver')
     await user.click(screen.getByRole('button', { name: /^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(/\$400\.88 → \$395\.77 per person/)).toBeInTheDocument()
+    // The list reads the dollars typed, so there is no conversion to preview.
+    expect(screen.queryByText(/live rate/)).toBeNull()
+    expect(screen.getByText(/\$400\.88 per person/)).toBeInTheDocument()
+    expect(screen.queryByText(/\$400\.88 → /)).toBeNull()
   })
 
   it('FE-W5COSTS-086: the final budget names the bill by what was entered beside its booked figure', async () => {

client/src/components/Budget/costsCategories.tsx

@@ -1,6 +1,6 @@
 import { Hotel, Utensils, ShoppingCart, Bus, Plane, Ticket, Camera, ShoppingBag, FileText, HeartPulse, Coins, MoreHorizontal, Fuel, ParkingCircle } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
-import { COST_CATEGORIES, type CostCategory } from '@trek/shared'
+import { COST_CATEGORIES, costCategoryOf, type CostCategory } from '@trek/shared'
 
 /**
  * The fixed Costs categories. Users can't add their own — every expense maps to
@@ -34,34 +34,7 @@ export const COST_CAT_META: Record<CostCategory, CostCategoryMeta> = {
 
 export const COST_CATEGORY_LIST: CostCategoryMeta[] = COST_CATEGORIES.map(k => COST_CAT_META[k])
 
-/**
- * Legacy / English free-text categories (and reservation type labels) mapped to
- * the fixed keys. Bookings used to store labels like "Flight"/"Train"/"Other",
- * which never matched the lowercase keys and fell through to `other`.
- */
-const LEGACY_CATEGORY_MAP: Record<string, CostCategory> = {
-  flight: 'flights', flights: 'flights', plane: 'flights', flug: 'flights',
-  train: 'transport', bus: 'transport', car: 'transport', 'car rental': 'transport',
-  ferry: 'transport', boat: 'transport', taxi: 'transport', transfer: 'transport', cable_car: 'transport',
-  transport: 'transport', transportation: 'transport',
-  hotel: 'accommodation', accommodation: 'accommodation', lodging: 'accommodation', hostel: 'accommodation',
-  restaurant: 'food', food: 'food', dining: 'food', meal: 'food', meals: 'food',
-  grocery: 'groceries', groceries: 'groceries',
-  activity: 'activities', activities: 'activities',
-  sightseeing: 'sightseeing', sights: 'sightseeing',
-  shop: 'shopping', shopping: 'shopping',
-  fee: 'fees', fees: 'fees',
-  health: 'health', medical: 'health',
-  tip: 'tips', tips: 'tips',
-  gas: 'fuel', fuel: 'fuel', petrol: 'fuel',
-  parking: 'parking', parkings: 'parking', 'car park': 'parking',
-  other: 'other', misc: 'other',
-}
-
 /** Map any stored category (incl. legacy/localized free-text values) to a known meta. */
 export function catMeta(cat: string | null | undefined): CostCategoryMeta {
-  if (!cat) return COST_CAT_META.other
-  if (cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
-  const mapped = LEGACY_CATEGORY_MAP[cat.trim().toLowerCase()]
-  return mapped ? COST_CAT_META[mapped] : COST_CAT_META.other
+  return COST_CAT_META[costCategoryOf(cat) ?? 'other']
 }

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

@@ -89,7 +89,8 @@ describe('costsModel: recorded payments', () => {
 
   it('FE-BUDGET-COSTSMODEL-005: a legacy payment without a currency was entered in the display currency', () => {
     const inUsd: CostsCtx = { ...ctx, displayCurrency: 'USD' };
-    expect(paymentAmount(payment({ amount: 10, currency: null }), inUsd)).toBe(5);
+    // Entered in the display currency, it reads as entered (#2965).
+    expect(paymentAmount(payment({ amount: 10, currency: null }), inUsd)).toBe(10);
     expect(paymentAmount(payment({ amount: 10, currency: null }), ctx)).toBe(10);
   });
 

client/src/components/Budget/costsModel.ts

@@ -1,6 +1,8 @@
 import type { BudgetParticipantFinal, BudgetUnconverted, CostCategory } from '@trek/shared';
-import { convertBooked, convertedLine, tripAmountOf } from '../../hooks/useExchangeRates';
+import { readDateFormat } from '../../hooks/useDateFormat';
+import { convertBooked, convertedLine, inDisplayCurrency, tripAmountOf } from '../../hooks/useExchangeRates';
 import type { BudgetItem } from '../../types';
+import { formatDisplayDate } from '../../utils/dateFormat';
 import { currencyDecimals } from '../../utils/formatters';
 import { currenciesWith, SYMBOLS } from './BudgetPanel.constants';
 import { paidByUser, readUserNote, settlementDate, splitEqualShares } from './CostsPanel.helpers';
@@ -30,8 +32,12 @@ export function currencyOf(e: BudgetItem, ctx: CostsCtx): string {
   return (e.currency || ctx.tripCurrency).toUpperCase();
 }
 
-/** An amount of this expense in the display currency, at the rate the expense was booked at. */
+/**
+ * An amount of this expense in the display currency, at the rate the expense was booked at;
+ * as typed when it was entered in the display currency (#2965).
+ */
 export function booked(amount: number, e: BudgetItem, ctx: CostsCtx): number {
+  if (inDisplayCurrency(e.currency, ctx.tripCurrency, ctx.displayCurrency)) return amount;
   return convertBooked(amount, e.currency, e.exchange_rate, ctx.tripCurrency, ctx.convert);
 }
 
@@ -130,9 +136,14 @@ function paymentCurrency(s: CostsSettlement, ctx: CostsCtx): string {
   return (s.currency || ctx.displayCurrency).toUpperCase();
 }
 
-/** A recorded payment in the display currency, at the rate frozen when it was settled (#1445). */
+/**
+ * A recorded payment in the display currency, at the rate frozen when it was settled (#1445);
+ * as entered when it was made in the display currency (#2965).
+ */
 export function paymentAmount(s: CostsSettlement, ctx: CostsCtx): number {
-  return convertBooked(s.amount, paymentCurrency(s, ctx), s.exchange_rate, ctx.tripCurrency, ctx.convert);
+  const currency = paymentCurrency(s, ctx);
+  if (inDisplayCurrency(currency, ctx.tripCurrency, ctx.displayCurrency)) return s.amount;
+  return convertBooked(s.amount, currency, s.exchange_rate, ctx.tripCurrency, ctx.convert);
 }
 
 /** The line under a payment shown converted, explained the way an expense's is (#2525). */
@@ -369,12 +380,17 @@ export function buildCostsCsv(items: BudgetItem[], opts: CsvBuildOptions): { fil
   const fmtDate = (iso: string) => {
     if (!iso) return '';
     try {
-      return new Date(iso + 'T00:00:00Z').toLocaleDateString(opts.locale, {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        timeZone: 'UTC',
-      });
+      return formatDisplayDate(
+        new Date(iso + 'T00:00:00Z'),
+        opts.locale,
+        {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+          timeZone: 'UTC',
+        },
+        readDateFormat()
+      );
     } catch {
       return iso;
     }

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

@@ -23,9 +23,14 @@ describe('editingCurrencyOf', () => {
 
 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' })!
+    const fx = expenseFxPreview({ ...base, total: 801.76, currency: 'USD', base: 'GBP' })!
     expect(fx.inTrip).toBeCloseTo(685.26, 2)
-    expect(fx.shown).toBeCloseTo(791.55, 2)
+    expect(fx.shown).toBeCloseTo(convert(801.76 / 1.17, 'EUR'), 2)
+  })
+
+  it('has nothing to preview for a bill in the display currency, which counts as typed (#2965)', () => {
+    // Frozen at 1.17 while a euro buys 1.1551 today: still the dollars typed.
+    expect(expenseFxPreview({ ...base, total: 801.76, currency: 'USD', base: 'USD' })).toBeNull()
   })
 
   it('has nothing to preview for a bill in the display currency that reads back as typed', () => {
@@ -47,8 +52,8 @@ describe('expenseFxPreview', () => {
 
 describe('splitShareLabel', () => {
   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', 'en-US')).toBe('$400.88 → $395.77')
+    const fx = expenseFxPreview({ ...base, total: 1700, currency: 'JPY', editing: null })
+    expect(splitShareLabel(850, 'JPY', fx, 2, 'USD', 'en-US')).toBe(`${formatMoney(850, 'JPY', 'en-US')} → ${formatMoney(convert(1700, 'JPY') / 2, 'USD', 'en-US')}`)
     // 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', 'en-US')).toBe(`$400.88 → ${formatMoney(342.63, 'EUR', 'en-US')}`)

client/src/components/Budget/expenseFx.ts

@@ -1,6 +1,6 @@
 import { bookedInTrip, useExchangeRates } from '../../hooks/useExchangeRates'
 import { useTripStore } from '../../store/tripStore'
-import { currencyDecimals, formatMoney } from '../../utils/formatters'
+import { formatMoney } from '../../utils/formatters'
 
 /**
  * The conversion preview of the expense editors, shared by the desktop ExpenseModal and the
@@ -33,8 +33,8 @@ export interface ExpenseFx {
  * 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.
+ * else is previewed at today's rate. Null when there is nothing to convert, and for a bill in
+ * the display currency, which counts as typed (#2965).
  */
 export function expenseFxPreview(args: {
   total: number
@@ -46,12 +46,9 @@ export function expenseFxPreview(args: {
   convert: (amount: number, from: string | null | undefined) => number
 }): ExpenseFx | null {
   const { total, currency, editing, editingCurrency, tripCurrency, base, convert } = args
-  if (total === 0) return null
+  if (total === 0 || currency === base) 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 }
 }
 

client/src/components/Collections/CollectionFilterBar.tsx

@@ -35,7 +35,7 @@ function Dropdown({ current, options, onSelect, lead }: {
   const cur = options.find(o => o.key === current) ?? options[0]
   return (
     <div className="col-filter" ref={ref}>
-      <button type="button" className={`col-filter-btn${open ? ' open' : ''}`} onClick={() => setOpen(o => !o)} aria-haspopup="listbox" aria-expanded={open}>
+      <button type="button" className={`col-filter-btn${open ? ' open' : ''}${cur.key === options[0]?.key ? ' is-default' : ''}`} onClick={() => setOpen(o => !o)} aria-haspopup="listbox" aria-expanded={open} title={cur.label}>
         {cur.icon ?? lead}
         <span className="col-filter-lbl">{cur.label}</span>
         <ChevronDown size={14} className="col-filter-chev" />

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

@@ -0,0 +1,121 @@
+// FE-COMP-COLLABELS-001 to FE-COMP-COLLABELS-006
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../../tests/helpers/render';
+import type { TranslationFn } from '../../types';
+import CollectionLabelFilter, { type LabelOption } from './CollectionLabelFilter';
+
+const t = ((key: string) => key) as unknown as TranslationFn;
+const LABELS = [
+  { id: 1, name: 'Core shortlist', color: '#2563eb', count: 2 },
+  { id: 2, name: 'Heritage', color: null, count: 0 },
+] as unknown as LabelOption[];
+
+beforeAll(() => {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => vi.restoreAllMocks());
+
+/** The labels need `need` px against a slot of `room` px beside the map's controls. */
+function room(need: number, room: number) {
+  vi.spyOn(Element.prototype, 'scrollWidth', 'get').mockImplementation(function (this: Element) {
+    return this.classList.contains('col-labelfilter-measure') ? need : 0;
+  });
+  vi.spyOn(Element.prototype, 'clientWidth', 'get').mockImplementation(function (this: Element) {
+    return this.classList.contains('col-labelfilter-slot') ? room : 0;
+  });
+}
+
+function setup(props: Partial<Parameters<typeof CollectionLabelFilter>[0]> = {}) {
+  const onLabelFilter = vi.fn();
+  const onManageLabels = vi.fn();
+  const view = render(
+    <CollectionLabelFilter
+      labelOptions={LABELS}
+      labelFilter={[]}
+      onLabelFilter={onLabelFilter}
+      canManageLabels
+      onManageLabels={onManageLabels}
+      t={t}
+      {...props}
+    />
+  );
+  return { ...view, onLabelFilter, onManageLabels };
+}
+
+describe('CollectionLabelFilter', () => {
+  it('FE-COMP-COLLABELS-001: the filter row toggles a label on and off', () => {
+    const on = setup();
+    fireEvent.click(screen.getByRole('button', { name: /Core shortlist/ }));
+    expect(on.onLabelFilter).toHaveBeenCalledWith([1]);
+    on.unmount();
+
+    const off = setup({ labelFilter: [1, 2] });
+    expect(screen.getByRole('button', { name: /Core shortlist/ })).toHaveAttribute('aria-pressed', 'true');
+    fireEvent.click(screen.getByRole('button', { name: /Core shortlist/ }));
+    expect(off.onLabelFilter).toHaveBeenCalledWith([2]);
+  });
+
+  it('FE-COMP-COLLABELS-002: offers to add a label when there is none, and to manage them otherwise', () => {
+    const empty = setup({ labelOptions: [] });
+    fireEvent.click(screen.getByRole('button', { name: 'collections.labels.add' }));
+    expect(empty.onManageLabels).toHaveBeenCalled();
+    empty.unmount();
+
+    setup();
+    expect(screen.getByRole('button', { name: 'collections.labels.manage' })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLABELS-003: on the map the strip shows its labels while they fit', () => {
+    room(300, 500);
+    setup({ variant: 'map' });
+    expect(screen.getByRole('button', { name: /Heritage/ })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /collections.labels.title/ })).toBeNull();
+  });
+
+  it('FE-COMP-COLLABELS-004: without room it folds into one button that lists the labels', () => {
+    room(600, 200);
+    const { onLabelFilter } = setup({ variant: 'map', labelFilter: [2] });
+    const fold = screen.getByRole('button', { name: /collections.labels.title/ });
+    expect(fold).toHaveTextContent('1');
+    expect(fold).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(fold);
+    const list = screen.getByRole('group', { name: 'collections.labels.title' });
+    expect(list).toHaveTextContent('Core shortlist');
+    expect(screen.getByRole('button', { name: /Heritage/ })).toHaveAttribute('aria-pressed', 'true');
+    fireEvent.click(screen.getByRole('button', { name: /Core shortlist/ }));
+    expect(onLabelFilter).toHaveBeenCalledWith([2, 1]);
+  });
+
+  it('FE-COMP-COLLABELS-005: the folded list manages labels and closes on Escape or a click beside it', () => {
+    room(600, 200);
+    const { onManageLabels } = setup({ variant: 'map' });
+    const fold = screen.getByRole('button', { name: /collections.labels.title/ });
+
+    fireEvent.click(fold);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('group', { name: 'collections.labels.title' })).toBeNull();
+
+    fireEvent.click(fold);
+    fireEvent.mouseDown(document.body);
+    expect(screen.queryByRole('group', { name: 'collections.labels.title' })).toBeNull();
+
+    fireEvent.click(fold);
+    fireEvent.click(screen.getByRole('button', { name: /collections.labels.manage/ }));
+    expect(onManageLabels).toHaveBeenCalled();
+    expect(screen.queryByRole('group', { name: 'collections.labels.title' })).toBeNull();
+  });
+
+  it('FE-COMP-COLLABELS-006: a click inside the folded list keeps it open', () => {
+    room(600, 200);
+    setup({ variant: 'map' });
+    fireEvent.click(screen.getByRole('button', { name: /collections.labels.title/ }));
+    fireEvent.mouseDown(screen.getByRole('group', { name: 'collections.labels.title' }));
+    expect(screen.getByRole('group', { name: 'collections.labels.title' })).toBeInTheDocument();
+  });
+});

client/src/components/Collections/CollectionLabelFilter.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Plus, Settings2, Tags } from 'lucide-react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { Check, ChevronDown, Plus, Settings2, Tags } from 'lucide-react'
 import type { LabelOption } from '../../pages/collections/collectionsModel'
 import type { TranslationFn } from '../../types'
 
@@ -19,54 +19,154 @@ interface CollectionLabelFilterProps {
   t: TranslationFn
 }
 
+interface ChipsProps {
+  labelOptions: LabelOption[]
+  labelFilter: number[]
+  onToggle?: (id: number) => void
+}
+
+/** The label chips, as buttons, or as plain spans for the copy the map strip measures. */
+function LabelChips({ labelOptions, labelFilter, onToggle }: ChipsProps): React.ReactElement {
+  return (
+    <>
+      {labelOptions.map(l => {
+        const on = labelFilter.includes(l.id)
+        const body = (
+          <>
+            <span className="col-labelchip-dot" />
+            <span className="col-filter-lbl">{l.name}</span>
+            {l.count > 0 && <span className="col-filter-count">{l.count}</span>}
+          </>
+        )
+        const style = { ['--label' as string]: l.color ?? 'var(--accent)' }
+        if (!onToggle) return <span key={l.id} className={`col-labelchip${on ? ' on' : ''}`} style={style}>{body}</span>
+        return (
+          <button key={l.id} type="button" className={`col-labelchip${on ? ' on' : ''}`} style={style} onClick={() => onToggle(l.id)} aria-pressed={on}>
+            {body}
+          </button>
+        )
+      })}
+    </>
+  )
+}
+
+/**
+ * Whether the map strip has to fold into its button: true once its chips need more room
+ * than the slot beside the map's other controls. Measured on a hidden copy, so the strip
+ * unfolds again as soon as the room comes back.
+ */
+function useFolds(enabled: boolean) {
+  const slotRef = useRef<HTMLDivElement>(null)
+  const measureRef = useRef<HTMLDivElement>(null)
+  const [folded, setFolded] = useState(false)
+  useLayoutEffect(() => {
+    const slot = slotRef.current
+    const measure = measureRef.current
+    if (!enabled || !slot || !measure) return
+    const check = () => setFolded(measure.scrollWidth > slot.clientWidth + 1)
+    check()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(check)
+    observer.observe(slot)
+    observer.observe(measure)
+    return () => observer.disconnect()
+  }, [enabled])
+  return { slotRef, measureRef, folded }
+}
+
+/** Open state of the folded strip's list: closed by a click beside it or Escape, like the filter row's dropdowns. */
+function useFoldList(ref: React.RefObject<HTMLElement | null>) {
+  const [open, setOpen] = useState(false)
+  useEffect(() => {
+    if (!open) return
+    const onDoc = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) }
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onDoc)
+    document.addEventListener('keydown', onKey)
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey) }
+  }, [open, ref])
+  return { open, setOpen }
+}
+
 /**
  * The label filter, in one place because it has two homes.
  *
  * Labels are an axis of their own next to status, category and rating, so they
  * are grouped into a tray instead of joining the row as more loose buttons. On
- * a desktop it rides in the map's top bar, where there is room to spare; the
- * filter row keeps it whenever no map is on screen, so it never becomes
- * unreachable.
+ * a desktop it rides in the map's top bar; when the bar has no room for every
+ * label it folds into one button that opens them as a list, instead of hiding
+ * the last ones behind a scroll nobody sees. The filter row keeps it whenever
+ * no map is on screen, so it never becomes unreachable.
  */
 export default function CollectionLabelFilter({
   labelOptions, labelFilter, onLabelFilter, canManageLabels = false, onManageLabels,
   variant = 'bar', t,
 }: CollectionLabelFilterProps): React.ReactElement {
-  return (
-    <div
-      className={`col-labelfilter${variant === 'map' ? ' on-map' : ''}`}
-      role="group"
-      aria-label={t('collections.labels.manage')}
-    >
+  const onMap = variant === 'map'
+  const { slotRef, measureRef, folded } = useFolds(onMap)
+  const fold = useFoldList(slotRef)
+  const toggle = (id: number) => onLabelFilter(labelFilter.includes(id) ? labelFilter.filter(x => x !== id) : [...labelFilter, id])
+  const manageLabel = labelOptions.length ? t('collections.labels.manage') : t('collections.labels.add')
+  const manage = canManageLabels && onManageLabels && (
+    <button type="button" className="col-filter-addlabel" onClick={onManageLabels} title={manageLabel} aria-label={manageLabel}>
+      {labelOptions.length ? <Settings2 size={13} /> : <Plus size={13} />}
+    </button>
+  )
+
+  const tray = (
+    <div className={`col-labelfilter${onMap ? ' on-map' : ''}`} role="group" aria-label={t('collections.labels.manage')}>
       <Tags size={13} className="col-labelfilter-lead" aria-hidden="true" />
-      {labelOptions.map(l => {
-        const on = labelFilter.includes(l.id)
-        return (
+      <LabelChips labelOptions={labelOptions} labelFilter={labelFilter} onToggle={toggle} />
+      {manage}
+    </div>
+  )
+  if (!onMap) return tray
+
+  const active = labelFilter.filter(id => labelOptions.some(l => l.id === id)).length
+  return (
+    <div className="col-labelfilter-slot" ref={slotRef}>
+      {!folded ? tray : (
+        <>
           <button
-            key={l.id}
             type="button"
-            className={`col-labelchip${on ? ' on' : ''}`}
-            style={{ ['--label' as string]: l.color ?? 'var(--accent)' }}
-            onClick={() => onLabelFilter(on ? labelFilter.filter(id => id !== l.id) : [...labelFilter, l.id])}
-            aria-pressed={on}
+            onClick={() => fold.setOpen(o => !o)}
+            aria-haspopup="true"
+            aria-expanded={fold.open}
+            className={`col-labelfilter on-map col-labelfilter-fold${fold.open ? ' open' : ''}`}
           >
-            <span className="col-labelchip-dot" />
-            <span className="col-filter-lbl">{l.name}</span>
-            {l.count > 0 && <span className="col-filter-count">{l.count}</span>}
+            <Tags size={13} className="col-labelfilter-lead" aria-hidden="true" />
+            <span className="col-filter-lbl">{t('collections.labels.title')}</span>
+            {active > 0 && <span className="col-labelfilter-active">{active}</span>}
+            <ChevronDown size={14} className="col-filter-chev" aria-hidden="true" />
           </button>
-        )
-      })}
-      {canManageLabels && onManageLabels && (
-        <button
-          type="button"
-          className="col-filter-addlabel"
-          onClick={onManageLabels}
-          title={labelOptions.length ? t('collections.labels.manage') : t('collections.labels.add')}
-          aria-label={labelOptions.length ? t('collections.labels.manage') : t('collections.labels.add')}
-        >
-          {labelOptions.length ? <Settings2 size={13} /> : <Plus size={13} />}
-        </button>
+          {fold.open && (
+            <div className="col-filter-pop col-labelfilter-pop" role="group" aria-label={t('collections.labels.title')}>
+              {labelOptions.map(l => {
+                const on = labelFilter.includes(l.id)
+                return (
+                  <button key={l.id} type="button" aria-pressed={on} className={`col-filter-opt${on ? ' on' : ''}`} onClick={() => toggle(l.id)}>
+                    <span className="col-filter-dot" style={{ background: l.color ?? 'var(--accent)' }} />
+                    <span className="col-filter-lbl">{l.name}</span>
+                    {l.count > 0 && <span className="col-filter-count">{l.count}</span>}
+                    {on && <Check size={13} className="col-filter-check" />}
+                  </button>
+                )
+              })}
+              {canManageLabels && onManageLabels && (
+                <button type="button" className="col-filter-opt col-labelfilter-manage" onClick={() => { fold.setOpen(false); onManageLabels() }}>
+                  {labelOptions.length ? <Settings2 size={13} /> : <Plus size={13} />}
+                  <span className="col-filter-lbl">{manageLabel}</span>
+                </button>
+              )}
+            </div>
+          )}
+        </>
       )}
+      <div className="col-labelfilter on-map col-labelfilter-measure" ref={measureRef} aria-hidden="true">
+        <Tags size={13} className="col-labelfilter-lead" />
+        <LabelChips labelOptions={labelOptions} labelFilter={labelFilter} />
+        {canManageLabels && onManageLabels && <span className="col-filter-addlabel"><Settings2 size={13} /></span>}
+      </div>
     </div>
   )
 }

client/src/components/Collections/CollectionList.tsx

@@ -3,8 +3,8 @@ import { Check, MapPin } from 'lucide-react'
 import type { CollectionPlace, CollectionStatus, CollectionLabel } from '@trek/shared'
 import type { TranslationFn } from '../../types'
 import PlaceAvatar from '../shared/PlaceAvatar'
-import { getCategoryIcon } from '../shared/categoryIcons'
 import StatusBadge from './StatusBadge'
+import CollectionPlaceTags from './CollectionPlaceTags'
 
 interface CollectionListProps {
   places: CollectionPlace[]
@@ -51,7 +51,7 @@ export default function CollectionList({
             tabIndex={0}
             onClick={() => (selectMode ? onToggleSelect(place.id) : onOpenPlace(place.id))}
             onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (selectMode) onToggleSelect(place.id); else onOpenPlace(place.id) } }}
-            className={`col-lrow${active || selected ? ' sel' : ''}`}
+            className={`col-lrow col-lrow-place${active || selected ? ' sel' : ''}`}
           >
             {selectMode ? (
               <span className={`col-lcheck${selected ? ' on' : ''}`}>{selected && <Check size={14} strokeWidth={3} />}</span>
@@ -67,24 +67,8 @@ export default function CollectionList({
                 </div>
               )}
             </div>
-            <div className="col-lrow-end">
-              {placeLabels.slice(0, 2).map(l => (
-                <span key={l.id} className="col-lrow-label" style={{ ['--label' as string]: l.color || 'var(--accent)' }} title={l.name}>
-                  <span className="col-labelchip-dot" /> {l.name}
-                </span>
-              ))}
-              {placeLabels.length > 2 && <span className="col-lrow-label more" title={placeLabels.map(l => l.name).join(', ')}>+{placeLabels.length - 2}</span>}
-              {place.category?.name && (() => {
-                const CatIcon = getCategoryIcon(place.category.icon ?? undefined)
-                return (
-                  <>
-                    <span className="col-lrow-cat" style={{ ['--cat' as string]: place.category.color || '#6366f1' }}>
-                      <CatIcon size={11} /> {place.category.name}
-                    </span>
-                    <span className="col-lrow-div" aria-hidden />
-                  </>
-                )
-              })()}
+            <CollectionPlaceTags place={place} labels={placeLabels} />
+            <div className="col-lrow-status">
               <StatusBadge status={place.status} onChange={selectMode || !onStatusChange ? undefined : next => onStatusChange(place.id, next)} t={t} />
             </div>
           </div>

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

@@ -0,0 +1,88 @@
+// FE-COMP-COLTAGS-001 to FE-COMP-COLTAGS-005
+import type { CollectionLabel, CollectionPlace } from '@trek/shared';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../../tests/helpers/render';
+import CollectionPlaceTags from './CollectionPlaceTags';
+
+// jsdom lays nothing out: the observer reports each element once it is observed, and
+// the widths below stand in for the browser's.
+beforeAll(() => {
+  globalThis.ResizeObserver = class {
+    constructor(private readonly cb: ResizeObserverCallback) {}
+    observe(target: Element) {
+      this.cb([{ target } as ResizeObserverEntry], this as unknown as ResizeObserver);
+    }
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => vi.restoreAllMocks());
+
+/** Row and chip widths in px: the row holds the category, one label and the "+N" chip. */
+function layout({ row = 250, cutName }: { row?: number; cutName?: string } = {}) {
+  vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(function (this: HTMLElement) {
+    if (this.classList.contains('col-lrow-cat')) return 50;
+    if (this.classList.contains('col-lrow-label')) return 100;
+    return 0;
+  });
+  vi.spyOn(Element.prototype, 'clientWidth', 'get').mockImplementation(function (this: Element) {
+    if (this.classList.contains('col-lrow-tags')) return row;
+    if (this.classList.contains('col-lrow-txt')) return 60;
+    return 0;
+  });
+  vi.spyOn(Element.prototype, 'scrollWidth', 'get').mockImplementation(function (this: Element) {
+    if (this.classList.contains('col-lrow-txt')) return this.textContent === cutName ? 90 : 60;
+    return 0;
+  });
+}
+
+const label = (id: number, name: string): CollectionLabel =>
+  ({ id, collection_id: 1, name, color: '#2563eb' }) as unknown as CollectionLabel;
+const place = (category: { name: string; color?: string; icon?: string } | null = { name: 'Attraction' }) =>
+  ({ id: 7, name: 'Torre', category }) as unknown as CollectionPlace;
+const LABELS = [label(1, 'Core shortlist'), label(2, 'Heritage'), label(3, 'Pair with another stop')];
+
+describe('CollectionPlaceTags', () => {
+  it('FE-COMP-COLTAGS-001: draws nothing for a place without labels or a category', () => {
+    const { container } = render(<CollectionPlaceTags place={place(null)} labels={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('FE-COMP-COLTAGS-002: shows the category first, then the labels that fit, then a "+N" for the rest', () => {
+    layout();
+    const { container } = render(<CollectionPlaceTags place={place()} labels={LABELS} />);
+    const chips = Array.from(container.querySelectorAll('.col-lrow-tags > span')).map((el) => el.className);
+    expect(chips[0]).toBe('col-lrow-cat');
+    expect(container.querySelectorAll('.col-lrow-label:not(.is-over)')).toHaveLength(1);
+    expect(container.querySelectorAll('.col-lrow-label.is-over')).toHaveLength(2);
+    expect(container.querySelector('.col-lrow-label.is-over')).toHaveAttribute('aria-hidden', 'true');
+    expect(screen.getByText('+2')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLTAGS-003: a row wide enough shows every label and no "+N"', () => {
+    layout({ row: 800 });
+    const { container } = render(<CollectionPlaceTags place={place()} labels={LABELS} />);
+    expect(container.querySelectorAll('.col-lrow-label:not(.is-over)')).toHaveLength(3);
+    expect(container.querySelector('.col-lrow-more')).toBeNull();
+  });
+
+  it('FE-COMP-COLTAGS-004: the "+N" names the hidden labels in its tooltip', async () => {
+    layout();
+    render(<CollectionPlaceTags place={place()} labels={LABELS} />);
+    fireEvent.mouseEnter(screen.getByText('+2'));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Heritage, Pair with another stop');
+  });
+
+  it('FE-COMP-COLTAGS-005: a chip says its name in a tooltip only while it cuts the name short', async () => {
+    layout({ row: 800, cutName: 'Heritage' });
+    render(<CollectionPlaceTags place={place()} labels={LABELS} />);
+    fireEvent.mouseEnter(screen.getByText('Core shortlist').closest('.col-lrow-label') as HTMLElement);
+    await new Promise((r) => setTimeout(r, 350));
+    expect(screen.queryByRole('tooltip')).toBeNull();
+    fireEvent.mouseLeave(screen.getByText('Core shortlist').closest('.col-lrow-label') as HTMLElement);
+
+    fireEvent.mouseEnter(screen.getByText('Heritage').closest('.col-lrow-label') as HTMLElement);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Heritage');
+  });
+});

client/src/components/Collections/CollectionPlaceTags.tsx

@@ -0,0 +1,145 @@
+import type { CollectionLabel, CollectionPlace } from '@trek/shared';
+import React, { createElement, useEffect, useRef, useState } from 'react';
+import { getCategoryIcon } from '../shared/categoryIcons';
+import { Tooltip } from '../shared/Tooltip';
+
+/**
+ * One observer for every row and chip of a list, so a list of hundreds of places does
+ * not hold one per element. An element starts with one notification once observed.
+ */
+const sizeWatch = new Map<Element, () => void>();
+let sizeObserver: ResizeObserver | null = null;
+function watchSize(el: Element, onResize: () => void): () => void {
+  if (typeof ResizeObserver === 'undefined') return () => {};
+  sizeObserver ??= new ResizeObserver((entries) => {
+    for (const entry of entries) sizeWatch.get(entry.target)?.();
+  });
+  sizeWatch.set(el, onResize);
+  sizeObserver.observe(el);
+  return () => {
+    sizeWatch.delete(el);
+    sizeObserver?.unobserve(el);
+  };
+}
+
+/**
+ * The tooltip of a label or category chip: only while the chip cuts its name short,
+ * since one repeating the words on screen says nothing.
+ */
+function ChipTooltip({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactElement<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+}): React.ReactElement {
+  const [cut, setCut] = useState(false);
+  const ref = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    const text = ref.current?.querySelector('.col-lrow-txt');
+    if (!text) return undefined;
+    return watchSize(text, () => setCut(text.scrollWidth > text.clientWidth + 1));
+  }, []);
+  return (
+    <Tooltip label={label} placement="top" disabled={!cut}>
+      {React.cloneElement(children, { ref })}
+    </Tooltip>
+  );
+}
+
+/** The room a "+N" chip takes, held free while the labels are fitted. */
+const MORE_CHIP = 34;
+
+/**
+ * A chip's own width, also while the row squeezes it: the part its name is cut short by
+ * is the name's scroll width over its box, up to the widest the chip may grow.
+ */
+const naturalWidth = (el: HTMLElement): number => {
+  const text = el.querySelector<HTMLElement>('.col-lrow-txt');
+  const full = el.offsetWidth + (text ? text.scrollWidth - text.clientWidth : 0);
+  const cap = parseFloat(getComputedStyle(el).maxWidth);
+  return Number.isFinite(cap) ? Math.min(full, cap) : full;
+};
+
+/**
+ * How many labels fit beside the category in `row`: as many as it holds with room left
+ * for the "+N" chip, and at least one, which then shortens its name. Every label is in
+ * the row, the ones that do not fit kept out of sight, so each can be measured.
+ */
+function labelsThatFit(row: HTMLElement): number {
+  const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
+  const labels = Array.from(row.querySelectorAll<HTMLElement>('.col-lrow-label'));
+  const fixed = Array.from(row.querySelectorAll<HTMLElement>('.col-lrow-cat, .col-lrow-div'))
+    .filter((el) => el.offsetWidth > 0)
+    .reduce((sum, el) => sum + naturalWidth(el) + gap, 0);
+  let used = fixed;
+  let fit = 0;
+  for (let i = 0; i < labels.length; i++) {
+    const left = labels.length - i - 1;
+    const need = used + naturalWidth(labels[i]) + (left > 0 ? gap + MORE_CHIP : 0);
+    if (need > row.clientWidth && i > 0) break;
+    used += naturalWidth(labels[i]) + gap;
+    fit = i + 1;
+  }
+  return fit;
+}
+
+/**
+ * A place row's category and labels, on one line that never wraps (#2981). The category
+ * comes first, then as many labels as the row has room for, then a "+N" chip naming the
+ * rest in its tooltip, so a wide list shows every label and a narrow one the first.
+ */
+export default function CollectionPlaceTags({
+  place,
+  labels,
+}: {
+  place: CollectionPlace;
+  labels: CollectionLabel[];
+}): React.ReactElement | null {
+  const ref = useRef<HTMLDivElement>(null);
+  const [fit, setFit] = useState(labels.length);
+  const labelKey = labels.map((l) => `${l.id}:${l.name}`).join('|');
+  const categoryName = place.category?.name ?? null;
+
+  // Fitted on every change of the row's width and once more whenever its labels change:
+  // observing anew hands the observer's first notification to the new labels.
+  useEffect(() => {
+    const row = ref.current;
+    if (!row) return undefined;
+    return watchSize(row, () => setFit(labelsThatFit(row)));
+  }, [labelKey, categoryName]);
+
+  if (!labels.length && !categoryName) return null;
+  const shown = Math.min(labels.length, Math.max(1, fit));
+  const hidden = labels.slice(shown);
+
+  return (
+    <div ref={ref} className="col-lrow-tags">
+      {categoryName && (
+        <ChipTooltip label={categoryName}>
+          <span className="col-lrow-cat" style={{ ['--cat' as string]: place.category?.color || '#6366f1' }}>
+            {createElement(getCategoryIcon(place.category?.icon ?? undefined), { size: 11 })}{' '}
+            <span className="col-lrow-txt">{categoryName}</span>
+          </span>
+        </ChipTooltip>
+      )}
+      {labels.map((l, i) => (
+        <ChipTooltip key={l.id} label={l.name}>
+          <span
+            className={i < shown ? 'col-lrow-label' : 'col-lrow-label is-over'}
+            style={{ ['--label' as string]: l.color || 'var(--accent)' }}
+            aria-hidden={i < shown ? undefined : true}
+          >
+            <span className="col-labelchip-dot" /> <span className="col-lrow-txt">{l.name}</span>
+          </span>
+        </ChipTooltip>
+      ))}
+      {hidden.length > 0 && (
+        <Tooltip label={hidden.map((l) => l.name).join(', ')} placement="top">
+          <span className="col-lrow-more">+{hidden.length}</span>
+        </Tooltip>
+      )}
+      <span className="col-lrow-div" aria-hidden />
+    </div>
+  );
+}

client/src/components/Dawarich/DawarichAcceptDialog.tsx

@@ -3,6 +3,7 @@ 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 { useFormatDate } from '../../hooks/useDateFormat'
 import { DialogButton, DialogFooter, DialogHeader, DialogShell, FooterSpacer, NEUTRAL_TINT } from '../shared/DialogShell'
 import MSheet from '../../mobile/components/MSheet'
 import { FormSheetFooter, FormSheetHeader } from '../../mobile/screens/trip/sheets/PlSheetChrome'
@@ -64,6 +65,7 @@ export default function DawarichAcceptDialog({
   onConfirm,
 }: DawarichAcceptDialogProps): React.ReactElement | null {
   const { t, locale } = useTranslation()
+  const { formatDateTime } = useFormatDate()
   const phone = useIsPhone()
   const labelId = useId()
 
@@ -140,7 +142,7 @@ export default function DawarichAcceptDialog({
             </span>
             <p className="min-w-0 flex-1 text-caption text-content">
               {t('dawarich.accept.recorded', {
-                from: new Date(suggestion.startedAt).toLocaleString(locale),
+                from: formatDateTime(new Date(suggestion.startedAt)),
                 to: new Date(suggestion.endedAt).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }),
               })}
             </p>

client/src/components/Ferratas/FerrataLayerLeaflet.tsx

@@ -3,6 +3,8 @@ import { useMemo, useState } from 'react';
 import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet';
 
 import { useTranslation } from '../../i18n';
+import { frameLine, frameLng } from '../../utils/lngFrame';
+import { useLngFrame } from '../Map/lngFrameContext';
 import { type FerrataGroup, ferrataLabel } from './ferrataGroups';
 import { FERRATA_ICON_MIN_ZOOM, FERRATA_ICON_SIZE, ferrataIconSvg, placeFerrataIcons } from './ferrataIcon';
 import { ferrataPositions } from './ferrataModel';
@@ -81,6 +83,8 @@ export default function FerrataLayerLeaflet({
   selectedId?: string | null;
 }) {
   const paint = useFerrataPaint();
+  // Drawn in the map's longitude frame, with the trip (#2975).
+  const frame = useLngFrame();
   const iconGroups = useIconGroups(groups);
   const [hovered, setHovered] = useState<string | null>(null);
   // Rebuilt per set of ferratas and per theme: pathOptions only reach Leaflet when their reference changes.
@@ -110,7 +114,7 @@ export default function FerrataLayerLeaflet({
       group.segments.map((segment) => ({
         group,
         segment,
-        positions: ferrataPositions(segment),
+        positions: frameLine(frame, ferrataPositions(segment)),
         casing,
         litCasing,
         line,
@@ -118,7 +122,7 @@ export default function FerrataLayerLeaflet({
         hit,
       }))
     );
-  }, [groups, paint]);
+  }, [groups, paint, frame]);
 
   if (lines.length === 0) return null;
   const lit = (group: FerrataGroup) => group.id === hovered || group.id === selectedId;
@@ -163,7 +167,7 @@ export default function FerrataLayerLeaflet({
       {iconGroups.map((group) => (
         <Marker
           key={`${group.id}-icon`}
-          position={group.midpoint}
+          position={frame ? [group.midpoint[0], frameLng(frame, group.midpoint[1])] : group.midpoint}
           icon={ICON}
           keyboard={false}
           eventHandlers={{

client/src/components/Files/FileManager.helpers.ts

@@ -1,5 +1,7 @@
 import { FileText, FileImage, File, FileVideo, Plane, Train, Car, Ship, Bus, Sailboat, CableCar, Bike, CarTaxiFront, Route } from 'lucide-react'
 import { downloadFile } from '../../utils/fileDownload'
+import { readDateFormat } from '../../hooks/useDateFormat'
+import { formatDisplayDate } from '../../utils/dateFormat'
 
 export function isImage(mimeType?: string | null) {
   if (!mimeType) return false
@@ -57,10 +59,10 @@ export function triggerDownload(url: string, filename: string) {
   downloadFile(url, filename).catch(() => {})
 }
 
-export function formatDateWithLocale(dateStr?: string | null, locale?: string) {
+export function formatDateWithLocale(dateStr?: string | null, locale?: string, dateFormat: string = readDateFormat()) {
   if (!dateStr) return ''
   try {
-    return new Date(dateStr).toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric' })
+    return formatDisplayDate(new Date(dateStr), locale, { day: '2-digit', month: '2-digit', year: 'numeric' }, dateFormat)
   } catch { return '' }
 }
 

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { useTranslation } from '../../../i18n/TranslationContext'
+import { useFormatDate } from '../../../hooks/useDateFormat'
 import { relativeTime } from '../../../utils/relativeTime'
 import { Tooltip } from '../../shared/Tooltip'
 
@@ -83,11 +84,12 @@ export function StateBadge({ state, compact }: { state: string; compact?: boolea
 
 /** "2h ago", or "never" when a binding has not run yet. */
 export function LastRun({ at }: { at: string | null }) {
-  const { t, language, locale } = useTranslation()
+  const { t, language } = useTranslation()
+  const { formatDateTime } = useFormatDate()
   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 <Tooltip label={new Date(ms).toLocaleString(locale)}><span>{relativeTime(ms, language)}</span></Tooltip>
+  return <Tooltip label={formatDateTime(new Date(ms))}><span>{relativeTime(ms, language)}</span></Tooltip>
 }
 
 /**

client/src/components/Help/HelpGuideView.tsx

@@ -8,6 +8,7 @@ import type { HelpGuide } from '../../help/types'
 import { helpIcon } from './helpIcons'
 import HelpBadge from './HelpBadge'
 import HelpDocLink from './HelpDocLink'
+import { useAuthStore } from '../../store/authStore'
 import HelpSizeChip from './HelpSizeChip'
 import { useScreenRoute } from './useScreenRoute'
 
@@ -27,6 +28,8 @@ export default function HelpGuideView({ guide }: { guide: HelpGuide }): React.Re
   const openLightbox = useHelpStore(s => s.openLightbox)
   const closeHelp = useHelpStore(s => s.closeHelp)
   const docIndex = useHelpStore(s => s.docIndex)
+  // No Help & Docs page on a managed install (App.tsx), so no link into it.
+  const docs = useAuthStore(s => s.managed) ? undefined : guide.docs
   const openGuide = useHelpStore(s => s.openGuide)
   const title = t(guideKey(guide.id, 'title'))
   const screen = getHelpContext(guide.context)
@@ -180,9 +183,9 @@ export default function HelpGuideView({ guide }: { guide: HelpGuide }): React.Re
       )}
 
       {/* Go there / docs / related */}
-      {(guide.link || guide.docs || related.length > 0) && (
+      {(guide.link || docs || related.length > 0) && (
         <section className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          {(guide.link || guide.docs) && (
+          {(guide.link || docs) && (
             <div className="rounded-2xl border border-edge bg-surface-card p-4 flex flex-col gap-3">
               <HelpBadge tone="neutral" icon={Link2} uppercase className="self-start">{t('help.center.docsSection')}</HelpBadge>
               {guide.link && (
@@ -195,8 +198,8 @@ export default function HelpGuideView({ guide }: { guide: HelpGuide }): React.Re
                   <ArrowUpRight className="w-4 h-4" />
                 </Link>
               )}
-              {guide.docs && (
-                <HelpDocLink to={docsRoute(guide.docs)} title={t('help.center.openDocs')} subtitle={docTitle(docIndex, guide.docs.slug)} />
+              {docs && (
+                <HelpDocLink to={docsRoute(docs)} title={t('help.center.openDocs')} subtitle={docTitle(docIndex, docs.slug)} />
               )}
             </div>
           )}

client/src/components/Help/HelpHome.tsx

@@ -8,6 +8,7 @@ import type { HelpContext, HelpDocLink as HelpDocTarget, HelpGuide } from '../..
 import { helpIcon } from './helpIcons'
 import HelpBadge from './HelpBadge'
 import HelpDocLink from './HelpDocLink'
+import { useAuthStore } from '../../store/authStore'
 import HelpSizeChip from './HelpSizeChip'
 import { useScreenRoute } from './useScreenRoute'
 
@@ -19,6 +20,8 @@ import { useScreenRoute } from './useScreenRoute'
 export default function HelpHome({ context }: { context: HelpContext | null }): React.ReactElement {
   const { t } = useTranslation()
   const docIndex = useHelpStore(s => s.docIndex)
+  // No Help & Docs page on a managed install (App.tsx), so no links into it.
+  const managed = useAuthStore(s => s.managed)
   const closeHelp = useHelpStore(s => s.closeHelp)
   const screenRoute = useScreenRoute(context?.route)
 
@@ -35,7 +38,7 @@ export default function HelpHome({ context }: { context: HelpContext | null }):
   const guides = guidesFor(context)
   const bullets = Array.from({ length: context.bullets }, (_, i) => t(ctxBulletKey(context.id, i + 1)))
   const children = childHelpContexts(context.id)
-  const docs = onePerPage(context.docs)
+  const docs = managed ? [] : onePerPage(context.docs)
   const trail = helpContextTrail(context).slice(0, -1)
   const Icon = helpIcon(context.icon)
 

client/src/components/Help/HelpSearchResults.tsx

@@ -6,6 +6,7 @@ import { allHelpGuides, guideKey, guideStepKey, guideTipKey, ctxKey } from '../.
 import type { HelpGuide } from '../../help/types'
 import { GuideCard, SectionLabel } from './HelpHome'
 import HelpDocLink from './HelpDocLink'
+import { useAuthStore } from '../../store/authStore'
 
 /** Guides shown for a query, at most. The docs list is capped by the server. */
 const MAX_GUIDES = 8
@@ -62,6 +63,8 @@ export default function HelpSearchResults(): React.ReactElement {
   const { t } = useTranslation()
   const query = useHelpStore(s => s.query)
   const status = useHelpStore(s => s.searchStatus)
+  // No Help & Docs page on a managed install (App.tsx): guides only.
+  const managed = useAuthStore(s => s.managed)
   const docHits = useHelpStore(s => s.docHits)
   const q = query.trim()
 
@@ -75,7 +78,7 @@ export default function HelpSearchResults(): React.ReactElement {
       .map(x => x.g)
   }, [q, t])
 
-  const nothing = guides.length === 0 && status === 'done' && docHits.length === 0
+  const nothing = guides.length === 0 && (managed || (status === 'done' && docHits.length === 0))
 
   return (
     <div className="trek-help-view flex flex-col gap-8">
@@ -93,6 +96,7 @@ export default function HelpSearchResults(): React.ReactElement {
         </section>
       )}
 
+      {!managed && (
       <section className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
           <SectionLabel>{t('help.center.searchDocs')}</SectionLabel>
@@ -113,6 +117,7 @@ export default function HelpSearchResults(): React.ReactElement {
           </ul>
         )}
       </section>
+      )}
 
       {nothing && (
         <div className="flex flex-col items-center text-center gap-2 py-10">

client/src/components/Journey/JourneyDayImportReview.tsx

@@ -1,6 +1,8 @@
 import { Clock, FilePen, Loader2, RefreshCw, Route, Users } from 'lucide-react';
+import { useDateFormat } from '../../hooks/useDateFormat';
 import { useTranslation } from '../../i18n';
 import { useSettingsStore } from '../../store/settingsStore';
+import { formatDisplayDateTime } from '../../utils/dateFormat';
 import { formatClockTime } from '../../utils/formatters';
 import { formatDistance } from '../../utils/units';
 import { SoftPill } from '../Planner/planParts';
@@ -26,6 +28,7 @@ type Props = { state: JourneyDayImportState; dayColor: string; prep?: JourneyRec
  */
 function DayNotices({ state, prep }: { state: JourneyDayImportState; prep?: JourneyRecordingPrepState }) {
   const { t, locale } = useTranslation();
+  const dateFormat = useDateFormat();
   const { review, outcome } = state;
   const reason = review ? reasonText(review.error, t) : '';
   const day = prep?.dayPrep(state.date);
@@ -43,7 +46,12 @@ function DayNotices({ state, prep }: { state: JourneyDayImportState; prep?: Jour
           {review.syncedAt
             ? t('journey.dayImport.stale', {
                 reason,
-                date: new Date(review.syncedAt).toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' }),
+                date: formatDisplayDateTime(
+                  new Date(review.syncedAt),
+                  locale,
+                  { dateStyle: 'medium', timeStyle: 'short' },
+                  dateFormat
+                ),
               })
             : t('journey.dayImport.staleNever', { reason })}
         </Notice>

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

@@ -8,6 +8,7 @@ import { render, screen, waitFor, fireEvent, within } from '../../../tests/helpe
 import { seedStore } from '../../../tests/helpers/store'
 import { buildSettings } from '../../../tests/helpers/factories'
 import { useSettingsStore } from '../../store/settingsStore'
+import { useAddonStore } from '../../store/addonStore'
 import { server } from '../../../tests/helpers/msw/server'
 import type { GalleryPhoto, JourneyEntry, JourneyPhoto, JourneyTrip } from '../../store/journeyStore'
 import type { ResilientResult, UploadProgress } from '../../utils/uploadQueue'
@@ -102,6 +103,8 @@ beforeEach(() => {
   // The time field reads time_format, so pin it: without this the cases that
   // assert a 24h string depend on whichever test ran before them (#2067).
   seedStore(useSettingsStore, { settings: buildSettings({ time_format: '24h' }) })
+  // A photo provider switched on for the install, so the External photos source is offered.
+  seedStore(useAddonStore, { addons: [{ id: 'immich', name: 'Immich', type: 'photo_provider', enabled: true } as never] })
   window.__addToast = toastSpy
   Object.defineProperty(URL, 'createObjectURL', {
     configurable: true, writable: true, value: vi.fn(() => 'blob:preview'),
@@ -430,6 +433,14 @@ describe('EntryEditor', () => {
     expect(screen.getByText('Roma Termini')).toBeInTheDocument()
   })
 
+  it('FE-JRN-EDITOR-018b: offers no External photos source where no photo provider is on', () => {
+    seedStore(useAddonStore, { addons: [] })
+    mountEditor(buildEntry({ id: 10 }))
+
+    expect(screen.queryByRole('button', { name: 'External photos' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Upload photos/ })).toBeInTheDocument()
+  })
+
   it('FE-JRN-EDITOR-019: reports that no external provider is connected', async () => {
     server.use(http.get('/api/addons', () => HttpResponse.json({})))
     const user = userEvent.setup()

client/src/components/Journey/JourneyDetailPageEntryEditor.tsx

@@ -17,6 +17,7 @@ import { DialogButton, DialogFooter, DialogHeader, DialogSection, DialogShell, D
 import { AddRowButton, EditorField, INPUT } from '../shared/dialogParts'
 import { Tooltip } from '../shared/Tooltip'
 import { useJourneyEntryForm, type PendingProviderGroup } from './useJourneyEntryForm'
+import { useAddonStore } from '../../store/addonStore'
 
 /** A chip of the mood and weather rows, as in the collection dialogs' category row. */
 const CHIP = 'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 font-semibold transition-colors'
@@ -139,6 +140,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
   onDone: () => void
 }) {
   const { t } = useTranslation()
+  const photoProvidersOn = useAddonStore(s => s.isEnabled('memories'))
   const {
     title, setTitle, story, setStory, entryDate, setEntryDate, entryTime, setEntryTime,
     locationName,
@@ -273,14 +275,19 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
                     <Camera size={14} />
                   </button>
                 </Tooltip>
-                <button type="button"
-                  onClick={() => { setPhotoTab('external'); setShowGalleryPick(false) }}
-                  disabled={saving}
-                  aria-pressed={photoTab === 'external'}
-                  className={`${SOURCE} flex-1 ${photoTab === 'external' ? SOURCE_ON : SOURCE_OFF}`}
-                >
-                  <Image size={13} /> {t('journey.editor.externalPhotos') || 'External photos'}
-                </button>
+                {/* Only where the install has a photo provider (Immich, Synology) switched
+                    on, as on the phone: a source that can only say "nothing connected"
+                    is not worth its width, and the other two share the row instead. */}
+                {photoProvidersOn && (
+                  <button type="button"
+                    onClick={() => { setPhotoTab('external'); setShowGalleryPick(false) }}
+                    disabled={saving}
+                    aria-pressed={photoTab === 'external'}
+                    className={`${SOURCE} flex-1 ${photoTab === 'external' ? SOURCE_ON : SOURCE_OFF}`}
+                  >
+                    <Image size={13} /> {t('journey.editor.externalPhotos') || 'External photos'}
+                  </button>
+                )}
               </div>
 
               {/* The gallery picker, directly below the buttons. Safari collapses
@@ -312,7 +319,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
                   </div>
                 </div>
               )}
-              {photoTab === 'external' && (
+              {photoTab === 'external' && photoProvidersOn && (
                 <div className={`${PHOTO_PANEL} flex flex-col overflow-hidden`} style={{ height: 'min(56vh, 520px)' }}>
                   <div className="flex items-center justify-between gap-2 border-b border-edge-faint px-3 py-2">
                     <div className="min-w-0">

client/src/components/Journey/journeyOpenAt.test.ts

@@ -0,0 +1,34 @@
+// FE-JRN-OPENAT-001 to FE-JRN-OPENAT-005
+import { describe, expect, it } from 'vitest';
+import { journeyOpenAtEntryId } from './journeyOpenAt';
+
+const entries = [
+  { id: 3, entry_date: '2026-05-03' },
+  { id: 1, entry_date: '2026-05-01' },
+  { id: 2, entry_date: '2026-05-01' },
+  { id: 5, entry_date: '2026-05-05' },
+];
+
+describe('journeyOpenAtEntryId', () => {
+  it('FE-JRN-OPENAT-001: a running journey opens on the first entry of today', () => {
+    expect(journeyOpenAtEntryId(entries, { today: '2026-05-03' })).toBe('3');
+  });
+
+  it('FE-JRN-OPENAT-002: a rest day lands on the last day written before it', () => {
+    expect(journeyOpenAtEntryId(entries, { today: '2026-05-04' })).toBe('3');
+  });
+
+  it('FE-JRN-OPENAT-003: a journey that is over, or not begun, opens at its start', () => {
+    expect(journeyOpenAtEntryId(entries, { today: '2026-06-01' })).toBeNull();
+    expect(journeyOpenAtEntryId(entries, { today: '2026-04-01' })).toBeNull();
+  });
+
+  it('FE-JRN-OPENAT-004: newest-first opens on the latest day, also after the trip', () => {
+    expect(journeyOpenAtEntryId(entries, { today: '2026-06-01', newestFirst: true })).toBe('5');
+    expect(journeyOpenAtEntryId(entries, { today: '2026-05-03', newestFirst: true })).toBe('5');
+  });
+
+  it('FE-JRN-OPENAT-005: an empty journey has nothing to open on', () => {
+    expect(journeyOpenAtEntryId([], { today: '2026-05-03', newestFirst: true })).toBeNull();
+  });
+});

client/src/components/Journey/journeyOpenAt.ts

@@ -0,0 +1,40 @@
+interface DatedEntry {
+  id: number | string;
+  entry_date: string;
+}
+
+/**
+ * The entry a journey opens on, or null for its first one.
+ *
+ * Every load used to start at the first entry, so keeping a journal on a trip
+ * meant scrolling past everything already written before you could add to it
+ * (discussion #2299). "Today" means the last day at or before now: a rest day
+ * with nothing written still lands you at yesterday rather than at the start.
+ *
+ * Only while the journey is running, though. A journey that ended last spring
+ * is something you read, and reading starts at the beginning; opening it at the
+ * last page would be the worse of the two mistakes.
+ *
+ * A link the owner published newest-first reads like a blog (#1614), so it
+ * opens on the latest day whether or not the trip is still running (#2851).
+ *
+ * Always the first entry OF the chosen day, not the last one before now: a day
+ * is read from its beginning.
+ */
+export function journeyOpenAtEntryId(
+  entries: readonly DatedEntry[],
+  { today, newestFirst = false }: { today: string; newestFirst?: boolean }
+): string | null {
+  const dated = [...entries].sort((a, b) => a.entry_date.localeCompare(b.entry_date));
+  const first = dated[0];
+  const last = dated[dated.length - 1];
+  if (!first || !last) return null;
+  let day = last.entry_date;
+  if (!newestFirst) {
+    if (today < first.entry_date || today > last.entry_date) return null;
+    const reached = dated.filter((e) => e.entry_date <= today);
+    day = reached[reached.length - 1]?.entry_date ?? first.entry_date;
+  }
+  const dayStart = dated.find((e) => e.entry_date === day) ?? first;
+  return String(dayStart.id);
+}

client/src/components/Journey/useJourneyCarouselSync.test.ts

@@ -1,4 +1,4 @@
-// FE-JRN-CAROUSEL-001 to FE-JRN-CAROUSEL-008: the card carousel over the journey map,
+// FE-JRN-CAROUSEL-001 to FE-JRN-CAROUSEL-009: the card carousel over the journey map,
 // behind both the phone journey screen and the narrow desktop and public timeline.
 import { act, renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -145,4 +145,43 @@ describe('useJourneyCarouselSync', () => {
     act(() => result.current.openEntryById('99'));
     expect(props.onOpenEntry).toHaveBeenCalledTimes(1);
   });
+
+  it('FE-JRN-CAROUSEL-009: a carousel scrolled to either end settles on the card at that end (#2851)', () => {
+    const carousel = document.createElement('div');
+    carousel.getBoundingClientRect = () => ({ left: 0 }) as DOMRect;
+    Object.defineProperty(carousel, 'clientWidth', { value: 300 });
+    Object.defineProperty(carousel, 'scrollWidth', { value: 600 });
+    const hook = renderHook(
+      (p: Options) => {
+        const sync = useJourneyCarouselSync(p);
+        (sync.carouselRef as { current: HTMLDivElement | null }).current = carousel;
+        return sync;
+      },
+      { initialProps: { entries: [], mapEntries: [], onOpenEntry: vi.fn() } }
+    );
+    hook.rerender({ entries: ENTRIES, mapEntries: [], onOpenEntry: vi.fn() });
+    // Card 1 sits at the centre (150) in both positions: only the ends decide.
+    [0, 100, 200].forEach((left, i) => {
+      const node = document.createElement('div');
+      node.getBoundingClientRect = () => ({ left, width: 100 }) as DOMRect;
+      hook.result.current.cardRefs.current.set(i, node);
+    });
+    const settleAt = (scrollLeft: number) => {
+      Object.defineProperty(carousel, 'scrollLeft', { value: scrollLeft, configurable: true });
+      carousel.dispatchEvent(new Event('scroll'));
+      act(() => {
+        vi.advanceTimersByTime(150);
+      });
+    };
+
+    settleAt(300);
+    expect(hook.result.current.activeIndex).toBe(2);
+    settleAt(150);
+    expect(hook.result.current.activeIndex).toBe(1);
+    // Right to left: the scroll position runs negative from the start.
+    settleAt(-300);
+    expect(hook.result.current.activeIndex).toBe(2);
+    settleAt(0);
+    expect(hook.result.current.activeIndex).toBe(0);
+  });
 });

client/src/components/Journey/useJourneyCarouselSync.ts

@@ -71,6 +71,14 @@ export function useJourneyCarouselSync<E extends CarouselEntry>({
         bestIdx = idx;
       }
     });
+    // The first and the last card can never reach the centre, so a carousel scrolled
+    // as far as it goes means the card at that end: without this, opening on the
+    // latest day settled on the one before it (#2851). Measured from the start in
+    // either direction: in a right-to-left layout scrollLeft runs negative.
+    const travel = el.scrollWidth - el.clientWidth;
+    const scrolled = Math.abs(el.scrollLeft);
+    if (travel > 1 && scrolled >= travel - 1) bestIdx = cardRefs.current.size - 1;
+    else if (travel > 1 && scrolled <= 0) bestIdx = 0;
     setActiveIndex((prev) => {
       if (prev !== bestIdx) syncMapToCard(bestIdx);
       return bestIdx;

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

@@ -87,6 +87,16 @@ describe('Navbar', () => {
     expect(screen.getByText('Admin')).toBeInTheDocument();
   });
 
+  it('FE-COMP-NAVBAR-009b: a managed install keeps the help center but has no Help & Docs entry', async () => {
+    const user = userEvent.setup();
+    seedStore(useAuthStore, { user: buildUser({ username: 'testuser' }), isAuthenticated: true, managed: true });
+    render(<Navbar />);
+    expect(document.querySelector('[data-help-button]')).not.toBeNull();
+    await user.click(screen.getByText('testuser'));
+    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
   it('FE-COMP-NAVBAR-010: regular user does not see Admin option', async () => {
     const user = userEvent.setup();
     render(<Navbar />);

client/src/components/Layout/Navbar.tsx

@@ -35,7 +35,7 @@ interface Addon {
 }
 
 export default function Navbar({ tripTitle, tripId, onBack, showBack, onSettings }: NavbarProps): React.ReactElement {
-  const { user, logout, isPrerelease, appVersion } = useAuthStore()
+  const { user, logout, isPrerelease, appVersion, managed } = useAuthStore()
   const { settings, updateSetting } = useSettingsStore()
   const { addons: allAddons, loadAddons } = useAddonStore()
   const { t, locale } = useTranslation()
@@ -326,6 +326,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onSettings
                     {t('nav.settings')}
                   </Link>
 
+                  {!managed && (
                   <Link to="/help" onClick={() => setUserMenuOpen(false)}
                     className="flex items-center gap-2 px-4 py-2 text-sm transition-colors text-content-secondary"
                     onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
@@ -333,6 +334,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onSettings
                     <BookOpen className="w-4 h-4" />
                     {t('nav.help')}
                   </Link>
+                  )}
 
                   {user.role === 'admin' && (
                     <Link to="/admin" onClick={() => setUserMenuOpen(false)}

client/src/components/Map/AssistantCameraController.tsx

@@ -1,8 +1,10 @@
 import L from 'leaflet';
 import { useCallback, useEffect } from 'react';
 import { useMap } from 'react-leaflet';
+import { frameLng } from '../../utils/lngFrame';
 import { MAX_ZOOM_RASTER, type ViewportPadding } from '../../utils/mapViewport';
 import { ASSISTANT_CAMERA_MS, centreOf, coverPadding, useCameraRequest, useUserMoveClock } from './assistantCamera';
+import { useLngFrame } from './lngFrameContext';
 import type { AssistantCamera } from './mapViewContract';
 
 interface AssistantCameraControllerProps {
@@ -18,12 +20,17 @@ interface AssistantCameraControllerProps {
  */
 export function AssistantCameraController({ camera, padding }: AssistantCameraControllerProps) {
   const map = useMap();
+  // The points are framed the way the map draws them (#2975).
+  const frame = useLngFrame();
   const getContainer = useCallback(() => map.getContainer(), [map]);
   const userMovedAt = useUserMoveClock(getContainer, true);
   const request = useCameraRequest(camera, userMovedAt);
 
   useEffect(() => {
-    request((next) => {
+    request((camera) => {
+      const next = frame
+        ? { ...camera, points: camera.points.map(([lat, lng]) => [lat, frameLng(frame, lng)] as [number, number]) }
+        : camera;
       const duration = ASSISTANT_CAMERA_MS / 1000;
       if (next.mode === 'pan') {
         const centre = centreOf(next.points);
@@ -39,7 +46,7 @@ export function AssistantCameraController({ camera, padding }: AssistantCameraCo
         duration,
       });
     });
-  }, [map, padding, request]);
+  }, [map, padding, request, frame]);
 
   return null;
 }

client/src/components/Map/AssistantGhostLayer.tsx

@@ -1,7 +1,9 @@
 import L from 'leaflet';
 import { useEffect, useLayoutEffect, useRef } from 'react';
 import { useMap } from 'react-leaflet';
+import { frameLng } from '../../utils/lngFrame';
 import { GHOST_SIZE, mountGhosts, setGhostHot, type GhostHandlers } from './assistantGhostMarker';
+import { useLngFrame } from './lngFrameContext';
 import type { AssistantGhost } from './mapViewContract';
 
 interface AssistantGhostLayerProps {
@@ -22,6 +24,8 @@ const GHOST_Z_OFFSET = 900;
  */
 export function AssistantGhostLayer({ ghosts, hoveredId, onHover, onClick }: AssistantGhostLayerProps) {
   const map = useMap();
+  // Pinned where the map draws the trip, in its longitude frame (#2975).
+  const frame = useLngFrame();
   const handlers = useRef<GhostHandlers>({ onHover, onClick });
   useLayoutEffect(() => {
     handlers.current = { onHover, onClick };
@@ -36,7 +40,11 @@ export function AssistantGhostLayer({ ghosts, hoveredId, onHover, onClick }: Ass
         const icon = L.divIcon({ html: el, className: 'trek-ghost-pin', iconSize: [GHOST_SIZE, GHOST_SIZE] });
         const label = document.createElement('span');
         label.textContent = ghost.name;
-        const marker = L.marker([ghost.lat, ghost.lng], { icon, keyboard: false, zIndexOffset: GHOST_Z_OFFSET })
+        const marker = L.marker([ghost.lat, frameLng(frame, ghost.lng)], {
+          icon,
+          keyboard: false,
+          zIndexOffset: GHOST_Z_OFFSET,
+        })
           .bindTooltip(label, { direction: 'top', offset: [0, -GHOST_SIZE / 2], className: 'map-tooltip' })
           .addTo(map);
         return { remove: () => marker.remove() };
@@ -48,7 +56,7 @@ export function AssistantGhostLayer({ ghosts, hoveredId, onHover, onClick }: Ass
       mounted.dispose();
       elements.current = new Map();
     };
-  }, [ghosts, map]);
+  }, [ghosts, map, frame]);
 
   useEffect(() => {
     setGhostHot(elements.current, hoveredId);

client/src/components/Map/AssistantGhostLineLayer.tsx

@@ -1,8 +1,11 @@
 import type { FeatureGroup as LeafletFeatureGroup, LeafletMouseEvent } from 'leaflet';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { CircleMarker, FeatureGroup, Polyline, Tooltip } from 'react-leaflet';
 
 import type { AssistantRouteLine } from '../../types/assistantMap';
+import { frameLine, frameLng, type LngFrame } from '../../utils/lngFrame';
+import { onRealWorld } from '../../utils/worldCopy';
+import { useLngFrame } from './lngFrameContext';
 
 /** A rim under the line, the line, and the invisible fat line that takes the pointer. */
 const CASING_WEIGHT = 7;
@@ -38,7 +41,10 @@ function GhostLine({ line, onHover, onPoint }: { line: AssistantRouteLine } & Li
     if (line.hot) group.current?.bringToFront();
   }, [line.hot]);
   const opacity = line.dim ? DIM_OPACITY : 1;
-  const point = (event: LeafletMouseEvent) => onPoint?.(line.ref, event.latlng.lat, event.latlng.lng);
+  const point = (event: LeafletMouseEvent) => {
+    const at = onRealWorld(event.latlng);
+    onPoint?.(line.ref, at.lat, at.lng);
+  };
   return (
     <FeatureGroup ref={group}>
       <Polyline
@@ -122,11 +128,25 @@ interface AssistantGhostLineLayerProps extends LineHandlers {
  * under its pins. The twin of
  * useAssistantGhostLinesGL.
  */
+/** A line drawn in the map's longitude frame, with the trip it proposes changes to (#2975). */
+function inFrame(frame: LngFrame, line: AssistantRouteLine): AssistantRouteLine {
+  const at = ([lat, lng]: [number, number]): [number, number] => [lat, frameLng(frame, lng)];
+  return {
+    ...line,
+    lines: line.lines.map((part) => frameLine(frame, part)),
+    ends: line.ends && { start: at(line.ends.start), end: line.ends.end && at(line.ends.end) },
+    stops: line.stops?.map((stop) => ({ ...stop, lng: frameLng(frame, stop.lng) })),
+    tints: line.tints?.map((tint) => ({ ...tint, line: frameLine(frame, tint.line) })),
+  };
+}
+
 export function AssistantGhostLineLayer({ lines, onHover, onPoint }: AssistantGhostLineLayerProps) {
-  if (!lines?.length) return null;
+  const frame = useLngFrame();
+  const drawn = useMemo(() => (frame && lines ? lines.map((line) => inFrame(frame, line)) : lines), [frame, lines]);
+  if (!drawn?.length) return null;
   return (
     <>
-      {lines.map((line) => (
+      {drawn.map((line) => (
         <GhostLine key={line.id} line={line} onHover={onHover} onPoint={onPoint} />
       ))}
     </>

client/src/components/Map/ClusteredPois.tsx

@@ -4,9 +4,12 @@ import L from 'leaflet'
 import { useTranslation } from '../../i18n/TranslationContext'
 import type { Poi } from './poiCategories'
 import { clusterPois, poiClusterMarkup, poiClusterList, POI_CLUSTER_DETAIL_ZOOM } from './poiClusters'
+import { frameLng, type LngFrame } from '../../utils/lngFrame'
 
-export default function ClusteredPois({ pois, enabled, onPoiClick, children }: {
+export default function ClusteredPois({ pois, frame, enabled, onPoiClick, children }: {
   pois: Poi[]; enabled: boolean; onPoiClick?: (poi: Poi) => void; children: ReactNode[]
+  /** The frame the markers in `children` are drawn in: the view's, not the trip's (see MapView). */
+  frame: LngFrame | null
 }) {
   const map = useMap()
   const { t } = useTranslation()
@@ -18,20 +21,21 @@ export default function ClusteredPois({ pois, enabled, onPoiClick, children }: {
     map.on('zoomend', update)
     return () => { map.off('zoomend', update) }
   }, [map])
-  const groups = useMemo(() => enabled ? clusterPois(pois, poi => map.latLngToContainerPoint([poi.lat, poi.lng]), zoom) : [], [pois, enabled, map, zoom])
+  // Measured and placed where the markers are drawn, on the world copy in view (#2975).
+  const groups = useMemo(() => enabled ? clusterPois(pois, poi => map.latLngToContainerPoint([poi.lat, frameLng(frame, poi.lng)]), zoom) : [], [pois, enabled, map, zoom, frame])
   const markers = new Map(pois.map((poi, index) => [poi.osm_id, children[index]]))
   if (!enabled) return <>{children}</>
   return <>{groups.map(group => {
     if (group.pois.length === 1) return markers.get(group.pois[0].osm_id)
     const label = t('roadtrip.poi.found', { count: group.pois.length })
-    return <Marker key={`poi-cluster-${group.pois[0].osm_id}`} position={[group.lat, group.lng]} alt={label}
+    return <Marker key={`poi-cluster-${group.pois[0].osm_id}`} position={[group.lat, frameLng(frame, group.lng)]} alt={label}
       icon={L.divIcon({ className: '', html: poiClusterMarkup(group.pois.length), iconSize: [38, 38], iconAnchor: [19, 19] })}
       zIndexOffset={600} eventHandlers={{ click: () => {
         if (map.getZoom() >= POI_CLUSTER_DETAIL_ZOOM) {
           popup.current?.remove()
-          popup.current = L.popup({ className: 'map-tooltip', maxWidth: 300 }).setLatLng([group.lat, group.lng])
+          popup.current = L.popup({ className: 'map-tooltip', maxWidth: 300 }).setLatLng([group.lat, frameLng(frame, group.lng)])
             .setContent(poiClusterList(group.pois, poi => { popup.current?.remove(); onPoiClick?.(poi) })).openOn(map)
-        } else map.fitBounds(group.pois.map(poi => [poi.lat, poi.lng] as [number, number]), { padding: [70, 70], maxZoom: POI_CLUSTER_DETAIL_ZOOM })
+        } else map.fitBounds(group.pois.map(poi => [poi.lat, frameLng(frame, poi.lng)] as [number, number]), { padding: [70, 70], maxZoom: POI_CLUSTER_DETAIL_ZOOM })
       } }} />
   })}</>
 }

client/src/components/Map/DawarichTrailLayer.tsx

@@ -1,5 +1,7 @@
 import { useMemo } from 'react'
 import { Polyline } from 'react-leaflet'
+import { useLngFrame } from './lngFrameContext'
+import { frameLine } from '../../utils/lngFrame'
 import type { DawarichTrack } from '@trek/shared'
 import {
   DAWARICH_TRAIL_CASING,
@@ -37,7 +39,10 @@ export default function DawarichTrailLayer({
   /** The `trek-track-casing` pane, when the renderer supports panes. */
   casingPane?: string
 }) {
-  const segments = useMemo(() => trailSegments(track, selectedDate, hiddenDates), [track, selectedDate, hiddenDates])
+  const frame = useLngFrame()
+  // Drawn in the map's longitude frame, with the trip it was recorded on (#2975).
+  const segments = useMemo(() => trailSegments(track, selectedDate, hiddenDates)
+    .map(segment => (frame ? { ...segment, points: frameLine(frame, segment.points) } : segment)), [track, selectedDate, hiddenDates, frame])
   if (segments.length === 0) return null
 
   return (

client/src/components/Map/HazardLayers.tsx

@@ -4,10 +4,14 @@ import L from 'leaflet'
 import { useTranslation } from '../../i18n/TranslationContext'
 
 import { hazardPopup, hazardFeature } from './hazardPopup'
+import { useLngFrame } from './lngFrameContext'
+import { frameLng } from '../../utils/lngFrame'
 
 export default function HazardLayers({ hazards }: { hazards: RoadtripHazard[] }) {
   const { t } = useTranslation()
-  return <>{hazards.map(hazard => <GeoJSON key={`${hazard.id}-${hazard.updatedAt}`} data={hazardFeature(hazard)}
+  const frame = useLngFrame()
+  return <>{hazards.map(hazard => <GeoJSON key={`${hazard.id}-${hazard.updatedAt}-${frame?.seam ?? ''}`} data={hazardFeature(hazard)}
+    coordsToLatLng={coords => L.latLng(coords[1], frameLng(frame, coords[0]))}
     style={{ color: 'var(--warning)', weight: 2, fillOpacity: 0.16 }}
     pointToLayer={(_, point) => L.circleMarker(point, { radius: 7, color: 'var(--warning)', fillOpacity: 0.65 })}
     onEachFeature={(_, layer) => layer.bindPopup(hazardPopup(hazard, t('roadtrip.hazards.note'), t('roadtrip.hazards.point')), { className: 'map-tooltip trek-hazard-popup', maxWidth: 320 })}

client/src/components/Map/MapPluginLayers.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react'
 import { Circle, Polygon, Polyline, Tooltip, useMap } from 'react-leaflet'
 import { pluginsApi, type PluginMapLayer, type PluginMapLayerFeature } from '../../api/client'
+import { useLngFrame } from './lngFrameContext'
+import { frameLine, frameLng } from '../../utils/lngFrame'
 
 /**
  * Host-rendered overlay for the `mapLayerProvider` plugin hook. A plugin returns
@@ -47,6 +49,7 @@ function pathOptions(f: PluginMapLayerFeature, pane: string | undefined) {
 
 export function PluginMapLayers({ tripId }: { tripId?: number | string }) {
   const map = useMap()
+  const frame = useLngFrame()
   const [layers, setLayers] = useState<PluginMapLayer[]>([])
   // Whether our dedicated below-overlay pane exists. Pane support is a Leaflet
   // optimization — if the map has no pane API (e.g. a minimal renderer), the
@@ -73,6 +76,7 @@ export function PluginMapLayers({ tripId }: { tripId?: number | string }) {
 
   if (layers.length === 0) return null
   const pane = hasPane ? PANE : undefined
+  // Drawn in the map's longitude frame, with the trip (#2975).
 
   return (
     <>
@@ -80,13 +84,13 @@ export function PluginMapLayers({ tripId }: { tripId?: number | string }) {
         const key = `${layer.pluginId}:${layer.id}:${i}`
         const tooltip = f.label ? <Tooltip sticky>{f.label}</Tooltip> : null
         if (f.type === 'polyline' && f.points) {
-          return <Polyline key={key} positions={f.points} pathOptions={pathOptions(f, pane)}>{tooltip}</Polyline>
+          return <Polyline key={key} positions={frameLine(frame, f.points)} pathOptions={pathOptions(f, pane)}>{tooltip}</Polyline>
         }
         if (f.type === 'polygon' && f.points) {
-          return <Polygon key={key} positions={f.points} pathOptions={pathOptions(f, pane)}>{tooltip}</Polygon>
+          return <Polygon key={key} positions={frameLine(frame, f.points)} pathOptions={pathOptions(f, pane)}>{tooltip}</Polygon>
         }
         if (f.type === 'circle' && f.center && f.radiusM) {
-          return <Circle key={key} center={f.center} radius={f.radiusM} pathOptions={pathOptions(f, pane)}>{tooltip}</Circle>
+          return <Circle key={key} center={frame ? [f.center[0], frameLng(frame, f.center[1])] : f.center} radius={f.radiusM} pathOptions={pathOptions(f, pane)}>{tooltip}</Circle>
         }
         return null
       }))}

client/src/components/Map/MapPluginMarkers.tsx

@@ -2,6 +2,8 @@ import { useEffect, useMemo, useState } from 'react'
 import { Marker, Popup } from 'react-leaflet'
 import L from 'leaflet'
 import { pluginsApi, type PluginMapMarker } from '../../api/client'
+import { useLngFrame } from './lngFrameContext'
+import { frameLng } from '../../utils/lngFrame'
 
 /**
  * Host-rendered overlay for the `mapMarkerProvider` plugin hook (#587). A plugin
@@ -33,6 +35,8 @@ function markerIcon(tone: PluginMapMarker['tone']): L.DivIcon {
 
 export function PluginMapMarkers({ tripId }: { tripId?: number | string }) {
   const [markers, setMarkers] = useState<PluginMapMarker[]>([])
+  // Drawn in the map's longitude frame, with the trip (#2975).
+  const frame = useLngFrame()
 
   useEffect(() => {
     if (tripId == null) { setMarkers([]); return }
@@ -54,7 +58,7 @@ export function PluginMapMarkers({ tripId }: { tripId?: number | string }) {
   return (
     <>
       {markers.map(mk => (
-        <Marker key={`${mk.pluginId}:${mk.id}`} position={[mk.lat, mk.lng]} icon={icons.get(mk.tone)!}>
+        <Marker key={`${mk.pluginId}:${mk.id}`} position={[mk.lat, frameLng(frame, mk.lng)]} icon={icons.get(mk.tone)!}>
           {(mk.label || mk.popupText || mk.url) && (
             <Popup>
               <div style={{ minWidth: 120, fontSize: 13 }}>

client/src/components/Map/MapView.leaflet.test.tsx

@@ -43,6 +43,7 @@ import { MapView } from './MapView'
 import { ContextMenu } from '../shared/ContextMenu'
 import type { Ferrata } from '@trek/shared'
 import { groupFerratas } from '../Ferratas/ferrataGroups'
+import type { Poi } from './poiCategories'
 
 // Every map this file builds, newest last, for the tests that reach past the component.
 const maps: L.Map[] = []
@@ -483,4 +484,30 @@ describe('MapView on a real Leaflet map', () => {
     expect(view.getByRole('button', { name: 'Via ferratas' })).toHaveAttribute('aria-pressed', 'true')
     expect(view.getByTestId('ferrata-count-badge')).toHaveTextContent('1')
   })
+
+  it('draws POIs found outside the trip frame where the user is looking, not one world away (#2975)', async () => {
+    // Seattle and Los Angeles to Auckland: the trip is drawn in a frame seamed near 28 degrees east.
+    const pacific = [
+      { ...buildPlace({ id: 11, name: 'Seattle', lat: 47.6, lng: -122.3 }), category_name: null, category_color: null, category_icon: null },
+      { ...buildPlace({ id: 12, name: 'Los Angeles', lat: 34.05, lng: -118.2 }), category_name: null, category_color: null, category_icon: null },
+      { ...buildPlace({ id: 13, name: 'Auckland', lat: -36.85, lng: 174.8 }), category_name: null, category_color: null, category_icon: null },
+    ]
+    const acropolis = {
+      osm_id: 'node/1', name: 'Acropolis', lat: 37.97, lng: 23.73, category: 'sights', poi_type: 'attraction',
+      address: null, website: null, phone: null, opening_hours: null, cuisine: null,
+    } as Poi
+    render(<MapView places={pacific} center={[38, 10]} zoom={5} tileUrl={RASTER} pois={[acropolis]} />)
+    const map = maps[maps.length - 1]
+    // The user pans west past the seam to look at the Mediterranean on the real world.
+    act(() => { map.setView([38, 10], 5, { animate: false }) })
+    const marker = () => {
+      let found: L.Marker | null = null
+      map.eachLayer(layer => { if (layer instanceof L.Marker && layer.options.alt === 'Acropolis') found = layer })
+      return found as L.Marker | null
+    }
+    await waitFor(() => expect(marker()?.getLatLng().lng).toBeCloseTo(23.73, 6))
+    const drawnMarker = marker()
+    expect(drawnMarker).not.toBeNull()
+    expect(drawnMarker && map.getBounds().contains(drawnMarker.getLatLng())).toBe(true)
+  })
 })

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

@@ -1185,9 +1185,14 @@ describe('MapView map event wiring', () => {
   it('FE-COMP-MAPVIEW-046: a map-click handler is attached and detached again', () => {
     const onMapClick = vi.fn()
     const { unmount } = render(<MapView onMapClick={onMapClick} />)
-    expect(mapMock.on).toHaveBeenCalledWith('click', onMapClick)
+    const bound = mapMock.on.mock.calls.find(c => c[0] === 'click')?.[1]
+    expect(bound).toEqual(expect.any(Function))
+    // A click on the real world reaches the caller as the very event the map fired.
+    const event = { latlng: { lat: 48, lng: 2 } }
+    bound(event)
+    expect(onMapClick).toHaveBeenCalledWith(event)
     unmount()
-    expect(mapMock.off).toHaveBeenCalledWith('click', onMapClick)
+    expect(mapMock.off).toHaveBeenCalledWith('click', bound)
   })
 
   it('FE-COMP-MAPVIEW-047: without a click handler nothing is bound', () => {
@@ -1198,9 +1203,13 @@ describe('MapView map event wiring', () => {
   it('FE-COMP-MAPVIEW-048: a context-menu handler is attached and detached again', () => {
     const onMapContextMenu = vi.fn()
     const { unmount } = render(<MapView onMapContextMenu={onMapContextMenu} />)
-    expect(mapMock.on).toHaveBeenCalledWith('contextmenu', onMapContextMenu)
+    const bound = mapMock.on.mock.calls.find(c => c[0] === 'contextmenu')?.[1]
+    expect(bound).toEqual(expect.any(Function))
+    const event = { latlng: { lat: 48, lng: 2 } }
+    bound(event)
+    expect(onMapContextMenu).toHaveBeenCalledWith(event)
     unmount()
-    expect(mapMock.off).toHaveBeenCalledWith('contextmenu', onMapContextMenu)
+    expect(mapMock.off).toHaveBeenCalledWith('contextmenu', bound)
   })
 
   it('FE-COMP-MAPVIEW-049: changing the center prop moves the camera there', () => {

client/src/components/Map/MapView.tsx

@@ -3,7 +3,7 @@ import DOM from 'react-dom'
 import { categoryIconSvg } from './categoryIconSvg'
 import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap, Tooltip } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
-import { makeMarkerDraggable, makePoiDraggable, draggedPoiId } from './markerDrag'
+import { makeMarkerDraggable } from './markerDrag'
 import { CLUSTER_OPTIONS, createClusterIcon, revealInCluster, type ClusterGroupLike } from './markerCluster'
 import RoadtripViaMarkers from './RoadtripViaMarkers'
 import PlannerWaypointMarker from './PlannerWaypointMarker'
@@ -55,11 +55,10 @@ import type { Day, Place, Reservation, RouteVia } from '../../types'
 import type { MapHoverInfo } from './mapHover'
 import { nightPauseMarker, NIGHT_PAUSE_MIN_ZOOM } from './nightPauseMarker'
 import NightPauseTooltip from './NightPauseTooltip'
-import ClusteredPois from './ClusteredPois'
+import PoiMarkers from './PoiMarkers'
 import { NightPauseDrag } from './NightPauseDrag'
 import type { DayBoundaryControls } from './dayBoundaryDrag'
 import type { Poi } from './poiCategories'
-import { poiDetailRowKey, poiDetailRows, poiPinCacheKey, poiPinParts } from './poiMarker'
 import { resolveTrackColor, hasManualTrackColor } from './trackColors'
 import { SelectedTrackLine, TrackLines } from './TrackLines'
 import DawarichTrailLayer from './DawarichTrailLayer'
@@ -121,7 +120,8 @@ function RouteViaMarker({ via, controls, eventHandlers, children }: {
   via: RouteVia; controls?: DayBoundaryControls; eventHandlers?: L.LeafletEventHandlerFnMap; children?: React.ReactNode
 }) {
   const [marker, setMarker] = useState<L.Marker | null>(null)
-  return <Marker ref={setMarker} position={[via.lat, via.lng]} icon={via.nightPause ? nightPauseIcon(via) : routeViaIcon(via.tone)}
+  const frame = useLngFrame()
+  return <Marker ref={setMarker} position={[via.lat, frameLng(frame, via.lng)]} icon={via.nightPause ? nightPauseIcon(via) : routeViaIcon(via.tone)}
     alt={via.nightPause ? via.label : undefined} zIndexOffset={800} eventHandlers={eventHandlers}>
     {children}
     {via.nightPause && <NightPauseDrag marker={marker} via={via} controls={controls} />}
@@ -227,59 +227,6 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
   return fallbackIcon
 }
 
-// Small coloured pin for an OSM "explore" POI — distinct from the photo-circle
-// markers of planned places; the colour matches its pill category.
-const poiIconCache = new Map<string, L.DivIcon>()
-function createPoiIcon(poi: Pick<Poi, 'category' | 'icon' | 'color'>, brandWikidata?: string | null) {
-  // One flat disc in the category's colour with its icon, and never the chain's logo.
-  // The brands turned a corridor full of petrol stations into a row of advertisements,
-  // they were unreadable at pin size, and a brand with no logo on file fell back to a
-  // different picture entirely — so no two pins looked alike. `brandWikidata` is kept in
-  // the signature because the callers still have it; it simply no longer changes anything.
-  void brandWikidata
-  // A plugin category's key carries its colour and icon too, so two looks never share a pin.
-  const cacheKey = poiPinCacheKey(poi)
-  const cached = poiIconCache.get(cacheKey)
-  if (cached) return cached
-  const { color, svg } = poiPinParts(poi)
-  const icon = L.divIcon({
-    className: '',
-    html: `<div style="position:relative;width:26px;height:26px;border-radius:50%;background:${color};border:2px solid white;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;">${svg}</div>`,
-    iconSize: [26, 26],
-    iconAnchor: [13, 13],
-    tooltipAnchor: [0, -14],
-  })
-  poiIconCache.set(cacheKey, icon)
-  return icon
-}
-
-/**
- * The hover tooltip of an explore POI: its name, and for a plugin POI the rows the
- * plugin knows about it (the GL hover card shows the same, see buildPoiPopupHtml).
- * React text throughout, so nothing a plugin sends is ever read as markup. A POI
- * without rows keeps the bare name it has always had.
- */
-function PoiTooltipBody({ poi }: Readonly<{ poi: Poi }>) {
-  const rows = poiDetailRows(poi)
-  if (!rows.length) return poi.name
-  // w-max because Leaflet's tooltip pane is 0px wide: without an intrinsic width the
-  // tooltip shrinks to its narrowest layout and the values wrap a letter per line. The
-  // label column stops at 45% and wraps, so a long label leaves its value room too.
-  return (
-    <div className="w-max max-w-56 whitespace-normal">
-      <div className="truncate font-semibold">{poi.name}</div>
-      <div className="mt-1 grid grid-cols-[fit-content(45%)_1fr] gap-x-1.5 font-normal" data-testid="poi-details">
-        {rows.map(row => (
-          <div key={poiDetailRowKey(row)} className="contents">
-            <span className="text-content-muted [overflow-wrap:anywhere]">{row.label}</span>
-            <span className="[overflow-wrap:anywhere]">{row.value}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
 // Clears the hover tooltip the moment the camera starts moving and suppresses
 // re-showing it until the move ends: after a click-recenter the marker slides
 // away under a stationary cursor, so the browser never fires mouseout — and
@@ -298,59 +245,6 @@ function CameraHoverGuard({ movingRef, onMoveStart, onZoom }: { movingRef: { cur
   return null
 }
 
-/**
- * Takes a corridor hit dropped anywhere on the map and reports where it landed.
- *
- * The container rather than the drawn route: a polyline is a real element here but not in
- * the GL renderers, and the drop coordinate answers "where on the drive" just as well
- * once the caller projects it onto the routed geometry — one behaviour for all three.
- */
-function PoiDropTarget({ onPoiDropOnRoute }: { onPoiDropOnRoute?: (osmId: string, lat: number, lng: number) => void }) {
-  const map = useMap()
-  useEffect(() => {
-    if (!onPoiDropOnRoute) return
-    const container = map.getContainer()
-    const onDragOver = (e: DragEvent) => {
-      if (!draggedPoiId(e)) return
-      e.preventDefault()
-      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
-    }
-    const onDrop = (e: DragEvent) => {
-      const osmId = draggedPoiId(e)
-      if (!osmId) return
-      e.preventDefault()
-      const rect = container.getBoundingClientRect()
-      const at = map.containerPointToLatLng([e.clientX - rect.left, e.clientY - rect.top])
-      onPoiDropOnRoute(osmId, at.lat, at.lng)
-    }
-    container.addEventListener('dragover', onDragOver)
-    container.addEventListener('drop', onDrop)
-    return () => {
-      container.removeEventListener('dragover', onDragOver)
-      container.removeEventListener('drop', onDrop)
-    }
-  }, [map, onPoiDropOnRoute])
-  return null
-}
-
-// Emits the current viewport bbox on pan/zoom so the POI-explore pill can fetch
-// OSM places for the visible area, with the zoom an overlay's minimum is read against.
-function ViewportController({ onViewportChange }: { onViewportChange?: MapViewProps['onViewportChange'] }) {
-  const map = useMap()
-  useEffect(() => {
-    if (!onViewportChange) return
-    const emit = () => {
-      const b = map.getBounds()
-      onViewportChange({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() }, map.getZoom())
-    }
-    map.whenReady(emit) // ensure the first bbox is captured once the map is laid out
-    map.on('moveend', emit)
-    map.on('zoomend', emit)
-    return () => { map.off('moveend', emit); map.off('zoomend', emit) }
-  }, [map, onViewportChange])
-  return null
-}
-
 function MapCameraSnapshot({ onChange }: { onChange: (center: [number, number], zoom: number) => void }) {
   const map = useMap()
   useEffect(() => {
@@ -377,6 +271,7 @@ interface SelectionControllerProps {
 
 function SelectionController({ follow, places, selectedPlaceId, dayPlaces, selectedPlace, paddingOpts }: SelectionControllerProps) {
   const map = useMap()
+  const frame = useLngFrame()
   const prev = useRef(null)
 
   useEffect(() => {
@@ -387,7 +282,7 @@ function SelectionController({ follow, places, selectedPlaceId, dayPlaces, selec
       // would cover it). Reuses the same paddingOpts the fit-bounds path uses.
       const selected = selectedPlaceTarget(selectedPlaceId, places, dayPlaces, selectedPlace)
       if (selected?.lat != null && selected?.lng != null) {
-        const latlng: [number, number] = [selected.lat, selected.lng]
+        const latlng: [number, number] = [selected.lat, frameLng(frame, selected.lng)]
         const tl = paddingOpts.paddingTopLeft as [number, number] | undefined
         const br = paddingOpts.paddingBottomRight as [number, number] | undefined
         if (tl && br && typeof map.project === 'function' && typeof map.unproject === 'function') {
@@ -399,7 +294,7 @@ function SelectionController({ follow, places, selectedPlaceId, dayPlaces, selec
       }
     }
     prev.current = selectedPlaceId
-  }, [selectedPlaceId, places, dayPlaces, selectedPlace, map, follow])
+  }, [selectedPlaceId, places, dayPlaces, selectedPlace, map, follow, frame])
 
   return null
 }
@@ -411,14 +306,15 @@ interface MapControllerProps {
 
 function MapController({ center, zoom }: MapControllerProps) {
   const map = useMap()
+  const frame = useLngFrame()
   const prevCenter = useRef(center)
 
   useEffect(() => {
     if (prevCenter.current[0] !== center[0] || prevCenter.current[1] !== center[1]) {
-      map.setView(center, zoom)
+      map.setView([center[0], frameLng(frame, center[1])], zoom)
       prevCenter.current = center
     }
-  }, [center, zoom, map])
+  }, [center, zoom, map, frame])
 
   return null
 }
@@ -456,10 +352,12 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMo
   const prevFocusKey = useRef(focusKey)
   const built = useRef(false)
 
+  const frame = useLngFrame()
   const fitTo = useCallback((coords: [number, number][], padding: L.FitBoundsOptions = paddingOpts) => {
     if (coords.length === 0) return
     try {
-      const bounds = L.latLngBounds(coords)
+      // In the map's longitude frame, so a trip across the Pacific is framed across the Pacific (#2975).
+      const bounds = L.latLngBounds(frame ? coords.map(([lat, lng]) => [lat, frameLng(frame, lng)] as [number, number]) : coords)
       if (bounds.isValid()) {
         /*
          * The padding already reserves the day panel's height at the bottom
@@ -478,7 +376,7 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMo
         map.fitBounds(bounds, { maxZoom: 16, animate: true, ...padding })
       }
     } catch {}
-  }, [map, paddingOpts])
+  }, [map, paddingOpts, frame])
 
   // New fitKey (initial trip fit or a day selection): fit to the destinations now
   // and arm a one-shot re-fit for when the route arrives.
@@ -535,10 +433,6 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, framedOnMo
   return null
 }
 
-interface MapClickHandlerProps {
-  onClick: ((e: L.LeafletMouseEvent) => void) | null
-}
-
 const TRACK_CASING_PANE = 'trek-track-casing'
 
 /**
@@ -561,26 +455,6 @@ function TrackCasingPane({ onReady }: { onReady: (ready: boolean) => void }) {
   return null
 }
 
-function MapClickHandler({ onClick }: MapClickHandlerProps) {
-  const map = useMap()
-  useEffect(() => {
-    if (!onClick) return
-    map.on('click', onClick)
-    return () => { map.off('click', onClick) }
-  }, [map, onClick])
-  return null
-}
-
-function MapContextMenuHandler({ onContextMenu }: { onContextMenu: ((e: L.LeafletMouseEvent) => void) | null }) {
-  const map = useMap()
-  useEffect(() => {
-    if (!onContextMenu) return
-    map.on('contextmenu', onContextMenu)
-    return () => { map.off('contextmenu', onContextMenu) }
-  }, [map, onContextMenu])
-  return null
-}
-
 // Travel times are shown in the day sidebar (per-segment connectors), not on the map.
 
 import { useMarkerThumbs } from './useMarkerThumbs'
@@ -594,9 +468,15 @@ import { useIsPhone } from '../../mobile/useIsPhone'
 // identically. Heading is shown as a rotated conic SVG when available.
 import type { GeoPosition, TrackingMode } from '../../hooks/useGeolocation'
 import { selectedPlaceTarget } from './selectedPlaceTarget'
+import { LngFrameProvider, useLngFrame, useTripLngFrame } from './lngFrameContext'
+import { frameLine, frameLng } from '../../utils/lngFrame'
+import { LngFrameFollower, MapClickHandler, MapContextMenuHandler, PoiDropTarget, ViewportController } from './leafletMapBridges'
 
-function LeafletLocationLayer({ position, mode }: { position: GeoPosition | null; mode: TrackingMode }) {
+function LeafletLocationLayer({ position: fix, mode }: { position: GeoPosition | null; mode: TrackingMode }) {
   const map = useMap()
+  const frame = useLngFrame()
+  // Drawn on the trip's world copy (#2975); every field but the longitude is the fix itself.
+  const position = useMemo(() => (fix && frame ? { ...fix, lng: frameLng(frame, fix.lng) } : fix), [fix, frame])
 
   // When the user is in follow mode, keep the map centred on the dot.
   // setView (no animation) is what Google Maps does during navigation —
@@ -711,7 +591,8 @@ const MemoMarker = memo(function MemoMarker({
   // differs, and the cluster group answers a moved child by taking it out and putting
   // it back — which collapses an open fan. A fresh array literal here did that on
   // every render the marker took part in.
-  const position = useMemo<[number, number]>(() => [place.lat, place.lng], [place.lat, place.lng])
+  const frame = useLngFrame()
+  const position = useMemo<[number, number]>(() => [place.lat, frameLng(frame, place.lng)], [place.lat, place.lng, frame])
   const register = useCallback((marker: unknown) => { onRegister(place.id, marker) }, [onRegister, place.id])
   return (
     <Marker
@@ -826,8 +707,6 @@ export const MapView = memo(function MapView({
   // that is decides which layer draws it. A saved raster template still wins,
   // the default is a vector style.
   const basemap = useMemo(() => resolveBasemap(tileUrl, OFM_POSITRON), [tileUrl])
-  const poiClickRef = useRef(onPoiClick)
-  poiClickRef.current = onPoiClick
   /**
    * Amap's tiles are drawn in GCJ-02 (see gcj02Crs.ts). The projection has to be
    * decided before the map is constructed, because Leaflet cannot change a map's
@@ -835,30 +714,10 @@ export const MapView = memo(function MapView({
    */
   const isGcjBasemap = !tourRaster && basemap.kind === 'raster' && isGcj02Basemap(basemap.url)
   const gcjCrs = useMemo(() => crsForBasemap(isGcjBasemap), [isGcjBasemap])
-  const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
-    <Marker
-      key={`poi-${poi.osm_id}`}
-      alt={poi.name}
-      position={[poi.lat, poi.lng]}
-      icon={createPoiIcon(poi, poi.brand_wikidata)}
-      zIndexOffset={500}
-      eventHandlers={{
-        click: () => onPoiClick?.(poi),
-        // Wired on add rather than in a layout effect: Leaflet builds the icon element
-        // itself, and this is the first moment there is one to attach to.
-        add: (e: { target: { getElement: () => HTMLElement | undefined } }) => {
-          const el = e.target.getElement()
-          if (!el) return
-          // Native clicks avoid Leaflet suppressing a click after an earlier map drag.
-          el.setAttribute('aria-label', poi.name)
-          el.onclick = event => { event.stopPropagation(); poiClickRef.current?.(poi) }
-          if (onPoiDropOnRoute) makePoiDraggable(el, poi.osm_id)
-        },
-      }}
-    >
-      <Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip"><PoiTooltipBody poi={poi} /></Tooltip>
-    </Marker>
-  )), [pois, onPoiClick, onPoiDropOnRoute])
+  // Leaflet draws a layer on one world copy only, so a trip across the antimeridian is
+  // drawn in a longitude frame that keeps it on one copy (#2975). Null for every other
+  // trip, and then each layer below draws exactly what it always drew.
+  const lngFrame = useTripLngFrame(places, dayPlaces, reservations)
   const visibleReservations = useMemo(() => (
     visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes, selectedDayId, days, scopeConnectionsToDay })
   ), [reservations, visibleConnectionIds, showTransitRoutes, selectedDayId, days, scopeConnectionsToDay])
@@ -892,8 +751,11 @@ export const MapView = memo(function MapView({
     const framed = computeMapViewport(dayPlaces.length > 0 ? dayPlaces : places, {
       tileSize: TILE_SIZE_RASTER,
       padding: paddingBox,
+      // With a longitude frame the trip lies on one copy, so it can be framed the short way.
+      wrapsWorld: lngFrame !== null,
     })
-    return { center: framed?.center ?? center, zoom: framed?.zoom ?? zoom, framed: framed !== null }
+    const opening: [number, number] | undefined = framed ? [framed.center[0], frameLng(lngFrame, framed.center[1])] : undefined
+    return { center: opening ?? center, zoom: framed?.zoom ?? zoom, framed: framed !== null }
   })
   const cameraSnapshotRef = useRef<{ center: [number, number]; zoom: number } | null>(null)
   const saveCameraSnapshot = useCallback((cameraCenter: [number, number], cameraZoom: number) => {
@@ -947,7 +809,8 @@ export const MapView = memo(function MapView({
 
   // Flattened [lat,lng] points of the selected day's route, so the bounds fit can
   // include the full polyline once it has been computed.
-  const routeCoords = useMemo<[number, number][]>(() => (route || []).flat() as [number, number][], [route])
+  const framedRoute = useMemo(() => (lngFrame && route ? route.map(seg => frameLine(lngFrame, seg)) : route), [route, lngFrame])
+  const routeCoords = useMemo<[number, number][]>(() => (framedRoute || []).flat() as [number, number][], [framedRoute])
   const photoUrls = useMarkerThumbs(places)
 
   const isTouchDevice = typeof window !== 'undefined' && navigator.maxTouchPoints > 0
@@ -1015,9 +878,9 @@ export const MapView = memo(function MapView({
   const gpxTracks = useMemo(() => places.flatMap(place => {
     const geometry = parseRenderableRouteGeometry(place.route_geometry)
     if (!geometry) return []
-    const coords: [number, number][] = geometry.map(([lat, lng]) => [lat, lng])
+    const coords: [number, number][] = frameLine(lngFrame, geometry.map(([lat, lng]) => [lat, lng] as [number, number]))
     return [{ place, coords, cased: hasManualTrackColor(place), color: resolveTrackColor(place) }]
-  }), [places])
+  }), [places, lngFrame])
 
   // Keeps the click handler out of the track lines' memo (TrackLines): `handleMarkerClick`
   // changes on every selection, and depending on it would redraw all tracks.
@@ -1053,6 +916,7 @@ export const MapView = memo(function MapView({
   return (
     <>
     <div className="w-full h-full relative">
+    <LngFrameProvider value={lngFrame}>
     <MapContainer
       // The datum is in the element's identity, because react-leaflet builds the
       // map once and Leaflet cannot change a CRS afterwards. Settings can arrive
@@ -1125,6 +989,8 @@ export const MapView = memo(function MapView({
         />
       )}
 
+      {/* First, so a fit or a camera request in the same commit starts from the trip's world copy. */}
+      <LngFrameFollower />
       <MapController center={center} zoom={zoom} />
       {hasViewBaseLayer && <MapCameraSnapshot onChange={saveCameraSnapshot} />}
       <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} routeCoords={dayPlaces.length > 0 ? routeCoords : []} fitKey={fitKey} paddingOpts={paddingOpts} framedOnMount={initialView.framed} focusPoints={focusPoints} focusKey={focusKey} fitPadding={fitPadding} follow={followSelection} />
@@ -1142,7 +1008,7 @@ export const MapView = memo(function MapView({
 
       {/* Apple-Maps style: darker-blue casing under a bright-blue core, rounded.
           When the route can be reshaped an invisible band wider than both takes the click. */}
-      {route && route.length > 0 && route.flatMap((seg, i) => seg.length < 2 ? [] : routeWalking?.[i] ? [
+      {framedRoute && framedRoute.length > 0 && framedRoute.flatMap((seg, i) => seg.length < 2 ? [] : routeWalking?.[i] ? [
         // Walked, so dashed and without the casing: the drive is the solid line (#2532).
         <Polyline
           key={`${i}-walk`}
@@ -1174,7 +1040,7 @@ export const MapView = memo(function MapView({
       {(accessLines ?? []).map((spur, i) => (
         <Polyline
           key={`access-${i}`}
-          positions={spur.line}
+          positions={frameLine(lngFrame, spur.line)}
           pathOptions={{ color: '#0a84ff', weight: 3, opacity: 0.85, dashArray: '2 7', lineCap: 'round' }}
           interactive={false}
         />
@@ -1190,13 +1056,13 @@ export const MapView = memo(function MapView({
         return [
           <Polyline
             key={`alt-${alt.index}-casing`}
-            positions={alt.coordinates}
+            positions={frameLine(lngFrame, alt.coordinates)}
             pathOptions={{ color: ALT_CASING, weight: active ? 9 : 8, opacity: 0.9, lineCap: 'round', lineJoin: 'round' }}
             interactive={false}
           />,
           <Polyline
             key={`alt-${alt.index}`}
-            positions={alt.coordinates}
+            positions={frameLine(lngFrame, alt.coordinates)}
             pathOptions={{
               color: alt.color,
               weight: active ? 6 : 4,
@@ -1213,7 +1079,7 @@ export const MapView = memo(function MapView({
           // The drive time on the road itself, the way Apple labels them.
           <Marker
             key={`alt-${alt.index}-label`}
-            position={[alt.at.lat, alt.at.lng]}
+            position={[alt.at.lat, frameLng(lngFrame, alt.at.lng)]}
             zIndexOffset={600}
             icon={alternativeLabelIcon(alt.label, alt.note, alt.labelBg, active)}
             eventHandlers={onChooseAlternative ? {
@@ -1249,7 +1115,7 @@ export const MapView = memo(function MapView({
 
       {routeProfileFocus && (
         <CircleMarker
-          center={[routeProfileFocus.lat, routeProfileFocus.lng]}
+          center={[routeProfileFocus.lat, frameLng(lngFrame, routeProfileFocus.lng)]}
           radius={8}
           pathOptions={{ className: 'tour-profile-focus-marker', color: 'var(--bg-card)', weight: 3, fillColor: 'var(--text-muted)', fillOpacity: 1 }}
           interactive={false}
@@ -1277,7 +1143,7 @@ export const MapView = memo(function MapView({
         hiddenDates={dawarichHiddenDates}
         casingPane={hasCasingPane ? TRACK_CASING_PANE : undefined}
       />
-      <ClusteredPois pois={pois} enabled={clusterLoosely} onPoiClick={onPoiClick}>{poiMarkers}</ClusteredPois>
+      <PoiMarkers pois={pois as Poi[]} clusterLoosely={clusterLoosely} onPoiClick={onPoiClick} draggable={!!onPoiDropOnRoute} />
       {/* Charging stops / rest areas a plugin route places on the drawn day route.
           Host-vetted data (server-normalized), rendered as plain tone dots. */}
       {(routeVias as RouteVia[]).filter(v => !v.nightPause || mapZoom >= NIGHT_PAUSE_MIN_ZOOM).map((v, i) => (
@@ -1301,6 +1167,7 @@ export const MapView = memo(function MapView({
       <AssistantMapLeaflet assistant={assistant} padding={paddingBox} markerEl={assistantMarkerEl} />
       <PluginMapLayers tripId={tripId} />
     </MapContainer>
+    </LngFrameProvider>
     {isMobile && <LocationButton
       mode={trackingMode}
       error={trackingError}

client/src/components/Map/MapViewGL.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useMemo, useState, useCallback } from 'react'
-import { makeMarkerDraggable, makePoiDraggable, draggedPoiId } from './markerDrag'
+import { makeMarkerDraggable, makePoiDraggable } from './markerDrag'
 import { useStableVias } from './viaMarkerState'
 import { usePlannerWaypointMarkersGL } from './usePlannerWaypointMarkersGL'
 import { carryAssistantMarks, useAssistantMapGL } from './useAssistantMapGL'
@@ -49,6 +49,8 @@ import { buildPoiPopupHtml } from './placePopup'
 import { pluginsApi, type PluginMapMarker, type PluginMapLayer } from '../../api/client'
 import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
 import { alongShortestArc, computeMapViewport, TILE_SIZE_GL } from '../../utils/mapViewport'
+import { onRealWorld } from '../../utils/worldCopy'
+import { bindPoiDropTarget } from './poiDropTarget'
 import { selectedPlaceTarget } from './selectedPlaceTarget'
 import {
   PLACE_CLUSTER_CIRCLE_LAYER_ID, PLACE_CLUSTER_COUNT_LAYER_ID, PLACE_CLUSTER_SOURCE_ID,
@@ -725,7 +727,7 @@ export function MapViewGL({
           return
         }
         const rect = map.getContainer().getBoundingClientRect()
-        const at = map.unproject([e.clientX - rect.left, e.clientY - rect.top])
+        const at = onRealWorld(map.unproject([e.clientX - rect.left, e.clientY - rect.top]))
         viaHandlersRef.current.onMoveVia?.(via.day_id, via.id, at.lat, at.lng)
       }
       // The browser fires this when the captured element is torn out of the DOM,
@@ -925,7 +927,8 @@ export function MapViewGL({
       // trip reloads for a gesture the user made once. The picker is a modal
       // choice about that leg; dropping a via mid-choice is not offered anywhere.
       if (e.point && map.queryRenderedFeatures?.(e.point, { layers: ['route-alt-hit'] })?.length) return
-      onRouteClick(e.lngLat.lat, e.lngLat.lng)
+      const at = onRealWorld(e.lngLat)
+      onRouteClick(at.lat, at.lng)
     }
     const enter = () => { map.getCanvas().style.cursor = 'copy' }
     const leave = () => { map.getCanvas().style.cursor = '' }
@@ -944,35 +947,12 @@ export function MapViewGL({
     }
   }, [mapReady, onRouteClick])
 
-  /**
-   * The map takes the drop, not the drawn route: in a GL renderer the line lives in the
-   * canvas and has no element to aim at. The coordinate under the pointer says just as
-   * much once it is projected onto the routed geometry, and it works the same in all
-   * three renderers.
-   */
+  // A POI dropped on the map lands on the drive (see poiDropTarget.ts).
   useEffect(() => {
     const map = mapRef.current
     const container = map?.getContainer?.()
     if (!container || !mapReady || !onPoiDropOnRoute) return
-    const onDragOver = (e: DragEvent) => {
-      if (!draggedPoiId(e)) return
-      e.preventDefault()
-      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
-    }
-    const onDrop = (e: DragEvent) => {
-      const osmId = draggedPoiId(e)
-      if (!osmId) return
-      e.preventDefault()
-      const rect = container.getBoundingClientRect()
-      const at = map.unproject([e.clientX - rect.left, e.clientY - rect.top])
-      onPoiDropOnRoute(osmId, at.lat, at.lng)
-    }
-    container.addEventListener('dragover', onDragOver)
-    container.addEventListener('drop', onDrop)
-    return () => {
-      container.removeEventListener('dragover', onDragOver)
-      container.removeEventListener('drop', onDrop)
-    }
+    return bindPoiDropTarget(container, (x, y) => map.unproject([x, y]), onPoiDropOnRoute)
   }, [mapReady, onPoiDropOnRoute])
   const onViewportChangeRef = useRef(onViewportChange)
   onViewportChangeRef.current = onViewportChange
@@ -1343,7 +1323,7 @@ export function MapViewGL({
         && map.queryRenderedFeatures(e.point, { layers: ['trip-route-hit'] }).length > 0
       ) return
       if (isTourLayerHit(map, e.point)) return // a picked via ferrata or paddle obstacle opens its card instead
-      onClickRefs.current.map?.({ latlng: { lat: e.lngLat.lat, lng: e.lngLat.lng } })
+      onClickRefs.current.map?.({ latlng: onRealWorld({ lat: e.lngLat.lat, lng: e.lngLat.lng }) })
     })
     // Emit the viewport (pan/zoom + once on first idle) for the POI-explore pill.
     const emitViewport = () => reportGlViewport(map, onViewportChangeRef.current)
@@ -1376,7 +1356,7 @@ export function MapViewGL({
       // timer — dedupe so the form doesn't open twice.
       if (Date.now() - lastContextFire < 700) return false
       lastContextFire = Date.now()
-      onClickRefs.current.context?.({ latlng: { lat: lngLat.lat, lng: lngLat.lng }, originalEvent })
+      onClickRefs.current.context?.({ latlng: onRealWorld({ lat: lngLat.lat, lng: lngLat.lng }), originalEvent })
       return true
     }
     // MapLibre swallows the map contextmenu at the end of a right-button
@@ -1982,7 +1962,7 @@ export function MapViewGL({
     const fitPoints = routeCoords.length > 0 ? [...routeCoords, ...markerPoints] : markerPoints
     if (fitPoints.length === 0) return
     const bounds = new gl.LngLatBounds()
-    fitPoints.forEach(([lat, lng]) => bounds.extend([lng, lat]))
+    alongShortestArc(fitPoints).forEach(([lat, lng]) => bounds.extend([lng, lat]))
     let fitted = false
     const run = () => {
       try {

client/src/components/Map/NightPauseDrag.tsx

@@ -3,25 +3,29 @@ import { useMap } from 'react-leaflet'
 import type L from 'leaflet'
 import type { RouteVia } from '../../types'
 import { bindDayBoundaryDrag, type DayBoundaryControls } from './dayBoundaryDrag'
+import { useLngFrame } from './lngFrameContext'
+import { frameLng } from '../../utils/lngFrame'
 
 export function NightPauseDrag({ marker, via, controls }: { marker: L.Marker | null; via: RouteVia; controls?: DayBoundaryControls }) {
   const map = useMap()
+  // The route is drawn in the map's longitude frame (#2975), so its points are measured there too.
+  const frame = useLngFrame()
   useEffect(() => {
     const el = marker?.getElement()
     if (!marker || !el || !controls) return
     return bindDayBoundaryDrag(el, via, controls, {
       project: (lat, lng) => {
-        const point = map.latLngToContainerPoint([lat, lng])
+        const point = map.latLngToContainerPoint([lat, frameLng(frame, lng)])
         const rect = map.getContainer().getBoundingClientRect()
         return { x: point.x + rect.left, y: point.y + rect.top }
       },
-      setPosition: (lat, lng) => { marker.setLatLng([lat, lng]) },
+      setPosition: (lat, lng) => { marker.setLatLng([lat, frameLng(frame, lng)]) },
       lock: () => {
         const enabled = map.dragging.enabled()
         map.dragging.disable()
         return () => { if (enabled) map.dragging.enable() }
       },
     })
-  }, [map, marker, via, controls])
+  }, [map, marker, via, controls, frame])
   return null
 }

client/src/components/Map/PlannerWaypointMarker.tsx

@@ -1,6 +1,9 @@
 import L from 'leaflet';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Marker, Tooltip, useMap } from 'react-leaflet';
+import { frameLng } from '../../utils/lngFrame';
+import { onRealWorld } from '../../utils/worldCopy';
+import { useLngFrame } from './lngFrameContext';
 import { MAP_LABEL_BADGE_CLASS } from './mapHoverLabel';
 import { plannerPinBadge, plannerPinShape, type PlannerPinPoint } from './plannerPinShape';
 import { wirePlannerWaypointDrag } from './plannerWaypointDrag';
@@ -45,7 +48,11 @@ export default function PlannerWaypointMarker({
   useLayoutEffect(() => {
     handlersRef.current = { onClick, onMove };
   }, [onClick, onMove]);
-  const position = useMemo(() => [point.lat, point.lng] as [number, number], [point.lat, point.lng]);
+  const frame = useLngFrame();
+  const position = useMemo(
+    () => [point.lat, frameLng(frame, point.lng)] as [number, number],
+    [point.lat, point.lng, frame]
+  );
   const { label, shaping, stageEnd } = point;
   const icon = useMemo(
     () => plannerWaypointIcon(pinCss, { label, shaping, stageEnd }, index, selected, !!onMove),
@@ -67,7 +74,7 @@ export default function PlannerWaypointMarker({
     if (!element) return;
     return wirePlannerWaypointDrag({
       element,
-      initial: { lat: point.lat, lng: point.lng },
+      initial: { lat: position[0], lng: position[1] },
       coordinateAt: (clientX, clientY) => {
         const rect = map.getContainer().getBoundingClientRect();
         const at = map.containerPointToLatLng([clientX - rect.left, clientY - rect.top]);
@@ -76,9 +83,13 @@ export default function PlannerWaypointMarker({
       setPosition: ({ lat, lng }) => {
         marker.setLatLng([lat, lng]);
       },
-      onCommit: ({ lat, lng }) => handlersRef.current.onMove?.(point.id, lat, lng) ?? false,
+      // Saved on the real world, whichever copy of it the pin was dragged on (#2976).
+      onCommit: (at) => {
+        const { lat, lng } = onRealWorld(at);
+        return handlersRef.current.onMove?.(point.id, lat, lng) ?? false;
+      },
     });
-  }, [map, marker, onMove, point.id, point.lat, point.lng]);
+  }, [map, marker, onMove, point.id, position]);
 
   return (
     <Marker

client/src/components/Map/PoiMarkers.tsx

@@ -0,0 +1,136 @@
+import L from 'leaflet';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Marker, Tooltip, useMap } from 'react-leaflet';
+import { frameLng, viewLngFrame, type LngFrame } from '../../utils/lngFrame';
+import ClusteredPois from './ClusteredPois';
+import { makePoiDraggable } from './markerDrag';
+import type { Poi } from './poiCategories';
+import { poiDetailRowKey, poiDetailRows, poiPinCacheKey, poiPinParts } from './poiMarker';
+
+// Small coloured pin for an OSM "explore" POI — distinct from the photo-circle
+// markers of planned places; the colour matches its pill category.
+const poiIconCache = new Map<string, L.DivIcon>();
+function createPoiIcon(poi: Pick<Poi, 'category' | 'icon' | 'color'>) {
+  // One flat disc in the category's colour with its icon, and never the chain's logo.
+  // The brands turned a corridor full of petrol stations into a row of advertisements,
+  // they were unreadable at pin size, and a brand with no logo on file fell back to a
+  // different picture entirely — so no two pins looked alike.
+  // A plugin category's key carries its colour and icon too, so two looks never share a pin.
+  const cacheKey = poiPinCacheKey(poi);
+  const cached = poiIconCache.get(cacheKey);
+  if (cached) return cached;
+  const { color, svg } = poiPinParts(poi);
+  const icon = L.divIcon({
+    className: '',
+    html: `<div style="position:relative;width:26px;height:26px;border-radius:50%;background:${color};border:2px solid white;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;">${svg}</div>`,
+    iconSize: [26, 26],
+    iconAnchor: [13, 13],
+    tooltipAnchor: [0, -14],
+  });
+  poiIconCache.set(cacheKey, icon);
+  return icon;
+}
+
+/**
+ * The hover tooltip of an explore POI: its name, and for a plugin POI the rows the
+ * plugin knows about it (the GL hover card shows the same, see buildPoiPopupHtml).
+ * React text throughout, so nothing a plugin sends is ever read as markup. A POI
+ * without rows keeps the bare name it has always had.
+ */
+function PoiTooltipBody({ poi }: Readonly<{ poi: Poi }>) {
+  const rows = poiDetailRows(poi);
+  if (!rows.length) return poi.name;
+  // w-max because Leaflet's tooltip pane is 0px wide: without an intrinsic width the
+  // tooltip shrinks to its narrowest layout and the values wrap a letter per line. The
+  // label column stops at 45% and wraps, so a long label leaves its value room too.
+  return (
+    <div className="w-max max-w-56 whitespace-normal">
+      <div className="truncate font-semibold">{poi.name}</div>
+      <div className="mt-1 grid grid-cols-[fit-content(45%)_1fr] gap-x-1.5 font-normal" data-testid="poi-details">
+        {rows.map((row) => (
+          <div key={poiDetailRowKey(row)} className="contents">
+            <span className="text-content-muted [overflow-wrap:anywhere]">{row.label}</span>
+            <span className="[overflow-wrap:anywhere]">{row.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The explore POIs of the Leaflet map, clustered when asked. They are fetched for the
+ * visible area, which can lie outside the trip's longitude frame or on another world
+ * copy, so they are drawn on the copy in view, followed as the view moves (#2975).
+ */
+export default function PoiMarkers({
+  pois,
+  clusterLoosely,
+  onPoiClick,
+  draggable,
+}: {
+  pois: Poi[];
+  clusterLoosely: boolean;
+  onPoiClick?: (poi: Poi) => void;
+  /** Whether a pin can be dragged onto the route. */
+  draggable: boolean;
+}) {
+  const map = useMap();
+  const [frame, setFrame] = useState<LngFrame | null>(null);
+  // Followed only while there are POIs to draw, so a map without them keeps no listeners.
+  const tracking = pois.length > 0;
+  useEffect(() => {
+    if (!tracking) return undefined;
+    const follow = () => setFrame((current) => viewLngFrame(current, map.getCenter().lng));
+    map.whenReady(follow);
+    map.on('moveend', follow);
+    return () => {
+      map.off('moveend', follow);
+    };
+  }, [map, tracking]);
+  // Native clicks keep the newest handler without rebuilding every marker.
+  const clickRef = useRef(onPoiClick);
+  useEffect(() => {
+    clickRef.current = onPoiClick;
+  }, [onPoiClick]);
+
+  const markers = useMemo(
+    () =>
+      pois.map((poi) => (
+        <Marker
+          key={`poi-${poi.osm_id}`}
+          alt={poi.name}
+          position={[poi.lat, frameLng(frame, poi.lng)]}
+          icon={createPoiIcon(poi)}
+          zIndexOffset={500}
+          eventHandlers={{
+            click: () => onPoiClick?.(poi),
+            // Wired on add rather than in a layout effect: Leaflet builds the icon element
+            // itself, and this is the first moment there is one to attach to.
+            add: (e: { target: { getElement: () => HTMLElement | undefined } }) => {
+              const el = e.target.getElement();
+              if (!el) return;
+              // Native clicks avoid Leaflet suppressing a click after an earlier map drag.
+              el.setAttribute('aria-label', poi.name);
+              el.onclick = (event) => {
+                event.stopPropagation();
+                clickRef.current?.(poi);
+              };
+              if (draggable) makePoiDraggable(el, poi.osm_id);
+            },
+          }}
+        >
+          <Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip">
+            <PoiTooltipBody poi={poi} />
+          </Tooltip>
+        </Marker>
+      )),
+    [pois, onPoiClick, draggable, frame]
+  );
+
+  return (
+    <ClusteredPois pois={pois} frame={frame} enabled={clusterLoosely} onPoiClick={onPoiClick}>
+      {markers}
+    </ClusteredPois>
+  );
+}

client/src/components/Map/ReservationOverlay.tsx

@@ -9,6 +9,8 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { hopIsVisible, labelFloorPx } from '../../utils/reservationRoutes'
 import { TRANSPORT_COLOR, TRANSPORT_META, transportHop, type TransportHop, type TransportType } from './transportHops'
 import type { Reservation } from '../../types'
+import { frameLine } from '../../utils/lngFrame'
+import { useLngFrame } from './lngFrameContext'
 
 const ENDPOINT_PANE = 'reservation-endpoints'
 
@@ -48,11 +50,13 @@ function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
 /** What a hop will draw: the road it was routed along when there is one, else its arcs. */
 function linesFor(item: TransportItem, roadRoutes: Map<number, [number, number][]> | undefined): [number, number][][] {
   const road = roadRoutes?.get(item.res.id)
-  return road && road.length >= 2 ? [road] : item.arcs
+  return road && road.length >= 2 ? [frameLine(item.frame, road)] : item.arcs
 }
 
 interface TransportItem extends TransportHop {
   transitSegs: TransitMapSegment[]
+  /** The map's longitude frame the hop was drawn in (#2975), for the road route that arrives later. */
+  frame: ReturnType<typeof useLngFrame>
 }
 
 interface Props {
@@ -75,16 +79,19 @@ export default function ReservationOverlay({ reservations, showConnections, onEn
     zoomend: () => setZoom(map.getZoom()),
   })
   const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) === true
+  const frame = useLngFrame()
 
   const items = useMemo<TransportItem[]>(() => {
     const out: TransportItem[] = []
     for (const r of reservations) {
-      const hop = transportHop(r, true)
+      const hop = transportHop(r, true, frame)
       if (!hop) continue
-      out.push({ ...hop, transitSegs: hop.type === 'transit' ? getTransitMapSegments(r) : [] })
+      const segs = hop.type === 'transit' ? getTransitMapSegments(r) : []
+      const transitSegs = frame ? segs.map(seg => ({ ...seg, coords: frameLine(frame, seg.coords) })) : segs
+      out.push({ ...hop, transitSegs, frame })
     }
     return out
-  }, [reservations])
+  }, [reservations, frame])
 
   const visibleItems = useMemo(() => {
     const project = (p: readonly [number, number]) => map.latLngToContainerPoint([p[0], p[1]])

client/src/components/Map/RoadtripViaMarkers.tsx

@@ -3,6 +3,9 @@ import { Marker, Tooltip, useMap } from 'react-leaflet'
 import L from 'leaflet'
 import { useTranslation } from '../../i18n/TranslationContext'
 import { useStableVias } from './viaMarkerState'
+import { useLngFrame } from './lngFrameContext'
+import { frameLng } from '../../utils/lngFrame'
+import { onRealWorld } from '../../utils/worldCopy'
 import type { RoadtripVia } from '@trek/shared'
 
 /**
@@ -64,12 +67,14 @@ export default function RoadtripViaMarkers({
     return () => { map.off('zoomend', update) }
   }, [map])
 
+  const frame = useLngFrame()
   const markers = useMemo(() => vias.map(via => ({
     via,
-    position: [via.lat, via.lng] as [number, number],
+    position: [via.lat, frameLng(frame, via.lng)] as [number, number],
     handlers: {
       dragend: (e: { target: { getLatLng: () => { lat: number; lng: number } } }) => {
-        const at = e.target.getLatLng()
+        // Saved on the real world, whichever copy of it the handle was dragged on (#2976).
+        const at = onRealWorld(e.target.getLatLng())
         handlersRef.current.onMoveVia?.(via.day_id, via.id, at.lat, at.lng)
       },
       // Right-click rather than a delete handle: a 12px dot has no room for one,
@@ -79,7 +84,7 @@ export default function RoadtripViaMarkers({
         handlersRef.current.onRemoveVia?.(via.day_id, via.id)
       },
     },
-  })), [vias])
+  })), [vias, frame])
 
   if (!markers.length || !zoomedIn) return null
 

client/src/components/Map/RouteHitBand.tsx

@@ -1,4 +1,5 @@
 import { Polyline } from 'react-leaflet';
+import { onRealWorld } from '../../utils/worldCopy';
 
 /**
  * P2A-03: an invisible band along a route segment on the Leaflet map, wider
@@ -31,7 +32,9 @@ export function RouteHitBand({
         click: (e: { latlng: { lat: number; lng: number }; originalEvent: MouseEvent }) => {
           // Stops the map's own click, which would otherwise open the add-place menu underneath the new via.
           e.originalEvent.stopPropagation();
-          onRouteClick(e.latlng.lat, e.latlng.lng);
+          // The via is saved on the real world, whichever copy of it the route was clicked on (#2976).
+          const at = onRealWorld(e.latlng);
+          onRouteClick(at.lat, at.lng);
         },
       }}
     />

client/src/components/Map/assistantViewport.ts

@@ -4,6 +4,7 @@ import { useMap } from 'react-leaflet';
 
 import { useAssistantStore } from '../../store/assistantStore';
 import { useTripStore } from '../../store/tripStore';
+import { bboxOnRealWorld } from '../../utils/worldCopy';
 
 /**
  * The part of the planner's map on screen, told to the assistant after every
@@ -54,7 +55,11 @@ export function useReportViewLeaflet(): void {
     if (tripId === null) return;
     const read = () => {
       const b = map.getBounds();
-      report(tripId, { south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() });
+      // On the real world, whichever world copy (or longitude frame, #2975) the map shows.
+      report(
+        tripId,
+        bboxOnRealWorld({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
+      );
     };
     read();
     map.on('moveend', read);
@@ -87,7 +92,11 @@ export function useReportViewGL(mapRef: { readonly current: unknown }, mapReady:
     const read = () => {
       const b = getBounds();
       if (typeof b?.getSouth !== 'function') return;
-      report(tripId, { south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() });
+      // On the real world, whichever world copy (or longitude frame, #2975) the map shows.
+      report(
+        tripId,
+        bboxOnRealWorld({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
+      );
     };
     read();
     on('moveend', read);

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

@@ -169,6 +169,45 @@ describe('buildDayRouteRuns', () => {
     expect(hotelBookendOf(run[0], run[1])).toBe('morning')
   })
 
+  it("FE-MAP-DRP-017: the morning after a night away starts at the side trip's hotel, not the room kept at home", () => {
+    // The first hotel stays booked over the whole trip and comes first in the list; the
+    // side trip's hotel holds the night before. The day used to start with a 716 km drive
+    // from the kept room to the side trip's first stop.
+    const days = [1, 2, 3, 4, 5].map(n => buildDay({ id: n, day_number: n }))
+    const kept = { id: 1, trip_id: 1, place_lat: 13.7466, place_lng: 100.5393, start_day_id: 1, end_day_id: 5 } as unknown as Accommodation
+    const away = { id: 2, trip_id: 1, place_lat: 18.7883, place_lng: 98.9853, start_day_id: 2, end_day_id: 3 } as unknown as Accommodation
+    const runs = buildDayRouteRuns(3, inputs({
+      days,
+      assignments: { '3': [buildAssignment({ day_id: 3, order_index: 0, place: buildPlace({ lat: 18.8048, lng: 98.9216, place_time: '10:00' }) })] },
+      accommodations: [kept, away],
+      optimizeFromAccommodation: true,
+    }))
+    expect(runs[0][0]).toMatchObject({ lat: 18.7883, lng: 98.9853, hotel: 'morning' })
+    expect(runs.flat().some(p => p.hotel === 'morning' && p.lat === 13.7466)).toBe(false)
+  })
+
+  it('FE-MAP-DRP-018: a taxi that leaves from the hotel adds no road from the hotel to itself', () => {
+    const days = [1, 2, 3].map(n => buildDay({ id: n, day_number: n }))
+    const hotel = { id: 1, trip_id: 1, place_lat: 13.7466, place_lng: 100.5393, start_day_id: 1, end_day_id: 3 } as unknown as Accommodation
+    const taxi = {
+      id: 9, trip_id: 1, type: 'taxi', title: 'Taxi', status: 'confirmed', day_id: 2, end_day_id: 2,
+      reservation_time: '2026-12-02T09:00', reservation_end_time: '2026-12-02T09:40',
+      endpoints: [
+        { role: 'from', sequence: 0, name: 'Hotel', lat: 13.7466, lng: 100.5393 },
+        { role: 'to', sequence: 1, name: 'Museum', lat: 13.7516, lng: 100.4927 },
+      ],
+    } as unknown as Reservation
+    const runs = buildDayRouteRuns(2, inputs({
+      days,
+      assignments: { '2': [buildAssignment({ day_id: 2, order_index: 0, place: buildPlace({ lat: 13.7563, lng: 100.5018, place_time: '12:00' }) })] },
+      reservations: [taxi],
+      accommodations: [hotel],
+      optimizeFromAccommodation: true,
+    }))
+    const zeroLength = runs.filter(run => run.length === 2 && run[0].lat === run[1].lat && run[0].lng === run[1].lng)
+    expect(zeroLength).toEqual([])
+  })
+
   it('FE-MAP-DRP-008: a day that is not in the trip has no route', () => {
     expect(buildDayRouteRuns(99, inputs({ assignments: { '1': [at(48.86, 2.35, 0)] } }))).toEqual([])
   })

client/src/components/Map/dayRoutePlan.ts

@@ -196,7 +196,10 @@ export function buildDayRouteRuns(dayId: number, input: DayRouteInputs): DayRout
     const role: CarrierEdge = side === 'first'
       ? (e.from ? 'departure' : 'arrival')
       : (e.to ? 'arrival' : 'departure')
-    return { isPlace: false, time: null, carrierEdge: e.carrier ? role : null }
+    // The booking's own point at this edge of the day, as the sidebar passes it: a taxi
+    // that starts or ends at the hotel then adds no zero-length leg to it.
+    const point = side === 'first' ? (e.from ?? e.to) : (e.to ?? e.from)
+    return { isPlace: false, time: null, carrierEdge: e.carrier ? role : null, lat: point?.lat, lng: point?.lng }
   }
   // A carrier with a located endpoint today means the day changes geography by
   // air/rail/sea — the check-in hotel is then the day's destination and the