chore: bump version to 5.1.0 [skip ci]

A fix to a release workflow changes nothing that the tests cover, yet the
gate wanted a full new test run on it. With ci_from the release takes ci-ok
from the commit main's code comes from, provided that commit is an ancestor
of main, everything outside .github/ is identical, and one of its ci-ok runs
is green.

.dockerignore

@@ -1,6 +1,7 @@
 node_modules
 client/node_modules
 server/node_modules
+shared/node_modules
 client/dist
 shared/dist
 data

.github/workflows/docker-dev.yml

@@ -5,6 +5,13 @@ name: Build & Push Docker Image (Prerelease)
 # :latest-pre, and tags the commit. Nothing moves :latest. Like the stable
 # release it refuses a commit whose ci-ok is not green. docker.yml with
 # bump=auto later finalizes the line once main carries it.
+#
+# A prerelease asks the TREK services issuer for a registration dialect of its
+# own -pre.N version (registration-dialect.yml, as the stable release does)
+# and builds it into the image; nothing of it is committed, dev keeps the
+# module of the last stable release, which it gets when main is merged back
+# into dev. Without one the image carries dev's module, with a warning when
+# that is the original one or old.
 
 on:
   workflow_dispatch:
@@ -89,10 +96,23 @@ jobs:
           echo "VERSION=$NEW_VERSION" >> "$GITHUB_OUTPUT"
           echo "$STABLE to $NEW_VERSION"
 
+  # The registration dialect of this prerelease, fetched and checked in a job
+  # without write access. It never fails the build.
+  dialect:
+    needs: version-bump
+    uses: ./.github/workflows/registration-dialect.yml
+    with:
+      version: ${{ needs.version-bump.outputs.version }}
+      ref: ${{ needs.version-bump.outputs.sha }}
+    secrets:
+      TREK_DIALECT_TOKEN: ${{ secrets.TREK_DIALECT_TOKEN }}
+
   build:
     runs-on: ${{ matrix.runner }}
     timeout-minutes: 120
-    needs: version-bump
+    needs: [version-bump, dialect]
+    # Whatever became of the dialect job: without its artifact the image carries dev's module.
+    if: ${{ !cancelled() && needs.version-bump.result == 'success' }}
     strategy:
       fail-fast: false
       matrix:
@@ -111,6 +131,48 @@ jobs:
         with:
           ref: ${{ needs.version-bump.outputs.sha }}
 
+      - name: Take over the prerelease's dialect
+        id: take
+        uses: actions/download-artifact@v7
+        continue-on-error: true
+        with:
+          name: registration-dialect
+          path: ${{ runner.temp }}/dialect
+
+      # Into the build context only; the commit stays as it is. Without a
+      # dialect of its own the image speaks dev's module, which the issuer
+      # takes for new installations for 180 days after it was made (longer
+      # while it is the newest stable release's). That is warned about, never
+      # stopped on, and a date that cannot be read only warns as well.
+      - name: Place the dialect
+        env:
+          VERSION: ${{ needs.version-bump.outputs.version }}
+          TAKEN: ${{ steps.take.outcome }}
+          REPORT: ${{ matrix.platform == 'linux/amd64' }}
+        run: |
+          set -u
+          target=server/src/nest/service-identity/registration-dialect.ts
+          fetched="$RUNNER_TEMP/dialect/registration-dialect.ts"
+          if [ "$TAKEN" = success ] && [ -f "$fetched" ]; then
+            cp "$fetched" "$target"
+            echo "$VERSION registers in dialect $(sed -n "s/^const DIALECT = '\(.*\)';$/\1/p" "$target") of its own."
+            exit 0
+          fi
+          [ "$REPORT" = true ] || exit 0
+          id="$(sed -n "s/^const DIALECT = '\(.*\)';$/\1/p" "$target")"
+          created="$(sed -n "s/^  createdAt: '\(.*\)',$/\1/p" "$target")"
+          if [ "$id" = 0 ]; then
+            message="$VERSION got no dialect of its own and registers in the original one, which the issuer accepts only for a transition period."
+          elif made="$(date -u -d "$created" +%s 2>/dev/null)"; then
+            age=$(( ($(date -u +%s) - made) / 86400 ))
+            message="$VERSION got no dialect of its own and registers in dev's dialect $id from $created, $age days old."
+            [ "$age" -gt 150 ] || { echo "$message"; exit 0; }
+          else
+            message="$VERSION got no dialect of its own, and the date of dev's dialect cannot be read from $target."
+          fi
+          echo "::warning::$message"
+          printf '### Registration dialect\n%s\n' "$message" >> "$GITHUB_STEP_SUMMARY"
+
       - uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
 
       - uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
@@ -156,6 +218,7 @@ jobs:
     runs-on: ubuntu-24.04
     timeout-minutes: 120
     needs: [version-bump, build]
+    if: ${{ !cancelled() && needs.build.result == 'success' }}
     steps:
       - uses: actions/checkout@v6
         with:

.github/workflows/docker.yml

@@ -2,17 +2,29 @@ name: Build & Push Docker Image
 
 # The stable release. Dispatched by hand on main, it:
 #   1. refuses to run unless ci-ok passed on the main commit it releases,
-#   2. works out the version from the tags and the bump input, commits the
-#      bump to package.json, the lockfile and Chart.yaml, tags it and pushes,
-#   3. builds both platforms from exactly that bump commit (never from
+#   2. works out the version from the tags and the bump input,
+#   3. asks the TREK services issuer for the registration dialect of that
+#      version and checks it, in a job without write access
+#      (registration-dialect.yml); without one the release ships the dialect
+#      already on main, but only while that one still has 90 days to run,
+#   4. commits the bump to package.json, the lockfile, Chart.yaml and the
+#      dialect, tags it and pushes,
+#   5. builds both platforms from exactly that bump commit (never from
 #      whatever main points to by then) and publishes :VERSION,
 #      :MAJOR.MINOR, :MAJOR and :latest,
-#   4. publishes the Helm chart from the same commit.
+#   6. publishes the Helm chart from the same commit.
 #
 # Big or risky changes go out as a prerelease first (docker-dev.yml, tagged
 # :latest-pre and :<next>-pre.N); bump=auto here then finalizes that line.
 # Without a prerelease in flight there is no default: the run stops until
 # someone picks patch, minor or major.
+#
+# Each stable release registers new installations in a dialect of its own,
+# which the issuer accepts for 180 days, and for as long as it is the newest
+# release's; renewing a key needs none. dev gets the module when main is merged
+# back into dev after the release; a prerelease asks the issuer for one of its
+# own (docker-dev.yml). The issuer's side, and what to set up before the first
+# release with a dialect, is in the operations guide of the TREK services.
 
 on:
   workflow_dispatch:
@@ -26,6 +38,14 @@ on:
         description: "Type MAJOR (all caps) to confirm a major release"
         type: string
         default: ''
+      ci_from:
+        description: 'Take ci-ok from this earlier commit instead of the one on main, when main differs from it only under .github/ (a fix to a release workflow needs no second test run)'
+        type: string
+        default: ''
+      allow_stale_dialect:
+        description: 'Ship without a dialect of its own even if the one on main is the original one or has under 90 days left'
+        type: boolean
+        default: false
 
 permissions:
   contents: write
@@ -36,13 +56,16 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  version-bump:
+  version:
     if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-24.04
-    timeout-minutes: 120
+    timeout-minutes: 30
+    permissions:
+      contents: read
+      checks: read
     outputs:
       version: ${{ steps.bump.outputs.VERSION }}
-      sha: ${{ steps.bump.outputs.SHA }}
+      base: ${{ steps.base.outputs.SHA }}
     steps:
       - name: Release from main only
         if: github.ref != 'refs/heads/main'
@@ -50,17 +73,17 @@ jobs:
           echo "::error::Dispatch this workflow on main, not on $GITHUB_REF."
           exit 1
 
-      - uses: actions/create-github-app-token@v3
-        id: app-token
-        with:
-          app-id: ${{ secrets.RELEASE_APP_ID }}
-          private-key: ${{ secrets.RELEASE_APP_PRIVATE_KEY }}
-
       - uses: actions/checkout@v6
         with:
           fetch-depth: 0
           fetch-tags: true
-          token: ${{ steps.app-token.outputs.token }}
+          persist-credentials: false
+
+      # The bump job checks out exactly this commit, so what ci-ok was checked
+      # on is what gets released, however long the dialect takes.
+      - name: Note the commit being released
+        id: base
+        run: echo "SHA=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
 
       # The dev push, the main push and any manual run each leave a ci-ok on
       # this commit. scripts/ci/ci-ok-verdict.mjs counts the newest attempt of
@@ -68,6 +91,7 @@ jobs:
       # finished last to be green, so a later green run supersedes a flaky or
       # cancelled one. It prints the link of every run it counted.
       - name: Require a green ci-ok on the commit being released
+        if: inputs.ci_from == ''
         env:
           GH_TOKEN: ${{ github.token }}
         run: |
@@ -77,14 +101,43 @@ jobs:
           gh api "repos/$GITHUB_REPOSITORY/commits/$sha/check-runs?check_name=ci-ok&filter=all&per_page=100" > "$runs"
           node scripts/ci/ci-ok-verdict.mjs "$runs" "$sha"
 
-      - name: Determine bump type and update version
+      # ci_from: main carries only workflow changes on top of a commit that
+      # already passed. That commit must be an ancestor of main, everything
+      # outside .github/ must be identical, and one of its ci-ok runs must be
+      # green (its dev push, typically).
+      - name: Require a green ci-ok on the commit main's code comes from
+        if: inputs.ci_from != ''
+        env:
+          GH_TOKEN: ${{ github.token }}
+          CI_FROM: ${{ inputs.ci_from }}
+        run: |
+          set -euo pipefail
+          from="$(git rev-parse --verify "$CI_FROM^{commit}")"
+          if ! git merge-base --is-ancestor "$from" HEAD; then
+            echo "::error::$from is not an ancestor of main."
+            exit 1
+          fi
+          outside="$(git diff --name-only "$from" HEAD -- . ':(exclude).github/**')"
+          if [ -n "$outside" ]; then
+            echo "::error::main differs from $from outside .github/:"
+            echo "$outside"
+            exit 1
+          fi
+          green="$(gh api "repos/$GITHUB_REPOSITORY/commits/$from/check-runs?check_name=ci-ok&filter=all&per_page=100" \
+            --jq '[.check_runs[] | select(.status == "completed" and .conclusion == "success")] | length')"
+          if [ "$green" -lt 1 ]; then
+            echo "::error::$from has no green ci-ok."
+            exit 1
+          fi
+          echo "main differs from $from only under .github/, and $from has $green green ci-ok run(s)."
+
+      - name: Determine bump type and version
         id: bump
         env:
           BUMP_INPUT: ${{ inputs.bump || 'auto' }}
           CONFIRM_MAJOR: ${{ inputs.confirm_major }}
         run: |
           set -eu
-          git fetch --tags
 
           # Derive version from git tags, no package.json dependency
           STABLE_TAG=$(git tag -l 'v[0-9]*.[0-9]*.[0-9]*' | grep -v '\-pre\.' | sort -V | tail -1)
@@ -143,6 +196,107 @@ jobs:
           echo "VERSION=$NEW_VERSION" >> "$GITHUB_OUTPUT"
           echo "$STABLE to $NEW_VERSION ($BUMP)"
 
+  # The registration dialect of this version, fetched and checked in a job
+  # without write access. It never fails; without an artifact from it the
+  # bump decides below whether the dialect on main may ship.
+  dialect:
+    needs: version
+    uses: ./.github/workflows/registration-dialect.yml
+    with:
+      version: ${{ needs.version.outputs.version }}
+      ref: ${{ needs.version.outputs.base }}
+    secrets:
+      TREK_DIALECT_TOKEN: ${{ secrets.TREK_DIALECT_TOKEN }}
+
+  # Runs whatever became of the dialect job, a timeout or a lost runner
+  # included: no artifact means the dialect on main, if it may still ship.
+  version-bump:
+    needs: [version, dialect]
+    if: ${{ !cancelled() && needs.version.result == 'success' }}
+    runs-on: ubuntu-24.04
+    timeout-minutes: 120
+    outputs:
+      sha: ${{ steps.commit.outputs.SHA }}
+    steps:
+      - uses: actions/create-github-app-token@v3
+        id: app-token
+        with:
+          app-id: ${{ secrets.RELEASE_APP_ID }}
+          private-key: ${{ secrets.RELEASE_APP_PRIVATE_KEY }}
+
+      - uses: actions/checkout@v6
+        with:
+          ref: ${{ needs.version.outputs.base }}
+          fetch-depth: 0
+          fetch-tags: true
+          token: ${{ steps.app-token.outputs.token }}
+
+      - name: Take over the checked dialect
+        id: take
+        uses: actions/download-artifact@v7
+        continue-on-error: true
+        with:
+          name: registration-dialect
+          path: ${{ runner.temp }}/dialect
+
+      # Without a dialect of its own the release ships the one on main, but
+      # only while the issuer takes new registrations in it for 90 more days:
+      # dialect 0 closes on the issuer's transition date, and a dialect with
+      # little left would shut out new installations of this release soon after
+      # it is out. Then this stops before anything is committed, unless
+      # allow_stale_dialect says to ship anyway. The issuer keeps the newest
+      # release's dialect open past its date, so the date here is the least it
+      # has, not the most.
+      - name: Place the dialect
+        env:
+          VERSION: ${{ needs.version.outputs.version }}
+          TAKEN: ${{ steps.take.outcome }}
+          ALLOW_STALE: ${{ inputs.allow_stale_dialect }}
+        run: |
+          set -u
+          target=server/src/nest/service-identity/registration-dialect.ts
+          fetched="$RUNNER_TEMP/dialect/registration-dialect.ts"
+          dialect_id() { sed -n "s/^const DIALECT = '\(.*\)';$/\1/p" "$1"; }
+          report() {
+            echo "$2$1"
+            printf '### Registration dialect\n%s\n' "$1" >> "$GITHUB_STEP_SUMMARY"
+          }
+          if [ "$TAKEN" = success ] && [ -f "$fetched" ]; then
+            cp "$fetched" "$target"
+            report "$VERSION registers in dialect $(dialect_id "$target"), written by the issuer for it." ""
+            exit 0
+          fi
+          id="$(dialect_id "$target")"
+          created="$(sed -n "s/^  createdAt: '\(.*\)',$/\1/p" "$target")"
+          left=""
+          if [ -n "$id" ] && [ "$id" != 0 ] && made="$(date -u -d "$created" +%s 2>/dev/null)"; then
+            left=$(( (made + 180 * 86400 - $(date -u +%s)) / 86400 ))
+          fi
+          if [ -n "$left" ] && [ "$left" -ge 90 ]; then
+            report "$VERSION ships without a dialect of its own and registers in dialect $id from $created, which the issuer takes for new installations for $left more days at least. Its operator can write one by hand for the next patch." "::warning::"
+            exit 0
+          fi
+          if [ "$id" = 0 ]; then
+            what="the original registration, which the issuer accepts only until the end of its transition period"
+          elif [ -n "$left" ]; then
+            what="dialect $id from $created, which has $left days left"
+          else
+            what="a dialect whose id or date cannot be read from $target"
+          fi
+          if [ "$ALLOW_STALE" = true ]; then
+            report "$VERSION ships without a dialect of its own and registers in $what, as allow_stale_dialect asked." "::warning::"
+            exit 0
+          fi
+          report "$VERSION got no dialect of its own and would register in $what. Nothing was committed or pushed. Make sure the issuer runs with its dialect seed and release token and that TREK_DIALECT_TOKEN is set, then run the release again, or tick allow_stale_dialect to ship anyway." "::error::"
+          exit 1
+
+      - name: Update the version, commit, tag and push
+        id: commit
+        env:
+          NEW_VERSION: ${{ needs.version.outputs.version }}
+        run: |
+          set -eu
+
           # Update all workspace + root package.json files and the root lockfile in one shot
           npm version "$NEW_VERSION" --workspaces --include-workspace-root --no-git-tag-version
           sed -i "s/^version: .*/version: $NEW_VERSION/" charts/trek/Chart.yaml
@@ -153,7 +307,8 @@ jobs:
           # landed on main in the meantime.
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add package.json package-lock.json server/package.json client/package.json shared/package.json charts/trek/Chart.yaml
+          git add package.json package-lock.json server/package.json client/package.json shared/package.json \
+            charts/trek/Chart.yaml server/src/nest/service-identity/registration-dialect.ts
           git commit -m "chore: bump version to $NEW_VERSION [skip ci]"
           git tag -a "v$NEW_VERSION" -m "v$NEW_VERSION"
           git push origin HEAD:main --follow-tags
@@ -164,7 +319,9 @@ jobs:
   build:
     runs-on: ${{ matrix.runner }}
     timeout-minutes: 120
-    needs: version-bump
+    needs: [version, version-bump]
+    # version-bump may run after a failed dialect job; that alone must not skip what follows it.
+    if: ${{ !cancelled() && needs.version-bump.result == 'success' }}
     strategy:
       fail-fast: false
       matrix:
@@ -205,7 +362,7 @@ jobs:
           outputs: type=image,name=mauriceboe/trek,push-by-digest=true,name-canonical=true,push=true
           no-cache: true
           build-args: |
-            APP_VERSION=${{ needs.version-bump.outputs.version }}
+            APP_VERSION=${{ needs.version.outputs.version }}
           labels: |
             org.opencontainers.image.revision=${{ steps.meta.outputs.revision }}
             org.opencontainers.image.created=${{ steps.meta.outputs.created }}
@@ -227,7 +384,8 @@ jobs:
   merge:
     runs-on: ubuntu-24.04
     timeout-minutes: 120
-    needs: [version-bump, build]
+    needs: [version, version-bump, build]
+    if: ${{ !cancelled() && needs.build.result == 'success' }}
     steps:
       - uses: actions/checkout@v6
         with:
@@ -252,7 +410,7 @@ jobs:
         working-directory: /tmp/digests
         run: |
           set -euo pipefail
-          VERSION="${{ needs.version-bump.outputs.version }}"
+          VERSION="${{ needs.version.outputs.version }}"
           MAJOR_TAG="$(echo "$VERSION" | cut -d. -f1)"
           # :MAJOR.MINOR takes the patches of one minor line and nothing else,
           # the conservative pin for an install that wants to wait out a
@@ -292,6 +450,7 @@ jobs:
     runs-on: ubuntu-24.04
     timeout-minutes: 120
     needs: version-bump
+    if: ${{ !cancelled() && needs.version-bump.result == 'success' }}
     steps:
       - name: Checkout
         uses: actions/checkout@v6

.github/workflows/registration-dialect.yml

@@ -0,0 +1,144 @@
+name: Registration dialect
+
+# Asks the TREK services issuer for the registration dialect of one version and
+# checks it, for docker.yml (a stable release commits it with the version bump)
+# and docker-dev.yml (a prerelease only builds it into its image).
+#
+# The issuer's answer runs here, in a job that holds no write token and keeps
+# no git credentials; the token for the issuer is in the environment of the
+# one step that fetches. The answer is held to what a dialect is
+# (scripts/ci/check-registration-dialect.mjs), then type-checked and linted
+# the way TREK's CI would see it once it is on main and dev. Only a module that
+# passes all of it goes on, as the artifact `registration-dialect`; without
+# one the caller decides what ships. This workflow never fails its caller.
+
+on:
+  workflow_call:
+    inputs:
+      version:
+        description: 'The version the dialect is for, X.Y.Z or X.Y.Z-pre.N'
+        type: string
+        required: true
+      ref:
+        description: 'The commit whose checker, types and lint config the dialect is checked with'
+        type: string
+        required: true
+    secrets:
+      TREK_DIALECT_TOKEN:
+        required: false
+
+permissions:
+  contents: read
+
+jobs:
+  dialect:
+    runs-on: ubuntu-24.04
+    timeout-minutes: 20
+    # A failed or timed-out run leaves no artifact, which the caller already
+    # handles; it must not fail the release around it.
+    continue-on-error: true
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: ${{ inputs.ref }}
+          persist-credentials: false
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+          cache-dependency-path: package-lock.json
+
+      # The only step that sees the token. The URL is fixed; the answer is
+      # bounded in time and size and goes to a file nothing runs yet.
+      - name: Fetch the dialect from the issuer
+        id: fetch
+        timeout-minutes: 3
+        env:
+          TREK_DIALECT_TOKEN: ${{ secrets.TREK_DIALECT_TOKEN }}
+          VERSION: ${{ inputs.version }}
+        run: |
+          set -uo pipefail
+          out="$RUNNER_TEMP/registration-dialect.ts"
+          if [ -z "${TREK_DIALECT_TOKEN:-}" ]; then
+            echo "::warning::TREK_DIALECT_TOKEN is not set; the issuer was not asked for a dialect for $VERSION."
+            exit 0
+          fi
+          status=$(curl --silent --show-error --proto '=https' --tlsv1.2 --max-time 30 --retry 2 --retry-delay 5 \
+            --max-filesize 262144 -H "Authorization: Bearer $TREK_DIALECT_TOKEN" -H 'Content-Type: application/json' \
+            --data "{\"version\":\"$VERSION\"}" -o "$out" -w '%{http_code}' https://places.liketrek.com/v1/dialects) \
+            || status=000
+          if [ "$status" != 200 ] && [ "$status" != 201 ]; then
+            echo "::warning::The issuer handed out no registration dialect for $VERSION (HTTP $status)."
+            rm -f "$out"
+            exit 0
+          fi
+          if [ "$(wc -c < "$out")" -gt 262144 ]; then
+            echo "::warning::The issuer's registration dialect for $VERSION is larger than a dialect."
+            rm -f "$out"
+            exit 0
+          fi
+          echo "file=$out" >> "$GITHUB_OUTPUT"
+
+      # A module that computes for long is refused by the clock as well.
+      - name: Check the dialect
+        id: check
+        if: steps.fetch.outputs.file != ''
+        timeout-minutes: 2
+        env:
+          FILE: ${{ steps.fetch.outputs.file }}
+          VERSION: ${{ inputs.version }}
+        run: |
+          set -uo pipefail
+          if ! node scripts/ci/check-registration-dialect.mjs "$FILE" "$VERSION"; then
+            echo "::warning::The issuer's registration dialect for $VERSION failed its check."
+            exit 0
+          fi
+          echo "What changes against the dialect in the tree:"
+          git diff --no-index -- server/src/nest/service-identity/registration-dialect.ts "$FILE" || true
+          echo "ok=true" >> "$GITHUB_OUTPUT"
+
+      - name: Install the toolchain
+        if: steps.check.outputs.ok == 'true'
+        timeout-minutes: 8
+        run: |
+          npm ci --ignore-scripts --no-audit --no-fund
+          npm run build --workspace=shared
+
+      # The bump commit skips CI, so this is where the module meets the strict
+      # config (lint:strict lets a new file have no strict errors) and ESLint
+      # with --max-warnings 0 (lint:warnings starts a new file at none) before
+      # it lands on main.
+      - name: Type-check and lint the dialect
+        id: types
+        if: steps.check.outputs.ok == 'true'
+        timeout-minutes: 5
+        working-directory: server
+        env:
+          FILE: ${{ steps.fetch.outputs.file }}
+          VERSION: ${{ inputs.version }}
+        run: |
+          set -uo pipefail
+          cp "$FILE" src/nest/service-identity/registration-dialect.ts
+          # TypeScript 6 includes no @types by default and the dialect imports nothing
+          # from node, so checked on its own it would not know Buffer: name node here.
+          printf '%s\n' '{"extends": "./tsconfig.strict.json", "compilerOptions": {"types": ["node"]}, "include": [],' \
+            '"files": ["src/nest/service-identity/registration-dialect.ts"]}' > tsconfig.dialect-check.json
+          if ! npx tsc -p tsconfig.dialect-check.json --noEmit --pretty false; then
+            echo "::warning::The issuer's registration dialect for $VERSION does not type-check under the strict config."
+            exit 0
+          fi
+          if ! npx eslint --max-warnings 0 src/nest/service-identity/registration-dialect.ts; then
+            echo "::warning::The issuer's registration dialect for $VERSION does not pass ESLint."
+            exit 0
+          fi
+          echo "ok=true" >> "$GITHUB_OUTPUT"
+
+      - name: Hand the dialect on
+        if: steps.types.outputs.ok == 'true'
+        uses: actions/upload-artifact@v6
+        with:
+          name: registration-dialect
+          path: ${{ steps.fetch.outputs.file }}
+          if-no-files-found: error
+          retention-days: 1

.github/workflows/test.yml

@@ -1202,7 +1202,7 @@ jobs:
           docker stop -t 30 trek-ci >/dev/null
           code="$(docker inspect -f '{{.State.ExitCode}}' trek-ci)"
           [ "$code" = "0" ] || { echo "::error::docker stop ended with exit code $code, not a graceful shutdown"; exit 1; }
-          docker logs trek-ci 2>&1 | grep -q 'SIGTERM received' \
+          docker logs trek-ci 2>&1 | grep 'SIGTERM received' >/dev/null \
             || { echo "::error::the server never saw SIGTERM"; exit 1; }
 
       - name: Container log
@@ -1263,11 +1263,31 @@ jobs:
             --set 'extraEnv[0].name=SESSION_DURATION' \
             --set 'extraEnv[0].value=7d' \
             --set 'extraEnvFrom[0].secretRef.name=trek-smtp' \
+            --set 'extraVolumes[0].name=kitinerary-extractors' \
+            --set 'extraVolumes[0].configMap.name=trek-kitinerary-extractors' \
+            --set 'extraVolumeMounts[0].name=kitinerary-extractors' \
+            --set 'extraVolumeMounts[0].mountPath=/usr/local/share/kitinerary/extractors' \
+            --set 'extraVolumeMounts[0].readOnly=true' \
             --set probes.liveness=null \
             > "$out/variants.yaml"
+          helm template trek charts/trek \
+            --set httpRoute.enabled=true \
+            --set 'httpRoute.parentRefs[0].name=gateway' \
+            > "$out/http-route.yaml"
+          helm template trek charts/trek \
+            --set ingress.enabled=true \
+            --set fullnameOverride=custom-trek \
+            --set service.port=8080 \
+            --set-json 'httpRoute={"enabled":true,"parentRefs":[{"name":"gateway","namespace":"gateway-system","sectionName":"https"}],"hostnames":["trek.example.com"],"paths":["/","/api"],"annotations":{"example.com/note":"custom route"},"timeouts":{"request":"0s","backendRequest":"0s"}}' \
+            > "$out/http-route-variants.yaml"
 
       - name: Check the manifests against the Kubernetes schemas
-        run: kubeconform -strict -summary "$RUNNER_TEMP"/rendered/*.yaml
+        # The pinned Gateway API schema adds HTTPRoute validation without skipping unknown resources.
+        run: >-
+          kubeconform -strict -summary
+          -schema-location default
+          -schema-location 'https://raw.githubusercontent.com/datreeio/CRDs-catalog/041baf4c1d3740ca21461cab765e7432ecd073ef/{{.Group}}/{{.ResourceKind}}_{{.ResourceAPIVersion}}.json'
+          "$RUNNER_TEMP"/rendered/*.yaml
 
       - name: Check every compose file
         run: |

Dockerfile

@@ -91,7 +91,8 @@ ENV KITINERARY_EXTRACTOR_PATH=/usr/local/bin/kitinerary-extractor
 
 COPY --chown=node:node --from=server-builder /app/server/dist ./server/dist
 # Runtime data assets read from server/assets at runtime: airports.json (flight
-# transport search) and atlas/*.geojson.gz (Atlas country/region map). The build
+# transport search) and atlas/*.geojson.gz + atlas/admin1/*.geojson.gz (Atlas
+# country/region map). The build
 # only emits dist, so these must be copied explicitly or the features silently
 # degrade to empty in the image.
 COPY --chown=node:node --from=server-builder /app/server/assets ./server/assets

NOTICE.md

@@ -5,8 +5,9 @@ TREK bundles and uses third-party data that requires attribution.
 ## geoBoundaries — country & sub-national boundaries
 
 The Atlas map's administrative boundaries (admin-0 countries and admin-1
-provinces/counties), shipped at `server/assets/atlas/admin0.geojson.gz` and
-`server/assets/atlas/admin1.geojson.gz` and generated by
+provinces/counties), shipped at `server/assets/atlas/admin0.geojson.gz`,
+`server/assets/atlas/admin1.geojson.gz` and `server/assets/atlas/admin1/<ISO_A2>.geojson.gz`
+(the same regions, one file per country) and generated by
 `server/scripts/build-atlas-geo.mjs`, are derived from **geoBoundaries**.
 
 > Runfola, D. et al. (2020) geoBoundaries: A global database of political

README.md

@@ -6,14 +6,9 @@
   <img src="docs/logo-trek-dark.svg" alt="TREK" height="96" />
 </picture>
 
-<br />
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="docs/subtitle-light.png" />
-  <source media="(prefers-color-scheme: light)" srcset="docs/subtitle-dark.png" />
-  <img src="docs/subtitle-dark.png" alt="your trip. your plan." height="28" />
-</picture>
+### Every part of your trip. One app you own.
 
-A self-hosted, real-time collaborative travel planner — with maps, budgets, packing lists, a journal, and AI built in.
+TREK has grown from a travel planner into a whole ecosystem for trips: plan together in real time on a live map, build hikes, tours and road trips, keep bookings and shared costs in order, pack, write the journal, lay out the photo book and hand the busy work to the built-in AI. Self-hosted, on the web, on your phone and offline.
 
 <br />
 
@@ -32,11 +27,16 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 <a href="https://ko-fi.com/mauriceboe"><img alt="Ko-fi" src="https://img.shields.io/badge/Ko--fi-support-FF5E5B?style=for-the-badge" /></a>
 &nbsp;
 <a href="https://www.buymeacoffee.com/mauriceboe"><img alt="BMAC" src="https://img.shields.io/badge/BMAC-support-FFDD00?style=for-the-badge" /></a>
-<br />
-<a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-AGPL_v3-6B7280?style=flat-square" /></a>
-<a href="https://github.com/liketrek/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/liketrek/trek?include_prereleases&style=flat-square&color=6B7280" /></a>
-<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/mauriceboe/trek?style=flat-square&color=6B7280" /></a>
-<a href="https://github.com/liketrek/TREK"><img alt="Stars" src="https://img.shields.io/github/stars/liketrek/trek?style=flat-square&color=6B7280" /></a>
+&nbsp;
+<a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/License-AGPL_v3-6B7280?style=for-the-badge" /></a>
+&nbsp;
+<a href="https://github.com/liketrek/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/liketrek/trek?include_prereleases&style=for-the-badge&label=Release&color=6B7280" /></a>
+&nbsp;
+<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/mauriceboe/trek?style=for-the-badge&label=Docker%20pulls&color=6B7280" /></a>
+&nbsp;
+<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>
 </div>
 
 ---
@@ -200,7 +200,7 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu
 - **Admin panel**: users and the permission matrix, defaults for new users, categories and templates, addons, plugins, storage, notifications, MCP tokens, backups, audit log and releases
 - **Backups and storage**: scheduled backups with retention that restore their own secrets, and local or S3-compatible storage per content category with replicas
 - **Appearance**: light, dark or follow the OS, seven colour schemes plus a custom accent, transparency, density, reduced motion and text size
-- **27 languages**: en, de, es, fr, it, nl, hu, ru, zh, zh-TW, pl, cs, ar (right to left), br, id, tr, ja, ko, uk, gr, sv, vi, ca, az, et, sk, th
+- **28 languages**: en, de, es, fr, it, nl, hu, ru, zh, zh-TW, pl, cs, ar (right to left), he (right to left), br, id, tr, ja, ko, uk, gr, sv, vi, ca, az, et, sk, th
 - **Help center**: a ? in the top bar with 381 step-by-step guides with screenshots, searched together with the wiki that ships in the image
 
 </td>
@@ -214,7 +214,39 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu
 <div align="center">
   <a href="docs/screenshots/showcase-desktop-1.webp"><img src="docs/screenshots/showcase-desktop-1.webp" alt="Atlas · dashboard · trip planner" width="100%" /></a>
   <a href="docs/screenshots/showcase-mobile.webp"><img src="docs/screenshots/showcase-mobile.webp" alt="Mobile PWA · dashboard, day plan, map, costs" width="100%" /></a>
-  <a href="docs/screenshots/showcase-desktop-2.webp"><img src="docs/screenshots/showcase-desktop-2.webp" alt="Collections · journey journal · costs" width="100%" /></a>
+</div>
+
+<br />
+
+## Powered by dataforest cloud
+
+<div align="center">
+
+<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="60" />
+  </picture>
+</a>
+
+<br />
+<br />
+
+**Every TREK installation in the world searches through servers that dataforest cloud 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.
+
+Thank you, dataforest, 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>
+
+Looking for a server for your own TREK? dataforest cloud is where TREK's own services live.
+
 </div>
 
 <br />
@@ -244,6 +276,9 @@ 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.
+
 <div align="center">
 
 <a href="#docker-compose-production">Docker Compose</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#helm-kubernetes">Helm / Kubernetes</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#install-as-app-pwa">Install as PWA</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#reverse-proxy">Reverse Proxy</a>
@@ -398,16 +433,6 @@ Caddy handles TLS and WebSockets automatically.
 Every variable, its default and what it does: see
 [Environment Variables](https://github.com/liketrek/TREK/wiki/Environment-Variables).
 
-## Star History
-
-<a href="https://www.star-history.com/?repos=liketrek%2FTREK&type=date&legend=bottom-right">
- <picture>
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=liketrek/TREK&type=date&theme=dark&legend=bottom-right&sealed_token=tW9agibKugOyPk0yPURgSdnizM7K72zbJENGD9iyk24ZcwYHtCUn-hk9jh1gdacO0O7xJ3Io7LaNrwYD3mChzcpzZIqDC8_HevYG1qnT0XNTmN6Ez4UZrQ" />
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=liketrek/TREK&type=date&legend=bottom-right&sealed_token=tW9agibKugOyPk0yPURgSdnizM7K72zbJENGD9iyk24ZcwYHtCUn-hk9jh1gdacO0O7xJ3Io7LaNrwYD3mChzcpzZIqDC8_HevYG1qnT0XNTmN6Ez4UZrQ" />
-   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=liketrek/TREK&type=date&legend=bottom-right&sealed_token=tW9agibKugOyPk0yPURgSdnizM7K72zbJENGD9iyk24ZcwYHtCUn-hk9jh1gdacO0O7xJ3Io7LaNrwYD3mChzcpzZIqDC8_HevYG1qnT0XNTmN6Ez4UZrQ" />
- </picture>
-</a>
-
 ## Data sources
 
 The Atlas map's country and sub-national (province/county) boundaries come from

charts/README.md

@@ -5,9 +5,10 @@ This is a minimal Helm chart for deploying the TREK app.
 ## Features
 - Deploys the TREK container
 - Exposes port 3000 via Service
-- Optional persistent storage for `/app/data` and `/app/uploads`
+- Optional persistent storage for `/app/data` and `/app/uploads`, plus extra volumes and mounts
 - Configurable environment variables and secrets
 - Optional generic Ingress support
+- Optional Gateway API HTTPRoute support
 - Configurable health checks (liveness/readiness probes) on `/api/health`
 
 ## Helm Repository
@@ -27,7 +28,7 @@ helm install trek trek/trek
 Or install directly from the local chart:
 
 ```sh
-helm install trek ./chart \
+helm install trek ./charts/trek \
   --set ingress.enabled=true \
   --set ingress.hosts[0].host=yourdomain.com
 ```
@@ -47,7 +48,7 @@ See `values.yaml` for more options.
 - `JWT_SECRET` is managed entirely by the server — auto-generated into the data PVC on first start and rotatable via the admin panel (Settings → Danger Zone). No Helm configuration needed.
 - `ENCRYPTION_KEY` encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest. Recommended: set via `secretEnv.ENCRYPTION_KEY` or `existingSecret`. If left empty, the server falls back automatically: existing installs use `data/.jwt_secret` (no action needed on upgrade); fresh installs auto-generate a key persisted to the data PVC.
 - Liveness and readiness probes are configurable under `probes`. Overrides are merged over the defaults, so `--set probes.liveness.initialDelaySeconds=60` keeps the `httpGet` handler. When switching to `exec` or `tcpSocket`, clear `httpGet` in the same override. Set `probes.liveness: null` to remove a probe.
-- If using ingress, you must manually keep `env.ALLOWED_ORIGINS` and `ingress.hosts` in sync to ensure CORS works correctly. The chart does not sync these automatically.
+- If exposing TREK through an Ingress or HTTPRoute, set `env.ALLOWED_ORIGINS` and `env.APP_URL` to the public URL. The chart does not sync these automatically.
 - Set `env.ALLOW_INTERNAL_NETWORK: "true"` if Immich or other integrated services are hosted on a private/RFC-1918 address (e.g. a pod on the same cluster or a NAS on your LAN). Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) remain blocked regardless.
 - Set `env.ALLOW_LINK_LOCAL_IPS` to a single link-local address (e.g. `"169.254.1.2"`) only when a service TREK needs sits behind one, such as a host gateway. Cloud metadata addresses (`169.254.169.x`, `169.254.170.x`) cannot be listed.
 - `FORCE_HTTPS` is optional. Set `env.FORCE_HTTPS: "true"` only when ingress (or another proxy) terminates TLS. It enables HTTPS redirects, HSTS, CSP `upgrade-insecure-requests`, and forces the session cookie `secure` flag. Requires `TRUST_PROXY` to be set.
@@ -55,3 +56,4 @@ 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.
+- 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/Chart.yaml

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

charts/trek/templates/NOTES.txt

@@ -31,3 +31,12 @@
      The other values for that volume (size, storageClassName, annotations) are then ignored.
    - With `persistence.enabled=false` the volumes use an emptyDir — storage is ephemeral and is lost
      when the pod restarts. Use only for testing.
+{{- if .Values.httpRoute.enabled }}
+
+6. HTTPRoute:
+   - The chart creates an HTTPRoute v1 to the existing TREK Service. The Gateway, GatewayClass,
+     listeners, TLS certificates and allowedRoutes are managed by your cluster operator.
+   - Ingress and HTTPRoute may be enabled together.
+   - Timeout fields are Standard Channel in Gateway API v1.2, but controller support varies. Omit
+     them to use controller defaults; `0s` disables the corresponding timeout where supported.
+{{- end }}

charts/trek/templates/configmap.yaml

@@ -112,6 +112,21 @@ data:
   {{- if .Values.env.TREK_PLACES_URL }}
   TREK_PLACES_URL: {{ .Values.env.TREK_PLACES_URL | quote }}
   {{- end }}
+  {{- if .Values.env.TREK_PLACES_CONTRIBUTE }}
+  TREK_PLACES_CONTRIBUTE: {{ .Values.env.TREK_PLACES_CONTRIBUTE | quote }}
+  {{- end }}
+  {{- if .Values.env.TREK_SERVICES }}
+  TREK_SERVICES: {{ .Values.env.TREK_SERVICES | quote }}
+  {{- end }}
+  {{- if .Values.env.TREK_SERVICES_HOSTS }}
+  TREK_SERVICES_HOSTS: {{ .Values.env.TREK_SERVICES_HOSTS | quote }}
+  {{- end }}
+  {{- if .Values.env.TREK_PHOTON_URL }}
+  TREK_PHOTON_URL: {{ .Values.env.TREK_PHOTON_URL | quote }}
+  {{- end }}
+  {{- if .Values.env.TREK_VALHALLA_URL }}
+  TREK_VALHALLA_URL: {{ .Values.env.TREK_VALHALLA_URL | quote }}
+  {{- end }}
   {{- if .Values.env.GOOGLE_LIST_DATA_BASE }}
   GOOGLE_LIST_DATA_BASE: {{ .Values.env.GOOGLE_LIST_DATA_BASE | quote }}
   {{- end }}

charts/trek/templates/deployment.yaml

@@ -85,6 +85,12 @@ spec:
                   name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
                   key: PLACES_API_KEY
                   optional: true
+            - name: TREK_SERVICES_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
+                  key: TREK_SERVICES_KEY
+                  optional: true
             - name: AMAP_API_KEY
               valueFrom:
                 secretKeyRef:
@@ -135,6 +141,9 @@ spec:
               mountPath: /app/data
             - name: uploads
               mountPath: /app/uploads
+            {{- with .Values.extraVolumeMounts }}
+            {{- toYaml . | nindent 12 }}
+            {{- end }}
           {{- with (default dict .Values.probes).startup }}
           startupProbe:
             {{- toYaml . | nindent 12 }}
@@ -162,3 +171,6 @@ spec:
           {{- else }}
           emptyDir: {}
           {{- end }}
+        {{- with .Values.extraVolumes }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}

charts/trek/templates/httproute.yaml

@@ -0,0 +1,39 @@
+{{- if .Values.httpRoute.enabled -}}
+{{- if not .Values.httpRoute.parentRefs }}
+{{- fail "httpRoute.parentRefs must include at least one parent" }}
+{{- end }}
+{{- if not .Values.httpRoute.paths }}
+{{- fail "httpRoute.paths must include at least one path" }}
+{{- end }}
+apiVersion: gateway.networking.k8s.io/v1
+kind: HTTPRoute
+metadata:
+  name: {{ include "trek.fullname" . }}
+  labels:
+    app: {{ include "trek.name" . }}
+  {{- with .Values.httpRoute.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  parentRefs:
+    {{- toYaml .Values.httpRoute.parentRefs | nindent 4 }}
+  {{- with .Values.httpRoute.hostnames }}
+  hostnames:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+  rules:
+    {{- range $path := .Values.httpRoute.paths }}
+    - matches:
+        - path:
+            type: PathPrefix
+            value: {{ $path | quote }}
+      backendRefs:
+        - name: {{ include "trek.fullname" $ }}
+          port: {{ $.Values.service.port }}
+      {{- with $.Values.httpRoute.timeouts }}
+      timeouts:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+    {{- end }}
+{{- end }}

charts/trek/templates/secret.yaml

@@ -23,6 +23,9 @@ data:
   {{- if .Values.secretEnv.PLACES_API_KEY }}
   PLACES_API_KEY: {{ .Values.secretEnv.PLACES_API_KEY | b64enc | quote }}
   {{- end }}
+  {{- if .Values.secretEnv.TREK_SERVICES_KEY }}
+  TREK_SERVICES_KEY: {{ .Values.secretEnv.TREK_SERVICES_KEY | b64enc | quote }}
+  {{- end }}
   {{- if .Values.secretEnv.AMAP_API_KEY }}
   AMAP_API_KEY: {{ .Values.secretEnv.AMAP_API_KEY | b64enc | quote }}
   {{- end }}
@@ -77,6 +80,9 @@ stringData:
   {{- if .Values.secretEnv.PLACES_API_KEY }}
   PLACES_API_KEY: {{ .Values.secretEnv.PLACES_API_KEY | quote }}
   {{- end }}
+  {{- if .Values.secretEnv.TREK_SERVICES_KEY }}
+  TREK_SERVICES_KEY: {{ .Values.secretEnv.TREK_SERVICES_KEY | quote }}
+  {{- end }}
   {{- if .Values.secretEnv.AMAP_API_KEY }}
   AMAP_API_KEY: {{ .Values.secretEnv.AMAP_API_KEY | quote }}
   {{- end }}

charts/trek/values.yaml

@@ -36,7 +36,7 @@ env:
   # Browser/OS language is auto-detected first; this is the fallback when no match is found.
   # Supported: ar, az, br, ca, cs, de, en, es, et, fr, gr, hu, id, it, ja, ko, nl, pl, ru, sk, sv, th, tr, uk, vi, zh, zh-TW
   # ALLOWED_ORIGINS: ""
-  # NOTE: If using ingress, ensure env.ALLOWED_ORIGINS matches the domains in ingress.hosts for proper CORS configuration.
+  # NOTE: If using ingress or HTTPRoute, ensure env.ALLOWED_ORIGINS matches the public domains for proper CORS configuration.
   # APP_URL: "https://trek.example.com"
   # Public base URL of this instance. Required when OIDC is enabled — must match the redirect URI registered with your IdP.
   # Also used as the base URL for links in email notifications and other external links.
@@ -92,7 +92,8 @@ env:
   # Custom Nominatim base URL for every geocoding call the server makes (place search, reverse lookup, Atlas region
   # fill). When set it REPLACES the public OpenStreetMap service, with no fallback, so the instance behind it needs
   # the coverage you expect and has to speak the Nominatim API. TREK keeps its ~1 request per second spacing either
-  # way. Defaults to https://nominatim.openstreetmap.org.
+  # way, and search and reverse lookups no longer go to the TREK services' Photon. Defaults to
+  # https://nominatim.openstreetmap.org.
   # OVERPASS_URL: ""
   # Custom Overpass endpoint(s) for the map POI "explore" search, comma-separated. When set, REPLACES the bundled
   # public mirrors — point it at an internal/self-hosted Overpass instance when the public mirrors are unreachable
@@ -112,6 +113,24 @@ env:
   # Base URL of a copy of the Places API you run yourself; it has to answer the same /v1 API. Read from
   # configuration rather than typed by a user, so an in-cluster address works without ALLOW_INTERNAL_NETWORK.
   # Defaults to https://places.liketrek.com.
+  # TREK_PLACES_CONTRIBUTE: "off"
+  # Whether an admin may let this installation send the place details its users typed in (website, phone, e-mail,
+  # opening hours, description, picture) to the TREK Places API. "admin" leaves the choice to the admin panel, where
+  # it stays off until an admin agrees; "off" takes it away. Defaults to admin.
+  # TREK_SERVICES: "off"
+  # Places search identifies this installation with a key it registers by itself on first use and keeps in the
+  # database. "off" sends no key; searches then use the shared pool. A key issued to you goes under
+  # secretEnv.TREK_SERVICES_KEY. Defaults to auto.
+  # TREK_SERVICES_HOSTS: ""
+  # Comma-separated hosts that receive the installation key over https. Defaults to
+  # places.liketrek.com,photon.liketrek.com,valhalla.liketrek.com.
+  # TREK_PHOTON_URL: ""
+  # The address search (Photon) of the TREK services. With a key, search and reverse lookups ask it before
+  # Nominatim and fall back to Nominatim when it does not answer. Never asked when NOMINATIM_URL is set.
+  # Defaults to https://photon.liketrek.com.
+  # TREK_VALHALLA_URL: ""
+  # The Valhalla of the TREK services, which this server relays routing to unless the admin picks another
+  # routing service. The browser never talks to it. Defaults to https://valhalla.liketrek.com.
   # AMAP_API_BASE: ""
   # Send the Amap (高德地图) calls through an egress proxy, a cache or a gateway that speaks the same API instead of
   # restapi.amap.com directly. The key itself is a credential and goes under secretEnv.AMAP_API_KEY, or into
@@ -164,6 +183,9 @@ secretEnv:
   # with signing enabled, because such a key rejects every unsigned request. Leave empty
   # otherwise. The endpoint itself is not a secret and is set under env.AMAP_API_BASE.
   AMAP_API_SECRET: ""
+  # Optional key issued for this installation by the TREK services. Wins over the key TREK
+  # registers by itself and turns that registration off. Leave empty to let TREK register.
+  TREK_SERVICES_KEY: ""
   # Optional Web Push key pair, private half (base64url, 32 bytes). Only used together with
   # env.VAPID_PUBLIC_KEY; a pair whose halves do not belong together, or only one half, turns
   # push off with an error in the log until it is fixed, and every device stays registered.
@@ -179,7 +201,7 @@ generateEncryptionKey: false
 # If set, the chart renders no Secret of its own and instead reads every secret env
 # var from this existing Kubernetes secret. Expected keys: ENCRYPTION_KEY (rename via
 # existingSecretKey), ADMIN_EMAIL, ADMIN_PASSWORD, OIDC_CLIENT_SECRET,
-# UNSPLASH_ACCESS_KEY, PLACES_API_KEY, AMAP_API_KEY, AMAP_API_SECRET,
+# UNSPLASH_ACCESS_KEY, PLACES_API_KEY, AMAP_API_KEY, AMAP_API_SECRET, TREK_SERVICES_KEY,
 # VAPID_PRIVATE_KEY, SMTP_PASS, MAPBOX_ACCESS_TOKEN, CARTO_API_KEY, DEMO_ADMIN_PASS.
 # Missing keys are simply left unset (they are optional), so only provide the ones your
 # setup needs.
@@ -242,6 +264,20 @@ extraEnv: []
 #         name: trek-smtp
 extraEnvFrom: []
 
+# Further volumes for the pod. The chart does not create the objects they name.
+#   extraVolumes:
+#     - name: kitinerary-extractors
+#       configMap:
+#         name: trek-kitinerary-extractors
+extraVolumes: []
+# Where the trek container mounts them. For example, KItinerary
+# loads extractors for the booking import from this path:
+#   extraVolumeMounts:
+#     - name: kitinerary-extractors
+#       mountPath: /usr/local/share/kitinerary/extractors
+#       readOnly: true
+extraVolumeMounts: []
+
 resources:
   requests:
     cpu: 100m
@@ -262,3 +298,20 @@ ingress:
   #  - secretName: chart-example-tls
   #    hosts:
   #      - chart-example.local
+
+httpRoute:
+  enabled: false
+  annotations: {}
+  parentRefs: []
+  #   - name: gateway
+  #     namespace: gateway-system
+  #     sectionName: https
+  hostnames: []
+  #   - trek.example.com
+  paths:
+    - /
+  # Timeout fields are Standard Channel in Gateway API v1.2; controller support varies.
+  # Leave empty for controller defaults. Use "0s" to disable the corresponding timeout.
+  timeouts: {}
+  #   request: "0s"
+  #   backendRequest: "0s"

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trek/client",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "engines": {
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },

client/public/brands/dataforest-cloud-dark.svg

@@ -0,0 +1,23 @@
+<svg width="310" height="48" viewBox="0 0 310 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.9361 44.5592H37.3496V40.5946H38.7949C39.6016 40.5946 40.1393 40.0905 40.1393 38.9477V32.7663C40.1393 30.1462 41.3157 28.7345 43.4989 28.0302C41.3157 27.3243 40.1393 25.9142 40.1393 23.2941V17.1127C40.1393 15.9699 39.6016 15.4673 38.7949 15.4673H37.3496V11.5027H39.9361C42.8252 11.5027 44.8403 13.2825 44.8403 16.1059V22.5898C44.8403 24.8738 46.2184 26.0166 48.5696 26.0166V30.0484C46.2184 30.0484 44.8403 31.1912 44.8403 33.4752V39.9591C44.8403 42.7809 42.8252 44.5607 39.9361 44.5607V44.5592Z" fill="white"/>
+<path d="M0 30.0453V26.0135C2.35125 26.0135 3.72931 24.8708 3.72931 22.5867V16.1028C3.72931 13.281 5.74445 11.4996 8.63347 11.4996H11.22V15.4642H9.77472C8.96806 15.4642 8.43028 15.9684 8.43028 17.1096V23.291C8.43028 25.9112 7.25389 27.3228 5.07069 28.0271C7.25389 28.733 8.43028 30.1431 8.43028 32.7633V38.9446C8.43028 40.0874 8.96806 40.5916 9.77472 40.5916H11.22V44.5562H8.63347C5.74445 44.5562 3.72931 42.7763 3.72931 39.9545V33.4706C3.72931 31.1866 2.35125 30.0438 0 30.0438V30.0453Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2855 0.076416L32.7769 8.5678L28.8169 12.5263L24.284 7.99336L19.7511 12.5263L15.7926 8.5678L24.284 0.076416H24.2855Z" fill="#02C382"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2855 11.7119L34.4055 21.8319L30.4471 25.7904L24.2855 19.6289L18.124 25.7904L14.1655 21.8319L24.2855 11.7119Z" fill="#02C382"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2856 23.3475L36.0342 35.0961L32.0757 39.0561L24.2871 31.2675L16.4985 39.0561L12.54 35.0961L24.2887 23.3475H24.2856Z" fill="#02C382"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4867 47.8958V37.3129H27.086V47.8958H21.4867Z" fill="white"/>
+<path d="M216.808 36.4329H211.635V23.9357H208.444V19.635H211.635V14.4283H216.808V19.635H220V23.9357H216.808V36.4329Z" fill="white"/>
+<path d="M192.671 31.1239H197.575C197.643 32.3003 198.516 33.0046 200.095 33.0046C201.673 33.0046 202.446 32.4332 202.446 31.5593C202.446 31.0552 202.177 30.5174 200.933 30.2485L197.843 29.5763C194.752 28.904 193.241 27.5611 193.241 24.6049C193.241 21.1108 196.231 19.0957 200.263 19.0957C204.294 19.0957 206.881 21.3797 206.881 24.7729H201.977C201.977 23.6302 201.271 22.8586 200.029 22.8586C198.853 22.8586 198.115 23.4636 198.115 24.3711C198.115 25.1442 198.753 25.5811 199.928 25.85L203.052 26.5222C205.807 27.1272 207.319 28.4029 207.319 31.0918C207.319 34.6867 204.262 36.8699 199.894 36.8699C195.527 36.8699 192.671 34.5186 192.671 31.1254V31.1239Z" fill="white"/>
+<path d="M182.351 36.8699C177.279 36.8699 173.65 33.1742 173.65 28.0011C173.65 22.8281 177.178 19.0988 182.25 19.0988C187.322 19.0988 190.816 22.5592 190.816 28.0347V29.3456L178.622 29.4128C178.924 31.6296 180.168 32.6715 182.452 32.6715C184.4 32.6715 185.778 31.9657 186.147 30.7572H190.884C190.279 34.4865 186.953 36.8714 182.351 36.8714V36.8699ZM182.284 23.2971C180.235 23.2971 179.092 24.2046 178.689 26.2197H185.677C185.677 24.4383 184.366 23.2971 182.284 23.2971Z" fill="white"/>
+<path d="M172.433 19.6351V24.5056H170.787C167.831 24.5056 166.051 25.8164 166.051 29.1424V36.433H160.878V19.6687H165.749L166.017 22.1544C166.723 20.5074 168.201 19.3998 170.453 19.3998C171.058 19.3998 171.728 19.467 172.434 19.6351H172.433Z" fill="white"/>
+<path d="M139.367 28.0011C139.367 22.6936 143.264 19.1323 148.639 19.1323C154.014 19.1323 157.878 22.6936 157.878 28.0011C157.878 33.3086 153.98 36.8362 148.639 36.8362C143.298 36.8362 139.367 33.3086 139.367 28.0011ZM144.574 27.9675C144.574 30.5204 146.219 32.2009 148.639 32.2009C151.059 32.2009 152.671 30.5219 152.671 27.9675C152.671 25.413 151.025 23.7676 148.639 23.7676C146.253 23.7676 144.574 25.4466 144.574 27.9675Z" fill="white"/>
+<path d="M126.917 19.635H129.235V18.2906C129.235 13.2856 131.855 11.1008 136.122 11.1008C136.828 11.1008 137.634 11.1681 138.44 11.3025V15.7376H136.994C134.878 15.7376 134.408 16.8468 134.408 18.2906V19.635H138.44V23.9357H134.408V36.4329H129.235V23.9357H126.917V19.635Z" fill="white"/>
+<path d="M114.606 36.8699C111.045 36.8699 108.828 34.7875 108.828 31.4951C108.828 28.4045 111.011 26.4901 115.043 26.1876L119.746 25.8179V25.549C119.746 23.9021 118.737 23.0297 116.89 23.0297C114.707 23.0297 113.531 23.87 113.531 25.381H109.23C109.23 21.5844 112.354 19.0988 117.158 19.0988C121.961 19.0988 124.783 21.8197 124.783 26.6246V36.4344H120.215L119.879 34.2176C119.341 35.7622 117.124 36.8714 114.605 36.8714L114.606 36.8699ZM116.42 33.0397C118.401 33.0397 119.779 32.065 119.779 30.1507V29.2432L117.159 29.4785C114.909 29.6801 114.102 30.1843 114.102 31.2583C114.102 32.4683 114.842 33.0382 116.42 33.0382V33.0397Z" fill="white"/>
+<path d="M104.017 36.4329H98.8441V23.9357H95.6526V19.635H98.8441V14.4283H104.017V19.635H107.209V23.9357H104.017V36.4329Z" fill="white"/>
+<path d="M83.5052 36.8699C79.944 36.8699 77.7272 34.7875 77.7272 31.4951C77.7272 28.4045 79.9104 26.4901 83.9422 26.1876L88.6462 25.8179V25.549C88.6462 23.9021 87.6379 23.0297 85.7908 23.0297C83.6076 23.0297 82.4312 23.87 82.4312 25.381H78.1305C78.1305 21.5844 81.2548 19.0988 86.0581 19.0988C90.8615 19.0988 93.6833 21.8197 93.6833 26.6246V36.4344H89.1137L88.7776 34.2176C88.2398 35.7622 86.023 36.8714 83.5037 36.8714L83.5052 36.8699ZM85.3187 33.0397C87.3002 33.0397 88.6783 32.065 88.6783 30.1507V29.2432L86.0581 29.4785C83.8077 29.6801 83.0011 30.1843 83.0011 31.2583C83.0011 32.4683 83.7405 33.0382 85.3187 33.0382V33.0397Z" fill="white"/>
+<path d="M63.9986 36.8699C59.1617 36.8699 56.0374 33.4431 56.0374 28.1356C56.0374 22.8281 59.2289 19.0988 64.3347 19.0988C66.4171 19.0988 68.4001 19.9391 69.3733 21.1812V11.1024H74.5464V36.433H69.6758L69.4069 34.2834C68.4994 35.828 66.4171 36.8699 63.9986 36.8699ZM65.2407 32.1323C67.6592 32.1323 69.3397 30.4533 69.3397 27.9324C69.3397 25.4116 67.6607 23.7326 65.2407 23.7326C62.8207 23.7326 61.2425 25.4452 61.2425 27.9324C61.2425 30.4196 62.7871 32.1323 65.2407 32.1323Z" fill="white"/>
+<path d="M228.377 28.3024C228.377 26.6 228.702 25.1104 229.351 23.8336C230.023 22.5344 230.942 21.5264 232.107 20.8096C233.294 20.0704 234.671 19.7008 236.239 19.7008C238.121 19.7008 239.7 20.2048 240.977 21.2128C242.276 22.2208 243.083 23.5648 243.396 25.2448H241.078C240.764 24.1248 240.171 23.2624 239.297 22.6576C238.423 22.0528 237.415 21.7504 236.273 21.7504C235.198 21.7504 234.235 22.0192 233.383 22.5568C232.532 23.0944 231.86 23.856 231.367 24.8416C230.897 25.8048 230.662 26.9472 230.662 28.2688C230.662 29.568 230.886 30.6992 231.334 31.6624C231.782 32.6256 232.409 33.376 233.215 33.9136C234.044 34.4512 235.007 34.72 236.105 34.72C237.337 34.72 238.401 34.4176 239.297 33.8128C240.193 33.1856 240.798 32.3456 241.111 31.2928H243.463C243.217 32.3904 242.747 33.3536 242.052 34.1824C241.358 35.0112 240.495 35.6608 239.465 36.1312C238.457 36.5792 237.337 36.8032 236.105 36.8032C234.559 36.8032 233.204 36.456 232.039 35.7616C230.897 35.0448 230.001 34.048 229.351 32.7712C228.702 31.4944 228.377 30.0048 228.377 28.3024Z" fill="white"/>
+<path d="M249.395 36.4H247.076V11.9056H249.395V36.4Z" fill="white"/>
+<path d="M253.183 28.2688C253.183 26.5888 253.542 25.1104 254.258 23.8336C254.975 22.5568 255.961 21.5488 257.215 20.8096C258.47 20.0704 259.881 19.7008 261.449 19.7008C263.039 19.7008 264.45 20.0704 265.682 20.8096C266.937 21.5488 267.922 22.5568 268.639 23.8336C269.356 25.1104 269.714 26.5888 269.714 28.2688C269.714 29.904 269.356 31.3712 268.639 32.6704C267.922 33.9472 266.937 34.9552 265.682 35.6944C264.45 36.4336 263.039 36.8032 261.449 36.8032C259.881 36.8032 258.47 36.4336 257.215 35.6944C255.961 34.9552 254.975 33.9472 254.258 32.6704C253.542 31.3712 253.183 29.904 253.183 28.2688ZM255.535 28.2352C255.535 29.512 255.782 30.6432 256.274 31.6288C256.79 32.592 257.484 33.3536 258.358 33.9136C259.254 34.4512 260.284 34.72 261.449 34.72C262.614 34.72 263.633 34.4512 264.506 33.9136C265.402 33.3536 266.097 32.592 266.59 31.6288C267.105 30.6432 267.362 29.512 267.362 28.2352C267.362 26.9808 267.105 25.872 266.59 24.9088C266.097 23.9456 265.402 23.184 264.506 22.624C263.633 22.064 262.614 21.784 261.449 21.784C260.284 21.784 259.254 22.064 258.358 22.624C257.484 23.184 256.79 23.9456 256.274 24.9088C255.782 25.872 255.535 26.9808 255.535 28.2352Z" fill="white"/>
+<path d="M284.453 20.1376H286.771V36.4H284.755L284.453 33.6448C284.005 34.5856 283.254 35.3472 282.202 35.9296C281.171 36.512 280.018 36.8032 278.741 36.8032C276.837 36.8032 275.37 36.1984 274.339 34.9888C273.331 33.7792 272.827 32.1888 272.827 30.2176V20.104H275.179V29.4784C275.179 31.4048 275.571 32.76 276.355 33.544C277.162 34.328 278.203 34.72 279.48 34.72C281.048 34.72 282.269 34.216 283.142 33.208C284.016 32.1776 284.453 30.6992 284.453 28.7728V20.1376Z" fill="white"/>
+<path d="M297.656 36.8032C296.088 36.8032 294.744 36.4336 293.624 35.6944C292.504 34.9552 291.642 33.9472 291.037 32.6704C290.432 31.3712 290.13 29.9152 290.13 28.3024C290.13 26.6672 290.432 25.2 291.037 23.9008C291.642 22.6016 292.504 21.5824 293.624 20.8432C294.767 20.0816 296.144 19.7008 297.757 19.7008C299.101 19.7008 300.288 19.992 301.319 20.5744C302.372 21.1568 303.178 22.0416 303.738 23.2288V11.9056H306.056V36.4H304.04L303.805 33.0736C303.223 34.328 302.394 35.2688 301.319 35.896C300.244 36.5008 299.023 36.8032 297.656 36.8032ZM298.06 34.6864C299.269 34.6864 300.288 34.4176 301.117 33.88C301.946 33.32 302.584 32.5584 303.032 31.5952C303.48 30.6096 303.704 29.4896 303.704 28.2352C303.704 26.9808 303.48 25.872 303.032 24.9088C302.584 23.9456 301.946 23.184 301.117 22.624C300.288 22.064 299.269 21.784 298.06 21.784C296.895 21.784 295.887 22.064 295.036 22.624C294.207 23.184 293.568 23.9456 293.12 24.9088C292.695 25.872 292.482 26.9808 292.482 28.2352C292.482 29.4896 292.695 30.6096 293.12 31.5952C293.568 32.5584 294.207 33.32 295.036 33.88C295.887 34.4176 296.895 34.6864 298.06 34.6864Z" fill="white"/>
+</svg>

client/public/brands/dataforest-cloud.svg

@@ -0,0 +1,23 @@
+<svg width="258" height="40" viewBox="0 0 258 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.28 37.1326H31.1245V33.8288H32.3289C33.0011 33.8288 33.4493 33.4087 33.4493 32.4564V27.3052C33.4493 25.1218 34.4296 23.9454 36.2489 23.3584C34.4296 22.7703 33.4493 21.5951 33.4493 19.4117V14.2605C33.4493 13.3082 33.0011 12.8894 32.3289 12.8894H31.1245V9.58553H33.28C35.6875 9.58553 37.3668 11.0688 37.3668 13.4215V18.8248C37.3668 20.7281 38.5151 21.6804 40.4745 21.6804V25.0403C38.5151 25.0403 37.3668 25.9926 37.3668 27.896V33.2992C37.3668 35.6507 35.6875 37.1339 33.28 37.1339V37.1326Z" fill="#1E302D"/>
+<path d="M0 25.0377V21.6779C1.95937 21.6779 3.10775 20.7256 3.10775 18.8222V13.419C3.10775 11.0675 4.78704 9.58298 7.19456 9.58298H9.35V12.8868H8.1456C7.47338 12.8868 7.02523 13.3069 7.02523 14.258V19.4091C7.02523 21.5926 6.04491 22.769 4.22558 23.3559C6.04491 23.9441 7.02523 25.1192 7.02523 27.3027V32.4538C7.02523 33.4061 7.47338 33.8263 8.1456 33.8263H9.35V37.1301H7.19456C4.78704 37.1301 3.10775 35.6469 3.10775 33.2954V27.8921C3.10775 25.9888 1.95937 25.0365 0 25.0365V25.0377Z" fill="#1E302D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.2381 0.063694L27.3142 7.13985L24.0142 10.4386L20.2368 6.66115L16.4594 10.4386L13.1606 7.13985L20.2368 0.063694H20.2381Z" fill="#02C382"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.238 9.75996L28.6714 18.1933L25.3726 21.492L20.238 16.3574L15.1034 21.492L11.8047 18.1933L20.238 9.75996Z" fill="#02C382"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.2382 19.4563L30.0287 29.2468L26.7299 32.5468L20.2394 26.0562L13.7489 32.5468L10.4502 29.2468L20.2407 19.4563H20.2382Z" fill="#02C382"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9058 39.9132V31.0941H22.5718V39.9132H17.9058Z" fill="#1E302D"/>
+<path d="M180.674 30.3608H176.363V19.9464H173.703V16.3625H176.363V12.0236H180.674V16.3625H183.333V19.9464H180.674V30.3608Z" fill="#1E302D"/>
+<path d="M160.559 25.9366H164.646C164.702 26.9169 165.43 27.5038 166.745 27.5038C168.06 27.5038 168.705 27.0277 168.705 26.2994C168.705 25.8793 168.481 25.4311 167.444 25.2071L164.869 24.6469C162.293 24.0867 161.034 22.9676 161.034 20.5041C161.034 17.5924 163.526 15.9131 166.885 15.9131C170.245 15.9131 172.401 17.8164 172.401 20.6441H168.314C168.314 19.6918 167.726 19.0488 166.691 19.0488C165.71 19.0488 165.095 19.553 165.095 20.3093C165.095 20.9535 165.627 21.3176 166.607 21.5417L169.21 22.1019C171.506 22.606 172.766 23.6691 172.766 25.9098C172.766 28.9056 170.218 30.7249 166.579 30.7249C162.939 30.7249 160.559 28.7655 160.559 25.9378V25.9366Z" fill="#1E302D"/>
+<path d="M151.959 30.7249C147.732 30.7249 144.708 27.6451 144.708 23.3343C144.708 19.0234 147.648 15.9156 151.875 15.9156C156.102 15.9156 159.014 18.7993 159.014 23.3623V24.4546L148.851 24.5107C149.103 26.358 150.14 27.2263 152.043 27.2263C153.666 27.2263 154.815 26.6381 155.123 25.631H159.07C158.565 28.7388 155.794 30.7262 151.959 30.7262V30.7249ZM151.903 19.4142C150.196 19.4142 149.243 20.1705 148.907 21.8498H154.731C154.731 20.3653 153.638 19.4142 151.903 19.4142Z" fill="#1E302D"/>
+<path d="M143.694 16.3625V20.4213H142.323C139.859 20.4213 138.376 21.5137 138.376 24.2853V30.3608H134.065V16.3905H138.124L138.348 18.4619C138.936 17.0895 140.167 16.1664 142.044 16.1664C142.548 16.1664 143.107 16.2225 143.695 16.3625H143.694Z" fill="#1E302D"/>
+<path d="M116.139 23.3343C116.139 18.9113 119.387 15.9436 123.866 15.9436C128.345 15.9436 131.565 18.9113 131.565 23.3343C131.565 27.7572 128.317 30.6969 123.866 30.6969C119.415 30.6969 116.139 27.7572 116.139 23.3343ZM120.478 23.3062C120.478 25.4337 121.849 26.8341 123.866 26.8341C125.883 26.8341 127.226 25.435 127.226 23.3062C127.226 21.1775 125.855 19.8064 123.866 19.8064C121.877 19.8064 120.478 21.2056 120.478 23.3062Z" fill="#1E302D"/>
+<path d="M105.764 16.3625H107.696V15.2421C107.696 11.0713 109.879 9.2507 113.435 9.2507C114.023 9.2507 114.695 9.30672 115.366 9.41875V13.1147H114.162C112.399 13.1147 112.006 14.039 112.006 15.2421V16.3625H115.366V19.9464H112.006V30.3608H107.696V19.9464H105.764V16.3625Z" fill="#1E302D"/>
+<path d="M95.505 30.7249C92.5373 30.7249 90.6899 28.9896 90.6899 26.246C90.6899 23.6704 92.5093 22.0751 95.8691 21.823L99.7879 21.5149V21.2909C99.7879 19.9184 98.9476 19.1914 97.4083 19.1914C95.589 19.1914 94.6087 19.8917 94.6087 21.1508H91.0248C91.0248 17.987 93.6284 15.9156 97.6311 15.9156C101.634 15.9156 103.985 18.1831 103.985 22.1872V30.362H100.179L99.8986 28.5147C99.4505 29.8019 97.6031 30.7262 95.5037 30.7262L95.505 30.7249ZM97.0162 27.5331C98.6675 27.5331 99.8159 26.7208 99.8159 25.1256V24.3693L97.6324 24.5654C95.7571 24.7335 95.0848 25.1536 95.0848 26.0486C95.0848 27.0569 95.7011 27.5318 97.0162 27.5318V27.5331Z" fill="#1E302D"/>
+<path d="M86.6809 30.3608H82.37V19.9464H79.7104V16.3625H82.37V12.0236H86.6809V16.3625H89.3405V19.9464H86.6809V30.3608Z" fill="#1E302D"/>
+<path d="M69.5875 30.7249C66.6198 30.7249 64.7725 28.9896 64.7725 26.246C64.7725 23.6704 66.5918 22.0751 69.9516 21.823L73.8716 21.5149V21.2909C73.8716 19.9184 73.0314 19.1914 71.4921 19.1914C69.6728 19.1914 68.6925 19.8917 68.6925 21.1508H65.1086C65.1086 17.987 67.7122 15.9156 71.7149 15.9156C75.7177 15.9156 78.0692 18.1831 78.0692 22.1872V30.362H74.2612L73.9811 28.5147C73.533 29.8019 71.6857 30.7262 69.5862 30.7262L69.5875 30.7249ZM71.0987 27.5331C72.75 27.5331 73.8984 26.7208 73.8984 25.1256V24.3693L71.7149 24.5654C69.8396 24.7335 69.1674 25.1536 69.1674 26.0486C69.1674 27.0569 69.7836 27.5318 71.0987 27.5318V27.5331Z" fill="#1E302D"/>
+<path d="M53.3321 30.7249C49.3013 30.7249 46.6978 27.8692 46.6978 23.4463C46.6978 19.0234 49.3574 15.9156 53.6122 15.9156C55.3475 15.9156 57.0001 16.6159 57.8111 17.6509V9.25197H62.1219V30.3608H58.0631L57.8391 28.5695C57.0828 29.8566 55.3475 30.7249 53.3321 30.7249ZM54.3672 26.7769C56.3826 26.7769 57.7831 25.3777 57.7831 23.277C57.7831 21.1763 56.3839 19.7771 54.3672 19.7771C52.3505 19.7771 51.0354 21.2043 51.0354 23.277C51.0354 25.3497 52.3225 26.7769 54.3672 26.7769Z" fill="#1E302D"/>
+<path d="M190.314 23.5854C190.314 22.1667 190.585 20.9254 191.126 19.8614C191.686 18.7787 192.451 17.9387 193.422 17.3414C194.411 16.7254 195.559 16.4174 196.866 16.4174C198.434 16.4174 199.75 16.8374 200.814 17.6774C201.897 18.5174 202.569 19.6374 202.83 21.0374H200.898C200.637 20.104 200.142 19.3854 199.414 18.8814C198.686 18.3774 197.846 18.1254 196.894 18.1254C195.998 18.1254 195.195 18.3494 194.486 18.7974C193.777 19.2454 193.217 19.88 192.806 20.7014C192.414 21.504 192.218 22.456 192.218 23.5574C192.218 24.64 192.405 25.5827 192.778 26.3854C193.151 27.188 193.674 27.8134 194.346 28.2614C195.037 28.7094 195.839 28.9334 196.754 28.9334C197.781 28.9334 198.667 28.6814 199.414 28.1774C200.161 27.6547 200.665 26.9547 200.926 26.0774H202.886C202.681 26.992 202.289 27.7947 201.71 28.4854C201.131 29.176 200.413 29.7174 199.554 30.1094C198.714 30.4827 197.781 30.6694 196.754 30.6694C195.466 30.6694 194.337 30.38 193.366 29.8014C192.414 29.204 191.667 28.3734 191.126 27.3094C190.585 26.2454 190.314 25.004 190.314 23.5854Z" fill="#1E302D"/>
+<path d="M207.829 30.3334H205.897V9.92135H207.829V30.3334Z" fill="#1E302D"/>
+<path d="M210.986 23.5574C210.986 22.1574 211.285 20.9254 211.882 19.8614C212.479 18.7974 213.301 17.9574 214.346 17.3414C215.391 16.7254 216.567 16.4174 217.874 16.4174C219.199 16.4174 220.375 16.7254 221.402 17.3414C222.447 17.9574 223.269 18.7974 223.866 19.8614C224.463 20.9254 224.762 22.1574 224.762 23.5574C224.762 24.92 224.463 26.1427 223.866 27.2254C223.269 28.2894 222.447 29.1294 221.402 29.7454C220.375 30.3614 219.199 30.6694 217.874 30.6694C216.567 30.6694 215.391 30.3614 214.346 29.7454C213.301 29.1294 212.479 28.2894 211.882 27.2254C211.285 26.1427 210.986 24.92 210.986 23.5574ZM212.946 23.5294C212.946 24.5934 213.151 25.536 213.562 26.3574C213.991 27.16 214.57 27.7947 215.298 28.2614C216.045 28.7094 216.903 28.9334 217.874 28.9334C218.845 28.9334 219.694 28.7094 220.422 28.2614C221.169 27.7947 221.747 27.16 222.158 26.3574C222.587 25.536 222.802 24.5934 222.802 23.5294C222.802 22.484 222.587 21.56 222.158 20.7574C221.747 19.9547 221.169 19.32 220.422 18.8534C219.694 18.3867 218.845 18.1534 217.874 18.1534C216.903 18.1534 216.045 18.3867 215.298 18.8534C214.57 19.32 213.991 19.9547 213.562 20.7574C213.151 21.56 212.946 22.484 212.946 23.5294Z" fill="#1E302D"/>
+<path d="M237.044 16.7814H238.976V30.3334H237.296L237.044 28.0374C236.67 28.8214 236.045 29.456 235.168 29.9414C234.309 30.4267 233.348 30.6694 232.284 30.6694C230.697 30.6694 229.474 30.1654 228.616 29.1574C227.776 28.1494 227.356 26.824 227.356 25.1814V16.7534H229.316V24.5654C229.316 26.1707 229.642 27.3 230.296 27.9534C230.968 28.6067 231.836 28.9334 232.9 28.9334C234.206 28.9334 235.224 28.5134 235.952 27.6734C236.68 26.8147 237.044 25.5827 237.044 23.9774V16.7814Z" fill="#1E302D"/>
+<path d="M248.047 30.6694C246.74 30.6694 245.62 30.3614 244.687 29.7454C243.754 29.1294 243.035 28.2894 242.531 27.2254C242.027 26.1427 241.775 24.9294 241.775 23.5854C241.775 22.2227 242.027 21 242.531 19.9174C243.035 18.8347 243.754 17.9854 244.687 17.3694C245.639 16.7347 246.787 16.4174 248.131 16.4174C249.251 16.4174 250.24 16.66 251.099 17.1454C251.976 17.6307 252.648 18.368 253.115 19.3574V9.92135H255.047V30.3334H253.367L253.171 27.5614C252.686 28.6067 251.995 29.3907 251.099 29.9134C250.203 30.4174 249.186 30.6694 248.047 30.6694ZM248.383 28.9054C249.391 28.9054 250.24 28.6814 250.931 28.2334C251.622 27.7667 252.154 27.132 252.527 26.3294C252.9 25.508 253.087 24.5747 253.087 23.5294C253.087 22.484 252.9 21.56 252.527 20.7574C252.154 19.9547 251.622 19.32 250.931 18.8534C250.24 18.3867 249.391 18.1534 248.383 18.1534C247.412 18.1534 246.572 18.3867 245.863 18.8534C245.172 19.32 244.64 19.9547 244.267 20.7574C243.912 21.56 243.735 22.484 243.735 23.5294C243.735 24.5747 243.912 25.508 244.267 26.3294C244.64 27.132 245.172 27.7667 245.863 28.2334C246.572 28.6814 247.412 28.9054 248.383 28.9054Z" fill="#1E302D"/>
+</svg>

client/scripts/eslint-baseline.json

@@ -1,15 +1,15 @@
 {
   "src": {
-    "@typescript-eslint/no-non-null-assertion": 382,
-    "@typescript-eslint/no-misused-promises": 849,
+    "@typescript-eslint/no-non-null-assertion": 380,
+    "@typescript-eslint/no-misused-promises": 847,
     "no-console": 88,
-    "complexity": 220,
-    "@typescript-eslint/no-explicit-any": 146,
-    "trek/no-swallowed-catch": 130,
+    "complexity": 218,
+    "@typescript-eslint/no-explicit-any": 144,
+    "trek/no-swallowed-catch": 128,
     "max-params": 32,
     "trek/store-without-selector": 67,
     "react-hooks/refs": 555,
-    "react-hooks/set-state-in-effect": 194,
+    "react-hooks/set-state-in-effect": 193,
     "@typescript-eslint/no-floating-promises": 164,
     "react-hooks/exhaustive-deps": 116,
     "@typescript-eslint/no-unused-vars": 124,
@@ -30,16 +30,16 @@
     "no-useless-escape": 1
   },
   "suppressed": {
-    "@typescript-eslint/no-explicit-any": 40,
+    "@typescript-eslint/no-explicit-any": 38,
     "react-hooks/exhaustive-deps": 46
   },
   "tests": {
     "@typescript-eslint/no-explicit-any": 490,
-    "@typescript-eslint/no-non-null-assertion": 1927,
+    "@typescript-eslint/no-non-null-assertion": 1915,
     "@typescript-eslint/no-misused-promises": 22,
     "@typescript-eslint/no-unused-vars": 51,
     "@typescript-eslint/no-floating-promises": 33,
-    "trek/no-window-globals": 331,
+    "trek/no-window-globals": 325,
     "trek/no-swallowed-catch": 14,
     "react-hooks/globals": 5,
     "react-hooks/refs": 22,

client/scripts/feature-pairs.json

@@ -130,6 +130,15 @@
         "src/mobile/screens/trip/sheets/MTransportFormSheet.tsx"
       ]
     },
+    {
+      "feature": "Booking save follow-up: travellers and files before the editor closes",
+      "hooks": ["src/components/Planner/useBookingFollowUp.ts"],
+      "desktop": ["src/components/Planner/ReservationModal.tsx", "src/components/Planner/TransportModal.tsx"],
+      "mobile": [
+        "src/mobile/screens/trip/sheets/MReservationSheet.tsx",
+        "src/mobile/screens/trip/sheets/MTransportFormSheet.tsx"
+      ]
+    },
     {
       "feature": "Bookings and transports lists",
       "hooks": ["src/components/Planner/bookings/bookingsModel.ts"],

client/scripts/format-baseline.json

@@ -899,7 +899,6 @@
   "src/components/Roadtrip/useVehicleRange.test.ts",
   "src/components/Roadtrip/useVehicleRange.ts",
   "src/components/Roadtrip/vehicleRange.ts",
-  "src/components/Settings/AboutTab.tsx",
   "src/components/Settings/AccountTab.test.tsx",
   "src/components/Settings/AccountTab.tsx",
   "src/components/Settings/AirTrailConnectionSection.test.tsx",
@@ -991,9 +990,6 @@
   "src/components/Studio/useBookPresence.ts",
   "src/components/Studio/useBookStore.ts",
   "src/components/Studio/useSpreadInteraction.ts",
-  "src/components/SystemNotices/ReleaseNoticeModal.test.tsx",
-  "src/components/SystemNotices/ReleaseNoticeModal.tsx",
-  "src/components/SystemNotices/ReleaseNoticeVisuals.tsx",
   "src/components/SystemNotices/SystemNoticeBanner.extra.test.tsx",
   "src/components/SystemNotices/SystemNoticeBanner.test.tsx",
   "src/components/SystemNotices/SystemNoticeBanner.tsx",

client/scripts/size-baseline.json

@@ -7,14 +7,12 @@
   "src/components/Budget/CostsPanel.tsx": 1798,
   "src/components/Map/MapView.tsx": 1385,
   "src/components/Map/MapViewGL.test.tsx": 2919,
-  "src/components/Map/MapViewGL.tsx": 2290,
-  "src/components/Map/RouteCalculator.ts": 1063,
-  "src/components/PDF/TripPDF.tsx": 1082,
+  "src/components/Map/MapViewGL.tsx": 2218,
+  "src/components/PDF/TripPDF.tsx": 1039,
   "src/components/Planner/DayDetailPanel.test.tsx": 2333,
   "src/components/Planner/DayPlanSidebar.test.tsx": 5349,
   "src/components/Planner/DayPlanSidebar.tsx": 2936,
   "src/components/Planner/PlaceFormModal.test.tsx": 2836,
-  "src/components/Planner/PlaceFormModal.tsx": 1157,
   "src/components/Planner/PlaceInspector.tsx": 1290,
   "src/components/Studio/TravelElements.tsx": 1559,
   "src/components/Studio/countryShapes.ts": 2595,
@@ -23,7 +21,7 @@
   "src/pages/JourneyDetailPage.test.tsx": 4030,
   "src/pages/LoginPage.tsx": 1348,
   "src/pages/TripPlannerPage.tsx": 1128,
-  "src/pages/atlas/useAtlas.ts": 1211,
+  "src/pages/atlas/useAtlas.ts": 1210,
   "src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx": 3518,
   "src/pages/tripPlanner/useTripPlanner.test.tsx": 3270,
   "src/styles/studio.css": 1918

client/scripts/theme-disable-baseline.json

@@ -35,7 +35,7 @@
   "components/Roadtrip/dayColors.ts": 8,
   "components/Roadtrip/nightBookend.ts": 1,
   "components/Roadtrip/stopKinds.ts": 1,
-  "components/Settings/AboutTab.tsx": 3,
+  "components/Settings/AboutTab.tsx": 5,
   "components/Settings/AccountTab.tsx": 2,
   "components/Settings/AppearanceSettingsTab.tsx": 1,
   "components/Settings/PasskeysSection.tsx": 1,

client/src/api/placeContrib.ts

@@ -0,0 +1,14 @@
+import type { PlaceContribDecisionRequest, PlaceContribLogQuery } from '@trek/shared';
+import apiClient from './client';
+
+/** /api/admin/places-contribute: sharing place details with the TREK Places API. Admin only. */
+export const placeContribApi = {
+  state: (signal?: AbortSignal): Promise<unknown> =>
+    apiClient.get('/admin/places-contribute', { signal }).then((r) => r.data),
+  decide: (body: PlaceContribDecisionRequest): Promise<unknown> =>
+    apiClient.put('/admin/places-contribute/decision', body).then((r) => r.data),
+  log: (query: Partial<PlaceContribLogQuery>, signal?: AbortSignal): Promise<unknown> =>
+    apiClient.get('/admin/places-contribute/log', { params: query, signal }).then((r) => r.data),
+  withdraw: (): Promise<unknown> =>
+    apiClient.post('/admin/places-contribute/withdraw', { confirm: true }).then((r) => r.data),
+};

client/src/api/rateLimitMessage.ts

@@ -22,6 +22,7 @@ const RATE_LIMIT_MESSAGES: Record<string, string> = {
   tr: 'Çok fazla deneme. Lütfen daha sonra tekrar deneyin.',
   ar: 'محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.',
   az: 'Həddindən çox cəhd edildi. Bir az sonra yenidən cəhd edin.',
+  he: 'יותר מדי ניסיונות. נסו שוב מאוחר יותר.',
   id: 'Terlalu banyak percobaan. Coba lagi nanti.',
   ja: '試行回数が多すぎます。時間をおいて再度お試しください。',
   ko: '시도 횟수가 너무 많습니다. 잠시 후 다시 시도해 주세요.',

client/src/api/serviceIdentity.ts

@@ -0,0 +1,8 @@
+import apiClient from './client';
+
+/** /api/admin/service-identity: how this installation stands with the TREK services. Admin only. */
+export const serviceIdentityApi = {
+  status: (signal?: AbortSignal): Promise<unknown> =>
+    apiClient.get('/admin/service-identity', { signal }).then((r) => r.data),
+  regenerate: (): Promise<unknown> => apiClient.post('/admin/service-identity/regenerate').then((r) => r.data),
+};

client/src/api/valhallaRelay.ts

@@ -0,0 +1,19 @@
+import type { ValhallaRelayAction } from '@trek/shared';
+
+/**
+ * POST /api/routing/valhalla/:action: a question for the TREK services'
+ * Valhalla, which this server asks with the installation key. The answer is
+ * Valhalla's own, its status included, so it is handed back as a Response and
+ * read like the answer of any other Valhalla. Plain fetch on purpose: the
+ * shared client would turn a 401 into a sign-in redirect and a 429 into a
+ * toast, where the planner only wants to ask FOSSGIS instead.
+ */
+export function postValhallaRelay(action: ValhallaRelayAction, body: unknown, signal?: AbortSignal): Promise<Response> {
+  return fetch(`/api/routing/valhalla/${action}`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+    signal,
+  });
+}

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

@@ -0,0 +1,80 @@
+// FE-ADMIN-CONTRIB-LOG-001 to FE-ADMIN-CONTRIB-LOG-004
+import userEvent from '@testing-library/user-event';
+import type { PlaceContribLogEntry } from '@trek/shared';
+import { http, HttpResponse } from 'msw';
+import { describe, expect, it, vi } from 'vitest';
+import { server } from '../../../tests/helpers/msw/server';
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import PlaceContribLog from './PlaceContribLog';
+
+vi.mock('../../i18n', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('../../i18n')>()),
+  useTranslation: () => ({ t: (key: string) => key, locale: 'en-US' }),
+}));
+
+const ENTRY: PlaceContribLogEntry = {
+  id: 1,
+  day: '2026-10-29',
+  key: 'osm:n123',
+  placeName: 'Café Luitpold',
+  field: 'phone',
+  valueSummary: '+49 89 242 8750',
+  result: 'accepted',
+  reason: null,
+};
+
+function serve(entries: PlaceContribLogEntry[], total = entries.length) {
+  const queries: URLSearchParams[] = [];
+  server.use(
+    http.get('/api/admin/places-contribute/log', ({ request }) => {
+      queries.push(new URL(request.url).searchParams);
+      return HttpResponse.json({
+        entries,
+        total,
+        page: Number(new URL(request.url).searchParams.get('page') ?? 1),
+        perPage: 20,
+      });
+    })
+  );
+  return queries;
+}
+
+describe('PlaceContribLog', () => {
+  it('FE-ADMIN-CONTRIB-LOG-001: lists the place, the value, the field and the result', async () => {
+    serve([ENTRY]);
+    render(<PlaceContribLog />);
+    expect(await screen.findByText('Café Luitpold')).toBeInTheDocument();
+    expect(screen.getByText('+49 89 242 8750')).toBeInTheDocument();
+    expect(screen.getByText('admin.contribute.field.phone')).toBeInTheDocument();
+    expect(screen.getByText('admin.contribute.result.accepted')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-CONTRIB-LOG-002: an empty log says nothing was sent', async () => {
+    serve([]);
+    render(<PlaceContribLog />);
+    expect(await screen.findByText('admin.contribute.log.empty')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-CONTRIB-LOG-003: pages through a long log', async () => {
+    const queries = serve([ENTRY], 45);
+    render(<PlaceContribLog />);
+    await userEvent.click(await screen.findByRole('button', { name: /common\.showMore/ }));
+    expect(await screen.findByText('1 / 3')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'admin.contribute.log.next' }));
+    await waitFor(() => expect(queries[queries.length - 1]?.get('page')).toBe('2'));
+    expect(queries[queries.length - 1]?.get('perPage')).toBe('20');
+  });
+
+  it('FE-ADMIN-CONTRIB-LOG-004: shows the newest five until the list is opened', async () => {
+    serve(Array.from({ length: 8 }, (_, i) => ({ ...ENTRY, id: i + 1, placeName: `Place ${i + 1}` })));
+    render(<PlaceContribLog />);
+    expect(await screen.findByText('Place 5')).toBeInTheDocument();
+    expect(screen.queryByText('Place 6')).not.toBeInTheDocument();
+    const toggle = screen.getByRole('button', { name: 'common.showMore (3)' });
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await userEvent.click(toggle);
+    expect(screen.getByText('Place 8')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'common.showLess' }));
+    expect(screen.queryByText('Place 8')).not.toBeInTheDocument();
+  });
+});

client/src/components/Admin/PlaceContribLog.tsx

@@ -0,0 +1,187 @@
+import {
+  PLACE_CONTRIB_FIELDS,
+  type PlaceContribField,
+  type PlaceContribLogResponse,
+  type PlaceContribLogResult,
+} from '@trek/shared';
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from '../../i18n';
+import { placeContribRepo } from '../../repo/placeContribRepo';
+import { PillSelect } from '../shared/dialogParts';
+import { fs } from '../shared/DialogShell';
+import { fieldLabel } from './placeContribModel';
+
+const PER_PAGE = 20;
+/** Rows shown before the list is opened; a busy log should not push the page down. */
+const FOLDED = 5;
+const RESULTS: PlaceContribLogResult[] = ['accepted', 'duplicate', 'rejected', 'withheld', 'retracted'];
+const RESULT_LOOK: Record<PlaceContribLogResult, string> = {
+  accepted: 'bg-success-soft text-success',
+  duplicate: 'bg-surface-tertiary text-content-muted',
+  rejected: 'bg-danger-soft text-danger',
+  withheld: 'bg-surface-tertiary text-content-muted',
+  retracted: 'bg-warning-soft text-warning',
+};
+
+/**
+ * What this installation sent, newest first: the place, the field, a short
+ * form of the value and what the service made of it. Read only while the fold
+ * is open, a page at a time, and only the newest FOLDED rows until opened.
+ */
+export default function PlaceContribLog() {
+  const { t, locale } = useTranslation();
+  const [page, setPage] = useState(1);
+  const [result, setResult] = useState<PlaceContribLogResult | 'all'>('all');
+  const [field, setField] = useState<PlaceContribField | 'all'>('all');
+  const [data, setData] = useState<PlaceContribLogResponse | null>(null);
+  const [open, setOpen] = useState(false);
+  // The query that failed to load, so a new page or filter clears the message by itself.
+  const query = `${page}|${result}|${field}`;
+  const [failedQuery, setFailedQuery] = useState<string | null>(null);
+  const failed = failedQuery === query;
+
+  useEffect(() => {
+    const controller = new AbortController();
+    placeContribRepo
+      .log(
+        {
+          page,
+          perPage: PER_PAGE,
+          ...(result === 'all' ? {} : { result }),
+          ...(field === 'all' ? {} : { field }),
+        },
+        controller.signal
+      )
+      .then(setData, () => {
+        if (!controller.signal.aborted) setFailedQuery(`${page}|${result}|${field}`);
+      });
+    return () => controller.abort();
+  }, [page, result, field]);
+
+  const pages = data ? Math.max(1, Math.ceil(data.total / PER_PAGE)) : 1;
+  const foldable = !!data && (data.entries.length > FOLDED || pages > 1);
+  const rows = data ? (open || !foldable ? data.entries : data.entries.slice(0, FOLDED)) : [];
+  const day = new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short' });
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div className="flex flex-wrap gap-2">
+        <PillSelect<PlaceContribLogResult | 'all'>
+          quiet
+          label={t('admin.contribute.log.result')}
+          value={result}
+          onChange={(v) => {
+            setResult(v);
+            setPage(1);
+          }}
+          options={[
+            { value: 'all', label: t('admin.contribute.log.allResults') },
+            ...RESULTS.map((r) => ({ value: r, label: t(`admin.contribute.result.${r}`) })),
+          ]}
+        />
+        <PillSelect<PlaceContribField | 'all'>
+          quiet
+          label={t('admin.contribute.log.field')}
+          value={field}
+          onChange={(v) => {
+            setField(v);
+            setPage(1);
+          }}
+          options={[
+            { value: 'all', label: t('admin.contribute.log.allFields') },
+            ...PLACE_CONTRIB_FIELDS.map((f) => ({ value: f, label: fieldLabel(t, f) })),
+          ]}
+        />
+      </div>
+
+      {failed && (
+        <p className="m-0 text-danger" style={fs(12, 'body')}>
+          {t('admin.contribute.log.failed')}
+        </p>
+      )}
+      {data && data.entries.length === 0 && (
+        <p className="m-0 py-3 text-center text-content-faint" style={fs(12, 'body')}>
+          {t('admin.contribute.log.empty')}
+        </p>
+      )}
+      {data && data.entries.length > 0 && (
+        <ul className="m-0 list-none divide-y divide-edge-faint overflow-hidden rounded-[12px] border border-edge-faint bg-surface-card p-0">
+          {rows.map((e) => (
+            <li key={e.id} className="flex flex-wrap items-center gap-x-2.5 gap-y-1 px-3 py-2">
+              <span className="w-12 flex-none tabular-nums text-content-faint" style={fs(11.5)}>
+                {day.format(new Date(`${e.day}T12:00:00`))}
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block truncate font-medium text-content" style={fs(12.5, 'body')}>
+                  {e.placeName}
+                </span>
+                {e.valueSummary && (
+                  <span className="block truncate text-content-muted" style={fs(11.5)}>
+                    {e.valueSummary}
+                  </span>
+                )}
+              </span>
+              <span
+                className="inline-flex flex-none items-center rounded-full bg-surface-secondary px-2 py-[2px] text-content-secondary"
+                style={fs(11)}
+              >
+                {fieldLabel(t, e.field)}
+              </span>
+              <span
+                className={`inline-flex flex-none items-center rounded-full px-2 py-[2px] font-semibold ${RESULT_LOOK[e.result]}`}
+                style={fs(11)}
+                title={e.reason ?? undefined}
+              >
+                {t(`admin.contribute.result.${e.result}`)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {foldable && (
+        <button
+          type="button"
+          aria-expanded={open}
+          onClick={() => setOpen((o) => !o)}
+          className="inline-flex items-center gap-1 self-start font-medium text-content-muted hover:text-content"
+          style={fs(12, 'body')}
+        >
+          <ChevronDown
+            size={14}
+            aria-hidden="true"
+            className={open ? 'rotate-180 transition-transform' : 'transition-transform'}
+          />
+          {open ? t('common.showLess') : `${t('common.showMore')} (${(data?.total ?? 0) - FOLDED})`}
+        </button>
+      )}
+
+      {data && open && pages > 1 && (
+        <div className="flex items-center justify-end gap-2 text-content-muted" style={fs(12, 'body')}>
+          <button
+            type="button"
+            disabled={page <= 1}
+            onClick={() => setPage((p) => p - 1)}
+            aria-label={t('admin.contribute.log.previous')}
+            className="grid h-7 w-7 place-items-center rounded-lg border border-edge-faint bg-surface-card disabled:opacity-40"
+          >
+            <ChevronLeft size={14} aria-hidden="true" />
+          </button>
+          <span className="tabular-nums">
+            {page} / {pages}
+          </span>
+          <button
+            type="button"
+            disabled={page >= pages}
+            onClick={() => setPage((p) => p + 1)}
+            aria-label={t('admin.contribute.log.next')}
+            className="grid h-7 w-7 place-items-center rounded-lg border border-edge-faint bg-surface-card disabled:opacity-40"
+          >
+            <ChevronRight size={14} aria-hidden="true" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,204 @@
+// FE-ADMIN-CONTRIB-001 to FE-ADMIN-CONTRIB-011
+import userEvent from '@testing-library/user-event';
+import type { PlaceContribDecisionRequest, PlaceContribState } from '@trek/shared';
+import { http, HttpResponse } from 'msw';
+import { describe, expect, it, vi } from 'vitest';
+import { server } from '../../../tests/helpers/msw/server';
+import { render, screen, waitFor, within } from '../../../tests/helpers/render';
+import PlaceContribPanel from './PlaceContribPanel';
+
+// The keys themselves, so a test fails on a missing or renamed key rather than on wording.
+vi.mock('../../i18n', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('../../i18n')>()),
+  useTranslation: () => ({ t: (key: string) => key, locale: 'en-US' }),
+}));
+
+const ON = { website: true, phone: true, email: true, opening_hours: true, description: true, image: true };
+
+const UNDECIDED: PlaceContribState = {
+  termsVersion: 1,
+  ceiling: 'admin',
+  eligible: true,
+  ineligibleReason: null,
+  consent: { enabled: false, fields: ON, termsVersion: null, decision: null, decidedBy: null, decidedAt: null },
+  showPrompt: true,
+  snoozedUntil: null,
+  active: false,
+  counts: { accepted: 0, duplicate: 0, rejected: 0, withheld: 0, retracted: 0 },
+  lastSuccessDay: null,
+  queue: { size: 0, cap: 5000, full: false },
+  pauseReason: null,
+  registrationOpen: false,
+};
+
+const AGREED: PlaceContribState = {
+  ...UNDECIDED,
+  showPrompt: false,
+  active: true,
+  consent: {
+    enabled: true,
+    fields: ON,
+    termsVersion: 1,
+    decision: 'agreed',
+    decidedBy: 1,
+    decidedAt: '2026-10-30T10:00:00Z',
+  },
+  counts: { accepted: 42, duplicate: 3, rejected: 1, withheld: 5, retracted: 0 },
+  lastSuccessDay: '2026-10-29',
+  queue: { size: 7, cap: 5000, full: false },
+};
+
+/** Serves `state`, records every decision and answers it with `answer`. */
+function serve(
+  state: PlaceContribState,
+  answer: (body: PlaceContribDecisionRequest) => PlaceContribState = () => state
+) {
+  const decisions: PlaceContribDecisionRequest[] = [];
+  server.use(
+    http.get('/api/admin/places-contribute', () => HttpResponse.json(state)),
+    http.put('/api/admin/places-contribute/decision', async ({ request }) => {
+      const body = (await request.json()) as PlaceContribDecisionRequest;
+      decisions.push(body);
+      return HttpResponse.json(answer(body));
+    }),
+    http.get('/api/admin/places-contribute/log', () =>
+      HttpResponse.json({ entries: [], total: 0, page: 1, perPage: 20 })
+    )
+  );
+  return decisions;
+}
+
+describe('PlaceContribPanel', () => {
+  it('FE-ADMIN-CONTRIB-001: an undecided admin gets the prompt with every field switched on', async () => {
+    serve(UNDECIDED);
+    render(<PlaceContribPanel />);
+    const dialog = await screen.findByRole('dialog');
+    expect(within(dialog).getByText('admin.contribute.prompt.title')).toBeInTheDocument();
+    for (const field of Object.keys(ON)) {
+      expect(within(dialog).getByRole('button', { name: `admin.contribute.field.${field}` })).toHaveAttribute(
+        'aria-pressed',
+        'true'
+      );
+    }
+    expect(within(dialog).getByText('admin.contribute.never.notes')).toBeInTheDocument();
+    expect(within(dialog).getByText('admin.contribute.never.providers')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-CONTRIB-002: nothing is decided until a button is pressed, and Agree sends the switches it shows', async () => {
+    const decisions = serve(UNDECIDED, () => AGREED);
+    render(<PlaceContribPanel />);
+    const dialog = await screen.findByRole('dialog');
+    expect(decisions).toHaveLength(0);
+    await userEvent.click(within(dialog).getByRole('button', { name: 'admin.contribute.field.image' }));
+    await userEvent.click(within(dialog).getByRole('button', { name: 'admin.contribute.prompt.agree' }));
+    await waitFor(() => expect(decisions).toHaveLength(1));
+    expect(decisions[0]).toEqual({ action: 'agree', termsVersion: 1, fields: { ...ON, image: false } });
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    expect(screen.getByText('admin.contribute.status.active')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-CONTRIB-003: Agree is unavailable with every field off', async () => {
+    serve(UNDECIDED);
+    render(<PlaceContribPanel />);
+    const dialog = await screen.findByRole('dialog');
+    for (const field of Object.keys(ON)) {
+      await userEvent.click(within(dialog).getByRole('button', { name: `admin.contribute.field.${field}` }));
+    }
+    expect(within(dialog).getByRole('button', { name: 'admin.contribute.prompt.agree' })).toBeDisabled();
+  });
+
+  it('FE-ADMIN-CONTRIB-004: "not now" snoozes and "no" declines for the current terms', async () => {
+    const decisions = serve(UNDECIDED, () => ({ ...UNDECIDED, showPrompt: false }));
+    const { unmount } = render(<PlaceContribPanel />);
+    await userEvent.click(
+      within(await screen.findByRole('dialog')).getByRole('button', { name: 'admin.contribute.prompt.snooze' })
+    );
+    await waitFor(() => expect(decisions).toEqual([{ action: 'snooze' }]));
+    unmount();
+
+    render(<PlaceContribPanel />);
+    await userEvent.click(
+      within(await screen.findByRole('dialog')).getByRole('button', { name: 'admin.contribute.prompt.decline' })
+    );
+    await waitFor(() => expect(decisions[1]).toEqual({ action: 'decline', termsVersion: 1 }));
+  });
+
+  it('FE-ADMIN-CONTRIB-005: closing the prompt decides nothing', async () => {
+    const decisions = serve(UNDECIDED);
+    render(<PlaceContribPanel />);
+    await screen.findByRole('dialog');
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    expect(decisions).toHaveLength(0);
+  });
+
+  it('FE-ADMIN-CONTRIB-006: an agreement shows its figures and a switch per field', async () => {
+    serve(AGREED);
+    render(<PlaceContribPanel />);
+    expect(await screen.findByText('admin.contribute.status.active')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+    expect(screen.getByText('7')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'admin.contribute.field.phone' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    );
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('FE-ADMIN-CONTRIB-007: switching a field off sends the new switches', async () => {
+    const decisions = serve(AGREED);
+    render(<PlaceContribPanel />);
+    await userEvent.click(await screen.findByRole('button', { name: 'admin.contribute.field.description' }));
+    await waitFor(() => expect(decisions).toEqual([{ action: 'fields', fields: { ...ON, description: false } }]));
+  });
+
+  it('FE-ADMIN-CONTRIB-008: the master switch asks before it stops sharing', async () => {
+    const decisions = serve(AGREED, () => ({
+      ...AGREED,
+      active: false,
+      consent: { ...AGREED.consent, enabled: false, decision: 'off' },
+    }));
+    render(<PlaceContribPanel />);
+    await userEvent.click(await screen.findByRole('button', { name: 'admin.contribute.title' }));
+    expect(decisions).toHaveLength(0);
+    await userEvent.click(screen.getByRole('button', { name: 'admin.contribute.offConfirm' }));
+    await waitFor(() => expect(decisions).toEqual([{ action: 'off' }]));
+  });
+
+  it('FE-ADMIN-CONTRIB-009: an installation that cannot share says why and has no prompt', async () => {
+    serve({ ...UNDECIDED, eligible: false, ineligibleReason: 'custom_places_url', showPrompt: false });
+    render(<PlaceContribPanel />);
+    expect(await screen.findByText('admin.contribute.ineligible.custom_places_url')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'admin.contribute.title' })).toBeDisabled();
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('FE-ADMIN-CONTRIB-010: open registration is named in the prompt', async () => {
+    serve({ ...UNDECIDED, registrationOpen: true });
+    render(<PlaceContribPanel />);
+    expect(
+      await within(await screen.findByRole('dialog')).findByText('admin.contribute.prompt.openRegistration')
+    ).toBeInTheDocument();
+  });
+  it('FE-ADMIN-CONTRIB-011: asks again while the key is still being fetched, and the prompt follows', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      let reads = 0;
+      server.use(
+        http.get('/api/admin/places-contribute', () => {
+          reads += 1;
+          return HttpResponse.json(
+            reads === 1 ? { ...UNDECIDED, eligible: false, ineligibleReason: 'no_key', showPrompt: false } : UNDECIDED
+          );
+        })
+      );
+      render(<PlaceContribPanel />);
+      expect(await screen.findByText('admin.contribute.ineligible.no_key')).toBeInTheDocument();
+      await vi.advanceTimersByTimeAsync(3_000);
+      expect(await screen.findByRole('dialog')).toBeInTheDocument();
+      expect(reads).toBe(2);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

client/src/components/Admin/PlaceContribPanel.tsx

@@ -0,0 +1,200 @@
+import type { PlaceContribField, PlaceContribState } from '@trek/shared';
+import { ChevronRight, HeartHandshake, Undo2 } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from '../../i18n';
+import type { TranslationFn } from '../../types';
+import { getApiErrorMessage } from '../../utils/apiError';
+import { SettingsCard, StatusPill } from '../Settings/settingsKit';
+import ToggleSwitch from '../Settings/ToggleSwitch';
+import ConfirmDialog from '../shared/ConfirmDialog';
+import { fs } from '../shared/DialogShell';
+import { useToast } from '../shared/Toast';
+import { FigureBadge } from '../Tours/paddle/FigureBadge';
+import PlaceContribLog from './PlaceContribLog';
+import {
+  contribNote,
+  contribStatus,
+  fieldEntries,
+  fieldLabel,
+  refusalReason,
+  type ContribStatus,
+} from './placeContribModel';
+import PlaceContribPrompt from './PlaceContribPrompt';
+import { usePlaceContrib } from './usePlaceContrib';
+
+const PILL_TONE: Record<ContribStatus, 'success' | 'warning' | 'neutral'> = {
+  active: 'success',
+  paused: 'warning',
+  off: 'neutral',
+  unavailable: 'neutral',
+};
+
+function Figures({ state, t }: { state: PlaceContribState; t: TranslationFn }) {
+  const { locale } = useTranslation();
+  const number = new Intl.NumberFormat(locale);
+  const last = state.lastSuccessDay
+    ? new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short' }).format(
+        new Date(`${state.lastSuccessDay}T12:00:00`)
+      )
+    : t('admin.contribute.never');
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      <FigureBadge
+        label={t('admin.contribute.figure.accepted')}
+        value={number.format(state.counts.accepted)}
+        info={t('admin.contribute.figure.acceptedInfo')}
+      />
+      <FigureBadge
+        label={t('admin.contribute.figure.queue')}
+        value={number.format(state.queue.size)}
+        tone={state.queue.full ? 'warning' : 'neutral'}
+        info={state.queue.full ? t('admin.contribute.figure.queueFull') : undefined}
+      />
+      <FigureBadge label={t('admin.contribute.figure.last')} value={last} />
+    </div>
+  );
+}
+
+/**
+ * Sharing place details with the TREK Places API, inside the TREK API card:
+ * one switch for the installation, one per field, the transmission log and the
+ * 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() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const contrib = usePlaceContrib();
+  const { state } = contrib;
+  const [prompting, setPrompting] = useState<boolean | null>(null);
+  const [confirm, setConfirm] = useState<'off' | 'withdraw' | null>(null);
+
+  if (!state) 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.
+  const showPrompt = prompting ?? state.showPrompt;
+
+  const fail = (err: unknown) => {
+    const reason = refusalReason(err);
+    toast.error(
+      reason === 'terms_outdated' || reason === 'no_field'
+        ? t(`admin.contribute.refused.${reason}`)
+        : getApiErrorMessage(err, t('common.error'))
+    );
+  };
+
+  const toggleField = (field: PlaceContribField) => {
+    const fields = { ...state.consent.fields, [field]: !state.consent.fields[field] };
+    if (!Object.values(fields).some(Boolean)) {
+      setConfirm('off');
+      return;
+    }
+    contrib.decide({ action: 'fields', fields }).catch(fail);
+  };
+
+  const withdraw = () => {
+    setConfirm(null);
+    contrib.withdraw().then((r) => {
+      const total = Object.values(r.withdrawn).reduce((a, b) => a + b, 0);
+      toast.success(t('admin.contribute.withdrawn', { total }));
+    }, fail);
+  };
+
+  return (
+    <SettingsCard
+      flush
+      icon={HeartHandshake}
+      title={t('admin.contribute.title')}
+      badge={<StatusPill tone={PILL_TONE[status]}>{t(`admin.contribute.status.${status}`)}</StatusPill>}
+      hint={contribNote(t, state)}
+      action={
+        <ToggleSwitch
+          on={agreed && state.consent.enabled}
+          label={t('admin.contribute.title')}
+          disabled={!state.eligible || contrib.busy}
+          onToggle={() => (agreed && state.consent.enabled ? setConfirm('off') : setPrompting(true))}
+        />
+      }
+      bodyClassName="flex flex-col gap-3 p-4"
+    >
+      {agreed && state.consent.enabled && (
+        <>
+          <Figures state={state} t={t} />
+          <ul className="m-0 grid list-none grid-cols-2 gap-1.5 p-0 max-sm:grid-cols-1">
+            {fieldEntries(state.consent.fields).map(([field, on]) => (
+              <li
+                key={field}
+                className="flex items-center justify-between gap-3 rounded-[12px] border border-edge-faint bg-surface-card px-3 py-1.5"
+              >
+                <span className={on ? 'text-content' : 'text-content-faint'} style={fs(12.5, 'body')}>
+                  {fieldLabel(t, field)}
+                </span>
+                <ToggleSwitch
+                  on={on}
+                  label={fieldLabel(t, field)}
+                  disabled={contrib.busy}
+                  onToggle={() => toggleField(field)}
+                />
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+
+      {(agreed || state.consent.decision === 'off') && (
+        <details className="group overflow-hidden rounded-[12px] border border-edge-faint bg-surface-card">
+          {/* The admin page's fold head (pages/admin/FoldSummary), which a component cannot import. */}
+          <summary className="flex cursor-pointer list-none items-center gap-2.5 px-3.5 py-2.5 hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--text-primary)] [&::-webkit-details-marker]:hidden">
+            <ChevronRight
+              size={15}
+              strokeWidth={2}
+              className="flex-none text-content-faint transition-transform group-open:rotate-90"
+              aria-hidden="true"
+            />
+            <span className="font-medium text-content" style={fs(12.5, 'body')}>
+              {t('admin.contribute.log.title')}
+            </span>
+          </summary>
+          <div className="flex flex-col gap-3 border-t border-edge-faint p-3">
+            <PlaceContribLog />
+            <button
+              type="button"
+              disabled={contrib.busy}
+              onClick={() => setConfirm('withdraw')}
+              className="inline-flex items-center gap-1.5 self-start rounded-lg border border-edge-faint bg-surface-card px-3 py-1.5 font-medium text-danger hover:bg-danger-soft disabled:opacity-40"
+              style={fs(12.5, 'body')}
+            >
+              <Undo2 size={14} aria-hidden="true" />
+              {t('admin.contribute.withdraw')}
+            </button>
+          </div>
+        </details>
+      )}
+
+      {showPrompt && state.eligible && (
+        <PlaceContribPrompt state={state} contrib={contrib} onClose={() => setPrompting(false)} />
+      )}
+      <ConfirmDialog
+        isOpen={confirm === 'off'}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => {
+          setConfirm(null);
+          contrib.decide({ action: 'off' }).catch(fail);
+        }}
+        title={t('admin.contribute.offTitle')}
+        message={t('admin.contribute.offMessage')}
+        confirmLabel={t('admin.contribute.offConfirm')}
+      />
+      <ConfirmDialog
+        isOpen={confirm === 'withdraw'}
+        onClose={() => setConfirm(null)}
+        onConfirm={withdraw}
+        title={t('admin.contribute.withdrawTitle')}
+        message={t('admin.contribute.withdrawMessage')}
+        confirmLabel={t('admin.contribute.withdraw')}
+        danger
+      />
+    </SettingsCard>
+  );
+}

client/src/components/Admin/PlaceContribPrompt.tsx

@@ -0,0 +1,198 @@
+import type { PlaceContribFieldSwitches, PlaceContribState } from '@trek/shared';
+import { Check, HeartHandshake, ShieldCheck, TriangleAlert, X } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from '../../i18n';
+import { getApiErrorMessage } from '../../utils/apiError';
+import ToggleSwitch from '../Settings/ToggleSwitch';
+import {
+  DialogButton,
+  DialogFooter,
+  DialogHeader,
+  DialogShell,
+  DialogTile,
+  FooterSpacer,
+  fs,
+  NEUTRAL_TINT,
+} from '../shared/DialogShell';
+import { useToast } from '../shared/Toast';
+import { ALL_FIELDS_ON, fieldEntries, fieldLabel, refusalReason } from './placeContribModel';
+import type { usePlaceContrib } from './usePlaceContrib';
+
+const NEVER = ['notes', 'files', 'trips', 'people', 'providers'] as const;
+
+/**
+ * The question an admin gets once: share what this installation's users type
+ * about places with every other TREK. Asked warmly and with every field already
+ * on, because saying yes is the point of asking; but nothing leaves before the
+ * admin presses Agree, and "not now" and "no" are as easy to reach.
+ *
+ * Closing the dialog decides nothing: it comes back on the next visit until one
+ * of the three buttons is pressed.
+ */
+export default function PlaceContribPrompt({
+  state,
+  contrib,
+  onClose,
+}: {
+  state: PlaceContribState;
+  contrib: ReturnType<typeof usePlaceContrib>;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [fields, setFields] = useState<PlaceContribFieldSwitches>(() =>
+    state.consent.decision === 'agreed' || state.consent.decision === 'off' ? state.consent.fields : ALL_FIELDS_ON
+  );
+  const none = !Object.values(fields).some(Boolean);
+
+  const run = async (body: Parameters<typeof contrib.decide>[0], done?: string) => {
+    try {
+      await contrib.decide(body);
+      if (done) toast.success(done);
+      onClose();
+    } catch (err) {
+      const reason = refusalReason(err);
+      toast.error(
+        reason === 'terms_outdated' || reason === 'no_field'
+          ? t(`admin.contribute.refused.${reason}`)
+          : getApiErrorMessage(err, t('common.error'))
+      );
+    }
+  };
+
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy="place-contrib-prompt-title"
+      width="detail"
+      blocked={contrib.busy}
+      header={
+        <DialogHeader
+          tile={
+            <DialogTile>
+              <HeartHandshake size={22} className="text-content" aria-hidden="true" />
+            </DialogTile>
+          }
+          tint={NEUTRAL_TINT}
+          labelId="place-contrib-prompt-title"
+          eyebrow="TREK Places API"
+          title={t('admin.contribute.prompt.title')}
+          onClose={onClose}
+        />
+      }
+      footer={
+        <DialogFooter>
+          <DialogButton
+            disabled={contrib.busy}
+            onClick={() => void run({ action: 'decline', termsVersion: state.termsVersion })}
+          >
+            {t('admin.contribute.prompt.decline')}
+          </DialogButton>
+          <FooterSpacer />
+          <DialogButton disabled={contrib.busy} onClick={() => void run({ action: 'snooze' })}>
+            {t('admin.contribute.prompt.snooze')}
+          </DialogButton>
+          <DialogButton
+            variant="primary"
+            autoFocus
+            disabled={contrib.busy || none}
+            icon={<HeartHandshake size={15} aria-hidden="true" />}
+            onClick={() =>
+              void run(
+                { action: 'agree', termsVersion: state.termsVersion, fields },
+                t('admin.contribute.prompt.thanks')
+              )
+            }
+          >
+            {t('admin.contribute.prompt.agree')}
+          </DialogButton>
+        </DialogFooter>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <p className="m-0 leading-relaxed text-content" style={fs(14, 'body')}>
+          {t('admin.contribute.prompt.lead')}
+        </p>
+        <p className="m-0 leading-relaxed text-content-secondary" style={fs(13, 'body')}>
+          {t('admin.contribute.prompt.why')}
+        </p>
+      </div>
+
+      <section className="flex flex-col gap-2" aria-labelledby="place-contrib-prompt-fields">
+        <h3 id="place-contrib-prompt-fields" className="m-0 font-semibold text-content" style={fs(13, 'body')}>
+          {t('admin.contribute.prompt.whatLabel')}
+        </h3>
+        <ul className="m-0 grid list-none grid-cols-2 gap-1.5 p-0 max-sm:grid-cols-1">
+          {fieldEntries(fields).map(([field, on]) => (
+            <li
+              key={field}
+              className="flex items-center justify-between gap-3 rounded-[12px] border border-edge-faint bg-surface-secondary px-3 py-2"
+            >
+              <span className="flex min-w-0 items-center gap-2 text-content" style={fs(13, 'body')}>
+                <Check
+                  size={14}
+                  strokeWidth={2.4}
+                  className={on ? 'text-success' : 'text-content-faint opacity-40'}
+                  aria-hidden="true"
+                />
+                <span className="truncate">{fieldLabel(t, field)}</span>
+              </span>
+              <ToggleSwitch
+                on={on}
+                label={fieldLabel(t, field)}
+                onToggle={() => setFields((f) => ({ ...f, [field]: !f[field] }))}
+              />
+            </li>
+          ))}
+        </ul>
+        <p className="m-0 leading-normal text-content-faint" style={fs(11.5)}>
+          {t('admin.contribute.prompt.imageNote')}
+        </p>
+      </section>
+
+      <section
+        className="flex flex-col gap-2 rounded-[14px] border border-edge-faint bg-surface-secondary p-3"
+        aria-labelledby="place-contrib-prompt-never"
+      >
+        <h3
+          id="place-contrib-prompt-never"
+          className="m-0 flex items-center gap-1.5 font-semibold text-content"
+          style={fs(13, 'body')}
+        >
+          <ShieldCheck size={15} className="text-success" aria-hidden="true" />
+          {t('admin.contribute.prompt.neverLabel')}
+        </h3>
+        <ul className="m-0 flex list-none flex-wrap gap-1.5 p-0">
+          {NEVER.map((item) => (
+            <li
+              key={item}
+              className="inline-flex items-center gap-1 rounded-full border border-edge-faint bg-surface-card px-2.5 py-[3px] font-medium text-content-secondary"
+              style={fs(11.5)}
+            >
+              <X size={12} strokeWidth={2.4} className="text-content-faint" aria-hidden="true" />
+              {t(`admin.contribute.never.${item}`)}
+            </li>
+          ))}
+        </ul>
+        <p className="m-0 leading-normal text-content-muted" style={fs(12, 'body')}>
+          {t('admin.contribute.prompt.how')}
+        </p>
+      </section>
+
+      {state.registrationOpen && (
+        <p
+          className="m-0 flex items-start gap-2 rounded-[12px] bg-warning-soft px-3 py-2 leading-normal text-warning"
+          style={fs(12, 'body')}
+          role="note"
+        >
+          <TriangleAlert size={15} className="mt-[1px] flex-none" aria-hidden="true" />
+          {t('admin.contribute.prompt.openRegistration')}
+        </p>
+      )}
+
+      <p className="m-0 text-content-faint" style={fs(11.5)}>
+        {t('admin.contribute.prompt.footnote')}
+      </p>
+    </DialogShell>
+  );
+}

client/src/components/Admin/RoutingInstanceFields.tsx

@@ -1,4 +1,5 @@
 import { useId, useState } from 'react'
+import type { ValhallaProvider } from '@trek/shared'
 import { useTranslation } from '../../i18n/TranslationContext'
 import { fs } from '../shared/DialogShell'
 import { INPUT, LABEL } from '../shared/dialogParts'
@@ -6,6 +7,7 @@ import { INPUT, LABEL } from '../shared/dialogParts'
 export interface RoutingDefaults {
   routing_base_url?: string
   valhalla_base_url?: string
+  routing_valhalla_provider?: ValhallaProvider
 }
 
 interface RoutingFieldsProps {
@@ -25,6 +27,14 @@ const ROUTERS = [
   { key: 'valhalla_base_url', label: 'settings.valhallaBase', hint: 'settings.valhallaBaseHint', placeholder: 'https://valhalla.example.org' },
 ] as const
 
+// '' is no choice of the admin: the instance then decides as before the choice existed.
+const PROVIDERS = [
+  { value: '', labelKey: 'settings.valhallaProviderOption.auto' },
+  { value: 'trek', labelKey: 'settings.valhallaProviderOption.trek' },
+  { value: 'fossgis', labelKey: 'settings.valhallaProviderOption.fossgis' },
+  { value: 'custom', labelKey: 'settings.valhallaProviderOption.custom' },
+] as const
+
 // The phone screen's look, unchanged: MAdminDefaultUserSettings passes its own hint class.
 const PHONE = {
   wrap: 'min-w-0 space-y-1.5',
@@ -43,6 +53,12 @@ const DESKTOP = {
   input: INPUT,
 }
 
+function FieldHint({ id, text, hintClassName }: { id: string; text: string; hintClassName?: string }) {
+  return hintClassName !== undefined
+    ? <p id={id} className={hintClassName}>{text}</p>
+    : <p id={id} className="m-0 mt-1 leading-normal text-content-faint" style={fs(11)}>{text}</p>
+}
+
 function RoutingUrlField({ router, defaults, onSave, onReset, hintClassName }: RoutingFieldsProps & { router: typeof ROUTERS[number] }) {
   const { t } = useTranslation()
   const id = useId()
@@ -81,14 +97,45 @@ function RoutingUrlField({ router, defaults, onSave, onReset, hintClassName }: R
         aria-describedby={`${id}-hint`}
         className={look.input}
       />
-      {phone
-        ? <p id={`${id}-hint`} className={hintClassName}>{t(router.hint)}</p>
-        : <p id={`${id}-hint`} className="m-0 mt-1 leading-normal text-content-faint" style={fs(11)}>{t(router.hint)}</p>}
+      <FieldHint id={`${id}-hint`} text={t(router.hint)} hintClassName={hintClassName} />
+    </div>
+  )
+}
+
+/** Which Valhalla answers what OSRM cannot; picking "automatic" clears the choice. */
+function RoutingProviderField({ defaults, onSave, onReset, hintClassName }: RoutingFieldsProps) {
+  const { t } = useTranslation()
+  const id = useId()
+  const [saving, setSaving] = useState(false)
+  const phone = hintClassName !== undefined
+  const look = phone ? PHONE : DESKTOP
+  const pick = async (value: string) => {
+    setSaving(true)
+    try {
+      if (value === '') await onReset('routing_valhalla_provider')
+      else await onSave({ routing_valhalla_provider: value as ValhallaProvider })
+    } finally { setSaving(false) }
+  }
+  return (
+    <div className={`${look.wrap} ${!phone && saving ? 'opacity-60' : ''}`} aria-busy={saving}>
+      <div className={look.head}>
+        <label htmlFor={id} className={look.label}>{t('settings.valhallaProvider')}</label>
+      </div>
+      <select id={id} value={defaults.routing_valhalla_provider ?? ''} disabled={saving}
+        onChange={e => void pick(e.target.value)} aria-describedby={`${id}-hint`} className={look.input}>
+        {PROVIDERS.map(option => <option key={option.value} value={option.value}>{t(option.labelKey)}</option>)}
+      </select>
+      <FieldHint id={`${id}-hint`} text={t('settings.valhallaProviderHint')} hintClassName={hintClassName} />
     </div>
   )
 }
 
 export default function RoutingInstanceFields(props: RoutingFieldsProps) {
   const phone = props.hintClassName !== undefined
-  return <div className={phone ? 'flex flex-col gap-3' : 'flex flex-col gap-4'}>{ROUTERS.map(router => <RoutingUrlField key={router.key} router={router} {...props} />)}</div>
+  return (
+    <div className={phone ? 'flex flex-col gap-3' : 'flex flex-col gap-4'}>
+      <RoutingProviderField {...props} />
+      {ROUTERS.map(router => <RoutingUrlField key={router.key} router={router} {...props} />)}
+    </div>
+  )
 }

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

@@ -0,0 +1,160 @@
+// FE-ADMIN-SVCID-001 to FE-ADMIN-SVCID-010
+import userEvent from '@testing-library/user-event';
+import type { ServiceIdentityStatus } from '@trek/shared';
+import { http, HttpResponse } from 'msw';
+import { describe, expect, it, vi } from 'vitest';
+import { server } from '../../../tests/helpers/msw/server';
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import ServiceIdentityPanel from './ServiceIdentityPanel';
+
+// The keys themselves, so a test fails on a missing or renamed key rather than on wording.
+vi.mock('../../i18n', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('../../i18n')>()),
+  useTranslation: () => ({ t: (key: string) => key, locale: 'en-US' }),
+}));
+
+const QUOTA = { limit: 10_000, used: 2_500, remaining: 7_500, resetAt: '2026-10-30T00:00:00.000Z' };
+const CONNECTED: ServiceIdentityStatus = {
+  state: 'connected',
+  tier: 'std',
+  keySource: 'registered',
+  services: [
+    { service: 'places', inUse: true, quota: QUOTA },
+    { service: 'photon', inUse: false, quota: null },
+    { service: 'valhalla', inUse: false, quota: null },
+  ],
+  lastSeenAt: '2026-10-29T12:00:00.000Z',
+};
+
+function serve(status: ServiceIdentityStatus) {
+  server.use(http.get('/api/admin/service-identity', () => HttpResponse.json(status)));
+}
+
+describe('ServiceIdentityPanel', () => {
+  it('FE-ADMIN-SVCID-001: shows the state, the tier and today against the limit', async () => {
+    serve(CONNECTED);
+    render(<ServiceIdentityPanel />);
+    expect(await screen.findByText('admin.trekApi.quota.state.connected')).toBeInTheDocument();
+    expect(screen.getByText('admin.trekApi.quota.tier.std')).toBeInTheDocument();
+    const bar = screen.getByRole('progressbar', { name: 'admin.trekApi.quota.service.places' });
+    expect(bar).toHaveAttribute('aria-valuenow', '2500');
+    expect(bar).toHaveAttribute('aria-valuemax', '10000');
+    // What is left is the figure of the tile; used and the limit sit beside it as badges.
+    expect(screen.getByText('7,500')).toBeInTheDocument();
+    expect(screen.getByText('2,500')).toBeInTheDocument();
+    expect(screen.getByText('10,000')).toBeInTheDocument();
+    expect(screen.getByText('admin.trekApi.quota.limit')).toBeInTheDocument();
+    // The day starts again at the same time for every service, so it is said once, in the header.
+    expect(screen.getAllByText('admin.trekApi.quota.resets')).toHaveLength(1);
+    expect(screen.queryByText(/admin\.trekApi\.quota\.hint\./)).toBeNull();
+  });
+
+  it('FE-ADMIN-SVCID-002: an installation without a key says so and offers a new identity', async () => {
+    serve({ state: 'legacy', tier: 'legacy', keySource: null, services: [], lastSeenAt: null });
+    render(<ServiceIdentityPanel />);
+    expect(await screen.findByText('admin.trekApi.quota.hint.legacy')).toBeInTheDocument();
+    expect(screen.queryByRole('progressbar')).toBeNull();
+    expect(screen.getByRole('button', { name: 'admin.trekApi.quota.regenerate' })).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-SVCID-003: switched off, it shows why and offers nothing', async () => {
+    serve({ state: 'off', tier: null, keySource: null, services: [], lastSeenAt: null });
+    render(<ServiceIdentityPanel />);
+    expect(await screen.findByText('admin.trekApi.quota.hint.off')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'admin.trekApi.quota.regenerate' })).toBeNull();
+  });
+
+  it('FE-ADMIN-SVCID-004: a key from the environment is named, and only changed there', async () => {
+    serve({ ...CONNECTED, keySource: 'env', tier: 'own' });
+    render(<ServiceIdentityPanel />);
+    // A badge naming the variable; the sentence explaining it is its tooltip.
+    expect(await screen.findByText('TREK_SERVICES_KEY')).toBeInTheDocument();
+    expect(screen.getByText('admin.trekApi.quota.key')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'admin.trekApi.quota.regenerate' })).toBeNull();
+  });
+
+  it('FE-ADMIN-SVCID-005: a service in use without an allowance to show says it cannot be read', async () => {
+    serve({ ...CONNECTED, services: [{ service: 'places', inUse: true, quota: null }] });
+    render(<ServiceIdentityPanel />);
+    expect(await screen.findByText('admin.trekApi.quota.unavailable')).toBeInTheDocument();
+    expect(screen.queryByRole('progressbar')).toBeNull();
+  });
+
+  it('FE-ADMIN-SVCID-009: lists place search, address search and routing, each with its own allowance', async () => {
+    serve({
+      ...CONNECTED,
+      services: [
+        { service: 'places', inUse: true, quota: QUOTA },
+        { service: 'photon', inUse: true, quota: { ...QUOTA, used: 40, remaining: 9_960 } },
+        { service: 'valhalla', inUse: true, quota: { ...QUOTA, used: 9_500, remaining: 500 } },
+      ],
+    });
+    render(<ServiceIdentityPanel />);
+    const list = await screen.findByRole('list', { name: 'admin.trekApi.quota.title' });
+    expect(list.querySelectorAll('li')).toHaveLength(3);
+    const value = (name: string) => screen.getByRole('progressbar', { name }).getAttribute('aria-valuenow');
+    expect(value('admin.trekApi.quota.service.places')).toBe('2500');
+    expect(value('admin.trekApi.quota.service.photon')).toBe('40');
+    expect(value('admin.trekApi.quota.service.valhalla')).toBe('9500');
+    expect(screen.queryByText('admin.trekApi.quota.notInUse')).toBeNull();
+  });
+
+  it('FE-ADMIN-SVCID-010: a service this instance does not ask is named as not in use, its allowance still shown', async () => {
+    serve({
+      ...CONNECTED,
+      services: [
+        { service: 'places', inUse: true, quota: QUOTA },
+        { service: 'photon', inUse: false, quota: null },
+        { service: 'valhalla', inUse: false, quota: QUOTA },
+      ],
+    });
+    render(<ServiceIdentityPanel />);
+    expect(await screen.findAllByText('admin.trekApi.quota.notInUse')).toHaveLength(2);
+    expect(screen.getAllByRole('progressbar')).toHaveLength(2);
+    expect(screen.queryByText('admin.trekApi.quota.unavailable')).toBeNull();
+  });
+
+  it('FE-ADMIN-SVCID-006: a failed read says so instead of showing nothing', async () => {
+    server.use(http.get('/api/admin/service-identity', () => HttpResponse.json({ error: 'nope' }, { status: 500 })));
+    render(<ServiceIdentityPanel />);
+    expect(await screen.findByText('admin.trekApi.quota.unavailable')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-SVCID-007: a revoked key asks before it starts over, then shows the new state', async () => {
+    let regenerated = 0;
+    serve({ state: 'revoked', tier: 'std', keySource: 'registered', services: [], lastSeenAt: null });
+    server.use(
+      http.post('/api/admin/service-identity/regenerate', () => {
+        regenerated += 1;
+        return HttpResponse.json({
+          state: 'registering',
+          tier: 'legacy',
+          keySource: null,
+          services: [],
+          lastSeenAt: null,
+        });
+      })
+    );
+    const user = userEvent.setup();
+    render(<ServiceIdentityPanel />);
+    expect(await screen.findByText('admin.trekApi.quota.hint.revoked')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'admin.trekApi.quota.regenerate' }));
+    expect(screen.getByText('admin.trekApi.quota.regenerateBody')).toBeInTheDocument();
+    expect(regenerated).toBe(0);
+
+    const regenerateButtons = screen.getAllByRole('button', { name: 'admin.trekApi.quota.regenerate' });
+    const confirm = regenerateButtons[regenerateButtons.length - 1];
+    if (!confirm) throw new Error('no confirm button');
+    await user.click(confirm);
+    await waitFor(() => expect(regenerated).toBe(1));
+    expect(await screen.findByText('admin.trekApi.quota.hint.registering')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-SVCID-008: a managed install leaves the identity to its operator', async () => {
+    serve({ state: 'revoked', tier: 'std', keySource: 'registered', services: [], lastSeenAt: null });
+    render(<ServiceIdentityPanel managed />);
+    expect(await screen.findByText('admin.trekApi.quota.hint.revoked')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'admin.trekApi.quota.regenerate' })).toBeNull();
+  });
+});

client/src/components/Admin/ServiceIdentityPanel.tsx

@@ -0,0 +1,216 @@
+import type { ServiceAllowance, ServiceIdentityState, ServiceIdentityStatus, ServiceQuotaView } from '@trek/shared';
+import { MapPin, RefreshCw, Route, Search, Signal, type LucideIcon } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { useTranslation } from '../../i18n';
+import { useSettingsStore } from '../../store/settingsStore';
+import type { TranslationFn } from '../../types';
+import { getApiErrorMessage } from '../../utils/apiError';
+import { formatClockTime } from '../../utils/formatters';
+import { SettingsCard } from '../Settings/settingsKit';
+import ConfirmDialog from '../shared/ConfirmDialog';
+import { useToast } from '../shared/Toast';
+import { FigureBadge } from '../Tours/paddle/FigureBadge';
+import { useServiceIdentity } from './useServiceIdentity';
+
+const STATE_DOT: Record<ServiceIdentityState, string> = {
+  connected: 'bg-success',
+  registering: 'bg-warning motion-safe:animate-pulse',
+  legacy: 'bg-[var(--text-faint)]',
+  off: 'bg-[var(--text-faint)]',
+  revoked: 'bg-danger',
+};
+
+const SERVICE_ICON: Record<string, LucideIcon> = { places: MapPin, photon: Search, valhalla: Route };
+
+/** Below a tenth of the day left the bar turns amber, at nothing left red. */
+function barTone(quota: ServiceQuotaView): string {
+  if (quota.remaining === 0) return 'bg-danger';
+  return quota.remaining < quota.limit / 10 ? 'bg-warning' : 'bg-accent';
+}
+
+function figureTone(quota: ServiceQuotaView): string {
+  if (quota.remaining === 0) return 'text-danger';
+  return quota.remaining < quota.limit / 10 ? 'text-warning' : 'text-content';
+}
+
+/** The clock time the counts start again, in the user's format; one for all services, which share the day. */
+function useResetTime(status: ServiceIdentityStatus | null): string | null {
+  const is12h = useSettingsStore((s) => s.settings.time_format === '12h');
+  const at = status?.services.find((s) => s.quota)?.quota?.resetAt;
+  if (!at) return null;
+  const reset = new Date(at);
+  return formatClockTime(
+    `${String(reset.getHours()).padStart(2, '0')}:${String(reset.getMinutes()).padStart(2, '0')}`,
+    is12h
+  );
+}
+
+function tileNote(t: TranslationFn, allowance: ServiceAllowance): string | null {
+  if (!allowance.inUse) return t('admin.trekApi.quota.notInUse');
+  return allowance.quota ? null : t('admin.trekApi.quota.unavailable');
+}
+
+/**
+ * One service under the key, as a tile: what is left today as the figure that
+ * matters, the day's use as a bar, used and limit as badges. A service not in
+ * use is dimmed rather than hidden, so the row reads the same on every install.
+ */
+function ServiceTile({ allowance }: { allowance: ServiceAllowance }) {
+  const { t, locale } = useTranslation();
+  const number = new Intl.NumberFormat(locale);
+  const name = t(`admin.trekApi.quota.service.${allowance.service}`);
+  const note = tileNote(t, allowance);
+  const quota = allowance.quota;
+  const Icon = SERVICE_ICON[allowance.service] ?? MapPin;
+  const share = quota && quota.limit > 0 ? Math.min(100, (quota.used / quota.limit) * 100) : 100;
+
+  return (
+    <li
+      className={`flex min-w-0 flex-col gap-2.5 rounded-xl border border-edge-faint bg-surface-card p-3 shadow-sm ${allowance.inUse ? '' : 'opacity-60'}`}
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        <span className="grid h-7 w-7 flex-none place-items-center rounded-lg bg-surface-tertiary text-content-muted">
+          <Icon size={14} strokeWidth={2} aria-hidden="true" />
+        </span>
+        <p className="m-0 truncate text-caption font-medium text-content-secondary">{name}</p>
+      </div>
+
+      {quota && (
+        <>
+          <div className="min-w-0">
+            <p className={`m-0 truncate text-title font-semibold tabular-nums leading-tight ${figureTone(quota)}`}>
+              {number.format(quota.remaining)}
+            </p>
+            <p className="m-0 text-caption text-content-muted">{t('admin.trekApi.quota.remaining')}</p>
+          </div>
+          <div
+            role="progressbar"
+            aria-label={name}
+            aria-valuemin={0}
+            aria-valuemax={quota.limit}
+            aria-valuenow={quota.used}
+            className="h-1.5 overflow-hidden rounded-full bg-surface-tertiary"
+          >
+            <div
+              className={`h-full rounded-full transition-[width] duration-500 ${barTone(quota)}`}
+              style={{ width: `${share}%` }}
+            />
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            <FigureBadge label={t('admin.trekApi.quota.used')} value={number.format(quota.used)} />
+            <FigureBadge label={t('admin.trekApi.quota.limit')} value={number.format(quota.limit)} />
+          </div>
+        </>
+      )}
+      {note && <p className="m-0 text-caption leading-snug text-content-muted">{note}</p>}
+    </li>
+  );
+}
+
+function stateHint(t: TranslationFn, status: ServiceIdentityStatus | null, failed: boolean): string | null {
+  if (!status) return failed ? t('admin.trekApi.quota.unavailable') : null;
+  return status.state === 'connected' ? null : t(`admin.trekApi.quota.hint.${status.state}`);
+}
+
+/**
+ * How this installation stands with the TREK services: whether it has its key,
+ * and for place search, address search and routing today's allowance against
+ * what is used, and when the count starts again.
+ * Read when the card is in view and refreshed every 30 seconds while it stays.
+ * A managed install leaves the identity to its operator, so it offers no new one.
+ */
+export default function ServiceIdentityPanel({ managed = false }: { managed?: boolean }) {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const panel = useRef<HTMLDivElement>(null);
+  const { status, failed, regenerating, regenerate } = useServiceIdentity(panel);
+  const [confirming, setConfirming] = useState(false);
+  const resetAt = useResetTime(status);
+
+  const confirmRegenerate = async () => {
+    setConfirming(false);
+    try {
+      await regenerate();
+      toast.success(t('admin.trekApi.quota.regenerated'));
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')));
+    }
+  };
+
+  const hint = stateHint(t, status, failed);
+  const canRegenerate = !managed && status !== null && status.keySource !== 'env' && status.state !== 'off';
+
+  return (
+    <div ref={panel}>
+      <SettingsCard
+        flush
+        icon={Signal}
+        title={t('admin.trekApi.quota.title')}
+        badge={
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-surface-card px-2 py-[2px] text-caption font-semibold text-content shadow-sm">
+            <span
+              aria-hidden="true"
+              className={`h-2 w-2 flex-none rounded-full ${STATE_DOT[status?.state ?? 'off']}`}
+            />
+            {status ? t(`admin.trekApi.quota.state.${status.state}`) : '…'}
+          </span>
+        }
+        action={
+          <>
+            {status?.tier && <FigureBadge value={t(`admin.trekApi.quota.tier.${status.tier}`)} />}
+            {status?.keySource === 'env' && (
+              <FigureBadge
+                label={t('admin.trekApi.quota.key')}
+                value="TREK_SERVICES_KEY"
+                info={t('admin.trekApi.quota.envKey')}
+              />
+            )}
+            {resetAt && <FigureBadge label={t('admin.trekApi.quota.resets')} value={resetAt} />}
+          </>
+        }
+      >
+        {status && status.services.length > 0 && (
+          <ul
+            aria-label={t('admin.trekApi.quota.title')}
+            className="m-0 grid list-none grid-cols-1 gap-2 p-0 sm:grid-cols-3"
+          >
+            {status.services.map((allowance) => (
+              <ServiceTile key={allowance.service} allowance={allowance} />
+            ))}
+          </ul>
+        )}
+        {hint && <p className="m-0 text-caption leading-snug text-content-muted">{hint}</p>}
+
+        {/* The one action, on a rule of its own below the figures. */}
+        {canRegenerate && (
+          <div className="-mx-4 -mb-4 flex items-center justify-end border-t border-edge-faint px-4 py-2.5">
+            <button
+              type="button"
+              onClick={() => setConfirming(true)}
+              disabled={regenerating}
+              className="inline-flex items-center gap-1.5 rounded-lg border border-edge-faint bg-surface-card px-2.5 py-1 text-caption font-medium text-content-secondary shadow-sm hover:bg-surface-hover hover:text-content disabled:opacity-50"
+            >
+              <RefreshCw
+                size={13}
+                strokeWidth={2}
+                className={regenerating ? 'motion-safe:animate-spin' : ''}
+                aria-hidden="true"
+              />
+              {t('admin.trekApi.quota.regenerate')}
+            </button>
+          </div>
+        )}
+      </SettingsCard>
+
+      <ConfirmDialog
+        isOpen={confirming}
+        onClose={() => setConfirming(false)}
+        onConfirm={() => void confirmRegenerate()}
+        title={t('admin.trekApi.quota.regenerateTitle')}
+        message={t('admin.trekApi.quota.regenerateBody')}
+        confirmLabel={t('admin.trekApi.quota.regenerate')}
+        danger={false}
+      />
+    </div>
+  );
+}

client/src/components/Admin/placeContribModel.ts

@@ -0,0 +1,45 @@
+import {
+  PLACE_CONTRIB_FIELDS,
+  type PlaceContribField,
+  type PlaceContribFieldSwitches,
+  type PlaceContribState,
+} from '@trek/shared';
+import type { TranslationFn } from '../../types';
+
+/** Every switch on: what the prompt proposes, and what an installation that never decided reads as. */
+export const ALL_FIELDS_ON: PlaceContribFieldSwitches = {
+  website: true,
+  phone: true,
+  email: true,
+  opening_hours: true,
+  description: true,
+  image: true,
+};
+
+export const fieldLabel = (t: TranslationFn, field: PlaceContribField): string => t(`admin.contribute.field.${field}`);
+
+/** The switches as a list, in the order the contract names the fields. */
+export const fieldEntries = (switches: PlaceContribFieldSwitches): [PlaceContribField, boolean][] =>
+  PLACE_CONTRIB_FIELDS.map((field) => [field, switches[field]]);
+
+export type ContribStatus = 'active' | 'paused' | 'off' | 'unavailable';
+
+/** Where sharing stands, as the pill beside the title says it. */
+export function contribStatus(state: PlaceContribState): ContribStatus {
+  if (!state.eligible) return 'unavailable';
+  if (!state.active) return 'off';
+  return state.pauseReason ? 'paused' : 'active';
+}
+
+/** The sentence under the title: why it cannot run, why it waits, or what it does. */
+export function contribNote(t: TranslationFn, state: PlaceContribState): string {
+  if (!state.eligible && state.ineligibleReason) return t(`admin.contribute.ineligible.${state.ineligibleReason}`);
+  if (state.active && state.pauseReason) return t(`admin.contribute.pause.${state.pauseReason}`);
+  return t(state.active ? 'admin.contribute.noteActive' : 'admin.contribute.noteOff');
+}
+
+/** The refusal a decision can meet, as the server names it in `reason`, or null for any other failure. */
+export function refusalReason(err: unknown): string | null {
+  const reason = (err as { response?: { data?: { reason?: unknown } } } | null)?.response?.data?.reason;
+  return typeof reason === 'string' && reason ? reason : null;
+}

client/src/components/Admin/trekApiModel.test.ts

@@ -1,8 +1,14 @@
 import { describe, expect, it } from 'vitest';
 
-import { TREK_API_SOURCES, trekApiFacts, trekApiFields } from './trekApiModel';
+import {
+  TREK_API_SOURCES,
+  trekApiAddressFeatures,
+  trekApiFacts,
+  trekApiFields,
+  trekApiRoutingFeatures,
+} from './trekApiModel';
 
-// FE-TREKAPIMODEL-001 to FE-TREKAPIMODEL-003
+// FE-TREKAPIMODEL-001 to FE-TREKAPIMODEL-004
 
 const t = (key: string) => `<${key}>`;
 
@@ -22,10 +28,12 @@ describe('trekApiModel', () => {
     ]);
   });
 
-  it('FE-TREKAPIMODEL-002: leads with four facts, each with a glyph', () => {
+  it('FE-TREKAPIMODEL-002: leads with the three services, then the terms, each with a glyph', () => {
     const facts = trekApiFacts(t);
     expect(facts.map((f) => f.text)).toEqual([
       '<admin.trekApi.factPlaces>',
+      '<admin.trekApi.factAddresses>',
+      '<admin.trekApi.factRouting>',
       '<admin.trekApi.factNoKey>',
       '<admin.trekApi.factOffline>',
       '<admin.trekApi.factPrivacy>',
@@ -34,6 +42,28 @@ describe('trekApiModel', () => {
   });
 
   it('FE-TREKAPIMODEL-003: names the data sources untranslated', () => {
-    expect(TREK_API_SOURCES).toEqual(['Overture Maps Foundation', 'OpenStreetMap', 'Wikivoyage', 'Wikimedia']);
+    expect(TREK_API_SOURCES).toEqual([
+      'Overture Maps Foundation',
+      'OpenStreetMap',
+      'Wikivoyage',
+      'Wikimedia',
+      'Mapzen Terrain Tiles',
+    ]);
+  });
+
+  it('FE-TREKAPIMODEL-004: lists what the address search and the routing answer', () => {
+    expect(trekApiAddressFeatures(t)).toEqual([
+      '<admin.trekApi.addrStreets>',
+      '<admin.trekApi.addrTowns>',
+      '<admin.trekApi.addrReverse>',
+      '<admin.trekApi.addrLanguages>',
+    ]);
+    expect(trekApiRoutingFeatures(t)).toEqual([
+      '<admin.trekApi.routeCar>',
+      '<admin.trekApi.routeBike>',
+      '<admin.trekApi.routeFoot>',
+      '<admin.trekApi.routeAvoid>',
+      '<admin.trekApi.routeElevation>',
+    ]);
   });
 });

client/src/components/Admin/trekApiModel.ts

@@ -1,13 +1,19 @@
-import { Globe2, KeyRound, ShieldOff, WifiOff } from 'lucide-react';
+import { Globe2, KeyRound, Route, Search, ShieldOff, WifiOff } from 'lucide-react';
 
 import type { TranslationFn } from '../../types';
 
 /**
  * Proper nouns, so they are not translated. Naming them is also a licence obligation,
  * not decoration: ODbL and CC BY-SA both require attribution wherever their content is
- * shown.
+ * shown, and the terrain tiles the routes take their heights from ask to be named too.
  */
-export const TREK_API_SOURCES = ['Overture Maps Foundation', 'OpenStreetMap', 'Wikivoyage', 'Wikimedia'];
+export const TREK_API_SOURCES = [
+  'Overture Maps Foundation',
+  'OpenStreetMap',
+  'Wikivoyage',
+  'Wikimedia',
+  'Mapzen Terrain Tiles',
+];
 
 /**
  * The fields a TREK Places API result carries, for the desktop card and the phone block
@@ -29,10 +35,33 @@ export function trekApiFields(t: TranslationFn): string[] {
   ];
 }
 
-/** The four facts the TREK Places API block leads with, each with its glyph. */
+/** What the address search answers: an address typed, a town, the address of a point. */
+export function trekApiAddressFeatures(t: TranslationFn): string[] {
+  return [
+    t('admin.trekApi.addrStreets'),
+    t('admin.trekApi.addrTowns'),
+    t('admin.trekApi.addrReverse'),
+    t('admin.trekApi.addrLanguages'),
+  ];
+}
+
+/** What the routing does: the three ways of getting there, what a drive can avoid, the heights. */
+export function trekApiRoutingFeatures(t: TranslationFn): string[] {
+  return [
+    t('admin.trekApi.routeCar'),
+    t('admin.trekApi.routeBike'),
+    t('admin.trekApi.routeFoot'),
+    t('admin.trekApi.routeAvoid'),
+    t('admin.trekApi.routeElevation'),
+  ];
+}
+
+/** The facts the TREK API block leads with, each with its glyph: the three services first, then the terms. */
 export function trekApiFacts(t: TranslationFn) {
   return [
     { Icon: Globe2, text: t('admin.trekApi.factPlaces') },
+    { Icon: Search, text: t('admin.trekApi.factAddresses') },
+    { Icon: Route, text: t('admin.trekApi.factRouting') },
     { Icon: KeyRound, text: t('admin.trekApi.factNoKey') },
     { Icon: WifiOff, text: t('admin.trekApi.factOffline') },
     { Icon: ShieldOff, text: t('admin.trekApi.factPrivacy') },

client/src/components/Admin/usePlaceContrib.test.ts

@@ -0,0 +1,31 @@
+// FE-ADMIN-CONTRIBHOOK-001
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { PlaceContribState } from '@trek/shared';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { placeContribRepo } from '../../repo/placeContribRepo';
+import { usePlaceContrib } from './usePlaceContrib';
+
+const STATE = { ineligibleReason: null, active: true } as unknown as PlaceContribState;
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('usePlaceContrib', () => {
+  it('FE-ADMIN-CONTRIBHOOK-001: a withdrawal that went through is answered even when the state cannot be read again', async () => {
+    const state = vi.spyOn(placeContribRepo, 'state').mockResolvedValueOnce(STATE);
+    vi.spyOn(placeContribRepo, 'withdraw').mockResolvedValue({ withdrawn: { website: 2 }, cleared: 1 });
+    const { result } = renderHook(() => usePlaceContrib());
+    await waitFor(() => expect(result.current.state).toBe(STATE));
+
+    state.mockRejectedValueOnce(new Error('offline'));
+    let answer: unknown;
+    await act(async () => {
+      answer = await result.current.withdraw();
+    });
+
+    expect(answer).toEqual({ withdrawn: { website: 2 }, cleared: 1 });
+    expect(result.current.state).toBe(STATE);
+    expect(result.current.busy).toBe(false);
+  });
+});

client/src/components/Admin/usePlaceContrib.ts

@@ -0,0 +1,65 @@
+import type { PlaceContribDecisionRequest, PlaceContribState } from '@trek/shared';
+import { useCallback, useEffect, useState } from 'react';
+import { placeContribRepo } from '../../repo/placeContribRepo';
+
+const KEY_RETRIES = 6;
+const KEY_RETRY_MS = 3_000;
+
+/**
+ * The admin's decision on sharing place details. Read once when the settings
+ * tab opens, so the prompt can come up without the card being scrolled to;
+ * every decision answers the new state, which replaces the old one.
+ */
+export function usePlaceContrib() {
+  const [state, setState] = useState<PlaceContribState | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    // A fresh installation fetches its key on first use, so the first answer can
+    // be no_key; asking again a few times lets the prompt appear once it landed.
+    const read = (tries: number) => {
+      placeContribRepo.state(controller.signal).then(
+        (next) => {
+          setState(next);
+          if (next.ineligibleReason === 'no_key' && tries > 1) timer = setTimeout(() => read(tries - 1), KEY_RETRY_MS);
+        },
+        () => {
+          if (!controller.signal.aborted) setFailed(true);
+        }
+      );
+    };
+    read(KEY_RETRIES);
+    return () => {
+      controller.abort();
+      clearTimeout(timer);
+    };
+  }, []);
+
+  const decide = useCallback(async (body: PlaceContribDecisionRequest): Promise<PlaceContribState> => {
+    setBusy(true);
+    try {
+      const next = await placeContribRepo.decide(body);
+      setState(next);
+      return next;
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  const withdraw = useCallback(async () => {
+    setBusy(true);
+    try {
+      const result = await placeContribRepo.withdraw();
+      // The withdrawal went through; a failed re-read keeps the old state rather than reporting it failed.
+      await placeContribRepo.state().then(setState, () => undefined);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  return { state, failed, busy, decide, withdraw };
+}

client/src/components/Admin/useServiceIdentity.test.ts

@@ -0,0 +1,91 @@
+// FE-ADMIN-SVCID-HOOK-001 to FE-ADMIN-SVCID-HOOK-004
+import { act, renderHook } from '@testing-library/react';
+import type { ServiceIdentityStatus } from '@trek/shared';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useServiceIdentity } from './useServiceIdentity';
+
+const { status, regenerate, visible } = vi.hoisted(() => ({
+  status: vi.fn(),
+  regenerate: vi.fn(),
+  visible: { current: true },
+}));
+
+vi.mock('../../repo/serviceIdentityRepo', () => ({ serviceIdentityRepo: { status, regenerate } }));
+vi.mock('../../hooks/useElementVisible', () => ({ useElementVisible: () => visible.current }));
+
+const LEGACY: ServiceIdentityStatus = {
+  state: 'legacy',
+  tier: 'legacy',
+  keySource: null,
+  services: [],
+  lastSeenAt: null,
+};
+const card = { current: null };
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  visible.current = true;
+  status.mockReset().mockResolvedValue(LEGACY);
+  regenerate.mockReset();
+});
+
+afterEach(() => vi.useRealTimers());
+
+describe('useServiceIdentity', () => {
+  it('FE-ADMIN-SVCID-HOOK-001: reads once in view, then every 30 seconds', async () => {
+    const { result } = renderHook(() => useServiceIdentity(card));
+    await act(async () => {});
+    expect(result.current.status).toEqual(LEGACY);
+    expect(status).toHaveBeenCalledTimes(1);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(30_000);
+    });
+    expect(status).toHaveBeenCalledTimes(2);
+  });
+
+  it('FE-ADMIN-SVCID-HOOK-002: reads nothing while the card is out of view, and stops when it leaves', async () => {
+    visible.current = false;
+    const { rerender } = renderHook(() => useServiceIdentity(card));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(90_000);
+    });
+    expect(status).not.toHaveBeenCalled();
+
+    visible.current = true;
+    rerender();
+    await act(async () => {});
+    expect(status).toHaveBeenCalledTimes(1);
+
+    visible.current = false;
+    rerender();
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(90_000);
+    });
+    expect(status).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-ADMIN-SVCID-HOOK-003: marks a failed read, and clears the mark on the next good one', async () => {
+    status.mockRejectedValueOnce(new Error('offline'));
+    const { result } = renderHook(() => useServiceIdentity(card));
+    await act(async () => {});
+    expect(result.current.failed).toBe(true);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(30_000);
+    });
+    expect(result.current.failed).toBe(false);
+  });
+
+  it('FE-ADMIN-SVCID-HOOK-004: a new identity replaces the status, and a refusal reaches the caller', async () => {
+    const registering = { ...LEGACY, state: 'registering' as const };
+    regenerate.mockResolvedValueOnce(registering).mockRejectedValueOnce(new Error('409'));
+    const { result } = renderHook(() => useServiceIdentity(card));
+    await act(async () => {
+      await result.current.regenerate();
+    });
+    expect(result.current.status).toEqual(registering);
+    await act(async () => {
+      await expect(result.current.regenerate()).rejects.toThrow('409');
+    });
+    expect(result.current.regenerating).toBe(false);
+  });
+});

client/src/components/Admin/useServiceIdentity.ts

@@ -0,0 +1,51 @@
+import type { ServiceIdentityStatus } from '@trek/shared';
+import { useCallback, useEffect, useState, type RefObject } from 'react';
+import { useElementVisible } from '../../hooks/useElementVisible';
+import { serviceIdentityRepo } from '../../repo/serviceIdentityRepo';
+
+const REFRESH_MS = 30_000;
+
+/**
+ * The installation's standing with the TREK services for the admin card:
+ * read when the card comes into view, then every 30 seconds while it stays
+ * there. Admin configuration, online only like the rest of the settings tab.
+ */
+export function useServiceIdentity(card: RefObject<Element | null>) {
+  const visible = useElementVisible(card);
+  const [status, setStatus] = useState<ServiceIdentityStatus | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [regenerating, setRegenerating] = useState(false);
+
+  useEffect(() => {
+    if (!visible) return;
+    const controller = new AbortController();
+    const refresh = () => {
+      serviceIdentityRepo.status(controller.signal).then(
+        (next) => {
+          setStatus(next);
+          setFailed(false);
+        },
+        () => {
+          if (!controller.signal.aborted) setFailed(true);
+        }
+      );
+    };
+    refresh();
+    const timer = setInterval(refresh, REFRESH_MS);
+    return () => {
+      controller.abort();
+      clearInterval(timer);
+    };
+  }, [visible]);
+
+  const regenerate = useCallback(async (): Promise<void> => {
+    setRegenerating(true);
+    try {
+      setStatus(await serviceIdentityRepo.regenerate());
+    } finally {
+      setRegenerating(false);
+    }
+  }, []);
+
+  return { status, failed, regenerating, regenerate };
+}

client/src/components/Assistant/assistantParts.ts

@@ -440,6 +440,8 @@ export const CHANGE_LABELS: Record<AssistantChangeLabelKey, { labelKey: string }
   currency: { labelKey: 'assistant.change.label.currency' },
   stopType: { labelKey: 'assistant.change.label.stopType' },
   text: { labelKey: 'assistant.change.label.text' },
+  title: { labelKey: 'assistant.change.label.title' },
+  content: { labelKey: 'assistant.change.label.content' },
   icon: { labelKey: 'assistant.change.label.icon' },
   color: { labelKey: 'assistant.change.label.color' },
   position: { labelKey: 'assistant.change.label.position' },

client/src/components/Assistant/useAssistantTripPicker.test.ts

@@ -20,7 +20,10 @@ const trip = (id: number, start: string | null, end: string | null) => ({
   end_date: end,
 });
 
-afterEach(() => vi.restoreAllMocks());
+afterEach(() => {
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
 
 describe('rankPickerTrips', () => {
   it('FE-AI-PICK-001: the running trip leads, then the soonest to come, then the latest past one', () => {
@@ -59,6 +62,9 @@ describe('rankPickerTrips', () => {
 
 describe('useAssistantTripPicker', () => {
   it('FE-AI-PICK-004: loads the trips once and ranks them; a failed load offers none', async () => {
+    // The hook ranks against the real clock; pin it so trip 7 keeps running.
+    vi.useFakeTimers({ shouldAdvanceTime: true, toFake: ['Date'] });
+    vi.setSystemTime(new Date(`${TODAY}T12:00:00`));
     const list = vi
       .spyOn(tripRepo, 'list')
       .mockResolvedValueOnce({ trips: [trip(7, '2026-10-01', '2026-10-30') as Trip], archivedTrips: [] });

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

@@ -1,4 +1,4 @@
-// FE-DOCSYNC-BIND-001 to FE-DOCSYNC-BIND-030
+// FE-DOCSYNC-BIND-001 to FE-DOCSYNC-BIND-032
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import en from '@trek/shared/i18n/en'
 import { render, screen, fireEvent, waitFor, within } from '../../../../tests/helpers/render'
@@ -66,6 +66,7 @@ function renderCard(
     canManage?: boolean
     providerName?: string
     onReconnect?: () => void
+    onEditConnection?: () => void
   } = {},
 ) {
   const utils = render(
@@ -75,6 +76,7 @@ function renderCard(
       sync={makeSync(opts.sync)}
       canManage={opts.canManage ?? true}
       onReconnect={opts.onReconnect}
+      onEditConnection={opts.onEditConnection}
     />,
   )
   const header = utils.container.querySelector('header') as HTMLElement
@@ -421,3 +423,31 @@ describe('DocSyncBinding: the direction lanes', () => {
     expect(updateLink).not.toHaveBeenCalled()
   })
 })
+
+describe('DocSyncBinding: the connection behind it', () => {
+  const S = en as unknown as Record<string, string>
+  const editButton = () => screen.queryByRole('button', { name: S['docsync.connection.edit'] })
+
+  it('FE-DOCSYNC-BIND-031: the settings open the stored connection at any time, not only after a refusal', () => {
+    const onEditConnection = vi.fn()
+    renderCard({ link: { lastSyncState: 'ok' }, onEditConnection })
+
+    expect(editButton()).not.toBeInTheDocument()
+    openSettings()
+    expect(screen.getByText(S['docsync.connection.title'])).toBeInTheDocument()
+    fireEvent.click(editButton() as HTMLElement)
+
+    expect(onEditConnection).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DOCSYNC-BIND-032: a member, or a panel without the form, gets no way to the connection', () => {
+    const member = renderCard({ canManage: false, onEditConnection: vi.fn() })
+    expect(screen.queryByRole('button', { name: 'Settings' })).not.toBeInTheDocument()
+    expect(editButton()).not.toBeInTheDocument()
+    member.unmount()
+
+    renderCard()
+    openSettings()
+    expect(editButton()).not.toBeInTheDocument()
+  })
+})

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import {
-  AlertTriangle, Check, ChevronDown, Clock, Copy, FolderOpen, Link2Off, RefreshCw,
+  AlertTriangle, Check, ChevronDown, Clock, Copy, FolderOpen, KeyRound, Link2Off, RefreshCw,
 } from 'lucide-react'
 import ConfirmDialog from '../../shared/ConfirmDialog'
 import CustomSelect from '../../shared/CustomSelect'
@@ -27,6 +27,7 @@ export default function DocSyncBinding({
   sync,
   canManage,
   onReconnect,
+  onEditConnection,
 }: {
   link: DocSyncLink
   providerName: string
@@ -38,6 +39,8 @@ export default function DocSyncBinding({
    * not carry; left out, a refused credential is reported but not curable.
    */
   onReconnect?: () => void
+  /** The same form at any time, to change the address or the login, or to remove the connection. */
+  onEditConnection?: () => void
 }) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
@@ -237,6 +240,21 @@ export default function DocSyncBinding({
                   </div>
                 </div>
               )}
+
+              {onEditConnection && (
+                <Row label={t('docsync.connection.title')} hint={t('docsync.connection.hint')}>
+                  <span className="flex justify-end">
+                    <button
+                      type="button"
+                      onClick={onEditConnection}
+                      className="flex items-center gap-1.5 rounded-lg border border-edge bg-surface px-2.5 py-1.5 text-caption font-medium text-content-secondary transition-colors hover:bg-surface-hover"
+                    >
+                      <KeyRound size={13} />
+                      {t('docsync.connection.edit')}
+                    </button>
+                  </span>
+                </Row>
+              )}
             </div>
           )}
         </>

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

@@ -1,4 +1,4 @@
-// FE-DOCSYNC-CONNECT-001 to FE-DOCSYNC-CONNECT-027
+// FE-DOCSYNC-CONNECT-001 to FE-DOCSYNC-CONNECT-030
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import en from '@trek/shared/i18n/en'
 import { render, screen, fireEvent, waitFor, act, within } from '../../../../tests/helpers/render'
@@ -13,6 +13,7 @@ const listLinks = vi.fn(async (_tripId: number | string): Promise<unknown> => []
 const status = vi.fn(async (_tripId: number | string): Promise<unknown> => ({ items: {}, links: [] }))
 const saveConnection = vi.fn(async (_tripId: number | string, _data: unknown): Promise<unknown> => ({ id: 1 }))
 const testConnection = vi.fn(async (_tripId: number | string, _data: unknown): Promise<unknown> => ({ connected: true }))
+const deleteConnection = vi.fn(async (_tripId: number | string, _id: number): Promise<unknown> => ({ success: true }))
 
 vi.mock('../../../api/client', async (importOriginal) => {
   const actual = await importOriginal<typeof import('../../../api/client')>()
@@ -26,6 +27,7 @@ vi.mock('../../../api/client', async (importOriginal) => {
       listLinks: (tripId: number | string) => listLinks(tripId),
       saveConnection: (tripId: number | string, data: unknown) => saveConnection(tripId, data),
       testConnection: (tripId: number | string, data: unknown) => testConnection(tripId, data),
+      deleteConnection: (tripId: number | string, id: number) => deleteConnection(tripId, id),
     },
   }
 })
@@ -81,11 +83,13 @@ function Harness({
   provider,
   onClose,
   onConnected,
+  onRemoved,
   waitForConnection,
 }: {
   provider: DocSyncProvider
   onClose: () => void
   onConnected: (providerId: string) => void
+  onRemoved?: () => void
   /**
    * Hold the dialog back until the stored connection is in hand, the way the
    * panel does: it only offers "connect" once it knows what is already there.
@@ -94,7 +98,9 @@ function Harness({
 }) {
   const sync = useDocSync(TRIP_ID, true)
   if (waitForConnection && !sync.connectionFor(provider.id)) return null
-  return <DocSyncConnectModal provider={provider} sync={sync} onClose={onClose} onConnected={onConnected} />
+  return (
+    <DocSyncConnectModal provider={provider} sync={sync} onClose={onClose} onConnected={onConnected} onRemoved={onRemoved} />
+  )
 }
 
 /** Let the hook's initial load land before anything is asserted. */
@@ -492,3 +498,52 @@ describe('DocSyncConnectModal with a connection already stored', () => {
     expect(saveConnection).toHaveBeenCalledWith(TRIP_ID, expect.objectContaining({ baseUrl: 'https://cloud.example.com' }))
   })
 })
+
+describe('DocSyncConnectModal removal', () => {
+  const removeButton = () => screen.queryByRole('button', { name: tx('docsync.connection.remove') })
+  // The confirmation is portalled after the dialog, so its button is the last one of that name.
+  const confirmRemoval = () => {
+    const named = screen.getAllByRole('button', { name: tx('docsync.connection.remove') })
+    return named[named.length - 1]
+  }
+
+  async function openWithRemoval(stored: boolean) {
+    if (stored) listConnections.mockResolvedValue([connection()])
+    const onRemoved = vi.fn()
+    render(<Harness provider={nextcloud} onClose={vi.fn()} onConnected={vi.fn()} onRemoved={onRemoved} waitForConnection={stored} />)
+    await flush()
+    return onRemoved
+  }
+
+  it('FE-DOCSYNC-CONNECT-028: a stored connection can be removed after a confirmation, and the dialog is told', async () => {
+    const onRemoved = await openWithRemoval(true)
+    await waitFor(() => expect(removeButton()).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: tx('docsync.connection.remove') }))
+    expect(deleteConnection).not.toHaveBeenCalled()
+    await screen.findByText(tx('docsync.connection.confirmRemove'))
+    fireEvent.click(confirmRemoval())
+
+    await waitFor(() => expect(deleteConnection).toHaveBeenCalledWith(TRIP_ID, 9))
+    await waitFor(() => expect(onRemoved).toHaveBeenCalled())
+  })
+
+  it('FE-DOCSYNC-CONNECT-029: a refused removal keeps the dialog and says why', async () => {
+    deleteConnection.mockRejectedValueOnce({ response: { status: 403, data: { error: 'forbidden' } } })
+    const onRemoved = await openWithRemoval(true)
+    await waitFor(() => expect(removeButton()).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: tx('docsync.connection.remove') }))
+    await screen.findByText(tx('docsync.connection.confirmRemove'))
+    fireEvent.click(confirmRemoval())
+
+    await waitFor(() => expect(deleteConnection).toHaveBeenCalled())
+    expect(onRemoved).not.toHaveBeenCalled()
+    expect(await screen.findByText(tx('docsync.error.forbidden'))).toBeInTheDocument()
+  })
+
+  it('FE-DOCSYNC-CONNECT-030: a first connection has nothing to remove', async () => {
+    await openWithRemoval(false)
+    expect(removeButton()).not.toBeInTheDocument()
+  })
+})

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

@@ -1,6 +1,7 @@
 import { useId, useState } from 'react'
 import { AlertTriangle, Check, Loader2, Plug, ShieldAlert } from 'lucide-react'
-import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT } from '../../shared/DialogShell'
+import { DeleteButton, DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT } from '../../shared/DialogShell'
+import ConfirmDialog from '../../shared/ConfirmDialog'
 import { Tooltip } from '../../shared/Tooltip'
 import ToggleSwitch from '../../Settings/ToggleSwitch'
 import { useTranslation } from '../../../i18n/TranslationContext'
@@ -22,11 +23,14 @@ export default function DocSyncConnectModal({
   sync,
   onClose,
   onConnected,
+  onRemoved,
 }: {
   provider: DocSyncProvider
   sync: ReturnType<typeof useDocSync>
   onClose: () => void
   onConnected: (providerId: string) => void
+  /** After the stored connection was removed from here; left out, the form offers no removal. */
+  onRemoved?: () => void
 }) {
   const { t } = useTranslation()
   const existing = sync.connectionFor(provider.id)
@@ -34,6 +38,11 @@ export default function DocSyncConnectModal({
 
   const form = useConnectForm(provider, existing, sync)
   const [verdict, setVerdict] = useState<DocSyncVerdict | null>(null)
+  const [confirmRemove, setConfirmRemove] = useState(false)
+
+  const remove = async () => {
+    if (existing && (await sync.removeConnection(existing.id))) onRemoved?.()
+  }
 
   const test = async () => setVerdict(await form.probe())
   const labelId = useId()
@@ -46,6 +55,7 @@ export default function DocSyncConnectModal({
     <DialogShell
       onClose={onClose}
       labelledBy={labelId}
+      blocked={confirmRemove}
       header={(
         <DialogHeader
           tile={<DialogTile>{Icon ? <Icon className="h-5 w-5 text-content" /> : <Plug size={20} strokeWidth={1.9} className="text-content-muted" />}</DialogTile>}
@@ -57,6 +67,13 @@ export default function DocSyncConnectModal({
       )}
       footer={(
         <DialogFooter>
+          {existing && onRemoved && (
+            <DeleteButton
+              label={t('docsync.connection.remove')}
+              onClick={() => setConfirmRemove(true)}
+              disabled={sync.busy === 'connection'}
+            />
+          )}
           <Verdict verdict={verdict} busy={sync.busy === 'test'} failure={sync.error} />
           <FooterSpacer />
           <DialogButton onClick={() => void test()} disabled={!form.complete || sync.busy === 'test'}>
@@ -101,6 +118,15 @@ export default function DocSyncConnectModal({
           </span>
         </label>
       </div>
+
+      <ConfirmDialog
+        isOpen={confirmRemove}
+        onClose={() => setConfirmRemove(false)}
+        onConfirm={() => void remove()}
+        title={t('docsync.connection.remove')}
+        message={t('docsync.connection.confirmRemove')}
+        confirmLabel={t('docsync.connection.remove')}
+      />
     </DialogShell>
   )
 }

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

@@ -62,6 +62,9 @@ export default function DocSyncPanel({
     setSelected(prev => (sync.links.some(l => l.id === prev) ? prev : (sync.links[0]?.id ?? null)))
   }, [sync.links])
 
+  // The connection behind the folder picker, which the picker can send back to.
+  const scopeProvider = scopeFor ? sync.providers.find(p => p.id === scopeFor) : undefined
+
   const attention = ATTENTION_STATES.reduce((n, k) => n + (sync.itemCounts[k] ?? 0), 0)
   const labelId = useId()
 
@@ -113,6 +116,7 @@ export default function DocSyncPanel({
                     sync={sync}
                     canManage={canManage}
                     onReconnect={activeProvider ? () => setReconnecting(activeProvider) : undefined}
+                    onEditConnection={canManage && activeProvider ? () => setReconnecting(activeProvider) : undefined}
                   />
                   {/* Every action in this column reports here: a refused run, a
                       switch that flipped back, a conflict the server would not
@@ -141,6 +145,7 @@ export default function DocSyncPanel({
           sync={sync}
           onClose={() => setConnecting(null)}
           onConnected={id => { setConnecting(null); setScopeFor(id) }}
+          onRemoved={() => setConnecting(null)}
         />
       )}
 
@@ -149,6 +154,7 @@ export default function DocSyncPanel({
           provider={reconnecting}
           sync={sync}
           onClose={() => setReconnecting(null)}
+          onRemoved={() => setReconnecting(null)}
           onConnected={id => {
             setReconnecting(null)
             // Run straight away, as binding does: the card still reports the
@@ -168,6 +174,7 @@ export default function DocSyncPanel({
           sync={sync}
           onClose={() => setScopeFor(null)}
           onBound={() => setScopeFor(null)}
+          onEditConnection={scopeProvider ? () => { setScopeFor(null); setConnecting(scopeProvider) } : undefined}
         />
       )}
     </>

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

@@ -1,4 +1,4 @@
-// FE-DOCSYNC-SCOPE-001 to FE-DOCSYNC-SCOPE-023
+// FE-DOCSYNC-SCOPE-001 to FE-DOCSYNC-SCOPE-024
 
 /**
  * The folder picker of the document-sync dialog.
@@ -84,9 +84,10 @@ function deferred<T>() {
   return { promise, resolve, reject }
 }
 
-function Harness({ suggestedName = 'trek-paris-42', providerName = 'Paperless' }: {
+function Harness({ suggestedName = 'trek-paris-42', providerName = 'Paperless', onEditConnection }: {
   suggestedName?: string
   providerName?: string
+  onEditConnection?: () => void
 }) {
   const sync = useDocSync(TRIP_ID, false)
   return (
@@ -97,6 +98,7 @@ function Harness({ suggestedName = 'trek-paris-42', providerName = 'Paperless' }
       sync={sync}
       onClose={onClose}
       onBound={onBound}
+      onEditConnection={onEditConnection}
     />
   )
 }
@@ -381,3 +383,20 @@ describe('DocSyncScopeModal errors', () => {
     expect(createButton()).toBeEnabled()
   })
 })
+
+describe('DocSyncScopeModal connection', () => {
+  it('FE-DOCSYNC-SCOPE-024: leads back to the stored connection before a folder is chosen', async () => {
+    const editButton = () => screen.queryByRole('button', { name: S['docsync.connection.edit'] })
+    const onEditConnection = vi.fn()
+    const first = render(<Harness onEditConnection={onEditConnection} />)
+    await waitFor(() => expect(listScopes).toHaveBeenCalled())
+
+    fireEvent.click(editButton() as HTMLElement)
+    expect(onEditConnection).toHaveBeenCalledTimes(1)
+    expect(createLink).not.toHaveBeenCalled()
+    first.unmount()
+
+    render(<Harness />)
+    expect(editButton()).not.toBeInTheDocument()
+  })
+})

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

@@ -1,5 +1,5 @@
 import { useId, useMemo, useState } from 'react'
-import { FolderPlus, Loader2, Search } from 'lucide-react'
+import { FolderPlus, KeyRound, Loader2, Search } from 'lucide-react'
 import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT } from '../../shared/DialogShell'
 import { useTranslation } from '../../../i18n/TranslationContext'
 import type { DocSyncConnection, useDocSync } from './useDocSync'
@@ -22,6 +22,7 @@ export default function DocSyncScopeModal({
   sync,
   onClose,
   onBound,
+  onEditConnection,
 }: {
   connection: DocSyncConnection
   providerName: string
@@ -30,6 +31,8 @@ export default function DocSyncScopeModal({
   sync: ReturnType<typeof useDocSync>
   onClose: () => void
   onBound: () => void
+  /** Back to the stored connection, to change the login or remove it before choosing a folder. */
+  onEditConnection?: () => void
 }) {
   const { t } = useTranslation()
   const labelId = useId()
@@ -63,7 +66,19 @@ export default function DocSyncScopeModal({
       )}
     >
       <div className="space-y-4">
-        <p className="text-caption text-content-muted">{t('docsync.scope.intro')}</p>
+        <div className="flex items-start justify-between gap-3">
+          <p className="text-caption text-content-muted">{t('docsync.scope.intro')}</p>
+          {onEditConnection && (
+            <button
+              type="button"
+              onClick={onEditConnection}
+              className="flex shrink-0 items-center gap-1.5 rounded-lg border border-edge px-2.5 py-1 text-caption font-medium text-content-secondary transition-colors hover:bg-surface-hover"
+            >
+              <KeyRound size={13} />
+              {t('docsync.connection.edit')}
+            </button>
+          )}
+        </div>
 
         <div className="rounded-xl border border-edge bg-surface-secondary p-3">
           <span className="mb-2 block text-body font-medium text-content">{t('docsync.scope.createTitle')}</span>

client/src/components/Files/docsync/useDocSync.test.ts

@@ -1,4 +1,4 @@
-// FE-DOCSYNC-HOOK-001 to FE-DOCSYNC-HOOK-030
+// FE-DOCSYNC-HOOK-001 to FE-DOCSYNC-HOOK-032
 
 /**
  * The document-sync hook.
@@ -22,6 +22,7 @@ const testConnectionApi = vi.fn(async (_tripId: number | string, _data: unknown)
 const updateLinkApi = vi.fn(async (_tripId: number | string, _linkId: number, _patch: unknown): Promise<unknown> => ({}))
 const syncNowApi = vi.fn(async (_tripId: number | string, _linkId: number, _full: boolean): Promise<unknown> => ({}))
 const listScopesApi = vi.fn(async (_tripId: number | string, _connectionId: number, _q?: string): Promise<unknown> => ({ scopes: [] }))
+const deleteConnectionApi = vi.fn(async (_tripId: number | string, _id: number): Promise<unknown> => ({ success: true }))
 const resolveApi = vi.fn(async (_tripId: number | string, _itemId: number, _keep: string): Promise<unknown> => ({ success: true }))
 
 vi.mock('../../../api/client', async (importOriginal) => {
@@ -40,6 +41,7 @@ vi.mock('../../../api/client', async (importOriginal) => {
       syncNow: (tripId: number | string, linkId: number, full: boolean) => syncNowApi(tripId, linkId, full),
       listScopes: (tripId: number | string, connectionId: number, q?: string) => listScopesApi(tripId, connectionId, q),
       resolve: (tripId: number | string, itemId: number, keep: string) => resolveApi(tripId, itemId, keep),
+      deleteConnection: (tripId: number | string, id: number) => deleteConnectionApi(tripId, id),
     },
   }
 })
@@ -126,6 +128,7 @@ beforeEach(() => {
   syncNowApi.mockResolvedValue({ state: 'ok', pulled: 0, pushed: 0, conflicts: 0, missing: 0 })
   listScopesApi.mockResolvedValue({ scopes: [] })
   resolveApi.mockResolvedValue({ success: true })
+  deleteConnectionApi.mockResolvedValue({ success: true })
 })
 
 describe('useDocSync initial load', () => {
@@ -471,6 +474,38 @@ describe('useDocSync resolveConflict', () => {
   })
 })
 
+describe('useDocSync removeConnection', () => {
+  it('FE-DOCSYNC-HOOK-031: forgets the connection and reloads, so its bindings leave the screen too', async () => {
+    const { result } = await mountLoaded()
+    expect(result.current.links).toHaveLength(1)
+    // The server drops the bindings with the connection (ON DELETE CASCADE).
+    listConnectionsApi.mockResolvedValue([])
+    listLinksApi.mockResolvedValue([])
+
+    let ok: boolean | undefined
+    await act(async () => { ok = await result.current.removeConnection(9) })
+
+    expect(ok).toBe(true)
+    expect(deleteConnectionApi).toHaveBeenCalledWith(TRIP, 9)
+    expect(result.current.connectionFor('nextcloud')).toBeNull()
+    expect(result.current.links).toEqual([])
+    expect(result.current.busy).toBeNull()
+  })
+
+  it('FE-DOCSYNC-HOOK-032: a refused removal keeps everything and says why', async () => {
+    deleteConnectionApi.mockRejectedValueOnce({ response: { status: 403, data: { error: 'forbidden' } } })
+    const { result } = await mountLoaded()
+
+    let ok: boolean | undefined
+    await act(async () => { ok = await result.current.removeConnection(9) })
+
+    expect(ok).toBe(false)
+    expect(result.current.error).toBe('forbidden')
+    expect(result.current.connectionFor('nextcloud')).not.toBeNull()
+    expect(result.current.busy).toBeNull()
+  })
+})
+
 describe('needsReauth', () => {
   it('FE-DOCSYNC-HOOK-030: reads a refused credential off either the state or the error code', () => {
     expect(needsReauth({ lastSyncState: 'needs_reauth', lastSyncError: null })).toBe(true)

client/src/components/Files/docsync/useDocSync.ts

@@ -264,6 +264,27 @@ export function useDocSync(tripId: number | string, enabled: boolean) {
     }
   }, [tripId, load])
 
+  /**
+   * Forget a stored connection, and with it every binding of this trip that
+   * runs through it. The documents stay on both sides; what goes is the
+   * address and the login TREK kept for the store, which is the one thing a
+   * person changing accounts or folders had no way to take back.
+   */
+  const removeConnection = useCallback(async (connectionId: number) => {
+    setBusy('connection')
+    setError(null)
+    try {
+      await docsyncApi.deleteConnection(tripId, connectionId)
+      await load()
+      return true
+    } catch (e: unknown) {
+      setError(readError(e))
+      return false
+    } finally {
+      setBusy(null)
+    }
+  }, [tripId, load])
+
   /**
    * Probe without saving. Always resolves to a verdict object: the route
    * answers 200 even for an unreachable instance, because a form showing a typo
@@ -427,7 +448,7 @@ export function useDocSync(tripId: number | string, enabled: boolean) {
     connections, links, itemCounts,
     loading, busy, error,
     connectionFor, load,
-    saveConnection, testConnection,
+    saveConnection, testConnection, removeConnection,
     loadScopes, createScope,
     createLink, updateLink, removeLink, syncNow, resolveConflict,
   }

client/src/components/Help/HelpPanel.tsx

@@ -102,16 +102,20 @@ export default function HelpPanel(): React.ReactElement | null {
           <HelpNav context={context} currentId={contextId} activeGuideId={!searching && guide ? guide.id : null} />
 
           <div className="relative flex flex-col min-h-0 bg-surface" role="main">
-            <button
-              type="button"
-              onClick={closeHelp}
-              aria-label={t('help.center.close')}
-              className="absolute top-4 end-4 z-10 w-9 h-9 rounded-full flex items-center justify-center text-content-muted bg-surface-card border border-edge shadow-card hover:text-content hover:bg-surface-hover transition-colors"
-            >
-              <X className="w-4 h-4" />
-            </button>
+            {/* The close button sits in a row of its own above the scrolling content rather
+                than floating over it, so no card ever runs up against it. */}
+            <div className="flex shrink-0 justify-end px-4 pt-4">
+              <button
+                type="button"
+                onClick={closeHelp}
+                aria-label={t('help.center.close')}
+                className="w-9 h-9 rounded-full flex items-center justify-center text-content-muted bg-surface-card border border-edge shadow-card hover:text-content hover:bg-surface-hover transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
             <div ref={scrollRef} className="trek-help-scroll flex-1 min-h-0 overflow-y-auto overscroll-contain">
-              <div className="max-w-[1080px] mx-auto px-6 sm:px-10 py-8">
+              <div className="max-w-[1080px] mx-auto px-6 sm:px-10 pt-4 pb-8">
                 {searching ? (
                   <HelpSearchResults key="search" />
                 ) : guide ? (

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

@@ -1,4 +1,4 @@
-// FE-COMP-JOURNEYDATEPICKER-001 to FE-COMP-JOURNEYDATEPICKER-007
+// FE-COMP-JOURNEYDATEPICKER-001 to FE-COMP-JOURNEYDATEPICKER-008
 import React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '../../../tests/helpers/render'
@@ -119,3 +119,28 @@ describe('DatePicker week start (#2029)', () => {
     }
   })
 })
+
+describe('DatePicker inside a clipping dialog (#2858)', () => {
+  it('FE-COMP-JOURNEYDATEPICKER-008: the calendar floats over the page, stays inside the viewport and closes on a click away', async () => {
+    const user = userEvent.setup()
+    const { container } = render(
+      <div style={{ overflow: 'hidden' }}>
+        <DatePicker value="2026-03-15" onChange={vi.fn()} />
+      </div>,
+    )
+    const trigger = screen.getByText(/Mar 15, 2026/).closest('button') as HTMLButtonElement
+    // A trigger at the right edge, where the end date of a range sits.
+    trigger.getBoundingClientRect = () => ({ top: 100, bottom: 136, left: window.innerWidth - 120, right: window.innerWidth - 8, width: 112, height: 36, x: 0, y: 0, toJSON: () => ({}) })
+    await user.click(trigger)
+
+    const day31 = screen.getByRole('button', { name: '31' })
+    // Rendered outside the dialog that would clip it.
+    expect(container.contains(day31)).toBe(false)
+    const panel = day31.closest('.fixed') as HTMLElement
+    expect(panel.style.top).toBe('140px')
+    expect(parseFloat(panel.style.left)).toBe(window.innerWidth - 280 - 8)
+
+    await user.click(document.querySelector('[role="presentation"]') as HTMLElement)
+    expect(screen.queryByRole('button', { name: '31' })).toBeNull()
+  })
+})

client/src/components/Journey/JourneyDetailPageDatePicker.tsx

@@ -1,9 +1,11 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { localIsoDate } from '../../utils/localDate'
 import { ArrowLeft, ChevronRight, Calendar } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { useWeekStartDay } from '../../hooks/useWeekStartDay'
 import { leadingBlanks, weekdayLabels } from '../../utils/calendarWeek'
+import { useAnchoredPosition } from '../../hooks/useAnchoredPosition'
 
 /**
  * The header steps up a level on each click, days → months → years, and a
@@ -14,6 +16,9 @@ import { leadingBlanks, weekdayLabels } from '../../utils/calendarWeek'
  */
 type CalendarView = 'days' | 'months' | 'years'
 const YEAR_PAGE_SIZE = 12
+/** The calendar's width; `w-[280px]` below. */
+const PANEL_WIDTH = 280
+const VIEWPORT_PAD = 8
 
 export function DatePicker({ value, onChange, tripDates }: {
   value: string
@@ -23,6 +28,13 @@ export function DatePicker({ value, onChange, tripDates }: {
   const { t, locale } = useTranslation()
   const weekStart = useWeekStartDay()
   const [open, setOpen] = useState(false)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  // The calendar used to hang absolutely under its trigger, inside dialogs that clip
+  // their content: the photo picker cut off the last week and, for the end date in
+  // the right-hand column, the last weekday (#2858). It now floats over the page,
+  // pinned to the trigger, flipped above it when below is too short and kept inside
+  // the viewport sideways.
+  const anchored = useAnchoredPosition(triggerRef, open, { estimatedHeight: 340, matchWidth: false })
   const [view, setView] = useState<CalendarView>('days')
   const [yearPageStart, setYearPageStart] = useState(0)
   const [viewMonth, setViewMonth] = useState(() => {
@@ -107,6 +119,7 @@ export function DatePicker({ value, onChange, tripDates }: {
   return (
     <div className="relative">
       <button
+        ref={triggerRef}
         type="button"
         onClick={toggleOpen}
         className="w-full px-3 py-2 border border-zinc-200 dark:border-zinc-700 rounded-lg text-[13px] bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white text-start flex items-center justify-between"
@@ -122,12 +135,20 @@ export function DatePicker({ value, onChange, tripDates }: {
         <Calendar size={13} className="text-zinc-400" />
       </button>
 
-      {open && (
+      {open && anchored && createPortal(
         <>
           {/* Click-away catcher — no semantics of its own; the trigger button
               above closes the popover again from the keyboard. */}
-          <div role="presentation" className="fixed inset-0 z-[10]" onClick={() => setOpen(false)} />
-          <div className="absolute top-full start-0 mt-1 z-[20] bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-lg p-3 w-[280px]">
+          <div role="presentation" className="fixed inset-0 z-[var(--z-toast)]" onClick={() => setOpen(false)} />
+          <div
+            className="fixed z-[var(--z-toast)] overflow-y-auto bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-lg p-3 w-[280px]"
+            style={{
+              top: anchored.top,
+              bottom: anchored.bottom,
+              left: Math.max(VIEWPORT_PAD, Math.min(anchored.left, window.innerWidth - PANEL_WIDTH - VIEWPORT_PAD)),
+              maxHeight: anchored.maxHeight,
+            }}
+          >
             {/* Header: arrows step the current view, the label climbs to the next one up */}
             <div className="flex items-center justify-between mb-2">
               <button type="button" onClick={handlePrev} aria-label={prevLabel} className={navButton}>
@@ -200,7 +221,7 @@ export function DatePicker({ value, onChange, tripDates }: {
                       >
                         {day}
                         {isTrip && !isSelected && (
-                          <span className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-indigo-500" />
+                          <span className="absolute bottom-1 inset-x-0 mx-auto w-1 h-1 rounded-full bg-indigo-500" />
                         )}
                       </button>
                     )
@@ -209,7 +230,8 @@ export function DatePicker({ value, onChange, tripDates }: {
               </>
             )}
           </div>
-        </>
+        </>,
+        document.body,
       )}
     </div>
   )

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

@@ -375,11 +375,12 @@ describe('ProviderPicker', () => {
     await user.click(screen.getByRole('button', { name: 'Search' }))
     expect(ranges).toHaveLength(0)
 
+    // The calendar opens in a portal, so its days are looked up on the page, not under the trigger.
     const [fromPicker, toPicker] = Array.from(baseElement.querySelectorAll('.flex-1 > .relative')) as HTMLElement[]
     await user.click(within(fromPicker).getByRole('button'))
-    await user.click(within(fromPicker).getByRole('button', { name: '3' }))
+    await user.click(screen.getByRole('button', { name: '3' }))
     await user.click(within(toPicker).getByRole('button'))
-    await user.click(within(toPicker).getByRole('button', { name: '9' }))
+    await user.click(screen.getByRole('button', { name: '9' }))
     await user.click(screen.getByRole('button', { name: 'Search' }))
 
     await waitFor(() => expect(ranges).toHaveLength(1))

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

@@ -1,4 +1,4 @@
-// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-054
+// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-062
 
 vi.mock('../../api/websocket', () => ({
   connect: vi.fn(),
@@ -12,6 +12,35 @@ vi.mock('../../api/websocket', () => ({
 
 // Leaflet does not work in jsdom — mock the entire library
 vi.mock('leaflet', () => {
+  const domEvent = {
+    on: vi.fn((el: HTMLElement, types: string, fn: (e: Event) => void) => {
+      types.split(' ').forEach(type => el.addEventListener(type, fn));
+    }),
+    stopPropagation: vi.fn((e: Event) => e.stopPropagation()),
+    disableClickPropagation: vi.fn((el: HTMLElement) => {
+      for (const type of ['mousedown', 'touchstart', 'dblclick', 'contextmenu']) el.addEventListener(type, e => e.stopPropagation());
+    }),
+  };
+  // The openable card (#2885): one per map, put on and taken off by the map itself.
+  // Its element is built on the first add, inside a stand-in for the map container.
+  const cardState = { onMap: false, element: null as HTMLElement | null, onAdd: [] as (() => void)[] };
+  const mockCard = {
+    state: cardState,
+    once: vi.fn((_type: string, fn: () => void) => { cardState.onAdd.push(fn); }),
+    setLatLng: vi.fn().mockReturnThis(),
+    setContent: vi.fn().mockReturnThis(),
+    getElement: vi.fn(() => cardState.element),
+    addTo: vi.fn(() => {
+      if (!cardState.element) {
+        cardState.element = document.createElement('div');
+        cardState.element.innerHTML = '<div class="trek-journey-popup-title">card</div>';
+        document.createElement('div').appendChild(cardState.element);
+      }
+      cardState.onMap = true;
+      cardState.onAdd.splice(0).forEach(fn => fn());
+    }),
+    remove: vi.fn(() => { cardState.onMap = false; }),
+  };
   const mockMarker = {
     addTo: vi.fn().mockReturnThis(),
     bindTooltip: vi.fn().mockReturnThis(),
@@ -38,31 +67,38 @@ vi.mock('leaflet', () => {
     getCenter: vi.fn(() => ({ lat: 0, lng: 0 })),
     zoomIn: vi.fn(),
     zoomOut: vi.fn(),
-    // The photo layer subscribes to zoom/pan and clusters in screen space (#1614).
+    // The photo and mark layers subscribe to zoom/pan and cluster in world
+    // pixels at the current zoom (#1614, #2889).
     on: vi.fn(),
     off: vi.fn(),
+    project: vi.fn(() => ({ x: 0, y: 0 })),
     latLngToContainerPoint: vi.fn(() => ({ x: 0, y: 0 })),
+    hasLayer: vi.fn((layer: unknown) => (layer === mockCard ? cardState.onMap : true)),
   };
   return {
     default: {
       map: vi.fn(() => mockMap),
       tileLayer: vi.fn(() => ({ addTo: vi.fn(), setUrl: vi.fn() })),
       marker: vi.fn(() => mockMarker),
-      polyline: vi.fn(() => { const line: any = { addTo: vi.fn(() => line), bindTooltip: vi.fn(() => line) }; return line }),
+      polyline: vi.fn(() => { const line: any = { addTo: vi.fn(() => line), bindTooltip: vi.fn(() => line), remove: vi.fn() }; return line }),
       divIcon: vi.fn(() => ({})),
       latLngBounds: vi.fn(() => ({})),
       layerGroup: vi.fn(() => ({ addLayer: vi.fn(), addTo: vi.fn(), remove: vi.fn() })),
       // The map builds its own attribution control so it can collapse to the credit
       // alone (see the GL twin: the phone lays a carousel over the bottom edge).
       control: { attribution: vi.fn(() => ({ addTo: vi.fn() })) },
+      tooltip: vi.fn(() => mockCard),
+      DomEvent: domEvent,
     },
     map: vi.fn(() => mockMap),
     tileLayer: vi.fn(() => ({ addTo: vi.fn(), setUrl: vi.fn() })),
     marker: vi.fn(() => mockMarker),
-    polyline: vi.fn(() => { const line: any = { addTo: vi.fn(() => line), bindTooltip: vi.fn(() => line) }; return line }),
+    polyline: vi.fn(() => { const line: any = { addTo: vi.fn(() => line), bindTooltip: vi.fn(() => line), remove: vi.fn() }; return line }),
     divIcon: vi.fn(() => ({})),
     latLngBounds: vi.fn(() => ({})),
     control: { attribution: vi.fn(() => ({ addTo: vi.fn() })) },
+    tooltip: vi.fn(() => mockCard),
+    DomEvent: domEvent,
   };
 });
 
@@ -76,6 +112,9 @@ import type { Mock } from 'vitest';
 import L from 'leaflet';
 import JourneyMap from './JourneyMap';
 import type { JourneyMapHandle } from './JourneyMap';
+import type { JourneyMapLayerVisibility } from './journeyMapLayers';
+import { mercatorWorldPx } from './journeyMapMarks';
+import type { JourneyMapStay } from '@trek/shared';
 
 // maplibre-gl-leaflet hangs the vector basemap into Leaflet's tile pane. The mock
 // only has to be callable and hand back a layer with the three methods the callers
@@ -178,6 +217,115 @@ describe('JourneyMap', () => {
     );
   });
 
+  describe('the marker card as a way into the entry (#2885)', () => {
+    interface MockCard {
+      state: { onMap: boolean; element: HTMLElement | null; onAdd: (() => void)[] };
+      addTo: Mock;
+      remove: Mock;
+      setContent: Mock;
+    }
+    // The leaflet mock hands every map the same card, so each case starts it unbuilt and off the map.
+    function mockedCard(): MockCard {
+      const card = vi.mocked(L.tooltip)() as unknown as MockCard;
+      vi.mocked(L.tooltip).mockClear();
+      return card;
+    }
+
+    beforeEach(() => {
+      Object.assign(mockedCard().state, { onMap: false, element: null, onAdd: [] });
+    });
+
+    function renderOpenable(onMarkerCardClick = vi.fn(), visibility?: JourneyMapLayerVisibility) {
+      const ref = React.createRef<JourneyMapHandle>();
+      const view = render(
+        <JourneyMap ref={ref} checkins={[]} entries={entriesWithCoords} onMarkerCardClick={onMarkerCardClick} layerVisibility={visibility} />,
+      );
+      return { ...view, ref, onMarkerCardClick };
+    }
+
+    function cardElement(): HTMLElement {
+      const { element } = mockedCard().state;
+      if (!element) throw new Error('the card was never built');
+      return element;
+    }
+
+    function cardTitle(): HTMLElement {
+      return cardElement().firstElementChild as HTMLElement;
+    }
+
+    it('FE-COMP-JOURNEYMAP-059: a tap on the card over the active pin opens that entry and never reaches the map', () => {
+      const { ref, onMarkerCardClick } = renderOpenable();
+      act(() => ref.current?.highlightMarker('e2'));
+
+      expect(L.tooltip).toHaveBeenCalledWith(expect.objectContaining({ className: 'map-tooltip trek-journey-tooltip is-openable' }));
+      const container = cardElement().parentElement as HTMLElement;
+      const mapClick = vi.fn();
+      const mapPress = vi.fn();
+      container.addEventListener('click', mapClick);
+      container.addEventListener('mousedown', mapPress);
+
+      cardTitle().dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+      cardTitle().click();
+      act(() => ref.current?.highlightMarker('e1'));
+      cardTitle().click();
+
+      expect(onMarkerCardClick.mock.calls).toEqual([['e2'], ['e1']]);
+      expect(mapClick).not.toHaveBeenCalled();
+      expect(mapPress).not.toHaveBeenCalled();
+    });
+
+    it('FE-COMP-JOURNEYMAP-060: the pins do not open or close the card, so leaving the pin for the card keeps it', () => {
+      const { ref } = renderOpenable();
+      act(() => ref.current?.highlightMarker('e1'));
+
+      // A bound tooltip is what Leaflet closes on the pin's mouseout and blur, which
+      // a tap on the card sends first. The pins bind none and listen for the tap alone.
+      expect(mockedMarker().bindTooltip).not.toHaveBeenCalled();
+      expect(vi.mocked(mockedMarker().on).mock.calls.map((call: unknown[]) => call[0])).toEqual(['click', 'click']);
+      expect(mockedCard().state.onMap).toBe(true);
+      expect(mockedCard().remove).not.toHaveBeenCalled();
+    });
+
+    it('FE-COMP-JOURNEYMAP-061: the card follows the active pin and leaves with it or with the pins', () => {
+      mockedMarkerWithRemove();
+      const card = mockedCard();
+      const shown = { plan: true, recorded: true, entries: true };
+      const onMarkerCardClick = vi.fn();
+      const { ref, rerender } = renderOpenable(onMarkerCardClick, shown);
+      const map = mockedMap();
+
+      act(() => ref.current?.highlightMarker('e1'));
+      expect(card.setContent).toHaveBeenLastCalledWith(expect.stringContaining('Paris'));
+      act(() => ref.current?.highlightMarker('e2'));
+      expect(card.setContent).toHaveBeenLastCalledWith(expect.stringContaining('Berlin'));
+      expect(card.addTo).toHaveBeenCalledTimes(1);
+
+      act(() => ref.current?.highlightMarker(null));
+      expect(card.state.onMap).toBe(false);
+
+      act(() => ref.current?.highlightMarker('e1'));
+      map.hasLayer.mockImplementation((layer: unknown) => layer === card && card.state.onMap);
+      try {
+        rerender(<JourneyMap ref={ref} checkins={[]} entries={entriesWithCoords} onMarkerCardClick={onMarkerCardClick} layerVisibility={{ ...shown, entries: false }} />);
+        expect(card.state.onMap).toBe(false);
+      } finally {
+        map.hasLayer.mockImplementation((layer: unknown) => (layer === card ? card.state.onMap : true));
+      }
+    });
+
+    it('FE-COMP-JOURNEYMAP-062: without a handler the card stays a hover label on each pin that the drags on the map pass through', () => {
+      const ref = React.createRef<JourneyMapHandle>();
+      render(<JourneyMap ref={ref} checkins={[]} entries={entriesWithCoords} />);
+      act(() => ref.current?.highlightMarker('e1'));
+
+      expect(mockedMarker().bindTooltip).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({ className: 'map-tooltip trek-journey-tooltip' }),
+      );
+      expect(L.tooltip).not.toHaveBeenCalled();
+    });
+  });
+
   it('FE-COMP-JOURNEYMAP-006: exposes imperative handle (focusMarker)', () => {
     const ref = React.createRef<JourneyMapHandle>();
     render(
@@ -201,6 +349,15 @@ describe('JourneyMap', () => {
     expect(firstCall.html).toContain('>1<');
   });
 
+  it('FE-COMP-JOURNEYMAP-058: a stop without a number (a draft) gets an unnumbered pin', () => {
+    render(
+      <JourneyMap checkins={[]} entries={[{ ...entriesWithCoords[0], dayLabel: null }]} />
+    );
+    const html = String(vi.mocked(L.divIcon).mock.calls[0][0]?.html);
+    expect(html).toContain('<svg');
+    expect(html).toMatch(/font-weight="700"><\/text>/);
+  });
+
   it('FE-COMP-JOURNEYMAP-008: renders markers with mood-based entry labels', () => {
     const entriesWithMood = [
       { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Happy Paris', mood: 'happy', entry_date: '2025-06-01' },
@@ -782,9 +939,8 @@ describe('JourneyMap', () => {
   });
 
   // #2254 — the map effect defers its opening fitBounds/setView to a rAF, so this
-  // effect can draw while the map still has no center or zoom. Clustering
-  // projects to container pixels, which throws in that window and took the whole
-  // public journey page down with it.
+  // effect can draw while the map still has no center or zoom. Projecting in that
+  // window throws and took the whole public journey page down with it.
   it('FE-COMP-JOURNEYMAP-050: waits out a map that has no view yet, then draws on moveend', () => {
     const noView = () => { throw new Error('Set map center and zoom first.'); };
     let hasView = false;
@@ -794,12 +950,12 @@ describe('JourneyMap', () => {
     // The mock hands out one shared map instance, so it can be reached — and
     // stripped of its view — before the component ever builds one. Typed down to
     // the three spies this needs: L.map's signature promises a real Leaflet map.
-    type MapProbe = { getCenter: Mock; latLngToContainerPoint: Mock; on: Mock };
+    type MapProbe = { getCenter: Mock; project: Mock; on: Mock };
     L.map(document.createElement('div'));
     const map = mockedMap() as MapProbe;
     vi.mocked(L.map).mockClear();
     map.getCenter.mockImplementation(() => (hasView ? { lat: 0, lng: 0 } : noView()));
-    map.latLngToContainerPoint.mockImplementation(() => (hasView ? { x: 0, y: 0 } : noView()));
+    map.project.mockImplementation(() => (hasView ? { x: 0, y: 0 } : noView()));
 
     try {
       // Rendering must survive the viewless window, and draw nothing in it.
@@ -820,7 +976,7 @@ describe('JourneyMap', () => {
       expect(photoHtml()[0]).toContain('/uploads/late.jpg');
     } finally {
       map.getCenter.mockImplementation(() => ({ lat: 0, lng: 0 }));
-      map.latLngToContainerPoint.mockImplementation(() => ({ x: 0, y: 0 }));
+      map.project.mockImplementation(() => ({ x: 0, y: 0 }));
     }
   });
 
@@ -868,6 +1024,108 @@ describe('JourneyMap', () => {
     expect(divIconHtml(0)).not.toContain('#16a34a');
     expect(divIconHtml(1)).toContain('#16a34a');
   });
+
+  // #2889: a pan used to shift the screen grid the layers cluster on, so photos
+  // near a cell edge changed groups, counts and thumbnails without any zoom.
+  it('FE-COMP-JOURNEYMAP-055: panning keeps the photo and mark groups, only a zoom regroups them', () => {
+    const photos = [
+      { id: 'p1', lat: 45, lng: 5, thumbUrl: '/uploads/a.jpg' },
+      { id: 'p2', lat: 45, lng: 5.05, thumbUrl: '/uploads/b.jpg' },
+    ];
+    const marks = [
+      { kind: 'stay' as const, key: 's1', lat: 45, lng: 5, color: '#14b8a6', stay: {} as JourneyMapStay },
+      { kind: 'stay' as const, key: 's2', lat: 45, lng: 5.05, color: '#14b8a6', stay: {} as JourneyMapStay },
+    ];
+    L.map(document.createElement('div'));
+    const map = mockedMap() as { project: Mock; latLngToContainerPoint: Mock; getZoom: Mock; on: Mock; off: Mock };
+    vi.mocked(L.map).mockClear();
+    let zoom = 3;
+    let pan = 0;
+    map.getZoom.mockImplementation(() => zoom);
+    map.project.mockImplementation(([lat, lng]: [number, number], z: number) => mercatorWorldPx(lat, lng, z, 256));
+    map.latLngToContainerPoint.mockImplementation(([lat, lng]: [number, number]) => {
+      const world = mercatorWorldPx(lat, lng, zoom, 256);
+      return { x: world.x - pan, y: world.y };
+    });
+    const drawnSince = (from: number) =>
+      vi.mocked(L.divIcon).mock.calls.slice(from).map(c => String(c[0]?.html)).filter(h => h.includes('/uploads/') || h.includes('#14b8a6'));
+    const moveEnd = () => act(() => {
+      const gone = new Set(map.off.mock.calls.map(c => c[1]));
+      for (const [event, handler] of map.on.mock.calls) if (event === 'moveend' && !gone.has(handler)) (handler as () => void)();
+    });
+
+    try {
+      render(<JourneyMap checkins={[]} entries={[]} photos={photos} marks={marks} />);
+      let from = vi.mocked(L.divIcon).mock.calls.length;
+      moveEnd();
+      const first = drawnSince(from);
+      expect(first.filter(h => h.includes('/uploads/'))).toEqual([expect.stringContaining('>2<')]);
+      expect(first.filter(h => h.includes('#14b8a6'))).toHaveLength(1);
+      expect(map.project).toHaveBeenCalledWith([45, 5.05], 3);
+      expect(map.latLngToContainerPoint).not.toHaveBeenCalled();
+
+      // A pan that puts a 64 px cell edge between the two photos on screen.
+      const mid = (mercatorWorldPx(45, 5, 3, 256).x + mercatorWorldPx(45, 5.05, 3, 256).x) / 2;
+      pan = mid - (Math.floor(mid / 64) + 0.5) * 64;
+      from = vi.mocked(L.divIcon).mock.calls.length;
+      moveEnd();
+      expect(drawnSince(from)).toEqual(first);
+
+      zoom = 12;
+      from = vi.mocked(L.divIcon).mock.calls.length;
+      moveEnd();
+      const zoomed = drawnSince(from);
+      expect(zoomed.filter(h => h.includes('/uploads/'))).toHaveLength(2);
+      expect(zoomed.filter(h => h.includes('#14b8a6'))).toHaveLength(2);
+    } finally {
+      map.getZoom.mockImplementation(() => 10);
+      map.project.mockImplementation(() => ({ x: 0, y: 0 }));
+      map.latLngToContainerPoint.mockImplementation(() => ({ x: 0, y: 0 }));
+    }
+  });
+
+  describe('the line between the entries on recorded days (#2888)', () => {
+    const days = [
+      { id: 'a', lat: 48.1, lng: 11.5, title: 'A', mood: null, entry_date: '2026-10-29' },
+      { id: 'b', lat: 48.2, lng: 11.6, title: 'B', mood: null, entry_date: '2026-10-29' },
+      { id: 'c', lat: 48.3, lng: 11.7, title: 'C', mood: null, entry_date: '2026-10-30' },
+    ];
+    const tracks = [
+      { place_id: -1, trip_id: 0, name: '2026-10-29', color: '#7c3aed', points: [[48.1, 11.5], [48.2, 11.6]] as [number, number][], kind: 'dawarich_live' as const, date: '2026-10-29' },
+    ];
+    const connectionLines = () => {
+      const polyline = vi.mocked(L.polyline).mock;
+      return polyline.calls
+        .map((call, i) => ({ coords: call[0], dashed: (call[1] as { dashArray?: string } | undefined)?.dashArray === '4 6', line: polyline.results[i].value as { addTo: Mock; remove: Mock } }))
+        .filter(call => call.dashed);
+    };
+
+    it('FE-COMP-JOURNEYMAP-056: leaves the recorded day to its track and keeps the jump to the next day', () => {
+      render(<JourneyMap checkins={[]} entries={days} tracks={tracks} />);
+
+      const lines = connectionLines();
+      expect(lines.map(l => l.coords)).toEqual([
+        [[48.2, 11.6], [48.3, 11.7]],
+        [[48.1, 11.5], [48.2, 11.6]],
+      ]);
+      expect(lines[0].line.addTo).toHaveBeenCalled();
+      expect(lines[1].line.addTo).not.toHaveBeenCalled();
+    });
+
+    it('FE-COMP-JOURNEYMAP-057: hiding what was recorded puts the covered stretch back, hiding the entries takes it off again', () => {
+      mockedMarkerWithRemove();
+      const shown = { plan: true, recorded: true, entries: true };
+      const { rerender } = render(<JourneyMap checkins={[]} entries={days} tracks={tracks} layerVisibility={shown} />);
+      const covered = connectionLines()[1].line;
+
+      rerender(<JourneyMap checkins={[]} entries={days} tracks={tracks} layerVisibility={{ ...shown, recorded: false }} />);
+      expect(covered.addTo).toHaveBeenCalledTimes(1);
+
+      rerender(<JourneyMap checkins={[]} entries={days} tracks={tracks} layerVisibility={{ ...shown, recorded: false, entries: false }} />);
+      expect(covered.remove).toHaveBeenCalledTimes(1);
+      expect(L.map).toHaveBeenCalledTimes(1);
+    });
+  });
 });
 
 /** The shared marker spy with the `remove` a hidden layer is taken off by. */

client/src/components/Journey/JourneyMap.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useImperativeHandle, useCallback, type CSSProperties, type Ref } from 'react'
+import { useEffect, useRef, useImperativeHandle, useCallback, type CSSProperties, type Ref, type RefObject } from 'react'
 import { clusterPhotos, photoMarkerHtml, type MapPhoto } from './journeyPhotoLayer'
 import L from 'leaflet'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -11,7 +11,8 @@ import { escapeHtml, type JourneyTrack } from '@trek/shared'
 import { ensureJourneyPopupStyle, formatMarkerDate, journeyPopupHtml } from './journeyMapPopup'
 import { PLANNED_BADGE_SVG, type JourneyMapMark } from './journeyMapMarks'
 import { isPlannedTrack, type JourneyMapLayerVisibility } from './journeyMapLayers'
-import { NOTHING_DRAWN, drawLeafletMarks, switchLeafletLayers, type DrawnLayers, type LeafletLayerKind } from './journeyLeafletLayers'
+import { NOTHING_DRAWN, drawLeafletMarks, isLeafletLayerShown, leafletWorldPx, switchLeafletLayers, type DrawnLayers, type LeafletLayerKind } from './journeyLeafletLayers'
+import { entryConnections } from './journeyMapConnections'
 
 export interface MapMarkerItem {
   id: string
@@ -22,7 +23,7 @@ export interface MapMarkerItem {
   mood?: string | null
   time: string
   dayColor: string
-  dayLabel: number
+  dayLabel: number | null
   photoUrls: string[]
 }
 
@@ -44,7 +45,7 @@ interface MapEntry {
   mood?: string | null
   entry_date: string
   dayColor?: string
-  dayLabel?: number
+  dayLabel?: number | null
   /** Thumbnails for the marker card, already resolved by the caller (the share view signs its own). */
   photoUrls?: string[]
 }
@@ -65,15 +66,15 @@ interface Props {
   onMarkerClick?: (id: string, type?: string) => void
   fullScreen?: boolean
   /**
-   * Leave the marker labels off.
+   * Open the entry a marker card names when the card itself is tapped.
    *
-   * On the phone the map sits above a carousel whose active card already carries
-   * the entry's name, and a tooltip on touch is a tap-to-open box rather than a
-   * hover hint — so it says the same thing twice and covers the map to do it
-   * (discussion #2299). On desktop the label is the only name a marker has, so
-   * this stays off there.
+   * On a phone the card is what a tap on a pin brings up, so it has to lead
+   * somewhere (#2885). Wiring it is what makes the card take the pointer, and the
+   * card then stands over the active pin, as the GL popup does; without
+   * it the card stays a label the map's drags pass through, as on desktop, where
+   * it is a hover card the mouse cannot reach.
    */
-  hideMarkerTooltip?: boolean
+  onMarkerCardClick?: (entryId: string) => void
   paddingBottom?: number
   /** CARTO key from the share payload: the public journey has no settings store to read. */
   cartoApiKey?: string
@@ -116,7 +117,7 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
         mood: e.mood,
         time: e.entry_date,
         dayColor: e.dayColor || '#52525B',
-        dayLabel: e.dayLabel ?? 1,
+        dayLabel: e.dayLabel === undefined ? 1 : e.dayLabel,
         photoUrls: e.photoUrls ?? [],
       })
     }
@@ -128,12 +129,12 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
 const MARKER_W = 28
 const MARKER_H = 36
 
-function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean, planned = false): string {
+function markerSvg(dayColor: string, dayLabel: number | null, highlighted: boolean, planned = false): string {
   const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
   const shadow = highlighted
     ? 'filter:drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
     : 'filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-  const label = String(dayLabel)
+  const label = dayLabel === null ? '' : String(dayLabel)
   const scale = highlighted ? 1.2 : 1
 
   return `<div style="transform:scale(${scale});transition:transform 0.2s ease;${shadow};transform-origin:bottom center">
@@ -184,6 +185,91 @@ function panToMarker(map: L.Map, marker: L.Marker): void {
   })
 }
 
+/**
+ * The same card the GL renderer shows, from the same builder: which map engine a
+ * reader happens to have selected should not change what a marker tells them
+ * (discussion #2299). The builder escapes everything that came from a person,
+ * which matters most here, since this map is what the public journey page renders.
+ */
+function entryCardHtml(item: MapMarkerItem): string {
+  return journeyPopupHtml({
+    title: item.label || item.locationName || 'Entry',
+    place: item.label ? item.locationName : '',
+    date: formatMarkerDate(item.time),
+    photoUrls: item.photoUrls,
+  })
+}
+
+const ENTRY_CARD_OPTIONS: L.TooltipOptions = { direction: 'top', offset: [0, -MARKER_H] }
+
+/**
+ * The card that opens its entry when tapped (#2885), one per map like the GL
+ * popup, shown above the active pin.
+ *
+ * It is deliberately not bound to the pins. A bound tooltip is opened and closed
+ * by Leaflet on the pin's hover and focus, and a tap on the card is, to a phone,
+ * the pointer leaving the pin: the pin's mouseout closed the card between the
+ * tap and its click. Driven by the active pin alone, nothing but a change of
+ * entry takes it away.
+ */
+function createEntryCard(open: () => void): L.Tooltip {
+  const card = L.tooltip({ ...ENTRY_CARD_OPTIONS, className: 'map-tooltip trek-journey-tooltip is-openable' })
+  // The element is built on the first open and kept for every later one.
+  card.once('add', () => {
+    const el = card.getElement()
+    if (!el) return
+    // A press on the card is not the start of a drag or a tap on the map.
+    L.DomEvent.disableClickPropagation(el)
+    L.DomEvent.on(el, 'click', (ev) => {
+      L.DomEvent.stopPropagation(ev)
+      open()
+    })
+  })
+  return card
+}
+
+interface PinRefs {
+  onCardClickRef: RefObject<((entryId: string) => void) | undefined>
+  mapRef: RefObject<L.Map | null>
+  markersRef: RefObject<Map<string, L.Marker>>
+  itemsRef: RefObject<MapMarkerItem[]>
+  highlightedRef: RefObject<string | null>
+}
+
+/**
+ * The openable card of a host that wires onMarkerCardClick. The returned sync puts
+ * it over the active pin while that pin is on the map and takes it off otherwise.
+ */
+function useEntryCardSync({ onCardClickRef, mapRef, markersRef, itemsRef, highlightedRef }: PinRefs): () => void {
+  const cardRef = useRef<L.Tooltip | null>(null)
+  const cardEntryIdRef = useRef<string | null>(null)
+
+  const sync = useCallback(() => {
+    const map = mapRef.current
+    const id = highlightedRef.current
+    const marker = id ? markersRef.current.get(id) : undefined
+    const item = id ? itemsRef.current.find(i => i.id === id) : undefined
+    if (!onCardClickRef.current || !map || !marker || !item || !map.hasLayer(marker)) {
+      cardRef.current?.remove()
+      cardEntryIdRef.current = null
+      return
+    }
+    ensureJourneyPopupStyle()
+    let card = cardRef.current
+    if (!card) {
+      card = createEntryCard(() => {
+        if (cardEntryIdRef.current) onCardClickRef.current?.(cardEntryIdRef.current)
+      })
+      cardRef.current = card
+    }
+    cardEntryIdRef.current = item.id
+    card.setLatLng(marker.getLatLng()).setContent(entryCardHtml(item))
+    if (!map.hasLayer(card)) card.addTo(map)
+  }, [onCardClickRef, mapRef, markersRef, itemsRef, highlightedRef])
+
+  return sync
+}
+
 const EMPTY_TRAIL: { lat: number; lng: number }[] = []
 const EMPTY_TRACKS: JourneyTrack[] = []
 /** Fallback when a track carries no colour of its own, matching the planner's default. */
@@ -200,12 +286,12 @@ function fitOptions(paddingBottom: number | undefined): L.FitBoundsOptions {
 }
 
 function JourneyMap(
-  { entries, photos, onPhotoClick, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, cartoApiKey, hideMarkerTooltip, layerVisibility = EVERY_LAYER, marks, onMarksPick, plannedEntryIds = NO_PLANNED, ref }: Props,
+  { entries, photos, onPhotoClick, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, cartoApiKey, onMarkerCardClick, layerVisibility = EVERY_LAYER, marks, onMarksPick, plannedEntryIds = NO_PLANNED, ref }: Props,
 ) {
-  // Read through a ref: the flag is fixed per surface, and putting it in the
+  // Read through a ref: the handler is fixed per surface, and putting it in the
   // marker effect's deps would rebuild every marker for nothing.
-  const hideMarkerTooltipRef = useRef(hideMarkerTooltip)
-  hideMarkerTooltipRef.current = hideMarkerTooltip
+  const onMarkerCardClickRef = useRef(onMarkerCardClick)
+  onMarkerCardClickRef.current = onMarkerCardClick
   const stableTrail = trail || EMPTY_TRAIL
   const stableTracks = tracks || EMPTY_TRACKS
   const mapTileUrl = useSettingsStore(s => s.settings.map_tile_url)
@@ -256,6 +342,8 @@ function JourneyMap(
     plannedRef.current = plannedEntryIds
   })
 
+  const syncEntryCard = useEntryCardSync({ onCardClickRef: onMarkerCardClickRef, mapRef, markersRef, itemsRef, highlightedRef })
+
   const highlightMarker = useCallback((id: string | null) => {
     const prev = highlightedRef.current
     highlightedRef.current = id
@@ -264,7 +352,8 @@ function JourneyMap(
     )
     if (prev && prev !== id) paint(prev, false)
     if (id) paint(id, true)
-  }, [])
+    syncEntryCard()
+  }, [syncEntryCard])
 
   /**
    * Bring an entry's marker under the reader without changing how far out they are.
@@ -347,7 +436,7 @@ function JourneyMap(
     iconPlannedRef.current = plannedRef.current
     const place = <T extends L.Layer>(kind: LeafletLayerKind, layer: T): T => {
       drawn[kind].push(layer)
-      if (visibilityRef.current[kind]) layer.addTo(map)
+      if (isLeafletLayerShown(kind, visibilityRef.current)) layer.addTo(map)
       return layer
     }
 
@@ -403,17 +492,18 @@ function JourneyMap(
       coords.forEach(c => trackCoords.push(c))
     }
 
-    // route trail: dashed line connecting entries in time order, same as JourneyMapGL
-    if (items.length > 1) {
-      const routeCoords = items.map(i => [i.lat, i.lng] as L.LatLngTuple)
-      place('entries', L.polyline(routeCoords, {
-        color: dark ? '#71717A' : '#A1A1AA',
-        weight: 1.5,
-        opacity: 0.5,
-        dashArray: '4 6',
-        lineCap: 'round', lineJoin: 'round',
-      }))
+    // The faint line between the entries in their order, same as JourneyMapGL, left
+    // off the stretches a recorded day already draws as travelled (#2888).
+    const connections = entryConnections(items.map(i => ({ lat: i.lat, lng: i.lng, date: i.time })), stableTracks)
+    const connectionStyle: L.PolylineOptions = {
+      color: dark ? '#71717A' : '#A1A1AA',
+      weight: 1.5,
+      opacity: 0.5,
+      dashArray: '4 6',
+      lineCap: 'round', lineJoin: 'round',
     }
+    for (const line of connections.open) place('entries', L.polyline(line, connectionStyle))
+    for (const line of connections.covered) place('coveredConnections', L.polyline(line, connectionStyle))
 
     // place markers
     items.forEach((item, i) => {
@@ -421,26 +511,11 @@ function JourneyMap(
       allCoords.push(pos)
 
       const marker = place('entries', L.marker(pos, { icon: entryIcon(item, false, plannedRef.current.has(item.id)) }))
-      // The same card the GL renderer shows, from the same builder: which map
-      // engine a reader happens to have selected should not change what a marker
-      // tells them (discussion #2299). The builder escapes everything that came
-      // from a person, which matters most here — this map is what the public
-      // journey page renders.
-      if (!hideMarkerTooltipRef.current) {
+      // A host that opens the entry from its card gets the one card that follows
+      // the active pin instead (see syncEntryCard).
+      if (!onMarkerCardClickRef.current) {
         ensureJourneyPopupStyle()
-        marker.bindTooltip(
-          journeyPopupHtml({
-            title: item.label || item.locationName || 'Entry',
-            place: item.label ? item.locationName : '',
-            date: formatMarkerDate(item.time),
-            photoUrls: item.photoUrls,
-          }),
-          {
-            direction: 'top',
-            offset: [0, -MARKER_H],
-            className: 'map-tooltip trek-journey-tooltip',
-          },
-        )
+        marker.bindTooltip(entryCardHtml(item), { ...ENTRY_CARD_OPTIONS, className: 'map-tooltip trek-journey-tooltip' })
       }
 
       marker.on('click', () => {
@@ -487,7 +562,8 @@ function JourneyMap(
   // A switch puts its layer back on the map or takes it off, exactly as drawn.
   useEffect(() => {
     shownRef.current = switchLeafletLayers(mapRef.current, drawnRef.current, shownRef.current, layerVisibility)
-  }, [layerVisibility])
+    syncEntryCard()
+  }, [layerVisibility, syncEntryCard])
 
   // The plan's check on an entry pin follows the plan layer without redrawing the map.
   useEffect(() => {
@@ -509,8 +585,8 @@ function JourneyMap(
   }, [tileUrl])
 
   // Photo layer (#1614). Its own effect on purpose: photos arriving must not tear
-  // down and rebuild the map the way the entry effect does. Redrawn on zoom and
-  // pan because the clustering is done in screen space.
+  // down and rebuild the map the way the entry effect does. Redrawn after every
+  // move, but the clusters sit on a world grid, so only a zoom regroups them.
   useEffect(() => {
     const map = mapRef.current
     if (!map) return
@@ -522,7 +598,7 @@ function JourneyMap(
 
       // The initial view (setView/fitBounds) is set on a deferred rAF in the
       // map-build effect above, so this can run before the map has a center/zoom
-      // — latLngToContainerPoint throws in that window. Skip; the moveend/zoomend
+      // and nothing can be projected in that window. Skip; the moveend/zoomend
       // listener below redraws once the deferred view lands.
       try {
         map.getCenter()
@@ -531,7 +607,7 @@ function JourneyMap(
       }
 
       const group = L.layerGroup()
-      for (const cluster of clusterPhotos(photos, (lat, lng) => map.latLngToContainerPoint([lat, lng]))) {
+      for (const cluster of clusterPhotos(photos, leafletWorldPx(map))) {
         const marker = L.marker([cluster.lat, cluster.lng], {
           icon: L.divIcon({
             className: '',
@@ -563,7 +639,7 @@ function JourneyMap(
 
   // The plan's places and the stays of day reports (JRN-04), in their own layer
   // like the photos: below the entry pins and above the thumbnails, regrouped
-  // on every move because marks are only joined where they would overlap.
+  // on zoom because marks are only joined where they would overlap.
   useEffect(() => {
     const map = mapRef.current
     if (!map) return

client/src/components/Journey/JourneyMapAuto.tsx

@@ -23,7 +23,8 @@ interface MapEntry {
   mood?: string | null
   entry_date: string
   dayColor?: string
-  dayLabel?: number
+  /** Null leaves the pin unnumbered: a draft the share link does not count. */
+  dayLabel?: number | null
 }
 
 interface Props {
@@ -38,7 +39,8 @@ interface Props {
   onMarkerClick?: (id: string, type?: string) => void
   fullScreen?: boolean
   paddingBottom?: number
-  hideMarkerTooltip?: boolean
+  /** Open the entry a marker card names when the card is tapped, both renderers. */
+  onMarkerCardClick?: (entryId: string) => void
   /** Open an entry's photos from the marker card's thumbnail strip. GL renderer only. */
   onMarkerPhotoClick?: (entryId: string, photoIndex: number) => void
   /** Geotagged photos as thumbnails on the map, both renderers (#2453). */

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

@@ -1,4 +1,4 @@
-// FE-COMP-JMAPGL-001 to FE-COMP-JMAPGL-040, FE-COMP-JMAPGL-2453
+// FE-COMP-JMAPGL-001 to FE-COMP-JMAPGL-048, FE-COMP-JMAPGL-2453, FE-COMP-JMAPGL-2910
 
 type Spy = ReturnType<typeof vi.fn>
 
@@ -35,8 +35,9 @@ const gl = vi.hoisted(() => {
     off: vi.fn(),
     once: vi.fn(),
     loaded: vi.fn(() => true),
-    // Container pixels from lng/lat, ten per degree: enough to tell near from far.
-    project: vi.fn(([lng, lat]: [number, number]) => ({ x: lng * 10, y: lat * 10 })),
+    // Container pixels, ten per degree. The layers must not group by them: they
+    // shift with every pan (#2889).
+    project: vi.fn(),
     remove: vi.fn(),
     resize: vi.fn(),
     flyTo: vi.fn(),
@@ -182,6 +183,7 @@ beforeEach(() => {
     return gl.map
   })
   gl.map.getZoom.mockReturnValue(10)
+  gl.map.project.mockImplementation(([lng, lat]: [number, number]) => ({ x: lng * 10, y: lat * 10 }))
   gl.map.getSource.mockReturnValue(null)
   vi.mocked(isStandardFamily).mockReturnValue(false)
   vi.mocked(supportsCustom3d).mockReturnValue(false)
@@ -236,6 +238,15 @@ describe('JourneyMapGL', () => {
     expect(gl.markers[1].element.innerHTML).toContain('>1<')
   })
 
+  it('FE-COMP-JMAPGL-043: a stop without a number (a draft) gets an unnumbered pin', () => {
+    withToken()
+    render(<JourneyMapGL checkins={[]} entries={[{ ...entries[0], dayLabel: null }]} />)
+
+    expect(gl.markers).toHaveLength(1)
+    expect(gl.markers[0].element.innerHTML).toContain('#ff0055')
+    expect(gl.markers[0].element.innerHTML).toMatch(/font-weight="700"><\/text>/)
+  })
+
   it('FE-COMP-JMAPGL-006: entries without coordinates never reach the map', () => {
     withToken()
     render(
@@ -253,25 +264,14 @@ describe('JourneyMapGL', () => {
     render(<JourneyMapGL checkins={[]} entries={entries} />)
 
     expect(gl.map.addSource).toHaveBeenCalledWith('journey-route', expect.objectContaining({ type: 'geojson' }))
-    const source = vi.mocked(gl.map.addSource).mock.calls[0][1] as { data: { geometry: { coordinates: number[][] } } }
-    expect(source.data.geometry.coordinates).toEqual([[2.3522, 48.8566], [13.405, 52.52]])
+    const source = vi.mocked(gl.map.addSource).mock.calls[0][1] as { data: { geometry: { coordinates: number[][][] } } }
+    expect(source.data.geometry.coordinates).toEqual([[[2.3522, 48.8566], [13.405, 52.52]]])
     expect(gl.map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
       id: 'journey-route-line',
       source: 'journey-route',
     }))
   })
 
-  it('FE-COMP-JMAPGL-008: an existing route source is updated instead of re-added', () => {
-    withToken()
-    const setData = vi.fn()
-    gl.map.getSource.mockReturnValue({ setData })
-
-    render(<JourneyMapGL checkins={[]} entries={entries} />)
-
-    expect(gl.map.addSource).not.toHaveBeenCalled()
-    expect(setData).toHaveBeenCalledWith(expect.objectContaining({ type: 'Feature' }))
-  })
-
   it('FE-COMP-JMAPGL-038: a planned GPX track goes on the dashed layer, a recorded route on the solid one (JRN-01)', () => {
     withToken()
     render(
@@ -507,6 +507,86 @@ describe('JourneyMapGL', () => {
     expect(document.querySelectorAll('#trek-journey-popup-style')).toHaveLength(1)
   })
 
+  describe('the marker card as a way into the entry (#2885)', () => {
+    const withPhotos = [
+      { ...entries[0], photoUrls: ['/a.jpg', '/b.jpg'] },
+      entries[1],
+    ]
+
+    // The stub's setHTML records the markup; the card's content is put in by hand.
+    function openCard(props: Record<string, unknown>, id = 'e1') {
+      withToken()
+      const ref = React.createRef<JourneyMapGLHandle>()
+      render(<JourneyMapGL ref={ref} checkins={[]} entries={withPhotos} {...props} />)
+      act(() => { ref.current?.highlightMarker(id) })
+      const popup = gl.popups[0]
+      popup.element.innerHTML = String(popup.setHTML.mock.lastCall?.[0])
+      const mapClick = vi.fn()
+      const host = document.createElement('div')
+      host.appendChild(popup.element)
+      host.addEventListener('click', mapClick)
+      return { ref, popup, mapClick }
+    }
+
+    function tap(popup: PopupStub, selector: string) {
+      const target = popup.element.querySelector(selector) as HTMLElement
+      target.click()
+    }
+
+    it('FE-COMP-JMAPGL-044: a tap anywhere on the card opens its entry and stays off the map', () => {
+      const onMarkerCardClick = vi.fn()
+      const { popup, mapClick } = openCard({ onMarkerCardClick })
+
+      expect(popup.options.className).toContain('is-openable')
+      tap(popup, '.trek-journey-popup-title')
+
+      expect(onMarkerCardClick).toHaveBeenCalledWith('e1')
+      expect(mapClick).not.toHaveBeenCalled()
+    })
+
+    it('FE-COMP-JMAPGL-045: with a photo handler a thumbnail opens the photo, not the entry', () => {
+      const onMarkerCardClick = vi.fn()
+      const onMarkerPhotoClick = vi.fn()
+      const { popup } = openCard({ onMarkerCardClick, onMarkerPhotoClick })
+
+      tap(popup, '[data-shot="1"]')
+
+      expect(onMarkerPhotoClick).toHaveBeenCalledWith('e1', 1)
+      expect(onMarkerCardClick).not.toHaveBeenCalled()
+    })
+
+    it('FE-COMP-JMAPGL-046: without a photo handler a thumbnail opens the entry like the rest of the card', () => {
+      const onMarkerCardClick = vi.fn()
+      const { popup } = openCard({ onMarkerCardClick })
+
+      tap(popup, '[data-shot]')
+
+      expect(onMarkerCardClick).toHaveBeenCalledWith('e1')
+    })
+
+    it('FE-COMP-JMAPGL-047: without a handler the card stays a label the tap passes through', () => {
+      const { popup, mapClick } = openCard({})
+
+      expect(popup.options.className).toBe('trek-journey-popup')
+      tap(popup, '.trek-journey-popup-title')
+
+      expect(mapClick).toHaveBeenCalled()
+    })
+
+    it('FE-COMP-JMAPGL-048: the reused card opens the entry it shows now', () => {
+      const onMarkerCardClick = vi.fn()
+      const { ref, popup } = openCard({ onMarkerCardClick })
+
+      act(() => { ref.current?.highlightMarker('e2') })
+      popup.element.innerHTML = String(popup.setHTML.mock.lastCall?.[0])
+      tap(popup, '.trek-journey-popup-title')
+
+      expect(popup.element.classList.contains('is-openable')).toBe(true)
+      expect(popup.element.classList.contains('is-interactive')).toBe(false)
+      expect(onMarkerCardClick).toHaveBeenCalledWith('e2')
+    })
+  })
+
   it('FE-COMP-JMAPGL-023: focusMarker eases over with the 3D pitch and no zoom of its own', () => {
     withToken()
     const ref = React.createRef<JourneyMapGLHandle>()
@@ -553,9 +633,10 @@ describe('JourneyMapGL', () => {
       { id: 'b', lat: 45.1, lng: 5.1, thumbUrl: '/api/photos/2/thumbnail' },
       { id: 'c', lat: 48, lng: 11, thumbUrl: '/api/photos/3/thumbnail' },
     ]
+    gl.map.getZoom.mockReturnValue(4)
     render(<JourneyMapGL checkins={[]} entries={entries} photos={photos} onPhotoClick={onPhotoClick} />)
     const thumbs = gl.markers.filter(m => m.element.innerHTML.includes('/api/photos/'))
-    // a and b fall in one 64px bucket at ten pixels a degree, c in its own.
+    // At zoom 4 a and b lie three world pixels apart in one 64px cell, c far off.
     expect(thumbs).toHaveLength(2)
     expect(thumbs[0].element.innerHTML).toContain('>2<')
     thumbs[0].element.click()
@@ -563,6 +644,54 @@ describe('JourneyMapGL', () => {
     expect(gl.map.on).toHaveBeenCalledWith('moveend', expect.any(Function))
   })
 
+  it('FE-COMP-JMAPGL-2910: no marker element sets its own position, so the engine keeps it absolute', () => {
+    withToken()
+    const photos = [{ id: 'a', lat: 45, lng: 5, thumbUrl: '/api/photos/1/thumbnail' }]
+    const marks = [{ kind: 'stay', key: 's1', lat: 46, lng: 6, color: '#14b8a6', stay: {} }]
+    render(<JourneyMapGL checkins={[]} entries={entries} photos={photos} marks={marks} />)
+    expect(gl.markers.some(m => m.element.innerHTML.includes('/api/photos/'))).toBe(true)
+    for (const marker of gl.markers) expect(marker.element.style.position).toBe('')
+  })
+
+  it('FE-COMP-JMAPGL-2889: panning keeps the photo and mark groups, only a zoom regroups them', () => {
+    withToken()
+    const photos = [
+      { id: 'a', lat: 45, lng: 5, thumbUrl: '/api/photos/1/thumbnail' },
+      { id: 'b', lat: 45, lng: 5.1, thumbUrl: '/api/photos/2/thumbnail' },
+    ]
+    const marks = [
+      { kind: 'stay', key: 's1', lat: 45, lng: 5, color: '#14b8a6', stay: {} },
+      { kind: 'stay', key: 's2', lat: 45, lng: 5.1, color: '#14b8a6', stay: {} },
+    ]
+    gl.map.getZoom.mockReturnValue(4)
+    render(<JourneyMapGL checkins={[]} entries={entries} photos={photos} marks={marks} />)
+    const drawn = () => {
+      const shown = gl.markers.filter(m => !m.remove.mock.calls.length)
+      return {
+        photos: shown.filter(m => m.element.innerHTML.includes('/api/photos/')).map(m => [m.lngLat, m.element.innerHTML]),
+        marks: shown.filter(m => m.element.innerHTML.includes('#14b8a6')).map(m => [m.lngLat, m.element.innerHTML]),
+      }
+    }
+    const moveEnd = () => act(() => {
+      const gone = new Set(gl.map.off.mock.calls.map(c => c[1]))
+      for (const [event, handler] of gl.map.on.mock.calls) if (event === 'moveend' && !gone.has(handler)) (handler as () => void)()
+    })
+    const before = drawn()
+    expect(before.photos).toHaveLength(1)
+    expect(before.photos[0][1]).toContain('>2<')
+    expect(before.marks).toHaveLength(1)
+
+    // A pan moves every container point; at this offset b crosses a cell edge on screen.
+    gl.map.project.mockImplementation(([lng, lat]: [number, number]) => ({ x: lng * 10 - 19, y: lat * 10 }))
+    moveEnd()
+    expect(drawn()).toEqual(before)
+
+    gl.map.getZoom.mockReturnValue(12)
+    moveEnd()
+    expect(drawn().photos).toHaveLength(2)
+    expect(drawn().marks).toHaveLength(2)
+  })
+
   it('FE-COMP-JMAPGL-026: focusMarker on an unknown id is a no-op', () => {
     withToken()
     const ref = React.createRef<JourneyMapGLHandle>()
@@ -722,4 +851,45 @@ describe('JourneyMapGL', () => {
     expect(gl.markers[0].element.innerHTML).toContain('#16a34a')
     expect(mapboxgl.Map).toHaveBeenCalledTimes(1)
   })
+
+  it('FE-COMP-JMAPGL-041: a recorded day takes the line between its entries off the map, the rest stays (#2888)', () => {
+    withToken()
+    const days = [
+      { id: 'a', lat: 48.1, lng: 11.5, entry_date: '2026-10-29' },
+      { id: 'b', lat: 48.2, lng: 11.6, entry_date: '2026-10-29' },
+      { id: 'c', lat: 48.3, lng: 11.7, entry_date: '2026-10-30' },
+      { id: 'd', lat: 48.4, lng: 11.8, entry_date: '2026-10-30' },
+    ]
+    render(
+      <JourneyMapGL
+        checkins={[]}
+        entries={days}
+        tracks={[{ place_id: -1, trip_id: 0, name: '2026-10-29', color: '#7c3aed', points: [[48.1, 11.5], [48.2, 11.6]], kind: 'dawarich_live', date: '2026-10-29' }]}
+      />,
+    )
+
+    const data = (id: string) => (vi.mocked(gl.map.addSource).mock.calls.find(c => c[0] === id)?.[1] as { data: { geometry: { coordinates: number[][][] } } }).data.geometry.coordinates
+    expect(data('journey-route')).toEqual([[[11.6, 48.2], [11.7, 48.3], [11.8, 48.4]]])
+    expect(data('journey-route-covered')).toEqual([[[11.5, 48.1], [11.6, 48.2]]])
+    const covered = vi.mocked(gl.map.addLayer).mock.calls.map(c => c[0] as { id: string; layout: Record<string, unknown> }).find(l => l.id === 'journey-route-covered-line')
+    expect(covered?.layout.visibility).toBe('none')
+  })
+
+  it('FE-COMP-JMAPGL-042: hiding what was recorded brings the covered stretches back while the entries show', () => {
+    withToken()
+    const shown = { plan: true, recorded: true, entries: true }
+    const days = [
+      { id: 'a', lat: 48.1, lng: 11.5, entry_date: '2026-10-29' },
+      { id: 'b', lat: 48.2, lng: 11.6, entry_date: '2026-10-29' },
+    ]
+    const tracks = [{ place_id: -1, trip_id: 0, name: 'Day', color: null, points: [[48.1, 11.5], [48.2, 11.6]] as [number, number][], kind: 'day_recording' as const, date: '2026-10-29' }]
+    const { rerender } = render(<JourneyMapGL checkins={[]} entries={days} tracks={tracks} layerVisibility={shown} />)
+    expect(gl.map.addSource).not.toHaveBeenCalledWith('journey-route', expect.anything())
+
+    rerender(<JourneyMapGL checkins={[]} entries={days} tracks={tracks} layerVisibility={{ ...shown, recorded: false }} />)
+    expect(gl.map.setLayoutProperty).toHaveBeenCalledWith('journey-route-covered-line', 'visibility', 'visible')
+
+    rerender(<JourneyMapGL checkins={[]} entries={days} tracks={tracks} layerVisibility={{ ...shown, recorded: false, entries: false }} />)
+    expect(gl.map.setLayoutProperty).toHaveBeenLastCalledWith('journey-route-covered-line', 'visibility', 'none')
+  })
 })

client/src/components/Journey/JourneyMapGL.tsx

@@ -7,8 +7,9 @@ import { buildGlMap } from '../Map/glSupport'
 import type { JourneyTrack } from '@trek/shared'
 import { SHOT_INDEX_ATTR, ensureJourneyPopupStyle, formatMarkerDate, journeyPopupHtml } from './journeyMapPopup'
 import { clusterPhotos, photoMarkerHtml, type MapPhoto } from './journeyPhotoLayer'
-import { MARK_CLUSTER_PX, PLANNED_BADGE_SVG, clusterPoints, markHitSvg, type JourneyMapMark } from './journeyMapMarks'
+import { MARK_CLUSTER_PX, PLANNED_BADGE_SVG, clusterPoints, glWorldPx, markHitSvg, type JourneyMapMark } from './journeyMapMarks'
 import { isPlannedTrack, type JourneyMapLayerVisibility } from './journeyMapLayers'
+import { coveredConnectionsShown, entryConnections } from './journeyMapConnections'
 
 export interface JourneyMapGLHandle {
   highlightMarker: (id: string | null) => void
@@ -25,7 +26,7 @@ interface MapEntry {
   mood?: string | null
   entry_date: string
   dayColor?: string
-  dayLabel?: number
+  dayLabel?: number | null
   /** Thumbnails for the marker card, already resolved by the caller (the share view signs its own). */
   photoUrls?: string[]
 }
@@ -42,8 +43,8 @@ interface Props {
   activeMarkerId?: string | null
   onMarkerClick?: (id: string, type?: string) => void
   fullScreen?: boolean
-  /** See the Leaflet twin: no marker labels where a carousel already names the entry. */
-  hideMarkerTooltip?: boolean
+  /** See the Leaflet twin: a tap on the card opens the entry it names (#2885). */
+  onMarkerCardClick?: (entryId: string) => void
   /**
    * Open the entry's photos from the card's thumbnail strip.
    *
@@ -78,7 +79,7 @@ interface Item {
   locationName: string
   time: string
   dayColor: string
-  dayLabel: number
+  dayLabel: number | null
   photoUrls: string[]
 }
 
@@ -97,7 +98,7 @@ function buildItems(entries: MapEntry[]): Item[] {
         locationName: e.location_name || '',
         time: e.entry_date,
         dayColor: e.dayColor || '#52525B',
-        dayLabel: e.dayLabel ?? 1,
+        dayLabel: e.dayLabel === undefined ? 1 : e.dayLabel,
         photoUrls: e.photoUrls ?? [],
       })
     }
@@ -114,8 +115,35 @@ const LAYER_IDS: Record<keyof JourneyMapLayerVisibility, string[]> = {
 }
 const EVERY_LAYER: JourneyMapLayerVisibility = { plan: true, recorded: true, entries: true }
 const NO_PLANNED: ReadonlySet<string> = new Set()
+/** The stretches between entries a recorded day already draws; shown only while that recording is hidden. */
+const COVERED_CONNECTION_LAYER = 'journey-route-covered-line'
 
-function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean, planned = false): HTMLDivElement {
+/** One of the faint lines between the entries, as a dashed layer over its own source. */
+function addConnectionLayer(map: mapboxgl.Map, id: string, lines: [number, number][][], dark: boolean, visible: boolean) {
+  if (lines.length === 0) return
+  map.addSource(id, {
+    type: 'geojson',
+    data: {
+      type: 'Feature',
+      properties: {},
+      geometry: { type: 'MultiLineString', coordinates: lines.map(line => line.map(([lat, lng]) => [lng, lat])) },
+    },
+  })
+  map.addLayer({
+    id: `${id}-line`,
+    type: 'line',
+    source: id,
+    paint: {
+      'line-color': dark ? '#71717A' : '#A1A1AA',
+      'line-width': 1.5,
+      'line-opacity': 0.5,
+      'line-dasharray': [2, 3],
+    },
+    layout: { 'line-cap': 'round', 'line-join': 'round', visibility: visible ? 'visible' : 'none' },
+  })
+}
+
+function markerHtml(dayColor: string, dayLabel: number | null, highlighted: boolean, planned = false): HTMLDivElement {
   const fill = dayColor
   const textColor = '#fff'
   const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
@@ -123,7 +151,7 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean, pl
     ? 'drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
     : 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
   const scale = highlighted ? 1.2 : 1
-  const label = String(dayLabel)
+  const label = dayLabel === null ? '' : String(dayLabel)
 
   // Outer wrap holds the element mapbox positions via `transform: translate(...)`.
   // Anything animated (scale, filter) has to live on an inner child — otherwise
@@ -166,13 +194,13 @@ function fitOptions(paddingBottom: number | undefined, tilted: boolean | undefin
 }
 
 function JourneyMapGL(
-  { entries, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl', gl, hideMarkerTooltip, onMarkerPhotoClick, photos, onPhotoClick, layerVisibility = EVERY_LAYER, marks, onMarksPick, plannedEntryIds = NO_PLANNED, ref }: Props,
+  { entries, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl', gl, onMarkerCardClick, onMarkerPhotoClick, photos, onPhotoClick, layerVisibility = EVERY_LAYER, marks, onMarksPick, plannedEntryIds = NO_PLANNED, ref }: Props,
 ) {
-  const hideMarkerTooltipRef = useRef(hideMarkerTooltip)
-  hideMarkerTooltipRef.current = hideMarkerTooltip
+  const onMarkerCardClickRef = useRef(onMarkerCardClick)
+  onMarkerCardClickRef.current = onMarkerCardClick
   const onMarkerPhotoClickRef = useRef(onMarkerPhotoClick)
   onMarkerPhotoClickRef.current = onMarkerPhotoClick
-  /** Which entry the card is currently describing, for the delegated photo click. */
+  /** Which entry the card is currently describing, for the delegated card and photo clicks. */
   const popupItemIdRef = useRef<string | null>(null)
   const stableTrail = trail || EMPTY_TRAIL
   const stableTracks = tracks || EMPTY_TRACKS
@@ -224,9 +252,6 @@ function JourneyMapGL(
   mapLangRef.current = mapLang
 
   const showPopup = useCallback((id: string) => {
-    // See `hideMarkerTooltip` on the Leaflet twin: below the carousel the card
-    // already says this, and the popup only covers the map to repeat it.
-    if (hideMarkerTooltipRef.current) return
     const item = itemsRef.current.find(i => i.id === id)
     if (!item || !mapRef.current) return
     ensureJourneyPopupStyle()
@@ -244,6 +269,7 @@ function JourneyMapGL(
     const offset: [number, number] = [0, -46]
     popupItemIdRef.current = item.id
     const interactive = !!onMarkerPhotoClickRef.current && item.photoUrls.length > 0
+    const openable = !!onMarkerCardClickRef.current
     if (popupRef.current) {
       popupRef.current.setLngLat([item.lng, item.lat])
       popupRef.current.setHTML(html)
@@ -252,6 +278,7 @@ function JourneyMapGL(
       if (el) {
         el.classList.toggle('trek-dark', !!darkRef.current)
         el.classList.toggle('is-interactive', interactive)
+        el.classList.toggle('is-openable', openable)
       }
     } else {
       popupRef.current = new gl.Popup({
@@ -260,7 +287,7 @@ function JourneyMapGL(
         closeOnMove: false,
         anchor: 'bottom',
         offset,
-        className: `trek-journey-popup${darkRef.current ? ' trek-dark' : ''}${interactive ? ' is-interactive' : ''}`,
+        className: `trek-journey-popup${darkRef.current ? ' trek-dark' : ''}${interactive ? ' is-interactive' : ''}${openable ? ' is-openable' : ''}`,
         maxWidth: '280px',
       })
         .setLngLat([item.lng, item.lat])
@@ -270,11 +297,18 @@ function JourneyMapGL(
       // strip on every entry, so a listener on the thumbnails themselves would have
       // to be rebound each time and would leak the ones it forgot.
       popupRef.current.getElement()?.addEventListener('click', (ev: Event) => {
-        const shot = (ev.target as HTMLElement | null)?.closest(`[${SHOT_INDEX_ATTR}]`)
         const entryId = popupItemIdRef.current
-        if (!shot || !entryId) return
-        ev.stopPropagation()
-        onMarkerPhotoClickRef.current?.(entryId, Number(shot.getAttribute(SHOT_INDEX_ATTR)))
+        if (!entryId) return
+        const shot = (ev.target as HTMLElement | null)?.closest(`[${SHOT_INDEX_ATTR}]`)
+        const onPhoto = onMarkerPhotoClickRef.current
+        const onCard = onMarkerCardClickRef.current
+        if (shot && onPhoto) {
+          ev.stopPropagation()
+          onPhoto(entryId, Number(shot.getAttribute(SHOT_INDEX_ATTR)))
+        } else if (onCard) {
+          ev.stopPropagation()
+          onCard(entryId)
+        }
       })
     }
   }, [gl])
@@ -397,31 +431,12 @@ function JourneyMapGL(
         try { map.setConfigProperty('basemap', 'language', basemapLanguage(mapLangRef.current)) } catch { /* style/SDK may not support it */ }
       }
 
-      // route trail — dashed line connecting entries in time order
-      if (items.length > 1) {
-        const coords = items.map(i => [i.lng, i.lat])
-        if (map.getSource('journey-route')) (map.getSource('journey-route') as mapboxgl.GeoJSONSource).setData({
-          type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: coords } as GeoJSON.LineString,
-        })
-        else {
-          map.addSource('journey-route', {
-            type: 'geojson',
-            data: { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: coords } as GeoJSON.LineString },
-          })
-          map.addLayer({
-            id: 'journey-route-line',
-            type: 'line',
-            source: 'journey-route',
-            paint: {
-              'line-color': darkRef.current ? '#71717A' : '#A1A1AA',
-              'line-width': 1.5,
-              'line-opacity': 0.5,
-              'line-dasharray': [2, 3],
-            },
-            layout: layout('entries', { 'line-cap': 'round', 'line-join': 'round' }),
-          })
-        }
-      }
+      // The faint line between the entries in their order, left off the stretches
+      // a recorded day already draws as travelled (#2888). Those go on a layer of
+      // their own that stands in while the reader hides the recording.
+      const connections = entryConnections(items.map(i => ({ lat: i.lat, lng: i.lng, date: i.time })), stableTracks)
+      addConnectionLayer(map, 'journey-route', connections.open, !!darkRef.current, visibilityRef.current.entries)
+      addConnectionLayer(map, 'journey-route-covered', connections.covered, !!darkRef.current, coveredConnectionsShown(visibilityRef.current))
 
       // Tracks, one source for all of them, coloured per feature so a journey
       // with several routes keeps them apart. Casing underneath, same as the
@@ -526,9 +541,10 @@ function JourneyMapGL(
   }, [entries, stableTrail, stableTracks, glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality, fullScreen, paddingBottom])
 
   // Photo layer (#2453), the GL twin of the Leaflet one: its own effect so photos
-  // arriving do not rebuild the map, redrawn on every move because the clustering
-  // is done in screen space. Same dependencies as the build effect above, so it
-  // attaches to the map that effect just made.
+  // arriving do not rebuild the map. Redrawn after every move, but the clusters
+  // sit on a world grid, so only a zoom regroups them; a pan, a turn or a tilt
+  // leaves them as they were. Same dependencies as the build effect above, so
+  // it attaches to the map that effect just made.
   useEffect(() => {
     const map = mapRef.current
     if (!map) return
@@ -539,9 +555,12 @@ function JourneyMapGL(
     const draw = () => {
       clear()
       if (!photos?.length) return
-      for (const cluster of clusterPhotos(photos, (lat, lng) => map.project([lng, lat]))) {
+      for (const cluster of clusterPhotos(photos, glWorldPx(map))) {
         const el = document.createElement('div')
-        el.style.cssText = 'position:relative;width:48px;height:48px;cursor:pointer'
+        // No inline `position` (#2910): the engine's marker class positions the element
+        // absolutely, and `position:relative` would drop it into the normal flow, where
+        // every thumbnail sits below the ones drawn before it.
+        el.style.cssText = 'width:48px;height:48px;cursor:pointer'
         el.innerHTML = photoMarkerHtml(cluster.members[0].thumbUrl, cluster.members.length)
         el.addEventListener('click', (ev) => {
           ev.stopPropagation()
@@ -575,6 +594,10 @@ function JourneyMapGL(
         markersRef.current.forEach(m => { m.getElement().style.display = layerVisibility.entries ? '' : 'none' })
       }
     }
+    const coveredShown = coveredConnectionsShown(layerVisibility)
+    if (coveredConnectionsShown(shownRef.current) !== coveredShown) {
+      try { map.setLayoutProperty(COVERED_CONNECTION_LAYER, 'visibility', coveredShown ? 'visible' : 'none') } catch { /* not drawn on this map */ }
+    }
     shownRef.current = layerVisibility
   }, [layerVisibility])
 
@@ -589,7 +612,7 @@ function JourneyMapGL(
   }, [plannedEntryIds, setMarkerStyle])
 
   // The plan's places and the stays (JRN-04), the GL twin of the Leaflet layer:
-  // regrouped on every move, between the photos and the entry pins.
+  // regrouped on zoom, between the photos and the entry pins.
   useEffect(() => {
     const map = mapRef.current
     if (!map) return
@@ -608,7 +631,7 @@ function JourneyMapGL(
           } catch { /* empty bounds */ }
         }
       }
-      for (const hit of clusterPoints(marks, (lat, lng) => map.project([lng, lat]), MARK_CLUSTER_PX)) {
+      for (const hit of clusterPoints(marks, glWorldPx(map), MARK_CLUSTER_PX)) {
         const look = markHitSvg(hit.members)
         const el = document.createElement('div')
         el.style.cssText = `width:${look.width}px;height:${look.height}px;cursor:pointer`

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

@@ -1,4 +1,4 @@
-// FE-COMP-JENTRYVIEW-001 to FE-COMP-JENTRYVIEW-020
+// FE-COMP-JENTRYVIEW-001 to FE-COMP-JENTRYVIEW-022
 
 import { render, screen, fireEvent } from '../../../tests/helpers/render'
 import { resetAllStores, seedStore } from '../../../tests/helpers/store'
@@ -136,6 +136,18 @@ describe('MobileEntryView', () => {
     expect(container.querySelector('svg.lucide-camera')).toBeNull()
   })
 
+  it('FE-COMP-JENTRYVIEW-021: the hero holds the proportions of the photo and shows its thumbnail before the original arrives (#2907)', () => {
+    const { container } = renderView(buildEntry({ photos: [{ ...buildPhoto(4), width: 3000, height: 2000 }] }))
+    const hero = container.querySelector('img') as HTMLImageElement
+    expect(hero.style.aspectRatio).toBe('3000 / 2000')
+    expect(hero.style.backgroundImage).toContain('/api/photos/4/thumbnail')
+  })
+
+  it('FE-COMP-JENTRYVIEW-022: a photo without recorded dimensions still reserves a 4:3 hero', () => {
+    const { container } = renderView(buildEntry({ photos: [buildPhoto(4)] }))
+    expect((container.querySelector('img') as HTMLImageElement).style.aspectRatio).toBe('4 / 3')
+  })
+
   it('FE-COMP-JENTRYVIEW-008: several photos add a counter and a thumbnail strip', () => {
     const { container } = renderView(buildEntry({ photos: [buildPhoto(4), buildPhoto(5), buildPhoto(6)] }))
     expect(screen.getByText('3 photos')).toBeInTheDocument()

client/src/components/Journey/MobileEntryView.tsx

@@ -4,6 +4,7 @@ import {
   Sun, CloudSun, Cloud, CloudRain, CloudLightning, Snowflake,
   ThumbsUp, ThumbsDown,
 } from 'lucide-react'
+import type { CSSProperties } from 'react'
 import JournalBody from './JournalBody'
 import { useTranslation } from '../../i18n'
 import { formatLocationName } from '../../utils/formatters'
@@ -39,6 +40,22 @@ function photoUrl(
   return `/api/photos/${p.photo_id}/${size}`
 }
 
+/**
+ * The hero's box before its picture arrives (#2907): the photo's own proportions
+ * when the upload recorded them, else 4:3, so the story below does not jump down
+ * once the original has loaded. The thumbnail, usually cached by the strip or the
+ * feed already, fills that box meanwhile.
+ */
+function heroPlaceholderStyle(photo: JourneyPhoto, thumbUrl: string): CSSProperties {
+  const ratio = photo.width && photo.height ? `${photo.width} / ${photo.height}` : '4 / 3'
+  return {
+    aspectRatio: ratio,
+    backgroundImage: `url("${encodeURI(thumbUrl)}")`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+  }
+}
+
 interface Props {
   entry: JourneyEntry
   readOnly?: boolean
@@ -114,8 +131,10 @@ export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClo
                 <img
                   src={photoUrl(photos[0], photos[0].media_type === 'video' ? 'thumbnail' : 'original', publicPhotoUrl)}
                   alt=""
-                  className={`w-full max-h-[50vh] ${photos[0].media_type === 'video' ? 'object-contain' : 'object-cover'
+                  decoding="async"
+                  className={`block w-full max-h-[50vh] bg-surface-secondary ${photos[0].media_type === 'video' ? 'object-contain' : 'object-cover'
                     }`}
+                  style={heroPlaceholderStyle(photos[0], photoUrl(photos[0], 'thumbnail', publicPhotoUrl))}
                 />
               )}
 
@@ -143,7 +162,7 @@ export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClo
                     key={p.id || i}
                     type="button"
                     aria-label={p.caption || t('journey.photos')}
-                    className={`relative h-16 w-16 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border-0 p-0 hover:ring-2 ring-zinc-900/30 dark:ring-white/30 transition-all ${p.media_type === 'video' ? 'bg-black' : 'bg-transparent'
+                    className={`relative h-16 w-16 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border-0 p-0 hover:ring-2 ring-zinc-900/30 dark:ring-white/30 transition-all ${p.media_type === 'video' ? 'bg-black' : 'bg-surface-secondary'
                       }`}
                     onClick={() => onPhotoClick(photos, i)}
                   >

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

@@ -1,4 +1,4 @@
-// FE-COMP-JMAPTL-001 to FE-COMP-JMAPTL-016
+// FE-COMP-JMAPTL-001 to FE-COMP-JMAPTL-018
 
 const mapHandle = vi.hoisted(() => ({
   highlightMarker: vi.fn(),
@@ -190,6 +190,16 @@ describe('MobileMapTimeline', () => {
     expect(Element.prototype.scrollIntoView).toHaveBeenCalled()
   })
 
+  it('FE-COMP-JMAPTL-018: a tap on a marker card opens that entry straight away (#2885)', () => {
+    const onEntryClick = vi.fn()
+    renderTimeline({ onEntryClick })
+    const onMarkerCardClick = lastMapProps.current.onMarkerCardClick as (id: string) => void
+
+    act(() => { onMarkerCardClick('2') })
+
+    expect(onEntryClick).toHaveBeenCalledWith(entries[1])
+  })
+
   it('FE-COMP-JMAPTL-007: a marker click for an unknown entry is ignored', () => {
     renderTimeline()
     const onMarkerClick = lastMapProps.current.onMarkerClick as (id: string) => void

client/src/components/Journey/MobileMapTimeline.tsx

@@ -70,7 +70,7 @@ export default function MobileMapTimeline({
 }: Props) {
   const {
     mapRef, carouselRef, cardRefs, activeIndex, setActiveIndex, scrubberDays,
-    syncMapToCard: syncMapToCarousel, handleMarkerClick, handleCardTap, jumpToDay,
+    syncMapToCard: syncMapToCarousel, handleMarkerClick, handleCardTap, openEntryById, jumpToDay,
   } = useJourneyCarouselSync({ entries, mapEntries, onOpenEntry: onEntryClick })
   // The delayed initial focus reads both through refs so it always works off
   // the current map entries, not the ones from the render that armed the timer.
@@ -169,6 +169,7 @@ export default function MobileMapTimeline({
         dark={dark}
         activeMarkerId={activeEntryId}
         onMarkerClick={handleMarkerClick}
+        onMarkerCardClick={openEntryById}
         fullScreen
         paddingBottom={250}
         cartoApiKey={cartoApiKey}

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

@@ -1,4 +1,4 @@
-// FE-COMP-LIGHTBOX-001 to FE-COMP-LIGHTBOX-027
+// FE-COMP-LIGHTBOX-001 to FE-COMP-LIGHTBOX-029
 
 // Plyr needs a real media pipeline, so the player is stubbed here.
 vi.mock('./VideoPlayer', () => ({
@@ -326,4 +326,28 @@ describe('PhotoLightbox', () => {
     expect(screen.getByText('Google', { selector: 'p' })).toBeInTheDocument();
     expect(screen.queryByRole('link')).not.toBeInTheDocument();
   });
+  it('FE-COMP-LIGHTBOX-028: the thumbnail and a spinner stand in until the original has loaded (#2907)', () => {
+    const { container } = render(
+      <PhotoLightbox photos={[{ id: 'a', src: '/a/original', thumbSrc: '/a/thumbnail' }]} onClose={vi.fn()} />,
+    );
+    const placeholder = screen.getByTestId('lightbox-loading');
+    expect(placeholder.querySelector('img')).toHaveAttribute('src', '/a/thumbnail');
+    expect(placeholder.querySelector('svg.animate-spin')).toBeInTheDocument();
+
+    fireEvent.load(container.ownerDocument.querySelector('img[src="/a/original"]') as HTMLImageElement);
+    expect(screen.queryByTestId('lightbox-loading')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-LIGHTBOX-029: the next photo waits for its own original, and a failed one drops the spinner too', () => {
+    render(
+      <PhotoLightbox photos={[{ id: 'a', src: '/a.jpg' }, { id: 'b', src: '/b.jpg' }]} onClose={vi.fn()} />,
+    );
+    fireEvent.load(document.querySelector('img[src="/a.jpg"]') as HTMLImageElement);
+    expect(screen.queryByTestId('lightbox-loading')).not.toBeInTheDocument();
+
+    fireEvent.keyDown(window, { key: 'ArrowRight' });
+    expect(screen.getByTestId('lightbox-loading')).toBeInTheDocument();
+    fireEvent.error(document.querySelector('img[src="/b.jpg"]') as HTMLImageElement);
+    expect(screen.queryByTestId('lightbox-loading')).not.toBeInTheDocument();
+  });
 });

client/src/components/Journey/PhotoLightbox.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut } from 'lucide-react'
+import { ChevronLeft, ChevronRight, Loader2, X, ZoomIn, ZoomOut } from 'lucide-react'
 import VideoPlayer from './VideoPlayerLazy'
 import { usePhotoZoom } from './usePhotoZoom'
 import { Tooltip } from '../shared/Tooltip'
@@ -8,6 +8,12 @@ import { isRtlLanguage, useTranslation } from '../../i18n'
 interface LightboxPhoto {
   id: string
   src: string
+  /**
+   * A small rendition of the same photo, usually cached already by the grid that
+   * opened the lightbox. It stands in while the original loads, which on a slow
+   * server or connection can take seconds (#2907).
+   */
+  thumbSrc?: string
   caption?: string | null
   /** Where the caption's credit points to (a photo's source page), opened in a new tab. */
   captionHref?: string | null
@@ -52,6 +58,9 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }
   // Zoom starts over on every photo (#1484).
   const zoom = usePhotoZoom(photo?.id)
   const isImage = !!photo && photo.mediaType !== 'video'
+  // The id whose original has finished (or failed) loading; any other photo is still on its way.
+  const [loadedId, setLoadedId] = useState<string | null>(null)
+  const loading = isImage && loadedId !== photo.id
   const hasPrev = idx > 0
   const hasNext = idx < photos.length - 1
 
@@ -187,6 +196,8 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }
             src={photo.src}
             alt={photo.caption || ''}
             draggable={false}
+            onLoad={() => setLoadedId(photo.id)}
+            onError={() => setLoadedId(photo.id)}
             {...zoom.mouse}
             style={{
               maxWidth: '92vw', maxHeight: '92vh',
@@ -198,6 +209,17 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }
           />
         )}
 
+        {loading && (
+          <div data-testid="lightbox-loading" aria-hidden="true" style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
+            {photo.thumbSrc && (
+              <img src={photo.thumbSrc} alt="" draggable={false} style={{ width: '92vw', height: '92vh', objectFit: 'contain', borderRadius: 4 }} />
+            )}
+            <span style={{ ...ROUND_BTN, position: 'absolute', cursor: 'default' }}>
+              <Loader2 size={18} className="animate-spin" />
+            </span>
+          </div>
+        )}
+
         {/* Next button */}
         {hasNext && (
           <button type="button" onClick={next} aria-label={t('journey.lightbox.next')} className="flex sm:opacity-0 sm:group-hover/lightbox:opacity-100 focus-visible:opacity-100 transition-opacity" style={{

client/src/components/Journey/journeyLeafletLayers.ts

@@ -1,12 +1,21 @@
 import L from 'leaflet';
+import { coveredConnectionsShown } from './journeyMapConnections';
 import type { JourneyMapLayerVisibility } from './journeyMapLayers';
-import { MARK_CLUSTER_PX, clusterPoints, markHitSvg, type JourneyMapMark } from './journeyMapMarks';
+import { MARK_CLUSTER_PX, clusterPoints, markHitSvg, type JourneyMapMark, type WorldPx } from './journeyMapMarks';
 
-/** The layers of the Leaflet journey map a switch takes off and puts back (JRN-04). */
-export type LeafletLayerKind = keyof JourneyMapLayerVisibility;
+/**
+ * The layers of the Leaflet journey map a switch takes off and puts back (JRN-04),
+ * plus the stretches between entries a recording already shows, which follow two.
+ */
+export type LeafletLayerKind = keyof JourneyMapLayerVisibility | 'coveredConnections';
 export type DrawnLayers = Record<LeafletLayerKind, L.Layer[]>;
 
-export const NOTHING_DRAWN = (): DrawnLayers => ({ plan: [], recorded: [], entries: [] });
+export const NOTHING_DRAWN = (): DrawnLayers => ({ plan: [], recorded: [], entries: [], coveredConnections: [] });
+
+/** Whether a layer of this kind is on the map with these switches. */
+export function isLeafletLayerShown(kind: LeafletLayerKind, visibility: JourneyMapLayerVisibility): boolean {
+  return kind === 'coveredConnections' ? coveredConnectionsShown(visibility) : visibility[kind];
+}
 
 /**
  * Puts each layer whose switch changed back on the map or takes it off,
@@ -20,15 +29,25 @@ export function switchLeafletLayers(
 ): JourneyMapLayerVisibility {
   if (!map) return shown;
   for (const kind of Object.keys(drawn) as LeafletLayerKind[]) {
-    if (shown[kind] === next[kind]) continue;
+    const visible = isLeafletLayerShown(kind, next);
+    if (isLeafletLayerShown(kind, shown) === visible) continue;
     for (const layer of drawn[kind]) {
-      if (next[kind]) layer.addTo(map);
+      if (visible) layer.addTo(map);
       else layer.remove();
     }
   }
   return next;
 }
 
+/**
+ * World pixels at the map's current zoom, through the map's own CRS so a
+ * GCJ-02 basemap groups where it draws. Only meaningful once the map has a view.
+ */
+export function leafletWorldPx(map: L.Map): WorldPx {
+  const zoom = map.getZoom();
+  return (lat, lng) => map.project([lat, lng], zoom);
+}
+
 /**
  * The plan's places and the stays as one layer: below the entry pins, above
  * the photo thumbnails, joined only where they would overlap on screen.
@@ -47,7 +66,7 @@ export function drawLeafletMarks(
     return null;
   }
   const group = L.layerGroup();
-  for (const hit of clusterPoints(marks, (lat, lng) => map.latLngToContainerPoint([lat, lng]), MARK_CLUSTER_PX)) {
+  for (const hit of clusterPoints(marks, leafletWorldPx(map), MARK_CLUSTER_PX)) {
     const look = markHitSvg(hit.members);
     const marker = L.marker([hit.lat, hit.lng], {
       icon: L.divIcon({

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

@@ -0,0 +1,117 @@
+// FE-JRN-CONN-001 to FE-JRN-CONN-008
+import type { JourneyTrack } from '@trek/shared';
+import { describe, expect, it } from 'vitest';
+import { coveredConnectionsShown, entryConnections } from './journeyMapConnections';
+
+const stop = (lat: number, date: string) => ({ lat, lng: lat, date });
+
+function recorded(
+  date: string,
+  kind: JourneyTrack['kind'] = 'day_recording',
+  points: [number, number][] = [
+    [1, 1],
+    [2, 2],
+  ]
+): JourneyTrack {
+  return { place_id: -1, trip_id: 0, name: date, color: null, points, kind, date };
+}
+
+describe('entryConnections (#2888)', () => {
+  it('FE-JRN-CONN-001: without a recording the whole line stays open, one polyline through every stop', () => {
+    const result = entryConnections([stop(1, '2026-10-29'), stop(2, '2026-10-29'), stop(3, '2026-10-30')], []);
+    expect(result.open).toEqual([
+      [
+        [1, 1],
+        [2, 2],
+        [3, 3],
+      ],
+    ]);
+    expect(result.covered).toEqual([]);
+  });
+
+  it('FE-JRN-CONN-002: a recorded day covers the stretches between its entries, the jump into a day without one stays open', () => {
+    const result = entryConnections(
+      [stop(1, '2026-10-29'), stop(2, '2026-10-29'), stop(3, '2026-10-30'), stop(4, '2026-10-30')],
+      [recorded('2026-10-29', 'dawarich_live')]
+    );
+    expect(result.covered).toEqual([
+      [
+        [1, 1],
+        [2, 2],
+      ],
+    ]);
+    expect(result.open).toEqual([
+      [
+        [2, 2],
+        [3, 3],
+        [4, 4],
+      ],
+    ]);
+  });
+
+  it('FE-JRN-CONN-003: the night between two recorded days is covered, a day in between without one is not', () => {
+    const tracks = [recorded('2026-10-29'), recorded('2026-10-30'), recorded('2026-11-01')];
+    expect(entryConnections([stop(1, '2026-10-29'), stop(2, '2026-10-30')], tracks).open).toEqual([]);
+    expect(entryConnections([stop(1, '2026-10-30'), stop(2, '2026-11-01')], tracks).covered).toEqual([]);
+  });
+
+  it('FE-JRN-CONN-004: a trip GPX, a line without a day and a recording without points cover nothing', () => {
+    const stops = [stop(1, '2026-10-29'), stop(2, '2026-10-29')];
+    const gpx: JourneyTrack = { ...recorded('2026-10-29'), kind: 'trip_gpx' };
+    const undated: JourneyTrack = { ...recorded('2026-10-29'), date: undefined };
+    const empty = recorded('2026-10-29', 'day_recording', [[1, 1]]);
+    expect(entryConnections(stops, [gpx, undated, empty]).covered).toEqual([]);
+  });
+
+  it('FE-JRN-CONN-005: open and covered stretches alternate in the order of the stops', () => {
+    const result = entryConnections(
+      [
+        stop(1, '2026-10-28'),
+        stop(2, '2026-10-29'),
+        stop(3, '2026-10-29'),
+        stop(4, '2026-10-31'),
+        stop(5, '2026-10-31'),
+      ],
+      [recorded('2026-10-29'), recorded('2026-10-31')]
+    );
+    expect(result.open).toEqual([
+      [
+        [1, 1],
+        [2, 2],
+      ],
+      [
+        [3, 3],
+        [4, 4],
+      ],
+    ]);
+    expect(result.covered).toEqual([
+      [
+        [2, 2],
+        [3, 3],
+      ],
+      [
+        [4, 4],
+        [5, 5],
+      ],
+    ]);
+  });
+
+  it('FE-JRN-CONN-006: a timestamp is read by its day, and an unreadable date never counts as recorded', () => {
+    expect(
+      entryConnections([stop(1, '2026-10-29T08:00:00Z'), stop(2, '2026-10-29')], [recorded('2026-10-29')]).open
+    ).toEqual([]);
+    expect(entryConnections([stop(1, 'someday'), stop(2, '2026-10-29')], [recorded('2026-10-29')]).covered).toEqual([]);
+  });
+
+  it('FE-JRN-CONN-007: fewer than two stops make no line', () => {
+    expect(entryConnections([stop(1, '2026-10-29')], [])).toEqual({ open: [], covered: [] });
+  });
+});
+
+describe('coveredConnectionsShown', () => {
+  it('FE-JRN-CONN-008: stands in only while the entries show and the recording is hidden', () => {
+    expect(coveredConnectionsShown({ plan: true, recorded: true, entries: true })).toBe(false);
+    expect(coveredConnectionsShown({ plan: true, recorded: false, entries: true })).toBe(true);
+    expect(coveredConnectionsShown({ plan: true, recorded: false, entries: false })).toBe(false);
+  });
+});

client/src/components/Journey/journeyMapConnections.ts

@@ -0,0 +1,93 @@
+import type { JourneyTrack } from '@trek/shared';
+import { isPlannedTrack, type JourneyMapLayerVisibility } from './journeyMapLayers';
+
+/** A point of the line between entries, `[lat, lng]`. */
+type LatLng = [number, number];
+
+/** An entry pin as the connection sees it: where it stands and on which day. */
+interface ConnectionStop {
+  lat: number;
+  lng: number;
+  /** `YYYY-MM-DD`; a longer ISO string is read by its date. */
+  date: string;
+}
+
+/**
+ * The faint line between the entries, cut where the map already shows how the
+ * traveller got from one to the next.
+ *
+ * `open` is every stretch nothing else on the map accounts for, so the
+ * straight line is the best guess there is. `covered` is every stretch whose
+ * days were all recorded: the recorded line is the real way, and a straight
+ * one across it only gets in its way (#2888). It is still handed back, so a
+ * reader who hides what was recorded gets the guess back for those stretches.
+ */
+interface EntryConnections {
+  open: LatLng[][];
+  covered: LatLng[][];
+}
+
+const DAY_MS = 86_400_000;
+
+function dayNumber(date: string): number | null {
+  const time = Date.parse(`${date.slice(0, 10)}T00:00:00Z`);
+  return Number.isNaN(time) ? null : Math.round(time / DAY_MS);
+}
+
+/** The days a recorded line with points stands for; a trip's GPX is the plan and stands for none. */
+function recordedDays(tracks: readonly JourneyTrack[]): Set<number> {
+  const days = new Set<number>();
+  for (const track of tracks) {
+    if (isPlannedTrack(track) || !track.date || track.points.length < 2) continue;
+    const day = dayNumber(track.date);
+    if (day !== null) days.add(day);
+  }
+  return days;
+}
+
+/**
+ * Whether the way between two stops is on the map already: every day from the
+ * first stop's to the second's was recorded, the night between two recorded
+ * days included. One day in between without a recording leaves it open.
+ */
+function travelled(from: string, to: string, recorded: ReadonlySet<number>): boolean {
+  const a = dayNumber(from);
+  const b = dayNumber(to);
+  if (a === null || b === null) return false;
+  const first = Math.min(a, b);
+  const last = Math.max(a, b);
+  if (last - first + 1 > recorded.size) return false;
+  for (let day = first; day <= last; day++) {
+    if (!recorded.has(day)) return false;
+  }
+  return true;
+}
+
+/**
+ * Splits the line through the stops, taken in the order given (the pins'
+ * order on the map), into the stretches still open and those a recording
+ * covers. Neighbouring stretches of the same kind stay one line.
+ */
+export function entryConnections(stops: readonly ConnectionStop[], tracks: readonly JourneyTrack[]): EntryConnections {
+  const result: EntryConnections = { open: [], covered: [] };
+  const recorded = recordedDays(tracks);
+  let line: LatLng[] | null = null;
+  let lineCovered = false;
+  for (let i = 1; i < stops.length; i++) {
+    const from = stops[i - 1];
+    const to = stops[i];
+    const covered = travelled(from.date, to.date, recorded);
+    if (!line || covered !== lineCovered) {
+      line = [[from.lat, from.lng]];
+      (covered ? result.covered : result.open).push(line);
+      lineCovered = covered;
+    }
+    line.push([to.lat, to.lng]);
+  }
+  return result;
+}
+
+/** The covered stretches stand in for the recording only while the pins are shown and the recording is not. */
+export function coveredConnectionsShown(visibility: JourneyMapLayerVisibility): boolean {
+  return visibility.entries && !visibility.recorded;
+}

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

@@ -1,4 +1,4 @@
-// FE-JOURNEY-MAPMARKS-001 to FE-JOURNEY-MAPMARKS-003
+// FE-JOURNEY-MAPMARKS-001 to FE-JOURNEY-MAPMARKS-005
 //
 // JRN-04: the plan and stay marks both renderers draw, and how they join.
 import type { JourneyMapPlace, JourneyMapStay } from '@trek/shared';
@@ -6,7 +6,9 @@ import { describe, expect, it } from 'vitest';
 import {
   MARK_CLUSTER_PX,
   clusterPoints,
+  glWorldPx,
   markHitSvg,
+  mercatorWorldPx,
   planPinSvg,
   safeColor,
   type JourneyMapMark,
@@ -54,4 +56,39 @@ describe('journey map marks', () => {
     expect(safeColor(null)).toBe('#64748b');
     expect(planPinSvg('red" onload="x')).not.toContain('onload');
   });
+
+  it('FE-JOURNEY-MAPMARKS-004: world pixels are Web Mercator at the zoom, doubling per step and clamped at the poles', () => {
+    expect(mercatorWorldPx(0, 0, 0, 512)).toEqual({ x: 256, y: 256 });
+    expect(mercatorWorldPx(0, -180, 0, 512).x).toBe(0);
+    const z5 = mercatorWorldPx(35.01, 135.68, 5, 512);
+    const z6 = mercatorWorldPx(35.01, 135.68, 6, 512);
+    expect(z6.x).toBeCloseTo(z5.x * 2, 6);
+    expect(z6.y).toBeCloseTo(z5.y * 2, 6);
+    expect(mercatorWorldPx(90, 0, 0, 512).y).toBeCloseTo(0, 3);
+    expect(mercatorWorldPx(-90, 0, 0, 512).y).toBeCloseTo(512, 3);
+  });
+
+  it('FE-JOURNEY-MAPMARKS-005: groups on the GL world grid hold however the view is panned, and split on zoom (#2889)', () => {
+    const marks = [planMark('a', 35.0), planMark('b', 35.0005), planMark('c', 35.001)];
+    const keys = (hits: { members: JourneyMapMark[] }[]) => hits.map((h) => h.members.map((m) => m.key));
+
+    // What a container point does: the same world position, less the pan.
+    const onScreen = (pan: number) =>
+      keys(
+        clusterPoints(
+          marks,
+          (lat, lng) => {
+            const world = mercatorWorldPx(lat, lng, 13, 512);
+            return { x: world.x, y: world.y - pan };
+          },
+          MARK_CLUSTER_PX
+        )
+      );
+    const screenGroupings = new Set(Array.from({ length: MARK_CLUSTER_PX }, (_, pan) => JSON.stringify(onScreen(pan))));
+    expect(screenGroupings.size).toBeGreaterThan(1);
+
+    const atZoom = (zoom: number) => keys(clusterPoints(marks, glWorldPx({ getZoom: () => zoom }), MARK_CLUSTER_PX));
+    expect(atZoom(13)).toEqual([['a', 'b', 'c']]);
+    expect(atZoom(18)).toEqual([['a'], ['b'], ['c']]);
+  });
 });

client/src/components/Journey/journeyMapMarks.ts

@@ -15,7 +15,7 @@ export type JourneyMapMark =
 export const PLAN_FALLBACK_COLOR = '#64748b';
 
 /**
- * Marks closer than this on screen are one hit: the reader could not pick one
+ * Marks in one cell of this size are one hit: the reader could not pick one
  * of them anyway. Tighter than the photo grid, since a mark is a pin and not a
  * thumbnail, so marks a street apart stay apart.
  */
@@ -27,19 +27,49 @@ const STAY_DOT = 14;
 const MARK_CLUSTER_SIZE = 28;
 
 /**
- * Grid clustering in screen space, shared by both renderers: points whose
- * projected position falls in the same `px` cell become one, anchored on the
- * first so the pin points where that member is. `project` is the engine's own
- * lat/lng to container-pixel conversion.
+ * A position in world pixels: the whole map laid out at the current zoom, with
+ * the origin at its north-west corner. Unlike a container point it does not
+ * move when the map is panned, rotated or tilted.
+ */
+export type WorldPx = (lat: number, lng: number) => { x: number; y: number };
+
+const MAX_MERCATOR_LAT = 85.0511287798;
+
+/**
+ * Web Mercator world pixels at `zoom` for a tile of `tileSize` pixels. Both GL
+ * engines lay out their world on 512 px tiles; Leaflet projects through its
+ * own CRS instead, so a GCJ-02 basemap keeps its offset.
+ */
+export function mercatorWorldPx(lat: number, lng: number, zoom: number, tileSize: number): { x: number; y: number } {
+  const size = tileSize * 2 ** zoom;
+  const phi = (Math.max(-MAX_MERCATOR_LAT, Math.min(MAX_MERCATOR_LAT, lat)) * Math.PI) / 180;
+  return {
+    x: ((lng + 180) / 360) * size,
+    y: ((1 - Math.log(Math.tan(phi) + 1 / Math.cos(phi)) / Math.PI) / 2) * size,
+  };
+}
+
+/** World pixels at a GL map's current zoom, free of its centre, bearing and pitch. */
+export function glWorldPx(map: { getZoom(): number }): WorldPx {
+  const zoom = map.getZoom();
+  return (lat, lng) => mercatorWorldPx(lat, lng, zoom, 512);
+}
+
+/**
+ * Grid clustering shared by both renderers: points whose world position falls
+ * in the same `px` cell become one, anchored on the first so the pin points
+ * where that member is. The grid is laid over the world and not over the
+ * viewport, so panning keeps every group as it is and only a zoom regroups
+ * (#2889).
  */
 export function clusterPoints<T extends { lat: number; lng: number }>(
   points: readonly T[],
-  project: (lat: number, lng: number) => { x: number; y: number },
+  toWorldPx: WorldPx,
   px: number
 ): { lat: number; lng: number; members: T[] }[] {
   const buckets = new Map<string, T[]>();
   for (const point of points) {
-    const pt = project(point.lat, point.lng);
+    const pt = toWorldPx(point.lat, point.lng);
     const key = `${Math.round(pt.x / px)}:${Math.round(pt.y / px)}`;
     const list = buckets.get(key);
     if (list) list.push(point);

client/src/components/Journey/journeyMapPopup.ts

@@ -93,11 +93,24 @@ export function ensureJourneyPopupStyle(): void {
   s.textContent = `
     .mapboxgl-popup.trek-journey-popup,
     .maplibregl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
-    /* The card as a whole never takes the pointer — it sits over the map and would
-       swallow drags. The photo strip is the one exception, and only where the host
-       wired a handler for it. */
+    /* The card sits over the map and takes the pointer only where the host gave it
+       an action: the whole card where it opens its entry (the phone, where a tap on
+       a pin is what brings it up), the photo strip where it opens the pictures.
+       Anywhere else it stays a label the map's drags pass through. */
+    .mapboxgl-popup.trek-journey-popup.is-openable .mapboxgl-popup-content,
+    .maplibregl-popup.trek-journey-popup.is-openable .maplibregl-popup-content { pointer-events: auto; cursor: pointer; }
     .trek-journey-popup.is-interactive .trek-journey-popup-shots { pointer-events: auto; cursor: zoom-in; }
     .trek-journey-popup.is-interactive .trek-journey-popup-shot:hover { filter: brightness(1.06); }
+    /* The shared map-tooltip style turns the pointer off on every Leaflet tooltip. */
+    .leaflet-tooltip.map-tooltip.trek-journey-tooltip.is-openable { pointer-events: auto; cursor: pointer; }
+    /* The press shows on what the card holds: Leaflet positions the tooltip with its
+       own transform and sets its opacity inline, so the shell itself is off limits. */
+    .mapboxgl-popup.trek-journey-popup.is-openable .mapboxgl-popup-content > *,
+    .maplibregl-popup.trek-journey-popup.is-openable .maplibregl-popup-content > *,
+    .leaflet-tooltip.trek-journey-tooltip.is-openable > * { transition: opacity 120ms ease-out; }
+    .mapboxgl-popup.trek-journey-popup.is-openable .mapboxgl-popup-content:active > *,
+    .maplibregl-popup.trek-journey-popup.is-openable .maplibregl-popup-content:active > *,
+    .leaflet-tooltip.trek-journey-tooltip.is-openable:active > * { opacity: 0.6; }
     .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content,
     .maplibregl-popup.trek-journey-popup .maplibregl-popup-content,
     .leaflet-tooltip.trek-journey-tooltip {

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

@@ -0,0 +1,98 @@
+// FE-JRN-STOPS-001 to FE-JRN-STOPS-007
+import { describe, expect, it } from 'vitest';
+import { compareJourneyEntries, isJourneyMapEntry, journeyMapStops, type JourneyStopEntry } from './journeyMapStops';
+
+function entry(over: Partial<JourneyStopEntry> & { id: number }): JourneyStopEntry {
+  return {
+    entry_date: '2026-10-24',
+    sort_order: 0,
+    type: 'entry',
+    title: 'Stop',
+    location_lat: 35,
+    location_lng: 135.7,
+    ...over,
+  };
+}
+
+function numbers(entries: JourneyStopEntry[]): Record<string, number | null> {
+  return Object.fromEntries(journeyMapStops(entries).map(({ entry: e, stop }) => [String(e.id), stop]));
+}
+
+describe('journeyMapStops', () => {
+  it('FE-JRN-STOPS-001: counts through the whole journey instead of restarting each day', () => {
+    const entries = [
+      entry({ id: 1, entry_date: '2026-10-23' }),
+      entry({ id: 2, entry_date: '2026-10-23', sort_order: 1 }),
+      entry({ id: 3, entry_date: '2026-10-23', sort_order: 2 }),
+      entry({ id: 4, entry_date: '2026-10-24' }),
+      entry({ id: 5, entry_date: '2026-10-24', sort_order: 1 }),
+    ];
+
+    expect(numbers(entries)).toEqual({ 1: 1, 2: 2, 3: 3, 4: 4, 5: 5 });
+  });
+
+  it('FE-JRN-STOPS-002: numbers in reading order whatever order the entries arrive in', () => {
+    const entries = [
+      entry({ id: 9, entry_date: '2026-10-24', sort_order: 1 }),
+      entry({ id: 7, entry_date: '2026-10-23' }),
+      entry({ id: 8, entry_date: '2026-10-24', sort_order: 0 }),
+    ];
+
+    expect(journeyMapStops(entries).map((s) => s.entry.id)).toEqual([7, 8, 9]);
+    expect(numbers(entries)).toEqual({ 7: 1, 8: 2, 9: 3 });
+  });
+
+  it('FE-JRN-STOPS-003: a sort_order tie is broken by id, as the server orders them', () => {
+    const entries = [entry({ id: 12 }), entry({ id: 10 }), entry({ id: 11 })];
+
+    expect(journeyMapStops(entries).map((s) => s.entry.id)).toEqual([10, 11, 12]);
+    expect(compareJourneyEntries(entry({ id: 10 }), entry({ id: 11 }))).toBeLessThan(0);
+  });
+
+  it('FE-JRN-STOPS-004: a draft keeps its pin without a number and does not move the stops after it', () => {
+    const entries = [
+      entry({ id: 1, entry_date: '2026-10-23' }),
+      entry({ id: 2, entry_date: '2026-10-23', sort_order: 1, is_draft: true }),
+      entry({ id: 3, entry_date: '2026-10-24' }),
+    ];
+
+    expect(numbers(entries)).toEqual({ 1: 1, 2: null, 3: 2 });
+    expect(numbers(entries.filter((e) => !e.is_draft))).toEqual({ 1: 1, 3: 2 });
+  });
+
+  it('FE-JRN-STOPS-005: skeletons, gallery placeholders and entries without coordinates stay off the map', () => {
+    const entries = [
+      entry({ id: 1, type: 'skeleton' }),
+      entry({ id: 2, title: 'Gallery' }),
+      entry({ id: 3, title: '[Trip Photos]' }),
+      entry({ id: 4, location_lat: null, location_lng: null }),
+      entry({ id: 5, sort_order: 1 }),
+    ];
+
+    expect(numbers(entries)).toEqual({ 5: 1 });
+    expect(entries.map(isJourneyMapEntry)).toEqual([false, false, false, false, true]);
+  });
+
+  it('FE-JRN-STOPS-006: the owner journal and the share link give every published stop the same number', () => {
+    const owner = [
+      entry({ id: 21, entry_date: '2026-10-23' }),
+      entry({ id: 22, entry_date: '2026-10-23', sort_order: 1, is_draft: true }),
+      entry({ id: 23, entry_date: '2026-10-23', sort_order: 2 }),
+      entry({ id: 24, entry_date: '2026-10-24', type: 'skeleton' }),
+      entry({ id: 25, entry_date: '2026-10-24', sort_order: 1 }),
+    ];
+    const shared = owner.filter((e) => !e.is_draft && e.type !== 'skeleton');
+
+    const ownerNumbers = numbers(owner);
+    delete ownerNumbers[22];
+    expect(ownerNumbers).toEqual(numbers(shared));
+  });
+
+  it('FE-JRN-STOPS-007: leaves the caller its list untouched', () => {
+    const entries = [entry({ id: 2, sort_order: 1 }), entry({ id: 1 })];
+
+    journeyMapStops(entries);
+
+    expect(entries.map((e) => e.id)).toEqual([2, 1]);
+  });
+});

client/src/components/Journey/journeyMapStops.ts

@@ -0,0 +1,59 @@
+/**
+ * Which journal entries stand on a journey's map and the number each one carries.
+ *
+ * The owner's journal and the public share link both draw the same pins, and they
+ * used to number them by two different rules: the share link counted through the
+ * whole journey (#1962) while the owner's map restarted at 1 every day, so the
+ * same stop read 66 on one and 6 on the other (#2886). Both views now take their
+ * numbers from here.
+ */
+
+export interface JourneyStopEntry {
+  id: number | string;
+  entry_date: string;
+  sort_order?: number | null;
+  title?: string | null;
+  type?: string | null;
+  is_draft?: boolean | number | null;
+  location_lat?: number | null;
+  location_lng?: number | null;
+}
+
+interface JourneyMapStop<E> {
+  entry: E;
+  /** The stop's place in the whole journey, or null for a draft the share link does not show. */
+  stop: number | null;
+}
+
+/** Placeholder entries the old gallery model kept in the journal; a migration removes them, older caches may still hold them. */
+const GALLERY_PLACEHOLDER_TITLES = new Set(['Gallery', '[Trip Photos]']);
+
+export function isGalleryPlaceholder(entry: Pick<JourneyStopEntry, 'title'>): boolean {
+  return GALLERY_PLACEHOLDER_TITLES.has(entry.title ?? '');
+}
+
+/** A skeleton is a suggestion taken from the trip, not a place anyone wrote about. */
+export function isJourneyMapEntry(entry: JourneyStopEntry): boolean {
+  return !!entry.location_lat && !!entry.location_lng && entry.type !== 'skeleton' && !isGalleryPlaceholder(entry);
+}
+
+/** The journal's reading order, the same one the server reads the entries in. */
+export function compareJourneyEntries(a: JourneyStopEntry, b: JourneyStopEntry): number {
+  if (a.entry_date !== b.entry_date) return a.entry_date < b.entry_date ? -1 : 1;
+  const bySortOrder = (a.sort_order ?? 0) - (b.sort_order ?? 0);
+  if (bySortOrder !== 0) return bySortOrder;
+  return Number(a.id) - Number(b.id);
+}
+
+/**
+ * The located entries in reading order, each with its stop number. A draft keeps
+ * its pin for the people writing the journal but takes no number, so every stop
+ * after it reads the same as on the share link, which leaves drafts out.
+ */
+export function journeyMapStops<E extends JourneyStopEntry>(entries: readonly E[]): JourneyMapStop<E>[] {
+  let stop = 0;
+  return entries
+    .filter(isJourneyMapEntry)
+    .sort(compareJourneyEntries)
+    .map((entry) => ({ entry, stop: entry.is_draft ? null : ++stop }));
+}

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

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { clusterPhotos, photoMarkerHtml } from './journeyPhotoLayer'
 
 describe('journey photo layer (#2453)', () => {
-  it('FE-JOURNEY-PHOTOLAYER-001: buckets by screen position, anchors on the first photo, badges a count', () => {
+  it('FE-JOURNEY-PHOTOLAYER-001: buckets by world position, anchors on the first photo, badges a count', () => {
     const photos = [
       { id: '1', lat: 1, lng: 1, thumbUrl: '/a.jpg' },
       { id: '2', lat: 1.2, lng: 1.2, thumbUrl: '/b.jpg' },

client/src/components/Journey/journeyPhotoLayer.ts

@@ -1,4 +1,4 @@
-import { clusterPoints } from './journeyMapMarks'
+import { clusterPoints, type WorldPx } from './journeyMapMarks'
 
 /** A photo that knows where it was taken (#1614). */
 export interface MapPhoto {
@@ -9,24 +9,23 @@ export interface MapPhoto {
 }
 
 /**
- * Grid clustering in screen space, shared by the Leaflet and the GL journey map.
+ * Grid clustering of the photos, shared by the Leaflet and the GL journey map.
  *
  * The Journey maps have never had clustering, and the library the planner uses
  * hangs off react-leaflet while these maps drive their engines directly.
- * Bucketing by rounded pixel position is a few lines, is deterministic, and is
- * enough for the job: photos of one place collapse into one thumbnail with a
- * count, and pulling the map apart separates them again. `project` is the
- * engine's own lat/lng to container-pixel conversion.
+ * Bucketing by rounded world-pixel position is a few lines, is deterministic,
+ * and is enough for the job: photos of one place collapse into one thumbnail
+ * with a count, zooming in separates them again, and panning leaves them be.
  */
 export const PHOTO_CLUSTER_PX = 64
 
 export function clusterPhotos(
   photos: MapPhoto[],
-  project: (lat: number, lng: number) => { x: number; y: number },
+  toWorldPx: WorldPx,
 ): { lat: number; lng: number; members: MapPhoto[] }[] {
   // Anchored on the first member rather than the centroid: the thumbnail shown
   // is that photo's, so the pin should point where that picture was taken.
-  return clusterPoints(photos, project, PHOTO_CLUSTER_PX)
+  return clusterPoints(photos, toWorldPx, PHOTO_CLUSTER_PX)
 }
 
 export function photoMarkerHtml(thumbUrl: string, count: number): string {

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

@@ -1,4 +1,4 @@
-// FE-JRN-CAROUSEL-001 to FE-JRN-CAROUSEL-007: the card carousel over the journey map,
+// FE-JRN-CAROUSEL-001 to FE-JRN-CAROUSEL-008: 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';
@@ -136,4 +136,13 @@ describe('useJourneyCarouselSync', () => {
     expect(hook.result.current.activeIndex).toBe(1);
     expect(map.highlightMarker).toHaveBeenCalledWith(null);
   });
+
+  it('FE-JRN-CAROUSEL-008: a marker card opens its entry by id, wherever the carousel stands (#2885)', () => {
+    const { result, props } = setup();
+    act(() => result.current.openEntryById('3'));
+    expect(props.onOpenEntry).toHaveBeenCalledWith(ENTRIES[2]);
+    expect(result.current.activeIndex).toBe(0);
+    act(() => result.current.openEntryById('99'));
+    expect(props.onOpenEntry).toHaveBeenCalledTimes(1);
+  });
 });

client/src/components/Journey/useJourneyCarouselSync.ts

@@ -123,6 +123,16 @@ export function useJourneyCarouselSync<E extends CarouselEntry>({
     [activeIndex, onOpenEntry, scrollCardIntoCenter, syncMapOnTap, syncMapToCard]
   );
 
+  // The marker card on the map names one entry, so a tap on it opens that entry
+  // straight away, the same way a tap on the active carousel card does (#2885).
+  const openEntryById = useCallback(
+    (id: string) => {
+      const entry = entries.find((e) => String(e.id) === id);
+      if (entry) onOpenEntry(entry);
+    },
+    [entries, onOpenEntry]
+  );
+
   // The day bar lands on the first entry of that day, which is where a reader who
   // asked for "day nine" means.
   const jumpToDay = useCallback(
@@ -146,6 +156,7 @@ export function useJourneyCarouselSync<E extends CarouselEntry>({
     syncMapToCard,
     handleMarkerClick,
     handleCardTap,
+    openEntryById,
     jumpToDay,
   };
 }

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

@@ -115,6 +115,8 @@ describe('useJourneyDayImport', () => {
   it('FE-JRN-DAYIMPORT-004: the route goes along only when switched on, kept as previewed', async () => {
     const { result, onKept, onClose } = setup();
     await waitFor(() => expect(result.current.route.offer).toBe('keep'));
+    expect(result.current.mapTracks.length).toBeGreaterThan(0);
+    expect(result.current.mapTracks.every((track) => track.date === '2026-05-14')).toBe(true);
     repo.save.mockResolvedValue({ day: buildRecordedDay(), outcome: 'created' });
 
     act(() => result.current.route.toggle());

client/src/components/Journey/useJourneyDayImport.ts

@@ -155,8 +155,9 @@ function useDayMap(
         color: dayColor,
         points: segment.points,
         kind: 'day_recording',
+        date,
       })),
-    [route, dayColor, t]
+    [route, dayColor, date, t]
   );
   return { entries, tracks };
 }

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

@@ -202,6 +202,8 @@ describe('useJourneyMapLayers', () => {
     expect(result.current.tracks.every((track) => track.kind === 'day_recording' && track.color === '#14b8a6')).toBe(
       true
     );
+    // The day travels as a date of its own, so the map can tell which stretches it covers (#2888).
+    expect(result.current.tracks.map((track) => track.date)).toEqual(['2026-05-14', '2026-05-14']);
     expect(result.current.controls.map((c) => c.layer)).toEqual(['recorded', 'entries', 'photos']);
     expect(result.current.controls[0]).toEqual({ layer: 'recorded', count: 1, state: 'ready' });
   });

client/src/components/Journey/useJourneyMapLayers.ts

@@ -163,6 +163,7 @@ export function useJourneyMapLayers({
           color,
           points,
           kind: 'day_recording',
+          date: day.date,
         }));
       }),
     [sources.recordings, colorOfDay, t, locale]
@@ -187,7 +188,7 @@ export function useJourneyMapLayers({
     [places, stays, visibility, entryIdsOnMap, stayColor]
   );
 
-  const recordedDays = useMemo(() => new Set(recorded.map((track) => track.name)).size, [recorded]);
+  const recordedDays = useMemo(() => new Set(recorded.map((track) => track.date ?? track.name)).size, [recorded]);
   const controls = useMemo(
     () =>
       buildControls({

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

@@ -47,6 +47,7 @@ describe('useJourneyRecordings', () => {
     expect(result.current.byDate.get('2026-05-15')?.id).toBe(4);
     expect(result.current.tracks).toHaveLength(3);
     expect(result.current.tracks.every((track) => track.kind === 'day_recording')).toBe(true);
+    expect(result.current.tracks.map((track) => track.date)).toEqual(['2026-05-14', '2026-05-14', '2026-05-15']);
     // One line per piece: a gap between two pieces is never drawn over.
     expect(result.current.tracks.slice(0, 2).map((track) => track.points)).toEqual([
       WALK_SEGMENT.points,

client/src/components/Journey/useJourneyRecordings.ts

@@ -105,6 +105,7 @@ export function useJourneyRecordings(
           color,
           points: segment.points,
           kind: 'day_recording',
+          date: day.date,
         }));
       }),
     [days, colorOf, t, locale]

client/src/components/Map/MapViewGL.tsx

@@ -50,16 +50,10 @@ import { pluginsApi, type PluginMapMarker, type PluginMapLayer } from '../../api
 import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
 import { alongShortestArc, computeMapViewport, TILE_SIZE_GL } from '../../utils/mapViewport'
 import { selectedPlaceTarget } from './selectedPlaceTarget'
-import { PLACE_CLUSTER_CIRCLE_LAYER_ID, PLACE_CLUSTER_COUNT_LAYER_ID } from './placeClusterLayers'
-
-// Marker grouping for the GL map (#1385): MapLibre/Mapbox can't show the rich
-// HTML photo markers *and* cluster them natively, so we feed the place points
-// into a clustered GeoJSON source. The cluster bubbles render as GL circles +
-// a count label; the individual rich HTML markers are then only drawn for the
-// points the source reports as currently unclustered. Grouping is always on,
-// matching the Leaflet map's MarkerClusterGroup.
-const PLACE_CLUSTER_SOURCE_ID = 'trip-place-clusters'
-const PLACE_UNCLUSTERED_LAYER_ID = 'trip-place-unclustered-hit'
+import {
+  PLACE_CLUSTER_CIRCLE_LAYER_ID, PLACE_CLUSTER_COUNT_LAYER_ID, PLACE_CLUSTER_SOURCE_ID,
+  addPlaceClusterLayers, drawClusterBubbles, expandCluster,
+} from './placeClusterLayers'
 
 type PlaceWithCoords = Place & { lat: number; lng: number }
 
@@ -112,72 +106,6 @@ interface Props extends MapViewProps {
   gl: any
 }
 
-/**
- * How eagerly place markers merge into a cluster.
- *
- * The overview band the Leaflet map clusters in as well (`CLUSTER_UNTIL_ZOOM` there),
- * kept as plain numbers rather than shared constants so the GL bundle does not have to
- * carry Leaflet for them. Above the cutoff supercluster hands every point back on its
- * own, and the stops that share a coordinate are folded together at the pin level
- * instead — see the reconcile below.
- */
-const CLUSTER_RADIUS = 20
-const CLUSTER_MAX_ZOOM = 8
-
-/** The cluster source and the three layers over it. Extracted so the rebuild on a mode
- *  change and the initial build cannot drift apart. */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function addPlaceClusterLayers(map: any): void {
-      map.addSource(PLACE_CLUSTER_SOURCE_ID, {
-        type: 'geojson',
-        data: { type: 'FeatureCollection', features: [] },
-        cluster: true,
-        clusterRadius: CLUSTER_RADIUS,
-        clusterMaxZoom: CLUSTER_MAX_ZOOM,
-      })
-      map.addLayer({
-        id: PLACE_CLUSTER_CIRCLE_LAYER_ID,
-        type: 'circle',
-        source: PLACE_CLUSTER_SOURCE_ID,
-        filter: ['has', 'point_count'],
-        paint: {
-          'circle-color': '#111827',
-          'circle-opacity': 0.97,
-          'circle-radius': ['step', ['get', 'point_count'], 18, 10, 21, 50, 24],
-          'circle-stroke-width': 2.5,
-          'circle-stroke-color': 'rgba(255,255,255,0.9)',
-        },
-      })
-      map.addLayer({
-        id: PLACE_CLUSTER_COUNT_LAYER_ID,
-        type: 'symbol',
-        source: PLACE_CLUSTER_SOURCE_ID,
-        filter: ['has', 'point_count'],
-        layout: {
-          'text-field': ['get', 'point_count_abbreviated'],
-          'text-size': 12,
-          'text-allow-overlap': true,
-        },
-        paint: {
-          'text-color': '#ffffff',
-          'text-halo-color': 'rgba(17,24,39,0.35)',
-          'text-halo-width': 1,
-        },
-      })
-      map.addLayer({
-        id: PLACE_UNCLUSTERED_LAYER_ID,
-        type: 'circle',
-        source: PLACE_CLUSTER_SOURCE_ID,
-        filter: ['!', ['has', 'point_count']],
-        paint: {
-          'circle-radius': 24,
-          'circle-opacity': 0,
-          'circle-stroke-opacity': 0,
-        },
-      })
-}
-
-
 function createMarkerElement(place: Place & PlaceMarkerFlags & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
   // A stop that interrupts the drive gets its own small disc, decided before the photo
   // branch: the brand logo a fuel search comes back with is exactly what this replaces.
@@ -612,6 +540,8 @@ export function MapViewGL({
   useDawarichTrailGL(mapRef.current, mapReady, dawarichTrack, dawarichSelectedDate, 'trip-route-casing', dawarichHiddenDates)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const markersRef = useRef<Map<number, PlacePin>>(new Map())
+  /** The count bubbles, one per cluster the source currently reports. */
+  const clusterPinsRef = useRef<PlacePin[]>([])
   // Own layer for the hand-positioned place pins (MapLibre path, see makePlacePin).
   const pinLayerRef = useRef<HTMLDivElement | null>(null)
   const locationMarkerRef = useRef<LocationMarkerHandle | null>(null)
@@ -642,6 +572,7 @@ export function MapViewGL({
   // in the same frame the canvas draws, or the ones left out swim against the ones in.
   const repositionPins = useCallback(() => {
     markersRef.current.forEach(pin => pin.reposition())
+    clusterPinsRef.current.forEach(pin => pin.reposition())
     poiMarkersRef.current.forEach(pin => pin.reposition())
     pluginMarkersRef.current.forEach(pin => pin.reposition())
     routeViaMarkersRef.current.forEach(pin => pin.reposition())
@@ -1304,21 +1235,7 @@ export function MapViewGL({
             ? map.queryRenderedFeatures(e.point, { layers: [PLACE_CLUSTER_CIRCLE_LAYER_ID, PLACE_CLUSTER_COUNT_LAYER_ID] })
             : []
           const feature = features?.[0]
-          const clusterId = feature?.properties?.cluster_id
-          const coordinates = feature?.geometry?.coordinates
-          if (clusterId == null || !Array.isArray(coordinates)) return
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const source = map.getSource(PLACE_CLUSTER_SOURCE_ID) as any
-          const easeToZoom = (nextZoom: number) => {
-            try { map.easeTo({ center: coordinates, zoom: nextZoom, duration: 350 }) } catch { /* noop */ }
-          }
-          try {
-            const maybeZoom = source?.getClusterExpansionZoom?.(clusterId, (err: Error | null, nextZoom: number) => {
-              if (!err && typeof nextZoom === 'number') easeToZoom(nextZoom)
-            })
-            if (typeof maybeZoom === 'number') easeToZoom(maybeZoom)
-            else if (maybeZoom && typeof maybeZoom.then === 'function') maybeZoom.then(easeToZoom).catch(() => {})
-          } catch { /* noop */ }
+          expandCluster(map, feature?.properties?.cluster_id, feature?.geometry?.coordinates)
         }
         const setClusterCursor = () => {
           const canvas = typeof map.getCanvas === 'function' ? map.getCanvas() : null
@@ -1704,8 +1621,17 @@ export function MapViewGL({
     source.setData(buildPlaceClusterData(places) as any)
     const placesById = new Map<number, PlaceWithCoords>(validPlaces.map(place => [place.id, place]))
     let raf: number | null = null
+    const dropClusterPins = () => {
+      clusterPinsRef.current.forEach(pin => pin.remove())
+      clusterPinsRef.current = []
+    }
+    const reconcileClusterPins = () => {
+      dropClusterPins()
+      clusterPinsRef.current = drawClusterBubbles(map, (el, lng, lat) => attachPin(map, gl, pinLayerRef.current, el, lng, lat))
+    }
     const runReconcile = () => {
       raf = null
+      reconcileClusterPins()
       const features = map.querySourceFeatures(PLACE_CLUSTER_SOURCE_ID, { filter: ['!', ['has', 'point_count']] }) || []
       const seen = new Set<number>()
       const visiblePlaces: PlaceWithCoords[] = []
@@ -1752,6 +1678,7 @@ export function MapViewGL({
 
     return () => {
       if (raf !== null) cancelAnimationFrame(raf)
+      dropClusterPins()
       map.off('moveend', scheduleReconcile)
       map.off('zoomend', scheduleReconcile)
       map.off('idle', scheduleReconcile)

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

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, afterEach } from 'vitest'
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { http, HttpResponse } from 'msw'
 import { server } from '../../../tests/helpers/msw/server'
 import { pluginsApi, type PluginRouteResult } from '../../api/client'
@@ -15,8 +15,8 @@ import {
   calculateAlternatives,
   avoidedClasses,
   routeEngineFor,
-  osrmLegSegment,
 } from './RouteCalculator'
+import { legSegment } from './routeText'
 
 // Every route now goes to the FOSSGIS per-profile hosts. The car-only project-osrm.org
 // demo ignored the profile in the URL, so walking routes followed the road network.
@@ -387,6 +387,12 @@ function pluginRouteResult(over: Partial<PluginRouteResult> = {}): PluginRouteRe
   }
 }
 
+// FOSSGIS: OSRM routes the days and Valhalla only what OSRM cannot. Where Valhalla routes
+// every day is valhallaDayRoute.test.ts.
+beforeEach(() => {
+  useSettingsStore.setState(st => ({ settings: { ...st.settings, routing_valhalla_provider: 'fossgis' } }))
+})
+
 afterEach(() => {
   vi.restoreAllMocks()
   useSettingsStore.setState({ settings: { ...useSettingsStore.getState().settings, distance_unit: 'metric' } })
@@ -913,7 +919,8 @@ describe('calculateAlternatives', () => {
 
   it('FE-COMP-ROUTECALCULATOR-053: an instance with its own OSRM is never sent to the public Valhalla', async () => {
     let valhallaCalls = 0
-    useSettingsStore.setState(st => ({ settings: { ...st.settings, routing_base_url: 'https://osrm.example.org' } }))
+    // No routing service chosen: the own OSRM alone decides.
+    useSettingsStore.setState(st => ({ settings: { ...st.settings, routing_base_url: 'https://osrm.example.org', routing_valhalla_provider: '' } }))
     server.use(
       http.get('https://osrm.example.org/route/v1/driving/:coords', ({ request }) => {
         const exclude = new URL(request.url).searchParams.get('exclude')
@@ -1232,11 +1239,11 @@ describe('a trip that avoids something', () => {
   })
 })
 
-describe('osrmLegSegment', () => {
+describe('legSegment', () => {
   const waypoints = [{ lat: 48, lng: 2 }, { lat: 50, lng: 4 }, { lat: 52, lng: 6 }]
 
   it('spans waypoint i to i + 1 with the label at the midpoint', () => {
-    const seg = osrmLegSegment({ distance: 1500, duration: 600 }, 1, waypoints)
+    const seg = legSegment({ distance: 1500, duration: 600 }, 1, waypoints)
     expect(seg.from).toEqual([50, 4])
     expect(seg.to).toEqual([52, 6])
     expect(seg.mid).toEqual([51, 5])
@@ -1245,7 +1252,7 @@ describe('osrmLegSegment', () => {
   })
 
   it('formats driving as measured and walking at 5 km/h', () => {
-    const seg = osrmLegSegment({ distance: 5000, duration: 600 }, 0, waypoints)
+    const seg = legSegment({ distance: 5000, duration: 600 }, 0, waypoints)
     expect(seg.drivingText).toBe('10 min')
     expect(seg.walkingText).toBe('1 h 0 min')
     expect(seg.durationText).toBeUndefined()
@@ -1253,6 +1260,6 @@ describe('osrmLegSegment', () => {
 
   it('writes short metric distances in metres', () => {
     useSettingsStore.setState({ settings: { ...useSettingsStore.getState().settings, distance_unit: 'metric' } })
-    expect(osrmLegSegment({ distance: 420.4, duration: 60 }, 0, waypoints).distanceText).toBe('420 m')
+    expect(legSegment({ distance: 420.4, duration: 60 }, 0, waypoints).distanceText).toBe('420 m')
   })
 })

client/src/components/Map/RouteCalculator.ts

@@ -1,11 +1,13 @@
 import { useSettingsStore } from '../../store/settingsStore'
 import { pluginsApi } from '../../api/client'
-import type { DistanceUnit, RouteResult, RouteSegment, RouteWithLegs, SnappedWaypoint, Waypoint, RouteAnchors } from '../../types'
+import type { RouteEngine, RouteResult, RouteSegment, RouteWithLegs, SnappedWaypoint, Waypoint, RouteAnchors } from '../../types'
 import { haversineKm } from '../../utils/geo'
-import { formatDistance } from '../../utils/units'
 import { countRoute } from './routeUsageCounter'
 import { cacheRoute, rememberRoute, routeInMemory, storedRoute } from './routeStore'
-import { valhallaRouteAvoiding, valhallaRun, valhallaAvailable, valhallaAlternates, valhallaSpacing, legAvoids, type AvoidClass, type ValhallaLeg } from './valhallaRoute'
+import { formatDuration, formatRouteDistance, getDistanceUnit, legSegment } from './routeText'
+import type { RouteAlternative } from './routeTypes'
+import { valhallaAvailable, valhallaPlansDays, valhallaRoutesDays, type AvoidClass } from './valhallaRoute'
+import { EXCLUDABLE_CLASSES, valhallaDayAlternatives, valhallaDayRoute, valhallaExcluding } from './valhallaDayRoute'
 import { furthestFrom, sameRoad, type RouteUsageSurface } from '@trek/shared'
 
 // FOSSGIS hosts OSRM with real per-profile routing (car/foot/bike) — the
@@ -213,12 +215,15 @@ export function parsePluginProfile(profile: string): { pluginId: string; profile
   return { pluginId: rest.slice(0, slash), profileId: rest.slice(slash + 1) }
 }
 
-/**
- * Which engine priced a route: OSRM, the second engine that weighs road classes away, or
- * a route provider plugin. Their figures are three different speed models, so a figure
- * from one read against a figure from another measures the models, not the roads.
- */
-export type RouteEngine = 'osrm' | 'valhalla' | 'plugin'
+/** One of the three profiles both engines know, or null for a plugin's own. */
+function builtInProfile(profile: RouteProfileKey): 'driving' | 'walking' | 'cycling' | null {
+  switch (profile) {
+    case 'driving': return 'driving'
+    case 'walking': return 'walking'
+    case 'cycling': return 'cycling'
+    default: return null
+  }
+}
 
 /**
  * The classes a request really weighs away, in a stable order, and none when it cannot.
@@ -234,10 +239,75 @@ export function avoidedClasses(profile: RouteProfileKey, avoid: readonly AvoidCl
     : []
 }
 
-/** The engine `calculateRouteWithLegs` hands a request with this profile and avoidance to. */
+/**
+ * The engine a request with this profile and avoidance is planned with: Valhalla for every
+ * day where it routes the days, and for a day that avoids something wherever it can; OSRM
+ * for the rest. Planned, not promised: a day Valhalla cannot answer, or one asked while
+ * the relay rests, is drawn by OSRM, and the answer says so in its `engine`.
+ */
 export function routeEngineFor(profile: RouteProfileKey, avoid: readonly AvoidClass[]): RouteEngine {
   if (parsePluginProfile(profile)) return 'plugin'
-  return avoidedClasses(profile, avoid).length ? 'valhalla' : 'osrm'
+  if (avoidedClasses(profile, avoid).length) return 'valhalla'
+  return builtInProfile(profile) && valhallaPlansDays() ? 'valhalla' : 'osrm'
+}
+
+/** The profile Valhalla routes a request under, or null where `routeEngineFor` gives it to another engine. */
+function valhallaProfile(profile: RouteProfileKey, avoid: readonly AvoidClass[]): 'driving' | 'walking' | 'cycling' | null {
+  return routeEngineFor(profile, avoid) === 'valhalla' ? builtInProfile(profile) : null
+}
+
+/**
+ * Where a Valhalla answer is kept: beside the OSRM key, which keeps the shape it always
+ * had. A day that weighs classes away keeps the key it has had since only Valhalla could
+ * answer one, so the days a device already holds stay found; a day that avoids nothing
+ * names the engine instead.
+ */
+function valhallaKey(plainKey: string, avoiding: readonly AvoidClass[]): string {
+  return avoiding.length ? `${plainKey}:avoid=${avoiding.join(',')}` : `${plainKey}:valhalla`
+}
+
+/**
+ * OSRM's answer for a day Valhalla could not route. A day that avoided nothing is then
+ * routed as it always was, without a word. One that avoided something says that nothing
+ * was avoided, with the reason, so the rail flags the day instead of implying the setting
+ * held on a road nobody weighed.
+ */
+function withFallbackNoted(plain: RouteWithLegs, avoiding: AvoidClass[]): RouteWithLegs {
+  const drawn = withEngine(plain, 'osrm')
+  return avoiding.length ? { ...drawn, avoidance: { asked: avoiding, achieved: [], fellBack: true } } : drawn
+}
+
+/**
+ * A kept route with the engine that drew it. A key holds one engine's answers only, so an
+ * entry kept before answers named their engine is that key's.
+ */
+function withEngine(route: RouteWithLegs, engine: RouteEngine): RouteWithLegs {
+  return route.engine ? route : { ...route, engine }
+}
+
+/**
+ * A day planned with Valhalla: its answer, kept under the Valhalla key, or where it gives
+ * none OSRM's for the whole day, kept under the plain key. One engine per day, never one
+ * leg from each. While the relay rests, a day that avoids nothing is not put to it at all.
+ */
+async function valhallaOrOsrmDay(
+  waypoints: Waypoint[],
+  { profile, avoiding, keys, signal }: {
+    profile: 'driving' | 'walking' | 'cycling'
+    avoiding: AvoidClass[]
+    keys: { valhalla: string; plain: string; coords: string }
+    signal?: AbortSignal
+  },
+): Promise<RouteWithLegs> {
+  const asking = avoiding.length > 0 || valhallaRoutesDays()
+  const routed = asking ? await valhallaDayRoute(waypoints, profile, avoiding, signal) : null
+  if (routed) {
+    cacheRoute(keys.valhalla, routed)
+    return routed
+  }
+  const plain = (await storedRoute(keys.plain)) ?? await osrmWithLegs(waypoints, keys.coords, profile, signal)
+  cacheRoute(keys.plain, plain)
+  return withFallbackNoted(plain, avoiding)
 }
 
 /** Fetches a full route via OSRM and returns coordinates, distance, and duration estimates for driving/walking. */
@@ -467,31 +537,11 @@ export async function calculateSegments(
   if (data.code !== 'Ok' || !data.routes?.[0]) throw new Error('No route found')
 
   const legs = data.routes[0].legs
-  return legs.map((leg: OsrmLeg, i: number): RouteSegment => osrmLegSegment(leg, i, waypoints))
+  return legs.map((leg: OsrmLeg, i: number): RouteSegment => legSegment(leg, i, waypoints))
 }
 
 interface OsrmLeg { distance: number; duration: number }
 
-/**
- * The connector data for OSRM leg i, which runs from waypoint i to waypoint i + 1:
- * both ends, the midpoint the label sits on, and the walking time at 5 km/h next to
- * the driving time OSRM measured.
- */
-export function osrmLegSegment(leg: OsrmLeg, i: number, waypoints: Waypoint[]): RouteSegment {
-  const from: [number, number] = [waypoints[i].lat, waypoints[i].lng]
-  const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng]
-  const mid: [number, number] = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2]
-  const walkingDuration = leg.distance / (5000 / 3600)
-  return {
-    mid, from, to,
-    distance: leg.distance,
-    duration: leg.duration,
-    walkingText: formatDuration(walkingDuration),
-    drivingText: formatDuration(leg.duration),
-    distanceText: formatRouteDistance(leg.distance),
-  }
-}
-
 /**
  * One OSRM call per waypoint-run that returns BOTH the real road geometry (for the
  * map) and per-leg distance/duration (for the sidebar connectors). Results are cached
@@ -513,6 +563,7 @@ export async function calculateRouteWithLegs(
     return { coordinates: [], distance: 0, duration: 0, legs: [] }
   }
 
+  const valhallaDay = valhallaProfile(profile, avoid)
   const avoiding = avoidedClasses(profile, avoid)
 
   const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
@@ -520,41 +571,37 @@ export async function calculateRouteWithLegs(
   // part of the key — otherwise switching km↔mi would return stale text (#1300).
   // A plugin route is trip-/day-specific (it may return different charging stops for
   // the same coordinates on a different day), so its key includes tripId/dayId;
-  // the built-in OSRM profiles are context-free and leave those out.
+  // the built-in profiles are context-free and leave those out.
+  //
+  // The engine belongs in the key because the two price roads differently: a day OSRM
+  // drew handed out as Valhalla's after the admin switched engines would keep the old
+  // times on every device that held it, and the other way round. An OSRM answer keeps
+  // the key it always had, so the routes already kept on a device stay good.
   //
   // The avoidance belongs in the key for two reasons pointing opposite ways. Without it
   // turning the switch on returns the tolled route out of cache in under a millisecond,
   // so nothing on screen changes and it reads as a broken toggle. And the leak the other
   // way is worse: this Map is shared with the ordinary day planner, the studio and the
   // booking geometry, none of which ask for avoidance, so an avoid-routed answer stored
-  // under the plain key would hand them a road nobody drives and a second engine's
-  // times. So the avoiding key only ever holds a Valhalla answer: when Valhalla cannot
-  // answer and OSRM drives the request after all, that answer is filed under the plain
-  // key, where it is exactly what an ordinary caller would have got. Filed under the
-  // avoiding key it stood in for the avoided road until the next reload, however soon
-  // Valhalla came back.
+  // under the plain key would hand them a road nobody drives. So the Valhalla keys only
+  // ever hold a Valhalla answer: when Valhalla cannot answer and OSRM drives the request
+  // after all, that answer is filed under the OSRM key, where it is exactly what an
+  // ordinary caller would have got. Filed under the Valhalla key it stood in for the
+  // weighed road until the next reload, however soon Valhalla came back.
   const pluginScope = profile.startsWith('plugin:') ? `:${tripId ?? ''}:${dayId ?? ''}` : ''
-  const avoidScope = avoiding.length ? `:avoid=${avoiding.join(',')}` : ''
   const plainKey = `${profile}:${getDistanceUnit()}:${coords}${pluginScope}`
-  const cacheKey = `${plainKey}${avoidScope}`
+  // Which engine the day is planned with does not follow the relay's rest, so a day kept
+  // from Valhalla is still found while the relay rests, offline above all.
+  const cacheKey = valhallaDay ? valhallaKey(plainKey, avoiding) : plainKey
   // A plugin route stays in memory: its answer depends on the trip and the day,
   // and may carry live data such as charging stops. The rest is kept on the device
   // too, so a trip that shows its whole route opens drawn (#2794).
   const cached = pluginScope ? routeInMemory(cacheKey) : await storedRoute(cacheKey)
-  if (cached) return cached
+  if (cached) return withEngine(cached, routeEngineFor(profile, avoid))
 
-  if (avoiding.length) {
-    const routed = await routeAvoidingWithLegs(waypoints, avoiding, signal)
-    if (routed) {
-      cacheRoute(cacheKey, routed)
-      return routed
-    }
-    // Null is a Valhalla that could not answer at all. OSRM keeps the day drawn rather
-    // than blank, and the answer says that nothing was avoided, with the reason, so the
-    // rail flags the day instead of implying the setting held on a road nobody weighed.
-    const plain = (await storedRoute(plainKey)) ?? await osrmWithLegs(waypoints, coords, profile, signal)
-    cacheRoute(plainKey, plain)
-    return { ...plain, avoidance: { asked: avoiding, achieved: [], fellBack: true } }
+  if (valhallaDay) {
+    const keys = { valhalla: cacheKey, plain: plainKey, coords }
+    return valhallaOrOsrmDay(waypoints, { profile: valhallaDay, avoiding, keys, signal })
   }
 
   // Plugin profile (`plugin:<id>/<profile>`): the server invokes that routeProvider
@@ -569,27 +616,18 @@ export async function calculateRouteWithLegs(
       waypoints: waypoints.map((p) => ({ lat: p.lat, lng: p.lng })),
     }, { signal })
     if (!route) throw new Error('No route found')
-    const legs: RouteSegment[] = route.legs.map((leg, i): RouteSegment => {
-      const from: [number, number] = [waypoints[i].lat, waypoints[i].lng]
-      const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng]
-      const mid: [number, number] = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2]
-      return {
-        mid, from, to,
-        distance: leg.distance,
-        duration: leg.duration,
-        walkingText: formatDuration(leg.distance / (5000 / 3600)),
-        drivingText: formatDuration(leg.duration),
-        distanceText: formatRouteDistance(leg.distance),
-        durationText: formatDuration(leg.duration),
-        ...(leg.note ? { noteText: leg.note } : {}),
-      }
-    })
+    const legs = route.legs.map((leg, i): RouteSegment => ({
+      ...legSegment(leg, i, waypoints),
+      durationText: formatDuration(leg.duration),
+      ...(leg.note ? { noteText: leg.note } : {}),
+    }))
     const result: RouteWithLegs = {
       coordinates: route.coordinates,
       distance: route.distance,
       duration: route.duration,
       legs,
       ...(route.viaPoints.length ? { vias: route.viaPoints } : {}),
+      engine: 'plugin',
     }
     rememberRoute(cacheKey, result)
     return result
@@ -625,70 +663,13 @@ async function osrmWithLegs(
   // The day plan's connectors also show the leg's own duration line.
   const legs: RouteSegment[] = (route.legs || []).map(
     (leg: OsrmLeg, i: number): RouteSegment => ({
-      ...osrmLegSegment(leg, i, waypoints),
+      ...legSegment(leg, i, waypoints),
       durationText: formatDuration(leg.duration),
     })
   )
 
   const snapped = readSnapped(data, waypoints)
-  return { coordinates, distance: route.distance, duration: route.duration, legs, ...(snapped ? { snapped } : {}) }
-}
-
-/**
- * A whole chain from the second engine, weighted away from some road classes.
- *
- * Shaped exactly like the OSRM answer above so the callers never branch on which engine
- * spoke — same leg list, same formatted text, same snap positions. What it adds is
- * `avoidance`: what was asked for against what the road actually turned out to be, which
- * is the only honest way to label a weighting that can fail.
- *
- * Null rather than a throw when it cannot answer, so the caller falls through to OSRM
- * and the day stays drawn.
- */
-async function routeAvoidingWithLegs(
-  waypoints: Waypoint[],
-  avoid: AvoidClass[],
-  signal?: AbortSignal,
-): Promise<RouteWithLegs | null> {
-  const sample = {
-    profile: 'driving' as const,
-    surface: 'legs' as const,
-    selfHosted: !!useSettingsStore.getState().settings.routing_base_url?.trim(),
-    waypoints: waypoints.length,
-    km: waypoints.slice(1).reduce((sum, point, i) => sum + haversineKm(waypoints[i], point), 0),
-  }
-  const run = await valhallaRun(waypoints, 'driving', avoid, signal)
-  // Counted by hand because the adapter speaks to a different engine with a different
-  // verb, and the counter exists to answer "how much routing does this instance do" —
-  // an engine it cannot see is exactly the traffic that would go missing from it.
-  if (!signal?.aborted) countRoute({ ...sample, failed: !run })
-  if (!run) return null
-
-  const legs: RouteSegment[] = run.legs.map((leg, i): RouteSegment => {
-    const from: [number, number] = [waypoints[i].lat, waypoints[i].lng]
-    const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng]
-    return {
-      mid: [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2],
-      from,
-      to,
-      distance: leg.distance,
-      duration: leg.duration,
-      walkingText: formatDuration(leg.distance / (5000 / 3600)),
-      drivingText: formatDuration(leg.duration),
-      distanceText: formatRouteDistance(leg.distance),
-      durationText: formatDuration(leg.duration),
-    }
-  })
-
-  return {
-    coordinates: run.total.coordinates,
-    distance: run.total.distance,
-    duration: run.total.duration,
-    legs,
-    snapped: run.snapped,
-    avoidance: { asked: avoid, achieved: avoid.filter(cls => legAvoids(run.total, cls)) },
-    hasFerry: run.total.hasFerry,
-  }
+  return { coordinates, distance: route.distance, duration: route.duration, legs, ...(snapped ? { snapped } : {}), engine: 'osrm' }
 }
 
 /**
@@ -722,75 +703,6 @@ function readSnapped(data: unknown, waypoints: Waypoint[]): SnappedWaypoint[] |
   return out
 }
 
-function getDistanceUnit(): DistanceUnit {
-  return useSettingsStore.getState().settings.distance_unit === 'imperial' ? 'imperial' : 'metric'
-}
-
-function formatRouteDistance(meters: number): string {
-  const unit = getDistanceUnit()
-  if (unit === 'metric' && meters < 1000) {
-    return `${Math.round(meters)} m`
-  }
-  return formatDistance(meters / 1000, unit)
-}
-
-function formatDuration(seconds: number): string {
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  if (h > 0) {
-    return `${h} h ${m} min`
-  }
-  return `${m} min`
-}
-
-/** One way of driving a leg, as a router offers it. */
-export interface RouteAlternative {
-  coordinates: [number, number][]
-  distance: number
-  duration: number
-  /** Where this route differs most from the first one — the point that would pin it. */
-  divergence: { lat: number; lng: number } | null
-  /** Set when this way exists because a road class was left out of it. */
-  avoids?: AvoidClass
-  /**
-   * Which engine priced this route. Absent means OSRM, which is what answers every route
-   * of a trip that avoids nothing, except the avoidance offer on a default install.
-   *
-   * It exists because the engines do not agree on speed: measured over twelve European
-   * legs the per-leg drive times run from 14.7 % under OSRM's to 13.2 % over, and the
-   * sign depends on the region: Valhalla is faster on Spanish autovía and slower through
-   * a city. So a figure from one of them subtracted from a figure from the other is not a
-   * difference in driving time, it is the gap between two speed models, and the reader
-   * has no way of telling the two apart.
-   */
-  engine?: RouteEngine
-  /** Whether the way crosses by ferry, where the engine that drew it says so. */
-  hasFerry?: boolean
-}
-
-/** What two routes are compared by: their line, and their figures where there is none. */
-export type RoadLine = Pick<RouteAlternative, 'coordinates' | 'distance' | 'duration'>
-
-/**
- * Road classes worth asking the router to leave out, in the order they are tried.
- *
- * OSRM's own alternative search is conservative: it only offers a second road when the
- * detour is short enough and shares little enough with the first, so on a long motorway
- * run it usually answers with exactly one route — while a perfectly good, slower way over
- * the B-roads exists and is what somebody opening "other ways" is looking for. Excluding
- * a class asks a different question and reliably produces that road.
- *
- * Only for driving: the foot and bike profiles have no excludable classes, and asking
- * anyway earns an `InvalidOptions` for nothing.
- *
- * Ferry is on the list for Valhalla's sake and skipped on the OSRM path below. OSRM
- * does carry a ferry class, but on a leg where a ferry is the only crossing it answers
- * NoRoute rather than the long way round, which is not an alternative anybody can use.
- * Valhalla weights it instead and drives around, which is the whole point.
- */
-const EXCLUDABLE_CLASSES = ['motorway', 'toll', 'ferry'] as const
-
-
 /**
  * Hosts that have already answered "I do not do exclude", by base URL.
  *
@@ -838,49 +750,6 @@ async function routeExcluding(
   return osrmExcluding(from, to, profile, exclude, signal)
 }
 
-/**
- * The same leg from Valhalla, weighted away from one class, or null.
- *
- * The check that makes this honest is `legAvoids`: `use_tolls: 0` is a preference, so
- * between two points with no untolled connection the answer is still a tolled road.
- * Offering that as "No tolls" would put a lie on the map, so it is dropped and the
- * OSRM attempt gets its turn.
- */
-async function valhallaExcluding(
-  from: Waypoint,
-  to: Waypoint,
-  profile: 'driving' | 'walking' | 'cycling',
-  exclude: AvoidClass,
-  signal?: AbortSignal,
-): Promise<RouteAlternative | null> {
-  if (!valhallaAvailable()) return null
-  const sample = {
-    profile,
-    surface: 'alternatives' as const,
-    selfHosted: !!useSettingsStore.getState().settings.routing_base_url?.trim(),
-    waypoints: 2,
-    km: haversineKm(from, to),
-  }
-  const leg = await valhallaRouteAvoiding(from, to, profile, exclude, signal)
-  // Counted here rather than in the adapter, so the adapter stays a format translator
-  // and every routing request an instance makes still lands in the one counter.
-  if (!signal?.aborted) countRoute({ ...sample, failed: !leg })
-  if (!leg || !legAvoids(leg, exclude)) return null
-  return valhallaOffer(leg)
-}
-
-/** A Valhalla leg as an offer, carrying the engine that priced it and what it crosses. */
-function valhallaOffer(leg: ValhallaLeg): RouteAlternative {
-  return {
-    coordinates: leg.coordinates,
-    distance: leg.distance,
-    duration: leg.duration,
-    divergence: null,
-    engine: 'valhalla',
-    hasFerry: leg.hasFerry,
-  }
-}
-
 /** The same leg from OSRM with the class excluded outright, or null. */
 async function osrmExcluding(
   from: Waypoint,
@@ -928,20 +797,25 @@ async function osrmExcluding(
  * onto this road on every future request, without storing a polyline that would go stale
  * with the next OSM update.
  *
- * `avoid` is the classes the trip weighs away. A driving leg of such a trip is routed by
- * Valhalla, so its offers come from Valhalla too, weighed the same way, and never from
- * OSRM: a list holding both engines is what offered a road the rail was not on as the
- * quicker one, and clicking it changed nothing.
+ * `avoid` is the classes the trip weighs away. A leg Valhalla routes, because it routes
+ * the days or because the trip avoids something, gets its offers from Valhalla too,
+ * weighed the same way, and never from OSRM: a list holding both engines is what offered
+ * a road the rail was not on as the quicker one, and clicking it changed nothing.
  */
 export async function calculateAlternatives(
   from: Waypoint,
   to: Waypoint,
   profile: 'driving' | 'walking' | 'cycling' = 'driving',
-  { signal, limit = 3, avoid = [] }: { signal?: AbortSignal; limit?: number; avoid?: readonly AvoidClass[] } = {},
+  { signal, limit = 3, avoid = [], engine = routeEngineFor(profile, avoid) }: {
+    signal?: AbortSignal
+    limit?: number
+    avoid?: readonly AvoidClass[]
+    /** The engine that drew the leg, where it is known; the planned one otherwise. */
+    engine?: RouteEngine
+  } = {},
 ): Promise<RouteAlternative[]> {
-  const avoiding = avoidedClasses(profile, avoid)
-  const routes = avoiding.length
-    ? await alternativesAvoiding(from, to, avoiding, limit, signal)
+  const routes = engine === 'valhalla'
+    ? await alternativesFromValhalla(from, to, profile, avoidedClasses(profile, avoid), { limit, signal })
     : await alternativesFromOsrm(from, to, profile, limit, signal)
   if (!routes.length) return routes
 
@@ -953,54 +827,25 @@ export async function calculateAlternatives(
 }
 
 /**
- * The offers for a leg of a trip that weighs classes away, every one of them Valhalla's.
+ * The offers for a leg of a day Valhalla routes, every one of them Valhalla's.
  *
- * Throws when Valhalla has nothing to say, so the picker reports a router that is not
- * answering. Quietly offering OSRM's roads instead is the very mix this path exists to end.
- *
- * One way back gets the question the OSRM path asks too: the same drive with one more
- * class left out, only of those the trip does not already avoid, and only where the road
- * that comes back really is without it. Paced like the pieces of a split day, because the
- * public instance allows one request a second.
+ * A day that weighs classes away has no other engine to ask: this throws when Valhalla has
+ * nothing to say, so the picker reports a router that is not answering. Quietly offering
+ * OSRM's roads instead is the very mix this path exists to end. A day that avoids nothing
+ * went to OSRM whole when Valhalla did not answer it, so its offers do the same.
  */
-async function alternativesAvoiding(
+async function alternativesFromValhalla(
   from: Waypoint,
   to: Waypoint,
+  profile: 'driving' | 'walking' | 'cycling',
   avoiding: AvoidClass[],
-  limit: number,
-  signal?: AbortSignal,
+  { limit, signal }: { limit: number; signal?: AbortSignal },
 ): Promise<RouteAlternative[]> {
-  const sample = {
-    profile: 'driving' as const,
-    surface: 'alternatives' as const,
-    selfHosted: !!useSettingsStore.getState().settings.routing_base_url?.trim(),
-    waypoints: 2,
-    km: haversineKm(from, to),
-  }
-  const answered = await valhallaAlternates(from, to, 'driving', avoiding, Math.max(0, limit - 1), signal)
-  if (!signal?.aborted) countRoute({ ...sample, failed: !answered })
-  if (!answered?.length) throw new Error('No route found')
-
-  const routes: RouteAlternative[] = []
-  for (const leg of answered) {
-    const offer = valhallaOffer(leg)
-    if (!routes.some(r => sameRoad(r, offer))) routes.push(offer)
-  }
-  if (routes.length >= 2) return routes
-
-  for (const cls of EXCLUDABLE_CLASSES) {
-    if (avoiding.includes(cls)) continue
-    await valhallaSpacing(signal)
-    if (signal?.aborted) break
-    const run = await valhallaRun([from, to], 'driving', [...avoiding, cls], signal)
-    if (!signal?.aborted) countRoute({ ...sample, failed: !run })
-    if (!run || !legAvoids(run.total, cls)) continue
-    const detour = valhallaOffer(run.total)
-    if (routes.some(r => sameRoad(r, detour))) continue
-    routes.push({ ...detour, avoids: cls })
-    break
-  }
-  return routes
+  const asking = avoiding.length > 0 || valhallaRoutesDays()
+  const offered = asking ? await valhallaDayAlternatives(from, to, profile, avoiding, { limit, signal }) : null
+  if (offered) return offered
+  if (avoiding.length) throw new Error('No route found')
+  return alternativesFromOsrm(from, to, profile, limit, signal)
 }
 
 /** The offers for a leg of a trip that avoids nothing: OSRM's, and one avoidance offer. */

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

@@ -100,6 +100,9 @@ describe('TripRouteOverviewPanel', () => {
 
     expect(screen.getByTestId('trip-overview-unrouted')).toHaveTextContent('map.overview.unrouted')
     expect(screen.getAllByRole('img', { name: 'map.overview.dayUnrouted' })).toHaveLength(1)
+    // The short figures read as floors, the trip's and the day's, not as measurements (#2876).
+    expect(screen.getAllByText('map.overview.distanceAtLeast')).toHaveLength(2)
+    expect(screen.getByText('140.5 km')).toBeInTheDocument()
   })
 
   it('FE-MAP-TROU-010: does not call a leg unrouted while the round is still running', () => {

client/src/components/Map/TripRouteOverview.tsx

@@ -2,7 +2,7 @@ import { AlertTriangle, Route } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { MapTogglePill } from './MapTogglePill'
 import { routeModeIcon } from '../Planner/routeModes'
-import { formatDistance } from '../../utils/units'
+import { routeDistanceLabel } from './tripRouteLabels'
 import type { TripRouteOverview as Overview } from './useTripRouteOverview'
 import type { DistanceUnit } from '../../types'
 
@@ -65,7 +65,7 @@ export function TripRouteOverviewPanel({ overview, unit, selectedDayId, onSelect
         {/* Same tier as the label beside it: the two read as one line rather than as a
             heading with a number stuck under it. */}
         <span className="text-content" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600 }}>
-          {formatDistance(overview.totalDistance / 1000, unit)}
+          {routeDistanceLabel(overview.totalDistance, unrouted, unit, t)}
           {/* Still routing: the number is a partial sum, and saying so beats a total
               that silently grows while you read it. */}
           {overview.loading && <span className="text-content-muted" style={{ fontWeight: 400 }}>{' '}…</span>}
@@ -112,7 +112,7 @@ export function TripRouteOverviewPanel({ overview, unit, selectedDayId, onSelect
                 />
               )}
               <span className="text-content-muted" style={{ flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>
-                {formatDistance(day.distance / 1000, unit)}
+                {routeDistanceLabel(day.distance, dayUnrouted, unit, t)}
               </span>
             </>
           )

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

@@ -97,6 +97,8 @@ describe('attachLocationMarker', () => {
     expect(root.children).toHaveLength(3)
     // The cone starts hidden — there is no heading until the first fix.
     expect((root.children[1] as HTMLElement).style.display).toBe('none')
+    // The GL marker class owns `position`; an inline one would drop it into the flow.
+    expect(root.style.position).toBe('')
   })
 
   it('FE-COMP-LOCMARKERGL-003: adds the accuracy source and fill layer when the map is already loaded', () => {

client/src/components/Map/locationMarkerMapbox.ts

@@ -13,7 +13,9 @@ type MarkerConstructor = new (options?: { element?: HTMLElement; anchor?: string
 // and mapbox doesn't get confused about which element to position.
 function buildLocationEl(): { root: HTMLDivElement; cone: HTMLDivElement } {
   const root = document.createElement('div')
-  root.style.cssText = 'width:28px;height:28px;position:relative;pointer-events:none;'
+  // No inline `position`: the GL marker class keeps the root absolute, which the
+  // children's insets resolve against (see the note on markers in MapViewGL).
+  root.style.cssText = 'width:28px;height:28px;pointer-events:none;'
   // Accuracy pulse behind the dot
   const pulse = document.createElement('div')
   pulse.style.cssText = `

client/src/components/Map/markerCluster.ts

@@ -1,5 +1,6 @@
 import L from 'leaflet'
 import { STACK_RADIUS_PX } from './coincidentPlaces'
+import { clusterBubbleSize } from './placeClusterLayers'
 
 /** Up to here the map is an overview, where stops merge to keep the world readable. */
 export const CLUSTER_UNTIL_ZOOM = 9
@@ -66,7 +67,7 @@ export interface ClusterLike {
 /** A count bubble sized by its count, styled by `.marker-cluster-custom` in index.css. */
 export function createClusterIcon(cluster: ClusterLike) {
   const count = cluster.getChildCount()
-  const size = count < 10 ? 36 : count < 50 ? 42 : 48
+  const size = clusterBubbleSize(count)
   return L.divIcon({
     html: `<div class="marker-cluster-custom" style="width:${size}px;height:${size}px;"><span>${count}</span></div>`,
     className: 'marker-cluster-wrapper',

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

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  type ClusterMap,
+  PLACE_CLUSTER_SOURCE_ID,
+  addPlaceClusterLayers,
+  clusterBubbleSize,
+  createClusterBubble,
+  drawClusterBubbles,
+} from './placeClusterLayers';
+
+function fakeMap(features: unknown[], expansionZoom: unknown = 11) {
+  const source = { getClusterExpansionZoom: vi.fn(() => expansionZoom) };
+  const map = {
+    addSource: vi.fn(),
+    addLayer: vi.fn(),
+    getSource: vi.fn((id: string) => (id === PLACE_CLUSTER_SOURCE_ID ? source : undefined)),
+    easeTo: vi.fn(),
+    querySourceFeatures: vi.fn((_id: string, query: { filter: unknown[] }) =>
+      query.filter[0] === 'has' ? features : []
+    ),
+  };
+  return { map: map as unknown as ClusterMap & typeof map, source };
+}
+
+describe('cluster bubbles', () => {
+  it('FE-COMP-PLACECLUSTER-001: a bubble grows in three steps with its count', () => {
+    expect([1, 9, 10, 49, 50, 500].map(clusterBubbleSize)).toEqual([36, 36, 42, 42, 48, 48]);
+  });
+
+  it('FE-COMP-PLACECLUSTER-002: the GL bubble is the Leaflet markup inside a bare wrapper the pin can move', () => {
+    const wrapper = createClusterBubble(38);
+    expect(wrapper.className).toBe('');
+    const bubble = wrapper.firstElementChild as HTMLElement;
+    expect(bubble.className).toBe('marker-cluster-custom');
+    expect(bubble.style.width).toBe('42px');
+    expect(bubble.style.height).toBe('42px');
+    expect(bubble.textContent).toBe('38');
+  });
+
+  it('FE-COMP-PLACECLUSTER-003: the canvas circle and count stay as an invisible hit area', () => {
+    const { map } = fakeMap([]);
+    addPlaceClusterLayers(map);
+    expect(map.addSource).toHaveBeenCalledWith(PLACE_CLUSTER_SOURCE_ID, expect.objectContaining({ cluster: true }));
+    const layers = map.addLayer.mock.calls.map(([layer]) => layer as { id: string; paint: Record<string, unknown> });
+    expect(layers.find((l) => l.id === 'trip-place-clusters-circle')?.paint['circle-opacity']).toBe(0);
+    expect(layers.find((l) => l.id === 'trip-place-clusters-count')?.paint['text-opacity']).toBe(0);
+  });
+
+  it('FE-COMP-PLACECLUSTER-004: one bubble per cluster, placed at its centre, that zooms in on a click', () => {
+    const cluster = { properties: { cluster_id: 5, point_count: 12 }, geometry: { coordinates: [139.7, 35.6] } };
+    const { map, source } = fakeMap([
+      cluster,
+      cluster, // the same cluster crossing a tile edge
+      { properties: { cluster_id: 6 }, geometry: { coordinates: [1, 1] } }, // no count
+      { properties: { cluster_id: 7, point_count: 3 } }, // no geometry
+    ]);
+    const placed: { el: HTMLElement; lng: number; lat: number }[] = [];
+    const pins = drawClusterBubbles(map, (el, lng, lat) => {
+      placed.push({ el, lng, lat });
+      return lng;
+    });
+
+    expect(pins).toEqual([139.7]);
+    expect(placed[0].el.textContent).toBe('12');
+    expect(placed[0].lat).toBe(35.6);
+
+    const onMapClick = vi.fn();
+    document.body.appendChild(placed[0].el);
+    document.body.addEventListener('click', onMapClick);
+    placed[0].el.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    document.body.removeEventListener('click', onMapClick);
+    placed[0].el.remove();
+
+    // The click is the bubble's: the map underneath never sees it.
+    expect(onMapClick).not.toHaveBeenCalled();
+    expect(source.getClusterExpansionZoom).toHaveBeenCalledWith(5, expect.any(Function));
+    expect(map.easeTo).toHaveBeenCalledWith({ center: [139.7, 35.6], zoom: 11, duration: 350 });
+  });
+
+  it('FE-COMP-PLACECLUSTER-005: a source that reports nothing draws nothing', () => {
+    const { map } = fakeMap([]);
+    map.querySourceFeatures.mockReturnValue(null as never);
+    expect(drawClusterBubbles(map, () => 1)).toEqual([]);
+  });
+});

client/src/components/Map/placeClusterLayers.ts

@@ -5,3 +5,169 @@
  */
 export const PLACE_CLUSTER_CIRCLE_LAYER_ID = 'trip-place-clusters-circle';
 export const PLACE_CLUSTER_COUNT_LAYER_ID = 'trip-place-clusters-count';
+
+// Marker grouping for the GL map (#1385): MapLibre/Mapbox can't show the rich
+// HTML photo markers *and* cluster them natively, so we feed the place points
+// into a clustered GeoJSON source. The source decides what is clustered; the
+// bubbles are drawn as DOM (`drawClusterBubbles`) and the individual rich HTML
+// markers only for the points the source reports as currently unclustered.
+// Grouping is always on, matching the Leaflet map's MarkerClusterGroup.
+export const PLACE_CLUSTER_SOURCE_ID = 'trip-place-clusters';
+const PLACE_UNCLUSTERED_LAYER_ID = 'trip-place-unclustered-hit';
+
+/**
+ * How eagerly place markers merge into a cluster.
+ *
+ * The overview band the Leaflet map clusters in as well (`CLUSTER_UNTIL_ZOOM` there),
+ * kept as plain numbers rather than shared constants so the GL bundle does not have to
+ * carry Leaflet for them. Above the cutoff supercluster hands every point back on its
+ * own, and the stops that share a coordinate are folded together at the pin level
+ * instead — see the reconcile in MapViewGL.
+ */
+const CLUSTER_RADIUS = 20;
+const CLUSTER_MAX_ZOOM = 8;
+
+/** The part of either SDK's map the cluster code calls. */
+export interface ClusterMap {
+  addSource: (id: string, source: object) => void;
+  addLayer: (layer: object) => void;
+  getSource: (id: string) => unknown;
+  easeTo: (options: { center: unknown[]; zoom: number; duration: number }) => void;
+  querySourceFeatures: (id: string, options: { filter: unknown[] }) => ClusterFeature[] | null | undefined;
+}
+
+interface ClusterFeature {
+  properties?: { cluster_id?: unknown; point_count?: unknown } | null;
+  geometry?: { coordinates?: unknown };
+}
+
+interface ClusterSource {
+  getClusterExpansionZoom?: (id: unknown, done: (err: Error | null, zoom: number) => void) => unknown;
+}
+
+/** The cluster source and the three layers over it. Extracted so the rebuild on a mode
+ *  change and the initial build cannot drift apart. */
+export function addPlaceClusterLayers(map: Pick<ClusterMap, 'addSource' | 'addLayer'>): void {
+  map.addSource(PLACE_CLUSTER_SOURCE_ID, {
+    type: 'geojson',
+    data: { type: 'FeatureCollection', features: [] },
+    cluster: true,
+    clusterRadius: CLUSTER_RADIUS,
+    clusterMaxZoom: CLUSTER_MAX_ZOOM,
+  });
+  // Invisible: the bubble the user sees is DOM (createClusterBubble), these two
+  // layers stay as the hit area the track and route layers check a click against.
+  map.addLayer({
+    id: PLACE_CLUSTER_CIRCLE_LAYER_ID,
+    type: 'circle',
+    source: PLACE_CLUSTER_SOURCE_ID,
+    filter: ['has', 'point_count'],
+    paint: {
+      'circle-opacity': 0,
+      'circle-stroke-opacity': 0,
+      'circle-radius': ['step', ['get', 'point_count'], 18, 10, 21, 50, 24],
+    },
+  });
+  map.addLayer({
+    id: PLACE_CLUSTER_COUNT_LAYER_ID,
+    type: 'symbol',
+    source: PLACE_CLUSTER_SOURCE_ID,
+    filter: ['has', 'point_count'],
+    layout: {
+      'text-field': ['get', 'point_count_abbreviated'],
+      'text-size': 12,
+      'text-allow-overlap': true,
+    },
+    paint: { 'text-opacity': 0 },
+  });
+  map.addLayer({
+    id: PLACE_UNCLUSTERED_LAYER_ID,
+    type: 'circle',
+    source: PLACE_CLUSTER_SOURCE_ID,
+    filter: ['!', ['has', 'point_count']],
+    paint: {
+      'circle-radius': 24,
+      'circle-opacity': 0,
+      'circle-stroke-opacity': 0,
+    },
+  });
+}
+
+/** Eases the map in to the zoom a cluster falls apart at. Both SDKs answer that
+ *  question, one through a callback and one through a promise. */
+export function expandCluster(
+  map: Pick<ClusterMap, 'getSource' | 'easeTo'>,
+  clusterId: unknown,
+  coordinates: unknown
+): void {
+  if (clusterId == null || !Array.isArray(coordinates)) return;
+  const source = map.getSource(PLACE_CLUSTER_SOURCE_ID) as ClusterSource | undefined;
+  const easeToZoom = (nextZoom: number) => {
+    try {
+      map.easeTo({ center: coordinates, zoom: nextZoom, duration: 350 });
+    } catch {
+      /* noop */
+    }
+  };
+  try {
+    const maybeZoom = source?.getClusterExpansionZoom?.(clusterId, (err, nextZoom) => {
+      if (!err && typeof nextZoom === 'number') easeToZoom(nextZoom);
+    });
+    if (typeof maybeZoom === 'number') easeToZoom(maybeZoom);
+    else if (maybeZoom instanceof Promise) maybeZoom.then(easeToZoom).catch(() => {});
+  } catch {
+    /* noop */
+  }
+}
+
+/**
+ * Puts one count bubble on the map per cluster the source currently reports, through
+ * `place` (the caller's pin factory), and returns what `place` handed back. A cluster
+ * crossing a tile edge comes back once per tile, so bubbles are keyed by cluster id.
+ */
+export function drawClusterBubbles<T>(map: ClusterMap, place: (el: HTMLElement, lng: number, lat: number) => T): T[] {
+  const pins: T[] = [];
+  const seen = new Set<unknown>();
+  for (const feature of map.querySourceFeatures(PLACE_CLUSTER_SOURCE_ID, { filter: ['has', 'point_count'] }) ?? []) {
+    const clusterId = feature?.properties?.cluster_id;
+    const count = feature?.properties?.point_count;
+    const coordinates = feature?.geometry?.coordinates;
+    if (typeof count !== 'number' || !Array.isArray(coordinates) || seen.has(clusterId)) continue;
+    seen.add(clusterId);
+    const el = createClusterBubble(count);
+    el.addEventListener('click', (ev) => {
+      ev.stopPropagation();
+      expandCluster(map, clusterId, coordinates);
+    });
+    pins.push(place(el, coordinates[0], coordinates[1]));
+  }
+  return pins;
+}
+
+/** A count bubble's diameter in pixels: both renderers size their bubbles by it. */
+export function clusterBubbleSize(count: number): number {
+  return count < 10 ? 36 : count < 50 ? 42 : 48;
+}
+
+/**
+ * A count bubble as DOM, styled by `.marker-cluster-custom` in index.css.
+ *
+ * The GL map draws its bubbles with this element rather than as canvas text, so they
+ * read in the app's own font and get the same hover the Leaflet map has. A canvas
+ * symbol layer can only use the glyphs the map style ships and knows no `:hover`.
+ * The bubble sits in a bare wrapper because the pin positions its element through
+ * `transform`, which would otherwise override the hover's scale.
+ */
+export function createClusterBubble(count: number): HTMLDivElement {
+  const size = clusterBubbleSize(count);
+  const bubble = document.createElement('div');
+  bubble.className = 'marker-cluster-custom';
+  bubble.style.width = `${size}px`;
+  bubble.style.height = `${size}px`;
+  const label = document.createElement('span');
+  label.textContent = String(count);
+  bubble.appendChild(label);
+  const wrapper = document.createElement('div');
+  wrapper.appendChild(bubble);
+  return wrapper;
+}

client/src/components/Map/routeText.ts

@@ -0,0 +1,52 @@
+import { useSettingsStore } from '../../store/settingsStore';
+import type { DistanceUnit, RouteSegment, Waypoint } from '../../types';
+import { formatDistance } from '../../utils/units';
+
+/** The unit a route's texts are written in, which is why it is part of the route cache key. */
+export function getDistanceUnit(): DistanceUnit {
+  return useSettingsStore.getState().settings.distance_unit === 'imperial' ? 'imperial' : 'metric';
+}
+
+/** A routed distance as the connectors show it: metres below a kilometre, else the user's unit. */
+export function formatRouteDistance(meters: number): string {
+  const unit = getDistanceUnit();
+  if (unit === 'metric' && meters < 1000) {
+    return `${Math.round(meters)} m`;
+  }
+  return formatDistance(meters / 1000, unit);
+}
+
+/** A routed time in hours and minutes, the minutes rounded down. */
+export function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h > 0) {
+    return `${h} h ${m} min`;
+  }
+  return `${m} min`;
+}
+
+/**
+ * The connector data for leg i of a routed chain, which runs from waypoint i to waypoint
+ * i + 1: both ends, the midpoint the label sits on, and the walking time at 5 km/h next to
+ * the time the engine measured. The same for every engine, so a day reads alike whichever
+ * of them drew it.
+ */
+export function legSegment(
+  leg: { distance: number; duration: number },
+  i: number,
+  waypoints: Waypoint[]
+): RouteSegment {
+  const from: [number, number] = [waypoints[i].lat, waypoints[i].lng];
+  const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng];
+  return {
+    mid: [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2],
+    from,
+    to,
+    distance: leg.distance,
+    duration: leg.duration,
+    walkingText: formatDuration(leg.distance / (5000 / 3600)),
+    drivingText: formatDuration(leg.duration),
+    distanceText: formatRouteDistance(leg.distance),
+  };
+}

client/src/components/Map/routeTypes.ts

@@ -0,0 +1,30 @@
+import type { RouteAvoidClass, RouteEngine } from '../../types';
+
+/** One way of driving a leg, as a router offers it. */
+export interface RouteAlternative {
+  coordinates: [number, number][];
+  distance: number;
+  duration: number;
+  /** Where this route differs most from the first one — the point that would pin it. */
+  divergence: { lat: number; lng: number } | null;
+  /** Set when this way exists because a road class was left out of it. */
+  avoids?: RouteAvoidClass;
+  /**
+   * Which engine priced this route. Absent means OSRM, which answers every route of a
+   * trip that avoids nothing where Valhalla does not route the days, except the
+   * avoidance offer.
+   *
+   * It exists because the engines do not agree on speed: measured over twelve European
+   * legs the per-leg drive times run from 14.7 % under OSRM's to 13.2 % over, and the
+   * sign depends on the region: Valhalla is faster on Spanish autovía and slower through
+   * a city. So a figure from one of them subtracted from a figure from the other is not a
+   * difference in driving time, it is the gap between two speed models, and the reader
+   * has no way of telling the two apart.
+   */
+  engine?: RouteEngine;
+  /** Whether the way crosses by ferry, where the engine that drew it says so. */
+  hasFerry?: boolean;
+}
+
+/** What two routes are compared by: their line, and their figures where there is none. */
+export type RoadLine = Pick<RouteAlternative, 'coordinates' | 'distance' | 'duration'>;

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

@@ -78,31 +78,61 @@ describe('tripRouteGeometry', () => {
     expect(calculateRouteWithLegs).not.toHaveBeenCalled()
   })
 
-  it('FE-MAP-TRG-005: the deadline gives back what answered and leaves the rest as straight lines', async () => {
-    neverAnswers()
+  // The PDF used to route under an 8 s deadline: with a second between two requests that
+  // is about seven legs, so a month-long trip printed most of its days as straight lines
+  // and a total that looked final, and every export routed a few more days (#2876).
+  it('FE-MAP-TRG-005: a long trip is routed to its last leg, and says how far it has got', async () => {
+    const days = Array.from({ length: 12 }, (_, i) => buildDay({ id: i + 1, day_number: i + 1 }))
+    const assignments: AssignmentsMap = Object.fromEntries(days.map(day => [
+      String(day.id),
+      [at(48 + day.id / 10, 2.35, 0, day.id), at(48 + day.id / 10, 2.45, 1, day.id)],
+    ]))
     vi.useFakeTimers()
     try {
-      const pending = routeTrip(input, { profile: 'driving', tripId: 7, timeoutMs: 8000 })
-      await vi.advanceTimersByTimeAsync(8100)
+      vi.mocked(calculateRouteWithLegs).mockImplementation(() => new Promise(resolve => {
+        setTimeout(() => resolve({ coordinates: [[48.86, 2.35], [48.90, 2.42]], distance: 10000, duration: 600, legs: [leg(10000)] }), 100)
+      }))
+      const onProgress = vi.fn<(done: number, total: number) => void>()
+      const pending = routeTrip({ ...input, days, assignments }, { profile: 'driving', tripId: 7, onProgress })
+      await vi.advanceTimersByTimeAsync(12 * 1200)
       const summary = await pending
 
-      // The shape of the trip survives...
-      expect(summary.lines).toHaveLength(2)
-      expect(summary.lines[0]).toEqual([[48.86, 2.35], [48.90, 2.42]])
-      // ...and nothing that never answered is counted.
-      expect(summary.totalDistance).toBe(0)
+      expect(calculateRouteWithLegs).toHaveBeenCalledTimes(12)
+      expect(summary.unroutedLegs).toBe(0)
+      expect(summary.totalDistance).toBe(120000)
+      expect(onProgress.mock.calls[0]).toEqual([0, 12])
+      expect(onProgress.mock.calls.map(([done]) => done)).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
+      expect(onProgress.mock.calls.every(([, total]) => total === 12)).toBe(true)
     } finally {
       vi.useRealTimers()
     }
   })
 
-  it('FE-MAP-TRG-006: a caller\'s own abort cuts the routing short too', async () => {
+  it("FE-MAP-TRG-006: a caller's own abort cuts the routing short, and what never answered is counted", async () => {
     neverAnswers()
     const controller = new AbortController()
-    const pending = routeTrip(input, { profile: 'driving', tripId: 7, timeoutMs: 60_000, signal: controller.signal })
+    const pending = routeTrip(input, { profile: 'driving', tripId: 7, signal: controller.signal })
     controller.abort()
 
-    await expect(pending).resolves.toMatchObject({ totalDistance: 0 })
+    await expect(pending).resolves.toMatchObject({ totalDistance: 0, unroutedLegs: 2 })
+  })
+
+  it('FE-MAP-TRG-014: a host that never answers costs one leg its road, not the whole round', async () => {
+    neverAnswers()
+    vi.useFakeTimers()
+    try {
+      const pending = routeTrip(input, { profile: 'driving', tripId: 7 })
+      await vi.advanceTimersByTimeAsync(30_000)
+      expect(calculateRouteWithLegs).toHaveBeenCalledTimes(1)
+      await vi.advanceTimersByTimeAsync(1100 + 30_000)
+      const summary = await pending
+
+      expect(calculateRouteWithLegs).toHaveBeenCalledTimes(2)
+      expect(summary.lines).toHaveLength(2)
+      expect(summary.unroutedLegs).toBe(2)
+    } finally {
+      vi.useRealTimers()
+    }
   })
 
   // The public OSRM hosts allow about one request a second. Every leg of every day at